diff --git a/src/app/(main)/websites/[websiteId]/page.tsx b/src/app/(main)/websites/[websiteId]/page.tsx
index a19315b1..d7e6fcd0 100644
--- a/src/app/(main)/websites/[websiteId]/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/page.tsx
@@ -1,3 +1,4 @@
+'use client';
 import WebsiteDetails from './WebsiteDetails';
 
 export default function WebsitePage({ params: { websiteId } }) {
diff --git a/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
new file mode 100644
index 00000000..7e538812
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import Realtime from './Realtime';
+
+export default function WebsiteRealtimePage({ websiteId }) {
+  return <Realtime websiteId={websiteId} />;
+}
diff --git a/src/app/(main)/websites/[websiteId]/realtime/page.tsx b/src/app/(main)/websites/[websiteId]/realtime/page.tsx
index 7990c3d1..1ce90b13 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/page.tsx
@@ -1,9 +1,5 @@
-import Realtime from './Realtime';
+import WebsiteRealtimePage from './WebsiteRealtimePage';
 
-export default function WebsiteRealtimePage({ params: { websiteId } }) {
-  if (!websiteId) {
-    return null;
-  }
-
-  return <Realtime websiteId={websiteId} />;
+export default function ({ params: { websiteId } }) {
+  return <WebsiteRealtimePage websiteId={websiteId} />;
 }
diff --git a/src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
similarity index 88%
rename from src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx
rename to src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
index 60c36cc6..84ad57d0 100644
--- a/src/app/(main)/websites/[websiteId]/reports/WebsiteReports.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
@@ -1,10 +1,11 @@
+'use client';
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import WebsiteHeader from '../WebsiteHeader';
 import ReportsDataTable from 'app/(main)/reports/ReportsDataTable';
 
-export function WebsiteReports({ websiteId }) {
+export function WebsiteReportsPage({ websiteId }) {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -25,4 +26,4 @@ export function WebsiteReports({ websiteId }) {
   );
 }
 
-export default WebsiteReports;
+export default WebsiteReportsPage;
diff --git a/src/app/(main)/websites/[websiteId]/reports/page.tsx b/src/app/(main)/websites/[websiteId]/reports/page.tsx
index f9492134..64353b59 100644
--- a/src/app/(main)/websites/[websiteId]/reports/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/page.tsx
@@ -1,9 +1,5 @@
-import WebsiteReports from './WebsiteReports';
+import WebsiteReportsPage from './WebsiteReportsPage';
 
 export default function WebsiteReportsPage({ params: { websiteId } }) {
-  if (!websiteId) {
-    return null;
-  }
-
-  return <WebsiteReports websiteId={websiteId} />;
+  return <WebsiteReportsPage websiteId={websiteId} />;
 }