diff --git a/web/src/components/InfoProject.astro b/web/src/components/InfoProject.astro
index f5fdf06..07fc43e 100644
--- a/web/src/components/InfoProject.astro
+++ b/web/src/components/InfoProject.astro
@@ -39,7 +39,114 @@ const { info } = Astro.props
   >
     #{info.number} - {info.title}
   </h2>
-  <a class="text-xs animate-fade-in animate-delay-800 hover:underline" href="/"
-    >← Volver a los proyectos</a
-  >
+  <a class="text-xs animate-fade-in animate-delay-800 hover:underline" href="/">
+    ← Volver a los proyectos
+  </a>
+  <ul class="flex flex-wrap flex-col-reverse gap-2 mt-4">
+    <li>
+      <a
+        href={`https://github.com/midudev/javascript-100-proyectos/tree/main/${info.slug}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center justify-center w-full px-3 py-2 text-xs font-semibold text-center text-black bg-white transition border border-black/60 rounded-lg hover:bg-black/10 md:text-sm"
+      >
+        <svg
+          class="w-5 h-5 mr-1"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        Código
+      </a>
+    </li>
+    <li>
+      <a
+        href={`/${info.slug}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center justify-center w-full px-3 py-2 text-xs font-semibold text-center text-sky-700 bg-white transition border border-sky-700/60 rounded-lg hover:bg-sky-600/20 md:text-sm"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-5 h-5 mr-1"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
+          />
+        </svg>
+        Demo
+      </a>
+    </li>
+    {info.youtube != null && (
+      <li>
+        <a
+          href={info.youtube}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center justify-center w-full px-3 py-2 text-xs font-semibold text-center text-red-700 bg-white transition border border-red-700/60 rounded-lg hover:bg-red-600/20 md:text-sm"
+        >
+          <svg
+            class="w-5 h-5 mr-1"
+            viewBox="0 0 256 180"
+            width="256"
+            height="180"
+            xmlns="http://www.w3.org/2000/svg"
+            preserveAspectRatio="xMidYMid"
+          >
+            <path
+              d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"
+              fill="red"
+            />
+            <path
+              fill="#FFF"
+              d="m102.421 128.06 66.328-38.418-66.328-38.418z"
+            />
+          </svg>
+          Vídeo
+        </a>
+      </li>
+    )}
+    {info.twitch != null && (
+      <li>
+        <a
+          href={info.twitch}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center justify-center w-full px-3 py-2 text-xs font-semibold text-center text-[#874af6] transition bg-white rounded-lg hover:bg-[#d1b9ff] md:text-sm border border-[#874af6]"
+        >
+          <svg
+            class="w-5 h-5 mr-1"
+            xmlns="http://www.w3.org/2000/svg"
+            width="256"
+            height="180"
+            viewBox="0 0 118 138"
+          >
+            <g fill="none" fill-rule="evenodd">
+              <path
+                fill="#FFF"
+                d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
+              />
+              <path
+                fill="#9146FF"
+                d="M117.605 0v68.605l-44.102 44.099H53.904l-24.503 24.503v-24.503H0V24.502L24.5 0h93.105Zm-9.8 9.801H29.401v73.503h22.051v17.15l17.153-17.15h19.601l19.599-19.601V9.801ZM93.1042 26.9518v29.4h-9.8v-29.4h9.8Zm-26.951 0v29.4h-9.8v-29.4h9.8Z"
+              />
+            </g>
+          </svg>
+          Twitch
+        </a>
+      </li>
+    )}
+  </ul>
 </div>
diff --git a/web/src/components/Projects.astro b/web/src/components/Projects.astro
index 4881bfc..d1192e0 100644
--- a/web/src/components/Projects.astro
+++ b/web/src/components/Projects.astro
@@ -1,5 +1,5 @@
 ---
-import { PROJECTS } from "../consts"
+import { PROJECTS } from "../consts";
 ---
 
 <div
@@ -7,7 +7,7 @@ import { PROJECTS } from "../consts"
 >
   {
     PROJECTS.map((project, index) => {
-      const num = `${index + 1}`.padStart(2, "0")
+      const num = `${index + 1}`.padStart(2, "0");
 
       return (
         <article class="relative items-center text-black rounded-lg">
@@ -119,10 +119,40 @@ import { PROJECTS } from "../consts"
                   </a>
                 </li>
               )}
+              {project.twitch != null && (
+                <li>
+                  <a
+                    href={project.twitch}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-[#874af6] transition bg-white rounded-lg hover:bg-[#d1b9ff] md:text-sm border border-[#874af6]"
+                  >
+                    <svg
+                      class="w-5 h-5 mr-1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="256"
+                      height="180"
+                      viewBox="0 0 118 138"
+                    >
+                      <g fill="none" fill-rule="evenodd">
+                        <path
+                          fill="#FFF"
+                          d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
+                        />
+                        <path
+                          fill="#9146FF"
+                          d="M117.605 0v68.605l-44.102 44.099H53.904l-24.503 24.503v-24.503H0V24.502L24.5 0h93.105Zm-9.8 9.801H29.401v73.503h22.051v17.15l17.153-17.15h19.601l19.599-19.601V9.801ZM93.1042 26.9518v29.4h-9.8v-29.4h9.8Zm-26.951 0v29.4h-9.8v-29.4h9.8Z"
+                        />
+                      </g>
+                    </svg>
+                    Twitch
+                  </a>
+                </li>
+              )}
             </ul>
           </div>
         </article>
-      )
+      );
     })
   }
   <article
diff --git a/web/src/consts.js b/web/src/consts.js
index 40e31f9..5add6e3 100644
--- a/web/src/consts.js
+++ b/web/src/consts.js
@@ -10,7 +10,7 @@ export const PROJECTS = [
       "Eventos de mouse y touch",
       "Transiciones CSS",
     ],
-    youtube: 'https://www.youtube.com/watch?v=u01WD_YNENY'
+    youtube: "https://www.youtube.com/watch?v=u01WD_YNENY",
   },
   {
     slug: "02-arkanoid-game",
@@ -21,7 +21,8 @@ export const PROJECTS = [
       "Dibujar en Canvas",
       "Eventos de teclado",
       "RequestAnimationFrame",
-      "Sprites"
-    ]
+      "Sprites",
+    ],
+    twitch: "https://www.twitch.tv/videos/2068533559",
   },
-]
\ No newline at end of file
+];