diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f7428d1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Timeline for Fubar">
+  <title>Timeline for Fubar</title>
+  <style>
+    /* Bare minimum CSS with dynamic progress colors */
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      text-align: center;
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 2rem 1rem;
+    }
+
+    h1 {
+      margin-bottom: 2rem;
+    }
+
+    .timeline {
+      position: relative;
+      margin-top: 2rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 3rem;
+    }
+
+    /* Vertical line going from one card to the next */
+    .timeline::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: 2px;
+      background: currentColor;
+      opacity: 0.2;
+      transform: translateX(-50%);
+      z-index: 1;
+    }
+
+    /* Cards along the timeline */
+    .card {
+      position: relative;
+      padding: 1.5rem;
+      border-radius: 8px;
+      z-index: 2;
+      width: 100%;
+      box-sizing: border-box;
+      transition: background-color 0.2s ease, border-color 0.2s ease;
+    }
+
+    /* Card Progress Status Colors */
+    .card.all-done {
+      background-color: #e2f5ea;
+      color: #0e622b;
+      border: 1px solid #b1e7c4;
+    }
+
+    .card.some-done {
+      background-color: #fffde7;
+      color: #725002;
+      border: 1px solid #fff59d;
+    }
+
+    .card.none-done {
+      background-color: #ffffff;
+      color: #000000;
+      border: 1px solid #e0e0e0;
+    }
+
+    /* Dark Mode Adjustments for Readability */
+    @media (prefers-color-scheme: dark) {
+      .card.all-done {
+        background-color: #12301b;
+        color: #8bf5b0;
+        border-color: #1a4d2b;
+      }
+      .card.some-done {
+        background-color: #332709;
+        color: #ffd54f;
+        border-color: #4d3a0d;
+      }
+      .card.none-done {
+        background-color: #1a1a1a;
+        color: #ffffff;
+        border-color: #333333;
+      }
+    }
+
+    h2 {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+
+    /* Centered tasks container */
+    .task-list {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    /* Center checklist items and align checkbox with text */
+    .task-item {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      text-align: left;
+    }
+  </style>
+</head>
+<body>
+  <h1>Timeline for Fubar</h1>
+  <main id="content">
+    <p>Loading roadmap...</p>
+  </main>
+
+  <script>
+    // Fetch and render the custom roadmap format
+    fetch('roadmap.md')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.text();
+      })
+      .then(markdownText => {
+        // Split the file contents by '# ' (indicates a card section)
+        const sections = markdownText.split(/^#\s+/m);
+        let cardsHtml = '';
+
+        sections.forEach(section => {
+          if (!section.trim()) return;
+
+          const lines = section.split('\n');
+          const title = lines[0].trim();
+          let tasksHtml = '';
+          let totalTasks = 0;
+          let completedTasks = 0;
+
+          for (let i = 1; i < lines.length; i++) {
+            const line = lines[i].trim();
+            if (!line) continue;
+
+            // Match [ ] or [X] tasks
+            const taskMatch = line.match(/^\[([ xX])\]\s*(.*)$/);
+            if (taskMatch) {
+              totalTasks++;
+              const isChecked = taskMatch[1].toLowerCase() === 'x';
+              if (isChecked) {
+                completedTasks++;
+              }
+              const taskText = taskMatch[2];
+              tasksHtml += `
+                <div class="task-item">
+                  <input type="checkbox" ${isChecked ? 'checked' : ''} disabled>
+                  <span>${taskText}</span>
+                </div>
+              `;
+            } else {
+              // Standard text lines
+              tasksHtml += `<p>${line}</p>`;
+            }
+          }
+
+          // Determine card status color class
+          let cardStateClass = 'none-done';
+          if (totalTasks > 0) {
+            if (completedTasks === totalTasks) {
+              cardStateClass = 'all-done';
+            } else if (completedTasks > 0) {
+              cardStateClass = 'some-done';
+            }
+          }
+
+          cardsHtml += `
+            <article class="card ${cardStateClass}">
+              <h2>${title}</h2>
+              <div class="task-list">
+                ${tasksHtml}
+              </div>
+            </article>
+          `;
+        });
+
+        // Render the list of cards in a timeline
+        document.getElementById('content').innerHTML = `
+          <div class="timeline">
+            ${cardsHtml}
+          </div>
+        `;
+      })
+      .catch(error => {
+        document.getElementById('content').innerHTML = `
+          <h1>Error</h1>
+          <p>Failed to load roadmap: ${error.message}</p>
+        `;
+      });
+  </script>
+</body>
+</html>
diff --git a/roadmap.md b/roadmap.md
new file mode 100644
index 0000000..381c66b
--- /dev/null
+++ b/roadmap.md
@@ -0,0 +1,25 @@
+# Standard Output
+[X] Establish printing strings and integers
+[ ] Printing to a Serial Output
+
+# Memory Management
+[ ] Register Management
+[ ] Interrupts
+[ ] Setting up Virtual Memory with Paging
+[ ] memory allocations and functions using some sort of malloc (and free duh)
+
+# GUI design
+[ ] Terminal Esque Aesthetic (with a `>` and a cursor blinking next to it)
+[ ] Resolution of 512 x 512 with 1 bit graphics (just RGB)
+[ ] (Really really unsure) maybe add a glow to the screen? (like the CRT bloom)
+[ ] make a mockup of the design
+
+# filesystem - chosen (FAT-x)
+[ ] Boot Records
+[ ] File Allocation Table (just realized that's what FAT stands for )
+[ ] Directory Hierarchy
+[ ] Setup Hierarchy
+
+# Core utils
+[ ] list out the bare minimum core utils to work with
+[ ] port the above mentioned coreutils
