diff --git a/deps/web-components b/deps/web-components
index 96e9ae8d..5c409881 160000
--- a/deps/web-components
+++ b/deps/web-components
@@ -1 +1 @@
-Subproject commit 96e9ae8dee2befdbeea274afa72b4ca165c917d3
+Subproject commit 5c409881df9a53c68d5e7696d45f89baac3ddf06
diff --git a/pages/dev/test-site/about/+Page.mdx b/pages/dev/test-site/about/+Page.mdx
index a00f9e88..ee7d1451 100644
--- a/pages/dev/test-site/about/+Page.mdx
+++ b/pages/dev/test-site/about/+Page.mdx
@@ -11,12 +11,11 @@ import { MacrostratIcon } from "~/components";
 <div id="body">
   
 [//]: # "About"
-<div id="about">
-  <h1 class="big" id="about-title">
+<h1 class="big" id="about-title">
     About
     <div class="line"></div>
-  </h1>
-  
+</h1>
+<div id="about">
   <div class="about-row">
     <div class="about-body-subtitle">
       Summary
@@ -66,9 +65,12 @@ import { MacrostratIcon } from "~/components";
   </div>
 </div>
 
+<Image className="rock-border" src="rocks-border.jpg"></Image>
+
+
 [//]: # "API"
 <div id="api">
-  <div class="api-circle"><div id="api-circle-text">API</div></div>
+  <Image src="api2.png" className="api-image"></Image>
   <div id="api-text">All data contained in the Macrostrat database are freely available via our Application Programming Interface (API), which provides a convinient way to retrieve data for analysis or application creation. For more information head over to the <a href="/api">API root</a> to explore available routes.</div>
 </div>
 
diff --git a/pages/dev/test-site/about/main.styl b/pages/dev/test-site/about/main.styl
index f0d36dff..516e9f42 100644
--- a/pages/dev/test-site/about/main.styl
+++ b/pages/dev/test-site/about/main.styl
@@ -7,7 +7,10 @@
   padding: 0 20%
 
 #apps
-  padding: 75px 0    
+  margin-top: 10px
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+  margin-bottom: 80px
 
 a:hover
   text-decoration: none
@@ -20,8 +23,7 @@ a:hover
 .app-box 
   height: 15vh
   display: flex
-  width: 60%
-  margin: 0 20%
+  margin-right: 5%
   position: relative
   color: black
 
@@ -46,8 +48,7 @@ a:hover
   font-family: "Maven Pro", sans-serif
   text-align: center  
   background-color: #4BABBf
-  width: 60%
-  margin: 0 20%
+  border-radius: 10px 10px 0 0
   color: white
 
 
@@ -60,38 +61,28 @@ a:hover
   position: relative
   height: 30vh
   background-color: white
+  display: grid
+  grid-template-columns: 30% 70%
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
 
-#api-circle-text
-  display: table-cell;
-  vertical-align: middle;
-  color: #6bbe98;
-  font-size: 72px
-  font-weight: 500
-
-.api-circle
-  float: left
-  margin-left: 15%
-  margin-right: 50px
-  background-color: #fff;
-  height: 200px;
-  width: 200px;
-  border-radius: 50%;
-  text-align: center;
-  display: table;
-  border: 11px solid #6bbe98;
-  color: #4BABBf;
+.api-image
+  margin:auto
 
 #api-text
-  padding-top: 50px
-  margin-right: 15%
   color: #4bab7f;
   font-size: 20px;
   line-height: 28px;
   font-weight: 400;
+  margin: auto
+  padding: 0 30px
 
 
 #about  
   padding: 50px 0
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+  margin-bottom: 10px
 
 .about-row
   margin: 4%
@@ -109,16 +100,17 @@ a:hover
 
 #about-title
   text-align: left
-  color: #E0E1E6
   position: relative
   padding-bottom: 0
+  margin-top: 75px
+  color: black
 
 .line
   width: 100%;
-  border-bottom: 1px solid #E0E1E6;
+  border-bottom: 1px solid black;
   position: absolute;
 
 .rock-border
   width: 100%
   margin: 0
-  padding: 0
+  padding: 0
\ No newline at end of file
diff --git a/pages/dev/test-site/donate/+Page.mdx b/pages/dev/test-site/donate/+Page.mdx
index 9ed280a2..886827d8 100644
--- a/pages/dev/test-site/donate/+Page.mdx
+++ b/pages/dev/test-site/donate/+Page.mdx
@@ -9,18 +9,16 @@ import { MacrostratIcon } from "~/components";
 <Navbar></Navbar>
 
 [//]: # "Donate"
-<div class="donate-container" id="donate">
+<div class="card donate-card">
+  <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
-  <div class="text">
-    <div class="donate-left">
-      <h1 class="title donate-title"><a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">Donate Now</a></h1>
-    </div>
-    <div class="donate-right">
-      <div class="donate-info">
-          Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
-      </div>
+  <div class="donate-text">
+    <h1 class="donate-title">Donate Now</h1>
+    <div class="caption-donate">
+        Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
     </div>
   </div>
+  </a>
 </div>
 
 [//]: # "Footer"
diff --git a/pages/dev/test-site/donate/main.styl b/pages/dev/test-site/donate/main.styl
index f2d090bf..9976986e 100644
--- a/pages/dev/test-site/donate/main.styl
+++ b/pages/dev/test-site/donate/main.styl
@@ -14,63 +14,85 @@ p
   margin-bottom: 10px;
   margin-top: 0;
 
-.donate-container
-  height: 80vh
-
 .title
   margin: 0
   font-size: 72px
   font-family: "Maven Pro", sans-serif;
   padding: 20vh 0
   text-align: center
-  
+
+.donate-img
+  position:absolute
+  z-index:5
+  height: 80vh
+  width: 60%
+  object-fit: cover
+  border-radius: 10px
+
+.text
+  position:absolute
+  z-index: 100
+  padding: 0 20px
+  width: 60%
+
+.card
+  background-color: white
+  padding: 0
+  margin: 2% 20%
+  margin-top: 100px
+  width: 60%
+
+  .link-title 
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+
+.donate-card
+  height: 80vh
+
+.donate-text
+  position:absolute
+  z-index: 100
+  width: 60%
+  display: grid
+  margin:auto
+  grid-template-rows: 20vh 60vh;
+  height: 80vh
+
 .donate-title
   a 
     color:white
   a:hover
     text-decoration: none
 
+  display: grid
+  margin: auto
   color: white
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   font-family: "Maven Pro", sans-serif;
-  padding: 0
+  font-size: 100px
 
-.donate-left
-  float: left
-  width: 50%
-  height: 80vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-.donate-right
-  float: right
-  width: 50%
-  height: 80vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-.donate-info
-  background: rgba(255,255,255,0.6);
+.caption-donate
+  display: grid
+  margin: auto
   padding: 25px
+  margin-right: 20%
+  margin-left: 20%
+  background: rgba(255,255,255,0.6);
   color: black
-  width: 80%
-  font-size: 18px
 
   a
     color: black
     font-weight: bold
     text-decoration: none
 
-.donate-img
-  position:absolute
-  z-index:5
-  height: 80vh
-  width: 100%
-  object-fit: cover
-
-.text
-  position:absolute
-  z-index: 100
-  padding: 0 20px
\ No newline at end of file
+  p
+    margin-bottom: 0
+    font-size: 175%
diff --git a/pages/dev/test-site/main-page/+Page.mdx b/pages/dev/test-site/main-page/+Page.mdx
index fe1fad95..227f1454 100644
--- a/pages/dev/test-site/main-page/+Page.mdx
+++ b/pages/dev/test-site/main-page/+Page.mdx
@@ -1,99 +1,113 @@
 import { PageHeader } from "~/components";
-import { LinkCard } from "~/components/cards";
 import { Image, Navbar, Footer } from "../index";
 import "./main.styl";
 import "../main.styl";
 import { MacrostratIcon } from "~/components";
 
+
 <div id="total">
 
 [//]: # "Nav Bar"
 <Navbar></Navbar>
 
-[//]: # "Start Page"
-<div class="start">
-    <Image className="back-img cover-image" src="cover_large.jpg"></Image>
-    <div class="text">
-      <span class="header">
-        <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
-      </span>
-      <div class="stats">
-        <div class="stat">
-          <span class="top-stat" id="n_columns">1,400</span>
-          <span class="top-stat-label">Regional Rock Columns</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_units">33,903</span>
-          <span class="top-stat-label">Rock Units</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_polys">2,500,000</span>
-          <span class="top-stat-label">Geologic Map Polygons</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_names">51,212</span>
-          <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
-        </div>
+<div class="body">
+
+
+[//]: # "Start Page" 
+<div class="start-card card">
+  <Image className="cover-img back-img" src="cover_large.jpg"></Image>
+  <div class="text">
+    <span class="start-header">
+      <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
+    </span>
+    <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
+    <div class="stats">
+      <div class="stat">
+        <span class="top-stat" id="n_columns">1,400</span>
+        <span class="top-stat-label">Regional Rock Columns</span>
+      </div>
+      <div class="stat">
+        <span class="top-stat" id="n_units">33,903</span>
+        <span class="top-stat-label">Rock Units</span>
+      </div>
+      <div class="stat">
+        <span class="top-stat" id="n_polys">2,500,000</span>
+        <span class="top-stat-label">Geologic Map Polygons</span>
       </div>
-      <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
-      <div class="buttons1">
-        <a type="button" class="btn" href="/sift/#/">Search</a>
-        <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
-        <div type="button" class="btn rockd" onclick="window.location='https://rockd.org'">
-          <div class="rockd-button-container">
-            <Image src="rockd.jpg" width="22px" className="rockd-png"></Image>
-            <a href="https://rockd.org" target="_blank">Go mobile</a>
-          </div>
-        </div>
+      <div class="stat">
+        <span class="top-stat" id="n_names">51,212</span>
+        <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
       </div>
     </div>
+  </div>
 </div>
 
+[//]: # "Map Interface"
+<div class="map-card card">
+  <p>
+    <div class="map-element">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
+    \
+    <div class="map-element">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
+    \
+    <div class="map-element"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
+    <div class="buttons1">
+      <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
+      <a type="button" class="btn" href="/sift/#/">Search</a>
+    </div>
+  </p>
+</div>
+
+[//]: # "Mobile"
+<div class="mobile-card card">
+  <Image src="rockd.jpg" width="22px" className="rockd-png"></Image>
+  <h1><a href="https://rockd.org" target="_blank">Go mobile!</a></h1>
+</div>
 
 [//]: # "Locations"
-<div id="locations">
+<div class="header">
+  <h1>Locations</h1>
+</div>
+<div class="locations-card card">
   <div class="location">
-    <Image className="location-img t1" src="north_america_med.jpg"></Image>
+    <Image className="card-image top" src="north_america_med.jpg"></Image>
     <div class="location-text">
       <h1>North America</h1>
-      <div class="caption">243 packages. 798 units. 897 collections.</div>
+      <p>243 packages. 798 units. 897 collections.</p>
     </div>
-    <Image className="location-img t2" src="caribbean_new_medium.jpg"></Image>
+  </div>
+  <div class="location">
     <div class="location-text">
-      <h1>Carribean</h1>
-      <div class="caption">243 packages. 798 units. 897 collections.</div>
+      <h1>Caribbean</h1>
+      <p>243 packages. 798 units. 897 collections.</p>
     </div>
+    <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
   </div>
   <div class="location">
+    <Image className="card-image" src="new_zealand_new_medium.jpg"></Image>
     <div class="location-text">
       <h1>New Zealand</h1>
-      <div class="caption">828 packages. 2,168 units. 328 collections.</div>
+      <p>828 packages. 2,168 units. 328 collections.</p>
     </div>
-    <Image className="location-img t1" src="new_zealand_new_medium.jpg"></Image>
+  </div>
+  <div class="location">
     <div class="location-text">
       <h1>Deep Sea</h1>
-      <div class="caption">388 packages. 7,124 units. 0 collections.</div>
+      <p>388 packages. 7,124 units. 0 collections.</p>
     </div>
-    <Image className="location-img t2" src="deep_sea_new_medium.jpg"></Image>
+    <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
   </div>
 </div>
 
-[//]: # "Map Interface"
-<div class="temp-class" id="map">
-  <div class="link-title">
-    <a href="/map"><h1>Map Interface</h1></a>
-  </div>
-  <p class="long">
-    <div class="temp">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
-    \
-    <div class="temp">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
-    \
-    <div class="temp"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
-  </p>
+[//]: # "Data Products"
+<div class="header">
+  <h1>Data products</h1>
+  <h2>Macrostrat integrates a variety of geological data products into a community-accessibe, space-time model of the Earth's crust. These products come from a variety of sources throughout the geosciences.</h2>
 </div>
 
+<div class="card-set">
+
 [//]: # "Maps"
-<div class="temp-class" id="maps">
+<div class="basic-card left-card">
   <div class="link-title">
     <a href="/maps"><h1>Maps</h1></a>
   </div>
@@ -103,7 +117,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Columns"
-<div class="temp-class" id="columns">
+<div class="basic-card right-card">
   <div class="link-title">
     <a href="/columns"><h1>Columns</h1></a>
   </div>
@@ -113,7 +127,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Geologic Lexicon"
-<div class="temp-class" id="lexicon">
+<div class="basic-card left-card">
   <div class="link-title">
     <a href="/lex"><h1>Geologic Lexicon</h1></a>
   </div>
@@ -123,7 +137,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Projects"
-<div class="temp-class" id="project">
+<div class="basic-card right-card">
   <div class="link-title">
     <a href="/projects"><h1>Projects</h1></a>
   </div>
@@ -132,20 +146,20 @@ import { MacrostratIcon } from "~/components";
   </p>
 </div>
 
+</div>
+
 
 [//]: # "Donate"
-<div class="donate-container" id="donate">
+<div class="header">
+  <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank"><h1>Donate Now</h1></a>
+</div>
+<div class="donate-card card">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
-  <div class="text-donate">
-    <div class="donate-left">
-      <h1 class="title donate-title"><a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">Donate Now</a></h1>
-    </div>
-    <div class="donate-right">
-      <div class="donate-info">
-          Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
-      </div>
-    </div>
-  </div>
+  <p class="donate-text">
+    Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
+  </p>
+</div>
+
 </div>
 
 [//]: # "Footer"
diff --git a/pages/dev/test-site/main-page/main.styl b/pages/dev/test-site/main-page/main.styl
index 1620dea6..953b89ef 100644
--- a/pages/dev/test-site/main-page/main.styl
+++ b/pages/dev/test-site/main-page/main.styl
@@ -1,7 +1,8 @@
 html, body
   color: #E0E1E6
-  background-color: white
+  background-color: white 
   margin: 0
+  margin-top: 35px
 
 #total
   background-color: white
@@ -15,12 +16,13 @@ a:hover
 .nohighlight
   color: white
 
-.start
-  width: 100%
+.start-card
+  margin-top: 75px
+  margin-top: 75px
   display: flex;
   justify-content: center;
   align-items: center;  
-  height: 95vh
+  height: 35vh
   color: white
 
   li
@@ -32,21 +34,25 @@ a:hover
     display: inline-block
     width: 100%
 
+  .start-header
+    text-shadow: black 1px 0 10px
+    text-align: center
+
 .text
   position:absolute
   z-index: 100
   padding: 0 20px
   display: grid
+  width: 50%
   margin: auto
 
-.cover-image
+.cover-img
   position:absolute
   z-index:5
-  left:0px
-  top:0px
-  height: 100vh
-  width: 100%
+  height: 35vh
+  width: 60%
   object-fit: cover
+  border-radius: 10px
 
 .sea-image
   position:absolute
@@ -65,10 +71,13 @@ a:hover
   text-align: center
 
 .big-text
+  display: grid
+  margin: auto
   font-family: Helvetica, sans-serif
   font-weight: 900
   font-size: 20px
   text-shadow: black 1px 0 10px
+  color: white
 
 .top-stat, .top-stat-label
   display: grid
@@ -83,6 +92,7 @@ a:hover
   display: grid
   grid-template-columns: 25% 25% 25% 25%
   margin-bottom: 3%
+  margin-top: 30px
   text-shadow: black 1px 0 10px;
 
   .stat
@@ -105,6 +115,9 @@ a:hover
   text-decoration: none;
   border-radius: 12px;
 
+  a 
+    color: white
+
 .btn:hover 
   background-color: #545151 
 
@@ -112,7 +125,7 @@ a:hover
   font-size: 20px
   padding: 0px
   display: grid
-  grid-template-columns: 33.33% 33.33% 33.33%
+  grid-template-columns: 50% 50%
 
   a 
     color: white
@@ -121,12 +134,6 @@ a:hover
   a:hover
     color: white
 
-.rockd-png
-  width: 22px
-  padding-right: 4px
-  float: left
-  padding-top: 5px
-
 .country_container 
   height: 100vh
 
@@ -168,12 +175,10 @@ a:hover
   padding: 20vh 0
   text-align: center
 
-.header 
-  margin: 0 20%
-  text-shadow: black 1px 0 10px
-
 #main-title
   display: inline-block
+  margin-bottom: 0
+  padding-bottom: 10px
 
 .version
   display: inline-block
@@ -194,54 +199,13 @@ a:hover
 #api
   height: 100vh
 
-.donate-container
-  height: 80vh
-
-.donate-title
-  a 
-    color:white
-  a:hover
-    text-decoration: none
-
-  color: white
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  font-family: "Maven Pro", sans-serif;
-  padding: 0
-
-.donate-left
-  float: left
-  width: 50%
-  height: 80vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-.donate-right
-  float: right
-  width: 50%
-  height: 80vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-.donate-info
-  background: rgba(255,255,255,0.6);
-  padding: 25px
-  color: black
-  width: 80%
-  font-size: 18px
-
-  a
-    color: black
-    font-weight: bold
-    text-decoration: none
-
 .donate-img
   position:absolute
   z-index:5
-  height: 80vh
+  height: 30vh
   width: 100%
   object-fit: cover
+  border-radius: 10px
 
 .app-header
   margin: 0
@@ -386,16 +350,10 @@ a:hover
   border-bottom: 1px solid #E0E1E6;
   position: absolute;
 
-.text-donate
-  position:absolute
-  z-index: 100
-  padding: 0 20px
-
-
 .location
   display: grid;
-  grid-template-columns: 25% 25% 25% 25%;
-  grid-template-rows: 40vh;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 30vh;
 
 .t1
   margin-left: 10%
@@ -428,29 +386,198 @@ a:hover
   display: grid
   margin: auto
 
-.temp-class
+.card-set
   display: grid
-  grid-template-columns: 40% 60%
+  grid-template-columns: 50% 50%
   grid-template-rows: 30vh
+  width: 60%
+  margin: 0 20%
 
-  
+.basic-card
+  background-color: white
+  width: 95%
+  margin: 2% 0
+  text-align: center
+  padding: 0 25px
+  padding-bottom: 30px
+  height: 25vh
+
+  .link-title 
+    font-size: 25px
+    
+    a
+      color: black
+
+  p
+    color: black
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+
+.right-card
+  margin-left: 5%
+
+.basic-card2
+  margin: 0
   .link-title
-    display: grid
-    margin: auto
-    margin-left: 20%  
+    padding-left: 10%
+
+    font-size: 35px
+
+    a
+      color: black
+
+  p
+    padding-left: 5%
+
+    color: black
+    font-size: 16px
+
+.card
+  background-color: white
+  padding: 0
+  margin: 2% 20%
+  width: 60%
+
+  .link-title 
     font-size: 35px
     
     a
       color: black
 
+  p
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+
+.location-card
+  display: grid
+  grid-template-rows: 30vh
+  
+  p
+    color: black
+    font-size: 16px
+
+  h1
+    color: black
+
+  .top
+    border-radius: 10px 0 0 0
+  
+  .bottom
+    border-radius: 0 0 10px 0
+
+.card-image
+  height: 30vh
+  width: 100%
+
+.location-text 
+  h1
+    diplay: grid
+    margin: auto
+    margin-bottom: 1%
   p
     display: grid
     margin: auto
-    margin-left: 10% 
-    margin-right: 10%
+    margin-top: 1%
+
+  height: 30vh
+
+.map-card
+  p
     color: black
-    font-size: 16px
+    border-radius: 10px
+    padding: 30px
+
+  a 
+    color: white
+
+.donate-card
+  height: 30vh
+  position:relative
+
+  display: grid
+  margin: auto
+  margin-bottom: 50px
+
+.donate-text
+  position:relative
+  z-index: 100
+  width: 80%
+  display: grid
+  margin: auto
+  padding: 25px
+  background: rgba(255,255,255,0.7);
+  color: black
+  font-size: 18px
+  border-radius: 10px
+
+  a
+    color: black
+    font-weight: bold
+    text-decoration: none
+
+  p
+    margin-bottom: 0
+
+.caption-donate
+  display: grid
+  margin: auto
+  padding: 25px
+  margin-right: 25px
+  background: rgba(255,255,255,0.6);
+  color: black
+  font-size: 18px
+
+  a
+    color: black
+    font-weight: bold
+    text-decoration: none
+
+  p
+    margin-bottom: 0
 
+.header
+  width: 60%
+  margin-left: 20%
+
+  h1
+    color: black
+    font-size: 60px
+
+  h2
+    color: black
+    margin-top: 0
+
+.map-element
+  font-size: 20px
+
+  a 
+    color: #015eab
+
+.mobile-card
+  height: 10vh
+  display: grid
+  grid-template-columns: 10vh 80%
 
+  a
+    color: black
 
-  
\ No newline at end of file
+  h1
+    display: grid
+    margin: auto
+    font-size: 50px
+
+.rockd-png
+  height: 10vh
+  width: 10vh
+  padding-top: 0
+  border-radius: 10px 0 0 10px
+
+.search-card
+  h1 
+    display: grid
+    margin: auto
+    font-size: 50px
\ No newline at end of file
diff --git a/pages/dev/test-site/main.styl b/pages/dev/test-site/main.styl
index 67dc178e..09b19f51 100644
--- a/pages/dev/test-site/main.styl
+++ b/pages/dev/test-site/main.styl
@@ -2,11 +2,14 @@
   position: fixed
   width: 100%
   z-index: 10000
-
+  top: 0px
+  left: 0px
+  
   ul 
     list-style-type: none;
     margin: 0;
     padding: 0;
+    padding-left: 20%
     overflow: hidden;
     background-color: #015eab;
 
diff --git a/pages/dev/test-site/people/main.styl b/pages/dev/test-site/people/main.styl
index b83cc223..df81e074 100644
--- a/pages/dev/test-site/people/main.styl
+++ b/pages/dev/test-site/people/main.styl
@@ -6,7 +6,7 @@ a:hover
     text-decoration: none
 
 .big
-    color: #E0E1E6
+    color: black
     text-align: left
     font-size: 75px
     font-family: "Maven Pro", sans-serif
@@ -15,11 +15,29 @@ a:hover
     padding-top: 100px
 
 .line
-  border-bottom: 1px solid #E0E1E6;
+  border-bottom: 1px solid black
   width: 60%
   margin: 0 20% 
 
 
+.card
+  background-color: white
+  padding: 0
+  margin: 2% 20%
+  width: 60%
+
+  .link-title 
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+
 .people
     color: white
 
@@ -47,6 +65,7 @@ a:hover
     background-color: rgba(0, 0, 0, 0.2)
     bottom:0
     right: 0
+    border-radius: 0 0 10px 0
 
     a
         color: white
@@ -60,6 +79,7 @@ a:hover
     height: 30vh
     object-fit: cover
     width: 100%
+    border-radius: 10px
 
 n
     font-size: 25px
@@ -77,4 +97,4 @@ e
 
 .subtitle
   margin-left: 20%
-  color: #E0E1E6;
\ No newline at end of file
+  color: black;
\ No newline at end of file
diff --git a/pages/dev/test-site/publications/+Page.mdx b/pages/dev/test-site/publications/+Page.mdx
index 95dd7828..c7c1e19d 100644
--- a/pages/dev/test-site/publications/+Page.mdx
+++ b/pages/dev/test-site/publications/+Page.mdx
@@ -11,7 +11,7 @@ import { MacrostratIcon } from "~/components";
 <Navbar></Navbar>
 
 [//]: # "Publications"
-<div id="publications">
+<div class="card" id="publications">
   <h1 id="pub-title" class="big">Publications</h1>
   <p class="blurb">literature utilizing Macrostrat</p>
   <div class="pub-line"></div>
diff --git a/pages/dev/test-site/publications/main.styl b/pages/dev/test-site/publications/main.styl
index 7f2d8942..6e87a368 100644
--- a/pages/dev/test-site/publications/main.styl
+++ b/pages/dev/test-site/publications/main.styl
@@ -19,12 +19,13 @@ p
     color: #E0E1E6
 
 .pub-line
-  width: 60%;
+  width: 55%;
   border-bottom: 1px solid #E0E1E6;
   position: absolute;
 
 #publications 
-  padding: 50px 20%
+  padding: 0 2.5%
+  padding-bottom: 35px
 
 #pub-title 
   text-align: left
@@ -32,6 +33,7 @@ p
   position: relative
   padding-bottom: 0
   margin-bottom: 0
+  padding-top: 25px
 
 .pub-list
   padding-top: 10px
@@ -49,4 +51,23 @@ p
     counter-increment: pub-counter
 
 .blurb
-  font-size: 15px
\ No newline at end of file
+  font-size: 15px
+
+.card
+  background-color: white
+  padding: 0
+  margin: 2% 20%
+  width: 60%
+  margin-top: 100px
+
+  .link-title 
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
\ No newline at end of file