diff --git a/deps/cesium-martini b/deps/cesium-martini
new file mode 160000
index 000000000..88779c309
--- /dev/null
+++ b/deps/cesium-martini
@@ -0,0 +1 @@
+Subproject commit 88779c309961a49df791d70efe9cc42adccb61e9
diff --git a/deps/cesium-viewer b/deps/cesium-viewer
new file mode 160000
index 000000000..eb4059725
--- /dev/null
+++ b/deps/cesium-viewer
@@ -0,0 +1 @@
+Subproject commit eb4059725eb55454626f643179f7f3b189f23353
diff --git a/pages/columns/+Page.ts b/pages/columns/+Page.ts
index ce171f43a..a30171c31 100644
--- a/pages/columns/+Page.ts
+++ b/pages/columns/+Page.ts
@@ -1,8 +1,10 @@
-import h from "@macrostrat/hyper";
 import { ContentPage } from "~/layouts";
 import { PageHeader, Link, AssistantLinks, DevLinkButton } from "~/components";
-import { AnchorButton, Tag } from "@blueprintjs/core";
+import { Divider, AnchorButton, Tag, Card, Collapse, Icon } from "@blueprintjs/core";
 import { useData } from "vike-react/useData";
+import { useState } from "react";
+import h from "./main.module.scss";
+import { log } from "console";
 
 export function Page(props) {
   return h(ColumnListPage, props);
@@ -10,47 +12,95 @@ export function Page(props) {
 
 function ColumnListPage({ title = "Columns", linkPrefix = "/" }) {
   const { columnGroups } = useData();
-  return h(ContentPage, [
+
+  console.log("columnGroups", columnGroups);
+
+  const [columnInput, setColumnInput] = useState("");
+  const filteredGroups = columnGroups.filter((group) => {
+    const name = group.name.toLowerCase();
+    const columns = group.columns.map((col) => col.col_name.toLowerCase());
+    const input = columnInput.toLowerCase();
+    return name.includes(input) || columns.some((col) => col.includes(input));
+  });
+
+  const handleInputChange = (event) => {
+    setColumnInput(event.target.value.toLowerCase());
+  }
+  
+  return h('div.column-list-page', [
     h(AssistantLinks, [
       h(AnchorButton, { href: "/projects", minimal: true }, "Projects"),
+      h(Card, [
+        h('div.search-bar', [
+          h(Icon, { icon: "search" }),
+          h('input', {
+            type: "text",
+            placeholder: "Search columns",
+            onChange: handleInputChange 
+          }),
+        ])
+      ]),      
       h(DevLinkButton, { href: "/columns/correlation" }, "Correlation chart"),
     ]),
-    h(PageHeader, { title }),
-    columnGroups.map((d) => h(ColumnGroup, { data: d, key: d.id, linkPrefix })),
+    h(ContentPage, [
+      h(PageHeader, { title }),
+      h('div.column-groups', 
+        filteredGroups.map((d) => h(ColumnGroup, { data: d, key: d.id, linkPrefix, columnInput }) ),
+      )
+    ])
   ]);
 }
 
-function ColumnGroup({ data, linkPrefix }) {
+function ColumnGroup({ data, linkPrefix, columnInput }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const filteredColumns = data.columns.filter((col) => {
+    const name = col.col_name.toLowerCase();
+    const input = columnInput.toLowerCase();
+    return name.includes(input);
+  });
+
+  if (filteredColumns?.length === 0) return null;
+
   const { id, name, columns } = data;
-  return h("div.column-group", [
-    h("h2.column-group", name),
-    h(
-      "ul",
-      columns.map((data) =>
-        h(ColumnItem, { data, key: data.col_id, linkPrefix })
-      )
+  return h(Card, { className: 'column-group', onClick : () => setIsOpen(!isOpen) }, [
+    h('div.column-group-header', [
+      h("h2.column-group-name", name),
+      h(Icon, { 
+        icon: isOpen ? "chevron-up" : "chevron-down",
+      }),
+    ]),
+    h(Collapse, { isOpen }, 
+      h(
+        "div.column-list", [
+          h(Divider),
+          h('div.column-table', [
+            h("div.column-row.column-header", [
+              h("span.col-id", "Id"),
+              h("span.col-name", "Name"),
+              h("span.col-status", "Status"),
+              h("span.col-status", "Group"),
+            ]),
+            h(Divider),
+            filteredColumns.map((data) =>
+              h(ColumnItem, { data, key: data.col_id, linkPrefix })
+            )
+          ]),
+      ])
     ),
   ]);
 }
 
 function ColumnItem({ data, linkPrefix = "/" }) {
-  const { col_id, col_name } = data;
+  const { col_id, col_name, status, col_group_id } = data;
   const href = linkPrefix + `columns/${col_id}`;
-  return h("li", [
-    h("span.col-id", {}, col_id),
-    " ",
-    h(Link, { href }, [col_name]),
-    h.if(data.status == "in process")([
-      " ",
-      h(Tag, { minimal: true }, "in process"),
-    ]),
-    h.if(data.status == "obsolete")([
-      " ",
-      h(Tag, { minimal: true, intent: "danger" }, "obsolete"),
-    ]),
-    h.if(data?.t_units == 0)([
-      " ",
-      h(Tag, { minimal: true, intent: "warning" }, "empty"),
-    ]),
+  return h("div.column-row", [
+    h("span.col-id", "#" + col_id),
+    h(Link, { className: 'col-link', href }, [col_name]),
+    h("span", { className: status === "active" ? 'active' : 'inprocess'},  UpperCase(status)),
+    h("span.col-group", "#" + col_group_id),
   ]);
 }
+
+function UpperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
\ No newline at end of file
diff --git a/pages/columns/main.module.scss b/pages/columns/main.module.scss
new file mode 100644
index 000000000..2d651f96d
--- /dev/null
+++ b/pages/columns/main.module.scss
@@ -0,0 +1,67 @@
+.column-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+h2 {
+    margin: 0;
+}
+
+.column-group {
+    cursor: pointer;
+}
+
+.column-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.search-bar {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    width: 100%;
+    padding: 0.5em;
+    border-radius: 0.2em;
+    border: none;
+    background-color: var(--background-color);
+    color: var(--text-emphasized-color);
+    font-size: 1em;
+    margin: 3px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0.2em var(--text-emphasized-color);
+    }
+  }
+}
+
+.column-row {
+    display: grid;
+    grid-template-columns: 10% 60% 20% 10%
+}
+
+.active {
+    background-color: green;
+    color: white;
+    place-self: end start;
+    padding: 0.5em;
+    margin: .2em 0;
+    border-radius: 0.2em;  
+    font-weight: bold;
+}
+
+.inprocess {
+    background-color: yellow;
+    color: black;
+}
+
+.col-id, .col-group, .col-link {
+    margin: auto;
+    margin-left: 0;
+}
\ No newline at end of file
diff --git a/pages/dev/test-site/+Page.client.ts b/pages/dev/test-site/+Page.client.ts
new file mode 100644
index 000000000..c583cee3b
--- /dev/null
+++ b/pages/dev/test-site/+Page.client.ts
@@ -0,0 +1,150 @@
+import { Image, Navbar, Footer, useMacrostratAPI } from "./index";
+import "./main.sass";
+import "./main.styl";
+import h from "@macrostrat/hyper";
+import { PanelCard } from "@macrostrat/map-interface";
+import { LinkCard } from "~/components/cards";
+import { useState } from 'react';
+
+export function Page() {
+    const result = useMacrostratAPI('/stats?all')?.success.data
+
+    if(!result) {
+      return h('div.loading')
+    }
+
+    let columns = 0;
+    let units = 0;
+    let polygons = 0;
+
+    result.forEach(project => {
+      columns += project.columns;
+      units += project.units;
+      polygons += project.t_polys;
+    });
+
+    const NorthAmerica = result.filter(project => project.project === 'North America')[0];
+    const Caribbean = result.filter(project => project.project === 'Caribbean')[0];
+    const NewZealand = result.filter(project => project.project === 'New Zealand')[0];
+    const DeepSea = result.filter(project => project.project === 'Deep Sea')[0];
+
+    return h('div.total', [
+        h(Navbar),
+
+        h('div.start', [
+            h(Image, { className: "back-img cover-image", src: 'cover_large.jpg' }),
+            h('div.text', [
+              h('div.header', {}, [
+                  h('h1.main-title','Macrostrat'),
+                  h('h2.version','v2')
+              ]),
+              h('div.stats', {}, [
+                  h('div.stat', {}, [
+                    h('span.top-stat#n_columns', {}, formatNumber(columns)),
+                    h('span.top-stat-label', {}, 'Regional Rock Columns')
+                  ]),
+                  h('div.stat', {}, [
+                    h('span.top-stat#n_units', {}, formatNumber(units)),
+                    h('span.top-stat-label', {}, 'Rock Units')
+                  ]),
+                  h('div.stat', {}, [
+                    h('span.top-stat#n_polys', {}, formatNumber(polygons)),
+                    h('span.top-stat-label', {}, 'Geologic Map Polygons')
+                  ]),
+                  h('div.stat', {}, [
+                    h('span.top-stat#n_names', {}, formatNumber(result.length)),
+                    h('span.top-stat-label', {}, 'Projects')
+                  ])
+              ]),
+              h('p.big-text', {}, 'A platform for geological data exploration, integration, and analysis'),
+              h('div.buttons', {}, [
+                  h(LinkCard, { title: 'Search', href: '/sift/#/' }),
+                  h(LinkCard, { title: "Geologic Map", href: '/map/#3/40.78/-94.13' }, [
+                    /*h('p', { className: 'long'}, [
+                      h('div.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 ',
+                          h('a', { href: 'https://xdd.wisc.edu', target: '_blank' }, 'xDD'),
+                          ' (formly GeoDeepDive).'
+                      ]),
+                      h('div.temp', {}, [
+                          'Are you affiliated with a state or national geologic survey? ',
+                          h('a', { href: 'mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration' }, 'Get in touch'),
+                          ' with us - we\'d love to collaborate and help publicize your maps!'
+                      ]),
+                      h('div.temp', {}, [
+                          'Get started by ',
+                          h('a', { href: '/map' }, 'exploring the map'),
+                          ' or ',
+                          h('a', { href: '/map/sources' }, 'taking a look at'),
+                          ' which maps are currently a part of Macrostrat.'
+                      ])
+                    ]),*/
+                  ]),
+                  h(LinkCard, { title: 'Projects', href: '/projects'}, [
+                    // h('p', 'Projects for specific regions or geological problems')
+                  ]),
+                  h(LinkCard, { title: 'Geologic Lexicon', href: '/lex'}, [
+                    // h('p', 'Geologic units and data dictionaries')
+                  ]),
+                  h(LinkCard, { title: 'Maps', href: '/maps'}, [
+                    // h('p', "The spatial footprint of rocks on the Earth\'s surface")
+                  ]),
+                  h(LinkCard, { title: 'Columns', href: '/columns'}, [
+                    // h('p', 'Stratigraphic and geological columns showing the organization of rocks in time')
+                  ]),
+                  h(LinkCard, { title: h('div.rockd-button-container', {}, [
+                          h(Image, { className: "rockd-png", src: 'rockd.jpg', width: '22px' }),
+                          h('a', { href: 'https://rockd.org', target: '_blank' }, 'Go mobile')
+                      ]), href: 'https://rockd.org'}, [
+                  ]),
+              ])
+            ])
+        ]),
+
+        h('div.locations', [
+            h(Image, { className: "location-img", src: 'north_america_med.jpg' }),
+            h('div.location-text', {}, [
+                h('h1', {}, 'North America'),
+                h('div.caption', {}, formatNumber(NorthAmerica.packages) + ' packages. ' + formatNumber(NorthAmerica.units) + ' units. ' + formatNumber(NorthAmerica.pbdb_collections) + ' collections.')
+            ]),
+            h(Image, { className: "location-img", src: 'caribbean_new_medium.jpg' }),
+            h('div.location-text', {}, [
+                h('h1', {}, 'Caribbean'),
+                h('div.caption', {}, formatNumber(Caribbean.packages) + ' packages. ' + formatNumber(Caribbean.units) + ' units. ' + formatNumber(Caribbean.pbdb_collections) + ' collections.')
+            ]),
+            h('div.location-text', {}, [
+                h('h1', {}, 'New Zealand'),
+                h('div.caption', {}, formatNumber(NewZealand.packages) + ' packages. ' + formatNumber(NewZealand.units) + ' units. ' + formatNumber(NewZealand.pbdb_collections) + ' collections.')            ]),
+            h(Image, { className: "location-img", src: 'new_zealand_new_medium.jpg' }),
+            h('div.location-text', {}, [
+                h('h1', {}, 'Deep Sea'),
+                h('div.caption', {}, formatNumber(DeepSea.packages) + ' packages. ' + formatNumber(DeepSea.units) + ' units. ' + formatNumber(DeepSea.pbdb_collections) + ' collections.')
+            ]),
+            h(Image, { className: "location-img", src: 'deep_sea_new_medium.jpg' }),
+            
+        ]),
+
+        Donate,
+        h(Footer),
+    ])
+}
+
+const Donate = 
+  h('div.donate-container', {}, [
+    h(Image, { className: "back-img donate-img", src: 'donate_medium.jpg' }),
+    h('div.text-donate', [
+      h('a', { href: 'https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D', target: '_blank' }, [
+        h('h1.title.donate-title', 'Donate Now'),
+      ]),
+      h('div.donate-info', {}, [
+        'Grant funding, principally from the ',
+        h('a', { href: 'http://www.nsf.gov', target: '_blank' }, 'U.S. National Science Foundation'),
+        ', 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!'
+      ])
+    ])
+  ]);
+
+
+  function formatNumber(num) {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  } 
\ No newline at end of file
diff --git a/pages/dev/test-site/about/+Page.client.ts b/pages/dev/test-site/about/+Page.client.ts
new file mode 100644
index 000000000..9e7e542c3
--- /dev/null
+++ b/pages/dev/test-site/about/+Page.client.ts
@@ -0,0 +1,125 @@
+import { Image, Navbar, Footer } from "../index";
+import "./main.styl";
+import "../main.styl";
+import h from "@macrostrat/hyper";
+
+export function Page() {
+    return h('div', [
+    h(Navbar),
+    h('div.body', [  
+        h('h1.title-about', 'About Macrostrat'),      
+        h('div.line'),
+        h('div.table', [
+            h('dv.table-row', [
+                h('p', 'Summary'),
+                h('p', 'Macrostrat is a web-based platform for the visualization and analysis of geologic data.'),
+            ]),
+            h('div.table-row', [
+                h('p', 'License'),
+                h('p', 'All data are provided under a Creative Commons Attribution 4.0 International license'),
+            ]),
+            h('div.table-row', [
+                h('p', 'Citation'),
+                h('p', 'In presentations: Acknowledge Macrostrat by name. You may also include any of the Macrostrat logos accessible on this webpage. In publications: Acknowledge Macrostrat as the source of any information or data. In publications, you may cite our most recent infrastructure paper, Peters et al. (2018). In addition, you should also include citations to the original references associated with the data set that was used. These references are accessible from the API. If you would like your paper listed in the official publications, please contact us and we will provide a citation and link.'),
+            ]),     
+            h('div.table-row', [
+                h('p', 'Collaboration'),
+                h('p', 'Our small team has worked hard to compile, format, and make data available via Macrostrat. We strongly encourage and welcome active collaborations, both scientific and geoinformatic. All data are provided freely on under a CC-BY-4.0 license.'),
+            ]),
+            h('div.table-row', [
+                h('p', 'Funding'),
+                h('p', 'Major Macrostrat data infrastructure development was supported by the US National Science Foundation (EAR-1150082, ICER-1440312), with ongoing support for data acquisition supported by NSF EAR-1948843 and ICER-1928323. Continuous and ongoing support has also been provided by the UW-Madison Department of Geoscience. If you use Macrostrat and like what we do, please consider helping out with a donation. Every contribute helps us to maintain infrastructure and keep improving.')
+            ]),   
+        ]),
+
+        h('div#api', [
+            h('div.api-circle', [
+                h('div#api-circle-text', 'API')
+            ]),
+            h('div#api-text', [
+                'All data contained in the Macrostrat database are freely available via our Application Programming Interface (API), which provides a ',
+                'convenient way to retrieve data for analysis or application creation. For more information head over to the ',
+                h('a', { href: '/api' }, 'API root'),
+                ' to explore available routes.'
+            ])
+        ]),
+
+        h('div.apps', [
+            h('h1.big-apps.app-header', 'Built with Macrostrat'),
+            h('div.items', [
+
+                h('a', { href: '/sift' }, [
+                h('div.app-box', [
+                    h(Image, { src: 'logo_red.png' }),
+                    h('div.app-background-text', [
+                    'Sift',
+                    h('p.blurb', 'Explore Macrostrat (by Macrostrat)')
+                    ])
+                ])
+                ]),
+
+                h('a', { href: 'https://rockd.org' }, [
+                h('div.app-box', [
+                    h(Image, { src: 'rockd.jpg' }),
+                    h('div.app-background-text', [
+                    'Rockd',
+                    h('p.blurb', 'A mobile field book, Macrostrat style.')
+                    ])
+                ])
+                ]),
+
+                h('a', { href: '/map' }, [
+                h('div.app-box', [
+                    h(Image, { src: 'burwell.png' }),
+                    h('div.app-background-text', [
+                    'Map',
+                    h('p.blurb', "Integrating the world's geologic maps (by Macrostrat)")
+                    ])
+                ])
+                ]),
+
+                h('a', { 
+                href: 'https://itunes.apple.com/us/app/mancos/id541570878?mt=8', 
+                target: '_blank', 
+                rel: 'noopener noreferrer' 
+                }, [
+                h('div.app-box', [
+                    h(Image, { src: 'mancos.jpg' }),
+                    h('div.app-background-text', [
+                    'Mancos',
+                    h('p.blurb', 'Explore Macrostrat and PBDB in iOS (by Hunt Mountain Software)')
+                    ])
+                ])
+                ]),
+
+                h('a', { 
+                href: 'http://fc.umn.edu/', 
+                target: '_blank', 
+                rel: 'noopener noreferrer' 
+                }, [
+                h('div.app-box', [
+                    h(Image, { src: 'foc.png' }),
+                    h('div.app-background-text', [
+                    'FOC',
+                    h('p.blurb', 'A glass bottom jet (by Amy Myrbo, Shane Loeffler et al.)')
+                    ])
+                ])
+                ]),
+
+                h('a', { href: 'https://github.com/UW-Macrostrat/node-api-template' }, [
+                h('div.app-box', [
+                    h(Image, { src: 'api.png' }),
+                    h('div.app-background-text.app-background-text-small', [
+                    'API Template',
+                    h('p.blurb', 'Foundation of all Macrostrat services (by Macrostrat)')
+                    ])
+                ])
+                ])
+
+            ])
+            ]),
+
+        h(Footer)
+    ])
+])
+}
\ No newline at end of file
diff --git a/pages/dev/test-site/about/+Page.mdx b/pages/dev/test-site/about/Page.mdx
similarity index 82%
rename from pages/dev/test-site/about/+Page.mdx
rename to pages/dev/test-site/about/Page.mdx
index a00f9e88c..63a0b8fd1 100644
--- a/pages/dev/test-site/about/+Page.mdx
+++ b/pages/dev/test-site/about/Page.mdx
@@ -43,7 +43,7 @@ import { MacrostratIcon } from "~/components";
       <b>In presentations:</b> Acknowledge Macrostrat by name. You may also include any of the Macrostrat logos accessible on this webpage.
       \
       \
-      <b>In publications:</b> Acknowledge Macrostrat as the source of any information or data. In publications, you may cite our most recent infrastructure paper, <a href="https://doi.org/10.1029/2018GC007467" target="_blank">Peters et al. (2018)</a>. In addition, you should also include citations to the original references associated with the data set that was used. These references are accessible from the API. If you would like your paper listed in the official publications, please contact us and we will provide a citation and link.
+      In publications: Acknowledge Macrostrat as the source of any information or data. In publications, you may cite our most recent infrastructure paper, <a href="https://doi.org/10.1029/2018GC007467" target="_blank">Peters et al. (2018)</a>. In addition, you should also include citations to the original references associated with the data set that was used. These references are accessible from the API. If you would like your paper listed in the official publications, please contact us and we will provide a citation and link.
     </div>
   </div>
 
@@ -66,14 +66,6 @@ import { MacrostratIcon } from "~/components";
   </div>
 </div>
 
-[//]: # "API"
-<div id="api">
-  <div class="api-circle"><div id="api-circle-text">API</div></div>
-  <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>
-
-<Image className="rock-border" src="rocks-border.jpg"></Image>
-
 [//]: # "Apps"
 <div id="apps">
   <h1 class="big-apps app-header">Built with Macrostrat</h1>
diff --git a/pages/dev/test-site/about/main.styl b/pages/dev/test-site/about/main.styl
index f0d36dff2..e099cc67a 100644
--- a/pages/dev/test-site/about/main.styl
+++ b/pages/dev/test-site/about/main.styl
@@ -2,11 +2,14 @@
     color: black
     background-color: white
 
-#body
+h1
+  margin: 0
+
+.body
   background-color: white
-  padding: 0 20%
+  padding-top: 5vh
 
-#apps
+.apps
   padding: 75px 0    
 
 a:hover
@@ -25,6 +28,11 @@ a:hover
   position: relative
   color: black
 
+  img
+    height: 80%
+    margin: auto
+    margin-left: 6%
+
 .app-background-text
   margin: auto
   padding-right: 20px
@@ -36,10 +44,7 @@ a:hover
 .blurb
     font-size: 15px
 
-.app-img
-  height: 80%
-  margin: auto
-  margin-left: 6%
+
 
 .big-apps
   font-size: 72px
@@ -51,10 +56,13 @@ a:hover
   color: white
 
 
-.big
+.title-about
   font-size: 72px
   font-family: "Maven Pro", sans-serif;
-  text-align: center
+  text-align: left
+  margin-left: 20%
+  padding: 0
+
 
 #api  
   position: relative
@@ -114,11 +122,17 @@ a:hover
   padding-bottom: 0
 
 .line
-  width: 100%;
-  border-bottom: 1px solid #E0E1E6;
+  width: 60%;
+  border-bottom: 1px solid black;
   position: absolute;
 
 .rock-border
   width: 100%
   margin: 0
   padding: 0
+
+.table
+  margin: 30px 20%
+  .table-row
+    display: grid
+    grid-template-columns: 40% 60%
diff --git a/pages/dev/test-site/donate/+Page.client.ts b/pages/dev/test-site/donate/+Page.client.ts
new file mode 100644
index 000000000..8f2f3335c
--- /dev/null
+++ b/pages/dev/test-site/donate/+Page.client.ts
@@ -0,0 +1,26 @@
+import { Image, Navbar, Footer, useMacrostratAPI } from "../index";
+import "./main.sass";
+import "../main.styl";
+import h from "@macrostrat/hyper";
+import { PanelCard } from "@macrostrat/map-interface";
+import { useState } from 'react';
+
+export function Page() {
+  return h('div.total', [
+    h(Navbar),
+    h('div.donate-container', {}, [
+      h(Image, { className: "back-img donate-img", src: 'donate_medium.jpg' }),
+      h('div.text-donate', [
+        h('a', { href: 'https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D', target: '_blank' }, [
+          h('h1.title.donate-title', 'Donate Now'),
+        ]),
+        h('div.donate-info', {}, [
+          'Grant funding, principally from the ',
+          h('a', { href: 'http://www.nsf.gov', target: '_blank' }, 'U.S. National Science Foundation'),
+          ', 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!'
+        ])
+      ])
+    ]),
+    h(Footer)
+  ]);
+} 
\ No newline at end of file
diff --git a/pages/dev/test-site/donate/+Page.mdx b/pages/dev/test-site/donate/+Page.mdx
deleted file mode 100644
index 9ed280a2b..000000000
--- a/pages/dev/test-site/donate/+Page.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { PageHeader } from "~/components";
-import { PageBreadcrumbs } from "~/components";
-import { Image, Navbar, Footer } from "../index";
-import "./main.styl";
-import "../main.styl";
-import { MacrostratIcon } from "~/components";
-
-[//]: # "Nav Bar"
-<Navbar></Navbar>
-
-[//]: # "Donate"
-<div class="donate-container" id="donate">
-  <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>
-  </div>
-</div>
-
-[//]: # "Footer"
-<Footer></Footer>
diff --git a/pages/dev/test-site/donate/main.styl b/pages/dev/test-site/donate/main.sass
similarity index 67%
rename from pages/dev/test-site/donate/main.styl
rename to pages/dev/test-site/donate/main.sass
index f2d090bf7..5661962bb 100644
--- a/pages/dev/test-site/donate/main.styl
+++ b/pages/dev/test-site/donate/main.sass
@@ -7,12 +7,12 @@ a:hover
 
 .big
   font-size: 72px
-  font-family: "Maven Pro", sans-serif;
+  font-family: "Maven Pro", sans-serif
   text-align: center
 
 p 
-  margin-bottom: 10px;
-  margin-top: 0;
+  margin-bottom: 10px
+  margin-top: 0
 
 .donate-container
   height: 80vh
@@ -20,7 +20,7 @@ p
 .title
   margin: 0
   font-size: 72px
-  font-family: "Maven Pro", sans-serif;
+  font-family: "Maven Pro", sans-serif
   padding: 20vh 0
   text-align: center
   
@@ -31,28 +31,28 @@ p
     text-decoration: none
 
   color: white
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  font-family: "Maven Pro", sans-serif;
+  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;
+  display: flex
+  justify-content: center
+  align-items: center
 
 .donate-right
   float: right
   width: 50%
   height: 80vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  display: flex
+  justify-content: center
+  align-items: center
 
 .donate-info
-  background: rgba(255,255,255,0.6);
+  background: rgba(255,255,255,0.6)
   padding: 25px
   color: black
   width: 80%
diff --git a/pages/dev/test-site/index.ts b/pages/dev/test-site/index.ts
index 29a075f39..a8e90aa50 100644
--- a/pages/dev/test-site/index.ts
+++ b/pages/dev/test-site/index.ts
@@ -1,5 +1,7 @@
 import h from "@macrostrat/hyper";
 import { MacrostratIcon } from "~/components";
+import { SETTINGS } from "@macrostrat-web/settings";
+import { useAPIResult } from "@macrostrat/ui-components";
 
 export function Image({ src, className, width, height }) {
     const srcWithAddedPrefix = "https://storage.macrostrat.org/assets/web/main-page/" + src;
@@ -8,36 +10,32 @@ export function Image({ src, className, width, height }) {
 
 export function Navbar() {
     return h("div", {className: "nav"}, [
-        h("ul", [
-            h("li", h("a", {href: "/dev/test-site/main-page"}, h(MacrostratIcon))),
-            h("li", h("a", {href: "/dev/test-site/about"}, "About")),
-            h("li", h("a", {href: "/dev/test-site/publications"}, "Publications")),
-            h("li", h("a", {href: "/dev/test-site/people"}, "People")),
-            h("li", h("a", {href: "/dev/test-site/donate"}, "Donate"))
-        ])
+            h("a", {className: "nav-link", href: "/dev/test-site/"}, h(MacrostratIcon)),
+            h("a", {href: "/dev/test-site/about"}, "About"),
+            h("a", {href: "/dev/test-site/publications"}, "Publications"),
+            h("a", {href: "/dev/test-site/people"}, "People"),
+            h("a", {href: "/dev/test-site/donate"}, "Donate"),
     ]);
 }
 
 export function Footer() {
     return h("div", {className: "footer"}, [
         h("div", {className: "footer-container"}, [
-            h("div", {className: "col-sm-4"}, [
+            h("div", {className: "footer-text-container"}, [
                 h(Image, {className: "logo_white", src: "logo_white.png", width: "100px"}),
-                h("p", {className: "f1-text"}, [
+                h("p", {className: "footer-text"}, [
                     "Produced by the ",
                     h("a", {href: "http://strata.geology.wisc.edu", target: "_blank"}, "UW Macrostrat Lab"),
                     h("a", {href: "https://github.com/UW-Macrostrat", target: "_blank"}, h(Image, {className: "git_logo", src: "git-logo.png", width: "18px"})),
                 ])
             ]),
-            h("div", {className: "col-sm-4"}, [
-                h("ul", {className: "footer-nav"}, [
-                    h("li", h("a", {href: "/dev/test-site/about"}, "About")),
-                    h("li", h("a", {href: "/dev/test-site/publications"}, "Publications")),
-                    h("li", h("a", {href: "/dev/test-site/people"}, "People")),
-                    h("li", h("a", {href: "/dev/test-site/donate"}, "Donate"))
-                ])
+            h("div", {className: "footer-nav"}, [
+                h("a", {href: "/dev/test-site/about"}, "About"),
+                h("a", {href: "/dev/test-site/publications"}, "Publications"),
+                h("a", {href: "/dev/test-site/people"}, "People"),
+                h("a", {href: "/dev/test-site/donate"}, "Donate"),
             ]),
-            h("div", {className: "col-sm-4"}, [
+            h("div", {className: "footer-text-container"}, [
                 h(Image, {className: "funding-logo", src: "nsf.png", width: "100px"}),
                 h("div", {className: "funding-line"}, "Current support:"),
                 h("div", {className: "funding-line"}, "EAR-1948843"),
@@ -46,4 +44,8 @@ export function Footer() {
             ])
         ])
     ]);
+}
+
+export function useMacrostratAPI(str) {
+    return useAPIResult(SETTINGS.apiV2Prefix + str)
 }
\ No newline at end of file
diff --git a/pages/dev/test-site/main-page/+Page.mdx b/pages/dev/test-site/main-page/+Page.mdx
deleted file mode 100644
index fe1fad95d..000000000
--- a/pages/dev/test-site/main-page/+Page.mdx
+++ /dev/null
@@ -1,154 +0,0 @@
-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>
-      <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>
-    </div>
-</div>
-
-
-[//]: # "Locations"
-<div id="locations">
-  <div class="location">
-    <Image className="location-img t1" src="north_america_med.jpg"></Image>
-    <div class="location-text">
-      <h1>North America</h1>
-      <div class="caption">243 packages. 798 units. 897 collections.</div>
-    </div>
-    <Image className="location-img t2" src="caribbean_new_medium.jpg"></Image>
-    <div class="location-text">
-      <h1>Carribean</h1>
-      <div class="caption">243 packages. 798 units. 897 collections.</div>
-    </div>
-  </div>
-  <div class="location">
-    <div class="location-text">
-      <h1>New Zealand</h1>
-      <div class="caption">828 packages. 2,168 units. 328 collections.</div>
-    </div>
-    <Image className="location-img t1" src="new_zealand_new_medium.jpg"></Image>
-    <div class="location-text">
-      <h1>Deep Sea</h1>
-      <div class="caption">388 packages. 7,124 units. 0 collections.</div>
-    </div>
-    <Image className="location-img t2" 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>
-</div>
-
-[//]: # "Maps"
-<div class="temp-class" id="maps">
-  <div class="link-title">
-    <a href="/maps"><h1>Maps</h1></a>
-  </div>
-  <p>
-    The spatial footprint of rocks on the Earth's surface
-  </p>
-</div>
-
-[//]: # "Columns"
-<div class="temp-class" id="columns">
-  <div class="link-title">
-    <a href="/columns"><h1>Columns</h1></a>
-  </div>
-  <p>
-    Stratigraphic and geological columns showing the organization of rocks in time
-  </p>
-</div>
-
-[//]: # "Geologic Lexicon"
-<div class="temp-class" id="lexicon">
-  <div class="link-title">
-    <a href="/lex"><h1>Geologic Lexicon</h1></a>
-  </div>
-  <p>
-    Geologic units and data dictionaries
-  </p>
-</div>
-
-[//]: # "Projects"
-<div class="temp-class" id="project">
-  <div class="link-title">
-    <a href="/projects"><h1>Projects</h1></a>
-  </div>
-  <p>
-    Projects for specific regions or geological problems
-  </p>
-</div>
-
-
-[//]: # "Donate"
-<div class="donate-container" id="donate">
-  <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>
-</div>
-
-[//]: # "Footer"
-<Footer></Footer>
-
-</div>
\ No newline at end of file
diff --git a/pages/dev/test-site/main.module.sass b/pages/dev/test-site/main.module.sass
new file mode 100644
index 000000000..cc2618d43
--- /dev/null
+++ b/pages/dev/test-site/main.module.sass
@@ -0,0 +1,73 @@
+.nav
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  z-index: 10000
+  display: flex
+  background-color: #015eab
+
+  a 
+    color: green
+    text-align: center
+    padding: 14px 16px
+    text-decoration: none
+
+
+.footer 
+  width: 100%
+  position: absolute
+  left: 0
+  background-color: #015EAB
+  margin: 0
+
+.footer-container
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  margin: 0 auto
+  width: 60%
+
+.col-sm-4
+  color: white
+  width: 33.333%
+  color: #E0E1E6
+  font-weight: 200
+  text-align: center
+  min-height: 1px
+  padding-left: 15px
+  padding-right: 15px
+  font-weight: bold
+  padding-bottom: 18px
+
+.nav-logo
+  padding-top: 5px
+
+.footer-nav
+  list-style-type: none
+  padding-right: 40px
+
+  li
+    padding: 5px 0
+
+  a
+    color: white
+
+  a:hover
+    text-decoration: none
+
+.git_logo
+  vertical-align: sub
+
+.f1-text
+  display: flex
+  gap: 7px
+  
+  a
+    color: white
+
+#who-made-it
+  padding-top: 25px
+
+.logo_white
+  padding-top: 20px
\ No newline at end of file
diff --git a/pages/dev/test-site/main-page/main.styl b/pages/dev/test-site/main.sass
similarity index 51%
rename from pages/dev/test-site/main-page/main.styl
rename to pages/dev/test-site/main.sass
index 1620dea6d..2933e7c34 100644
--- a/pages/dev/test-site/main-page/main.styl
+++ b/pages/dev/test-site/main.sass
@@ -3,24 +3,24 @@ html, body
   background-color: white
   margin: 0
 
-#total
-  background-color: white
+.total
+  width: 100%
 
 a
   color: white
 
-a:hover
-  text-decoration: none
+  &:hover
+    text-decoration: none
 
 .nohighlight
   color: white
 
 .start
   width: 100%
-  display: flex;
-  justify-content: center;
-  align-items: center;  
-  height: 95vh
+  display: flex
+  justify-content: center
+  align-items: center
+  height: 100vh
   color: white
 
   li
@@ -33,27 +33,55 @@ a:hover
     width: 100%
 
 .text
-  position:absolute
+  position: absolute
+  top: 5vh
+  left: 0
+  width: 100%
   z-index: 100
-  padding: 0 20px
-  display: grid
-  margin: auto
+  display: flex
+  flex-direction: column
+  gap: 20px
+  height: 95vh
+  justify-content: center
+
+  .header
+    text-shadow: black 1px 0 10px
+    text-align: center
+    display: flex
+    justify-content: center
+    gap: 10px
+
+    .main-title
+      font-size: 60px
+      padding: 0
+        
+    .version
+      font-size: 40px
+      padding: 0
+      margin: 0
+  
+  .big-text
+    text-align: center
+    font-family: Helvetica, sans-serif
+    font-weight: 900
+    font-size: 20px
+    text-shadow: black 1px 0 10px
 
 .cover-image
-  position:absolute
-  z-index:5
-  left:0px
-  top:0px
+  position: absolute
+  z-index: 5
+  left: 0px
+  top: 0px
   height: 100vh
   width: 100%
   object-fit: cover
 
 .sea-image
-  position:absolute
+  position: absolute
   z-index: 6
   height: 100vh
   width: 30%
-  object-fit: cover   
+  object-fit: cover
 
 .parent
   display: inline-flex
@@ -61,81 +89,72 @@ a:hover
 
 .big
   font-size: 72px
-  font-family: "Maven Pro", sans-serif;
+  font-family: "Maven Pro", sans-serif
   text-align: center
 
-.big-text
-  font-family: Helvetica, sans-serif
-  font-weight: 900
-  font-size: 20px
-  text-shadow: black 1px 0 10px
-
 .top-stat, .top-stat-label
   display: grid
   margin: auto
   color: white
 
+  a
+    color: white !important
+
 .top-stat
   font-size: 35px
   font-family: Helvetica, sans-serif
 
 .stats
-  display: grid
-  grid-template-columns: 25% 25% 25% 25%
-  margin-bottom: 3%
-  text-shadow: black 1px 0 10px;
+  display: flex
+  gap: 50px
+  text-shadow: black 1px 0 10px
+  align-items: center
+  justify-content: center
 
   .stat
-    display: grid
-    margin: auto
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
 
   a
     color: white
-    
-.rockd
-  background-color: green
-
-.btn
-  background-color: #363434;
-  border: none;
-  color: white;
-  padding: 13px 10px;
-  margin: 5% 15%
-  text-align: center;
-  text-decoration: none;
-  border-radius: 12px;
-
-.btn:hover 
-  background-color: #545151 
-
-.buttons1 
+
+.buttons
   font-size: 20px
   padding: 0px
-  display: grid
-  grid-template-columns: 33.33% 33.33% 33.33%
+  display: flex
+  gap: 20px
+  flex-wrap: wrap
+  justify-content: center
 
-  a 
-    color: white
+  a
+    color: white !important
     text-decoration: none
 
-  a:hover
-    color: white
+    &:hover
+      color: white
 
-.rockd-png
-  width: 22px
-  padding-right: 4px
-  float: left
-  padding-top: 5px
+.rockd-button-container
+  display: flex
+  justify-content: center
+  align-items: center
+  gap: 5px
+
+  .rockd-png
+    width: 22px
+    height: 22px
+    float: left
 
-.country_container 
+.country_container
   height: 100vh
 
 .country
   height: 100%
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+  display: flex
+  justify-content: center
+  align-items: center
+  text-align: center
   color: white
 
 .img
@@ -164,22 +183,10 @@ a:hover
 .title
   margin: 0
   font-size: 72px
-  font-family: "Maven Pro", sans-serif;
+  font-family: "Maven Pro", sans-serif
   padding: 20vh 0
   text-align: center
 
-.header 
-  margin: 0 20%
-  text-shadow: black 1px 0 10px
-
-#main-title
-  display: inline-block
-
-.version
-  display: inline-block
-  margin-left: 20px
-  font-size: 40px
-
 #about
   height: 100vh
   background-color: white
@@ -196,36 +203,30 @@ a:hover
 
 .donate-container
   height: 80vh
+  display: flex
+  justify-content: center
+  align-items: center
 
 .donate-title
-  a 
-    color:white
-  a:hover
+  flex: 0 0 50%
+  width: 100%
+  text-decoration: none
+
+  a
+    color: white
     text-decoration: none
 
+    &:hover
+      text-decoration: none
+
   color: white
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  font-family: "Maven Pro", sans-serif;
+  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);
+  flex: 0 0 50%
+  background: rgba(255,255,255,0.6)
   padding: 25px
   color: black
   width: 80%
@@ -237,8 +238,8 @@ a:hover
     text-decoration: none
 
 .donate-img
-  position:absolute
-  z-index:5
+  position: absolute
+  z-index: 5
   height: 80vh
   width: 100%
   object-fit: cover
@@ -247,7 +248,7 @@ a:hover
   margin: 0
   padding: 0
 
-.app-box 
+.app-box
   height: 15vh
   display: flex
   width: 60%
@@ -271,16 +272,15 @@ a:hover
   margin: auto
   margin-left: 6%
 
-
-#api  
+#api
   position: relative
   height: 30vh
   background-color: white
 
 #api-circle-text
-  display: table-cell;
-  vertical-align: middle;
-  color: #6bbe98;
+  display: table-cell
+  vertical-align: middle
+  color: #6bbe98
   font-size: 72px
   font-weight: 500
 
@@ -288,27 +288,27 @@ a:hover
   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;
+  background-color: #fff
+  height: 200px
+  width: 200px
+  border-radius: 50%
+  text-align: center
+  display: table
+  border: 11px solid #6bbe98
+  color: #4BABBf
 
 #api-text
   padding-top: 50px
   margin-right: 15%
-  color: #4bab7f;
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 400;
+  color: #4bab7f
+  font-size: 20px
+  line-height: 28px
+  font-weight: 400
 
-#publications 
+#publications
   margin: 100px 10%
 
-#pub-title 
+#pub-title
   text-align: left
   color: #E0E1E6
   position: relative
@@ -324,25 +324,25 @@ a:hover
   li
     counter-increment: pub-counter -1
 
-  li::marker
-    font-size: 35px;
-    color: #babdc8;
-    content: counter(pub-counter) " "
-    counter-increment: pub-counter
+    &::marker
+      font-size: 35px
+      color: #babdc8
+      content: counter(pub-counter) " "
+      counter-increment: pub-counter
 
-#about  
+#about
   margin: 0 10%
 
 .about-row
   margin: 4%
-  font-size: 18px;
-  line-height: 28px;
-  font-weight: 200;
+  font-size: 18px
+  line-height: 28px
+  font-weight: 200
 
 .about-body-subtitle
   float: left
-  font-size: 22px;
-  font-weight: 200;
+  font-size: 22px
+  font-weight: 200
 
 .about-body
   margin-left: 30%
@@ -354,19 +354,19 @@ a:hover
   padding-bottom: 0
 
 .line
-  width: 100%;
-  border-bottom: 1px solid #E0E1E6;
-  position: absolute;
+  width: 100%
+  border-bottom: 1px solid #E0E1E6
+  position: absolute
 
 .geology-img
-  position:absolute
+  position: absolute
   z-index: 0
   height: 100vh
   width: 100%
   object-fit: cover
 
 .map-info
-  position:absolute
+  position: absolute
   z-index: 1
   color: white
   font-size: 20px
@@ -375,82 +375,94 @@ a:hover
   background-color: rgba(0,0,0,.4)
 
 .map-title
-  position:absolute
+  position: absolute
   z-index: 1
   color: white
   width: 50%
   margin: 0 25%
 
 .pub-line
-  width: 80%;
-  border-bottom: 1px solid #E0E1E6;
-  position: absolute;
+  width: 80%
+  border-bottom: 1px solid #E0E1E6
+  position: absolute
 
 .text-donate
-  position:absolute
+  position: absolute
   z-index: 100
   padding: 0 20px
+  display: flex
+  width: 100%
+  justify-content: center
+  align-items: center
+  gap: 30px
 
+.locations
+  display: flex
+  width: 100%
+  flex-wrap: wrap
 
-.location
-  display: grid;
-  grid-template-columns: 25% 25% 25% 25%;
-  grid-template-rows: 40vh;
+  .location-img
+    width: 25%
+    height: 40vh
+    object-fit: cover
+    flex: 0 0 25%
 
-.t1
-  margin-left: 10%
+  .location-text
+    width: 25%
+    color: black
+    background-color: white
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    flex: 0 0 25%
 
-.t2
-  margin-right: 10%
+    h1
+      font-size: 45px
+      font-weight: 600
+      margin: 0
 
-.location-img
-  width: 100%
-  height: 40vh
-  display: flex;
-  margin: auto
-  object-fit: cover
-
-.location-text
-  color: black
-  display: grid;
-  grid-template-rows: 50% 50%;
-  
-  h1
-    font-size: 45px
-    font-weight: 600
-    display: grid
-    margin: auto
-    margin-top: 33%
 
 .caption
   font-size: 15px
   font-weight: 600
-  display: grid
-  margin: auto
 
 .temp-class
   display: grid
   grid-template-columns: 40% 60%
   grid-template-rows: 30vh
 
-  
   .link-title
     display: grid
     margin: auto
-    margin-left: 20%  
+    margin-left: 20%
     font-size: 35px
-    
+
     a
       color: black
 
   p
     display: grid
     margin: auto
-    margin-left: 10% 
+    margin-left: 10%
     margin-right: 10%
     color: black
     font-size: 16px
 
+.hide
+  display: none
 
+.footer-text-container
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  color: white
+  padding: 20px 0
 
-  
\ No newline at end of file
+.footer-text 
+  display: flex
+  gap: 2px
+
+  a
+    color: white !important
\ No newline at end of file
diff --git a/pages/dev/test-site/main.styl b/pages/dev/test-site/main.styl
index 67dc178e8..6b9b07dc9 100644
--- a/pages/dev/test-site/main.styl
+++ b/pages/dev/test-site/main.styl
@@ -1,30 +1,46 @@
 .nav
   position: fixed
+  top: 0
+  left: 0
   width: 100%
   z-index: 10000
-
-  ul 
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background-color: #015eab;
-
-  li 
-    float: left;
-    font-size: 15px
-
-  li a 
-    display: block;
-    color: white;
+  display: flex
+  gap: 20px
+  background-color: #015eab;
+  height: 5vh
+  padding: 0 10px
+  align-items: center
+
+  .nav-link
+    display: flex
+    justify-content: center
+    align-items: center
+
+  a 
+    color: white !important;
     text-align: center;
-    padding: 14px 16px;
     text-decoration: none
 
 
 .footer 
   width: 100%
+  position: absolute
+  left: 0
   background-color: #015EAB
+  margin: 0
+
+  .footer-nav
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    gap: 10px
+    
+    a
+      color: white !important
+
+    a:hover
+      text-decoration: none
 
 .footer-container
   display: flex;
@@ -33,41 +49,16 @@
   margin: 0 auto;
   width: 60%
 
-.col-sm-4
-  color: white
-  width: 33.333%
-  color: #E0E1E6;
-  font-weight: 200;
-  text-align: center;
-  min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
-  font-weight: bold
-  padding-bottom: 18px
-
 .nav-logo
   padding-top: 5px
 
-.funding-logo
-  padding: 10px
-
-.footer-nav
-  list-style-type: none
-  padding-right: 40px
-
-  li
-    padding: 5px 0
-
-  a
-    color: white
-
-  a:hover
-    text-decoration: none
-
 .git_logo
   vertical-align: sub
 
 .f1-text
+  display: flex
+  gap: 7px
+  
   a
     color: white
 
diff --git a/pages/dev/test-site/people/+Page.mdx b/pages/dev/test-site/people/+Page.mdx
index 398eb7d49..3b28b11d4 100644
--- a/pages/dev/test-site/people/+Page.mdx
+++ b/pages/dev/test-site/people/+Page.mdx
@@ -14,145 +14,158 @@ import { MacrostratIcon } from "~/components";
 <p class="subtitle">major contributors to the project </p>
 <div class="line"></div>
 
-<div class="people" id="people">
-    <div class="left">
+<div class="people">
         <div class="person-info" id="shanan">
             <Image className="back-img" src="shanan.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="http://strata.geology.wisc.edu" target="_blank">Shanan Peters</a></n>\
                 <t>Professor, Database Developer</t> \
                 <a href="mailto: peters@geology.wisc.edu"><e>peters -at geology.wisc.edu</e></a>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="daven">
             <Image className="back-img" src="daven.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="https://davenquinn.com" target="_blank">Daven Quinn</a></n> \
                 <t>Research Scientist, Developer</t> \
                 <a href="mailto: daven.quinn@wisc.edu"><e>daven.quinn -at wisc.edu</e></a>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="evgeny">
             <Image className="back-img" src="evgeny.jpg"></Image>
-            <div class="text">
+            <p>
                 <n>Evgeny Mazko</n> \
                 <t>Graduate Student</t> \
                 <a href="mailto: mazko@wisc.edu"><e>mazko -at wisc.edu</e></a>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="michael">
             <Image className="back-img" src="michael.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="https://geoscience.wisc.edu/geoscience/people/staff/name/michael-mcclennen/" target="_blank">Michael McClennen</a></n> \
                 <t>Senior Programmer Analyst</t> \
-                <a href="mailto: mmcclenn@geology.wisc.edu"><e>mmcclenn -at- geology.wisc.edu</e></a>
-            </div>
+                <a href="mailto: mmcclenn@geology.wisc.edu"><e>mmcclenn -at geology.wisc.edu</e></a>
+            </p>
         </div>
 
         <div class="person-info" id="casey">
         <Image className="back-img" src="casey.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="https://idzikowski-casey.github.io/personal-site/" target="_blank">Casey Idzikowski</a></n> \
                 <t>Research Specialist, Developer (former)</t>
-            </div>
+            </p>
+        </div>
+
+        <div class="person-info" id="david">
+            <Image className="back-img" src="david.jpg"></Image>
+            <p>
+                <n>David Sklar</n> \
+                <t>Undergraduate Research Assistant</t> \
+                <a href="mailto: dsklar@wisc.edu"><e>dsklar -at wisc.edu</e> </a>
+            </p>
+        </div>
+
+        <div class="person-info" id="amy">
+            <Image className="back-img" src="amy.jpg"></Image>
+            <p>
+                <n>Amy Fromandi</n> \
+                <a href="mailto: punkish@eidesis.org"><e>punkish at eidesis.org</e> </a>
+            </p>
         </div>
 
         <div class="person-info" id="daniel">
         <Image className="back-img" src="daniel.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="http://strata.geology.wisc.edu" target="_blank">Daniel Segessenmen</a></n> \
                 <t>Graduate Student (former)</t>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="shan">
         <Image className="back-img" src="shan.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="https://www.wisc.edu/directories/person.php?name=Victoria+Khoo&email=vkhoo%40wisc.edu&query=victoria%20khoo" target="_blank">Shan Ye</a></n> \
                 <t>Graduate Student (former)</t>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="ben">
         <Image className="back-img" src="ben.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="http://strata.geology.wisc.edu" target="_blank">Ben Linzmeier</a></n> \
                 <t>Postdoctoral Scholar (former)</t>
-            </div>
+            </p>
         </div>
-    </div>
 
-    <div class="right">
         <div class="person-info" id="afiqah">
         <Image className="back-img" src="afiqah.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="https://www.wisc.edu/directories/person.php?name=Victoria+Khoo&email=vkhoo%40wisc.edu&query=victoria%20khoo" target="_blank">Afiqah Rafi</a></n> \
                 <t>Undergrad Student (former)</t>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="sharon">
         <Image className="back-img" src="sharon.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="http://geoscience.wisc.edu/geoscience/people/student/?id=1007" target="_blank">Sharon McMullen</a></n> \
                 <t>Researcher (former)</t>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="andrew">
         <Image className="back-img" src="andrew.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="http://www.azstrata.org" target="_blank">Andrew Zaffos</a></n> \
                 <t>Data Mobilization and Research Scientist</t> \
                 <a href="mailto: azaffos@email.arizona.edu"><e>azaffos -at- email.arizona.edu</e></a>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="jon">
         <Image className="back-img" src="jon.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="http://www.jonhusson.com" target="_blank">Jon Husson</a></n> \
                 <t>Postdoctoral Researcher (former)</t> \
                 <a href="mailto: jhusson@uvic.ca"><e>jhusson - at - uvic.ca</e></a>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="erika">
         <Image className="back-img" src="erika.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="https://github.com/ItoErika" target="_blank">Erika Ito</a></n> \
                 <t>Research Intern (former)</t>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="noel">
         <Image className="back-img" src="noel.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="http://sedpaleo.org" target="_blank">Noel Heim</a></n> \
                 <t>Researcher (former)</t>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="john">
         <Image className="back-img" src="john.jpg"></Image>
-            <div class="text">
+            <p>
                 <n><a href="http://www.johnjcz.com" target="_blank">John Czaplewski</a></n> \
                 <t>Next-level Developer (former)</t>
-            </div>
+            </p>
         </div>
 
         <div class="person-info" id="puneet">
-        <Image className="back-img" src="puneet.jpg"></Image>
-            <div class="text">
+            <Image className="back-img" src="puneet.jpg"></Image>
+            <p>
                 <n><a href="http://punkish.org" target="_blank">Puneet Kishor</a></n> \
                 <t>Generally Ignored</t> \
-                <a href="mailto: punkish@eidesis.org"><e>punkish at eidesis.org</e> </a>
-            </div>
+                <a href="mailto: punkish@eidesis.org"><e>punkish -at eidesis.org</e> </a>
+            </p>
         </div>
-    </div>
 </div>
 
 [//]: # "Footer"
diff --git a/pages/dev/test-site/people/main.styl b/pages/dev/test-site/people/main.styl
index b83cc223f..7ecddcffe 100644
--- a/pages/dev/test-site/people/main.styl
+++ b/pages/dev/test-site/people/main.styl
@@ -1,12 +1,11 @@
 .htnl, .body, .main
-    background-color: white
     color: black
 
 a:hover
     text-decoration: none
 
 .big
-    color: #E0E1E6
+    color: black
     text-align: left
     font-size: 75px
     font-family: "Maven Pro", sans-serif
@@ -15,49 +14,51 @@ a:hover
     padding-top: 100px
 
 .line
-  border-bottom: 1px solid #E0E1E6;
+  border-bottom: 1px solid black;
   width: 60%
   margin: 0 20% 
 
 
 .people
-    color: white
-
-.left
-    float: left
-    width: 30%
-    margin-left: 20%
-
-.right
-    float: left
-    width: 30%
-    margin-right: 20%
-
-.person-info
-    height: 30vh
-    width: 90%
-    position: relative
-    margin: 5%
-
-.text
-    text-align: right
-    position:absolute
-    padding: 5px 20px
-    z-index: 100
-    background-color: rgba(0, 0, 0, 0.2)
-    bottom:0
-    right: 0
-
-    a
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    justify-content: center
+    gap: 30px
+    margin: 50px 20%
+
+    .person-info
+        flex-basis: 45%
+        height: 30vh
+        width: 45%
+        position: relative
+
+        img
+            height: 100%
+
+        a
+            color: white !important
+    p
+        text-align: right
+        position:absolute
+        padding: 5px 20px
+        z-index: 100
         color: white
+        background-color: rgba(0, 0, 0, 0.2)
+        bottom:0
+        right: 0
+        white-space: nowrap
+        margin: 5px
 
-    a:hover
-        color: white
+        a
+            color: white
+
+        a:hover
+            color: white
 
 .back-img
     position:absolute
     z-index: 0
-    height: 30vh
     object-fit: cover
     width: 100%
 
@@ -72,9 +73,6 @@ e
     font-size: 14px
     font-weight: 200px
 
-.footer
-  margin-top: 280vh
-
 .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/main.styl b/pages/dev/test-site/publications/main.styl
index 7f2d8942a..94446d64e 100644
--- a/pages/dev/test-site/publications/main.styl
+++ b/pages/dev/test-site/publications/main.styl
@@ -1,6 +1,9 @@
 .htnl, .body, .main
     background-color: white
-    color: black
+    color: black !important
+
+#publications
+  margin: 8vh 20% 5vh 20%
 
 #container
   background-color: white
@@ -13,25 +16,17 @@ a:hover
   font-family: "Maven Pro", sans-serif;
   text-align: center
 
-p 
-    margin-bottom: 10px;
-    margin-top: 0;
-    color: #E0E1E6
-
 .pub-line
   width: 60%;
-  border-bottom: 1px solid #E0E1E6;
+  border-bottom: 1px solid black;
   position: absolute;
 
-#publications 
-  padding: 50px 20%
-
 #pub-title 
   text-align: left
-  color: #E0E1E6
   position: relative
-  padding-bottom: 0
-  margin-bottom: 0
+  margin: 0
+  padding: 0
+  color: black
 
 .pub-list
   padding-top: 10px
@@ -49,4 +44,5 @@ p
     counter-increment: pub-counter
 
 .blurb
-  font-size: 15px
\ No newline at end of file
+  font-size: 15px
+  color: black
\ No newline at end of file
diff --git a/pages/layout.module.sass b/pages/layout.module.sass
index c17982efc..b7769885c 100644
--- a/pages/layout.module.sass
+++ b/pages/layout.module.sass
@@ -1,6 +1,3 @@
-.content-page
-  margin: 0 4em
-
 :global(.in-page-transition)
   height: 100vh
   overflow: hidden
@@ -18,3 +15,6 @@
   height: 100vh
   overflow: hidden
   position: relative
+
+.app-shell
+  background-color: var(--background-color)
diff --git a/pages/lex/+Page.mdx b/pages/lex/+Page.mdx
index e4ab1b4a4..eec3ef2df 100644
--- a/pages/lex/+Page.mdx
+++ b/pages/lex/+Page.mdx
@@ -12,6 +12,15 @@ researchers and data providers.
 <LinkCard href="/lex/lithology" title="Lithologies">
   A tree-based representation of lithologies
 </LinkCard>
+<LinkCard href="/lex/environments" title="Environments">
+  A tree-based representation of environments
+</LinkCard>
+<LinkCard href="/lex/economics" title="Economics">
+  A tree-based representation of economics
+</LinkCard>
+<LinkCard href="/lex/intervals" title="Intervals">
+  A tree-based representation of intervals
+</LinkCard>
 <LinkCard href="/lex/strat-names" title="Stratigraphic names"></LinkCard>
 
 **[Sift](/sift)**, Macrostrat's legacy lexicon app, is still available for use
diff --git a/pages/lex/economics/+Page.ts b/pages/lex/economics/+Page.ts
new file mode 100644
index 000000000..6e81e523f
--- /dev/null
+++ b/pages/lex/economics/+Page.ts
@@ -0,0 +1,120 @@
+import h from "./main.module.scss";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { SETTINGS } from "@macrostrat-web/settings";
+import { PageHeader, AssistantLinks } from "~/components";
+import { Card, Icon, Popover } from "@blueprintjs/core";
+import { useState } from "react";
+import { ContentPage } from "~/layouts";
+
+
+export function Page() {
+    const [input, setInput] = useState("");
+    const res = useAPIResult(SETTINGS.apiV2Prefix + "/defs/econs?all")?.success.data;
+
+    if (res == null) return h("div", "Loading...");
+
+    console.log(res);
+
+    const handleChange = (event) => { 
+        setInput(event.target.value.toLowerCase());
+    }
+
+    const filtered = res.filter((d) => {
+        const name = d.name.toLowerCase();
+        const className = d.class.toLowerCase();
+        const type = d.type ? d.type.toLowerCase() : "";
+        return name.includes(input) || className.includes(input) || type.includes(input);
+    });
+
+    const grouped = groupByClassThenType(filtered);
+
+    return h('div.econ-list-page', [
+    h(AssistantLinks, [
+      h(Card, [
+        h('div.search-bar', [
+          h(Icon, { icon: "search" }),
+          h('input', {
+            type: "text",
+            placeholder: "Search economics",
+            onChange: handleChange,
+          }),
+        ])
+      ]),      
+    ]),
+    h(ContentPage, [
+      h(PageHeader, { title: "Economics" }),
+        h('div.econ-list',
+            Object.entries(grouped).map(([className, types]) =>
+                h('div.econ-class-group', [
+                h('h2', UpperCase(className)),
+                ...Object.entries(types).map(([type, group]) =>
+                    h('div.econ-group', [
+                        h('h3', UpperCase(type)),
+                        h('div.econ-items', group.map((d) => h(EconItem, { data: d, key: d.environ_id }))),
+                    ])
+                )
+                ])
+            )
+        )
+    ])
+  ]);
+}
+
+function EconItem({ data }) {
+  const { name, color, econ_id, t_units } = data;
+
+  return h(Popover, {
+    className: "econ-item-popover",
+    content: h('div.econ-tooltip', [
+        h('div.econ-tooltip-id', "ID - #" + econ_id),
+        h('div.econ-tooltip-t-unit', "Time Units - " + t_units),
+      ]),
+    }, 
+    h('div.econ-item', [
+      h('div.econ-name', { style: { "backgroundColor": color, "color": getContrastTextColor(color)} }, name),
+    ])
+  )
+
+  return ;
+}
+
+function getContrastTextColor(bgColor) {
+  // Remove '#' if present
+  const color = bgColor.replace('#', '');
+
+  // Parse r, g, b
+  const r = parseInt(color.substr(0, 2), 16);
+  const g = parseInt(color.substr(2, 2), 16);
+  const b = parseInt(color.substr(4, 2), 16);
+
+  // Calculate luminance
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // Return black or white depending on luminance
+  return luminance > 0.6 ? '#000000' : '#FFFFFF';
+}
+
+function groupByClassThenType(items) {
+  return items.reduce((acc, item) => {
+    const { class: className, type } = item;
+
+    // Only include items with a valid type (not null, undefined, or empty string)
+    if (!type || type.trim() === '') {
+      return acc; // Skip this item if it has no valid type
+    }
+
+    if (!acc[className]) {
+      acc[className] = {};
+    }
+    if (!acc[className][type]) {
+      acc[className][type] = [];
+    }
+
+    acc[className][type].push(item);
+    return acc;
+  }, {});
+}
+
+function UpperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
\ No newline at end of file
diff --git a/pages/lex/economics/main.module.scss b/pages/lex/economics/main.module.scss
new file mode 100644
index 000000000..3f36c978b
--- /dev/null
+++ b/pages/lex/economics/main.module.scss
@@ -0,0 +1,61 @@
+h3, h2 {
+    margin: 0;
+    padding: 0;
+}
+
+.econ-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.3em;
+
+    .econ-class-group {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+
+        .econ-group {
+            border-left: 2px solid rgb(56, 62, 71);
+            padding-left: 1em;
+
+                .econ-items {
+                    display: flex;
+                    gap: 5px;
+                    flex-wrap: wrap;
+                    align-items: center;
+
+                    .econ-name {
+                        padding: 2px 6px;
+                        margin: .2em 0;
+                        border-radius: 0.2em;  
+                    }
+                }
+        }
+    }
+}
+
+.search-bar {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    width: 100%;
+    padding: 0.5em;
+    border-radius: 0.2em;
+    border: none;
+    background-color: var(--background-color);
+    color: var(--text-emphasized-color);
+    font-size: 1em;
+    margin: 3px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0.2em var(--text-emphasized-color);
+    }
+  }
+}
+
+.econ-tooltip {
+  padding: 0.5em;
+}
\ No newline at end of file
diff --git a/pages/lex/environments/+Page.ts b/pages/lex/environments/+Page.ts
new file mode 100644
index 000000000..c065ab15b
--- /dev/null
+++ b/pages/lex/environments/+Page.ts
@@ -0,0 +1,117 @@
+import h from "./main.module.scss";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { SETTINGS } from "@macrostrat-web/settings";
+import { PageHeader, AssistantLinks } from "~/components";
+import { Card, Icon, Popover } from "@blueprintjs/core";
+import { useState } from "react";
+import { ContentPage } from "~/layouts";
+
+
+
+export function Page() {
+    const [input, setInput] = useState("");
+    const res = useAPIResult(SETTINGS.apiV2Prefix + "/defs/environments?all")?.success.data;
+
+    if (res == null) return h("div", "Loading...");
+
+    const handleChange = (event) => { 
+        setInput(event.target.value.toLowerCase());
+    }
+
+    const filtered = res.filter((d) => {
+        const name = d.name.toLowerCase();
+        const className = d.class.toLowerCase();
+        const type = d.type ? d.type.toLowerCase() : "";
+        return name.includes(input) || className.includes(input) || type.includes(input);
+    });
+
+    const grouped = groupByClassThenType(filtered);
+
+    return h('div.environ-list-page', [
+    h(AssistantLinks, [
+      h(Card, [
+        h('div.search-bar', [
+          h(Icon, { icon: "search" }),
+          h('input', {
+            type: "text",
+            placeholder: "Search environments",
+            onChange: handleChange,
+          }),
+        ])
+      ]),      
+    ]),
+    h(ContentPage, [
+      h(PageHeader, { title: "Environments" }),
+        h('div.environment-list',
+            Object.entries(grouped).map(([className, types]) =>
+                h('div.environment-class-group', [
+                h('h2', UpperCase(className)),
+                ...Object.entries(types).map(([type, group]) =>
+                    h('div.environment-group', [
+                        h('h3', UpperCase(type)),
+                        h('div.environment-items', group.map((d) => h(EnvironmentItem, { data: d, key: d.environ_id }))),
+                    ])
+                )
+                ])
+            )
+        )
+    ])
+  ]);
+}
+
+function EnvironmentItem({ data }) {
+  const { environ_id, name, color, t_units } = data;
+
+  return h(Popover, {
+    className: "environ-item-popover",
+    content: h('div.environ-tooltip', [
+        h('div.environ-tooltip-id', "ID - #" + environ_id),
+        h('div.environ-tooltip-t-unit', "Time Units - " + t_units),
+      ]),
+    }, 
+    h('div.environ-item', [
+      h('div.environ-name', { style: { "backgroundColor": color, "color": getContrastTextColor(color)} }, name),
+    ])
+  )
+}
+
+function getContrastTextColor(bgColor) {
+  // Remove '#' if present
+  const color = bgColor.replace('#', '');
+
+  // Parse r, g, b
+  const r = parseInt(color.substr(0, 2), 16);
+  const g = parseInt(color.substr(2, 2), 16);
+  const b = parseInt(color.substr(4, 2), 16);
+
+  // Calculate luminance
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // Return black or white depending on luminance
+  return luminance > 0.6 ? '#000000' : '#FFFFFF';
+}
+
+function groupByClassThenType(items) {
+  return items.reduce((acc, item) => {
+    const { class: className, type } = item;
+
+    // Only include items with a valid type (not null, undefined, or empty string)
+    if (!type || type.trim() === '') {
+      return acc; // Skip this item if it has no valid type
+    }
+
+    if (!acc[className]) {
+      acc[className] = {};
+    }
+    if (!acc[className][type]) {
+      acc[className][type] = [];
+    }
+
+    acc[className][type].push(item);
+    return acc;
+  }, {});
+}
+
+function UpperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
\ No newline at end of file
diff --git a/pages/lex/environments/main.module.scss b/pages/lex/environments/main.module.scss
new file mode 100644
index 000000000..0af650d70
--- /dev/null
+++ b/pages/lex/environments/main.module.scss
@@ -0,0 +1,61 @@
+h3, h2 {
+    margin: 0;
+    padding: 0;
+}
+
+.environment-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.3em;
+
+    .environment-class-group {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+
+        .environment-group {
+            border-left: 2px solid rgb(56, 62, 71);
+            padding-left: 1em;
+
+                .environment-items {
+                    display: flex;
+                    gap: 5px;
+                    flex-wrap: wrap;
+                    align-items: center;
+
+                    .environ-name {
+                        padding: 2px 6px;
+                        margin: .2em 0;
+                        border-radius: 0.2em;  
+                    }
+                }
+        }
+    }
+}
+
+.search-bar {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    width: 100%;
+    padding: 0.5em;
+    border-radius: 0.2em;
+    border: none;
+    background-color: var(--background-color);
+    color: var(--text-emphasized-color);
+    font-size: 1em;
+    margin: 3px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0.2em var(--text-emphasized-color);
+    }
+  }
+}
+
+.environ-tooltip {
+  padding: 0.5em;
+}
\ No newline at end of file
diff --git a/pages/lex/intervals/+Page.ts b/pages/lex/intervals/+Page.ts
new file mode 100644
index 000000000..8c1815b4a
--- /dev/null
+++ b/pages/lex/intervals/+Page.ts
@@ -0,0 +1,153 @@
+import h from "./main.module.scss";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { SETTINGS } from "@macrostrat-web/settings";
+import { PageHeader, AssistantLinks } from "~/components";
+import { Card, Icon, Popover, RangeSlider } from "@blueprintjs/core";
+import { useState } from "react";
+import { ContentPage } from "~/layouts";
+
+
+export function Page() {
+    const [input, setInput] = useState("");
+    const [bottomAge, setBottomAge] = useState([0, 4600]);
+    const [topAge, setTopAge] = useState([0, 4180]);
+    const res = useAPIResult(SETTINGS.apiV2Prefix + "/defs/intervals?all")?.success.data;
+
+    if (res == null) return h("div", "Loading...");
+
+    console.log(res);
+
+    const handleChange = (event) => { 
+        setInput(event.target.value.toLowerCase());
+    }
+
+    const filtered = res.filter((d) => {
+        const name = d.name?.toLowerCase() || "";
+        const intType = d.int_type?.toLowerCase() || "";
+        const abbrev = d.abbrev?.toLowerCase() || "";
+        const b_age = d.b_age ? parseInt(d.b_age, 10) : NaN; // Convert to number
+        const t_age = d.t_age ? parseInt(d.t_age, 10) : NaN; // Convert to number
+
+        // Check if name, intType, abbrev, or age falls within the ranges or input
+        const matchesName = name.includes(input);
+        const matchesType = intType.includes(input);
+        const matchesAbbrev = abbrev.includes(input);
+        const matchesAgeRange =
+            (!isNaN(b_age) && b_age >= bottomAge[0] && b_age <= bottomAge[1]) &&
+            (!isNaN(t_age) && t_age >= topAge[0] && t_age <= topAge[1]);
+
+        return (matchesName || matchesType || matchesAbbrev) && matchesAgeRange;
+    });
+
+    const grouped = groupByIntType(filtered);
+    console.log(grouped);
+
+    return h('div.int-list-page', [
+    h(AssistantLinks, [
+      h(Card, [
+        h('p', "Filter by name, type, or abbreviation"),
+        h('div.search-bar', [
+          h(Icon, { icon: "search" }),
+          h('input', {
+            type: "text",
+            placeholder: "Search...",
+            onChange: handleChange,
+          }),
+        ])
+      ]),     
+      h(Card, [
+        h('p', "Filter by top age"),
+        h(RangeSlider, {
+          min: 0,
+          max: 4180,
+          stepSize: 10,
+          labelStepSize: 1000,
+          value: [topAge[0], topAge[1]],
+          onChange: (value) => {
+            setTopAge(value);
+          },
+        }),
+      ]), 
+      h(Card, [
+        h('p', "Filter by bottom age"),
+        h(RangeSlider, {
+          min: 0,
+          max: 4600,
+          stepSize: 10,
+          labelStepSize: 1000,
+          value: [bottomAge[0], bottomAge[1]],
+          onChange: (value) => {
+            setBottomAge(value);
+          }
+        }),
+      ]),
+    ]),
+    h(ContentPage, [
+      h(PageHeader, { title: "Intervals" }),
+        h('div.int-list',
+          Object.entries(grouped).map(([intType, group]) =>
+            h('div.int-group', [
+              h('h2', UpperCase(intType)),
+              h('div.int-items', group.map((d) => h(EconItem, { data: d, key: d.environ_id })))
+            ])
+          )
+        )
+    ])
+  ]);
+}
+
+function EconItem({ data }) {
+  const { name, color, abbrev, b_age, int_id, t_age, timescales } = data;
+
+  return h(Popover, {
+    className: "int-item-popover",
+    content: h('div.int-tooltip', [
+        h('div.int-tooltip-id', "ID - #" + int_id),
+        h('div.int-tooltip-ages', "Ages - " + b_age + " to " + t_age),
+        abbrev ? h('div.int-tooltip-abbrev', "Abbreviation - " + abbrev) : null,
+        timescales[0].timescale_id ?  h('div.int-tooltip-timescales', [
+          h('div.int-tooltip-timescales-title', "Timescales"),
+          h('ul.int-tooltip-timescales-list', timescales.map((t) => h('li.int-tooltip-timescale', "#" + t.timescale_id + " - " + t.name)))
+        ]) : null,
+      ]),
+    }, 
+    h('div.int-item', [
+      h('div.int-name', { style: { "backgroundColor": color, "color": getContrastTextColor(color)} }, name),
+    ])
+  )
+}
+
+function getContrastTextColor(bgColor) {
+  // Remove '#' if present
+  const color = bgColor.replace('#', '');
+
+  // Parse r, g, b
+  const r = parseInt(color.substr(0, 2), 16);
+  const g = parseInt(color.substr(2, 2), 16);
+  const b = parseInt(color.substr(4, 2), 16);
+
+  // Calculate luminance
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // Return black or white depending on luminance
+  return luminance > 0.6 ? '#000000' : '#FFFFFF';
+}
+
+function groupByIntType(items) {
+  return items.reduce((acc, item) => {
+    const intType = item.int_type?.trim?.();
+    if (!intType) return acc; // Skip items with no int_type
+
+    if (!acc[intType]) {
+      acc[intType] = [];
+    }
+
+    acc[intType].push(item);
+    return acc;
+  }, {});
+}
+
+
+function UpperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
\ No newline at end of file
diff --git a/pages/lex/intervals/main.module.scss b/pages/lex/intervals/main.module.scss
new file mode 100644
index 000000000..0d00096ae
--- /dev/null
+++ b/pages/lex/intervals/main.module.scss
@@ -0,0 +1,61 @@
+h3, h2 {
+    margin: 0;
+    padding: 0;
+}
+
+.int-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.3em;
+
+    h2 {
+      margin: 0.5em 0;
+    }
+
+    .int-items {
+        display: flex;
+        gap: 5px;
+        flex-wrap: wrap;
+        align-items: center;
+
+        .int-name {
+            padding: 2px 6px;
+            margin: .2em 0;
+            border-radius: 0.2em;  
+        }
+    }
+}
+
+.search-bar {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    width: 100%;
+    padding: 0.5em;
+    border-radius: 0.2em;
+    border: none;
+    background-color: var(--background-color);
+    color: var(--text-emphasized-color);
+    font-size: 1em;
+    margin: 3px;  
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0.2em var(--text-emphasized-color);
+    }
+  }
+}
+
+.int-tooltip {
+  padding: 0.5em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+ul, li { 
+  margin: 0;
+}
\ No newline at end of file
diff --git a/pages/maps/+Page.ts b/pages/maps/+Page.ts
index 67e23f23b..51d3444fb 100644
--- a/pages/maps/+Page.ts
+++ b/pages/maps/+Page.ts
@@ -1,13 +1,38 @@
 import h from "./main.module.scss";
-import { AnchorButton } from "@blueprintjs/core";
+import { AnchorButton, Icon } from "@blueprintjs/core";
 import { ContentPage } from "~/layouts";
-import { PageHeader, DevLinkButton, AssistantLinks } from "~/components";
+import { PageHeader, DevLinkButton, AssistantLinks, LinkCard } from "~/components";
 import { useData } from "vike-react/useData";
+import { useState } from "react";
+import { LinkCard } from "~/components/cards";
 
 export function Page() {
   const { sources } = useData();
+  const [inputValue, setInputValue] = useState("");
 
-  return h(ContentPage, [
+  const filteredSources = sources.filter((source) => {
+    const name = source.name.toLowerCase();
+    const slug = source.slug.toLowerCase();
+    const input = inputValue.toLowerCase();
+    return name.includes(input) || slug.includes(input);
+  });
+
+  const pageLength = 5;
+  const length = filteredSources.length;
+  const numPages = Math.ceil(length / pageLength);
+  const [page, setPage] = useState(0);
+
+  console.log("inputValue", inputValue);
+
+
+  const items = filteredSources.slice(page * pageLength, (page + 1) * pageLength);
+
+  const handleInputChange = (event) => {
+    setInputValue(event.target.value.toLowerCase());
+  }
+
+
+  return h('div.maps-page', [
     h(AssistantLinks, [
       h(
         AnchorButton,
@@ -15,13 +40,26 @@ export function Page() {
         "Ingestion system"
       ),
       h(AnchorButton, { icon: "map", href: "/map/sources" }, "Show on map"),
+      h(AnchorButton, [
+        h('div.search-bar', [
+          h(Icon, { icon: "search" }),
+          h('input', {
+            type: "text",
+            placeholder: "Search",
+            onChange: handleInputChange 
+          }),
+        ])
+      ]),
       h(DevLinkButton, { href: "/maps/legend" }, "Legend table"),
     ]),
-    h(PageHeader, { title: "Maps" }),
-    h(
-      "ul.maps-list",
-      sources.map((d) => h(SourceItem, { source: d, key: d.source_id }))
-    ),
+    h(ContentPage, [
+      h(PageHeader, { title: "Maps" }),
+      h(
+        "div.maps-list",
+        items.map((d) => h(SourceItem, { source: d, key: d.source_id })),
+      ),
+      pageCarousel({ page, setPage, numPages }),
+    ]),
   ]);
 }
 
@@ -30,13 +68,44 @@ function SourceItem({ source }) {
   const href = `/maps/${source_id}`;
   const href1 = `/map/dev/sources/${slug}`;
 
-  return h("li", [
-    h("span.source-id", {}, source_id),
-    " ",
-    h("a", { href }, [name]),
-    " ",
-    h("span.scale", {}, source.scale),
+  return h(LinkCard, {
+    href, 
+    title: h('div.link-title', [
+      h('h1',"#" + source_id + " " + name),
+      h("a", { href: href1 }, [
+        h('p', "View on map (" + source.scale + ")"),
+        h(Icon, { icon: "map" })
+      ]),
+    ]),
+  }, [
     h.if(source.raster_url != null)([" ", h("span.raster", "Raster")]),
-    h("span", ["   ", h("a", { href: href1 }, h("code", {}, slug))]),
   ]);
 }
+
+function pageCarousel({page, setPage, numPages}) {
+  console.log('numpages', numPages);
+    return h('div.pages', 
+        h('div.page-container', [
+          h('div', { className: "page-btn" }, [
+            h('div', { className: page != 0 && numPages != 1 ? 'btn-content' : 'hide',             
+                onClick: () => {
+                    setPage(page - 1);
+                }}, [
+              h(Icon, { icon: 'arrow-left' }),
+              h('p', "Previous"),
+            ])
+          ]),
+          h('p', 'Page ' + (page + 1)),
+          h('div', { className: "page-btn" }, [
+            h('div', { className: page < numPages - 1 && numPages != 1 ? 'btn-content' : 'hide',
+                onClick: () => {
+                    setPage(page + 1);
+                }
+            }, [
+              h('p', "Next"),
+              h(Icon, { icon: 'arrow-right' }),
+            ])
+          ]),
+        ])
+      );
+}
\ No newline at end of file
diff --git a/pages/maps/main.module.scss b/pages/maps/main.module.scss
index 4f3b600e1..d1304629b 100644
--- a/pages/maps/main.module.scss
+++ b/pages/maps/main.module.scss
@@ -7,9 +7,40 @@
   font-size: 0.8em;
 }
 
+h1 {
+  margin: 0;
+  font-size: 1em;
+}
+
 .maps-list {
-  list-style: none;
   padding: 0;
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+
+  a {
+    color: white !important;
+  }
+
+  .link-title {
+    display: flex;
+    justify-content: space-between;
+
+    p {
+      margin: 0;
+    }
+
+    a {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  p {
+    font-size: .5em;
+  }
 }
 
 .source-id {
@@ -32,3 +63,53 @@
     padding: 0.5em 0;
   }
 }
+
+.pages {
+  margin: 10px 0;
+  width: 100%;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+
+  .page-container {
+    display: grid;
+    grid-template-columns: 100px 50px 100px;
+    color: var(--text-emphasized-color);
+
+    .btn-content {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+
+    p {
+      margin: 0;
+      text-align: center;
+    }
+  }
+}
+
+.search-bar {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    width: 100%;
+    padding: 0.5em;
+    border-radius: 0.2em;
+    border: none;
+    background-color: var(--background-color);
+    color: var(--text-emphasized-color);
+    font-size: 1em;
+    margin: 3px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0.2em var(--text-emphasized-color);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/icon.module.sass b/src/components/icon.module.sass
index 0256f4428..b156fbafe 100644
--- a/src/components/icon.module.sass
+++ b/src/components/icon.module.sass
@@ -20,7 +20,7 @@
     color: unset
 
 .page-header
-  margin: 1.2em 0 1.2em
+  padding: 0 0 1.2em
   display: flex
   flex-direction: row
   align-items: start
diff --git a/src/layouts/main.module.sass b/src/layouts/main.module.sass
index ef4e81a74..111464244 100644
--- a/src/layouts/main.module.sass
+++ b/src/layouts/main.module.sass
@@ -7,8 +7,7 @@
   left: 0
 
 .content-page
-  margin: 2em auto 3em
-  max-width: 78em
+  padding: 2em 20% !important
   padding: 0 4em
   @media only screen and (max-width: 900px)
     padding: 0 1em