diff --git a/scripts/update-file-progress.py b/.github/scripts/update-file-progress.py
similarity index 70%
rename from scripts/update-file-progress.py
rename to .github/scripts/update-file-progress.py
index b4492c773f..cbdb3b15f7 100644
--- a/scripts/update-file-progress.py
+++ b/.github/scripts/update-file-progress.py
@@ -1,7 +1,6 @@
 import glob
 
 src_files = glob.glob("./goal_src/**/*.g[cs]", recursive=True)
-data_files = glob.glob("./goal_src/**/*.gd", recursive=True)
 
 # Find how many of each have been started
 
@@ -20,12 +19,6 @@ for f in src_files:
       else:
         src_files_started = src_files_started + 1
 
-for f in data_files:
-  with open(f, "r") as temp_file:
-    line_count = len(temp_file.readlines())
-    if line_count > 7:
-      data_files_started = data_files_started + 1
-
 import json
 with open('./docs/gh-pages-proj/src/config/progress.json', 'r+', encoding='utf-8') as f:
   data = {
@@ -33,9 +26,7 @@ with open('./docs/gh-pages-proj/src/config/progress.json', 'r+', encoding='utf-8
       'fileProgress': {
         'src_files_total': len(src_files),
         'src_files_finished': src_files_finished,
-        'src_files_started': src_files_started,
-        'data_files_total': len(data_files),
-        'data_files_started': data_files_started
+        'src_files_started': src_files_started
       }
     }
   }
diff --git a/.github/scripts/update-gallery.py b/.github/scripts/update-gallery.py
new file mode 100644
index 0000000000..a74f2bc546
--- /dev/null
+++ b/.github/scripts/update-gallery.py
@@ -0,0 +1,34 @@
+import glob
+import os
+from pathlib import Path
+import datetime
+
+galleryLinks = {
+  'jak1': [],
+  'jak2': [],
+  'jak3': [],
+  'jakx': [],
+  'misc': []
+}
+
+def get_links(key, folder_to_search):
+  if os.path.isdir(folder_to_search):
+    files = [f for f in glob.glob(folder_to_search + "/*.*", recursive=True)]
+    for f in files:
+      galleryLinks[key].append({
+        'fileName': os.path.basename(f),
+        'lastModified': datetime.datetime.fromtimestamp(os.path.getmtime(f)).isoformat(),
+        'caption': Path(f).stem.replace("-", " ").title()
+      })
+
+get_links('jak1', './docs/gh-pages-proj/src/assets/gallery/jak1')
+get_links('jak2', './docs/gh-pages-proj/src/assets/gallery/jak2')
+get_links('jak3', './docs/gh-pages-proj/src/assets/gallery/jak3')
+get_links('jakx', './docs/gh-pages-proj/src/assets/gallery/jakx')
+get_links('misc', './docs/gh-pages-proj/src/assets/gallery/misc')
+
+import json
+with open('./docs/gh-pages-proj/src/config/gallery.json', 'r+', encoding='utf-8') as f:
+  f.seek(0)
+  json.dump(galleryLinks, f, ensure_ascii=False, indent=2)
+  f.truncate()
diff --git a/.github/workflows/build-doc-app.yaml b/.github/workflows/build-doc-app.yaml
index 5e33b79828..f361a44259 100644
--- a/.github/workflows/build-doc-app.yaml
+++ b/.github/workflows/build-doc-app.yaml
@@ -21,7 +21,10 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Update Line Count
-        run: python ./scripts/update-file-progress.py
+        run: python ./.github/scripts/update-file-progress.py
+
+      - name: Update Gallery Links
+        run: python ./.github/scripts/update-gallery.py
 
       - name: Update Site
         run: |
diff --git a/.gitignore b/.gitignore
index c5ce8c560b..76c0d4785f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,6 @@ gfx_dumps/*
 # game stuff
 game_config/*
 imgui.ini
+
+# website stuff
+node_modules/
diff --git a/docs/gh-pages-proj/public/favicon.png b/docs/gh-pages-proj/public/favicon.png
index d6d299d9db..95ced95f5d 100644
Binary files a/docs/gh-pages-proj/public/favicon.png and b/docs/gh-pages-proj/public/favicon.png differ
diff --git a/docs/gh-pages-proj/public/index.html b/docs/gh-pages-proj/public/index.html
index 822fae1a52..a52f86ff68 100644
--- a/docs/gh-pages-proj/public/index.html
+++ b/docs/gh-pages-proj/public/index.html
@@ -5,10 +5,23 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
-    <title>OpenGOAL Tooling</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <title>OpenGOAL - The Jak and Daxter Project</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Lexend:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
+  <style>
+    body {
+      font-family: 'Lexend', sans-serif !important;
+    }
+    code {
+      font-family: 'Fira Code', monospace !important;
+    }
+    .v-application {
+      font-family: 'Lexend', sans-serif !important;
+    }
+  </style>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
diff --git a/docs/gh-pages-proj/src/assets/gallery/jak1/boggy-reflections.png b/docs/gh-pages-proj/src/assets/gallery/jak1/boggy-reflections.png
new file mode 100644
index 0000000000..e498ef40b5
Binary files /dev/null and b/docs/gh-pages-proj/src/assets/gallery/jak1/boggy-reflections.png differ
diff --git a/docs/gh-pages-proj/src/assets/gallery/jak1/can-save-and-load.png b/docs/gh-pages-proj/src/assets/gallery/jak1/can-save-and-load.png
new file mode 100644
index 0000000000..468ac27f3c
Binary files /dev/null and b/docs/gh-pages-proj/src/assets/gallery/jak1/can-save-and-load.png differ
diff --git a/docs/gh-pages-proj/src/assets/gallery/jak1/too-much-fog.png b/docs/gh-pages-proj/src/assets/gallery/jak1/too-much-fog.png
new file mode 100644
index 0000000000..8da838d5e0
Binary files /dev/null and b/docs/gh-pages-proj/src/assets/gallery/jak1/too-much-fog.png differ
diff --git a/docs/gh-pages-proj/src/assets/img/background-new.jpg b/docs/gh-pages-proj/src/assets/img/background-new.jpg
new file mode 100644
index 0000000000..b179728b06
Binary files /dev/null and b/docs/gh-pages-proj/src/assets/img/background-new.jpg differ
diff --git a/docs/gh-pages-proj/src/assets/img/logo-text-colored.png b/docs/gh-pages-proj/src/assets/img/logo-text-colored.png
index bf5fab1947..66e53df991 100644
Binary files a/docs/gh-pages-proj/src/assets/img/logo-text-colored.png and b/docs/gh-pages-proj/src/assets/img/logo-text-colored.png differ
diff --git a/docs/gh-pages-proj/src/config/gallery.json b/docs/gh-pages-proj/src/config/gallery.json
new file mode 100644
index 0000000000..55072fa924
--- /dev/null
+++ b/docs/gh-pages-proj/src/config/gallery.json
@@ -0,0 +1,23 @@
+{
+  "jak1": [
+    {
+      "fileName": "boggy-reflections.png",
+      "lastModified": "2022-01-03T15:24:02.331678",
+      "caption": "Boggy Reflections"
+    },
+    {
+      "fileName": "can-save-and-load.png",
+      "lastModified": "2022-01-03T15:24:33.073017",
+      "caption": "Can Save And Load"
+    },
+    {
+      "fileName": "too-much-fog.png",
+      "lastModified": "2022-01-03T15:23:36.816353",
+      "caption": "Too Much Fog"
+    }
+  ],
+  "jak2": [],
+  "jak3": [],
+  "jakx": [],
+  "misc": []
+}
\ No newline at end of file
diff --git a/docs/gh-pages-proj/src/gallery.js b/docs/gh-pages-proj/src/gallery.js
new file mode 100644
index 0000000000..a438124f1a
--- /dev/null
+++ b/docs/gh-pages-proj/src/gallery.js
@@ -0,0 +1,3 @@
+const galleryLinks = require('./config/gallery.json')
+
+export default galleryLinks
diff --git a/docs/gh-pages-proj/src/router/index.js b/docs/gh-pages-proj/src/router/index.js
index c346b60d29..688d400be1 100644
--- a/docs/gh-pages-proj/src/router/index.js
+++ b/docs/gh-pages-proj/src/router/index.js
@@ -7,8 +7,13 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
+    component: () => import('../views/Home.vue')
   },
+  {
+    path: '/gallery',
+    name: 'Gallery',
+    component: () => import('../views/Gallery.vue')
+  }
 ]
 
 const router = new VueRouter({
diff --git a/docs/gh-pages-proj/src/views/Gallery.vue b/docs/gh-pages-proj/src/views/Gallery.vue
new file mode 100644
index 0000000000..7669073a59
--- /dev/null
+++ b/docs/gh-pages-proj/src/views/Gallery.vue
@@ -0,0 +1,71 @@
+<template>
+  <v-container fluid>
+    <v-row v-for="(game, name) in assetLinks" :key="name">
+      <v-col cols="12">
+        <h2>{{ name }}</h2>
+      </v-col>
+      <v-col
+        v-for="(asset, index) in game"
+        :key="name + asset + index"
+        class="d-flex child-flex"
+        cols="3"
+      >
+        <v-img
+          :src="require(`@/assets/gallery/${name}/${asset.fileName}`)"
+          :lazy-src="require(`@/assets/gallery/${name}/${asset.fileName}`)"
+          aspect-ratio="1"
+          class="grey lighten-2"
+        >
+          <template v-slot:placeholder>
+            <v-row class="fill-height ma-0" align="center" justify="center">
+              <v-progress-circular
+                indeterminate
+                color="grey lighten-5"
+              ></v-progress-circular>
+            </v-row>
+          </template>
+          <span class="img-caption">{{ asset.caption }}</span>
+        </v-img>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<style scoped>
+.img-caption {
+  position: absolute;
+  bottom: 0;
+  margin: 1em;
+  font-weight: 700;
+  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
+    1px 1px 0 #000;
+}
+</style>
+<script>
+import galleryLinks from "../gallery";
+
+export default {
+  name: "Gallery",
+  components: {},
+  data: function() {
+    return {
+      assetLinks: {
+        jak1: [],
+        jak2: [],
+        jak3: [],
+        jakx: [],
+        misc: []
+      }
+    };
+  },
+  mounted: async function() {
+    const keys = Object.keys(galleryLinks);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      for (let j = 0; j < galleryLinks[key].length; j++) {
+        const asset = galleryLinks[key][j];
+        this.assetLinks[key].push(asset);
+      }
+    }
+  }
+};
+</script>
diff --git a/docs/gh-pages-proj/src/views/Home.vue b/docs/gh-pages-proj/src/views/Home.vue
index 559eb18fb1..a13d3e56e9 100644
--- a/docs/gh-pages-proj/src/views/Home.vue
+++ b/docs/gh-pages-proj/src/views/Home.vue
@@ -2,36 +2,48 @@
   <v-container fluid>
     <v-row justify="center" align="center" class="bg-img">
       <v-col cols="12" align="center">
-        <v-img max-height="150" max-width="250" src="~@/assets/img/logo-text-colored.png">
+        <v-img
+          max-height="150"
+          max-width="250"
+          src="~@/assets/img/logo-text-colored.png"
+        >
         </v-img>
-        <br>
-        <h4>
+        <br />
+        <h4 class="text-stroke">
           Reviving the Language that Brought us the Jak & Daxter Series
         </h4>
-        <br/>
+        <br />
         <v-row justify="center">
           <v-col cols="auto">
-            <v-btn href="#project-status" rounded color="primary">
+            <v-btn href="#project-status" rounded color="pink darken-4">
               <v-icon>mdi-calendar-check</v-icon>
               Project Status
             </v-btn>
           </v-col>
           <v-col cols="auto">
-            <v-btn rounded color="secondary" href="#recent-updates">
-              <v-icon>mdi-update</v-icon>
-              Recent Updates
+            <v-btn href="/gallery" rounded color="green darken-1">
+              <v-icon>mdi-calendar-check</v-icon>
+              Gallery
             </v-btn>
           </v-col>
           <v-col cols="auto">
-            <v-btn href="/jak-project/api-docs.html"
-            target="_blank" rounded color="deep-purple">
+            <v-btn
+              href="/jak-project/api-docs.html"
+              target="_blank"
+              rounded
+              color="indigo darken-1"
+            >
               <v-icon>mdi-file-document</v-icon>
               Documentation
             </v-btn>
           </v-col>
           <v-col cols="auto">
-            <v-btn href="https://github.com/water111/jak-project"
-            target="_blank" rounded color="accent">
+            <v-btn
+              href="https://github.com/water111/jak-project"
+              target="_blank"
+              rounded
+              color="deep-purple darken-1"
+            >
               <v-icon>mdi-git</v-icon>
               Contribute
             </v-btn>
@@ -39,84 +51,120 @@
         </v-row>
       </v-col>
     </v-row>
-    <v-row>
-      <v-container>
-        <!-- Project Status -->
-        <v-row style="margin-top: 3em;" align="center" justify="center">
-          <v-col align="center">
-            <h1 id="project-status" class="orange--text text--darken-1">
-              Project Status
-            </h1>
+    <v-row style="margin-top: 3em;">
+      <v-col
+        align="center"
+        justify="center"
+        cols="12"
+        id="project-status"
+        class="orange--text text--darken-1"
+      >
+        <h2>Project Status</h2>
+      </v-col>
+      <v-container style="margin-top: 2em;">
+        <v-row>
+          <v-col cols="8">
+            <v-row>
+              <v-col
+                align="center"
+                justify="center"
+                class="orange--text text--darken-2"
+              >
+                <h3>GitHub Updates</h3>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-timeline>
+                  <v-timeline-item v-for="(pr, index) in recentPRs" :key="'pr' + index">
+                    <template v-slot:icon>
+                      <v-avatar>
+                        <img :src="pr.user.avatar_url" />
+                      </v-avatar>
+                    </template>
+                    <template v-slot:opposite>
+                      <span>{{ pr.user.login }}</span>
+                    </template>
+                    <v-card class="elevation-2">
+                      <v-card-title>
+                        <h5>{{ pr.title }}</h5>
+                      </v-card-title>
+                      <v-card-text>
+                        {{ pr.body }}
+                      </v-card-text>
+                      <v-card-actions>
+                        <v-btn text color="accent" :href="pr.html_url" target="_blank">
+                          View Change
+                        </v-btn>
+                      </v-card-actions>
+                    </v-card>
+                  </v-timeline-item>
+                </v-timeline>
+              </v-col>
+            </v-row>
           </v-col>
-        </v-row>
-        <v-row align="center" justify="center">
-          <v-col align="center">
-            <h2 class="orange--text text--lighten-3">Jak 1 - Black Label</h2>
-          </v-col>
-        </v-row>
-        <v-row align="center" justify="center">
-          <v-col cols="10">
-            <v-subheader>Decompilation</v-subheader>
-            <v-progress-linear
-              color="green"
-              buffer-value="0"
-              :value="jak1BlackLabelStatus.srcFilesFinishedValue"
-              stream
-              height="25"
-            >
-            Source Files Finished - {{ jak1BlackLabelStatus.srcFilesFinished }} / {{ jak1BlackLabelStatus.srcFilesTotal }}
-            </v-progress-linear>
-            <br>
-            <v-progress-linear
-              color="yellow"
-              buffer-value="0"
-              :value="jak1BlackLabelStatus.srcFilesStartedValue"
-              stream
-              height="25"
-            >
-            Source Files Started - {{ jak1BlackLabelStatus.srcFilesStarted }} / {{ jak1BlackLabelStatus.srcFilesTotal }}
-            </v-progress-linear>
-            <br>
-            <v-progress-linear
-              color="teal"
-              buffer-value="0"
-              :value="jak1BlackLabelStatus.dataFilesStartedValue"
-              stream
-              height="25"
-            >
-            Data Files Started - {{ jak1BlackLabelStatus.dataFilesStarted }} / {{ jak1BlackLabelStatus.dataFilesTotal }}
-            </v-progress-linear>
-          </v-col>
-        </v-row>
-        <!-- Recent Updates -->
-        <v-row style="margin-top: 5em;" align="center" justify="center">
-          <v-col align="center">
-            <h1 id="recent-updates" class="orange--text text--darken-1">
-              Recent Updates
-            </h1>
-          </v-col>
-        </v-row>
-        <v-row style="margin-bottom: 10em;" justify="center">
-          <!-- title / author / description / link -->
-          <v-col cols="4" v-for="(pr, index) in recentPRs" :key="'pr' - index">
-            <v-card>
-              <v-card-text style="overflow-y: auto; height:300px">
-                <p class="text-h5 orange--text text--lighten-3">
-                  {{ pr.title }}
-                </p>
-                <p>
-                  {{ pr.user.login }}
-                </p>
-                <div class="text--primary">
-                  <pre class="wrapped-pre">{{ pr.body }}</pre>
-                </div>
-              </v-card-text>
-              <v-card-actions>
-                <v-btn text color="accent" :href="pr.html_url" target="_blank">
-                  View Change
-                </v-btn>
-              </v-card-actions>
-            </v-card>
+          <v-col cols="4">
+            <v-row>
+              <v-col
+                align="center"
+                justify="center"
+                class="orange--text text--darken-2"
+              >
+                <h3>Progress Tracker</h3>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col
+                align="center"
+                justify="center"
+                class="orange--text text--darken-3"
+              >
+                <h4>Jak 1 - Black Label - NTSC</h4>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col
+                align="center"
+                justify="center"
+                class="orange--text text--darken-4"
+              >
+                <h5>Decompilation</h5>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col align="center" justify="center">
+                <v-icon class="green--text">mdi-check</v-icon>
+                Files Finished - {{ jak1BlackLabelStatus.srcFilesFinished }} /
+                {{ jak1BlackLabelStatus.srcFilesTotal }}
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col align="center" justify="center">
+                <v-icon class="yellow--text">mdi-timer-outline</v-icon>
+                Files In Progress - {{ jak1BlackLabelStatus.srcFilesStarted }} /
+                {{ jak1BlackLabelStatus.srcFilesTotal }}
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col
+                align="center"
+                justify="center"
+                class="orange--text text--darken-4"
+              >
+                <h5>Renderers and Core Pieces</h5>
+              </v-col>
+            </v-row>
+            <v-row v-for="(milestone, index) in majorMilestones.jak1" :key="'jak1-milestone' + index">
+              <v-col align="center" justify="center">
+                <v-icon v-if="milestone.status === 'Completed'" class="green--text">
+                  mdi-check
+                </v-icon>
+                <v-icon v-else class="yellow--text">
+                  mdi-timer-outline
+                </v-icon>
+                {{ milestone.name }}
+              </v-col>
+            </v-row>
           </v-col>
         </v-row>
       </v-container>
@@ -126,16 +174,23 @@
 
 <style scoped>
 .bg-img {
-  background-image: url('~@/assets/img/background.jpg');
+  background-image: url("~@/assets/img/background-new.jpg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  min-height: 50vh;
+  min-height: 100vh;
 }
 .wrapped-pre {
   word-wrap: normal;
   white-space: pre-wrap;
-  font-family: "Roboto", sans-serif !important;
+  font-family: "Lexend", sans-serif !important;
+}
+.text-stroke {
+  text-shadow:
+   -1px -1px 0 #000,  
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+     1px 1px 0 #000;
 }
 </style>
 
@@ -148,15 +203,54 @@ export default {
   data: function() {
     return {
       recentPRs: [],
+      majorMilestones: {
+        jak1: [
+          {
+            name: "Sky",
+            status: "Completed"
+          },
+          {
+            name: "TFrag",
+            status: "Completed"
+          },
+          {
+            name: "TIE",
+            status: "Completed"
+          },
+          {
+            name: "Shrub",
+            status: "In-Progress"
+          },
+          {
+            name: "Ocean",
+            status: "In-Progress"
+          },
+          {
+            name: "MERC",
+            status: "In-Progress"
+          },
+          {
+            name: "Shadow",
+            status: "In-Progress"
+          },
+          {
+            name: "Generic",
+            status: "In-Progress"
+          },
+          {
+            name: "Collision",
+            status: "In-Progress"
+          },
+          {
+            name: "Bones",
+            status: "In-Progress"
+          }
+        ]
+      },
       jak1BlackLabelStatus: {
         srcFilesTotal: projectProgress.jak1.fileProgress.src_files_total,
         srcFilesFinished: projectProgress.jak1.fileProgress.src_files_finished,
-        srcFilesFinishedValue: projectProgress.jak1.fileProgress.src_files_finished / projectProgress.jak1.fileProgress.src_files_total * 100,
-        srcFilesStarted: projectProgress.jak1.fileProgress.src_files_started,
-        srcFilesStartedValue: projectProgress.jak1.fileProgress.src_files_started / projectProgress.jak1.fileProgress.src_files_total * 100,
-        dataFilesTotal: projectProgress.jak1.fileProgress.data_files_total,
-        dataFilesStarted: projectProgress.jak1.fileProgress.data_files_started,
-        dataFilesStartedValue: projectProgress.jak1.fileProgress.data_files_started / projectProgress.jak1.fileProgress.data_files_total * 100,
+        srcFilesStarted: projectProgress.jak1.fileProgress.src_files_started
       }
     };
   },
@@ -175,7 +269,7 @@ export default {
         `https://api.github.com/search/issues?q=repo:water111/jak-project+is:pr+is:merged&sort=updated`
       );
       const data = await response.json();
-      const numPRs = 9;
+      const numPRs = 25;
       for (var i = 0; i < numPRs; i++) {
         var pr = data.items[i];
         if (pr.body == null || pr.body.length == 0) {
diff --git a/docs/logo-text-colored.png b/docs/logo-text-colored.png
index bf5fab1947..66e53df991 100644
Binary files a/docs/logo-text-colored.png and b/docs/logo-text-colored.png differ