diff --git a/coral/package.json b/coral/package.json
index cd16f9fa1b..8055a978e9 100644
--- a/coral/package.json
+++ b/coral/package.json
@@ -30,7 +30,8 @@
   "dependencies": {
     "@aivenio/design-system": "^18.4.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
diff --git a/coral/pnpm-lock.yaml b/coral/pnpm-lock.yaml
index 9df7bd1d1e..440f38acea 100644
--- a/coral/pnpm-lock.yaml
+++ b/coral/pnpm-lock.yaml
@@ -24,6 +24,7 @@ specifiers:
   prettier: ^2.7.1
   react: ^18.2.0
   react-dom: ^18.2.0
+  react-router-dom: ^6.4.2
   ts-jest: ^29.0.3
   ts-node: ^10.9.1
   typescript: ^4.6.4
@@ -33,6 +34,7 @@ dependencies:
   '@aivenio/design-system': 18.4.3_pvnihi4muhoy7kenlmiyxwzuqy
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
+  react-router-dom: 6.4.2_biqbaboplfbrettd7655fr4n2y
 
 devDependencies:
   '@testing-library/jest-dom': 5.16.5
@@ -854,6 +856,11 @@ packages:
     resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
     dev: false
 
+  /@remix-run/router/1.0.2:
+    resolution: {integrity: sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==}
+    engines: {node: '>=14'}
+    dev: false
+
   /@sinclair/typebox/0.24.47:
     resolution: {integrity: sha512-J4Xw0xYK4h7eC34MNOPQi6IkNxGRck6n4VJpWDzXIFVTW8I/D43Gf+NfWz/v/7NHlzWOPd3+T4PJ4OqklQ2u7A==}
     dev: true
@@ -3989,6 +3996,29 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /react-router-dom/6.4.2_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.0.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-router: 6.4.2_react@18.2.0
+    dev: false
+
+  /react-router/6.4.2_react@18.2.0:
+    resolution: {integrity: sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.0.2
+      react: 18.2.0
+    dev: false
+
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
diff --git a/coral/src/App.module.css b/coral/src/App.module.css
deleted file mode 100644
index 6f48f06f52..0000000000
--- a/coral/src/App.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.aClassName {
-  color: pink;
-}
diff --git a/coral/src/App.test.tsx b/coral/src/App.test.tsx
deleted file mode 100644
index 7720989801..0000000000
--- a/coral/src/App.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import App from "./App";
-import { render, screen } from "@testing-library/react";
-
-describe("App.tsx", () => {
-  it("shows a headline", () => {
-    render(<App />);
-    const heading = screen.getByRole("heading", { name: "Hello Klaw 👋" });
-
-    expect(heading).toBeVisible();
-  });
-
-  it("informs user that it uses the aiven design system ", () => {
-    render(<App />);
-    const text = screen.getByText("This uses the aiven design system!");
-
-    expect(text).toBeVisible();
-  });
-});
diff --git a/coral/src/App.tsx b/coral/src/App.tsx
deleted file mode 100644
index d538cb1a27..0000000000
--- a/coral/src/App.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Flexbox, TagLabel, Typography } from "@aivenio/design-system";
-import classes from "./App.module.css";
-
-function App() {
-  return (
-    <div>
-      <Typography htmlTag={"h1"} variant={"heading-2xl"}>
-        Hello Klaw 👋
-      </Typography>
-      <Flexbox alignItems={"center"} className={classes.aClassName}>
-        <p>This uses the aiven design system! &nbsp; </p>
-        <TagLabel title="yey" />
-      </Flexbox>
-    </div>
-  );
-}
-
-export default App;
diff --git a/coral/src/main.tsx b/coral/src/main.tsx
index 2fdbc3c95b..e9e17d0e29 100644
--- a/coral/src/main.tsx
+++ b/coral/src/main.tsx
@@ -1,10 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import { RouterProvider } from "react-router-dom";
+import router from "./router";
+
 import "@aivenio/design-system/dist/styles.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
diff --git a/coral/src/pages/hello/index.test.tsx b/coral/src/pages/hello/index.test.tsx
new file mode 100644
index 0000000000..cd395dc5ae
--- /dev/null
+++ b/coral/src/pages/hello/index.test.tsx
@@ -0,0 +1,15 @@
+import HelloPage from "./index";
+import { render, cleanup, screen } from "@testing-library/react";
+
+describe("HelloPage", () => {
+  beforeEach(() => {
+    render(<HelloPage />);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+  it("shoud render dummy content", () => {
+    expect(screen.getByText("Hello")).toBeVisible();
+  });
+});
diff --git a/coral/src/pages/hello/index.tsx b/coral/src/pages/hello/index.tsx
new file mode 100644
index 0000000000..ec8570067f
--- /dev/null
+++ b/coral/src/pages/hello/index.tsx
@@ -0,0 +1,3 @@
+const HelloPage = () => <h1>Hello</h1>;
+
+export default HelloPage;
diff --git a/coral/src/pages/index.test.tsx b/coral/src/pages/index.test.tsx
new file mode 100644
index 0000000000..d5f03d5b18
--- /dev/null
+++ b/coral/src/pages/index.test.tsx
@@ -0,0 +1,15 @@
+import HomePage from "./index";
+import { render, cleanup, screen } from "@testing-library/react";
+
+describe("HomePage", () => {
+  beforeEach(() => {
+    render(<HomePage />);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+  it("shoud render dummy content", () => {
+    expect(screen.getByText("Index")).toBeVisible();
+  });
+});
diff --git a/coral/src/pages/index.tsx b/coral/src/pages/index.tsx
new file mode 100644
index 0000000000..5b70ad5235
--- /dev/null
+++ b/coral/src/pages/index.tsx
@@ -0,0 +1,3 @@
+const HomePage = () => <h1>Index</h1>;
+
+export default HomePage;
diff --git a/coral/src/router.tsx b/coral/src/router.tsx
new file mode 100644
index 0000000000..998a501d38
--- /dev/null
+++ b/coral/src/router.tsx
@@ -0,0 +1,22 @@
+import { createBrowserRouter, Navigate, RouteObject } from "react-router-dom";
+import HomePage from "./pages/index";
+import HelloPage from "./pages/hello";
+
+const routes: Array<RouteObject> = [
+  {
+    path: "/",
+    element: <HomePage />,
+  },
+  {
+    path: "/hello",
+    element: <HelloPage />,
+  },
+  {
+    path: "*",
+    element: <Navigate to="/" />,
+  },
+];
+
+const router = createBrowserRouter(routes);
+
+export default router;