diff --git a/app/interfaces/web/routes/profile.py b/app/interfaces/web/routes/profile.py
index 413c2f0..0462ed4 100644
--- a/app/interfaces/web/routes/profile.py
+++ b/app/interfaces/web/routes/profile.py
@@ -209,6 +209,76 @@ def _render_profile_shell(request: Request, flash: str):
     )
 
 
+def _render_profile_skills_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_skills_fragment.html" if include_oob else "profile/_skills_shell.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "skills_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
+def _render_profile_basics_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_basics_fragment.html" if include_oob else "profile/_basics.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "basics_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
+def _render_profile_formation_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_formation_fragment.html" if include_oob else "profile/_formation_shell.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "formation_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
+def _render_profile_projects_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_projects_fragment.html" if include_oob else "profile/_projects_shell.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "projects_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
+def _render_profile_experiences_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_experiences_fragment.html" if include_oob else "profile/_experiences_shell.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "experiences_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
 @router.get("/app/profile")
 def profile_index(request: Request, flash: str | None = None):
     context = _build_profile_context(flash=flash)
@@ -230,6 +300,31 @@ def profile_shell_partial(request: Request, flash: str | None = None):
     return _render_profile_shell(request, flash or "")
 
 
+@router.get("/app/profile/skills", response_class=HTMLResponse)
+def profile_skills_partial(request: Request, flash: str | None = None):
+    return _render_profile_skills_shell(request, flash or "")
+
+
+@router.get("/app/profile/basics", response_class=HTMLResponse)
+def profile_basics_partial(request: Request, flash: str | None = None):
+    return _render_profile_basics_shell(request, flash or "")
+
+
+@router.get("/app/profile/formation", response_class=HTMLResponse)
+def profile_formation_partial(request: Request, flash: str | None = None):
+    return _render_profile_formation_shell(request, flash or "")
+
+
+@router.get("/app/profile/projects", response_class=HTMLResponse)
+def profile_projects_partial(request: Request, flash: str | None = None):
+    return _render_profile_projects_shell(request, flash or "")
+
+
+@router.get("/app/profile/experiences", response_class=HTMLResponse)
+def profile_experiences_partial(request: Request, flash: str | None = None):
+    return _render_profile_experiences_shell(request, flash or "")
+
+
 @router.post("/app/profile/save")
 def save_profile(
     request: Request,
@@ -268,7 +363,7 @@ def save_profile(
     )
     flash = "profile_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_basics_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -287,7 +382,7 @@ def add_skill(
         flash = "skill_added" if result["success"] else "profile_error"
 
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_skills_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -296,7 +391,7 @@ def delete_skill(request: Request, skill_id: int):
     result = profile_repository.delete_skill(skill_id)
     flash = "skill_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_skills_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -333,7 +428,7 @@ def add_experience(
         )
         flash = "experience_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_experiences_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -367,7 +462,7 @@ def update_experience(
     )
     flash = "experience_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_experiences_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -376,7 +471,7 @@ def delete_experience(request: Request, experience_id: int):
     result = profile_repository.delete_experience(experience_id)
     flash = "experience_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_experiences_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -415,7 +510,7 @@ def add_project(
         )
         flash = "project_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_projects_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -451,7 +546,7 @@ def update_project(
     )
     flash = "project_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_projects_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -460,7 +555,7 @@ def delete_project(request: Request, project_id: int):
     result = profile_repository.delete_project(project_id)
     flash = "project_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_projects_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -493,7 +588,7 @@ def add_education(
         )
         flash = "education_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -502,7 +597,7 @@ def delete_education(request: Request, education_id: int):
     result = profile_repository.delete_education(education_id)
     flash = "education_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -533,7 +628,7 @@ def add_course(
         )
         flash = "course_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -542,7 +637,7 @@ def delete_course(request: Request, course_id: int):
     result = profile_repository.delete_course(course_id)
     flash = "course_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -573,7 +668,7 @@ def add_certification(
         )
         flash = "certification_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -582,6 +677,6 @@ def delete_certification(request: Request, certification_id: int):
     result = profile_repository.delete_certification(certification_id)
     flash = "certification_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
diff --git a/app/interfaces/web/static/css/app.css b/app/interfaces/web/static/css/app.css
index 4e637a8..b930856 100644
--- a/app/interfaces/web/static/css/app.css
+++ b/app/interfaces/web/static/css/app.css
@@ -1,3 +1,4 @@
+/* Layer 1: Design tokens */
 :root {
     --bg: #f5f7fb;
     --surface: #ffffff;
@@ -12,6 +13,7 @@
     --shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
 }
 
+/* Layer 2: Reset and base elements */
 * {
     box-sizing: border-box;
 }
@@ -27,6 +29,7 @@ a {
     color: var(--brand);
 }
 
+/* Layer 3: Global shell and page layout */
 .shell-header,
 .kpi-strip,
 .page-shell {
@@ -214,6 +217,7 @@ a {
     font-size: 0.92rem;
 }
 
+/* Layer 4: Shared surfaces, links and summary components */
 .primary-link,
 .stack-form button {
     display: inline-flex;
@@ -304,6 +308,7 @@ a {
     color: var(--muted);
 }
 
+/* Layer 5: Forms and interactive controls */
 .filter-form {
     display: grid;
     grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr) auto;
@@ -403,6 +408,7 @@ a {
     font: inherit;
 }
 
+/* Layer 6: Shared tables, rows, details and status states */
 .simple-table {
     display: grid;
     gap: 8px;
@@ -782,6 +788,7 @@ a {
     padding: 16px;
 }
 
+/* Layer 7: Vacancies feature */
 .inbox-workspace {
     align-items: start;
 }
@@ -1086,6 +1093,35 @@ a {
     margin: 0;
 }
 
+/* Layer 8: Applications feature */
+.application-row {
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: #fbfcfe;
+}
+
+.application-row:hover {
+    border-color: #bfdbfe;
+    background: #f8fbff;
+    transform: translateY(-1px);
+}
+
+.application-row.is-selected {
+    border-color: #b3c9ff;
+    background: #eef4ff;
+    box-shadow: inset 4px 0 0 #1d4ed8;
+}
+
+.application-list-panel,
+.application-detail-panel {
+    min-width: 0;
+}
+
+.application-detail-panel {
+    align-self: start;
+}
+
+/* Layer 9: Shared helpers and feedback */
 .pill-group {
     display: flex;
     flex-wrap: wrap;
@@ -1120,6 +1156,7 @@ a {
     margin: 0 0 8px;
 }
 
+/* Layer 10: Flash feedback states */
 .flash-message {
     margin-bottom: 14px;
     padding: 12px 14px;
@@ -1145,6 +1182,7 @@ a {
     color: #92400e;
 }
 
+/* Layer 11: Profile feature and CV preview */
 .profile-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -1457,6 +1495,7 @@ a {
     color: var(--text);
 }
 
+/* Layer 12: Responsive adjustments */
 @media (max-width: 900px) {
     .shell-header,
     .page-header {
diff --git a/app/interfaces/web/templates/applications/_filters.html b/app/interfaces/web/templates/applications/_filters.html
new file mode 100644
index 0000000..c10c9af
--- /dev/null
+++ b/app/interfaces/web/templates/applications/_filters.html
@@ -0,0 +1,35 @@
+<section class="panel filter-panel">
+    <form
+        class="filter-form"
+        method="get"
+        action="/app/applications"
+        hx-get="/app/applications/shell"
+        hx-target="#applications-shell"
+        hx-swap="outerHTML"
+        hx-push-url="true"
+    >
+        <label>
+            <span>Buscar</span>
+            <input type="text" name="q" value="{{ query }}" placeholder="Empresa o cargo">
+        </label>
+        <label>
+            <span>Estado</span>
+            <select name="state">
+                <option value="Todos"{% if current_state == "Todos" %} selected{% endif %}>Todos</option>
+                {% for option in follow_up_states %}
+                    <option value="{{ option }}"{% if option == current_state %} selected{% endif %}>{{ status_labels.get(option, option) }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <label>
+            <span>Por pagina</span>
+            <select name="page_size">
+                {% for option in pagination.page_size_options %}
+                    <option value="{{ option }}"{% if option == pagination.page_size %} selected{% endif %}>{{ option }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <input type="hidden" name="page" value="1">
+        <button class="secondary-action filter-submit" type="submit">Filtrar</button>
+    </form>
+</section>
diff --git a/app/interfaces/web/templates/applications/_list.html b/app/interfaces/web/templates/applications/_list.html
index 2ecb11b..a6e507c 100644
--- a/app/interfaces/web/templates/applications/_list.html
+++ b/app/interfaces/web/templates/applications/_list.html
@@ -9,7 +9,7 @@
         </div>
         {% for item in applications %}
             <a
-                class="table-row row-link{% if selected_application and selected_application.id == item.id %} is-selected{% endif %}"
+                class="table-row row-link application-row{% if selected_application and selected_application.id == item.id %} is-selected{% endif %}"
                 href="/app/applications?selected={{ item.id }}&q={{ query }}&state={{ current_state }}&page={{ pagination.page }}&page_size={{ pagination.page_size }}"
                 hx-get="/app/applications/shell?selected={{ item.id }}&q={{ query }}&state={{ current_state }}&page={{ pagination.page }}&page_size={{ pagination.page_size }}"
                 hx-target="#applications-shell"
@@ -27,31 +27,14 @@
             </a>
         {% endfor %}
     </div>
-    {% if pagination.total_pages > 1 %}
-        <div class="detail-actions">
-            {% if pagination.has_prev %}
-                <a
-                    class="secondary-link"
-                    href="/app/applications?q={{ query }}&state={{ current_state }}&page={{ pagination.prev_page }}&page_size={{ pagination.page_size }}"
-                    hx-get="/app/applications/shell?q={{ query }}&state={{ current_state }}&page={{ pagination.prev_page }}&page_size={{ pagination.page_size }}"
-                    hx-target="#applications-shell"
-                    hx-swap="outerHTML"
-                    hx-push-url="true"
-                >Anterior</a>
-            {% endif %}
-            <span class="muted-note">Pagina {{ pagination.page }} de {{ pagination.total_pages }}</span>
-            {% if pagination.has_next %}
-                <a
-                    class="secondary-link"
-                    href="/app/applications?q={{ query }}&state={{ current_state }}&page={{ pagination.next_page }}&page_size={{ pagination.page_size }}"
-                    hx-get="/app/applications/shell?q={{ query }}&state={{ current_state }}&page={{ pagination.next_page }}&page_size={{ pagination.page_size }}"
-                    hx-target="#applications-shell"
-                    hx-swap="outerHTML"
-                    hx-push-url="true"
-                >Siguiente</a>
-            {% endif %}
-        </div>
-    {% endif %}
+    {% set pagination_prev_href = "/app/applications?q=%s&state=%s&page=%s&page_size=%s"|format(query, current_state, pagination.prev_page, pagination.page_size) %}
+    {% set pagination_prev_hx_get = "/app/applications/shell?q=%s&state=%s&page=%s&page_size=%s"|format(query, current_state, pagination.prev_page, pagination.page_size) %}
+    {% set pagination_next_href = "/app/applications?q=%s&state=%s&page=%s&page_size=%s"|format(query, current_state, pagination.next_page, pagination.page_size) %}
+    {% set pagination_next_hx_get = "/app/applications/shell?q=%s&state=%s&page=%s&page_size=%s"|format(query, current_state, pagination.next_page, pagination.page_size) %}
+    {% set pagination_hx_target = "#applications-shell" %}
+    {% set pagination_hx_swap = "outerHTML" %}
+    {% set pagination_hx_push_url = "true" %}
+    {% include "components/_pagination.html" %}
 {% else %}
     <div class="empty-panel">
         <h3>Sin coincidencias</h3>
diff --git a/app/interfaces/web/templates/applications/_shell.html b/app/interfaces/web/templates/applications/_shell.html
index f087755..9073819 100644
--- a/app/interfaces/web/templates/applications/_shell.html
+++ b/app/interfaces/web/templates/applications/_shell.html
@@ -1,53 +1,19 @@
 {% if flash_message %}
-    <section class="flash-message flash-{{ flash_message[0] }}">
-        {{ flash_message[1] }}
-    </section>
+    {% set flash_tone = flash_message[0] %}
+    {% set flash_text = flash_message[1] %}
+    {% include "components/_flash.html" %}
 {% endif %}
 
-<section class="panel filter-panel">
-    <form
-        class="filter-form"
-        method="get"
-        action="/app/applications"
-        hx-get="/app/applications/shell"
-        hx-target="#applications-shell"
-        hx-swap="outerHTML"
-        hx-push-url="true"
-    >
-        <label>
-            <span>Buscar</span>
-            <input type="text" name="q" value="{{ query }}" placeholder="Empresa o cargo">
-        </label>
-        <label>
-            <span>Estado</span>
-            <select name="state">
-                <option value="Todos"{% if current_state == "Todos" %} selected{% endif %}>Todos</option>
-                {% for option in follow_up_states %}
-                    <option value="{{ option }}"{% if option == current_state %} selected{% endif %}>{{ status_labels.get(option, option) }}</option>
-                {% endfor %}
-            </select>
-        </label>
-        <label>
-            <span>Por pagina</span>
-            <select name="page_size">
-                {% for option in pagination.page_size_options %}
-                    <option value="{{ option }}"{% if option == pagination.page_size %} selected{% endif %}>{{ option }}</option>
-                {% endfor %}
-            </select>
-        </label>
-        <input type="hidden" name="page" value="1">
-        <button type="submit">Filtrar</button>
-    </form>
-</section>
+{% include "applications/_filters.html" %}
 
 <section class="layout-two-columns">
-    <section class="panel">
+    <section class="panel application-list-panel">
         <div id="application-list">
             {% include "applications/_list.html" %}
         </div>
     </section>
 
-    <div id="application-detail">
+    <div id="application-detail" class="application-detail-panel">
         {% include "applications/_detail.html" %}
     </div>
 </section>
diff --git a/app/interfaces/web/templates/applications/index.html b/app/interfaces/web/templates/applications/index.html
index 8897e0c..4075b9b 100644
--- a/app/interfaces/web/templates/applications/index.html
+++ b/app/interfaces/web/templates/applications/index.html
@@ -1,12 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="page-header">
-    <div>
-        <h1>Seguimiento</h1>
-        <p>Control simple de vacantes que ya te interesan o a las que ya aplicaste.</p>
-    </div>
-</section>
+{% set page_header_title = "Seguimiento" %}
+{% set page_header_description = "Control simple de vacantes que ya te interesan o a las que ya aplicaste." %}
+{% set page_header_copy_class = none %}
+{% include "components/_page_header.html" %}
 
 <div id="applications-shell">
     {% include "applications/_shell.html" %}
diff --git a/app/interfaces/web/templates/components/_flash.html b/app/interfaces/web/templates/components/_flash.html
new file mode 100644
index 0000000..c10d301
--- /dev/null
+++ b/app/interfaces/web/templates/components/_flash.html
@@ -0,0 +1,3 @@
+<section class="flash-message flash-{{ flash_tone }}">
+    {{ flash_text }}
+</section>
diff --git a/app/interfaces/web/templates/components/_page_header.html b/app/interfaces/web/templates/components/_page_header.html
new file mode 100644
index 0000000..3e0a299
--- /dev/null
+++ b/app/interfaces/web/templates/components/_page_header.html
@@ -0,0 +1,6 @@
+<section class="page-header">
+    <div{% if page_header_copy_class %} class="{{ page_header_copy_class }}"{% endif %}>
+        <h1>{{ page_header_title }}</h1>
+        <p>{{ page_header_description }}</p>
+    </div>
+</section>
diff --git a/app/interfaces/web/templates/components/_pagination.html b/app/interfaces/web/templates/components/_pagination.html
new file mode 100644
index 0000000..29d9af1
--- /dev/null
+++ b/app/interfaces/web/templates/components/_pagination.html
@@ -0,0 +1,25 @@
+{% if pagination.total_pages > 1 %}
+    <div class="detail-actions">
+        {% if pagination.has_prev %}
+            <a
+                class="secondary-link"
+                href="{{ pagination_prev_href }}"
+                hx-get="{{ pagination_prev_hx_get }}"
+                hx-target="{{ pagination_hx_target }}"
+                hx-swap="{{ pagination_hx_swap }}"
+                hx-push-url="{{ pagination_hx_push_url }}"
+            >Anterior</a>
+        {% endif %}
+        <span class="muted-note">Pagina {{ pagination.page }} de {{ pagination.total_pages }}</span>
+        {% if pagination.has_next %}
+            <a
+                class="secondary-link"
+                href="{{ pagination_next_href }}"
+                hx-get="{{ pagination_next_hx_get }}"
+                hx-target="{{ pagination_hx_target }}"
+                hx-swap="{{ pagination_hx_swap }}"
+                hx-push-url="{{ pagination_hx_push_url }}"
+            >Siguiente</a>
+        {% endif %}
+    </div>
+{% endif %}
diff --git a/app/interfaces/web/templates/profile/_basics.html b/app/interfaces/web/templates/profile/_basics.html
new file mode 100644
index 0000000..4e50e27
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_basics.html
@@ -0,0 +1,57 @@
+<section id="profile-basics-shell" class="panel">
+    {% if basics_flash_message %}
+        {% set flash_tone = basics_flash_message[0] %}
+        {% set flash_text = basics_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+    <div class="section-title">
+        <div>
+            <h2>Datos principales</h2>
+            <p>Estos datos alimentan el analisis de vacantes y el resumen general del perfil.</p>
+        </div>
+    </div>
+    <p class="section-caption">Los campos de esta seccion son la base del perfil y del contexto que consume el analizador.</p>
+    <form class="stack-form" method="post" action="/app/profile/save" hx-post="/app/profile/save" hx-target="#profile-basics-shell" hx-swap="outerHTML">
+        <div class="grid-two">
+            <label><span>Nombre completo</span><input type="text" name="nombre" placeholder="Ej. Jose Martinez" value="{{ profile.nombre if profile else '' }}"></label>
+            <label><span>Titulo profesional</span><input type="text" name="titulo_profesional" placeholder="Ej. Data Analyst | BI | SQL" value="{{ profile.titulo_profesional if profile else '' }}"></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Bogota" value="{{ profile.ciudad if profile else '' }}"></label>
+            <label><span>Celular</span><input type="text" name="celular" placeholder="Ej. 3001234567" value="{{ profile.celular if profile else '' }}"></label>
+        </div>
+        <label><span>Direccion</span><input type="text" name="direccion" placeholder="Opcional" value="{{ profile.direccion if profile else '' }}"></label>
+        <div class="grid-two">
+            <label><span>Correo</span><input type="email" name="correo" value="{{ profile.correo if profile else '' }}"></label>
+            <label>
+                <span>Nivel actual</span>
+                <select name="nivel_actual">
+                    {% for option in level_options %}
+                        <option value="{{ option }}"{% if profile and profile.nivel_actual == option %} selected{% endif %}>{{ option }}</option>
+                    {% endfor %}
+                </select>
+            </label>
+        </div>
+        <div class="grid-two">
+            <label><span>LinkedIn</span><input type="url" name="perfil_linkedin" placeholder="https://linkedin.com/in/..." value="{{ profile.perfil_linkedin if profile else '' }}"></label>
+            <label><span>GitHub</span><input type="url" name="perfil_github" placeholder="https://github.com/..." value="{{ profile.perfil_github if profile else '' }}"></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Anios de experiencia</span><input type="number" min="0" name="anos_experiencia" value="{{ profile.anos_experiencia if profile and profile.anos_experiencia is not none else 0 }}"></label>
+            <label><span>Salario minimo</span><input type="number" min="0" name="salario_min" value="{{ profile.salario_min if profile and profile.salario_min is not none else '' }}"></label>
+            <label><span>Salario maximo</span><input type="number" min="0" name="salario_max" value="{{ profile.salario_max if profile and profile.salario_max is not none else '' }}"></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Moneda</span><input type="text" name="moneda" value="{{ profile.moneda if profile else 'COP' }}"></label>
+            <fieldset class="checkbox-group">
+                <legend>Modalidades aceptadas</legend>
+                <div class="checkbox-list">
+                    {% for option in modality_options %}
+                        <label class="checkbox-item"><input type="checkbox" name="modalidades_aceptadas" value="{{ option }}"{% if option in selected_modalities %} checked{% endif %}><span>{{ option }}</span></label>
+                    {% endfor %}
+                </div>
+            </fieldset>
+        </div>
+        <button type="submit">Guardar perfil</button>
+    </form>
+</section>
diff --git a/app/interfaces/web/templates/profile/_basics_fragment.html b/app/interfaces/web/templates/profile/_basics_fragment.html
new file mode 100644
index 0000000..cb13dcc
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_basics_fragment.html
@@ -0,0 +1,7 @@
+{% set skills_shell_oob = true %}
+{% include "profile/_skills_shell.html" %}
+
+{% set cv_preview_oob = true %}
+{% include "profile/_cv_preview.html" %}
+
+{% include "profile/_basics.html" %}
diff --git a/app/interfaces/web/templates/profile/_certifications.html b/app/interfaces/web/templates/profile/_certifications.html
new file mode 100644
index 0000000..08fc722
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_certifications.html
@@ -0,0 +1,38 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Certificaciones</h2><p>Credenciales y badges relevantes para tus postulaciones.</p></div><span class="soft-badge">{{ certifications|length }} registros</span></div>
+    <details class="section-disclosure" {% if not certifications %}open{% endif %}>
+        <summary>Agregar certificacion</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/certifications" hx-post="/app/profile/certifications" hx-target="#profile-formation-shell" hx-swap="outerHTML">
+        <div class="grid-two">
+            <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. AWS Certified Data Analytics" required></label>
+            <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Amazon Web Services" required></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Fecha obtencion</span><input type="date" name="fecha_obtencion" required></label>
+            <label><span>Fecha vencimiento</span><input type="date" name="fecha_vencimiento"></label>
+            <label><span>Estado</span><select name="status">{% for option in certification_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
+        </div>
+        <label><span>URL certificado</span><input type="url" name="url_certificado"></label>
+        <button type="submit">Agregar certificacion</button>
+        </form>
+    </details>
+    {% if certifications %}
+        <div class="record-list compact-record-list">
+            {% for item in certifications %}
+                <article class="record-card">
+                    <div class="record-header">
+                        <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }}</p></div>
+                        <span class="soft-badge">{{ item.status }}</span>
+                    </div>
+                    <div class="detail-actions">
+                        <form method="post" action="/app/profile/certifications/{{ item.id }}/delete" hx-post="/app/profile/certifications/{{ item.id }}/delete" hx-target="#profile-formation-shell" hx-swap="outerHTML">
+                            <button type="submit" class="danger-action">Eliminar</button>
+                        </form>
+                    </div>
+                </article>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin certificaciones registradas</h3><p>No hay certificaciones cargadas todavia.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_courses.html b/app/interfaces/web/templates/profile/_courses.html
new file mode 100644
index 0000000..9b0030e
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_courses.html
@@ -0,0 +1,38 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Cursos</h2><p>Formacion complementaria para reforzar tu perfil.</p></div><span class="soft-badge">{{ courses|length }} registros</span></div>
+    <details class="section-disclosure" {% if not courses %}open{% endif %}>
+        <summary>Agregar curso</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/courses" hx-post="/app/profile/courses" hx-target="#profile-formation-shell" hx-swap="outerHTML">
+        <div class="grid-two">
+            <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. SQL para analisis de datos" required></label>
+            <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Coursera" required></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Fecha inicio</span><input type="date" name="fecha_inicio"></label>
+            <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
+            <label><span>Estado</span><select name="status">{% for option in course_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
+        </div>
+        <label><span>URL certificado</span><input type="url" name="url_certificado"></label>
+        <button type="submit">Agregar curso</button>
+        </form>
+    </details>
+    {% if courses %}
+        <div class="record-list compact-record-list">
+            {% for item in courses %}
+                <article class="record-card">
+                    <div class="record-header">
+                        <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }}</p></div>
+                        <span class="soft-badge">{{ item.status }}</span>
+                    </div>
+                    <div class="detail-actions">
+                        <form method="post" action="/app/profile/courses/{{ item.id }}/delete" hx-post="/app/profile/courses/{{ item.id }}/delete" hx-target="#profile-formation-shell" hx-swap="outerHTML">
+                            <button type="submit" class="danger-action">Eliminar</button>
+                        </form>
+                    </div>
+                </article>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin cursos registrados</h3><p>No hay cursos cargados todavia.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_cv_preview.html b/app/interfaces/web/templates/profile/_cv_preview.html
new file mode 100644
index 0000000..7cb7033
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_cv_preview.html
@@ -0,0 +1,16 @@
+<section id="profile-cv-preview" class="panel cv-panel"{% if cv_preview_oob %} hx-swap-oob="outerHTML"{% endif %}>
+    <div class="section-title">
+        <div>
+            <h2>Vista CV</h2>
+            <p>Vista de solo lectura del perfil consolidado para revisar como se presentaria tu hoja de vida.</p>
+        </div>
+    </div>
+    {% if cv_preview_html %}
+        {{ cv_preview_html | safe }}
+    {% else %}
+        <div class="empty-panel">
+            <h3>Sin vista CV disponible</h3>
+            <p>Completa los datos principales del perfil para generar esta vista.</p>
+        </div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_education.html b/app/interfaces/web/templates/profile/_education.html
new file mode 100644
index 0000000..828c86e
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_education.html
@@ -0,0 +1,41 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Educacion</h2><p>Formacion academica principal.</p></div><span class="soft-badge">{{ education|length }} registros</span></div>
+    <details class="section-disclosure" {% if not education %}open{% endif %}>
+        <summary>Agregar educacion</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/education" hx-post="/app/profile/education" hx-target="#profile-formation-shell" hx-swap="outerHTML">
+        <div class="grid-two">
+            <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. Ingenieria de Sistemas" required></label>
+            <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Universidad Nacional" required></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Nivel</span><select name="nivel">{% for option in education_level_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
+            <label><span>Ciudad</span><input type="text" name="ciudad"></label>
+            <label><span>Estado</span><select name="status">{% for option in education_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
+            <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
+        </div>
+        <button type="submit">Agregar educacion</button>
+        </form>
+    </details>
+    {% if education %}
+        <div class="record-list compact-record-list">
+            {% for item in education %}
+                <article class="record-card">
+                    <div class="record-header">
+                        <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }} · {{ item.nivel }}</p></div>
+                        <span class="soft-badge">{{ item.status }}</span>
+                    </div>
+                    <div class="detail-actions">
+                        <form method="post" action="/app/profile/education/{{ item.id }}/delete" hx-post="/app/profile/education/{{ item.id }}/delete" hx-target="#profile-formation-shell" hx-swap="outerHTML">
+                            <button type="submit" class="danger-action">Eliminar</button>
+                        </form>
+                    </div>
+                </article>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin educacion registrada</h3><p>No hay estudios cargados todavia.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_experience_record.html b/app/interfaces/web/templates/profile/_experience_record.html
new file mode 100644
index 0000000..af63a23
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_experience_record.html
@@ -0,0 +1,31 @@
+<details class="record-card record-disclosure">
+    <summary class="record-summary">
+        <div class="record-header">
+            <div><h3>{{ item.cargo }} · {{ item.empresa }}</h3><p>{{ item.ciudad or '-' }}</p></div>
+            <span class="soft-badge">{{ item.fecha_inicio.strftime("%m/%Y") if item.fecha_inicio else "-" }} - {% if item.es_trabajo_actual %}Actual{% elif item.fecha_fin %}{{ item.fecha_fin.strftime("%m/%Y") }}{% else %}-{% endif %}</span>
+        </div>
+    </summary>
+    <div class="disclosure-body">
+        <form class="stack-form compact-form" method="post" action="/app/profile/experiences/{{ item.id }}/update" hx-post="/app/profile/experiences/{{ item.id }}/update" hx-target="#profile-experiences-shell" hx-swap="outerHTML">
+            <div class="grid-two">
+                <label><span>Cargo</span><input type="text" name="cargo" value="{{ item.cargo }}" required></label>
+                <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa }}" required></label>
+            </div>
+            <div class="grid-two">
+                <label><span>Ciudad</span><input type="text" name="ciudad" value="{{ item.ciudad or '' }}"></label>
+                <label><span>Descripcion empresa</span><input type="text" name="descripcion_empresa" value="{{ item.descripcion_empresa or '' }}"></label>
+            </div>
+            <div class="grid-three">
+                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" value="{{ item.fecha_inicio.isoformat() if item.fecha_inicio else '' }}" required></label>
+                <label><span>Fecha fin</span><input type="date" name="fecha_fin" value="{{ item.fecha_fin.isoformat() if item.fecha_fin else '' }}"></label>
+                <label class="checkbox-inline"><input type="checkbox" name="es_trabajo_actual" value="true"{% if item.es_trabajo_actual %} checked{% endif %}><span>Trabajo actual</span></label>
+            </div>
+            <label><span>Funciones</span><textarea name="funciones" rows="4">{{ item.funciones or '' }}</textarea></label>
+            <label><span>Logros</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
+            <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
+        </form>
+        <form method="post" action="/app/profile/experiences/{{ item.id }}/delete" hx-post="/app/profile/experiences/{{ item.id }}/delete" hx-target="#profile-experiences-shell" hx-swap="outerHTML">
+            <button type="submit" class="danger-action">Eliminar</button>
+        </form>
+    </div>
+</details>
diff --git a/app/interfaces/web/templates/profile/_experiences.html b/app/interfaces/web/templates/profile/_experiences.html
new file mode 100644
index 0000000..bd8e653
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_experiences.html
@@ -0,0 +1,33 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Experiencia</h2><p>Registra y actualiza tu trayectoria laboral actual.</p></div><span class="soft-badge">{{ experiences|length }} registradas</span></div>
+    <details class="section-disclosure" {% if not experiences %}open{% endif %}>
+        <summary>Agregar experiencia</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/experiences" hx-post="/app/profile/experiences" hx-target="#profile-experiences-shell" hx-swap="outerHTML">
+        <div class="grid-two">
+            <label><span>Cargo</span><input type="text" name="cargo" placeholder="Ej. Data Analyst" required></label>
+            <label><span>Empresa</span><input type="text" name="empresa" placeholder="Ej. Bancolombia" required></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Medellin"></label>
+            <label><span>Descripcion empresa</span><input type="text" name="descripcion_empresa" placeholder="Ej. Fintech, 500+ empleados"></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
+            <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
+            <label class="checkbox-inline"><input type="checkbox" name="es_trabajo_actual" value="true"><span>Trabajo actual</span></label>
+        </div>
+        <label><span>Funciones</span><textarea name="funciones" rows="4"></textarea></label>
+        <label><span>Logros</span><textarea name="logros" rows="4"></textarea></label>
+        <button type="submit">Agregar experiencia</button>
+        </form>
+    </details>
+    {% if experiences %}
+        <div class="record-list">
+            {% for item in experiences %}
+                {% include "profile/_experience_record.html" %}
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin experiencia registrada</h3><p>Aun no hay experiencias cargadas en el perfil.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_experiences_fragment.html b/app/interfaces/web/templates/profile/_experiences_fragment.html
new file mode 100644
index 0000000..c7ca43f
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_experiences_fragment.html
@@ -0,0 +1,11 @@
+<div id="profile-overview" hx-swap-oob="innerHTML">
+    {% include "profile/_overview.html" %}
+</div>
+
+{% set skills_shell_oob = true %}
+{% include "profile/_skills_shell.html" %}
+
+{% set cv_preview_oob = true %}
+{% include "profile/_cv_preview.html" %}
+
+{% include "profile/_experiences_shell.html" %}
diff --git a/app/interfaces/web/templates/profile/_experiences_shell.html b/app/interfaces/web/templates/profile/_experiences_shell.html
new file mode 100644
index 0000000..cd25238
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_experiences_shell.html
@@ -0,0 +1,11 @@
+<section id="profile-experiences-shell">
+    {% if experiences_flash_message %}
+        {% set flash_tone = experiences_flash_message[0] %}
+        {% set flash_text = experiences_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+
+    <section class="profile-sections-grid">
+        {% include "profile/_experiences.html" %}
+    </section>
+</section>
diff --git a/app/interfaces/web/templates/profile/_formation_fragment.html b/app/interfaces/web/templates/profile/_formation_fragment.html
new file mode 100644
index 0000000..1314b26
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_formation_fragment.html
@@ -0,0 +1,11 @@
+<div id="profile-overview" hx-swap-oob="innerHTML">
+    {% include "profile/_overview.html" %}
+</div>
+
+{% set skills_shell_oob = true %}
+{% include "profile/_skills_shell.html" %}
+
+{% set cv_preview_oob = true %}
+{% include "profile/_cv_preview.html" %}
+
+{% include "profile/_formation_shell.html" %}
diff --git a/app/interfaces/web/templates/profile/_formation_shell.html b/app/interfaces/web/templates/profile/_formation_shell.html
new file mode 100644
index 0000000..3a4a353
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_formation_shell.html
@@ -0,0 +1,16 @@
+<section id="profile-formation-shell">
+    {% if formation_flash_message %}
+        {% set flash_tone = formation_flash_message[0] %}
+        {% set flash_text = formation_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+
+    <section class="profile-sections-grid">
+        {% include "profile/_education.html" %}
+        {% include "profile/_courses.html" %}
+    </section>
+
+    <section class="profile-sections-grid">
+        {% include "profile/_certifications.html" %}
+    </section>
+</section>
diff --git a/app/interfaces/web/templates/profile/_overview.html b/app/interfaces/web/templates/profile/_overview.html
new file mode 100644
index 0000000..74a5af6
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_overview.html
@@ -0,0 +1,16 @@
+<section class="summary-strip profile-summary-strip">
+    <article class="summary-card"><div class="summary-label">Skills</div><div class="summary-value">{{ skills|length }}</div></article>
+    <article class="summary-card"><div class="summary-label">Experiencias</div><div class="summary-value">{{ experiences|length }}</div></article>
+    <article class="summary-card"><div class="summary-label">Formacion</div><div class="summary-value">{{ education|length + courses|length + certifications|length }}</div></article>
+</section>
+
+<section class="profile-hint-grid">
+    <article class="helper-box soft">
+        <h3>Como usar esta pantalla</h3>
+        <p>Empieza por datos principales y skills. Luego completa experiencia y proyectos para mejorar el analisis de vacantes.</p>
+    </article>
+    <article class="helper-box">
+        <h3>Vista CV</h3>
+        <p>La vista CV se actualiza con la informacion registrada aqui y te sirve para revisar la consistencia general del perfil.</p>
+    </article>
+</section>
diff --git a/app/interfaces/web/templates/profile/_profile_status.html b/app/interfaces/web/templates/profile/_profile_status.html
new file mode 100644
index 0000000..9aec520
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_profile_status.html
@@ -0,0 +1,14 @@
+<section class="panel helper-panel">
+    <h2>Estado del perfil</h2>
+    <ul class="flow-list">
+        <li>Datos principales: {% if profile %}configurados{% else %}pendientes{% endif %}</li>
+        <li>Skills registradas: {{ skills|length }}</li>
+        <li>Experiencias registradas: {{ experiences|length }}</li>
+        <li>Proyectos registrados: {{ projects|length }}</li>
+        <li>Formacion registrada: {{ education|length + courses|length + certifications|length }}</li>
+    </ul>
+    <div class="helper-box soft">
+        <h3>Estado de migracion</h3>
+        <p>Mi Perfil ya puede mantenerse desde la web para el flujo principal del producto.</p>
+    </div>
+</section>
diff --git a/app/interfaces/web/templates/profile/_project_record.html b/app/interfaces/web/templates/profile/_project_record.html
new file mode 100644
index 0000000..25ef504
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_project_record.html
@@ -0,0 +1,32 @@
+<details class="record-card record-disclosure">
+    <summary class="record-summary">
+        <div class="record-header">
+            <div><h3>{{ item.nombre }}</h3><p>{{ item.empresa or 'Proyecto personal' }}</p></div>
+            {% if item.stack %}<span class="soft-badge">{{ item.stack }}</span>{% endif %}
+        </div>
+    </summary>
+    <div class="disclosure-body">
+        <form class="stack-form compact-form" method="post" action="/app/profile/projects/{{ item.id }}/update" hx-post="/app/profile/projects/{{ item.id }}/update" hx-target="#profile-projects-shell" hx-swap="outerHTML">
+            <div class="grid-two">
+                <label><span>Nombre</span><input type="text" name="nombre" value="{{ item.nombre }}" required></label>
+                <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa or '' }}"></label>
+            </div>
+            <div class="grid-two">
+                <label><span>Ciudad</span><input type="text" name="ciudad" value="{{ item.ciudad or '' }}"></label>
+                <label><span>Stack</span><input type="text" name="stack" value="{{ item.stack or '' }}"></label>
+            </div>
+            <div class="grid-three">
+                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" value="{{ item.fecha_inicio.isoformat() if item.fecha_inicio else '' }}" required></label>
+                <label><span>Fecha fin</span><input type="date" name="fecha_fin" value="{{ item.fecha_fin.isoformat() if item.fecha_fin else '' }}"></label>
+                <label class="checkbox-inline"><input type="checkbox" name="es_proyecto_actual" value="true"{% if item.es_proyecto_actual %} checked{% endif %}><span>En curso</span></label>
+            </div>
+            <label><span>URL repositorio</span><input type="url" name="url_repositorio" value="{{ item.url_repositorio or '' }}"></label>
+            <label><span>Descripcion</span><textarea name="funciones" rows="4">{{ item.funciones or '' }}</textarea></label>
+            <label><span>Logros / impacto</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
+            <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
+        </form>
+        <form method="post" action="/app/profile/projects/{{ item.id }}/delete" hx-post="/app/profile/projects/{{ item.id }}/delete" hx-target="#profile-projects-shell" hx-swap="outerHTML">
+            <button type="submit" class="danger-action">Eliminar</button>
+        </form>
+    </div>
+</details>
diff --git a/app/interfaces/web/templates/profile/_projects.html b/app/interfaces/web/templates/profile/_projects.html
new file mode 100644
index 0000000..078344a
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_projects.html
@@ -0,0 +1,34 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Proyectos</h2><p>Proyectos que respaldan tu experiencia tecnica.</p></div><span class="soft-badge">{{ projects|length }} registrados</span></div>
+    <details class="section-disclosure" {% if not projects %}open{% endif %}>
+        <summary>Agregar proyecto</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/projects" hx-post="/app/profile/projects" hx-target="#profile-projects-shell" hx-swap="outerHTML">
+        <div class="grid-two">
+            <label><span>Nombre</span><input type="text" name="nombre" placeholder="Ej. Dashboard de ventas" required></label>
+            <label><span>Empresa</span><input type="text" name="empresa" placeholder="Opcional"></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Bogota"></label>
+            <label><span>Stack</span><input type="text" name="stack" placeholder="Python, SQL, Power BI"></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
+            <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
+            <label class="checkbox-inline"><input type="checkbox" name="es_proyecto_actual" value="true"><span>En curso</span></label>
+        </div>
+        <label><span>URL repositorio</span><input type="url" name="url_repositorio"></label>
+        <label><span>Descripcion</span><textarea name="funciones" rows="4"></textarea></label>
+        <label><span>Logros / impacto</span><textarea name="logros" rows="4"></textarea></label>
+        <button type="submit">Agregar proyecto</button>
+        </form>
+    </details>
+    {% if projects %}
+        <div class="record-list">
+            {% for item in projects %}
+                {% include "profile/_project_record.html" %}
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin proyectos registrados</h3><p>No hay proyectos cargados todavia.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_projects_fragment.html b/app/interfaces/web/templates/profile/_projects_fragment.html
new file mode 100644
index 0000000..74e0541
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_projects_fragment.html
@@ -0,0 +1,4 @@
+{% set skills_shell_oob = true %}
+{% include "profile/_skills_shell.html" %}
+
+{% include "profile/_projects_shell.html" %}
diff --git a/app/interfaces/web/templates/profile/_projects_shell.html b/app/interfaces/web/templates/profile/_projects_shell.html
new file mode 100644
index 0000000..fa78023
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_projects_shell.html
@@ -0,0 +1,11 @@
+<section id="profile-projects-shell">
+    {% if projects_flash_message %}
+        {% set flash_tone = projects_flash_message[0] %}
+        {% set flash_text = projects_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+
+    <section class="profile-sections-grid">
+        {% include "profile/_projects.html" %}
+    </section>
+</section>
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index 922b81d..044c2a8 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -1,411 +1,27 @@
 {% if flash_message %}
-    <section class="flash-message flash-{{ flash_message[0] }}">{{ flash_message[1] }}</section>
+    {% set flash_tone = flash_message[0] %}
+    {% set flash_text = flash_message[1] %}
+    {% include "components/_flash.html" %}
 {% endif %}
 
-<section class="summary-strip profile-summary-strip">
-    <article class="summary-card"><div class="summary-label">Skills</div><div class="summary-value">{{ skills|length }}</div></article>
-    <article class="summary-card"><div class="summary-label">Experiencias</div><div class="summary-value">{{ experiences|length }}</div></article>
-    <article class="summary-card"><div class="summary-label">Formacion</div><div class="summary-value">{{ education|length + courses|length + certifications|length }}</div></article>
-</section>
-
-<section class="profile-hint-grid">
-    <article class="helper-box soft">
-        <h3>Como usar esta pantalla</h3>
-        <p>Empieza por datos principales y skills. Luego completa experiencia y proyectos para mejorar el analisis de vacantes.</p>
-    </article>
-    <article class="helper-box">
-        <h3>Vista CV</h3>
-        <p>La vista CV se actualiza con la informacion registrada aqui y te sirve para revisar la consistencia general del perfil.</p>
-    </article>
-</section>
+<div id="profile-overview">
+    {% include "profile/_overview.html" %}
+</div>
 
 <section class="layout-two-columns profile-layout">
-    <section class="panel">
-        <div class="section-title">
-            <div>
-                <h2>Datos principales</h2>
-                <p>Estos datos alimentan el analisis de vacantes y el resumen general del perfil.</p>
-            </div>
-        </div>
-        <p class="section-caption">Los campos de esta seccion son la base del perfil y del contexto que consume el analizador.</p>
-        <form class="stack-form" method="post" action="/app/profile/save" hx-post="/app/profile/save" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Nombre completo</span><input type="text" name="nombre" placeholder="Ej. Jose Martinez" value="{{ profile.nombre if profile else '' }}"></label>
-                <label><span>Titulo profesional</span><input type="text" name="titulo_profesional" placeholder="Ej. Data Analyst | BI | SQL" value="{{ profile.titulo_profesional if profile else '' }}"></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Bogota" value="{{ profile.ciudad if profile else '' }}"></label>
-                <label><span>Celular</span><input type="text" name="celular" placeholder="Ej. 3001234567" value="{{ profile.celular if profile else '' }}"></label>
-            </div>
-            <label><span>Direccion</span><input type="text" name="direccion" placeholder="Opcional" value="{{ profile.direccion if profile else '' }}"></label>
-            <div class="grid-two">
-                <label><span>Correo</span><input type="email" name="correo" value="{{ profile.correo if profile else '' }}"></label>
-                <label>
-                    <span>Nivel actual</span>
-                    <select name="nivel_actual">
-                        {% for option in level_options %}
-                            <option value="{{ option }}"{% if profile and profile.nivel_actual == option %} selected{% endif %}>{{ option }}</option>
-                        {% endfor %}
-                    </select>
-                </label>
-            </div>
-            <div class="grid-two">
-                <label><span>LinkedIn</span><input type="url" name="perfil_linkedin" placeholder="https://linkedin.com/in/..." value="{{ profile.perfil_linkedin if profile else '' }}"></label>
-                <label><span>GitHub</span><input type="url" name="perfil_github" placeholder="https://github.com/..." value="{{ profile.perfil_github if profile else '' }}"></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Anios de experiencia</span><input type="number" min="0" name="anos_experiencia" value="{{ profile.anos_experiencia if profile and profile.anos_experiencia is not none else 0 }}"></label>
-                <label><span>Salario minimo</span><input type="number" min="0" name="salario_min" value="{{ profile.salario_min if profile and profile.salario_min is not none else '' }}"></label>
-                <label><span>Salario maximo</span><input type="number" min="0" name="salario_max" value="{{ profile.salario_max if profile and profile.salario_max is not none else '' }}"></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Moneda</span><input type="text" name="moneda" value="{{ profile.moneda if profile else 'COP' }}"></label>
-                <fieldset class="checkbox-group">
-                    <legend>Modalidades aceptadas</legend>
-                    <div class="checkbox-list">
-                        {% for option in modality_options %}
-                            <label class="checkbox-item"><input type="checkbox" name="modalidades_aceptadas" value="{{ option }}"{% if option in selected_modalities %} checked{% endif %}><span>{{ option }}</span></label>
-                        {% endfor %}
-                    </div>
-                </fieldset>
-            </div>
-            <button type="submit">Guardar perfil</button>
-        </form>
-    </section>
+    {% include "profile/_basics.html" %}
 
-    <section class="stack-panel">
-        <section class="panel">
-            <div class="section-title">
-                <div>
-                    <h2>Skills</h2>
-                    <p>Manten tus skills clave visibles para el analisis de afinidad.</p>
-                </div>
-            </div>
-            <p class="section-caption">Mantener skills claras y concretas ayuda a que la afinidad con vacantes sea mas fiable.</p>
-            <form class="stack-form compact-form" method="post" action="/app/profile/skills" hx-post="/app/profile/skills" hx-target="#profile-shell" hx-swap="innerHTML">
-                <div class="grid-two">
-                    <label><span>Categoria</span><input type="text" name="categoria" placeholder="Ej. Data, BI, Backend" required></label>
-                    <label><span>Skill</span><input type="text" name="skill" placeholder="Ej. SQL" required></label>
-                </div>
-                <label>
-                    <span>Nivel</span>
-                    <select name="nivel">
-                        {% for option in skill_level_options %}
-                            <option value="{{ option }}">{{ option }}</option>
-                        {% endfor %}
-                    </select>
-                </label>
-                <button type="submit">Agregar skill</button>
-            </form>
-            {% if skills %}
-                <div class="record-list compact-record-list">
-                    {% for item in skills %}
-                        <article class="record-card">
-                            <div class="record-header">
-                                <div>
-                                    <h3>{{ item.skill }}</h3>
-                                    <p>{{ item.categoria }} · {{ item.nivel }}</p>
-                                </div>
-                                <form method="post" action="/app/profile/skills/{{ item.id }}/delete" hx-post="/app/profile/skills/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                    <button type="submit" class="danger-action">Eliminar</button>
-                                </form>
-                            </div>
-                        </article>
-                    {% endfor %}
-                </div>
-            {% else %}
-                <div class="empty-panel"><h3>Sin skills</h3><p>Agrega tus skills principales para que el analisis de vacantes sea mas preciso.</p></div>
-            {% endif %}
-        </section>
-
-        <section class="panel helper-panel">
-            <h2>Estado del perfil</h2>
-            <ul class="flow-list">
-                <li>Datos principales: {% if profile %}configurados{% else %}pendientes{% endif %}</li>
-                <li>Skills registradas: {{ skills|length }}</li>
-                <li>Experiencias registradas: {{ experiences|length }}</li>
-                <li>Proyectos registrados: {{ projects|length }}</li>
-                <li>Formacion registrada: {{ education|length + courses|length + certifications|length }}</li>
-            </ul>
-            <div class="helper-box soft">
-                <h3>Estado de migracion</h3>
-                <p>Mi Perfil ya puede mantenerse desde la web para el flujo principal del producto.</p>
-            </div>
-        </section>
-    </section>
+    {% include "profile/_skills_shell.html" %}
 </section>
 
 <section class="profile-sections-grid">
-    <section class="panel">
-        <div class="section-title"><div><h2>Experiencia</h2><p>Registra y actualiza tu trayectoria laboral actual.</p></div><span class="soft-badge">{{ experiences|length }} registradas</span></div>
-        <details class="section-disclosure" {% if not experiences %}open{% endif %}>
-            <summary>Agregar experiencia</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/experiences" hx-post="/app/profile/experiences" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Cargo</span><input type="text" name="cargo" placeholder="Ej. Data Analyst" required></label>
-                <label><span>Empresa</span><input type="text" name="empresa" placeholder="Ej. Bancolombia" required></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Medellin"></label>
-                <label><span>Descripcion empresa</span><input type="text" name="descripcion_empresa" placeholder="Ej. Fintech, 500+ empleados"></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
-                <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
-                <label class="checkbox-inline"><input type="checkbox" name="es_trabajo_actual" value="true"><span>Trabajo actual</span></label>
-            </div>
-            <label><span>Funciones</span><textarea name="funciones" rows="4"></textarea></label>
-            <label><span>Logros</span><textarea name="logros" rows="4"></textarea></label>
-            <button type="submit">Agregar experiencia</button>
-            </form>
-        </details>
-        {% if experiences %}
-            <div class="record-list">
-                {% for item in experiences %}
-                    <details class="record-card record-disclosure">
-                        <summary class="record-summary">
-                            <div class="record-header">
-                                <div><h3>{{ item.cargo }} · {{ item.empresa }}</h3><p>{{ item.ciudad or '-' }}</p></div>
-                                <span class="soft-badge">{{ item.fecha_inicio.strftime("%m/%Y") if item.fecha_inicio else "-" }} - {% if item.es_trabajo_actual %}Actual{% elif item.fecha_fin %}{{ item.fecha_fin.strftime("%m/%Y") }}{% else %}-{% endif %}</span>
-                            </div>
-                        </summary>
-                        <div class="disclosure-body">
-                            <form class="stack-form compact-form" method="post" action="/app/profile/experiences/{{ item.id }}/update" hx-post="/app/profile/experiences/{{ item.id }}/update" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <div class="grid-two">
-                                    <label><span>Cargo</span><input type="text" name="cargo" value="{{ item.cargo }}" required></label>
-                                    <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa }}" required></label>
-                                </div>
-                                <div class="grid-two">
-                                    <label><span>Ciudad</span><input type="text" name="ciudad" value="{{ item.ciudad or '' }}"></label>
-                                    <label><span>Descripcion empresa</span><input type="text" name="descripcion_empresa" value="{{ item.descripcion_empresa or '' }}"></label>
-                                </div>
-                                <div class="grid-three">
-                                    <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" value="{{ item.fecha_inicio.isoformat() if item.fecha_inicio else '' }}" required></label>
-                                    <label><span>Fecha fin</span><input type="date" name="fecha_fin" value="{{ item.fecha_fin.isoformat() if item.fecha_fin else '' }}"></label>
-                                    <label class="checkbox-inline"><input type="checkbox" name="es_trabajo_actual" value="true"{% if item.es_trabajo_actual %} checked{% endif %}><span>Trabajo actual</span></label>
-                                </div>
-                                <label><span>Funciones</span><textarea name="funciones" rows="4">{{ item.funciones or '' }}</textarea></label>
-                                <label><span>Logros</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
-                                <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
-                            </form>
-                            <form method="post" action="/app/profile/experiences/{{ item.id }}/delete" hx-post="/app/profile/experiences/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </details>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin experiencia registrada</h3><p>Aun no hay experiencias cargadas en el perfil.</p></div>
-        {% endif %}
-    </section>
+    {% include "profile/_experiences_shell.html" %}
 
-    <section class="panel">
-        <div class="section-title"><div><h2>Proyectos</h2><p>Proyectos que respaldan tu experiencia tecnica.</p></div><span class="soft-badge">{{ projects|length }} registrados</span></div>
-        <details class="section-disclosure" {% if not projects %}open{% endif %}>
-            <summary>Agregar proyecto</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/projects" hx-post="/app/profile/projects" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Nombre</span><input type="text" name="nombre" placeholder="Ej. Dashboard de ventas" required></label>
-                <label><span>Empresa</span><input type="text" name="empresa" placeholder="Opcional"></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Bogota"></label>
-                <label><span>Stack</span><input type="text" name="stack" placeholder="Python, SQL, Power BI"></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
-                <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
-                <label class="checkbox-inline"><input type="checkbox" name="es_proyecto_actual" value="true"><span>En curso</span></label>
-            </div>
-            <label><span>URL repositorio</span><input type="url" name="url_repositorio"></label>
-            <label><span>Descripcion</span><textarea name="funciones" rows="4"></textarea></label>
-            <label><span>Logros / impacto</span><textarea name="logros" rows="4"></textarea></label>
-            <button type="submit">Agregar proyecto</button>
-            </form>
-        </details>
-        {% if projects %}
-            <div class="record-list">
-                {% for item in projects %}
-                    <details class="record-card record-disclosure">
-                        <summary class="record-summary">
-                            <div class="record-header">
-                                <div><h3>{{ item.nombre }}</h3><p>{{ item.empresa or 'Proyecto personal' }}</p></div>
-                                {% if item.stack %}<span class="soft-badge">{{ item.stack }}</span>{% endif %}
-                            </div>
-                        </summary>
-                        <div class="disclosure-body">
-                            <form class="stack-form compact-form" method="post" action="/app/profile/projects/{{ item.id }}/update" hx-post="/app/profile/projects/{{ item.id }}/update" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <div class="grid-two">
-                                    <label><span>Nombre</span><input type="text" name="nombre" value="{{ item.nombre }}" required></label>
-                                    <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa or '' }}"></label>
-                                </div>
-                                <div class="grid-two">
-                                    <label><span>Ciudad</span><input type="text" name="ciudad" value="{{ item.ciudad or '' }}"></label>
-                                    <label><span>Stack</span><input type="text" name="stack" value="{{ item.stack or '' }}"></label>
-                                </div>
-                                <div class="grid-three">
-                                    <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" value="{{ item.fecha_inicio.isoformat() if item.fecha_inicio else '' }}" required></label>
-                                    <label><span>Fecha fin</span><input type="date" name="fecha_fin" value="{{ item.fecha_fin.isoformat() if item.fecha_fin else '' }}"></label>
-                                    <label class="checkbox-inline"><input type="checkbox" name="es_proyecto_actual" value="true"{% if item.es_proyecto_actual %} checked{% endif %}><span>En curso</span></label>
-                                </div>
-                                <label><span>URL repositorio</span><input type="url" name="url_repositorio" value="{{ item.url_repositorio or '' }}"></label>
-                                <label><span>Descripcion</span><textarea name="funciones" rows="4">{{ item.funciones or '' }}</textarea></label>
-                                <label><span>Logros / impacto</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
-                                <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
-                            </form>
-                            <form method="post" action="/app/profile/projects/{{ item.id }}/delete" hx-post="/app/profile/projects/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </details>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin proyectos registrados</h3><p>No hay proyectos cargados todavia.</p></div>
-        {% endif %}
-    </section>
+    {% include "profile/_projects_shell.html" %}
 </section>
 
-<section class="profile-sections-grid">
-    <section class="panel">
-        <div class="section-title"><div><h2>Educacion</h2><p>Formacion academica principal.</p></div><span class="soft-badge">{{ education|length }} registros</span></div>
-        <details class="section-disclosure" {% if not education %}open{% endif %}>
-            <summary>Agregar educacion</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/education" hx-post="/app/profile/education" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. Ingenieria de Sistemas" required></label>
-                <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Universidad Nacional" required></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Nivel</span><select name="nivel">{% for option in education_level_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
-                <label><span>Ciudad</span><input type="text" name="ciudad"></label>
-                <label><span>Estado</span><select name="status">{% for option in education_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
-                <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
-            </div>
-            <button type="submit">Agregar educacion</button>
-            </form>
-        </details>
-        {% if education %}
-            <div class="record-list compact-record-list">
-                {% for item in education %}
-                    <article class="record-card">
-                        <div class="record-header">
-                            <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }} · {{ item.nivel }}</p></div>
-                            <span class="soft-badge">{{ item.status }}</span>
-                        </div>
-                        <div class="detail-actions">
-                            <form method="post" action="/app/profile/education/{{ item.id }}/delete" hx-post="/app/profile/education/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </article>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin educacion registrada</h3><p>No hay estudios cargados todavia.</p></div>
-        {% endif %}
-    </section>
+{% include "profile/_formation_shell.html" %}
 
-    <section class="panel">
-        <div class="section-title"><div><h2>Cursos</h2><p>Formacion complementaria para reforzar tu perfil.</p></div><span class="soft-badge">{{ courses|length }} registros</span></div>
-        <details class="section-disclosure" {% if not courses %}open{% endif %}>
-            <summary>Agregar curso</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/courses" hx-post="/app/profile/courses" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. SQL para analisis de datos" required></label>
-                <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Coursera" required></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio"></label>
-                <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
-                <label><span>Estado</span><select name="status">{% for option in course_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
-            </div>
-            <label><span>URL certificado</span><input type="url" name="url_certificado"></label>
-            <button type="submit">Agregar curso</button>
-            </form>
-        </details>
-        {% if courses %}
-            <div class="record-list compact-record-list">
-                {% for item in courses %}
-                    <article class="record-card">
-                        <div class="record-header">
-                            <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }}</p></div>
-                            <span class="soft-badge">{{ item.status }}</span>
-                        </div>
-                        <div class="detail-actions">
-                            <form method="post" action="/app/profile/courses/{{ item.id }}/delete" hx-post="/app/profile/courses/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </article>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin cursos registrados</h3><p>No hay cursos cargados todavia.</p></div>
-        {% endif %}
-    </section>
-</section>
-
-<section class="profile-sections-grid">
-    <section class="panel">
-        <div class="section-title"><div><h2>Certificaciones</h2><p>Credenciales y badges relevantes para tus postulaciones.</p></div><span class="soft-badge">{{ certifications|length }} registros</span></div>
-        <details class="section-disclosure" {% if not certifications %}open{% endif %}>
-            <summary>Agregar certificacion</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/certifications" hx-post="/app/profile/certifications" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. AWS Certified Data Analytics" required></label>
-                <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Amazon Web Services" required></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Fecha obtencion</span><input type="date" name="fecha_obtencion" required></label>
-                <label><span>Fecha vencimiento</span><input type="date" name="fecha_vencimiento"></label>
-                <label><span>Estado</span><select name="status">{% for option in certification_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
-            </div>
-            <label><span>URL certificado</span><input type="url" name="url_certificado"></label>
-            <button type="submit">Agregar certificacion</button>
-            </form>
-        </details>
-        {% if certifications %}
-            <div class="record-list compact-record-list">
-                {% for item in certifications %}
-                    <article class="record-card">
-                        <div class="record-header">
-                            <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }}</p></div>
-                            <span class="soft-badge">{{ item.status }}</span>
-                        </div>
-                        <div class="detail-actions">
-                            <form method="post" action="/app/profile/certifications/{{ item.id }}/delete" hx-post="/app/profile/certifications/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </article>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin certificaciones registradas</h3><p>No hay certificaciones cargadas todavia.</p></div>
-        {% endif %}
-    </section>
-</section>
-
-<section class="panel cv-panel">
-    <div class="section-title">
-        <div>
-            <h2>Vista CV</h2>
-            <p>Vista de solo lectura del perfil consolidado para revisar como se presentaria tu hoja de vida.</p>
-        </div>
-    </div>
-    {% if cv_preview_html %}
-        {{ cv_preview_html | safe }}
-    {% else %}
-        <div class="empty-panel">
-            <h3>Sin vista CV disponible</h3>
-            <p>Completa los datos principales del perfil para generar esta vista.</p>
-        </div>
-    {% endif %}
-</section>
+{% include "profile/_cv_preview.html" %}
 
 
diff --git a/app/interfaces/web/templates/profile/_skills.html b/app/interfaces/web/templates/profile/_skills.html
new file mode 100644
index 0000000..880bba2
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_skills.html
@@ -0,0 +1,43 @@
+<section class="panel">
+    <div class="section-title">
+        <div>
+            <h2>Skills</h2>
+            <p>Manten tus skills clave visibles para el analisis de afinidad.</p>
+        </div>
+    </div>
+    <p class="section-caption">Mantener skills claras y concretas ayuda a que la afinidad con vacantes sea mas fiable.</p>
+    <form class="stack-form compact-form" method="post" action="/app/profile/skills" hx-post="/app/profile/skills" hx-target="#profile-skills-shell" hx-swap="outerHTML">
+        <div class="grid-two">
+            <label><span>Categoria</span><input type="text" name="categoria" placeholder="Ej. Data, BI, Backend" required></label>
+            <label><span>Skill</span><input type="text" name="skill" placeholder="Ej. SQL" required></label>
+        </div>
+        <label>
+            <span>Nivel</span>
+            <select name="nivel">
+                {% for option in skill_level_options %}
+                    <option value="{{ option }}">{{ option }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <button type="submit">Agregar skill</button>
+    </form>
+    {% if skills %}
+        <div class="record-list compact-record-list">
+            {% for item in skills %}
+                <article class="record-card">
+                    <div class="record-header">
+                        <div>
+                            <h3>{{ item.skill }}</h3>
+                            <p>{{ item.categoria }} · {{ item.nivel }}</p>
+                        </div>
+                        <form method="post" action="/app/profile/skills/{{ item.id }}/delete" hx-post="/app/profile/skills/{{ item.id }}/delete" hx-target="#profile-skills-shell" hx-swap="outerHTML">
+                            <button type="submit" class="danger-action">Eliminar</button>
+                        </form>
+                    </div>
+                </article>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin skills</h3><p>Agrega tus skills principales para que el analisis de vacantes sea mas preciso.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_skills_fragment.html b/app/interfaces/web/templates/profile/_skills_fragment.html
new file mode 100644
index 0000000..4860978
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_skills_fragment.html
@@ -0,0 +1,5 @@
+<div id="profile-overview" hx-swap-oob="innerHTML">
+    {% include "profile/_overview.html" %}
+</div>
+
+{% include "profile/_skills_shell.html" %}
diff --git a/app/interfaces/web/templates/profile/_skills_shell.html b/app/interfaces/web/templates/profile/_skills_shell.html
new file mode 100644
index 0000000..134887a
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_skills_shell.html
@@ -0,0 +1,9 @@
+<section id="profile-skills-shell" class="stack-panel"{% if skills_shell_oob %} hx-swap-oob="outerHTML"{% endif %}>
+    {% if skills_flash_message %}
+        {% set flash_tone = skills_flash_message[0] %}
+        {% set flash_text = skills_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+    {% include "profile/_skills.html" %}
+    {% include "profile/_profile_status.html" %}
+</section>
diff --git a/app/interfaces/web/templates/profile/index.html b/app/interfaces/web/templates/profile/index.html
index 9f8b8d1..446ddc9 100644
--- a/app/interfaces/web/templates/profile/index.html
+++ b/app/interfaces/web/templates/profile/index.html
@@ -1,12 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="page-header">
-    <div>
-        <h1>Mi Perfil</h1>
-        <p>Configura tu contexto profesional para mejorar el analisis de vacantes y mantener tu hoja de vida al dia.</p>
-    </div>
-</section>
+{% set page_header_title = "Mi Perfil" %}
+{% set page_header_description = "Configura tu contexto profesional para mejorar el analisis de vacantes y mantener tu hoja de vida al dia." %}
+{% set page_header_copy_class = none %}
+{% include "components/_page_header.html" %}
 
 <div id="profile-shell">
     {% include "profile/_shell.html" %}
diff --git a/app/interfaces/web/templates/vacancies/_filters.html b/app/interfaces/web/templates/vacancies/_filters.html
new file mode 100644
index 0000000..190a796
--- /dev/null
+++ b/app/interfaces/web/templates/vacancies/_filters.html
@@ -0,0 +1,34 @@
+<section class="filter-panel">
+    <form
+        class="filter-form filter-form-compact"
+        method="get"
+        action="/app/vacancies"
+        hx-get="/app/vacancies/list"
+        hx-target="#vacancy-list"
+        hx-swap="innerHTML"
+        hx-push-url="true"
+    >
+        <label>
+            <span>Buscar</span>
+            <input type="text" name="q" value="{{ query }}" placeholder="Empresa o cargo">
+        </label>
+        <label>
+            <span>Vista</span>
+            <select name="view">
+                {% for option in inbox_views %}
+                    <option value="{{ option }}"{% if option == current_view %} selected{% endif %}>{{ option }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <label>
+            <span>Por pagina</span>
+            <select name="page_size">
+                {% for option in pagination.page_size_options %}
+                    <option value="{{ option }}"{% if option == pagination.page_size %} selected{% endif %}>{{ option }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <input type="hidden" name="page" value="1">
+        <button class="secondary-action filter-submit" type="submit">Aplicar</button>
+    </form>
+</section>
diff --git a/app/interfaces/web/templates/vacancies/_list.html b/app/interfaces/web/templates/vacancies/_list.html
index a00f56d..e491385 100644
--- a/app/interfaces/web/templates/vacancies/_list.html
+++ b/app/interfaces/web/templates/vacancies/_list.html
@@ -69,31 +69,14 @@
             {% endif %}
         {% endfor %}
     </div>
-    {% if pagination.total_pages > 1 %}
-        <div class="detail-actions">
-            {% if pagination.has_prev %}
-                <a
-                    class="secondary-link"
-                    href="/app/vacancies?q={{ query }}&view={{ current_view }}&page={{ pagination.prev_page }}&page_size={{ pagination.page_size }}"
-                    hx-get="/app/vacancies/list?q={{ query }}&view={{ current_view }}&page={{ pagination.prev_page }}&page_size={{ pagination.page_size }}"
-                    hx-target="#vacancy-list"
-                    hx-swap="innerHTML"
-                    hx-push-url="true"
-                >Anterior</a>
-            {% endif %}
-            <span class="muted-note">Pagina {{ pagination.page }} de {{ pagination.total_pages }}</span>
-            {% if pagination.has_next %}
-                <a
-                    class="secondary-link"
-                    href="/app/vacancies?q={{ query }}&view={{ current_view }}&page={{ pagination.next_page }}&page_size={{ pagination.page_size }}"
-                    hx-get="/app/vacancies/list?q={{ query }}&view={{ current_view }}&page={{ pagination.next_page }}&page_size={{ pagination.page_size }}"
-                    hx-target="#vacancy-list"
-                    hx-swap="innerHTML"
-                    hx-push-url="true"
-                >Siguiente</a>
-            {% endif %}
-        </div>
-    {% endif %}
+    {% set pagination_prev_href = "/app/vacancies?q=%s&view=%s&page=%s&page_size=%s"|format(query, current_view, pagination.prev_page, pagination.page_size) %}
+    {% set pagination_prev_hx_get = "/app/vacancies/list?q=%s&view=%s&page=%s&page_size=%s"|format(query, current_view, pagination.prev_page, pagination.page_size) %}
+    {% set pagination_next_href = "/app/vacancies?q=%s&view=%s&page=%s&page_size=%s"|format(query, current_view, pagination.next_page, pagination.page_size) %}
+    {% set pagination_next_hx_get = "/app/vacancies/list?q=%s&view=%s&page=%s&page_size=%s"|format(query, current_view, pagination.next_page, pagination.page_size) %}
+    {% set pagination_hx_target = "#vacancy-list" %}
+    {% set pagination_hx_swap = "innerHTML" %}
+    {% set pagination_hx_push_url = "true" %}
+    {% include "components/_pagination.html" %}
 {% else %}
     <div class="empty-panel">
         <h3>No hay coincidencias</h3>
diff --git a/app/interfaces/web/templates/vacancies/_shell.html b/app/interfaces/web/templates/vacancies/_shell.html
new file mode 100644
index 0000000..3092f2c
--- /dev/null
+++ b/app/interfaces/web/templates/vacancies/_shell.html
@@ -0,0 +1,15 @@
+{% include "vacancies/_summary.html" %}
+
+{% if flash_message %}
+    {% set flash_tone = flash_message[0] %}
+    {% set flash_text = flash_message[1] %}
+    {% include "components/_flash.html" %}
+{% endif %}
+
+{% include "vacancies/_filters.html" %}
+
+<section class="panel workspace-panel list-panel inbox-list-panel">
+    <div id="vacancy-list">
+        {% include "vacancies/_list.html" %}
+    </div>
+</section>
diff --git a/app/interfaces/web/templates/vacancies/_summary.html b/app/interfaces/web/templates/vacancies/_summary.html
new file mode 100644
index 0000000..6220b36
--- /dev/null
+++ b/app/interfaces/web/templates/vacancies/_summary.html
@@ -0,0 +1,8 @@
+<section class="context-strip">
+    {% for item in context_bar %}
+        <article class="context-item">
+            <span class="context-value">{{ item.value }}</span>
+            <span class="context-label">{{ item.label }}</span>
+        </article>
+    {% endfor %}
+</section>
diff --git a/app/interfaces/web/templates/vacancies/index.html b/app/interfaces/web/templates/vacancies/index.html
index 743d547..37c57ed 100644
--- a/app/interfaces/web/templates/vacancies/index.html
+++ b/app/interfaces/web/templates/vacancies/index.html
@@ -1,68 +1,12 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="page-header">
-    <div class="page-header-copy">
-        <h1>Inbox de Vacantes</h1>
-        <p>Revisa, prioriza y decide sin salir del workspace.</p>
-    </div>
-</section>
+{% set page_header_title = "Inbox de Vacantes" %}
+{% set page_header_description = "Revisa, prioriza y decide sin salir del workspace." %}
+{% set page_header_copy_class = "page-header-copy" %}
+{% include "components/_page_header.html" %}
 
-<section class="context-strip">
-    {% for item in context_bar %}
-        <article class="context-item">
-            <span class="context-value">{{ item.value }}</span>
-            <span class="context-label">{{ item.label }}</span>
-        </article>
-    {% endfor %}
-</section>
-
-{% if flash_message %}
-    <section class="flash-message flash-{{ flash_message[0] }}">
-        {{ flash_message[1] }}
-    </section>
-{% endif %}
-
-<section class="filter-panel">
-    <form
-        class="filter-form filter-form-compact"
-        method="get"
-        action="/app/vacancies"
-        hx-get="/app/vacancies/list"
-        hx-target="#vacancy-list"
-        hx-swap="innerHTML"
-        hx-push-url="true"
-    >
-        <label>
-            <span>Buscar</span>
-            <input type="text" name="q" value="{{ query }}" placeholder="Empresa o cargo">
-        </label>
-        <label>
-            <span>Vista</span>
-            <select name="view">
-                {% for option in inbox_views %}
-                    <option value="{{ option }}"{% if option == current_view %} selected{% endif %}>{{ option }}</option>
-                {% endfor %}
-            </select>
-        </label>
-        <label>
-            <span>Por pagina</span>
-            <select name="page_size">
-                {% for option in pagination.page_size_options %}
-                    <option value="{{ option }}"{% if option == pagination.page_size %} selected{% endif %}>{{ option }}</option>
-                {% endfor %}
-            </select>
-        </label>
-        <input type="hidden" name="page" value="1">
-        <button class="secondary-action filter-submit" type="submit">Aplicar</button>
-    </form>
-</section>
-
-<section class="panel workspace-panel list-panel inbox-list-panel">
-    <div id="vacancy-list">
-        {% include "vacancies/_list.html" %}
-    </div>
-</section>
+{% include "vacancies/_shell.html" %}
 <script>
     (function () {
         function focusSelectedInboxRow() {
diff --git a/app/interfaces/web/templates/vacancies/new.html b/app/interfaces/web/templates/vacancies/new.html
index 990a98b..e538805 100644
--- a/app/interfaces/web/templates/vacancies/new.html
+++ b/app/interfaces/web/templates/vacancies/new.html
@@ -1,23 +1,21 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="page-header">
-    <div>
-        <h1>Nueva Vacante</h1>
-        <p>Entrada manual de vacantes. La extension de Chrome seguira usando la API actual.</p>
-    </div>
-</section>
+{% set page_header_title = "Nueva Vacante" %}
+{% set page_header_description = "Entrada manual de vacantes. La extension de Chrome seguira usando la API actual." %}
+{% set page_header_copy_class = none %}
+{% include "components/_page_header.html" %}
 
 <section class="layout-two-columns form-layout">
     <section class="panel">
         {% if request.query_params.get("flash") == "validation_error" %}
-            <section class="flash-message flash-warning">
-                Revisa los datos de la vacante. Hay un valor invalido o faltante.
-            </section>
+            {% set flash_tone = "warning" %}
+            {% set flash_text = "Revisa los datos de la vacante. Hay un valor invalido o faltante." %}
+            {% include "components/_flash.html" %}
         {% elif request.query_params.get("flash") == "save_error" %}
-            <section class="flash-message flash-warning">
-                No se pudo guardar la vacante. Intenta nuevamente.
-            </section>
+            {% set flash_tone = "warning" %}
+            {% set flash_text = "No se pudo guardar la vacante. Intenta nuevamente." %}
+            {% include "components/_flash.html" %}
         {% endif %}
 
         <form class="stack-form" method="post" action="/app/vacancies/new">
diff --git a/test_connection.py b/test_connection.py
index 448e55d..19d81fa 100644
--- a/test_connection.py
+++ b/test_connection.py
@@ -2,8 +2,6 @@
 
 from __future__ import annotations
 
-import sys
-
 import pyodbc
 
 from app.infrastructure.persistence.connection import (
diff --git a/tests/test_web_applications.py b/tests/test_web_applications.py
index cc270c0..3ce179a 100644
--- a/tests/test_web_applications.py
+++ b/tests/test_web_applications.py
@@ -166,3 +166,58 @@ def test_applications_index_moves_to_page_of_selected_application(self, mock_rep
         self.assertIn("ACME 25", response.text)
         self.assertIn("Pagina 3 de 3", response.text)
         self.assertIn("ACME 25 - Role 25", response.text)
+
+    @patch("app.interfaces.web.routes.applications.application_repository")
+    def test_applications_shell_uses_system_filter_button_and_preserves_shell_target(self, mock_repository):
+        mock_repository.list_all.return_value = [
+            {
+                "id": 7,
+                "vacante_id": 3,
+                "empresa": "ACME",
+                "cargo": "Data Analyst",
+                "modalidad": "Remoto",
+                "link": "https://example.com",
+                "fecha_aplicacion": date(2026, 4, 1),
+                "estado": "Pending",
+                "nombre_recruiter": None,
+                "email_recruiter": None,
+                "telefono_recruiter": None,
+                "notas": "Pendiente",
+                "fecha_registro": date(2026, 4, 1),
+            }
+        ]
+
+        response = self.client.get("/app/applications/shell?q=acme&state=Todos&page=1&page_size=20")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('class="secondary-action filter-submit"', response.text)
+        self.assertIn('hx-target="#applications-shell"', response.text)
+        self.assertIn('hx-swap="outerHTML"', response.text)
+        self.assertIn('hx-push-url="true"', response.text)
+
+    @patch("app.interfaces.web.routes.applications.application_repository")
+    def test_applications_detail_partial_preserves_state_query_and_pagination(self, mock_repository):
+        mock_repository.list_all.return_value = [
+            {
+                "id": 25,
+                "vacante_id": 25,
+                "empresa": "ACME 25",
+                "cargo": "Role 25",
+                "modalidad": "Remoto",
+                "link": "https://example.com",
+                "fecha_aplicacion": date(2026, 4, 1),
+                "estado": "Pending",
+                "nombre_recruiter": None,
+                "email_recruiter": None,
+                "telefono_recruiter": None,
+                "notas": "",
+                "fecha_registro": date(2026, 4, 1),
+            }
+        ]
+
+        response = self.client.get("/app/applications/25/detail?q=acme&state=Todos&page=3&page_size=10")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("ACME 25 - Role 25", response.text)
+        self.assertIn('value="acme"', response.text)
+        self.assertIn('value="Todos"', response.text)
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index 72ad31c..bb5b2eb 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+from datetime import date
 import unittest
 from unittest.mock import patch
 
@@ -39,7 +40,80 @@ def test_profile_index_renders_profile_shell(self, mock_repository, _mock_nav, _
         self.assertIn("SQL", response.text)
 
     @patch("app.interfaces.web.routes.profile.profile_repository")
-    def test_save_profile_hx_returns_profile_shell(self, mock_repository):
+    def test_profile_shell_partial_renders_profile_sections(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = [{"id": 1, "categoria": "Data", "skill": "SQL", "nivel": "Avanzado"}]
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/shell?flash=skill_added")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("La skill fue agregada al perfil.", response.text)
+        self.assertIn("Datos principales", response.text)
+        self.assertIn("Estado del perfil", response.text)
+        self.assertIn("Vista CV", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_skills_partial_renders_isolated_skills_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = [{"id": 1, "categoria": "Data", "skill": "SQL", "nivel": "Avanzado"}]
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/skills")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn("SQL", response.text)
+        self.assertIn("Estado del perfil", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_basics_partial_renders_isolated_basics_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+            "nivel_actual": "Mid",
+            "anos_experiencia": 3,
+            "moneda": "COP",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/basics")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-basics-shell"', response.text)
+        self.assertIn("Datos principales", response.text)
+        self.assertIn('action="/app/profile/save"', response.text)
+        self.assertNotIn('id="profile-skills-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_save_profile_hx_returns_isolated_basics_fragment(self, mock_repository):
         mock_repository.save_profile.return_value = {"success": True, "id": 1}
         mock_repository.get_active_profile.return_value = {
             "id": 1,
@@ -72,5 +146,683 @@ def test_save_profile_hx_returns_profile_shell(self, mock_repository):
 
         self.assertEqual(response.status_code, 200)
         self.assertIn("Los datos principales del perfil fueron guardados.", response.text)
+        self.assertIn('id="profile-basics-shell"', response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertIn('hx-swap-oob="outerHTML"', response.text)
+        self.assertNotIn('action="/app/profile/experiences"', response.text)
         payload = mock_repository.save_profile.call_args.args[0]
         self.assertEqual(payload["modalidades_aceptadas"], "Remoto,Hibrido")
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_skill_hx_returns_isolated_skills_fragment(self, mock_repository):
+        mock_repository.add_skill.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = [{"id": 2, "categoria": "Data", "skill": "Python", "nivel": "Avanzado"}]
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/skills",
+            data={"categoria": "Data", "skill": "Python", "nivel": "Avanzado"},
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('hx-swap-oob="innerHTML"', response.text)
+        self.assertIn("La skill fue agregada al perfil.", response.text)
+        self.assertIn("Python", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_skill_hx_returns_isolated_skills_fragment(self, mock_repository):
+        mock_repository.delete_skill.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/skills/2/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn("La skill fue eliminada.", response.text)
+        self.assertIn("Sin skills", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_shell_partial_keeps_formation_sections(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/shell")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("Educacion", response.text)
+        self.assertIn("Cursos", response.text)
+        self.assertIn("Certificaciones", response.text)
+        self.assertIn('action="/app/profile/education"', response.text)
+        self.assertIn('action="/app/profile/courses"', response.text)
+        self.assertIn('action="/app/profile/certifications"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_shell_partial_renders_experience_and_project_records(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = [
+            {
+                "id": 10,
+                "cargo": "Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "descripcion_empresa": "Retail",
+                "fecha_inicio": date(2023, 1, 1),
+                "fecha_fin": date(2024, 2, 1),
+                "es_trabajo_actual": False,
+                "funciones": "Analisis",
+                "logros": "Ahorro",
+            }
+        ]
+        mock_repository.get_projects.return_value = [
+            {
+                "id": 20,
+                "nombre": "Dashboard",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_proyecto_actual": True,
+                "stack": "Python, SQL",
+                "funciones": "Construccion",
+                "logros": "Visibilidad",
+                "url_repositorio": "https://example.com/repo",
+            }
+        ]
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/shell")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("Experiencia", response.text)
+        self.assertIn("Data Analyst · Acme", response.text)
+        self.assertIn('action="/app/profile/experiences/10/update"', response.text)
+        self.assertIn('action="/app/profile/experiences/10/delete"', response.text)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("Proyectos", response.text)
+        self.assertIn("Dashboard", response.text)
+        self.assertIn('action="/app/profile/projects/20/update"', response.text)
+        self.assertIn('action="/app/profile/projects/20/delete"', response.text)
+        self.assertIn('id="profile-projects-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_formation_partial_renders_isolated_formation_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/formation")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("Educacion", response.text)
+        self.assertIn("Cursos", response.text)
+        self.assertIn("Certificaciones", response.text)
+        self.assertNotIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-basics-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_projects_partial_renders_isolated_projects_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/projects")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-projects-shell"', response.text)
+        self.assertIn("Proyectos", response.text)
+        self.assertNotIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-basics-shell"', response.text)
+        self.assertNotIn('id="profile-cv-preview"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_experiences_partial_renders_isolated_experiences_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/experiences")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("Experiencia", response.text)
+        self.assertNotIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-basics-shell"', response.text)
+        self.assertNotIn('id="profile-projects-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_project_hx_returns_isolated_projects_fragment(self, mock_repository):
+        mock_repository.add_project.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = [
+            {
+                "id": 4,
+                "nombre": "Dashboard",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_proyecto_actual": True,
+                "stack": "Python, SQL",
+                "funciones": "Construccion",
+                "logros": "Visibilidad",
+                "url_repositorio": "https://example.com/repo",
+            }
+        ]
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/projects",
+            data={
+                "nombre": "Dashboard",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": "2024-01-01",
+                "stack": "Python, SQL",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-projects-shell"', response.text)
+        self.assertIn("El proyecto fue guardado.", response.text)
+        self.assertIn("Dashboard", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('hx-swap-oob="outerHTML"', response.text)
+        self.assertNotIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_update_project_hx_returns_isolated_projects_fragment(self, mock_repository):
+        mock_repository.update_project.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = [
+            {
+                "id": 4,
+                "nombre": "Dashboard V2",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_proyecto_actual": True,
+                "stack": "Python, SQL",
+                "funciones": "Construccion",
+                "logros": "Visibilidad",
+                "url_repositorio": "https://example.com/repo",
+            }
+        ]
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/projects/4/update",
+            data={
+                "nombre": "Dashboard V2",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": "2024-01-01",
+                "es_proyecto_actual": "true",
+                "stack": "Python, SQL",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-projects-shell"', response.text)
+        self.assertIn("El proyecto fue guardado.", response.text)
+        self.assertIn("Dashboard V2", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-cv-preview"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_experience_hx_returns_isolated_experiences_fragment(self, mock_repository):
+        mock_repository.add_experience.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = [
+            {
+                "id": 6,
+                "cargo": "Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "descripcion_empresa": "Retail",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_trabajo_actual": True,
+                "funciones": "Analisis",
+                "logros": "Impacto",
+            }
+        ]
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/experiences",
+            data={
+                "cargo": "Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": "2024-01-01",
+                "es_trabajo_actual": "true",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("La experiencia fue guardada.", response.text)
+        self.assertIn("Data Analyst · Acme", response.text)
+        self.assertIn('id="profile-overview"', response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertIn('hx-swap-oob="innerHTML"', response.text)
+        self.assertIn('hx-swap-oob="outerHTML"', response.text)
+        self.assertNotIn('id="profile-projects-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_update_experience_hx_returns_isolated_experiences_fragment(self, mock_repository):
+        mock_repository.update_experience.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = [
+            {
+                "id": 6,
+                "cargo": "Senior Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "descripcion_empresa": "Retail",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_trabajo_actual": True,
+                "funciones": "Analisis",
+                "logros": "Impacto",
+            }
+        ]
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/experiences/6/update",
+            data={
+                "cargo": "Senior Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": "2024-01-01",
+                "es_trabajo_actual": "true",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("La experiencia fue guardada.", response.text)
+        self.assertIn("Senior Data Analyst · Acme", response.text)
+        self.assertIn('id="profile-overview"', response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('id="profile-projects-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_experience_hx_returns_isolated_experiences_fragment(self, mock_repository):
+        mock_repository.delete_experience.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/experiences/6/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("La experiencia fue eliminada.", response.text)
+        self.assertIn("Sin experiencia registrada", response.text)
+        self.assertIn('id="profile-overview"', response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('id="profile-projects-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_project_hx_returns_isolated_projects_fragment(self, mock_repository):
+        mock_repository.delete_project.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/projects/4/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-projects-shell"', response.text)
+        self.assertIn("El proyecto fue eliminado.", response.text)
+        self.assertIn("Sin proyectos registrados", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-cv-preview"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_education_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.add_education.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = [
+            {
+                "id": 1,
+                "titulo": "Ingenieria",
+                "institucion": "UN",
+                "nivel": "Pregrado",
+                "status": "Completado",
+                "fecha_inicio": "2020-01-01",
+                "fecha_fin": None,
+            }
+        ]
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/education",
+            data={
+                "titulo": "Ingenieria",
+                "institucion": "UN",
+                "nivel": "Pregrado",
+                "status": "Completado",
+                "fecha_inicio": "2020-01-01",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("La educacion fue guardada.", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertIn('hx-swap-oob="outerHTML"', response.text)
+        self.assertNotIn('action="/app/profile/experiences"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_education_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.delete_education.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/education/1/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("La educacion fue eliminada.", response.text)
+        self.assertIn("Sin educacion registrada", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_course_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.add_course.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = [{"id": 2, "titulo": "SQL", "institucion": "Coursera", "status": "Completado"}]
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/courses",
+            data={
+                "titulo": "SQL",
+                "institucion": "Coursera",
+                "status": "Completado",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("El curso fue guardado.", response.text)
+        self.assertIn("SQL", response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_course_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.delete_course.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/courses/2/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("El curso fue eliminado.", response.text)
+        self.assertIn("Sin cursos registrados", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_certification_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.add_certification.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = [
+            {
+                "id": 3,
+                "titulo": "AWS",
+                "institucion": "AWS",
+                "status": "Vigente",
+                "fecha_obtencion": "2024-01-01",
+            }
+        ]
+
+        response = self.client.post(
+            "/app/profile/certifications",
+            data={
+                "titulo": "AWS",
+                "institucion": "AWS",
+                "status": "Vigente",
+                "fecha_obtencion": "2024-01-01",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("La certificacion fue guardada.", response.text)
+        self.assertIn("AWS", response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_certification_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.delete_certification.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/certifications/3/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("La certificacion fue eliminada.", response.text)
+        self.assertIn("Sin certificaciones registradas", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
diff --git a/tests/test_web_vacancies.py b/tests/test_web_vacancies.py
index fd1a4c4..fc6a249 100644
--- a/tests/test_web_vacancies.py
+++ b/tests/test_web_vacancies.py
@@ -179,6 +179,75 @@ def test_inbox_moves_to_page_of_selected_vacancy(self, mock_build_items, _mock_n
         self.assertIn("Empresa 25 - Cargo 25", response.text)
         self.assertIn('title="Cerrar"', response.text)
 
+    @patch("app.interfaces.web.routes.vacancies._build_vacancy_items")
+    def test_vacancy_list_partial_renders_selected_inline_detail(self, mock_build_items):
+        mock_build_items.return_value = [
+            {
+                "id": item_id,
+                "empresa": f"Empresa {item_id}",
+                "cargo": f"Cargo {item_id}",
+                "modalidad": "Remoto",
+                "fecha_registro": date(2026, 4, 1),
+                "descripcion": f"Descripcion {item_id}",
+                "link": None,
+                "analisis": None,
+                "status_label": "Registrada",
+                "status_meta": {"tone": "gray", "label": "Registrada"},
+                "score_label": "Sin score",
+                "score_meta": {"tone": "gray", "label": "Sin analisis", "value": None},
+                "affinity_meta": {"tone": "gray", "label": "-", "raw": None},
+                "decision_meta": {"tone": "gray", "label": "-", "raw": None},
+                "has_application": False,
+            }
+            for item_id in range(1, 4)
+        ]
+
+        response = self.client.get("/app/vacancies/list?selected=2&q=Empresa&view=Todas&page=1&page_size=20")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('data-selected-row="true"', response.text)
+        self.assertIn('data-inline-detail="true"', response.text)
+        self.assertIn("Empresa 2 - Cargo 2", response.text)
+        self.assertIn(
+            'hx-get="/app/vacancies/list?q=Empresa&view=Todas&page=1&page_size=20"',
+            response.text,
+        )
+
+    @patch("app.interfaces.web.routes.vacancies._build_vacancy_items")
+    def test_vacancy_detail_partial_preserves_query_view_and_pagination(self, mock_build_items):
+        mock_build_items.return_value = [
+            {
+                "id": 25,
+                "empresa": "Empresa 25",
+                "cargo": "Cargo 25",
+                "modalidad": "Remoto",
+                "fecha_registro": date(2026, 4, 1),
+                "descripcion": "Descripcion 25",
+                "link": None,
+                "analisis": None,
+                "status_label": "Registrada",
+                "status_meta": {"tone": "gray", "label": "Registrada"},
+                "score_label": "Sin score",
+                "score_meta": {"tone": "gray", "label": "Sin analisis", "value": None},
+                "affinity_meta": {"tone": "gray", "label": "-", "raw": None},
+                "decision_meta": {"tone": "gray", "label": "-", "raw": None},
+                "has_application": False,
+            }
+        ]
+
+        response = self.client.get("/app/vacancies/25/detail?q=data&view=Todas&page=3&page_size=10")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("Empresa 25 - Cargo 25", response.text)
+        self.assertIn(
+            'href="/app/vacancies?q=data&view=Todas&page=3&page_size=10"',
+            response.text,
+        )
+        self.assertIn(
+            'hx-get="/app/vacancies/list?q=data&view=Todas&page=3&page_size=10"',
+            response.text,
+        )
+
     @patch("app.interfaces.web.routes.vacancies.application_repository")
     @patch("app.interfaces.web.routes.vacancies.analysis_repository")
     @patch("app.interfaces.web.routes.vacancies.vacancy_repository")