diff --git a/index.html b/index.html
index a412676c..b8f5300c 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,76 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#000000" />
+
+    <meta
+      name="description"
+      content="An ecosystem for finding and sharing free water, food, bathrooms, and foraging resources in Philadelphia."
+    />
+    <meta
+      name="keywords"
+      content="Free, free stuff, philadelphia, free stuff philadelphia, free resources, free resources philadelphia, free stuff philly, free resources philly, free water, free food, foraging, food foraging, free bathrooms, phlask, phlask philadelphia"
+    />
+    <meta name="robots" content="index, follow" />
+
+    <meta
+      property="og:title"
+      content="PHLASK - Sharing Free Resources in Philadelphia"
+    />
+    <meta
+      property="og:description"
+      content="PHLASK is an ecosystem for finding and sharing free resources (water, food, bathrooms, foraging) in Philadelphia."
+    />
+    <meta property="og:url" content="https://phlask.me" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:image"
+      content="https://phlask.me/assets/images/phlask-tessellation.png"
+    />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="PHLASK - Sharing Free Resources in Philadelphia"
+    />
+    <meta
+      name="twitter:description"
+      content="An ecosystem for finding and sharing free resources in Philadelphia."
+    />
+    <meta
+      name="twitter:image"
+      content="https://phlask.me/assets/images/phlask-tessellation.png"
+    />
+
+    <link rel="canonical" href="https://phlask.me" />
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "PHLASK",
+        "url": "https://phlask.me",
+        "description": "An ecosystem for finding and sharing free resources in Philadelphia",
+        "applicationCategory": "MapApplication",
+        "operatingSystem": "Web",
+        "about": {
+          "@type": "Organization",
+          "name": "PHLASK",
+          "url": "https://phlask.me",
+          "location": {
+            "@type": "Place",
+            "name": "Philadelphia"
+          }
+        }
+      }
+    </script>
+
+    <link rel="icon" type="image/png" href="/assets/favicon.png" />
     <link
       rel="preload"
       as="image"
@@ -15,20 +84,12 @@
       href="https://fonts.googleapis.com/css2?family=Exo:wght@600;700&family=Inter:wght@500;600;700&family=Roboto:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
-
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/manifest.json b/manifest.json
deleted file mode 100644
index 8d9ab3f1..00000000
--- a/manifest.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "short_name": "Phlask App",
-  "name": "Phlask Map",
-  "icons": [
-    {
-      "src": "./src/assets/favicon.png",
-      "type": "image/png",
-      "sizes": "800x808"
-    }
-  ],
-  "display": "standalone",
-  "theme_color": "#26A9E0",
-  "background_color": "#000000"
-}
diff --git a/package.json b/package.json
index 7d9a2508..3e738bf1 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-dropzone": "^14.4.1",
+    "react-helmet-async": "^3.0.0",
     "react-hook-form": "7.69.0",
     "react-router": "^7.17.0",
     "react-toastify": "^11.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 112bae0c..c4b38f83 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       react-dropzone:
         specifier: ^14.4.1
         version: 14.4.1(react@19.2.7)
+      react-helmet-async:
+        specifier: ^3.0.0
+        version: 3.0.0(react@19.2.7)
       react-hook-form:
         specifier: 7.69.0
         version: 7.69.0(react@19.2.7)
@@ -2445,6 +2448,9 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -3005,6 +3011,14 @@ packages:
     peerDependencies:
       react: '>= 16.8 || 18.0.0'
 
+  react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+
+  react-helmet-async@3.0.0:
+    resolution: {integrity: sha512-nA3IEZfXiclgrz4KLxAhqJqIfFDuvzQwlKwpdmzZIuC1KNSghDEIXmyU0TKtbM+NafnkICcwx8CECFrZ/sL/1w==}
+    peerDependencies:
+      react: ^16.6.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-hook-form@7.69.0:
     resolution: {integrity: sha512-yt6ZGME9f4F6WHwevrvpAjh42HMvocuSnSIHUGycBqXIJdhqGSPQzTpGF+1NLREk/58IdPxEMfPcFCjlMhclGw==}
     engines: {node: '>=18.0.0'}
@@ -3169,6 +3183,9 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
+  shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+
   shebang-command@1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
     engines: {node: '>=0.10.0'}
@@ -5981,6 +5998,10 @@ snapshots:
       hasown: 2.0.4
       side-channel: 1.1.1
 
+  invariant@2.2.4:
+    dependencies:
+      loose-envify: 1.4.0
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.9
@@ -6579,6 +6600,15 @@ snapshots:
       prop-types: 15.8.1
       react: 19.2.7
 
+  react-fast-compare@3.2.2: {}
+
+  react-helmet-async@3.0.0(react@19.2.7):
+    dependencies:
+      invariant: 2.2.4
+      react: 19.2.7
+      react-fast-compare: 3.2.2
+      shallowequal: 1.1.0
+
   react-hook-form@7.69.0(react@19.2.7):
     dependencies:
       react: 19.2.7
@@ -6794,6 +6824,8 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.2
 
+  shallowequal@1.1.0: {}
+
   shebang-command@1.2.0:
     dependencies:
       shebang-regex: 1.0.0
diff --git a/src/assets/favicon.png b/public/assets/favicon.png
similarity index 100%
rename from src/assets/favicon.png
rename to public/assets/favicon.png
diff --git a/src/assets/images/phlask-tessellation.png b/public/assets/images/phlask-tessellation.png
similarity index 100%
rename from src/assets/images/phlask-tessellation.png
rename to public/assets/images/phlask-tessellation.png
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 00000000..157a9c98
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,23 @@
+{
+  "short_name": "PHLASK",
+  "name": "PHLASK - Finding and sharing free resources in Philadelphia",
+  "description": "An ecosystem for finding and sharing free resources like water, food, bathrooms, and foraging in Philadelphia.",
+  "icons": [
+    {
+      "src": "/assets/favicon.png",
+      "type": "image/png",
+      "sizes": "800x808"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#26A9E0",
+  "background_color": "#FFFFFF",
+  "orientation": "portrait",
+  "categories": [
+    "utilities",
+    "social",
+    "maps"
+  ],
+  "lang": "en-US"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 00000000..0577207d
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://phlask.me/sitemap.xml
diff --git a/public/sitemap.xml b/public/sitemap.xml
new file mode 100644
index 00000000..1c2349ae
--- /dev/null
+++ b/public/sitemap.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://phlask.me/</loc>
+  </url>
+  <url>
+    <loc>https://phlask.me/about</loc>
+  </url>
+  <url>
+    <loc>https://phlask.me/contact</loc>
+  </url>
+  <url>
+    <loc>https://phlask.me/join</loc>
+  </url>
+</urlset>
\ No newline at end of file
diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
index 1e645345..07c56c4e 100644
--- a/src/components/About/About.tsx
+++ b/src/components/About/About.tsx
@@ -1,6 +1,7 @@
 import { Stack, Typography } from '@mui/material';
 import Page from 'components/Page/Page';
 import PhlaskNameVisualExplainer from 'components/PhlaskNameVisualExplainer/PhlaskNameVisualExplainer';
+import SEO from 'components/SEO/SEO';
 import type { ReactNode } from 'react';
 
 type PageSectionProps = {
@@ -28,6 +29,11 @@ const PageSection = ({ title = null, children }: PageSectionProps) => {
 
 const About = () => (
   <Page title="About PHLASK" data-cy="about">
+    <SEO
+      title="About"
+      description="Learn about PHLASK, an ecosystem for finding and sharing free resources like water, food, bathrooms, and foraging in Philadelphia."
+      canonicalUrl="https://phlask.me/about"
+    />
     <PageSection title="What is PHLASK?">
       PHLASK is an app that connects people in Philadelphia to free,
       life-sustaining resources. The interactive map shows users where to find
diff --git a/src/components/Contact/Contact.tsx b/src/components/Contact/Contact.tsx
index ed45a5c5..bd8257da 100644
--- a/src/components/Contact/Contact.tsx
+++ b/src/components/Contact/Contact.tsx
@@ -6,6 +6,7 @@ import EmailConnect from 'components/EmailConnect/EmailConnect';
 import useIsMobile from 'hooks/useIsMobile';
 import FeedbackFormSuccess from 'components/forms/FeedbackFromSuccess/FeedbackFormSuccess';
 import useAddFeedbackMutation from 'hooks/mutations/useAddFeedbackMutation';
+import SEO from 'components/SEO/SEO';
 
 const TITLE = 'Contact';
 
@@ -19,6 +20,11 @@ const Contact = () => {
 
   return (
     <Page title={TITLE} data-cy="contact">
+      <SEO
+        title="Contact"
+        description="Get in touch with the PHLASK team to provide feedback, report issues, or ask questions about our free resource ecosystem in Philadelphia."
+        canonicalUrl="https://phlask.me/contact"
+      />
       {isSuccess ? (
         <FeedbackFormSuccess />
       ) : (
diff --git a/src/components/JoinTheTeam/JoinTheTeam.tsx b/src/components/JoinTheTeam/JoinTheTeam.tsx
index 7391e8d2..0b4d8425 100644
--- a/src/components/JoinTheTeam/JoinTheTeam.tsx
+++ b/src/components/JoinTheTeam/JoinTheTeam.tsx
@@ -3,10 +3,16 @@ import { Box, Link, List, ListItem, Stack, Typography } from '@mui/material';
 import Page from 'components/Page/Page';
 import PhlaskCirclesExplainer from 'components/PhlaskCircleExplainer/PhlaskCirclesExplainer';
 import AcknowledgementsSection from 'components/AcknowledgementsSection/AcknowledgementsSection';
+import SEO from 'components/SEO/SEO';
 
 const JoinTheTeam = () => {
   return (
     <Page title="Join the team" data-cy="join-team">
+      <SEO
+        title="Join the Team"
+        description="Become a volunteer with PHLASK. Join our community of developers, designers, and advocates working to make life-sustaining resources accessible to all in Philadelphia."
+        canonicalUrl="https://phlask.me/join"
+      />
       <Stack sx={{ color: '#2d3748', fontSize: 14, lineHeight: '24px' }}>
         PHLASK volunteers come from a wide array of socioeconomic, educational
         and technical backgrounds. The team is committed to non-hierarchical,
diff --git a/src/components/Providers/Providers.tsx b/src/components/Providers/Providers.tsx
index 52179581..ac14958b 100644
--- a/src/components/Providers/Providers.tsx
+++ b/src/components/Providers/Providers.tsx
@@ -7,23 +7,26 @@ import queryClient from 'services/queryClient';
 import ThemeProvider from './ThemeProvider';
 import { env } from 'config';
 import AnalyticsProvider from './AnalyticsProvider';
+import { HelmetProvider } from 'react-helmet-async';
 
 const REACT_GOOGLE_MAPS_API_KEY = env.VITE_REACT_GOOGLE_MAPS_API_KEY;
 
 const Providers = ({ children }: PropsWithChildren) => {
   return (
-    <AnalyticsProvider>
-      <QueryClientProvider client={queryClient}>
-        <APIProvider apiKey={REACT_GOOGLE_MAPS_API_KEY} libraries={['places']}>
-          <ToolbarContextProvider>
-            <ThemeProvider>
-              <CssBaseline />
-              {children}
-            </ThemeProvider>
-          </ToolbarContextProvider>
-        </APIProvider>
-      </QueryClientProvider>
-    </AnalyticsProvider>
+    <HelmetProvider>
+      <AnalyticsProvider>
+        <QueryClientProvider client={queryClient}>
+          <APIProvider apiKey={REACT_GOOGLE_MAPS_API_KEY} libraries={['places']}>
+            <ToolbarContextProvider>
+              <ThemeProvider>
+                <CssBaseline />
+                {children}
+              </ThemeProvider>
+            </ToolbarContextProvider>
+          </APIProvider>
+        </QueryClientProvider>
+      </AnalyticsProvider>
+    </HelmetProvider>
   );
 };
 
diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx
new file mode 100644
index 00000000..5730636b
--- /dev/null
+++ b/src/components/SEO/SEO.tsx
@@ -0,0 +1,46 @@
+import { Helmet } from 'react-helmet-async';
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+  ogType?: string;
+  ogImage?: string;
+  canonicalUrl?: string;
+}
+
+const SEO = ({
+  title,
+  description,
+  ogType = 'website',
+  ogImage = 'https://phlask.me/assets/images/phlask-tessellation.png',
+  canonicalUrl
+}: SEOProps) => {
+  const siteTitle = 'PHLASK';
+  const fullTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+  const defaultDescription =
+    'An ecosystem for finding and sharing free resources like water, food, bathrooms, and foraging in Philadelphia.';
+  const metaDescription = description || defaultDescription;
+  const url = canonicalUrl || 'https://phlask.me';
+
+  return (
+    <Helmet>
+      <title>{fullTitle}</title>
+      <meta name="description" content={metaDescription} />
+
+      <meta property="og:title" content={fullTitle} />
+      <meta property="og:description" content={metaDescription} />
+      <meta property="og:type" content={ogType} />
+      <meta property="og:url" content={url} />
+      <meta property="og:image" content={ogImage} />
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={fullTitle} />
+      <meta name="twitter:description" content={metaDescription} />
+      <meta name="twitter:image" content={ogImage} />
+
+      <link rel="canonical" href={url} />
+    </Helmet>
+  );
+};
+
+export default SEO;
diff --git a/src/components/SelectedResource/SelectedResource.tsx b/src/components/SelectedResource/SelectedResource.tsx
index 9460dc69..7f2cffbe 100644
--- a/src/components/SelectedResource/SelectedResource.tsx
+++ b/src/components/SelectedResource/SelectedResource.tsx
@@ -6,6 +6,7 @@ import SelectedResourceDetails from 'components/SelectedResourceDetails/Selected
 import noop from 'utils/noop';
 import useSelectedResource from 'hooks/useSelectedResource';
 import { useGetSelectedResourceQuery } from 'hooks/queries/useGetSelectedResourceQuery';
+import SEO from 'components/SEO/SEO';
 
 const SelectedResource = () => {
   const isMobile = useIsMobile();
@@ -16,33 +17,50 @@ const SelectedResource = () => {
     setSelectedResource(null);
   };
 
+  const getSEOProps = () => {
+    if (!data) return {};
+    const resourceName = data.name || 'Unnamed Resource';
+    const type =
+      data.resource_type.charAt(0) + data.resource_type.slice(1).toLowerCase();
+    const address = data.address ? ` at ${data.address}` : '';
+
+    return {
+      title: `${resourceName} (${type})`,
+      description: `Find ${type.toLowerCase()} resources like ${resourceName}${address} in Philadelphia on PHLASK.`,
+      canonicalUrl: `https://phlask.me/?r=${data.id}`
+    };
+  };
+
   return (
-    <SwipeableDrawer
-      open={isEnabled}
-      anchor={isMobile ? 'bottom' : 'right'}
-      onOpen={noop}
-      onClose={onClose}
-      transitionDuration={300}
-      slotProps={{
-        backdrop: { onClick: noop },
-        paper: {
-          square: false,
-          sx: theme => ({
-            height: '60vh',
-            [theme.breakpoints.up('md')]: {
-              height: '100%',
-              width: '40%'
-            }
-          })
-        }
-      }}
-    >
-      <SelectedResourceDetails
-        resource={data}
-        isError={isError}
+    <>
+      {isEnabled && data && <SEO {...getSEOProps()} />}
+      <SwipeableDrawer
+        open={isEnabled}
+        anchor={isMobile ? 'bottom' : 'right'}
+        onOpen={noop}
         onClose={onClose}
-      />
-    </SwipeableDrawer>
+        transitionDuration={300}
+        slotProps={{
+          backdrop: { onClick: noop },
+          paper: {
+            square: false,
+            sx: theme => ({
+              height: '60vh',
+              [theme.breakpoints.up('md')]: {
+                height: '100%',
+                width: '40%'
+              }
+            })
+          }
+        }}
+      >
+        <SelectedResourceDetails
+          resource={data}
+          isError={isError}
+          onClose={onClose}
+        />
+      </SwipeableDrawer>
+    </>
   );
 };
 
diff --git a/src/components/SelectedResourceDetails/SelectedResourceDetails.tsx b/src/components/SelectedResourceDetails/SelectedResourceDetails.tsx
index 80189fa0..e49d56fe 100644
--- a/src/components/SelectedResourceDetails/SelectedResourceDetails.tsx
+++ b/src/components/SelectedResourceDetails/SelectedResourceDetails.tsx
@@ -23,7 +23,7 @@ import useIsMobile from 'hooks/useIsMobile';
 import { useState, type MouseEventHandler } from 'react';
 import noop from 'utils/noop';
 
-import sampleImg from 'assets/images/phlask-tessellation.png';
+import sampleImg from '/assets/images/phlask-tessellation.png';
 
 import EstimatedWalkingDuration from 'components/EstimatedWalkTime/EstimatedWalkTime';
 import ResourceHours from 'components/ResourceHours/ResourceHours';
diff --git a/src/contexts/HeaderContext.tsx b/src/contexts/HeaderContext.tsx
index aa91d4da..175fe1c8 100644
--- a/src/contexts/HeaderContext.tsx
+++ b/src/contexts/HeaderContext.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react';
 import useIsMobile from 'hooks/useIsMobile';
 import noop from 'utils/noop';
+import { useLocation, useNavigate } from 'react-router';
 
 export type HeaderMenuPage = 'about' | 'join' | 'contact';
 
@@ -33,18 +34,20 @@ type HeaderProviderProps = {
   children: ReactNode;
 };
 
-// Create a HeaderProvider component
 const HeaderProvider = ({ children }: HeaderProviderProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [shownPage, setShownPage] = useState<ReactNode | null>(null);
   const isMobile = useIsMobile();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const onMenuOpen = useCallback(() => setIsMenuOpen(true), []);
 
   const onMenuClose = useCallback(() => {
-    setShownPage(null);
     setIsMenuOpen(false);
-  }, []);
+    if (location.pathname !== '/') {
+      navigate('/');
+    }
+  }, [location.pathname, navigate]);
 
   const onMenuItemClick = useCallback(
     (page: HeaderMenuPage | null) => {
@@ -52,30 +55,30 @@ const HeaderProvider = ({ children }: HeaderProviderProps) => {
         setIsMenuOpen(false);
       }
 
-      setShownPage(prev => {
-        if (!page) {
-          return null;
-        }
-
-        if (page === prev) {
-          return null;
-        }
+      if (!page) {
+        navigate('/');
+        return;
+      }
 
-        switch (page) {
-          case 'about':
-            return <About />;
-          case 'join':
-            return <JoinTheTeam />;
-          case 'contact':
-            return <Contact />;
-          default:
-            return null;
-        }
-      });
+      navigate(`/${page}`);
     },
-    [isMobile]
+    [isMobile, navigate]
   );
 
+  const shownPage = useMemo(() => {
+    const page = location.pathname.slice(1) as HeaderMenuPage;
+    switch (page) {
+      case 'about':
+        return <About />;
+      case 'join':
+        return <JoinTheTeam />;
+      case 'contact':
+        return <Contact />;
+      default:
+        return null;
+    }
+  }, [location.pathname]);
+
   const stateVal = useMemo(
     () => ({
       isMenuOpen,
diff --git a/src/services/router.tsx b/src/services/router.tsx
index 8542fb84..d3e01bcb 100644
--- a/src/services/router.tsx
+++ b/src/services/router.tsx
@@ -2,6 +2,22 @@ import { createBrowserRouter } from 'react-router';
 import App from 'App';
 
 export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />
+  },
+  {
+    path: '/about',
+    element: <App />
+  },
+  {
+    path: '/contact',
+    element: <App />
+  },
+  {
+    path: '/join',
+    element: <App />
+  },
   {
     path: '*',
     element: <App />
