diff --git a/nx-dev/nx-dev/app/nx-cloud/page.tsx b/nx-dev/nx-dev/app/nx-cloud/page.tsx
new file mode 100644
index 00000000000000..aaa2456f366571
--- /dev/null
+++ b/nx-dev/nx-dev/app/nx-cloud/page.tsx
@@ -0,0 +1,67 @@
+import {
+  Layout,
+  Hero,
+  TrustedBy,
+  FasterAndCheaper,
+  UnderstandWorkspace,
+  EnhancedWithAi,
+  AutomatedAgentsManagement,
+  AgentNumberOverTime,
+  Statistics,
+  CallToAction,
+} from '@nx/nx-dev/ui-cloud';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Nx Cloud',
+  description:
+    'Nx Cloud is the end-to-end solution for smart, efficient and maintainable CI.',
+  openGraph: {
+    url: 'https://nx.dev/nx-cloud',
+    title: 'Nx Cloud',
+    description:
+      'Nx Cloud is the end-to-end solution for smart, efficient and maintainable CI.',
+    images: [
+      {
+        url: 'https://nx.dev/socials/nx-media.png',
+        width: 800,
+        height: 421,
+        alt: 'Nx: Smart Monorepos · Fast CI',
+        type: 'image/jpeg',
+      },
+    ],
+    siteName: 'NxDev',
+    type: 'website',
+  },
+};
+
+export default function NxCloudPage(): JSX.Element {
+  return (
+    <Layout>
+      <Hero />
+      <TrustedBy />
+
+      <div className="mt-32 lg:mt-56">
+        <FasterAndCheaper />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <UnderstandWorkspace />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <EnhancedWithAi />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <AutomatedAgentsManagement />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <AgentNumberOverTime />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <Statistics />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <CallToAction />
+      </div>
+    </Layout>
+  );
+}
diff --git a/nx-dev/nx-dev/pages/nx-cloud.tsx b/nx-dev/nx-dev/pages/nx-cloud.tsx
deleted file mode 100644
index 638701bea68dc5..00000000000000
--- a/nx-dev/nx-dev/pages/nx-cloud.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useRouter } from 'next/router';
-import { NextSeo } from 'next-seo';
-import {
-  Layout,
-  Hero,
-  TrustedBy,
-  FasterAndCheaper,
-  UnderstandWorkspace,
-  EnhancedWithAi,
-  AutomatedAgentsManagement,
-  AgentNumberOverTime,
-  Statistics,
-  CallToAction,
-} from '@nx/nx-dev/ui-cloud';
-
-export function NxCloud(): JSX.Element {
-  const router = useRouter();
-
-  return (
-    <>
-      <NextSeo
-        title="Nx Cloud"
-        description="Nx Cloud is the end-to-end solution for smart, efficient and
-          maintainable CI."
-        openGraph={{
-          url: 'https://nx.dev' + router.asPath,
-          title: 'Nx Cloud',
-          description:
-            'Nx Cloud is the end-to-end solution for smart, efficient and maintainable CI',
-          images: [
-            {
-              url: 'https://nx.dev/socials/nx-media.png',
-              width: 800,
-              height: 421,
-              alt: 'Nx: Smart Monorepos · Fast CI',
-              type: 'image/jpeg',
-            },
-          ],
-          siteName: 'NxDev',
-          type: 'website',
-        }}
-      />
-      <Layout>
-        <Hero />
-        <TrustedBy />
-
-        <div className="mt-32 lg:mt-56">
-          <FasterAndCheaper />
-        </div>
-        <div className="mt-32 lg:mt-56">
-          <UnderstandWorkspace />
-        </div>
-        <div className="mt-32 lg:mt-56">
-          <EnhancedWithAi />
-        </div>
-        <div className="mt-32 lg:mt-56">
-          <AutomatedAgentsManagement />
-        </div>
-        <div className="mt-32 lg:mt-56">
-          <AgentNumberOverTime />
-        </div>
-        <div className="mt-32 lg:mt-56">
-          <Statistics />
-        </div>
-        <div className="mt-32 lg:mt-56">
-          <CallToAction />
-        </div>
-      </Layout>
-    </>
-  );
-}
-
-export default NxCloud;
diff --git a/nx-dev/ui-cloud/src/lib/agent-number-over-time.tsx b/nx-dev/ui-cloud/src/lib/agent-number-over-time.tsx
index ce5aab54a353bb..82e62399238a54 100644
--- a/nx-dev/ui-cloud/src/lib/agent-number-over-time.tsx
+++ b/nx-dev/ui-cloud/src/lib/agent-number-over-time.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { SectionHeading } from '@nx/nx-dev/ui-common/src/lib/section-tags';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/nx-dev/ui-cloud/src/lib/automated-agents-management.tsx b/nx-dev/ui-cloud/src/lib/automated-agents-management.tsx
index 5b042824dd68ae..068d33beb8f42e 100644
--- a/nx-dev/ui-cloud/src/lib/automated-agents-management.tsx
+++ b/nx-dev/ui-cloud/src/lib/automated-agents-management.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   AdjustmentsVerticalIcon,
   ArrowLongDownIcon,
diff --git a/nx-dev/ui-cloud/src/lib/faster-and-cheaper.tsx b/nx-dev/ui-cloud/src/lib/faster-and-cheaper.tsx
index fb7560faa1a81c..c25fc2bab6acc7 100644
--- a/nx-dev/ui-cloud/src/lib/faster-and-cheaper.tsx
+++ b/nx-dev/ui-cloud/src/lib/faster-and-cheaper.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   Variants,
   animate,
diff --git a/nx-dev/ui-cloud/src/lib/hero.tsx b/nx-dev/ui-cloud/src/lib/hero.tsx
index 97752356e45b37..235e3ce43fd4fc 100644
--- a/nx-dev/ui-cloud/src/lib/hero.tsx
+++ b/nx-dev/ui-cloud/src/lib/hero.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { Dialog, Transition } from '@headlessui/react';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { PlayIcon } from '@heroicons/react/24/outline';
diff --git a/nx-dev/ui-cloud/src/lib/layout.tsx b/nx-dev/ui-cloud/src/lib/layout.tsx
index 883d8a7bf559e7..ce102b83466953 100644
--- a/nx-dev/ui-cloud/src/lib/layout.tsx
+++ b/nx-dev/ui-cloud/src/lib/layout.tsx
@@ -1,5 +1,3 @@
-import { Header, Footer } from '@nx/nx-dev/ui-common';
-
 export function Layout({
   children,
 }: {
@@ -7,7 +5,6 @@ export function Layout({
 }): JSX.Element {
   return (
     <div>
-      <Header />
       <div className="relative isolate pt-14">
         <div
           className="absolute inset-x-0 -top-40 -z-10 h-full transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -23,7 +20,6 @@ export function Layout({
         </div>
         <main className="py-24 sm:py-32">{children}</main>
       </div>
-      <Footer />
     </div>
   );
 }
diff --git a/nx-dev/ui-cloud/src/lib/statistics.tsx b/nx-dev/ui-cloud/src/lib/statistics.tsx
index 1a73912111cd1d..77f09e3759d954 100644
--- a/nx-dev/ui-cloud/src/lib/statistics.tsx
+++ b/nx-dev/ui-cloud/src/lib/statistics.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { SectionHeading } from '@nx/nx-dev/ui-common/src/lib/section-tags';
diff --git a/nx-dev/ui-cloud/src/lib/understand-workspace.tsx b/nx-dev/ui-cloud/src/lib/understand-workspace.tsx
index 20cec895867c1e..d950b11974b0d1 100644
--- a/nx-dev/ui-cloud/src/lib/understand-workspace.tsx
+++ b/nx-dev/ui-cloud/src/lib/understand-workspace.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   ArrowLongRightIcon,
   ArrowsRightLeftIcon,