diff --git a/src/static/css/App.css b/src/static/css/App.css
index d4e5011..8c8c8fb 100644
--- a/src/static/css/App.css
+++ b/src/static/css/App.css
@@ -52,12 +52,32 @@ body {
   cursor: pointer;
 }
 
-#defaultCanvas0 {
+/* #defaultCanvas0 {
   position: fixed;
   top: 0;
   left: 0;
   position: fixed;
   z-index: -69;
+} */
+
+#map {
+  height: 100%;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -69;
+}
+
+.leaflet-layer,
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out,
+.leaflet-control-attribution {
+  filter: brightness(500%) contrast(130%);
+}
+
+.leaflet-tile-pane {
+  filter: brightness(50%);
 }
 
 h1, h2 {
@@ -192,29 +212,35 @@ a {
 }
 
 .foreground {
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: hidden;
+  background-color: rgb(24, 24, 24, .85);
+  z-index: -1;
+}
+
+.foregroundContent {
   padding-top: 6rem;
   padding-left: 8rem;
   max-width: calc(100%-8rem);
-  min-height: calc(100vh - 8rem);
-  background-color: rgb(24, 24, 24, .85);
   padding-bottom: 1rem;
-  overflow: hidden;
-  transition: .4s;
 }
 
-.foreground p {
+.foregroundContent p {
   line-height: 1.5em;
   max-width: min(90%, 40rem);
 }
 
 .homeground {
-  position: relative;
-  padding-top: 7rem;
-  min-height: calc(100vh - 8rem);
-  padding-bottom: 1rem;
-  overflow: hidden;
-  transition: .4s;
+  background-color: rgb(0, 0, 0, .6);
+}
+
+.homegroundContent {
+  padding-top: 7em;
+  padding-left: 0em;
 }
 
 .noBackground {
@@ -835,26 +861,16 @@ a {
     background-size: auto 100%;
   }
 
-  .foreground {
-    max-width: 100%;
-    padding-left: 2rem;
+  .foregroundContent {
     /* centered objects will need to remove 1.5 of this to center */
-    padding-right: .5rem;
+    padding-left: 1em;
+    padding-right: 1em;
     padding-bottom: 36px;
     padding-top: 3em;
   }
 
-  .homeground {
-    width: 90%;
-    padding-bottom: 36px;
-    display: flex;
-    margin: auto;
-    overflow: visible;
-  }
-
-  .centeredForeground {
-    margin-left: -1.5rem;
-    /* remove .foreground excess margin */
+  .homegroundContent {
+    padding-top: 5em;
   }
 
   .onRight {
@@ -863,8 +879,12 @@ a {
     margin-right: 0;
   }
 
+  .timeline {
+    padding-left: 1em;
+  }
+
   .col {
-    width: 90%;
+    width: 100%;
     margin-bottom: 3rem;
   }
 
diff --git a/src/templates/about.html b/src/templates/about.html
index eac7dd9..5006c3b 100644
--- a/src/templates/about.html
+++ b/src/templates/about.html
@@ -1,91 +1,92 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
   <div class="relative">
-  <div id="aboutGrid">
-    <div id="aboutMe" class="col" data-aos="fade-up">
-      <h2 class="concentratedHead">About Me</h2>
-      <p>
-        I'm Andrew Simonson, a fourth year student at
-        <strong>Rochester Institute of Technology </strong>
-        in the <b>Computer Science BS</b> program, pursuing a career in data
-        science with a focus on predictive analytics.
-      </p>
-      <p>
-        <br /><br />
-        Ominous positivity is kinda my thing.
-      </p>
-    </div>
-    <div class="col rightCol" data-aos="fade-up">
-      <div id="skills">
-      <!-- <h2>Skills</h2> -->
-      {% from 'partials/skills.html' import skills %} {{ skills([ "Python",
-      "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
-      "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
-      "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
-      "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "Web
-      Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
-    </div>
-      <div id="timeline">
-        <h2>Timeline</h2>
-        <div class="checkbox-wrapper">
-          <div class="flex start">
-            <label class="switch" htmlFor="pinned">
-              <input
-                type="checkbox"
-                id="pinned"
-                onClick='toggleCheckbox("up")'
-                checked
-              />
-              <div class="slider round"></div>
-              <strong>Pinned</strong>
-            </label>
-          </div>
-          <div class="flex start">
-            <label class="switch" htmlFor="education">
-              <input
-                type="checkbox"
-                id="education"
-                onClick="toggleCheckbox('up')"
-              />
-              <div class="slider round"></div>
-              <strong>Education</strong>
-            </label>
-          </div>
-          <div class="flex start">
-            <label
-              class="switch"
-              htmlFor="experience"
-              onClick="toggleCheckbox('up')"
-            >
-              <input type="checkbox" id="experience" />
-              <div class="slider round"></div>
-              <strong>Work Experience</strong>
-            </label>
-          </div>
-          <div class="flex start">
-            <label
-              class="switch"
-              htmlFor="technical"
-              onClick="toggleCheckbox('up')"
-            >
-              <input type="checkbox" id="technical" />
-              <div class="slider round"></div>
-              <strong>Technical</strong>
-            </label>
-          </div>
-        </div>
-        <div class="timeline checkbox-client">
-          {% from 'partials/timeline.html' import timeitem %} {% for i in
-          var["timeline"] %} {{ timeitem(i, var["timeline"][i]["classes"],
-          var["timeline"][i]["date"], var["timeline"][i]["content"])}} {% endfor
-          %}
-        </div>
-        <script>
-          toggleCheckbox("up");
-        </script>
+    <div id="aboutGrid">
+      <div id="aboutMe" class="col" data-aos="fade-up">
+        <h2 class="concentratedHead">About Me</h2>
+        <p>
+          I'm Andrew Simonson, a fourth year student at
+          <strong>Rochester Institute of Technology </strong>
+          in the <b>Computer Science BS</b> program, pursuing a career in data
+          science with a focus on predictive analytics.
+        </p>
+        <p>
+          <br /><br />
+          Ominous positivity is kinda my thing.
+        </p>
       </div>
-    </div>
-    <!-- {/* <div data-aos="fade-up" class="elementBlock">
+      <div class="col rightCol" data-aos="fade-up">
+        <div id="skills">
+          <!-- <h2>Skills</h2> -->
+          {% from 'partials/skills.html' import skills %} {{ skills([ "Python",
+          "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
+          "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
+          "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
+          "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "Web
+          Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
+        </div>
+        <div id="timeline">
+          <h2>Timeline</h2>
+          <div class="checkbox-wrapper">
+            <div class="flex start">
+              <label class="switch" htmlFor="pinned">
+                <input
+                  type="checkbox"
+                  id="pinned"
+                  onClick='toggleCheckbox("up")'
+                  checked
+                />
+                <div class="slider round"></div>
+                <strong>Pinned</strong>
+              </label>
+            </div>
+            <div class="flex start">
+              <label class="switch" htmlFor="education">
+                <input
+                  type="checkbox"
+                  id="education"
+                  onClick="toggleCheckbox('up')"
+                />
+                <div class="slider round"></div>
+                <strong>Education</strong>
+              </label>
+            </div>
+            <div class="flex start">
+              <label
+                class="switch"
+                htmlFor="experience"
+                onClick="toggleCheckbox('up')"
+              >
+                <input type="checkbox" id="experience" />
+                <div class="slider round"></div>
+                <strong>Work Experience</strong>
+              </label>
+            </div>
+            <div class="flex start">
+              <label
+                class="switch"
+                htmlFor="technical"
+                onClick="toggleCheckbox('up')"
+              >
+                <input type="checkbox" id="technical" />
+                <div class="slider round"></div>
+                <strong>Technical</strong>
+              </label>
+            </div>
+          </div>
+          <div class="timeline checkbox-client">
+            {% from 'partials/timeline.html' import timeitem %} {% for i in
+            var["timeline"] %} {{ timeitem(i, var["timeline"][i]["classes"],
+            var["timeline"][i]["date"], var["timeline"][i]["content"])}} {%
+            endfor %}
+          </div>
+          <script>
+            toggleCheckbox("up");
+          </script>
+        </div>
+      </div>
+      <!-- {/* <div data-aos="fade-up" class="elementBlock">
       <h2>Extracirricular Awards</h2>
       <MyCarousel class="carousel" data-aos="fade-up">
         {[
@@ -115,7 +116,7 @@
         ]}
       </MyCarousel>
     </div> */} -->
-  </div>
+    </div>
   </div>
 </div>
 {% endblock %}
diff --git a/src/templates/books.html b/src/templates/books.html
index f130cb8..9804844 100644
--- a/src/templates/books.html
+++ b/src/templates/books.html
@@ -1,5 +1,6 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
   <h2>These are some of the books I've read since 2020, vaguely sorted by topic.</h2>
   <h3>"You can't judge a book by its cover but you can judge a person by their bookshelf" - Me, today.</h3>
   <h4>Hover to reveal review<br />Read to reveal KNOWLEDGE</h4>
diff --git a/src/templates/duck.html b/src/templates/duck.html
index 3a67276..d94aaf2 100644
--- a/src/templates/duck.html
+++ b/src/templates/duck.html
@@ -1,5 +1,6 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
   <h2>What the duck?</h2>
   <img
     alt="mega spinney duck"
diff --git a/src/templates/error.html b/src/templates/error.html
index d94850c..22b23e2 100644
--- a/src/templates/error.html
+++ b/src/templates/error.html
@@ -1,4 +1,5 @@
 {% block content %}
+<div class="foreground homeground"></div>
 <div class="fPage">
   <div class="heightBox">
     <div class="neonBox">
diff --git a/src/templates/header.html b/src/templates/header.html
index 4e61678..dbdd3e6 100644
--- a/src/templates/header.html
+++ b/src/templates/header.html
@@ -39,6 +39,10 @@
 
       gtag("config", "G-E2V93W9CNV");
     </script>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/hotspots.css') }}"
+    />
     <link
       rel="stylesheet"
       href="{{ url_for('static', filename='css/App.css') }}"
@@ -53,8 +57,19 @@
     />
 
     <link rel="canonical" href="https://asimonson.com{{ var['canonical'] }}" />
-    <script defer src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
-    <script defer src="{{ url_for('static', filename='js/idler.js') }}"></script>
+    <link defer
+    rel="stylesheet"
+    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""
+  />
+  <script defer
+    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""
+  ></script>
+  <script defer src="{{ url_for('static', filename='js/lib/leaflet-providers.js') }}"></script>
+  <script defer src="{{ url_for('static', filename='js/lib/CUSTOM.leaflet.curve.js') }}"></script>
     <script src="{{ url_for('static', filename='js/checkbox.js') }}"></script>
     <script src="{{ url_for('static', filename='js/responsive.js') }}"></script>
     <script src="{{ url_for('static', filename='js/chessbed.js') }}"></script>
@@ -63,18 +78,20 @@
 
   <body onpopstate="backButton()">
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="map"></div>
+    <script defer src="{{ url_for('static', filename='js/hotspots.js') }}"></script>
     <div class="App">
       <div class="header">
-          <div id="name-container" onclick="goto('home', {toggle:false})">
-            <div class="glitch">
-              {% for i in range(9) %}
-              <div class="line name">
-                <span class="textGrad">Andrew Simonson</span>
-              </div>
-              {% endfor %}
+        <div id="name-container" onclick="goto('home', {toggle:false})">
+          <div class="glitch">
+            {% for i in range(9) %}
+            <div class="line name">
+              <span class="textGrad">Andrew Simonson</span>
             </div>
+            {% endfor %}
           </div>
-        
+        </div>
+
         <img
           src="{{ url_for('static', filename='icons/menu.svg')}}"
           alt="menu"
@@ -101,8 +118,6 @@
       </div>
     </div>
     <div id="root">{% include var['template'] %}</div>
-    <div class="footer">
-      {% include 'partials/socials.html' %}
-    </div>
+    <div class="footer">{% include 'partials/socials.html' %}</div>
   </body>
 </html>
diff --git a/src/templates/home.html b/src/templates/home.html
index 2e2d14d..a3635d2 100644
--- a/src/templates/home.html
+++ b/src/templates/home.html
@@ -1,5 +1,6 @@
 {% block content %}
-<div class="homeground">
+<div class="foreground homeground"></div>
+<div class="foregroundContent homegroundContent">
   <div class="relative">
     <div class="flex">
       <div id="HomeContent" data-aos="fade-up">
diff --git a/src/templates/projects.html b/src/templates/projects.html
index 4344e64..d514fa0 100644
--- a/src/templates/projects.html
+++ b/src/templates/projects.html
@@ -1,5 +1,6 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
     <div data-aos="fade-up">
       <h2 class="concentratedHead">Projects</h2>
       <p>
@@ -35,7 +36,7 @@
       </label>
       </div>
     </div>
-    <div class="projectList centeredForeground checkbox-client">
+    <div class="projectList checkbox-client">
         {% from 'partials/project.html' import project %} 
         {% for i in var["projects"] %}
         {{ project(i, var["projects"][i]["classes"], var["projects"][i]["status"], var["projects"][i]["bgi"], var["projects"][i]["content"], var["projects"][i]["links"]) }}