diff --git a/docs/css/media.css b/docs/css/media.css
index 477ea842..35370ccf 100644
--- a/docs/css/media.css
+++ b/docs/css/media.css
@@ -19,6 +19,10 @@
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
 
+  .picture {
+    align-items: center;
+  }
+
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
@@ -35,7 +39,6 @@
     order: 3;
   }
 
-
   .navigation-menu {
     order: 2;
     height: 50px;
@@ -56,6 +59,8 @@
     padding: 0;
   }
 
+
+
   /* CONTENT */
   .content-and-sidebar {
     display: grid;
@@ -68,6 +73,9 @@
   }
 
 
+
+
+
   /* FOOTER */
   footer .info {
     gap: 30px;
diff --git a/docs/css/videogame.css b/docs/css/videogame.css
index 4698bbdb..7a6abf2c 100644
--- a/docs/css/videogame.css
+++ b/docs/css/videogame.css
@@ -106,6 +106,7 @@ a .text-highlight:hover {
 header {
   position: fixed;
   top: 0;
+  z-index: 1;
   background-color: var(--background-color-2);
   box-shadow: 0 -3px 20px 5px rgb(171, 171, 171);
   width: 100%;
@@ -206,6 +207,7 @@ header .game-logo {
 
 .sidebar {
   display: none;
+
 }
 
 .content {
@@ -249,8 +251,28 @@ header .game-logo {
   gap: 60px;
 }
 
-.picture, .picture img {
+.picture {
+  max-width: 100%;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: end;
+}
+
+/* .enemy-card .picture {
+  border: 2px dashed aquamarine;
+} */
+
+.defense-card .picture {
+  /* border: 2px dashed magenta; */
+  background-color: var(--background-color-2);
+  padding: 10px;
+  border-radius: 1rem;
+}
+
+.picture img {
   max-width: 100%;
+  max-height: 100%;
 }
 
 .about-section .picture img {
diff --git a/docs/img/Background.jpg b/docs/img/Background.jpg
new file mode 100644
index 00000000..1f675e83
Binary files /dev/null and b/docs/img/Background.jpg differ
diff --git a/docs/img/Baliza.png b/docs/img/Baliza.png
new file mode 100644
index 00000000..f5ead7b7
Binary files /dev/null and b/docs/img/Baliza.png differ
diff --git a/docs/img/Baliza_outline.png b/docs/img/Baliza_outline.png
new file mode 100644
index 00000000..2acbf961
Binary files /dev/null and b/docs/img/Baliza_outline.png differ
diff --git a/docs/img/Gifs/AraneaWalkGif.gif b/docs/img/Gifs/AraneaWalkGif.gif
new file mode 100644
index 00000000..c41cd85b
Binary files /dev/null and b/docs/img/Gifs/AraneaWalkGif.gif differ
diff --git a/docs/img/Gifs/HemeraDie.gif b/docs/img/Gifs/HemeraDie.gif
new file mode 100644
index 00000000..7a18f154
Binary files /dev/null and b/docs/img/Gifs/HemeraDie.gif differ
diff --git a/docs/img/Gifs/HemeraDieGif.gif b/docs/img/Gifs/HemeraDieGif.gif
new file mode 100644
index 00000000..40947f74
Binary files /dev/null and b/docs/img/Gifs/HemeraDieGif.gif differ
diff --git a/docs/img/Gifs/Poly.gif b/docs/img/Gifs/Poly.gif
new file mode 100644
index 00000000..61196301
Binary files /dev/null and b/docs/img/Gifs/Poly.gif differ
diff --git a/docs/img/Gifs/VespSpawn2.12.gif b/docs/img/Gifs/VespSpawn2.12.gif
new file mode 100644
index 00000000..c2efc459
Binary files /dev/null and b/docs/img/Gifs/VespSpawn2.12.gif differ
diff --git a/docs/img/Gifs/VespTurnAround.gif b/docs/img/Gifs/VespTurnAround.gif
new file mode 100644
index 00000000..10d50c28
Binary files /dev/null and b/docs/img/Gifs/VespTurnAround.gif differ
diff --git a/docs/img/Gifs/VitaeDieGif.gif b/docs/img/Gifs/VitaeDieGif.gif
new file mode 100644
index 00000000..c750ea4a
Binary files /dev/null and b/docs/img/Gifs/VitaeDieGif.gif differ
diff --git a/docs/img/Gifs/VitaeWalkRight.gif b/docs/img/Gifs/VitaeWalkRight.gif
new file mode 100644
index 00000000..9d098d97
Binary files /dev/null and b/docs/img/Gifs/VitaeWalkRight.gif differ
diff --git a/docs/img/Gifs/Waves.gif b/docs/img/Gifs/Waves.gif
new file mode 100644
index 00000000..783887c4
Binary files /dev/null and b/docs/img/Gifs/Waves.gif differ
diff --git "a/docs/img/Se\303\261uelo.png" "b/docs/img/Se\303\261uelo.png"
new file mode 100644
index 00000000..dd895e60
Binary files /dev/null and "b/docs/img/Se\303\261uelo.png" differ
diff --git "a/docs/img/Se\303\261uelo_outline.png" "b/docs/img/Se\303\261uelo_outline.png"
new file mode 100644
index 00000000..9da05f1d
Binary files /dev/null and "b/docs/img/Se\303\261uelo_outline.png" differ
diff --git a/docs/img/Torreta.png b/docs/img/Torreta.png
new file mode 100644
index 00000000..7d81ddd0
Binary files /dev/null and b/docs/img/Torreta.png differ
diff --git a/docs/img/Torreta_outline.png b/docs/img/Torreta_outline.png
new file mode 100644
index 00000000..bfb4a2f0
Binary files /dev/null and b/docs/img/Torreta_outline.png differ
diff --git a/docs/index.html b/docs/index.html
index fa221abb..13de0513 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -48,7 +48,8 @@
     <!-- MAIN BODY -->
     <main>
       <div class="content-and-sidebar">
-        <div class="sidebar"></div>
+        <div class="sidebar sidebar-left">
+        </div>
 
         <div class="content">
           <!-- INICIO -->
@@ -82,7 +83,9 @@ <h2 class="section-title">ENEMIGOS</h2>
             <div class="cards enemy-cards">
 
               <div class="card enemy-card display-row">
-                <div class="picture content-item" style="height: 200px; border: 2px dashed aquamarine;"><p>&lt;Img&gt;</p></div>
+                <div class="picture content-item">
+                  <img src="img/Gifs/VespTurnAround.gif" style="max-width: 40%;" alt="Vespertilio gif">
+                </div>
                 <div class="card-info content-item flex-2">
                   <h3>VESPERTILIO</h3>
                   <div class="description">
@@ -92,7 +95,9 @@ <h3>VESPERTILIO</h3>
               </div>
 
               <div class="card enemy-card display-row">
-                <div class="picture content-item" style="height: 200px; border: 2px dashed aquamarine;"><p>&lt;Img&gt;</p></div>
+                <div class="picture content-item">
+                  <img src="img/Gifs/VitaeWalkRight.gif" alt="Vitae gif">
+                </div>
                 <div class="card-info content-item flex-2">
                   <h3>VITAE</h3>
                   <div class="description">
@@ -102,7 +107,9 @@ <h3>VITAE</h3>
               </div>
 
               <div class="card enemy-card display-row">
-                <div class="picture content-item" style="height: 200px; border: 2px dashed aquamarine;"><p>&lt;Img&gt;</p></div>
+                <div class="picture content-item">
+                  <img src="img/Gifs/Poly.gif" alt="Poly gif">
+                </div>
                 <div class="card-info content-item flex-2">
                   <h3>POLY</h3>
                   <div class="description">
@@ -113,7 +120,9 @@ <h3>POLY</h3>
               </div>
 
               <div class="card enemy-card display-row">
-                <div class="picture content-item" style="height: 200px; border: 2px dashed aquamarine;"><p>&lt;Img&gt;</p></div>
+                <div class="picture content-item">
+                  <img src="img/Gifs/AraneaWalkGif.gif" style="max-width: 50%;" alt="Aranea gif">
+                </div>
                 <div class="card-info content-item flex-2">
                   <h3>ARANEAS</h3>
                   <div class="description">
@@ -137,7 +146,9 @@ <h2 class="section-title">DEFENSAS</h2>
             <div class="cards defense-cards">
 
               <div class="card defense-card display-row-reverse">
-                <div class="content-item picture" style="border: 2px dashed magenta; height: 200px;"><p>&lt;Img&gt;</p></div>
+                <div class="content-item picture">
+                  <img src="img/Baliza_outline.png" alt="Baliza">
+                </div>
                 <div class="card-info content-item flex-2">
                   <h3>BALIZA</h3>
                   <div class="description">
@@ -147,7 +158,9 @@ <h3>BALIZA</h3>
               </div>
 
               <div class="card defense-card display-row-reverse">
-                <div class="content-item picture" style="border: 2px dashed magenta; height: 200px;"><p>&lt;Img&gt;</p></div>
+                <div class="content-item picture">
+                  <img src="img/Señuelo_outline.png" style="max-height: 90%;" alt="Señuelo">
+                </div>
                 <div class="card-info content-item flex-2">
                   <h3>SEÑUELO</h3>
                   <div class="description">
@@ -158,7 +171,9 @@ <h3>SEÑUELO</h3>
               </div>
 
               <div class="card defense-card display-row-reverse">
-                <div class="content-item picture" style="border: 2px dashed magenta; height: 200px;"><p>&lt;Img&gt;</p></div>
+                <div class="content-item picture">
+                  <img src="img/Torreta_outline.png" alt="">
+                </div>
                 <div class="card-info content-item flex-2">
                   <h3>TORRETA</h3>
                   <div class="description">
@@ -201,7 +216,8 @@ <h2 class="section-title">QUIÉNES SOMOS</h2>
 
         </div>
 
-        <div class="sidebar"></div>
+        <div class="sidebar sidebar-right">
+        </div>
       </div>