diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index 6a5f0d9f12..0bfe357c98 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -49,6 +49,7 @@ import { DragDropContext } from "../DragDropContext";
 import { IframeConfig } from "../../types/IframeConfig";
 
 const getClassName = getClassNameFactory("Puck", styles);
+const getLayoutClassName = getClassNameFactory("PuckLayout", styles);
 
 export function Puck<UserConfig extends Config = Config>({
   children,
@@ -369,7 +370,7 @@ export function Puck<UserConfig extends Config = Config>({
   }, []);
 
   return (
-    <div className="Puck">
+    <div className={`Puck ${getClassName()}`}>
       <AppProvider
         value={{
           state: appState,
@@ -467,14 +468,14 @@ export function Puck<UserConfig extends Config = Config>({
             <CustomPuck>
               {children || (
                 <div
-                  className={getClassName({
+                  className={getLayoutClassName({
                     leftSideBarVisible,
                     menuOpen,
                     mounted,
                     rightSideBarVisible,
                   })}
                 >
-                  <div className={getClassName("layout")}>
+                  <div className={getLayoutClassName("inner")}>
                     <CustomHeader
                       actions={
                         <>
@@ -491,10 +492,14 @@ export function Puck<UserConfig extends Config = Config>({
                         </>
                       }
                     >
-                      <header className={getClassName("header")}>
-                        <div className={getClassName("headerInner")}>
-                          <div className={getClassName("headerToggle")}>
-                            <div className={getClassName("leftSideBarToggle")}>
+                      <header className={getLayoutClassName("header")}>
+                        <div className={getLayoutClassName("headerInner")}>
+                          <div className={getLayoutClassName("headerToggle")}>
+                            <div
+                              className={getLayoutClassName(
+                                "leftSideBarToggle"
+                              )}
+                            >
                               <IconButton
                                 onClick={() => {
                                   toggleSidebars("left");
@@ -504,7 +509,11 @@ export function Puck<UserConfig extends Config = Config>({
                                 <PanelLeft focusable="false" />
                               </IconButton>
                             </div>
-                            <div className={getClassName("rightSideBarToggle")}>
+                            <div
+                              className={getLayoutClassName(
+                                "rightSideBarToggle"
+                              )}
+                            >
                               <IconButton
                                 onClick={() => {
                                   toggleSidebars("right");
@@ -515,21 +524,23 @@ export function Puck<UserConfig extends Config = Config>({
                               </IconButton>
                             </div>
                           </div>
-                          <div className={getClassName("headerTitle")}>
+                          <div className={getLayoutClassName("headerTitle")}>
                             <Heading rank={2} size="xs">
                               {headerTitle || rootProps.title || "Page"}
                               {headerPath && (
                                 <>
                                   {" "}
-                                  <code className={getClassName("headerPath")}>
+                                  <code
+                                    className={getLayoutClassName("headerPath")}
+                                  >
                                     {headerPath}
                                   </code>
                                 </>
                               )}
                             </Heading>
                           </div>
-                          <div className={getClassName("headerTools")}>
-                            <div className={getClassName("menuButton")}>
+                          <div className={getLayoutClassName("headerTools")}>
+                            <div className={getLayoutClassName("menuButton")}>
                               <IconButton
                                 onClick={() => {
                                   return setMenuOpen(!menuOpen);
@@ -567,7 +578,7 @@ export function Puck<UserConfig extends Config = Config>({
                         </div>
                       </header>
                     </CustomHeader>
-                    <div className={getClassName("leftSideBar")}>
+                    <div className={getLayoutClassName("leftSideBar")}>
                       <SidebarSection title="Components" noBorderTop>
                         <Components />
                       </SidebarSection>
@@ -576,7 +587,7 @@ export function Puck<UserConfig extends Config = Config>({
                       </SidebarSection>
                     </div>
                     <Canvas />
-                    <div className={getClassName("rightSideBar")}>
+                    <div className={getLayoutClassName("rightSideBar")}>
                       <SidebarSection
                         noPadding
                         noBorderTop
@@ -592,16 +603,13 @@ export function Puck<UserConfig extends Config = Config>({
                       </SidebarSection>
                     </div>
                   </div>
-                  <div
-                    id="puck-portal-root"
-                    className={getClassName("portal")}
-                  />
                 </div>
               )}
             </CustomPuck>
           </DropZoneProvider>
         </DragDropContext>
       </AppProvider>
+      <div id="puck-portal-root" className={getClassName("portal")} />
     </div>
   );
 }
diff --git a/packages/core/components/Puck/styles.module.css b/packages/core/components/Puck/styles.module.css
index b3badd348e..b27c9d786a 100644
--- a/packages/core/components/Puck/styles.module.css
+++ b/packages/core/components/Puck/styles.module.css
@@ -18,15 +18,25 @@
 
 .Puck {
   --puck-space-px: 16px;
-  bottom: 0;
   font-family: var(--puck-font-family);
+}
+
+.Puck-portal {
+  position: relative;
+  z-index: 2;
+}
+
+/* Puck Layout */
+
+.PuckLayout {
+  bottom: 0;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
 }
 
-.Puck-layout {
+.PuckLayout-inner {
   --puck-frame-width: auto;
   --puck-side-bar-width: 0px;
   display: grid;
@@ -38,71 +48,72 @@
   z-index: 0;
 }
 
-.Puck--mounted .Puck-layout {
+.PuckLayout--mounted .PuckLayout-inner {
   --puck-side-bar-width: 186px;
 }
 
-.Puck--leftSideBarVisible .Puck-layout {
+.PuckLayout--leftSideBarVisible .PuckLayout-inner {
   grid-template-columns:
     var(--puck-side-bar-width) var(--puck-frame-width)
     0;
 }
 
-.Puck--rightSideBarVisible .Puck-layout {
+.PuckLayout--rightSideBarVisible .PuckLayout-inner {
   grid-template-columns:
     0 var(--puck-frame-width)
     var(--puck-side-bar-width);
 }
 
-.Puck--leftSideBarVisible.Puck--rightSideBarVisible .Puck-layout {
+.PuckLayout--leftSideBarVisible.PuckLayout--rightSideBarVisible
+  .PuckLayout-inner {
   grid-template-columns:
     var(--puck-side-bar-width) var(--puck-frame-width)
     var(--puck-side-bar-width);
 }
 
 @media (min-width: 458px) {
-  .Puck-mounted .Puck-layout {
+  .PuckLayout-mounted .PuckLayout-inner {
     --puck-frame-width: minmax(266px, auto);
   }
 }
 
 @media (min-width: 638px) {
-  .Puck .Puck-layout {
+  .PuckLayout .PuckLayout-inner {
     --puck-side-bar-width: minmax(186px, 250px);
   }
 }
 
 @media (min-width: 766px) {
-  .Puck .Puck-layout {
+  .PuckLayout .PuckLayout-inner {
     --puck-frame-width: auto;
   }
 }
 
 @media (min-width: 990px) {
-  .Puck .Puck-layout {
+  .PuckLayout .PuckLayout-inner {
     --puck-side-bar-width: 256px;
   }
 }
 
 @media (min-width: 1198px) {
-  .Puck .Puck-layout {
+  .PuckLayout .PuckLayout-inner {
     --puck-side-bar-width: 274px;
   }
 }
 
 @media (min-width: 1398px) {
-  .Puck .Puck-layout {
+  .PuckLayout .PuckLayout-inner {
     --puck-side-bar-width: 290px;
   }
 }
 
 @media (min-width: 1598px) {
-  .Puck .Puck-layout {
+  .PuckLayout .PuckLayout-inner {
     --puck-side-bar-width: 320px;
   }
 }
 
-.Puck-header {
+.PuckLayout-header {
   background: var(--puck-color-white);
   border-bottom: 1px solid var(--puck-color-grey-09);
   color: var(--puck-color-black);
@@ -111,7 +122,7 @@
   max-width: 100vw;
 }
 
-.Puck-headerInner {
+.PuckLayout-headerInner {
   align-items: end;
   display: grid;
   gap: var(--puck-space-px);
@@ -121,51 +132,51 @@
   padding: var(--puck-space-px);
 }
 
-.Puck-headerToggle {
+.PuckLayout-headerToggle {
   color: var(--puck-color-grey-05);
   display: flex;
   margin-left: -4px;
   padding-top: 2px;
 }
 
-.Puck--rightSideBarVisible .Puck-rightSideBarToggle,
-.Puck--leftSideBarVisible .Puck-leftSideBarToggle {
+.PuckLayout--rightSideBarVisible .PuckLayout-rightSideBarToggle,
+.PuckLayout--leftSideBarVisible .PuckLayout-leftSideBarToggle {
   color: var(--puck-color-black);
 }
 
-.Puck-headerTitle {
+.PuckLayout-headerTitle {
   align-self: center;
 }
 
-.Puck-headerPath {
+.PuckLayout-headerPath {
   font-family: var(--puck-font-family-monospaced);
   font-size: var(--puck-font-size-xxs);
   font-weight: normal;
   word-break: break-all;
 }
 
-.Puck-headerTools {
+.PuckLayout-headerTools {
   display: flex;
   gap: 16px;
   justify-content: flex-end;
 }
 
-.Puck-menuButton {
+.PuckLayout-menuButton {
   color: var(--puck-color-grey-05);
   margin-left: -4px;
 }
 
-.Puck--menuOpen .Puck-menuButton {
+.PuckLayout--menuOpen .PuckLayout-menuButton {
   color: var(--puck-color-black);
 }
 
 @media (min-width: 638px) {
-  .Puck-menuButton {
+  .PuckLayout-menuButton {
     display: none;
   }
 }
 
-.Puck-leftSideBar {
+.PuckLayout-leftSideBar {
   background: var(--puck-color-grey-12);
   border-right: 1px solid var(--puck-color-grey-09);
   display: flex;
@@ -174,7 +185,7 @@
   overflow-y: auto;
 }
 
-.Puck-rightSideBar {
+.PuckLayout-rightSideBar {
   background: var(--puck-color-white);
   border-left: 1px solid var(--puck-color-grey-09);
   display: flex;
@@ -182,7 +193,3 @@
   grid-area: right;
   overflow-y: auto;
 }
-
-.Puck-portal {
-  z-index: 2;
-}