diff --git a/app/(datasets)/data-catalog/[slug]/page.tsx b/app/(datasets)/data-catalog/[slug]/page.tsx
index a0739384..a7ee6ef4 100644
--- a/app/(datasets)/data-catalog/[slug]/page.tsx
+++ b/app/(datasets)/data-catalog/[slug]/page.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { notFound } from 'next/navigation';
 import { CustomMDX } from 'app/components/mdx';
 import { getDatasets } from 'app/content/utils/mdx';
-import { PageHero } from '@lib';
+import { PageHero, LegacyGlobalStyles } from '@lib';
 import Providers from 'app/(datasets)/providers';
 
 export default function DatasetOverviewPage({ params }: { params: any }) {
@@ -16,6 +16,7 @@ export default function DatasetOverviewPage({ params }: { params: any }) {
     <section>
       <article className='prose'>
         <Providers>
+          <LegacyGlobalStyles />
           <PageHero
             title={dataset.metadata.name}
             description={dataset.metadata.description}
diff --git a/app/(datasets)/data-catalog/catalog.tsx b/app/(datasets)/data-catalog/catalog.tsx
index b16fa7c0..74b8223d 100644
--- a/app/(datasets)/data-catalog/catalog.tsx
+++ b/app/(datasets)/data-catalog/catalog.tsx
@@ -1,23 +1,18 @@
 'use client';
 import React from 'react';
-import { CatalogView, useFiltersWithQS } from '@lib';
-import { useRouter } from 'next/navigation';
+import { CatalogContent, useFiltersWithQS } from '@lib';
 import Providers from '../providers';
 
 export default function Catalog({ datasets }: { datasets: any }) {
   const controlVars = useFiltersWithQS();
-  const router = useRouter();
-
-  const handleCardNavigation = (path: string) => {
-    router.push(path);
-  };
 
   return (
     <Providers>
-      <CatalogView
+      <CatalogContent
         datasets={datasets}
-        onFilterChanges={() => controlVars}
-        onCardNavigate={handleCardNavigation}
+        search={controlVars.search}
+        onAction={controlVars.onAction}
+        taxonomies={controlVars.taxonomies}
       />
     </Providers>
   );
diff --git a/app/(datasets)/data-catalog/page.tsx b/app/(datasets)/data-catalog/page.tsx
index a7056659..8a34db63 100644
--- a/app/(datasets)/data-catalog/page.tsx
+++ b/app/(datasets)/data-catalog/page.tsx
@@ -3,13 +3,10 @@ import dynamic from 'next/dynamic';
 import { getTransformedDatasetMetadata } from 'app/content/utils/mdx';
 
 // @NOTE: Dynamically load to ensure only CSR since this depends ContextProviders for routing and etc...
-const Catalog = dynamic(
-  () => import('./catalog'),
-  { 
-    ssr: false,
-    loading: () => <p>Loading...</p> // @NOTE @TODO: We need a loading state!!!
-  },
-);
+const Catalog = dynamic(() => import('./catalog'), {
+  ssr: false,
+  loading: () => <p>Loading...</p>, // @NOTE @TODO: We need a loading state!!!
+});
 
 export default function Page() {
   const transformed = getTransformedDatasetMetadata();
@@ -17,7 +14,14 @@ export default function Page() {
   return (
     <div className='grid-container'>
       <section>
-      <h1 className='font-ui-lg'>Data Catalog</h1>
+        <div className='margin-top-8 margin-bottom-3'>
+          <h1 className='font-sans-xl'>Data Catalog</h1>
+          <p className='font-sans-md margin-top-1'>
+            This dashboard explores key indicators to track and compare changes
+            over time.
+          </p>
+        </div>
+
         <Catalog datasets={transformed} />
       </section>
     </div>
diff --git a/app/(datasets)/exploration/exploration.tsx b/app/(datasets)/exploration/exploration.tsx
index 04d5f874..f018aef3 100644
--- a/app/(datasets)/exploration/exploration.tsx
+++ b/app/(datasets)/exploration/exploration.tsx
@@ -1,12 +1,12 @@
 'use client';
 import React, { useState } from 'react';
-import Link from 'next/link';
 import {
   ExplorationAndAnalysis,
   DatasetSelectorModal,
   useTimelineDatasetAtom,
   externalDatasetsAtom,
-} from 'app/lib';
+  LegacyGlobalStyles,
+} from '@lib';
 import { useSetAtom } from 'jotai';
 import useElementHeight from '@utils/hooks/use-element-height';
 import Providers from '../providers';
@@ -32,6 +32,7 @@ export default function ExplorationAnalysis({ datasets }: { datasets: any }) {
 
   return (
     <Providers datasets={datasets}>
+      <LegacyGlobalStyles />
       <div
         id='ea-wrapper'
         // The below styles adjust the E&A page to match what we have on earthdata.nasa.gov
diff --git a/app/(datasets)/stories/[slug]/index.scss b/app/(datasets)/stories/[slug]/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/(datasets)/stories/[slug]/page.tsx b/app/(datasets)/stories/[slug]/page.tsx
index de4f4274..46b4a140 100644
--- a/app/(datasets)/stories/[slug]/page.tsx
+++ b/app/(datasets)/stories/[slug]/page.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import { notFound } from 'next/navigation';
 import { CustomMDX } from 'app/components/mdx';
 import { getStories } from 'app/content/utils/mdx';
-import { PageHero } from '@lib';
+import { LegacyGlobalStyles, PageHero } from '@lib';
+import './index.scss';
+import Providers from 'app/(datasets)/providers';
 
 async function generateStaticParams() {
   const posts = getStories();
 
-  return posts.map((post) => ({
-    slug: post.slug,
-  }));
+  return posts.map((post) => ({ slug: post.slug }));
 }
 
 export default function StoryOverview({ params }: { params: any }) {
@@ -21,7 +21,7 @@ export default function StoryOverview({ params }: { params: any }) {
 
   return (
     <section>
-      <script 
+      <script
         type='application/ld+json'
         suppressHydrationWarning
         dangerouslySetInnerHTML={{
@@ -31,18 +31,22 @@ export default function StoryOverview({ params }: { params: any }) {
             title: post.metadata.name,
             description: post.metadata.description,
             coverSrc: post.metadata.media?.src,
-            coverAlt: post.metadata.media?.alt
+            coverAlt: post.metadata.media?.alt,
           }),
         }}
       />
       <article className='prose'>
-        <PageHero
-          title={post.metadata.name}
-          description={post.metadata.description}
-          coverSrc={post.metadata.media?.src}
-          coverAlt={post.metadata.media?.alt}
-        />
-        <CustomMDX source={post.content} />
+        <Providers>
+          <LegacyGlobalStyles />
+
+          <PageHero
+            title={post.metadata.name}
+            description={post.metadata.description}
+            coverSrc={post.metadata.media?.src}
+            coverAlt={post.metadata.media?.alt}
+          />
+          <CustomMDX source={post.content} />
+        </Providers>
       </article>
     </section>
   );
diff --git a/app/(datasets)/stories/page.tsx b/app/(datasets)/stories/page.tsx
index 46844f3b..3cc4558a 100644
--- a/app/(datasets)/stories/page.tsx
+++ b/app/(datasets)/stories/page.tsx
@@ -3,13 +3,10 @@ import dynamic from 'next/dynamic';
 import { getStoriesMetadata } from 'app/content/utils/mdx';
 
 // @NOTE: Dynamically load to ensure only CSR since these depends on VedaUI ContextProvider for routing...
-const StoriesHub = dynamic(
-  () => import('./hub'),
-  { 
-    ssr: false,
-    loading: () => <p>Loading...</p> // @NOTE @TODO: We need a loading state!!!
-  },
-);
+const StoriesHub = dynamic(() => import('./hub'), {
+  ssr: false,
+  loading: () => <p>Loading...</p>, // @NOTE @TODO: We need a loading state!!!
+});
 
 export default function Page() {
   const stories = getStoriesMetadata().map((d) => ({
@@ -19,7 +16,13 @@ export default function Page() {
 
   return (
     <div className='grid-container'>
-      <h1 className='font-ui-lg'>Stories</h1>
+      <div className='margin-top-8 margin-bottom-3'>
+        <h1 className='font-sans-xl'>Stories</h1>
+        <p className='font-sans-md margin-top-1'>
+          This dashboard explores key indicators to track and compare changes
+          over time.
+        </p>
+      </div>
       <StoriesHub stories={stories} />
     </div>
   );
diff --git a/app/components/header.tsx b/app/components/header.tsx
index b9fab8d5..0c1298f3 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -63,7 +63,6 @@ export default function Header() {
               TODO: Ideally we can address this on the veda-ui side so that the color applies to all elements within the logo.
             */}
             <NasaLogoColor />
-            <span style={{ color: '#1b1b1b' }}>Earthdata VEDA Dashboard</span>
           </div>
         }
       />
diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx
index bc47ceb8..d7c6e47b 100644
--- a/app/components/mdx.tsx
+++ b/app/components/mdx.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { highlight } from 'sugar-high';
+import { LegacyGlobalStyles } from '@lib';
 
 import {
   Block,
@@ -106,6 +107,7 @@ export function CustomMDX(props: any) {
   const datasets = getDatasetsMetadata();
   return (
     <Providers datasets={datasets}>
+      <LegacyGlobalStyles />
       <MDXRemote
         {...props}
         components={{ ...components, ...(props.components || {}) }}
diff --git a/app/content/datasets/hls-events.mdx b/app/content/datasets/hls_events.mdx
similarity index 100%
rename from app/content/datasets/hls-events.mdx
rename to app/content/datasets/hls_events.mdx
diff --git a/app/content/stories/air-quality-and-covid-19.mdx b/app/content/stories/air-quality-and-covid-19.mdx
index 465c7e48..4350cea8 100644
--- a/app/content/stories/air-quality-and-covid-19.mdx
+++ b/app/content/stories/air-quality-and-covid-19.mdx
@@ -14,7 +14,6 @@ taxonomy:
     values:
       - Covid 19
 ---
-### Covid 
 
 <ScrollytellingBlock>
   <Chapter
@@ -125,7 +124,7 @@ taxonomy:
     ## Like Flipping a Switch: Lockdowns and NO2
 
     Nitrogen dioxide is only one component of air quality: sulfur dioxide (SO2), ozone (O3), formaldehyde (CH2O), and carbon monoxide, along with a host of other atmospheric constituents, also influence the quality of the air we breathe. The difference in nitrogen dioxide is that it has a relatively short lifetime in the atmosphere; once it’s emitted, it only lasts a few hours before it disappears.
-    
+
     Therefore, once communities entered shutdowns, and people’s mobility was severely restricted, the effect on nitrogen dioxide concentrations was the equivalent of flipping a switch. That is not, however, the case with all air pollutants.
   </Chapter>
   <Chapter
@@ -158,7 +157,7 @@ taxonomy:
     ## Seeing Air Pollution from Space
 
     NASA has used the [Ozone Monitoring Instrument (OMI)](https://aura.gsfc.nasa.gov/omi.html "Explore the OMI product") aboard the Aura satellite to observe global nitrogen dioxide levels since 2004. A joint endeavor between NASA, the Royal Netherlands Meteorological Institute (KNMI) and the Finnish Meteorological Institute (FMI), OMI's longer data record provides important context with which to compare any changes observed during the pandemic.
-    
+
     NASA scientists are also leveraging other space-based instruments from international partners to study changes in nitrogen dioxide during the pandemic. These include the [TROPOspheric Monitoring Instrument (TROPOMI)](http://www.tropomi.eu/ "Explore the TROPOMI product") aboard the European Commission’s Copernicus Sentinel-5P satellite. Launched in 2016, TROPOMI provides higher resolution observations than OMI.
   </Chapter>
   <Chapter
@@ -170,10 +169,10 @@ taxonomy:
   >
     ## Reinforcing Measurements: Nighttime Lights
 
-    Changes in nighttime lights during the pandemic can also be tied to changes in nitrogen dioxide levels if the data are properly processed and interpreted. This is because nitrogen dioxide is primarily emitted from burning fossil fuels, and highways light up on nighttime satellite imagery when vehicles are present. 
-    
+    Changes in nighttime lights during the pandemic can also be tied to changes in nitrogen dioxide levels if the data are properly processed and interpreted. This is because nitrogen dioxide is primarily emitted from burning fossil fuels, and highways light up on nighttime satellite imagery when vehicles are present.
+
     Here we see the illuminated web of highways connecting the Los Angeles metropolitan region.
-  
+
     Researchers are using night light observations to track variations in energy use, migration, and transportation in response to social distancing and shutdown measures during the pandemic.
   </Chapter>
   <Chapter
@@ -203,12 +202,12 @@ taxonomy:
       dateTime='2019-04-01'
       compareDateTime='2020-04-01'
     />
-    <Caption 
-      attrAuthor='NASA' 
+    <Caption
+      attrAuthor='NASA'
       attrUrl='https://nasa.gov/'
     >
       Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-    </Caption> 
+    </Caption>
   </Figure>
 </Block>
 
@@ -222,12 +221,12 @@ taxonomy:
       dateTime='2019-06-01'
       compareDateTime='2020-06-01'
     />
-    <Caption 
-      attrAuthor='NASA' 
+    <Caption
+      attrAuthor='NASA'
       attrUrl='https://nasa.gov/'
     >
       Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-    </Caption> 
+    </Caption>
   </Figure>
   <Prose>
     They are comparing the on-the-ground sensor information from NASA's [Pandora Project](https://pandora.gsfc.nasa.gov/ "Explore the Pandora Project") with satellite information from TROPOMI. So far, they have found that nitrogen dioxide hotspots in Atlanta shifted from the airport, shown here, to the city center from April-June 2020.
@@ -247,12 +246,12 @@ taxonomy:
       dateTime='2019-09-01'
       compareDateTime='2020-09-01'
     />
-    <Caption 
-      attrAuthor='NASA' 
+    <Caption
+      attrAuthor='NASA'
       attrUrl='https://nasa.gov/'
     >
       Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-    </Caption> 
+    </Caption>
   </Figure>
 </Block>
 
@@ -266,22 +265,22 @@ taxonomy:
       dateTime='2020-02-01'
       compareDateTime='2022-02-01'
     />
-    <Caption 
-      attrAuthor='NASA' 
+    <Caption
+      attrAuthor='NASA'
       attrUrl='https://nasa.gov/'
     >
       Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-    </Caption> 
+    </Caption>
   </Figure>
   <Prose>
     ## Seeing Rebounds in NO2
-  
+
     After the initial shock of COVID-related shutdowns in the spring, communities worldwide began to reopen and gradually increase mobility. Cars returned to the road, and travel restrictions slowly eased. These resumptions corresponded with relative increases in nitrogen dioxide levels and other air pollutants, as air quality levels began to return to pre-pandemic levels.
-    
+
     This demonstrates how quickly atmospheric nitrogen dioxide responds to reductions in emissions. They will persist as long as emissions persist and decline rapidly if emissions are reduced.
-    
+
     NASA scientists will continue to monitor nitrogen dioxide levels and long-term trends around the world. NASA is expected to launch its [Tropospheric Emissions: Monitoring of Pollution (TEMPO)](http://tempo.si.edu/overview.html "Explore the TEMPO instrument") instrument in 2022, which will provide hourly, high-resolution measurements of nitrogen dioxide, ozone, and other air pollutants across North America, improving future air quality forecasts.
-    
+
     <Link href='/stories/climate-and-covid'>Explore How COVID-19 Is Affecting Earth's Climate</Link>
   </Prose>
 </Block>
\ No newline at end of file
diff --git a/app/lib/index.ts b/app/lib/index.ts
index 908872c7..3e599e89 100644
--- a/app/lib/index.ts
+++ b/app/lib/index.ts
@@ -3,7 +3,7 @@
 'use client';
 
 import {
-  CatalogView,
+  CatalogContent,
   PageHero,
   useFiltersWithQS,
   ReactQueryProvider,
@@ -33,6 +33,7 @@ import {
   DatasetData,
   StoryData,
   VedaData,
+  LegacyGlobalStyles,
 } from '@teamimpact/veda-ui';
 
 /**
@@ -48,7 +49,7 @@ export {
   VedaUIProvider,
 
   // Components
-  CatalogView,
+  CatalogContent,
   PageHero,
   PageHeader,
   PageFooter,
@@ -75,6 +76,7 @@ export {
   timelineDatasetsAtom,
   useTimelineDatasetAtom,
   externalDatasetsAtom,
+  LegacyGlobalStyles,
 };
 
 export type {
diff --git a/app/store/providers/theme.tsx b/app/store/providers/theme.tsx
index 786f0665..23bb0b95 100644
--- a/app/store/providers/theme.tsx
+++ b/app/store/providers/theme.tsx
@@ -35,6 +35,7 @@ const VEDA_OVERRIDE_THEME = {
     base: {
       leadSize: '1.25rem',
       extrabold: '800',
+      line: 'inherit',
       // Increments to the type.base.size for each media breakpoint.
       sizeIncrement: {
         small: '0rem',
diff --git a/app/styles/_uswds-theme.scss b/app/styles/_uswds-theme.scss
index 45158f59..1ec5dce6 100644
--- a/app/styles/_uswds-theme.scss
+++ b/app/styles/_uswds-theme.scss
@@ -1,16 +1,49 @@
 @use 'uswds-core' with (
-  $theme-image-path: '/img',
-  $theme-font-path: '/fonts',
+  $theme-image-path: '~/node_modules/@uswds/uswds/dist/img',
+  $theme-font-path: '~/node_modules/@uswds/uswds/dist/fonts',
   $theme-show-notifications: false,
   $utilities-use-important: true,
   $theme-font-weight-semibold: '600',
   $theme-type-scale-md: 8,
+  $theme-typeface-tokens:
+  (
+    baseFontFamily: (
+      'display-name': var(--base-font-family),
+      'cap-height': 364px
+    )
+  ),
   $theme-utility-breakpoints: (
     'mobile-lg': true,
     'desktop': true
   ),
+  $theme-font-type-serif: 'public-sans',
+  $theme-font-type-sans: 'public-sans',
   $theme-color-base-darkest: 'gray-cool-80',
   $theme-color-base-ink: 'gray-cool-90',
   $theme-color-primary: 'red-50',
   $theme-color-secondary: 'yellow-30',
+  $overflow-settings: (
+    responsive: true,
+  ),
+  $position-settings: (
+    responsive: true,
+  ),
+  $top-settings: (
+    responsive: true,
+  ),
+  $right-settings: (
+    responsive: true,
+  ),
+  $left-settings: (
+    responsive: true,
+  ),
+  $bottom-settings: (
+    responsive: true,
+  ),
+  $z-index-settings: (
+    responsive: true,
+  ),
+  $background-color-settings: (
+    responsive: true,
+  )
 );
\ No newline at end of file
diff --git a/app/styles/index.scss b/app/styles/index.scss
index 0d19ae31..f9d49c64 100644
--- a/app/styles/index.scss
+++ b/app/styles/index.scss
@@ -25,4 +25,15 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+
+// Temporary fix for MDX Legacy style
+.prose {
+  *:not(h1, h2, h3, h4, h5){
+    line-height: 1.5rem;
+  }
+  h1, h2, h3, h4, h5 {
+    line-height: 1;
+  }
 }
\ No newline at end of file
diff --git a/docs/VEDA_UI_COMPONENTS.md b/docs/VEDA_UI_COMPONENTS.md
index 029a853f..0413d3fa 100644
--- a/docs/VEDA_UI_COMPONENTS.md
+++ b/docs/VEDA_UI_COMPONENTS.md
@@ -13,13 +13,13 @@ The most up-to-date list of components, hooks, and types offered by VEDA-UI can
 To use a VEDA-UI component, import it from the library and include it in your application. For example:
 
 ```tsx
-import { PageHero, CatalogView } from '@teamimpact/veda-ui';
+import { PageHero, CatalogContent } from '@teamimpact/veda-ui';
 
 export default function ExamplePage() {
   return (
     <div>
       <PageHero title="Explore Datasets" subtitle="Discover insights from geospatial data." />
-      <CatalogView datasets={[...]} />
+      <CatalogContent datasets={[...]} />
     </div>
   );
 }
diff --git a/package.json b/package.json
index c64e70fd..44973492 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@devseed-ui/theme-provider": "^4.1.0",
-    "@teamimpact/veda-ui": "^5.13.0",
+    "@teamimpact/veda-ui": "^6.1.1",
     "@uswds/uswds": "^3.10.0",
     "geist": "1.2.2",
     "gray-matter": "^4.0.3",
diff --git a/yarn.lock b/yarn.lock
index a9b9dd5b..b1fbf922 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2087,10 +2087,10 @@
   resolved "http://verdaccio.ds.io:4873/@tanstack%2ftable-core/-/table-core-8.20.5.tgz#3974f0b090bed11243d4107283824167a395cf1d"
   integrity sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==
 
-"@teamimpact/veda-ui@^5.13.0":
-  version "5.14.0"
-  resolved "https://registry.npmjs.org/@teamimpact/veda-ui/-/veda-ui-5.14.0.tgz#9c3f18adcafa46f6769c4103bea75409db76b835"
-  integrity sha512-TvlqALPqQaJrOfb84y3w585y8NJHiXGw/29JKsP2zASfvHKsqNP4Fp7OL4JRS3h/Wuw0f/bYbWo+rk+RC6IaWg==
+"@teamimpact/veda-ui@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@teamimpact/veda-ui/-/veda-ui-6.1.1.tgz#ba224244f1b69cb412e55635e04825ec1f49c5bf"
+  integrity sha512-OE9jhatPJkwnfBk8lLOtXnMg8Fp8hSuRS26oo2tb3S4FFT5ivR/a1ywEnnuy/9iS7kXOtzE7uUAtJ5XXUiPXZA==
   dependencies:
     "@codemirror/lang-markdown" "^6.1.1"
     "@codemirror/state" "^6.2.1"