diff --git a/website/package-lock.json b/website/package-lock.json
index a449f83..1a21f24 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -21,6 +21,7 @@
         "mui": "^0.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3",
         "react-scripts": "^5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -3775,6 +3776,14 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -15340,6 +15349,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/website/package.json b/website/package.json
index b23ccb5..46ae0e8 100644
--- a/website/package.json
+++ b/website/package.json
@@ -16,6 +16,7 @@
     "mui": "^0.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
diff --git a/website/src/App.tsx b/website/src/App.tsx
index 63da6c0..9deeff2 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -1,33 +1,18 @@
-// src/App.tsx
-
 import React from 'react';
 import AboutPage from './components/AboutPage';
-import logo from './logo.svg';
 import './App.css';
-import ProductPurchasePage from './ProductPurchasePage';
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import ProductPurchasePage from './components/ProductPurchasePage';
 
 const App: React.FC = () => {
   return (
-    <div className=" h-full w-full">
-      <AboutPage />
-    <div className="App">
-    <div>
-      <ProductPurchasePage />
-    </div>
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="h-full w-full">
+      <Router>
+      <Routes>
+        <Route path="/" element={<AboutPage />} />
+        <Route path="/product-purchase" element={<ProductPurchasePage />} />
+      </Routes>
+    </Router>
     </div>
   );
 };
diff --git a/website/src/ProductPurchasePage.tsx b/website/src/components/ProductPurchasePage.tsx
similarity index 91%
rename from website/src/ProductPurchasePage.tsx
rename to website/src/components/ProductPurchasePage.tsx
index ce6c024..b5db5c5 100644
--- a/website/src/ProductPurchasePage.tsx
+++ b/website/src/components/ProductPurchasePage.tsx
@@ -1,5 +1,7 @@
-import PersonalInfoForm from './PersonalInfoForm';
-import BigGrayWordmark from './BigGrayWordmarkSVG';
+import PersonalInfoForm from '../PersonalInfoForm';
+import BigGrayWordmark from '../BigGrayWordmarkSVG';
+import Footer from './Footer';
+import MailingList from './MailingList';
 
 function ProductPurchasePage() {
   return (
@@ -10,7 +12,7 @@ function ProductPurchasePage() {
             <div className='bigWordmark'>
               <BigGrayWordmark />
             </div>
-            <PersonalInfoForm/>
+              <PersonalInfoForm/>
           </div>
         </div>
       </div>
@@ -36,6 +38,9 @@ function ProductPurchasePage() {
         </div>
       </div>
     </div>
+    <div>
+      <Footer />
+    </div>
   </div>
   );
 }