diff --git a/cypress/e2e/addFeedForm.cy.ts b/cypress/e2e/addFeedForm.cy.ts
index c3163c2c..80af09bb 100644
--- a/cypress/e2e/addFeedForm.cy.ts
+++ b/cypress/e2e/addFeedForm.cy.ts
@@ -14,7 +14,7 @@ describe('Add Feed Form', () => {
     );
 
     cy.get('[data-cy="accountHeader"]').should('exist'); // assures that the user is signed in
-    cy.visit('/contribute');
+    cy.get('[data-cy="header-add-a-feed"]').click();
     // Assures that the firebase remote config has loaded for the first test
     // Optimizations can be made to make the first test run faster
     // Long timeout is to assure no flakiness
diff --git a/cypress/e2e/changepassword.cy.ts b/cypress/e2e/changepassword.cy.ts
index 33dd24fd..0941f0a6 100644
--- a/cypress/e2e/changepassword.cy.ts
+++ b/cypress/e2e/changepassword.cy.ts
@@ -7,8 +7,9 @@ describe('Change Password Screen', () => {
     cy.visit('/');
     cy.get('[data-testid="home-title"]').should('exist');
     cy.createNewUserAndSignIn(email, currentPassword);
-    cy.get('[data-cy="accountHeader"]').should('exist'); // assures that the user is signed in
-    cy.visit('/change-password');
+    cy.get('[data-cy="accountHeader"]').should('exist').click(); // assures that the user is signed in
+    cy.get('[data-cy="accountDetailsHeader"]').should('exist').click();
+    cy.get('[data-cy="changePasswordButton"]').should('exist').click();
   });
 
   it('should render components', () => {
@@ -51,7 +52,7 @@ describe('Change Password Screen', () => {
 
     // logout
     cy.get('[data-cy="signOutButton"]').click();
-    cy.get('[data-cy="confirmSignOutButton"]').should('exist').click();
+    cy.get('[data-cy="confirmSignOutButton"]').should('exist').should('not.be.disabled').click();
     cy.visit('/sign-in');
     cy.get('[data-cy="signInEmailInput"]').type(email);
     cy.get('[data-cy="signInPasswordInput"]').type(newPassword);
diff --git a/docs/ssg-initial-flow.md b/docs/ssg-initial-flow.md
new file mode 100644
index 00000000..c9b7065f
--- /dev/null
+++ b/docs/ssg-initial-flow.md
@@ -0,0 +1,43 @@
+```mermaid
+sequenceDiagram
+    autonumber
+    actor U as User
+    participant B as Browser
+    participant CDN as CDN/Edge Cache
+    participant Next as Next.js Build (CI)
+    participant I18N as next-intl (generateStaticParams)
+    participant RC as Firebase Remote Config (build-time)
+    participant JS as Client JS (Header component)
+
+    rect rgb(235, 245, 255)
+      note over Next,RC: BUILD TIME (SSG)
+      Next->>I18N: generateStaticParams() → all locales
+      I18N-->>Next: locale list
+      Next->>I18N: Build locale message bundles (baked)
+      Next->>RC: Fetch Remote Config snapshot (baked)
+      RC-->>Next: Remote Config values
+      Next->>Next: Render pages to static HTML
+      Next->>Next: Extract critical MUI styles (Emotion)
+      note over Next: <style data-emotion="mui-*"> inlined in HTML
+      Next->>Next: Emit JS/CSS assets (Header client bundle)
+      Next->>CDN: Deploy static HTML + assets
+    end
+
+    rect rgb(245, 245, 245)
+      note over U,CDN: RUNTIME (User request)
+      U->>B: Navigate to /{locale}/page
+      B->>CDN: GET /{locale}/page
+      CDN-->>B: 200 Static HTML (SSG + inline MUI styles)
+
+      note over B: ✅ Styled content is painted\n(LCP occurs here)
+
+      B->>CDN: GET external CSS (non-critical)
+      CDN-->>B: CSS files
+      B->>CDN: GET JS bundle(s)
+      CDN-->>B: JS
+
+      note over B: React hydration begins
+      B->>JS: Hydrate client components
+      note over JS: ✅ Header hydration completes\n(interactivity enabled)
+    end
+```
\ No newline at end of file
diff --git a/messages/en.json b/messages/en.json
index 0d31f83b..d5ec9866 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -471,5 +471,37 @@
       "nearby_stations": "Nearby Stations"
     },
     "unableToDetectVersions": "Unable to detect versions within this feed."
+  },
+  "home": {
+    "title": "Explore and Access Global Transit Data",
+    "servingOver": "Currently serving over",
+    "feeds": "transportation data feeds from over",
+    "fromOver": "from over",
+    "countries": "countries.",
+    "or": "or",
+    "browseFeeds": "Browse Feeds",
+    "addFeed": "Add a feed",
+    "signUpApi": "Sign up for the API",
+    "description": "The Mobility Database is an open data catalog including over 4000 GTFS, GTFS Realtime, and GBFS feeds in over 75 countries. Whether you're a transportation operator, a researcher studying public transit and shared mobility trends, or a maps app needing reliable data to use with your application, the Mobility Database has everything you need in one central location.",
+    "validatorIntro": "Our database integrates with",
+    "gtfsValidator": "the Canonical GTFS Schedule Validator",
+    "and": "and",
+    "gbfsValidator": "the GBFS Validator",
+    "validatorOutro": "to provide detailed data quality reports on every feed."
+  },
+  "about": {
+    "title": "About",
+    "description": "The Mobility Database is an open catalog including over 4000 GTFS, GTFS Realtime, and GBFS feeds in over 75 countries. It integrates with the Canonical GTFS Schedule and GBFS Validators to share data quality reports for each feed.\n\nThis database is hosted and maintained by MobilityData, the global non-profit organization dedicated to the advancement of open transportation data standards.",
+    "learnMore": "Learn more about MobilityData",
+    "whyUse": "Why Use the Mobility Database?",
+    "whyUseAnswer": "The Mobility Database provides free access to historical and current GTFS, GTFS Realtime, and GBFS feeds from around the world. These feeds are checked for updates every day, ensuring that the data you're looking at is the most recent data available.",
+    "gtfsValidator": "the Canonical GTFS Schedule Validator",
+    "gbfsValidator": "the GBFS Validator.",
+    "benefits": {
+      "mirrored": "Mirrored versions of operator-hosted GTFS Schedule feeds to avoid operator website downtimes and geoblocking",
+      "boundingBoxes": "Bounding boxes that help to visualize or filter in the API by a select region",
+      "addFeeds": "A simple, easy-to-use form to add new feeds",
+      "openSource": "An open source community actively working to improve the tools"
+    }
   }
 }
diff --git a/messages/fr.json b/messages/fr.json
index e5103d8d..563e9037 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -471,5 +471,37 @@
       "nearby_stations": "Nearby Stations"
     },
     "unableToDetectVersions": "Unable to detect versions within this feed."
+  },
+  "home": {
+    "title": "Explorez et accédez aux données de transport mondiales",
+    "servingOver": "Actuellement plus de",
+    "feeds": "flux de données de transport de plus de",
+    "fromOver": "de plus de",
+    "countries": "pays.",
+    "or": "ou",
+    "browseFeeds": "Parcourir les flux",
+    "addFeed": "Ajouter un flux",
+    "signUpApi": "S'inscrire à l'API",
+    "description": "La Mobility Database est un catalogue de données ouvertes comprenant plus de 4000 flux GTFS, GTFS Realtime et GBFS dans plus de 75 pays. Que vous soyez un opérateur de transport, un chercheur étudiant les tendances du transport public et de la mobilité partagée, ou une application de cartes ayant besoin de données fiables, la Mobility Database a tout ce dont vous avez besoin en un seul endroit.",
+    "validatorIntro": "Notre base de données s'intègre avec",
+    "gtfsValidator": "le validateur canonique GTFS Schedule",
+    "and": "et",
+    "gbfsValidator": "le validateur GBFS",
+    "validatorOutro": "pour fournir des rapports détaillés sur la qualité des données de chaque flux."
+  },
+  "about": {
+    "title": "À propos",
+    "description": "La Mobility Database est un catalogue ouvert comprenant plus de 4000 flux GTFS, GTFS Realtime et GBFS dans plus de 75 pays. Elle s'intègre avec les validateurs canoniques GTFS Schedule et GBFS pour partager des rapports de qualité des données pour chaque flux.\n\nCette base de données est hébergée et maintenue par MobilityData, l'organisation mondiale à but non lucratif dédiée à l'avancement des standards de données de transport ouvertes.",
+    "learnMore": "En savoir plus sur MobilityData",
+    "whyUse": "Pourquoi utiliser la Mobility Database ?",
+    "whyUseAnswer": "La Mobility Database fournit un accès gratuit aux flux GTFS, GTFS Realtime et GBFS historiques et actuels du monde entier. Ces flux sont vérifiés quotidiennement pour les mises à jour, garantissant que les données que vous consultez sont les plus récentes disponibles.",
+    "gtfsValidator": "le validateur canonique GTFS Schedule",
+    "gbfsValidator": "le validateur GBFS.",
+    "benefits": {
+      "mirrored": "Versions miroirs des flux GTFS Schedule hébergés par les opérateurs pour éviter les temps d'arrêt et le blocage géographique",
+      "boundingBoxes": "Boîtes englobantes pour visualiser ou filtrer par région sélectionnée dans l'API",
+      "addFeeds": "Un formulaire simple et facile à utiliser pour ajouter de nouveaux flux",
+      "openSource": "Une communauté open source travaillant activement à améliorer les outils"
+    }
   }
 }
diff --git a/package.json b/package.json
index 8e5b8d85..d94f6a8c 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,6 @@
     "react-draggable": "^4.5.0",
     "react-ga4": "^2.1.0",
     "react-google-recaptcha": "^3.1.0",
-    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.52.1",
     "react-leaflet": "^4.2.1",
     "react-map-gl": "^8.0.4",
@@ -56,6 +55,7 @@
   },
   "scripts": {
     "build:prod": "next build",
+    "build:analyze": "next experimental-analyze",
     "start:dev": "next dev",
     "start:dev:mock": "NEXT_PUBLIC_API_MOCKING=enabled next dev -p 3001",
     "start:prod": "next build && next start",
@@ -73,6 +73,9 @@
     "generate:gbfs-validator-types:output": "npm exec -- openapi-typescript ./external_types/GbfsValidator.yaml -o $npm_config_output_path && eslint $npm_config_output_path --fix",
     "generate:gbfs-validator-types": "npm run generate:gbfs-validator-types:output -- --output-file=src/app/services/feeds/gbfs-validator-types.ts"
   },
+  "resolutions": {
+    "tar": "^7.5.7"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 9b87a34e..58575a08 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -2,7 +2,7 @@
 
 import './App.css';
 import AppRouter from './router/Router';
-import { BrowserRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { anonymousLogin } from './store/profile-reducer';
 import { app } from '../firebase';
@@ -10,12 +10,36 @@ import { Suspense, useEffect, useState } from 'react';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import AppContainer from './AppContainer';
-import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { usePathname, useSearchParams } from 'next/navigation';
 
-function App(): React.ReactElement {
+interface AppProps {
+  locale?: string;
+}
+
+// Helper function to construct the full path from Next.js routing
+function buildPathFromNextRouter(
+  pathname: string,
+  searchParams: URLSearchParams,
+  locale?: string,
+): string {
+  const cleanPath =
+    locale != null && locale !== 'en'
+      ? (pathname.replace(`/${locale}`, '') ?? '/')
+      : pathname;
+
+  const searchString = searchParams.toString();
+  return searchString !== '' ? `${cleanPath}?${searchString}` : cleanPath;
+}
+
+function App({ locale }: AppProps): React.ReactElement {
   const dispatch = useDispatch();
   const [isAppReady, setIsAppReady] = useState(false);
 
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const initialPath = buildPathFromNextRouter(pathname, searchParams, locale);
+
   useEffect(() => {
     app.auth().onAuthStateChanged((user) => {
       if (user != null) {
@@ -29,24 +53,15 @@ function App(): React.ReactElement {
   }, [dispatch]);
 
   return (
-    <HelmetProvider>
-      <Helmet>
-        <meta
-          name='description'
-          content={
-            "Access GTFS, GTFS Realtime, GBFS transit data with over 4,000 feeds from 70+ countries on the web's leading transit data platform."
-          }
-        />
-      </Helmet>
-      <Suspense>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          {/* BrowserRouter will be deprecated in favor of Next AppRouter */}
-          <BrowserRouter>
-            <AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer>
-          </BrowserRouter>
-        </LocalizationProvider>
-      </Suspense>
-    </HelmetProvider>
+    <Suspense>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        {/* MemoryRouter will be deprecated in favor of Next AppRouter */}
+        {/* MemoryRouter synced with Next.js routing via RouterSync component */}
+        <MemoryRouter initialEntries={[initialPath]}>
+          <AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer>
+        </MemoryRouter>
+      </LocalizationProvider>
+    </Suspense>
   );
 }
 
diff --git a/src/app/AppContainer.tsx b/src/app/AppContainer.tsx
index d3225531..e165ab6d 100644
--- a/src/app/AppContainer.tsx
+++ b/src/app/AppContainer.tsx
@@ -4,14 +4,12 @@ import * as React from 'react';
 import { Box, LinearProgress } from '@mui/material';
 import type ContextProviderProps from './interface/ContextProviderProps';
 import { useLocation } from 'react-router-dom';
-import { Helmet } from 'react-helmet-async';
 import { selectLoadingApp } from './store/selectors';
 import { useSelector } from 'react-redux';
 
 const AppContainer: React.FC<ContextProviderProps> = ({ children }) => {
   const isAppLoading = useSelector(selectLoadingApp);
   const location = useLocation();
-  const canonicalUrl = window.location.origin + location.pathname;
 
   React.useLayoutEffect(() => {
     window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
@@ -19,9 +17,6 @@ const AppContainer: React.FC<ContextProviderProps> = ({ children }) => {
 
   return (
     <>
-      <Helmet>
-        <link rel='canonical' href={canonicalUrl} />
-      </Helmet>
       <Box id='app-main-container'>
         {isAppLoading ? (
           <Box sx={{ width: '100%', mt: '-31px' }}>
diff --git a/src/app/[[...slug]]/page.tsx b/src/app/[[...slug]]/page.tsx
deleted file mode 100644
index bd9e010c..00000000
--- a/src/app/[[...slug]]/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-// This page is temporary to ease the migration to Next.js App Router
-// It will be deprecated once the migration is fully complete
-import { type ReactNode } from 'react';
-import dynamic from 'next/dynamic';
-
-const App = dynamic(async () => await import('../App'), { ssr: false });
-
-export default function Page(): ReactNode {
-  return <App />;
-}
diff --git a/src/app/[locale]/[...slug]/page.tsx b/src/app/[locale]/[...slug]/page.tsx
new file mode 100644
index 00000000..d27f7582
--- /dev/null
+++ b/src/app/[locale]/[...slug]/page.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+// This page is temporary to ease the migration to Next.js App Router
+// It will be deprecated once the migration is fully complete
+import { type ReactNode, use, useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistStore } from 'redux-persist';
+import { store } from '../../store/store';
+import { useAppDispatch } from '../../hooks';
+import { resetProfileErrors } from '../../store/profile-reducer';
+
+const App = dynamic(async () => await import('../../App'), { ssr: false });
+
+const persistor = persistStore(store);
+
+interface PageProps {
+  params: Promise<{
+    locale: string;
+    slug: string[];
+  }>;
+}
+
+export default function Page({ params }: PageProps): ReactNode {
+  const { locale } = use(params);
+  const pathKey = use(params).slug?.join('/') ?? '/';
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    // Clean errors from previous session
+    dispatch(resetProfileErrors());
+  }, [dispatch]);
+
+  // Pass locale to App so BrowserRouter can use correct basename
+  return (
+    <PersistGate loading={null} persistor={persistor}>
+      <App locale={locale} key={pathKey} />;
+    </PersistGate>
+  );
+}
diff --git a/src/app/about/page.tsx b/src/app/[locale]/about/components/AboutPage.tsx
similarity index 54%
rename from src/app/about/page.tsx
rename to src/app/[locale]/about/components/AboutPage.tsx
index e13f6015..bdf1aac9 100644
--- a/src/app/about/page.tsx
+++ b/src/app/[locale]/about/components/AboutPage.tsx
@@ -1,12 +1,14 @@
 import { Container, Typography, Button } from '@mui/material';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { type ReactElement } from 'react';
+import { getTranslations } from 'next-intl/server';
+
+export default async function AboutPage(): Promise<ReactElement> {
+  const t = await getTranslations('about');
 
-export default function Page(): ReactElement {
   return (
     <Container component='main'>
-      <Typography variant='h1'>About</Typography>
-      {/* ColoredContainer: This component uses style which is a client use only. Investigate pattern for SSR optimal Theme rendering */}
+      <Typography variant='h1'>{t('title')}</Typography>
       <Container
         sx={{
           backgroundColor: 'background.paper',
@@ -18,14 +20,7 @@ export default function Page(): ReactElement {
         maxWidth={false}
       >
         <Typography sx={{ fontWeight: 700 }}>
-          The Mobility Database is an open catalog including over 4000 GTFS,
-          GTFS Realtime, and GBFS feeds in over 75 countries. It integrates with
-          the Canonical GTFS Schedule and GBFS Validators to share data quality
-          reports for each feed.
-          <br /> <br />
-          This database is hosted and maintained by MobilityData, the global
-          non-profit organization dedicated to the advancement of open
-          transportation data standards.
+          {t('description')}
           <br />
           <Button
             component={'a'}
@@ -36,7 +31,7 @@ export default function Page(): ReactElement {
             rel='noreferrer'
             target='_blank'
           >
-            Learn more about MobilityData
+            {t('learnMore')}
           </Button>
         </Typography>
         <Typography
@@ -44,13 +39,10 @@ export default function Page(): ReactElement {
           color='primary'
           sx={{ fontWeight: 700, mt: 5, mb: 1 }}
         >
-          Why Use the Mobility Database?
+          {t('whyUse')}
         </Typography>
-        <Typography className='answer'>
-          The Mobility Database provides free access to historical and current
-          GTFS, GTFS Realtime, and GBFS feeds from around the world. These feeds
-          are checked for updates every day, ensuring that the data you’re
-          looking at is the most recent data available.
+        <Typography component='div' className='answer'>
+          {t('whyUseAnswer')}
           <br /> <br />
           In addition to our database, we develop and maintain other tools that
           integrate with it such as&#20;
@@ -62,7 +54,7 @@ export default function Page(): ReactElement {
             target='_blank'
             endIcon={<OpenInNewIcon />}
           >
-            the Canonical GTFS Schedule Validator
+            {t('gtfsValidator')}
           </Button>
           and&#20;
           <Button
@@ -73,32 +65,24 @@ export default function Page(): ReactElement {
             target='_blank'
             endIcon={<OpenInNewIcon />}
           >
-            the GBFS Validator.
+            {t('gbfsValidator')}
           </Button>
           Additional benefits of using the Mobility Database include
           <ul>
-            <li>
-              Mirrored versions of operator-hosted GTFS Schedule feeds to avoid
-              operator website downtimes and geoblocking
-            </li>
-            <li>
-              Bounding boxes that help to visualize or filter in the API by a
-              select region
-            </li>
+            <li>{t('benefits.mirrored')}</li>
+            <li>{t('benefits.boundingBoxes')}</li>
             <li>
               <Button
                 variant='text'
                 className='line-start inline'
-                href={'/contribute'}
+                href='/contribute'
                 rel='noreferrer'
                 target='_blank'
               >
-                A simple, easy-to-use form to add new feeds
+                {t('benefits.addFeeds')}
               </Button>
             </li>
-            <li>
-              An open source community actively working to improve the tools
-            </li>
+            <li>{t('benefits.openSource')}</li>
           </ul>
         </Typography>
       </Container>
diff --git a/src/app/[locale]/about/page.tsx b/src/app/[locale]/about/page.tsx
new file mode 100644
index 00000000..e0241959
--- /dev/null
+++ b/src/app/[locale]/about/page.tsx
@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+import { setRequestLocale } from 'next-intl/server';
+import { type Locale, routing } from '../../../i18n/routing';
+import AboutPage from './components/AboutPage';
+
+export const dynamic = 'force-static';
+
+export function generateStaticParams(): Array<{
+  locale: Locale;
+}> {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface PageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function About({
+  params,
+}: PageProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return <AboutPage />;
+}
diff --git a/src/app/[locale]/components/HomePage.tsx b/src/app/[locale]/components/HomePage.tsx
new file mode 100644
index 00000000..dcf79915
--- /dev/null
+++ b/src/app/[locale]/components/HomePage.tsx
@@ -0,0 +1,223 @@
+import { type ReactElement } from 'react';
+import { Box, Typography, Button, Container, Divider } from '@mui/material';
+import {
+  Search,
+  CheckCircleOutlineOutlined,
+  PowerOutlined,
+} from '@mui/icons-material';
+import { WEB_VALIDATOR_LINK } from '../../constants/Navigation';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import SearchBox from './SearchBox';
+import { getTranslations } from 'next-intl/server';
+import '../../styles/TextShimmer.css';
+
+interface ActionBoxProps {
+  IconComponent: React.ElementType;
+  iconHeight: string;
+  buttonHref: string;
+  buttonText: string;
+}
+
+const ActionBox = ({
+  IconComponent,
+  iconHeight,
+  buttonHref,
+  buttonText,
+}: ActionBoxProps): React.ReactElement => (
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      flexGrow: 1,
+      flexBasis: 0,
+      minWidth: 0,
+    }}
+  >
+    <IconComponent sx={{ width: '100%', height: iconHeight }} />
+    <Button variant='contained' href={buttonHref} sx={{ m: 2, px: 2 }}>
+      {buttonText}
+    </Button>
+  </Box>
+);
+
+/**
+ * Home page component that fetches translations directly.
+ * Used by [locale]/page.tsx
+ */
+export default async function HomePage(): Promise<ReactElement> {
+  const t = await getTranslations('home');
+
+  return (
+    <Container component='main' sx={{ px: { xs: 0, md: 3 } }}>
+      <Box
+        component='section'
+        sx={{
+          mt: 6,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        mx={{ xs: '20px', m: 'auto' }}
+        maxWidth={{ xs: '100%', md: '1600px' }}
+        role='main'
+        aria-label='Mobility Database Home'
+      >
+        <Typography
+          component='h1'
+          sx={{
+            fontSize: {
+              xs: '36px',
+              sm: '48px',
+            },
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: 'normal',
+            textAlign: 'center',
+          }}
+          data-testid='home-title'
+          className='shimmer'
+        >
+          {t('title')}
+        </Typography>
+        <Typography
+          component='h2'
+          variant='h5'
+          sx={{
+            textAlign: 'center',
+            fontWeight: 700,
+            mt: 4,
+          }}
+        >
+          {t('servingOver')}
+          <Box
+            component='span'
+            sx={{ fontSize: 30, color: 'primary.main', mx: 1 }}
+            itemProp='numberOfItems'
+          >
+            4000
+          </Box>
+          {t('feeds')}
+          <Box
+            component='span'
+            sx={{ fontSize: 30, color: 'primary.main', mx: 1 }}
+            itemProp='spatialCoverage'
+          >
+            75
+          </Box>
+          {t('countries')}
+        </Typography>
+        <SearchBox />
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            margin: '30px 0',
+            position: 'relative',
+          }}
+        >
+          <Divider
+            sx={{
+              flexGrow: 1,
+              backgroundColor: 'text.primary',
+            }}
+            variant='middle'
+          />
+          <Typography
+            sx={{ fontWeight: 'bold', marginX: '8px' }}
+            variant='body1'
+          >
+            {t('or')}
+          </Typography>
+          <Divider
+            sx={{
+              flexGrow: 1,
+              backgroundColor: 'text.primary',
+              mx: '16',
+            }}
+            variant='middle'
+          />
+        </Box>
+        <Box
+          component='nav'
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            flexDirection: { xs: 'column', sm: 'row' },
+            width: '700px',
+            maxWidth: '100%',
+            margin: 'auto',
+          }}
+          role='navigation'
+          aria-label='Main actions'
+        >
+          <ActionBox
+            IconComponent={Search}
+            iconHeight='70px'
+            buttonHref='/feeds'
+            buttonText={t('browseFeeds')}
+          />
+          <ActionBox
+            IconComponent={CheckCircleOutlineOutlined}
+            iconHeight='70px'
+            buttonHref='/contribute'
+            buttonText={t('addFeed')}
+          />
+          <ActionBox
+            IconComponent={PowerOutlined}
+            iconHeight='70px'
+            buttonHref='/sign-up'
+            buttonText={t('signUpApi')}
+          />
+        </Box>
+        <Box
+          component='section'
+          sx={{
+            backgroundColor: 'background.paper',
+            borderRadius: '6px 0px 0px 6px',
+            p: {
+              xs: 2,
+              sm: 4,
+            },
+            fontWeight: 700,
+            mr: 0,
+            mt: 5,
+          }}
+          role='contentinfo'
+          aria-label='About Mobility Database'
+        >
+          <Typography component='h3' sx={{ fontWeight: 700, mb: 2 }}>
+            About Our Platform
+          </Typography>
+          <Typography sx={{ mb: 2 }}>{t('description')}</Typography>
+          <Typography sx={{ mb: 2 }}>
+            {t('validatorIntro')}
+            <Button
+              variant='text'
+              className='inline'
+              href={WEB_VALIDATOR_LINK}
+              rel='noreferrer'
+              target='_blank'
+              endIcon={<OpenInNewIcon />}
+              aria-label='GTFS Validator - Opens in new tab'
+            >
+              {t('gtfsValidator')}
+            </Button>
+            {t('and')}
+            <Button
+              variant='text'
+              className='inline'
+              href='https://gbfs-validator.mobilitydata.org/'
+              rel='noreferrer'
+              target='_blank'
+              endIcon={<OpenInNewIcon />}
+              aria-label='GBFS Validator - Opens in new tab'
+            >
+              {t('gbfsValidator')}
+            </Button>
+            {t('validatorOutro')}
+          </Typography>
+        </Box>
+      </Box>
+    </Container>
+  );
+}
diff --git a/src/app/[locale]/components/SearchBox.tsx b/src/app/[locale]/components/SearchBox.tsx
new file mode 100644
index 00000000..40236eac
--- /dev/null
+++ b/src/app/[locale]/components/SearchBox.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { Box, Button, TextField, InputAdornment } from '@mui/material';
+import { Search } from '@mui/icons-material';
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+
+export default function SearchBox(): React.ReactElement {
+  const [searchInputValue, setSearchInputValue] = useState('');
+  const tCommon = useTranslations('common');
+  const router = useRouter();
+
+  const handleSearch = (): void => {
+    const encodedURI = encodeURIComponent(searchInputValue.trim());
+    if (encodedURI.length === 0) {
+      router.push('/feeds');
+    } else {
+      router.push(`/feeds?q=${encodedURI}`);
+    }
+  };
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <TextField
+        sx={{
+          width: '80%',
+          mt: 6,
+          fieldset: {
+            borderColor: 'primary.main',
+          },
+        }}
+        value={searchInputValue}
+        onChange={(e) => {
+          setSearchInputValue(e.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder='e.g. "New York" or "Carris Metropolitana"'
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position={'start'}>
+                <Search />
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <Button
+        sx={{
+          mt: 6,
+          py: 1.5,
+          ml: 1,
+          height: 55,
+          boxShadow: 0,
+        }}
+        variant='contained'
+        color='primary'
+        onClick={handleSearch}
+      >
+        {tCommon('search')}
+      </Button>
+    </Box>
+  );
+}
diff --git a/src/app/feeds/[feedDataType]/[feedId]/loading.tsx b/src/app/[locale]/feeds/[feedDataType]/[feedId]/loading.tsx
similarity index 100%
rename from src/app/feeds/[feedDataType]/[feedId]/loading.tsx
rename to src/app/[locale]/feeds/[feedDataType]/[feedId]/loading.tsx
diff --git a/src/app/feeds/[feedDataType]/[feedId]/map/page.tsx b/src/app/[locale]/feeds/[feedDataType]/[feedId]/map/page.tsx
similarity index 78%
rename from src/app/feeds/[feedDataType]/[feedId]/map/page.tsx
rename to src/app/[locale]/feeds/[feedDataType]/[feedId]/map/page.tsx
index 5d87c663..8dbf4d13 100644
--- a/src/app/feeds/[feedDataType]/[feedId]/map/page.tsx
+++ b/src/app/[locale]/feeds/[feedDataType]/[feedId]/map/page.tsx
@@ -1,4 +1,4 @@
-import FullMapView from '../../../../screens/Feed/components/FullMapView';
+import FullMapView from '../../../../../screens/Feed/components/FullMapView';
 import { type ReactElement } from 'react';
 
 export default function FullMapViewPage(): ReactElement {
diff --git a/src/app/feeds/[feedDataType]/[feedId]/page.tsx b/src/app/[locale]/feeds/[feedDataType]/[feedId]/page.tsx
similarity index 96%
rename from src/app/feeds/[feedDataType]/[feedId]/page.tsx
rename to src/app/[locale]/feeds/[feedDataType]/[feedId]/page.tsx
index 146e37c8..0850dce2 100644
--- a/src/app/feeds/[feedDataType]/[feedId]/page.tsx
+++ b/src/app/[locale]/feeds/[feedDataType]/[feedId]/page.tsx
@@ -1,6 +1,6 @@
 import { type ReactElement } from 'react';
 import { cache } from 'react';
-import FeedView from '../../../screens/Feed/FeedView';
+import FeedView from '../../../../screens/Feed/FeedView';
 import {
   getFeed,
   getGtfsFeed,
@@ -9,24 +9,25 @@ import {
   getGtfsFeedDatasets,
   getGtfsFeedRoutes,
   getGtfsFeedAssociatedGtfsRtFeeds,
-} from '../../../services/feeds';
+} from '../../../../services/feeds';
 import { notFound } from 'next/navigation';
 import type { Metadata, ResolvingMetadata } from 'next';
-import {
-  getSSRAccessToken,
-  getUserContextJwtFromCookie,
-} from '../../../utils/auth-server';
+
 import {
   type GTFSFeedType,
   type GTFSRTFeedType,
-} from '../../../services/feeds/utils';
+} from '../../../../services/feeds/utils';
 import {
   formatProvidersSorted,
   generatePageTitle,
   generateDescriptionMetaTag,
-} from '../../../screens/Feed/Feed.functions';
-import generateFeedStructuredData from '../../../screens/Feed/StructuredData.functions';
+} from '../../../../screens/Feed/Feed.functions';
+import generateFeedStructuredData from '../../../../screens/Feed/StructuredData.functions';
 import { getTranslations } from 'next-intl/server';
+import {
+  getSSRAccessToken,
+  getUserContextJwtFromCookie,
+} from '../../../../utils/auth-server';
 
 interface Props {
   params: Promise<{ feedDataType: string; feedId: string }>;
diff --git a/src/app/feeds/[feedDataType]/page.tsx b/src/app/[locale]/feeds/[feedDataType]/page.tsx
similarity index 89%
rename from src/app/feeds/[feedDataType]/page.tsx
rename to src/app/[locale]/feeds/[feedDataType]/page.tsx
index 7ff203b7..7677bdf4 100644
--- a/src/app/feeds/[feedDataType]/page.tsx
+++ b/src/app/[locale]/feeds/[feedDataType]/page.tsx
@@ -6,8 +6,8 @@
  */
 
 import { type ReactElement } from 'react';
-import { getFeed } from '../../services/feeds';
-import { getSSRAccessToken } from '../../utils/auth-server';
+import { getFeed } from '../../../services/feeds';
+import { getSSRAccessToken } from '../../../utils/auth-server';
 import { notFound, redirect } from 'next/navigation';
 
 interface Props {
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
new file mode 100644
index 00000000..15d2b089
--- /dev/null
+++ b/src/app/[locale]/layout.tsx
@@ -0,0 +1,120 @@
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { Analytics } from '@vercel/analytics/next';
+import ThemeRegistry from '../registry';
+import { Providers } from '../providers';
+import { type ReactElement } from 'react';
+import { NextIntlClientProvider, hasLocale } from 'next-intl';
+import { getMessages, setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { getRemoteConfigValues } from '../../lib/remote-config.server';
+import { Mulish, IBM_Plex_Mono } from 'next/font/google';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import { Container } from '@mui/material';
+import { type Locale, routing } from '../../i18n/routing';
+
+export const metadata = {
+  title: 'Mobility Database',
+  description:
+    "Access GTFS, GTFS Realtime, GBFS transit data with over 4,000 feeds from 70+ countries on the web's leading transit data platform.",
+  robots:
+    process.env.VERCEL_ENV === 'production'
+      ? 'index, follow'
+      : 'noindex, nofollow',
+};
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 5,
+};
+
+const mulish = Mulish({
+  weight: ['400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-mulish',
+});
+
+const ibmPlexMono = IBM_Plex_Mono({
+  weight: ['400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-ibm-plex-mono',
+});
+
+/**
+ * Generate static params for all locales.
+ * This enables static generation for locale-prefixed routes.
+ */
+export function generateStaticParams(): Array<{ locale: Locale }> {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface LocaleLayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+/**
+ * Root layout for all locale-based pages.
+ * Provides i18n context, theme, and app shell (header/footer).
+ */
+export default async function LocaleLayout({
+  children,
+  params,
+}: LocaleLayoutProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  // Validate the locale and narrow the type
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  // At this point, locale is guaranteed to be a valid Locale type
+  const validLocale = locale as Locale;
+
+  // Enable static rendering for this locale
+  setRequestLocale(validLocale);
+
+  const [messages, remoteConfig] = await Promise.all([
+    getMessages(),
+    getRemoteConfigValues(),
+  ]);
+
+  return (
+    <html lang={validLocale}>
+      <head>
+        <link rel='preconnect' href='https://firebaseapp.com' />
+        <link rel='dns-prefetch' href='https://firebaseapp.com' />
+      </head>
+      <body className={`${mulish.variable} ${ibmPlexMono.variable}`}>
+        <ThemeRegistry>
+          <NextIntlClientProvider messages={messages}>
+            <Providers remoteConfig={remoteConfig}>
+              <Header />
+              <Container
+                maxWidth={false}
+                disableGutters
+                component={'main'}
+                id='next'
+                sx={{
+                  minHeight: 'calc(100vh - 32px - 64px - 232px - 20px)',
+                }}
+              >
+                {children}
+                {process.env.VERCEL_ENV === 'production' && (
+                  <>
+                    <SpeedInsights />
+                    <Analytics />
+                  </>
+                )}
+              </Container>
+              <Footer />
+            </Providers>
+          </NextIntlClientProvider>
+        </ThemeRegistry>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
new file mode 100644
index 00000000..2f36cf03
--- /dev/null
+++ b/src/app/[locale]/page.tsx
@@ -0,0 +1,59 @@
+import { type ReactElement } from 'react';
+import { setRequestLocale } from 'next-intl/server';
+import { type AVAILABLE_LOCALES, routing } from '../../i18n/routing';
+import HomePage from './components/HomePage';
+import { type Metadata } from 'next';
+
+export const dynamic = 'force-static';
+
+export function generateStaticParams(): Array<{
+  locale: (typeof AVAILABLE_LOCALES)[number];
+}> {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface PageProps {
+  params: Promise<{ locale: (typeof AVAILABLE_LOCALES)[number] }>;
+}
+
+export const metadata: Metadata = {
+  title: 'Mobility Database',
+  description:
+    'Discover open public transit data worldwide. Mobility Database provides GTFS, GTFS-RT, and GBFS feeds to help developers, cities, and agencies build better mobility tools.',
+  applicationName: 'Mobility Database',
+
+  metadataBase: new URL('https://mobilitydatabase.org'),
+
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    type: 'website',
+    url: 'https://mobilitydatabase.org',
+    siteName: 'Mobility Database',
+    title: 'Mobility Database',
+    description:
+      'Discover open public transit data worldwide. Find GTFS, GTFS-RT, and GBFS feeds to build better mobility applications.',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+      'max-video-preview': -1,
+    },
+  },
+};
+
+export default async function Home({
+  params,
+}: PageProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return <HomePage />;
+}
diff --git a/src/app/components/Context.tsx b/src/app/components/Context.tsx
index ff4551b1..672f3a59 100644
--- a/src/app/components/Context.tsx
+++ b/src/app/components/Context.tsx
@@ -1,42 +1,20 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import type ContextProviderProps from '../interface/ContextProviderProps';
 import { Provider } from 'react-redux';
 import { store } from '../store/store';
-import { PersistGate } from 'redux-persist/integration/react';
-import { persistStore } from 'redux-persist';
-import { useAppDispatch } from '../hooks';
-import { resetProfileErrors } from '../store/profile-reducer';
 
-const persistor = persistStore(store);
 /**
- * This component is used to wrap the entire application
- */
-const AppContent: React.FC<ContextProviderProps> = ({ children }) => {
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    // This function will run when the component is first loaded
-    // Clean errros from previous session
-    dispatch(resetProfileErrors());
-  }, []);
-  return (
-    <PersistGate loading={null} persistor={persistor}>
-      {children}
-    </PersistGate>
-  );
-};
-
-/**
- * This component is used to wrap the entire application adding the store provider and reseting the errors from previous session
+ * This component is used to wrap the entire application with Redux Provider
+ * It provides the Redux store to all components in the app
+ * IMPORTANT: This does not include the PersistGate, which is used in the page component to delay rendering until the store is rehydrated
+ * This allows for a fast initial render, but makes it possible for components to access the store before it's fully rehydrated.
+ * This also allows for us to have SSG pages that use Redux. It also allows for these pages to be rendered purely in HTML on the server side without waiting for Redux Persist to rehydrate the store.
+ * Use the `useRehydrated` hook to check rehydration status if needed.
  */
 const ContextProviders: React.FC<ContextProviderProps> = ({ children }) => {
-  return (
-    <Provider store={store}>
-      <AppContent>{children}</AppContent>
-    </Provider>
-  );
+  return <Provider store={store}>{children}</Provider>;
 };
 
 export default ContextProviders;
diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
index 50059614..be910eeb 100644
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import dynamic from 'next/dynamic';
 import {
   AppBar,
   Box,
@@ -14,7 +15,6 @@ import {
   MenuItem,
   Select,
   useTheme,
-  Link,
   Alert,
   AlertTitle,
 } from '@mui/material';
@@ -30,8 +30,8 @@ import {
   gbfsMetricsNavItems,
 } from '../constants/Navigation';
 import type NavigationItem from '../interface/Navigation';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import LogoutConfirmModal from './LogoutConfirmModal';
+import { usePathname, useRouter } from 'next/navigation';
+import Image from 'next/image';
 import { BikeScooterOutlined, OpenInNew } from '@mui/icons-material';
 import { useRemoteConfig } from '../context/RemoteConfigProvider';
 import { NestedMenuItem } from 'mui-nested-menu';
@@ -40,25 +40,52 @@ import DepartureBoardIcon from '@mui/icons-material/DepartureBoard';
 import { fontFamily } from '../Theme';
 import { defaultRemoteConfigValues } from '../interface/RemoteConfig';
 import { animatedButtonStyling } from './Header.style';
-import DrawerContent from './HeaderMobileDrawer';
 import ThemeToggle from './ThemeToggle';
 import { useTranslations, useLocale } from 'next-intl';
-import { useSelector } from 'react-redux';
-import {
-  selectIsAuthenticated,
-  selectUserEmail,
-} from '../store/profile-selectors';
+import Link from 'next/link';
+import { app } from '../../firebase';
+
+// Lazy load components not needed for initial render
+const LogoutConfirmModal = dynamic(
+  async () => await import('./LogoutConfirmModal'),
+  {
+    ssr: false,
+  },
+);
+const DrawerContent = dynamic(
+  async () => await import('./HeaderMobileDrawer'),
+  {
+    ssr: false,
+  },
+);
+
+// Hook to safely access search params only on client
+function useClientSearchParams(): URLSearchParams | null {
+  const [searchParams, setSearchParams] =
+    React.useState<URLSearchParams | null>(null);
+
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setSearchParams(new URLSearchParams(window.location.search));
+    }
+  }, []);
+
+  return searchParams;
+}
 
 export default function DrawerAppBar(): React.ReactElement {
-  const searchParams = useSearchParams();
+  const [currentUser, setCurrentUser] = React.useState<
+    { email: string; isAuthenticated: boolean } | undefined
+  >(undefined);
+  const clientSearchParams = useClientSearchParams();
   const hasTransitFeedsRedirectParam =
-    searchParams.get('utm_source') === 'transitfeeds';
+    clientSearchParams?.get('utm_source') === 'transitfeeds';
+
   const theme = useTheme();
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = React.useState(false);
-  const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] = React.useState(
-    hasTransitFeedsRedirectParam,
-  );
+  const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] =
+    React.useState(false);
   const [openDialog, setOpenDialog] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('');
   const [navigationItems, setNavigationItems] = React.useState<
@@ -68,6 +95,29 @@ export default function DrawerAppBar(): React.ReactElement {
   const { config } = useRemoteConfig();
   const t = useTranslations('common');
 
+  React.useEffect(() => {
+    const auth = app.auth();
+    const unsubscribe = auth.onAuthStateChanged(async (user) => {
+      if (user != null) {
+        setCurrentUser({
+          email: user.email ?? '',
+          isAuthenticated: !user.isAnonymous,
+        });
+      } else {
+        setCurrentUser(undefined);
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (hasTransitFeedsRedirectParam) {
+      setHasTransitFeedsRedirect(true);
+    }
+  }, [hasTransitFeedsRedirectParam]);
+
   React.useEffect(() => {
     setActiveTab(pathname ?? '');
   }, [pathname]);
@@ -77,8 +127,9 @@ export default function DrawerAppBar(): React.ReactElement {
   }, [config]);
 
   const router = useRouter();
-  const isAuthenticated = useSelector(selectIsAuthenticated);
-  const userEmail = useSelector(selectUserEmail);
+
+  const isAuthenticated = currentUser != null && currentUser.isAuthenticated;
+  const userEmail = currentUser?.email;
 
   const handleDrawerToggle = (): void => {
     setMobileOpen((prevState) => !prevState);
@@ -100,7 +151,7 @@ export default function DrawerAppBar(): React.ReactElement {
   };
 
   const container =
-    window !== undefined ? () => window.document.body : undefined;
+    typeof window !== 'undefined' ? () => window.document.body : undefined;
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
@@ -150,7 +201,7 @@ export default function DrawerAppBar(): React.ReactElement {
             >
               <MenuIcon />
             </IconButton>
-            <a
+            <Link
               href={'/'}
               style={{
                 textDecoration: 'none',
@@ -159,22 +210,14 @@ export default function DrawerAppBar(): React.ReactElement {
               }}
               className='btn-link'
             >
-              <picture style={{ display: 'flex' }}>
-                <source
-                  media='(min-width: 50px)'
-                  srcSet='/assets/MOBILTYDATA_logo_purple_M.webp'
-                  width='50'
-                  height='50'
-                />
-                <source
-                  src='/assets/MOBILTYDATA_logo_purple_M.png'
-                  type='image/png'
-                />
-                <img
-                  alt='MobilityData logo'
-                  src='/assets/MOBILTYDATA_logo_purple_M.png'
-                />
-              </picture>
+              <Image
+                src='/assets/MOBILTYDATA_logo_purple_M.webp'
+                alt='MobilityData logo'
+                width={50}
+                height={50}
+                priority
+                fetchPriority='high'
+              />
               <Typography
                 variant='h5'
                 component='h1'
@@ -187,28 +230,34 @@ export default function DrawerAppBar(): React.ReactElement {
               >
                 Mobility Database
               </Typography>
-            </a>
+            </Link>
           </Box>
 
           <Box sx={{ display: { xs: 'none', md: 'block' } }}>
             {navigationItems.map((item) => (
-              <Button
-                sx={(theme) => ({
-                  ...animatedButtonStyling(theme),
-                  color: theme.palette.text.primary,
-                })}
+              <Link
+                data-cy={
+                  'header-' + item.title.toLowerCase().replace(/\s+/g, '-')
+                }
                 href={item.external === true ? item.target : '/' + item.target}
                 key={item.title}
                 target={item.external === true ? '_blank' : '_self'}
                 rel={item.external === true ? 'noopener noreferrer' : ''}
-                variant={'text'}
-                endIcon={item.external === true ? <OpenInNew /> : null}
-                className={
-                  activeTab.includes('/' + item.target) ? 'active' : ''
-                }
               >
-                {item.title}
-              </Button>
+                <Button
+                  sx={(theme) => ({
+                    ...animatedButtonStyling(theme),
+                    color: theme.palette.text.primary,
+                  })}
+                  variant={'text'}
+                  endIcon={item.external === true ? <OpenInNew /> : null}
+                  className={
+                    activeTab.includes('/' + item.target) ? 'active' : ''
+                  }
+                >
+                  {item.title}
+                </Button>
+              </Link>
             ))}
             {config.gbfsValidator && (
               <>
@@ -357,6 +406,7 @@ export default function DrawerAppBar(): React.ReactElement {
                   onClose={handleMenuClose}
                 >
                   <MenuItem
+                    data-cy='accountDetailsHeader'
                     onClick={() => {
                       handleMenuItemClick(navigationAccountItem);
                     }}
@@ -429,9 +479,9 @@ export default function DrawerAppBar(): React.ReactElement {
             severity='warning'
             onClose={() => {
               setHasTransitFeedsRedirect(false);
-              if (hasTransitFeedsRedirectParam) {
+              if (hasTransitFeedsRedirectParam && clientSearchParams != null) {
                 // Remove utm_source from URL
-                const newSearchParams = new URLSearchParams(searchParams);
+                const newSearchParams = new URLSearchParams(clientSearchParams);
                 newSearchParams.delete('utm_source');
                 const newPath = `${pathname}?${newSearchParams.toString()}`;
                 router.replace(newPath);
@@ -469,6 +519,7 @@ export default function DrawerAppBar(): React.ReactElement {
           }}
         >
           <DrawerContent
+            isAuthenticated={isAuthenticated}
             onLogoutClick={handleLogoutClick}
             navigationItems={navigationItems}
             metricsOptionsEnabled={metricsOptionsEnabled}
diff --git a/src/app/components/HeaderMobileDrawer.tsx b/src/app/components/HeaderMobileDrawer.tsx
index 73a08caa..3eabc7ef 100644
--- a/src/app/components/HeaderMobileDrawer.tsx
+++ b/src/app/components/HeaderMobileDrawer.tsx
@@ -13,7 +13,6 @@ import {
   useTheme,
   Link,
 } from '@mui/material';
-import { useSelector } from 'react-redux';
 import { useRouter } from 'next/navigation';
 import {
   ACCOUNT_TARGET,
@@ -22,7 +21,6 @@ import {
   SIGN_IN_TARGET,
 } from '../constants/Navigation';
 import type NavigationItem from '../interface/Navigation';
-import { selectIsAuthenticated } from '../store/profile-selectors';
 import { fontFamily } from '../Theme';
 import { mobileNavElementStyle } from './Header.style';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -32,17 +30,18 @@ import { useTranslations } from 'next-intl';
 const websiteTile = 'Mobility Database';
 
 interface DrawerContentProps {
+  isAuthenticated: boolean;
   onLogoutClick: React.MouseEventHandler;
   navigationItems: NavigationItem[];
   metricsOptionsEnabled: boolean;
 }
 
 export default function DrawerContent({
+  isAuthenticated,
   onLogoutClick,
   navigationItems,
   metricsOptionsEnabled,
 }: DrawerContentProps): React.ReactElement {
-  const isAuthenticated = useSelector(selectIsAuthenticated);
   const router = useRouter();
   const { config } = useRemoteConfig();
   const t = useTranslations('common');
diff --git a/src/app/components/LogoutConfirmModal.tsx b/src/app/components/LogoutConfirmModal.tsx
index e086e81c..681d2c5a 100644
--- a/src/app/components/LogoutConfirmModal.tsx
+++ b/src/app/components/LogoutConfirmModal.tsx
@@ -10,7 +10,7 @@ import {
   Dialog,
 } from '@mui/material';
 import React from 'react';
-import { useAppDispatch } from '../hooks';
+import { useAppDispatch, useRehydrated } from '../hooks';
 import { logout } from '../store/profile-reducer';
 import { SIGN_OUT_TARGET } from '../constants/Navigation';
 import { useRouter } from 'next/navigation';
@@ -26,6 +26,7 @@ export default function ConfirmModal({
 }: ConfirmModalProps): React.ReactElement {
   const dispatch = useAppDispatch();
   const router = useRouter();
+  const isRehydrated = useRehydrated();
   const confirmLogout = (): void => {
     dispatch(
       logout({
@@ -65,6 +66,7 @@ export default function ConfirmModal({
             color='primary'
             variant='contained'
             data-cy='confirmSignOutButton'
+            disabled={!isRehydrated}
           >
             Confirm
           </Button>
diff --git a/src/app/components/ThemeToggle.tsx b/src/app/components/ThemeToggle.tsx
index aaefd056..b1ec9cd4 100644
--- a/src/app/components/ThemeToggle.tsx
+++ b/src/app/components/ThemeToggle.tsx
@@ -4,15 +4,11 @@ import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { useTheme } from '../context/ThemeProvider';
 
 const ThemeToggle = (): React.ReactElement => {
-  const { toggleTheme } = useTheme();
+  const { mode, toggleTheme } = useTheme();
 
   return (
     <IconButton onClick={toggleTheme} color='inherit' aria-label='Theme Toggle'>
-      {localStorage.getItem('theme') === 'dark' ? (
-        <Brightness7Icon />
-      ) : (
-        <Brightness4Icon />
-      )}
+      {mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
     </IconButton>
   );
 };
diff --git a/src/app/context/ThemeProvider.tsx b/src/app/context/ThemeProvider.tsx
index 016a2e16..f9790436 100644
--- a/src/app/context/ThemeProvider.tsx
+++ b/src/app/context/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useState, useMemo, useContext } from 'react';
+import { createContext, useState, useMemo, useContext, useEffect } from 'react';
 import {
   ThemeProvider as MuiThemeProvider,
   CssBaseline,
@@ -9,33 +9,48 @@ import {
 import { getTheme, ThemeModeEnum } from '../Theme';
 import type ContextProviderProps from '../interface/ContextProviderProps';
 
-const ThemeContext = createContext({ toggleTheme: () => {} });
+// TODO: Revisit theme for best SSR practices
 
-function getInitialThemeMode(prefersDarkMode: boolean): ThemeModeEnum {
-  if (typeof window !== 'undefined' && localStorage.getItem('theme') != null) {
-    return localStorage.getItem('theme') as ThemeModeEnum;
-  } else {
-    return prefersDarkMode ? ThemeModeEnum.dark : ThemeModeEnum.light;
-  }
-}
+const ThemeContext = createContext({
+  mode: ThemeModeEnum.light,
+  toggleTheme: () => {},
+});
 
 export const ThemeProvider: React.FC<ContextProviderProps> = ({ children }) => {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  // Initialize with system preference for SSR, then check localStorage on client
   const [mode, setMode] = useState<ThemeModeEnum>(
-    getInitialThemeMode(prefersDarkMode),
+    prefersDarkMode ? ThemeModeEnum.dark : ThemeModeEnum.light,
   );
 
+  // Load theme from localStorage only on client side
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const savedTheme = localStorage.getItem('theme');
+      if (
+        savedTheme != null &&
+        savedTheme !== '' &&
+        Object.values(ThemeModeEnum).includes(savedTheme as ThemeModeEnum)
+      ) {
+        setMode(savedTheme as ThemeModeEnum);
+      }
+    }
+  }, []);
+
   const toggleTheme = (): void => {
     const newMode =
       mode === ThemeModeEnum.light ? ThemeModeEnum.dark : ThemeModeEnum.light;
     setMode(newMode);
-    localStorage.setItem('theme', newMode);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('theme', newMode);
+    }
   };
 
   const theme = useMemo(() => getTheme(mode), [mode]);
 
   return (
-    <ThemeContext.Provider value={{ toggleTheme }}>
+    <ThemeContext.Provider value={{ mode, toggleTheme }}>
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
         {children}
@@ -44,5 +59,5 @@ export const ThemeProvider: React.FC<ContextProviderProps> = ({ children }) => {
   );
 };
 
-export const useTheme = (): { toggleTheme: () => void } =>
+export const useTheme = (): { mode: ThemeModeEnum; toggleTheme: () => void } =>
   useContext(ThemeContext);
diff --git a/src/app/hooks/index.ts b/src/app/hooks/index.ts
index 7b793782..b28e4c36 100644
--- a/src/app/hooks/index.ts
+++ b/src/app/hooks/index.ts
@@ -8,3 +8,12 @@ import { type RootState, type AppDispatch } from '../store/store';
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = (): AppDispatch => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+// Hook to check if redux-persist has finished rehydrating the store
+// This allows us to display content before the store is fully rehydrated while giving us a way to check rehydration status if needed (e.g. to delay rendering of certain components until rehydration is complete)
+export const useRehydrated = (): boolean => {
+  return useAppSelector((state) => {
+    // Redux-persist adds a _persist key to the state with rehydrated status
+    return state?._persist?.rehydrated ?? false;
+  });
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
deleted file mode 100644
index 9695a651..00000000
--- a/src/app/layout.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { SpeedInsights } from '@vercel/speed-insights/next';
-import { Analytics } from '@vercel/analytics/next';
-import ThemeRegistry from './registry';
-import { Providers } from './providers';
-import { type ReactElement } from 'react';
-import { NextIntlClientProvider } from 'next-intl';
-import { getLocale, getMessages } from 'next-intl/server';
-import { getRemoteConfigValues } from '../lib/remote-config.server';
-import { Mulish, IBM_Plex_Mono } from 'next/font/google';
-import Footer from './components/Footer';
-import Header from './components/Header';
-import { Container } from '@mui/material';
-
-export const metadata = {
-  title: 'Mobility Database',
-  description: 'Mobility Database',
-  robots:
-    process.env.VERCEL_ENV === 'production'
-      ? 'index, follow'
-      : 'noindex, nofollow',
-};
-
-const mulish = Mulish({
-  weight: ['400', '500', '700'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-mulish',
-});
-
-const ibmPlexMono = IBM_Plex_Mono({
-  weight: ['400', '500', '700'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-ibm-plex-mono',
-});
-
-export default async function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}): Promise<ReactElement> {
-  const [locale, messages, remoteConfig] = await Promise.all([
-    getLocale(),
-    getMessages(),
-    getRemoteConfigValues(),
-  ]);
-
-  return (
-    <html lang={locale}>
-      <body className={`${mulish.variable} ${ibmPlexMono.variable}`}>
-        <ThemeRegistry>
-          <NextIntlClientProvider messages={messages}>
-            <Providers remoteConfig={remoteConfig}>
-              <Header />
-              <Container
-                maxWidth={false}
-                disableGutters
-                component={'main'}
-                id='next'
-                /* 100vh - header margin - header - footer - footer padding */
-                /* Not perfect, to revisit: for client loading state */
-                sx={{
-                  minHeight: 'calc(100vh - 32px - 64px - 232px - 20px)',
-                }}
-              >
-                {children}
-                <SpeedInsights />
-                <Analytics />
-              </Container>
-              <Footer />
-            </Providers>
-          </NextIntlClientProvider>
-        </ThemeRegistry>
-      </body>
-    </html>
-  );
-}
diff --git a/src/app/router/Router.tsx b/src/app/router/Router.tsx
index c3ecf973..8a5f86f7 100644
--- a/src/app/router/Router.tsx
+++ b/src/app/router/Router.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useRouter } from 'next/navigation';
 import SignIn from '../screens/SignIn';
 import SignUp from '../screens/SignUp';
 import Account from '../screens/Account';
@@ -7,7 +8,6 @@ import ContactInformation from '../screens/ContactInformation';
 import { ProtectedRoute } from './ProtectedRoute';
 import CompleteRegistration from '../screens/CompleteRegistration';
 import ChangePassword from '../screens/ChangePassword';
-import Home from '../screens/Home';
 import ForgotPassword from '../screens/ForgotPassword';
 import FAQ from '../screens/FAQ';
 import PostRegistration from '../screens/PostRegistration';
@@ -36,7 +36,7 @@ import GbfsValidator from '../screens/GbfsValidator';
 import { GbfsAuthProvider } from '../context/GbfsAuthProvider';
 
 export const AppRouter: React.FC = () => {
-  const navigateTo = useNavigate();
+  const router = useRouter();
   const dispatch = useAppDispatch();
 
   /**
@@ -44,7 +44,13 @@ export const AppRouter: React.FC = () => {
    */
   const logoutUserCallback = (): void => {
     dispatch(
-      logout({ redirectScreen: SIGN_OUT_TARGET, navigateTo, propagate: false }),
+      logout({
+        redirectScreen: SIGN_OUT_TARGET,
+        navigateTo: (path) => {
+          router.push(String(path));
+        },
+        propagate: false,
+      }),
     );
   };
 
@@ -67,7 +73,6 @@ export const AppRouter: React.FC = () => {
 
   return (
     <Routes>
-      <Route path='/' element={<Home />} />
       <Route path='sign-in' element={<SignIn />} />
       <Route path='sign-up' element={<SignUp />} />
       <Route element={<ProtectedRoute targetStatus='authenticated' />}>
diff --git a/src/app/screens/Account.tsx b/src/app/screens/Account.tsx
index dfb211db..39be9f2f 100644
--- a/src/app/screens/Account.tsx
+++ b/src/app/screens/Account.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import '../styles/Account.css';
-import { useNavigate } from 'react-router-dom';
+import { useRouter } from 'next/navigation';
 import { useTheme } from '@mui/material/styles';
 import {
   Typography,
@@ -62,7 +62,7 @@ export default function APIAccount(): React.ReactElement {
   const dispatch = useAppDispatch();
   const theme = useTheme();
   const user = useSelector(selectUserProfile);
-  const navigateTo = useNavigate();
+  const router = useRouter();
 
   const texts = {
     accessTokenHidden: t('accessToken.hidden'),
@@ -247,7 +247,7 @@ export default function APIAccount(): React.ReactElement {
   }
 
   function handleChangePasswordClick(): void {
-    navigateTo('/change-password');
+    router.push('/change-password');
   }
 
   const refreshAccessTokenButtonText = isRefreshingAccessToken
@@ -385,6 +385,7 @@ export default function APIAccount(): React.ReactElement {
           <Box sx={{ display: 'flex', justifyContent: 'space-evenly', mt: 2 }}>
             {!signedInWithProvider && (
               <Button
+                data-cy='changePasswordButton'
                 variant='contained'
                 color='primary'
                 sx={{ m: 1, mb: 0 }}
diff --git a/src/app/screens/ChangePassword.tsx b/src/app/screens/ChangePassword.tsx
index f3580a9b..b626c5b1 100644
--- a/src/app/screens/ChangePassword.tsx
+++ b/src/app/screens/ChangePassword.tsx
@@ -28,12 +28,12 @@ import {
   selectChangePasswordStatus,
 } from '../store/profile-selectors';
 import { useSelector } from 'react-redux/es/hooks/useSelector';
-import { useNavigate } from 'react-router-dom';
+import { useRouter } from 'next/navigation';
 import { VisibilityOffOutlined, VisibilityOutlined } from '@mui/icons-material';
 
 export default function ChangePassword(): React.ReactElement {
   const dispatch = useAppDispatch();
-  const navigateTo = useNavigate();
+  const router = useRouter();
   const changePasswordError = useSelector(selectChangePasswordError);
   const changePasswordStatus = useSelector(selectChangePasswordStatus);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -276,7 +276,7 @@ export default function ChangePassword(): React.ReactElement {
             onClick={() => {
               setDialogOpen(false);
               dispatch(changePasswordInit());
-              navigateTo('/account');
+              router.push('/account');
             }}
             color='primary'
             autoFocus
diff --git a/src/app/screens/Feed/index.tsx b/src/app/screens/Feed/index.tsx
index 3b819d94..382aa67a 100644
--- a/src/app/screens/Feed/index.tsx
+++ b/src/app/screens/Feed/index.tsx
@@ -41,7 +41,6 @@ import {
 import AssociatedFeeds from './components/AssociatedFeeds';
 import { WarningContentBox } from '../../components/WarningContentBox';
 import { useTranslations } from 'next-intl';
-import { Helmet } from 'react-helmet-async';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import {
   ctaContainerStyle,
@@ -83,25 +82,6 @@ const wrapComponent = (
       sx={{ width: '100%', m: 'auto', px: 0 }}
       maxWidth='xl'
     >
-      <Helmet>
-        {descriptionMeta != undefined && (
-          <meta name='description' content={descriptionMeta} />
-        )}
-        {feedDataType != undefined && (
-          <link
-            rel='canonical'
-            href={
-              window.location.origin + '/feeds/' + feedDataType + '/' + feedId
-            }
-          />
-        )}
-        {structuredData != undefined && (
-          <script type='application/ld+json'>
-            {JSON.stringify(structuredData)}
-          </script>
-        )}
-      </Helmet>
-
       <CssBaseline />
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
diff --git a/src/app/screens/FeedSubmission/Form/index.tsx b/src/app/screens/FeedSubmission/Form/index.tsx
index ba3afe07..9fc8cfd2 100644
--- a/src/app/screens/FeedSubmission/Form/index.tsx
+++ b/src/app/screens/FeedSubmission/Form/index.tsx
@@ -11,7 +11,7 @@ import {
   CircularProgress,
   Typography,
 } from '@mui/material';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import FormThirdStep from './ThirdStep';
 import { submitNewFeedForm } from '../../../services/feeds/add-feed-form-service';
 import { useTranslations } from 'next-intl';
@@ -91,13 +91,14 @@ const defaultFormValues: FeedSubmissionFormFormInput = {
 
 export default function FeedSubmissionForm(): React.ReactElement {
   const t = useTranslations('feeds');
-  const [searchParams, setSearchParams] = useSearchParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
   const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
   const [submitError, setSubmitError] = React.useState<undefined | string>(
     undefined,
   );
   const [steps, setSteps] = React.useState(['', '', '']);
-  const navigateTo = useNavigate();
   const [formData, setFormData] =
     React.useState<FeedSubmissionFormFormInput>(defaultFormValues);
   const [stepsCompleted, setStepsCompleted] = React.useState({
@@ -115,26 +116,32 @@ export default function FeedSubmissionForm(): React.ReactElement {
 
     if (step === '2' || step === '3' || step === '4') {
       if (!stepsCompleted['1']) {
-        setSearchParams({});
+        router.push(pathname);
       }
       return;
     }
 
     if (step === '3' || step === '4') {
       if (!stepsCompleted['2']) {
-        setSearchParams({ step: '1' });
+        router.push(`${pathname}?step=1`);
       }
       return;
     }
 
     if (step === '4') {
       if (!stepsCompleted['3'] || !(formData.isOfficialProducer === 'yes')) {
-        setSearchParams({ step: '3' });
+        router.push(`${pathname}?step=3`);
       }
       return;
     }
     setSubmitError(undefined);
-  }, [searchParams]);
+  }, [
+    searchParams,
+    stepsCompleted,
+    formData.isOfficialProducer,
+    router,
+    pathname,
+  ]);
 
   const handleNext = (): void => {
     const nextStep =
@@ -142,18 +149,19 @@ export default function FeedSubmissionForm(): React.ReactElement {
         ? 2
         : Number(searchParams.get('step')) + 1;
     setStepsCompleted({ ...stepsCompleted, [currentStep]: true });
-    setSearchParams({ step: nextStep.toString() });
     if (nextStep === steps.length + 1) {
-      navigateTo('/contribute/submitted');
+      router.push('/contribute/submitted');
+    } else {
+      router.push(`${pathname}?step=${nextStep}`);
     }
   };
 
   const handleBack = (): void => {
     const previousStep = (currentStep - 1).toString();
     if (previousStep === '1') {
-      setSearchParams({});
+      router.push(pathname);
     } else {
-      setSearchParams({ step: previousStep });
+      router.push(`${pathname}?step=${previousStep}`);
     }
   };
 
diff --git a/src/app/screens/Home.tsx b/src/app/screens/Home.tsx
deleted file mode 100644
index 7f8c7b44..00000000
--- a/src/app/screens/Home.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-import * as React from 'react';
-import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import {
-  Button,
-  Divider,
-  InputAdornment,
-  TextField,
-  useTheme,
-} from '@mui/material';
-import {
-  Search,
-  CheckCircleOutlineOutlined,
-  PowerOutlined,
-} from '@mui/icons-material';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { WEB_VALIDATOR_LINK } from '../constants/Navigation';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import '../styles/TextShimmer.css';
-import { useTranslations } from 'next-intl';
-
-interface ActionBoxProps {
-  IconComponent: React.ElementType;
-  iconHeight: string;
-  buttonHref: string;
-  buttonText: string;
-}
-
-const ActionBox = ({
-  IconComponent,
-  iconHeight,
-  buttonHref,
-  buttonText,
-}: ActionBoxProps): React.ReactElement => (
-  <Box
-    sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      flexGrow: 1,
-      flexBasis: 0,
-      minWidth: 0,
-    }}
-  >
-    <IconComponent sx={{ width: '100%', height: iconHeight }} />
-    <Button variant='contained' href={buttonHref} sx={{ m: 2, px: 2 }}>
-      {buttonText}
-    </Button>
-  </Box>
-);
-
-function Component(): React.ReactElement {
-  const [searchInputValue, setSearchInputValue] = useState('');
-  const tCommon = useTranslations('common');
-  const navigate = useNavigate();
-  const theme = useTheme();
-
-  const handleSearch = (): void => {
-    const encodedURI = encodeURIComponent(searchInputValue.trim());
-    if (encodedURI.length === 0) {
-      navigate('/feeds');
-    } else {
-      navigate(`/feeds?q=${encodedURI}`);
-    }
-  };
-
-  const handleKeyDown = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-  ): void => {
-    if (event.key === 'Enter') {
-      handleSearch();
-    }
-  };
-
-  return (
-    <Container component='main' sx={{ px: { xs: 0, md: 3 } }}>
-      <CssBaseline />
-      <Box
-        sx={{
-          mt: 6,
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-        mx={{ xs: '20px', m: 'auto' }}
-        maxWidth={{ xs: '100%', md: '1600px' }}
-      >
-        <Typography
-          component={'h1'}
-          sx={{
-            fontSize: {
-              xs: '36px',
-              sm: '48px',
-            },
-            fontStyle: 'normal',
-            fontWeight: 700,
-            lineHeight: 'normal',
-            textAlign: 'center',
-          }}
-          data-testid='home-title'
-          className='shimmer'
-        >
-          Explore and Access Global Transit Data
-        </Typography>
-        <Typography
-          component='h2'
-          variant='h5'
-          sx={{
-            textAlign: 'center',
-            fontWeight: 700,
-            mt: 4,
-          }}
-        >
-          Currently serving over
-          <Box
-            component='span'
-            sx={{ fontSize: 30, color: theme.palette.primary.main, mx: 1 }}
-          >
-            4000
-          </Box>
-          transportation data feeds from over
-          <Box
-            component='span'
-            sx={{ fontSize: 30, color: theme.palette.primary.main, mx: 1 }}
-          >
-            75
-          </Box>
-          countries.
-        </Typography>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <TextField
-            sx={{
-              width: '80%',
-              mt: 6,
-              fieldset: {
-                borderColor: theme.palette.primary.main,
-              },
-            }}
-            value={searchInputValue}
-            onChange={(e) => {
-              setSearchInputValue(e.target.value);
-            }}
-            onKeyDown={handleKeyDown}
-            placeholder='e.g. "New York" or "Carris Metropolitana"'
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position={'start'}>
-                  <Search />
-                </InputAdornment>
-              ),
-            }}
-          />
-          <Button
-            sx={{
-              mt: 6,
-              py: 1.5,
-              ml: 1,
-              height: 55,
-              boxShadow: 0,
-            }}
-            variant='contained'
-            color='primary'
-            onClick={handleSearch}
-          >
-            {tCommon('search')}
-          </Button>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            margin: '30px 0',
-            position: 'relative',
-          }}
-        >
-          <Divider
-            sx={{
-              flexGrow: 1,
-              backgroundColor: 'text.primary',
-            }}
-            variant='middle'
-          />
-          <Typography
-            sx={{ fontWeight: 'bold', marginX: '8px' }}
-            variant='body1'
-          >
-            or
-          </Typography>
-          <Divider
-            sx={{
-              flexGrow: 1,
-              backgroundColor: 'text.primary',
-              mx: '16',
-            }}
-            variant='middle'
-          />
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            flexDirection: { xs: 'column', sm: 'row' },
-            width: '700px',
-            maxWidth: '100%',
-            margin: 'auto',
-          }}
-        >
-          <ActionBox
-            IconComponent={Search}
-            iconHeight='70px'
-            buttonHref='/feeds'
-            buttonText='Browse Feeds'
-          />
-          <ActionBox
-            IconComponent={CheckCircleOutlineOutlined}
-            iconHeight='70px'
-            buttonHref='/contribute'
-            buttonText='Add a feed'
-          />
-          <ActionBox
-            IconComponent={PowerOutlined}
-            iconHeight='70px'
-            buttonHref='/sign-up'
-            buttonText='Sign up for the API'
-          />
-        </Box>
-        <Box
-          sx={{
-            background: theme.palette.background.paper,
-            borderRadius: '6px 0px 0px 6px',
-            p: {
-              xs: 2,
-              sm: 4,
-            },
-            fontSize: '18px',
-            fontWeight: 700,
-            mr: 0,
-            mt: 5,
-          }}
-        >
-          The Mobility Database is an open data catalog including over 4000
-          GTFS, GTFS Realtime, and GBFS feeds in over 75 countries. Whether
-          you’re a transportation operator, a researcher studying public transit
-          and shared mobility trends, or a maps app needing reliable data to use
-          with your application, the Mobility Database has everything you need
-          in one central location.
-          <br />
-          <br />
-          Our database integrates with
-          <Button
-            variant='text'
-            className='inline'
-            href={WEB_VALIDATOR_LINK}
-            rel='noreferrer'
-            target='_blank'
-            endIcon={<OpenInNewIcon />}
-          >
-            the Canonical GTFS Schedule Validator
-          </Button>
-          and
-          <Button
-            variant='text'
-            className='inline'
-            href='https://gbfs-validator.mobilitydata.org/'
-            rel='noreferrer'
-            target='_blank'
-            endIcon={<OpenInNewIcon />}
-          >
-            the GBFS Validator
-          </Button>
-          to provide detailed data quality reports on every feed.
-        </Box>
-      </Box>
-    </Container>
-  );
-}
-
-export default function Home(): React.ReactElement {
-  return <Component />;
-}
diff --git a/src/app/screens/SignIn.tsx b/src/app/screens/SignIn.tsx
index a1b1d28d..55c0c655 100644
--- a/src/app/screens/SignIn.tsx
+++ b/src/app/screens/SignIn.tsx
@@ -9,7 +9,7 @@ import Container from '@mui/material/Container';
 import GoogleIcon from '@mui/icons-material/Google';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import AppleIcon from '@mui/icons-material/Apple';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useAppDispatch } from '../hooks';
 import {
   login,
@@ -50,14 +50,14 @@ import { VisibilityOffOutlined, VisibilityOutlined } from '@mui/icons-material';
 
 export default function SignIn(): React.ReactElement {
   const dispatch = useAppDispatch();
-  const navigateTo = useNavigate();
+  const router = useRouter();
   const theme = useTheme();
   const userProfileStatus = useSelector(selectUserProfileStatus);
   const emailLoginError = useSelector(selectEmailLoginError);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [showPassword, setShowPassword] = React.useState(false);
   const [showNoEmailSnackbar, setShowNoEmailSnackbar] = React.useState(false);
-  const [searchParams] = useSearchParams();
+  const searchParams = useSearchParams();
 
   const SignInSchema = Yup.object().shape({
     email: Yup.string()
@@ -92,18 +92,18 @@ export default function SignIn(): React.ReactElement {
   React.useEffect(() => {
     if (userProfileStatus === 'registered') {
       if (searchParams.has('add_feed')) {
-        navigateTo(ADD_FEED_TARGET, { state: { from: 'registration' } });
+        router.push(ADD_FEED_TARGET);
       } else {
-        navigateTo(ACCOUNT_TARGET);
+        router.push(ACCOUNT_TARGET);
       }
     }
     if (userProfileStatus === 'authenticated') {
-      navigateTo(COMPLETE_REGISTRATION_TARGET + '?' + searchParams.toString());
+      router.push(COMPLETE_REGISTRATION_TARGET + '?' + searchParams.toString());
     }
     if (userProfileStatus === 'unverified') {
-      navigateTo(POST_REGISTRATION_TARGET + '?' + searchParams.toString());
+      router.push(POST_REGISTRATION_TARGET + '?' + searchParams.toString());
     }
-  }, [userProfileStatus]);
+  }, [userProfileStatus, router, searchParams]);
 
   const signInWithProvider = (oauthProvider: OauthProvider): void => {
     const auth = getAuth();
diff --git a/src/app/styles/TextShimmer.css b/src/app/styles/TextShimmer.css
index d8baf1a3..a0f1a236 100644
--- a/src/app/styles/TextShimmer.css
+++ b/src/app/styles/TextShimmer.css
@@ -37,11 +37,12 @@
   -webkit-animation-duration: 8s;
   -moz-animation-duration: 8s;
   animation-duration: 8s;
+  animation-delay: 1s;
   -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   background-repeat: no-repeat;
-  background-position: 0 0;
+  background-position: -10% 0;
   background-color: rgba(56, 89, 250, 0.6);
 }
 
diff --git a/src/i18n/config.ts b/src/i18n/config.ts
deleted file mode 100644
index 48f0f695..00000000
--- a/src/i18n/config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const locales = ['en', 'fr'] as const;
-export type Locale = (typeof locales)[number];
-export const defaultLocale: Locale = 'en';
-
-// Subdomain to locale mapping
-export const subdomainToLocale: Record<string, Locale> = {
-  fr: 'fr',
-};
diff --git a/src/i18n/navigation.ts b/src/i18n/navigation.ts
new file mode 100644
index 00000000..ec0c2c05
--- /dev/null
+++ b/src/i18n/navigation.ts
@@ -0,0 +1,15 @@
+import { createNavigation } from 'next-intl/navigation';
+import { routing } from './routing';
+
+/**
+ * Locale-aware navigation APIs.
+ *
+ * Use these instead of Next.js navigation to automatically handle locale prefixes:
+ * - Link: Locale-aware link component
+ * - redirect: Server-side redirect with locale
+ * - usePathname: Get pathname without locale prefix
+ * - useRouter: Router with locale-aware navigation
+ * - getPathname: Get localized pathname
+ */
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
index 062c0d61..33f9b420 100644
--- a/src/i18n/request.ts
+++ b/src/i18n/request.ts
@@ -1,16 +1,24 @@
 import { getRequestConfig } from 'next-intl/server';
-import { cookies } from 'next/headers';
-import { locales, defaultLocale } from './config';
+import { hasLocale } from 'next-intl';
+import { routing } from './routing';
 
-export default getRequestConfig(async () => {
-  const cookieStore = await cookies();
-  const locale = cookieStore.get('NEXT_LOCALE')?.value ?? defaultLocale;
-  const validLocale = locales.includes(locale as (typeof locales)[number])
-    ? locale
-    : defaultLocale;
+/**
+ * next-intl request configuration.
+ *
+ * This is called for every request and determines which locale/messages to use.
+ * The locale comes from the [locale] route segment via the proxy.
+ */
+export default getRequestConfig(async ({ requestLocale }) => {
+  // Typically corresponds to the `[locale]` segment
+  const requested = await requestLocale;
+
+  // Validate the locale, fall back to default if invalid
+  const locale = hasLocale(routing.locales, requested)
+    ? requested
+    : routing.defaultLocale;
 
   return {
-    locale: validLocale,
-    messages: (await import(`../../messages/${validLocale}.json`)).default,
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default,
   };
 });
diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts
new file mode 100644
index 00000000..d3d8fad0
--- /dev/null
+++ b/src/i18n/routing.ts
@@ -0,0 +1,21 @@
+import { defineRouting } from 'next-intl/routing';
+
+export const AVAILABLE_LOCALES = ['en', 'fr'] as const;
+
+/**
+ * Centralized routing configuration for next-intl.
+ *
+ * - English (en): Default locale, no prefix in URL (/)
+ * - French (fr): Prefixed URL (/fr)
+ */
+export const routing = defineRouting({
+  locales: AVAILABLE_LOCALES,
+  defaultLocale: 'en',
+  // Don't show /en prefix for default locale
+  localePrefix: 'as-needed',
+  // Don't auto-detect locale from Accept-Language header
+  // Users must explicitly navigate to /fr to get French
+  localeDetection: false,
+});
+
+export type Locale = (typeof routing.locales)[number];
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 1b3ade5a..00000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { SentryErrorBoundary } from './sentry';
-import SentryErrorFallback from './app/components/SentryErrorFallback';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './app/App';
-import ReactGA from 'react-ga4';
-import { getEnvConfig } from './app/utils/config';
-import ContextProviders from './app/components/Context';
-import { CssBaseline } from '@mui/material';
-import { ThemeProvider } from './app/context/ThemeProvider';
-
-const gaId = getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID');
-if (gaId.length > 0) {
-  ReactGA.initialize(gaId);
-  ReactGA.send('pageview');
-}
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement,
-);
-root.render(
-  <React.StrictMode>
-    <ThemeProvider>
-      <CssBaseline />
-      <ContextProviders>
-        <SentryErrorBoundary
-          fallback={({ error, eventId, resetError }) => (
-            <SentryErrorFallback
-              error={error}
-              eventId={eventId}
-              resetError={resetError}
-            />
-          )}
-          showDialog
-        >
-          <App />
-        </SentryErrorBoundary>
-      </ContextProviders>
-    </ThemeProvider>
-  </React.StrictMode>,
-);
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 80f87426..0f826fe3 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -40,6 +40,11 @@ export const handlers = [
     return HttpResponse.json(feedJson);
   }),
 
+  // Mock GET /v1/feeds/{id} - basic feed info
+  http.get(`*/v1/feeds/*/test-516`, () => {
+    return HttpResponse.json(feedJson);
+  }),
+
   // Mock GET /v1/gtfs_feeds/{id} - GTFS specific feed info
   http.get(`*/v1/gtfs_feeds/test-516`, () => {
     return HttpResponse.json(gtfsFeedJson);
diff --git a/src/proxy.ts b/src/proxy.ts
index 659ad550..91eadbff 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -1,20 +1,44 @@
-import { type NextRequest, NextResponse } from 'next/server';
-import { subdomainToLocale, defaultLocale } from './i18n/config';
+import { NextResponse, type NextRequest } from 'next/server';
+import { routing } from './i18n/routing';
 
-export function proxy(request: NextRequest): NextResponse {
-  const hostname = request.headers.get('host') ?? '';
-  const subdomain = hostname.split('.')[0];
+/**
+ * IMPORTANT: The logic of this proxy will be tested once the [...slug] route is removed
+ * Reasoning: [...slug] will catch all routes including those with wrong locale prefixes
+ */
 
-  // Determine locale from subdomain (fr.mobilitydata.org → 'fr')
-  const locale = subdomainToLocale[subdomain] ?? defaultLocale;
+/**
+ * Internationalization proxy following the Next.js i18n guide.
+ * @see https://nextjs.org/docs/app/guides/internationalization
+ *
+ * Behavior:
+ * - If a supported locale already exists in the pathname, continue without redirect
+ * - If no locale in pathname, internally rewrite to default locale path
+ */
+export default function proxy(request: NextRequest): NextResponse<unknown> {
+  const { pathname } = request.nextUrl;
 
-  // Set locale in cookie for server components to read
-  const response = NextResponse.next();
-  response.cookies.set('NEXT_LOCALE', locale);
+  // Check if any supported locale already exists in the pathname
+  const pathnameHasLocale = routing.locales.some(
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
+  );
 
-  return response;
+  // If locale exists in path, let it through
+  if (pathnameHasLocale) {
+    return NextResponse.next();
+  }
+
+  // No locale in pathname - rewrite to include default locale internally
+  // This allows the [locale] segment to receive the default locale
+  // without changing the URL the user sees
+  const url = request.nextUrl.clone();
+  url.pathname = `/${routing.defaultLocale}${pathname}`;
+  return NextResponse.rewrite(url);
 }
 
 export const config = {
+  // Match all pathnames except:
+  // - API routes (/api)
+  // - Next.js internals (/_next)
+  // - Static files with extensions (.ico, .png, etc.)
   matcher: ['/((?!api|_next|.*\\..*).*)'],
 };
diff --git a/yarn.lock b/yarn.lock
index 238f6c47..c42b451b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7639,13 +7639,6 @@ intl-messageformat@^10.5.14:
     "@formatjs/icu-messageformat-parser" "2.11.4"
     tslib "^2.8.0"
 
-invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 ip-address@^10.0.1:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-10.1.0.tgz#d8dcffb34d0e02eb241427444a6e23f5b0595aa4"
@@ -8996,7 +8989,7 @@ long@^5.0.0:
   resolved "https://registry.yarnpkg.com/long/-/long-5.3.2.tgz#1d84463095999262d7d7b7f8bfd4a8cc55167f83"
   integrity sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==
 
-loose-envify@^1.0.0, loose-envify@^1.4.0:
+loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -10564,11 +10557,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-fast-compare@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
-  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
-
 react-ga4@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
@@ -10582,15 +10570,6 @@ react-google-recaptcha@^3.1.0:
     prop-types "^15.5.0"
     react-async-script "^1.2.0"
 
-react-helmet-async@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec"
-  integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==
-  dependencies:
-    invariant "^2.2.4"
-    react-fast-compare "^3.2.2"
-    shallowequal "^1.1.0"
-
 react-hook-form@^7.52.1:
   version "7.71.1"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.71.1.tgz#6a758958861682cf0eb22131eead684ba3618f66"
@@ -11199,11 +11178,6 @@ setprototypeof@1.2.0, setprototypeof@~1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 sharp@^0.34.4:
   version "0.34.5"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.34.5.tgz#b6f148e4b8c61f1797bde11a9d1cfebbae2c57b0"
@@ -11831,10 +11805,10 @@ tar-stream@^3.0.0:
     fast-fifo "^1.2.0"
     streamx "^2.15.0"
 
-tar@^7.5.2:
-  version "7.5.6"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-7.5.6.tgz#2db7a210748a82f0a89cc31527b90d3a24984fb7"
-  integrity sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==
+tar@^7.5.2, tar@^7.5.7:
+  version "7.5.7"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-7.5.7.tgz#adf99774008ba1c89819f15dbd6019c630539405"
+  integrity sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==
   dependencies:
     "@isaacs/fs-minipass" "^4.0.0"
     chownr "^3.0.0"