diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6887c6e..5978ba2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import SamShell from "@/components/SamShell";
-import TableroView from "@/components/TableroView";
-import { useModules, refreshModules, useSiteSection } from "@/lib/store";
+import { useModules, refreshModules } from "@/lib/store";
 import {
   displayName,
   envOf,
@@ -14,35 +12,14 @@ import {
   sectionOf,
   SECTIONS,
   type ModuleState,
+  type RefApp,
 } from "@/lib/sam";
 
-const sectionMenu = [
-  ...SECTIONS.map((s) => ({ label: s.title, icon: s.icon, href: `/#${s.id}` })),
-  { label: "Tablero IT", icon: "bx-pie-chart-alt-2", href: "/tablero" },
-];
-
 export default function Home() {
   const { data, error } = useModules();
-  const site = useSiteSection();
   const loading = data === null && error === null;
   const fetchModules = refreshModules;
 
-  // it.sam.devops... aterriza directo en el tablero
-  if (site === "it") {
-    return (
-      <SamShell
-        brand="IT"
-        subtitle="Tablero de gestión"
-        menu={sectionMenu}
-        activeHref="/tablero"
-        topUser="SAM"
-        backHref="/"
-      >
-        <TableroView />
-      </SamShell>
-    );
-  }
-
   const modules = data?.modules ?? [];
   const backend = data?.backend;
 
@@ -107,13 +84,7 @@ export default function Home() {
     );
   };
 
-  const renderRefCard = (app: {
-    name: string;
-    title: string;
-    icon: string;
-    bg: string;
-    url: string;
-  }) => (
+  const renderRefCard = (app: RefApp) => (
     <div className="col-md-6" key={`ref-${app.name}`}>
       <div className="app-card p-2">
         <table className="table table-borderless mb-0 align-middle">
@@ -150,149 +121,181 @@ export default function Home() {
   );
 
   return (
-    <SamShell
-      brand="SAM"
-      subtitle="Sistema de Administración de Matrículas"
-      menu={sectionMenu}
-      topUser="SAM"
-    >
-      {loading && (
-        <div className="text-center py-5">
-          <div className="spinner-border text-primary" role="status" />
-          <p className="mt-2 text-muted">Cargando módulos...</p>
-        </div>
-      )}
-
-      {error && (
-        <div className="alert alert-danger d-flex align-items-center">
-          <i className="bx bx-error-circle me-2 fs-5" />
-          <div>
-            <strong>Error:</strong> {error}
-            <button
-              onClick={fetchModules}
-              className="btn btn-sm btn-outline-danger ms-3"
+    <>
+      <div className="sidenav">
+        <div className="row text-light login-main-text">
+          <div className="col-12 text-center">
+            <div
+              className="mx-auto d-flex align-items-center justify-content-center bg-white rounded-3 overflow-hidden"
+              style={{ width: 80, height: 80 }}
             >
-              Reintentar
-            </button>
+              <img src="/logo-sam.png" alt="SAM" style={{ width: 64, height: 64, objectFit: "contain" }} />
+            </div>
+          </div>
+          <div className="col-12 text-center mt-3">
+            <h1 className="fw-bold fs-2">Sistema SAM</h1>
+          </div>
+          <div className="col-12 text-center">
+            <h4 className="fw-semibold opacity-75">Aplicaciones</h4>
+          </div>
+          <div className="col-12 text-center mt-4 d-flex flex-column gap-2 align-items-center">
+            <Link href="/tablero" className="btn btn-light btn-sm px-4">
+              <i className="bx bx-pie-chart-alt-2 me-1" /> Tablero IT
+            </Link>
+            <Link href="/upload" className="btn btn-outline-light btn-sm px-4">
+              <i className="bx bx-plus me-1" /> Nuevo Módulo
+            </Link>
+          </div>
+          <div className="col-12 text-center mt-3">
+            <small className="opacity-50">Portal de integración</small>
           </div>
         </div>
-      )}
+      </div>
 
-      {!loading && !error && (
-        <div className="row row-cards">
-          {modules.length === 0 && (
-            <div className="col-12">
-              <div className="app-card p-4 text-center">
-                <i className="bx bx-inbox fs-1 text-muted" />
-                <p className="text-muted mt-2 mb-3">
-                  No hay módulos integrados. ¡Sube tu primer proyecto!
-                </p>
-                <Link href="/upload" className="btn btn-primary btn-sm">
-                  <i className="bx bx-upload me-1" /> Subir Proyecto
-                </Link>
+      <div className="main">
+        <div className="row" id="modulos">
+          <div className="col-lg-1" />
+          <div className="col-lg-10 mt-4">
+            {loading && (
+              <div className="text-center py-5">
+                <div className="spinner-border text-primary" role="status" />
+                <p className="mt-2 text-muted">Cargando módulos...</p>
               </div>
-            </div>
-          )}
+            )}
 
-          {SECTIONS.map((section) => {
-            const list = bySection[section.id] ?? [];
-            const isReview = section.id === "otras-apps";
-            if (!isReview && list.length === 0) return null;
-            return (
-              <div className="col-12" key={section.id} id={section.id}>
-                <div className="row row-cards">
-                  <div className="col-12">
-                    <div className="alert alert-light section-header mb-3 py-2 px-3 d-flex justify-content-between align-items-center">
-                      <span>
-                        <i className={`bx ${section.icon} me-1`} />{" "}
-                        {section.title}
-                      </span>
-                      {list.length > 0 && (
-                        <span className="badge bg-primary rounded-pill">
-                          {list.length} módulo
-                          {list.length !== 1 ? "s" : ""}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  {list.map(renderModuleCard)}
-
-                  {section.id === "sam" &&
-                    REFERENCE_APPS.filter(
-                      (a) =>
-                        !list.some((m) => m.name.toLowerCase() === a.name)
-                    ).map(renderRefCard)}
-
-                  {isReview && backend && (
-                    <>
-                      <div className="col-md-6">
-                        <div className="app-card p-2">
-                          <table className="table table-borderless mb-0 align-middle">
-                            <tbody>
-                              <tr>
-                                <td className="ps-3" style={{ width: 56 }}>
-                                  <i className="bx bx-code-alt bx-sm bx-border text-light bg-dark" />
-                                </td>
-                                <td>
-                                  <a
-                                    href="https://api.devops.norteamericano.cl/health"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="text-decoration-none text-dark d-block py-2 stretched-link"
-                                  >
-                                    API Backend
-                                  </a>
-                                  <small className="text-muted" style={{ fontSize: "0.75rem" }}>
-                                    {backend.container ? "Activo" : "Detenido"} · {backend.branch}
-                                  </small>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                      <div className="col-md-6">
-                        <div className="app-card p-2">
-                          <table className="table table-borderless mb-0 align-middle">
-                            <tbody>
-                              <tr>
-                                <td className="ps-3" style={{ width: 56 }}>
-                                  <i className="bx bx-cog bx-sm bx-border text-light bg-secondary" />
-                                </td>
-                                <td>
-                                  <Link
-                                    href="/upload"
-                                    className="text-decoration-none text-dark d-block py-2 stretched-link"
-                                  >
-                                    Gestionar Módulos
-                                  </Link>
-                                  <small className="text-muted" style={{ fontSize: "0.75rem" }}>
-                                    Subir / actualizar proyectos
-                                  </small>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    </>
-                  )}
+            {error && (
+              <div className="alert alert-danger d-flex align-items-center">
+                <i className="bx bx-error-circle me-2 fs-5" />
+                <div>
+                  <strong>Error:</strong> {error}
+                  <button
+                    onClick={fetchModules}
+                    className="btn btn-sm btn-outline-danger ms-3"
+                  >
+                    Reintentar
+                  </button>
                 </div>
               </div>
-            );
-          })}
+            )}
 
-          <div className="col-12 mt-4 mb-4 text-center">
-            <small className="text-muted">
-              Auto-actualizado cada 15s ·{" "}
-              <a href="#" onClick={(e) => { e.preventDefault(); fetchModules(); }}>
-                actualizar ahora
-              </a>
-            </small>
+            {!loading && !error && (
+              <div className="row row-cards">
+                {modules.length === 0 && (
+                  <div className="col-12">
+                    <div className="app-card p-4 text-center">
+                      <i className="bx bx-inbox fs-1 text-muted" />
+                      <p className="text-muted mt-2 mb-3">
+                        No hay módulos integrados. ¡Sube tu primer proyecto!
+                      </p>
+                      <Link href="/upload" className="btn btn-primary btn-sm">
+                        <i className="bx bx-upload me-1" /> Subir Proyecto
+                      </Link>
+                    </div>
+                  </div>
+                )}
+
+                {SECTIONS.map((section) => {
+                  const list = bySection[section.id] ?? [];
+                  const isReview = section.id === "otras-apps";
+                  if (!isReview && list.length === 0) return null;
+                  return (
+                    <div className="col-12" key={section.id} id={section.id}>
+                      <div className="row row-cards">
+                        <div className="col-12">
+                          <div className="alert alert-light section-header mb-3 py-2 px-3 d-flex justify-content-between align-items-center">
+                            <span>
+                              <i className={`bx ${section.icon} me-1`} />{" "}
+                              {section.title}
+                            </span>
+                            {list.length > 0 && (
+                              <span className="badge bg-primary rounded-pill">
+                                {list.length} módulo
+                                {list.length !== 1 ? "s" : ""}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+
+                        {list.map(renderModuleCard)}
+
+                        {section.id === "sam" &&
+                          REFERENCE_APPS.filter(
+                            (a) =>
+                              !list.some((m) => m.name.toLowerCase() === a.name)
+                          ).map(renderRefCard)}
+
+                        {isReview && backend && (
+                          <>
+                            <div className="col-md-6">
+                              <div className="app-card p-2">
+                                <table className="table table-borderless mb-0 align-middle">
+                                  <tbody>
+                                    <tr>
+                                      <td className="ps-3" style={{ width: 56 }}>
+                                        <i className="bx bx-code-alt bx-sm bx-border text-light bg-dark" />
+                                      </td>
+                                      <td>
+                                        <a
+                                          href="https://api.devops.norteamericano.cl/health"
+                                          target="_blank"
+                                          rel="noopener noreferrer"
+                                          className="text-decoration-none text-dark d-block py-2 stretched-link"
+                                        >
+                                          API Backend
+                                        </a>
+                                        <small className="text-muted" style={{ fontSize: "0.75rem" }}>
+                                          {backend.container ? "Activo" : "Detenido"} · {backend.branch}
+                                        </small>
+                                      </td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </div>
+                            </div>
+                            <div className="col-md-6">
+                              <div className="app-card p-2">
+                                <table className="table table-borderless mb-0 align-middle">
+                                  <tbody>
+                                    <tr>
+                                      <td className="ps-3" style={{ width: 56 }}>
+                                        <i className="bx bx-cog bx-sm bx-border text-light bg-secondary" />
+                                      </td>
+                                      <td>
+                                        <Link
+                                          href="/upload"
+                                          className="text-decoration-none text-dark d-block py-2 stretched-link"
+                                        >
+                                          Gestionar Módulos
+                                        </Link>
+                                        <small className="text-muted" style={{ fontSize: "0.75rem" }}>
+                                          Subir / actualizar proyectos
+                                        </small>
+                                      </td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </div>
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+
+                <div className="col-12 mt-4 mb-4 text-center">
+                  <small className="text-muted">
+                    Auto-actualizado cada 15s ·{" "}
+                    <a href="#" onClick={(e) => { e.preventDefault(); fetchModules(); }}>
+                      actualizar ahora
+                    </a>
+                  </small>
+                </div>
+              </div>
+            )}
           </div>
         </div>
-      )}
-    </SamShell>
+      </div>
+    </>
   );
 }
diff --git a/src/app/tablero/page.tsx b/src/app/tablero/page.tsx
index 604f627..ad9010d 100644
--- a/src/app/tablero/page.tsx
+++ b/src/app/tablero/page.tsx
@@ -2,17 +2,31 @@
 
 import SamShell from "@/components/SamShell";
 import TableroView from "@/components/TableroView";
+import { useModules } from "@/lib/store";
+import { displayName, getModuleMeta } from "@/lib/sam";
 
-const menu = [
-  { label: "Resumen", icon: "bx-grid-alt", href: "#resumen" },
-  { label: "Aplicaciones", icon: "bx-layer", href: "/" },
-];
-
+// App IT: sidebar con todas sus opciones (resumen, aplicaciones,
+// tableros por módulo y gestión). Se sirve en /tablero y en
+// it.sam.devops.norteamericano.cl
 export default function Tablero() {
+  const { data } = useModules();
+  const modules = data?.modules ?? [];
+
+  const menu = [
+    { label: "Resumen", icon: "bx-grid-alt", href: "#resumen" },
+    { label: "Aplicaciones", icon: "bx-layer", href: "/" },
+    ...modules.map((m) => ({
+      label: displayName(m.name),
+      icon: getModuleMeta(m.name).icon,
+      href: `/m/${m.name}`,
+    })),
+    { label: "Nuevo Módulo", icon: "bx-plus", href: "/upload" },
+  ];
+
   return (
     <SamShell
       brand="IT"
-      subtitle="Tablero de gestión"
+      subtitle="Gestión de aplicaciones"
       menu={menu}
       activeHref="#resumen"
       topUser="SAM"
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..3fe95a7
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+// it.sam.devops... muestra el tablero IT manteniendo la URL.
+export function middleware(req: NextRequest) {
+  const host = (req.headers.get("host") || "").toLowerCase();
+  if (host.startsWith("it.sam.") && req.nextUrl.pathname === "/") {
+    const url = req.nextUrl.clone();
+    url.pathname = "/tablero";
+    return NextResponse.rewrite(url);
+  }
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/"],
+};