diff --git a/img/menu-min.png b/img/menu-min.png
new file mode 100644
index 0000000..f578e7f
Binary files /dev/null and b/img/menu-min.png differ
diff --git a/img/menu.png b/img/menu.png
new file mode 100644
index 0000000..c98d014
Binary files /dev/null and b/img/menu.png differ
diff --git a/img/more-options-min.png b/img/more-options-min.png
new file mode 100644
index 0000000..91f92b0
Binary files /dev/null and b/img/more-options-min.png differ
diff --git a/img/more-options.png b/img/more-options.png
new file mode 100644
index 0000000..0613040
Binary files /dev/null and b/img/more-options.png differ
diff --git a/img/three lines menu-min.png b/img/three lines menu-min.png
new file mode 100644
index 0000000..3cd0b4c
Binary files /dev/null and b/img/three lines menu-min.png differ
diff --git a/img/three lines menu.png b/img/three lines menu.png
new file mode 100644
index 0000000..42a9dd3
Binary files /dev/null and b/img/three lines menu.png differ
diff --git a/index.html b/index.html
index 88a215e..bc6ac60 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,134 @@
     <title>Columbus</title>
 </head>
 <body>
-    <header>
 
+    <div class="menu-lateral">
+        <img src="./img/three lines menu-min.png" alt="three lines menu"> <!--Source: https://www.flaticon.com/premium-icon/menu_3502458?term=three%20lines&page=1&position=4&page=1&position=4&related_id=3502458&origin=search-->
+    </div>
+
+    <header>
+        <div class="logo">
+            <h1>Columbus</h1>
+            <h3>Bakery Wholesale</h3>
+        </div>
+        <div class="perfil">
+            <span id="perfil-nombre">Ana María</span>
+            <span id="nacionalidad">ARG</span>
+        </div>
+        <a href="#" id="more-options">
+            <img src="./img/menu-min.png" alt="menu image"> <!-- Source: https://www.flaticon.es/icono-gratis/menu_483345?term=menu%20vertical&page=1&position=10&page=1&position=10&related_id=483345&origin=search-->
+        </a>
     </header>
+        
+    <div class="pagina-principal">
+
+        <div class="primer-columna">
+            <div class="checkout">
+                <table id="products-display-checkout">
+                    <tr>
+                        <th>
+                            Cantidad
+                        </th>
+                        <th>
+                            Producto
+                        </th>
+                        <th>
+                            Tax
+                        </th>
+                        <th>
+                            Total
+                        </th>
+                    </tr>
+                </table>
+                
+                <br>
+                
+                <div>
+                    <span class="total">Total</span>
+                    <span class="precio"></span>
+                    <span class="moneda">$</span>
+                </div>
+            </div>
+            
+            <div class="botones-de-descuento">
+
+                <button>
+                    DESCUENTO DE EMPLEADOS
+                </button>
+
+                <button>
+                    VISTA CLIENTE
+                </button>
+
+                <button>
+                    CÓDIGO PROMOCIONAL
+                </button>
+            </div>
+        </div>
+
+        <div class="segunda-columna">
+            <nav>
+                <ul>
+                    <li>
+                        BEBIDAS
+                    </li>
+                    <li>
+                        COMIDAS
+                    </li>
+                    <li>
+                        REPOSTERÍA Y PANADERÍA
+                    </li>
+                    <li>
+                        REFRIGERADOS
+                    </li>
+                    <li>
+                        <img src="./img/more-options-min.png" alt="more options button"> <!--Source: https://www.flaticon.com/premium-icon/more_5857049?term=more%20apps&page=1&position=46&page=1&position=46&related_id=5857049&origin=search-->
+                    </li>
+                </ul>
+            </nav>
+            
+            <div class="productos">
+                <!-- //! RELLENAR CON DATOS DE EJEMPLO-->
+            </div>
+
+            <div class="sub-menu">
+
+                <div class="opciones-de-pago">
+                    
+                    <div>
+                        <img src="./img/pngwing.com.png" alt="cash icon">
+                    </div>
+
+                    <div>
+                        <img src="./img/visa.png" alt="Visa icon">
+                    </div>
+
+                    <div>
+                        <img src="./img/mastercard.png" alt="Mastercard icon">
+                    </div>
+
+                    <div>
+                        <img src="./img/uber-eats.jpg" alt="Uber Eats icon">
+                    </div>
+                    
+                    <div>
+                        DEBITO
+                    </div>
+
+                    <div>
+                        +
+                    </div>
+                </div>
+
+                <div class="pagar">
+                    
+                    <span>PAGAR</span>
+
+                </div>
+
+            </div>
+        </div>
+
+    </div>
 </body>
 </html>
\ No newline at end of file
