diff --git a/games.html b/games.html
index 775db9d..3b6fde8 100644
--- a/games.html
+++ b/games.html
@@ -12,24 +12,223 @@
 }
   </style>
   <body> 
-  <div class="center">
-  <br class="is-unselectable">
-  <h3 class="is-unselectable center"> Fighting / Shooting Games </h1>
-  <br>
-  <button class="button is-link is-outlined"> <a href="/BoredomGames/Main/Games/1v1 lol/1v1.lol-main/1v1.lol/index.htm">1v1 lol</a>
-  </button>
-  <button class="button is-link is-outlined"> <a href="/BoredomGames/Main/Games/Chroma/chroma.html">Chroma</a>
-  </button>
-  <br class="is-unselectable">
-  <h3 class="is-unselectable center"> Puzzle / Strategy Games </h1>
-  <br>
-  <button class="button is-link is-outlined"> <a href="/BoredomGames/Main/Games/2048/2048/index.html">2048</a>
-  </button>
-  <button class="button is-link is-outlined"> <a href="/BoredomGames/Main/Games/Canvas Tetris/canvas-tetris-master/index.html">Canvas Tetris</a>
-  </button>
-  <button class="button is-link is-outlined"> <a href="/BoredomGames/Main/Games/Konekt/Konekt.html">Konekt</a>
-  </button>
-  <button class="button is-link is-outlined"> <a href="/BoredomGames/Main/Games/Square/Square.html">Square</a>
-  </button>
-  </div>
+    <style>
+      .site-container {
+        max-width: 800px;
+        margin: 3em auto;
+        padding: 0 2em;
+      }
+    
+      .demo-title {
+        text-align: center;
+        margin-bottom: 2em;
+      }
+    
+      .carousel+.carousel {
+        margin-top: 4em;
+      }
+    </style>
+    
+    <div class="site-container">
+      <h1 class="demo-title">tbd</h1>
+      <div id="carousel-1" class="carousel" role="region" aria-labelledby="carousel-1-title">
+        <h2 class="carousel-title" id="carousel-1-title">
+          tbd
+        </h2>
+        <p class="carousel-description">
+          tbd
+        </p>
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-1-slide-1-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-1-slide-1-title">tbd</h3>
+              <p>tbd</p>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-1-slide-2-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-1-slide-2-title">tbd</h3>
+              <p>tbd</p>
+            </div>
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-1-slide-3-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-1-slide-3-title">tbd</h3>
+              <p>tbd</p>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-1-slide-4-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-1-slide-4-title">tbd</h3>
+              <p>tbd</p>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+      </div>
+    
+      <div id="carousel-2" class="carousel" role="region" aria-labelledby="carousel-1-title">
+        <h2 class="carousel-title" id="carousel-2-title">tbd</h2>
+        <p class="carousel-description">
+          tbd
+        </p>
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-2-slide-1-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-2-slide-1-title">tbd</h3>
+              <p>
+                tbd
+              </p>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-2-slide-2-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-2-slide-2-title">tbd</h3>
+              <p>
+                tbd
+              </p>
+            </div>
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-2-slide-3-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-2-slide-3-title">tbd</h3>
+              <p>
+                 tbd
+              </p>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+      </div>
+    
+      <div id="carousel-3" class="carousel" role="region" aria-labelledby="carousel-3-title">
+        <h2 class="carousel-title" id="carousel-3-title">games</h2>
+        <p class="carousel-description">
+          games
+        </p>
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-1-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-1-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-2-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-2-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-3-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-3-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-4-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-4-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-5-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-5-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-6-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-6-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-7-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-7-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-8-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-8-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-9-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-9-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+    
+        <div class="slide" role="tabpanel" aria-labelledby="carousel-3-slide-10-title">
+          <div class="slide-content">
+            <div class="slide-caption">
+              <h3 id="carousel-3-slide-10-title">tbd</h3>
+            </div>
+    
+            <img src="tbd" alt="tbd" width="800" height="350" />
+          </div>
+        </div>
+      </div>
+    </div>
   </body>
\ No newline at end of file
