diff --git a/apps/website/screens/components/data-grid/DatagridPageLayout.tsx b/apps/website/screens/components/data-grid/DatagridPageLayout.tsx
index 8dbeea9ace..76908f3d22 100644
--- a/apps/website/screens/components/data-grid/DatagridPageLayout.tsx
+++ b/apps/website/screens/components/data-grid/DatagridPageLayout.tsx
@@ -1,4 +1,4 @@
-import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcFlex, DxcAlert } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
@@ -15,6 +15,9 @@ const DataGridPageHeading = ({ children }: { children: React.ReactNode }) => {
       <PageHeading>
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Data Grid" />
+          <DxcAlert type="warning" size="fillParent">
+            There are known styling issues with sortable columns when used in a NextJS app.
+          </DxcAlert>
           <DxcParagraph>
             A data grid is a component designed to display large volumes in a structured and organized manner. It
             structures data into rows and columns, making it easy for users to visualize, analyze, and interact with the