diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d57e726
--- /dev/null
+++ b/index.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Adobe Flash Games Directory</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+
+  <body>
+    <div id="container">
+      <h1>Adobe Flash Games Directory</h1>
+      <p>
+        Here you can find a collection of Adobe Flash games that you can play
+        online for free. Please note that modern browsers no longer support
+        Flash content, so you will need to use a Flash Player emulator or
+        standalone Flash Player to run these games.
+      </p>
+
+      <!-- Card for all games -->
+      <div class="card">
+        <p>
+          <span
+            ><a href="./34027-flash-game.swf" target="_blank">Game 1</a></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./age-of-defense-8.swf" target="_blank"
+              >Age of Defense 8</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a
+              href="./bad-ice-cream-3-www-boysplaygame-com.swf"
+              target="_blank"
+              >Bad Ice Cream 3</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./bob-the-robber.swf" target="_blank"
+              >Bob the Robber</a
+            ></span
+          >
+        </p>
+        <p>
+          <span><a href="./commando-2.swf" target="_blank">Commando 2</a></span>
+        </p>
+        <p>
+          <span
+            ><a href="./empires-of-arkeia.swf" target="_blank"
+              >Empires of Arkeia</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./extreme-pamplona.swf" target="_blank"
+              >Extreme Pamplona</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./fish-tales-2.swf" target="_blank">Fish Tales 2</a></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./fish-tales-deluxe-edition.swf" target="_blank"
+              >Fish Tales Deluxe Edition</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./gotham-city-rush.swf" target="_blank"
+              >Gotham City Rush</a
+            ></span
+          >
+        </p>
+        <p>
+          <span><a href="./mad-arrow.swf" target="_blank">Mad Arrow</a></span>
+        </p>
+        <p>
+          <span
+            ><a href="./penguin_diner.swf" target="_blank"
+              >Penguin Diner</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./penguin_diner_2.swf" target="_blank"
+              >Penguin Diner 2</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./pipe-riders.swf" target="_blank">Pipe Riders</a></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./pocket_fighter_nova.swf" target="_blank"
+              >Pocket Fighter Nova</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./pocket_fighter_nova_updated.swf" target="_blank"
+              >Pocket Fighter Nova (Updated)</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./rollercoaster_creator.swf" target="_blank"
+              >Roller Coaster Creator</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./scrap-metal-heroes.swf" target="_blank"
+              >Scrap Metal Heroes</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./strike-force-kitty-2.swf" target="_blank"
+              >Strike Force Kitty 2</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./strike-force-kitty-last-stand.swf" target="_blank"
+              >Strike Force Kitty: Last Stand</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./strike-force-kitty-league.swf" target="_blank"
+              >Strike Force Kitty League</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./strikeforce_kitty.swf" target="_blank"
+              >Strikeforce Kitty</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./sugar-sugar.swf" target="_blank">Sugar Sugar</a></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./sugar-sugar-2.swf" target="_blank"
+              >Sugar Sugar 2</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./sugar-sugar-3.swf" target="_blank"
+              >Sugar Sugar 3</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./summon-the-hero.swf" target="_blank"
+              >Summon the Hero</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./super-mario-bros-crossover-3.swf" target="_blank"
+              >Super Mario Bros Crossover 3</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./super-mario-flash-2.swf" target="_blank"
+              >Super Mario Flash 2</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./super-mario-flash-4.swf" target="_blank"
+              >Super Mario Flash 4</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./super-mario-flash.swf" target="_blank"
+              >Super Mario Flash</a
+            ></span
+          >
+        </p>
+        <p>
+          <span><a href="./toxic-2.swf" target="_blank">Toxic 2</a></span>
+        </p>
+        <p>
+          <span><a href="./toxic.swf" target="_blank">Toxic</a></span>
+        </p>
+        <p>
+          <span
+            ><a href="./truck-loader.swf" target="_blank">Truck Loader</a></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./truck-loader-2.swf" target="_blank"
+              >Truck Loader 2</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./truck-loader-3.swf" target="_blank"
+              >Truck Loader 3</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./truck-loader-4.swf" target="_blank"
+              >Truck Loader 4</a
+            ></span
+          >
+        </p>
+        <p>
+          <span
+            ><a href="./truck-loader-5.swf" target="_blank"
+              >Truck Loader 5</a
+            ></span
+          >
+        </p>
+      </div>
+
+      <h2>About Flash Games</h2>
+      <p>
+        Flash games were a huge part of the early internet culture, providing
+        endless entertainment for users around the world. Though Flash is no
+        longer supported by modern browsers, these games can still be played
+        using standalone Flash Players or emulators like Ruffle.
+      </p>
+      <p>
+        <strong>Installation:</strong> To play these games, download and install
+        the Flash Player provided in the repository (<a
+          href="./flashplayer_32_sa.exe"
+          >Flash Player</a
+        >
+        or <a href="./flashplayer_32_sa_debug.exe">Flash Player</a>). You can
+        also use emulators to keep enjoying these classics.
+      </p>
+      <p>
+        <strong>Controls:</strong> Most games utilize simple keyboard and mouse
+        controls. Refer to the instructions provided in each game.
+      </p>
+      <p>
+        <strong>Credits:</strong> This collection is a fan-made effort to
+        preserve the history of Flash games. All game rights remain with their
+        respective creators.
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ab93156
--- /dev/null
+++ b/style.css
@@ -0,0 +1,182 @@
+/* Reset some default browser styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    background-color: #121212;
+    /* Dark background */
+    color: #e0e0e0;
+    /* Light text color */
+    margin: 0;
+}
+
+#container {
+    max-width: 1500px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #1e1e1e;
+    /* Dark container background */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    /* Deep shadow for a material effect */
+    border-radius: 8px;
+}
+
+h1 {
+    font-size: 2.5rem;
+    text-align: center;
+    margin-bottom: 20px;
+    color: #ffffff;
+    /* White heading */
+}
+
+h2 {
+    font-size: 1.8rem;
+    color: #bb86fc;
+    /* Primary color from Material design */
+    margin-top: 30px;
+}
+
+p {
+    margin-bottom: 20px;
+    color: #b0b0b0;
+    /* Subtle text color */
+    line-height: 1.8;
+}
+
+a {
+    color: #bb86fc;
+    /* Material primary color */
+    text-decoration: none !important;
+    transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+a:hover {
+    color: #ffffff;
+    /* Hovering turns the text white */
+    background-color: rgba(187, 134, 252, 0.1);
+    /* Light highlight on hover */
+    text-decoration: underline;
+}
+
+.card {
+    width: 100%;
+    height: 254px;
+    border-radius: 4px;
+    background: #212121;
+    display: flex;
+    gap: 5px;
+    padding: 0.4em;
+    flex-wrap: wrap;
+}
+
+.card p {
+    height: 100%;
+    flex: 1;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 2px;
+    transition: all 0.5s;
+    background: #212121;
+    border: 1px solid #ff5a91;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.card p:hover {
+    flex: 10;
+}
+
+.card p span {
+    min-width: 14em;
+    padding: 0.5em;
+    text-align: center;
+    transform: rotate(-90deg);
+    transition: all 0.5s;
+    text-transform: uppercase;
+    color: #ff568e;
+    letter-spacing: 0.1em;
+}
+
+.card p:hover span {
+    transform: rotate(0);
+}
+
+/* Responsive typography for tablets */
+@media (max-width: 999px) {
+    h1 {
+        font-size: 2rem;
+    }
+
+    h2 {
+        font-size: 1.6rem;
+    }
+
+    p {
+        font-size: 0.9rem;
+    }
+
+    .card {
+        flex-direction: column;
+        height: auto;
+    }
+
+    .card p {
+        flex: none;
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
+    .card p span {
+        transform: rotate(0);
+    }
+
+    .card p:hover {
+        flex: none;
+    }
+}
+
+/* Responsive adjustments for mobile screens */
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.8rem;
+    }
+
+    h2 {
+        font-size: 1.4rem;
+    }
+
+    p {
+        font-size: 0.8rem;
+    }
+
+    #container {
+        padding: 10px;
+    }
+
+    .card {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .card p {
+        flex: none;
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
+    .card p span {
+        transform: rotate(0);
+        font-size: 0.85rem;
+    }
+
+    .card p:hover {
+        flex: none;
+    }
+}
\ No newline at end of file
