diff --git a/Makefile b/Makefile
index 629cbdf56..eb7f37705 100644
--- a/Makefile
+++ b/Makefile
@@ -22,9 +22,9 @@ unlink:
 
 .PHONY: lint
 lint:
-	npm --prefix es-ds-styles run lint
-	npm --prefix es-ds-components run lint
-	npm --prefix es-ds-docs run lint
+	npm --prefix es-ds-styles run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }
+	npm --prefix es-ds-components run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }
+	npm --prefix es-ds-docs run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }
 
 .PHONY: format
 format:
diff --git a/es-ds-components/components/es-footer.vue b/es-ds-components/components/es-footer.vue
new file mode 100644
index 000000000..5620d1a0f
--- /dev/null
+++ b/es-ds-components/components/es-footer.vue
@@ -0,0 +1,163 @@
+<script lang="js">
+import IconFacebook from './icon/facebook.vue';
+import IconInstagram from './icon/instagram.vue';
+import IconLinkedin from './icon/linkedin.vue';
+import IconTwitter from './icon/twitter.vue';
+import IconYoutube from './icon/youtube.vue';
+
+export default {
+    name: 'EsFooter',
+    components: {
+        IconFacebook,
+        IconInstagram,
+        IconLinkedin,
+        IconTwitter,
+        IconYoutube,
+    },
+    props: {
+        content: {
+            type: Object,
+            required: true,
+        },
+    },
+    computed: {
+        copyrightText() {
+            return this.content.copyrightText.replace('{currentYear}', new Date().getFullYear());
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="es-footer clearfix">
+        <!-- Make an impact -->
+        <div class="bg-blue-900 text-white py-200 py-lg-300 px-200">
+            <div class="container px-0">
+                <div class="row">
+                    <div
+                        class="col col-12 col-md-5 col-lg-4 font-size-200 font-size-md-400 font-weight-bold mb-150 mb-md-0">
+                        {{ content.banner.headline }}
+                        <br />
+                        {{ content.banner.subHeadline }}
+                    </div>
+                    <div class="col col-12 col-md-7 col-lg-8">
+                        {{ content.banner.body }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Make an impact -->
+        <div class="bg-blue-800 py-200 pt-lg-200 pb-lg-150 px-200">
+            <div class="container px-0">
+                <div class="row">
+                    <!-- Link columns -->
+                    <div class="col col-12 col-lg-8 order-lg-1 text-white">
+                        <div class="row">
+                            <div
+                                v-for="column in content.columns"
+                                :key="column.title"
+                                class="col col-6 col-md-3 mb-100 mb-lg-0">
+                                <ul class="list-unstyled mb-lg-0">
+                                    <li class="font-weight-bold font-size-75 font-size-md-100 mb-100 mb-lg-50">
+                                        {{ column.title }}
+                                    </li>
+                                    <li
+                                        v-for="link in column.links"
+                                        :key="link.text"
+                                        class="mt-0 mt-lg-25 mb-100 mb-lg-50 font-size-75">
+                                        <es-nav-bar-link
+                                            :href="link.url"
+                                            :target="link.newTab ? '_blank' : null"
+                                            class="text-reset">
+                                            {{ link.text }}
+                                        </es-nav-bar-link>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Link columns -->
+                    <!-- Logo and Social-->
+                    <div class="col col-12 col-lg-4 order-lg-0">
+                        <es-nav-bar-link
+                            class="d-block mb-150 d-flex justify-content-center justify-content-lg-start"
+                            :href="content.home.link">
+                            <span class="sr-only">
+                                {{ content.home.name }}
+                            </span>
+                            <div class="es-footer-logo">
+                                <slot name="logo" />
+                            </div>
+                        </es-nav-bar-link>
+                        <!-- Social icons -->
+                        <div class="d-flex text-white justify-content-center justify-content-lg-start">
+                            <es-nav-bar-link
+                                v-for="(iconLink, index) in content.socialLinks"
+                                :key="iconLink.text"
+                                class="text-reset"
+                                :class="{ 'mr-150': index < content.socialLinks.length - 1 }"
+                                :href="iconLink.url"
+                                target="_blank">
+                                <span class="sr-only">{{ iconLink.text }}</span>
+                                <component :is="iconLink.icon" />
+                            </es-nav-bar-link>
+                        </div>
+                        <!-- Social icons -->
+                    </div>
+                    <!-- Logo and Social -->
+                </div>
+            </div>
+        </div>
+        <div class="bg-blue-700 text-blue-50 px-200 py-100">
+            <div class="container px-0">
+                <!-- Trademark Info -->
+                <p class="font-size-75">
+                    {{ content.trademarkText }}
+                </p>
+                <p class="mb-200 font-size-75">
+                    {{ copyrightText }}
+                </p>
+                <!-- Trademark Info -->
+                <!-- Legal -->
+                <hr class="border-top border-blue-500 m-0" />
+                <div class="row justify-content-center pt-100">
+                    <div
+                        v-for="link in content.legalLinks"
+                        :key="link.text"
+                        class="col col-6 col-lg-auto font-size-75 font-weight-semibold font-size-md-50 font-weight-md-normal mt-25 mb-50 px-lg-300">
+                        <es-nav-bar-link
+                            :href="link.url"
+                            class="text-reset font-weight-normal">
+                            {{ link.text }}
+                        </es-nav-bar-link>
+                    </div>
+                </div>
+                <!-- Legal -->
+            </div>
+        </div>
+        <div class="bg-blue-50 px-200 py-100">
+            <div class="container px-0">
+                <!-- DOE -->
+                <div class="d-lg-flex align-items-end">
+                    <!-- eslint-disable-next-line -->
+                    <img
+                        :src="content.departmentOfEnergy.logoUrl"
+                        alt="department of energy logo"
+                        aria-hidden="true"
+                        class="mr-100 mb-100 mb-lg-0"
+                        width="99"
+                        height="24" />
+                    <p class="mb-0 font-size-75 font-weight-normal font-weight-lg-semibold">
+                        <es-nav-bar-link
+                            :href="content.departmentOfEnergy.learnMore.link"
+                            target="_blank"
+                            class="text-blue-900">
+                            {{ content.departmentOfEnergy.learnMore.text }}
+                        </es-nav-bar-link>
+                    </p>
+                </div>
+                <!-- DOE -->
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/es-ds-components/components/es-nav-bar-account-menu.vue b/es-ds-components/components/es-nav-bar-account-menu.vue
new file mode 100644
index 000000000..6b4540be6
--- /dev/null
+++ b/es-ds-components/components/es-nav-bar-account-menu.vue
@@ -0,0 +1,67 @@
+<script lang="js">
+export default {
+    name: 'EsNavBarAccountMenu',
+    props: {
+        authItems: {
+            type: Array,
+            default: () => [],
+        },
+        loggedOut: {
+            type: Object,
+            required: true,
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="icon-dropdown">
+        <div class="nav-item">
+            <div class="nav-link dropdown-toggle d-none d-lg-flex flex-nowrap py-100">
+                <icon-person
+                    class="align-self-center account-icon"
+                    width="20px"
+                    height="20px" />
+                <span class="sr-only">
+                    {{ loggedOut.menuButtonText }}
+                </span>
+            </div>
+            <div class="menu">
+                <ul
+                    class="loggedIn dropdown-menu account-menu rounded mt-0 py-100 list-unstyled"
+                    style="display: none">
+                    <li
+                        v-for="item in authItems"
+                        :key="item.name">
+                        <es-nav-bar-link
+                            class="dropdown-item nav-link"
+                            :href="item.link">
+                            <span class="mx-50">
+                                {{ item.name }}
+                            </span>
+                        </es-nav-bar-link>
+                    </li>
+                </ul>
+                <ul
+                    class="loggedOut dropdown-menu account-menu rounded mt-0"
+                    style="display: none">
+                    <li class="d-flex justify-content-center">
+                        <es-button
+                            :href="loggedOut.signIn.link"
+                            class="m-100 w-100 text-white font-weight-bold">
+                            {{ loggedOut.signIn.name }}
+                        </es-button>
+                    </li>
+                    <li class="d-flex justify-content-center">
+                        <es-button
+                            :href="loggedOut.createAccount.link"
+                            :outline="true"
+                            class="mx-100 w-100 font-weight-bold">
+                            {{ loggedOut.createAccount.name }}
+                        </es-button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/es-ds-components/components/es-nav-bar-featured-article.vue b/es-ds-components/components/es-nav-bar-featured-article.vue
new file mode 100644
index 000000000..316cc5e91
--- /dev/null
+++ b/es-ds-components/components/es-nav-bar-featured-article.vue
@@ -0,0 +1,60 @@
+<script lang="js">
+export default {
+    name: 'EsNavBarFeaturedArticle',
+    props: {
+        eyebrow: {
+            type: String,
+            required: true,
+        },
+        link: {
+            type: String,
+            required: true,
+        },
+        newTab: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        image500: {
+            type: String,
+            required: true,
+        },
+        imageAlt: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        graphicId() {
+            return this.name.replace(/\s/g, '-').replace(/[^a-zA-Z]/g, '');
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="dropdown-cta-right">
+        <es-nav-bar-link
+            class="d-block cta-link text-gray-900 text-decoration-none"
+            :href="link"
+            :target="newTab ? '_blank' : null"
+            :title="name">
+            <nuxt-img
+                :id="graphicId"
+                class="featured-article-image mb-100 w-100 rounded"
+                :alt="imageAlt"
+                loading="lazy"
+                :src="image500" />
+            <div class="eyebrow mb-50 link-name">
+                {{ eyebrow }}
+            </div>
+
+            <p class="font-weight-bold link-subheading">
+                {{ name }}
+            </p>
+        </es-nav-bar-link>
+    </div>
+</template>
diff --git a/es-ds-components/components/es-nav-bar-link.vue b/es-ds-components/components/es-nav-bar-link.vue
new file mode 100644
index 000000000..dd1e2e578
--- /dev/null
+++ b/es-ds-components/components/es-nav-bar-link.vue
@@ -0,0 +1,27 @@
+<script setup>
+// specific workaround for getting a reference to an auto-imported but not globally registered
+// component like NuxtLink, so that it can be used in a <component :is=""> context.
+// this resolves to an import statement, according to:
+// https://github.com/nuxt/nuxt/issues/13659#issuecomment-1573568006
+const NuxtLink = resolveComponent('NuxtLink');
+
+const props = defineProps({
+    href: {
+        type: String,
+        default: '',
+    },
+    tag: {
+        type: String,
+        default: 'nuxt-link',
+    },
+});
+</script>
+
+<template>
+    <component
+        :is="props.tag === 'nuxt-link' ? NuxtLink : props.tag"
+        :href="props.href"
+        v-bind="$attrs">
+        <slot />
+    </component>
+</template>
diff --git a/es-ds-components/components/es-nav-bar-product-menu.vue b/es-ds-components/components/es-nav-bar-product-menu.vue
new file mode 100644
index 000000000..69959c661
--- /dev/null
+++ b/es-ds-components/components/es-nav-bar-product-menu.vue
@@ -0,0 +1,215 @@
+<script lang="js">
+export default {
+    name: 'EsNavBarProductMenu',
+    props: {
+        homeName: {
+            type: String,
+            required: true,
+        },
+        homeLink: {
+            type: String,
+            required: true,
+        },
+        closeButtonText: {
+            type: String,
+            required: true,
+        },
+        featuredArticle: {
+            type: Object,
+            default: () => ({}),
+        },
+        items: {
+            type: Array,
+            default: () => [],
+        },
+        link: {
+            type: String,
+            required: true,
+        },
+        mainMenuText: {
+            type: String,
+            required: true,
+        },
+        newTab: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        seeAllText: {
+            type: String,
+            required: true,
+        },
+        topics: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    computed: {
+        checkboxId() {
+            return `productMenu-${this.name}`;
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="dropdown nav-item nav-item-border-mobile">
+        <!-- desktop product link / hover menu trigger -->
+        <es-nav-bar-link
+            class="product-menu-header-link dropdown-toggle d-none d-lg-block px-lg-100 px-xl-200 py-lg-0 text-decoration-none"
+            :href="link"
+            :target="newTab ? '_blank' : null"
+            aria-haspopup="true"
+            aria-expanded="false">
+            <span class="product-menu-header-text d-block position-relative pb-lg-50">
+                {{ name }}
+            </span>
+        </es-nav-bar-link>
+        <!-- mobile flyout menu trigger -->
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="checkboxId"
+            class="dropdown-label nav-link d-flex d-lg-none align-items-center justify-content-between w-100 h-100 px-100 font-weight-bold">
+            {{ name }}
+            <icon-chevron-right
+                class="expand-icon"
+                style="height: 24px" />
+        </label>
+        <input
+            :id="checkboxId"
+            :name="checkboxId"
+            type="checkbox"
+            class="menu-checkbox" />
+        <div class="menu">
+            <div class="menu-header d-flex d-lg-none">
+                <div class="col-3" />
+                <div class="col-6 align-self-center text-center py-100">
+                    <div class="nav-es-logo-mobile align-items-center d-flex">
+                        <slot name="logo" />
+                    </div>
+                    <span class="sr-only">
+                        {{ homeName }}
+                    </span>
+                </div>
+                <!-- closes the entire mobile nav menu -->
+                <div class="d-flex col-3 justify-content-end">
+                    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                    <label
+                        for="data--main-menu"
+                        class="mb-0">
+                        <icon-x class="menu-toggle align-self-center" />
+                        <span class="sr-only">
+                            {{ closeButtonText }}
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <!-- mobile+desktop flyout menu -->
+            <!-- TODO: does anything match this aria-labelledby id? -->
+            <ul
+                v-if="items && items.length"
+                class="product-menu-flyout dropdown-menu row border-0 mt-0 py-lg-100">
+                <!-- mobile subnav header -->
+                <li class="nav-link col-lg-12 d-lg-none mb-50">
+                    <div class="col-2">
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            :for="checkboxId"
+                            class="menu-toggle nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
+                            <icon-arrow-left
+                                class="expand-icon"
+                                style="height: 24px" />
+                        </label>
+                    </div>
+                    <div class="col-8 align-self-center text-center py-100">
+                        <!--
+                        <es-nav-bar-link
+                            class="font-weight-boldest text-gray-900"
+                            :href="link">
+                            {{ name }}
+                        </es-nav-bar-link>
+                        <span class="font-weight-boldest text-gray-900">{{ name }}</span>
+                        -->
+                        <span
+                            class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
+                            >{{ name }}</span
+                        >
+                    </div>
+                    <div class="col-2" />
+                </li>
+                <!-- subnav items -->
+                <li
+                    v-for="item in items"
+                    :key="item.name">
+                    <es-nav-bar-link
+                        class="dropdown-item nav-item nav-item-border-mobile nav-link align-items-center d-flex px-lg-100 py-lg-50 product-menu-link"
+                        :class="{ 'font-weight-bold': item.emphasize }"
+                        :href="item.link"
+                        :target="item.newTab ? '_blank' : null">
+                        {{ item.name }}
+                    </es-nav-bar-link>
+                </li>
+            </ul>
+            <div
+                v-if="topics && topics.length"
+                class="product-menu-flyout product-menu-flyout--large dropdown-menu border-0 flex-wrap mt-0 p-lg-150">
+                <div class="nav-item d-lg-none mb-50">
+                    <!-- mobile subnav header -->
+                    <div class="col-2">
+                        <!-- closes this menu level -->
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            :for="checkboxId"
+                            class="menu-toggle nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
+                            <icon-arrow-left
+                                class="expand-icon"
+                                style="height: 24px" />
+                        </label>
+                    </div>
+                    <div class="col-8 align-self-center text-center py-100">
+                        <p
+                            class="align-items-center d-flex d-lg-none font-weight-bold justify-content-between mb-0 text-decoration-none w-100">
+                            <span
+                                class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
+                                >{{ name }}</span
+                            >
+                        </p>
+                    </div>
+                    <div class="col-2" />
+                </div>
+                <b-row
+                    tag="ul"
+                    class="d-block d-lg-flex list-unstyled">
+                    <es-nav-bar-topic-menu
+                        v-for="topic in topics"
+                        :key="topic.name"
+                        class="col-lg-4 d-block"
+                        :home-name="homeName"
+                        :home-link="homeLink"
+                        :close-button-text="closeButtonText"
+                        :items="topic.subtopics"
+                        :link="topic.link"
+                        :new-tab="topic.newTab"
+                        :name="topic.name"
+                        :show-items-on-mobile="topic.showItemsOnMobile"
+                        :sub-heading="topic.subHeading">
+                        <template #logo>
+                            <slot name="logo" />
+                        </template>
+                    </es-nav-bar-topic-menu>
+                    <li class="nav-item col-lg-4 d-block h-auto my-100 my-lg-0">
+                        <es-nav-bar-featured-article
+                            :eyebrow="featuredArticle.eyebrow"
+                            :link="featuredArticle.link"
+                            :name="featuredArticle.name"
+                            :image500="featuredArticle.image500"
+                            :image-alt="featuredArticle.imageAlt" />
+                    </li>
+                </b-row>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/es-ds-components/components/es-nav-bar-top-level-menu.vue b/es-ds-components/components/es-nav-bar-top-level-menu.vue
new file mode 100644
index 000000000..a8888d4ec
--- /dev/null
+++ b/es-ds-components/components/es-nav-bar-top-level-menu.vue
@@ -0,0 +1,193 @@
+<script lang="js">
+export default {
+    name: 'EsNavBarTopLevelMenu',
+    props: {
+        homeName: {
+            type: String,
+            required: true,
+        },
+        homeLink: {
+            type: String,
+            required: true,
+        },
+        closeButtonText: {
+            type: String,
+            required: true,
+        },
+        featuredArticle: {
+            type: Object,
+            default: () => ({}),
+        },
+        icon: {
+            type: String,
+            default: '',
+        },
+        topics: {
+            type: Array,
+            default: () => [],
+        },
+        link: {
+            type: String,
+            default: '',
+        },
+        mainMenuText: {
+            type: String,
+            required: true,
+        },
+        newTab: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        subHeading: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        checkboxId() {
+            return `menu-${this.name}`;
+        },
+    },
+};
+</script>
+
+<template>
+    <div
+        class="nav-item top-header mx-0"
+        :class="{ 'has-dropdown': !link }">
+        <div class="top-header-inner w-100">
+            <!-- desktop link and fly-out menu trigger -->
+            <es-nav-bar-link
+                class="nav-link d-none d-lg-block py-100 font-weight-bolder"
+                :class="{ 'dropdown-toggle': !link }"
+                :href="link || '#'"
+                :data-toggle="link ? undefined : 'dropdown'"
+                :aria-haspopup="link ? undefined : true"
+                :aria-expanded="link ? undefined : false"
+                :target="link && newTab ? '_blank' : undefined">
+                <div class="d-lg-flex align-items-center">
+                    {{ name }}
+                </div>
+            </es-nav-bar-link>
+            <!-- mobile link and fly-out menu trigger -->
+            <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+            <component
+                :is="link ? 'es-nav-bar-link' : 'label'"
+                class="nav-link d-flex d-lg-none align-items-center w-100 h-100 px-0 py-lg-100 px-100 font-weight-bold justify-content-between"
+                :class="{ 'dropdown-label': !link }"
+                :for="link ? undefined : checkboxId"
+                :href="link || undefined"
+                :target="newTab ? '_blank' : undefined">
+                <div class="align-items-center d-flex">
+                    {{ name }}
+                </div>
+                <icon-arrow-right
+                    v-if="!link"
+                    class="expand-icon"
+                    style="height: 24px" />
+            </component>
+            <input
+                v-if="!link"
+                :id="checkboxId"
+                :name="checkboxId"
+                type="checkbox"
+                class="menu-checkbox" />
+            <!-- fly-out menu -->
+            <div
+                v-if="!link"
+                class="menu">
+                <!-- mobile menu header -->
+                <div class="menu-header">
+                    <div class="col-3" />
+                    <div class="col-6 align-self-center text-center py-100">
+                        <div class="nav-es-logo-mobile align-items-center d-flex">
+                            <slot name="logo" />
+                        </div>
+                        <span class="sr-only">
+                            {{ homeName }}
+                        </span>
+                    </div>
+                    <div class="d-flex col-3 justify-content-end">
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            for="data--main-menu"
+                            class="mb-0">
+                            <icon-x class="menu-toggle align-self-center" />
+                            <span class="sr-only">
+                                {{ closeButtonText }}
+                            </span>
+                        </label>
+                    </div>
+                </div>
+                <div class="dropdown-menu dropdown-menu-full-page">
+                    <b-container class="dropdown-menu-primary justify-content-lg-center py-lg-100">
+                        <b-row class="flex-grow-1 justify-content-lg-center">
+                            <div
+                                class="mb-3 mb-lg-0"
+                                :class="{
+                                    'col-lg-9': topics.length >= 3,
+                                    'col-lg-9 col-xl-6 col-xxl-5': topics.length == 2,
+                                    'col-lg-4': topics.length == 1,
+                                }">
+                                <ul class="dropdown-list row w-auto">
+                                    <!-- name of top-level menu (won't ever be a link) -->
+                                    <li class="nav-item col-lg-12 d-lg-none mb-50 topic-menu-back">
+                                        <div class="col-2">
+                                            <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                                            <label
+                                                :for="checkboxId"
+                                                class="menu-toggle nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
+                                                <icon-arrow-left
+                                                    class="expand-icon"
+                                                    style="height: 24px" />
+                                            </label>
+                                        </div>
+                                        <div class="col-8 align-self-center text-center py-100">
+                                            <span
+                                                class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
+                                                >{{ name }}</span
+                                            >
+                                        </div>
+                                        <div class="col-2" />
+                                    </li>
+                                    <es-nav-bar-topic-menu
+                                        v-for="topic in topics"
+                                        :key="topic.name"
+                                        :class="{
+                                            'col-xl-4': topics.length >= 3,
+                                            'col-lg-6': topics.length >= 2,
+                                            'col-lg-12': topics.length == 1,
+                                        }"
+                                        :home-name="homeName"
+                                        :home-link="homeLink"
+                                        :close-button-text="closeButtonText"
+                                        :items="topic.subtopics"
+                                        :link="topic.link"
+                                        :new-tab="topic.newTab"
+                                        :name="topic.name">
+                                        <template #logo>
+                                            <slot name="logo" />
+                                        </template>
+                                    </es-nav-bar-topic-menu>
+                                </ul>
+                            </div>
+                            <!-- article link with image within menu -->
+                            <es-nav-bar-featured-article
+                                class="col-lg-3"
+                                :eyebrow="featuredArticle.linkName"
+                                :link="featuredArticle.linkUrl"
+                                :new-tab="featuredArticle.newTab"
+                                :name="featuredArticle.lede"
+                                :image500="featuredArticle.image500"
+                                :image-alt="featuredArticle.imageAlt" />
+                        </b-row>
+                    </b-container>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/es-ds-components/components/es-nav-bar-topic-menu.vue b/es-ds-components/components/es-nav-bar-topic-menu.vue
new file mode 100644
index 000000000..9ae4bd0ae
--- /dev/null
+++ b/es-ds-components/components/es-nav-bar-topic-menu.vue
@@ -0,0 +1,194 @@
+<script lang="js">
+export default {
+    name: 'EsNavBarTopicMenu',
+    props: {
+        homeName: {
+            type: String,
+            required: true,
+        },
+        homeLink: {
+            type: String,
+            required: true,
+        },
+        closeButtonText: {
+            type: String,
+            required: true,
+        },
+        items: {
+            type: Array,
+            required: true,
+        },
+        link: {
+            type: String,
+            default: '',
+        },
+        newTab: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        showItemsOnMobile: {
+            type: Boolean,
+            default: true,
+        },
+        subHeading: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        checkboxId() {
+            return `topMenu-${this.name}`;
+        },
+    },
+};
+</script>
+
+<template>
+    <li
+        class="topic-group border-0 mb-lg-200"
+        :class="{ 'nav-item': showItemsOnMobile }">
+        <!-- desktop header, if it's a link -->
+        <es-nav-bar-link
+            v-if="link"
+            class="dropdown-item nav-link topic-menu-header d-none d-lg-block font-size-sm mb-lg-50 position-relative px-lg-0 py-lg-50 text-gray"
+            :href="link"
+            :target="newTab ? '_blank' : null">
+            <span class="align-items-center eyebrow d-flex link-name">
+                {{ name }}
+                <icon-arrow-right
+                    class="d-none d-lg-inline-block ml-25"
+                    height="24px"
+                    width="24px" />
+            </span>
+            <span
+                v-if="subHeading"
+                class="d-block link-subheading">
+                {{ subHeading }}
+            </span>
+        </es-nav-bar-link>
+        <!-- desktop header, if it's not a link -->
+        <p
+            v-else
+            class="dropdown-toggle topic-menu-header eyebrow align-items-center d-none d-lg-block mb-lg-50 position-relative px-lg-0 py-lg-50">
+            <span class="d-block">
+                {{ name }}
+            </span>
+            <span
+                v-if="subHeading"
+                class="d-block">
+                {{ subHeading }}
+            </span>
+        </p>
+        <!-- mobile nav item, tapping which drills down to submenu -->
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="checkboxId"
+            class="dropdown-label nav-item-border-mobile nav-link align-items-center d-lg-none justify-content-between w-100 h-100 font-weight-bold"
+            :class="{
+                'd-flex': showItemsOnMobile,
+                'd-none': !showItemsOnMobile,
+            }">
+            {{ name }}
+            <icon-chevron-right
+                class="expand-icon"
+                style="height: 24px" />
+        </label>
+        <input
+            :id="checkboxId"
+            :name="checkboxId"
+            type="checkbox"
+            class="menu-checkbox" />
+        <div class="menu submenu">
+            <div class="menu-header">
+                <div class="col-3" />
+                <div class="col-6 align-self-center text-center py-100">
+                    <div class="nav-es-logo-mobile align-items-center d-flex">
+                        <slot name="logo" />
+                    </div>
+                    <span class="sr-only">
+                        {{ homeName }}
+                    </span>
+                </div>
+                <div class="d-flex col-3 justify-content-end">
+                    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                    <label
+                        for="data--main-menu"
+                        class="mb-0">
+                        <icon-x class="menu-toggle align-self-center" />
+                        <span class="sr-only">
+                            {{ closeButtonText }}
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <ul
+                class="visible-lg list-unstyled"
+                style="top: 0">
+                <li class="nav-item col-lg-12 d-lg-none mb-50">
+                    <div class="col-2">
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            :for="checkboxId"
+                            class="menu-toggle d-flex w-100 h-100 mb-0 align-items-center font-size-sm">
+                            <icon-arrow-left
+                                class="expand-icon"
+                                style="height: 24px" />
+                        </label>
+                    </div>
+                    <div class="col-8 align-self-center text-center py-100">
+                        <es-nav-bar-link
+                            v-if="link"
+                            class="nav-link font-weight-bold d-flex w-100 h-100 justify-content-center align-items-center"
+                            :href="link"
+                            :target="newTab ? '_blank' : null">
+                            {{ name }}
+                        </es-nav-bar-link>
+                        <div
+                            v-else
+                            class="h-100">
+                            <span
+                                class="nav-item justify-content-center align-items-center d-flex font-weight-boldest h-100 text-decoration-none w-100">
+                                {{ name }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="col-2">&nbsp;</div>
+                </li>
+                <li
+                    v-for="item in items"
+                    :key="item.name">
+                    <es-nav-bar-link
+                        class="dropdown-item nav-item nav-item-border-mobile nav-link d-flex align-items-center ml-lg-0 px-lg-0 py-lg-50"
+                        :class="{ 'font-weight-bold': item.emphasize }"
+                        :href="item.link"
+                        :target="item.newTab ? '_blank' : null">
+                        {{ item.name }}
+                    </es-nav-bar-link>
+                </li>
+            </ul>
+        </div>
+        <!-- mobile link, shown only if we have a link and don't want to show child items on mobile -->
+        <es-nav-bar-link
+            v-if="link"
+            class="nav-item nav-item-menu nav-item-border-mobile nav-link d-lg-none w-100 text-decoration-none"
+            :class="{
+                'd-none': showItemsOnMobile,
+                'd-block': !showItemsOnMobile,
+            }"
+            :href="link"
+            :target="newTab ? '_blank' : null">
+            <span class="d-block eyebrow link-name">
+                {{ name }}
+            </span>
+            <span
+                v-if="subHeading"
+                class="d-block font-size-sm link-subheading">
+                {{ subHeading }}
+            </span>
+        </es-nav-bar-link>
+    </li>
+</template>
diff --git a/es-ds-components/components/es-nav-bar.vue b/es-ds-components/components/es-nav-bar.vue
new file mode 100644
index 000000000..2412ba7ce
--- /dev/null
+++ b/es-ds-components/components/es-nav-bar.vue
@@ -0,0 +1,395 @@
+<script lang="js">
+export default {
+    name: 'EsNavBar',
+    props: {
+        accountContent: {
+            type: Object,
+            required: true,
+        },
+        globalContent: {
+            type: Object,
+            required: true,
+        },
+    },
+    mounted() {
+        // CUSTOM GLOBAL-NAV SCRIPT STARTS
+
+        // Function to collapse all open menus
+        function uncheck_menus() {
+            document.querySelectorAll('.menu-checkbox').forEach((element) => {
+                const checkbox = element;
+                checkbox.checked = false;
+            });
+        }
+
+        // Create an overlay to obscure page contents
+        const overlay = document.querySelector('.content-overlay');
+
+        // Function to show/hide overlay
+        function show_overlay(overlay_visible) {
+            if (overlay_visible) {
+                overlay.classList.add('show');
+            } else {
+                overlay.classList.remove('show');
+            }
+        }
+
+        // Show overlay and lock scrolling on body when menu is open
+        function show_mobile_menus() {
+            show_overlay(true);
+            document.body.style.overflow = 'hidden';
+        }
+
+        // Close all submenus, hide overlay, and unlock scrolling when menu is closed
+        function collapse_mobile_menus() {
+            uncheck_menus();
+            show_overlay(false);
+            document.body.style.overflow = 'visible';
+        }
+
+        // Create a checkbox used to determine if any mobile menus are open
+        const mainMenuCheckbox = document.querySelector('.main-menu-checkbox');
+        const accountMenuCheckbox = document.querySelector('.account-menu-checkbox');
+
+        // Collapse all open menus on window resize
+        window.addEventListener('resize', () => {
+            if (mainMenuCheckbox.checked || accountMenuCheckbox.checked) {
+                collapse_mobile_menus();
+            }
+        });
+
+        // Collapse all open menus on overlay click
+        overlay.addEventListener('click', () => {
+            collapse_mobile_menus();
+        });
+
+        // Show overlay on hovers for desktop only
+        document
+            .querySelectorAll(
+                // eslint-disable-next-line max-len
+                '.nav-es-container .nav-item .dropdown-toggle, .nav-es-container .nav-item .dropdown-menu, .nav-es-container .nav-item.has-dropdown',
+            )
+            .forEach((element) => {
+                element.addEventListener('mouseover', () => {
+                    show_overlay(true);
+                });
+                element.addEventListener('mouseout', () => {
+                    // Hide overlay on mouseout on desktop not mobile
+                    show_overlay(mainMenuCheckbox.checked || accountMenuCheckbox.checked);
+                });
+            });
+
+        // Toggle menu display on main menu open/close
+        mainMenuCheckbox.addEventListener('change', (event) => {
+            if (event.target.checked) {
+                show_mobile_menus();
+            } else {
+                collapse_mobile_menus();
+            }
+        });
+
+        // Toggle menu display on account menu open/close
+        accountMenuCheckbox.addEventListener('change', (event) => {
+            if (event.target.checked) {
+                show_mobile_menus();
+            } else {
+                collapse_mobile_menus();
+            }
+        });
+
+        // get logged in/out state and display appropriate menu
+        const menuDisplay = ({ loggedOut }) => {
+            if (loggedOut) {
+                // logged out so allow loggedOut menu and the compare buttons to be visible
+                document.querySelectorAll('.nav-es-container .loggedOut').forEach((element) => {
+                    // eslint-disable-next-line no-param-reassign
+                    element.style.display = null;
+                });
+            } else {
+                // logged in so allow logged in menu to be visible, and show name with appropriate layout
+                document.querySelectorAll('.nav-es-container .loggedIn').forEach((element) => {
+                    // eslint-disable-next-line no-param-reassign
+                    element.style.display = null;
+                });
+                document.querySelector('.nav-es-container .icon-dropdown .dropdown-toggle').style.display = 'flex';
+                const selector = '.nav-es-container .icon-dropdown .dropdown-toggle .first-name';
+                document.querySelectorAll(selector).forEach((element) => {
+                    // eslint-disable-next-line no-param-reassign
+                    element.style.display = 'block';
+                });
+            }
+        };
+
+        fetch('/api/account-first-name/', {
+            headers: { Accept: 'application/json' },
+            method: 'GET',
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                const name = data?.first_name || null;
+                const selector = '.nav-es-container .icon-dropdown .dropdown-toggle .first-name';
+                document.querySelectorAll(selector).forEach((element) => {
+                    // eslint-disable-next-line no-param-reassign
+                    element.innerHTML = name;
+                });
+                menuDisplay({ loggedOut: name === null });
+            })
+            .catch((e) => {
+                // eslint-disable-next-line no-console
+                console.log('error', e);
+                menuDisplay({ loggedOut: true });
+            });
+
+        // closes mobile menus upon navigating 'back' to the site
+        // https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
+        window.addEventListener('pageshow', () => {
+            collapse_mobile_menus();
+        });
+
+        // set up options for sticky nav intersection observer
+        const intersectionOptions = {
+            rootMargin: '0px',
+            threshold: 0.0,
+        };
+
+        // set up callback for sticky nav intersection observer
+        const intersectionCallback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.remove('scrolled');
+                } else {
+                    entry.target.classList.add('scrolled');
+                }
+            });
+        };
+
+        // initialize intersection observer to detect when nav scrolls out of viewport
+        // https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/
+        const observer = new IntersectionObserver(intersectionCallback, intersectionOptions);
+        const targetEl = document.querySelector('#nav-main');
+        observer.observe(targetEl);
+
+        // CUSTOM GLOBAL-NAV SCRIPT ENDS
+    },
+};
+</script>
+
+<template>
+    <div
+        id="nav-main"
+        class="nav-es-container">
+        <div class="content-overlay" />
+        <nav class="nav-es-global navbar navbar-expand navbar-light py-0 font-size-base">
+            <!-- mobile hamburger menu button -->
+            <div class="d-flex d-lg-none col-2 px-0">
+                <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                <label
+                    for="data--main-menu"
+                    class="mb-0">
+                    <icon-hamburger class="menu-toggle align-self-center" />
+                    <span class="sr-only">
+                        {{ globalContent.mobileNavButtonAltText }}
+                    </span>
+                </label>
+            </div>
+            <!-- mobile logo -->
+            <es-nav-bar-link
+                class="d-flex d-lg-none col-8 align-self-center justify-content-center px-0"
+                :href="globalContent.home.link">
+                <div class="nav-es-logo-mobile align-items-center d-flex">
+                    <slot name="logo" />
+                </div>
+                <span class="sr-only">
+                    {{ globalContent.home.name }}
+                </span>
+            </es-nav-bar-link>
+            <!-- mobile account menu trigger -->
+            <div class="d-flex d-lg-none justify-content-end col-2 px-0">
+                <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                <label
+                    class="mb-0 text-decoration-none"
+                    for="data--account-menu">
+                    <icon-person class="align-self-center account-icon" />
+                    <span class="sr-only">
+                        {{ accountContent.mobileAccountButtonAltText }}
+                    </span>
+                </label>
+            </div>
+            <input
+                id="data--main-menu"
+                class="menu-checkbox main-menu-checkbox"
+                aria-labelledby="data--main-menu"
+                type="checkbox" />
+            <!-- first-level menu on mobile, the whole nav on desktop-->
+            <div
+                id="navbarNavDropdown"
+                class="menu top-level-menu align-items-start d-flex flex-grow-1">
+                <!-- mobile menu header -->
+                <div class="menu-header d-lg-none d-flex align-items-center justify-content-center h-100 mb-50">
+                    <div class="col-3" />
+                    <div class="col-6 align-self-center text-center py-100">
+                        <div class="nav-es-logo-mobile align-items-center d-flex">
+                            <slot name="logo" />
+                        </div>
+                    </div>
+                    <div class="d-flex col-3 justify-content-end">
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            for="data--main-menu"
+                            class="mb-0">
+                            <icon-x class="menu-toggle align-self-center" />
+                            <span class="sr-only">
+                                {{ globalContent.mobileCloseButtonAltText }}
+                            </span>
+                        </label>
+                    </div>
+                </div>
+                <div class="navbar-nav d-flex flex-column w-100">
+                    <!-- top-level items on mobile, full top bar on desktop -->
+                    <b-container class="align-items-start d-flex flex-lg-nowrap justify-content-between top-level-nav">
+                        <es-nav-bar-link
+                            class="navbar-brand d-none d-lg-block"
+                            :href="globalContent.home.link">
+                            <div class="nav-es-logo-desktop pt-100">
+                                <slot name="logo" />
+                            </div>
+                            <span class="sr-only">
+                                {{ globalContent.home.name }}
+                            </span>
+                        </es-nav-bar-link>
+                        <!-- top level menus -->
+                        <es-nav-bar-top-level-menu
+                            v-for="topLevelMenu in globalContent.topLevelMenus"
+                            :key="topLevelMenu.name"
+                            :home-name="globalContent.home.name"
+                            :home-link="globalContent.home.link"
+                            :close-button-text="globalContent.mobileCloseButtonAltText"
+                            :featured-article="topLevelMenu.featuredArticle"
+                            :icon="topLevelMenu.icon"
+                            :link="topLevelMenu.link"
+                            :main-menu-text="globalContent.mainMenuText"
+                            :name="topLevelMenu.name"
+                            :sub-heading="topLevelMenu.subHeading"
+                            :topics="topLevelMenu.topics">
+                            <template #logo>
+                                <slot name="logo" />
+                            </template>
+                        </es-nav-bar-top-level-menu>
+                        <!-- desktop account menu -->
+                        <es-nav-bar-account-menu
+                            :auth-items="accountContent.loggedIn.items"
+                            class="d-none d-lg-block pt-100"
+                            :logged-out="accountContent.loggedOut" />
+                    </b-container>
+                    <!-- mobile+desktop product menus -->
+                    <b-container class="d-flex flex-lg-nowrap justify-content-lg-end product-menu">
+                        <div class="row">
+                            <es-nav-bar-product-menu
+                                v-for="product in globalContent.products"
+                                :key="product.name"
+                                :home-name="globalContent.home.name"
+                                :home-link="globalContent.home.link"
+                                :close-button-text="globalContent.mobileCloseButtonAltText"
+                                :featured-article="product.featuredArticle"
+                                :items="product.items"
+                                :link="product.link"
+                                :main-menu-text="globalContent.mainMenuText"
+                                :new-tab="product.newTab"
+                                :name="product.name"
+                                :see-all-text="globalContent.seeAllText"
+                                :topics="product.topics">
+                                <template #logo>
+                                    <slot name="logo" />
+                                </template>
+                            </es-nav-bar-product-menu>
+                        </div>
+                    </b-container>
+                </div>
+            </div>
+            <!-- mobile account menu checkbox -->
+            <input
+                id="data--account-menu"
+                class="menu-checkbox account-menu-checkbox"
+                aria-labelledby="data--account-menu"
+                type="checkbox" />
+            <!-- mobile account menu -->
+            <div class="menu top-level-menu align-items-start d-flex d-lg-none flex-grow-1">
+                <!-- menu header -->
+                <div class="menu-header d-lg-none d-flex align-items-center justify-content-center h-100">
+                    <div class="col-3" />
+                    <div class="col-6 align-self-center text-center py-100">
+                        <div class="nav-es-logo-mobile align-items-center d-flex">
+                            <slot name="logo" />
+                        </div>
+                    </div>
+                    <div class="d-flex col-3 justify-content-end">
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            for="data--account-menu"
+                            class="mb-0">
+                            <icon-x class="menu-toggle align-self-center" />
+                            <span class="sr-only">
+                                {{ globalContent.mobileCloseButtonAltText }}
+                            </span>
+                        </label>
+                    </div>
+                </div>
+                <!-- logged in menu -->
+                <ul
+                    class="loggedIn navbar-nav w-100"
+                    style="display: none">
+                    <li
+                        v-for="item in accountContent.loggedIn.items"
+                        :key="item.name">
+                        <es-nav-bar-link
+                            class="dropdown-item nav-item nav-item-border-mobile nav-link align-items-center d-flex px-lg-100 py-lg-50 font-weight-bold"
+                            :href="item.link">
+                            {{ item.name }}
+                        </es-nav-bar-link>
+                    </li>
+                </ul>
+                <!-- logged out menu -->
+                <ul
+                    class="loggedOut navbar-nav w-100"
+                    style="display: none">
+                    <li>
+                        <es-button
+                            :href="accountContent.loggedOut.signIn.link"
+                            class="m-100 w-100 text-white font-weight-bold">
+                            {{ accountContent.loggedOut.signIn.name }}
+                        </es-button>
+                    </li>
+                    <li class="d-flex justify-content-center">
+                        <es-button
+                            :href="accountContent.loggedOut.createAccount.link"
+                            :outline="true"
+                            class="mx-100 w-100 font-weight-bold">
+                            {{ accountContent.loggedOut.createAccount.name }}
+                        </es-button>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        <!-- sticky nav bar -->
+        <nav class="nav-es-sticky bg-white d-none d-lg-block position-fixed py-25">
+            <b-container class="align-items-center d-flex justify-content-between">
+                <!-- EnergySage logo -->
+                <es-nav-bar-link
+                    class="navbar-brand d-none d-lg-block"
+                    :href="globalContent.home.link">
+                    <div class="nav-es-logo-desktop-sticky">
+                        <slot name="logo" />
+                    </div>
+                    <span class="sr-only">
+                        {{ globalContent.home.name }}
+                    </span>
+                </es-nav-bar-link>
+                <!-- desktop account menu -->
+                <es-nav-bar-account-menu
+                    :auth-items="accountContent.loggedIn.items"
+                    class="d-none d-lg-block"
+                    :logged-out="accountContent.loggedOut" />
+            </b-container>
+        </nav>
+    </div>
+</template>
diff --git a/es-ds-components/utils/get-es-footer-content.js b/es-ds-components/utils/get-es-footer-content.js
new file mode 100644
index 000000000..2c790a5bb
--- /dev/null
+++ b/es-ds-components/utils/get-es-footer-content.js
@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
+// keeping COMMUNITY_SOLAR_DOMAIN, HEAT_PUMPS_DOMAIN and NEWS_DOMAIN for now to keep function argument order intact
+// and to minimize breaking change to consuming applications, but they are now deprecated in this function
+export default (
+    ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com',
+    NEWS_DOMAIN = process.env.NEWS_DOMAIN || 'https://www.energysage.com',
+    COMMUNITY_SOLAR_DOMAIN = process.env.COMMUNITY_SOLAR_DOMAIN || 'https://communitysolar.energysage.com',
+    HEAT_PUMPS_DOMAIN = process.env.HEAT_PUMPS_DOMAIN || 'https://heatpumps.energysage.com',
+) => ({
+    banner: {
+        headline: 'Make an impact.',
+        subHeadline: "It's never been easier.",
+        body: `We developed our one-of-a-kind marketplace with funding from the U.S. Department of Energy to make
+            clean home energy solutions affordable and accessible to all.`,
+    },
+    home: {
+        name: 'EnergySage',
+        link: ES_DOMAIN,
+    },
+    columns: [
+        // TODO: remove new tab option once other verticals adopt global nav
+        {
+            title: 'Our offerings',
+            links: [
+                { text: 'Home solar', url: `${ES_DOMAIN}/shop/home-solar/` },
+                { text: 'Community solar', url: `${ES_DOMAIN}/shop/community-solar/` },
+                { text: 'Heating & cooling', url: `${ES_DOMAIN}/shop/heat-pumps/` },
+                { text: 'Backup power', url: `${ES_DOMAIN}/energy-storage/` },
+                { text: 'EV charging', url: `${ES_DOMAIN}/ev-charging/` },
+                { text: 'For your business', url: `${ES_DOMAIN}/businesses/` },
+                { text: 'Other energy options', url: `${ES_DOMAIN}/other-clean-options/` },
+            ],
+        },
+        {
+            title: 'Resources',
+            links: [
+                { text: 'Solar calculator', url: `${ES_DOMAIN}/solar/calculator/` },
+                { text: 'Solar rebates', url: `${ES_DOMAIN}/market/equipment-rebates/` },
+                { text: 'News', url: `${ES_DOMAIN}/blog/` },
+                { text: 'Home solar guide', url: `${ES_DOMAIN}/shop/home-solar/` },
+                { text: 'Market intel', url: `${ES_DOMAIN}/data/` },
+                { text: 'Refer a friend', url: `${ES_DOMAIN}/refer-a-friend/` },
+            ],
+        },
+        {
+            title: 'About us',
+            links: [
+                { text: 'Mission & values', url: `${ES_DOMAIN}/about-us/company/` },
+                { text: 'How it works', url: `${ES_DOMAIN}/shop/home-solar/` },
+                { text: 'Careers', url: `${ES_DOMAIN}/about-us/careers/` },
+                { text: 'Contact us', url: `${ES_DOMAIN}/contact/` },
+                { text: 'Editorial guidelines', url: `${ES_DOMAIN}/editorial-guidelines/` },
+            ],
+        },
+        {
+            title: 'Work with us',
+            links: [
+                { text: 'Solar & HVAC installers', url: `${ES_DOMAIN}/installers/` },
+                { text: 'Corporate partnerships', url: `${ES_DOMAIN}/partners/corporations` },
+                { text: 'Community programs', url: `${ES_DOMAIN}/partners/non-profits` },
+                { text: 'Utility programs', url: `${ES_DOMAIN}/partners/utilities` },
+                { text: 'Others', url: `${ES_DOMAIN}/partners/` },
+            ],
+        },
+    ],
+    socialLinks: [
+        { text: 'Facebook', url: 'https://www.facebook.com/EnergySage', icon: 'icon-facebook' },
+        { text: 'LinkedIn', url: 'https://www.linkedin.com/company/energysage/', icon: 'icon-linkedin' },
+        { text: 'Instagram', url: 'https://www.instagram.com/energysage_official/', icon: 'icon-instagram' },
+        { text: 'X', url: 'https://X.com/energysage', icon: 'icon-twitter' },
+        { text: 'YouTube', url: 'https://www.youtube.com/c/EnergySage', icon: 'icon-youtube' },
+    ],
+    legalLinks: [
+        { text: 'Terms of use', url: `${ES_DOMAIN}/terms-of-use/` },
+        { text: 'Privacy policy', url: `${ES_DOMAIN}/privacy-policy/` },
+        { text: 'Mobile terms of use', url: `${ES_DOMAIN}/mobile-terms-of-use/` },
+        { text: 'Non-discrimination policy', url: `${ES_DOMAIN}/nondiscrimination/` },
+    ],
+    copyrightText: '© Copyright 2009-{currentYear} EnergySage, Inc. All rights reserved.',
+    trademarkText: `ENERGYSAGE is a registered trademark and the EnergySage logo is a trademark of EnergySage, Inc.
+        Other trademarks are the property of either EnergySage, Inc. or our licensors and are used with permission.`,
+    departmentOfEnergy: {
+        learnMore: {
+            link: 'https://www.energy.gov/eere/solar/articles/eere-success-story-doe-funding-helps-build-one-stop-shop-rooftop-pv-systems',
+            text: 'Learn more about our success working with the U.S. Department of Energy.',
+        },
+        logoUrl: 'https://www-static.energysage.com/static/img/doe/doe-logo-179.943fe6467b04.png',
+    },
+});
diff --git a/es-ds-components/utils/get-es-nav-bar-account-content.js b/es-ds-components/utils/get-es-nav-bar-account-content.js
new file mode 100644
index 000000000..12945c7b3
--- /dev/null
+++ b/es-ds-components/utils/get-es-nav-bar-account-content.js
@@ -0,0 +1,55 @@
+// rooftop account links
+export default (
+    ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com',
+    ACCOUNTS_DOMAIN = process.env.ACCOUNTS_DOMAIN || 'https://accounts.energysage.com',
+    REGISTER_LINK = process.env.REGISTER_LINK || `${ACCOUNTS_DOMAIN}/register/?next=${ES_DOMAIN}/register-thanks/`,
+) => ({
+    mobileAccountButtonAltText: 'Open account menu',
+    loggedIn: {
+        items: [
+            {
+                name: 'My profile',
+                link: `${ES_DOMAIN}/profile/`,
+            },
+            {
+                name: 'My quotes',
+                link: `${ES_DOMAIN}/your-marketplace/`,
+            },
+            {
+                name: 'My messages',
+                link: `${ES_DOMAIN}/message/`,
+            },
+            {
+                name: 'My project preferences',
+                link: `${ES_DOMAIN}/market/solarpv/update/`,
+            },
+            {
+                name: 'Account settings',
+                link: `${ES_DOMAIN}/account-settings/router/`,
+            },
+            {
+                name: 'How it works',
+                link: `${ES_DOMAIN}/market-process/`,
+            },
+            {
+                name: 'Write a review',
+                link: `${ES_DOMAIN}/share-your-experience/`,
+            },
+            {
+                name: 'Sign out',
+                link: `${ES_DOMAIN}/logout/`,
+            },
+        ],
+    },
+    loggedOut: {
+        menuButtonText: 'Sign in',
+        signIn: {
+            name: 'Sign in',
+            link: `${ES_DOMAIN}/login/`,
+        },
+        createAccount: {
+            name: 'Create an account',
+            link: REGISTER_LINK,
+        },
+    },
+});
diff --git a/es-ds-components/utils/get-es-nav-bar-global-content.js b/es-ds-components/utils/get-es-nav-bar-global-content.js
new file mode 100644
index 000000000..171d56514
--- /dev/null
+++ b/es-ds-components/utils/get-es-nav-bar-global-content.js
@@ -0,0 +1,474 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const NAV_BAR_ICONS = {
+    CALCULATOR: 'calculator',
+    ES_LEAF: 'es-leaf',
+    LIGHT_BULB: 'light-bulb',
+};
+
+export default (
+    ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com',
+    // exposed separately from ES_DOMAIN in case we want to use prod for images in local/dev
+    ES_IMAGE_DOMAIN = process.env.ES_IMAGE_DOMAIN || 'https://www.energysage.com',
+    // keeping NEWS_DOMAIN to minimize breaking change, but it is deprecated
+    NEWS_DOMAIN = process.env.NEWS_DOMAIN || 'https://www.energysage.com',
+    COMMUNITY_SOLAR_DOMAIN = process.env.COMMUNITY_SOLAR_DOMAIN || 'https://communitysolar.energysage.com',
+    HEAT_PUMPS_DOMAIN = process.env.HEAT_PUMPS_DOMAIN || 'https://heatpumps.energysage.com',
+    EV_RAIVEN_DOMAIN = 'https://shop.energysage.com/',
+) => ({
+    home: {
+        name: 'EnergySage',
+        link: ES_DOMAIN,
+    },
+    mainMenuText: 'Main menu',
+    mobileCloseButtonAltText: 'Close',
+    mobileNavButtonAltText: 'Open navigation menu',
+    seeAllText: 'See all',
+    topLevelMenus: [
+        {
+            name: 'Tips & guides',
+            subHeading: 'Learn from experts',
+            icon: NAV_BAR_ICONS.LIGHT_BULB,
+            topics: [
+                {
+                    name: 'Solar',
+                    subtopics: [
+                        {
+                            name: 'Home solar guide',
+                            link: `${ES_DOMAIN}/solar/`,
+                        },
+                        {
+                            name: 'Community solar guide',
+                            link: `${ES_DOMAIN}/community-solar/`,
+                        },
+                        {
+                            name: 'Best solar panels',
+                            link: `${ES_DOMAIN}/solar/best-solar-panels-complete-ranking/`,
+                        },
+                        {
+                            name: 'How much do solar panels cost?',
+                            link: `${ES_DOMAIN}/local-data/solar-panel-cost/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'Backup power',
+                    subtopics: [
+                        {
+                            name: 'Backup power guide',
+                            link: `${ES_DOMAIN}/energy-storage/`,
+                        },
+                        {
+                            name: 'Best home batteries',
+                            link: `${ES_DOMAIN}/energy-storage/best-home-batteries/`,
+                        },
+                        {
+                            name: 'Home batteries vs. generators',
+                            // eslint-disable-next-line max-len
+                            link: `${ES_DOMAIN}/energy-storage/battery-backup-power-vs-generators-which-is-right-for-you/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'Heating & cooling',
+                    subtopics: [
+                        {
+                            name: 'Heat pump guide',
+                            link: `${ES_DOMAIN}/heat-pumps/`,
+                        },
+                        {
+                            name: 'How much do heat pumps cost?',
+                            // eslint-disable-next-line max-len
+                            link: `${ES_DOMAIN}/heat-pumps/costs-and-benefits-air-source-heat-pumps/`,
+                        },
+                        {
+                            name: 'How do heat pumps work?',
+                            link: `${ES_DOMAIN}/heat-pumps/how-do-heat-pumps-work/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'Electric vehicles',
+                    subtopics: [
+                        {
+                            name: 'EV charging guide',
+                            link: `${ES_DOMAIN}/ev-charging/`,
+                        },
+                        {
+                            name: 'Electric vehicles guide',
+                            link: `${ES_DOMAIN}/electric-vehicles/`,
+                        },
+                        {
+                            name: 'Best EV chargers',
+                            link: `${ES_DOMAIN}/ev-charging/ev-charging-stations/`,
+                        },
+                        {
+                            name: 'How much does it cost to charge an EV?',
+                            link: `${ES_DOMAIN}/ev-charging/electric-vehicle-charging-cost/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'Smart home',
+                    subtopics: [
+                        {
+                            name: 'Home electricity guide',
+                            link: `${ES_DOMAIN}/electricity/`,
+                        },
+                        {
+                            name: 'Home energy management guide',
+                            link: `${ES_DOMAIN}/energy-management/`,
+                        },
+                        {
+                            name: 'Energy efficiency',
+                            link: `${ES_DOMAIN}/energy-efficiency/`,
+                        },
+                        {
+                            name: 'Best smart home gadgets',
+                            link: `${ES_DOMAIN}/energy-products/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'For your business',
+                    subtopics: [
+                        {
+                            name: 'Solar for businesses',
+                            link: `${ES_DOMAIN}/business-solutions/commercial-solar-benefits/`,
+                        },
+                        {
+                            name: 'Solar for nonprofit organizations',
+                            link: `${ES_DOMAIN}/business-solutions/solar-nonprofit-benefits-financing/`,
+                        },
+                        {
+                            name: 'Backup power for businesses',
+                            link: `${ES_DOMAIN}/business-solutions/energy-storage-for-businesses/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'Clean energy financing',
+                    subtopics: [
+                        {
+                            name: 'How to pay for solar',
+                            link: `${ES_DOMAIN}/solar/how-to-pay-for-solar/`,
+                        },
+                        {
+                            name: 'How to choose a solar loan',
+                            link: `${ES_DOMAIN}/solar/solar-loans/`,
+                        },
+                        {
+                            name: 'What to know about solar leases',
+                            link: `${ES_DOMAIN}/solar/solar-leases/`,
+                        },
+                        {
+                            name: 'Explore cost-saving clean energy incentives',
+                            link: `${ES_DOMAIN}/shop/clean-energy-savings-and-tax-incentives/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'News',
+                    subtopics: [
+                        {
+                            name: 'How long can you run your house on a Tesla Powerwall?',
+                            // eslint-disable-next-line max-len
+                            link: `${ES_DOMAIN}/energy-storage/tesla-powerwall-how-much-home-can-you-run-on-it-for-how-long/`,
+                        },
+                        {
+                            name: 'How have solar panel cost and efficiency changed over time?',
+                            link: `${ES_DOMAIN}/solar/solar-panel-efficiency-cost-over-time/`,
+                        },
+                    ],
+                    link: `${ES_DOMAIN}/blog/`,
+                },
+            ],
+            featuredArticle: {
+                linkName: "Editors' pick",
+                linkUrl: `${ES_DOMAIN}/solar/are-solar-panels-worth-it/`,
+                lede: 'Are solar panels worth it?',
+                image500: `${ES_IMAGE_DOMAIN}/static/img/navbar/articles/are-solar-panels-worth-it-500w.png`,
+                imageAlt: 'home with solar panels',
+            },
+        },
+        {
+            name: 'Solar calculator',
+            subHeading: 'Check your savings',
+            icon: NAV_BAR_ICONS.CALCULATOR,
+            link: `${ES_DOMAIN}/solar/calculator/`,
+            topics: [],
+        },
+        {
+            name: 'About us',
+            subHeading: 'Why EnergySage',
+            icon: NAV_BAR_ICONS.ES_LEAF,
+            topics: [
+                {
+                    name: 'Our company',
+                    subtopics: [
+                        {
+                            name: 'Mission & values',
+                            link: `${ES_DOMAIN}/about-us/company/`,
+                        },
+                        {
+                            name: 'How it works',
+                            link: `${ES_DOMAIN}/shop/home-solar/`,
+                        },
+                        {
+                            name: 'Our team',
+                            link: `${ES_DOMAIN}/about-us/team/`,
+                        },
+                        {
+                            name: 'Our Energy Advisors',
+                            link: `${ES_DOMAIN}/energy-advisors/`,
+                        },
+                        {
+                            name: 'Careers',
+                            link: `${ES_DOMAIN}/about-us/careers/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'Our work',
+                    subtopics: [
+                        {
+                            name: 'Market intel',
+                            link: `${ES_DOMAIN}/data/`,
+                        },
+                        {
+                            name: 'Editorial guidelines',
+                            link: `${ES_DOMAIN}/editorial-guidelines/`,
+                        },
+                        {
+                            name: 'Press',
+                            link: `${ES_DOMAIN}/press/`,
+                        },
+                    ],
+                },
+                {
+                    name: 'Work with us',
+                    subtopics: [
+                        {
+                            name: 'Solar & HVAC installers',
+                            link: `${ES_DOMAIN}/installers/`,
+                        },
+                        {
+                            name: 'Corporate partnerships',
+                            link: `${ES_DOMAIN}/partners/corporations`,
+                        },
+                        {
+                            name: 'Community programs',
+                            link: `${ES_DOMAIN}/partners/non-profits`,
+                        },
+                        {
+                            name: 'Utility programs',
+                            link: `${ES_DOMAIN}/partners/utilities`,
+                        },
+                        {
+                            name: 'Others',
+                            link: `${ES_DOMAIN}/partners/`,
+                        },
+                    ],
+                },
+            ],
+            featuredArticle: {
+                linkName: 'New research',
+                linkUrl: `${ES_DOMAIN}/press/energysage-marketplace-intel-report-18`,
+                lede: "EnergySage Intel's latest Solar & Storage Marketplace Report",
+                image500: `${ES_IMAGE_DOMAIN}/static/img/navbar/articles/latest-market-intel-500w.png`,
+                imageAlt: 'market intel report charts',
+            },
+        },
+    ],
+    products: [
+        {
+            name: 'Home solar',
+            link: `${ES_DOMAIN}/shop/home-solar/`,
+            topics: [
+                {
+                    name: 'Rooftop solar',
+                    subHeading: 'Install solar on your property',
+                    link: `${ES_DOMAIN}/shop/home-solar/`,
+                    showItemsOnMobile: false,
+                    subtopics: [
+                        {
+                            name: 'Home solar guide',
+                            link: `${ES_DOMAIN}/solar/`,
+                        },
+                        {
+                            name: 'Solar calculator',
+                            link: `${ES_DOMAIN}/solar/calculator/`,
+                        },
+                        {
+                            name: 'Search local installers',
+                            // eslint-disable-next-line max-len
+                            link: `${ES_DOMAIN}/supplier/search?selected_facets=services:installers&selected_facets=technology_types:Solar%20PV`,
+                        },
+                        {
+                            name: 'Financing',
+                            link: `${ES_DOMAIN}/solar/financing/loan-providers/`,
+                        },
+                        {
+                            name: 'Equipment rebates',
+                            link: `${ES_DOMAIN}/promotions/`,
+                        },
+                        {
+                            name: 'Compare solar panels',
+                            link: `${ES_DOMAIN}/solar-panels/`,
+                        },
+                        {
+                            name: 'Compare inverters',
+                            link: `${ES_DOMAIN}/solar-inverters/`,
+                        },
+                        {
+                            name: 'Solar incentives',
+                            link: `${ES_DOMAIN}/local-data/solar-rebates-incentives/`,
+                        },
+                        {
+                            name: 'Backup power guide',
+                            link: `${ES_DOMAIN}/energy-storage/`,
+                        },
+                        {
+                            name: 'Get personalized quotes',
+                            link: `${ES_DOMAIN}/market/start/`,
+                            emphasize: true,
+                        },
+                    ],
+                },
+                {
+                    name: 'Community solar',
+                    subHeading: 'Go solar with no equipment',
+                    link: `${ES_DOMAIN}/shop/community-solar/`,
+                    showItemsOnMobile: false,
+                    subtopics: [
+                        {
+                            name: 'Community solar guide',
+                            link: `${ES_DOMAIN}/community-solar/`,
+                        },
+                        {
+                            name: 'Search solar farms',
+                            link: `${COMMUNITY_SOLAR_DOMAIN}/projects`,
+                            newTab: true,
+                            emphasize: true,
+                        },
+                    ],
+                },
+            ],
+            featuredArticle: {
+                eyebrow: "Editors' pick",
+                link: `${ES_DOMAIN}/local-data/solar-panel-cost/`,
+                name: 'How much do solar panels cost?',
+                image500: `${ES_IMAGE_DOMAIN}/static/img/navbar/articles/solar-panel-cost-500w.png`,
+                imageAlt: 'home with solar panels and money',
+            },
+        },
+        {
+            name: 'Community solar',
+            link: `${ES_DOMAIN}/shop/community-solar/`,
+            items: [
+                {
+                    name: 'Community solar',
+                    link: `${ES_DOMAIN}/shop/community-solar/`,
+                },
+                {
+                    name: 'Community solar guide',
+                    link: `${ES_DOMAIN}/community-solar/`,
+                },
+                {
+                    name: 'Search solar farms ',
+                    link: `${COMMUNITY_SOLAR_DOMAIN}/projects`,
+                    newTab: true,
+                    emphasize: true,
+                },
+            ],
+        },
+        {
+            name: 'Heating & cooling',
+            link: `${ES_DOMAIN}/shop/heat-pumps/`,
+            items: [
+                {
+                    name: 'Heating & cooling',
+                    link: `${ES_DOMAIN}/shop/heat-pumps/`,
+                },
+                {
+                    name: 'Heat pump guide',
+                    link: `${ES_DOMAIN}/heat-pumps/`,
+                },
+                {
+                    name: 'Heat pump incentives',
+                    link: `${ES_DOMAIN}/heat-pumps/heat-pump-incentives/`,
+                },
+                {
+                    name: 'Get personalized quotes',
+                    link: `${ES_DOMAIN}/shop/heat-pumps/`,
+                    newTab: true,
+                    emphasize: true,
+                },
+            ],
+        },
+        {
+            name: 'Backup power',
+            link: `${ES_DOMAIN}/energy-storage/`,
+            items: [
+                {
+                    name: 'Backup power guide',
+                    link: `${ES_DOMAIN}/energy-storage/`,
+                },
+                {
+                    name: 'Home battery incentives',
+                    link: `${ES_DOMAIN}/energy-storage/benefits-of-storage/energy-storage-incentives/`,
+                },
+                {
+                    name: 'Compare home batteries',
+                    link: `${ES_DOMAIN}/solar-batteries/`,
+                },
+                {
+                    name: 'Get quotes for solar + batteries',
+                    link: `${ES_DOMAIN}/market/start/`,
+                    emphasize: true,
+                },
+            ],
+        },
+        {
+            name: 'EV charging',
+            link: `${ES_DOMAIN}/ev-charging/`,
+            items: [
+                {
+                    name: 'EV charging guide',
+                    link: `${ES_DOMAIN}/ev-charging/`,
+                },
+                {
+                    name: 'Electric vehicle guide',
+                    link: `${ES_DOMAIN}/electric-vehicles/`,
+                },
+                {
+                    name: 'Shop EV chargers',
+                    link: `${EV_RAIVEN_DOMAIN}`,
+                    emphasize: true,
+                },
+            ],
+        },
+        {
+            name: 'For your business',
+            link: `${ES_DOMAIN}/businesses/`,
+            items: [
+                {
+                    name: 'For your business',
+                    link: `${ES_DOMAIN}/businesses/`,
+                },
+                {
+                    name: 'Solar for businesses',
+                    link: `${ES_DOMAIN}/business-solutions/commercial-solar-benefits/`,
+                },
+                {
+                    name: 'Solar for nonprofit organizations',
+                    link: `${ES_DOMAIN}/business-solutions/solar-nonprofit-benefits-financing/`,
+                },
+                {
+                    name: 'Energy storage for businesses',
+                    link: `${ES_DOMAIN}/business-solutions/energy-storage-for-businesses/`,
+                },
+            ],
+        },
+    ],
+});
diff --git a/es-ds-docs/components/ds-es-logo.vue b/es-ds-docs/components/ds-es-logo.vue
new file mode 100644
index 000000000..f34029d32
--- /dev/null
+++ b/es-ds-docs/components/ds-es-logo.vue
@@ -0,0 +1,58 @@
+<script>
+/**
+ * for dark background, set class="text-white" on this component
+ */
+export default {
+    name: 'EsLogo',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '215px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '45px',
+            required: false,
+        },
+    },
+};
+</script>
+
+<template>
+    <svg
+        class="es-logo-2024"
+        :style="{
+            height: height,
+            width: width,
+        }"
+        viewBox="0 0 215 45"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <!-- eslint-disable -->
+        <path
+            d="M47.929 17.293c-4.967 0-8.435 3.573-8.435 8.694 0 5.12 3.533 8.533 8.593 8.533 3.42 0 5.972-1.308 6.895-2.524a.308.308 0 0 0 .029-.327l-.114-.214a.311.311 0 0 0-.466-.097 7.103 7.103 0 0 1-4.452 1.56c-2.536 0-4.866-1.33-6.077-3.47a5.229 5.229 0 0 1-.843-2.076c-.02-.129-.06-.355-.081-.605H55.22c.17 0 .308-.138.308-.307v-.832c0-4.152-2.35-8.344-7.596-8.344v.009h-.004Zm-4.78 6.534c.635-2.306 2.337-3.619 4.715-3.619 2.71 0 3.744 1.89 4.124 3.619h-8.844.004ZM83.472 17.293c-4.967 0-8.435 3.573-8.435 8.694 0 5.12 3.533 8.533 8.593 8.533 3.42 0 5.972-1.308 6.896-2.524a.309.309 0 0 0 .028-.327l-.113-.214a.311.311 0 0 0-.466-.097 7.103 7.103 0 0 1-4.453 1.56c-2.536 0-4.866-1.33-6.077-3.47a5.23 5.23 0 0 1-.843-2.076c-.02-.129-.06-.355-.08-.605h12.243c.17 0 .308-.138.308-.307v-.832c0-4.152-2.35-8.344-7.597-8.344v.009h-.004Zm-4.784 6.534c.636-2.306 2.337-3.619 4.715-3.619 2.71 0 3.744 1.89 4.125 3.619h-8.845.004ZM197.399 17.293c-4.967 0-8.435 3.573-8.435 8.694 0 5.12 3.533 8.533 8.593 8.533 3.42 0 5.972-1.308 6.896-2.524a.308.308 0 0 0 .028-.327l-.113-.214a.311.311 0 0 0-.466-.097 7.103 7.103 0 0 1-4.452 1.56c-2.537 0-4.866-1.33-6.078-3.47-.004-.008-.008-.016-.016-.024a5.219 5.219 0 0 1-.826-2.052c-.021-.129-.061-.355-.081-.605h12.243c.17 0 .308-.138.308-.307v-.832c0-4.152-2.35-8.344-7.596-8.344v.009h-.005Zm-.064 2.915c2.71 0 3.743 1.89 4.124 3.619h-8.844c.636-2.306 2.337-3.619 4.716-3.619h.004ZM27.96 29.287h-3.7a.154.154 0 0 0-.154.153v4.693c0 .084.07.153.154.153h3.7a.154.154 0 0 0 .153-.153V29.44a.154.154 0 0 0-.154-.154Z"
+            fill="currentColor" />
+        <path
+            d="M25.553 17.228h-9.61a.306.306 0 0 1-.304-.303V.303A.306.306 0 0 0 15.335 0H13.35a.454.454 0 0 0-.414.267L3.918 20.37l8.475-13.303v17.668l3.258-4.272h8.062L11.214 40.08V26.197H1.406L0 29.3h7.973V44.7c0 .166.134.299.3.299h3.484a.294.294 0 0 0 .256-.141l13.576-21.311 9.63 10.18-9.67-16.496.004-.004Z"
+            fill="#FF9133" />
+        <path
+            d="M120.195 19.182c-1.945-1.272-4.145-1.89-6.73-1.89-2.37 0-4.57.78-6.186 2.197-1.791 1.567-2.735 3.772-2.735 6.381 0 3.166 1.325 5.165 2.435 6.28 1.43 1.438 3.375 2.261 5.332 2.261 1.523 0 3.184-.634 4.391-1.635a.166.166 0 0 1 .272.129v1.963c0 3.17-1.471 4.777-4.376 4.777-2.256 0-4.29-.856-5.352-1.587-.056-.04-.129-.053-.194-.04a.25.25 0 0 0-.162.117l-1.293 2.18a.166.166 0 0 0 .049.223c1.053.714 3.415 1.974 6.952 1.974 1.455 0 3.537-.29 5.198-1.684 1.641-1.377 2.476-3.489 2.476-6.283V19.324a.171.171 0 0 0-.077-.142Zm-3.221 1.975v7.988a.19.19 0 0 1-.024.093c-.843 1.325-2.496 2.245-4.06 2.245-1.953 0-4.858-1.494-4.858-5.609 0-2.617 1.43-5.674 5.47-5.674 1.6 0 2.787.517 3.387.816a.162.162 0 0 1 .089.15v-.009h-.004ZM139.123 17.943a.249.249 0 0 0-.215-.117h-3.233a.166.166 0 0 0-.149.092l-4.996 10.347a.168.168 0 0 1-.304-.004l-4.55-10.286a.252.252 0 0 0-.226-.15h-3.148a.246.246 0 0 0-.227.351l6.466 13.966c.02.048.02.1-.004.15l-5.202 9.68a.251.251 0 0 0 .004.245.243.243 0 0 0 .214.122h3.084a.25.25 0 0 0 .222-.138l12.272-24.016a.244.244 0 0 0-.008-.242ZM145.796 24.279c-1.531-.743-2.856-1.39-2.856-2.577 0-.864.688-1.736 2.224-1.736 1.535 0 2.889 1.127 3.253 1.518a.251.251 0 0 0 .405-.044l1.155-2.04a.158.158 0 0 0-.024-.193c-.855-.885-2.743-1.947-5.142-1.947-3.034 0-5.323 1.995-5.323 4.636 0 2.504 2.289 3.691 4.307 4.741 1.6.832 2.985 1.551 2.985 2.718 0 2.177-2.021 2.346-2.641 2.346-2.236 0-3.768-1.457-4.185-1.906a.244.244 0 0 0-.207-.076.25.25 0 0 0-.186.117l-1.289 2.076a.17.17 0 0 0 .029.21c.899.831 2.909 2.29 5.972 2.29 3.549 0 5.935-2.056 5.935-5.117 0-2.876-2.342-4.01-4.404-5.016h-.008ZM167.475 19.251a11.564 11.564 0 0 0-6.409-1.954c-4.546 0-9.148 2.935-9.148 8.54 0 4.871 3.2 8.542 7.446 8.542 1.832 0 3.651-.787 4.741-1.97a.167.167 0 0 1 .291.1l.089 1.333a.162.162 0 0 0 .166.153h2.731a.164.164 0 0 0 .166-.165V19.392a.162.162 0 0 0-.073-.137v-.004Zm-3.285 1.914v7.576s0 .04-.013.06c-.474 1.281-2.272 2.678-4.173 2.678-3.16 0-4.602-2.79-4.602-5.387 0-3.4 2.326-5.868 5.534-5.868 1.268 0 2.464.384 3.173.8a.16.16 0 0 1 .081.141ZM186.1 19.182c-1.945-1.272-4.145-1.89-6.725-1.89-2.371 0-4.571.78-6.187 2.197-1.791 1.567-2.735 3.772-2.735 6.381 0 3.166 1.325 5.165 2.435 6.28 1.43 1.438 3.375 2.261 5.332 2.261 1.523 0 3.184-.634 4.392-1.635a.166.166 0 0 1 .271.129v1.963c0 3.17-1.471 4.777-4.376 4.777-2.256 0-4.29-.856-5.351-1.587-.057-.04-.126-.053-.195-.04a.25.25 0 0 0-.162.117l-1.292 2.18a.165.165 0 0 0 .048.223c1.054.714 3.416 1.974 6.952 1.974 1.455 0 3.537-.29 5.199-1.684 1.64-1.377 2.475-3.489 2.475-6.283V19.324a.169.169 0 0 0-.077-.142h-.004Zm-7.305 12.297c-1.953 0-4.858-1.494-4.858-5.609 0-2.617 1.431-5.674 5.47-5.674 1.6 0 2.787.517 3.387.816a.162.162 0 0 1 .089.15v7.983a.19.19 0 0 1-.024.093c-.843 1.325-2.496 2.245-4.06 2.245l-.004-.004ZM72.821 34.294h-3.08a.164.164 0 0 1-.165-.165l-.073-8.8v-.012a5.33 5.33 0 0 0-.584-2.16 4.783 4.783 0 0 0-1.73-1.866c-.753-.477-1.697-.715-2.8-.715-.712 0-1.251.028-1.6.084-.291.049-.579.118-.854.21a.456.456 0 0 0-.316.433V34.12a.168.168 0 0 1-.17.166c-1.102-.008-2.111-.012-3.075-.012a.164.164 0 0 1-.167-.166v-15.33c0-.072.045-.137.114-.157.636-.202 1.454-.4 2.435-.59a19.63 19.63 0 0 1 3.699-.327c1.738 0 3.261.364 4.533 1.075 1.268.71 2.265 1.688 2.954 2.895.672 1.175 1.02 2.504 1.041 3.954v8.492a.164.164 0 0 1-.166.166v.008h.004ZM104.524 18.936a.167.167 0 0 0-.069-.226c-2.95-1.623-7.48-1.006-10.53-.085a.161.161 0 0 0-.113.158v15.33c0 .092.073.165.166.165.964 0 1.977.008 3.075.012.093 0 .17-.073.17-.165V21.307c0-.198.126-.372.312-.432.875-.271 1.305-.283 2.455-.295 1.102 0 2.046.242 2.8.715.129.08.308.258.425.064l1.305-2.427h.004v.004Z"
+            fill="currentColor" />
+        <!-- eslint-enable -->
+    </svg>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.es-logo-2024 {
+    color: variables.$blue-900;
+}
+</style>
diff --git a/es-ds-docs/components/ds-organisms-list.vue b/es-ds-docs/components/ds-organisms-list.vue
index c84eda7a7..f50688cfd 100644
--- a/es-ds-docs/components/ds-organisms-list.vue
+++ b/es-ds-docs/components/ds-organisms-list.vue
@@ -9,6 +9,12 @@
         <li>
             <ds-link to="/organisms/file-preview-modal"> File preview modal </ds-link>
         </li>
+        <li>
+            <ds-link to="/organisms/footer"> Footer </ds-link>
+        </li>
+        <li>
+            <ds-link to="/organisms/nav-bar"> Nav bar </ds-link>
+        </li>
         <li>
             <ds-link to="/organisms/reviews-io-card-carousel"> Reviews.io card carousel </ds-link>
         </li>
diff --git a/es-ds-docs/layouts/footer.vue b/es-ds-docs/layouts/footer.vue
new file mode 100644
index 000000000..e62bfa834
--- /dev/null
+++ b/es-ds-docs/layouts/footer.vue
@@ -0,0 +1,58 @@
+<script setup>
+const route = useRoute();
+
+const footerContent = getEsFooterContent();
+
+const breadcrumbs = computed(() => {
+    let pathSoFar = '';
+    const paths = route.path.split('/');
+
+    // Set removes dupes from path
+    return [...new Set(paths)].map((path) => {
+        pathSoFar += path ? `/${path}` : '';
+
+        let text = 'Home';
+        // Convert to CamelCase to be in line with component naming
+        if (path) {
+            text = path.replace(/-([a-z])/g, (g) => ` ${g[1]}`);
+            text = text[0].toUpperCase() + text.slice(1);
+        }
+        return {
+            text,
+            to: pathSoFar || '/',
+        };
+    });
+});
+</script>
+
+<template>
+    <div>
+        <div class="d-flex justify-content-center">
+            <b-container class="pt-100 mx-0">
+                <b-row>
+                    <b-col
+                        class="d-none d-xl-block"
+                        xl="3">
+                        <div class="ds-side-nav flex-shrink-0">
+                            <ds-link-list />
+                        </div>
+                    </b-col>
+                    <b-col xl="9">
+                        <div class="mb-100">
+                            <es-breadcrumbs :items="breadcrumbs" />
+                        </div>
+                        <div class="mb-300">
+                            <slot />
+                        </div>
+                    </b-col>
+                </b-row>
+            </b-container>
+        </div>
+
+        <es-footer :content="footerContent">
+            <template #logo>
+                <ds-es-logo class="text-white" />
+            </template>
+        </es-footer>
+    </div>
+</template>
diff --git a/es-ds-docs/layouts/nav.vue b/es-ds-docs/layouts/nav.vue
new file mode 100644
index 000000000..097e5596b
--- /dev/null
+++ b/es-ds-docs/layouts/nav.vue
@@ -0,0 +1,61 @@
+<script setup>
+const route = useRoute();
+
+const accountContent = getEsNavBarAccountContent();
+const globalContent = getEsNavBarGlobalContent();
+
+const breadcrumbs = computed(() => {
+    let pathSoFar = '';
+    const paths = route.path.split('/');
+
+    // Set removes dupes from path
+    return [...new Set(paths)].map((path) => {
+        pathSoFar += path ? `/${path}` : '';
+
+        let text = 'Home';
+        // Convert to CamelCase to be in line with component naming
+        if (path) {
+            text = path.replace(/-([a-z])/g, (g) => ` ${g[1]}`);
+            text = text[0].toUpperCase() + text.slice(1);
+        }
+        return {
+            text,
+            to: pathSoFar || '/',
+        };
+    });
+});
+</script>
+
+<template>
+    <div>
+        <es-nav-bar
+            :account-content="accountContent"
+            :global-content="globalContent">
+            <template #logo>
+                <ds-es-logo />
+            </template>
+        </es-nav-bar>
+
+        <div class="d-flex justify-content-center">
+            <b-container class="pt-100 mx-0">
+                <b-row>
+                    <b-col
+                        class="d-none d-xl-block"
+                        xl="3">
+                        <div class="ds-side-nav flex-shrink-0">
+                            <ds-link-list />
+                        </div>
+                    </b-col>
+                    <b-col xl="9">
+                        <div class="mb-100">
+                            <es-breadcrumbs :items="breadcrumbs" />
+                        </div>
+                        <div class="mb-300">
+                            <slot />
+                        </div>
+                    </b-col>
+                </b-row>
+            </b-container>
+        </div>
+    </div>
+</template>
diff --git a/es-ds-docs/pages/organisms/footer.vue b/es-ds-docs/pages/organisms/footer.vue
new file mode 100644
index 000000000..42d7b0d5c
--- /dev/null
+++ b/es-ds-docs/pages/organisms/footer.vue
@@ -0,0 +1,34 @@
+<script setup>
+definePageMeta({
+    layout: 'footer',
+});
+
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+
+onMounted(async () => {
+    if ($prism) {
+        const compSource = await import('@energysage/es-ds-components/components/es-footer.vue?raw');
+        compCode.value = $prism.normalizeCode(compSource.default);
+
+        // eslint-disable-next-line import/no-self-import
+        const docSource = await import('./footer.vue?raw');
+        docCode.value = $prism.normalizeCode(docSource.default);
+
+        $prism.highlight();
+    }
+});
+</script>
+
+<template>
+    <div>
+        <h1>EsFooter component</h1>
+        <p>The footer is a specialized component intended for use outside the normal content container. See below.</p>
+        <ds-doc-source
+            :comp-code="compCode"
+            comp-source="es-ds-components/components/es-footer.vue"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/organisms/footer.vue" />
+    </div>
+</template>
diff --git a/es-ds-docs/pages/organisms/nav-bar.vue b/es-ds-docs/pages/organisms/nav-bar.vue
new file mode 100644
index 000000000..43fa16d8e
--- /dev/null
+++ b/es-ds-docs/pages/organisms/nav-bar.vue
@@ -0,0 +1,51 @@
+<script setup>
+definePageMeta({
+    layout: 'nav',
+});
+
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+
+const compSource = await import('@energysage/es-ds-components/components/es-nav-bar.vue?raw');
+const compSourceText = compSource.default;
+
+// eslint-disable-next-line import/no-self-import
+const docSource = await import('./nav-bar.vue?raw');
+
+const scriptRegex = /\/\/ CUSTOM GLOBAL-NAV SCRIPT STARTS([\s\S]+)\/\/ CUSTOM GLOBAL-NAV SCRIPT ENDS/;
+const navScriptSource = ref([...compSourceText.match(scriptRegex)[0]].join(''));
+
+onMounted(async () => {
+    if ($prism) {
+        compCode.value = $prism.normalizeCode(compSource.default);
+        docCode.value = $prism.normalizeCode(docSource.default);
+        $prism.highlight();
+    }
+});
+</script>
+
+<template>
+    <h1>EsNavBar</h1>
+    <p>The nav bar is a specialized component intended for use outside the normal content container. See above.</p>
+
+    <p
+        v-for="index in 10"
+        :key="index"
+        class="my-800">
+        Sample content to increase page length; for testing the sticky nav bar.
+    </p>
+
+    <!-- print out EsNavBar's mounted() script here so the rip-the-nav utility can access it -->
+    <!-- eslint-disable vue/no-v-html -->
+    <pre
+        class="d-none"
+        v-html="navScriptSource" />
+    <!-- eslint-enable vue/no-v-html -->
+
+    <ds-doc-source
+        :comp-code="compCode"
+        comp-source="es-ds-components/components/es-nav-bar.vue"
+        :doc-code="docCode"
+        doc-source="es-ds-docs/pages/organisms/nav-bar.vue" />
+</template>