diff --git a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
index f688b33c1..2187c25a9 100644
--- a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
+++ b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
@@ -122,7 +122,7 @@ const sections = [
         title: "Application layout with components",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/p4xxm3?view=editor+%2B+preview&module=%2Fsrc%2FApp.js"
+            src="https://codesandbox.io/p/sandbox/default-app-layout-s65j9x"
             style={{
               width: "100%",
               minHeight: "500px",
diff --git a/apps/website/screens/components/footer/code/FooterCodePage.tsx b/apps/website/screens/components/footer/code/FooterCodePage.tsx
index 7bffbaa62..8c9d10a1d 100644
--- a/apps/website/screens/components/footer/code/FooterCodePage.tsx
+++ b/apps/website/screens/components/footer/code/FooterCodePage.tsx
@@ -184,7 +184,7 @@ const sections = [
         title: "Footer in application layout",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/3fjvd3?view=editor+%2B+preview&hidenavigation=1"
+            src="https://codesandbox.io/p/sandbox/default-footer-pf6l2y"
             style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
             title="Footer in application layout"
             sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx
index 3b59f354d..7b9d97dce 100644
--- a/apps/website/screens/components/header/code/HeaderCodePage.tsx
+++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx
@@ -146,7 +146,7 @@ const sections = [
         title: "Header in application layout",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/6m6hdj?view=editor+%2B+preview&module=%2Fsrc%2FApp.js&hidenavigation=1"
+            src="https://codesandbox.io/p/sandbox/default-header-qpz6dj"
             style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
             title="Header in application layout"
             sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
index 551981c7e..8aea4f519 100644
--- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
+++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
@@ -194,7 +194,7 @@ const sections = [
         title: "Application layout with sidenav",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/ysg7l5?view=editor+%2B+preview&hidenavigation=1"
+            src="https://codesandbox.io/p/sandbox/default-sidenav-cvxr3m"
             style={{
               width: "100%",
               minHeight: "500px",