diff --git a/apps/beeai-ui/src/components/MainContentView/MainContentView.tsx b/apps/beeai-ui/src/components/MainContentView/MainContentView.tsx
index 8237779d2d..26ecca3b34 100644
--- a/apps/beeai-ui/src/components/MainContentView/MainContentView.tsx
+++ b/apps/beeai-ui/src/components/MainContentView/MainContentView.tsx
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+'use client';
+
 import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
 import { mergeRefs } from 'react-merge-refs';
diff --git a/apps/beeai-ui/src/components/layouts/AppLayout.tsx b/apps/beeai-ui/src/components/layouts/AppLayout.tsx
index 85da5362bf..62cd7cda19 100644
--- a/apps/beeai-ui/src/components/layouts/AppLayout.tsx
+++ b/apps/beeai-ui/src/components/layouts/AppLayout.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren, Suspense } from 'react';
 
 import { AppHeader } from '#components/AppHeader/AppHeader.tsx';
 import { AgentDetailPanel } from '#modules/agents/components/AgentDetailPanel.tsx';
@@ -13,12 +13,16 @@ import classes from './AppLayout.module.scss';
 export function AppLayout({ children }: PropsWithChildren) {
   return (
     <div className={classes.root}>
-      <AppHeader className={classes.header} />
+      <Suspense>
+        <AppHeader className={classes.header} />
+      </Suspense>
 
       <main className={classes.main} data-route-transition>
         {children}
 
-        <AgentDetailPanel />
+        <Suspense>
+          <AgentDetailPanel />
+        </Suspense>
       </main>
     </div>
   );