diff --git a/package-lock.json b/package-lock.json
index 7887a97..0c3cc75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "particles-bg": "^2.5.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.21.3",
         "react-scripts": "5.0.1",
         "react-tilt": "^1.0.2",
         "tachyons": "^4.12.0",
@@ -3358,6 +3359,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
+      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
+      "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",
@@ -15221,6 +15230,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz",
+      "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
+      "dependencies": {
+        "@remix-run/router": "1.14.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz",
+      "integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
+      "dependencies": {
+        "@remix-run/router": "1.14.2",
+        "react-router": "6.21.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/package.json b/package.json
index 1236b2d..e5a35cf 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "particles-bg": "^2.5.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "react-tilt": "^1.0.2",
     "tachyons": "^4.12.0",
diff --git a/src/index.js b/src/index.js
index 96028be..4687c7f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,11 +4,14 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import 'tachyons';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter basename = '/facialrecognition'>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );