diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0276b53
--- /dev/null
+++ b/index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Start</title>
+<meta charset="utf-8"/>
+<style>
+    /* Text formatting */
+    body {
+        font-family: sans-serif;
+        background: #121212;
+        color: #ebdbb2;
+        margin-right: auto;
+        margin-left: auto;
+        margin-top: auto;
+    }
+
+    h1 {
+        font-size: 25px;
+        text-align: center;
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 800px;
+        color: #ebdbb2;
+        margin:5px;
+    }
+
+    h2,h3,p,h5 {
+        font-size: 15px;
+        text-align: left;
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 800px;
+        color: #83a598;
+    }
+
+    p {
+        text-align: justify;
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 800px;
+    }
+
+    em {
+        color: #d3869b;
+    }
+
+    .columns {
+        content: "";
+        display: table;
+        clear: both;
+        margin-right: auto;
+        margin-left: auto;
+        width: 80%;
+        min-width: 1080;
+    }
+
+    .column {
+        border-radius: 10px;
+        background-color: #282828;
+        margin: 5px;
+        padding: 15px;
+        width: 20%;
+        float:left;
+    }
+
+    .title {
+        width: 80%;
+        max-width: 800px;
+        margin-right: auto;
+        margin-left: auto;
+        display: block;
+        padding: 40px;
+    }
+    .title h1 {
+        padding: 50px;
+        font-size: 50px;
+    }
+
+    /* Other stuff */
+    a {
+        transition: all 0.2s ease 0s;
+        text-decoration-line: none;
+        color: #a89985;
+    }
+    a:hover {
+        color: white;
+    }
+
+    .aqua {
+        color: #83a598;
+    }
+    .purple {
+        color: #d3869b;
+    }
+    .yellow {
+        color: #fabd2f;
+    }
+    .red {
+        color: #fb4934;
+    }
+
+</style>
+</head>
+<body>
+
+<!-- Banner -->
+<div class="container"><div class="banner"></div></div>
+
+<!-- Inicio del index -->
+<div class="title">
+    <h1>Welcome back!</h1>
+</div>
+
+<div class="columns">
+    <div class="column">
+        <h1 class="aqua">Academic</h1>
+        <p><a href="https://mv1.mediacionvirtual.ucr.ac.cr">Mediación Virtual 1</a></p>
+        <p><a href="https://mv2.mediacionvirtual.ucr.ac.cr">Mediación Virtual 2</a></p>
+    </div>
+    <div class="column">
+        <h1 class="purple">Communication</h1>
+        <p><a href="https://correo.ucr.ac.cr">Correo UCR</a></p>
+        <p><a href="https://web.whatsapp.com">Whatsapp</a></p>
+        <p><a href="https://web.telegram.org">Telegram</a></p>
+    </div>
+    <div class="column">
+        <h1 class="yellow">Tools</h1>
+        <p><a href="blog/2023-04-08-crypto/">2023-04-08-Crypto</a></p>
+        <p><a href="blog/2023-01-13-latin/">2023-01-13-Latinus, porta ad mundo</a></p>
+        <p><a href="blog/">Todos -></a></p>
+    </div>
+    <div class="column">
+        <h1 class="red">Entertainment</h1>
+        <p><a href="blog/2023-04-08-crypto/">2023-04-08-Crypto</a></p>
+        <p><a href="blog/2023-01-13-latin/">2023-01-13-Latinus, porta ad mundo</a></p>
+        <p><a href="blog/">Todos -></a></p>
+    </div>
+</div>
+
+<!-- Final del index -->
+</body>
+</html>
