diff --git a/packages/frontend-design-poc/src/app.spec.tsx b/packages/frontend-design-poc/src/app.spec.tsx
index 11f207b26..3b29c06d3 100644
--- a/packages/frontend-design-poc/src/app.spec.tsx
+++ b/packages/frontend-design-poc/src/app.spec.tsx
@@ -1,11 +1,16 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import App from './App.tsx';
+import { beforeAll, describe, expect, it } from "vitest";
+import { customRender } from "../utils/test-utils.tsx";
+import App from "./App.tsx";
+import { server } from "./mocks/node.ts";
 
-describe('App Smoke Test', () => {
-  it('renders without crashing', () => {
-    const { getByTestId } = render(<App />);
-    const appElement = getByTestId('app');
+describe("App Smoke Test", async () => {
+  beforeAll(async () => {
+    server.listen();
+  });
+
+  it("renders without crashing", () => {
+    const { getByRole } = customRender(<App />);
+    const appElement = getByRole("main");
     expect(appElement).toBeTruthy();
   });
 });
diff --git a/packages/frontend-design-poc/src/components/HelloWorld/index.ts b/packages/frontend-design-poc/src/components/HelloWorld/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/frontend-design-poc/src/mocks/node.ts b/packages/frontend-design-poc/src/mocks/node.ts
new file mode 100644
index 000000000..abbedd7eb
--- /dev/null
+++ b/packages/frontend-design-poc/src/mocks/node.ts
@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)
\ No newline at end of file
diff --git a/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx b/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx
new file mode 100644
index 000000000..17ef22e05
--- /dev/null
+++ b/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx
@@ -0,0 +1,26 @@
+import { HeaderContext } from 'app-shared/navigation/main-header/Header';
+import { Outlet } from 'react-router-dom';
+import { useUserQuery } from 'app-shared/hooks/queries';
+import React, { useMemo } from 'react';
+import type { IHeaderContext } from 'app-shared/navigation/main-header/Header';
+import AppHeader from 'app-shared/navigation/main-header/Header';
+
+export const PageLayout = () => {
+  const { data: user } = useUserQuery();
+
+  const headerContextValue: IHeaderContext = useMemo(
+    () => ({
+      user,
+    }),
+    [user],
+  );
+
+  return (
+    <>
+      <HeaderContext.Provider value={headerContextValue}>
+        <AppHeader showMenu={false} />
+      </HeaderContext.Provider>
+      <Outlet />
+    </>
+  );
+};
diff --git a/packages/frontend-design-poc/src/pages/PageLayout/index.ts b/packages/frontend-design-poc/src/pages/PageLayout/index.ts
new file mode 100644
index 000000000..5d502a22e
--- /dev/null
+++ b/packages/frontend-design-poc/src/pages/PageLayout/index.ts
@@ -0,0 +1 @@
+export { PageLayout } from './PageLayout';
diff --git a/packages/frontend-design-poc/src/pages/PageNotFound/PageNotFound.tsx b/packages/frontend-design-poc/src/pages/PageNotFound/PageNotFound.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/frontend-design-poc/src/pages/PageNotFound/index.ts b/packages/frontend-design-poc/src/pages/PageNotFound/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/frontend-design-poc/utils/test-utils.tsx b/packages/frontend-design-poc/utils/test-utils.tsx
new file mode 100644
index 000000000..c57fed221
--- /dev/null
+++ b/packages/frontend-design-poc/utils/test-utils.tsx
@@ -0,0 +1,33 @@
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactElement } from "react";
+import { MemoryRouter } from "react-router-dom";
+import { render, RenderOptions } from "@testing-library/react";
+
+interface IExtendedRenderOptions extends RenderOptions {
+  initialEntries?: string[];
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+export const customRender = (
+  ui: ReactElement,
+  options?: Omit<IExtendedRenderOptions, "wrapper">,
+) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={options?.initialEntries ?? ["/"]}>
+          {children}
+        </MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  return render(ui, { wrapper: Wrapper, ...options });
+};