diff --git a/apps/react/src/app/app.tsx b/apps/react/src/app/app.tsx
index ae774f3a..d6c462c1 100644
--- a/apps/react/src/app/app.tsx
+++ b/apps/react/src/app/app.tsx
@@ -1,39 +1,38 @@
 import './app.scss';
 
-import { Link, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
+import Nav from './nav/nav';
+import LoginPage from './login-page/login-page';
+import ProductsPage from './products-page/products-page';
 
 export function App() {
   return (
-    <div className="app">
-      <div role="navigation">
-        <ul>
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/page-2">Page </Link>
-          </li>
-        </ul>
+    <div>
+      <Nav />
+
+      <div className="container py-4">
+        <Route
+          path="/"
+          exact
+          render={() => (
+            <h1>Home</h1>
+          )}
+        />
+
+        <Route
+          path="/products"
+          exact
+          component={ProductsPage}
+        />
+
+        <Route
+          path="/login"
+          exact
+          component={LoginPage}
+        />
+
       </div>
-      <Route
-        path="/"
-        exact
-        render={() => (
-          <div>
-            This is the generated root route.{' '}
-            <Link to="/page-2">Click here for page 2.</Link>
-          </div>
-        )}
-      />
-      <Route
-        path="/page-2"
-        exact
-        render={() => (
-          <div>
-            <Link to="/">Click here to go back to root page.</Link>
-          </div>
-        )}
-      />
+
     </div>
   );
 }
diff --git a/apps/react/src/app/login-page/login-page.scss b/apps/react/src/app/login-page/login-page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/react/src/app/login-page/login-page.tsx b/apps/react/src/app/login-page/login-page.tsx
new file mode 100644
index 00000000..b94f50ff
--- /dev/null
+++ b/apps/react/src/app/login-page/login-page.tsx
@@ -0,0 +1,26 @@
+import './login-page.scss';
+
+export function LoginPage() {
+  return (
+    <>
+      <h1 className="text-2xl mb-2">Login</h1>
+
+      <form>
+        <div className="mb-3">
+          <label htmlFor="email" className="form-label">Email address</label>
+          <input type="email" className="form-control" id="email" />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="password" className="form-label">Password</label>
+          <input type="password" className="form-control" id="password" />
+        </div>
+
+        <button type="submit" className="btn btn-primary">Submit</button>
+      </form>
+    </>
+
+  );
+}
+
+export default LoginPage;
diff --git a/apps/react/src/app/nav/nav.scss b/apps/react/src/app/nav/nav.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/react/src/app/nav/nav.tsx b/apps/react/src/app/nav/nav.tsx
new file mode 100644
index 00000000..697de3fc
--- /dev/null
+++ b/apps/react/src/app/nav/nav.tsx
@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom';
+import './nav.scss';
+
+export function Nav() {
+  return (
+    <nav className="navbar navbar-expand-lg navbar-light bg-light">
+      <div className="container-fluid">
+
+        <Link className="navbar-brand" to="/">Elf</Link>
+
+        <button className="navbar-toggler" type="button">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+
+        <div className="collapse navbar-collapse">
+          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+            <li className="nav-item">
+              <Link className="nav-link" to="/">Home</Link>
+            </li>
+
+            <li className="nav-item">
+              <Link className="nav-link" to="/products">Products</Link>
+            </li>
+
+            <li className="nav-item">
+              <Link className="nav-link" to="/login">Login</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Nav;
diff --git a/apps/react/src/app/products-page/product/product.scss b/apps/react/src/app/products-page/product/product.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/react/src/app/products-page/product/product.tsx b/apps/react/src/app/products-page/product/product.tsx
new file mode 100644
index 00000000..4b1b401d
--- /dev/null
+++ b/apps/react/src/app/products-page/product/product.tsx
@@ -0,0 +1,27 @@
+import './product.scss';
+
+
+export interface ProductProps {
+  product: Product;
+}
+
+export interface Product {
+  id: number;
+  title: string;
+  description: string;
+}
+
+export function Product({ product: { title, description, id } }: ProductProps) {
+  return (
+    <div className="card">
+      <div className="card-body">
+        <h5 className="card-title">{title}</h5>
+        <h6 className="card-subtitle mb-2 text-muted">{description}</h6>
+        {/* <a href="#" className="card-link">Card link</a> */}
+        {/* <a href="#" className="card-link">Another link</a> */}
+      </div>
+    </div>
+  );
+}
+
+export default Product;
diff --git a/apps/react/src/app/products-page/products-page.scss b/apps/react/src/app/products-page/products-page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/react/src/app/products-page/products-page.tsx b/apps/react/src/app/products-page/products-page.tsx
new file mode 100644
index 00000000..bf7a6c83
--- /dev/null
+++ b/apps/react/src/app/products-page/products-page.tsx
@@ -0,0 +1,28 @@
+import Product from './product/product';
+import './products-page.scss';
+
+const products = Array.from({ length: 10 }).map((_, i) => ({
+  id: i,
+  title: `Product ${i}`,
+  description: 'lorem ipsum'
+}))
+
+export function ProductsPage() {
+  return (
+    <>
+      <h1 className="text-2xl mb-2">Products</h1>
+
+      <section className="flex flex-wrap gap-2">
+        {products.map(product => (
+          <div className="w-3/12">
+            <Product product={product} key={product.id} />
+          </div>
+        ))}
+
+      </section>
+
+    </>
+  );
+}
+
+export default ProductsPage;
diff --git a/apps/react/src/index.html b/apps/react/src/index.html
index 5026f0dd..7b3058d1 100644
--- a/apps/react/src/index.html
+++ b/apps/react/src/index.html
@@ -1,14 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>React</title>
-    <base href="/" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>React</title>
+  <base href="/" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
\ No newline at end of file