diff --git a/package-lock.json b/package-lock.json
index 22ff823..dbd88bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
-        "react-spring": "^9.4.5-beta.1",
+        "react-spring": "^9.4.5",
         "typescript": "^4.6.3",
         "web-vitals": "^2.1.4"
       }
@@ -2778,9 +2778,9 @@
       }
     },
     "node_modules/@hapi/hoek": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz",
-      "integrity": "sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==",
       "peer": true
     },
     "node_modules/@hapi/topo": {
@@ -5036,26 +5036,26 @@
       "peer": true
     },
     "node_modules/@react-spring/animated": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5-beta.1.tgz",
-      "integrity": "sha512-52vHhd0wYkAeQaU6celeZtrXJaOVvKo+5d8keAG3aY9NJs2YDARPg9uu8lLVf+fRTnruSb+gfFxsCTnq3g7OUQ==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5.tgz",
+      "integrity": "sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==",
       "dependencies": {
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       },
       "peerDependencies": {
         "react": "^16.8.0  || >=17.0.0 || >=18.0.0"
       }
     },
     "node_modules/@react-spring/core": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.4.5-beta.1.tgz",
-      "integrity": "sha512-t7rFpy0jWLKqWqsdfgCijxgX9AN3MCS8Iu66cSbRzf56Eli7UO1su2mH6YERrlIo+4TeDnm2Hz23QiC6tzsO+w==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.4.5.tgz",
+      "integrity": "sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==",
       "dependencies": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/rafz": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/rafz": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       },
       "funding": {
         "type": "opencollective",
@@ -5066,36 +5066,36 @@
       }
     },
     "node_modules/@react-spring/rafz": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.4.5-beta.1.tgz",
-      "integrity": "sha512-hORwrd0LJRnKEdVmQyUCv+4oVqNkpTc/9/6BC0IfyXSIzUkYs/LUkOeXD811gFR07UBVScSbWXXNgLBJY+pNlg=="
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.4.5.tgz",
+      "integrity": "sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ=="
     },
     "node_modules/@react-spring/shared": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.4.5-beta.1.tgz",
-      "integrity": "sha512-EHAWYn/Hl6ec6/oBWVvxqm3Tl3dVZ+HmeaBssmqWqbHSfexJOiwmXLdRN18rRuNbnzmmfLkDWbe1RLUHJwLOIQ==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.4.5.tgz",
+      "integrity": "sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==",
       "dependencies": {
-        "@react-spring/rafz": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/rafz": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       },
       "peerDependencies": {
         "react": "^16.8.0  || >=17.0.0 || >=18.0.0"
       }
     },
     "node_modules/@react-spring/types": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.4.5-beta.1.tgz",
-      "integrity": "sha512-i5GLUdu1EQHbCl54QE5/Ro1Ck4IQvTcLZ7HKG3/0HoLNHVjTAtfu4OCFaAXvwCsBdAD8BhROM6Tec1FLt6nImA=="
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.4.5.tgz",
+      "integrity": "sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg=="
     },
     "node_modules/@react-spring/web": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.4.5-beta.1.tgz",
-      "integrity": "sha512-N/Mb6TJgzfnkSrjAbFhhPsvN4BJ73Z6v8zbXNDdmH9Lckxbg6UlVnY23AqtwmyVMTrC87QnQdZg0fLBBNQJ9OA==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.4.5.tgz",
+      "integrity": "sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==",
       "dependencies": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       },
       "peerDependencies": {
         "react": "^16.8.0  || >=17.0.0 || >=18.0.0",
@@ -5103,14 +5103,14 @@
       }
     },
     "node_modules/@react-spring/zdog": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.4.5-beta.1.tgz",
-      "integrity": "sha512-lyD/VBSASUD4vmHNOxmPviRNWhbSbKzJYYWZjIsUGKmO7wpiVr7bMUFBgkGD+sxrgwttl73TMt+hbRajexjROQ==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.4.5.tgz",
+      "integrity": "sha512-STrePM34ZK1T3oK8mo71pvKxvIzELJTpVi0U0qDh0s15e9rmN6XYkd406LqFtuchhmLoy24lD4ds7LAqhIEraw==",
       "dependencies": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       },
       "peerDependencies": {
         "react": "^16.8.0  || >=17.0.0 || >=18.0.0",
@@ -19225,16 +19225,16 @@
       }
     },
     "node_modules/react-spring": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.4.5-beta.1.tgz",
-      "integrity": "sha512-+Q2YeWOi4EKHO2r+eUJx8a9iPIIhEGxjY07YmpNMsibWvoxnZSgeE/x5C/fPdWlPIvYmMWS0U/LkjT/zWiOtsw==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.4.5.tgz",
+      "integrity": "sha512-FRIXQGR+jG+Fx4UcqhF0b5jMEU3Q5QcZ8rEVWKqZgrrn92C1HcqtuZy7dH+rZ6uNGjnlV7HBf8iprJaJ+350LA==",
       "dependencies": {
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/konva": "~9.4.5-beta.1",
-        "@react-spring/native": "~9.4.5-beta.1",
-        "@react-spring/three": "~9.4.5-beta.1",
-        "@react-spring/web": "~9.4.5-beta.1",
-        "@react-spring/zdog": "~9.4.5-beta.1"
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/konva": "~9.4.5",
+        "@react-spring/native": "~9.4.5",
+        "@react-spring/three": "~9.4.5",
+        "@react-spring/web": "~9.4.5",
+        "@react-spring/zdog": "~9.4.5"
       }
     },
     "node_modules/react-spring/node_modules/@jest/types": {
@@ -19270,14 +19270,14 @@
       }
     },
     "node_modules/react-spring/node_modules/@react-spring/konva": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.4.5-beta.1.tgz",
-      "integrity": "sha512-vXfpTmzjgqgC8/Nz2YENr8qiH92XFfoT6adKJd/o8MVDtGPzY5WzOnkbrUWMPg3tGLlGEQygkgYFElsq1uqcQw==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.4.5.tgz",
+      "integrity": "sha512-b3wTs7YT5102+Gs488r2JCNBoyZQd+SWg35AdxmiI6FARBFvBjIA0z7VJx8ILAlmTVBows5UwiDWvk2vmWmLLw==",
       "dependencies": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       },
       "peerDependencies": {
         "konva": ">=2.6",
@@ -19286,14 +19286,14 @@
       }
     },
     "node_modules/react-spring/node_modules/@react-spring/native": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.4.5-beta.1.tgz",
-      "integrity": "sha512-dU/Gfk7C+01gZ8ICj8svGUzwH1AoR2v2XNlo/Nshj1+TnTV7cIa8RZx7GqwMoZei1a/7+J5fMFgvTTl1rQjtPQ==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.4.5.tgz",
+      "integrity": "sha512-11GcqFZfIhOOVQI25FcDLdeJLOSVOgIh2AF6WMXpCNWguhIv6N33zLL8d4cYfhYhsLOVXprU/8uefNorj7/h3g==",
       "dependencies": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       },
       "peerDependencies": {
         "react": "^16.8.0  || >=17.0.0 || >=18.0.0",
@@ -19301,14 +19301,14 @@
       }
     },
     "node_modules/react-spring/node_modules/@react-spring/three": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.4.5-beta.1.tgz",
-      "integrity": "sha512-69nVKcWAyFG6chcahYf5nfaEj7hN4cw3NXl49OLnIYKL54M/ZbYADU2iwYCWy/zs3CUmGlR3YKXmxFr675j3IQ==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.4.5.tgz",
+      "integrity": "sha512-mArxfIhg9kyFL/8Y09TarS/ZKLd/qAWS4T3Ro/B46ILPfPnoPywDdw9/rknZihy/tslnviCgMrB4pZ29X1Dfxw==",
       "dependencies": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       },
       "peerDependencies": {
         "@react-three/fiber": ">=6.0",
@@ -19317,9 +19317,9 @@
       }
     },
     "node_modules/react-spring/node_modules/@react-three/fiber": {
-      "version": "8.0.12",
-      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.0.12.tgz",
-      "integrity": "sha512-McYcJDlkksn9LlIhE2A4Y2scZOtKfX1ia3+7EvpFjFozFJx0Ecszi7atlizOvesIa9nG9VQWQCvjQxu9L0/TmA==",
+      "version": "8.0.13",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.0.13.tgz",
+      "integrity": "sha512-hJdVS2F8LJFenR07l80JnkLAMeJ7gf3wiB8OzQ49GjSwjPgPG8bjYumMmchY/eouU+myYtNej0tK6mV6wctmdQ==",
       "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
@@ -22385,9 +22385,9 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
     },
     "node_modules/three": {
-      "version": "0.139.2",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.139.2.tgz",
-      "integrity": "sha512-gV7q7QY8rogu7HLFZR9cWnOQAUedUhu2WXAnpr2kdXZP9YDKsG/0ychwQvWkZN5PlNw9mv5MoCTin6zNTXoONg==",
+      "version": "0.140.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.140.0.tgz",
+      "integrity": "sha512-jcHjbnYspPLDdsDQChmzyAoZ5KhJbgFk6pNGlAIc9fQMvsfPGjF5H9glrngqvb2CR/qXcClMyp5PYdF996lldA==",
       "peer": true
     },
     "node_modules/throat": {
@@ -25881,9 +25881,9 @@
       }
     },
     "@hapi/hoek": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz",
-      "integrity": "sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==",
       "peer": true
     },
     "@hapi/topo": {
@@ -27609,64 +27609,64 @@
       "peer": true
     },
     "@react-spring/animated": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5-beta.1.tgz",
-      "integrity": "sha512-52vHhd0wYkAeQaU6celeZtrXJaOVvKo+5d8keAG3aY9NJs2YDARPg9uu8lLVf+fRTnruSb+gfFxsCTnq3g7OUQ==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5.tgz",
+      "integrity": "sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==",
       "requires": {
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       }
     },
     "@react-spring/core": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.4.5-beta.1.tgz",
-      "integrity": "sha512-t7rFpy0jWLKqWqsdfgCijxgX9AN3MCS8Iu66cSbRzf56Eli7UO1su2mH6YERrlIo+4TeDnm2Hz23QiC6tzsO+w==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.4.5.tgz",
+      "integrity": "sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==",
       "requires": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/rafz": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/rafz": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       }
     },
     "@react-spring/rafz": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.4.5-beta.1.tgz",
-      "integrity": "sha512-hORwrd0LJRnKEdVmQyUCv+4oVqNkpTc/9/6BC0IfyXSIzUkYs/LUkOeXD811gFR07UBVScSbWXXNgLBJY+pNlg=="
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.4.5.tgz",
+      "integrity": "sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ=="
     },
     "@react-spring/shared": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.4.5-beta.1.tgz",
-      "integrity": "sha512-EHAWYn/Hl6ec6/oBWVvxqm3Tl3dVZ+HmeaBssmqWqbHSfexJOiwmXLdRN18rRuNbnzmmfLkDWbe1RLUHJwLOIQ==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.4.5.tgz",
+      "integrity": "sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==",
       "requires": {
-        "@react-spring/rafz": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/rafz": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       }
     },
     "@react-spring/types": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.4.5-beta.1.tgz",
-      "integrity": "sha512-i5GLUdu1EQHbCl54QE5/Ro1Ck4IQvTcLZ7HKG3/0HoLNHVjTAtfu4OCFaAXvwCsBdAD8BhROM6Tec1FLt6nImA=="
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.4.5.tgz",
+      "integrity": "sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg=="
     },
     "@react-spring/web": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.4.5-beta.1.tgz",
-      "integrity": "sha512-N/Mb6TJgzfnkSrjAbFhhPsvN4BJ73Z6v8zbXNDdmH9Lckxbg6UlVnY23AqtwmyVMTrC87QnQdZg0fLBBNQJ9OA==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.4.5.tgz",
+      "integrity": "sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==",
       "requires": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       }
     },
     "@react-spring/zdog": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.4.5-beta.1.tgz",
-      "integrity": "sha512-lyD/VBSASUD4vmHNOxmPviRNWhbSbKzJYYWZjIsUGKmO7wpiVr7bMUFBgkGD+sxrgwttl73TMt+hbRajexjROQ==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.4.5.tgz",
+      "integrity": "sha512-STrePM34ZK1T3oK8mo71pvKxvIzELJTpVi0U0qDh0s15e9rmN6XYkd406LqFtuchhmLoy24lD4ds7LAqhIEraw==",
       "requires": {
-        "@react-spring/animated": "~9.4.5-beta.1",
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/shared": "~9.4.5-beta.1",
-        "@react-spring/types": "~9.4.5-beta.1"
+        "@react-spring/animated": "~9.4.5",
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/shared": "~9.4.5",
+        "@react-spring/types": "~9.4.5"
       }
     },
     "@rollup/plugin-babel": {
@@ -38093,16 +38093,16 @@
       }
     },
     "react-spring": {
-      "version": "9.4.5-beta.1",
-      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.4.5-beta.1.tgz",
-      "integrity": "sha512-+Q2YeWOi4EKHO2r+eUJx8a9iPIIhEGxjY07YmpNMsibWvoxnZSgeE/x5C/fPdWlPIvYmMWS0U/LkjT/zWiOtsw==",
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.4.5.tgz",
+      "integrity": "sha512-FRIXQGR+jG+Fx4UcqhF0b5jMEU3Q5QcZ8rEVWKqZgrrn92C1HcqtuZy7dH+rZ6uNGjnlV7HBf8iprJaJ+350LA==",
       "requires": {
-        "@react-spring/core": "~9.4.5-beta.1",
-        "@react-spring/konva": "~9.4.5-beta.1",
-        "@react-spring/native": "~9.4.5-beta.1",
-        "@react-spring/three": "~9.4.5-beta.1",
-        "@react-spring/web": "~9.4.5-beta.1",
-        "@react-spring/zdog": "~9.4.5-beta.1"
+        "@react-spring/core": "~9.4.5",
+        "@react-spring/konva": "~9.4.5",
+        "@react-spring/native": "~9.4.5",
+        "@react-spring/three": "~9.4.5",
+        "@react-spring/web": "~9.4.5",
+        "@react-spring/zdog": "~9.4.5"
       },
       "dependencies": {
         "@jest/types": {
@@ -38135,42 +38135,42 @@
           }
         },
         "@react-spring/konva": {
-          "version": "9.4.5-beta.1",
-          "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.4.5-beta.1.tgz",
-          "integrity": "sha512-vXfpTmzjgqgC8/Nz2YENr8qiH92XFfoT6adKJd/o8MVDtGPzY5WzOnkbrUWMPg3tGLlGEQygkgYFElsq1uqcQw==",
+          "version": "9.4.5",
+          "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.4.5.tgz",
+          "integrity": "sha512-b3wTs7YT5102+Gs488r2JCNBoyZQd+SWg35AdxmiI6FARBFvBjIA0z7VJx8ILAlmTVBows5UwiDWvk2vmWmLLw==",
           "requires": {
-            "@react-spring/animated": "~9.4.5-beta.1",
-            "@react-spring/core": "~9.4.5-beta.1",
-            "@react-spring/shared": "~9.4.5-beta.1",
-            "@react-spring/types": "~9.4.5-beta.1"
+            "@react-spring/animated": "~9.4.5",
+            "@react-spring/core": "~9.4.5",
+            "@react-spring/shared": "~9.4.5",
+            "@react-spring/types": "~9.4.5"
           }
         },
         "@react-spring/native": {
-          "version": "9.4.5-beta.1",
-          "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.4.5-beta.1.tgz",
-          "integrity": "sha512-dU/Gfk7C+01gZ8ICj8svGUzwH1AoR2v2XNlo/Nshj1+TnTV7cIa8RZx7GqwMoZei1a/7+J5fMFgvTTl1rQjtPQ==",
+          "version": "9.4.5",
+          "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.4.5.tgz",
+          "integrity": "sha512-11GcqFZfIhOOVQI25FcDLdeJLOSVOgIh2AF6WMXpCNWguhIv6N33zLL8d4cYfhYhsLOVXprU/8uefNorj7/h3g==",
           "requires": {
-            "@react-spring/animated": "~9.4.5-beta.1",
-            "@react-spring/core": "~9.4.5-beta.1",
-            "@react-spring/shared": "~9.4.5-beta.1",
-            "@react-spring/types": "~9.4.5-beta.1"
+            "@react-spring/animated": "~9.4.5",
+            "@react-spring/core": "~9.4.5",
+            "@react-spring/shared": "~9.4.5",
+            "@react-spring/types": "~9.4.5"
           }
         },
         "@react-spring/three": {
-          "version": "9.4.5-beta.1",
-          "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.4.5-beta.1.tgz",
-          "integrity": "sha512-69nVKcWAyFG6chcahYf5nfaEj7hN4cw3NXl49OLnIYKL54M/ZbYADU2iwYCWy/zs3CUmGlR3YKXmxFr675j3IQ==",
+          "version": "9.4.5",
+          "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.4.5.tgz",
+          "integrity": "sha512-mArxfIhg9kyFL/8Y09TarS/ZKLd/qAWS4T3Ro/B46ILPfPnoPywDdw9/rknZihy/tslnviCgMrB4pZ29X1Dfxw==",
           "requires": {
-            "@react-spring/animated": "~9.4.5-beta.1",
-            "@react-spring/core": "~9.4.5-beta.1",
-            "@react-spring/shared": "~9.4.5-beta.1",
-            "@react-spring/types": "~9.4.5-beta.1"
+            "@react-spring/animated": "~9.4.5",
+            "@react-spring/core": "~9.4.5",
+            "@react-spring/shared": "~9.4.5",
+            "@react-spring/types": "~9.4.5"
           }
         },
         "@react-three/fiber": {
-          "version": "8.0.12",
-          "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.0.12.tgz",
-          "integrity": "sha512-McYcJDlkksn9LlIhE2A4Y2scZOtKfX1ia3+7EvpFjFozFJx0Ecszi7atlizOvesIa9nG9VQWQCvjQxu9L0/TmA==",
+          "version": "8.0.13",
+          "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.0.13.tgz",
+          "integrity": "sha512-hJdVS2F8LJFenR07l80JnkLAMeJ7gf3wiB8OzQ49GjSwjPgPG8bjYumMmchY/eouU+myYtNej0tK6mV6wctmdQ==",
           "peer": true,
           "requires": {
             "@babel/runtime": "^7.17.8",
@@ -40529,9 +40529,9 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
     },
     "three": {
-      "version": "0.139.2",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.139.2.tgz",
-      "integrity": "sha512-gV7q7QY8rogu7HLFZR9cWnOQAUedUhu2WXAnpr2kdXZP9YDKsG/0ychwQvWkZN5PlNw9mv5MoCTin6zNTXoONg==",
+      "version": "0.140.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.140.0.tgz",
+      "integrity": "sha512-jcHjbnYspPLDdsDQChmzyAoZ5KhJbgFk6pNGlAIc9fQMvsfPGjF5H9glrngqvb2CR/qXcClMyp5PYdF996lldA==",
       "peer": true
     },
     "throat": {
diff --git a/package.json b/package.json
index b376d94..01daab3 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "react-spring": "^9.4.5-beta.1",
+    "react-spring": "^9.4.5",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },
diff --git a/public/index.html b/public/index.html
index 0c42535..5b171d8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,9 +13,13 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;1,300;1,400&family=Kdam+Thmor+Pro&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/App.css b/src/App.css
index 4931613..5d068aa 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,9 @@
 .App {
+  height: 100%;
+  width: 100%;
   text-align: center;
 }
+
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 1e9a806..37172e4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,10 @@
 import "./App.css";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  useLocation,
+} from "react-router-dom";
 import LandingPage from "./components/LandingPage";
 import HomeView from "./components/HomeView";
 
@@ -11,9 +16,9 @@ function App() {
           <Route path="/" element={<LandingPage />} />
           <Route path="/landing" element={<LandingPage />} />
           <Route path="/landing/:location" element={<LandingPage />} />
-          <Route path="/landing/:location/:content" element={<LandingPage />} />
-          <Route path="/home" element={<LandingPage />} />
-          <Route path="/home/:location/:content" element={<LandingPage />} />
+          <Route path="/landing/:category/:content" element={<LandingPage />} />
+          <Route path="/home" element={<HomeView />} />
+          <Route path="/home/:category/:content" element={<HomeView />} />
         </Routes>
       </Router>
     </div>
diff --git a/src/components/HomeView.css b/src/components/HomeView.css
index b4a3f52..268cc44 100644
--- a/src/components/HomeView.css
+++ b/src/components/HomeView.css
@@ -4,8 +4,40 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 100%;
   width: 100vw;
-  border: dashed black 10px;
   box-sizing: border-box;
+  /* FONTS */
+  font-family: "Fira Sans", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+  font-size: 18px;
+  letter-spacing: 1px;
+  color: rgb(75, 75, 75);
+  font-smooth: never;
+}
+
+.HomeView h1 {
+  font-weight: 300;
+  font-size: 24px;
+}
+
+.HomeView h2 {
+  font-weight: 400;
+  font-size: 22px;
+}
+
+/* - - - - - HomeView Background Image - - - - -  */
+
+/* - - - MEDIA QUERIES - - -*/
+@media only screen and (min-width: 768px) {
+  .HomeView {
+    font-weight: 400;
+    font-size: 1.5vh;
+  }
+
+  .HomeView h1 {
+    font-weight: 300;
+    font-size: 2.5vh;
+  }
 }
diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx
index 2a7f7bf..cbea80d 100644
--- a/src/components/HomeView.tsx
+++ b/src/components/HomeView.tsx
@@ -1,7 +1,21 @@
 import "./HomeView.css";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import HomeViewHeader from "./HomeViewHeader";
+import HomeViewFooter from "./HomeViewFooter";
+import HomeViewContent from "./HomeViewContent";
 
 const HomeView = () => {
-  return <div className="HomeView">HomeView works</div>;
+  const currentPath = useLocation().pathname;
+  const navigate = useNavigate();
+
+  return (
+    <div className="HomeView">
+      <HomeViewHeader pathname={currentPath} />
+      <HomeViewContent pathname={currentPath} />
+      <HomeViewFooter pathname={currentPath} />
+    </div>
+  );
 };
 
 export default HomeView;
diff --git a/src/components/HomeViewContent.css b/src/components/HomeViewContent.css
new file mode 100644
index 0000000..0046772
--- /dev/null
+++ b/src/components/HomeViewContent.css
@@ -0,0 +1,22 @@
+.HomeViewContent {
+  position: relative;
+  display: flex;
+  width: 100vw;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.HomeViewContent video {
+  /* position: absolute; */
+  height: 100%;
+  object-fit: cover;
+  min-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+  .HomeViewContent video {
+    height: 110%;
+  }
+}
diff --git a/src/components/HomeViewContent.tsx b/src/components/HomeViewContent.tsx
new file mode 100644
index 0000000..ca1b55a
--- /dev/null
+++ b/src/components/HomeViewContent.tsx
@@ -0,0 +1,18 @@
+import "./HomeViewContent.css";
+import bannerVid from "../img/MainBanner-H264.mp4";
+
+interface Props {
+  pathname: string;
+}
+
+const HomeViewContent = ({ pathname }: Props) => {
+  return (
+    <div className="HomeViewContent">
+      <video autoPlay loop muted playsInline>
+        <source src={bannerVid} type="video/mp4" />
+      </video>
+    </div>
+  );
+};
+
+export default HomeViewContent;
diff --git a/src/components/HomeViewFooter.css b/src/components/HomeViewFooter.css
new file mode 100644
index 0000000..aa6c3a6
--- /dev/null
+++ b/src/components/HomeViewFooter.css
@@ -0,0 +1,59 @@
+/* - - - RESETS - - -*/
+.HomeViewFooter h1,
+.HomeViewFooter h2,
+.HomeViewFooter a,
+.HomeViewFooter p {
+  margin: 0px;
+  padding: 0px;
+}
+
+/* - - - GENERAL - - -*/
+.HomeViewFooter {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(255, 255, 255);
+  width: 100vw;
+  height: 100px;
+  font-size: 16px;
+  font-weight: 300;
+}
+
+.HomeViewFooter h2 {
+  font-weight: 400;
+}
+
+.HomeViewFooter .project-nav-ctr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.HomeViewFooter .project-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.HomeViewFooter .project-nav-type-cat {
+  display: flex;
+  justify-content: center;
+}
+
+.HomeViewFooter .project-nav-type-cat a {
+  margin: 6px;
+}
+
+/* - - - MEDIA QUERIES - - -*/
+
+@media only screen and (min-width: 768px) {
+  .HomeViewFooter {
+    height: 80px;
+  }
+
+  .HomeViewFooter .project-nav-ctr {
+    display: none;
+  }
+}
diff --git a/src/components/HomeViewFooter.tsx b/src/components/HomeViewFooter.tsx
new file mode 100644
index 0000000..8b8faf8
--- /dev/null
+++ b/src/components/HomeViewFooter.tsx
@@ -0,0 +1,26 @@
+import "./HomeViewFooter.css";
+
+interface Props {
+  pathname: string;
+}
+
+const HomeViewFooter = ({ pathname }: Props) => {
+  return (
+    <div className="HomeViewFooter">
+      <div className="project-nav-ctr">
+        <div className="project-nav">
+          <span className="material-symbols-outlined">chevron_left</span>
+          <h2>Deerfall</h2>
+          <span className="material-symbols-outlined">chevron_right</span>
+        </div>
+
+        <div className="project-nav-type-cat">
+          <a>Game Dev</a>
+          <a>Web Dev</a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomeViewFooter;
diff --git a/src/components/HomeViewHeader.css b/src/components/HomeViewHeader.css
new file mode 100644
index 0000000..ac4b77f
--- /dev/null
+++ b/src/components/HomeViewHeader.css
@@ -0,0 +1,91 @@
+/* - - - RESETS - - -*/
+.HomeViewHeader h1,
+.HomeViewHeader h2,
+.HomeViewHeader a,
+.HomeViewHeader p {
+  margin: 0px;
+  padding: 0px;
+}
+
+/* - - - GENERAL - - -*/
+.HomeViewHeader {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  background-color: rgb(255, 255, 255);
+  width: 100vw;
+  height: 80px;
+}
+
+.HomeViewHeader h1 {
+  margin: 2px 0px;
+}
+
+.HomeViewHeader .title-ctr {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 120px;
+}
+
+.HomeViewHeader .project-nav-ctr {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.HomeViewHeader .project-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.HomeViewHeader .project-nav-type-cat {
+  display: flex;
+  justify-content: center;
+}
+
+.HomeViewHeader .project-nav-type-cat a {
+  margin: 6px 6px 0px 6px;
+}
+
+.HomeViewHeader .nav-ctr {
+  display: flex;
+  justify-content: center;
+  width: 120px;
+}
+
+.HomeViewHeader .nav-ctr ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  padding: 0px;
+}
+
+.HomeViewHeader .nav-ctr ul li {
+  margin: 0px 10px;
+}
+
+/* - - - MEDIA QUERIES - - -*/
+@media only screen and (min-width: 768px) {
+  .HomeViewHeader {
+    justify-content: space-between;
+  }
+
+  .HomeViewHeader .title-ctr {
+    width: 230px;
+  }
+
+  .HomeViewHeader .nav-ctr {
+    width: 230px;
+  }
+
+  .HomeViewHeader .project-nav-ctr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/src/components/HomeViewHeader.tsx b/src/components/HomeViewHeader.tsx
new file mode 100644
index 0000000..25cb2b7
--- /dev/null
+++ b/src/components/HomeViewHeader.tsx
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import "./HomeViewHeader.css";
+
+interface Props {
+  pathname: string;
+}
+
+const HomeViewHeader = ({ pathname }: Props) => {
+  const [title, setTitle] = useState<string>("Dev Blog");
+  const [subtitle, setSubtitle] = useState<string>("Welcome! 😊");
+
+  // Some elements in the return will be hidden by media query CSS, to allow UI elements in the header or footer depending on mobile / Desktop. This is why there are some "redundant" elements
+  return (
+    <div className="HomeViewHeader">
+      <div className="title-ctr">
+        <h1>{`Jake's ${title}`}</h1>
+      </div>
+
+      <div className="project-nav-ctr">
+        <div className="project-nav">
+          <span className="material-symbols-outlined">chevron_left</span>
+          <h2>Deerfall</h2>
+          <span className="material-symbols-outlined">chevron_right</span>
+        </div>
+
+        <div className="project-nav-type-cat">
+          <a>Game Dev</a>
+          <a>Web Dev</a>
+        </div>
+      </div>
+
+      <div className="nav-ctr">
+        <ul>
+          <li>Portfolio</li>
+          <li>Blog</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default HomeViewHeader;
diff --git a/src/components/LandingPage.css b/src/components/LandingPage.css
index 00f13c7..aaac2e3 100644
--- a/src/components/LandingPage.css
+++ b/src/components/LandingPage.css
@@ -1,4 +1,4 @@
-/* - - - - - - - lINKS AND FONTS - - - - - - - - - - */
+/* - - - - - lINKS AND FONTS - - - - - - - - */
 @font-face {
   font-family: "munro";
   src: url("/src/img/munro/munro.ttf");
@@ -7,14 +7,24 @@
 
 /* - - - - - - - SPECIFICS - - - - - - - - - - */
 .LandingPage {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.LandingPage .LandingPage-container {
+  /* . . . Positioning . . . */
+  position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  height: 100vh;
-  width: 100vw;
-  /* font-family: "VT323", monospace; */
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+  /* . . . Fonts . . . */
   font-family: "munro";
   font-weight: 400;
   font-size: 16px;
@@ -22,12 +32,36 @@
   font-smooth: never;
 }
 
-.LandingPage a {
+.LandingPage .bg-img-container {
+  display: flex;
+  align-items: center; /* vertical */
+  justify-content: center; /* horizontal */
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+}
+
+.LandingPage .bg-img {
+  height: 100vh;
+  min-width: 100%;
+  object-fit: cover;
+  /* . . . Image Rendering . . . */
+  image-rendering: -moz-crisp-edges; /* Firefox */
+  image-rendering: -o-crisp-edges; /* Opera */
+  image-rendering: -webkit-optimize-contrast; /* Chrome / Safari */
+  image-rendering: pixelated; /* Chrome as of 2019 */
+  image-rendering: optimize-contrast; /* CSS3 Proposed */
+  -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
+  z-index: 0;
+}
+
+.LandingPage-container a {
   text-decoration: none;
   color: rgb(208, 247, 239);
 }
 
-.LandingPage .header-container {
+.LandingPage-container .header-container {
   display: flex;
   flex: 1;
   align-items: center;
@@ -35,26 +69,37 @@
   box-sizing: border-box;
   margin-bottom: 0%;
   width: 100%;
-  background-image: url("/src/img/pixelBGWide.png");
-  background-origin: content-box;
-  background-size: auto 100vh;
+  z-index: 1;
 }
 
-.LandingPage .link-container {
+.LandingPage-container .link-container {
   display: flex;
   flex: 1;
   flex-direction: row;
   justify-content: space-evenly;
   box-sizing: border-box;
-  /* margin-top: 80px; */
   width: 100%;
-  background-image: url("/src/img/pixelBGWide.png");
-  background-origin: content-box;
-  background-size: auto 100vh;
-  background-position: 0% -100%;
+  z-index: 1;
+}
+
+.LandingPage-container .lp-link h1,
+.LandingPage-container .lp-link h2 {
+  padding: 30px 20px;
+  z-index: 1;
+}
+
+.LandingPage .HomeView-container {
+  position: absolute;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
 }
 
-.LandingPage .lp-link h1,
-.LandingPage .lp-link h2 {
-  padding: 40px;
+.LandingPage .hide {
+  display: none;
 }
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 6bd25fd..187202f 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -1,61 +1,78 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./LandingPage.css";
 import LandingPageLink from "./LandingPageLink";
-import { animated, useTransition } from "react-spring";
+import { animated, useSpring, useTransition } from "react-spring";
 import HomeView from "./HomeView";
+import AuthContext from "../contexts/AuthContext";
+import pixelBG from "../img/pixelBG_LowRes.png";
+import pixelFadeBG from "../img/animated-14fps.png";
 
 const LandingPage = () => {
-  // - - - - - STATES / FUNCTIONALITY - - - - -
+  // - - - - - LINK FUNCTIONALITY - - - - -
   const [currentDisplay, setCurrentDisplay] = useState<string>("");
-  const [isActivePage, setIsActivePage] = useState<boolean>(true);
   const [firstRender, setFirstRender] = useState<boolean>(true);
   const [link1Text, setLink1Text] = useState<string>("");
   const [link1Path, setLink1Path] = useState<string>("");
   const [link2Text, setLink2Text] = useState<string>("");
   const [link2Path, setLink2Path] = useState<string>("");
+  const { currentPathContext, setCurrentPathContext } = useContext(AuthContext);
   const currentPath = useLocation().pathname;
   const navigate = useNavigate();
-  const transDuration = 200;
-  const transitionUp = useTransition(isActivePage, {
+
+  // - - - - - BG TRANSITION - - - - -
+  const [hideLP, setHideLP] = useState<string>("");
+  const [hideHV, setHideHV] = useState<string>("hide");
+  const [isActivePage, setIsActivePage] = useState<boolean>(true);
+  const [currBG, setCurrBG] = useState<string>(pixelBG);
+  const [hueFlip, setHueFlip] = useState<boolean>(false);
+  const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
+
+  // - - - - - BG TRANSITION - - - - -
+  const transDuration = 500;
+  const fadeOut = useTransition(isActivePage, {
     initial: {
       opacity: 1,
-      marginBottom: "0%",
       config: { duration: transDuration },
     },
     from: {
       opacity: 1,
-      marginBottom: "0%",
       config: { duration: transDuration },
     },
     leave: {
-      opacity: 0.5,
-      marginBottom: "100%",
+      opacity: 0,
       config: { duration: transDuration },
     },
   });
-  const transitionDown = useTransition(isActivePage, {
-    initial: {
-      opacity: 1,
-      marginTop: "0%",
-      config: { duration: transDuration },
+  const bgHueRotation = useSpring({
+    to: {
+      filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
     },
-    from: { opacity: 1, marginTop: "0%", config: { duration: transDuration } },
-    leave: {
-      opacity: 0.5,
-      marginTop: "100%",
-      config: { duration: transDuration },
+    from: {
+      filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
     },
+    reset: false,
+    cancel: bgAnimOff,
+    reverse: hueFlip,
+    delay: 2000,
+    config: { duration: 4000, tension: 280, friction: 60 },
+    onRest: () => setHueFlip(!hueFlip),
   });
 
+  // - - - - - useEffects - - - - -
   useEffect(() => {
+    setCurrentPathContext(currentPath);
     if (firstRender) {
       setFirstRender(false);
     } else if (
-      currentPath.endsWith("/gamedev") ||
-      currentPath.endsWith("/webdev")
+      currentPath.endsWith("/portfolio") ||
+      currentPath.endsWith("/blog")
     ) {
+      setCurrBG(pixelFadeBG);
       setIsActivePage(false);
+      setHideHV("");
+      setTimeout(() => setHideLP("hide"), 2000);
+      setTimeout(() => setBgAnimOff(true), 2000);
     }
   }, [currentPath]);
 
@@ -64,66 +81,77 @@ const LandingPage = () => {
       navigate("/landing");
     } else if (currentPath === "/landing") {
       setCurrentDisplay("jakesnyder.dev");
-      setLink1Text("Portfolio");
-      setLink1Path("/landing/portfolio");
-      setLink2Text("Blog");
-      setLink2Path("/landing/blog");
-    } else if (currentPath === "/landing/portfolio") {
-      setCurrentDisplay("Portfolio");
-      setLink1Text("Web Dev");
-      setLink1Path("/landing/portfolio/webdev");
-      setLink2Text("Game Dev");
-      setLink2Path("/landing/portfolio/gamedev");
-    } else if (currentPath === "/landing/blog") {
-      setCurrentDisplay("Blog");
       setLink1Text("Web Dev");
-      setLink1Path("/landing/blog/webdev");
+      setLink1Path("/landing/webdev");
       setLink2Text("Game Dev");
-      setLink2Path("/landing/blog/gamedev");
-    } else if (currentPath === "/home/:location/:content") {
-      console.log("made it here");
+      setLink2Path("/landing/gamedev");
+    } else if (currentPath === "/landing/webdev") {
+      setCurrentDisplay("Web Development");
+      setLink1Text("Portfolio");
+      setLink1Path("/landing/webdev/portfolio");
+      setLink2Text("Blog");
+      setLink2Path("/landing/webdev/blog");
+    } else if (currentPath === "/landing/gamedev") {
+      setCurrentDisplay("Game Development");
+      setLink1Text("Portfolio");
+      setLink1Path("/landing/webdev/portfolio");
+      setLink2Text("Blog");
+      setLink2Path("/landing/gamedev/blog");
     }
   }, [currentPath]);
 
   return (
-    <div className="LandingPage">
-      {transitionUp((style, item) =>
-        item ? (
-          <animated.div className={"header-container"} style={style}>
-            <LandingPageLink
-              currentDisplay={currentDisplay}
-              linkText={currentDisplay}
-              pathName={"/"}
-              className={"lp-link"}
-              isH1={true}
-            />
-          </animated.div>
-        ) : (
-          <HomeView />
-        )
-      )}
-      {transitionDown((style, item) =>
-        item ? (
-          <animated.div className="link-container" style={style}>
-            <LandingPageLink
-              currentDisplay={currentDisplay}
-              linkText={link1Text}
-              pathName={link1Path}
-              className={"lp-link"}
-              isH1={false}
-            />
-            <LandingPageLink
-              currentDisplay={currentDisplay}
-              linkText={link2Text}
-              pathName={link2Path}
-              className={"lp-link"}
-              isH1={false}
-            />
-          </animated.div>
-        ) : (
-          ""
-        )
-      )}
+    <div className={`LandingPage`}>
+      <div className={`LandingPage-container ${hideLP}`}>
+        {fadeOut((style: any, item: any) =>
+          item ? (
+            <animated.div className={"header-container"} style={style}>
+              <LandingPageLink
+                currentDisplay={currentDisplay}
+                linkText={currentDisplay}
+                pathName={"/"}
+                className={"lp-link"}
+                isH1={true}
+              />
+            </animated.div>
+          ) : (
+            ""
+          )
+        )}
+        {fadeOut((style: any, item: any) =>
+          item ? (
+            <animated.div className="link-container" style={style}>
+              <LandingPageLink
+                currentDisplay={currentDisplay}
+                linkText={link1Text}
+                pathName={link1Path}
+                className={"lp-link"}
+                isH1={false}
+              />
+              <LandingPageLink
+                currentDisplay={currentDisplay}
+                linkText={link2Text}
+                pathName={link2Path}
+                className={"lp-link"}
+                isH1={false}
+              />
+            </animated.div>
+          ) : (
+            ""
+          )
+        )}
+        <div className="bg-img-container">
+          <animated.img
+            style={bgHueRotation}
+            className={`bg-img`}
+            src={currBG}
+            alt=""
+          />
+        </div>
+      </div>
+      <div className={`HomeView-container ${hideHV}`}>
+        <HomeView />
+      </div>
     </div>
   );
 };
diff --git a/src/components/LandingPageLink.tsx b/src/components/LandingPageLink.tsx
index f72bb8a..c6fe060 100644
--- a/src/components/LandingPageLink.tsx
+++ b/src/components/LandingPageLink.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { animated, SpringValue, useSpring } from "react-spring";
 import "./LandingPageLink.css";
@@ -29,15 +29,32 @@ const LandingPageLink = ({
     onChange: (): number => (opacityRef.current = hoverOn.opacity.get()),
   });
   const hoverOff = useSpring({
-    to: { opacity: 1 },
+    to: {
+      opacity: 1,
+    },
     from: { opacity: opacityRef.current },
     reset: true,
     loop: false,
   });
+  const hoverStart = useSpring({
+    from: { opacity: 1 },
+    reset: true,
+  });
   const [animState, setAnimState] = useState<{ opacity: SpringValue<number> }>(
-    hoverOff
+    hoverStart
   );
 
+  useEffect(() => {
+    let fromVal = animState.opacity.animation.from;
+    let timeout;
+
+    if (fromVal > 0 && fromVal < 1) {
+      setTimeout(() => setAnimState(hoverStart), 400);
+    } else {
+      clearTimeout(timeout);
+    }
+  }, [animState]);
+
   return (
     <Link to={pathName} className={className}>
       {isH1 ? (
diff --git a/src/contexts/AuthContext.ts b/src/contexts/AuthContext.ts
index 82abeed..dfcb72c 100644
--- a/src/contexts/AuthContext.ts
+++ b/src/contexts/AuthContext.ts
@@ -1,12 +1,16 @@
 import { User } from "firebase/auth";
-import { createContext } from "react";
+import { createContext, useState } from "react";
 
 export interface AuthContextModel {
   user: User | null;
+  currentPathContext: string;
+  setCurrentPathContext: any;
 }
 
 const defaultValue: AuthContextModel = {
   user: null,
+  currentPathContext: "",
+  setCurrentPathContext: null,
 };
 
 const AuthContext = createContext(defaultValue);
diff --git a/src/contexts/AuthContextProvider.tsx b/src/contexts/AuthContextProvider.tsx
index ea091d4..86c5493 100644
--- a/src/contexts/AuthContextProvider.tsx
+++ b/src/contexts/AuthContextProvider.tsx
@@ -4,6 +4,7 @@ import { ReactNode, useEffect, useState } from "react";
 import { auth } from "../firebaseConfig";
 import UserAccount from "../models/UserAcount";
 import { createNewUser, getUserById } from "../services/userService";
+import { useLocation } from "react-router-dom";
 
 interface Props {
   children: ReactNode;
@@ -11,6 +12,7 @@ interface Props {
 
 const AuthContextProvider = ({ children }: Props) => {
   const [user, setUser] = useState<User | null>(null);
+  const [currentPathContext, setCurrentPathContext] = useState<string>("");
 
   const generateDateInfo = () => {
     const currentDate: Date = new Date();
@@ -50,7 +52,10 @@ const AuthContextProvider = ({ children }: Props) => {
   }, [user]);
 
   return (
-    <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
+    <AuthContext.Provider
+      value={{ user, currentPathContext, setCurrentPathContext }}>
+      {children}
+    </AuthContext.Provider>
   );
 };
 
diff --git a/src/img/MainBanner-H264.mp4 b/src/img/MainBanner-H264.mp4
new file mode 100644
index 0000000..22130b3
Binary files /dev/null and b/src/img/MainBanner-H264.mp4 differ
diff --git a/src/img/animated-14fps.png b/src/img/animated-14fps.png
new file mode 100644
index 0000000..49d5efe
Binary files /dev/null and b/src/img/animated-14fps.png differ
diff --git a/src/img/pixelBG.png b/src/img/pixelBG.png
deleted file mode 100644
index 1d04d14..0000000
Binary files a/src/img/pixelBG.png and /dev/null differ
diff --git a/src/img/pixelBG.svg b/src/img/pixelBG.svg
deleted file mode 100644
index 4c0918c..0000000
--- a/src/img/pixelBG.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240" shape-rendering="crispEdges"><path d="M0,69.12V0H120V25.92H95.04v8.64H77.76V43.2H51.84v8.64H25.92v8.64H8.64v8.64Z" fill="#282828"/><path d="M120,224.64V240H77.76v-6.72h25.92v-8.64H120Z" fill="#00a382"/><path d="M0,233.28v-8.64H8.64v8.64Z" fill="#1d9176"/><path d="M0,69.12H8.64v8.64H0Z" fill="#292b2a"/><path d="M0,77.76H8.64V86.4H0Z" fill="#2a2e2d"/><path d="M0,86.4H8.64v8.64H0Z" fill="#2b322f"/><path d="M0,95.04H8.64v8.64H0Z" fill="#2c3633"/><path d="M0,103.68H8.64v8.64H0Z" fill="#2d3b36"/><path d="M0,112.32H8.64v8.64H0Z" fill="#2d403a"/><path d="M0,120.96H8.64v8.64H0Z" fill="#2e463e"/><path d="M0,129.6H8.64v8.64H0Z" fill="#2f4c42"/><path d="M0,138.24H8.64v8.64H0Z" fill="#2f5247"/><path d="M0,146.88H8.64v8.64H0Z" fill="#2f584c"/><path d="M0,155.52H8.64v8.64H0Z" fill="#2f5f50"/><path d="M0,164.16H8.64v8.64H0Z" fill="#2e6555"/><path d="M0,172.8H8.64v8.64H0Z" fill="#2d6c5a"/><path d="M0,181.44H8.64v8.64H0Z" fill="#2c735f"/><path d="M0,190.08H8.64v8.64H0Z" fill="#2a7964"/><path d="M0,198.72H8.64v8.64H0Z" fill="#287f69"/><path d="M0,207.36H8.64V216H0Z" fill="#25856d"/><path d="M0,216H8.64v8.64H0Z" fill="#218b71"/><path d="M112.32,25.92H120v8.64h-7.68Z" fill="#292b2a"/><path d="M112.32,34.56H120V43.2h-7.68Z" fill="#2a2e2c"/><path d="M112.32,43.2H120v8.64h-7.68Z" fill="#2b322f"/><path d="M112.32,51.84H120v8.64h-7.68Z" fill="#2c3632"/><path d="M112.32,60.48H120v8.64h-7.68Z" fill="#2d3b36"/><path d="M112.32,69.12H120v8.64h-7.68Z" fill="#2d403a"/><path d="M112.32,77.76H120V86.4h-7.68Z" fill="#2e463e"/><path d="M112.32,86.4H120v8.64h-7.68Z" fill="#2f4b42"/><path d="M112.32,95.04H120v8.64h-7.68Z" fill="#2f5147"/><path d="M112.32,103.68H120v8.64h-7.68Z" fill="#2f584b"/><path d="M112.32,112.32H120v8.64h-7.68Z" fill="#2f5e50"/><path d="M112.32,120.96H120v8.64h-7.68Z" fill="#2e6555"/><path d="M120,146.88v8.64h-7.68v-8.64Z" fill="#2a7964"/><path d="M120,190.08v8.64h-7.68v-8.64Z" fill="#199579"/><path d="M120,207.36V216h-7.68v-8.64Z" fill="#0c9e7f"/><path d="M120,164.16v8.64h-7.68v-8.64Z" fill="#25856d"/><path d="M120,207.36h-7.68v-8.64H120Z" fill="#139a7d"/><path d="M120,146.88h-7.68v-8.64H120Z" fill="#2c725f"/><path d="M112.32,172.8H120v8.64h-7.68Z" fill="#228b71"/><path d="M112.32,216H120v8.64h-7.68Z" fill="#03a281"/><path d="M120,164.16h-7.68v-8.64H120Z" fill="#287f68"/><path d="M112.32,181.44H120v8.64h-7.68Z" fill="#1e9075"/><path d="M120,138.24h-7.68V129.6H120Z" fill="#2d6c5a"/><path d="M0,233.28H8.64V240H0Z" fill="#189679"/><path d="M8.64,240v-6.72h8.64V240Z" fill="#16987b"/><path d="M17.28,240v-6.72h8.64V240Z" fill="#14997c"/><path d="M25.92,240v-6.72h8.64V240Z" fill="#129b7d"/><path d="M34.56,240v-6.72H43.2V240Z" fill="#0f9d7e"/><path d="M43.2,240v-6.72h8.64V240Z" fill="#0c9e7f"/><path d="M51.84,240v-6.72h8.64V240Z" fill="#09a080"/><path d="M60.48,240v-6.72h8.64V240Z" fill="#05a181"/><path d="M69.12,240v-6.72h8.64V240Z" fill="#02a281"/><path d="M95.04,34.56V25.92h8.64v8.64Z" fill="#282928"/><path d="M103.68,34.56V25.92h8.64v8.64Z" fill="#282a29"/><path d="M77.76,43.2V34.56H86.4V43.2Z" fill="#282929"/><path d="M86.4,43.2V34.56h8.64V43.2Z" fill="#292a2a"/><path d="M51.84,51.84V43.2h8.64v8.64Z" fill="#282929"/><path d="M60.48,51.84V43.2h8.64v8.64Z" fill="#292a29"/><path d="M69.12,51.84V43.2h8.64v8.64Z" fill="#292b2a"/><path d="M25.92,60.48V51.84h8.64v8.64Z" fill="#282928"/><path d="M34.56,60.48V51.84H43.2v8.64Z" fill="#282929"/><path d="M43.2,60.48V51.84h8.64v8.64Z" fill="#292b2a"/><path d="M8.64,69.12V60.48h8.64v8.64Z" fill="#282929"/><path d="M17.28,69.12V60.48h8.64v8.64Z" fill="#292a2a"/><path d="M86.4,233.28H77.76v-8.64H86.4Z" fill="#07a080"/><path d="M86.4,233.28v-8.64h8.64v8.64Z" fill="#04a181"/><path d="M95.04,233.28v-8.64h8.64v8.64Z" fill="#02a282"/><path d="M112.32,216v8.64h-8.64V216Z" fill="#06a180"/><path d="M17.28,233.28H8.64v-8.64h8.64Z" fill="#1c9377"/><path d="M8.64,69.12h8.64v8.64H8.64Z" fill="#292c2b"/><path d="M8.64,77.76h8.64V86.4H8.64Z" fill="#2a302e"/><path d="M8.64,86.4h8.64v8.64H8.64Z" fill="#2b3431"/><path d="M8.64,95.04h8.64v8.64H8.64Z" fill="#2c3834"/><path d="M8.64,103.68h8.64v8.64H8.64Z" fill="#2d3d37"/><path d="M8.64,112.32h8.64v8.64H8.64Z" fill="#2e423b"/><path d="M8.64,120.96h8.64v8.64H8.64Z" fill="#2e4840"/><path d="M8.64,129.6h8.64v8.64H8.64Z" fill="#2f4e44"/><path d="M8.64,138.24h8.64v8.64H8.64Z" fill="#2f5449"/><path d="M8.64,146.88h8.64v8.64H8.64Z" fill="#2f5b4d"/><path d="M8.64,155.52h8.64v8.64H8.64Z" fill="#2f6152"/><path d="M8.64,164.16h8.64v8.64H8.64Z" fill="#2e6857"/><path d="M8.64,172.8h8.64v8.64H8.64Z" fill="#2d6f5c"/><path d="M8.64,181.44h8.64v8.64H8.64Z" fill="#2b7561"/><path d="M8.64,190.08h8.64v8.64H8.64Z" fill="#297c66"/><path d="M8.64,198.72h8.64v8.64H8.64Z" fill="#27816a"/><path d="M8.64,207.36h8.64V216H8.64Z" fill="#24876f"/><path d="M8.64,216h8.64v8.64H8.64Z" fill="#208d73"/><path d="M103.68,34.56h8.64V43.2h-8.64Z" fill="#292d2b"/><path d="M103.68,43.2h8.64v8.64h-8.64Z" fill="#2a302e"/><path d="M103.68,51.84h8.64v8.64h-8.64Z" fill="#2b3431"/><path d="M103.68,60.48h8.64v8.64h-8.64Z" fill="#2c3934"/><path d="M103.68,69.12h8.64v8.64h-8.64Z" fill="#2d3e38"/><path d="M103.68,77.76h8.64V86.4h-8.64Z" fill="#2e433c"/><path d="M103.68,86.4h8.64v8.64h-8.64Z" fill="#2e4940"/><path d="M103.68,95.04h8.64v8.64h-8.64Z" fill="#2f4f45"/><path d="M103.68,103.68h8.64v8.64h-8.64Z" fill="#2f5549"/><path d="M103.68,112.32h8.64v8.64h-8.64Z" fill="#2f5c4e"/><path d="M103.68,120.96h8.64v8.64h-8.64Z" fill="#2f6253"/><path d="M112.32,146.88v8.64h-8.64v-8.64Z" fill="#2b7762"/><path d="M112.32,190.08v8.64h-8.64v-8.64Z" fill="#1b9478"/><path d="M112.32,216h-8.64v-8.64h8.64Z" fill="#0f9d7f"/><path d="M112.32,164.16v8.64h-8.64v-8.64Z" fill="#26826b"/><path d="M112.32,207.36h-8.64v-8.64h8.64Z" fill="#15987b"/><path d="M112.32,146.88h-8.64v-8.64h8.64Z" fill="#2d705d"/><path d="M103.68,172.8h8.64v8.64h-8.64Z" fill="#238870"/><path d="M112.32,164.16h-8.64v-8.64h8.64Z" fill="#297d67"/><path d="M103.68,181.44h8.64v8.64h-8.64Z" fill="#1f8e74"/><path d="M112.32,138.24h-8.64V129.6h8.64Z" fill="#2e6958"/><path d="M17.28,233.28v-8.64h8.64v8.64Z" fill="#1a9579"/><path d="M25.92,233.28v-8.64h8.64v8.64Z" fill="#18977a"/><path d="M34.56,233.28v-8.64H43.2v8.64Z" fill="#15987b"/><path d="M43.2,233.28v-8.64h8.64v8.64Z" fill="#139a7c"/><path d="M51.84,233.28v-8.64h8.64v8.64Z" fill="#119c7e"/><path d="M60.48,233.28v-8.64h8.64v8.64Z" fill="#0e9d7f"/><path d="M69.12,233.28v-8.64h8.64v8.64Z" fill="#0b9f7f"/><path d="M103.68,34.56V43.2H95.04V34.56Z" fill="#292b2a"/><path d="M77.76,51.84V43.2H86.4v8.64Z" fill="#292c2b"/><path d="M86.4,51.84V43.2h8.64v8.64Z" fill="#2a2d2c"/><path d="M51.84,60.48V51.84h8.64v8.64Z" fill="#292c2b"/><path d="M60.48,60.48V51.84h8.64v8.64Z" fill="#292d2c"/><path d="M69.12,60.48V51.84h8.64v8.64Z" fill="#2a2e2d"/><path d="M25.92,69.12V60.48h8.64v8.64Z" fill="#292b2a"/><path d="M34.56,69.12V60.48H43.2v8.64Z" fill="#292c2b"/><path d="M43.2,69.12V60.48h8.64v8.64Z" fill="#2a2e2c"/><path d="M17.28,77.76V69.12h8.64v8.64Z" fill="#2a2d2c"/><path d="M86.4,224.64H77.76V216H86.4Z" fill="#109c7e"/><path d="M86.4,224.64V216h8.64v8.64Z" fill="#0d9e7f"/><path d="M95.04,224.64V216h8.64v8.64Z" fill="#0a9f7f"/><path d="M17.28,77.76h8.64V86.4H17.28Z" fill="#2a312f"/><path d="M17.28,86.4h8.64v8.64H17.28Z" fill="#2b3532"/><path d="M17.28,95.04h8.64v8.64H17.28Z" fill="#2c3a35"/><path d="M17.28,103.68h8.64v8.64H17.28Z" fill="#2d3f39"/><path d="M17.28,112.32h8.64v8.64H17.28Z" fill="#2e443d"/><path d="M17.28,120.96h8.64v8.64H17.28Z" fill="#2f4a41"/><path d="M17.28,129.6h8.64v8.64H17.28Z" fill="#2f5046"/><path d="M17.28,138.24h8.64v8.64H17.28Z" fill="#2f574a"/><path d="M17.28,146.88h8.64v8.64H17.28Z" fill="#2f5d4f"/><path d="M17.28,155.52h8.64v8.64H17.28Z" fill="#2e6454"/><path d="M17.28,164.16h8.64v8.64H17.28Z" fill="#2e6b59"/><path d="M17.28,172.8h8.64v8.64H17.28Z" fill="#2c715e"/><path d="M17.28,181.44h8.64v8.64H17.28Z" fill="#2b7863"/><path d="M17.28,190.08h8.64v8.64H17.28Z" fill="#287e67"/><path d="M17.28,198.72h8.64v8.64H17.28Z" fill="#26846c"/><path d="M17.28,207.36h8.64V216H17.28Z" fill="#228a71"/><path d="M17.28,216h8.64v8.64H17.28Z" fill="#1e8f75"/><path d="M95.04,51.84V43.2h8.64v8.64Z" fill="#2a2f2d"/><path d="M95.04,51.84h8.64v8.64H95.04Z" fill="#2b3330"/><path d="M95.04,60.48h8.64v8.64H95.04Z" fill="#2c3733"/><path d="M95.04,69.12h8.64v8.64H95.04Z" fill="#2d3c37"/><path d="M95.04,77.76h8.64V86.4H95.04Z" fill="#2e413b"/><path d="M95.04,86.4h8.64v8.64H95.04Z" fill="#2e473f"/><path d="M95.04,95.04h8.64v8.64H95.04Z" fill="#2f4d43"/><path d="M95.04,103.68h8.64v8.64H95.04Z" fill="#2f5348"/><path d="M95.04,112.32h8.64v8.64H95.04Z" fill="#2f594c"/><path d="M95.04,120.96h8.64v8.64H95.04Z" fill="#2f6051"/><path d="M103.68,146.88v8.64H95.04v-8.64Z" fill="#2c7460"/><path d="M103.68,190.08v8.64H95.04v-8.64Z" fill="#1c9276"/><path d="M103.68,216H95.04v-8.64h8.64Z" fill="#119b7d"/><path d="M103.68,164.16v8.64H95.04v-8.64Z" fill="#278069"/><path d="M103.68,207.36H95.04v-8.64h8.64Z" fill="#17977a"/><path d="M103.68,146.88H95.04v-8.64h8.64Z" fill="#2d6d5b"/><path d="M95.04,172.8h8.64v8.64H95.04Z" fill="#24866e"/><path d="M103.68,164.16H95.04v-8.64h8.64Z" fill="#2a7b65"/><path d="M95.04,181.44h8.64v8.64H95.04Z" fill="#218c72"/><path d="M103.68,138.24H95.04V129.6h8.64Z" fill="#2e6756"/><path d="M25.92,224.64V216h8.64v8.64Z" fill="#1d9176"/><path d="M34.56,224.64V216H43.2v8.64Z" fill="#1b9378"/><path d="M43.2,224.64V216h8.64v8.64Z" fill="#199579"/><path d="M51.84,224.64V216h8.64v8.64Z" fill="#17977a"/><path d="M60.48,224.64V216h8.64v8.64Z" fill="#15997c"/><path d="M69.12,224.64V216h8.64v8.64Z" fill="#129b7d"/><path d="M77.76,60.48V51.84H86.4v8.64Z" fill="#2a302e"/><path d="M86.4,60.48V51.84h8.64v8.64Z" fill="#2a312f"/><path d="M51.84,69.12V60.48h8.64v8.64Z" fill="#2a2f2d"/><path d="M60.48,69.12V60.48h8.64v8.64Z" fill="#2a312e"/><path d="M69.12,69.12V60.48h8.64v8.64Z" fill="#2b322f"/><path d="M25.92,77.76V69.12h8.64v8.64Z" fill="#2a2f2d"/><path d="M34.56,77.76V69.12H43.2v8.64Z" fill="#2a302e"/><path d="M43.2,77.76V69.12h8.64v8.64Z" fill="#2b322f"/><path d="M86.4,216H77.76v-8.64H86.4Z" fill="#16987b"/><path d="M86.4,216v-8.64h8.64V216Z" fill="#149a7c"/><path d="M25.92,77.76h8.64V86.4H25.92Z" fill="#2b3330"/><path d="M25.92,86.4h8.64v8.64H25.92Z" fill="#2c3733"/><path d="M25.92,95.04h8.64v8.64H25.92Z" fill="#2d3c37"/><path d="M25.92,103.68h8.64v8.64H25.92Z" fill="#2e413a"/><path d="M25.92,112.32h8.64v8.64H25.92Z" fill="#2e473f"/><path d="M25.92,120.96h8.64v8.64H25.92Z" fill="#2f4d43"/><path d="M25.92,129.6h8.64v8.64H25.92Z" fill="#2f5347"/><path d="M25.92,138.24h8.64v8.64H25.92Z" fill="#2f594c"/><path d="M25.92,146.88h8.64v8.64H25.92Z" fill="#2f6051"/><path d="M25.92,155.52h8.64v8.64H25.92Z" fill="#2e6656"/><path d="M25.92,164.16h8.64v8.64H25.92Z" fill="#2d6d5b"/><path d="M25.92,172.8h8.64v8.64H25.92Z" fill="#2c7460"/><path d="M25.92,181.44h8.64v8.64H25.92Z" fill="#2a7a65"/><path d="M25.92,190.08h8.64v8.64H25.92Z" fill="#278069"/><path d="M25.92,198.72h8.64v8.64H25.92Z" fill="#24866e"/><path d="M25.92,207.36h8.64V216H25.92Z" fill="#218c72"/><path d="M86.4,60.48h8.64v8.64H86.4Z" fill="#2b3532"/><path d="M86.4,69.12h8.64v8.64H86.4Z" fill="#2c3a35"/><path d="M86.4,77.76h8.64V86.4H86.4Z" fill="#2d3f39"/><path d="M86.4,86.4h8.64v8.64H86.4Z" fill="#2e453d"/><path d="M86.4,95.04h8.64v8.64H86.4Z" fill="#2f4b41"/><path d="M86.4,103.68h8.64v8.64H86.4Z" fill="#2f5146"/><path d="M86.4,112.32h8.64v8.64H86.4Z" fill="#2f574b"/><path d="M86.4,120.96h8.64v8.64H86.4Z" fill="#2f5d4f"/><path d="M95.04,146.88v8.64H86.4v-8.64Z" fill="#2c715e"/><path d="M95.04,190.08v8.64H86.4v-8.64Z" fill="#1e9075"/><path d="M95.04,164.16v8.64H86.4v-8.64Z" fill="#287f68"/><path d="M86.4,198.72h8.64v8.64H86.4Z" fill="#199579"/><path d="M95.04,146.88H86.4v-8.64h8.64Z" fill="#2e6b59"/><path d="M86.4,172.8h8.64v8.64H86.4Z" fill="#26846c"/><path d="M95.04,164.16H86.4v-8.64h8.64Z" fill="#2b7863"/><path d="M86.4,181.44h8.64v8.64H86.4Z" fill="#228a71"/><path d="M95.04,138.24H86.4V129.6h8.64Z" fill="#2e6454"/><path d="M34.56,216v-8.64H43.2V216Z" fill="#1f8e74"/><path d="M43.2,216v-8.64h8.64V216Z" fill="#1e9075"/><path d="M51.84,216v-8.64h8.64V216Z" fill="#1c9277"/><path d="M60.48,216v-8.64h8.64V216Z" fill="#1a9478"/><path d="M69.12,216v-8.64h8.64V216Z" fill="#18967a"/><path d="M86.4,60.48v8.64H77.76V60.48Z" fill="#2b3431"/><path d="M51.84,77.76V69.12h8.64v8.64Z" fill="#2b3330"/><path d="M60.48,77.76V69.12h8.64v8.64Z" fill="#2b3531"/><path d="M69.12,77.76V69.12h8.64v8.64Z" fill="#2c3633"/><path d="M34.56,86.4V77.76H43.2V86.4Z" fill="#2b3431"/><path d="M43.2,86.4V77.76h8.64V86.4Z" fill="#2c3632"/><path d="M86.4,198.72v8.64H77.76v-8.64Z" fill="#1b9377"/><path d="M34.56,86.4H43.2v8.64H34.56Z" fill="#2c3934"/><path d="M34.56,95.04H43.2v8.64H34.56Z" fill="#2d3e38"/><path d="M34.56,103.68H43.2v8.64H34.56Z" fill="#2e433c"/><path d="M34.56,112.32H43.2v8.64H34.56Z" fill="#2e4940"/><path d="M34.56,120.96H43.2v8.64H34.56Z" fill="#2f4f45"/><path d="M34.56,129.6H43.2v8.64H34.56Z" fill="#2f5549"/><path d="M34.56,138.24H43.2v8.64H34.56Z" fill="#2f5c4e"/><path d="M34.56,146.88H43.2v8.64H34.56Z" fill="#2f6253"/><path d="M34.56,155.52H43.2v8.64H34.56Z" fill="#2e6958"/><path d="M34.56,164.16H43.2v8.64H34.56Z" fill="#2d705d"/><path d="M34.56,172.8H43.2v8.64H34.56Z" fill="#2b7662"/><path d="M34.56,181.44H43.2v8.64H34.56Z" fill="#297d66"/><path d="M34.56,190.08H43.2v8.64H34.56Z" fill="#26826b"/><path d="M34.56,198.72H43.2v8.64H34.56Z" fill="#23886f"/><path d="M77.76,77.76V69.12H86.4v8.64Z" fill="#2c3834"/><path d="M77.76,77.76H86.4V86.4H77.76Z" fill="#2d3d38"/><path d="M77.76,86.4H86.4v8.64H77.76Z" fill="#2e433c"/><path d="M77.76,95.04H86.4v8.64H77.76Z" fill="#2e4840"/><path d="M77.76,103.68H86.4v8.64H77.76Z" fill="#2f4e44"/><path d="M77.76,112.32H86.4v8.64H77.76Z" fill="#2f5549"/><path d="M77.76,120.96H86.4v8.64H77.76Z" fill="#2f5b4e"/><path d="M86.4,146.88v8.64H77.76v-8.64Z" fill="#2d6f5c"/><path d="M86.4,198.72H77.76v-8.64H86.4Z" fill="#208d73"/><path d="M86.4,164.16v8.64H77.76v-8.64Z" fill="#297c66"/><path d="M86.4,146.88H77.76v-8.64H86.4Z" fill="#2e6857"/><path d="M77.76,172.8H86.4v8.64H77.76Z" fill="#27826b"/><path d="M86.4,164.16H77.76v-8.64H86.4Z" fill="#2b7661"/><path d="M77.76,181.44H86.4v8.64H77.76Z" fill="#24886f"/><path d="M86.4,138.24H77.76V129.6H86.4Z" fill="#2f6252"/><path d="M43.2,207.36v-8.64h8.64v8.64Z" fill="#228a71"/><path d="M51.84,207.36v-8.64h8.64v8.64Z" fill="#208d73"/><path d="M60.48,207.36v-8.64h8.64v8.64Z" fill="#1f8f74"/><path d="M69.12,207.36v-8.64h8.64v8.64Z" fill="#1d9176"/><path d="M51.84,86.4V77.76h8.64V86.4Z" fill="#2c3833"/><path d="M60.48,86.4V77.76h8.64V86.4Z" fill="#2c3935"/><path d="M69.12,86.4V77.76h8.64V86.4Z" fill="#2d3b36"/><path d="M43.2,95.04V86.4h8.64v8.64Z" fill="#2d3b36"/><path d="M43.2,95.04h8.64v8.64H43.2Z" fill="#2d4039"/><path d="M43.2,103.68h8.64v8.64H43.2Z" fill="#2e453e"/><path d="M43.2,112.32h8.64v8.64H43.2Z" fill="#2f4b42"/><path d="M43.2,120.96h8.64v8.64H43.2Z" fill="#2f5146"/><path d="M43.2,129.6h8.64v8.64H43.2Z" fill="#2f584b"/><path d="M43.2,138.24h8.64v8.64H43.2Z" fill="#2f5e50"/><path d="M43.2,146.88h8.64v8.64H43.2Z" fill="#2e6555"/><path d="M43.2,155.52h8.64v8.64H43.2Z" fill="#2d6b5a"/><path d="M43.2,164.16h8.64v8.64H43.2Z" fill="#2c725f"/><path d="M43.2,172.8h8.64v8.64H43.2Z" fill="#2a7963"/><path d="M43.2,181.44h8.64v8.64H43.2Z" fill="#287f68"/><path d="M43.2,190.08h8.64v8.64H43.2Z" fill="#25846d"/><path d="M69.12,86.4h8.64v8.64H69.12Z" fill="#2d403a"/><path d="M69.12,95.04h8.64v8.64H69.12Z" fill="#2e463e"/><path d="M69.12,103.68h8.64v8.64H69.12Z" fill="#2f4c42"/><path d="M69.12,112.32h8.64v8.64H69.12Z" fill="#2f5247"/><path d="M69.12,120.96h8.64v8.64H69.12Z" fill="#2f594c"/><path d="M77.76,146.88v8.64H69.12v-8.64Z" fill="#2d6c5a"/><path d="M77.76,198.72H69.12v-8.64h8.64Z" fill="#218b72"/><path d="M77.76,164.16v8.64H69.12v-8.64Z" fill="#2a7a64"/><path d="M77.76,146.88H69.12v-8.64h8.64Z" fill="#2e6655"/><path d="M69.12,172.8h8.64v8.64H69.12Z" fill="#287f69"/><path d="M77.76,164.16H69.12v-8.64h8.64Z" fill="#2c735f"/><path d="M69.12,181.44h8.64v8.64H69.12Z" fill="#25856d"/><path d="M77.76,138.24H69.12V129.6h8.64Z" fill="#2f5f51"/><path d="M51.84,198.72v-8.64h8.64v8.64Z" fill="#24876e"/><path d="M60.48,198.72v-8.64h8.64v8.64Z" fill="#238970"/><path d="M51.84,95.04V86.4h8.64v8.64Z" fill="#2d3d37"/><path d="M60.48,95.04V86.4h8.64v8.64Z" fill="#2d3e39"/><path d="M51.84,95.04h8.64v8.64H51.84Z" fill="#2e423b"/><path d="M51.84,103.68h8.64v8.64H51.84Z" fill="#2e473f"/><path d="M51.84,112.32h8.64v8.64H51.84Z" fill="#2f4d44"/><path d="M51.84,120.96h8.64v8.64H51.84Z" fill="#2f5448"/><path d="M51.84,129.6h8.64v8.64H51.84Z" fill="#2f5a4d"/><path d="M51.84,138.24h8.64v8.64H51.84Z" fill="#2f6152"/><path d="M51.84,146.88h8.64v8.64H51.84Z" fill="#2e6757"/><path d="M51.84,155.52h8.64v8.64H51.84Z" fill="#2d6e5c"/><path d="M51.84,164.16h8.64v8.64H51.84Z" fill="#2c7560"/><path d="M51.84,172.8h8.64v8.64H51.84Z" fill="#2a7b65"/><path d="M51.84,181.44h8.64v8.64H51.84Z" fill="#27816a"/><path d="M60.48,103.68V95.04h8.64v8.64Z" fill="#2e443d"/><path d="M60.48,103.68h8.64v8.64H60.48Z" fill="#2f4a41"/><path d="M60.48,112.32h8.64v8.64H60.48Z" fill="#2f5045"/><path d="M60.48,120.96h8.64v8.64H60.48Z" fill="#2f564a"/><path d="M60.48,155.52v-8.64h8.64v8.64Z" fill="#2e6a58"/><path d="M60.48,172.8v-8.64h8.64v8.64Z" fill="#2b7762"/><path d="M69.12,146.88H60.48v-8.64h8.64Z" fill="#2f6354"/><path d="M60.48,172.8h8.64v8.64H60.48Z" fill="#297e67"/><path d="M69.12,164.16H60.48v-8.64h8.64Z" fill="#2c715d"/><path d="M60.48,181.44h8.64v8.64H60.48Z" fill="#26836c"/><path d="M69.12,138.24H60.48V129.6h8.64Z" fill="#2f5d4f"/></svg>
\ No newline at end of file
diff --git a/src/img/pixelBG_LowRes.png b/src/img/pixelBG_LowRes.png
new file mode 100644
index 0000000..11a3346
Binary files /dev/null and b/src/img/pixelBG_LowRes.png differ
diff --git a/src/index.css b/src/index.css
index ec2585e..b5cd1ba 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,24 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 6431bc5..9e47887 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1 +1,11 @@
 /// <reference types="react-scripts" />
+
+declare module "*.mp4" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.webm" {
+  const src: string;
+  export default src;
+}