diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx
index 24f640b2f..c072dec9e 100644
--- a/app/scripts/components/common/layout-root/index.tsx
+++ b/app/scripts/components/common/layout-root/index.tsx
@@ -11,12 +11,12 @@ import styled from 'styled-components';
 import { Outlet } from 'react-router';
 import { reveal } from '@devseed-ui/animation';
 import { NavLink } from 'react-router-dom';
-
 import {
   getBannerFromVedaConfig,
   getCookieConsentFromVedaConfig,
   getSiteAlertFromVedaConfig
 } from 'veda';
+import { footerSettings } from '../page-footer/default-config';
 import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
 import PageFooterLegacy from '../page-footer-legacy';
@@ -120,6 +120,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
           hideFooter={hideFooter}
           linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
           logoSvg={<NasaLogoColor />}
+          footerSettings={footerSettings}
         />
       ) : (
         <PageFooterLegacy hideFooter={hideFooter} />
diff --git a/app/scripts/components/common/page-footer/footer.test.tsx b/app/scripts/components/common/page-footer/footer.test.tsx
index 6027e1ba2..14d74bdbf 100644
--- a/app/scripts/components/common/page-footer/footer.test.tsx
+++ b/app/scripts/components/common/page-footer/footer.test.tsx
@@ -6,6 +6,18 @@ import { NavItem } from '../page-header/types.js';
 
 import PageFooter from './index';
 
+const defaultFooterSetting = {
+  secondarySection: {
+    division: 'NASA EarthData 2024',
+    version: 'BETA VERSION',
+    title: 'NASA Official',
+    name: 'Manil Maskey',
+    to: 'test@example.com',
+    type: 'email'
+  },
+  returnToTop: true
+};
+
 const mockMainNavItems: NavItem[] = navItems.mainNavItems;
 const mockSubNavItems: NavItem[] = navItems.subNavItems;
 // const mockFooterSettings = footerSettings;
@@ -40,6 +52,7 @@ describe('PageFooter', () => {
         hideFooter={hideFooter}
         logoSvg={<NasaLogoColor />}
         linkProperties={mockLinkProperties}
+        footerSettings={defaultFooterSetting}
       />
     );
     const footerElement = document.querySelector('footer');
@@ -56,6 +69,7 @@ describe('PageFooter', () => {
         hideFooter={hideFooter}
         logoSvg={<NasaLogoColor />}
         linkProperties={mockLinkProperties}
+        footerSettings={defaultFooterSetting}
       />
     );
     expect(screen.getByText('Data Catalog')).toBeInTheDocument();
@@ -89,6 +103,7 @@ describe('PageFooter dynamic settings', () => {
         subNavItems={mockSubNavItems}
         hideFooter={true}
         logoSvg={<NasaLogoColor />}
+        footerSettings={defaultFooterSetting}
       />
     );
     const footerElement = document.querySelector('footer');
diff --git a/app/scripts/components/common/page-footer/index.tsx b/app/scripts/components/common/page-footer/index.tsx
index e5ff30c4a..1c8a354dc 100644
--- a/app/scripts/components/common/page-footer/index.tsx
+++ b/app/scripts/components/common/page-footer/index.tsx
@@ -4,7 +4,6 @@ import { DropdownNavLink, NavLinkItem } from '../types';
 import { ActionNavItem, NavItemType } from '../page-header/types';
 import { NavItemCTA } from '../page-header/nav/nav-item-cta';
 import ReturnToTopButton from './return-to-top-button';
-import { footerSettings } from './default-config';
 
 import { LinkProperties } from '$types/veda';
 import {
@@ -19,15 +18,26 @@ interface PageFooterProps {
   hideFooter?: boolean;
   logoSvg?: SVGElement | JSX.Element;
   linkProperties: LinkProperties;
+  footerSettings: {
+    secondarySection: {
+      division: string;
+      version: string;
+      title: string;
+      name: string;
+      to: string;
+      type: string;
+    };
+    returnToTop: boolean;
+  };
 }
 
-
 export default function PageFooter({
   mainNavItems,
   subNavItems,
   hideFooter,
   logoSvg,
-  linkProperties
+  linkProperties,
+  footerSettings
 }: PageFooterProps) {
   const { returnToTop, secondarySection } = footerSettings;
   const FooterNavItemInternalLink = (item) => {
diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx
index 243fd1e52..f3f284ef5 100644
--- a/app/scripts/components/common/page-header/index.tsx
+++ b/app/scripts/components/common/page-header/index.tsx
@@ -4,6 +4,7 @@ import { NavItem } from './types';
 import LogoContainer from './logo-container';
 import useMobileMenuFix from './use-mobile-menu-fix';
 import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list';
+
 import {
   USWDSHeader,
   USWDSHeaderTitle,
diff --git a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx
index 11c285e6b..3e363fda2 100644
--- a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx
+++ b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import GoogleForm from '../../google-form';
-import { useFeedbackModal } from '../../layout-root';
 import { ActionNavItem } from '../types';
+import { useDisplay } from '$utils/use-display';
 
 interface NavItemCTAProps {
   item: ActionNavItem;
@@ -9,7 +9,8 @@ interface NavItemCTAProps {
 }
 
 export const NavItemCTA = ({ item, customClasses }: NavItemCTAProps) => {
-  const { isRevealed, show, hide } = useFeedbackModal();
+  const { isRevealed, show, hide } = useDisplay();
+
   return (
     <React.Fragment key={item.id}>
       {item.actionId === 'open-google-form' && (
diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index a6eaf1a07..d7e997d2d 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -27,7 +27,6 @@ import type {
 import type { InternalNavLink } from '$components/common/types';
 import type { DatasetData, StoryData, VedaData } from '$types/veda';
 
-
 import ExplorationAndAnalysis from '$components/exploration';
 import useTimelineDatasetAtom from '$components/exploration/hooks/use-timeline-dataset-atom';
 import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';
diff --git a/app/scripts/utils/use-display.tsx b/app/scripts/utils/use-display.tsx
new file mode 100644
index 000000000..be27666e2
--- /dev/null
+++ b/app/scripts/utils/use-display.tsx
@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+
+export function useDisplay() {
+  const [display, setDisplay] = useState<boolean>(false);
+
+  return {
+    isRevealed: display,
+    show: useCallback(() => setDisplay(true), [setDisplay]),
+    hide: useCallback(() => setDisplay(false), [setDisplay])
+  };
+}