diff --git a/app.py b/app.py
index 493e3fa..c96f113 100644
--- a/app.py
+++ b/app.py
@@ -50,6 +50,39 @@ HTML_FORM = '''
     display: flex;
     flex-direction: column;
   }
+
+  .markdown-ref {
+    background: #22282c;
+    border-radius: 1.2em;
+    box-shadow: 0 0 8px #0008;
+    padding: 1.3em 1.2em 1.1em 1.6em;
+    color: #b6c8e0;
+    font-size: 1.08em;
+    max-width: 410px;
+    font-family: inherit;
+  }
+  .markdown-ref h4 {
+    margin: 0 0 0.4em 0;
+    color: #88e0ff;
+    font-size: 1.12em;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+  }
+  .markdown-ref ul {
+    margin: 0.6em 0 0.3em 0.1em;
+    padding-left: 1.1em;
+  }
+  .markdown-ref li {
+    margin-bottom: 0.36em;
+  }
+  .markdown-ref code {
+    background: #181c1f;
+    border-radius: 0.5em;
+    padding: 0.12em 0.46em;
+    color: #aef6cb;
+    font-size: 0.98em;
+    margin-left: 0.18em;
+  }
   textarea {
     width: 100%;
     height: 14em;
@@ -127,6 +160,20 @@ HTML_FORM = '''
   }
 </style>
 <div class="centered-flex">
+  <div class="markdown-ref">
+    <h4>Referencia rápida de Markdown</h4>
+    <ul>
+      <li><b>Negrita:</b> <code>**texto**</code></li>
+      <li><b>Cursiva:</b> <code>*texto*</code></li>
+      <li><b>Negrita y cursiva:</b> <code>***texto***</code></li>
+      <li><b>Encabezado grande:</b> <code># Título</code></li>
+      <li><b>Encabezado mediano:</b> <code>## Título</code></li>
+      <li><b>Encabezado chico:</b> <code>### Título</code></li>
+      <li><b>Lista con viñetas:</b> <code>- Elemento</code></li>
+      <li><b>Lista numerada:</b> <code>1. Elemento</code></li>
+      <li><b>Salto de línea:</b> Deje una línea vacía</li>
+    </ul>
+  </div>
   <div class="form-card">
     <h2 style="margin-top:0.2em;">CatNotepad</h2>
     <form method=post enctype=multipart/form-data>