diff --git a/app/company/[filename]/index.tsx b/app/company/[filename]/index.tsx
index 0a0d93c5d..c40a21a3f 100644
--- a/app/company/[filename]/index.tsx
+++ b/app/company/[filename]/index.tsx
@@ -25,7 +25,7 @@ export default function CompanyPage({ tinaProps, props }) {
         <Blocks prefix="CompanyBeforeBody" blocks={data.company.beforeBody} />
         {data.company.seo?.showBreadcrumb === null ||
           (data.company.seo?.showBreadcrumb && (
-            <Section className="mx-auto w-full max-w-9xl px-8 py-5">
+            <Section className="mx-auto min-h-24 w-full max-w-9xl px-8 py-5 md:min-h-16">
               <Breadcrumbs
                 path={removeExtension(props.variables.relativePath)}
                 suffix={data.global.breadcrumbSuffix}
diff --git a/app/company/[filename]/page.tsx b/app/company/[filename]/page.tsx
index f8bc5c172..8761def70 100644
--- a/app/company/[filename]/page.tsx
+++ b/app/company/[filename]/page.tsx
@@ -4,7 +4,7 @@ import { TODAY } from "hooks/useFetchEvents";
 import { useSEO } from "hooks/useSeo";
 import { Metadata } from "next";
 import { TinaClient } from "../../tina-client";
-import ConsultingPage from "./index";
+import CompanyPage from "./index";
 
 export const dynamicParams = false;
 
@@ -93,5 +93,5 @@ export default async function Consulting({
 
   const { props } = await getData(filename);
 
-  return <TinaClient props={props} Component={ConsultingPage} />;
+  return <TinaClient props={props} Component={CompanyPage} />;
 }
diff --git a/app/company/clients/[filename]/index.tsx b/app/company/clients/[filename]/index.tsx
new file mode 100644
index 000000000..654d7b49b
--- /dev/null
+++ b/app/company/clients/[filename]/index.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { BuiltOnAzure } from "@/components/blocks";
+import { Blocks } from "@/components/blocks-renderer";
+import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
+import { TechUpgrade } from "@/components/blocks/techUpgrade";
+import { Section } from "@/components/util/section";
+import { removeExtension } from "@/services/client/utils.service";
+import { Breadcrumbs } from "app/components/breadcrumb";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+export default function CompanyPage({ tinaProps, props }) {
+  const { data } = tinaProps;
+
+  return (
+    <>
+      {data.caseStudy.seo?.showBreadcrumb === null ||
+        (data.caseStudy.seo?.showBreadcrumb && (
+          <Section className="mx-auto min-h-24 w-full max-w-9xl px-8 py-5 md:min-h-16">
+            <Breadcrumbs
+              path={removeExtension(props.variables.relativePath)}
+              suffix={data.global.breadcrumbSuffix}
+              title={data.caseStudy.seo?.title}
+              seoSchema={data.caseStudy.seo}
+            />
+          </Section>
+        ))}
+      <Section className="mx-auto w-full max-w-9xl px-8">
+        <div>
+          <h1
+            data-tina-field={tinaField(data.caseStudy, "heading")}
+            className="p-0"
+          >
+            {data.caseStudy.heading}
+          </h1>
+          <h2
+            data-tina-field={tinaField(data.caseStudy, "subHeading")}
+            className="p-0 text-sm"
+          >
+            {data.caseStudy.subHeading}
+          </h2>
+        </div>
+      </Section>
+      <Blocks prefix="CaseStudy_body" blocks={data.caseStudy._body} />
+      <Section className="prose mx-auto !block w-full max-w-9xl px-8 pb-16 pt-0">
+        <TinaMarkdown
+          data-tina-field={tinaField(data.caseStudy, "content")}
+          components={componentRenderer}
+          content={data.caseStudy.content}
+        />
+      </Section>
+      <Section className="mx-auto w-full !bg-gray-75 px-8 py-5">
+        <TechUpgrade />
+      </Section>
+      <Section>
+        <BuiltOnAzure data={{ backgroundColor: "transparent" }} />
+      </Section>
+    </>
+  );
+}
diff --git a/app/company/clients/[filename]/page.tsx b/app/company/clients/[filename]/page.tsx
new file mode 100644
index 000000000..5cd098bea
--- /dev/null
+++ b/app/company/clients/[filename]/page.tsx
@@ -0,0 +1,85 @@
+import client from "@/tina/client";
+import { TODAY } from "hooks/useFetchEvents";
+import { useSEO } from "hooks/useSeo";
+import { Metadata } from "next";
+import { TinaClient } from "../../../tina-client";
+import CaseStudies from "./index";
+
+export const dynamicParams = false;
+
+export async function generateStaticParams() {
+  let pageListData = await client.queries.caseStudyConnection();
+  const allPagesListData = pageListData;
+
+  while (pageListData.data.caseStudyConnection.pageInfo.hasNextPage) {
+    const lastCursor = pageListData.data.caseStudyConnection.pageInfo.endCursor;
+    pageListData = await client.queries.caseStudyConnection({
+      after: lastCursor,
+    });
+
+    allPagesListData.data.caseStudyConnection.edges.push(
+      ...pageListData.data.caseStudyConnection.edges
+    );
+  }
+
+  const pages = allPagesListData.data.caseStudyConnection.edges.map((page) => ({
+    filename: page.node._sys.filename,
+  }));
+
+  return pages;
+}
+
+const getData = async (filename: string) => {
+  const tinaProps = await client.queries.caseStudyContentQuery({
+    relativePath: `${filename}.mdx`,
+    date: TODAY.toISOString(),
+  });
+
+  const seo = tinaProps.data.caseStudy.seo;
+
+  return {
+    props: {
+      data: tinaProps.data,
+      query: tinaProps.query,
+      variables: tinaProps.variables,
+      header: {
+        url: tinaProps.data.global.header.url,
+      },
+      seo,
+      ...tinaProps,
+    },
+  };
+};
+
+type GenerateMetaDataProps = {
+  params: { filename: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  params,
+}: GenerateMetaDataProps): Promise<Metadata> {
+  const tinaProps = await getData(params.filename);
+
+  const seo = tinaProps.props.seo;
+  if (seo && !seo.canonical) {
+    seo.canonical = `${tinaProps.props.header.url}company/clients/${params.filename}`;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { seoProps } = useSEO(seo);
+
+  return { ...seoProps };
+}
+
+export default async function Consulting({
+  params,
+}: {
+  params: { filename: string };
+}) {
+  const { filename } = params;
+
+  const { props } = await getData(filename);
+
+  return <TinaClient props={props} Component={CaseStudies} />;
+}
diff --git a/content/company/case-study/fpe.mdx b/content/company/case-study/fpe.mdx
index 4a4f87962..7514f98c4 100644
--- a/content/company/case-study/fpe.mdx
+++ b/content/company/case-study/fpe.mdx
@@ -4,6 +4,7 @@ seo:
   description: >-
     Explore the journey of French Payroll Expert (FPE) - How integrating an
     AI-powered chatbot has revolutionized their customer service.
+  showBreadcrumb: true
 heading: French Payroll Expert (FPE)
 subHeading: >-
   Discover how integrating an AI-powered chatbot has revolutionized their
diff --git a/pages/company/clients/[filename].tsx b/pages/company/clients/[filename].tsx
deleted file mode 100644
index ed5bff16e..000000000
--- a/pages/company/clients/[filename].tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import client from "@/tina/client";
-import { TODAY } from "hooks/useFetchEvents";
-import { InferGetStaticPropsType } from "next";
-import { tinaField, useTina } from "tinacms/dist/react";
-import { TinaMarkdown } from "tinacms/dist/rich-text";
-import { BuiltOnAzure } from "../../../components/blocks";
-import { Blocks } from "../../../components/blocks-renderer";
-import { Breadcrumbs } from "../../../components/blocks/breadcrumbs";
-import { componentRenderer } from "../../../components/blocks/mdxComponentRenderer";
-import { TechUpgrade } from "../../../components/blocks/techUpgrade";
-import { Layout } from "../../../components/layout";
-import { Section } from "../../../components/util/section";
-import { SEO } from "../../../components/util/seo";
-import { RecaptchaContext } from "../../../context/RecaptchaContext";
-import { removeExtension } from "../../../services/client/utils.service";
-
-export default function CompanyPage(
-  props: InferGetStaticPropsType<typeof getStaticProps>
-) {
-  const { data } = useTina({
-    data: props.data,
-    query: props.query,
-    variables: props.variables,
-  });
-
-  return (
-    <RecaptchaContext.Provider
-      value={{ recaptchaKey: props.env.GOOGLE_RECAPTCHA_SITE_KEY }}
-    >
-      <SEO seo={props.seo} />
-      <Layout liveStreamData={props.data.userGroup} menu={data.megamenu}>
-        {data.caseStudy.seo?.showBreadcrumb === null ||
-          (data.caseStudy.seo?.showBreadcrumb && (
-            <Section className="mx-auto w-full max-w-9xl px-8 py-0">
-              <Breadcrumbs
-                path={removeExtension(props.variables.relativePath)}
-                suffix={data.global.breadcrumbSuffix}
-                title={data.caseStudy.seo?.title}
-                seoSchema={data.caseStudy.seo}
-              />
-            </Section>
-          ))}
-        <Section className="mx-auto w-full max-w-9xl px-8">
-          <div>
-            <h1
-              data-tina-field={tinaField(data.caseStudy, "heading")}
-              className="p-0"
-            >
-              {data.caseStudy.heading}
-            </h1>
-            <h2
-              data-tina-field={tinaField(data.caseStudy, "subHeading")}
-              className="p-0 text-sm"
-            >
-              {data.caseStudy.subHeading}
-            </h2>
-          </div>
-        </Section>
-        <Blocks prefix="CaseStudy_body" blocks={data.caseStudy._body} />
-        <Section className="prose mx-auto !block w-full max-w-9xl px-8 pb-16 pt-0">
-          <TinaMarkdown
-            data-tina-field={tinaField(data.caseStudy, "content")}
-            components={componentRenderer}
-            content={data.caseStudy.content}
-          />
-        </Section>
-        <Section className="mx-auto w-full !bg-gray-75 px-8 py-5">
-          <TechUpgrade />
-        </Section>
-        <Section>
-          <BuiltOnAzure data={{ backgroundColor: "transparent" }} />
-        </Section>
-      </Layout>
-    </RecaptchaContext.Provider>
-  );
-}
-
-export const getStaticProps = async ({ params }) => {
-  const tinaProps = await client.queries.caseStudyContentQuery({
-    relativePath: `${params.filename}.mdx`,
-    date: TODAY.toISOString(),
-  });
-
-  const seo = tinaProps.data.caseStudy.seo;
-  if (seo && (seo?.canonical === null || seo?.canonical === "")) {
-    seo.canonical = `${tinaProps.data.global.header.url}company/clients/${params.filename}`;
-  }
-
-  return {
-    props: {
-      data: tinaProps.data,
-      query: tinaProps.query,
-      variables: tinaProps.variables,
-      env: {
-        GOOGLE_RECAPTCHA_SITE_KEY:
-          process.env.GOOGLE_RECAPTCHA_SITE_KEY || null,
-      },
-      seo,
-    },
-  };
-};
-export const getStaticPaths = async () => {
-  let pageListData = await client.queries.caseStudyConnection();
-  const allPagesListData = pageListData;
-
-  while (pageListData.data.caseStudyConnection.pageInfo.hasNextPage) {
-    const lastCursor = pageListData.data.caseStudyConnection.pageInfo.endCursor;
-    pageListData = await client.queries.caseStudyConnection({
-      after: lastCursor,
-    });
-
-    allPagesListData.data.caseStudyConnection.edges.push(
-      ...pageListData.data.caseStudyConnection.edges
-    );
-  }
-
-  return {
-    paths: allPagesListData.data.caseStudyConnection.edges.map((page) => ({
-      params: { filename: page.node._sys.filename },
-    })),
-    fallback: false,
-  };
-};