diff --git a/.changeset/beige-cobras-hide.md b/.changeset/beige-cobras-hide.md
new file mode 100644
index 0000000000..fa459afa33
--- /dev/null
+++ b/.changeset/beige-cobras-hide.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Change ProductHeader behaviour to be fixed on desktop and maintain the old behaviour on mobile
diff --git a/apps/nextjs-website/src/components/atoms/GuideMenu/GuideMenu.tsx b/apps/nextjs-website/src/components/atoms/GuideMenu/GuideMenu.tsx
index 967d6425a6..2dd63c3bef 100644
--- a/apps/nextjs-website/src/components/atoms/GuideMenu/GuideMenu.tsx
+++ b/apps/nextjs-website/src/components/atoms/GuideMenu/GuideMenu.tsx
@@ -35,16 +35,20 @@ const GuideMenu = (menuProps: GuideMenuProps) => {
   const segments = currentPath.split('/');
   const expanded = segments.map((_, i) => segments.slice(0, i + 1).join('/'));
 
-  const top = scrollUp ? SITE_HEADER_HEIGHT : 0;
+  const topOffsetXs = scrollUp ? SITE_HEADER_HEIGHT : 0;
 
-  const height = `calc(100vh - ${top}px)`;
+  const height = `calc(100vh - ${topOffsetXs}px)`;
 
   const topStyle = menuProps.hasHeader
-    ? { xs: top + 62, sm: top + 90, md: top + 77 }
+    ? {
+        xs: topOffsetXs + 62,
+        sm: topOffsetXs + 90,
+        md: SITE_HEADER_HEIGHT + 77,
+      }
     : {
-        xs: top,
-        sm: top,
-        md: top,
+        xs: topOffsetXs,
+        sm: topOffsetXs,
+        md: topOffsetXs,
       };
 
   const handleClick = useCallback(() => {
diff --git a/apps/nextjs-website/src/components/atoms/ProductHeader/ProductHeader.tsx b/apps/nextjs-website/src/components/atoms/ProductHeader/ProductHeader.tsx
index 057c6179a8..bf2377a7b1 100644
--- a/apps/nextjs-website/src/components/atoms/ProductHeader/ProductHeader.tsx
+++ b/apps/nextjs-website/src/components/atoms/ProductHeader/ProductHeader.tsx
@@ -4,9 +4,9 @@ import { Product } from '@/lib/types/product';
 import { Box, useTheme } from '@mui/material';
 import { Header } from '@/editorialComponents/Header';
 import React, { FC } from 'react';
-import { useScrollUp } from '@/components/atoms/ProductHeader/useScrollUp';
 import { SITE_HEADER_HEIGHT } from '@/components/molecules/SiteHeader/SiteHeader';
 import { useTranslations } from 'next-intl';
+import { useScrollUp } from './useScrollUp';
 
 type ProductHeaderProps = {
   product: Product;
@@ -29,7 +29,7 @@ const ProductHeader: FC<ProductHeaderProps> = ({ product, path }) => {
     <Box
       sx={{
         position: 'fixed',
-        top: scrollUp ? SITE_HEADER_HEIGHT : 0,
+        top: { xs: scrollUp ? SITE_HEADER_HEIGHT : 0, md: SITE_HEADER_HEIGHT },
         zIndex: scrollUp ? 90 : 250,
         transition: 'top 0.5s linear',
         width: '100vw',
diff --git a/apps/nextjs-website/src/components/molecules/SiteHeader/SiteHeader.tsx b/apps/nextjs-website/src/components/molecules/SiteHeader/SiteHeader.tsx
index 82a17004fb..c014db2c12 100644
--- a/apps/nextjs-website/src/components/molecules/SiteHeader/SiteHeader.tsx
+++ b/apps/nextjs-website/src/components/molecules/SiteHeader/SiteHeader.tsx
@@ -29,10 +29,11 @@ const SiteHeader = (
   return (
     <Box
       sx={{
-        position: 'sticky',
+        position: 'fixed',
         top: 0,
         height: SITE_HEADER_HEIGHT,
         zIndex: 100,
+        width: '100vw',
       }}
     >
       <Stack
diff --git a/apps/nextjs-website/src/components/organisms/ProductLayout/ProductLayout.tsx b/apps/nextjs-website/src/components/organisms/ProductLayout/ProductLayout.tsx
index a3005c8a2e..ea6f2cdaf9 100644
--- a/apps/nextjs-website/src/components/organisms/ProductLayout/ProductLayout.tsx
+++ b/apps/nextjs-website/src/components/organisms/ProductLayout/ProductLayout.tsx
@@ -37,7 +37,7 @@ const ProductLayout: FC<LayoutPropsWithChildren> = ({
       {structuredData}
       {product && path && <ProductHeader product={product} path={path} />}
       {product && showBreadcrumbs && (
-        <EContainer sx={{ marginTop: 10, paddingTop: 3 }}>
+        <EContainer sx={{ marginTop: 15, paddingTop: 3 }}>
           <ProductBreadcrumbs
             breadcrumbs={[...productPageToBreadcrumbs(product, paths)]}
           />
diff --git a/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx b/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx
index 906b370817..a290ab73dc 100644
--- a/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx
+++ b/apps/nextjs-website/src/components/templates/GitBookTemplate/GitBookTemplate.tsx
@@ -35,12 +35,17 @@ const GitBookTemplate = ({
   versions,
   breadcrumbs,
   menuDistanceFromTop,
-  contentMarginTop = 75,
+  contentMarginTop,
   hasHeader = true,
   hasInPageMenu = true,
 }: GitBookTemplateProps) => {
   const t = useTranslations();
   const paddingTop = hasHeader ? '60px' : '-80px';
+  const responsiveContentMarginTop = (contentMarginTop &&
+    `${contentMarginTop}px`) || {
+    xs: '30px',
+    md: '110px',
+  };
 
   return (
     <FragmentProvider>
@@ -66,7 +71,7 @@ const GitBookTemplate = ({
         )}
         <Stack
           sx={{
-            margin: `${contentMarginTop} auto`,
+            marginTop: responsiveContentMarginTop,
             paddingTop: 3,
             flexGrow: { lg: 1 },
             maxWidth: {
diff --git a/apps/nextjs-website/src/components/templates/TutorialTemplate/TutorialTemplate.tsx b/apps/nextjs-website/src/components/templates/TutorialTemplate/TutorialTemplate.tsx
index 3863e9eec8..723e1e15b3 100644
--- a/apps/nextjs-website/src/components/templates/TutorialTemplate/TutorialTemplate.tsx
+++ b/apps/nextjs-website/src/components/templates/TutorialTemplate/TutorialTemplate.tsx
@@ -46,7 +46,7 @@ const TutorialTemplate = ({
             // 80px is the height of the product header
             marginTop: '80px',
             marginX: 'auto',
-            paddingTop: 3,
+            paddingTop: 8,
             px: { xs: 4, lg: 0 },
           }}
         >
diff --git a/apps/nextjs-website/src/components/templates/UseCaseTemplate/UseCaseTemplate.tsx b/apps/nextjs-website/src/components/templates/UseCaseTemplate/UseCaseTemplate.tsx
index 09feee7ad6..45e9f3903b 100644
--- a/apps/nextjs-website/src/components/templates/UseCaseTemplate/UseCaseTemplate.tsx
+++ b/apps/nextjs-website/src/components/templates/UseCaseTemplate/UseCaseTemplate.tsx
@@ -52,7 +52,7 @@ const UseCaseTemplate = ({
     >
       {product && (
         <Box
-          paddingY={'20px'}
+          paddingY={'74px'}
           marginTop={{ sm: '64px', md: '76px' }}
           style={{
             backgroundColor: palette.grey[50],