diff --git a/features/alm.feature b/features/alm.feature
new file mode 100644
index 0000000..d26ad7d
--- /dev/null
+++ b/features/alm.feature
@@ -0,0 +1,7 @@
+Feature: Application Lifecycle Management
+
+  @tests:req-managing-items
+  Scenario: View ALM page
+    Given User is on landing page
+    And User is on the ALM page
+    Then User should see the ALM page
\ No newline at end of file
diff --git a/features/gitBasedItems.feature b/features/gitBasedItems.feature
new file mode 100644
index 0000000..13399d0
--- /dev/null
+++ b/features/gitBasedItems.feature
@@ -0,0 +1,7 @@
+Feature: Git-based Items
+
+  @tests:req-managing-items
+  Scenario: View Git-based Items page
+    Given User is on landing page
+    And User is on the Git-based Items page
+    Then User should see the Git-based Items page
\ No newline at end of file
diff --git a/features/sample.feature b/features/sample.feature
index adf6441..bc42347 100644
--- a/features/sample.feature
+++ b/features/sample.feature
@@ -1,6 +1,6 @@
 Feature: Sample app
 
-  @tests:ATP-3
+  @tests:
   Scenario: View landing page
     Given User is on landing page
     Then Page has title "React App"
diff --git a/features/support/steps.js b/features/support/steps.js
index 4f12362..9f76e2e 100644
--- a/features/support/steps.js
+++ b/features/support/steps.js
@@ -1,5 +1,5 @@
 const {Given, Then, After, AfterAll, BeforeAll} = require('@cucumber/cucumber');
-const {chromium} = require('@playwright/test');
+const {chromium, expect} = require('@playwright/test');
 const assert = require('node:assert');
 
 let browser;
@@ -45,10 +45,28 @@ AfterAll(async () => {
 });
 
 Given('User is on landing page', async () => {
-    await page.goto('http://localhost:' + (process.env.PORT || '3001'));
+    await page.goto('http://localhost:' + (process.env.PORT || '3000'));
 });
 
 Then('Page has title {string}', async (expectedTitle) => {
     const actualTitle = await page.title();
-    assert.equal(actualTitle, expectedTitle);
+    expect(actualTitle, expectedTitle);
+});
+
+Given('User is on the ALM page', async () => {
+    await page.getByText('ALM').click();
+})
+
+Then('User should see the ALM page', async () => {
+    const title = await page.getByText('Alm').innerText();
+    expect(title).toEqual('Alm');
+});
+
+Given('User is on the Git-based Items page', async () => {
+    await page.getByText('Git-based Items').click();
+})
+
+Then('User should see the Git-based Items page', async () => {
+    const title = await page.getByText('Git Based Items').innerText();
+    expect(title).toEqual('Git Based Items');
 });
diff --git a/package-lock.json b/package-lock.json
index 1e307a1..4f6acee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.21.3",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -3423,6 +3424,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",
@@ -14867,6 +14876,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",
@@ -20232,6 +20271,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
+      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -28403,6 +28447,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz",
+      "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
+      "requires": {
+        "@remix-run/router": "1.14.2"
+      }
+    },
+    "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==",
+      "requires": {
+        "@remix-run/router": "1.14.2",
+        "react-router": "6.21.3"
+      }
+    },
     "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 4370027..ff351ce 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/App.js b/src/App.js
index 51c18a2..da7c95c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,14 +3,25 @@ import './App.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          A basic web application initialized with <a className="App-link" href="https://create-react-app.dev/" rel="nofollow noopener noreferrer">Create React App</a>
-        </p>
-      </header>
-    </div>
+      <div className="App">
+          <header className="App-header">
+              <img src={logo} className="App-logo" alt="logo"/>
+              <p>
+                  A basic web application initialized with <a className="App-link" href="https://create-react-app.dev/"
+                                                              rel="nofollow noopener noreferrer">Create React App</a>
+              </p>
+          <nav>
+              <ul>
+                  <li>
+                      <a href={`/alm`}>ALM</a>
+                  </li>
+                  <li>
+                      <a href={`/git-based-items`}>Git-based Items</a>
+                  </li>
+              </ul>
+          </nav>
+          </header>
+      </div>
   );
 }
 
diff --git a/src/alm/page.tsx b/src/alm/page.tsx
deleted file mode 100644
index 6f07fd2..0000000
--- a/src/alm/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function AlmPage() {
-  return (
-    <div>
-      <h1>ALM</h1>
-    </div>
-  );
-}
diff --git a/src/git-based-items/page.tsx b/src/git-based-items/page.tsx
deleted file mode 100644
index f573593..0000000
--- a/src/git-based-items/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function GitBasedItemsPage() {
-  return (
-    <div>
-      <h1>Git Based Items</h1>
-    </div>
-  );
-}
diff --git a/src/index.js b/src/index.js
index 2cb1087..d7510e2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import {
+    createBrowserRouter,
+    RouterProvider,
+} from "react-router-dom";
 import './index.css';
 import App from './App';
+import Alm from "./routes/alm";
+import GitBasedItems from "./routes/git-based-items";
+
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <App />,
+    },
+    {
+        path: "/alm",
+        element: <Alm />,
+    },
+    {
+        path: "/git-based-items",
+        element: <GitBasedItems />,
+    },
+]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+      <RouterProvider router={router} />
   </React.StrictMode>
 );
diff --git a/src/routes/alm.jsx b/src/routes/alm.jsx
new file mode 100644
index 0000000..1aea00c
--- /dev/null
+++ b/src/routes/alm.jsx
@@ -0,0 +1,5 @@
+export default function Alm() {
+  return (
+      <h1>Alm</h1>
+  );
+}
\ No newline at end of file
diff --git a/src/routes/git-based-items.jsx b/src/routes/git-based-items.jsx
new file mode 100644
index 0000000..2476d74
--- /dev/null
+++ b/src/routes/git-based-items.jsx
@@ -0,0 +1,7 @@
+export default function GitBasedItems() {
+    return (
+        <div>
+        <h1>Git Based Items</h1>
+        </div>
+    );
+}
\ No newline at end of file