diff --git a/apps/demo/app/[framework]/[...puckPath]/client.tsx b/apps/demo/app/[framework]/[...puckPath]/client.tsx
index 0a92e74ae1..c82190c65a 100644
--- a/apps/demo/app/[framework]/[...puckPath]/client.tsx
+++ b/apps/demo/app/[framework]/[...puckPath]/client.tsx
@@ -52,72 +52,11 @@ export function Client({
             localStorage.setItem(key, JSON.stringify(data));
           }}
           plugins={[headingAnalyzer]}
-          renderHeader={({ children }) => (
+          renderHeaderActions={() => (
             <>
-              <div
-                style={{
-                  color: "var(--puck-color-yellow-3)",
-                  padding: "8px 12px",
-                  background: "var(--puck-color-yellow-8)",
-                  textAlign: "center",
-                }}
-              >
-                <b>Demo</b>: Using local storage.
-              </div>
-
-              <div style={{ display: "flex", padding: 16 }}>
-                <div>
-                  <label>
-                    <select
-                      onChange={(e) => {
-                        document.location = `/${e.currentTarget.value}/${path}/edit`;
-                      }}
-                      style={{
-                        background:
-                          "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>\") no-repeat",
-                        backgroundSize: "12px",
-                        backgroundPosition: "calc(100% - 8px) calc(50% + 4px)",
-                        backgroundRepeat: "no-repeat",
-                        backgroundColor: "transparent",
-                        appearance: "none",
-                        padding: 0,
-                        paddingRight: 32,
-                        fontSize: 24,
-                        fontWeight: 600,
-                        border: "none",
-                        color: "white",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        height: "100%",
-                        fontFamily: "var(--puck-font-stack)",
-                      }}
-                      defaultValue={framework}
-                    >
-                      <option value="antd">Ant Design</option>
-                      <option value="material-ui">Material UI</option>
-                      <option value="custom">Custom Example</option>
-                    </select>
-                  </label>
-                </div>
-                <div
-                  style={{
-                    display: "flex",
-                    gap: 16,
-                    flexGrow: 1,
-                    justifyContent: "flex-end",
-                  }}
-                >
-                  <Button
-                    href={`/${framework}/${path}`}
-                    newTab
-                    variant="secondary"
-                  >
-                    View page
-                  </Button>
-                  {children}
-                </div>
-              </div>
+              <Button href={`/${framework}/${path}`} newTab variant="secondary">
+                View page
+              </Button>
             </>
           )}
         />
diff --git a/apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx b/apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx
index f305987003..b7a1a70bef 100644
--- a/apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx
+++ b/apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx
@@ -46,7 +46,12 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
       <Section className={getClassName({ center: align === "center" })}>
         <div className={getClassName("actions")}>
           {buttons.map((button, i) => (
-            <Button key={i} href={button.href} variant={button.variant}>
+            <Button
+              key={i}
+              href={button.href}
+              variant={button.variant}
+              size="large"
+            >
               {button.label}
             </Button>
           ))}
diff --git a/apps/demo/app/configs/custom/blocks/Hero/index.tsx b/apps/demo/app/configs/custom/blocks/Hero/index.tsx
index c60dcc8393..b4e158e86d 100644
--- a/apps/demo/app/configs/custom/blocks/Hero/index.tsx
+++ b/apps/demo/app/configs/custom/blocks/Hero/index.tsx
@@ -122,7 +122,12 @@ export const Hero: ComponentConfig<HeroProps> = {
             <p className={getClassName("subtitle")}>{description}</p>
             <div className={getClassName("actions")}>
               {buttons.map((button, i) => (
-                <Button key={i} href={button.href} variant={button.variant}>
+                <Button
+                  key={i}
+                  href={button.href}
+                  variant={button.variant}
+                  size="large"
+                >
                   {button.label}
                 </Button>
               ))}
diff --git a/apps/demo/app/configs/custom/components/Footer/index.tsx b/apps/demo/app/configs/custom/components/Footer/index.tsx
index 459c2a9d06..8dfeb8f226 100644
--- a/apps/demo/app/configs/custom/components/Footer/index.tsx
+++ b/apps/demo/app/configs/custom/components/Footer/index.tsx
@@ -54,7 +54,7 @@ const FooterList = ({
 
 const Footer = ({ children }: { children: ReactNode }) => {
   return (
-    <footer style={{ background: "var(--puck-color-grey-10)" }}>
+    <footer style={{ background: "var(--puck-color-grey-11)" }}>
       <h2 style={{ visibility: "hidden", height: 0 }}>Footer</h2>
       <Section padding="32px">
         <div
@@ -74,7 +74,7 @@ const Footer = ({ children }: { children: ReactNode }) => {
           padding: 64,
           textAlign: "center",
           color: "var(--puck-color-grey-2)",
-          background: "var(--puck-color-grey-9)",
+          background: "var(--puck-color-grey-10)",
         }}
       >
         Made by{" "}
diff --git a/apps/demo/app/configs/custom/index.tsx b/apps/demo/app/configs/custom/index.tsx
index c7ed8b1fde..667aa22396 100644
--- a/apps/demo/app/configs/custom/index.tsx
+++ b/apps/demo/app/configs/custom/index.tsx
@@ -302,7 +302,7 @@ export const initialData: Record<string, Data> = {
         props: { size: "96px", id: "VerticalSpace-1687284290127" },
       },
     ],
-    root: { title: "Custom Example" },
+    root: { title: "Puck Example" },
   },
   "/pricing": {
     content: [],
diff --git a/packages/core/components/Button/Button.module.css b/packages/core/components/Button/Button.module.css
index d62cf6139f..cef928248e 100644
--- a/packages/core/components/Button/Button.module.css
+++ b/packages/core/components/Button/Button.module.css
@@ -4,18 +4,35 @@
   border: none;
   border-radius: 4px;
   color: white;
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   letter-spacing: 0.05ch;
   font-size: 14px;
-  font-weight: 600;
-  padding-bottom: 12px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 12px;
+  font-weight: 500;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
+  margin: 0;
+}
+
+.Button--medium {
+  padding-bottom: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 8px;
+}
+
+.Button--large {
+  padding-bottom: 12px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 12px;
+}
+
+.Button-icon {
+  margin-top: 2px;
 }
 
 .Button:hover {
diff --git a/packages/core/components/Button/Button.tsx b/packages/core/components/Button/Button.tsx
index 6aab8303ff..2c36aa1218 100644
--- a/packages/core/components/Button/Button.tsx
+++ b/packages/core/components/Button/Button.tsx
@@ -15,6 +15,8 @@ export const Button = ({
   tabIndex,
   newTab,
   fullWidth,
+  icon,
+  size = "medium",
 }: {
   children: ReactNode;
   href?: string;
@@ -25,6 +27,8 @@ export const Button = ({
   tabIndex?: number;
   newTab?: boolean;
   fullWidth?: boolean;
+  icon?: ReactNode;
+  size?: "medium" | "large";
 }) => {
   const [loading, setLoading] = useState(false);
 
@@ -37,6 +41,7 @@ export const Button = ({
         secondary: variant === "secondary",
         disabled,
         fullWidth,
+        [size]: true,
       })}
       onClick={(e) => {
         if (!onClick) return;
@@ -53,6 +58,7 @@ export const Button = ({
       rel={newTab ? "noreferrer" : undefined}
       href={href}
     >
+      {icon && <div className={getClassName("icon")}>{icon}</div>}
       {children}
       {loading && (
         <>
diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
index 31b4f0db7c..e27fa17da2 100644
--- a/packages/core/components/ExternalInput/index.tsx
+++ b/packages/core/components/ExternalInput/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Field } from "../../types/Config";
+import { Link } from "react-feather";
 
 const getClassName = getClassNameFactory("ExternalInput", styles);
 
@@ -47,11 +48,18 @@ export const ExternalInput = ({
           className={getClassName("button")}
         >
           {/* NB this is hardcoded to strapi for now */}
-          {selectedData
-            ? field.getItemSummary
-              ? field.getItemSummary(selectedData)
-              : `${field.adaptor.name} item`
-            : `Select from ${field.adaptor.name}`}
+          {selectedData ? (
+            field.getItemSummary ? (
+              field.getItemSummary(selectedData)
+            ) : (
+              `${field.adaptor.name} item`
+            )
+          ) : (
+            <>
+              <Link size="16" />
+              <span>Select from {field.adaptor.name}</span>
+            </>
+          )}
         </button>
         {selectedData && (
           <button
diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
index 494cb4ccd8..415d81bd14 100644
--- a/packages/core/components/ExternalInput/styles.module.css
+++ b/packages/core/components/ExternalInput/styles.module.css
@@ -7,6 +7,10 @@
 }
 
 .ExternalInput-button {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
   background-color: white;
   border: 1px solid var(--puck-color-grey-8);
   border-radius: 4px;
@@ -29,6 +33,7 @@
 }
 
 .ExternalInput--hasData .ExternalInput-button {
+  display: block;
   color: var(--puck-color-neutral-4);
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
@@ -39,6 +44,10 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   background-color: var(--puck-color-neutral-1);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
   padding: 8px 12px;
   margin-left: -1px;
 }
@@ -95,8 +104,8 @@
 }
 
 .ExternalInput th {
-  background-color: var(--puck-color-grey-1);
-  color: white;
+  border-bottom: 1px solid var(--puck-color-grey-8);
+  border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
   padding: 16px 24px;
   opacity: 0.9;
@@ -111,22 +120,22 @@
 }
 
 .ExternalInput tr:nth-of-type(2n) {
-  background-color: var(--puck-color-grey-9);
+  background-color: var(--puck-color-grey-10);
 }
 
 .ExternalInput tr td:first-of-type {
   font-weight: 500;
 }
 
-.ExternalInput tr:hover {
-  background: var(--puck-color-grey-10);
+.ExternalInput tbody tr:hover {
+  background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
   position: relative;
   margin-left: -5px;
 }
 
-.ExternalInput tr:hover td:first-of-type {
+.ExternalInput tbody tr:hover td:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }
diff --git a/packages/core/components/IconButton/IconButton.module.css b/packages/core/components/IconButton/IconButton.module.css
new file mode 100644
index 0000000000..16124724f0
--- /dev/null
+++ b/packages/core/components/IconButton/IconButton.module.css
@@ -0,0 +1,16 @@
+.IconButton {
+  background: transparent;
+  border: none;
+  color: var(--puck-color-grey-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.IconButton:hover {
+  background: var(--puck-color-grey-9);
+  color: var(--puck-color-blue);
+  cursor: pointer;
+}
diff --git a/packages/core/components/IconButton/IconButton.tsx b/packages/core/components/IconButton/IconButton.tsx
new file mode 100644
index 0000000000..08c196e8de
--- /dev/null
+++ b/packages/core/components/IconButton/IconButton.tsx
@@ -0,0 +1,70 @@
+import { ReactNode, useState } from "react";
+import styles from "./IconButton.module.css";
+import getClassNameFactory from "../../lib/get-class-name-factory";
+import { ClipLoader } from "react-spinners";
+
+const getClassName = getClassNameFactory("IconButton", styles);
+
+export const IconButton = ({
+  children,
+  href,
+  onClick,
+  variant = "primary",
+  type,
+  disabled,
+  tabIndex,
+  newTab,
+  fullWidth,
+  title,
+}: {
+  children: ReactNode;
+  href?: string;
+  onClick?: (e: any) => void | Promise<void>;
+  variant?: "primary" | "secondary";
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  tabIndex?: number;
+  newTab?: boolean;
+  fullWidth?: boolean;
+  title: string;
+}) => {
+  const [loading, setLoading] = useState(false);
+
+  const ElementType = href ? "a" : "button";
+
+  const el = (
+    <ElementType
+      className={getClassName({
+        primary: variant === "primary",
+        secondary: variant === "secondary",
+        disabled,
+        fullWidth,
+      })}
+      onClick={(e) => {
+        if (!onClick) return;
+
+        setLoading(true);
+        Promise.resolve(onClick(e)).then(() => {
+          setLoading(false);
+        });
+      }}
+      type={type}
+      disabled={disabled || loading}
+      tabIndex={tabIndex}
+      target={newTab ? "_blank" : undefined}
+      rel={newTab ? "noreferrer" : undefined}
+      href={href}
+      title={title}
+    >
+      {children}
+      {loading && (
+        <>
+          &nbsp;&nbsp;
+          <ClipLoader color="inherit" size="14px" />
+        </>
+      )}
+    </ElementType>
+  );
+
+  return el;
+};
diff --git a/packages/core/components/IconButton/index.ts b/packages/core/components/IconButton/index.ts
new file mode 100644
index 0000000000..53185101de
--- /dev/null
+++ b/packages/core/components/IconButton/index.ts
@@ -0,0 +1 @@
+export * from "./IconButton";
diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
index 05607211e7..28a8ab4204 100644
--- a/packages/core/components/InputOrGroup/index.tsx
+++ b/packages/core/components/InputOrGroup/index.tsx
@@ -12,6 +12,7 @@ import {
   CheckCircle,
   Hash,
 } from "react-feather";
+import { IconButton } from "../IconButton";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -43,26 +44,31 @@ export const InputOrGroup = ({
           </div>
           {label || name}
         </b>
-        <div className={getClassName("item")}>
+        <div className={getClassName("array")}>
           {Array.isArray(value) ? (
             value.map((item, i) => (
-              <details key={`${name}_${i}`} className={getClassName("array")}>
+              <details
+                key={`${name}_${i}`}
+                className={getClassName("arrayItem")}
+              >
                 <summary>
                   {field.getItemSummary
                     ? field.getItemSummary(item, i)
                     : `Item #${i}`}
 
-                  <button
-                    className={getClassName("action")}
-                    onClick={() => {
-                      const existingValue = value || [];
-
-                      existingValue.splice(i, 1);
-                      onChange(existingValue);
-                    }}
-                  >
-                    <Trash size={21} />
-                  </button>
+                  <div className={getClassName("arrayItemAction")}>
+                    <IconButton
+                      onClick={() => {
+                        const existingValue = value || [];
+
+                        existingValue.splice(i, 1);
+                        onChange(existingValue);
+                      }}
+                      title="Delete"
+                    >
+                      <Trash size={21} />
+                    </IconButton>
+                  </div>
                 </summary>
                 <fieldset>
                   {Object.keys(field.arrayFields!).map((fieldName) => {
diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
index 0c13b6e401..794c82cf2c 100644
--- a/packages/core/components/InputOrGroup/styles.module.css
+++ b/packages/core/components/InputOrGroup/styles.module.css
@@ -1,8 +1,7 @@
 .Input {
-  background: white;
   color: var(--puck-color-grey-3);
   padding: 16px;
-  border-radius: 4px;
+  padding-bottom: 12px;
   display: block;
   font-family: var(--puck-font-stack);
 }
@@ -16,14 +15,20 @@
 }
 
 .Input + .Input {
+  border-top: 1px solid var(--puck-color-grey-8);
   margin-top: 8px;
 }
 
+.Input .Input + .Input {
+  border-top: 0px;
+  margin-top: 12px;
+}
+
 .Input-label {
   display: flex;
   padding-bottom: 12px;
   font-size: var(--puck-font-size-xxs);
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .Input-labelIcon {
@@ -53,7 +58,7 @@
 }
 
 .Input--readOnly .Input-input {
-  background-color: var(--puck-color-grey-9);
+  background-color: var(--puck-color-grey-10);
   border-color: var(--puck-color-grey-8);
 }
 
@@ -61,72 +66,86 @@
   border-color: var(--puck-color-neutral-3);
 }
 
-.Input-array {
+.Input-arrayItem {
   background: white;
+  border: 1px solid var(--puck-color-grey-8);
+  border-radius: 4px;
 }
 
-.Input-array > summary {
+.Input-arrayItem > summary {
   color: var(--puck-color-grey-3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-size: var(--puck-font-size-xxs);
+  list-style: none;
   padding: 12px 16px;
   position: relative;
 }
 
-.Input-array > summary:hover {
+.Input-arrayItem > summary:hover {
   cursor: pointer;
   color: var(--puck-color-blue);
 }
 
-.Input-array > fieldset {
+.Input-arrayItem > summary::-webkit-details-marker {
+  display: none;
+}
+
+.Input-arrayItem > fieldset {
+  background-color: var(--puck-color-grey-11);
   border: none;
+  border-top: 1px solid var(--puck-color-grey-8);
   margin: 0;
+  padding-bottom: 16px;
+  padding-top: 16px;
 }
-.Input-array > fieldset .Input + .Input-array > fieldset .Input {
+
+.Input-arrayItem > fieldset .Input + .Input-arrayItem > fieldset .Input {
   margin-top: 16px;
 }
 
-.Input-array > fieldset .Input-label {
+.Input-arrayItem > fieldset .Input-label {
   padding-bottom: 4px;
 }
 
-.Input-array .Input-action {
-  background: transparent;
-  border: none;
+.Input-arrayItem .Input-arrayItemAction {
   border-radius: 4px;
-  color: var(--puck-color-grey-2);
-  display: none;
-  padding: 8px;
-  position: absolute;
-  right: 4px;
-  top: 4px;
+  opacity: 0;
 }
 
-.Input-array summary:hover .Input-action {
-  display: block;
+.Input-arrayItem summary:hover .Input-arrayItemAction {
+  opacity: 1;
 }
 
-.Input-array .Input-action:hover {
+.Input-arrayItem .Input-arrayItemAction:hover {
   background: var(--puck-color-grey-9);
   color: var(--puck-color-blue);
   cursor: pointer;
 }
 
+.Input-arrayItem + .Input-arrayItem {
+  margin-top: 12px;
+}
+
 .Input-addButton {
   background-color: white;
   border: none;
+  border-radius: 4px;
   color: var(--puck-color-blue);
   cursor: pointer;
   width: 100%;
   margin: 0;
+  margin-top: 12px;
   padding: 12px 16px;
   text-align: left;
 }
 
 .Input-addButton:hover {
-  background: var(--puck-color-grey-9);
+  background: var(--puck-color-grey-10);
 }
 
-.Input-item {
+.Input-array {
   overflow: hidden;
 }
 
@@ -148,22 +167,27 @@
 }
 
 .Input-radioInner {
+  color: var(--puck-color-grey-4);
   font-size: var(--puck-font-size-xxxs);
   padding: 8px 12px;
   text-align: center;
 }
 
 .Input-radioInner:hover {
-  background-color: var(--puck-color-azure-8);
+  background-color: var(--puck-color-azure-9);
   cursor: pointer;
 }
 
 .Input-radio input:checked ~ .Input-radioInner {
-  background-color: var(--puck-color-azure-4);
-  color: white;
+  background-color: var(--puck-color-azure-9);
+  color: var(--puck-color-grey-2);
   font-weight: 500;
 }
 
 .Input-radio input {
   display: none;
 }
+
+.Input textarea {
+  margin-bottom: -4px; /* Remove strange bottom border */
+}
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index 7299d93d08..b45c7f31b7 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -22,6 +22,9 @@ import { usePlaceholderStyle } from "../../lib/use-placeholder-style";
 
 import { SidebarSection } from "../SidebarSection";
 import { scrollIntoView } from "../../lib/scroll-into-view";
+import { Globe, Sidebar } from "react-feather";
+import { Heading } from "../Heading";
+import { IconButton } from "../IconButton/IconButton";
 
 const Field = () => {};
 
@@ -56,6 +59,7 @@ export function Puck({
   onPublish,
   plugins = [],
   renderHeader,
+  renderHeaderActions,
 }: {
   config: Config;
   data: Data;
@@ -67,6 +71,10 @@ export function Puck({
     data: Data;
     setData: (data: Data) => void;
   }) => ReactElement;
+  renderHeaderActions?: (props: {
+    data: Data;
+    setData: (data: Data) => void;
+  }) => ReactElement;
 }) {
   const [data, setData] = useState(initialData);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
@@ -132,6 +140,8 @@ export function Puck({
 
   const { onDragUpdate, placeholderStyle } = usePlaceholderStyle();
 
+  const [leftSidebarVisible, setLeftSidebarVisible] = useState(true);
+
   return (
     <div className="puck">
       <DragDropContext
@@ -182,7 +192,9 @@ export function Puck({
           style={{
             display: "grid",
             gridTemplateAreas: '"header header header" "left editor right"',
-            gridTemplateColumns: "288px auto 288px",
+            gridTemplateColumns: `${
+              leftSidebarVisible ? "288px" : "0px"
+            } auto 288px`,
             gridTemplateRows: "min-content auto",
             height: "100vh",
             position: "fixed",
@@ -194,10 +206,8 @@ export function Puck({
         >
           <header
             style={{
-              background: "var(--puck-color-grey-0)",
-              color: "white",
               gridArea: "header",
-              borderBottom: "1px solid #cccccc",
+              borderBottom: "1px solid var(--puck-color-grey-8)",
             }}
           >
             {renderHeader ? (
@@ -207,6 +217,7 @@ export function Puck({
                     onClick={() => {
                       onPublish(data);
                     }}
+                    icon={<Globe size="14px" />}
                   >
                     Publish
                   </Button>
@@ -217,25 +228,63 @@ export function Puck({
             ) : (
               <div
                 style={{
-                  display: "flex",
-                  justifyContent: "flex-end",
+                  display: "grid",
                   padding: 16,
+                  gridTemplateAreas: '"left middle right"',
+                  gridTemplateColumns: "288px auto 288px",
+                  gridTemplateRows: "auto",
                 }}
               >
-                <Button
-                  onClick={() => {
-                    onPublish(data);
+                <div
+                  style={{
+                    display: "flex",
+                    gap: 16,
                   }}
                 >
-                  Publish
-                </Button>
+                  <IconButton
+                    onClick={() => setLeftSidebarVisible(!leftSidebarVisible)}
+                    title="Toggle left sidebar"
+                  >
+                    <Sidebar />
+                  </IconButton>
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <Heading rank={2} size="xs">
+                    {data.root.title || "Page"}
+                  </Heading>
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    gap: 16,
+                    justifyContent: "flex-end",
+                  }}
+                >
+                  {renderHeaderActions &&
+                    renderHeaderActions({ data, setData })}
+                  <Button
+                    onClick={() => {
+                      onPublish(data);
+                    }}
+                    icon={<Globe size="14px" />}
+                  >
+                    Publish
+                  </Button>
+                </div>
               </div>
             )}
           </header>
           <div
             style={{
               gridArea: "left",
-              background: "var(--puck-color-grey-10)",
+              background: "var(--puck-color-grey-11)",
+              borderRight: "1px solid var(--puck-color-grey-8)",
               overflowY: "auto",
               display: "flex",
               flexDirection: "column",
@@ -282,7 +331,7 @@ export function Puck({
           </div>
           <div
             style={{
-              background: "var(--puck-color-grey-8)",
+              background: "var(--puck-color-grey-9)",
               padding: 32,
               overflowY: "auto",
               gridArea: "editor",
@@ -294,6 +343,7 @@ export function Puck({
               style={{
                 background: "white",
                 borderRadius: 16,
+                border: "1px solid var(--puck-color-grey-8)",
                 overflow: "hidden",
                 zoom: 0.75,
               }}
@@ -385,7 +435,7 @@ export function Puck({
           </div>
           <div
             style={{
-              background: "var(--puck-color-grey-10)",
+              borderLeft: "1px solid var(--puck-color-grey-8)",
               overflowY: "auto",
               gridArea: "right",
               fontFamily: "var(--puck-font-stack)",
@@ -395,7 +445,9 @@ export function Puck({
           >
             <FieldWrapper data={data}>
               <SidebarSection
-                background="var(--puck-color-grey-9)"
+                noPadding
+                breadcrumb={selectedIndex !== null ? "Page" : ""}
+                breadcrumbClick={() => setSelectedIndex(null)}
                 title={
                   selectedIndex !== null
                     ? (data.content[selectedIndex].type as string)
diff --git a/packages/core/components/SidebarSection/index.tsx b/packages/core/components/SidebarSection/index.tsx
index 84681f8208..66412b712b 100644
--- a/packages/core/components/SidebarSection/index.tsx
+++ b/packages/core/components/SidebarSection/index.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Heading } from "../Heading";
+import { ChevronRight } from "react-feather";
 
 const getClassName = getClassNameFactory("SidebarSection", styles);
 
@@ -9,19 +10,44 @@ export const SidebarSection = ({
   children,
   title,
   background,
+  breadcrumb,
+  breadcrumbClick,
+  noPadding,
 }: {
   children: ReactNode;
-  title: string;
+  title: ReactNode;
   background?: string;
+  breadcrumb?: string;
+  breadcrumbClick?: () => void;
+  noPadding?: boolean;
 }) => {
   return (
-    <details className={getClassName()} open style={{ background }}>
-      <summary className={getClassName("title")}>
-        <Heading rank={2} size="xs">
-          {title}
-        </Heading>
-      </summary>
+    <div className={getClassName({ noPadding })} style={{ background }}>
+      <div className={getClassName("title")}>
+        <span
+          style={{
+            display: "flex",
+            gap: 4,
+            alignItems: "center",
+          }}
+        >
+          {breadcrumb && (
+            <>
+              <div
+                className={getClassName("breadcrumb")}
+                onClick={breadcrumbClick}
+              >
+                {breadcrumb}
+              </div>
+              <ChevronRight size={16} />
+            </>
+          )}
+          <Heading rank={2} size="xs">
+            {title}
+          </Heading>
+        </span>
+      </div>
       <div className={getClassName("content")}>{children}</div>
-    </details>
+    </div>
   );
 };
diff --git a/packages/core/components/SidebarSection/styles.module.css b/packages/core/components/SidebarSection/styles.module.css
index e16de64805..376e9ce74c 100644
--- a/packages/core/components/SidebarSection/styles.module.css
+++ b/packages/core/components/SidebarSection/styles.module.css
@@ -1,5 +1,6 @@
 .SidebarSection {
   display: flex;
+  position: relative;
   flex-direction: column;
 }
 
@@ -13,25 +14,26 @@
   border-bottom: 1px solid var(--puck-color-grey-8);
 }
 
-.SidebarSection-title:hover {
-  opacity: 0.6;
-  cursor: pointer;
-}
-
 .SidebarSection-content {
   border-bottom: 1px solid var(--puck-color-grey-8);
   padding: 16px;
 }
 
+.SidebarSection--noPadding .SidebarSection-content {
+  padding: 0px;
+}
+
 .SidebarSection:last-of-type .SidebarSection-content {
   border-bottom: none;
   flex-grow: 1;
 }
 
-.SidebarSection > summary {
-  list-style: none;
+.SidebarSection-breadcrumb {
+  color: var(--puck-color-azure-3);
 }
 
-.SidebarSection > summary::-webkit-details-marker {
-  display: none;
+.SidebarSection-breadcrumb:hover {
+  color: var(--puck-color-azure-4);
+  cursor: pointer;
+  text-decoration: underline;
 }
diff --git a/packages/core/styles/color.css b/packages/core/styles/color.css
index 3a7a4276b4..475b14a354 100644
--- a/packages/core/styles/color.css
+++ b/packages/core/styles/color.css
@@ -77,8 +77,9 @@
   --puck-color-grey-6: #ababab;
   --puck-color-grey-7: #c3c3c3;
   --puck-color-grey-8: #dcdcdc;
-  --puck-color-grey-9: #f5f5f5;
-  --puck-color-grey-10: #fafafa;
+  --puck-color-grey-9: #efefef; /* Drifted from Measured value */
+  --puck-color-grey-10: #f5f5f5;
+  --puck-color-grey-11: #fafafa;
 
   --puck-color-black: #000000;
   --puck-color-white: #ffffff;