diff --git a/README.md b/README.md
index 0824dde..a720d52 100755
--- a/README.md
+++ b/README.md
@@ -1,6 +1,79 @@
 # Horarios UNSA
 
-> ¡Ahora con JSX!
+Horarios UNSA es una página que permite a los alumnos de la Universidad Nacional de San Agustin
+crear fácilmente sus horarios, sin que se crucen horas.
+
+https://horarios.araozu.dev
+
+## Configuración
+
+Requisitos:
+
+- Node.js LTS
+- pnpm, npm o yarn
+- Conocimientos de pnpm/npm/yarn, TypeScript, JSX, Solid.js y Aphrodite css
+
+Instalación:
+
+- Clonar el repositorio
+- Instalar dependencias
+- Ejecutar script `start` para ejecutar el servidor, o `build` para compilarlo
+
+## Arquitectura
+
+## Formato de horarios
+
+La información de los horarios se almacena en public/horarios/ en formato YAML.
+
+El formato es el siguiente:
+
+```ts
+interface DatosCarrera {
+    titulo: string,
+    // Contiene información adicional del horario
+    descripcion: string,
+    // Fecha de creación del horario en formato YYYYMMDD
+    version: number,
+    // Datos de los años de las carreras
+    años: {
+        // key es el nombre del año: 1er año, 2do año, etc
+        [key: string]: {
+            // nombre es el nombre del curso.
+            // Este nombre es referencial, no se muestra
+            // en el programa
+            [nombre: string]: Curso,
+        },
+    },
+}
+
+interface Curso {
+    // Nombre completo del curso
+    nombre: string,
+    // Nombre del curso abreviado
+    abreviado: string,
+    // Información de las horas de teoria
+    Teoria: {
+        // grupo es una letra: A, B, C, D
+        [grupo: string]: DatosGrupo,
+    },
+    // Información de las horas de laboratorio
+    Laboratorio?: {
+        // grupo es una letra: A, B, C, D
+        [grupo: string]: DatosGrupo,
+    },
+}
+
+interface DatosGrupo {
+    // Nombre del docente de este grupo
+    Docente: string,
+    /*
+        Las horas del curso en el siguiente formato: DD_HHMM
+        DD puede ser Lu, Ma, Mi, Ju, Vi
+        Ejm: Ma0850, Vi1640, Ju1550
+    */
+    Horas: string[]
+}
+```
 
 ## Versiones anteriores
 
diff --git a/src/App.tsx b/src/App.tsx
index d17310e..267e5e6 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,48 +1,10 @@
-import { BarraSuperior } from "./BarraSuperior"
-import { ContenedorHorarios } from "./ContenedorHorarios/ContenedorHorarios"
-import { Wallpaper } from "./Wallpaper"
-import { Show, createSignal } from "solid-js"
-import { css } from "aphrodite"
-import { estilosGlobales } from "./Estilos"
-import { Creditos } from "./Creditos"
+import {Main} from "./Views/Main"
+import {Index} from "./Views/Index"
 
 function App() {
-    /// @ts-ignore
-    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined
-    const mostrarMensajeBackdropFilterRaw = !localStorage.getItem("mensaje-backdrop-filter-oculto")
-
-    const [mostrarMensajeBackdropFilter, setMostrarMensaje] = createSignal(mostrarMensajeBackdropFilterRaw)
-
-    const ocultarMensajeBackdropFilter = () => {
-        setMostrarMensaje(false)
-        localStorage.setItem("mensaje-backdrop-filter-oculto", "true")
-    }
-
     return (
-        <div class="App">
-            <Wallpaper />
-            <BarraSuperior />
-            <Show when={!soportaBackdropFilter && mostrarMensajeBackdropFilter()}>
-                <div className={css(estilosGlobales.contenedor)}>
-                    Tu navegador no soporta "backdrop-filter". Este es solo un efecto
-                    visual, no afecta la funcionalidad de la página.&nbsp;
-                    <span
-                        className={css(estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
-                        onClick={ocultarMensajeBackdropFilter}
-                    >
-                        No volver a mostrar.
-                    </span>
-                </div>
-            </Show>
-            <div className={css(estilosGlobales.contenedor)}>
-                Solo teoria por ahora. Actualizado el 2021/03/28. Fuente:&nbsp;
-                <a className={css(estilosGlobales.linkGenerico)} target="_blank" href="https://www.facebook.com/Escuela-Profesional-de-Ingenieria-de-Sistemas-171720913528/photos/pcb.10159175240878529/10159175239403529">
-                    Página de Facebook de la escuela.
-                </a>
-            </div>
-            <div style={{width: "100%", height: "0.5rem"}} />
-            <ContenedorHorarios />
-            <Creditos />
+        <div className="App">
+            <Index />
         </div>
     )
 }
diff --git a/src/BarraSuperior.tsx b/src/BarraSuperior.tsx
index 337431d..12784a6 100755
--- a/src/BarraSuperior.tsx
+++ b/src/BarraSuperior.tsx
@@ -102,8 +102,8 @@ export function BarraSuperior() {
             </a>
             <CambiadorImg />
             <TamanoLetra />
-            <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>2021-A</span>
             <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>Ingeniería de Sistemas</span>
+            <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>2021-A</span>
         </header>
     )
 }
diff --git a/src/Estilos.ts b/src/Estilos.ts
index 877bd91..a26e709 100755
--- a/src/Estilos.ts
+++ b/src/Estilos.ts
@@ -2,6 +2,7 @@ import { StyleSheet } from "aphrodite"
 
 export const estilosGlobales = StyleSheet.create({
     contenedor: {
+        boxSizing: "border-box",
         margin: "0.3rem",
         padding: "0.5rem 0.5rem",
         borderRadius: "0.4rem",
@@ -16,7 +17,7 @@ export const estilosGlobales = StyleSheet.create({
         transition: "background-color 200ms",
         textDecoration: "underline solid white 2px",
         ":hover": {
-            backgroundColor: "rgba(200, 200, 200, 0.3)",
+            backgroundColor: "rgba(200, 200, 200, 0.4)",
         },
     },
     contenedorCursorSoft: {
diff --git a/src/Views/Index.tsx b/src/Views/Index.tsx
new file mode 100644
index 0000000..290322a
--- /dev/null
+++ b/src/Views/Index.tsx
@@ -0,0 +1,70 @@
+import { BarraSuperior } from "../BarraSuperior"
+import { Wallpaper } from "../Wallpaper"
+import { estilosGlobales } from "../Estilos"
+import { StyleSheet, css } from "aphrodite"
+
+const e = StyleSheet.create({
+    contenedorGlobal: {
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    cont: {
+        width: "30rem",
+    },
+    parrafo: {
+        textAlign: "justify",
+        lineHeight: "1.4rem",
+    },
+    botonAccion: {
+        width: "30rem",
+        display: "inline-block",
+        textAlign: "center",
+    },
+    iconoGitHub: {
+        fontSize: "1.25rem",
+        verticalAlign: "bottom",
+        marginRight: "0.5rem",
+    },
+})
+
+export function Index() {
+    return (
+        <div className={css(e.contenedorGlobal)}>
+            <Wallpaper />
+            <div className={css(e.cont)}>
+                <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock, e.cont)}>
+                    <h1 style={{"text-align": "center", "font-size": "1.75rem"}}>Horarios UNSA</h1>
+                    <p className={css(e.parrafo)}>
+                        Esta página te permite crear tu horario fácilmente, sin importar de que
+                        año son los cursos.
+                    </p>
+                    <p className={css(e.parrafo)}>
+                        Ingeniería de Sistemas cuenta con horarios de teoria y laboratorio automáticos,
+                        el resto de carreras solo cuenta con teoria y necesitan que el alumno inicie
+                        sesión.
+                    </p>
+                    <p className={css(e.parrafo)}>
+                        Se recomienda usar un computador/laptop y un navegador actualizado (Firefox, Chrome, Qutebrowser).
+                    </p>
+                </div>
+                <button className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}>
+                    Ing. de Sistemas
+                </button>
+                <button className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}>
+                    Otras carreras
+                </button>
+                <a
+                    className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
+                    href="https://github.com/Araozu/horarios-unsa-2/"
+                    target="_blank"
+                >
+                    <i className={`${css(e.iconoGitHub)} ph-code`} />
+                    Código fuente en GitHub
+                </a>
+            </div>
+        </div>
+    )
+}
diff --git a/src/Views/Main.tsx b/src/Views/Main.tsx
new file mode 100644
index 0000000..682dfb9
--- /dev/null
+++ b/src/Views/Main.tsx
@@ -0,0 +1,50 @@
+import { BarraSuperior } from "../BarraSuperior"
+import { ContenedorHorarios } from "../ContenedorHorarios/ContenedorHorarios"
+import { Wallpaper } from "../Wallpaper"
+import { Show, createSignal } from "solid-js"
+import { css } from "aphrodite"
+import { estilosGlobales } from "../Estilos"
+import { Creditos } from "../Creditos"
+
+export function Main() {
+    /// @ts-ignore
+    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined
+    const mostrarMensajeBackdropFilterRaw = !localStorage.getItem("mensaje-backdrop-filter-oculto")
+
+    const [mostrarMensajeBackdropFilter, setMostrarMensaje] = createSignal(mostrarMensajeBackdropFilterRaw)
+
+    const ocultarMensajeBackdropFilter = () => {
+        setMostrarMensaje(false)
+        localStorage.setItem("mensaje-backdrop-filter-oculto", "true")
+    }
+
+    return (
+        <div>
+            <Wallpaper />
+            <BarraSuperior />
+            <Show when={!soportaBackdropFilter && mostrarMensajeBackdropFilter()}>
+                <div className={css(estilosGlobales.contenedor)}>
+                    Tu navegador no soporta "backdrop-filter". Este es solo un efecto
+                    visual, no afecta la funcionalidad de la página.&nbsp;
+                    <span
+                        className={css(estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
+                        onClick={ocultarMensajeBackdropFilter}
+                    >
+                        No volver a mostrar.
+                    </span>
+                </div>
+            </Show>
+            {/*
+            <div className={css(estilosGlobales.contenedor)}>
+                Solo teoria por ahora. Actualizado el 2021/03/28. Fuente:&nbsp;
+                <a className={css(estilosGlobales.linkGenerico)} target="_blank" href="https://www.facebook.com/Escuela-Profesional-de-Ingenieria-de-Sistemas-171720913528/photos/pcb.10159175240878529/10159175239403529">
+                    Página de Facebook de la escuela.
+                </a>
+            </div>
+            */}
+            <div style={{width: "100%", height: "2rem"}} />
+            <ContenedorHorarios />
+            <Creditos />
+        </div>
+    )
+}