diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fd31b1b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>The Hungry Games</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
+  <style>
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background-color: #1f1f2e;
+      color: #fff;
+      margin: 0;
+      padding: 0;
+    }
+    .container {
+      max-width: 800px;
+      margin: 50px auto;
+      padding: 30px;
+      background-color: #2c2c3d;
+      border-radius: 15px;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    }
+    h1 {
+      font-size: 2.5em;
+      text-align: center;
+      margin-bottom: 30px;
+      color: #007bff;
+    }
+    p {
+      font-size: 1.1em;
+      line-height: 1.6;
+    }
+    .button {
+      display: inline-block;
+      padding: 12px 30px;
+      background-color: #007bff;
+      color: #fff;
+      text-decoration: none;
+      border-radius: 5px;
+      transition: background-color 0.3s, transform 0.3s;
+    }
+    .button:hover {
+      background-color: #0056b3;
+      transform: scale(1.05);
+    }
+    .section {
+      margin-bottom: 40px;
+      padding: 20px;
+      background-color: #3a3a4c;
+      border-radius: 10px;
+    }
+    h2 {
+      color: #007bff;
+    }
+    #program-files, #data-files {
+      margin-top: 50px;
+    }
+    ul {
+      list-style-type: none;
+      padding: 0;
+    }
+    li {
+      margin-bottom: 10px;
+    }
+    a {
+      text-decoration: none;
+      color: #fff;
+      font-weight: bold;
+    }
+    a:hover {
+      color: #007bff;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>The Hungry Games</h1>
+    <p>
+      <a href="https://hits.sh/github.com/sebastian-92/evolutiondata/" target="_blank">
+        <img src="https://hits.sh/github.com/sebastian-92/evolutiondata.svg?style=for-the-badge&label=views&labelColor=000000" alt="Views" style="border-radius: 5px;">
+      </a>
+    </p>
+    <div class="section">
+      <h2>What is what</h2>
+      <p>
+        The original program run in this experiment is the Predator and Prey Genetics 2.2 file. All .txts are spreadsheets in csv format. The .txts that are solo have all the species traits evolving, but none of the other species. The txts that are marked full have both predator and prey evolving. All traits that are run alone are marked as that trait.
+      </p>
+    </div>
+    <div class="section">
+      <h2>How to run the program</h2>
+      <p>
+        To run this project, use <a href="https://studio.penguinmod.com" target="_blank">PenguinMod</a>, and upload whatever .pmp file you would like.
+      </p>
+    </div>
+    <div class="section" id="program-files">
+      <h2>Program Files</h2>
+      <ul>
+      </ul>
+    </div>
+    <div class="section" id="data-files">
+      <h2>Collected Data Files</h2>
+      <ul>
+      </ul>
+    </div>
+  </div>
+
+  <script>
+    (async () => {
+      const response = await fetch('https://api.github.com/repos/sebastian-92/evolutiondata/contents/');
+      const data = await response.json();
+      let programHtmlString = '';
+      let dataHtmlString = '';
+
+      for (let file of data) {
+        if (file.type === 'file') {
+          if (file.name.endsWith('.pmp')) {
+            programHtmlString += `<li><a href="${file.html_url}" target="_blank">${file.name}</a></li>`;
+          } else if (file.name.endsWith('.txt')) {
+            dataHtmlString += `<li><a href="${file.html_url}" target="_blank">${file.name}</a></li>`;
+          }
+        }
+      }
+
+      document.querySelector('#program-files ul').innerHTML = programHtmlString;
+      document.querySelector('#data-files ul').innerHTML = dataHtmlString;
+    })()
+  </script>
+</body>
+</html>
