diff --git a/.gitignore b/.gitignore
index 2481d170f..53c8e2ae8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,7 +17,7 @@
 # to fit your needs!
 ################################################
 
-app/scripts/time.json
+packages/veda-ui/src/time.json
 
 node_modules
 bower_components
diff --git a/.stylelintrc.json b/.stylelintrc.json
index e75e13932..28e377ed3 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -13,9 +13,9 @@
     ]
   },
   "ignoreFiles": [
-    "app/scripts/styles/variable-utils.ts",
-    "app/scripts/styles/hug/index.ts",
-    "app/scripts/styles/continuum/utils.ts",
+    "packages/veda-ui/src/styles/variable-utils.ts",
+    "packages/veda-ui/src/styles/hug/index.ts",
+    "packages/veda-ui/src/styles/continuum/utils.ts",
     "**/*.d.ts"
   ]
 }
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 47bb63229..72b696217 100644
--- a/app/index.html
+++ b/app/index.html
@@ -134,7 +134,7 @@ <h1>{{appTitle}}</h1>
     }
   </script>
 
-  <script type='module' src='./scripts/main.tsx'></script>
+  <script type='module' src='../packages/veda-ui/src/main.tsx'></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/docs/development/ARCHITECTURE.md b/docs/development/ARCHITECTURE.md
index 0cd80defa..dce060a1a 100644
--- a/docs/development/ARCHITECTURE.md
+++ b/docs/development/ARCHITECTURE.md
@@ -83,10 +83,10 @@ To simplify file access we use aliases for the most common paths so that they ca
 For example, to access file inside the `styles` folder you'd use `$styles/filename` instead of having to use a relative path. This get's very handy when we have several nested folders.
 
 Currently the following aliases exist:
-- `$components/<file>` => `app/scripts/components`
-- `$styles/<file>` => `app/scripts/styles`
-- `$utils/<file>` => `app/scripts/utils`
-- `$context/<file>` => `app/scripts/context`
+- `$components/<file>` => `packages/veda-ui/src/components`
+- `$styles/<file>` => `packages/veda-ui/src/styles`
+- `$utils/<file>` => `packages/veda-ui/src/utils`
+- `$context/<file>` => `packages/veda-ui/src/context`
 
 To add a new alias, add the respecting naming and path under `alias` in the `package.json`.  
 The test runner (Jest) also has to be made aware of the mapping, and this is done through some code in `jest.config.js` under `moduleNameMapper`. You shouldn't need to do anything there, but if things break it is a place to look at.
diff --git a/gulpfile.js b/gulpfile.js
index 8c5779825..84119fee7 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -29,7 +29,7 @@ process.env.APP_BUILD_TIME = Date.now();
 
 const parcelCli = path.join(__dirname, './node_modules/parcel/lib/cli.js');
 const parcelConfig = path.join(__dirname, '.parcelrc');
-const parcelLibConfig = path.join(__dirname, '.parcelrc-lib');
+const parcelLibConfig = path.join(__dirname, 'packages/veda-ui/.parcelrc-lib');
 
 // /////////////////////////////////////////////////////////////////////////////
 // ----------------------- Watcher and custom tasks --------------------------//
@@ -89,7 +89,7 @@ function copyUswdsImages() {
 function parcelBuildLib(cb) {
   const args = [
     'build',
-    'app/scripts/libs/index.ts',
+    'packages/veda-ui/src/libs/index.ts',
     '--dist-dir=lib',
     '--config',
     parcelLibConfig
diff --git a/jest.config.js b/jest.config.js
index 551e5e217..922114058 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -81,9 +81,9 @@ module.exports = {
     // To simplify keeping the alias in sync the code below converts the aliases
     // defined in the package.json to module mappings:
     // From:
-    // "$styles": "~/app/scripts/styles"
+    // "$styles": "~/packages/veda-ui/src/styles"
     // To:
-    // '^\\$styles(.*)$': '<rootDir>/app/scripts/styles$1'
+    // '^\\$styles(.*)$': '<rootDir>/packages/veda-ui/src/styles$1'
     ...Object.entries(pkg.alias).reduce((acc, [key, value]) => {
       return value.startsWith('~/')
         ? {
diff --git a/package.json b/package.json
index 9896b115f..403b5c6a1 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "url": "https://github.com/NASA-IMPACT/veda-ui.git"
   },
   "license": "Apache-2.0",
-  "source": "./app/scripts/index.ts",
+  "source": "./packages/veda-ui/src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",
   "types": "lib/index.d.ts",
@@ -27,15 +27,15 @@
     "clean": "gulp clean",
     "lint": "yarn lint:storybook && yarn lint:scripts && yarn lint:css",
     "lint:storybook": "eslint storybook/src/",
-    "lint:scripts": "eslint app/scripts/",
-    "lint:css": "stylelint 'app/styles/**/**' 'app/scripts/**/*.(js|ts|tsx|jsx)'",
+    "lint:scripts": "eslint packages/veda-ui/src/",
+    "lint:css": "stylelint 'packages/veda-ui/src/styles/**/**' 'packages/veda-ui/src/**/*.(js|ts|tsx|jsx)'",
     "ts-check": "yarn tsc --noEmit --skipLibCheck",
     "test": "TZ=UTC jest",
     "pretest:e2e": "node test/playwright/generateTestData.js",
     "test:e2e": "yarn playwright test",
     "test:e2e:ui": "yarn playwright test --ui",
     "release": "release-it --",
-    "watch:buildlib": "chokidar \"app/scripts/**/*\" -c \"yarn buildlib\" --initial",
+    "watch:buildlib": "chokidar \"packages/veda-ui/src/**/*\" -c \"yarn buildlib\" --initial",
     "storybook:install": "cd storybook && yarn install",
     "storybook:run": "cd storybook && yarn run storybook"
   },
@@ -260,15 +260,17 @@
     ".*/meta/"
   ],
   "alias": {
-    "$components": "~/app/scripts/components",
-    "$styles": "~/app/scripts/styles",
-    "$utils": "~/app/scripts/utils",
-    "$types": "~/app/scripts/types",
-    "$context": "~/app/scripts/context",
-    "$data-layer": "~/app/scripts/data-layer",
-    "$uswds": "~/app/scripts/uswds",
-    "$libs": "~/app/scripts/libs",
+    "$components": "~/packages/veda-ui/src/components",
+    "$styles": "~/packages/veda-ui/src/styles",
+    "$utils": "~/packages/veda-ui/src/utils",
+    "$types": "~/packages/veda-ui/src/types",
+    "$context": "~/packages/veda-ui/src/context",
+    "$data-layer": "~/packages/veda-ui/src/data-layer",
+    "$uswds": "~/packages/veda-ui/src/uswds",
+    "$libs": "~/packages/veda-ui/src/libs",
+    "$graphics": "~/packages/veda-ui/graphics",
     "$test": "~/test",
+    "$mock": "~/mock",
     "$static": "~/static"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
diff --git a/.parcelrc-lib b/packages/veda-ui/.parcelrc-lib
similarity index 60%
rename from .parcelrc-lib
rename to packages/veda-ui/.parcelrc-lib
index d8ad865bf..175a2c015 100644
--- a/.parcelrc-lib
+++ b/packages/veda-ui/.parcelrc-lib
@@ -1,4 +1,4 @@
 {
-  "extends": ["./.parcelrc"],
+  "extends": ["../../.parcelrc"],
   "resolvers": ["parcel-resolver-alias", "..."]
 }
diff --git a/app/graphics/content/tour-analysis.gif b/packages/veda-ui/graphics/content/tour-analysis.gif
similarity index 100%
rename from app/graphics/content/tour-analysis.gif
rename to packages/veda-ui/graphics/content/tour-analysis.gif
diff --git a/app/graphics/content/tour-comparison.gif b/packages/veda-ui/graphics/content/tour-comparison.gif
similarity index 100%
rename from app/graphics/content/tour-comparison.gif
rename to packages/veda-ui/graphics/content/tour-comparison.gif
diff --git a/app/graphics/layout/root-welcome--cover.jpg b/packages/veda-ui/graphics/layout/root-welcome--cover.jpg
similarity index 100%
rename from app/graphics/layout/root-welcome--cover.jpg
rename to packages/veda-ui/graphics/layout/root-welcome--cover.jpg
diff --git a/app/graphics/layout/user-enthusiasts.jpg b/packages/veda-ui/graphics/layout/user-enthusiasts.jpg
similarity index 100%
rename from app/graphics/layout/user-enthusiasts.jpg
rename to packages/veda-ui/graphics/layout/user-enthusiasts.jpg
diff --git a/app/graphics/layout/user-researcher.jpg b/packages/veda-ui/graphics/layout/user-researcher.jpg
similarity index 100%
rename from app/graphics/layout/user-researcher.jpg
rename to packages/veda-ui/graphics/layout/user-researcher.jpg
diff --git a/app/graphics/layout/user-scientists.jpg b/packages/veda-ui/graphics/layout/user-scientists.jpg
similarity index 100%
rename from app/graphics/layout/user-scientists.jpg
rename to packages/veda-ui/graphics/layout/user-scientists.jpg
diff --git a/app/graphics/layout/vp-01-illu.png b/packages/veda-ui/graphics/layout/vp-01-illu.png
similarity index 100%
rename from app/graphics/layout/vp-01-illu.png
rename to packages/veda-ui/graphics/layout/vp-01-illu.png
diff --git a/app/graphics/layout/vp-02-illu.png b/packages/veda-ui/graphics/layout/vp-02-illu.png
similarity index 100%
rename from app/graphics/layout/vp-02-illu.png
rename to packages/veda-ui/graphics/layout/vp-02-illu.png
diff --git a/app/graphics/layout/vp-03-illu.png b/packages/veda-ui/graphics/layout/vp-03-illu.png
similarity index 100%
rename from app/graphics/layout/vp-03-illu.png
rename to packages/veda-ui/graphics/layout/vp-03-illu.png
diff --git a/app/scripts/components/about/index.tsx b/packages/veda-ui/src/components/about/index.tsx
similarity index 100%
rename from app/scripts/components/about/index.tsx
rename to packages/veda-ui/src/components/about/index.tsx
diff --git a/app/scripts/components/common/banner/banner.scss b/packages/veda-ui/src/components/common/banner/banner.scss
similarity index 100%
rename from app/scripts/components/common/banner/banner.scss
rename to packages/veda-ui/src/components/common/banner/banner.scss
diff --git a/app/scripts/components/common/banner/index.tsx b/packages/veda-ui/src/components/common/banner/index.tsx
similarity index 100%
rename from app/scripts/components/common/banner/index.tsx
rename to packages/veda-ui/src/components/common/banner/index.tsx
diff --git a/app/scripts/components/common/blocks/block-constant.js b/packages/veda-ui/src/components/common/blocks/block-constant.js
similarity index 100%
rename from app/scripts/components/common/blocks/block-constant.js
rename to packages/veda-ui/src/components/common/blocks/block-constant.js
diff --git a/app/scripts/components/common/blocks/block-map.tsx b/packages/veda-ui/src/components/common/blocks/block-map.tsx
similarity index 100%
rename from app/scripts/components/common/blocks/block-map.tsx
rename to packages/veda-ui/src/components/common/blocks/block-map.tsx
diff --git a/app/scripts/components/common/blocks/embed.tsx b/packages/veda-ui/src/components/common/blocks/embed.tsx
similarity index 100%
rename from app/scripts/components/common/blocks/embed.tsx
rename to packages/veda-ui/src/components/common/blocks/embed.tsx
diff --git a/app/scripts/components/common/blocks/figure.jsx b/packages/veda-ui/src/components/common/blocks/figure.js
similarity index 100%
rename from app/scripts/components/common/blocks/figure.jsx
rename to packages/veda-ui/src/components/common/blocks/figure.js
diff --git a/packages/veda-ui/src/components/common/blocks/figure.jsx b/packages/veda-ui/src/components/common/blocks/figure.jsx
new file mode 100644
index 000000000..c7674bb5d
--- /dev/null
+++ b/packages/veda-ui/src/components/common/blocks/figure.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import T from 'prop-types';
+import { figureDisplayName, captionDisplayName } from './block-constant';
+import { Figure } from '$components/common/figure';
+
+const ContentBlockFigure = (props) => {
+  const { children } = props;
+  // Figure can be empty
+  if (children && children.length) {
+    const captionChild = children.filter(
+      (e) => e.type.displayName === captionDisplayName
+    );
+    if (captionChild.length > 1)
+      throw Error('More than one caption for a figure');
+  }
+  return <Figure {...props} />;
+};
+
+ContentBlockFigure.propTypes = {
+  children: T.node
+};
+
+const StyledContentBlockFigure = styled(ContentBlockFigure)`
+  img {
+    width: 100%;
+  }
+`;
+StyledContentBlockFigure.displayName = figureDisplayName;
+
+export default StyledContentBlockFigure;
diff --git a/app/scripts/components/common/blocks/images/compare.jsx b/packages/veda-ui/src/components/common/blocks/images/compare.js
similarity index 100%
rename from app/scripts/components/common/blocks/images/compare.jsx
rename to packages/veda-ui/src/components/common/blocks/images/compare.js
diff --git a/packages/veda-ui/src/components/common/blocks/images/compare.jsx b/packages/veda-ui/src/components/common/blocks/images/compare.jsx
new file mode 100644
index 000000000..0d5f8c15c
--- /dev/null
+++ b/packages/veda-ui/src/components/common/blocks/images/compare.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+import ReactCompareImage from 'react-compare-image';
+import T from 'prop-types';
+
+import { glsp, themeVal } from '@devseed-ui/theme-provider';
+
+export const MediaCompare = styled.figure`
+  /* Style for plugin (react compare image) */
+  /* handle */
+  > div {
+    > div:nth-child(3) > div:nth-child(2) {
+      background-color: ${themeVal('color.primary')};
+      width: 3rem;
+      height: 3rem;
+    }
+    /* label */
+    > div:nth-child(4) > div:nth-child(1),
+    > div:nth-child(5) > div:nth-child(1) {
+      border-radius: ${themeVal('shape.rounded')};
+    }
+  }
+
+  /* stylelint-disable-next-line */
+  > *:not(:last-child) {
+    margin-bottom: ${glsp()};
+  }
+`;
+
+function CompareImage({
+  leftImageSrc,
+  leftImageAlt,
+  leftImageLabel,
+  rightImageSrc,
+  rightImageAlt,
+  rightImageLabel
+}) {
+  return (
+    <MediaCompare>
+      <ReactCompareImage
+        leftImage={leftImageSrc}
+        leftImageAlt={leftImageAlt}
+        leftImageLabel={leftImageLabel}
+        rightImage={rightImageSrc}
+        rightImageAlt={rightImageAlt}
+        rightImageLabel={rightImageLabel}
+      />
+    </MediaCompare>
+  );
+}
+
+CompareImage.propTypes = {
+  leftImageSrc: T.string.isRequired,
+  leftImageAlt: T.string.isRequired,
+  leftImageLabel: T.string,
+  rightImageSrc: T.string.isRequired,
+  rightImageAlt: T.string.isRequired,
+  rightImageLabel: T.string
+};
+
+export default CompareImage;
diff --git a/app/scripts/components/common/blocks/images/index.jsx b/packages/veda-ui/src/components/common/blocks/images/index.js
similarity index 100%
rename from app/scripts/components/common/blocks/images/index.jsx
rename to packages/veda-ui/src/components/common/blocks/images/index.js
diff --git a/packages/veda-ui/src/components/common/blocks/images/index.jsx b/packages/veda-ui/src/components/common/blocks/images/index.jsx
new file mode 100644
index 000000000..612546f53
--- /dev/null
+++ b/packages/veda-ui/src/components/common/blocks/images/index.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import T from 'prop-types';
+import {
+  Figure,
+  Figcaption,
+  FigcaptionInner,
+  FigureAttribution
+} from '$components/common/figure';
+
+import { captionDisplayName } from '$components/common/blocks/block-constant';
+
+export function Caption({ children, attrAuthor, attrUrl }) {
+  return (
+    <Figcaption>
+      {children && <FigcaptionInner>{children}</FigcaptionInner>}
+      <FigureAttribution author={attrAuthor} url={attrUrl} forwardedAs='span' />
+    </Figcaption>
+  );
+}
+
+Caption.displayName = captionDisplayName;
+
+Caption.propTypes = {
+  attrAuthor: T.string,
+  attrUrl: T.string,
+  children: T.node
+};
+
+export default function Image(props) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { align, caption, attrAuthor, ...propsWithoutAttrs } = props;
+  if (caption || attrAuthor) {
+    const imageAlign = align ? align : 'center';
+    return (
+      // if it is an inline image with a caption
+      <Figure className={`align-${imageAlign}`}>
+        <img loading='lazy' {...propsWithoutAttrs} />
+        <Caption attrAuthor={attrAuthor} attrUrl={props.attrUrl}>
+          {caption}
+        </Caption>
+      </Figure>
+    );
+  }
+
+  const imageAlign = align ? align : 'left';
+  return (
+    <img
+      className={`img-align-${imageAlign}`}
+      loading='lazy'
+      {...propsWithoutAttrs}
+    />
+  );
+}
+
+Image.propTypes = {
+  src: T.string,
+  alt: T.string,
+  align: T.string,
+  caption: T.string,
+  attrAuthor: T.string,
+  attrUrl: T.string
+};
diff --git a/app/scripts/components/common/blocks/index.test.jsx b/packages/veda-ui/src/components/common/blocks/index.test.js
similarity index 100%
rename from app/scripts/components/common/blocks/index.test.jsx
rename to packages/veda-ui/src/components/common/blocks/index.test.js
diff --git a/packages/veda-ui/src/components/common/blocks/index.test.jsx b/packages/veda-ui/src/components/common/blocks/index.test.jsx
new file mode 100644
index 000000000..49b9d675f
--- /dev/null
+++ b/packages/veda-ui/src/components/common/blocks/index.test.jsx
@@ -0,0 +1,49 @@
+/**
+ * set up test environment for jest
+ * @jest-environment jsdom
+ */
+import React from 'react';
+
+import renderWithTheme from '$test/utils';
+import Block from '$components/common/blocks/';
+import {
+  generalErrorMessage,
+  blockTypeErrorMessage,
+  contentTypeErrorMessage
+} from '$components/common/blocks/block-constant';
+import Figure from '$components/common/blocks/figure';
+import { Caption } from '$components/common/blocks/images';
+
+describe('Block edge case tests', () => {
+  it('Throws a content type when not supported content composition is passed', () => {
+    const { getByText } = renderWithTheme(
+      <Block>
+        <p>test</p>
+      </Block>
+    );
+    expect(getByText(new RegExp(contentTypeErrorMessage, 'g'))).toBeDefined();
+  });
+
+  it('Throws an error when a block has two captions', () => {
+    const { getByText } = renderWithTheme(
+      <Block>
+        <Figure>
+          <Caption />
+          <Caption />
+        </Figure>
+      </Block>
+    );
+    expect(getByText(new RegExp(generalErrorMessage, 'g'))).toBeDefined();
+  });
+
+  it('Throws an error when a block has wrong type name', () => {
+    const { getByText } = renderWithTheme(
+      <Block type='almost-full'>
+        <Figure>
+          <Caption />
+        </Figure>
+      </Block>
+    );
+    expect(getByText(new RegExp(blockTypeErrorMessage, 'g'))).toBeDefined();
+  });
+});
diff --git a/app/scripts/components/common/blocks/index.tsx b/packages/veda-ui/src/components/common/blocks/index.tsx
similarity index 100%
rename from app/scripts/components/common/blocks/index.tsx
rename to packages/veda-ui/src/components/common/blocks/index.tsx
diff --git a/app/scripts/components/common/blocks/lazy-components.jsx b/packages/veda-ui/src/components/common/blocks/lazy-components.js
similarity index 100%
rename from app/scripts/components/common/blocks/lazy-components.jsx
rename to packages/veda-ui/src/components/common/blocks/lazy-components.js
diff --git a/packages/veda-ui/src/components/common/blocks/lazy-components.jsx b/packages/veda-ui/src/components/common/blocks/lazy-components.jsx
new file mode 100644
index 000000000..690fd5dcd
--- /dev/null
+++ b/packages/veda-ui/src/components/common/blocks/lazy-components.jsx
@@ -0,0 +1,258 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import T from 'prop-types';
+import LazyLoad from 'react-lazyload';
+
+import Chart from '$components/common/chart/block';
+import { chartMaxHeight } from '$components/common/chart/constant';
+
+import Table, { tableHeight } from '$components/common/table';
+import CompareImage from '$components/common/blocks/images/compare';
+
+import Map, { mapHeight } from '$components/common/blocks/block-map';
+import MultiLayerMapBlock from '$components/common/blocks/multilayer-block-map';
+import Embed from '$components/common/blocks/embed';
+import {
+  ScrollytellingBlock,
+  SCROLLY_MAP_HEIGHT
+} from '$components/common/blocks/scrollytelling';
+
+import { LoadingSkeleton } from '$components/common/loading-skeleton';
+import { veda_faux_module_datasets } from '$data-layer/datasets';
+import { reconcileDatasets } from '$components/exploration/data-utils';
+import { getDatasetLayers } from '$utils/data-utils';
+import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
+import { DatasetStatus } from '$components/exploration/types.d.ts';
+import { useVedaUI } from '$context/veda-ui-provider';
+
+const getDataLayer = (layerIndex, layers) => {
+  if (!layers || layers.length <= layerIndex) return null;
+  const layer = layers[layerIndex];
+  if (layer.status !== DatasetStatus.SUCCESS) return null;
+  return {
+    ...layer,
+    settings: {
+      isVisible: true,
+      opacity: 100
+    }
+  };
+};
+
+const getAvailableLayers = (datasetId, datasets) => {
+  if (!datasetId || !datasets[datasetId]) return [];
+  return datasets[datasetId]?.data?.layers || [];
+};
+
+export function useMapLayers(
+  datasetId,
+  layerId,
+  datasets,
+  includeCompare = true
+) {
+  const { envApiStacEndpoint } = useVedaUI();
+
+  const datasetLayers = useMemo(() => getDatasetLayers(datasets), [datasets]);
+
+  const fullLayerId = useMemo(() => {
+    const layers = getAvailableLayers(datasetId, datasets);
+    const match = layers.find((l) => l.id === layerId);
+    return match ? match.id : layerId;
+  }, [datasetId, layerId, datasets]);
+
+  const layersToFetch = useMemo(() => {
+    const [baseMapStaticData] = reconcileDatasets(
+      [fullLayerId],
+      datasetLayers,
+      []
+    );
+    let totalLayers = [baseMapStaticData];
+
+    if (includeCompare) {
+      const baseMapStaticCompareData = baseMapStaticData.data.compare;
+      if (baseMapStaticCompareData && 'layerId' in baseMapStaticCompareData) {
+        const compareLayerId = baseMapStaticCompareData.layerId;
+        const [compareMapStaticData] = reconcileDatasets(
+          compareLayerId ? [compareLayerId] : [],
+          datasetLayers,
+          []
+        );
+        totalLayers = [...totalLayers, compareMapStaticData];
+      }
+    }
+    return totalLayers;
+  }, [fullLayerId, datasetLayers, includeCompare]);
+
+  const [layers, setLayers] = useState(layersToFetch);
+
+  useEffect(() => {
+    setLayers(layersToFetch);
+  }, [layersToFetch]);
+
+  useReconcileWithStacMetadata(layers, setLayers, envApiStacEndpoint);
+
+  const baseDataLayer = useMemo(() => getDataLayer(0, layers), [layers]);
+  const compareDataLayer = useMemo(
+    () => (includeCompare ? getDataLayer(1, layers) : null),
+    [layers, includeCompare]
+  );
+
+  return { baseDataLayer, compareDataLayer };
+}
+
+export function LazyChart(props) {
+  return (
+    <LazyLoad
+      placeholder={<LoadingSkeleton height={`${chartMaxHeight}px`} />}
+      offset={50}
+      once
+    >
+      <Chart {...props} />
+    </LazyLoad>
+  );
+}
+
+export function LazyScrollyTelling(props) {
+  return (
+    <LazyLoad
+      placeholder={<LoadingSkeleton height={SCROLLY_MAP_HEIGHT} />}
+      offset={100}
+      once
+    >
+      <ScrollytellingBlock {...props} datasets={veda_faux_module_datasets} />
+    </LazyLoad>
+  );
+}
+
+export function LazyMap({
+  datasetId,
+  layerId,
+  compareDataLayer: compareOverride,
+  ...otherProps
+}) {
+  const { baseDataLayer, compareDataLayer: derivedCompare } = useMapLayers(
+    datasetId,
+    layerId,
+    veda_faux_module_datasets,
+    true
+  );
+
+  const compareDataLayer = compareOverride ?? derivedCompare;
+
+  return (
+    <LazyLoad
+      placeholder={<LoadingSkeleton height={mapHeight} />}
+      offset={100}
+      once
+    >
+      <Map
+        {...otherProps}
+        baseDataLayer={baseDataLayer}
+        compareDataLayer={compareDataLayer}
+      />
+    </LazyLoad>
+  );
+}
+
+export function LazyMultilayerMap({
+  datasetId,
+  defaultLayerId,
+  defaultDateTime,
+  ...otherProps
+}) {
+  const [selectedLayerId, setSelectedLayerId] = useState(defaultLayerId);
+  const [selectedDateTime, setSelectedDateTime] = useState(defaultDateTime);
+
+  useEffect(() => {
+    setSelectedLayerId(defaultLayerId);
+  }, [defaultLayerId]);
+
+  useEffect(() => {
+    setSelectedDateTime(defaultDateTime);
+  }, [defaultDateTime]);
+
+  const { baseDataLayer } = useMapLayers(
+    datasetId,
+    selectedLayerId,
+    veda_faux_module_datasets,
+    false
+  );
+
+  const availableLayers = useMemo(
+    () => getAvailableLayers(datasetId, veda_faux_module_datasets),
+    [datasetId]
+  );
+
+  const handleLayerChange = (newLayerId) => {
+    setSelectedLayerId(newLayerId);
+  };
+
+  const handleDateChange = (newDate) => {
+    setSelectedDateTime(newDate);
+  };
+
+  return (
+    <LazyLoad
+      placeholder={<LoadingSkeleton height={mapHeight} />}
+      offset={100}
+      once
+    >
+      <MultiLayerMapBlock
+        {...otherProps}
+        selectedLayerId={selectedLayerId}
+        baseDataLayer={baseDataLayer}
+        availableLayers={availableLayers}
+        dateTime={selectedDateTime}
+        onLayerChange={handleLayerChange}
+        onDateChange={handleDateChange}
+      />
+    </LazyLoad>
+  );
+}
+
+export function LazyCompareImage(props) {
+  return (
+    <LazyLoad placeholder={<LoadingSkeleton height={200} />} offset={50} once>
+      <CompareImage {...props} />
+    </LazyLoad>
+  );
+}
+
+export function LazyTable(props) {
+  return (
+    <LazyLoad
+      placeholder={<LoadingSkeleton height={tableHeight} />}
+      offset={50}
+      once
+    >
+      <Table {...props} />
+    </LazyLoad>
+  );
+}
+
+export function LazyEmbed(props) {
+  return (
+    <LazyLoad
+      placeholder={<LoadingSkeleton height={props.height} />}
+      offset={50}
+      once
+    >
+      <Embed {...props} />
+    </LazyLoad>
+  );
+}
+
+LazyEmbed.propTypes = {
+  src: T.string,
+  height: T.number
+};
+
+LazyMap.propTypes = {
+  datasetId: T.string.isRequired,
+  layerId: T.string.isRequired,
+  compareDataLayer: T.object
+};
+
+LazyMultilayerMap.propTypes = {
+  datasetId: T.string.isRequired,
+  defaultLayerId: T.string.isRequired,
+  defaultDateTime: T.string
+};
diff --git a/app/scripts/components/common/blocks/multilayer-block-map.tsx b/packages/veda-ui/src/components/common/blocks/multilayer-block-map.tsx
similarity index 100%
rename from app/scripts/components/common/blocks/multilayer-block-map.tsx
rename to packages/veda-ui/src/components/common/blocks/multilayer-block-map.tsx
diff --git a/app/scripts/components/common/blocks/multilayer-map.scss b/packages/veda-ui/src/components/common/blocks/multilayer-map.scss
similarity index 100%
rename from app/scripts/components/common/blocks/multilayer-map.scss
rename to packages/veda-ui/src/components/common/blocks/multilayer-map.scss
diff --git a/app/scripts/components/common/blocks/scrollytelling/chapter.tsx b/packages/veda-ui/src/components/common/blocks/scrollytelling/chapter.tsx
similarity index 100%
rename from app/scripts/components/common/blocks/scrollytelling/chapter.tsx
rename to packages/veda-ui/src/components/common/blocks/scrollytelling/chapter.tsx
diff --git a/app/scripts/components/common/blocks/scrollytelling/index.tsx b/packages/veda-ui/src/components/common/blocks/scrollytelling/index.tsx
similarity index 100%
rename from app/scripts/components/common/blocks/scrollytelling/index.tsx
rename to packages/veda-ui/src/components/common/blocks/scrollytelling/index.tsx
diff --git a/app/scripts/components/common/blocks/scrollytelling/map-error-message.tsx b/packages/veda-ui/src/components/common/blocks/scrollytelling/map-error-message.tsx
similarity index 100%
rename from app/scripts/components/common/blocks/scrollytelling/map-error-message.tsx
rename to packages/veda-ui/src/components/common/blocks/scrollytelling/map-error-message.tsx
diff --git a/app/scripts/components/common/bounds-fieldset.jsx b/packages/veda-ui/src/components/common/bounds-fieldset.js
similarity index 100%
rename from app/scripts/components/common/bounds-fieldset.jsx
rename to packages/veda-ui/src/components/common/bounds-fieldset.js
diff --git a/packages/veda-ui/src/components/common/bounds-fieldset.jsx b/packages/veda-ui/src/components/common/bounds-fieldset.jsx
new file mode 100644
index 000000000..113349476
--- /dev/null
+++ b/packages/veda-ui/src/components/common/bounds-fieldset.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import T from 'prop-types';
+import { FormFieldsetHeader, FormLegend } from '@devseed-ui/form';
+
+import StressedFormGroupInput from './stressed-form-group-input';
+import { validateRangeNum } from '$utils/utils';
+import { FormFieldsetCompact, FormFieldsetBodyColumns } from '$styles/fieldset';
+
+export default function BoundsFieldset(props) {
+  const validateLon = validateRangeNum(-180, 180);
+  const validateLat = validateRangeNum(-90, 90);
+
+  const { id, title, placeholders, value, onChange } = props;
+
+  return (
+    <FormFieldsetCompact>
+      <FormFieldsetHeader>
+        <FormLegend>{title}</FormLegend>
+      </FormFieldsetHeader>
+      <FormFieldsetBodyColumns>
+        <StressedFormGroupInput
+          inputType='text'
+          inputSize='small'
+          id={`${id}-lon`}
+          name={`${id}-lon`}
+          label='Longitude'
+          value={value[0] === undefined ? '' : value[0]}
+          validate={validateLon}
+          onChange={(v) => onChange([Number(v), value[1]])}
+          placeholder={placeholders[0]}
+        />
+        <StressedFormGroupInput
+          inputType='text'
+          inputSize='small'
+          id={`${id}-lat`}
+          name={`${id}-lat`}
+          label='Latitude'
+          value={value[1] === undefined ? '' : value[1]}
+          validate={validateLat}
+          onChange={(v) => onChange([value[0], Number(v)])}
+          placeholder={placeholders[1]}
+        />
+      </FormFieldsetBodyColumns>
+    </FormFieldsetCompact>
+  );
+}
+
+BoundsFieldset.propTypes = {
+  id: T.string,
+  title: T.string,
+  placeholders: T.array,
+  value: T.array,
+  onChange: T.func
+};
diff --git a/app/scripts/components/common/browse-controls/constants.js b/packages/veda-ui/src/components/common/browse-controls/constants.js
similarity index 100%
rename from app/scripts/components/common/browse-controls/constants.js
rename to packages/veda-ui/src/components/common/browse-controls/constants.js
diff --git a/app/scripts/components/common/browse-controls/index.tsx b/packages/veda-ui/src/components/common/browse-controls/index.tsx
similarity index 100%
rename from app/scripts/components/common/browse-controls/index.tsx
rename to packages/veda-ui/src/components/common/browse-controls/index.tsx
diff --git a/app/scripts/components/common/browse-controls/use-browse-controls.ts b/packages/veda-ui/src/components/common/browse-controls/use-browse-controls.ts
similarity index 100%
rename from app/scripts/components/common/browse-controls/use-browse-controls.ts
rename to packages/veda-ui/src/components/common/browse-controls/use-browse-controls.ts
diff --git a/app/scripts/components/common/card-sources-list.tsx b/packages/veda-ui/src/components/common/card-sources-list.tsx
similarity index 100%
rename from app/scripts/components/common/card-sources-list.tsx
rename to packages/veda-ui/src/components/common/card-sources-list.tsx
diff --git a/app/scripts/components/common/card/classic.tsx b/packages/veda-ui/src/components/common/card/classic.tsx
similarity index 100%
rename from app/scripts/components/common/card/classic.tsx
rename to packages/veda-ui/src/components/common/card/classic.tsx
diff --git a/app/scripts/components/common/card/cover.tsx b/packages/veda-ui/src/components/common/card/cover.tsx
similarity index 100%
rename from app/scripts/components/common/card/cover.tsx
rename to packages/veda-ui/src/components/common/card/cover.tsx
diff --git a/app/scripts/components/common/card/featured.tsx b/packages/veda-ui/src/components/common/card/featured.tsx
similarity index 100%
rename from app/scripts/components/common/card/featured.tsx
rename to packages/veda-ui/src/components/common/card/featured.tsx
diff --git a/app/scripts/components/common/card/horizontal-info.tsx b/packages/veda-ui/src/components/common/card/horizontal-info.tsx
similarity index 100%
rename from app/scripts/components/common/card/horizontal-info.tsx
rename to packages/veda-ui/src/components/common/card/horizontal-info.tsx
diff --git a/app/scripts/components/common/card/index.tsx b/packages/veda-ui/src/components/common/card/index.tsx
similarity index 100%
rename from app/scripts/components/common/card/index.tsx
rename to packages/veda-ui/src/components/common/card/index.tsx
diff --git a/app/scripts/components/common/card/styles.scss b/packages/veda-ui/src/components/common/card/styles.scss
similarity index 100%
rename from app/scripts/components/common/card/styles.scss
rename to packages/veda-ui/src/components/common/card/styles.scss
diff --git a/app/scripts/components/common/card/styles.tsx b/packages/veda-ui/src/components/common/card/styles.tsx
similarity index 100%
rename from app/scripts/components/common/card/styles.tsx
rename to packages/veda-ui/src/components/common/card/styles.tsx
diff --git a/app/scripts/components/common/card/uswds-cards/base-card.tsx b/packages/veda-ui/src/components/common/card/uswds-cards/base-card.tsx
similarity index 100%
rename from app/scripts/components/common/card/uswds-cards/base-card.tsx
rename to packages/veda-ui/src/components/common/card/uswds-cards/base-card.tsx
diff --git a/app/scripts/components/common/card/uswds-cards/default-card.tsx b/packages/veda-ui/src/components/common/card/uswds-cards/default-card.tsx
similarity index 100%
rename from app/scripts/components/common/card/uswds-cards/default-card.tsx
rename to packages/veda-ui/src/components/common/card/uswds-cards/default-card.tsx
diff --git a/app/scripts/components/common/card/uswds-cards/flag-card.tsx b/packages/veda-ui/src/components/common/card/uswds-cards/flag-card.tsx
similarity index 100%
rename from app/scripts/components/common/card/uswds-cards/flag-card.tsx
rename to packages/veda-ui/src/components/common/card/uswds-cards/flag-card.tsx
diff --git a/app/scripts/components/common/card/uswds-cards/styles.scss b/packages/veda-ui/src/components/common/card/uswds-cards/styles.scss
similarity index 100%
rename from app/scripts/components/common/card/uswds-cards/styles.scss
rename to packages/veda-ui/src/components/common/card/uswds-cards/styles.scss
diff --git a/app/scripts/components/common/card/uswds-cards/topic-card.tsx b/packages/veda-ui/src/components/common/card/uswds-cards/topic-card.tsx
similarity index 100%
rename from app/scripts/components/common/card/uswds-cards/topic-card.tsx
rename to packages/veda-ui/src/components/common/card/uswds-cards/topic-card.tsx
diff --git a/app/scripts/components/common/card/uswds-cards/types.ts b/packages/veda-ui/src/components/common/card/uswds-cards/types.ts
similarity index 100%
rename from app/scripts/components/common/card/uswds-cards/types.ts
rename to packages/veda-ui/src/components/common/card/uswds-cards/types.ts
diff --git a/app/scripts/components/common/card/uswds-cards/utils.tsx b/packages/veda-ui/src/components/common/card/uswds-cards/utils.tsx
similarity index 100%
rename from app/scripts/components/common/card/uswds-cards/utils.tsx
rename to packages/veda-ui/src/components/common/card/uswds-cards/utils.tsx
diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/packages/veda-ui/src/components/common/catalog/catalog-card.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/catalog-card.tsx
rename to packages/veda-ui/src/components/common/catalog/catalog-card.tsx
diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/packages/veda-ui/src/components/common/catalog/catalog-content.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/catalog-content.tsx
rename to packages/veda-ui/src/components/common/catalog/catalog-content.tsx
diff --git a/app/scripts/components/common/catalog/catalog-legacy/catalog-content.tsx b/packages/veda-ui/src/components/common/catalog/catalog-legacy/catalog-content.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/catalog-legacy/catalog-content.tsx
rename to packages/veda-ui/src/components/common/catalog/catalog-legacy/catalog-content.tsx
diff --git a/app/scripts/components/common/catalog/catalog-legacy/catalog-tags.tsx b/packages/veda-ui/src/components/common/catalog/catalog-legacy/catalog-tags.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/catalog-legacy/catalog-tags.tsx
rename to packages/veda-ui/src/components/common/catalog/catalog-legacy/catalog-tags.tsx
diff --git a/app/scripts/components/common/catalog/catalog-legacy/filter-tag.tsx b/packages/veda-ui/src/components/common/catalog/catalog-legacy/filter-tag.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/catalog-legacy/filter-tag.tsx
rename to packages/veda-ui/src/components/common/catalog/catalog-legacy/filter-tag.tsx
diff --git a/app/scripts/components/common/catalog/catalog-legacy/filters-control.tsx b/packages/veda-ui/src/components/common/catalog/catalog-legacy/filters-control.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/catalog-legacy/filters-control.tsx
rename to packages/veda-ui/src/components/common/catalog/catalog-legacy/filters-control.tsx
diff --git a/app/scripts/components/common/catalog/catalog-tags.tsx b/packages/veda-ui/src/components/common/catalog/catalog-tags.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/catalog-tags.tsx
rename to packages/veda-ui/src/components/common/catalog/catalog-tags.tsx
diff --git a/app/scripts/components/common/catalog/controls/atoms/search-atom.ts b/packages/veda-ui/src/components/common/catalog/controls/atoms/search-atom.ts
similarity index 100%
rename from app/scripts/components/common/catalog/controls/atoms/search-atom.ts
rename to packages/veda-ui/src/components/common/catalog/controls/atoms/search-atom.ts
diff --git a/app/scripts/components/common/catalog/controls/atoms/taxonomy-atom.ts b/packages/veda-ui/src/components/common/catalog/controls/atoms/taxonomy-atom.ts
similarity index 100%
rename from app/scripts/components/common/catalog/controls/atoms/taxonomy-atom.ts
rename to packages/veda-ui/src/components/common/catalog/controls/atoms/taxonomy-atom.ts
diff --git a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts b/packages/veda-ui/src/components/common/catalog/controls/hooks/use-filters-with-query.ts
similarity index 100%
rename from app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts
rename to packages/veda-ui/src/components/common/catalog/controls/hooks/use-filters-with-query.ts
diff --git a/app/scripts/components/common/catalog/filter-tag.tsx b/packages/veda-ui/src/components/common/catalog/filter-tag.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/filter-tag.tsx
rename to packages/veda-ui/src/components/common/catalog/filter-tag.tsx
diff --git a/app/scripts/components/common/catalog/filters-controls/filter-controls.scss b/packages/veda-ui/src/components/common/catalog/filters-controls/filter-controls.scss
similarity index 100%
rename from app/scripts/components/common/catalog/filters-controls/filter-controls.scss
rename to packages/veda-ui/src/components/common/catalog/filters-controls/filter-controls.scss
diff --git a/app/scripts/components/common/catalog/filters-controls/filters-control.tsx b/packages/veda-ui/src/components/common/catalog/filters-controls/filters-control.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/filters-controls/filters-control.tsx
rename to packages/veda-ui/src/components/common/catalog/filters-controls/filters-control.tsx
diff --git a/app/scripts/components/common/catalog/index.tsx b/packages/veda-ui/src/components/common/catalog/index.tsx
similarity index 100%
rename from app/scripts/components/common/catalog/index.tsx
rename to packages/veda-ui/src/components/common/catalog/index.tsx
diff --git a/app/scripts/components/common/catalog/prepare-datasets.ts b/packages/veda-ui/src/components/common/catalog/prepare-datasets.ts
similarity index 100%
rename from app/scripts/components/common/catalog/prepare-datasets.ts
rename to packages/veda-ui/src/components/common/catalog/prepare-datasets.ts
diff --git a/app/scripts/components/common/catalog/utils.test.ts b/packages/veda-ui/src/components/common/catalog/utils.test.ts
similarity index 100%
rename from app/scripts/components/common/catalog/utils.test.ts
rename to packages/veda-ui/src/components/common/catalog/utils.test.ts
diff --git a/app/scripts/components/common/catalog/utils.ts b/packages/veda-ui/src/components/common/catalog/utils.ts
similarity index 100%
rename from app/scripts/components/common/catalog/utils.ts
rename to packages/veda-ui/src/components/common/catalog/utils.ts
diff --git a/app/scripts/components/common/chart/alt-title.tsx b/packages/veda-ui/src/components/common/chart/alt-title.tsx
similarity index 100%
rename from app/scripts/components/common/chart/alt-title.tsx
rename to packages/veda-ui/src/components/common/chart/alt-title.tsx
diff --git a/app/scripts/components/common/chart/block.tsx b/packages/veda-ui/src/components/common/chart/block.tsx
similarity index 100%
rename from app/scripts/components/common/chart/block.tsx
rename to packages/veda-ui/src/components/common/chart/block.tsx
diff --git a/app/scripts/components/common/chart/brush.tsx b/packages/veda-ui/src/components/common/chart/brush.tsx
similarity index 100%
rename from app/scripts/components/common/chart/brush.tsx
rename to packages/veda-ui/src/components/common/chart/brush.tsx
diff --git a/app/scripts/components/common/chart/constant.js b/packages/veda-ui/src/components/common/chart/constant.js
similarity index 100%
rename from app/scripts/components/common/chart/constant.js
rename to packages/veda-ui/src/components/common/chart/constant.js
diff --git a/app/scripts/components/common/chart/index.tsx b/packages/veda-ui/src/components/common/chart/index.tsx
similarity index 100%
rename from app/scripts/components/common/chart/index.tsx
rename to packages/veda-ui/src/components/common/chart/index.tsx
diff --git a/app/scripts/components/common/chart/legend.tsx b/packages/veda-ui/src/components/common/chart/legend.tsx
similarity index 100%
rename from app/scripts/components/common/chart/legend.tsx
rename to packages/veda-ui/src/components/common/chart/legend.tsx
diff --git a/app/scripts/components/common/chart/tooltip.tsx b/packages/veda-ui/src/components/common/chart/tooltip.tsx
similarity index 100%
rename from app/scripts/components/common/chart/tooltip.tsx
rename to packages/veda-ui/src/components/common/chart/tooltip.tsx
diff --git a/app/scripts/components/common/chart/useBrush.ts b/packages/veda-ui/src/components/common/chart/useBrush.ts
similarity index 100%
rename from app/scripts/components/common/chart/useBrush.ts
rename to packages/veda-ui/src/components/common/chart/useBrush.ts
diff --git a/app/scripts/components/common/chart/utils.test.ts b/packages/veda-ui/src/components/common/chart/utils.test.ts
similarity index 100%
rename from app/scripts/components/common/chart/utils.test.ts
rename to packages/veda-ui/src/components/common/chart/utils.test.ts
diff --git a/app/scripts/components/common/chart/utils.ts b/packages/veda-ui/src/components/common/chart/utils.ts
similarity index 100%
rename from app/scripts/components/common/chart/utils.ts
rename to packages/veda-ui/src/components/common/chart/utils.ts
diff --git a/app/scripts/components/common/content-taxonomy.tsx b/packages/veda-ui/src/components/common/content-taxonomy.tsx
similarity index 100%
rename from app/scripts/components/common/content-taxonomy.tsx
rename to packages/veda-ui/src/components/common/content-taxonomy.tsx
diff --git a/app/scripts/components/common/cookie-consent/cookieConsent.spec.jsx b/packages/veda-ui/src/components/common/cookie-consent/cookieConsent.spec.js
similarity index 100%
rename from app/scripts/components/common/cookie-consent/cookieConsent.spec.jsx
rename to packages/veda-ui/src/components/common/cookie-consent/cookieConsent.spec.js
diff --git a/packages/veda-ui/src/components/common/cookie-consent/cookieConsent.spec.jsx b/packages/veda-ui/src/components/common/cookie-consent/cookieConsent.spec.jsx
new file mode 100644
index 000000000..2dd81cdac
--- /dev/null
+++ b/packages/veda-ui/src/components/common/cookie-consent/cookieConsent.spec.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom'; // For testing
+import { createMemoryHistory } from 'history';
+
+import * as utils from './utils';
+import CookieConsent from './index';
+const lodash = require('lodash');
+
+describe('Cookie consent form should render with correct content.', () => {
+  const setDisplayCookieConsent = jest.fn();
+  const setGoogleTagManager = jest.fn();
+  const cookieData = {
+    title: 'Cookie Consent',
+    copy: '<p>We use cookies to enhance your browsing experience and to help us understand how our website is used. These cookies allow us to collect data on site usage and improve our services based on your interactions. To learn more about it, see our <a href="https://www.nasa.gov/privacy/#cookies">Privacy Policy</a></p>We use cookies to enhance your browsing experience and to help us understand how our website is used. These cookies allow us to collect data on site usage and improve our services based on your interactions. To learn more about it, see our [Privacy Policy](https://www.nasa.gov/privacy/#cookies)',
+    setDisplayCookieConsent,
+    setGoogleTagManager
+  };
+
+  const onFormInteraction = jest.fn();
+
+  const history = createMemoryHistory({ initialEntries: ['/home'] });
+
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useLocation: () => ({
+      pathname: 'localhost:3000/example/path'
+    })
+  }));
+
+  lodash.debounce = jest.fn((fn) => fn);
+
+  afterEach(() => {
+    jest.clearAllMocks();
+
+    // Clear cookies after each test
+    document.cookie = `${utils.COOKIE_CONSENT_KEY}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+  });
+
+  it('Renders correct content', () => {
+    render(
+      <MemoryRouter history={history}>
+        <CookieConsent {...cookieData} onFormInteraction={onFormInteraction} />
+      </MemoryRouter>
+    );
+    expect(
+      screen.getByRole('link', { name: 'Privacy Policy' })
+    ).toHaveAttribute('href', 'https://www.nasa.gov/privacy/#cookies');
+    expect(
+      screen.getByRole('button', { name: 'Decline Cookies' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Accept Cookies' })
+    ).toBeInTheDocument();
+    expect(screen.getByText('Cookie Consent')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'We use cookies to enhance your browsing experience and to help us understand how our website is used. These cookies allow us to collect data on site usage and improve our services based on your interactions. To learn more about it, see our'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('Check correct cookie content on Decline click', () => {
+    render(
+      <MemoryRouter history={history}>
+        <CookieConsent {...cookieData} onFormInteraction={onFormInteraction} />
+      </MemoryRouter>
+    );
+    const button = screen.getByRole('button', { name: 'Decline Cookies' });
+    fireEvent.click(button);
+    const resultCookie = document.cookie;
+    expect(resultCookie).toBe(
+      `${utils.COOKIE_CONSENT_KEY}={"responded":true,"answer":false}`
+    );
+  });
+
+  it('Check correct cookie content on Accept click', () => {
+    render(
+      <MemoryRouter history={history}>
+        <CookieConsent {...cookieData} onFormInteraction={onFormInteraction} />
+      </MemoryRouter>
+    );
+    const acceptButton = screen.getByRole('button', { name: 'Accept Cookies' });
+    fireEvent.click(acceptButton);
+    const resultCookie = document.cookie;
+
+    expect(resultCookie).toBe(
+      `${utils.COOKIE_CONSENT_KEY}={"responded":true,"answer":true}`
+    );
+  });
+});
diff --git a/app/scripts/components/common/cookie-consent/index.scss b/packages/veda-ui/src/components/common/cookie-consent/index.scss
similarity index 100%
rename from app/scripts/components/common/cookie-consent/index.scss
rename to packages/veda-ui/src/components/common/cookie-consent/index.scss
diff --git a/app/scripts/components/common/cookie-consent/index.tsx b/packages/veda-ui/src/components/common/cookie-consent/index.tsx
similarity index 100%
rename from app/scripts/components/common/cookie-consent/index.tsx
rename to packages/veda-ui/src/components/common/cookie-consent/index.tsx
diff --git a/app/scripts/components/common/cookie-consent/utils.test.ts b/packages/veda-ui/src/components/common/cookie-consent/utils.test.ts
similarity index 100%
rename from app/scripts/components/common/cookie-consent/utils.test.ts
rename to packages/veda-ui/src/components/common/cookie-consent/utils.test.ts
diff --git a/app/scripts/components/common/cookie-consent/utils.ts b/packages/veda-ui/src/components/common/cookie-consent/utils.ts
similarity index 100%
rename from app/scripts/components/common/cookie-consent/utils.ts
rename to packages/veda-ui/src/components/common/cookie-consent/utils.ts
diff --git a/app/scripts/components/common/copy-field.ts b/packages/veda-ui/src/components/common/copy-field.ts
similarity index 100%
rename from app/scripts/components/common/copy-field.ts
rename to packages/veda-ui/src/components/common/copy-field.ts
diff --git a/app/scripts/components/common/custom-icon/README.md b/packages/veda-ui/src/components/common/custom-icon/README.md
similarity index 100%
rename from app/scripts/components/common/custom-icon/README.md
rename to packages/veda-ui/src/components/common/custom-icon/README.md
diff --git a/app/scripts/components/common/custom-icon/calendar-minus.tsx b/packages/veda-ui/src/components/common/custom-icon/calendar-minus.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/calendar-minus.tsx
rename to packages/veda-ui/src/components/common/custom-icon/calendar-minus.tsx
diff --git a/app/scripts/components/common/custom-icon/calendar-plus.tsx b/packages/veda-ui/src/components/common/custom-icon/calendar-plus.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/calendar-plus.tsx
rename to packages/veda-ui/src/components/common/custom-icon/calendar-plus.tsx
diff --git a/app/scripts/components/common/custom-icon/dataset-layers.tsx b/packages/veda-ui/src/components/common/custom-icon/dataset-layers.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/dataset-layers.tsx
rename to packages/veda-ui/src/components/common/custom-icon/dataset-layers.tsx
diff --git a/app/scripts/components/common/custom-icon/drop.tsx b/packages/veda-ui/src/components/common/custom-icon/drop.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/drop.tsx
rename to packages/veda-ui/src/components/common/custom-icon/drop.tsx
diff --git a/app/scripts/components/common/custom-icon/hand-pan.tsx b/packages/veda-ui/src/components/common/custom-icon/hand-pan.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/hand-pan.tsx
rename to packages/veda-ui/src/components/common/custom-icon/hand-pan.tsx
diff --git a/app/scripts/components/common/custom-icon/hand-swipe-horizontal.tsx b/packages/veda-ui/src/components/common/custom-icon/hand-swipe-horizontal.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/hand-swipe-horizontal.tsx
rename to packages/veda-ui/src/components/common/custom-icon/hand-swipe-horizontal.tsx
diff --git a/app/scripts/components/common/custom-icon/index.tsx b/packages/veda-ui/src/components/common/custom-icon/index.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/index.tsx
rename to packages/veda-ui/src/components/common/custom-icon/index.tsx
diff --git a/app/scripts/components/common/custom-icon/progress-tick-high.tsx b/packages/veda-ui/src/components/common/custom-icon/progress-tick-high.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/progress-tick-high.tsx
rename to packages/veda-ui/src/components/common/custom-icon/progress-tick-high.tsx
diff --git a/app/scripts/components/common/custom-icon/progress-tick-low.tsx b/packages/veda-ui/src/components/common/custom-icon/progress-tick-low.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/progress-tick-low.tsx
rename to packages/veda-ui/src/components/common/custom-icon/progress-tick-low.tsx
diff --git a/app/scripts/components/common/custom-icon/progress-tick-medium.tsx b/packages/veda-ui/src/components/common/custom-icon/progress-tick-medium.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/progress-tick-medium.tsx
rename to packages/veda-ui/src/components/common/custom-icon/progress-tick-medium.tsx
diff --git a/app/scripts/components/common/custom-icon/utils.tsx b/packages/veda-ui/src/components/common/custom-icon/utils.tsx
similarity index 100%
rename from app/scripts/components/common/custom-icon/utils.tsx
rename to packages/veda-ui/src/components/common/custom-icon/utils.tsx
diff --git a/app/scripts/components/common/dataset-classification.tsx b/packages/veda-ui/src/components/common/dataset-classification.tsx
similarity index 100%
rename from app/scripts/components/common/dataset-classification.tsx
rename to packages/veda-ui/src/components/common/dataset-classification.tsx
diff --git a/app/scripts/components/common/dataset-layer-card/color-maps.ts b/packages/veda-ui/src/components/common/dataset-layer-card/color-maps.ts
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/color-maps.ts
rename to packages/veda-ui/src/components/common/dataset-layer-card/color-maps.ts
diff --git a/app/scripts/components/common/dataset-layer-card/color-range-slider/color-range-slider.scss b/packages/veda-ui/src/components/common/dataset-layer-card/color-range-slider/color-range-slider.scss
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/color-range-slider/color-range-slider.scss
rename to packages/veda-ui/src/components/common/dataset-layer-card/color-range-slider/color-range-slider.scss
diff --git a/app/scripts/components/common/dataset-layer-card/color-range-slider/colorRangeSlider.spec.tsx b/packages/veda-ui/src/components/common/dataset-layer-card/color-range-slider/colorRangeSlider.spec.tsx
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/color-range-slider/colorRangeSlider.spec.tsx
rename to packages/veda-ui/src/components/common/dataset-layer-card/color-range-slider/colorRangeSlider.spec.tsx
diff --git a/app/scripts/components/common/dataset-layer-card/color-range-slider/index.tsx b/packages/veda-ui/src/components/common/dataset-layer-card/color-range-slider/index.tsx
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/color-range-slider/index.tsx
rename to packages/veda-ui/src/components/common/dataset-layer-card/color-range-slider/index.tsx
diff --git a/app/scripts/components/common/dataset-layer-card/color-range-slider/utils.tsx b/packages/veda-ui/src/components/common/dataset-layer-card/color-range-slider/utils.tsx
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/color-range-slider/utils.tsx
rename to packages/veda-ui/src/components/common/dataset-layer-card/color-range-slider/utils.tsx
diff --git a/app/scripts/components/common/dataset-layer-card/colormap-options.scss b/packages/veda-ui/src/components/common/dataset-layer-card/colormap-options.scss
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/colormap-options.scss
rename to packages/veda-ui/src/components/common/dataset-layer-card/colormap-options.scss
diff --git a/app/scripts/components/common/dataset-layer-card/colormap-options.tsx b/packages/veda-ui/src/components/common/dataset-layer-card/colormap-options.tsx
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/colormap-options.tsx
rename to packages/veda-ui/src/components/common/dataset-layer-card/colormap-options.tsx
diff --git a/app/scripts/components/common/dataset-layer-card/colormap-section.tsx b/packages/veda-ui/src/components/common/dataset-layer-card/colormap-section.tsx
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/colormap-section.tsx
rename to packages/veda-ui/src/components/common/dataset-layer-card/colormap-section.tsx
diff --git a/app/scripts/components/common/dataset-layer-card/index.tsx b/packages/veda-ui/src/components/common/dataset-layer-card/index.tsx
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/index.tsx
rename to packages/veda-ui/src/components/common/dataset-layer-card/index.tsx
diff --git a/app/scripts/components/common/dataset-layer-card/layer-options-menu.tsx b/packages/veda-ui/src/components/common/dataset-layer-card/layer-options-menu.tsx
similarity index 100%
rename from app/scripts/components/common/dataset-layer-card/layer-options-menu.tsx
rename to packages/veda-ui/src/components/common/dataset-layer-card/layer-options-menu.tsx
diff --git a/app/scripts/components/common/datepicker/datepicker.scss b/packages/veda-ui/src/components/common/datepicker/datepicker.scss
similarity index 100%
rename from app/scripts/components/common/datepicker/datepicker.scss
rename to packages/veda-ui/src/components/common/datepicker/datepicker.scss
diff --git a/app/scripts/components/common/datepicker/index.tsx b/packages/veda-ui/src/components/common/datepicker/index.tsx
similarity index 100%
rename from app/scripts/components/common/datepicker/index.tsx
rename to packages/veda-ui/src/components/common/datepicker/index.tsx
diff --git a/app/scripts/components/common/dropdown-scrollable.tsx b/packages/veda-ui/src/components/common/dropdown-scrollable.tsx
similarity index 100%
rename from app/scripts/components/common/dropdown-scrollable.tsx
rename to packages/veda-ui/src/components/common/dropdown-scrollable.tsx
diff --git a/app/scripts/components/common/element-interactive.jsx b/packages/veda-ui/src/components/common/element-interactive.jsx
similarity index 100%
rename from app/scripts/components/common/element-interactive.jsx
rename to packages/veda-ui/src/components/common/element-interactive.jsx
diff --git a/app/scripts/components/common/empty-hub.tsx b/packages/veda-ui/src/components/common/empty-hub.tsx
similarity index 100%
rename from app/scripts/components/common/empty-hub.tsx
rename to packages/veda-ui/src/components/common/empty-hub.tsx
diff --git a/app/scripts/components/common/external-link-flag.deprecation.test.tsx b/packages/veda-ui/src/components/common/external-link-flag.deprecation.test.tsx
similarity index 100%
rename from app/scripts/components/common/external-link-flag.deprecation.test.tsx
rename to packages/veda-ui/src/components/common/external-link-flag.deprecation.test.tsx
diff --git a/app/scripts/components/common/external-link-flag.tsx b/packages/veda-ui/src/components/common/external-link-flag.tsx
similarity index 100%
rename from app/scripts/components/common/external-link-flag.tsx
rename to packages/veda-ui/src/components/common/external-link-flag.tsx
diff --git a/app/scripts/components/common/featured-slider-section.tsx b/packages/veda-ui/src/components/common/featured-slider-section.tsx
similarity index 100%
rename from app/scripts/components/common/featured-slider-section.tsx
rename to packages/veda-ui/src/components/common/featured-slider-section.tsx
diff --git a/app/scripts/components/common/figure.jsx b/packages/veda-ui/src/components/common/figure.jsx
similarity index 100%
rename from app/scripts/components/common/figure.jsx
rename to packages/veda-ui/src/components/common/figure.jsx
diff --git a/app/scripts/components/common/fold.tsx b/packages/veda-ui/src/components/common/fold.tsx
similarity index 100%
rename from app/scripts/components/common/fold.tsx
rename to packages/veda-ui/src/components/common/fold.tsx
diff --git a/app/scripts/components/common/form/checkable-filter-legacy/index.tsx b/packages/veda-ui/src/components/common/form/checkable-filter-legacy/index.tsx
similarity index 100%
rename from app/scripts/components/common/form/checkable-filter-legacy/index.tsx
rename to packages/veda-ui/src/components/common/form/checkable-filter-legacy/index.tsx
diff --git a/app/scripts/components/common/form/checkable-filter/checkable-filter.scss b/packages/veda-ui/src/components/common/form/checkable-filter/checkable-filter.scss
similarity index 100%
rename from app/scripts/components/common/form/checkable-filter/checkable-filter.scss
rename to packages/veda-ui/src/components/common/form/checkable-filter/checkable-filter.scss
diff --git a/app/scripts/components/common/form/checkable-filter/index.tsx b/packages/veda-ui/src/components/common/form/checkable-filter/index.tsx
similarity index 100%
rename from app/scripts/components/common/form/checkable-filter/index.tsx
rename to packages/veda-ui/src/components/common/form/checkable-filter/index.tsx
diff --git a/app/scripts/components/common/google-form.tsx b/packages/veda-ui/src/components/common/google-form.tsx
similarity index 100%
rename from app/scripts/components/common/google-form.tsx
rename to packages/veda-ui/src/components/common/google-form.tsx
diff --git a/app/scripts/components/common/layout-root/index.tsx b/packages/veda-ui/src/components/common/layout-root/index.tsx
similarity index 100%
rename from app/scripts/components/common/layout-root/index.tsx
rename to packages/veda-ui/src/components/common/layout-root/index.tsx
diff --git a/app/scripts/components/common/layout-root/useSlidingStickyHeaderProps.ts b/packages/veda-ui/src/components/common/layout-root/useSlidingStickyHeaderProps.ts
similarity index 100%
rename from app/scripts/components/common/layout-root/useSlidingStickyHeaderProps.ts
rename to packages/veda-ui/src/components/common/layout-root/useSlidingStickyHeaderProps.ts
diff --git a/app/scripts/components/common/loading-skeleton.tsx b/packages/veda-ui/src/components/common/loading-skeleton.tsx
similarity index 100%
rename from app/scripts/components/common/loading-skeleton.tsx
rename to packages/veda-ui/src/components/common/loading-skeleton.tsx
diff --git a/app/scripts/components/common/map/controls/aoi/aoi-control.tsx b/packages/veda-ui/src/components/common/map/controls/aoi/aoi-control.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/aoi-control.tsx
rename to packages/veda-ui/src/components/common/map/controls/aoi/aoi-control.tsx
diff --git a/app/scripts/components/common/map/controls/aoi/atoms.ts b/packages/veda-ui/src/components/common/map/controls/aoi/atoms.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/atoms.ts
rename to packages/veda-ui/src/components/common/map/controls/aoi/atoms.ts
diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-modal.tsx b/packages/veda-ui/src/components/common/map/controls/aoi/custom-aoi-modal.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/custom-aoi-modal.tsx
rename to packages/veda-ui/src/components/common/map/controls/aoi/custom-aoi-modal.tsx
diff --git a/app/scripts/components/common/map/controls/aoi/draw-tools.tsx b/packages/veda-ui/src/components/common/map/controls/aoi/draw-tools.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/draw-tools.tsx
rename to packages/veda-ui/src/components/common/map/controls/aoi/draw-tools.tsx
diff --git a/app/scripts/components/common/map/controls/aoi/preset-selector-container.tsx b/packages/veda-ui/src/components/common/map/controls/aoi/preset-selector-container.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/preset-selector-container.tsx
rename to packages/veda-ui/src/components/common/map/controls/aoi/preset-selector-container.tsx
diff --git a/app/scripts/components/common/map/controls/aoi/preset-selector.tsx b/packages/veda-ui/src/components/common/map/controls/aoi/preset-selector.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/preset-selector.tsx
rename to packages/veda-ui/src/components/common/map/controls/aoi/preset-selector.tsx
diff --git a/app/scripts/components/common/map/controls/aoi/style.ts b/packages/veda-ui/src/components/common/map/controls/aoi/style.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/style.ts
rename to packages/veda-ui/src/components/common/map/controls/aoi/style.ts
diff --git a/app/scripts/components/common/map/controls/aoi/types.d.ts b/packages/veda-ui/src/components/common/map/controls/aoi/types.d.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/types.d.ts
rename to packages/veda-ui/src/components/common/map/controls/aoi/types.d.ts
diff --git a/app/scripts/components/common/map/controls/aoi/utils.ts b/packages/veda-ui/src/components/common/map/controls/aoi/utils.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/aoi/utils.ts
rename to packages/veda-ui/src/components/common/map/controls/aoi/utils.ts
diff --git a/app/scripts/components/common/map/controls/coords.tsx b/packages/veda-ui/src/components/common/map/controls/coords.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/coords.tsx
rename to packages/veda-ui/src/components/common/map/controls/coords.tsx
diff --git a/app/scripts/components/common/map/controls/geocoder.tsx b/packages/veda-ui/src/components/common/map/controls/geocoder.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/geocoder.tsx
rename to packages/veda-ui/src/components/common/map/controls/geocoder.tsx
diff --git a/app/scripts/components/common/map/controls/hooks/use-aois.ts b/packages/veda-ui/src/components/common/map/controls/hooks/use-aois.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/hooks/use-aois.ts
rename to packages/veda-ui/src/components/common/map/controls/hooks/use-aois.ts
diff --git a/app/scripts/components/common/map/controls/hooks/use-basemap.ts b/packages/veda-ui/src/components/common/map/controls/hooks/use-basemap.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/hooks/use-basemap.ts
rename to packages/veda-ui/src/components/common/map/controls/hooks/use-basemap.ts
diff --git a/app/scripts/components/common/map/controls/hooks/use-custom-aoi.test.ts b/packages/veda-ui/src/components/common/map/controls/hooks/use-custom-aoi.test.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/hooks/use-custom-aoi.test.ts
rename to packages/veda-ui/src/components/common/map/controls/hooks/use-custom-aoi.test.ts
diff --git a/app/scripts/components/common/map/controls/hooks/use-custom-aoi.tsx b/packages/veda-ui/src/components/common/map/controls/hooks/use-custom-aoi.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/hooks/use-custom-aoi.tsx
rename to packages/veda-ui/src/components/common/map/controls/hooks/use-custom-aoi.tsx
diff --git a/app/scripts/components/common/map/controls/hooks/use-draw-control.ts b/packages/veda-ui/src/components/common/map/controls/hooks/use-draw-control.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/hooks/use-draw-control.ts
rename to packages/veda-ui/src/components/common/map/controls/hooks/use-draw-control.ts
diff --git a/app/scripts/components/common/map/controls/hooks/use-preset-aoi.tsx b/packages/veda-ui/src/components/common/map/controls/hooks/use-preset-aoi.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/hooks/use-preset-aoi.tsx
rename to packages/veda-ui/src/components/common/map/controls/hooks/use-preset-aoi.tsx
diff --git a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx b/packages/veda-ui/src/components/common/map/controls/hooks/use-themed-control.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
rename to packages/veda-ui/src/components/common/map/controls/hooks/use-themed-control.tsx
diff --git a/app/scripts/components/common/map/controls/index.tsx b/packages/veda-ui/src/components/common/map/controls/index.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/index.tsx
rename to packages/veda-ui/src/components/common/map/controls/index.tsx
diff --git a/app/scripts/components/common/map/controls/map-options/basemap.ts b/packages/veda-ui/src/components/common/map/controls/map-options/basemap.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/map-options/basemap.ts
rename to packages/veda-ui/src/components/common/map/controls/map-options/basemap.ts
diff --git a/app/scripts/components/common/map/controls/map-options/index.tsx b/packages/veda-ui/src/components/common/map/controls/map-options/index.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/map-options/index.tsx
rename to packages/veda-ui/src/components/common/map/controls/map-options/index.tsx
diff --git a/app/scripts/components/common/map/controls/map-options/projection-items.tsx b/packages/veda-ui/src/components/common/map/controls/map-options/projection-items.tsx
similarity index 100%
rename from app/scripts/components/common/map/controls/map-options/projection-items.tsx
rename to packages/veda-ui/src/components/common/map/controls/map-options/projection-items.tsx
diff --git a/app/scripts/components/common/map/controls/map-options/projections.ts b/packages/veda-ui/src/components/common/map/controls/map-options/projections.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/map-options/projections.ts
rename to packages/veda-ui/src/components/common/map/controls/map-options/projections.ts
diff --git a/app/scripts/components/common/map/controls/map-options/types.ts b/packages/veda-ui/src/components/common/map/controls/map-options/types.ts
similarity index 100%
rename from app/scripts/components/common/map/controls/map-options/types.ts
rename to packages/veda-ui/src/components/common/map/controls/map-options/types.ts
diff --git a/app/scripts/components/common/map/hooks/use-custom-marker.ts b/packages/veda-ui/src/components/common/map/hooks/use-custom-marker.ts
similarity index 100%
rename from app/scripts/components/common/map/hooks/use-custom-marker.ts
rename to packages/veda-ui/src/components/common/map/hooks/use-custom-marker.ts
diff --git a/app/scripts/components/common/map/hooks/use-fit-bbox.ts b/packages/veda-ui/src/components/common/map/hooks/use-fit-bbox.ts
similarity index 100%
rename from app/scripts/components/common/map/hooks/use-fit-bbox.ts
rename to packages/veda-ui/src/components/common/map/hooks/use-fit-bbox.ts
diff --git a/app/scripts/components/common/map/hooks/use-generator-params.ts b/packages/veda-ui/src/components/common/map/hooks/use-generator-params.ts
similarity index 100%
rename from app/scripts/components/common/map/hooks/use-generator-params.ts
rename to packages/veda-ui/src/components/common/map/hooks/use-generator-params.ts
diff --git a/app/scripts/components/common/map/hooks/use-layer-interaction.ts b/packages/veda-ui/src/components/common/map/hooks/use-layer-interaction.ts
similarity index 100%
rename from app/scripts/components/common/map/hooks/use-layer-interaction.ts
rename to packages/veda-ui/src/components/common/map/hooks/use-layer-interaction.ts
diff --git a/app/scripts/components/common/map/hooks/use-map-compare.ts b/packages/veda-ui/src/components/common/map/hooks/use-map-compare.ts
similarity index 100%
rename from app/scripts/components/common/map/hooks/use-map-compare.ts
rename to packages/veda-ui/src/components/common/map/hooks/use-map-compare.ts
diff --git a/app/scripts/components/common/map/hooks/use-map-style.ts b/packages/veda-ui/src/components/common/map/hooks/use-map-style.ts
similarity index 100%
rename from app/scripts/components/common/map/hooks/use-map-style.ts
rename to packages/veda-ui/src/components/common/map/hooks/use-map-style.ts
diff --git a/app/scripts/components/common/map/hooks/use-maps.ts b/packages/veda-ui/src/components/common/map/hooks/use-maps.ts
similarity index 100%
rename from app/scripts/components/common/map/hooks/use-maps.ts
rename to packages/veda-ui/src/components/common/map/hooks/use-maps.ts
diff --git a/app/scripts/components/common/map/index.tsx b/packages/veda-ui/src/components/common/map/index.tsx
similarity index 100%
rename from app/scripts/components/common/map/index.tsx
rename to packages/veda-ui/src/components/common/map/index.tsx
diff --git a/app/scripts/components/common/map/layer-legend.tsx b/packages/veda-ui/src/components/common/map/layer-legend.tsx
similarity index 100%
rename from app/scripts/components/common/map/layer-legend.tsx
rename to packages/veda-ui/src/components/common/map/layer-legend.tsx
diff --git a/app/scripts/components/common/map/map-component.tsx b/packages/veda-ui/src/components/common/map/map-component.tsx
similarity index 100%
rename from app/scripts/components/common/map/map-component.tsx
rename to packages/veda-ui/src/components/common/map/map-component.tsx
diff --git a/app/scripts/components/common/map/map-message.tsx b/packages/veda-ui/src/components/common/map/map-message.tsx
similarity index 100%
rename from app/scripts/components/common/map/map-message.tsx
rename to packages/veda-ui/src/components/common/map/map-message.tsx
diff --git a/app/scripts/components/common/map/mapbox-style-override.ts b/packages/veda-ui/src/components/common/map/mapbox-style-override.ts
similarity index 100%
rename from app/scripts/components/common/map/mapbox-style-override.ts
rename to packages/veda-ui/src/components/common/map/mapbox-style-override.ts
diff --git a/app/scripts/components/common/map/maps.tsx b/packages/veda-ui/src/components/common/map/maps.tsx
similarity index 100%
rename from app/scripts/components/common/map/maps.tsx
rename to packages/veda-ui/src/components/common/map/maps.tsx
diff --git a/app/scripts/components/common/map/style-generators/README.md b/packages/veda-ui/src/components/common/map/style-generators/README.md
similarity index 100%
rename from app/scripts/components/common/map/style-generators/README.md
rename to packages/veda-ui/src/components/common/map/style-generators/README.md
diff --git a/app/scripts/components/common/map/style-generators/basemap.tsx b/packages/veda-ui/src/components/common/map/style-generators/basemap.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/basemap.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/basemap.tsx
diff --git a/app/scripts/components/common/map/style-generators/cmr-timeseries.tsx b/packages/veda-ui/src/components/common/map/style-generators/cmr-timeseries.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/cmr-timeseries.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/cmr-timeseries.tsx
diff --git a/app/scripts/components/common/map/style-generators/hooks.ts b/packages/veda-ui/src/components/common/map/style-generators/hooks.ts
similarity index 100%
rename from app/scripts/components/common/map/style-generators/hooks.ts
rename to packages/veda-ui/src/components/common/map/style-generators/hooks.ts
diff --git a/app/scripts/components/common/map/style-generators/points-layer.tsx b/packages/veda-ui/src/components/common/map/style-generators/points-layer.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/points-layer.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/points-layer.tsx
diff --git a/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx b/packages/veda-ui/src/components/common/map/style-generators/raster-paint-layer.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/raster-paint-layer.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/raster-paint-layer.tsx
diff --git a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx b/packages/veda-ui/src/components/common/map/style-generators/raster-timeseries.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/raster-timeseries.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/raster-timeseries.tsx
diff --git a/app/scripts/components/common/map/style-generators/utils.spec.ts b/packages/veda-ui/src/components/common/map/style-generators/utils.spec.ts
similarity index 100%
rename from app/scripts/components/common/map/style-generators/utils.spec.ts
rename to packages/veda-ui/src/components/common/map/style-generators/utils.spec.ts
diff --git a/app/scripts/components/common/map/style-generators/utils.ts b/packages/veda-ui/src/components/common/map/style-generators/utils.ts
similarity index 100%
rename from app/scripts/components/common/map/style-generators/utils.ts
rename to packages/veda-ui/src/components/common/map/style-generators/utils.ts
diff --git a/app/scripts/components/common/map/style-generators/vector-timeseries.tsx b/packages/veda-ui/src/components/common/map/style-generators/vector-timeseries.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/vector-timeseries.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/vector-timeseries.tsx
diff --git a/app/scripts/components/common/map/style-generators/wms-timeseries.tsx b/packages/veda-ui/src/components/common/map/style-generators/wms-timeseries.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/wms-timeseries.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/wms-timeseries.tsx
diff --git a/app/scripts/components/common/map/style-generators/wmts-timeseries.tsx b/packages/veda-ui/src/components/common/map/style-generators/wmts-timeseries.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/wmts-timeseries.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/wmts-timeseries.tsx
diff --git a/app/scripts/components/common/map/style-generators/zarr-timeseries.tsx b/packages/veda-ui/src/components/common/map/style-generators/zarr-timeseries.tsx
similarity index 100%
rename from app/scripts/components/common/map/style-generators/zarr-timeseries.tsx
rename to packages/veda-ui/src/components/common/map/style-generators/zarr-timeseries.tsx
diff --git a/app/scripts/components/common/map/style/button.tsx b/packages/veda-ui/src/components/common/map/style/button.tsx
similarity index 100%
rename from app/scripts/components/common/map/style/button.tsx
rename to packages/veda-ui/src/components/common/map/style/button.tsx
diff --git a/app/scripts/components/common/map/style/marker-sdf.png b/packages/veda-ui/src/components/common/map/style/marker-sdf.png
similarity index 100%
rename from app/scripts/components/common/map/style/marker-sdf.png
rename to packages/veda-ui/src/components/common/map/style/marker-sdf.png
diff --git a/app/scripts/components/common/map/styles.tsx b/packages/veda-ui/src/components/common/map/styles.tsx
similarity index 100%
rename from app/scripts/components/common/map/styles.tsx
rename to packages/veda-ui/src/components/common/map/styles.tsx
diff --git a/app/scripts/components/common/map/types.d.ts b/packages/veda-ui/src/components/common/map/types.d.ts
similarity index 100%
rename from app/scripts/components/common/map/types.d.ts
rename to packages/veda-ui/src/components/common/map/types.d.ts
diff --git a/app/scripts/components/common/map/utils.ts b/packages/veda-ui/src/components/common/map/utils.ts
similarity index 100%
rename from app/scripts/components/common/map/utils.ts
rename to packages/veda-ui/src/components/common/map/utils.ts
diff --git a/app/scripts/components/common/mdx-content.jsx b/packages/veda-ui/src/components/common/mdx-content.js
similarity index 100%
rename from app/scripts/components/common/mdx-content.jsx
rename to packages/veda-ui/src/components/common/mdx-content.js
diff --git a/packages/veda-ui/src/components/common/mdx-content.jsx b/packages/veda-ui/src/components/common/mdx-content.jsx
new file mode 100644
index 000000000..b0b6fcffa
--- /dev/null
+++ b/packages/veda-ui/src/components/common/mdx-content.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import T from 'prop-types';
+import { MDXProvider } from '@mdx-js/react';
+
+import { useMdxPageLoader } from '$utils/veda-data/mdx';
+import { S_LOADING, S_SUCCEEDED } from '$utils/status';
+import { ContentLoading } from '$components/common/loading-skeleton';
+import Block from '$components/common/blocks';
+import ContentBlockFigure from '$components/common/blocks/figure';
+import { ContentBlockProse } from '$styles/content-block';
+import Image, { Caption } from '$components/common/blocks/images';
+import { Chapter } from '$components/common/blocks/scrollytelling/chapter';
+import {
+  LazyChart,
+  LazyCompareImage,
+  LazyScrollyTelling,
+  LazyMap,
+  LazyMultilayerMap,
+  LazyTable,
+  LazyEmbed
+} from '$components/common/blocks/lazy-components';
+import { NotebookConnectCalloutBlock } from '$components/common/notebook-connect';
+import SmartLink, { CustomLink } from '$components/common/smart-link';
+import { Widget } from '$libs';
+
+function MdxContent(props) {
+  const pageMdx = useMdxPageLoader(props.loader);
+
+  if (pageMdx.status === S_LOADING) {
+    return <ContentLoading />;
+  }
+
+  if (pageMdx.status === S_SUCCEEDED) {
+    return (
+      <MDXProvider
+        components={{
+          Block,
+          Prose: ContentBlockProse,
+          Figure: ContentBlockFigure,
+          Caption,
+          Chapter,
+          Image,
+          Map: LazyMap,
+          MultilayerMap: LazyMultilayerMap,
+          ScrollytellingBlock: LazyScrollyTelling,
+          Chart: LazyChart,
+          CompareImage: LazyCompareImage,
+          NotebookConnectCallout: NotebookConnectCalloutBlock,
+          Link: SmartLink,
+          a: CustomLink,
+          Table: LazyTable,
+          Embed: LazyEmbed,
+          Widget
+        }}
+      >
+        <pageMdx.MdxContent {...(props.throughProps || {})} />
+      </MDXProvider>
+    );
+  }
+
+  return null;
+}
+
+MdxContent.propTypes = {
+  loader: T.func,
+  throughProps: T.object
+};
+
+export default MdxContent;
diff --git a/app/scripts/components/common/meta-tags.jsx b/packages/veda-ui/src/components/common/meta-tags.js
similarity index 100%
rename from app/scripts/components/common/meta-tags.jsx
rename to packages/veda-ui/src/components/common/meta-tags.js
diff --git a/packages/veda-ui/src/components/common/meta-tags.jsx b/packages/veda-ui/src/components/common/meta-tags.jsx
new file mode 100644
index 000000000..24f7afbf5
--- /dev/null
+++ b/packages/veda-ui/src/components/common/meta-tags.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import T from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { useTheme } from 'styled-components';
+import { useLocation } from 'react-router-dom';
+
+const appTitle = process.env.APP_TITLE;
+const baseUrl = window.location.origin;
+
+const defaultMetaImage = `${process.env.PUBLIC_URL ?? ''}/meta/meta-image.png`;
+
+function MetaTags({ title, description, thumbnail, children }) {
+  const theme = useTheme();
+  const location = useLocation();
+
+  return (
+    <Helmet>
+      <title>{title}</title>
+      {description ? <meta name='description' content={description} /> : null}
+      <meta name='theme-color' content={theme?.color.primary} />
+
+      {/* Twitter */}
+      <meta name='twitter:card' content='summary' />
+      <meta name='twitter:creator' content='author' />
+      <meta name='twitter:title' content={title} />
+      {description ? (
+        <meta name='twitter:description' content={description} />
+      ) : null}
+      <meta name='twitter:image' content={thumbnail || defaultMetaImage} />
+
+      {/* Open Graph */}
+      <meta property='og:type' content='website' />
+      <meta
+        property='og:url'
+        content={`${baseUrl}${location.pathname}` || baseUrl}
+      />
+      <meta property='og:site_name' content={appTitle} />
+      <meta property='og:title' content={title} />
+      <meta property='og:image' content={thumbnail || defaultMetaImage} />
+      {description ? (
+        <meta property='og:description' content={description} />
+      ) : null}
+
+      {/* Additional children */}
+      {children}
+
+      {/* Additional javascript */}
+      {/* @NOTE https://github.com/NASA-IMPACT/veda-ui/pull/846 */}
+      {process.env.CUSTOM_SCRIPT_SRC ? (
+        <script
+          async
+          type='text/javascript'
+          src={process.env.CUSTOM_SCRIPT_SRC}
+          id={
+            process.env.CUSTOM_SCRIPT_ID
+              ? process.env.CUSTOM_SCRIPT_ID
+              : 'custom_script_id'
+          }
+        />
+      ) : null}
+    </Helmet>
+  );
+}
+
+MetaTags.propTypes = {
+  title: T.string,
+  description: T.string,
+  thumbnail: T.string,
+  children: T.node
+};
+
+export default MetaTags;
diff --git a/app/scripts/components/common/nasa-logo-color.jsx b/packages/veda-ui/src/components/common/nasa-logo-color.js
similarity index 100%
rename from app/scripts/components/common/nasa-logo-color.jsx
rename to packages/veda-ui/src/components/common/nasa-logo-color.js
diff --git a/packages/veda-ui/src/components/common/nasa-logo-color.jsx b/packages/veda-ui/src/components/common/nasa-logo-color.jsx
new file mode 100644
index 000000000..92fa9cc33
--- /dev/null
+++ b/packages/veda-ui/src/components/common/nasa-logo-color.jsx
@@ -0,0 +1,255 @@
+import React from 'react';
+
+export default function NasaLogoColor() {
+  return (
+    <svg
+      role='img'
+      aria-label='NASA Logo'
+      width='44'
+      height='44'
+      viewBox='0 0 44 44'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g id='NASA_logo'>
+        <path
+          id='Vector'
+          d='M20.3614 39.939C30.26 39.939 38.2843 31.9146 38.2843 22.016C38.2843 12.1174 30.26 4.09303 20.3614 4.09303C10.4628 4.09303 2.43839 12.1174 2.43839 22.016C2.43839 31.9146 10.4628 39.939 20.3614 39.939Z'
+          fill='#0C448C'
+        />
+        <g id='Group'>
+          <path
+            id='Vector_2'
+            d='M19.3031 7.73658C19.4141 7.73658 19.5041 7.64662 19.5041 7.53565C19.5041 7.42468 19.4141 7.33472 19.3031 7.33472C19.1922 7.33472 19.1022 7.42468 19.1022 7.53565C19.1022 7.64662 19.1922 7.73658 19.3031 7.73658Z'
+            fill='white'
+          />
+          <path
+            id='Vector_3'
+            d='M21.366 8.00449C21.477 8.00449 21.567 7.91453 21.567 7.80356C21.567 7.69259 21.477 7.60263 21.366 7.60263C21.2551 7.60263 21.1651 7.69259 21.1651 7.80356C21.1651 7.91453 21.2551 8.00449 21.366 8.00449Z'
+            fill='white'
+          />
+          <path
+            id='Vector_4'
+            d='M24.0719 11.648C24.1829 11.648 24.2728 11.5581 24.2728 11.4471C24.2728 11.3361 24.1829 11.2462 24.0719 11.2462C23.9609 11.2462 23.871 11.3361 23.871 11.4471C23.871 11.5581 23.9609 11.648 24.0719 11.648Z'
+            fill='white'
+          />
+          <path
+            id='Vector_5'
+            d='M9.22985 30.4015C9.34082 30.4015 9.43078 30.3116 9.43078 30.2006C9.43078 30.0896 9.34082 29.9997 9.22985 29.9997C9.11888 29.9997 9.02892 30.0896 9.02892 30.2006C9.02892 30.3116 9.11888 30.4015 9.22985 30.4015Z'
+            fill='white'
+          />
+          <path
+            id='Vector_6'
+            d='M9.75226 32.009C9.86323 32.009 9.95319 31.919 9.95319 31.808C9.95319 31.6971 9.86323 31.6071 9.75226 31.6071C9.64129 31.6071 9.55133 31.6971 9.55133 31.808C9.55133 31.919 9.64129 32.009 9.75226 32.009Z'
+            fill='white'
+          />
+          <path
+            id='Vector_7'
+            d='M7.26072 30.5922C7.34383 30.5922 7.4112 30.5248 7.4112 30.4417C7.4112 30.3586 7.34383 30.2912 7.26072 30.2912C7.17762 30.2912 7.11025 30.3586 7.11025 30.4417C7.11025 30.5248 7.17762 30.5922 7.26072 30.5922Z'
+            fill='white'
+          />
+          <path
+            id='Vector_8'
+            d='M15.4319 33.7504C15.5152 33.7504 15.5828 33.6828 15.5828 33.5995C15.5828 33.5161 15.5152 33.4485 15.4319 33.4485C15.3485 33.4485 15.281 33.5161 15.281 33.5995C15.281 33.6828 15.3485 33.7504 15.4319 33.7504Z'
+            fill='white'
+          />
+          <path
+            id='Vector_9'
+            d='M28.2477 31.0878C28.3308 31.0878 28.3981 31.0204 28.3981 30.9373C28.3981 30.8542 28.3308 30.7869 28.2477 30.7869C28.1645 30.7869 28.0972 30.8542 28.0972 30.9373C28.0972 31.0204 28.1645 31.0878 28.2477 31.0878Z'
+            fill='white'
+          />
+          <path
+            id='Vector_10'
+            d='M31.972 27.0429C32.0554 27.0429 32.1229 26.9753 32.1229 26.8919C32.1229 26.8086 32.0554 26.741 31.972 26.741C31.8887 26.741 31.8211 26.8086 31.8211 26.8919C31.8211 26.9753 31.8887 27.0429 31.972 27.0429Z'
+            fill='white'
+          />
+          <path
+            id='Vector_11'
+            d='M13.7173 12.7728C13.8004 12.7728 13.8678 12.7054 13.8678 12.6223C13.8678 12.5392 13.8004 12.4718 13.7173 12.4718C13.6342 12.4718 13.5668 12.5392 13.5668 12.6223C13.5668 12.7054 13.6342 12.7728 13.7173 12.7728Z'
+            fill='white'
+          />
+          <path
+            id='Vector_12'
+            d='M17.8163 9.76241C17.8994 9.76241 17.9667 9.69504 17.9667 9.61193C17.9667 9.52883 17.8994 9.46146 17.8163 9.46146C17.7332 9.46146 17.6658 9.52883 17.6658 9.61193C17.6658 9.69504 17.7332 9.76241 17.8163 9.76241Z'
+            fill='white'
+          />
+          <path
+            id='Vector_13'
+            d='M17.3711 9.46771C17.4542 9.46771 17.5216 9.40034 17.5216 9.31723C17.5216 9.23413 17.4542 9.16676 17.3711 9.16676C17.288 9.16676 17.2206 9.23413 17.2206 9.31723C17.2206 9.40034 17.288 9.46771 17.3711 9.46771Z'
+            fill='white'
+          />
+          <path
+            id='Vector_14'
+            d='M16.9692 9.17301C17.0523 9.17301 17.1197 9.10564 17.1197 9.02254C17.1197 8.93943 17.0523 8.87206 16.9692 8.87206C16.8861 8.87206 16.8187 8.93943 16.8187 9.02254C16.8187 9.10564 16.8861 9.17301 16.9692 9.17301Z'
+            fill='white'
+          />
+          <path
+            id='Vector_15'
+            d='M14.3603 13.5502C14.4434 13.5502 14.5107 13.4828 14.5107 13.3997C14.5107 13.3166 14.4434 13.2492 14.3603 13.2492C14.2772 13.2492 14.2098 13.3166 14.2098 13.3997C14.2098 13.4828 14.2772 13.5502 14.3603 13.5502Z'
+            fill='white'
+          />
+          <path
+            id='Vector_16'
+            d='M20.398 5.71701C20.4811 5.71701 20.5485 5.64964 20.5485 5.56654C20.5485 5.48343 20.4811 5.41606 20.398 5.41606C20.3149 5.41606 20.2475 5.48343 20.2475 5.56654C20.2475 5.64964 20.3149 5.71701 20.398 5.71701Z'
+            fill='white'
+          />
+          <path
+            id='Vector_17'
+            d='M21.3897 10.0571C21.4728 10.0571 21.5402 9.98973 21.5402 9.90663C21.5402 9.82352 21.4728 9.75615 21.3897 9.75615C21.3066 9.75615 21.2392 9.82352 21.2392 9.90663C21.2392 9.98973 21.3066 10.0571 21.3897 10.0571Z'
+            fill='white'
+          />
+          <path
+            id='Vector_18'
+            d='M19.8256 9.20962C19.9087 9.20962 19.976 9.14225 19.976 9.05915C19.976 8.97604 19.9087 8.90867 19.8256 8.90867C19.7425 8.90867 19.6751 8.97604 19.6751 9.05915C19.6751 9.14225 19.7425 9.20962 19.8256 9.20962Z'
+            fill='white'
+          />
+          <path
+            id='Vector_19'
+            d='M17.1465 10.3621C17.2296 10.3621 17.297 10.2947 17.297 10.2116C17.297 10.1285 17.2296 10.0611 17.1465 10.0611C17.0634 10.0611 16.996 10.1285 16.996 10.2116C16.996 10.2947 17.0634 10.3621 17.1465 10.3621Z'
+            fill='white'
+          />
+          <path
+            id='Vector_20'
+            d='M28.9612 35.0631C29.0443 35.0631 29.1116 34.9957 29.1116 34.9126C29.1116 34.8295 29.0443 34.7622 28.9612 34.7622C28.8781 34.7622 28.8107 34.8295 28.8107 34.9126C28.8107 34.9957 28.8781 35.0631 28.9612 35.0631Z'
+            fill='white'
+          />
+          <path
+            id='Vector_21'
+            d='M8.97534 31.3696C9.05869 31.3696 9.12626 31.302 9.12626 31.2186C9.12626 31.1353 9.05869 31.0677 8.97534 31.0677C8.89199 31.0677 8.82442 31.1353 8.82442 31.2186C8.82442 31.302 8.89199 31.3696 8.97534 31.3696Z'
+            fill='white'
+          />
+          <path
+            id='Vector_22'
+            d='M19.4505 33.3119C19.5338 33.3119 19.6014 33.2443 19.6014 33.161C19.6014 33.0776 19.5338 33.01 19.4505 33.01C19.3671 33.01 19.2996 33.0776 19.2996 33.161C19.2996 33.2443 19.3671 33.3119 19.4505 33.3119Z'
+            fill='white'
+          />
+          <path
+            id='Vector_23'
+            d='M12.0929 31.249C12.1762 31.249 12.2438 31.1814 12.2438 31.0981C12.2438 31.0147 12.1762 30.9472 12.0929 30.9472C12.0095 30.9472 11.942 31.0147 11.942 31.0981C11.942 31.1814 12.0095 31.249 12.0929 31.249Z'
+            fill='white'
+          />
+          <path
+            id='Vector_24'
+            d='M13.3958 33.3757C13.4792 33.3757 13.5467 33.3082 13.5467 33.2248C13.5467 33.1415 13.4792 33.0739 13.3958 33.0739C13.3124 33.0739 13.2449 33.1415 13.2449 33.2248C13.2449 33.3082 13.3124 33.3757 13.3958 33.3757Z'
+            fill='white'
+          />
+          <path
+            id='Vector_25'
+            d='M22.9869 32.0357C23.07 32.0357 23.1373 31.9684 23.1373 31.8853C23.1373 31.8022 23.07 31.7348 22.9869 31.7348C22.9037 31.7348 22.8364 31.8022 22.8364 31.8853C22.8364 31.9684 22.9037 32.0357 22.9869 32.0357Z'
+            fill='white'
+          />
+          <path
+            id='Vector_26'
+            d='M28.2744 29.0517C28.3575 29.0517 28.4249 28.9844 28.4249 28.9013C28.4249 28.8181 28.3575 28.7508 28.2744 28.7508C28.1913 28.7508 28.124 28.8181 28.124 28.9013C28.124 28.9844 28.1913 29.0517 28.2744 29.0517Z'
+            fill='white'
+          />
+          <path
+            id='Vector_27'
+            d='M32.2833 30.8833C32.3664 30.8833 32.4337 30.816 32.4337 30.7329C32.4337 30.6498 32.3664 30.5824 32.2833 30.5824C32.2002 30.5824 32.1328 30.6498 32.1328 30.7329C32.1328 30.816 32.2002 30.8833 32.2833 30.8833Z'
+            fill='white'
+          />
+          <path
+            id='Vector_28'
+            d='M33.6495 31.7576C33.7326 31.7576 33.8 31.6902 33.8 31.6071C33.8 31.524 33.7326 31.4566 33.6495 31.4566C33.5664 31.4566 33.4991 31.524 33.4991 31.6071C33.4991 31.6902 33.5664 31.7576 33.6495 31.7576Z'
+            fill='white'
+          />
+          <path
+            id='Vector_29'
+            d='M33.8742 29.3732C33.9573 29.3732 34.0246 29.3058 34.0246 29.2227C34.0246 29.1396 33.9573 29.0723 33.8742 29.0723C33.7911 29.0723 33.7237 29.1396 33.7237 29.2227C33.7237 29.3058 33.7911 29.3732 33.8742 29.3732Z'
+            fill='white'
+          />
+          <path
+            id='Vector_30'
+            d='M13.9414 25.9976C14.0245 25.9976 14.0919 25.9302 14.0919 25.8471C14.0919 25.764 14.0245 25.6966 13.9414 25.6966C13.8583 25.6966 13.791 25.764 13.791 25.8471C13.791 25.9302 13.8583 25.9976 13.9414 25.9976Z'
+            fill='white'
+          />
+          <path
+            id='Vector_31'
+            d='M13.9986 29.504C14.1096 29.504 14.1995 29.4141 14.1995 29.3031C14.1995 29.1921 14.1096 29.1022 13.9986 29.1022C13.8876 29.1022 13.7977 29.1921 13.7977 29.3031C13.7977 29.4141 13.8876 29.504 13.9986 29.504Z'
+            fill='white'
+          />
+          <path
+            id='Vector_32'
+            d='M15.2042 32.0491C15.3151 32.0491 15.4051 31.9592 15.4051 31.8482C15.4051 31.7372 15.3151 31.6473 15.2042 31.6473C15.0932 31.6473 15.0032 31.7372 15.0032 31.8482C15.0032 31.9592 15.0932 32.0491 15.2042 32.0491Z'
+            fill='white'
+          />
+          <path
+            id='Vector_33'
+            d='M29.6443 29.3969C29.7553 29.3969 29.8453 29.3069 29.8453 29.1959C29.8453 29.085 29.7553 28.995 29.6443 28.995C29.5334 28.995 29.4434 29.085 29.4434 29.1959C29.4434 29.3069 29.5334 29.3969 29.6443 29.3969Z'
+            fill='white'
+          />
+          <path
+            id='Vector_34'
+            d='M34.8418 29.1022C34.9527 29.1022 35.0427 29.0122 35.0427 28.9012C35.0427 28.7903 34.9527 28.7003 34.8418 28.7003C34.7308 28.7003 34.6408 28.7903 34.6408 28.9012C34.6408 29.0122 34.7308 29.1022 34.8418 29.1022Z'
+            fill='white'
+          />
+          <path
+            id='Vector_35'
+            d='M32.2698 28.0037C32.3808 28.0037 32.4708 27.9138 32.4708 27.8028C32.4708 27.6918 32.3808 27.6019 32.2698 27.6019C32.1589 27.6019 32.0689 27.6918 32.0689 27.8028C32.0689 27.9138 32.1589 28.0037 32.2698 28.0037Z'
+            fill='white'
+          />
+          <path
+            id='Vector_36'
+            d='M29.6443 28.1109C29.7553 28.1109 29.8453 28.0209 29.8453 27.91C29.8453 27.799 29.7553 27.709 29.6443 27.709C29.5334 27.709 29.4434 27.799 29.4434 27.91C29.4434 28.0209 29.5334 28.1109 29.6443 28.1109Z'
+            fill='white'
+          />
+          <path
+            id='Vector_37'
+            d='M24.2286 7.40973L24.7282 7.36196L24.2295 7.33383C24.2139 7.23738 24.1366 7.16192 24.0393 7.14942L23.9915 6.652L23.9629 7.15344C23.8727 7.17353 23.8035 7.24899 23.7924 7.34276L23.2815 7.38919L23.7959 7.41688C23.8147 7.50306 23.8843 7.57048 23.9719 7.58655L24.0183 8.09915L24.0455 7.58745C24.138 7.57182 24.2112 7.50082 24.2286 7.40973Z'
+            fill='white'
+          />
+          <path
+            id='Vector_38'
+            d='M15.7958 12.9724L16.2954 12.9246L15.7967 12.8965C15.7815 12.8 15.7038 12.7246 15.6065 12.7121L15.5587 12.2147L15.5306 12.7161C15.4399 12.7362 15.3707 12.8116 15.3595 12.9054L14.8487 12.9518L15.3631 12.9795C15.3819 13.0657 15.4515 13.1331 15.539 13.1492L15.5855 13.6618L15.6132 13.1501C15.7056 13.1349 15.7788 13.0635 15.7958 12.9724Z'
+            fill='white'
+          />
+          <path
+            id='Vector_39'
+            d='M34.4756 27.6796L34.9753 27.6318L34.4765 27.6037C34.4613 27.5072 34.3836 27.4318 34.2863 27.4193L34.2385 26.9219L34.2104 27.4233C34.1202 27.4434 34.051 27.5188 34.0398 27.6126L33.529 27.6591L34.0434 27.6867C34.0621 27.7729 34.1318 27.8403 34.2193 27.8564L34.2658 28.369L34.2934 27.8573C34.385 27.8421 34.4582 27.7711 34.4756 27.6796Z'
+            fill='white'
+          />
+          <path
+            id='Vector_40'
+            d='M14.108 35.3694L14.6076 35.3216L14.1089 35.2935C14.0933 35.197 14.016 35.1216 13.9187 35.1091L13.8709 34.6121L13.8428 35.1131C13.7521 35.1332 13.6829 35.2086 13.6717 35.3024L13.1609 35.3489L13.6753 35.3765C13.6941 35.4627 13.7637 35.5306 13.8512 35.5462L13.8977 36.0588L13.9254 35.5471C14.0173 35.5319 14.091 35.4605 14.108 35.3694Z'
+            fill='white'
+          />
+          <path
+            id='Vector_41'
+            d='M32.8883 31.6187L33.3879 31.571L32.8892 31.5428C32.874 31.4464 32.7963 31.3709 32.699 31.3584L32.6512 30.861L32.623 31.362C32.5329 31.3821 32.4636 31.4575 32.4525 31.5513L31.9417 31.5978L32.4561 31.6254C32.4748 31.7116 32.5445 31.779 32.632 31.7951L32.6784 32.3077L32.7061 31.796C32.7976 31.7813 32.8713 31.7098 32.8883 31.6187Z'
+            fill='white'
+          />
+          <path
+            id='Vector_42'
+            d='M24.6117 17.7228C22.5278 18.5328 20.4953 19.2557 18.7803 19.7924C15.2953 20.8837 5.76 23.8378 0 27.5617L0.482232 27.7492C3.99181 25.7667 6.27304 25.1438 8.46586 24.454C10.8502 23.7038 18.5584 21.8999 22.0487 20.9176C23.228 20.5859 24.609 20.1514 26.0718 19.6227C25.7316 19.1481 25.3726 18.6721 24.9948 18.197C24.8685 18.0367 24.7403 17.8787 24.6117 17.7228ZM27.1577 21.232C26.6532 21.5726 26.2303 21.8446 25.9343 22.016C24.2197 23.0073 15.8605 28.7137 13.9588 30.0265C12.0571 31.3392 6.77894 36.3223 5.22508 37.769L5.1715 38.3579C10.1814 33.8571 11.7531 32.7471 13.7445 31.232C16.2093 29.3567 21.308 25.8873 23.0409 24.7755C24.6974 23.7128 26.1915 22.7354 27.5323 21.841C27.5105 21.8044 27.4886 21.7678 27.4667 21.7307C27.3658 21.5651 27.2627 21.399 27.1577 21.232ZM34.9891 12.9608C32.5485 14.3914 28.7018 16.1181 24.9698 17.5831C25.0591 17.6925 25.148 17.8027 25.2364 17.9139C25.6534 18.439 26.0468 18.9677 26.417 19.4968C29.3505 18.4163 32.5694 16.966 35.1235 15.2107C33.9067 16.3636 29.8841 19.37 27.4314 21.0458C27.5578 21.2516 27.6801 21.4574 27.7985 21.6624C31.5143 19.1758 34.0148 17.3455 35.4718 16.1216C37.4811 14.4338 42.0623 10.6563 43.8037 5.59288C40.7491 9.47798 37.1377 11.7012 34.9891 12.9608Z'
+            fill='#E54D2F'
+          />
+          <path
+            id='Vector_43'
+            d='M18.0551 26.4539C17.66 25.9565 17.1134 25.2903 16.7031 24.7737C16.1543 24.0829 15.6467 23.385 15.1814 22.688C15.0296 22.726 14.8782 22.7639 14.7268 22.8019C15.2886 23.6784 15.9123 24.5536 16.5919 25.4091C17.0884 26.0342 17.5399 26.5374 17.7712 26.8504C17.818 26.9138 17.9109 27.054 18.0364 27.2407C18.1811 27.1424 18.3271 27.0433 18.4744 26.9433C18.332 26.7884 18.1913 26.6254 18.0551 26.4539ZM20.9396 29.0723C20.615 28.7651 19.8278 28.252 19.0084 27.4822C18.8276 27.6064 18.645 27.7323 18.4619 27.8591C18.991 28.6048 19.7117 29.5206 20.2761 29.7876C21.1262 30.1903 21.3553 29.4661 20.9396 29.0723ZM25.2364 17.9139C20.5516 12.0173 14.8286 8.77785 12.3612 10.7385C10.4448 12.2611 11.2315 16.711 13.8731 21.3856C14.0097 21.3387 14.145 21.2927 14.279 21.2471C11.6129 16.6927 10.8833 12.4602 12.6907 11.0238C14.9621 9.219 20.4467 12.4709 24.9957 18.1966C25.9374 19.3816 26.7652 20.5711 27.4663 21.7307C30.1507 26.1735 30.9745 30.1912 29.1197 31.8313C28.5522 32.3331 26.8179 32.5301 24.5461 31.5075C24.5144 31.5473 24.5653 31.6549 24.605 31.6812C26.5661 32.4698 28.4446 32.7703 29.393 32.017C31.6719 30.206 29.9212 23.8106 25.2364 17.9139Z'
+            fill='white'
+          />
+          <path
+            id='Vector_44'
+            d='M5.14426 18.6136H8.14482L10.6631 22.8867C10.6631 22.8867 10.6631 19.7924 10.6631 19.5513C10.6631 19.1762 10.1876 18.6873 10.0202 18.6136C10.2211 18.6136 11.9759 18.6136 12.0964 18.6136C11.9692 18.6471 11.5606 19.1427 11.5606 19.5513C11.5606 19.7522 11.5606 24.2397 11.5606 24.454C11.5606 24.7554 11.996 25.1706 12.2036 25.3314H9.31021L6.7517 21.0382C6.7517 21.0382 6.7517 24.2397 6.7517 24.4138C6.7517 24.7487 7.07989 25.0702 7.42147 25.3448H5.21124C5.52603 25.2108 5.82742 24.7889 5.85421 24.454C5.881 24.1191 5.85421 19.7991 5.85421 19.6116C5.85421 19.203 5.45905 18.8681 5.14426 18.6136Z'
+            fill='white'
+          />
+          <path
+            id='Vector_45'
+            d='M32.5913 25.3314H36.5831C36.3621 25.2778 36.1143 25.0166 35.9804 24.6683C35.8464 24.32 33.7299 18.6136 33.7299 18.6136H32.2122C31.7818 18.9235 31.3206 19.2503 30.8281 19.5946C30.8267 19.6071 30.8254 19.6196 30.8231 19.6317C30.7571 20.0335 29.5693 24.3352 29.497 24.5478C29.3965 24.8425 28.8808 25.1706 28.6732 25.3448H30.8231C30.6088 25.1037 30.4347 24.8692 30.4749 24.6013C30.515 24.3334 30.6356 23.7976 30.6356 23.7976H32.8592C32.9597 24.0655 33.0347 24.3062 33.0736 24.5344C33.1204 24.809 32.8391 25.1171 32.5913 25.3314ZM30.8365 22.9403L31.5867 20.489L32.5779 22.9403H30.8365ZM30.4985 18.8583C30.6088 18.777 30.7196 18.6953 30.8298 18.6136H30.2471C30.3052 18.6672 30.4012 18.7516 30.4985 18.8583Z'
+            fill='white'
+          />
+          <path
+            id='Vector_46'
+            d='M15.231 24.6013C15.2711 24.3334 15.3917 23.7976 15.3917 23.7976H17.6153C17.7158 24.0655 17.7908 24.3062 17.8297 24.5344C17.8765 24.809 17.5952 25.1171 17.3474 25.3314H20.8619C20.9351 25.2823 21.0079 25.2332 21.0807 25.1845C20.9445 25.0639 20.819 24.8831 20.7364 24.6683C20.6025 24.32 18.486 18.6136 18.486 18.6136H15.0032C15.1707 18.7677 15.6529 19.1829 15.5792 19.6317C15.5136 20.0335 14.3254 24.3352 14.2531 24.5478C14.1526 24.8425 13.6369 25.1706 13.4293 25.3448H15.5792C15.3649 25.1037 15.1908 24.8692 15.231 24.6013ZM16.3428 20.489L17.334 22.9403H15.5926L16.3428 20.489Z'
+            fill='white'
+          />
+          <path
+            id='Vector_47'
+            d='M27.3712 21.9482C26.7157 22.3848 26.024 22.8407 25.2953 23.3167C25.6222 23.4752 25.8825 23.6744 25.9075 23.9316C25.9539 24.4147 24.9832 24.6482 24.1058 24.5477C23.9303 24.5276 23.758 24.4817 23.5937 24.42C23.4115 24.5375 23.2275 24.6558 23.0409 24.7755C22.8511 24.8974 22.6207 25.0474 22.3577 25.2206V25.9141C22.5319 25.5725 22.9127 25.2666 23.2083 25.251C23.3356 25.2443 23.7776 25.6529 25.5994 25.5524C26.4835 25.5037 28.1914 24.5611 28.1646 23.4761C28.1485 22.8349 27.8136 22.3348 27.3712 21.9482ZM22.3573 23.6235V24.3298C22.5185 24.2222 22.6774 24.1164 22.8333 24.0133C22.5881 23.8427 22.4144 23.6833 22.3573 23.6235ZM26.7483 21.5048C26.5786 21.4043 26.4067 21.3163 26.2419 21.2386C25.3846 20.8368 24.4871 20.7631 24.2996 20.2206C24.1674 19.8379 24.5407 19.4839 25.4516 19.4972C26.3625 19.5106 27.2064 20.0532 27.4341 20.2474V18.5194C27.3671 18.5864 27.0733 18.9235 26.8045 18.8677C26.2888 18.7605 25.4114 18.6207 24.4068 18.6265C23.2548 18.6332 22.2635 19.5236 22.23 20.6492C22.1831 22.2232 23.4423 22.6519 24.1523 22.8997C24.2255 22.9251 24.309 22.9524 24.3996 22.9814C25.0805 22.5384 25.619 22.1973 25.9343 22.0156C26.1459 21.8937 26.4232 21.7186 26.7483 21.5048Z'
+            fill='white'
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/app/scripts/components/common/nasa-logo.jsx b/packages/veda-ui/src/components/common/nasa-logo.js
similarity index 100%
rename from app/scripts/components/common/nasa-logo.jsx
rename to packages/veda-ui/src/components/common/nasa-logo.js
diff --git a/packages/veda-ui/src/components/common/nasa-logo.jsx b/packages/veda-ui/src/components/common/nasa-logo.jsx
new file mode 100644
index 000000000..693c031f3
--- /dev/null
+++ b/packages/veda-ui/src/components/common/nasa-logo.jsx
@@ -0,0 +1,415 @@
+import React from 'react';
+
+export default function NasaLogo() {
+  return (
+    <svg
+      width={312}
+      height={258}
+      viewBox='0 0 312 258'
+      style={{
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        strokeLinejoin: 'round',
+        strokeMiterlimit: 2
+      }}
+    >
+      <title>NASA</title>
+      <g id='nasa-logo-pos'>
+        <path
+          d='M273.427,387C273.427,457.761 215.188,516 144.427,516C73.665,516 15.427,457.761 15.427,387C15.427,316.239 73.665,258 144.427,258C215.188,258 273.427,316.239 273.427,387Z'
+          style={{ fill: 'rgb(0,102,179)', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M146.205,269.721C146.205,270.297 145.731,270.771 145.154,270.771C144.578,270.771 144.104,270.297 144.104,269.721C144.104,269.145 144.578,268.67 145.154,268.67C145.731,268.67 146.205,269.145 146.205,269.721Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M153.48,285.643C153.48,286.353 152.896,286.936 152.187,286.936C151.477,286.936 150.893,286.353 150.893,285.643C150.893,284.934 151.477,284.35 152.187,284.35C152.896,284.35 153.48,284.934 153.48,285.643Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M172.393,311.67C172.393,312.379 171.81,312.963 171.1,312.963C170.39,312.963 169.807,312.379 169.807,311.67C169.807,310.959 170.39,310.376 171.1,310.376C171.81,310.376 172.393,310.959 172.393,311.67Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M142.002,294.615C142.002,295.191 141.528,295.666 140.951,295.666C140.375,295.666 139.901,295.191 139.901,294.615C139.901,294.039 140.375,293.564 140.951,293.564C141.528,293.564 142.002,294.039 142.002,294.615Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M153.318,300.596C153.318,301.172 152.843,301.647 152.267,301.647C151.691,301.647 151.217,301.172 151.217,300.596C151.217,300.02 151.691,299.545 152.267,299.545C152.843,299.545 153.318,300.02 153.318,300.596Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M138.607,283.865C138.607,284.574 138.023,285.158 137.314,285.158C136.604,285.158 136.021,284.574 136.021,283.865C136.021,283.156 136.604,282.572 137.314,282.572C138.023,282.572 138.607,283.156 138.607,283.865Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M121.472,294.292C121.472,294.869 120.998,295.343 120.422,295.343C119.845,295.343 119.371,294.869 119.371,294.292C119.371,293.716 119.845,293.241 120.422,293.241C120.998,293.241 121.472,293.716 121.472,294.292Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M124.544,296.394C124.544,296.97 124.069,297.444 123.493,297.444C122.917,297.444 122.442,296.97 122.442,296.394C122.442,295.817 122.917,295.343 123.493,295.343C124.069,295.343 124.544,295.817 124.544,296.394Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M127.615,298.495C127.615,299.071 127.14,299.545 126.564,299.545C125.987,299.545 125.513,299.071 125.513,298.495C125.513,297.918 125.987,297.444 126.564,297.444C127.14,297.444 127.615,297.918 127.615,298.495Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M122.927,302.536C122.927,303.112 122.453,303.587 121.877,303.587C121.3,303.587 120.826,303.112 120.826,302.536C120.826,301.959 121.3,301.485 121.877,301.485C122.453,301.485 122.927,301.959 122.927,302.536Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M98.517,319.671C98.517,320.248 98.043,320.722 97.466,320.722C96.89,320.722 96.415,320.248 96.415,319.671C96.415,319.095 96.89,318.621 97.466,318.621C98.043,318.621 98.517,319.095 98.517,319.671Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M103.044,325.168C103.044,325.744 102.569,326.218 101.993,326.218C101.417,326.218 100.942,325.744 100.942,325.168C100.942,324.591 101.417,324.117 101.993,324.117C102.569,324.117 103.044,324.591 103.044,325.168Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M99.487,413.915C99.487,414.491 99.012,414.966 98.436,414.966C97.86,414.966 97.385,414.491 97.385,413.915C97.385,413.339 97.86,412.864 98.436,412.864C99.012,412.864 99.487,413.339 99.487,413.915Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M100.134,438.404C100.134,439.115 99.549,439.699 98.84,439.699C98.131,439.699 97.547,439.115 97.547,438.404C97.547,437.696 98.131,437.113 98.84,437.113C99.549,437.113 100.134,437.696 100.134,438.404Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M86.231,450.935C86.231,451.511 85.756,451.986 85.18,451.986C84.604,451.986 84.13,451.511 84.13,450.935C84.13,450.357 84.604,449.884 85.18,449.884C85.756,449.884 86.231,450.357 86.231,450.935Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M69.58,456.027C69.58,456.736 68.996,457.32 68.287,457.32C67.578,457.32 66.994,456.736 66.994,456.027C66.994,455.316 67.578,454.732 68.287,454.732C68.996,454.732 69.58,455.316 69.58,456.027Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M66.186,444.71C66.186,445.419 65.602,446.003 64.893,446.003C64.183,446.003 63.599,445.419 63.599,444.71C63.599,444.001 64.183,443.417 64.893,443.417C65.602,443.417 66.186,444.001 66.186,444.71Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M64.246,451.904C64.246,452.48 63.772,452.954 63.195,452.954C62.619,452.954 62.145,452.48 62.145,451.904C62.145,451.327 62.619,450.853 63.195,450.853C63.772,450.853 64.246,451.327 64.246,451.904Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M51.798,445.923C51.798,446.499 51.324,446.974 50.747,446.974C50.171,446.974 49.697,446.499 49.697,445.923C49.697,445.347 50.171,444.872 50.747,444.872C51.324,444.872 51.798,445.347 51.798,445.923Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M95.283,466.129C95.283,466.705 94.809,467.18 94.233,467.18C93.656,467.18 93.182,466.705 93.182,466.129C93.182,465.553 93.656,465.078 94.233,465.078C94.809,465.078 95.283,465.553 95.283,466.129Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M108.378,456.511C108.378,457.22 107.794,457.804 107.085,457.804C106.376,457.804 105.792,457.22 105.792,456.511C105.792,455.802 106.376,455.218 107.085,455.218C107.794,455.218 108.378,455.802 108.378,456.511Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M109.833,468.877C109.833,469.453 109.359,469.928 108.782,469.928C108.206,469.928 107.731,469.453 107.731,468.877C107.731,468.301 108.206,467.828 108.782,467.828C109.359,467.828 109.833,468.301 109.833,468.877Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M163.664,457.077C163.664,457.654 163.19,458.128 162.613,458.128C162.037,458.128 161.563,457.654 161.563,457.077C161.563,456.499 162.037,456.027 162.613,456.027C163.19,456.027 163.664,456.499 163.664,457.077Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M138.607,465.967C138.607,466.545 138.132,467.018 137.556,467.018C136.98,467.018 136.506,466.545 136.506,465.967C136.506,465.391 136.98,464.918 137.556,464.918C138.132,464.918 138.607,465.391 138.607,465.967Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M206.017,478.739C206.017,479.315 205.543,479.789 204.966,479.789C204.39,479.789 203.915,479.315 203.915,478.739C203.915,478.162 204.39,477.688 204.966,477.688C205.543,477.688 206.017,478.162 206.017,478.739Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M211.513,429.029C211.513,429.738 210.929,430.322 210.22,430.322C209.511,430.322 208.927,429.738 208.927,429.029C208.927,428.321 209.511,427.737 210.22,427.737C210.929,427.737 211.513,428.321 211.513,429.029Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M201.167,436.061C201.167,436.639 200.693,437.113 200.116,437.113C199.54,437.113 199.066,436.639 199.066,436.061C199.066,435.487 199.54,435.012 200.116,435.012C200.693,435.012 201.167,435.487 201.167,436.061Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M211.352,438.082C211.352,438.791 210.768,439.375 210.059,439.375C209.35,439.375 208.766,438.791 208.766,438.082C208.766,437.373 209.35,436.789 210.059,436.789C210.768,436.789 211.352,437.373 211.352,438.082Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M201.167,450.611C201.167,451.187 200.693,451.661 200.116,451.661C199.54,451.661 199.066,451.187 199.066,450.611C199.066,450.034 199.54,449.56 200.116,449.56C200.693,449.56 201.167,450.034 201.167,450.611Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M227.517,421.998C227.517,422.574 227.043,423.049 226.467,423.049C225.889,423.049 225.414,422.574 225.414,421.998C225.414,421.422 225.889,420.947 226.467,420.947C227.043,420.947 227.517,421.422 227.517,421.998Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M230.104,428.383C230.104,429.094 229.52,429.676 228.811,429.676C228.101,429.676 227.517,429.094 227.517,428.383C227.517,427.674 228.101,427.09 228.811,427.09C229.52,427.09 230.104,427.674 230.104,428.383Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M248.209,435.981C248.209,436.69 247.625,437.274 246.915,437.274C246.205,437.274 245.621,436.69 245.621,435.981C245.621,435.272 246.205,434.688 246.915,434.688C247.625,434.688 248.209,435.272 248.209,435.981Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M229.781,449.48C229.781,450.056 229.306,450.53 228.73,450.53C228.154,450.53 227.679,450.056 227.679,449.48C227.679,448.904 228.154,448.429 228.73,448.429C229.306,448.429 229.781,448.904 229.781,449.48Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M241.419,438.487C241.419,439.063 240.945,439.537 240.368,439.537C239.792,439.537 239.318,439.063 239.318,438.487C239.318,437.91 239.792,437.436 240.368,437.436C240.945,437.436 241.419,437.91 241.419,438.487Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M239.318,455.46C239.318,456.036 238.843,456.511 238.267,456.511C237.691,456.511 237.216,456.036 237.216,455.46C237.216,454.884 237.691,454.409 238.267,454.409C238.843,454.409 239.318,454.884 239.318,455.46Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M168.848,282.647C169.026,281.99 169.558,281.478 170.227,281.329L170.594,278.562L171.137,281.355C171.785,281.54 172.287,282.07 172.434,282.733L175.235,283.13L172.408,283.628C172.23,284.267 171.717,284.765 171.07,284.923L170.594,287.77L170.114,284.902C169.485,284.72 168.993,284.21 168.837,283.569L166.135,283.13L168.848,282.647Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M96.37,480.946C96.548,480.289 97.081,479.776 97.749,479.627L98.117,476.862L98.661,479.655C99.308,479.838 99.811,480.367 99.956,481.031L102.758,481.428L99.931,481.926C99.753,482.565 99.239,483.063 98.592,483.221L98.117,486.07L97.637,483.201C97.007,483.018 96.516,482.508 96.359,481.867L93.657,481.428L96.37,480.946Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M229.659,455.38C229.837,454.722 230.368,454.21 231.037,454.062L231.405,451.294L231.949,454.087C232.596,454.271 233.099,454.802 233.244,455.466L236.045,455.863L233.219,456.361C233.04,456.999 232.528,457.497 231.88,457.655L231.405,460.503L230.925,457.634C230.295,457.452 229.805,456.941 229.648,456.302L226.947,455.863L229.659,455.38Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M240.211,426.869C240.388,426.211 240.92,425.699 241.588,425.551L241.956,422.783L242.5,425.576C243.148,425.762 243.651,426.291 243.796,426.955L246.597,427.352L243.771,427.85C243.592,428.488 243.079,428.987 242.433,429.145L241.956,431.992L241.477,429.123C240.847,428.942 240.357,428.432 240.2,427.791L237.497,427.352L240.211,426.869Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M109.303,321.556C109.481,320.898 110.013,320.387 110.681,320.237L111.049,317.471L111.593,320.264C112.241,320.448 112.743,320.978 112.889,321.642L115.69,322.039L112.863,322.536C112.685,323.175 112.172,323.674 111.525,323.832L111.049,326.679L110.569,323.811C109.94,323.628 109.449,323.118 109.293,322.478L106.59,322.039L109.303,321.556Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M100.756,381.578C110.286,398.228 121.393,410.411 130.341,421.988C138.283,432.264 153.757,437.408 148.307,442.286C142.164,447.782 127.292,423.533 127.292,423.533C117.408,411.614 107.949,398.97 98.299,382.433L100.756,381.578Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M0,425.268C46.046,395.026 126.409,375.502 192.597,349.225C242.884,329.26 287.601,304.198 311.639,269.689C250.721,393.777 81.066,379.089 3.312,426.424L0,425.268Z'
+          style={{ fill: 'rgb(237,28,36)', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M107.05,363.738L130.11,363.738L146.644,405.374L152.155,410.905L122.134,410.905L127.645,405.374L125.687,400.294L109.117,400.294L107.413,406.103L111.365,410.905L95.701,410.905L101.213,405.374L111.837,368.554L107.05,363.738ZM122.751,393.004L116.078,376.098L111.184,393.004L122.751,393.004Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M214.184,363.738L238.118,363.738L254.653,405.374L260.164,410.905L230.143,410.905L235.654,405.374L233.696,400.294L217.125,400.294L215.421,406.103L219.373,410.905L203.71,410.905L209.222,405.374L219.845,368.554L214.184,363.738ZM230.759,393.004L224.087,376.098L219.192,393.004L230.759,393.004Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M75.758,393.113L75.758,368.554L70.972,363.738L86.925,363.738L82.14,368.554L82.14,405.374L87.651,410.905L66.693,410.905L48.637,380.361L48.637,405.374L53.277,410.905L36.6,410.905L42.111,405.374L42.111,368.554L37.325,363.738L58.21,363.738L75.758,393.113Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M196.553,375.835L196.063,361.15L191.12,364.562C184.156,362.127 176.051,362.219 170.364,364.91C165.071,367.415 159.36,372.704 160.055,380.22C160.752,387.736 166.577,390.645 171.826,393.024C178.582,396.086 185.936,397.121 185.827,401.167C185.757,403.741 181.485,405.587 178.165,405.482C175.135,405.386 165.28,404.646 160.125,398.523L161.101,413.97L166.604,409.935C173.289,412.3 181.392,413.292 188.889,410.847C196.341,408.419 204.174,402.183 199.827,391.285C197.956,386.596 192.804,383.705 189.731,382.447C186.917,381.295 178.333,377.92 175.936,376.671C173.136,375.212 173.448,370.582 180.185,369.642C186.288,368.791 194.742,373.678 196.553,375.835Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M35.658,497.677C128.131,403.298 265.971,359.693 311.639,269.689C284.138,357.193 136.85,405.454 35.408,502.115L35.658,497.677Z'
+          style={{ fill: 'rgb(237,28,36)', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M98.299,382.433C97.216,380.577 96.131,378.672 95.042,376.714C70.388,332.361 73.944,287.098 118.563,306.82C156.431,323.559 192.6,370.511 207.146,403.857C213.887,419.307 231.96,479.946 173.764,455.374L173.65,455.019C228.613,477.651 219.111,420.301 189.691,376.331C173.042,351.45 151.331,330.725 137.637,320.722C92.05,287.421 64.246,307.79 96.253,373.097C97.702,376.053 99.208,378.875 100.756,381.578L98.299,382.433Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+      </g>
+      <g id='nasa-logo-neg-mono'>
+        <path
+          d='M273.427,129.05C273.427,199.811 215.188,258.05 144.427,258.05C73.665,258.05 15.427,199.811 15.427,129.05C15.427,58.289 73.665,0.05 144.427,0.05C215.188,0.05 273.427,58.289 273.427,129.05ZM263.427,129.05C263.427,194.326 209.703,248.05 144.427,248.05C79.151,248.05 25.427,194.326 25.427,129.05C25.427,63.774 79.151,10.05 144.427,10.05C209.703,10.05 263.427,63.774 263.427,129.05Z'
+          style={{ fill: 'white' }}
+        />
+        <path
+          d='M146.205,11.771C146.205,12.347 145.731,12.821 145.154,12.821C144.578,12.821 144.104,12.347 144.104,11.771C144.104,11.195 144.578,10.719 145.154,10.719C145.731,10.719 146.205,11.195 146.205,11.771Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M153.48,27.693C153.48,28.403 152.896,28.986 152.187,28.986C151.477,28.986 150.893,28.403 150.893,27.693C150.893,26.984 151.477,26.4 152.187,26.4C152.896,26.4 153.48,26.984 153.48,27.693Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M172.393,53.719C172.393,54.429 171.81,55.013 171.1,55.013C170.39,55.013 169.807,54.429 169.807,53.719C169.807,53.009 170.39,52.426 171.1,52.426C171.81,52.426 172.393,53.009 172.393,53.719Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M142.002,36.665C142.002,37.241 141.528,37.716 140.951,37.716C140.375,37.716 139.901,37.241 139.901,36.665C139.901,36.089 140.375,35.614 140.951,35.614C141.528,35.614 142.002,36.089 142.002,36.665Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M153.318,42.646C153.318,43.222 152.843,43.697 152.267,43.697C151.691,43.697 151.217,43.222 151.217,42.646C151.217,42.07 151.691,41.595 152.267,41.595C152.843,41.595 153.318,42.07 153.318,42.646Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M138.607,25.915C138.607,26.624 138.023,27.208 137.314,27.208C136.604,27.208 136.021,26.624 136.021,25.915C136.021,25.206 136.604,24.622 137.314,24.622C138.023,24.622 138.607,25.206 138.607,25.915Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M121.472,36.342C121.472,36.919 120.998,37.393 120.422,37.393C119.845,37.393 119.371,36.919 119.371,36.342C119.371,35.766 119.845,35.291 120.422,35.291C120.998,35.291 121.472,35.766 121.472,36.342Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M124.544,38.444C124.544,39.02 124.069,39.494 123.493,39.494C122.917,39.494 122.442,39.02 122.442,38.444C122.442,37.867 122.917,37.393 123.493,37.393C124.069,37.393 124.544,37.867 124.544,38.444Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M127.615,40.545C127.615,41.121 127.14,41.595 126.564,41.595C125.987,41.595 125.513,41.121 125.513,40.545C125.513,39.968 125.987,39.494 126.564,39.494C127.14,39.494 127.615,39.968 127.615,40.545Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M122.927,44.586C122.927,45.162 122.453,45.637 121.877,45.637C121.3,45.637 120.826,45.162 120.826,44.586C120.826,44.009 121.3,43.535 121.877,43.535C122.453,43.535 122.927,44.009 122.927,44.586Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M98.517,61.721C98.517,62.298 98.043,62.772 97.466,62.772C96.89,62.772 96.415,62.298 96.415,61.721C96.415,61.145 96.89,60.671 97.466,60.671C98.043,60.671 98.517,61.145 98.517,61.721Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M103.044,67.218C103.044,67.794 102.569,68.268 101.993,68.268C101.417,68.268 100.942,67.794 100.942,67.218C100.942,66.641 101.417,66.167 101.993,66.167C102.569,66.167 103.044,66.641 103.044,67.218Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M99.487,155.965C99.487,156.541 99.012,157.016 98.436,157.016C97.86,157.016 97.385,156.541 97.385,155.965C97.385,155.389 97.86,154.914 98.436,154.914C99.012,154.914 99.487,155.389 99.487,155.965Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M100.134,180.454C100.134,181.165 99.549,181.749 98.84,181.749C98.131,181.749 97.547,181.165 97.547,180.454C97.547,179.746 98.131,179.163 98.84,179.163C99.549,179.163 100.134,179.746 100.134,180.454Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M86.231,192.985C86.231,193.561 85.756,194.036 85.18,194.036C84.604,194.036 84.13,193.561 84.13,192.985C84.13,192.407 84.604,191.934 85.18,191.934C85.756,191.934 86.231,192.407 86.231,192.985Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M69.58,198.077C69.58,198.786 68.996,199.37 68.287,199.37C67.578,199.37 66.994,198.786 66.994,198.077C66.994,197.366 67.578,196.782 68.287,196.782C68.996,196.782 69.58,197.366 69.58,198.077Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M66.186,186.76C66.186,187.469 65.602,188.053 64.893,188.053C64.183,188.053 63.599,187.469 63.599,186.76C63.599,186.051 64.183,185.467 64.893,185.467C65.602,185.467 66.186,186.051 66.186,186.76Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M64.246,193.954C64.246,194.53 63.772,195.004 63.195,195.004C62.619,195.004 62.145,194.53 62.145,193.954C62.145,193.377 62.619,192.903 63.195,192.903C63.772,192.903 64.246,193.377 64.246,193.954Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M51.798,187.973C51.798,188.549 51.324,189.024 50.747,189.024C50.171,189.024 49.697,188.549 49.697,187.973C49.697,187.397 50.171,186.922 50.747,186.922C51.324,186.922 51.798,187.397 51.798,187.973Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M95.283,208.179C95.283,208.755 94.809,209.23 94.233,209.23C93.656,209.23 93.182,208.755 93.182,208.179C93.182,207.603 93.656,207.128 94.233,207.128C94.809,207.128 95.283,207.603 95.283,208.179Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M108.378,198.561C108.378,199.27 107.794,199.854 107.085,199.854C106.376,199.854 105.792,199.27 105.792,198.561C105.792,197.852 106.376,197.268 107.085,197.268C107.794,197.268 108.378,197.852 108.378,198.561Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M109.833,210.927C109.833,211.503 109.359,211.978 108.782,211.978C108.206,211.978 107.731,211.503 107.731,210.927C107.731,210.351 108.206,209.878 108.782,209.878C109.359,209.878 109.833,210.351 109.833,210.927Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M163.664,199.127C163.664,199.704 163.19,200.178 162.613,200.178C162.037,200.178 161.563,199.704 161.563,199.127C161.563,198.549 162.037,198.077 162.613,198.077C163.19,198.077 163.664,198.549 163.664,199.127Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M138.607,208.017C138.607,208.595 138.132,209.068 137.556,209.068C136.98,209.068 136.506,208.595 136.506,208.017C136.506,207.441 136.98,206.968 137.556,206.968C138.132,206.968 138.607,207.441 138.607,208.017Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M206.017,220.789C206.017,221.365 205.543,221.839 204.966,221.839C204.39,221.839 203.915,221.365 203.915,220.789C203.915,220.212 204.39,219.738 204.966,219.738C205.543,219.738 206.017,220.212 206.017,220.789Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M211.513,171.079C211.513,171.788 210.929,172.372 210.22,172.372C209.511,172.372 208.927,171.788 208.927,171.079C208.927,170.371 209.511,169.787 210.22,169.787C210.929,169.787 211.513,170.371 211.513,171.079Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M201.167,178.111C201.167,178.689 200.693,179.163 200.116,179.163C199.54,179.163 199.066,178.689 199.066,178.111C199.066,177.537 199.54,177.062 200.116,177.062C200.693,177.062 201.167,177.537 201.167,178.111Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M211.352,180.132C211.352,180.841 210.768,181.425 210.059,181.425C209.35,181.425 208.766,180.841 208.766,180.132C208.766,179.423 209.35,178.839 210.059,178.839C210.768,178.839 211.352,179.423 211.352,180.132Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M201.167,192.661C201.167,193.237 200.693,193.711 200.116,193.711C199.54,193.711 199.066,193.237 199.066,192.661C199.066,192.084 199.54,191.61 200.116,191.61C200.693,191.61 201.167,192.084 201.167,192.661Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M227.517,164.048C227.517,164.624 227.043,165.099 226.467,165.099C225.889,165.099 225.414,164.624 225.414,164.048C225.414,163.472 225.889,162.997 226.467,162.997C227.043,162.997 227.517,163.472 227.517,164.048Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M230.104,170.433C230.104,171.144 229.52,171.726 228.811,171.726C228.101,171.726 227.517,171.144 227.517,170.433C227.517,169.724 228.101,169.14 228.811,169.14C229.52,169.14 230.104,169.724 230.104,170.433Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M248.209,178.031C248.209,178.74 247.625,179.324 246.915,179.324C246.205,179.324 245.621,178.74 245.621,178.031C245.621,177.322 246.205,176.738 246.915,176.738C247.625,176.738 248.209,177.322 248.209,178.031Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M229.781,191.53C229.781,192.106 229.306,192.58 228.73,192.58C228.154,192.58 227.679,192.106 227.679,191.53C227.679,190.954 228.154,190.479 228.73,190.479C229.306,190.479 229.781,190.954 229.781,191.53Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M241.419,180.537C241.419,181.113 240.945,181.587 240.368,181.587C239.792,181.587 239.318,181.113 239.318,180.537C239.318,179.96 239.792,179.486 240.368,179.486C240.945,179.486 241.419,179.96 241.419,180.537Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M239.318,197.51C239.318,198.086 238.843,198.561 238.267,198.561C237.691,198.561 237.216,198.086 237.216,197.51C237.216,196.934 237.691,196.459 238.267,196.459C238.843,196.459 239.318,196.934 239.318,197.51Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M168.848,24.697C169.026,24.04 169.558,23.528 170.227,23.379L170.594,20.612L171.137,23.405C171.785,23.59 172.287,24.12 172.434,24.783L175.235,25.18L172.408,25.678C172.23,26.317 171.717,26.815 171.07,26.973L170.594,29.82L170.114,26.952C169.485,26.77 168.993,26.26 168.837,25.619L166.135,25.18L168.848,24.697Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M96.37,222.996C96.548,222.339 97.081,221.826 97.749,221.677L98.117,218.912L98.661,221.705C99.308,221.888 99.811,222.417 99.956,223.081L102.758,223.478L99.931,223.976C99.753,224.615 99.239,225.113 98.592,225.271L98.117,228.12L97.637,225.251C97.007,225.068 96.516,224.558 96.359,223.917L93.657,223.478L96.37,222.996Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M229.659,197.43C229.837,196.772 230.368,196.26 231.037,196.112L231.405,193.344L231.949,196.137C232.596,196.321 233.099,196.852 233.244,197.516L236.045,197.913L233.219,198.411C233.04,199.049 232.528,199.547 231.88,199.705L231.405,202.553L230.925,199.684C230.295,199.502 229.805,198.991 229.648,198.352L226.947,197.913L229.659,197.43Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M240.211,168.919C240.388,168.261 240.92,167.749 241.588,167.601L241.956,164.833L242.5,167.626C243.148,167.812 243.651,168.341 243.796,169.005L246.597,169.402L243.771,169.9C243.592,170.538 243.079,171.037 242.433,171.195L241.956,174.042L241.477,171.173C240.847,170.992 240.357,170.482 240.2,169.841L237.497,169.402L240.211,168.919Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M109.303,63.606C109.481,62.948 110.013,62.437 110.681,62.287L111.049,59.521L111.593,62.314C112.241,62.498 112.743,63.028 112.889,63.692L115.69,64.089L112.863,64.586C112.685,65.225 112.172,65.724 111.525,65.882L111.049,68.729L110.569,65.861C109.94,65.678 109.449,65.168 109.293,64.528L106.59,64.089L109.303,63.606Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M100.756,123.628C110.286,140.277 121.393,152.461 130.341,164.038C138.283,174.314 153.757,179.458 148.307,184.336C142.164,189.832 127.292,165.583 127.292,165.583C117.408,153.664 107.949,141.02 98.299,124.483L100.756,123.628Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M0,167.318C46.046,137.076 126.409,117.552 192.597,91.275C242.884,71.31 287.601,46.248 311.639,11.739C250.721,135.827 81.066,121.139 3.312,168.474L0,167.318Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M107.05,105.788L130.11,105.788L146.644,147.424L152.155,152.955L122.134,152.955L127.645,147.424L125.687,142.344L109.117,142.344L107.413,148.153L111.365,152.955L95.701,152.955L101.213,147.424L111.837,110.604L107.05,105.788ZM122.751,135.054L116.078,118.147L111.184,135.054L122.751,135.054Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M214.184,105.788L238.118,105.788L254.653,147.424L260.164,152.955L230.143,152.955L235.654,147.424L233.696,142.344L217.125,142.344L215.421,148.153L219.373,152.955L203.71,152.955L209.222,147.424L219.845,110.604L214.184,105.788ZM230.759,135.054L224.087,118.147L219.192,135.054L230.759,135.054Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M75.758,135.163L75.758,110.604L70.972,105.788L86.925,105.788L82.14,110.604L82.14,147.424L87.651,152.955L66.693,152.955L48.637,122.411L48.637,147.424L53.277,152.955L36.6,152.955L42.111,147.424L42.111,110.604L37.325,105.788L58.21,105.788L75.758,135.163Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M196.553,117.885L196.063,103.2L191.12,106.612C184.156,104.177 176.051,104.269 170.364,106.96C165.071,109.465 159.36,114.754 160.055,122.27C160.752,129.786 166.577,132.695 171.826,135.074C178.582,138.136 185.936,139.171 185.827,143.217C185.757,145.791 181.485,147.637 178.165,147.532C175.135,147.436 165.28,146.696 160.125,140.573L161.101,156.02L166.604,151.985C173.289,154.35 181.392,155.342 188.889,152.897C196.341,150.469 204.174,144.233 199.827,133.335C197.956,128.646 192.804,125.755 189.731,124.497C186.917,123.345 178.333,119.97 175.936,118.72C173.136,117.262 173.448,112.632 180.185,111.692C186.288,110.841 194.742,115.728 196.553,117.885Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M35.658,239.727C128.131,145.348 265.971,101.743 311.639,11.739C284.138,99.243 136.85,147.504 35.408,244.165L35.658,239.727Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+        <path
+          d='M98.299,124.483C97.216,122.627 96.131,120.722 95.042,118.763C70.388,74.411 73.944,29.148 118.563,48.87C156.431,65.609 192.6,112.561 207.146,145.907C213.887,161.356 231.96,221.996 173.764,197.424L173.65,197.069C228.613,219.701 219.111,162.351 189.691,118.38C173.042,93.5 151.331,72.775 137.637,62.772C92.05,29.471 64.246,49.84 96.253,115.147C97.702,118.102 99.208,120.925 100.756,123.628L98.299,124.483Z'
+          style={{ fill: 'white', fillRule: 'nonzero' }}
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/app/scripts/components/common/nav-wrapper.jsx b/packages/veda-ui/src/components/common/nav-wrapper.js
similarity index 100%
rename from app/scripts/components/common/nav-wrapper.jsx
rename to packages/veda-ui/src/components/common/nav-wrapper.js
diff --git a/packages/veda-ui/src/components/common/nav-wrapper.jsx b/packages/veda-ui/src/components/common/nav-wrapper.jsx
new file mode 100644
index 000000000..b151e8b61
--- /dev/null
+++ b/packages/veda-ui/src/components/common/nav-wrapper.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { themeVal } from '@devseed-ui/theme-provider';
+import { NavLink } from 'react-router-dom';
+import PageHeaderLegacy from './page-header-legacy';
+import PageHeader from './page-header';
+import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps';
+import NasaLogoColor from './nasa-logo-color';
+import {
+  HEADER_WRAPPER_ID,
+  HEADER_TRANSITION_DURATION
+} from '$utils/use-sliding-sticky-header';
+import { checkEnvFlag } from '$utils/utils';
+
+const NavWrapperContainer = styled.div`
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: ${themeVal('zIndices.sticky')};
+
+  transition: top ${HEADER_TRANSITION_DURATION}ms ease-out;
+  ${({ shouldSlideHeader, headerHeight }) =>
+    // Hide the header by translating the nav by the header's height. The
+    // translate is in the NavWrapper and not the header because in this way the
+    // localNav (also inside the NavWrapper) will stick to the top.
+    shouldSlideHeader &&
+    css`
+      top: -${headerHeight}px;
+    `}
+`;
+// Hiding configurable map for now until Instances are ready to adapt it
+const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_HEADER);
+const appTitle = isUSWDSEnabled
+  ? 'Earthdata VEDA Dashboard'
+  : process.env.APP_TITLE;
+
+function NavWrapper(props) {
+  const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps();
+
+  return isUSWDSEnabled ? (
+    <PageHeader {...props} logoSvg={<NasaLogoColor />} title={appTitle} />
+  ) : (
+    <NavWrapperContainer
+      id={HEADER_WRAPPER_ID}
+      shouldSlideHeader={isHeaderHidden}
+      headerHeight={headerHeight}
+    >
+      <PageHeaderLegacy
+        {...props}
+        linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
+      />
+    </NavWrapperContainer>
+  );
+}
+
+export default NavWrapper;
diff --git a/app/scripts/components/common/notebook-connect.tsx b/packages/veda-ui/src/components/common/notebook-connect.tsx
similarity index 100%
rename from app/scripts/components/common/notebook-connect.tsx
rename to packages/veda-ui/src/components/common/notebook-connect.tsx
diff --git a/app/scripts/components/common/page-footer-legacy.tsx b/packages/veda-ui/src/components/common/page-footer-legacy.tsx
similarity index 100%
rename from app/scripts/components/common/page-footer-legacy.tsx
rename to packages/veda-ui/src/components/common/page-footer-legacy.tsx
diff --git a/app/scripts/components/common/page-footer/default-config.ts b/packages/veda-ui/src/components/common/page-footer/default-config.ts
similarity index 100%
rename from app/scripts/components/common/page-footer/default-config.ts
rename to packages/veda-ui/src/components/common/page-footer/default-config.ts
diff --git a/app/scripts/components/common/page-footer/footer.test.tsx b/packages/veda-ui/src/components/common/page-footer/footer.test.tsx
similarity index 96%
rename from app/scripts/components/common/page-footer/footer.test.tsx
rename to packages/veda-ui/src/components/common/page-footer/footer.test.tsx
index e00151180..dc3e50abb 100644
--- a/app/scripts/components/common/page-footer/footer.test.tsx
+++ b/packages/veda-ui/src/components/common/page-footer/footer.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
-import { navItems } from '../../../../../mock/veda.config.js';
-import { VedaUIConfigProvider } from '../../../../../test/utils.js';
 import NasaLogoColor from '../nasa-logo-color';
 import { NavItem } from '../page-header/types.js';
 
 import PageFooter from './index';
+import { VedaUIConfigProvider } from '$test/utils.js';
+import { navItems } from '$mock/veda.config.js';
 
 const defaultFooterSetting = {
   secondarySection: {
diff --git a/app/scripts/components/common/page-footer/index.tsx b/packages/veda-ui/src/components/common/page-footer/index.tsx
similarity index 100%
rename from app/scripts/components/common/page-footer/index.tsx
rename to packages/veda-ui/src/components/common/page-footer/index.tsx
diff --git a/app/scripts/components/common/page-footer/page-footer.scss b/packages/veda-ui/src/components/common/page-footer/page-footer.scss
similarity index 100%
rename from app/scripts/components/common/page-footer/page-footer.scss
rename to packages/veda-ui/src/components/common/page-footer/page-footer.scss
diff --git a/app/scripts/components/common/page-footer/return-to-top-button/index.tsx b/packages/veda-ui/src/components/common/page-footer/return-to-top-button/index.tsx
similarity index 100%
rename from app/scripts/components/common/page-footer/return-to-top-button/index.tsx
rename to packages/veda-ui/src/components/common/page-footer/return-to-top-button/index.tsx
diff --git a/app/scripts/components/common/page-header-legacy/index.tsx b/packages/veda-ui/src/components/common/page-header-legacy/index.tsx
similarity index 100%
rename from app/scripts/components/common/page-header-legacy/index.tsx
rename to packages/veda-ui/src/components/common/page-header-legacy/index.tsx
diff --git a/app/scripts/components/common/page-header-legacy/logo.tsx b/packages/veda-ui/src/components/common/page-header-legacy/logo.tsx
similarity index 100%
rename from app/scripts/components/common/page-header-legacy/logo.tsx
rename to packages/veda-ui/src/components/common/page-header-legacy/logo.tsx
diff --git a/app/scripts/components/common/page-header-legacy/nav-menu-item.tsx b/packages/veda-ui/src/components/common/page-header-legacy/nav-menu-item.tsx
similarity index 100%
rename from app/scripts/components/common/page-header-legacy/nav-menu-item.tsx
rename to packages/veda-ui/src/components/common/page-header-legacy/nav-menu-item.tsx
diff --git a/app/scripts/components/common/page-header/default-config.ts b/packages/veda-ui/src/components/common/page-header/default-config.ts
similarity index 100%
rename from app/scripts/components/common/page-header/default-config.ts
rename to packages/veda-ui/src/components/common/page-header/default-config.ts
diff --git a/app/scripts/components/common/page-header/index.tsx b/packages/veda-ui/src/components/common/page-header/index.tsx
similarity index 100%
rename from app/scripts/components/common/page-header/index.tsx
rename to packages/veda-ui/src/components/common/page-header/index.tsx
diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/packages/veda-ui/src/components/common/page-header/logo-container/index.tsx
similarity index 100%
rename from app/scripts/components/common/page-header/logo-container/index.tsx
rename to packages/veda-ui/src/components/common/page-header/logo-container/index.tsx
diff --git a/app/scripts/components/common/page-header/logo-container/logo-container.scss b/packages/veda-ui/src/components/common/page-header/logo-container/logo-container.scss
similarity index 100%
rename from app/scripts/components/common/page-header/logo-container/logo-container.scss
rename to packages/veda-ui/src/components/common/page-header/logo-container/logo-container.scss
diff --git a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx b/packages/veda-ui/src/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx
similarity index 100%
rename from app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx
rename to packages/veda-ui/src/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx
diff --git a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx b/packages/veda-ui/src/components/common/page-header/nav/nav-dropdown-button.tsx
similarity index 100%
rename from app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx
rename to packages/veda-ui/src/components/common/page-header/nav/nav-dropdown-button.tsx
diff --git a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx b/packages/veda-ui/src/components/common/page-header/nav/nav-item-cta.tsx
similarity index 100%
rename from app/scripts/components/common/page-header/nav/nav-item-cta.tsx
rename to packages/veda-ui/src/components/common/page-header/nav/nav-item-cta.tsx
diff --git a/app/scripts/components/common/page-header/nav/nav-item-links.tsx b/packages/veda-ui/src/components/common/page-header/nav/nav-item-links.tsx
similarity index 100%
rename from app/scripts/components/common/page-header/nav/nav-item-links.tsx
rename to packages/veda-ui/src/components/common/page-header/nav/nav-item-links.tsx
diff --git a/app/scripts/components/common/page-header/page-header.scss b/packages/veda-ui/src/components/common/page-header/page-header.scss
similarity index 100%
rename from app/scripts/components/common/page-header/page-header.scss
rename to packages/veda-ui/src/components/common/page-header/page-header.scss
diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/packages/veda-ui/src/components/common/page-header/page-header.test.tsx
similarity index 94%
rename from app/scripts/components/common/page-header/page-header.test.tsx
rename to packages/veda-ui/src/components/common/page-header/page-header.test.tsx
index 85db89b33..e9352d920 100644
--- a/app/scripts/components/common/page-header/page-header.test.tsx
+++ b/packages/veda-ui/src/components/common/page-header/page-header.test.tsx
@@ -3,11 +3,11 @@ import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { BrowserRouter } from 'react-router-dom';
-import { navItems } from '../../../../../mock/veda.config.js';
 import NasaLogoColor from '../nasa-logo-color';
-import { VedaUIConfigProvider } from '../../../../../test/utils.js';
 import { NavItem } from './types';
 import PageHeader from './index';
+import { VedaUIConfigProvider } from '$test/utils.js';
+import { navItems } from '$mock/veda.config.js';
 
 // @NOTE: Possible Test cases
 // config & create dynamic nav menu list fn - different scenerios, happy vs unhappy path
diff --git a/app/scripts/components/common/page-header/types.ts b/packages/veda-ui/src/components/common/page-header/types.ts
similarity index 100%
rename from app/scripts/components/common/page-header/types.ts
rename to packages/veda-ui/src/components/common/page-header/types.ts
diff --git a/app/scripts/components/common/page-header/use-mobile-menu-fix.ts b/packages/veda-ui/src/components/common/page-header/use-mobile-menu-fix.ts
similarity index 100%
rename from app/scripts/components/common/page-header/use-mobile-menu-fix.ts
rename to packages/veda-ui/src/components/common/page-header/use-mobile-menu-fix.ts
diff --git a/app/scripts/components/common/page-hero.tsx b/packages/veda-ui/src/components/common/page-hero.tsx
similarity index 100%
rename from app/scripts/components/common/page-hero.tsx
rename to packages/veda-ui/src/components/common/page-hero.tsx
diff --git a/app/scripts/components/common/page-overrides.tsx b/packages/veda-ui/src/components/common/page-overrides.tsx
similarity index 100%
rename from app/scripts/components/common/page-overrides.tsx
rename to packages/veda-ui/src/components/common/page-overrides.tsx
diff --git a/app/scripts/components/common/pagination/index.tsx b/packages/veda-ui/src/components/common/pagination/index.tsx
similarity index 100%
rename from app/scripts/components/common/pagination/index.tsx
rename to packages/veda-ui/src/components/common/pagination/index.tsx
diff --git a/app/scripts/components/common/pagination/pagination-container.tsx b/packages/veda-ui/src/components/common/pagination/pagination-container.tsx
similarity index 100%
rename from app/scripts/components/common/pagination/pagination-container.tsx
rename to packages/veda-ui/src/components/common/pagination/pagination-container.tsx
diff --git a/app/scripts/components/common/pagination/pagination.scss b/packages/veda-ui/src/components/common/pagination/pagination.scss
similarity index 100%
rename from app/scripts/components/common/pagination/pagination.scss
rename to packages/veda-ui/src/components/common/pagination/pagination.scss
diff --git a/app/scripts/components/common/pagination/pagination.tsx b/packages/veda-ui/src/components/common/pagination/pagination.tsx
similarity index 100%
rename from app/scripts/components/common/pagination/pagination.tsx
rename to packages/veda-ui/src/components/common/pagination/pagination.tsx
diff --git a/app/scripts/components/common/pub-date.tsx b/packages/veda-ui/src/components/common/pub-date.tsx
similarity index 100%
rename from app/scripts/components/common/pub-date.tsx
rename to packages/veda-ui/src/components/common/pub-date.tsx
diff --git a/app/scripts/components/common/related-content.tsx b/packages/veda-ui/src/components/common/related-content.tsx
similarity index 100%
rename from app/scripts/components/common/related-content.tsx
rename to packages/veda-ui/src/components/common/related-content.tsx
diff --git a/app/scripts/components/common/search-field.tsx b/packages/veda-ui/src/components/common/search-field.tsx
similarity index 100%
rename from app/scripts/components/common/search-field.tsx
rename to packages/veda-ui/src/components/common/search-field.tsx
diff --git a/app/scripts/components/common/site-alert/index.tsx b/packages/veda-ui/src/components/common/site-alert/index.tsx
similarity index 100%
rename from app/scripts/components/common/site-alert/index.tsx
rename to packages/veda-ui/src/components/common/site-alert/index.tsx
diff --git a/app/scripts/components/common/smart-link.tsx b/packages/veda-ui/src/components/common/smart-link.tsx
similarity index 100%
rename from app/scripts/components/common/smart-link.tsx
rename to packages/veda-ui/src/components/common/smart-link.tsx
diff --git a/app/scripts/components/common/stressed-field.ts b/packages/veda-ui/src/components/common/stressed-field.ts
similarity index 100%
rename from app/scripts/components/common/stressed-field.ts
rename to packages/veda-ui/src/components/common/stressed-field.ts
diff --git a/app/scripts/components/common/stressed-form-group-input.tsx b/packages/veda-ui/src/components/common/stressed-form-group-input.tsx
similarity index 100%
rename from app/scripts/components/common/stressed-form-group-input.tsx
rename to packages/veda-ui/src/components/common/stressed-form-group-input.tsx
diff --git a/app/scripts/components/common/table/index.tsx b/packages/veda-ui/src/components/common/table/index.tsx
similarity index 100%
rename from app/scripts/components/common/table/index.tsx
rename to packages/veda-ui/src/components/common/table/index.tsx
diff --git a/app/scripts/components/common/tags/index.tsx b/packages/veda-ui/src/components/common/tags/index.tsx
similarity index 100%
rename from app/scripts/components/common/tags/index.tsx
rename to packages/veda-ui/src/components/common/tags/index.tsx
diff --git a/app/scripts/components/common/tags/styles.scss b/packages/veda-ui/src/components/common/tags/styles.scss
similarity index 100%
rename from app/scripts/components/common/tags/styles.scss
rename to packages/veda-ui/src/components/common/tags/styles.scss
diff --git a/app/scripts/components/common/text-highlight.tsx b/packages/veda-ui/src/components/common/text-highlight.tsx
similarity index 100%
rename from app/scripts/components/common/text-highlight.tsx
rename to packages/veda-ui/src/components/common/text-highlight.tsx
diff --git a/app/scripts/components/common/tip-button.tsx b/packages/veda-ui/src/components/common/tip-button.tsx
similarity index 100%
rename from app/scripts/components/common/tip-button.tsx
rename to packages/veda-ui/src/components/common/tip-button.tsx
diff --git a/app/scripts/components/common/tip.ts b/packages/veda-ui/src/components/common/tip.ts
similarity index 100%
rename from app/scripts/components/common/tip.ts
rename to packages/veda-ui/src/components/common/tip.ts
diff --git a/app/scripts/components/common/try-render.jsx b/packages/veda-ui/src/components/common/try-render.js
similarity index 100%
rename from app/scripts/components/common/try-render.jsx
rename to packages/veda-ui/src/components/common/try-render.js
diff --git a/packages/veda-ui/src/components/common/try-render.jsx b/packages/veda-ui/src/components/common/try-render.jsx
new file mode 100644
index 000000000..39e4d7aef
--- /dev/null
+++ b/packages/veda-ui/src/components/common/try-render.jsx
@@ -0,0 +1,31 @@
+/* eslint-disable react/prop-types */
+import React, { isValidElement } from 'react';
+
+/**
+ * Tries to render the given function falling back to the children if it is not
+ * set. It is possible to pass a wrapper element that will only be used if there
+ * is something to render, preventing empty elements from being rendered.
+ *
+ * @param {function} fn The render function to try to run
+ * @param {element} wrapWith The wrapper element.
+ * @param {node} children The fallback if the render function is not set
+ * @prop {any} rest Remaining props are passed to the function
+ */
+export default function Try(props) {
+  const { fn: F, wrapWith: W, children, ...rest } = props;
+
+  let value = children;
+
+  // Styled-components fail with isValidElement, so checking directly.
+  if (isValidElement(F) || F?.styledComponentId) {
+    value = <F {...props} />;
+  } else if (typeof F === 'function') {
+    value = F(rest);
+  }
+
+  if (isValidElement(W) || W?.styledComponentId) {
+    return value ? <W>{value}</W> : null;
+  }
+
+  return value || null;
+}
diff --git a/app/scripts/components/common/types.ts b/packages/veda-ui/src/components/common/types.ts
similarity index 100%
rename from app/scripts/components/common/types.ts
rename to packages/veda-ui/src/components/common/types.ts
diff --git a/app/scripts/components/common/unscrollable-body.ts b/packages/veda-ui/src/components/common/unscrollable-body.ts
similarity index 100%
rename from app/scripts/components/common/unscrollable-body.ts
rename to packages/veda-ui/src/components/common/unscrollable-body.ts
diff --git a/app/scripts/components/common/widget/__snapshots__/widget.test.tsx.snap b/packages/veda-ui/src/components/common/widget/__snapshots__/widget.test.tsx.snap
similarity index 100%
rename from app/scripts/components/common/widget/__snapshots__/widget.test.tsx.snap
rename to packages/veda-ui/src/components/common/widget/__snapshots__/widget.test.tsx.snap
diff --git a/app/scripts/components/common/widget/fullpage-modal.tsx b/packages/veda-ui/src/components/common/widget/fullpage-modal.tsx
similarity index 100%
rename from app/scripts/components/common/widget/fullpage-modal.tsx
rename to packages/veda-ui/src/components/common/widget/fullpage-modal.tsx
diff --git a/app/scripts/components/common/widget/fullscreen-api.tsx b/packages/veda-ui/src/components/common/widget/fullscreen-api.tsx
similarity index 100%
rename from app/scripts/components/common/widget/fullscreen-api.tsx
rename to packages/veda-ui/src/components/common/widget/fullscreen-api.tsx
diff --git a/app/scripts/components/common/widget/header.tsx b/packages/veda-ui/src/components/common/widget/header.tsx
similarity index 100%
rename from app/scripts/components/common/widget/header.tsx
rename to packages/veda-ui/src/components/common/widget/header.tsx
diff --git a/app/scripts/components/common/widget/index.ts b/packages/veda-ui/src/components/common/widget/index.ts
similarity index 100%
rename from app/scripts/components/common/widget/index.ts
rename to packages/veda-ui/src/components/common/widget/index.ts
diff --git a/app/scripts/components/common/widget/widget.test.tsx b/packages/veda-ui/src/components/common/widget/widget.test.tsx
similarity index 100%
rename from app/scripts/components/common/widget/widget.test.tsx
rename to packages/veda-ui/src/components/common/widget/widget.test.tsx
diff --git a/app/scripts/components/data-catalog/container.tsx b/packages/veda-ui/src/components/data-catalog/container.tsx
similarity index 100%
rename from app/scripts/components/data-catalog/container.tsx
rename to packages/veda-ui/src/components/data-catalog/container.tsx
diff --git a/app/scripts/components/data-catalog/dataset-menu.tsx b/packages/veda-ui/src/components/data-catalog/dataset-menu.tsx
similarity index 100%
rename from app/scripts/components/data-catalog/dataset-menu.tsx
rename to packages/veda-ui/src/components/data-catalog/dataset-menu.tsx
diff --git a/app/scripts/components/datasets/s-overview/index.tsx b/packages/veda-ui/src/components/datasets/s-overview/index.tsx
similarity index 100%
rename from app/scripts/components/datasets/s-overview/index.tsx
rename to packages/veda-ui/src/components/datasets/s-overview/index.tsx
diff --git a/app/scripts/components/development/index.tsx b/packages/veda-ui/src/components/development/index.tsx
similarity index 100%
rename from app/scripts/components/development/index.tsx
rename to packages/veda-ui/src/components/development/index.tsx
diff --git a/app/scripts/components/exploration/README.md b/packages/veda-ui/src/components/exploration/README.md
similarity index 100%
rename from app/scripts/components/exploration/README.md
rename to packages/veda-ui/src/components/exploration/README.md
diff --git a/app/scripts/components/exploration/analysis-data.spec.ts b/packages/veda-ui/src/components/exploration/analysis-data.spec.ts
similarity index 100%
rename from app/scripts/components/exploration/analysis-data.spec.ts
rename to packages/veda-ui/src/components/exploration/analysis-data.spec.ts
diff --git a/app/scripts/components/exploration/analysis-data.ts b/packages/veda-ui/src/components/exploration/analysis-data.ts
similarity index 100%
rename from app/scripts/components/exploration/analysis-data.ts
rename to packages/veda-ui/src/components/exploration/analysis-data.ts
diff --git a/app/scripts/components/exploration/atoms/README.md b/packages/veda-ui/src/components/exploration/atoms/README.md
similarity index 100%
rename from app/scripts/components/exploration/atoms/README.md
rename to packages/veda-ui/src/components/exploration/atoms/README.md
diff --git a/app/scripts/components/exploration/atoms/analysis.ts b/packages/veda-ui/src/components/exploration/atoms/analysis.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/analysis.ts
rename to packages/veda-ui/src/components/exploration/atoms/analysis.ts
diff --git a/app/scripts/components/exploration/atoms/center.ts b/packages/veda-ui/src/components/exploration/atoms/center.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/center.ts
rename to packages/veda-ui/src/components/exploration/atoms/center.ts
diff --git a/app/scripts/components/exploration/atoms/datasetLayers.ts b/packages/veda-ui/src/components/exploration/atoms/datasetLayers.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/datasetLayers.ts
rename to packages/veda-ui/src/components/exploration/atoms/datasetLayers.ts
diff --git a/app/scripts/components/exploration/atoms/datasets.ts b/packages/veda-ui/src/components/exploration/atoms/datasets.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/datasets.ts
rename to packages/veda-ui/src/components/exploration/atoms/datasets.ts
diff --git a/app/scripts/components/exploration/atoms/dates.ts b/packages/veda-ui/src/components/exploration/atoms/dates.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/dates.ts
rename to packages/veda-ui/src/components/exploration/atoms/dates.ts
diff --git a/packages/veda-ui/src/components/exploration/atoms/embed.ts b/packages/veda-ui/src/components/exploration/atoms/embed.ts
new file mode 100644
index 000000000..b1873c366
--- /dev/null
+++ b/packages/veda-ui/src/components/exploration/atoms/embed.ts
@@ -0,0 +1,20 @@
+import { atomWithUrlValueStability } from '$utils/params-location-atom/atom-with-url-value-stability';
+
+const initialParams = new URLSearchParams(window.location.search);
+
+const hydrateBoolean = (serialized: string | null) => {
+  return serialized === 'true';
+};
+
+const dehydrateBoolean = (value: boolean) => {
+  // Only add the param to the URL if it's true.
+  return value ? 'true' : '';
+};
+
+export const isEmbeddedAtom = atomWithUrlValueStability<boolean>({
+  initialValue: hydrateBoolean(initialParams.get('embed')),
+  urlParam: 'embed',
+  hydrate: hydrateBoolean,
+  dehydrate: dehydrateBoolean,
+  areEqual: (prev, next) => prev === next
+});
diff --git a/app/scripts/components/exploration/atoms/hooks.ts b/packages/veda-ui/src/components/exploration/atoms/hooks.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/hooks.ts
rename to packages/veda-ui/src/components/exploration/atoms/hooks.ts
diff --git a/app/scripts/components/exploration/atoms/rescale.ts b/packages/veda-ui/src/components/exploration/atoms/rescale.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/rescale.ts
rename to packages/veda-ui/src/components/exploration/atoms/rescale.ts
diff --git a/app/scripts/components/exploration/atoms/timeline.ts b/packages/veda-ui/src/components/exploration/atoms/timeline.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/timeline.ts
rename to packages/veda-ui/src/components/exploration/atoms/timeline.ts
diff --git a/app/scripts/components/exploration/atoms/viewMode.ts b/packages/veda-ui/src/components/exploration/atoms/viewMode.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/viewMode.ts
rename to packages/veda-ui/src/components/exploration/atoms/viewMode.ts
diff --git a/app/scripts/components/exploration/atoms/zoom.ts b/packages/veda-ui/src/components/exploration/atoms/zoom.ts
similarity index 100%
rename from app/scripts/components/exploration/atoms/zoom.ts
rename to packages/veda-ui/src/components/exploration/atoms/zoom.ts
diff --git a/app/scripts/components/exploration/components/chart-popover.tsx b/packages/veda-ui/src/components/exploration/components/chart-popover.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/chart-popover.tsx
rename to packages/veda-ui/src/components/exploration/components/chart-popover.tsx
diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/footer.tsx b/packages/veda-ui/src/components/exploration/components/dataset-selector-modal/footer.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/dataset-selector-modal/footer.tsx
rename to packages/veda-ui/src/components/exploration/components/dataset-selector-modal/footer.tsx
diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx b/packages/veda-ui/src/components/exploration/components/dataset-selector-modal/header.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/dataset-selector-modal/header.tsx
rename to packages/veda-ui/src/components/exploration/components/dataset-selector-modal/header.tsx
diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/packages/veda-ui/src/components/exploration/components/dataset-selector-modal/index.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
rename to packages/veda-ui/src/components/exploration/components/dataset-selector-modal/index.tsx
diff --git a/app/scripts/components/exploration/components/datasets/analysis-metrics.tsx b/packages/veda-ui/src/components/exploration/components/datasets/analysis-metrics.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/analysis-metrics.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/analysis-metrics.tsx
diff --git a/app/scripts/components/exploration/components/datasets/block-utils.ts b/packages/veda-ui/src/components/exploration/components/datasets/block-utils.ts
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/block-utils.ts
rename to packages/veda-ui/src/components/exploration/components/datasets/block-utils.ts
diff --git a/app/scripts/components/exploration/components/datasets/data-layer-card-container.tsx b/packages/veda-ui/src/components/exploration/components/datasets/data-layer-card-container.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/data-layer-card-container.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/data-layer-card-container.tsx
diff --git a/app/scripts/components/exploration/components/datasets/dataset-chart.tsx b/packages/veda-ui/src/components/exploration/components/datasets/dataset-chart.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/dataset-chart.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/dataset-chart.tsx
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item-status.tsx b/packages/veda-ui/src/components/exploration/components/datasets/dataset-list-item-status.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/dataset-list-item-status.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/dataset-list-item-status.tsx
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/packages/veda-ui/src/components/exploration/components/datasets/dataset-list-item.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/dataset-list-item.tsx
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list.tsx b/packages/veda-ui/src/components/exploration/components/datasets/dataset-list.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/dataset-list.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/dataset-list.tsx
diff --git a/app/scripts/components/exploration/components/datasets/dataset-track-message.tsx b/packages/veda-ui/src/components/exploration/components/datasets/dataset-track-message.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/dataset-track-message.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/dataset-track-message.tsx
diff --git a/app/scripts/components/exploration/components/datasets/layer-chart-analysis-menu.tsx b/packages/veda-ui/src/components/exploration/components/datasets/layer-chart-analysis-menu.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/layer-chart-analysis-menu.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/layer-chart-analysis-menu.tsx
diff --git a/app/scripts/components/exploration/components/datasets/tile-link-modal.tsx b/packages/veda-ui/src/components/exploration/components/datasets/tile-link-modal.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/datasets/tile-link-modal.tsx
rename to packages/veda-ui/src/components/exploration/components/datasets/tile-link-modal.tsx
diff --git a/app/scripts/components/exploration/views/simple/timeline-simple-view.tsx b/packages/veda-ui/src/components/exploration/components/embed-exploration/embed-timeline.tsx
similarity index 100%
rename from app/scripts/components/exploration/views/simple/timeline-simple-view.tsx
rename to packages/veda-ui/src/components/exploration/components/embed-exploration/embed-timeline.tsx
diff --git a/app/scripts/components/exploration/components/layer-info-modal.tsx b/packages/veda-ui/src/components/exploration/components/layer-info-modal.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/layer-info-modal.tsx
rename to packages/veda-ui/src/components/exploration/components/layer-info-modal.tsx
diff --git a/app/scripts/components/exploration/components/map/analysis-message-control.tsx b/packages/veda-ui/src/components/exploration/components/map/analysis-message-control.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/map/analysis-message-control.tsx
rename to packages/veda-ui/src/components/exploration/components/map/analysis-message-control.tsx
diff --git a/app/scripts/components/exploration/components/map/aoi-layer.tsx b/packages/veda-ui/src/components/exploration/components/map/aoi-layer.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/map/aoi-layer.tsx
rename to packages/veda-ui/src/components/exploration/components/map/aoi-layer.tsx
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/packages/veda-ui/src/components/exploration/components/map/index.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/map/index.tsx
rename to packages/veda-ui/src/components/exploration/components/map/index.tsx
diff --git a/app/scripts/components/exploration/components/map/layer.tsx b/packages/veda-ui/src/components/exploration/components/map/layer.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/map/layer.tsx
rename to packages/veda-ui/src/components/exploration/components/map/layer.tsx
diff --git a/app/scripts/components/exploration/components/map/share-button.tsx b/packages/veda-ui/src/components/exploration/components/map/share-button.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/map/share-button.tsx
rename to packages/veda-ui/src/components/exploration/components/map/share-button.tsx
diff --git a/app/scripts/components/exploration/components/map/tour-control.tsx b/packages/veda-ui/src/components/exploration/components/map/tour-control.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/map/tour-control.tsx
rename to packages/veda-ui/src/components/exploration/components/map/tour-control.tsx
diff --git a/app/scripts/components/exploration/components/timeline-single/dataset-item.tsx b/packages/veda-ui/src/components/exploration/components/timeline-single/dataset-item.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/timeline-single/dataset-item.tsx
rename to packages/veda-ui/src/components/exploration/components/timeline-single/dataset-item.tsx
diff --git a/app/scripts/components/exploration/components/timeline-single/timeline.tsx b/packages/veda-ui/src/components/exploration/components/timeline-single/timeline.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/timeline-single/timeline.tsx
rename to packages/veda-ui/src/components/exploration/components/timeline-single/timeline.tsx
diff --git a/app/scripts/components/exploration/components/timeline/date-axis.tsx b/packages/veda-ui/src/components/exploration/components/timeline/date-axis.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/timeline/date-axis.tsx
rename to packages/veda-ui/src/components/exploration/components/timeline/date-axis.tsx
diff --git a/app/scripts/components/exploration/components/timeline/timeline-controls.tsx b/packages/veda-ui/src/components/exploration/components/timeline/timeline-controls.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/timeline/timeline-controls.tsx
rename to packages/veda-ui/src/components/exploration/components/timeline/timeline-controls.tsx
diff --git a/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx b/packages/veda-ui/src/components/exploration/components/timeline/timeline-datepicker.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx
rename to packages/veda-ui/src/components/exploration/components/timeline/timeline-datepicker.tsx
diff --git a/app/scripts/components/exploration/components/timeline/timeline-head.tsx b/packages/veda-ui/src/components/exploration/components/timeline/timeline-head.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/timeline/timeline-head.tsx
rename to packages/veda-ui/src/components/exploration/components/timeline/timeline-head.tsx
diff --git a/app/scripts/components/exploration/components/timeline/timeline-utils.ts b/packages/veda-ui/src/components/exploration/components/timeline/timeline-utils.ts
similarity index 100%
rename from app/scripts/components/exploration/components/timeline/timeline-utils.ts
rename to packages/veda-ui/src/components/exploration/components/timeline/timeline-utils.ts
diff --git a/app/scripts/components/exploration/components/timeline/timeline-zoom-controls.tsx b/packages/veda-ui/src/components/exploration/components/timeline/timeline-zoom-controls.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/timeline/timeline-zoom-controls.tsx
rename to packages/veda-ui/src/components/exploration/components/timeline/timeline-zoom-controls.tsx
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/packages/veda-ui/src/components/exploration/components/timeline/timeline.tsx
similarity index 100%
rename from app/scripts/components/exploration/components/timeline/timeline.tsx
rename to packages/veda-ui/src/components/exploration/components/timeline/timeline.tsx
diff --git a/app/scripts/components/exploration/concurrency.ts b/packages/veda-ui/src/components/exploration/concurrency.ts
similarity index 100%
rename from app/scripts/components/exploration/concurrency.ts
rename to packages/veda-ui/src/components/exploration/concurrency.ts
diff --git a/app/scripts/components/exploration/constants.ts b/packages/veda-ui/src/components/exploration/constants.ts
similarity index 100%
rename from app/scripts/components/exploration/constants.ts
rename to packages/veda-ui/src/components/exploration/constants.ts
diff --git a/packages/veda-ui/src/components/exploration/container.tsx b/packages/veda-ui/src/components/exploration/container.tsx
new file mode 100644
index 000000000..5cfd98666
--- /dev/null
+++ b/packages/veda-ui/src/components/exploration/container.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { DevTools } from 'jotai-devtools';
+import { useAtom, useSetAtom } from 'jotai';
+
+import { DatasetSelectorModal } from './components/dataset-selector-modal';
+import useTimelineDatasetAtom from './hooks/use-timeline-dataset-atom';
+import { externalDatasetsAtom } from './atoms/datasetLayers';
+import { isEmbeddedAtom } from './atoms/embed';
+import EmbeddedExploration from './embed-exploration';
+import ExplorationAndAnalysisDefaultView from './views/default';
+import { allExploreDatasets } from '$data-layer/datasets';
+import { urlAtom } from '$utils/params-location-atom/url';
+import { PageMainContent } from '$styles/page';
+import { LayoutProps } from '$components/common/layout-root';
+import PageHero from '$components/common/page-hero';
+import { DATASETS_PATH, EXPLORATION_PATH } from '$utils/routes';
+
+/**
+ * @LEGACY-SUPPORT
+ *
+ * @NOTE: This container component serves as a wrapper for the purpose of data management, this is ONLY to support current instances.
+ * veda2 instances can just use the direct component, 'ExplorationAndAnalysis', and manage data directly in their page views
+ */
+
+export default function ExplorationAndAnalysisContainer() {
+  const setExternalDatasets = useSetAtom(externalDatasetsAtom);
+  setExternalDatasets(allExploreDatasets);
+  const [timelineDatasets, setTimelineDatasets] = useTimelineDatasetAtom();
+  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
+    !timelineDatasets.length
+  );
+  // @NOTE: When Exploration page is preloaded (ex. Linked with react-router)
+  // atomWithLocation gets initialized outside of Exploration page and returns the previous page's value
+  // We check if url Atom actually returns the values for exploration page here.
+  const [currentUrl] = useAtom(urlAtom);
+  const [isEmbedded] = useAtom(isEmbeddedAtom);
+
+  if (!currentUrl.pathname?.includes(EXPLORATION_PATH)) return null;
+
+  if (isEmbedded) {
+    return <EmbeddedExploration datasets={timelineDatasets} />;
+  }
+  const openModal = () => setDatasetModalRevealed(true);
+  const closeModal = () => setDatasetModalRevealed(false);
+
+  return (
+    <>
+      <DevTools />
+      <LayoutProps
+        title='Exploration'
+        description='Explore and analyze datasets'
+        hideFooter
+      />
+      <PageMainContent>
+        <PageHero title='Exploration' isHidden />
+        <ExplorationAndAnalysisDefaultView
+          datasets={timelineDatasets}
+          setDatasets={setTimelineDatasets}
+          openDatasetsSelectionModal={openModal}
+        />
+        <DatasetSelectorModal
+          revealed={datasetModalRevealed}
+          close={closeModal}
+          datasets={allExploreDatasets}
+          timelineDatasets={timelineDatasets}
+          setTimelineDatasets={setTimelineDatasets}
+          emptyStateContent={
+            <>
+              <p>There are no datasets to show with the selected filters.</p>
+              <p>
+                This tool allows the exploration and analysis of time-series
+                datasets in raster format. For a comprehensive list of available
+                datasets, please visit the{' '}
+                <Link to={DATASETS_PATH}>Data Catalog</Link>.
+              </p>
+            </>
+          }
+        />
+      </PageMainContent>
+    </>
+  );
+}
diff --git a/app/scripts/components/exploration/data-utils.spec.ts b/packages/veda-ui/src/components/exploration/data-utils.spec.ts
similarity index 100%
rename from app/scripts/components/exploration/data-utils.spec.ts
rename to packages/veda-ui/src/components/exploration/data-utils.spec.ts
diff --git a/app/scripts/components/exploration/data-utils.ts b/packages/veda-ui/src/components/exploration/data-utils.ts
similarity index 100%
rename from app/scripts/components/exploration/data-utils.ts
rename to packages/veda-ui/src/components/exploration/data-utils.ts
diff --git a/app/scripts/components/exploration/views/simple/index.tsx b/packages/veda-ui/src/components/exploration/embed-exploration.tsx
similarity index 100%
rename from app/scripts/components/exploration/views/simple/index.tsx
rename to packages/veda-ui/src/components/exploration/embed-exploration.tsx
diff --git a/app/scripts/components/exploration/hooks/scales-hooks.ts b/packages/veda-ui/src/components/exploration/hooks/scales-hooks.ts
similarity index 100%
rename from app/scripts/components/exploration/hooks/scales-hooks.ts
rename to packages/veda-ui/src/components/exploration/hooks/scales-hooks.ts
diff --git a/app/scripts/components/exploration/hooks/use-analysis-data-request.ts b/packages/veda-ui/src/components/exploration/hooks/use-analysis-data-request.ts
similarity index 100%
rename from app/scripts/components/exploration/hooks/use-analysis-data-request.ts
rename to packages/veda-ui/src/components/exploration/hooks/use-analysis-data-request.ts
diff --git a/app/scripts/components/exploration/hooks/use-dataset-hover.ts b/packages/veda-ui/src/components/exploration/hooks/use-dataset-hover.ts
similarity index 100%
rename from app/scripts/components/exploration/hooks/use-dataset-hover.ts
rename to packages/veda-ui/src/components/exploration/hooks/use-dataset-hover.ts
diff --git a/app/scripts/components/exploration/hooks/use-parent-data.ts b/packages/veda-ui/src/components/exploration/hooks/use-parent-data.ts
similarity index 100%
rename from app/scripts/components/exploration/hooks/use-parent-data.ts
rename to packages/veda-ui/src/components/exploration/hooks/use-parent-data.ts
diff --git a/app/scripts/components/exploration/hooks/use-stac-metadata-data.spec.ts b/packages/veda-ui/src/components/exploration/hooks/use-stac-metadata-data.spec.ts
similarity index 100%
rename from app/scripts/components/exploration/hooks/use-stac-metadata-data.spec.ts
rename to packages/veda-ui/src/components/exploration/hooks/use-stac-metadata-data.spec.ts
diff --git a/app/scripts/components/exploration/hooks/use-stac-metadata-datasets.ts b/packages/veda-ui/src/components/exploration/hooks/use-stac-metadata-datasets.ts
similarity index 100%
rename from app/scripts/components/exploration/hooks/use-stac-metadata-datasets.ts
rename to packages/veda-ui/src/components/exploration/hooks/use-stac-metadata-datasets.ts
diff --git a/app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx b/packages/veda-ui/src/components/exploration/hooks/use-timeline-dataset-atom.tsx
similarity index 100%
rename from app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx
rename to packages/veda-ui/src/components/exploration/hooks/use-timeline-dataset-atom.tsx
diff --git a/app/scripts/components/exploration/hooks/use-toi-zoom.ts b/packages/veda-ui/src/components/exploration/hooks/use-toi-zoom.ts
similarity index 100%
rename from app/scripts/components/exploration/hooks/use-toi-zoom.ts
rename to packages/veda-ui/src/components/exploration/hooks/use-toi-zoom.ts
diff --git a/app/scripts/components/exploration/index.tsx b/packages/veda-ui/src/components/exploration/index.tsx
similarity index 100%
rename from app/scripts/components/exploration/index.tsx
rename to packages/veda-ui/src/components/exploration/index.tsx
diff --git a/app/scripts/components/exploration/tour-manager.tsx b/packages/veda-ui/src/components/exploration/tour-manager.tsx
similarity index 100%
rename from app/scripts/components/exploration/tour-manager.tsx
rename to packages/veda-ui/src/components/exploration/tour-manager.tsx
diff --git a/app/scripts/components/exploration/types.d.ts.ts b/packages/veda-ui/src/components/exploration/types.d.ts.ts
similarity index 100%
rename from app/scripts/components/exploration/types.d.ts.ts
rename to packages/veda-ui/src/components/exploration/types.d.ts.ts
diff --git a/app/scripts/components/exploration/views/default/index.tsx b/packages/veda-ui/src/components/exploration/views/default/index.tsx
similarity index 99%
rename from app/scripts/components/exploration/views/default/index.tsx
rename to packages/veda-ui/src/components/exploration/views/default/index.tsx
index 318eb3f30..94dd73ada 100644
--- a/app/scripts/components/exploration/views/default/index.tsx
+++ b/packages/veda-ui/src/components/exploration/views/default/index.tsx
@@ -156,3 +156,4 @@ export default function ExplorationAndAnalysisDefaultView(
     </TourProvider>
   );
 }
+
diff --git a/packages/veda-ui/src/components/exploration/views/simple/index.tsx b/packages/veda-ui/src/components/exploration/views/simple/index.tsx
new file mode 100644
index 000000000..66b70f7d7
--- /dev/null
+++ b/packages/veda-ui/src/components/exploration/views/simple/index.tsx
@@ -0,0 +1,233 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { useAtom } from 'jotai';
+import {
+  selectedCompareDateAtom,
+  selectedDateAtom
+} from '$components/exploration/atoms/dates';
+import { zoomAtom } from '$components/exploration/atoms/zoom';
+import { centerAtom } from '$components/exploration/atoms/center';
+import TimelineSimpleView from '$components/exploration/views/simple/timeline-simple-view';
+import { BasemapId } from '$components/common/map/controls/map-options/basemap';
+import {
+  convertProjectionToMapbox,
+  projectionDefault
+} from '$components/common/map/controls/map-options/projections';
+import MapBlock from '$components/common/blocks/block-map';
+import {
+  VizDataset,
+  VizDatasetSuccess,
+  DatasetStatus,
+  TimelineDataset
+} from '$components/exploration/types.d.ts';
+import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
+import { ProjectionOptions, TimeDensity } from '$types/veda';
+import { useVedaUI } from '$context/veda-ui-provider';
+
+interface ExplorationAndAnalysisSimpleViewProps {
+  datasets: TimelineDataset[];
+}
+
+/**
+ * Simplified exploration view optimized for embedding.
+ *
+ * Renders only the map visualization and timeline controls,
+ * without navigation, header, footer, dataset selection UI and time series visualization.
+ *
+ * @param props.datasets - Timeline datasets to display
+ *
+ * @example
+ * <ExplorationAndAnalysisSimpleView datasets={timelineDatasets} />
+ */
+export default function ExplorationAndAnalysisSimpleView(
+  props: ExplorationAndAnalysisSimpleViewProps
+) {
+  const { datasets } = props;
+  const [selectedDay, setSelectedDay] = useAtom(selectedDateAtom);
+  const [selectedCompareDay, setSelectedComparedDay] = useAtom(
+    selectedCompareDateAtom
+  );
+  const [zoom] = useAtom(zoomAtom);
+  const [center] = useAtom(centerAtom);
+  return (
+    // eslint-disable-next-line react/jsx-pascal-case
+    <ExplorationAndAnalysisSimpleViewContent
+      datasets={datasets}
+      selectedDay={selectedDay}
+      setSelectedDay={setSelectedDay}
+      setSelectedComparedDay={setSelectedComparedDay}
+      selectedCompareDay={selectedCompareDay}
+      center={center}
+      zoom={zoom}
+    />
+  );
+}
+
+interface ExplorationAndAnalysisSimpleViewContentProps {
+  datasets: TimelineDataset[];
+  setSelectedDay: (x: Date) => void;
+  setSelectedComparedDay: (x: Date) => void;
+  selectedDay?: Date | null;
+  selectedCompareDay?: Date | null;
+  center?: [number, number];
+  zoom?: number;
+  projectionId?: ProjectionOptions['id'];
+  projectionCenter?: ProjectionOptions['center'];
+  projectionParallels?: ProjectionOptions['parallels'];
+  basemapId?: BasemapId;
+}
+
+const getDataLayer = (
+  layerIndex: number,
+  layers: VizDataset[] | undefined
+): VizDatasetSuccess | null => {
+  if (!layers || layers.length <= layerIndex) return null;
+  const layer = layers[layerIndex];
+  // @NOTE: What to do when data returns ERROR
+  if (layer.status !== DatasetStatus.SUCCESS) return null;
+  return {
+    ...layer,
+    settings: {
+      isVisible: true,
+      opacity: 100
+    }
+  };
+};
+
+function ExplorationAndAnalysisSimpleViewContent(
+  props: ExplorationAndAnalysisSimpleViewContentProps
+) {
+  const {
+    datasets,
+    selectedDay,
+    setSelectedDay,
+    selectedCompareDay,
+    setSelectedComparedDay,
+    center,
+    zoom,
+    projectionId,
+    projectionCenter,
+    projectionParallels,
+    basemapId
+  } = props;
+  const [layers, setLayers] = useState<VizDataset[]>(datasets);
+
+  const { envApiStacEndpoint } = useVedaUI();
+  useReconcileWithStacMetadata(layers, setLayers, envApiStacEndpoint);
+
+  const projectionStart = useMemo(() => {
+    if (projectionId) {
+      // Ensure that the default center and parallels are used if none are
+      // provided.
+      const projection = convertProjectionToMapbox({
+        id: projectionId,
+        center: projectionCenter,
+        parallels: projectionParallels
+      });
+      return {
+        ...(projection as object),
+        id: projectionId
+      };
+    } else {
+      return projectionDefault;
+    }
+  }, [projectionId, projectionCenter, projectionParallels]);
+
+  const [, setProjection] = useState(projectionStart);
+
+  const baseDataLayer: VizDatasetSuccess | null = useMemo(
+    () => getDataLayer(0, layers),
+    [layers]
+  );
+  const compareDataLayer: VizDatasetSuccess | null = useMemo(
+    () => getDataLayer(1, layers),
+    [layers]
+  );
+  const baseTimeDensity: TimeDensity = baseDataLayer?.data
+    .timeDensity as TimeDensity;
+  const compareTimeDensity: TimeDensity = compareDataLayer?.data
+    .timeDensity as TimeDensity;
+  const compareLabel = `${baseDataLayer?.data?.name} vs ${compareDataLayer?.data?.name}`;
+
+  useEffect(() => {
+    setProjection(projectionStart);
+  }, [projectionStart]);
+
+  const [mapBasemapId, setMapBasemapId] = useState(basemapId);
+
+  useEffect(() => {
+    if (!basemapId) return;
+    setMapBasemapId(basemapId);
+  }, [basemapId]);
+
+  return (
+    <StyledContainer>
+      <MapBlock
+        baseDataLayer={baseDataLayer}
+        compareDataLayer={compareDataLayer}
+        dateTime={selectedDay?.toDateString()}
+        compareDateTime={selectedCompareDay?.toDateString()}
+        center={center}
+        zoom={zoom}
+        compareLabel={compareLabel}
+        projectionId={projectionId}
+        projectionCenter={projectionCenter}
+        projectionParallels={projectionParallels}
+        basemapId={mapBasemapId}
+        isMapMessageEnabled={true}
+        navigationControlPosition='top-right'
+        height='100%'
+      />
+      <StyledTimelineContainer isCompareMode={!!selectedCompareDay}>
+        {selectedDay && (
+          <TimelineSimpleView
+            label=''
+            date={selectedDay}
+            setDate={setSelectedDay}
+            datasets={layers as TimelineDataset[]}
+            timeDensity={baseTimeDensity}
+            tipContent={
+              selectedCompareDay
+                ? 'Date shown on left map'
+                : 'Date shown on map'
+            }
+          />
+        )}
+      </StyledTimelineContainer>
+      <StyledCompareTimelineContainer>
+        {selectedCompareDay && (
+          <TimelineSimpleView
+            label=''
+            date={selectedCompareDay}
+            setDate={setSelectedComparedDay}
+            datasets={layers as TimelineDataset[]}
+            timeDensity={compareTimeDensity}
+            tipContent='Date shown on right map'
+          />
+        )}
+      </StyledCompareTimelineContainer>
+    </StyledContainer>
+  );
+}
+
+const StyledContainer = styled.div`
+  position: relative;
+  flex-grow: 1;
+  height: 100vh;
+  display: flex;
+`;
+const StyledTimelineContainer = styled.div<{ isCompareMode?: boolean }>`
+  position: absolute;
+  bottom: 2rem;
+  left: ${({ isCompareMode }) => (isCompareMode ? '25%' : '50%')};
+  transform: translateX(-50%);
+  z-index: 10;
+`;
+const StyledCompareTimelineContainer = styled.div`
+  position: absolute;
+  bottom: 2rem;
+  left: 75%;
+  transform: translateX(-50%);
+  z-index: 10;
+`;
+
diff --git a/packages/veda-ui/src/components/exploration/views/simple/timeline-simple-view.tsx b/packages/veda-ui/src/components/exploration/views/simple/timeline-simple-view.tsx
new file mode 100644
index 000000000..9992ef4b0
--- /dev/null
+++ b/packages/veda-ui/src/components/exploration/views/simple/timeline-simple-view.tsx
@@ -0,0 +1,118 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { View } from 'react-calendar/dist/cjs/shared/types';
+import { TimelineDatePicker } from '$components/exploration/components/timeline/timeline-datepicker';
+import {
+  getLabelFormat,
+  getTemporalExtent
+} from '$components/exploration/components/timeline/timeline-utils';
+import { getLowestCommonTimeDensity } from '$components/exploration/data-utils';
+
+import {
+  TimeDensity,
+  TimelineDataset,
+  DatasetStatus,
+  TimelineDatasetSuccess
+} from '$components/exploration/types.d.ts';
+
+const TimelineWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  color: black;
+  background-color: white;
+  border-radius: 2px;
+`;
+interface TimelineSimpleViewProps {
+  date: Date | null;
+  setDate: (date: Date | null) => void;
+  timeDensity: TimeDensity;
+  datasets: TimelineDataset[];
+  label: string;
+  tipContent?: string;
+}
+
+/**
+ * Timeline date picker for the simple exploration view.
+ *
+ * Adjusts calendar view (month/year/day) based on dataset time density
+ * and calculates temporal extent from provided datasets.
+ *
+ * @param props.date - Currently selected date
+ * @param props.setDate - Callback to update the selected date
+ * @param props.timeDensity - Dataset time density (determines calendar view)
+ * @param props.datasets - Datasets used to calculate temporal extent
+ */
+function TimelineSimpleView(props: TimelineSimpleViewProps) {
+  const { date, setDate, timeDensity, datasets, label, tipContent } = props;
+
+  const lowestCommonTimeDensity = useMemo(
+    () =>
+      getLowestCommonTimeDensity(
+        // Filter the datasets to only include those with status 'SUCCESS'.
+        // The function getLowestCommonTimeDensity expects an array of TimelineDatasetSuccess objects,
+        // which have the 'data.timeDensity' property (formated as such).
+        datasets.filter(
+          (dataset): dataset is TimelineDatasetSuccess =>
+            dataset.status === DatasetStatus.SUCCESS
+        )
+      ),
+    [datasets]
+  );
+
+  const minMaxTemporalExtent = useMemo(
+    () =>
+      getTemporalExtent(
+        // Filter the datasets to only include those with status 'SUCCESS'.
+        datasets.filter(
+          (dataset): dataset is TimelineDatasetSuccess =>
+            dataset.status === DatasetStatus.SUCCESS
+        )
+      ),
+    [datasets]
+  );
+
+  const timelineLabelFormat = useMemo(
+    () => getLabelFormat(lowestCommonTimeDensity),
+    [lowestCommonTimeDensity]
+  );
+  const getCalendarView = (timeDensity: TimeDensity): View => {
+    switch (timeDensity) {
+      case TimeDensity.MONTH:
+        return 'year';
+      case TimeDensity.YEAR:
+        return 'decade';
+      default:
+        return 'month';
+    }
+  };
+  const calendarView = useMemo(
+    () => getCalendarView(timeDensity),
+    [timeDensity]
+  );
+
+  return (
+    <TimelineWrapper>
+      <TimelineDatePicker
+        triggerHeadReference={label}
+        minDate={minMaxTemporalExtent[0]}
+        maxDate={minMaxTemporalExtent[1]}
+        selectedDay={date}
+        tipContent={tipContent}
+        onConfirm={(d) => {
+          if (!d) return;
+          setDate(new Date(d));
+        }}
+        disabled={false}
+        dataTourId={'date-picker-' + label}
+        calendarView={calendarView}
+        triggerLabelFormat={timelineLabelFormat}
+      />
+    </TimelineWrapper>
+  );
+}
+
+export default TimelineSimpleView;
+
diff --git a/app/scripts/components/home/audience.tsx b/packages/veda-ui/src/components/home/audience.tsx
similarity index 100%
rename from app/scripts/components/home/audience.tsx
rename to packages/veda-ui/src/components/home/audience.tsx
diff --git a/app/scripts/components/home/connections-section.tsx b/packages/veda-ui/src/components/home/connections-section.tsx
similarity index 100%
rename from app/scripts/components/home/connections-section.tsx
rename to packages/veda-ui/src/components/home/connections-section.tsx
diff --git a/app/scripts/components/home/featured-stories.tsx b/packages/veda-ui/src/components/home/featured-stories.tsx
similarity index 100%
rename from app/scripts/components/home/featured-stories.tsx
rename to packages/veda-ui/src/components/home/featured-stories.tsx
diff --git a/app/scripts/components/home/index.tsx b/packages/veda-ui/src/components/home/index.tsx
similarity index 100%
rename from app/scripts/components/home/index.tsx
rename to packages/veda-ui/src/components/home/index.tsx
diff --git a/app/scripts/components/home/value-propostion.tsx b/packages/veda-ui/src/components/home/value-propostion.tsx
similarity index 100%
rename from app/scripts/components/home/value-propostion.tsx
rename to packages/veda-ui/src/components/home/value-propostion.tsx
diff --git a/app/scripts/components/sandbox/cards/index.jsx b/packages/veda-ui/src/components/sandbox/cards/index.js
similarity index 100%
rename from app/scripts/components/sandbox/cards/index.jsx
rename to packages/veda-ui/src/components/sandbox/cards/index.js
diff --git a/packages/veda-ui/src/components/sandbox/cards/index.jsx b/packages/veda-ui/src/components/sandbox/cards/index.jsx
new file mode 100644
index 000000000..8905657a8
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/cards/index.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { USWDSCardGroup } from '$uswds';
+import TopicCard from '$components/common/card/uswds-cards/topic-card';
+import FlagCard from '$components/common/card/uswds-cards/flag-card';
+import DefaultCard from '$components/common/card/uswds-cards/default-card';
+import { USWDSButton } from '$uswds';
+
+const TOPIC_CARD_IMG_SRC =
+  'https://s3-alpha-sig.figma.com/img/aeaa/571c/116155253eb40c008e73e203d0b80282?Expires=1743984000&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=GlnKvYuRoJ~-3MbFdUKvNzA~WRReAvPqIeEI9EkXYgf-ompNKv4ILSl1nvnJNnyirEu1jxtKDZ1y6JERI9RIa8c3cxmYy1DNJnFoF6WOAsU~hXHLH5ja3r-J-R6HyKs6rPystqVfH5esOtxRUi3tCZXdSLWdjSpiHRyWwNcQ9P6Ga3LURQSeyPDG~sP6ma8Nbd32I8Eq67Ip6vaM6etesfLGgQ6tZv2ZkA3srd6qa~OrZ-atJmGgf7-6JLoFkrv058uc1s2oiFnUDQZ5fYc1IthWyYLr3FmYbDWyW-YowewKJkiSaJseCpOonrDzDFqwnuL-ZrpPNQI4kanL8FSwaQ__';
+
+function SandboxUswdsCards() {
+  return (
+    <div className='margin-2'>
+      <div className='usa-card-group grid-row grid-gap'>
+        <div className='tablet:grid-col-6 desktop:grid-col-4 mobile-lg:grid-col-12'>
+          <TopicCard
+            imgSrc={TOPIC_CARD_IMG_SRC}
+            imgAlt='Foggy mountain landscape'
+            fullBg={true}
+            footerTitle='Sea Level Rise'
+            cardLabel='topic'
+            isCardFocusable={true}
+          />
+        </div>
+
+        <div className='tablet:grid-col-6 desktop:grid-col-4 mobile-lg:grid-col-12'>
+          <TopicCard
+            imgSrc={TOPIC_CARD_IMG_SRC}
+            imgAlt='Foggy mountain landscape'
+            fullBg={false}
+            footerTitle='Explore Topic'
+            description='Sea Level Rise'
+            cardLabel='topic'
+            isCardFocusable={true}
+          />
+        </div>
+      </div>
+
+      <USWDSCardGroup>
+        <FlagCard
+          imgSrc='https://picsum.photos/id/1002/2048/1024'
+          imgAlt='Generic placeholder by lorem picsum'
+          heading='FlagCard - flagDefault layout'
+          description='This is a test of the flagDefaultCard passing in only strings to heading & description'
+          footer={<USWDSButton type='button'>test button</USWDSButton>}
+          cardLabel='data_collection'
+        />
+      </USWDSCardGroup>
+      <USWDSCardGroup>
+        <DefaultCard
+          imgSrc='https://picsum.photos/id/1002/2048/1024'
+          imgAlt='Generic placeholder by lorem picsum'
+          heading='DefautCard - out of the box'
+          description='This is a test of the DefaultCard passing in only strings to heading & description.'
+          footer={<USWDSButton type='button'>test button</USWDSButton>}
+          cardLabel='data_collection'
+        />
+      </USWDSCardGroup>
+    </div>
+  );
+}
+
+export default SandboxUswdsCards;
diff --git a/app/scripts/components/sandbox/colors.tsx b/packages/veda-ui/src/components/sandbox/colors.tsx
similarity index 100%
rename from app/scripts/components/sandbox/colors.tsx
rename to packages/veda-ui/src/components/sandbox/colors.tsx
diff --git a/app/scripts/components/sandbox/customlayer/index.tsx b/packages/veda-ui/src/components/sandbox/customlayer/index.tsx
similarity index 100%
rename from app/scripts/components/sandbox/customlayer/index.tsx
rename to packages/veda-ui/src/components/sandbox/customlayer/index.tsx
diff --git a/app/scripts/components/sandbox/index.jsx b/packages/veda-ui/src/components/sandbox/index.js
similarity index 100%
rename from app/scripts/components/sandbox/index.jsx
rename to packages/veda-ui/src/components/sandbox/index.js
diff --git a/packages/veda-ui/src/components/sandbox/index.jsx b/packages/veda-ui/src/components/sandbox/index.jsx
new file mode 100644
index 000000000..a48944b4a
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/index.jsx
@@ -0,0 +1,279 @@
+import React from 'react';
+import { Route, Routes, useParams } from 'react-router-dom';
+import styled from 'styled-components';
+import { GridContainer, Grid } from '@trussworks/react-uswds';
+
+import SandboxTypography from './legacy/typography';
+import SandboxHug from './legacy/hug';
+import SandboxExplorationMap from './legacy/exploration-map';
+import SandboxTimelineAnalysis from './legacy/exploration/timeline-analysis';
+import SandboxMapBlock from './legacy/map-block';
+import SandboxContentBlocks from './legacy/content-blocks';
+import SandboxCards from './legacy/cards';
+import SandboxMDXPage from './legacy/mdx-page';
+import SandboxMDXScrolly from './legacy/mdx-scrollytelling';
+import SandboxChart from './legacy/mdx-chart';
+import SandboxColors from './legacy/colors';
+import SandboxMDXEditor from './legacy/mdx-editor';
+import SandboxTable from './legacy/table';
+import SandboxLayerInfo from './legacy/layer-info';
+import SandboxOverride from './override';
+import { USWDSColors } from './colors';
+import CustomLayer from './customlayer';
+import Pagination from './pagination';
+import Widgets from './widgets';
+import SandboxUswdsCards from './cards';
+import {
+  FullscreenWidget,
+  FullpageModalWidget
+} from '$components/common/widget';
+import { resourceNotFound } from '$components/uhoh';
+import { Card } from '$components/common/card';
+import PageHero from '$components/common/page-hero';
+import { LayoutProps } from '$components/common/layout-root';
+import { PageMainContent } from '$styles/page';
+
+const pages = [
+  {
+    id: 'typography',
+    name: 'Typography',
+    component: SandboxTypography
+  },
+  {
+    id: 'hug',
+    name: 'Human Universal Gridder (Hug)',
+    component: SandboxHug
+  },
+  {
+    id: 'exploration-map',
+    name: 'Exploration map',
+    component: SandboxExplorationMap
+  },
+  {
+    id: 'timeline-analysis',
+    name: 'Timeline Analysis',
+    component: SandboxTimelineAnalysis
+  },
+  {
+    id: 'map-block',
+    name: 'Map block',
+    component: SandboxMapBlock
+  },
+  {
+    id: 'content-blocks',
+    name: 'Content Blocks',
+    component: SandboxContentBlocks
+  },
+  {
+    id: 'mdx-page',
+    name: 'Mdx page',
+    component: SandboxMDXPage
+  },
+  {
+    id: 'mdx-scrolly',
+    name: 'Scrollytelling',
+    component: SandboxMDXScrolly
+  },
+  {
+    id: 'mdx-chart',
+    name: 'Chart',
+    component: SandboxChart
+  },
+  {
+    id: 'cards',
+    name: 'Cards',
+    component: SandboxCards
+  },
+  {
+    id: 'override',
+    name: 'Override',
+    component: SandboxOverride
+  },
+  {
+    id: 'legacy-colors',
+    name: 'Colors',
+    component: SandboxColors
+  },
+  {
+    id: 'mdxeditor',
+    name: 'Story Editor ⚠️EXPERIMENTAL',
+    component: SandboxMDXEditor
+  },
+  {
+    id: 'sandboxtable',
+    name: 'Table',
+    component: SandboxTable
+  },
+  {
+    id: 'sandboxLayerInfo',
+    name: 'Layer Info',
+    component: SandboxLayerInfo
+  },
+  {
+    id: 'colors',
+    name: 'USWDS Colors',
+    component: USWDSColors
+  },
+  {
+    id: 'pagination',
+    name: 'USWDS Pagination',
+    component: Pagination
+  },
+  {
+    id: 'widgets',
+    name: 'USWDS Widgets',
+    component: Widgets
+  },
+  {
+    id: 'uswds-cards',
+    name: 'USWDS Cards',
+    component: SandboxUswdsCards
+  },
+  {
+    id: 'custom-layer',
+    name: 'Custom Layer',
+    component: CustomLayer
+  }
+];
+
+function SandboxLayout() {
+  const { pId } = useParams();
+
+  const page = pages.find((p) => p.id === pId);
+  if (!page) throw resourceNotFound();
+
+  return (
+    <>
+      <LayoutProps
+        title={`Sandbox - ${page.name}`}
+        hideFooter={page.noFooter}
+      />
+
+      <PageMainContent>
+        {!page.noHero ? <PageHero title={page.name} /> : false}
+        <page.component />
+      </PageMainContent>
+    </>
+  );
+}
+
+export const HugResetter = styled.div`
+  /* To escape from HUG grid */
+`;
+
+function Sandbox() {
+  return (
+    <Routes>
+      <Route path=':pId' element={<SandboxLayout />} />
+      <Route
+        index
+        element={
+          <PageMainContent>
+            <LayoutProps title='Sandbox' />
+            <PageHero title='Sandbox' />
+            <HugResetter>
+              <GridContainer>
+                <Grid row gap={3}>
+                  <Grid col={12} className='margin-top-2 margin-bottom-3'>
+                    <h2>Browse USWDS Components</h2>
+                  </Grid>
+
+                  <Grid col={4} className='margin-bottom-3'>
+                    <Card
+                      linkLabel='View more'
+                      title='USWDS Colors'
+                      to='colors'
+                    />
+                  </Grid>
+                  <Grid col={4} className='margin-bottom-3'>
+                    <Card
+                      linkLabel='View more'
+                      title='USWDS Pagination'
+                      to='pagination'
+                    />
+                  </Grid>
+                  <Grid col={4} className='margin-bottom-3'>
+                    <Card
+                      linkLabel='View more'
+                      title='USWDS Cards'
+                      to='uswds-cards'
+                    />
+                  </Grid>
+
+                  <Grid col={12} className='margin-top-2 margin-bottom-3'>
+                    <h2>Explore widget possibilities</h2>
+                  </Grid>
+                  <Grid col={6} className='margin-bottom-3'>
+                    <FullscreenWidget heading='Fullscreen API'>
+                      <p>
+                        This is using the fullscreen API, displaying the content
+                        in full screen size.
+                      </p>
+                      <img
+                        src='https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExbXZrcmlkeGVreDFlbGRpNm9leTMxOTh1ZTFocHhtdmxhODZvaWt1biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3oKIPnAiaMCws8nOsE/giphy.gif'
+                        width='457'
+                        height='480'
+                      />
+                      <p>
+                        <a href='https://giphy.com/gifs/cat-kitten-computer-3oKIPnAiaMCws8nOsE'>
+                          via GIPHY
+                        </a>
+                      </p>
+                    </FullscreenWidget>
+                  </Grid>
+                  <Grid col={6} className='margin-bottom-3'>
+                    <FullpageModalWidget heading='Fullpage Modal'>
+                      <p>
+                        This is using the a modal approach with a micro
+                        animation. The extend spans the whole page, but does not
+                        cover the browser tools.
+                      </p>
+                      <img
+                        src='https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExaXc3azJsZmxoaTE1cXR4dDlvem5taHFlMXJwOWcwZDJrMnoza2YzMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/q5Wtr34IBE1KOYHkyN/giphy.gif'
+                        width='480'
+                        height='360'
+                      />
+                      <p>
+                        <a href='https://giphy.com/gifs/epic-bots-epicbots-q5Wtr34IBE1KOYHkyN'>
+                          via GIPHY
+                        </a>
+                      </p>
+                    </FullpageModalWidget>
+                  </Grid>
+                  <Grid col={4} className='margin-bottom-3'>
+                    <Card
+                      linkLabel='View more'
+                      title='USWDS Widgets'
+                      to='widgets'
+                    />
+                  </Grid>
+                </Grid>
+              </GridContainer>
+            </HugResetter>
+
+            <HugResetter>
+              <GridContainer>
+                <Grid row>
+                  <Grid col={12} className='margin-top-2 margin-bottom-3'>
+                    <h2>Browse Legacy Components</h2>
+                  </Grid>
+                </Grid>
+                <Grid row gap={3}>
+                  {pages
+                    .filter((p) => !p.name.startsWith('USWDS'))
+                    .map((p) => (
+                      <Grid col={4} key={p.id} className='margin-bottom-3'>
+                        <Card linkLabel='View more' title={p.name} to={p.id} />
+                      </Grid>
+                    ))}
+                </Grid>
+              </GridContainer>
+            </HugResetter>
+          </PageMainContent>
+        }
+      />
+    </Routes>
+  );
+}
+
+export default Sandbox;
diff --git a/app/scripts/components/sandbox/legacy/cards/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/cards/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/cards/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/cards/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/cards/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/cards/index.jsx
new file mode 100644
index 000000000..0fb9f40d1
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/cards/index.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { getString } from 'veda';
+
+import { Fold } from '$components/common/fold';
+import { Card } from '$components/common/card';
+import { CardListGrid } from '$components/common/card/styles';
+
+function SandboxCards() {
+  return (
+    <>
+      <Fold>
+        <CardListGrid>
+          <li>
+            <Card
+              linkLabel='View more'
+              linkTo='/'
+              title='Cities Experiencing Clearer Air During Lockdowns'
+              description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius erat in vulputate.'
+              date={new Date('2021-10-26')}
+              tagLabels={[getString('stories').one]}
+              parentTo='/sandbox'
+              imgSrc='https://picsum.photos/id/1002/2048/1024'
+              imgAlt='Generic placeholder by lorem picsum'
+            />
+          </li>
+
+          <li>
+            <Card
+              cardType='cover'
+              linkLabel='View more'
+              linkTo='/'
+              title='Nitrogen Dioxide (NO₂)'
+              description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius erat in vulputate.'
+              tagLabels={['Dataset']}
+              parentTo='/sandbox'
+              imgSrc='https://picsum.photos/id/1002/2048/1024'
+              imgAlt='Generic placeholder by lorem picsum'
+            />
+          </li>
+        </CardListGrid>
+      </Fold>
+    </>
+  );
+}
+
+export default SandboxCards;
diff --git a/app/scripts/components/sandbox/legacy/colors/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/colors/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/colors/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/colors/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/colors/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/colors/index.jsx
new file mode 100644
index 000000000..f700b729f
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/colors/index.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+import { listReset, themeVal } from '@devseed-ui/theme-provider';
+
+import { Fold } from '$components/common/fold';
+
+const ColorsGrid = styled.ul`
+  ${listReset()};
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem 1rem;
+  grid-column: 1/-1;
+`;
+
+const Color = styled.li`
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+`;
+
+const ColorSquare = styled.div`
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: 1rem;
+  border: 1px dashed #333;
+  border-radius: ${themeVal('shape.rounded')};
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=');
+
+  .spot {
+    width: 100%;
+    height: 100%;
+    background: ${({ color }) => color};
+  }
+`;
+
+function SandboxColors() {
+  const theme = useTheme();
+
+  return (
+    <Fold>
+      <ColorsGrid>
+        {Object.keys(theme.color).map((key) => (
+          <Color key={key}>
+            <ColorSquare color={theme.color[key]}>
+              <div className='spot' />
+            </ColorSquare>
+            <strong>color.{key}</strong>
+            <p>{theme.color[key]}</p>
+          </Color>
+        ))}
+      </ColorsGrid>
+    </Fold>
+  );
+}
+
+export default SandboxColors;
diff --git a/app/scripts/components/sandbox/legacy/content-blocks/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/content-blocks/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/content-blocks/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/content-blocks/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/content-blocks/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/content-blocks/index.jsx
new file mode 100644
index 000000000..2ca09d2d0
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/content-blocks/index.jsx
@@ -0,0 +1,560 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { media } from '@devseed-ui/theme-provider';
+
+import {
+  ContentBlock,
+  ContentBlockProse,
+  ContentBlockFigure
+} from '$styles/content-block';
+
+import {
+  Figure,
+  Figcaption,
+  FigcaptionInner,
+  FigureAttribution
+} from '$components/common/figure';
+
+const ContentBlockPAlpha = styled(ContentBlock)`
+  ${ContentBlockProse} {
+    grid-column: content-start / content-end;
+
+    ${media.largeUp`
+      grid-column:  content-3 / content-11;
+    `}
+  }
+`;
+
+const ContentBlockPBeta = styled(ContentBlock)`
+  ${ContentBlockProse} {
+    grid-column: content-start / content-end;
+
+    ${media.mediumUp`
+      column-count: 2;
+    `}
+  }
+`;
+
+const ContentBlockFAlpha = styled(ContentBlock)`
+  ${ContentBlockFigure} {
+    grid-column: content-start / content-end;
+
+    ${media.largeUp`
+      grid-column:  content-3 / content-11;
+    `}
+  }
+`;
+
+const ContentBlockFBeta = styled(ContentBlock)`
+  ${ContentBlockFigure} {
+    grid-column: content-start / content-end;
+  }
+`;
+
+const ContentBlockFGama = styled(ContentBlock)`
+  ${ContentBlockFigure} {
+    grid-column: full-start / full-end;
+  }
+`;
+
+const ContentBlockPFAlpha = styled(ContentBlock)`
+  ${ContentBlockProse} {
+    grid-column: content-start / content-end;
+
+    ${media.largeUp`
+      grid-column:  content-start / content-7;
+    `}
+  }
+
+  ${ContentBlockFigure} {
+    grid-column: content-start / content-end;
+    grid-row: 2;
+
+    ${media.mediumUp`
+      grid-column: content-2 / content-8;
+    `}
+
+    ${media.largeUp`
+      grid-column: content-7 / content-end;
+      grid-row: 1;
+    `}
+  }
+`;
+
+const ContentBlockPFBeta = styled(ContentBlock)`
+  ${ContentBlockProse} {
+    grid-column: content-start / content-end;
+
+    ${media.largeUp`
+      grid-column: content-7 / content-end;
+    `}
+  }
+
+  ${ContentBlockFigure} {
+    grid-column: content-start / content-end;
+
+    ${media.mediumUp`
+      grid-column: content-2 / content-8;
+      grid-row: 2;
+    `}
+
+    ${media.largeUp`
+      grid-column:  content-start / content-7;
+      grid-row: 1;
+    `}
+  }
+`;
+
+const ContentBlockPFGama = styled(ContentBlock)`
+  ${ContentBlockProse} {
+    grid-column: content-start / content-end;
+
+    ${media.mediumUp`
+      grid-column:  content-2 / content-8;
+    `}
+
+    ${media.largeUp`
+      grid-column:  content-2 / content-6;
+    `}
+  }
+
+  ${ContentBlockFigure} {
+    grid-column: content-start / full-end;
+    grid-row: 2;
+
+    ${media.smallUp`
+      grid-column: content-2 / full-end;
+    `}
+
+    ${media.mediumUp`
+      grid-column: content-3 / full-end;
+    `}
+
+    ${media.largeUp`
+      grid-column: content-7 / full-end;
+      grid-row: 1;
+    `}
+  }
+`;
+
+const ContentBlockPFDelta = styled(ContentBlock)`
+  ${ContentBlockProse} {
+    grid-column: content-start / content-end;
+
+    ${media.mediumUp`
+      grid-column:  content-2 / content-8;
+    `}
+
+    ${media.largeUp`
+      grid-column:  content-8 / content-12;
+    `}
+  }
+
+  ${ContentBlockFigure} {
+    grid-column: full-start / content-end;
+    grid-row: 2;
+
+    ${media.smallUp`
+      grid-column: full-start / content-4;
+    `}
+
+    ${media.mediumUp`
+      grid-column: full-start / content-7;
+    `}
+
+    ${media.largeUp`
+      grid-row: 1;
+    `}
+  }
+`;
+
+function SandboxContentBlocks() {
+  return (
+    <>
+      <ContentBlockPAlpha>
+        <ContentBlockProse>
+          <h2>CB Prose Alpha</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            vel tristique sapien, non suscipit lacus. Mauris vestibulum bibendum
+            sem eget pellentesque. Cras viverra urna felis, non placerat felis
+            aliquet at. Mauris aliquam malesuada libero non rutrum. Aenean
+            pharetra suscipit nisl id tempus. In eget tellus eros. Mauris
+            dignissim odio quis sapien pulvinar, ac varius sapien consectetur.
+            Morbi scelerisque ex sit amet est tempor, nec tempus metus
+            scelerisque.
+          </p>
+          <Figure className='align-left'>
+            <img
+              alt='Media example'
+              src='http://via.placeholder.com/256x128?text=align-left'
+              width='256'
+              height='80'
+              loading='lazy'
+            />
+            <Figcaption>
+              <FigcaptionInner>Lorem ipsum.</FigcaptionInner>{' '}
+              <FigureAttribution
+                author='Lorem Picsum'
+                url='https://picsum.photos/id/1002/2048/1024'
+                forwardedAs='span'
+              />
+            </Figcaption>
+          </Figure>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            vel tristique sapien, non suscipit lacus. Mauris vestibulum bibendum
+            sem eget pellentesque. Cras viverra urna felis, non placerat felis
+            aliquet at. Mauris aliquam malesuada libero non rutrum. Aenean
+            pharetra suscipit nisl id tempus. In eget tellus eros. Mauris
+            dignissim odio quis sapien pulvinar, ac varius sapien consectetur.
+            Morbi scelerisque ex sit amet est tempor, nec tempus metus
+            scelerisque.
+          </p>
+          <h3>Cras viverra urna felis</h3>
+          <Figure className='align-right'>
+            <img
+              alt='Media example'
+              src='http://via.placeholder.com/256x128?text=align-right'
+              width='256'
+              height='80'
+              loading='lazy'
+            />
+            <Figcaption>
+              <FigcaptionInner>Lorem ipsum.</FigcaptionInner>{' '}
+              <FigureAttribution
+                author='Lorem Picsum'
+                url='https://picsum.photos/id/1002/2048/1024'
+                forwardedAs='span'
+              />
+            </Figcaption>
+          </Figure>
+          <p>
+            Donec est tellus, finibus lobortis vestibulum tincidunt, egestas id
+            nunc. Praesent interdum turpis eu libero iaculis iaculis. Sed tempor
+            pulvinar sapien, dapibus commodo orci suscipit ac. Maecenas placerat
+            felis vel nisi lobortis, quis blandit mauris accumsan. Donec
+            vehicula ipsum orci, sit amet interdum est commodo sed. Duis
+            fermentum odio ut condimentum lobortis. Pellentesque pretium quam at
+            pulvinar tristique. Class aptent taciti sociosqu ad litora torquent
+            per conubia nostra, per inceptos himenaeos.
+          </p>
+          <h4>Pellentesque pretium</h4>
+          <p>
+            Donec est tellus, finibus lobortis vestibulum tincidunt, egestas id
+            nunc. Praesent interdum turpis eu libero iaculis iaculis. Sed tempor
+            pulvinar sapien, dapibus commodo orci suscipit ac. Maecenas placerat
+            felis vel nisi lobortis, quis blandit mauris accumsan. Donec
+            vehicula ipsum orci, sit amet interdum est commodo sed. Duis
+            fermentum odio ut condimentum lobortis. Pellentesque pretium quam at
+            pulvinar tristique. Class aptent taciti sociosqu ad litora torquent
+            per conubia nostra, per inceptos himenaeos.
+          </p>
+          <h2>Class aptent taciti</h2>
+          <p>
+            Donec est tellus, finibus lobortis vestibulum tincidunt, egestas id
+            nunc. Praesent interdum turpis eu libero iaculis iaculis. Sed tempor
+            pulvinar sapien, dapibus commodo orci suscipit ac. Maecenas placerat
+            felis vel nisi lobortis, quis blandit mauris accumsan. Donec
+            vehicula ipsum orci, sit amet interdum est commodo sed. Duis
+            fermentum odio ut condimentum lobortis. Pellentesque pretium quam at
+            pulvinar tristique. Class aptent taciti sociosqu ad litora torquent
+            per conubia nostra, per inceptos himenaeos.
+          </p>
+          <Figure className='align-center'>
+            <img
+              alt='Media example'
+              src='http://via.placeholder.com/256x128?text=align-center'
+              width='256'
+              height='128'
+            />
+            <Figcaption>
+              <FigcaptionInner>Lorem ipsum.</FigcaptionInner>{' '}
+              <FigureAttribution
+                author='Lorem Picsum'
+                url='https://picsum.photos/id/1002/2048/1024'
+                forwardedAs='span'
+              />
+            </Figcaption>
+          </Figure>
+          <p>
+            Donec est tellus, finibus lobortis vestibulum tincidunt, egestas id
+            nunc. Praesent interdum turpis eu libero iaculis iaculis. Sed tempor
+            pulvinar sapien, dapibus commodo orci suscipit ac. Maecenas placerat
+            felis vel nisi lobortis, quis blandit mauris accumsan. Donec
+            vehicula ipsum orci, sit amet interdum est commodo sed. Duis
+            fermentum odio ut condimentum lobortis. Pellentesque pretium quam at
+            pulvinar tristique. Class aptent taciti sociosqu ad litora torquent
+            per conubia nostra, per inceptos himenaeos.
+          </p>
+          <Figure className='align-left' as='span'>
+            <img
+              alt='Media example'
+              src='http://via.placeholder.com/256x128?text=align-left'
+              width='256'
+              height='112'
+            />
+          </Figure>
+          <p>
+            Donec est tellus, finibus lobortis vestibulum tincidunt, egestas id
+            nunc. Praesent interdum turpis eu libero iaculis iaculis. Sed tempor
+            pulvinar sapien, dapibus commodo orci suscipit ac. Maecenas placerat
+            felis vel nisi lobortis, quis blandit mauris accumsan. Donec
+            vehicula ipsum orci, sit amet interdum est commodo sed. Duis
+            fermentum odio ut condimentum lobortis. Pellentesque pretium quam at
+            pulvinar tristique. Class aptent taciti sociosqu ad litora torquent
+            per conubia nostra, per inceptos himenaeos.
+          </p>
+        </ContentBlockProse>
+      </ContentBlockPAlpha>
+
+      <ContentBlockPBeta>
+        <ContentBlockProse>
+          <h2>CB Prose Beta</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            vel tristique sapien, non suscipit lacus. Mauris vestibulum bibendum
+            sem eget pellentesque. Cras viverra urna felis, non placerat felis
+            aliquet at. Mauris aliquam malesuada libero non rutrum.
+          </p>
+          <Figure className='align-left'>
+            <img
+              alt='Media example'
+              src='http://via.placeholder.com/256x128?text=align-left'
+              width='256'
+              height='80'
+              loading='lazy'
+            />
+            <Figcaption>
+              <FigcaptionInner>Lorem ipsum.</FigcaptionInner>{' '}
+              <FigureAttribution
+                author='Lorem Picsum'
+                url='https://picsum.photos/id/1002/2048/1024'
+                forwardedAs='span'
+              />
+            </Figcaption>
+          </Figure>
+          <p>
+            Aenean pharetra suscipit nisl id tempus. In eget tellus eros. Mauris
+            dignissim odio quis sapien pulvinar, ac varius sapien consectetur.
+            Morbi scelerisque ex sit amet est tempor, nec tempus metus
+            scelerisque.
+          </p>
+          <p>
+            Donec est tellus, finibus lobortis vestibulum tincidunt, egestas id
+            nunc. Praesent interdum turpis eu libero iaculis iaculis. Sed tempor
+            pulvinar sapien, dapibus commodo orci suscipit ac. Maecenas placerat
+            felis vel nisi lobortis, quis blandit mauris accumsan. Donec
+            vehicula ipsum orci, sit amet interdum est commodo sed.
+          </p>
+          <h3>Lorem ipsum</h3>
+          <p>
+            fermentum odio ut condimentum lobortis. Pellentesque pretium quam at
+            pulvinar tristique. Class aptent taciti sociosqu ad litora torquent
+            per conubia nostra, per inceptos himenaeos.
+          </p>
+        </ContentBlockProse>
+      </ContentBlockPBeta>
+
+      <ContentBlockFAlpha>
+        <ContentBlockFigure>
+          <img
+            src='https://picsum.photos/id/1002/2048/1024'
+            alt='Generic placeholder by lorem picsum'
+            loading='lazy'
+          />
+          <Figcaption>
+            <FigcaptionInner>Figure A.</FigcaptionInner>{' '}
+            <FigureAttribution
+              author='Lorem Picsum'
+              url='https://picsum.photos/id/1002/2048/1024'
+              forwardedAs='span'
+            />
+          </Figcaption>
+        </ContentBlockFigure>
+      </ContentBlockFAlpha>
+
+      <ContentBlockFBeta>
+        <ContentBlockFigure>
+          <img
+            src='https://picsum.photos/id/1002/2048/1024'
+            alt='Generic placeholder by lorem picsum'
+          />
+          <Figcaption>
+            <FigcaptionInner>Figure A.</FigcaptionInner>{' '}
+            <FigureAttribution
+              author='Lorem Picsum'
+              url='https://picsum.photos/id/1002/2048/1024'
+              forwardedAs='span'
+            />
+          </Figcaption>
+        </ContentBlockFigure>
+      </ContentBlockFBeta>
+
+      <ContentBlockFGama>
+        <ContentBlockFigure>
+          <img
+            src='https://picsum.photos/id/1002/2048/1024'
+            alt='Generic placeholder by lorem picsum'
+            loading='lazy'
+          />
+          <Figcaption>
+            <FigcaptionInner>Figure A.</FigcaptionInner>{' '}
+            <FigureAttribution
+              author='Lorem Picsum'
+              url='https://picsum.photos/id/1002/2048/1024'
+              forwardedAs='span'
+            />
+          </Figcaption>
+        </ContentBlockFigure>
+      </ContentBlockFGama>
+
+      <ContentBlockPFAlpha>
+        <ContentBlockProse>
+          <h2>CB Prose+Figure Alpha</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            vel tristique sapien, non suscipit lacus. Mauris vestibulum bibendum
+            sem eget pellentesque. Cras viverra urna felis, non placerat felis
+            aliquet at. Mauris aliquam malesuada libero non rutrum.
+          </p>
+          <p>
+            Aenean pharetra suscipit nisl id tempus. In eget tellus eros. Mauris
+            dignissim odio quis sapien pulvinar, ac varius sapien consectetur.
+            Morbi scelerisque ex sit amet est tempor, nec tempus metus
+            scelerisque.
+          </p>
+          <p>
+            Donec est tellus, finibus lobortis vestibulum tincidunt, egestas id
+            nunc. Praesent interdum turpis eu libero iaculis iaculis. Sed tempor
+            pulvinar sapien, dapibus commodo orci suscipit ac. Maecenas placerat
+            felis vel nisi lobortis, quis blandit mauris accumsan.
+          </p>
+        </ContentBlockProse>
+        <ContentBlockFigure>
+          <img
+            src='https://picsum.photos/id/1002/2048/1620'
+            alt='Generic placeholder by lorem picsum'
+            loading='lazy'
+          />
+          <Figcaption>
+            <FigcaptionInner>Figure A.</FigcaptionInner>{' '}
+            <FigureAttribution
+              author='Lorem Picsum'
+              url='https://picsum.photos/id/1002/2048/1024'
+              forwardedAs='span'
+            />
+          </Figcaption>
+        </ContentBlockFigure>
+      </ContentBlockPFAlpha>
+
+      <ContentBlockPFBeta>
+        <ContentBlockProse>
+          <h2>CB Prose+Figure Beta</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            vel tristique sapien, non suscipit lacus. Mauris vestibulum bibendum
+            sem eget pellentesque. Cras viverra urna felis, non placerat felis
+            aliquet at. Mauris aliquam malesuada libero non rutrum.
+          </p>
+          <p>
+            Aenean pharetra suscipit nisl id tempus. In eget tellus eros. Mauris
+            dignissim odio quis sapien pulvinar, ac varius sapien consectetur.
+            Morbi scelerisque ex sit amet est tempor, nec tempus metus
+            scelerisque.
+          </p>
+          <p>
+            Donec est tellus, finibus lobortis vestibulum tincidunt, egestas id
+            nunc. Praesent interdum turpis eu libero iaculis iaculis. Sed tempor
+            pulvinar sapien, dapibus commodo orci suscipit ac. Maecenas placerat
+            felis vel nisi lobortis, quis blandit mauris accumsan.
+          </p>
+        </ContentBlockProse>
+        <ContentBlockFigure>
+          <img
+            src='https://picsum.photos/id/1002/2048/1620'
+            alt='Generic placeholder by lorem picsum'
+            loading='lazy'
+          />
+          <Figcaption>
+            <FigcaptionInner>Figure A.</FigcaptionInner>{' '}
+            <FigureAttribution
+              author='Lorem Picsum'
+              url='https://picsum.photos/id/1002/2048/1024'
+              forwardedAs='span'
+            />
+          </Figcaption>
+        </ContentBlockFigure>
+      </ContentBlockPFBeta>
+
+      <ContentBlockPFGama>
+        <ContentBlockProse>
+          <h2>CB Prose+Figure Gama</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            vel tristique sapien, non suscipit lacus. Mauris vestibulum bibendum
+            sem eget pellentesque. Cras viverra urna felis, non placerat felis
+            aliquet at. Mauris aliquam malesuada libero non rutrum.
+          </p>
+          <p>
+            Aenean pharetra suscipit nisl id tempus. In eget tellus eros. Mauris
+            dignissim odio quis sapien pulvinar, ac varius sapien consectetur.
+            Morbi scelerisque ex sit amet est tempor, nec tempus metus
+            scelerisque.
+          </p>
+        </ContentBlockProse>
+        <ContentBlockFigure>
+          <img
+            src='https://picsum.photos/id/1002/2048/1260'
+            alt='Generic placeholder by lorem picsum'
+            loading='lazy'
+          />
+          <Figcaption>
+            <FigcaptionInner>Figure A.</FigcaptionInner>{' '}
+            <FigureAttribution
+              author='Lorem Picsum'
+              url='https://picsum.photos/id/1002/2048/1024'
+              forwardedAs='span'
+            />
+          </Figcaption>
+        </ContentBlockFigure>
+      </ContentBlockPFGama>
+
+      <ContentBlockPFDelta>
+        <ContentBlockProse>
+          <h2>CB Prose+Figure Delta</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            vel tristique sapien, non suscipit lacus. Mauris vestibulum bibendum
+            sem eget pellentesque. Cras viverra urna felis, non placerat felis
+            aliquet at. Mauris aliquam malesuada libero non rutrum.
+          </p>
+          <p>
+            Aenean pharetra suscipit nisl id tempus. In eget tellus eros. Mauris
+            dignissim odio quis sapien pulvinar, ac varius sapien consectetur.
+            Morbi scelerisque ex sit amet est tempor, nec tempus metus
+            scelerisque.
+          </p>
+        </ContentBlockProse>
+        <ContentBlockFigure>
+          <img
+            src='https://picsum.photos/id/1002/2048/1260'
+            alt='Generic placeholder by lorem picsum'
+            loading='lazy'
+          />
+          <Figcaption>
+            <FigcaptionInner>Figure A.</FigcaptionInner>{' '}
+            <FigureAttribution
+              author='Lorem Picsum'
+              url='https://picsum.photos/id/1002/2048/1024'
+              forwardedAs='span'
+            />
+          </Figcaption>
+        </ContentBlockFigure>
+      </ContentBlockPFDelta>
+    </>
+  );
+}
+
+export default SandboxContentBlocks;
diff --git a/app/scripts/components/sandbox/legacy/exploration-map/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/exploration-map/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/exploration-map/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/exploration-map/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/exploration-map/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/exploration-map/index.jsx
new file mode 100644
index 000000000..62b462508
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/exploration-map/index.jsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import styled from 'styled-components';
+import Constrainer from '$styles/constrainer';
+import { PageMainContent } from '$styles/page';
+import { ExplorationMap } from '$components/exploration/components/map';
+
+const DemoExplorationMap = styled(ExplorationMap)`
+  height: 40rem;
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+  grid-column: 1 / -1;
+  height: 42rem;
+`;
+
+const mockDatasets = [
+  {
+    status: 'success',
+    data: {
+      id: 'casa-gfed-co2-flux-hr',
+      stacApiEndpoint: 'https://earth.gov/ghgcenter/api/stac',
+      tileApiEndpoint: 'https://earth.gov/ghgcenter/api/raster',
+      stacCol: 'casagfed-carbonflux-monthgrid-v3',
+      name: 'Heterotrophic Respiration (Rh)',
+      type: 'raster',
+      description:
+        'Model-estimated heterotrophic respiration (Rh), which is the flux of carbon from the soil to the atmosphere',
+      initialDatetime: 'newest',
+      projection: {
+        id: 'equirectangular'
+      },
+      basemapId: 'light',
+      zoomExtent: [0, 20],
+      sourceParams: {
+        assets: 'rh',
+        colormap_name: 'purd',
+        rescale: [0, 0.3]
+      },
+      compare: {
+        datasetId: 'casagfed-carbonflux-monthgrid-v3',
+        layerId: 'casa-gfed-co2-flux-hr'
+      },
+      legend: {
+        unit: {
+          label: 'kg Carbon/m²/mon'
+        },
+        type: 'gradient',
+        min: 0,
+        max: 0.3,
+        stops: [
+          '#F7F4F9',
+          '#E9E3F0',
+          '#D9C3DF',
+          '#CDA0CD',
+          '#D57ABA',
+          '#E34A9F',
+          '#DF2179',
+          '#C10E51',
+          '#92003F',
+          '#67001F'
+        ]
+      },
+      parentDataset: {
+        id: 'casagfed-carbonflux-monthgrid-v3',
+        name: 'CASA-GFED3 Land Carbon Flux'
+      },
+      isPeriodic: true,
+      timeDensity: 'month',
+      domain: [
+        '2017-09-30T22:00:00.000Z',
+        '2017-10-31T23:00:00.000Z',
+        '2017-11-30T23:00:00.000Z'
+      ]
+    },
+    error: null,
+    settings: {
+      isVisible: true,
+      opacity: 100,
+      analysisMetrics: [
+        {
+          id: 'mean',
+          label: 'Average',
+          chartLabel: 'Average',
+          themeColor: 'infographicB'
+        },
+        {
+          id: 'std',
+          label: 'St Deviation',
+          chartLabel: 'St Deviation',
+          themeColor: 'infographicD'
+        }
+      ]
+    },
+    analysis: {
+      status: 'idle',
+      error: null,
+      data: null,
+      meta: {}
+    }
+  }
+];
+
+const mockSelectedDay = new Date('2017-12-01T00:00:00.000Z');
+const mockSelectedCompareDay = null;
+const mockSetDatasets = () => {};
+
+function SandboxExplorationMap() {
+  return (
+    <PageMainContent>
+      <Constrainer>
+        <Wrapper>
+          <DemoExplorationMap
+            datasets={mockDatasets}
+            setDatasets={mockSetDatasets}
+            selectedDay={mockSelectedDay}
+            selectedCompareDay={mockSelectedCompareDay}
+          />
+        </Wrapper>
+      </Constrainer>
+    </PageMainContent>
+  );
+}
+
+export default SandboxExplorationMap;
diff --git a/app/scripts/components/sandbox/legacy/exploration/mock-data.js b/packages/veda-ui/src/components/sandbox/legacy/exploration/mock-data.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/exploration/mock-data.js
rename to packages/veda-ui/src/components/sandbox/legacy/exploration/mock-data.js
diff --git a/app/scripts/components/sandbox/legacy/exploration/timeline-analysis/external-layer-card.jsx b/packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/external-layer-card.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/exploration/timeline-analysis/external-layer-card.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/external-layer-card.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/external-layer-card.jsx b/packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/external-layer-card.jsx
new file mode 100644
index 000000000..fa4a73848
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/external-layer-card.jsx
@@ -0,0 +1,236 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tippy from '@tippyjs/react';
+import { useAtom } from 'jotai';
+import add from 'date-fns/add';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import sub from 'date-fns/sub';
+import {
+  useTimelineDatasetVisibility,
+  useTimelineDatasetColormap,
+  useTimelineDatasetColormapScale,
+  useTimelineDatasetAtom,
+  useTimelineDatasetsDomain
+} from '$components/exploration/atoms/hooks';
+import BaseCard from '$components/common/card/uswds-cards/base-card';
+import useParentDataset from '$components/exploration/hooks/use-parent-data';
+import { TipButton } from '$components/common/tip-button';
+import { USWDSIcon } from '$uswds';
+import { LayerGradientColormapGraphic } from '$components/common/map/layer-legend';
+import { ColormapOptions } from '$components/common/dataset-layer-card/colormap-options';
+import {
+  useAnalysisController,
+  useAnalysisDataRequest
+} from '$components/exploration/hooks/use-analysis-data-request';
+import {
+  useScaleFactors,
+  useScales
+} from '$components/exploration/hooks/scales-hooks';
+import TimelineSingle from '$components/exploration/components/timeline-single/timeline';
+import { selectedIntervalAtom } from '$components/exploration/atoms/dates';
+
+const DatasetHeadline = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding-top: 4px;
+`;
+const LegendColorMapTrigger = styled.div`
+  min-height: 46px;
+  min-width: 25px;
+  cursor: pointer;
+`;
+
+const TimelineWrapper = styled.div`
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+
+  svg {
+    display: block;
+  }
+`;
+
+const getIntervalFromDate = (selectedDay, dataDomain) => {
+  const startDate = sub(selectedDay, { months: 2 });
+  const endDate = add(selectedDay, { months: 2 });
+  // Set start and end days from the selected day, if able.
+  const [start, end] = dataDomain;
+  return {
+    start: isAfter(startDate, start) ? startDate : selectedDay,
+    end: isBefore(endDate, end) ? endDate : end
+  };
+};
+
+export default function ExternalLayerCardExample(props) {
+  const { dataset, selectedDay } = props;
+  const datasetAtom = useTimelineDatasetAtom(dataset.data.id);
+  const [isColorMapOpen, setIsColorMapOpen] = useState(false);
+  const [isVisible, setVisible] = useTimelineDatasetVisibility(datasetAtom);
+  const [colorMap, setColorMap] = useTimelineDatasetColormap(datasetAtom);
+  const [colorMapScale, setColorMapScale] =
+    useTimelineDatasetColormapScale(datasetAtom);
+  const dataDomain = useTimelineDatasetsDomain();
+
+  useEffect(() => {
+    if (dataDomain) {
+      const intervalFromDate = getIntervalFromDate(selectedDay, dataDomain);
+      setSelectedInterval(intervalFromDate);
+    }
+  }, [selectedDay, dataDomain]);
+
+  const { parentDataset } = useParentDataset({
+    datasetId: dataset.data.parentDataset.id
+  });
+
+  const datasetLegend = dataset.data.legend;
+  const showLoadingConfigurableCmapSkeleton =
+    dataset.status === 'loading' && datasetLegend?.type === 'gradient';
+
+  const showConfigurableCmap =
+    !!setColorMap &&
+    !!setColorMapScale &&
+    dataset.status === 'success' &&
+    dataset.data.type !== 'wmts' &&
+    dataset.data.type !== 'wms' &&
+    datasetLegend?.type === 'gradient' &&
+    colorMap;
+
+  const showNonConfigurableCmap =
+    !showConfigurableCmap &&
+    !showLoadingConfigurableCmapSkeleton &&
+    datasetLegend?.type === 'gradient';
+
+  const [min, max] =
+    datasetLegend?.type === 'gradient' &&
+    datasetLegend.min != null &&
+    datasetLegend.max != null
+      ? [datasetLegend.min, datasetLegend.max]
+      : dataset.data.sourceParams?.rescale || [0, 1];
+
+  const handleColorMapTriggerClick = () => {
+    setIsColorMapOpen((prev) => !prev);
+  };
+
+  ///////////// ANALYSIS /////////////
+  const [selectedInterval, setSelectedInterval] = useAtom(selectedIntervalAtom);
+
+  const { setObsolete, isAnalyzing } = useAnalysisController();
+
+  useAnalysisDataRequest({ datasetAtom });
+
+  const isAnalysisAndSuccess =
+    isAnalyzing && dataset.analysis.status == 'success';
+
+  const isDatasetSuccess = dataset.status === 'success';
+
+  const scaleFactors = useScaleFactors();
+  const { scaled: xScaled, main: xMain } = useScales();
+
+  const cardHeader = {
+    element: (
+      <h6 className='usa-card__heading font-code-sm'>{parentDataset?.name}</h6>
+    )
+  };
+
+  const cardBody = {
+    element: (
+      <DatasetHeadline>
+        <p className='font-code-3xs'>{dataset.data.name}</p>
+        <div>
+          <TipButton
+            tipContent={isVisible ? 'Hide layer' : 'Show layer'}
+            size='small'
+            fitting='skinny'
+            onPointerDownCapture={(e) => e.stopPropagation()}
+            onClick={() => setVisible((v) => !v)}
+          >
+            {isVisible ? (
+              <USWDSIcon.Visibility title='Toggle dataset visibility' />
+            ) : (
+              <USWDSIcon.VisibilityOff title='Toggle dataset visibility' />
+            )}
+          </TipButton>
+        </div>
+      </DatasetHeadline>
+    )
+  };
+
+  const cardFooter = {
+    element: (
+      <>
+        {showConfigurableCmap && (
+          <div className='display-flex flex-align-center flex-justify margin-y-1 padding-left-1 border-bottom-1px border-base-lightest radius-md'>
+            <LayerGradientColormapGraphic
+              stops={datasetLegend.stops}
+              min={min}
+              max={max}
+              colorMap={colorMap}
+            />
+            <Tippy
+              className='colormap-options'
+              content={
+                <ColormapOptions
+                  min={Number(min)}
+                  max={Number(max)}
+                  colorMap={colorMap}
+                  setColorMap={setColorMap}
+                  setColorMapScale={setColorMapScale}
+                  colorMapScale={colorMapScale}
+                />
+              }
+              appendTo={() => document.body}
+              visible={isColorMapOpen}
+              interactive={true}
+              placement='top'
+            >
+              <LegendColorMapTrigger
+                className='display-flex flex-align-center flex-justify bg-base-lightest margin-left-1 padding-05'
+                onClick={handleColorMapTriggerClick}
+              >
+                <USWDSIcon.ExpandMore />
+              </LegendColorMapTrigger>
+            </Tippy>
+          </div>
+        )}
+        {showNonConfigurableCmap && (
+          <LayerGradientColormapGraphic
+            stops={datasetLegend.stops}
+            min={min}
+            max={max}
+            colorMap={colorMap}
+          />
+        )}
+        {isDatasetSuccess && isAnalysisAndSuccess && (
+          <TimelineWrapper>
+            <TimelineSingle
+              dataset={dataset}
+              selectedDay={selectedDay}
+              setSelectedDay={() => true}
+              selectedCompareDay={null}
+              setSelectedCompareDay={() => true}
+              panelHeight={100}
+              selectedInterval={selectedInterval}
+              setSelectedInterval={setSelectedInterval}
+              dataDomain={dataDomain}
+              setObsolete={setObsolete}
+              scaleFactors={scaleFactors}
+              xScaled={xScaled}
+              xMain={xMain}
+            />
+          </TimelineWrapper>
+        )}
+      </>
+    )
+  };
+
+  const cardProps = {
+    header: cardHeader,
+    body: cardBody,
+    footer: cardFooter
+  };
+
+  return <BaseCard headerFirst={true} {...cardProps} />;
+}
diff --git a/app/scripts/components/sandbox/legacy/exploration/timeline-analysis/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/exploration/timeline-analysis/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/index.jsx
new file mode 100644
index 000000000..804154aa3
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/exploration/timeline-analysis/index.jsx
@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { useSetAtom } from 'jotai';
+import { GridContainer, Grid } from '@trussworks/react-uswds';
+import {
+  mockDatasets,
+  mockRawData,
+  mockSelectedDay,
+  mockSelectedCompareDay
+} from '../mock-data';
+import ExternalLayerCardExample from './external-layer-card';
+import { PageMainContent } from '$styles/page';
+import { ExplorationMap } from '$components/exploration/components/map';
+import { externalDatasetsAtom } from '$components/exploration/atoms/datasetLayers';
+import useTimelineDatasetAtom from '$components/exploration/hooks/use-timeline-dataset-atom';
+
+export const HugResetter = styled.div`
+  /* To escape from HUG grid */
+`;
+
+const DemoExplorationMap = styled(ExplorationMap)`
+  height: 40rem;
+`;
+
+const SandboxTimelineAnalysis = () => {
+  const setEAExternalDatasets = useSetAtom(externalDatasetsAtom);
+  setEAExternalDatasets(mockRawData);
+
+  const [timelineDatasets, setTimelineDatasets] = useTimelineDatasetAtom();
+
+  useEffect(() => {
+    // IF no data came through URL
+    if (timelineDatasets.length == 0) {
+      setTimelineDatasets([...mockDatasets]);
+    }
+  }, [timelineDatasets, setTimelineDatasets]);
+
+  return (
+    <PageMainContent>
+      <HugResetter>
+        <GridContainer id='grid-contianer'>
+          <Grid row gap={3}>
+            <Grid style={{ height: '300px' }} col={8}>
+              <DemoExplorationMap
+                datasets={timelineDatasets}
+                setDatasets={setTimelineDatasets}
+                selectedDay={mockSelectedDay}
+                selectedCompareDay={mockSelectedCompareDay}
+              />
+            </Grid>
+            <Grid col={12}>
+              <h4>External Layer Cards</h4>
+              {timelineDatasets.length > 0 &&
+                timelineDatasets.map((dataset) => (
+                  <ExternalLayerCardExample
+                    key={dataset.data.id}
+                    dataset={dataset}
+                    selectedDay={mockSelectedDay}
+                    setLayerInfo={() => {}}
+                  />
+                ))}
+            </Grid>
+          </Grid>
+        </GridContainer>
+      </HugResetter>
+    </PageMainContent>
+  );
+};
+
+export default SandboxTimelineAnalysis;
diff --git a/app/scripts/components/sandbox/legacy/hug/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/hug/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/hug/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/hug/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/hug/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/hug/index.jsx
new file mode 100644
index 000000000..e01deceef
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/hug/index.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Hug from '$styles/hug';
+
+const ColoredHug = styled(Hug)`
+  padding: 1rem 0;
+
+  ${({ c }) => `background-color: ${c}`}
+`;
+
+const Content = styled.div`
+  grid-column: 1 / -1;
+`;
+
+function SandboxUniGridder() {
+  return (
+    <ColoredHug c='#9fd2ea'>
+      <ColoredHug
+        c='#f9b057'
+        grid={{
+          smallUp: ['full-start', 'full-end'],
+          mediumUp: ['content-start', 'content-4'],
+          largeUp: ['content-2', 'content-5']
+        }}
+      >
+        <Content>
+          smallUp: full-start/full-end
+          <br />
+          mediumUp: content-start/content-4
+          <br />
+          largeUp: content-2/content-5
+        </Content>
+      </ColoredHug>
+      <ColoredHug
+        c='#d65555'
+        grid={{
+          smallUp: ['full-start', 'full-end'],
+          mediumUp: ['full-start', 'full-end'],
+          largeUp: ['content-6', 'full-end']
+        }}
+      >
+        <Content>
+          smallUp: full-start/full-end
+          <br />
+          mediumUp: full-start/full-end
+          <br />
+          largeUp: content-6/full-end
+        </Content>
+      </ColoredHug>
+      <ColoredHug c='#7ea059' grid={['full-start', 'full-end']}>
+        <Content>Always full-start/full-end</Content>
+      </ColoredHug>
+    </ColoredHug>
+  );
+}
+
+export default SandboxUniGridder;
diff --git a/app/scripts/components/sandbox/legacy/layer-info/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/layer-info/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/layer-info/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/layer-info/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/layer-info/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/layer-info/index.jsx
new file mode 100644
index 000000000..6deb8d067
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/layer-info/index.jsx
@@ -0,0 +1,60 @@
+import React, { useState, useCallback } from 'react';
+import { datasets } from 'veda';
+import LayerInfoModal from '$components/exploration/components/layer-info-modal';
+import Block from '$components/common/blocks';
+import { ContentBlockProse } from '$styles/content-block';
+
+const selectedDatasetId = 'no2';
+
+export default function SandboxMDXPage() {
+  const [revealed, setRevealed] = useState(false);
+
+  const openModal = useCallback(() => setRevealed(true), []);
+  const closeModal = useCallback(() => setRevealed(false), []);
+
+  const datasetData = datasets[selectedDatasetId]?.data;
+  const layerData = datasetData.layers[0];
+
+  const modalData = {
+    name: layerData.name,
+    info: layerData.info,
+    parentData: {
+      id: datasetData.id,
+      infoDescription: datasetData.infoDescription
+    }
+  };
+
+  return datasetData && datasetData.infoDescription && layerData.info ? (
+    <>
+      <Block>
+        <ContentBlockProse>
+          <button type='button' onClick={openModal}>
+            Open {datasetData.name} Layer Information Modal
+          </button>
+          {revealed && (
+            <LayerInfoModal
+              revealed={revealed}
+              close={closeModal}
+              layerData={modalData}
+            />
+          )}
+        </ContentBlockProse>
+      </Block>
+      <Block>
+        <ContentBlockProse>
+          <h4> Templated layer info</h4>
+          {Object.keys(layerData.info).map((key, idx, arr) => {
+            const currentValue = layerData.info[key];
+            return idx !== arr.length - 1 ? (
+              <span>{currentValue} · </span>
+            ) : (
+              <span>{currentValue} </span>
+            );
+          })}
+        </ContentBlockProse>
+      </Block>
+    </>
+  ) : (
+    <div> Cannot find dataset info from {selectedDatasetId}</div>
+  );
+}
diff --git a/app/scripts/components/sandbox/legacy/map-block/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/map-block/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/map-block/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/map-block/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/map-block/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/map-block/index.jsx
new file mode 100644
index 000000000..ad5b1de01
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/map-block/index.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import Constrainer from '$styles/constrainer';
+import { PageMainContent } from '$styles/page';
+import MapBlock from '$components/common/blocks/block-map';
+
+const DemoMap = styled(MapBlock)`
+  height: 40rem;
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+  grid-column: 1 / -1;
+  height: 42rem;
+`;
+
+function SandboxMapBlock() {
+  return (
+    <PageMainContent>
+      <Constrainer>
+        <Wrapper>
+          <DemoMap
+            datasetId='no2'
+            layerId='no2-monthly'
+            dateTime='2020-03-01'
+            compareDateTime='2018-03-01'
+            projectionId='equirectangular'
+          />
+        </Wrapper>
+      </Constrainer>
+    </PageMainContent>
+  );
+}
+
+export default SandboxMapBlock;
diff --git a/app/scripts/components/sandbox/legacy/mdx-chart/aq.csv b/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/aq.csv
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-chart/aq.csv
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-chart/aq.csv
diff --git a/app/scripts/components/sandbox/legacy/mdx-chart/chart.mdx b/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/chart.mdx
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-chart/chart.mdx
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-chart/chart.mdx
diff --git a/app/scripts/components/sandbox/legacy/mdx-chart/example.csv b/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/example.csv
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-chart/example.csv
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-chart/example.csv
diff --git a/app/scripts/components/sandbox/legacy/mdx-chart/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-chart/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-chart/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/index.jsx
new file mode 100644
index 000000000..20e82e6f7
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/index.jsx
@@ -0,0 +1,10 @@
+import React, { lazy } from 'react';
+
+const MdxContent = lazy(() => import('$components/common/mdx-content'));
+const pageLoader = () => import('./chart.mdx');
+
+function SandboxMDXPage() {
+  return <MdxContent loader={pageLoader} />;
+}
+
+export default SandboxMDXPage;
diff --git a/app/scripts/components/sandbox/legacy/mdx-chart/sample.json b/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/sample.json
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-chart/sample.json
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-chart/sample.json
diff --git a/app/scripts/components/sandbox/legacy/mdx-chart/two-column.csv b/packages/veda-ui/src/components/sandbox/legacy/mdx-chart/two-column.csv
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-chart/two-column.csv
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-chart/two-column.csv
diff --git a/app/scripts/components/sandbox/legacy/mdx-editor/index.tsx b/packages/veda-ui/src/components/sandbox/legacy/mdx-editor/index.tsx
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-editor/index.tsx
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-editor/index.tsx
diff --git a/app/scripts/components/sandbox/legacy/mdx-editor/mdx-editor.tsx b/packages/veda-ui/src/components/sandbox/legacy/mdx-editor/mdx-editor.tsx
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-editor/mdx-editor.tsx
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-editor/mdx-editor.tsx
diff --git a/app/scripts/components/sandbox/legacy/mdx-page/example.csv b/packages/veda-ui/src/components/sandbox/legacy/mdx-page/example.csv
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-page/example.csv
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-page/example.csv
diff --git a/app/scripts/components/sandbox/legacy/mdx-page/img-placeholder-5.jpg b/packages/veda-ui/src/components/sandbox/legacy/mdx-page/img-placeholder-5.jpg
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-page/img-placeholder-5.jpg
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-page/img-placeholder-5.jpg
diff --git a/app/scripts/components/sandbox/legacy/mdx-page/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/mdx-page/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-page/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-page/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/mdx-page/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/mdx-page/index.jsx
new file mode 100644
index 000000000..94dca901a
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/mdx-page/index.jsx
@@ -0,0 +1,10 @@
+import React, { lazy } from 'react';
+
+const MdxContent = lazy(() => import('$components/common/mdx-content'));
+const pageLoader = () => import('./page.mdx');
+
+function SandboxMDXPage() {
+  return <MdxContent loader={pageLoader} />;
+}
+
+export default SandboxMDXPage;
diff --git a/app/scripts/components/sandbox/legacy/mdx-page/page.mdx b/packages/veda-ui/src/components/sandbox/legacy/mdx-page/page.mdx
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-page/page.mdx
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-page/page.mdx
diff --git a/app/scripts/components/sandbox/legacy/mdx-scrollytelling/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/mdx-scrollytelling/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-scrollytelling/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-scrollytelling/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/mdx-scrollytelling/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/mdx-scrollytelling/index.jsx
new file mode 100644
index 000000000..1929b40c3
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/mdx-scrollytelling/index.jsx
@@ -0,0 +1,10 @@
+import React, { lazy } from 'react';
+
+const MdxContent = lazy(() => import('$components/common/mdx-content'));
+const pageLoader = () => import('./page.mdx');
+
+function SandboxMDXScrolly() {
+  return <MdxContent loader={pageLoader} />;
+}
+
+export default SandboxMDXScrolly;
diff --git a/app/scripts/components/sandbox/legacy/mdx-scrollytelling/page.mdx b/packages/veda-ui/src/components/sandbox/legacy/mdx-scrollytelling/page.mdx
similarity index 100%
rename from app/scripts/components/sandbox/legacy/mdx-scrollytelling/page.mdx
rename to packages/veda-ui/src/components/sandbox/legacy/mdx-scrollytelling/page.mdx
diff --git a/app/scripts/components/sandbox/legacy/request/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/request/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/request/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/request/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/request/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/request/index.jsx
new file mode 100644
index 000000000..d749bdcd5
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/request/index.jsx
@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useQueryClient } from '@tanstack/react-query';
+import { datasets } from 'veda';
+import { FormCheckable } from '@devseed-ui/form';
+import { Button } from '@devseed-ui/button';
+import { Toolbar } from '@devseed-ui/toolbar';
+
+import Constrainer from '$styles/constrainer';
+import { PageMainContent } from '$styles/page';
+
+import { requestStacDatasetsTimeseries } from '$components/analysis/results/timeseries-data';
+import { utcString2userTzDate } from '$utils/date';
+
+const Wrapper = styled.div`
+  position: relative;
+  grid-column: 1 / -1;
+`;
+
+const date = {
+  start: utcString2userTzDate('2015-01-01T00:00:00.000Z'),
+  end: utcString2userTzDate('2022-01-01T00:00:00.000Z')
+};
+
+// Must be a MultiPolygon since the api is currently crashing with a Polygon FC.
+const aoi = {
+  type: 'Feature',
+  properties: {},
+  geometry: {
+    type: 'MultiPolygon',
+    coordinates: [
+      [
+        [
+          [-180, -90],
+          [180, -90],
+          [180, 90],
+          [-180, 90],
+          [-180, -90]
+        ]
+      ]
+    ]
+  }
+};
+
+export default function SandboxRequest() {
+  const [selectedLayers, setSelectedLayers] = useState([]);
+  const [requestStatus, setRequestStatus] = useState([]);
+
+  /* eslint-disable-next-line */
+  console.log('Requets status', requestStatus);
+
+  const queryClient = useQueryClient();
+
+  const getData = (selectedLayers_) => {
+    const layers = Object.values(datasets)
+      .flatMap((d) => d.data.layers)
+      .filter((d) => selectedLayers_.includes(d.id));
+
+    setRequestStatus([]);
+    queryClient.cancelQueries(['analysis']);
+    const requester = requestStacDatasetsTimeseries({
+      date,
+      aoi,
+      layers,
+      queryClient
+    });
+
+    requester.on('data', (data, index) => {
+      setRequestStatus((dataStore) =>
+        Object.assign([], dataStore, {
+          [index]: data
+        })
+      );
+    });
+  };
+
+  return (
+    <PageMainContent>
+      <Constrainer>
+        <Wrapper>
+          {Object.values(datasets).map((d) => (
+            <ul key={d.data.id}>
+              <li>
+                <h2>{d.data.name}</h2>
+                {d.data.layers.map((l) => (
+                  <FormCheckable
+                    key={l.id}
+                    id={l.id}
+                    name={l.id}
+                    type='checkbox'
+                    checked={selectedLayers.includes(l.id)}
+                    onChange={() => {
+                      setSelectedLayers((v) => {
+                        return v.includes(l.id)
+                          ? v.filter((id) => id !== l.id)
+                          : v.concat(l.id);
+                      });
+                    }}
+                  >
+                    {l.name}
+                  </FormCheckable>
+                ))}
+              </li>
+            </ul>
+          ))}
+        </Wrapper>
+        <Wrapper>
+          <Toolbar>
+            <Button
+              variation='primary-fill'
+              onClick={() => getData(selectedLayers)}
+            >
+              Selected
+            </Button>
+            <Button
+              variation='primary-fill'
+              onClick={() => {
+                setSelectedLayers([
+                  'blue-tarp-planetscope',
+                  'no2-monthly-diff'
+                ]);
+                getData(['blue-tarp-planetscope', 'no2-monthly-diff']);
+              }}
+            >
+              No2 and Blue Tarp
+            </Button>
+            <Button
+              variation='primary-fill'
+              onClick={() => {
+                setSelectedLayers(['hls-s30-002-ej']);
+                getData(['hls-s30-002-ej']);
+              }}
+            >
+              HLS
+            </Button>
+          </Toolbar>
+        </Wrapper>
+        <Wrapper>
+          {!!requestStatus.length && (
+            <ul>
+              {requestStatus.map((l) => (
+                <li key={l.id}>
+                  <h5>{l.name}</h5>
+                  {l.status === 'errored' && (
+                    <p>Something went wrong: {l.error.message}</p>
+                  )}
+
+                  {l.status === 'loading' && (
+                    <p>
+                      {l.meta.loaded} of {l.meta.total} loaded. Wait
+                    </p>
+                  )}
+
+                  {l.status === 'succeeded' && !!l.data.length && (
+                    <p>All good. Can show data now.</p>
+                  )}
+
+                  {l.status === 'succeeded' && !l.data.length && (
+                    <p>There is no data available</p>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </Wrapper>
+      </Constrainer>
+    </PageMainContent>
+  );
+}
diff --git a/app/scripts/components/sandbox/legacy/table/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/table/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/table/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/table/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/table/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/table/index.jsx
new file mode 100644
index 000000000..4626c68a9
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/table/index.jsx
@@ -0,0 +1,10 @@
+import React, { lazy } from 'react';
+
+const MdxContent = lazy(() => import('$components/common/mdx-content'));
+const pageLoader = () => import('./table.mdx');
+
+function SandboxMDXPage() {
+  return <MdxContent loader={pageLoader} />;
+}
+
+export default SandboxMDXPage;
diff --git a/app/scripts/components/sandbox/legacy/table/table.mdx b/packages/veda-ui/src/components/sandbox/legacy/table/table.mdx
similarity index 100%
rename from app/scripts/components/sandbox/legacy/table/table.mdx
rename to packages/veda-ui/src/components/sandbox/legacy/table/table.mdx
diff --git a/app/scripts/components/sandbox/legacy/typography/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/typography/index.js
similarity index 100%
rename from app/scripts/components/sandbox/legacy/typography/index.jsx
rename to packages/veda-ui/src/components/sandbox/legacy/typography/index.js
diff --git a/packages/veda-ui/src/components/sandbox/legacy/typography/index.jsx b/packages/veda-ui/src/components/sandbox/legacy/typography/index.jsx
new file mode 100644
index 000000000..7f7f12c94
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/legacy/typography/index.jsx
@@ -0,0 +1,213 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { add, glsp, media, themeVal } from '@devseed-ui/theme-provider';
+import { Icon } from '@trussworks/react-uswds';
+
+import Constrainer from '$styles/constrainer';
+import {
+  variableGlsp,
+  variableBaseType,
+  variableProseVSpace
+} from '$styles/variable-utils';
+import { VarHeading, VarLead, VarProse } from '$styles/variable-components';
+import {
+  ProgressTickHighIcon,
+  ProgressTickMediumIcon,
+  ProgressTickLowIcon
+} from '$components/common/custom-icon';
+
+const IntroFold = styled.div`
+  position: relative;
+  padding: ${glsp(2, 0)};
+
+  ${media.mediumUp`
+    padding: ${glsp(3, 0)};
+  `}
+
+  ${media.largeUp`
+    padding: ${glsp(4, 0)};
+  `}
+`;
+
+const IntroFoldInner = styled(Constrainer)`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: ${glsp(
+    add(themeVal('layout.glspMultiplier.xsmall'), 1),
+    themeVal('layout.glspMultiplier.xsmall')
+  )};
+  max-width: ${themeVal('layout.max')};
+  margin: 0 auto;
+
+  ${media.smallUp`
+    gap: ${glsp(
+      add(themeVal('layout.glspMultiplier.small'), 1),
+      themeVal('layout.glspMultiplier.small')
+    )};
+  `}
+
+  ${media.mediumUp`
+    grid-template-columns: repeat(8, 1fr);
+    gap: ${glsp(
+      add(themeVal('layout.glspMultiplier.medium'), 1),
+      themeVal('layout.glspMultiplier.medium')
+    )};
+  `}
+
+  ${media.largeUp`
+    grid-template-columns: repeat(12, 1fr);
+    gap: ${glsp(
+      add(themeVal('layout.glspMultiplier.large'), 1),
+      themeVal('layout.glspMultiplier.large')
+    )};
+  `}
+
+  ${media.xlargeUp`
+    gap: ${glsp(
+      add(themeVal('layout.glspMultiplier.xlarge'), 1),
+      themeVal('layout.glspMultiplier.xlarge')
+    )};
+  `}
+
+  > * {
+    grid-column: 1 / -1;
+  }
+`;
+
+const IntroFoldCopy = styled.div`
+  grid-column: 1 / span 8;
+  display: flex;
+  flex-direction: column;
+  gap: ${glsp(2)};
+`;
+
+const Wrapper = styled.div`
+  font-size: ${variableBaseType('1rem')};
+
+  > * {
+    margin-bottom: ${variableProseVSpace()};
+  }
+`;
+
+const ResponsiveList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: ${variableGlsp()};
+
+  li {
+    grid-column: auto / span 3;
+    background: ${themeVal('color.primary')};
+    padding: ${variableGlsp(0.5, 1)};
+  }
+
+  div {
+    background: #fff;
+  }
+`;
+
+function SandboxType() {
+  return (
+    <IntroFold>
+      <IntroFoldInner>
+        <IntroFoldCopy>
+          <VarProse>
+            <h1>Headline</h1>
+            <VarLead>
+              Donec id rutrum elit, vel accumsan urna. Ut tincidunt cursus
+              nulla, sit amet aliquet felis. Aliquam consectetur non lacus
+              malesuada dignissim.
+            </VarLead>
+            <p>
+              Nulla fermentum odio eget lacus condimentum, sed volutpat tortor
+              pellentesque. Nulla placerat scelerisque lorem at pharetra.
+            </p>
+            <dl>
+              <dt>Phasellus</dt>
+              <dd>Ex viverra eros cursus</dd>
+              <dt>Pellentesque non nec lorem</dt>
+              <dd>Nunc tempus, mi eu suscipit</dd>
+              <dt>pellentesque, elit leo finibus</dt>
+              <dd>Lorem ipsum dolor</dd>
+            </dl>
+            <p>
+              Class aptent taciti sociosqu ad litora torquent per conubia
+              nostra, per inceptos himenaeos. Etiam risus tortor, dapibus sed
+              porttitor eu, pharetra eu eros. Donec id rutrum elit, vel accumsan
+              urna. Ut tincidunt cursus nulla, sit amet aliquet felis. Aliquam
+              consectetur non lacus malesuada dignissim.
+            </p>
+            <figure>
+              <img
+                src='https://source.unsplash.com/random/1000x400'
+                alt='Placeholder'
+              />
+              <figcaption>An image from Unsplash</figcaption>
+            </figure>
+          </VarProse>
+
+          <ResponsiveList>
+            <li>
+              <div>Box</div>
+            </li>
+            <li>
+              <div>Box2</div>
+            </li>
+            <li>
+              <div>Box3</div>
+            </li>
+            <li>
+              <div>Box4</div>
+            </li>
+          </ResponsiveList>
+
+          <VarHeading size='xxsmall'>Heading xxsmall</VarHeading>
+          <Wrapper>
+            <p>
+              Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.
+            </p>
+            <p>
+              Class aptent taciti sociosqu ad litora torquent per conubia
+              nostra, per inceptos himenaeos. Etiam risus tortor, dapibus sed
+              porttitor eu, pharetra eu eros. Donec id rutrum elit, vel accumsan
+              urna. Ut tincidunt cursus nulla, sit amet aliquet felis. Aliquam
+              consectetur non lacus malesuada dignissim.
+            </p>
+          </Wrapper>
+          <p>Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.</p>
+          <VarHeading size='xsmall'>Heading xsmall</VarHeading>
+          <p>Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.</p>
+          <VarHeading size='small'>Heading small</VarHeading>
+          <p>Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.</p>
+          <VarHeading size='medium'>Heading medium</VarHeading>
+          <p>Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.</p>
+          <VarHeading size='large'>Heading large</VarHeading>
+          <p>Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.</p>
+          <VarHeading size='xlarge'>Heading xlarge</VarHeading>
+          <p>Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.</p>
+          <VarHeading size='xxlarge'>Heading xxlarge</VarHeading>
+          <p>Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.</p>
+          <VarHeading size='jumbo'>Heading jumbo</VarHeading>
+          <p>Etiam risus tortor, dapibus sed porttitor eu, pharetra eu eros.</p>
+
+          <Wrapper>
+            <p>
+              <ProgressTickHighIcon size={3} /> Low <br />
+              <ProgressTickMediumIcon size={3} /> Medium <br />
+              <ProgressTickLowIcon size={3} /> High
+            </p>
+            <p>
+              <Icon.Verified /> Agency standard/regulatory <br />
+              <Icon.Science /> Research
+            </p>
+          </Wrapper>
+        </IntroFoldCopy>
+      </IntroFoldInner>
+    </IntroFold>
+  );
+}
+
+export default SandboxType;
diff --git a/app/scripts/components/sandbox/override/index.jsx b/packages/veda-ui/src/components/sandbox/override/index.js
similarity index 100%
rename from app/scripts/components/sandbox/override/index.jsx
rename to packages/veda-ui/src/components/sandbox/override/index.js
diff --git a/packages/veda-ui/src/components/sandbox/override/index.jsx b/packages/veda-ui/src/components/sandbox/override/index.jsx
new file mode 100644
index 000000000..460a43f92
--- /dev/null
+++ b/packages/veda-ui/src/components/sandbox/override/index.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Constrainer from '$styles/constrainer';
+import { PageMainContent } from '$styles/page';
+import { ComponentOverride } from '$components/common/page-overrides';
+import { VarProse } from '$styles/variable-components';
+
+const Wrapper = styled.div`
+  grid-column: 1 / -1;
+`;
+
+function SandboxOverride() {
+  return (
+    <PageMainContent>
+      <Constrainer>
+        <Wrapper>
+          <ComponentOverride
+            with='sandbox-override'
+            from='sandbox'
+            prop2='yet another prop'
+          >
+            <VarProse>
+              <p>
+                If you are seeing this message, the page override for{' '}
+                <code>sandbox-override</code> is not setup.
+              </p>
+              <p>
+                Create a file called <code>sandbox-override.js</code> and add
+                the correct path to the <code>veda.config.js</code> file.
+              </p>
+              <p>Something like:</p>
+              <p>
+                <code>
+                  <pre>
+                    {` // Other configuration before this.
+pageOverrides: {
+   'sandbox-override': 'path-to-file.mdx'
+}`}
+                  </pre>
+                </code>
+              </p>
+            </VarProse>
+          </ComponentOverride>
+        </Wrapper>
+      </Constrainer>
+    </PageMainContent>
+  );
+}
+
+export default SandboxOverride;
diff --git a/app/scripts/components/sandbox/pagination/index.tsx b/packages/veda-ui/src/components/sandbox/pagination/index.tsx
similarity index 100%
rename from app/scripts/components/sandbox/pagination/index.tsx
rename to packages/veda-ui/src/components/sandbox/pagination/index.tsx
diff --git a/app/scripts/components/sandbox/pagination/pagination-container.tsx b/packages/veda-ui/src/components/sandbox/pagination/pagination-container.tsx
similarity index 100%
rename from app/scripts/components/sandbox/pagination/pagination-container.tsx
rename to packages/veda-ui/src/components/sandbox/pagination/pagination-container.tsx
diff --git a/app/scripts/components/sandbox/pagination/pagination.tsx b/packages/veda-ui/src/components/sandbox/pagination/pagination.tsx
similarity index 100%
rename from app/scripts/components/sandbox/pagination/pagination.tsx
rename to packages/veda-ui/src/components/sandbox/pagination/pagination.tsx
diff --git a/app/scripts/components/sandbox/widgets/index.tsx b/packages/veda-ui/src/components/sandbox/widgets/index.tsx
similarity index 100%
rename from app/scripts/components/sandbox/widgets/index.tsx
rename to packages/veda-ui/src/components/sandbox/widgets/index.tsx
diff --git a/app/scripts/components/stories/hub/container.tsx b/packages/veda-ui/src/components/stories/hub/container.tsx
similarity index 100%
rename from app/scripts/components/stories/hub/container.tsx
rename to packages/veda-ui/src/components/stories/hub/container.tsx
diff --git a/app/scripts/components/stories/hub/hub-content.tsx b/packages/veda-ui/src/components/stories/hub/hub-content.tsx
similarity index 100%
rename from app/scripts/components/stories/hub/hub-content.tsx
rename to packages/veda-ui/src/components/stories/hub/hub-content.tsx
diff --git a/app/scripts/components/stories/single/index.tsx b/packages/veda-ui/src/components/stories/single/index.tsx
similarity index 100%
rename from app/scripts/components/stories/single/index.tsx
rename to packages/veda-ui/src/components/stories/single/index.tsx
diff --git a/app/scripts/components/uhoh/fatal-error.jsx b/packages/veda-ui/src/components/uhoh/fatal-error.js
similarity index 100%
rename from app/scripts/components/uhoh/fatal-error.jsx
rename to packages/veda-ui/src/components/uhoh/fatal-error.js
diff --git a/packages/veda-ui/src/components/uhoh/fatal-error.jsx b/packages/veda-ui/src/components/uhoh/fatal-error.jsx
new file mode 100644
index 000000000..98386e0f2
--- /dev/null
+++ b/packages/veda-ui/src/components/uhoh/fatal-error.jsx
@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+import T from 'prop-types';
+import { useLocation } from 'react-router-dom';
+import nl2br from 'react-nl2br';
+import { Icon } from '@trussworks/react-uswds';
+
+import UhOh from '.';
+import LayoutRoot, { LayoutProps } from '$components/common/layout-root';
+import { LayoutRootContextProvider } from '$context/layout-root-context-provider';
+import PageHero from '$components/common/page-hero';
+import { FoldProse } from '$components/common/fold';
+import { PageMainContent } from '$styles/page';
+
+import { makeAbsUrl } from '$utils/history';
+import { useEffectPrevious } from '$utils/use-effect-previous';
+import { HintedError, HintedErrorDisplay } from '$utils/hinted-error';
+
+export default class ErrorBoundary extends Component {
+  static getDerivedStateFromError(error) {
+    return { error: error };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+    this.clearError = this.clearError.bind(this);
+  }
+
+  clearError() {
+    this.setState({ error: null });
+  }
+
+  render() {
+    return (
+      <Child
+        error={this.state.error}
+        clearError={this.clearError}
+        {...this.props}
+      />
+    );
+  }
+}
+
+// Child component only needed to use hooks.
+function Child(props) {
+  const { children, error, clearError } = props;
+  const { pathname } = useLocation();
+
+  // If the pathname changed (because the user navigated) clear the error so the
+  // page renders again.
+  useEffectPrevious(
+    (_, mounted) => {
+      if (mounted) clearError();
+    },
+    [pathname]
+  );
+
+  // eslint-disable-next-line react/prop-types
+  if (!error) return children;
+
+  // Note (this is a chicken and egg problem)
+  // The error boundary wraps all the contexts (via Composer in main.js) to be
+  // able to capture errors that happen in them. When an error occurs those
+  // contexts are not rendered and so here we have to add the contexts needed by
+  // the elements.
+
+  if (error.resNotFound)
+    return (
+      <LayoutRootContextProvider>
+        <LayoutRoot>
+          <UhOh />
+        </LayoutRoot>
+      </LayoutRootContextProvider>
+    );
+
+  return (
+    <LayoutRootContextProvider>
+      <LayoutRoot>
+        <LayoutProps title='Something went wrong' />
+        <PageMainContent>
+          <PageHero
+            title='Something went wrong'
+            description={`We couldn't to load your content.`}
+          />
+          <FoldProse>
+            <p>
+              This is on our side and we will fix it! In the meantime you can
+              try again by refreshing the page or visit the{' '}
+              <a href={makeAbsUrl('/')} title='Visit homepage'>
+                homepage
+              </a>
+              .
+            </p>
+
+            {error instanceof HintedError ? (
+              <HintedErrorDisplay
+                title='Error details'
+                message={error.message}
+                hints={error.hints}
+              />
+            ) : (
+              <details>
+                <summary>Error details</summary>
+                <strong>{error.message}</strong>
+                <p>{nl2br(error.stack)}</p>
+              </details>
+            )}
+
+            <p>
+              <strong>
+                <a href={makeAbsUrl('/')} title='Go back to homepage'>
+                  <Icon.ArrowForward />
+                  <span>&nbsp;Go back to homepage</span>
+                </a>
+              </strong>
+            </p>
+          </FoldProse>
+        </PageMainContent>
+      </LayoutRoot>
+    </LayoutRootContextProvider>
+  );
+}
+
+Child.propTypes = {
+  children: T.node,
+  error: T.object,
+  clearError: T.func
+};
diff --git a/app/scripts/components/uhoh/index.jsx b/packages/veda-ui/src/components/uhoh/index.js
similarity index 100%
rename from app/scripts/components/uhoh/index.jsx
rename to packages/veda-ui/src/components/uhoh/index.js
diff --git a/packages/veda-ui/src/components/uhoh/index.jsx b/packages/veda-ui/src/components/uhoh/index.jsx
new file mode 100644
index 000000000..6d73a086a
--- /dev/null
+++ b/packages/veda-ui/src/components/uhoh/index.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { FoldProse } from '$components/common/fold';
+import PageHero from '$components/common/page-hero';
+import { LayoutProps } from '$components/common/layout-root';
+import { PageMainContent } from '$styles/page';
+
+export const resourceNotFound = () => {
+  const e = new Error('Resource not found');
+  e.resNotFound = true;
+  return e;
+};
+
+function UhOh() {
+  return (
+    <>
+      <LayoutProps title='Not found' />
+      <PageMainContent>
+        <PageHero title='Page not found' description={`That's a 404 error.`} />
+        <FoldProse>
+          <p>
+            We were not able to find the page you are looking for. It may have
+            been archived or removed.
+          </p>
+          <p>
+            If you think this page should be here let us know via{' '}
+            <a
+              href={`mailto:${process.env.APP_CONTACT_EMAIL}`}
+              title='Send us an email'
+            >
+              {process.env.APP_CONTACT_EMAIL}
+            </a>
+          </p>
+        </FoldProse>
+      </PageMainContent>
+    </>
+  );
+}
+
+export default UhOh;
diff --git a/app/scripts/components/user-pages/index.tsx b/packages/veda-ui/src/components/user-pages/index.tsx
similarity index 100%
rename from app/scripts/components/user-pages/index.tsx
rename to packages/veda-ui/src/components/user-pages/index.tsx
diff --git a/app/scripts/context/layout-root-context-provider.tsx b/packages/veda-ui/src/context/layout-root-context-provider.tsx
similarity index 100%
rename from app/scripts/context/layout-root-context-provider.tsx
rename to packages/veda-ui/src/context/layout-root-context-provider.tsx
diff --git a/app/scripts/context/react-query.tsx b/packages/veda-ui/src/context/react-query.tsx
similarity index 100%
rename from app/scripts/context/react-query.tsx
rename to packages/veda-ui/src/context/react-query.tsx
diff --git a/app/scripts/context/theme-provider.tsx b/packages/veda-ui/src/context/theme-provider.tsx
similarity index 100%
rename from app/scripts/context/theme-provider.tsx
rename to packages/veda-ui/src/context/theme-provider.tsx
diff --git a/app/scripts/context/veda-ui-provider.tsx b/packages/veda-ui/src/context/veda-ui-provider.tsx
similarity index 100%
rename from app/scripts/context/veda-ui-provider.tsx
rename to packages/veda-ui/src/context/veda-ui-provider.tsx
diff --git a/app/scripts/data-layer/datasets.tsx b/packages/veda-ui/src/data-layer/datasets.tsx
similarity index 100%
rename from app/scripts/data-layer/datasets.tsx
rename to packages/veda-ui/src/data-layer/datasets.tsx
diff --git a/app/scripts/instance.ts b/packages/veda-ui/src/instance.ts
similarity index 100%
rename from app/scripts/instance.ts
rename to packages/veda-ui/src/instance.ts
diff --git a/app/scripts/libs/atoms.ts b/packages/veda-ui/src/libs/atoms.ts
similarity index 100%
rename from app/scripts/libs/atoms.ts
rename to packages/veda-ui/src/libs/atoms.ts
diff --git a/app/scripts/libs/components.ts b/packages/veda-ui/src/libs/components.ts
similarity index 100%
rename from app/scripts/libs/components.ts
rename to packages/veda-ui/src/libs/components.ts
diff --git a/app/scripts/libs/enum.ts b/packages/veda-ui/src/libs/enum.ts
similarity index 100%
rename from app/scripts/libs/enum.ts
rename to packages/veda-ui/src/libs/enum.ts
diff --git a/app/scripts/libs/hooks.ts b/packages/veda-ui/src/libs/hooks.ts
similarity index 100%
rename from app/scripts/libs/hooks.ts
rename to packages/veda-ui/src/libs/hooks.ts
diff --git a/app/scripts/libs/index.ts b/packages/veda-ui/src/libs/index.ts
similarity index 100%
rename from app/scripts/libs/index.ts
rename to packages/veda-ui/src/libs/index.ts
diff --git a/app/scripts/libs/mdx-components.ts b/packages/veda-ui/src/libs/mdx-components.ts
similarity index 100%
rename from app/scripts/libs/mdx-components.ts
rename to packages/veda-ui/src/libs/mdx-components.ts
diff --git a/app/scripts/libs/page-components.ts b/packages/veda-ui/src/libs/page-components.ts
similarity index 100%
rename from app/scripts/libs/page-components.ts
rename to packages/veda-ui/src/libs/page-components.ts
diff --git a/app/scripts/libs/types.ts b/packages/veda-ui/src/libs/types.ts
similarity index 100%
rename from app/scripts/libs/types.ts
rename to packages/veda-ui/src/libs/types.ts
diff --git a/app/scripts/libs/uswds-components.ts b/packages/veda-ui/src/libs/uswds-components.ts
similarity index 100%
rename from app/scripts/libs/uswds-components.ts
rename to packages/veda-ui/src/libs/uswds-components.ts
diff --git a/app/scripts/main.tsx b/packages/veda-ui/src/main.tsx
similarity index 100%
rename from app/scripts/main.tsx
rename to packages/veda-ui/src/main.tsx
diff --git a/app/scripts/redirects.tsx b/packages/veda-ui/src/redirects.tsx
similarity index 100%
rename from app/scripts/redirects.tsx
rename to packages/veda-ui/src/redirects.tsx
diff --git a/app/scripts/styles/_uswds-theme.scss b/packages/veda-ui/src/styles/_uswds-theme.scss
similarity index 100%
rename from app/scripts/styles/_uswds-theme.scss
rename to packages/veda-ui/src/styles/_uswds-theme.scss
diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/packages/veda-ui/src/styles/_veda-ui-theme-vars.scss
similarity index 100%
rename from app/scripts/styles/_veda-ui-theme-vars.scss
rename to packages/veda-ui/src/styles/_veda-ui-theme-vars.scss
diff --git a/app/scripts/styles/browser-frame.tsx b/packages/veda-ui/src/styles/browser-frame.tsx
similarity index 100%
rename from app/scripts/styles/browser-frame.tsx
rename to packages/veda-ui/src/styles/browser-frame.tsx
diff --git a/app/scripts/styles/constrainer.ts b/packages/veda-ui/src/styles/constrainer.ts
similarity index 100%
rename from app/scripts/styles/constrainer.ts
rename to packages/veda-ui/src/styles/constrainer.ts
diff --git a/app/scripts/styles/content-block.js b/packages/veda-ui/src/styles/content-block.js
similarity index 100%
rename from app/scripts/styles/content-block.js
rename to packages/veda-ui/src/styles/content-block.js
diff --git a/app/scripts/styles/continuum/continuum-scroll-indicator.tsx b/packages/veda-ui/src/styles/continuum/continuum-scroll-indicator.tsx
similarity index 100%
rename from app/scripts/styles/continuum/continuum-scroll-indicator.tsx
rename to packages/veda-ui/src/styles/continuum/continuum-scroll-indicator.tsx
diff --git a/app/scripts/styles/continuum/index.tsx b/packages/veda-ui/src/styles/continuum/index.tsx
similarity index 100%
rename from app/scripts/styles/continuum/index.tsx
rename to packages/veda-ui/src/styles/continuum/index.tsx
diff --git a/app/scripts/styles/continuum/use-react-indiana-scroll-controls.ts b/packages/veda-ui/src/styles/continuum/use-react-indiana-scroll-controls.ts
similarity index 100%
rename from app/scripts/styles/continuum/use-react-indiana-scroll-controls.ts
rename to packages/veda-ui/src/styles/continuum/use-react-indiana-scroll-controls.ts
diff --git a/app/scripts/styles/continuum/utils.ts b/packages/veda-ui/src/styles/continuum/utils.ts
similarity index 100%
rename from app/scripts/styles/continuum/utils.ts
rename to packages/veda-ui/src/styles/continuum/utils.ts
diff --git a/app/scripts/styles/drop-menu-item-button.tsx b/packages/veda-ui/src/styles/drop-menu-item-button.tsx
similarity index 100%
rename from app/scripts/styles/drop-menu-item-button.tsx
rename to packages/veda-ui/src/styles/drop-menu-item-button.tsx
diff --git a/app/scripts/styles/fieldset.js b/packages/veda-ui/src/styles/fieldset.js
similarity index 100%
rename from app/scripts/styles/fieldset.js
rename to packages/veda-ui/src/styles/fieldset.js
diff --git a/app/scripts/styles/grid.js b/packages/veda-ui/src/styles/grid.js
similarity index 100%
rename from app/scripts/styles/grid.js
rename to packages/veda-ui/src/styles/grid.js
diff --git a/app/scripts/styles/hug/README.md b/packages/veda-ui/src/styles/hug/README.md
similarity index 100%
rename from app/scripts/styles/hug/README.md
rename to packages/veda-ui/src/styles/hug/README.md
diff --git a/app/scripts/styles/hug/index.ts b/packages/veda-ui/src/styles/hug/index.ts
similarity index 100%
rename from app/scripts/styles/hug/index.ts
rename to packages/veda-ui/src/styles/hug/index.ts
diff --git a/app/scripts/styles/hug/media/auto-place-error.png b/packages/veda-ui/src/styles/hug/media/auto-place-error.png
similarity index 100%
rename from app/scripts/styles/hug/media/auto-place-error.png
rename to packages/veda-ui/src/styles/hug/media/auto-place-error.png
diff --git a/app/scripts/styles/hug/media/auto-place-fix.png b/packages/veda-ui/src/styles/hug/media/auto-place-fix.png
similarity index 100%
rename from app/scripts/styles/hug/media/auto-place-fix.png
rename to packages/veda-ui/src/styles/hug/media/auto-place-fix.png
diff --git a/app/scripts/styles/hug/media/auto-place.png b/packages/veda-ui/src/styles/hug/media/auto-place.png
similarity index 100%
rename from app/scripts/styles/hug/media/auto-place.png
rename to packages/veda-ui/src/styles/hug/media/auto-place.png
diff --git a/app/scripts/styles/hug/media/components.png b/packages/veda-ui/src/styles/hug/media/components.png
similarity index 100%
rename from app/scripts/styles/hug/media/components.png
rename to packages/veda-ui/src/styles/hug/media/components.png
diff --git a/app/scripts/styles/hug/media/grid.png b/packages/veda-ui/src/styles/hug/media/grid.png
similarity index 100%
rename from app/scripts/styles/hug/media/grid.png
rename to packages/veda-ui/src/styles/hug/media/grid.png
diff --git a/app/scripts/styles/hug/media/nested.png b/packages/veda-ui/src/styles/hug/media/nested.png
similarity index 100%
rename from app/scripts/styles/hug/media/nested.png
rename to packages/veda-ui/src/styles/hug/media/nested.png
diff --git a/app/scripts/styles/hug/media/ug-responsive.mp4 b/packages/veda-ui/src/styles/hug/media/ug-responsive.mp4
similarity index 100%
rename from app/scripts/styles/hug/media/ug-responsive.mp4
rename to packages/veda-ui/src/styles/hug/media/ug-responsive.mp4
diff --git a/app/scripts/styles/icon-data-uris.ts b/packages/veda-ui/src/styles/icon-data-uris.ts
similarity index 100%
rename from app/scripts/styles/icon-data-uris.ts
rename to packages/veda-ui/src/styles/icon-data-uris.ts
diff --git a/app/scripts/styles/infographics.js b/packages/veda-ui/src/styles/infographics.js
similarity index 100%
rename from app/scripts/styles/infographics.js
rename to packages/veda-ui/src/styles/infographics.js
diff --git a/app/scripts/styles/legacy-global-styles.js b/packages/veda-ui/src/styles/legacy-global-styles.js
similarity index 100%
rename from app/scripts/styles/legacy-global-styles.js
rename to packages/veda-ui/src/styles/legacy-global-styles.js
diff --git a/app/scripts/styles/menu-link.js b/packages/veda-ui/src/styles/menu-link.js
similarity index 100%
rename from app/scripts/styles/menu-link.js
rename to packages/veda-ui/src/styles/menu-link.js
diff --git a/app/scripts/styles/page.js b/packages/veda-ui/src/styles/page.js
similarity index 100%
rename from app/scripts/styles/page.js
rename to packages/veda-ui/src/styles/page.js
diff --git a/app/scripts/styles/panel.tsx b/packages/veda-ui/src/styles/panel.tsx
similarity index 100%
rename from app/scripts/styles/panel.tsx
rename to packages/veda-ui/src/styles/panel.tsx
diff --git a/app/scripts/styles/pill.tsx b/packages/veda-ui/src/styles/pill.tsx
similarity index 100%
rename from app/scripts/styles/pill.tsx
rename to packages/veda-ui/src/styles/pill.tsx
diff --git a/app/scripts/styles/range-slider.tsx b/packages/veda-ui/src/styles/range-slider.tsx
similarity index 100%
rename from app/scripts/styles/range-slider.tsx
rename to packages/veda-ui/src/styles/range-slider.tsx
diff --git a/app/scripts/styles/shortcut-code.ts b/packages/veda-ui/src/styles/shortcut-code.ts
similarity index 100%
rename from app/scripts/styles/shortcut-code.ts
rename to packages/veda-ui/src/styles/shortcut-code.ts
diff --git a/app/scripts/styles/styles.scss b/packages/veda-ui/src/styles/styles.scss
similarity index 100%
rename from app/scripts/styles/styles.scss
rename to packages/veda-ui/src/styles/styles.scss
diff --git a/app/scripts/styles/theme.ts b/packages/veda-ui/src/styles/theme.ts
similarity index 100%
rename from app/scripts/styles/theme.ts
rename to packages/veda-ui/src/styles/theme.ts
diff --git a/app/scripts/styles/variable-components.ts b/packages/veda-ui/src/styles/variable-components.ts
similarity index 100%
rename from app/scripts/styles/variable-components.ts
rename to packages/veda-ui/src/styles/variable-components.ts
diff --git a/app/scripts/styles/variable-utils.ts b/packages/veda-ui/src/styles/variable-utils.ts
similarity index 100%
rename from app/scripts/styles/variable-utils.ts
rename to packages/veda-ui/src/styles/variable-utils.ts
diff --git a/app/scripts/styles/veda-components.scss b/packages/veda-ui/src/styles/veda-components.scss
similarity index 100%
rename from app/scripts/styles/veda-components.scss
rename to packages/veda-ui/src/styles/veda-components.scss
diff --git a/app/scripts/styles/veda-styles.scss b/packages/veda-ui/src/styles/veda-styles.scss
similarity index 100%
rename from app/scripts/styles/veda-styles.scss
rename to packages/veda-ui/src/styles/veda-styles.scss
diff --git a/app/scripts/types/aliases.ts b/packages/veda-ui/src/types/aliases.ts
similarity index 100%
rename from app/scripts/types/aliases.ts
rename to packages/veda-ui/src/types/aliases.ts
diff --git a/app/scripts/types/array.d.ts b/packages/veda-ui/src/types/array.d.ts
similarity index 100%
rename from app/scripts/types/array.d.ts
rename to packages/veda-ui/src/types/array.d.ts
diff --git a/app/scripts/types/veda.ts b/packages/veda-ui/src/types/veda.ts
similarity index 100%
rename from app/scripts/types/veda.ts
rename to packages/veda-ui/src/types/veda.ts
diff --git a/app/scripts/uswds/accordion.tsx b/packages/veda-ui/src/uswds/accordion.tsx
similarity index 100%
rename from app/scripts/uswds/accordion.tsx
rename to packages/veda-ui/src/uswds/accordion.tsx
diff --git a/app/scripts/uswds/alert.tsx b/packages/veda-ui/src/uswds/alert.tsx
similarity index 100%
rename from app/scripts/uswds/alert.tsx
rename to packages/veda-ui/src/uswds/alert.tsx
diff --git a/app/scripts/uswds/banner.tsx b/packages/veda-ui/src/uswds/banner.tsx
similarity index 100%
rename from app/scripts/uswds/banner.tsx
rename to packages/veda-ui/src/uswds/banner.tsx
diff --git a/app/scripts/uswds/button.tsx b/packages/veda-ui/src/uswds/button.tsx
similarity index 100%
rename from app/scripts/uswds/button.tsx
rename to packages/veda-ui/src/uswds/button.tsx
diff --git a/app/scripts/uswds/card.tsx b/packages/veda-ui/src/uswds/card.tsx
similarity index 100%
rename from app/scripts/uswds/card.tsx
rename to packages/veda-ui/src/uswds/card.tsx
diff --git a/app/scripts/uswds/checkbox.tsx b/packages/veda-ui/src/uswds/checkbox.tsx
similarity index 100%
rename from app/scripts/uswds/checkbox.tsx
rename to packages/veda-ui/src/uswds/checkbox.tsx
diff --git a/app/scripts/uswds/extended-nav.tsx b/packages/veda-ui/src/uswds/extended-nav.tsx
similarity index 100%
rename from app/scripts/uswds/extended-nav.tsx
rename to packages/veda-ui/src/uswds/extended-nav.tsx
diff --git a/app/scripts/uswds/footer.tsx b/packages/veda-ui/src/uswds/footer.tsx
similarity index 100%
rename from app/scripts/uswds/footer.tsx
rename to packages/veda-ui/src/uswds/footer.tsx
diff --git a/app/scripts/uswds/grid.tsx b/packages/veda-ui/src/uswds/grid.tsx
similarity index 100%
rename from app/scripts/uswds/grid.tsx
rename to packages/veda-ui/src/uswds/grid.tsx
diff --git a/app/scripts/uswds/header.tsx b/packages/veda-ui/src/uswds/header.tsx
similarity index 100%
rename from app/scripts/uswds/header.tsx
rename to packages/veda-ui/src/uswds/header.tsx
diff --git a/app/scripts/uswds/icon.tsx b/packages/veda-ui/src/uswds/icon.tsx
similarity index 100%
rename from app/scripts/uswds/icon.tsx
rename to packages/veda-ui/src/uswds/icon.tsx
diff --git a/app/scripts/uswds/index.tsx b/packages/veda-ui/src/uswds/index.tsx
similarity index 100%
rename from app/scripts/uswds/index.tsx
rename to packages/veda-ui/src/uswds/index.tsx
diff --git a/app/scripts/uswds/input.tsx b/packages/veda-ui/src/uswds/input.tsx
similarity index 100%
rename from app/scripts/uswds/input.tsx
rename to packages/veda-ui/src/uswds/input.tsx
diff --git a/app/scripts/uswds/link.tsx b/packages/veda-ui/src/uswds/link.tsx
similarity index 100%
rename from app/scripts/uswds/link.tsx
rename to packages/veda-ui/src/uswds/link.tsx
diff --git a/app/scripts/uswds/menu.tsx b/packages/veda-ui/src/uswds/menu.tsx
similarity index 100%
rename from app/scripts/uswds/menu.tsx
rename to packages/veda-ui/src/uswds/menu.tsx
diff --git a/app/scripts/uswds/nav-drop-down-button.tsx b/packages/veda-ui/src/uswds/nav-drop-down-button.tsx
similarity index 100%
rename from app/scripts/uswds/nav-drop-down-button.tsx
rename to packages/veda-ui/src/uswds/nav-drop-down-button.tsx
diff --git a/app/scripts/uswds/nav-menu-button.tsx b/packages/veda-ui/src/uswds/nav-menu-button.tsx
similarity index 100%
rename from app/scripts/uswds/nav-menu-button.tsx
rename to packages/veda-ui/src/uswds/nav-menu-button.tsx
diff --git a/app/scripts/uswds/pagination.tsx b/packages/veda-ui/src/uswds/pagination.tsx
similarity index 100%
rename from app/scripts/uswds/pagination.tsx
rename to packages/veda-ui/src/uswds/pagination.tsx
diff --git a/app/scripts/uswds/search.tsx b/packages/veda-ui/src/uswds/search.tsx
similarity index 100%
rename from app/scripts/uswds/search.tsx
rename to packages/veda-ui/src/uswds/search.tsx
diff --git a/app/scripts/uswds/select.tsx b/packages/veda-ui/src/uswds/select.tsx
similarity index 100%
rename from app/scripts/uswds/select.tsx
rename to packages/veda-ui/src/uswds/select.tsx
diff --git a/app/scripts/uswds/site-alert.tsx b/packages/veda-ui/src/uswds/site-alert.tsx
similarity index 100%
rename from app/scripts/uswds/site-alert.tsx
rename to packages/veda-ui/src/uswds/site-alert.tsx
diff --git a/app/scripts/uswds/tag.tsx b/packages/veda-ui/src/uswds/tag.tsx
similarity index 100%
rename from app/scripts/uswds/tag.tsx
rename to packages/veda-ui/src/uswds/tag.tsx
diff --git a/app/scripts/utils/antimeridian.test.ts b/packages/veda-ui/src/utils/antimeridian.test.ts
similarity index 100%
rename from app/scripts/utils/antimeridian.test.ts
rename to packages/veda-ui/src/utils/antimeridian.test.ts
diff --git a/app/scripts/utils/antimeridian.ts b/packages/veda-ui/src/utils/antimeridian.ts
similarity index 100%
rename from app/scripts/utils/antimeridian.ts
rename to packages/veda-ui/src/utils/antimeridian.ts
diff --git a/app/scripts/utils/data-utils.ts b/packages/veda-ui/src/utils/data-utils.ts
similarity index 100%
rename from app/scripts/utils/data-utils.ts
rename to packages/veda-ui/src/utils/data-utils.ts
diff --git a/app/scripts/utils/date.ts b/packages/veda-ui/src/utils/date.ts
similarity index 100%
rename from app/scripts/utils/date.ts
rename to packages/veda-ui/src/utils/date.ts
diff --git a/app/scripts/utils/deprecation-warning.ts b/packages/veda-ui/src/utils/deprecation-warning.ts
similarity index 100%
rename from app/scripts/utils/deprecation-warning.ts
rename to packages/veda-ui/src/utils/deprecation-warning.ts
diff --git a/app/scripts/utils/format.ts b/packages/veda-ui/src/utils/format.ts
similarity index 100%
rename from app/scripts/utils/format.ts
rename to packages/veda-ui/src/utils/format.ts
diff --git a/app/scripts/utils/hinted-error.tsx b/packages/veda-ui/src/utils/hinted-error.tsx
similarity index 100%
rename from app/scripts/utils/hinted-error.tsx
rename to packages/veda-ui/src/utils/hinted-error.tsx
diff --git a/app/scripts/utils/history.ts b/packages/veda-ui/src/utils/history.ts
similarity index 100%
rename from app/scripts/utils/history.ts
rename to packages/veda-ui/src/utils/history.ts
diff --git a/app/scripts/utils/params-location-atom/atom-with-url-value-stability.ts b/packages/veda-ui/src/utils/params-location-atom/atom-with-url-value-stability.ts
similarity index 100%
rename from app/scripts/utils/params-location-atom/atom-with-url-value-stability.ts
rename to packages/veda-ui/src/utils/params-location-atom/atom-with-url-value-stability.ts
diff --git a/app/scripts/utils/params-location-atom/url.ts b/packages/veda-ui/src/utils/params-location-atom/url.ts
similarity index 100%
rename from app/scripts/utils/params-location-atom/url.ts
rename to packages/veda-ui/src/utils/params-location-atom/url.ts
diff --git a/app/scripts/utils/pluralize.tsx b/packages/veda-ui/src/utils/pluralize.tsx
similarity index 100%
rename from app/scripts/utils/pluralize.tsx
rename to packages/veda-ui/src/utils/pluralize.tsx
diff --git a/app/scripts/utils/polygon-url.ts b/packages/veda-ui/src/utils/polygon-url.ts
similarity index 100%
rename from app/scripts/utils/polygon-url.ts
rename to packages/veda-ui/src/utils/polygon-url.ts
diff --git a/app/scripts/utils/routes.ts b/packages/veda-ui/src/utils/routes.ts
similarity index 100%
rename from app/scripts/utils/routes.ts
rename to packages/veda-ui/src/utils/routes.ts
diff --git a/app/scripts/utils/status.ts b/packages/veda-ui/src/utils/status.ts
similarity index 100%
rename from app/scripts/utils/status.ts
rename to packages/veda-ui/src/utils/status.ts
diff --git a/app/scripts/utils/url.ts b/packages/veda-ui/src/utils/url.ts
similarity index 100%
rename from app/scripts/utils/url.ts
rename to packages/veda-ui/src/utils/url.ts
diff --git a/app/scripts/utils/use-async-error.ts b/packages/veda-ui/src/utils/use-async-error.ts
similarity index 100%
rename from app/scripts/utils/use-async-error.ts
rename to packages/veda-ui/src/utils/use-async-error.ts
diff --git a/app/scripts/utils/use-click-outside.ts b/packages/veda-ui/src/utils/use-click-outside.ts
similarity index 100%
rename from app/scripts/utils/use-click-outside.ts
rename to packages/veda-ui/src/utils/use-click-outside.ts
diff --git a/app/scripts/utils/use-display.tsx b/packages/veda-ui/src/utils/use-display.tsx
similarity index 100%
rename from app/scripts/utils/use-display.tsx
rename to packages/veda-ui/src/utils/use-display.tsx
diff --git a/app/scripts/utils/use-effect-previous.ts b/packages/veda-ui/src/utils/use-effect-previous.ts
similarity index 100%
rename from app/scripts/utils/use-effect-previous.ts
rename to packages/veda-ui/src/utils/use-effect-previous.ts
diff --git a/app/scripts/utils/use-google-tag-manager.ts b/packages/veda-ui/src/utils/use-google-tag-manager.ts
similarity index 100%
rename from app/scripts/utils/use-google-tag-manager.ts
rename to packages/veda-ui/src/utils/use-google-tag-manager.ts
diff --git a/app/scripts/utils/use-load-file.ts b/packages/veda-ui/src/utils/use-load-file.ts
similarity index 100%
rename from app/scripts/utils/use-load-file.ts
rename to packages/veda-ui/src/utils/use-load-file.ts
diff --git a/app/scripts/utils/use-media-query.ts b/packages/veda-ui/src/utils/use-media-query.ts
similarity index 100%
rename from app/scripts/utils/use-media-query.ts
rename to packages/veda-ui/src/utils/use-media-query.ts
diff --git a/app/scripts/utils/use-pathname.ts b/packages/veda-ui/src/utils/use-pathname.ts
similarity index 100%
rename from app/scripts/utils/use-pathname.ts
rename to packages/veda-ui/src/utils/use-pathname.ts
diff --git a/app/scripts/utils/use-prefers-reduced-motion.ts b/packages/veda-ui/src/utils/use-prefers-reduced-motion.ts
similarity index 100%
rename from app/scripts/utils/use-prefers-reduced-motion.ts
rename to packages/veda-ui/src/utils/use-prefers-reduced-motion.ts
diff --git a/app/scripts/utils/use-resize-observer.ts b/packages/veda-ui/src/utils/use-resize-observer.ts
similarity index 100%
rename from app/scripts/utils/use-resize-observer.ts
rename to packages/veda-ui/src/utils/use-resize-observer.ts
diff --git a/app/scripts/utils/use-safe-state.ts b/packages/veda-ui/src/utils/use-safe-state.ts
similarity index 100%
rename from app/scripts/utils/use-safe-state.ts
rename to packages/veda-ui/src/utils/use-safe-state.ts
diff --git a/app/scripts/utils/use-scrollbar-width-css.ts b/packages/veda-ui/src/utils/use-scrollbar-width-css.ts
similarity index 100%
rename from app/scripts/utils/use-scrollbar-width-css.ts
rename to packages/veda-ui/src/utils/use-scrollbar-width-css.ts
diff --git a/app/scripts/utils/use-sliding-sticky-header.ts b/packages/veda-ui/src/utils/use-sliding-sticky-header.ts
similarity index 100%
rename from app/scripts/utils/use-sliding-sticky-header.ts
rename to packages/veda-ui/src/utils/use-sliding-sticky-header.ts
diff --git a/app/scripts/utils/utils.test.ts b/packages/veda-ui/src/utils/utils.test.ts
similarity index 100%
rename from app/scripts/utils/utils.test.ts
rename to packages/veda-ui/src/utils/utils.test.ts
diff --git a/app/scripts/utils/utils.ts b/packages/veda-ui/src/utils/utils.ts
similarity index 100%
rename from app/scripts/utils/utils.ts
rename to packages/veda-ui/src/utils/utils.ts
diff --git a/app/scripts/utils/veda-data/index.ts b/packages/veda-ui/src/utils/veda-data/index.ts
similarity index 100%
rename from app/scripts/utils/veda-data/index.ts
rename to packages/veda-ui/src/utils/veda-data/index.ts
diff --git a/app/scripts/utils/veda-data/mdx.ts b/packages/veda-ui/src/utils/veda-data/mdx.ts
similarity index 100%
rename from app/scripts/utils/veda-data/mdx.ts
rename to packages/veda-ui/src/utils/veda-data/mdx.ts
diff --git a/app/scripts/utils/veda-data/taxonomies.ts b/packages/veda-ui/src/utils/veda-data/taxonomies.ts
similarity index 100%
rename from app/scripts/utils/veda-data/taxonomies.ts
rename to packages/veda-ui/src/utils/veda-data/taxonomies.ts
diff --git a/storybook/src/stories/library-components/icons.stories.tsx b/storybook/src/stories/library-components/icons.stories.tsx
index 29ae073ad..faeab7370 100644
--- a/storybook/src/stories/library-components/icons.stories.tsx
+++ b/storybook/src/stories/library-components/icons.stories.tsx
@@ -460,7 +460,7 @@ export const YourIcon = makeUSWDSIcon(YourIconComponent);`}
             }}
           >
             Create icon file in{' '}
-            <Code>app/scripts/components/common/custom-icon/</Code>
+            <Code>packages/veda-ui/src/components/common/custom-icon/</Code>
           </li>
           <li
             style={{
diff --git a/storybook/src/styles/uswds.scss b/storybook/src/styles/uswds.scss
index c22bea5e0..7dea772a8 100644
--- a/storybook/src/styles/uswds.scss
+++ b/storybook/src/styles/uswds.scss
@@ -1,5 +1,5 @@
 // Storybook USWDS compilation with same theme config as main app
-// Replicates configuration from app/scripts/styles/_uswds-theme.scss
+// Replicates configuration from packages/veda-ui/src/styles/_uswds-theme.scss
 
 @use '@uswds/uswds/scss/uswds' as * with (
   $theme-image-path: '/node_modules/@uswds/uswds/dist/img',
diff --git a/storybook/vite.config.ts b/storybook/vite.config.ts
index 09e1fc591..f17a69e51 100644
--- a/storybook/vite.config.ts
+++ b/storybook/vite.config.ts
@@ -26,11 +26,14 @@ export default defineConfig(({ mode }) => {
     resolve: {
       alias: {
         // Application path aliases
-        $uswds: path.resolve(__dirname, '../app/scripts/uswds'),
-        $components: path.resolve(__dirname, '../app/scripts/components'),
-        $context: path.resolve(__dirname, '../app/scripts/context'),
-        $utils: path.resolve(__dirname, '../app/scripts/utils'),
-        $styles: path.resolve(__dirname, '../app/scripts/styles')
+        $uswds: path.resolve(__dirname, '../packages/veda-ui/src/uswds'),
+        $components: path.resolve(
+          __dirname,
+          '../packages/veda-ui/src/components'
+        ),
+        $context: path.resolve(__dirname, '../packages/veda-ui/src/context'),
+        $utils: path.resolve(__dirname, '../packages/veda-ui/src/utils'),
+        $styles: path.resolve(__dirname, '../packages/veda-ui/src/styles')
       }
     },
     define: {
diff --git a/tsconfig.json b/tsconfig.json
index e95665a29..a6c912d30 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,13 +9,16 @@
     "baseUrl": "./",
     "jsx": "react",
     "paths": {
-      "$components/*": ["app/scripts/components/*"],
-      "$styles/*": ["app/scripts/styles/*"],
-      "$utils/*": ["app/scripts/utils/*"],
-      "$types/*": ["app/scripts/types/*"],
-      "$context/*": ["app/scripts/context/*"],
-      "$data-layer/*": ["app/scripts/data-layer/*"],
-      "$uswds": ["app/scripts/uswds/"],
+      "$components/*": ["packages/veda-ui/src/components/*"],
+      "$styles/*": ["packages/veda-ui/src/styles/*"],
+      "$utils/*": ["packages/veda-ui/src/utils/*"],
+      "$types/*": ["packages/veda-ui/src/types/*"],
+      "$context/*": ["packages/veda-ui/src/context/*"],
+      "$data-layer/*": ["packages/veda-ui/src/data-layer/*"],
+      "$uswds": ["packages/veda-ui/src/uswds/"],
+      "$graphics/*": ["packages/veda-ui/graphics/*"],
+      "$test/*": ["test/*"],
+      "$mock/*": ["mock/*"],
       "$storybook": ["storybook/*"]
     }
   },
diff --git a/utils/link-next.sh b/utils/link-next.sh
index 2429bdfef..f7110f4fa 100755
--- a/utils/link-next.sh
+++ b/utils/link-next.sh
@@ -76,7 +76,7 @@ rm -rf "$NEXT_DIR/.next"
 
 echo -e "${GREEN}Watching for changes in veda-ui and rebuilding...${NC}"
 cd "$VEDA_UI_DIR"
-./node_modules/.bin/chokidar "app/scripts/**/*" -c "yarn buildlib" --initial &
+./node_modules/.bin/chokidar "packages/veda-ui/src/**/*" -c "yarn buildlib" --initial &
 WATCH_PID=$!
 
 echo -e "${GREEN}Link setup complete. Verifying...${NC}"