diff --git a/code.png b/code.png
new file mode 100644
index 0000000..26586d4
Binary files /dev/null and b/code.png differ
diff --git a/metodos_arrays/metodos_arrays.html b/metodos_arrays/metodos_arrays.html
index 7485982..afc0f4f 100644
--- a/metodos_arrays/metodos_arrays.html
+++ b/metodos_arrays/metodos_arrays.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -9,72 +10,88 @@
     <link rel="stylesheet" href="metodos_arrays.css">
     <link rel="icon" href="../img/Unofficial_JavaScript_logo_2.svg.png" type="image/x-icon" />
 </head>
+
 <body>
     <!--<button onclick="popA()">Click</button>-->
-<h1>Transformadores</h1>
-<div class="main">
-    <div>
-        <h1>Pop</h1>
-        <button onclick="popTest()">Example</button>
-    </div>
-    <div>
-        <h1>Shift</h1>
-        <button onclick="shiftTest()">Example</button>
-    </div>
-    <div>
-        <h1>Push</h1>
-        <button onclick="pushTest()">Example</button>
-    </div>
-    <div>
-        <h1>Reverse</h1>
-        <button onclick="reverseTest()">Example</button> 
-    </div>
-    <div>
-        <h1>Unshift</h1>
-        <button onclick="unshiftTest()">Example</button> 
-    </div>
-    <div>
-        <h1>Sort</h1>
-        <button onclick="sortTest()">Example</button> 
+    <h1>Transformadores</h1>
+    <div class="main">
+        <div>
+            <h1>Pop</h1>
+            <button onclick="popTest()">Example</button>
+            <code>let popTest = () =>{
+            let nombres = ['pedro','paco','maria'];
+        
+            document.write('<b>Original: </b>' + nombres + '<br>');
+        
+            let resultado = nombres.pop(); // Remueve el ultimo y lo devuele
+        
+            document.write('<b>POP: </b>' + resultado + '<br>');
+        
+            document.write('<b>Resultado: </b>' + nombres);
+        
+        }
+        </code>
+        </div>
+        <div>
+            <h1>Shift</h1>
+            <button onclick="shiftTest()">Example</button>
+        </div>
+        <div>
+            <h1>Push</h1>
+            <button onclick="pushTest()">Example</button>
+        </div>
+        <div>
+            <h1>Reverse</h1>
+            <button onclick="reverseTest()">Example</button>
+        </div>
+        <div>
+            <h1>Unshift</h1>
+            <button onclick="unshiftTest()">Example</button>
+        </div>
+        <div>
+            <h1>Sort</h1>
+            <button onclick="sortTest()">Example</button>
+        </div>
+        <div>
+            <h1>Splice</h1>
+            <button onclick="spliceTest()">Example</button>
+        </div>
     </div>
-    <div>
-        <h1>Splice</h1>
-        <button onclick="spliceTest()">Example</button> 
-    </div>
-</div>
 
-<h1>Accesores</h1>
-<div class="main">
-    <div>
-        <h1>Join</h1>
-        <button onclick="joinTest()">Example</button>
-    </div>
-    <div>
-        <h1>Slice</h1>
-        <button onclick="sliceTest()">Example</button>
-    </div>
-    <div>
-        <h1>Otros</h1>
-        <button onclick="otrosTest()">Example</button>
+    <h1>Accesores</h1>
+    <div class="main">
+        <div>
+            <h1>Join</h1>
+            <button onclick="joinTest()">Example</button>
+        </div>
+        <div>
+            <h1>Slice</h1>
+            <button onclick="sliceTest()">Example</button>
+        </div>
+        <div>
+            <h1>Otros</h1>
+            <button onclick="otrosTest()">Example</button>
+        </div>
     </div>
-</div>
 
-<h1>De Repetición</h1>
-<div class="main">
-    <div>
-        <h1>Filter</h1>
-        <button onclick="filterTest()">Example</button>
+    <h1>De Repetición</h1>
+    <div class="main">
+        <div>
+            <h1>Filter</h1>
+            <button onclick="filterTest()">Example</button>
+        </div>
+        <div>
+            <h1>ForEach</h1>
+            <button onclick="forEachTest()">Example</button>
+        </div>
+        <div>
+            <h1>Map</h1>
+            <button onclick="mapTest()">Example</button>
+        </div>
     </div>
-    <div>
-        <h1>ForEach</h1>
-        <button onclick="forEachTest()">Example</button>
-    </div>
-    <div>
-        <h1>Map</h1>
-        <button onclick="mapTest()">Example</button>
-    </div>
-</div>
 
-<script src="metodos_arrays.js"></script> <!--Es mejor ponerlo al final ya que asi carga primero la pagina y luego el script-->
+    <script src="metodos_arrays.js"></script>
+    <!--Es mejor ponerlo al final ya que asi carga primero la pagina y luego el script-->
 </body>
-</html> 
+
+</html>
\ No newline at end of file
diff --git a/pepe.css b/pepe.css
new file mode 100644
index 0000000..c2783a9
--- /dev/null
+++ b/pepe.css
@@ -0,0 +1,59 @@
+
+
+.main {
+   border: 2px red solid;
+   display: grid;
+   grid-template-columns: repeat(auto-fill,23%);
+   text-align: center;
+   grid-gap: 2%;
+   padding: 5%;
+
+}
+
+.main div{
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);;
+}
+
+.main div button{
+
+    background: rgb(24, 24, 24);
+    color: rgb(245, 245, 245);
+    border: none;
+    border-radius: 100px;
+    padding: 10%;
+    cursor: pointer;
+    
+}
+
+.main div button:hover{
+    background: rgb(245, 245, 245);
+    color: rgb(24, 24, 24);
+    transition: background .3s ease-in;
+}
+
+.main div:nth-child(1){
+    background-color: orange;
+}
+
+
+
+
+.code{
+    display: none;
+}
+
+.hola{
+    display: none;
+    user-select: none;
+    
+}
+
+.popup{
+    display: block;
+    position: relative;
+    margin-top: 10%;
+    background: #000;
+    color: #fff;
+}
diff --git a/pepe.html b/pepe.html
new file mode 100644
index 0000000..6ff54bf
--- /dev/null
+++ b/pepe.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="pepe.css">
+</head>
+<body>
+    <div class="main">
+        <div>
+            <h1>Pop</h1>
+            <button class="pepe">Example</button>
+            <code class="code">let popTest = () =>{
+            let nombres = ['pedro','paco','maria'];
+        
+            document.write('<b>Original: </b>' + nombres + '<br>');
+        
+            let resultado = nombres.pop(); // Remueve el ultimo y lo devuele
+        
+            document.write('<b>POP: </b>' + resultado + '<br>');
+        
+            document.write('<b>Resultado: </b>' + nombres);
+        
+        }
+        </code>
+        <code class='hola'></code>
+        </div>
+<script src="pepe.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/pepe.js b/pepe.js
new file mode 100644
index 0000000..8b6747b
--- /dev/null
+++ b/pepe.js
@@ -0,0 +1,25 @@
+const test = document.querySelector('.pepe');
+const code = document.querySelector('.code');
+const hola = document.querySelector('.hola');
+
+test.addEventListener('click',()=>{
+    
+   code.classList.toggle('popup');
+   hola.classList.toggle('hola');
+})
+
+
+let popTest = () =>{
+    let nombres = ['pedro','paco','maria'];
+
+    hola.innerHTML += ('<b>Original: </b>' + nombres + '<br>');
+
+    let resultado = nombres.pop(); // Remueve el ultimo y lo devuele
+
+    hola.innerHTML += ('<b>POP: </b>' + resultado + '<br>');
+
+    hola.innerHTML += ('<b>Resultado: </b>' + nombres);
+
+}
+
+popTest();
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..613e739
--- /dev/null
+++ b/script.js
@@ -0,0 +1,25 @@
+const code = document.querySelector('.code');
+const debug = document.querySelector('.debug');
+
+
+let popTest = () =>{
+    let nombres = ['pedro','paco','maria'];
+
+    debug.innerHTML = '<b>Original: </b>' + nombres + '<br>';
+
+    let resultado = nombres.pop(); // Remueve el ultimo y lo devuele
+
+    debug.innerHTML += '<b>POP: </b>' + resultado + '<br>';
+
+    debug.innerHTML += '<b>Resultado: </b>' + nombres;
+   
+
+}
+
+
+
+popTest();
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b1ccecf
--- /dev/null
+++ b/style.css
@@ -0,0 +1,45 @@
+div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.code img{
+    max-width: 100%;
+    min-width: none;
+}
+
+.debug{
+    border: #f32 solid 1px;
+    padding: 3%;
+    color: #222;
+    margin-top: 10px;
+
+}
+
+.red{
+    color: #f32;
+}
+
+.yellow{
+    color: #ee4;
+}
+
+.purple{
+    color: #99f;
+}
+
+.blue{
+    color: #3df;
+}
+
+.green{
+    color: #2f3;
+}
+
+.orange {
+    color: orange;
+}
+
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..a6aebae
--- /dev/null
+++ b/test.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS Review</title>
+    <link rel="stylesheet" href="../styles/normalize.css">
+    <link rel="stylesheet" href="metodos_arrays.css">
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="../img/Unofficial_JavaScript_logo_2.svg.png" type="image/x-icon" />
+</head>
+
+<body>
+    <div>
+        <code class="code">
+            <img src="code.png" alt="">
+        </code>
+        <code class="debug">
+        </code>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
