diff --git a/template/src/component/component-list/ComponentListPage.tsx b/template/src/component/component-list/ComponentListPage.tsx
new file mode 100644
index 0000000..ffc4d84
--- /dev/null
+++ b/template/src/component/component-list/ComponentListPage.tsx
@@ -0,0 +1,22 @@
+import {Button as HipoButton} from "@hipo/react-ui-toolkit";
+
+import PageContent from "../page/content/PageContent";
+import Page from "../page/Page";
+
+function ComponentListPage() {
+  return (
+    <Page title={"Components Page"}>
+      <PageContent>
+        <h1>{"Button"}</h1>
+
+        <HipoButton onClick={handleButtonClick}>{"Click"}</HipoButton>
+      </PageContent>
+    </Page>
+  );
+
+  function handleButtonClick() {
+    console.log("Clicked!");
+  }
+}
+
+export default ComponentListPage;
diff --git a/template/src/core/app/App.tsx b/template/src/core/app/App.tsx
index 6acec3a..42f6406 100644
--- a/template/src/core/app/App.tsx
+++ b/template/src/core/app/App.tsx
@@ -8,10 +8,17 @@ import ROUTES from "../route/routes";
 import {AppContextProvider} from "./AppContext";
 import HomePage from "../../home/HomePage";
 import NotFoundPage from "../route/not-found-page/NotFoundPage";
+import {isOnProductionEnv} from "../util/environment/environmentUtils";
 
 const HelpPage = lazy(
   () => import(/* webpackChunkName: "help-page" */ "../../help/HelpPage")
 );
+const ComponentListPage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "component-list-page" */ "../../component/component-list/ComponentListPage"
+    )
+);
 
 function App() {
   return (
@@ -31,6 +38,15 @@ function App() {
             }
           />
 
+          {
+            /**
+             * Development and testing only routes
+             */
+            !isOnProductionEnv() && (
+              <Route path={ROUTES.COMPONENT_LIST} element={<ComponentListPage />} />
+            )
+          }
+
           <Route path={"*"} element={<NotFoundPage />} />
         </Routes>
       </AppContextProvider>
diff --git a/template/src/core/route/routes.ts b/template/src/core/route/routes.ts
index 28230e8..0fb1e97 100644
--- a/template/src/core/route/routes.ts
+++ b/template/src/core/route/routes.ts
@@ -3,7 +3,9 @@ const BASE_ROOT = "/" as const;
 const ROUTES = {
   HOME: BASE_ROOT,
   HELP: `${BASE_ROOT}help`,
-  ACCOUNT: `${BASE_ROOT}account`
+  ACCOUNT: `${BASE_ROOT}account`,
+
+  COMPONENT_LIST: `/components`
 } as const;
 
 export default ROUTES;
diff --git a/template/src/core/util/environment/environmentUtils.ts b/template/src/core/util/environment/environmentUtils.ts
new file mode 100644
index 0000000..66dc5b7
--- /dev/null
+++ b/template/src/core/util/environment/environmentUtils.ts
@@ -0,0 +1,13 @@
+function isOnDevEnv() {
+  return process.env.REACT_APP_BUILD_ENVIRONMENT === "dev";
+}
+
+function isOnStagingEnv() {
+  return process.env.REACT_APP_BUILD_ENVIRONMENT === "staging";
+}
+
+function isOnProductionEnv() {
+  return process.env.REACT_APP_BUILD_ENVIRONMENT === "production";
+}
+
+export {isOnDevEnv, isOnStagingEnv, isOnProductionEnv};