diff --git a/frontend/packages/data-portal/app/components/Layout/AboutAndHelpDropdown.tsx b/frontend/packages/data-portal/app/components/Layout/AboutAndHelpDropdown.tsx
index 9988bc86e..2670286ef 100644
--- a/frontend/packages/data-portal/app/components/Layout/AboutAndHelpDropdown.tsx
+++ b/frontend/packages/data-portal/app/components/Layout/AboutAndHelpDropdown.tsx
@@ -1,39 +1,30 @@
 import { MenuDropdown } from 'app/components/MenuDropdown'
 import { MenuItemHeader } from 'app/components/MenuItemHeader'
 import { MenuItemLink } from 'app/components/MenuItemLink'
-import { i18n } from 'app/i18n'
+import { useI18n } from 'app/hooks/useI18n'
 
-const REPO = 'https://github.com/chanzuckerberg/cryoet-data-portal'
+import { ABOUT_LINKS, HELP_AND_REPORT_LINKS } from './constants'
 
 export function AboutAndHelpDropdown({ className }: { className?: string }) {
-  return (
-    <MenuDropdown className={className} title={i18n.aboutAndHelp}>
-      <MenuItemHeader>{i18n.about}</MenuItemHeader>
-
-      <MenuItemLink to="/faq">{i18n.faq}</MenuItemLink>
-      {/* <MenuItemLink to="/license">{i18n.license}</MenuItemLink> */}
-      <MenuItemLink to="/privacy">{i18n.privacyPolicy}</MenuItemLink>
-      {/* <MenuItemLink to="/terms" divider> */}
-      <MenuItemLink to="/data-submission-policy">
-        {i18n.dataSubmissionPolicy}
-      </MenuItemLink>
-      {/* <MenuItemLink to="/terms" divider>
-        {i18n.termsOfUse}
-      </MenuItemLink> */}
+  const { t } = useI18n()
 
-      <MenuItemHeader>{i18n.helpAndReport}</MenuItemHeader>
+  return (
+    <MenuDropdown className={className} title={t('aboutAndHelp')}>
+      <MenuItemHeader>{t('about')}</MenuItemHeader>
 
-      <MenuItemLink to="https://chanzuckerberg.github.io/cryoet-data-portal">
-        {i18n.goToDocs}
-      </MenuItemLink>
+      {ABOUT_LINKS.map(({ label, link }) => (
+        <MenuItemLink key={label} to={link}>
+          {t(label)}
+        </MenuItemLink>
+      ))}
 
-      <MenuItemLink
-        to={`${REPO}/issues/new?assignees=&labels=bug&projects=&template=bug.md&title=`}
-      >
-        {i18n.reportIssueOnGithub}
-      </MenuItemLink>
+      <MenuItemHeader>{t('helpAndReport')}</MenuItemHeader>
 
-      <MenuItemLink to={`${REPO}/discussions`}>{i18n.askOnGitHub}</MenuItemLink>
+      {HELP_AND_REPORT_LINKS.map(({ label, link }) => (
+        <MenuItemLink key={label} to={link}>
+          {t(label)}
+        </MenuItemLink>
+      ))}
     </MenuDropdown>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/Layout/CryoETHomeLink.tsx b/frontend/packages/data-portal/app/components/Layout/CryoETHomeLink.tsx
index 84631b7a9..0203efdb3 100644
--- a/frontend/packages/data-portal/app/components/Layout/CryoETHomeLink.tsx
+++ b/frontend/packages/data-portal/app/components/Layout/CryoETHomeLink.tsx
@@ -1,14 +1,20 @@
 import { Link } from 'app/components/Link'
-import { i18n } from 'app/i18n'
+import { SiteLinks } from 'app/constants/siteLinks'
+import { useI18n } from 'app/hooks/useI18n'
 
 export function CryoETHomeLink() {
+  const { t } = useI18n()
+
   return (
     <div className="flex items-center gap-sds-s text-sds-color-primitive-common-white">
-      <Link className="text-sds-header-m font-semibold ml-2 " to="/">
-        {i18n.title}
+      <Link
+        className="text-sds-header-m font-semibold ml-2 whitespace-nowrap"
+        to={SiteLinks.HOME}
+      >
+        {t('title')}
       </Link>
       <div className="px-sds-xs py-sds-xxxs bg-sds-color-primitive-blue-400 rounded-sds-m text-sds-body-xxxs">
-        {i18n.beta}
+        {t('beta')}
       </div>
     </div>
   )
diff --git a/frontend/packages/data-portal/app/components/Layout/Footer.tsx b/frontend/packages/data-portal/app/components/Layout/Footer.tsx
index 055e422d9..57023b514 100644
--- a/frontend/packages/data-portal/app/components/Layout/Footer.tsx
+++ b/frontend/packages/data-portal/app/components/Layout/Footer.tsx
@@ -76,17 +76,16 @@ export function Footer() {
   )
 
   return (
-    <footer className="bg-sds-color-primitive-common-black min-h-[213px] p-sds-xxl flex flex-col flex-shrink-0">
-      <div className="flex items-center flex-wrap flex-col sm:flex-row sm:gap-y-sds-xxl">
+    <footer className="bg-sds-color-primitive-common-black min-h-[213px] pt-[41px] pb-sds-xxl px-sds-xl screen-716:px-sds-xxl flex flex-col flex-shrink-0">
+      <div className="flex items-center flex-wrap flex-col screen-716:flex-row gap-y-sds-xl screen-716:gap-y-sds-xxl">
         <CryoETHomeLink />
 
-        <div className="flex-grow" />
+        <div className="flex-grow hidden screen-716:block" />
 
         <div
           className={cns(
-            'mt-sds-xxl sm:mt-0',
-            'flex flex-col sm:flex-row',
-            'items-center gap-sds-xxl',
+            'flex flex-col screen-716:flex-row',
+            'items-center gap-sds-m screen-716:gap-sds-xxl',
             'text-sds-body-s font-semibold',
           )}
         >
@@ -102,14 +101,14 @@ export function Footer() {
         </div>
       </div>
 
-      <div className="flex items-center mt-[70px] text-sds-body-s flex-col sm:flex-row gap-y-sds-xxl">
-        <div className="hidden sm:block">{legalLinks}</div>
-        <div className="sm:hidden">{cziLinks}</div>
+      <div className="flex items-center mt-[36px] screen-716:mt-[70px] text-sds-body-s flex-col screen-716:flex-row gap-y-sds-l screen-716:gap-y-sds-xxl">
+        <div className="hidden screen-716:block">{legalLinks}</div>
+        <div className="screen-716:hidden">{cziLinks}</div>
 
-        <div className="flex-grow" />
+        <div className="flex-grow hidden screen-716:block" />
 
-        <div className="sm:hidden">{legalLinks}</div>
-        <div className="hidden sm:block">{cziLinks}</div>
+        <div className="screen-716:hidden">{legalLinks}</div>
+        <div className="hidden screen-716:block">{cziLinks}</div>
       </div>
     </footer>
   )
diff --git a/frontend/packages/data-portal/app/components/Layout/MobileNavigationMenu.tsx b/frontend/packages/data-portal/app/components/Layout/MobileNavigationMenu.tsx
new file mode 100644
index 000000000..eee7d45cb
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Layout/MobileNavigationMenu.tsx
@@ -0,0 +1,73 @@
+import { Button } from '@czi-sds/components'
+
+import { Link } from 'app/components/Link'
+import { useI18n } from 'app/hooks/useI18n'
+import { I18nKeys } from 'app/types/i18n'
+
+import styles from './buttons.module.css'
+import {
+  ABOUT_LINKS,
+  HELP_AND_REPORT_LINKS,
+  NavLink,
+  TOOLS_LINKS,
+  TOP_LEVEL_LINKS,
+} from './constants'
+import { CryoETHomeLink } from './CryoETHomeLink'
+
+function SubMenu({ title, links }: { title: I18nKeys; links: NavLink[] }) {
+  const { t } = useI18n()
+
+  return (
+    <div className="border-t border-sds-gray-500 pt-sds-l flex flex-col gap-sds-l">
+      <p className="text-sds-caps-xxs leading-sds-caps-xxs font-semibold uppercase text-sds-color-primitive-gray-400">
+        {t(title)}
+      </p>
+      <div className="flex flex-col gap-sds-m">
+        {links.map(({ label, link }) => (
+          <Link
+            key={label}
+            to={link}
+            className="text-sds-header-m leading-sds-header-m font-semibold text-sds-gray-300"
+          >
+            {t(label)}
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function MobileNavigationMenu({ onClose }: { onClose: () => void }) {
+  const { t } = useI18n()
+
+  return (
+    <nav className="fixed max-w-[100vw] z-30 top-0 bottom-0 right-0 left-0 bg-sds-color-primitive-common-black screen-716:hidden px-sds-xl overflow-y-scroll">
+      <div className="flex justify-between py-sds-m items-center">
+        <CryoETHomeLink />
+        <Button
+          icon="XMark"
+          sdsSize="large"
+          sdsStyle="icon"
+          classes={{
+            root: styles.buttonX,
+          }}
+          onClick={onClose}
+        />
+      </div>
+      <div className="flex flex-col py-sds-l gap-sds-xl">
+        {TOP_LEVEL_LINKS.map(({ label, link }) => (
+          <Link
+            key={label}
+            to={link}
+            className="text-sds-header-m leading-sds-header-m font-semibold text-sds-color-primitive-gray-300"
+          >
+            {t(label)}
+          </Link>
+        ))}
+        <SubMenu title="tools" links={TOOLS_LINKS} />
+        <SubMenu title="about" links={ABOUT_LINKS} />
+        <SubMenu title="helpAndReport" links={HELP_AND_REPORT_LINKS} />
+      </div>
+    </nav>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Layout/ToolsDropdown.tsx b/frontend/packages/data-portal/app/components/Layout/ToolsDropdown.tsx
index 0832e55c4..4a250ff38 100644
--- a/frontend/packages/data-portal/app/components/Layout/ToolsDropdown.tsx
+++ b/frontend/packages/data-portal/app/components/Layout/ToolsDropdown.tsx
@@ -1,17 +1,18 @@
 import { MenuDropdown } from 'app/components/MenuDropdown'
 import { MenuItemLink } from 'app/components/MenuItemLink'
-import { i18n } from 'app/i18n'
+import { useI18n } from 'app/hooks/useI18n'
+
+import { TOOLS_LINKS } from './constants'
 
 export function ToolsDropdown({ className }: { className?: string }) {
+  const { t } = useI18n()
   return (
-    <MenuDropdown className={className} title={i18n.tools}>
-      <MenuItemLink to="https://chanzuckerberg.github.io/cryoet-data-portal/python-api.html">
-        {i18n.api}
-      </MenuItemLink>
-
-      <MenuItemLink to="https://chanzuckerberg.github.io/cryoet-data-portal/cryoet_data_portal_docsite_napari.html">
-        {i18n.napariPlugin}
-      </MenuItemLink>
+    <MenuDropdown className={className} title={t('tools')}>
+      {TOOLS_LINKS.map(({ label, link }) => (
+        <MenuItemLink key={label} to={link}>
+          {t(label)}
+        </MenuItemLink>
+      ))}
     </MenuDropdown>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx b/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx
index b204cd1f9..c5ce53bd8 100644
--- a/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx
+++ b/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx
@@ -1,72 +1,77 @@
+import { Button } from '@czi-sds/components'
 import { useLocation } from '@remix-run/react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Link } from 'app/components/Link'
-import { I18nKeys } from 'app/types/i18n'
 import { cns } from 'app/utils/cns'
 
 import { AboutAndHelpDropdown } from './AboutAndHelpDropdown'
+import styles from './buttons.module.css'
+import { TOP_LEVEL_LINKS } from './constants'
 import { CryoETHomeLink } from './CryoETHomeLink'
+import { MobileNavigationMenu } from './MobileNavigationMenu'
 import { ToolsDropdown } from './ToolsDropdown'
 
-interface TopNavLink {
-  isActive(pathname: string): boolean
-  label: I18nKeys
-  link: string
-}
-
-const TOP_NAV_LINKS: TopNavLink[] = [
-  {
-    isActive: (pathname) =>
-      pathname.includes('/datasets') ||
-      pathname.includes('/runs') ||
-      pathname.includes('/depositions'),
-    label: 'browseData',
-    link: '/browse-data/datasets',
-  },
-
-  {
-    isActive: (pathname) => pathname === '/competition',
-    label: 'competition',
-    link: '/competition',
-  },
-]
-
 export function TopNavigation() {
   const { pathname } = useLocation()
   const { t } = useTranslation()
 
+  const [mobileMenuIsOpen, setMobileMenuOpen] = useState(false)
+
+  // force close mobile menu when navigating
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [pathname])
+
   return (
     <nav
       className={cns(
         'bg-sds-color-primitive-common-black text-sds-color-primitive-common-white',
-        'flex h-[45px] flex-shrink-0 items-center px-sds-xl',
+        'flex py-sds-m flex-shrink-0 items-center px-sds-xl',
         'sticky top-0 z-30',
       )}
     >
       <CryoETHomeLink />
 
       {/* Add empty space to push content to right */}
-      <div className="flex-grow" />
+      <div className="basis-sds-xxl flex-grow screen-790:mr-sds-xxl" />
 
-      {TOP_NAV_LINKS.map((link) => (
-        <Link
-          className={cns(
-            'text-sds-header-s leading-sds-header-s font-semibold mr-sds-xxl p-0',
+      <div className="hidden screen-716:flex basis-auto flex-shrink-0">
+        {TOP_LEVEL_LINKS.map((link) => (
+          <Link
+            className={cns(
+              'text-sds-header-s leading-sds-header-s font-semibold mr-sds-xxl p-0',
+              link.isActive(pathname)
+                ? 'text-sds-color-primitive-common-white'
+                : 'text-sds-color-primitive-gray-400 hover:text-sds-color-primitive-common-white',
+            )}
+            to={link.link}
+            key={link.link}
+          >
+            {t(link.label)}
+          </Link>
+        ))}
 
-            link.isActive(pathname)
-              ? 'text-sds-color-primitive-common-white'
-              : 'text-sds-color-primitive-gray-400 hover:text-sds-color-primitive-common-white',
-          )}
-          to={link.link}
-          key={link.link}
-        >
-          {t(link.label)}
-        </Link>
-      ))}
+        <ToolsDropdown className="mr-sds-xxl text-sds-header-s" />
+        <AboutAndHelpDropdown className="screen-790:ml-sds-xxl text-sds-header-s" />
+      </div>
 
-      <ToolsDropdown className="mr-sds-xxl text-sds-header-s" />
-      <AboutAndHelpDropdown className="ml-sds-xxl text-sds-header-s" />
+      <Button
+        className="screen-716:!hidden"
+        icon="LinesHorizontal3"
+        sdsStyle="icon"
+        sdsType="tertiary"
+        sdsSize="large"
+        classes={{
+          root: styles.buttonHamburger,
+        }}
+        onClick={() => setMobileMenuOpen(true)}
+      />
+
+      {mobileMenuIsOpen && (
+        <MobileNavigationMenu onClose={() => setMobileMenuOpen(false)} />
+      )}
     </nav>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/Layout/buttons.module.css b/frontend/packages/data-portal/app/components/Layout/buttons.module.css
new file mode 100644
index 000000000..6d412aa41
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Layout/buttons.module.css
@@ -0,0 +1,14 @@
+.buttonX {
+  width: 32px !important;
+  height: 32px !important;
+
+  svg {
+    @apply !text-sds-color-primitive-common-white;
+  }
+}
+
+.buttonHamburger {
+  svg {
+    @apply !text-sds-color-primitive-gray-400;
+  }
+}
diff --git a/frontend/packages/data-portal/app/components/Layout/constants.ts b/frontend/packages/data-portal/app/components/Layout/constants.ts
new file mode 100644
index 000000000..e3982aad8
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Layout/constants.ts
@@ -0,0 +1,64 @@
+import { SiteLinks } from 'app/constants/siteLinks'
+import { I18nKeys } from 'app/types/i18n'
+
+export interface NavLink {
+  label: I18nKeys
+  link: string
+}
+
+interface TopNavLink extends NavLink {
+  isActive(pathname: string): boolean
+}
+
+export const TOP_LEVEL_LINKS: TopNavLink[] = [
+  {
+    isActive: (pathname) =>
+      pathname.includes('/datasets') ||
+      pathname.includes('/runs') ||
+      pathname.includes('/depositions'),
+    label: 'browseData',
+    link: SiteLinks.BROWSE_DATA_DATASETS,
+  },
+
+  {
+    isActive: (pathname) => pathname === '/competition',
+    label: 'competition',
+    link: SiteLinks.COMPETITION,
+  },
+]
+
+export const TOOLS_LINKS: NavLink[] = [
+  {
+    label: 'api',
+    link: 'https://chanzuckerberg.github.io/cryoet-data-portal/python-api.html',
+  },
+  {
+    label: 'napariPlugin',
+    link: 'https://chanzuckerberg.github.io/cryoet-data-portal/cryoet_data_portal_docsite_napari.html',
+  },
+]
+
+export const ABOUT_LINKS: NavLink[] = [
+  { label: 'faq', link: SiteLinks.FAQ },
+  // {label: 'license', link: '/license'},
+  { label: 'privacy', link: SiteLinks.PRIVACY },
+  // {label: 'terms', link: '/terms'},
+  { label: 'dataSubmissionPolicy', link: SiteLinks.DATA_SUBMISSION_POLICY },
+]
+
+const REPO = 'https://github.com/chanzuckerberg/cryoet-data-portal'
+
+export const HELP_AND_REPORT_LINKS: NavLink[] = [
+  {
+    label: 'goToDocs',
+    link: 'https://chanzuckerberg.github.io/cryoet-data-portal',
+  },
+  {
+    label: 'reportIssueOnGithub',
+    link: `${REPO}/issues/new?assignees=&labels=bug&projects=&template=bug.md&title=`,
+  },
+  {
+    label: 'askOnGithub',
+    link: `${REPO}/discussions`,
+  },
+]
diff --git a/frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx b/frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx
index 5c1aa80a8..6325e3d9c 100644
--- a/frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx
+++ b/frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx
@@ -15,7 +15,7 @@ export function MLChallengeHeader() {
   const { t } = useI18n()
 
   return (
-    <div className="bg-sds-color-primitive-blue-200 flex flex-col justify-center py-sds-xxl text-center">
+    <div className="bg-sds-color-primitive-blue-200 flex flex-col justify-center p-sds-xl screen-716:py-sds-xxl text-center">
       <h1 className="text-sds-header-xxl leading-sds-header-xxl font-semibold">
         {t('cryoetDataAnnotationMLComp')}
       </h1>
diff --git a/frontend/packages/data-portal/app/components/MLChallenge/MainContent.tsx b/frontend/packages/data-portal/app/components/MLChallenge/MainContent.tsx
index c07c1d2c3..b0add2b0d 100644
--- a/frontend/packages/data-portal/app/components/MLChallenge/MainContent.tsx
+++ b/frontend/packages/data-portal/app/components/MLChallenge/MainContent.tsx
@@ -34,7 +34,7 @@ function Section({
   return (
     <div
       className={cns(
-        'py-sds-xxl flex flex-col',
+        'py-sds-xl screen-716:py-sds-xxl flex flex-col',
         color &&
           'relative after:h-full after:w-[200vw] after:absolute after:top-0 after:-translate-x-1/2 after:-z-10',
         color === 'primary100' && 'after:bg-sds-color-primitive-blue-100 ',
@@ -65,7 +65,7 @@ function Headshot({
       className={cns(
         'flex flex-col items-center text-center min-w-[150px] min-h-[150px] col-span-1',
         // https://css-irl.info/controlling-leftover-grid-items/
-        'last:[&:nth-child(3n-2)]:col-span-3 screen-1024:last:[&:nth-child(3n-2)]:col-span-1',
+        'screen-716:last:[&:nth-child(3n-2)]:col-span-3 screen-1024:last:[&:nth-child(3n-2)]:col-span-1',
         'screen-1024:last:[&:nth-child(4n-2)]:col-start-3',
         'screen-1024:[&:nth-last-child(2)]:[&:nth-child(4n-3)]:col-start-2',
       )}
@@ -132,7 +132,13 @@ export function MainContent() {
         <h2 className="text-sds-header-xl leading-sds-header-xl font-semibold">
           {t('competitionData')}
         </h2>
-        <div className="p-sds-xxl bg-sds-color-primitive-common-white border border-sds-color-primitive-gray-200 rounded-sds-m shadow-sds-l flex flex-row gap-sds-xxl justify-between">
+        <div
+          className={cns(
+            'p-sds-xl screen-716:p-sds-xxl',
+            'flex flex-col-reverse screen-716:flex-row gap-sds-xl screen-716:gap-sds-xxl justify-between items-center',
+            'bg-sds-color-primitive-common-white border border-sds-color-primitive-gray-200 rounded-sds-m shadow-sds-l',
+          )}
+        >
           <div>
             <p className="text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold uppercase text-sds-color-primitive-gray-500 mb-sds-xs">
               {t('competitionDataset')}:
@@ -186,7 +192,7 @@ export function MainContent() {
         <h2 className="text-sds-header-xl leading-sds-header-xl font-semibold mb-sds-xl">
           {t('aboutTheOrganizers')}
         </h2>
-        <div className="grid grid-cols-3 screen-1024:grid-cols-4 gap-sds-xxl justify-center mb-sds-xxl">
+        <div className="grid grid-cols-2 screen-716:grid-cols-3 screen-1024:grid-cols-4 gap-sds-xxl justify-center mb-sds-xxl">
           <Headshot
             name="Bridget Carragher"
             organization={t('cziiOrganization')}
@@ -243,8 +249,8 @@ export function MainContent() {
           <p className="text-sds-caps-xxs leading-sds-caps-xxs uppercase font-semibold text-sds-color-primitive-gray-500 mb-sds-l">
             {t('sponsoredBy')}:
           </p>
-          <div className="flex flex-col screen-1024:flex-row gap-sds-xl items-center w-full justify-between">
-            <div className="w-[371px] flex justify-center">
+          <div className="flex flex-col screen-1024:flex-row gap-sds-xl items-center w-full max-w-[350px] screen-1024:max-w-none justify-between">
+            <div className="flex justify-center">
               <img
                 src="images/czii-logo.png"
                 alt="Chan Zuckerberg Imaging Institute Logo"
@@ -284,7 +290,7 @@ export function MainContent() {
           </div>
 
           <SpeechBubbleIcon
-            className="flex-shrink-0"
+            className="flex-shrink-0 hidden screen-716:block"
             color="#a9bdfc"
             width={150}
           />
diff --git a/frontend/packages/data-portal/app/components/SurveyBanner/SurveyBanner.tsx b/frontend/packages/data-portal/app/components/SurveyBanner/SurveyBanner.tsx
index be3108a81..976f4737f 100644
--- a/frontend/packages/data-portal/app/components/SurveyBanner/SurveyBanner.tsx
+++ b/frontend/packages/data-portal/app/components/SurveyBanner/SurveyBanner.tsx
@@ -34,7 +34,12 @@ export function SurveyBanner() {
   )
 
   return (
-    <div className={cns('sticky bottom-0 w-full', styles.banner)}>
+    <div
+      className={cns(
+        'hidden screen-716:block sticky bottom-0 w-full',
+        styles.banner,
+      )}
+    >
       <Banner
         dismissed={!open}
         dismissible
diff --git a/frontend/packages/data-portal/app/constants/siteLinks.ts b/frontend/packages/data-portal/app/constants/siteLinks.ts
new file mode 100644
index 000000000..829d25564
--- /dev/null
+++ b/frontend/packages/data-portal/app/constants/siteLinks.ts
@@ -0,0 +1,8 @@
+export enum SiteLinks {
+  HOME = '/',
+  COMPETITION = '/competition',
+  BROWSE_DATA_DATASETS = '/browse-data/datasets',
+  FAQ = '/faq',
+  PRIVACY = '/privacy',
+  DATA_SUBMISSION_POLICY = '/data-submission-policy',
+}
diff --git a/frontend/packages/data-portal/tailwind.config.ts b/frontend/packages/data-portal/tailwind.config.ts
index 83aeae870..9e4d8a170 100644
--- a/frontend/packages/data-portal/tailwind.config.ts
+++ b/frontend/packages/data-portal/tailwind.config.ts
@@ -23,7 +23,9 @@ export default {
       ...sds,
 
       screens: {
+        'screen-716': '716px',
         'screen-760': '760px',
+        'screen-790': '790px',
         'screen-1024': '1024px',
         'screen-2040': '2040px',
       },