diff --git a/_drafts/_content-authoring.mdx b/_drafts/_content-authoring.mdx
new file mode 100644
index 000000000..44c65ec65
--- /dev/null
+++ b/_drafts/_content-authoring.mdx
@@ -0,0 +1,34 @@
+---
+title: Authoring with Storefront Builder
+description: Learn about the content authoring capabilities of the Commerce Storefront.
+---
+
+The Commerce Storefront Builder powered by Edge Delivery Services enables content authors (marketers and merchandisers) to create, optimize, and deliver exceptional user experiences without IT dependencies. The platform enables content creators to:
+
+- **Create and optimize content** using preferred authoring methods with real-time preview and publishing capabilities
+- **Schedule campaigns** for future activation and deployment
+- **Monitor performance** with detailed analytics and easy rollback functionality for changes
+- **Enable shoppable experiences** across all content touchpoints
+- **Measure merchandising effectiveness** through comprehensive performance tracking
+- **Implement A/B testing** with experimentation tools and detailed instrumentation via Project Beacon
+- **Access merchandising tools** through an extensive marketplace of tactics and strategies
+- **Optimize traffic acquisition** to improve profit margins
+- **Leverage advanced SEO** with state-of-the-art organic search tactics, including Signed Exchanges (SXG)
+
+## Supported Use Cases
+
+The Commerce Storefront supports a comprehensive range of merchandising and content management use cases:
+
+### Content Management
+- **Preview and scheduling**: Merchants can preview changes to Product Listing Pages (PLP) and Product Detail Pages (PDP), and schedule publishing for these pages or specific changes
+- **Content targeting**: Create content blocks and link them to rules for conditional display based on active campaigns or customer criteria
+
+### Customer Segmentation and Targeting
+- **Cart rules**: Create targeted cart rules for specific customer segments using both Commerce segments and Adobe Experience Platform (AEP) segments
+- **Catalog rules**: Implement catalog rules targeted to customer groups (logged-in users vs. guests) using Commerce segments
+- **Page targeting**: Target PLP and PDP pages to specific customer groups using Commerce segments
+- **Content block targeting**: Target content blocks to customer segments using both Commerce and AEP segmentation
+
+### Merchandising Control
+- **Product sorting**: Create rules that affect the sorting order of the product catalog
+- **Performance tracking**: Monitor which merchandising tactics deliver results and optimize accordingly
\ No newline at end of file
diff --git a/astro.config.mjs b/astro.config.mjs
index e868f20dd..3ce4fba6f 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -137,65 +137,7 @@ async function config() {
         plugins: [
           starlightSidebarTopics([
             {
-              label: 'Merchants',
-              link: 'merchants/storefront-builder/',
-              icon: 'seti:svg',
-              items: [
-                {
-                  label: 'Storefront Builder',
-                  items: [
-                    {
-                      label: 'Introduction',
-                      link: 'merchants/storefront-builder/'
-                    },
-                  ],
-                },
-                {
-                  label: 'Storefront Customization',
-                  items: [
-                    {
-                      label: 'Introduction',
-                      link: 'merchants/get-started/'
-                    },
-                    {
-                      label: 'Enrichment',
-                      link: 'merchants/get-started/enrichment/'
-                    },
-                    {
-                      label: 'Experiments',
-                      link: 'merchants/get-started/experiments/'
-                    },
-                    {
-                      label: 'Personalization',
-                      link: 'merchants/get-started/personalization/'
-                    },
-                    {
-                      label: 'Product recommendations',
-                      link: 'merchants/get-started/product-recommendations/'
-                    },
-                    {
-                      label: 'Terms and conditions',
-                      link: 'merchants/get-started/terms-and-conditions/'
-                    },
-                  ],
-                },
-                {
-                  label: 'Multistore',
-                  items: [
-                    {
-                      label: 'Introduction',
-                      link: 'merchants/multistore/'
-                    },
-                    {
-                      label: 'Content localization',
-                      link: 'merchants/multistore/content-localization/'
-                    },
-                  ],
-                },
-              ],
-            },
-            {
-              label: 'Developers',
+              label: 'Storefront Developers',
               link: '/get-started/',
               icon: 'seti:json',
               items: [
@@ -658,6 +600,80 @@ async function config() {
                 },
               ],
             },
+            {
+              label: 'Storefront Authors',
+              link: 'merchants/storefront-builder/',
+              icon: 'seti:svg',
+              items: [
+                {
+                  label: 'Commerce Storefront',
+                  items: [
+                    {
+                      label: 'Create your content',
+                      link: 'merchants/storefront-builder/'
+                    },
+                    {
+                      label: 'Using the Document Authoring tool',
+                      link: 'merchants/storefront-builder/document-authoring/'
+                    },
+                    {
+                      label: 'Using the Visual Editor',
+                      link: 'merchants/storefront-builder/visual-editor/'
+                    },
+                    // {
+                    //   label: 'Using digital assets management',
+                    //   link: 'merchants/storefront-builder/digital-assets-management/'
+                    // },
+                    {
+                      label: 'Using Content and Commerce blocks',
+                      link: 'merchants/storefront-builder/content-commerce-blocks/'
+                    },
+                  ],
+                },
+                {
+                  label: 'Content customizations',
+                  items: [
+                    {
+                      label: 'Introduction',
+                      link: 'merchants/get-started/'
+                    },
+                    {
+                      label: 'Enrichment',
+                      link: 'merchants/get-started/enrichment/'
+                    },
+                    {
+                      label: 'Experiments',
+                      link: 'merchants/get-started/experiments/'
+                    },
+                    {
+                      label: 'Personalization',
+                      link: 'merchants/get-started/personalization/'
+                    },
+                    {
+                      label: 'Product recommendations',
+                      link: 'merchants/get-started/product-recommendations/'
+                    },
+                    {
+                      label: 'Terms and conditions',
+                      link: 'merchants/get-started/terms-and-conditions/'
+                    },
+                  ],
+                },
+                {
+                  label: 'Multistore',
+                  items: [
+                    {
+                      label: 'Introduction',
+                      link: 'merchants/multistore/'
+                    },
+                    {
+                      label: 'Localization',
+                      link: 'merchants/multistore/content-localization/'
+                    },
+                  ],
+                },
+              ],
+            },
             {
               label: 'Drop-in SDK',
               badge: 'Beta',
diff --git a/public/images/merchants/LocalizationSteps.001.png b/public/images/merchants/LocalizationSteps.001.png
deleted file mode 100644
index 375428175..000000000
Binary files a/public/images/merchants/LocalizationSteps.001.png and /dev/null differ
diff --git a/src/components/PDFViewer.astro b/src/components/PDFViewer.astro
new file mode 100644
index 000000000..76e73a09a
--- /dev/null
+++ b/src/components/PDFViewer.astro
@@ -0,0 +1,630 @@
+---
+interface Props {
+    src: string;
+    width?: string;
+    height?: string;
+    scale?: number;
+    page?: number;
+    caption?: string;
+}
+
+const {
+    src,
+    width = "100%",
+    height = "auto",
+    scale = 1.0,
+    page = 1,
+    caption,
+} = Astro.props;
+const pdfPath = src.startsWith("http") ? src : `/${src.replace(/^\/+/, "")}`;
+const workerId = `pdf-${Math.random().toString(36).substr(2, 9)}`;
+const figureId = `pdf-figure-${Math.random().toString(36).substr(2, 9)}`;
+const captionId = caption
+    ? `pdf-caption-${Math.random().toString(36).substr(2, 9)}`
+    : undefined;
+---
+
+<figure class="pdf-figure" id={figureId}>
+    <div
+        class="pdf-container"
+        style={`width: ${width}; ${height !== "auto" ? `height: ${height};` : ""}`}
+    >
+        <pdf-viewer
+            data-pdf-path={pdfPath}
+            data-worker-path="https://unpkg.com/pdfjs-dist@4.0.269/build/pdf.worker.min.mjs"
+            data-scale={scale}
+            data-page={page}
+            data-maintain-aspect={height === "100%" ? "true" : "false"}
+            aria-describedby={captionId}
+            role="img"
+            aria-label={caption || "PDF document"}
+            id={workerId}
+        >
+            <div class="loading">Loading PDF...</div>
+        </pdf-viewer>
+        {
+            caption && (
+                <div class="pdf-caption" id={captionId}>
+                    {caption}
+                </div>
+            )
+        }
+    </div>
+</figure>
+
+<script
+    is:inline
+    src="https://unpkg.com/pdfjs-dist@4.0.269/build/pdf.min.mjs"
+    type="module"></script>
+
+<script>
+    class PDFViewer extends HTMLElement {
+        private pdfData: any;
+        private currentModal: HTMLElement | null = null;
+        private originalRect: DOMRect | null = null;
+        private originalCenterX: number | null = null;
+        private originalCenterY: number | null = null;
+        private resizeObserver: ResizeObserver | null = null;
+        private requestedScale: number = 1.0;
+        private isInitialLoad: boolean = true;
+
+        constructor() {
+            super();
+            this.attachShadow({ mode: "open" });
+
+            const style = document.createElement("style");
+            style.textContent = `
+        :host {
+          display: block;
+          width: 100%;
+        }
+        .pdf-wrapper {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        canvas {
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          display: block;
+          margin: 0 auto;
+          cursor: zoom-in;
+          transition: transform 0.2s ease;
+        }
+        canvas:hover {
+          transform: scale(1.02);
+        }
+        .loading {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 200px;
+          font-family: system-ui, sans-serif;
+          color: #666;
+        }
+        .error {
+          color: #e74c3c;
+          text-align: center;
+          padding: 2rem;
+          font-family: system-ui, sans-serif;
+        }
+        .modal {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          background: rgba(0, 0, 0, 0.8);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1000;
+          padding: 2rem;
+          box-sizing: border-box;
+        }
+        .modal-content {
+          position: relative;
+          max-width: 90vw;
+          max-height: 90vh;
+          background: white;
+          border-radius: 8px;
+          padding: 1rem;
+          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+          transform: scale(0.8);
+          opacity: 0;
+          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+          overflow: auto;
+        }
+        .modal-close {
+          position: absolute;
+          top: -10px;
+          right: -10px;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          background: #fff;
+          border: 2px solid #ddd;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 18px;
+          font-weight: bold;
+          color: #666;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+        }
+        .modal-close:hover {
+          background: #f5f5f5;
+          color: #333;
+        }
+        .modal canvas {
+          border: none;
+          border-radius: 4px;
+          cursor: zoom-out;
+        }
+        .modal canvas:hover {
+          transform: none;
+        }
+      `;
+
+            if (this.shadowRoot) {
+                this.shadowRoot.appendChild(style);
+                this.shadowRoot.innerHTML += `<div class="loading">Loading PDF...</div>`;
+            }
+
+            // Set up resize observer to watch for container size changes
+            this.setupResizeObserver();
+        }
+
+        setupResizeObserver() {
+            if (typeof ResizeObserver !== "undefined") {
+                this.resizeObserver = new ResizeObserver(() => {
+                    // Only trigger resize re-render after initial load is complete
+                    if (this.pdfData && !this.isInitialLoad) {
+                        this.renderPDF();
+                    }
+                });
+            }
+        }
+
+        async connectedCallback() {
+            const pdfPath = this.getAttribute("data-pdf-path");
+            const workerPath = this.getAttribute("data-worker-path");
+            const scaleAttr = this.getAttribute("data-scale");
+            const pageAttr = this.getAttribute("data-page");
+
+            this.requestedScale = scaleAttr ? parseFloat(scaleAttr) : 1.0;
+            const pageNum = pageAttr ? parseInt(pageAttr) : 1;
+
+            if (!pdfPath || !workerPath) return;
+
+            try {
+                // Wait for pdfjsLib to be available
+                while (!(window as any).pdfjsLib) {
+                    await new Promise((resolve) => setTimeout(resolve, 100));
+                }
+
+                (window as any).pdfjsLib.GlobalWorkerOptions.workerSrc =
+                    workerPath;
+                const loadingTask = (window as any).pdfjsLib.getDocument(
+                    pdfPath,
+                );
+                const pdf = await loadingTask.promise;
+
+                const page = await pdf.getPage(pageNum);
+
+                // Store pdf and page for modal use and resizing
+                this.pdfData = { pdf, page, pageNum };
+
+                // Initial render
+                await this.renderPDF();
+
+                // Mark initial load as complete after a brief delay to prevent immediate resize triggers
+                setTimeout(() => {
+                    this.isInitialLoad = false;
+                }, 100);
+
+                // Start observing size changes
+                if (this.resizeObserver) {
+                    // Observe the content area that actually determines available width
+                    const pdfContainer = this.parentElement;
+                    const figure = pdfContainer?.parentElement;
+                    const contentArea = figure?.parentElement;
+
+                    const targetContainer =
+                        contentArea || figure || pdfContainer;
+                    if (targetContainer) {
+                        this.resizeObserver.observe(targetContainer);
+                    }
+                }
+            } catch (error) {
+                console.error("Error loading PDF:", error);
+                if (this.shadowRoot) {
+                    const errorMessage =
+                        error instanceof Error
+                            ? error.message
+                            : "Unknown error";
+                    this.shadowRoot.innerHTML = `<div class="error">Error loading PDF: ${errorMessage}</div>`;
+                }
+            }
+        }
+
+        async renderPDF() {
+            if (!this.pdfData || !this.shadowRoot) return;
+
+            const { page } = this.pdfData;
+
+            // Get the available width - check multiple container levels to find the actual content width
+            let maxWidth = 800; // Default fallback
+
+            // Try to find the actual content area width
+            const pdfContainer = this.parentElement; // pdf-container
+            const figure = pdfContainer?.parentElement; // pdf-figure
+            const contentArea = figure?.parentElement; // actual content area (article, section, etc.)
+
+            if (contentArea && contentArea.clientWidth > 0) {
+                maxWidth = contentArea.clientWidth - 64; // Account for margins and padding
+            } else if (figure && figure.clientWidth > 0) {
+                maxWidth = figure.clientWidth - 32;
+            } else if (pdfContainer && pdfContainer.clientWidth > 0) {
+                maxWidth = pdfContainer.clientWidth - 32;
+            }
+
+            // Get device pixel ratio for high-DPI displays
+            const devicePixelRatio = window.devicePixelRatio || 1;
+
+            // Get the PDF's natural dimensions at scale 1
+            const naturalViewport = page.getViewport({ scale: 1 });
+
+            // Calculate the scale that fits within container width (no height constraint)
+            const scaleToFitWidth = maxWidth / naturalViewport.width;
+
+            // Use the smaller of requested scale or scale-to-fit-width to prevent horizontal overflow
+            const finalScale = Math.min(this.requestedScale, scaleToFitWidth);
+
+            // First get viewport at final calculated scale
+            const baseViewport = page.getViewport({ scale: finalScale });
+
+            // Then scale up for high-DPI rendering (internal canvas resolution)
+            const renderViewport = page.getViewport({
+                scale: finalScale * devicePixelRatio,
+            });
+
+            const canvas = document.createElement("canvas");
+            const context = canvas.getContext("2d");
+
+            // Set canvas internal size for high-DPI (higher resolution)
+            canvas.height = renderViewport.height;
+            canvas.width = renderViewport.width;
+
+            // Set CSS display size to the calculated dimensions
+            canvas.style.height = baseViewport.height + "px";
+            canvas.style.width = baseViewport.width + "px";
+
+            const renderContext = {
+                canvasContext: context,
+                viewport: renderViewport,
+            };
+
+            await page.render(renderContext).promise;
+
+            // Clear and update shadow DOM
+            this.shadowRoot.innerHTML = "";
+            const style = document.createElement("style");
+            style.textContent = `
+          .pdf-wrapper {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          canvas {
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            display: block;
+            margin: 0 auto;
+            cursor: zoom-in;
+            transition: transform 0.2s ease;
+          }
+          canvas:hover {
+            transform: scale(1.02);
+          }
+        `;
+            this.shadowRoot.appendChild(style);
+
+            const wrapper = document.createElement("div");
+            wrapper.className = "pdf-wrapper";
+
+            // Add click event to canvas for modal
+            canvas.addEventListener("click", () => this.openModal());
+
+            wrapper.appendChild(canvas);
+            this.shadowRoot.appendChild(wrapper);
+
+            // Resize the host element to match the PDF size
+            this.style.height = baseViewport.height + "px";
+        }
+
+        disconnectedCallback() {
+            // Clean up resize observer
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+            }
+        }
+
+        async openModal() {
+            if (!this.pdfData) return;
+
+            const { page } = this.pdfData;
+
+            // Get the original PDF canvas position and size for animation
+            const originalCanvas = this.shadowRoot?.querySelector("canvas");
+            if (!originalCanvas) return;
+
+            const originalRect = originalCanvas.getBoundingClientRect();
+            const originalCenterX = originalRect.left + originalRect.width / 2;
+            const originalCenterY = originalRect.top + originalRect.height / 2;
+
+            // Calculate scale for modal - use full viewport width
+            const viewportWidth = window.innerWidth * 0.95; // 95% of viewport width for full-screen feel
+
+            const naturalViewport = page.getViewport({ scale: 1 });
+            const modalScale = viewportWidth / naturalViewport.width;
+
+            const devicePixelRatio = window.devicePixelRatio || 1;
+            const modalBaseViewport = page.getViewport({ scale: modalScale });
+            const modalRenderViewport = page.getViewport({
+                scale: modalScale * devicePixelRatio,
+            });
+
+            // Create modal canvas
+            const modalCanvas = document.createElement("canvas");
+            const modalContext = modalCanvas.getContext("2d");
+
+            modalCanvas.height = modalRenderViewport.height;
+            modalCanvas.width = modalRenderViewport.width;
+            modalCanvas.style.height = modalBaseViewport.height + "px";
+            modalCanvas.style.width = modalBaseViewport.width + "px";
+
+            // Render PDF to modal canvas
+            const modalRenderContext = {
+                canvasContext: modalContext,
+                viewport: modalRenderViewport,
+            };
+
+            await page.render(modalRenderContext).promise;
+
+            // Calculate final modal position (center of screen)
+            const finalCenterX = window.innerWidth / 2;
+            const finalCenterY = window.innerHeight / 2;
+
+            // Create modal elements in document body (not shadow DOM)
+            const modal = document.createElement("div");
+            modal.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100vw;
+                height: 100vh;
+                background: rgba(255, 255, 255, 0);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 10000;
+                padding: 2rem;
+                box-sizing: border-box;
+                overflow-y: auto;
+                transition: background-color 0.25s ease;
+            `;
+
+            const modalContent = document.createElement("div");
+            // Start from original position and size
+            modalContent.style.cssText = `
+                position: absolute;
+                width: ${originalRect.width}px;
+                height: ${originalRect.height}px;
+                left: ${originalCenterX - originalRect.width / 2}px;
+                top: ${originalCenterY - originalRect.height / 2}px;
+                background: white;
+                border-radius: 8px;
+                padding: 1rem;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                transform-origin: center center;
+                transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+                overflow: hidden;
+            `;
+
+            const closeButton = document.createElement("div");
+            closeButton.style.cssText = `
+                position: fixed;
+                top: 2rem;
+                right: 2rem;
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                background: #fff;
+                border: 2px solid #999;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                font-weight: bold;
+                line-height: 1;
+                text-align: center;
+                transform: translateY(-1px);
+                color: #4285f4;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                transition: all 0.2s ease;
+                z-index: 10001;
+                opacity: 0;
+                transform: scale(0.8);
+            `;
+            closeButton.innerHTML = "×";
+            closeButton.addEventListener("click", (e) => {
+                e.stopPropagation();
+                this.closeModal();
+            });
+            closeButton.addEventListener("mouseenter", () => {
+                closeButton.style.background = "#f0f4ff";
+                closeButton.style.color = "#1a73e8";
+                closeButton.style.transform = "scale(1.1)";
+            });
+            closeButton.addEventListener("mouseleave", () => {
+                closeButton.style.background = "#fff";
+                closeButton.style.color = "#4285f4";
+                closeButton.style.transform = "scale(1)";
+            });
+
+            // Style the modal canvas to start at original size
+            modalCanvas.style.cssText = `
+                border: none;
+                border-radius: 4px;
+                cursor: zoom-out;
+                display: block;
+                margin: 0 auto;
+                width: ${originalRect.width - 32}px;
+                height: ${originalRect.height - 32}px;
+                transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            `;
+
+            // Close modal when clicking anywhere on the modal
+            modal.addEventListener("click", () => {
+                this.closeModal();
+            });
+
+            // Close modal with Escape key
+            const handleEscape = (e) => {
+                if (e.key === "Escape") {
+                    this.closeModal();
+                    document.removeEventListener("keydown", handleEscape);
+                }
+            };
+            document.addEventListener("keydown", handleEscape);
+
+            modalContent.appendChild(modalCanvas);
+            modal.appendChild(modalContent);
+            modal.appendChild(closeButton);
+
+            // Add modal to document body
+            document.body.appendChild(modal);
+            this.currentModal = modal;
+
+            // Store original dimensions for closing animation
+            this.originalRect = originalRect;
+            this.originalCenterX = originalCenterX;
+            this.originalCenterY = originalCenterY;
+
+            // Trigger animations after adding to DOM
+            requestAnimationFrame(() => {
+                // Fade in background
+                modal.style.backgroundColor = "rgba(255, 255, 255, 1)";
+
+                // Animate to center and enlarge
+                modalContent.style.width = `${modalBaseViewport.width + 32}px`;
+                modalContent.style.height = `${modalBaseViewport.height + 32}px`;
+                modalContent.style.left = `${finalCenterX - (modalBaseViewport.width + 32) / 2}px`;
+                modalContent.style.top = `${finalCenterY - (modalBaseViewport.height + 32) / 2}px`;
+                modalContent.style.boxShadow = "0 10px 30px rgba(0, 0, 0, 0.3)";
+
+                // Animate canvas to final size
+                modalCanvas.style.width = `${modalBaseViewport.width}px`;
+                modalCanvas.style.height = `${modalBaseViewport.height}px`;
+
+                // Show close button after a delay
+                setTimeout(() => {
+                    closeButton.style.opacity = "1";
+                    closeButton.style.transform = "scale(1)";
+                }, 150);
+            });
+        }
+
+        closeModal() {
+            if (
+                this.currentModal &&
+                this.originalRect &&
+                this.originalCenterX !== null &&
+                this.originalCenterY !== null
+            ) {
+                const modal = this.currentModal;
+                const modalContent = modal.querySelector("div");
+                const modalCanvas = modal.querySelector("canvas");
+                const closeButton = modal.children[1] as HTMLElement; // Close button is now the second child of modal
+
+                // Hide close button immediately
+                if (closeButton) {
+                    closeButton.style.opacity = "0";
+                    closeButton.style.transform = "scale(0.8)";
+                }
+
+                // Animate back to original position and size
+                modal.style.backgroundColor = "rgba(255, 255, 255, 0)";
+
+                if (modalContent && modalCanvas) {
+                    modalContent.style.width = `${this.originalRect.width}px`;
+                    modalContent.style.height = `${this.originalRect.height}px`;
+                    modalContent.style.left = `${this.originalCenterX - this.originalRect.width / 2}px`;
+                    modalContent.style.top = `${this.originalCenterY - this.originalRect.height / 2}px`;
+                    modalContent.style.boxShadow =
+                        "0 2px 8px rgba(0, 0, 0, 0.1)";
+
+                    modalCanvas.style.width = `${this.originalRect.width - 32}px`;
+                    modalCanvas.style.height = `${this.originalRect.height - 32}px`;
+                }
+
+                // Remove after animation completes
+                setTimeout(() => {
+                    if (modal.parentNode) {
+                        document.body.removeChild(modal);
+                    }
+                }, 250);
+
+                this.currentModal = null;
+                this.originalRect = null;
+                this.originalCenterX = null;
+                this.originalCenterY = null;
+            }
+        }
+    }
+
+    if (!customElements.get("pdf-viewer")) {
+        customElements.define("pdf-viewer", PDFViewer);
+    }
+</script>
+
+<style>
+    .pdf-figure {
+        margin: 1rem 0;
+        padding: 0;
+        width: fit-content;
+        max-width: 100%;
+    }
+
+    .pdf-container {
+        border: 1px solid #e1e5e9;
+        border-radius: 6px;
+        padding: 1rem;
+        background: #f8f9fa;
+        width: fit-content;
+        max-width: 100%;
+    }
+
+    .pdf-caption {
+        margin-top: 0.75rem;
+        padding: 0;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: #374151;
+        text-align: left;
+        font-style: italic;
+        max-width: 100%;
+        word-wrap: break-word;
+    }
+
+    .loading {
+        text-align: center;
+        padding: 2rem;
+        color: #6c757d;
+    }
+</style>
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
index fcfb611df..21d904dcc 100644
--- a/src/content/docs/index.mdx
+++ b/src/content/docs/index.mdx
@@ -11,11 +11,13 @@ hero:
     light: ../../assets/widgets-light.webp
     alt: Adobe Commerce Storefront
   actions:
-    - text: Developers
+    - text: Storefront DEVELOPERS
       link: /get-started/
+      aria-label: Storefront Developers
       variant: primary
-    - text: Merchants
-      link: /merchants/get-started/
+    - text: Storefront AUTHORS
+      link: /merchants/storefront-builder/
+      aria-label: Storefront Authors
       variant: minimal
 # banner:
 #   content: |
@@ -30,26 +32,30 @@ import Callouts from '@components/Callouts.astro';
 <CardGrid>
   <LinkCard
     icon="seti:json"
-    title="Developers"
+    title="Storefront Developers"
     description="Learn how to develop and configure Commerce Storefronts powered by Edge Delivery Services."
     link="/get-started/"
+    aria-label="Storefront Developers"
   />
   <LinkCard
     icon="seti:svg"
-    title="Merchants"
+    title="Storefront Authors"
     description="Learn how to create content and campaigns in Commerce Storefronts powered by Edge Delivery Services."
-    link="/merchants/get-started/"
+    link="/merchants/storefront-builder/"
+    aria-label="Storefront Authors"
   />
   <LinkCard
     icon="seti:video"
     title="Videos"
     description="Watch and learn how to build your storefront with drop-in components and customizations"
     link="/videos/"
+    aria-label="Videos"
   />
   <LinkCard
     icon="laptop"
     title="Playgrounds"
     description="Get hands-on experience for developing Commerce Storefronts"
     link="/playgrounds/"
+    aria-label="Playgrounds"
   />
 </CardGrid>
diff --git a/src/content/docs/merchants/images/placeholder.webp b/src/content/docs/merchants/images/placeholder.webp
new file mode 100644
index 000000000..b689383ca
Binary files /dev/null and b/src/content/docs/merchants/images/placeholder.webp differ
diff --git a/src/content/docs/merchants/multistore/content-localization.mdx b/src/content/docs/merchants/multistore/content-localization.mdx
index 7e9664b59..2e02852e1 100644
--- a/src/content/docs/merchants/multistore/content-localization.mdx
+++ b/src/content/docs/merchants/multistore/content-localization.mdx
@@ -1,5 +1,5 @@
 ---
-title: Content localization
+title: Localization
 description: Step-by-step guide for localizing the Edge Delivery content blocks of a storefront.
 ---
 
@@ -24,7 +24,7 @@ This guide will walk you through the process of localizing the content of your s
 
 ## Prerequisites
 
-- You have a storefront project in the Document Authoring app (<Link href="https://da.live" text="da.live" />) of the Storefront Builder.
+- You have a storefront project in the Document Authoring app (<Link href="https://da.live" text="da.live" />) of the Commerce Storefront powered by Edge Delivery.
 - You know the basics of using the Document Authoring tool as described in the documentation here: (<Link href="https://da.live/docs" text="da.live/docs" />).
 
 :::note
diff --git a/src/content/docs/merchants/storefront-builder/_digital-assets-management.mdx b/src/content/docs/merchants/storefront-builder/_digital-assets-management.mdx
new file mode 100644
index 000000000..c48d0e793
--- /dev/null
+++ b/src/content/docs/merchants/storefront-builder/_digital-assets-management.mdx
@@ -0,0 +1,20 @@
+---
+title: Using digital assets management
+description: Learn about digital assets management and how to use it to add media to your storefront.
+---
+
+:::note
+The underscore in the filename is intentional. It is used to indicate that this topic is a placeholder for the digital assets management tool and will not be published yet.
+:::
+
+TODO: Add step-by-step instructions for using the digital assets management tool.
+
+The **digital assets management** tool is powered by Adobe Experience Manager (AEM) Assets.
+
+For Commerce Storefront, digital assets management provides a solution for editorial assets like images, videos, and other media used on content pages and product enrichments. The DAM integrates with DA.live and the Visual Editor for seamless media content management and works with Edge Delivery Services to deliver optimized assets globally.
+
+## How to use the digital assets management tool
+
+Information about using the digital assets management tool is currently available here:
+
+- [AEM Assets Integration for Commerce](https://experienceleague.adobe.com/en/docs/commerce/product-visuals/overview).
diff --git a/src/content/docs/merchants/storefront-builder/content-commerce-blocks.mdx b/src/content/docs/merchants/storefront-builder/content-commerce-blocks.mdx
new file mode 100644
index 000000000..10f5affe3
--- /dev/null
+++ b/src/content/docs/merchants/storefront-builder/content-commerce-blocks.mdx
@@ -0,0 +1,57 @@
+---
+title: Using Content and Commerce blocks
+description: Learn about the Content and Commerce blocks and how to use them to build your storefront.
+---
+
+**Content and Commerce blocks** are foundational, pre-built UI components that serve as the building blocks of your storefront. They are defined using tables in the content and decorated by your custom code during page rendering. Drop-ins are dynamic, commerce-specific front-end components that can be integrated within a Block.
+
+These blocks provide a modular approach to building storefronts, allowing you to quickly assemble pages using proven components while maintaining the flexibility to customize their appearance and behavior. As key components of the Commerce Storefront ecosystem, they work seamlessly with Edge Delivery Services for optimal performance and can be easily managed through the Document Authoring tool.
+
+## What are Content and Commerce blocks?
+
+Blocks are a foundational concept for adding form and function to page sections within the Commerce Storefront.
+
+:::note
+You can add commerce features to any content block by including drop-ins in the block. Commerce blocks themselves are simply content blocks that use drop-ins to add commerce functionality.
+:::
+
+### Content Blocks
+
+Content Blocks are pre-built content components used to build the static storefront content. These components help you create engaging, structured content for your pages without requiring custom development for common UI patterns. Content blocks include:
+- Buttons and call-to-action elements
+- Images and media galleries
+- Lists and navigation elements
+- Links and social media components
+- Text formatting and layout components
+- And many more foundational content elements
+
+### Commerce Blocks
+
+Commerce Blocks are pre-built commerce components used to build the storefront's dynamic commerce-related pages. These components handle the interactive, transaction-focused elements of your storefront that connect directly with your commerce backend. Commerce blocks include:
+- Product details pages (PDP)
+- Shopping cart functionality
+- Checkout processes
+- Product listing pages (PLP)
+- Search and filtering components
+- User account management
+- And other commerce-specific features
+
+### Drop-ins Integration
+
+Drop-ins are dynamic, commerce-specific front-end components that can be integrated within a Block. They provide the interactive functionality that powers your commerce experience, working seamlessly with both Content and Commerce blocks to deliver a cohesive storefront experience.
+
+## How to use Content and Commerce blocks
+
+Content and Commerce blocks are designed to be intuitive and developer-friendly. You can implement them using simple table structures in your content, which are then enhanced with interactive functionality through drop-ins and custom styling.
+
+The blocks integrate naturally with the broader Commerce Storefront ecosystem:
+- **Document Authoring (DA.live)**: Create and manage block content through the CMS interface
+- **Visual Editor**: Edit blocks in real-time with immediate live preview
+- **Edge Delivery Services**: Ensure fast, reliable delivery of block content globally
+- **Product Visuals**: Access and manage media assets used within blocks
+
+Information about the blocks and how to implement them is well-documented in the following resources and within the Block Collection documentation. Links to both are provided below.
+
+- [Block Collection documentation](https://www.aem.live/developer/block-collection)
+- [Drop-ins documentation](/dropins/all/introduction/)
+- [Content blocks tutorial](https://www.aem.live/docs/authoring)
diff --git a/src/content/docs/merchants/storefront-builder/document-authoring.mdx b/src/content/docs/merchants/storefront-builder/document-authoring.mdx
new file mode 100644
index 000000000..cc3ca804e
--- /dev/null
+++ b/src/content/docs/merchants/storefront-builder/document-authoring.mdx
@@ -0,0 +1,15 @@
+---
+title: Using the Document Authoring tool
+description: Learn about the Document Authoring tool in the Commerce Storefront.
+---
+
+The Document Authoring tool is the content management system (CMS) at the heart of the Commerce Storefront. It is where your storefront's pages, blocks, and assets are authored, organized, and managed. 
+
+DA.live provides a collaborative environment for content teams to create and structure site content, manage translations, and control publishing workflows. It integrates with Visual Editor for in-context editing and with Edge Delivery Services for fast, reliable content delivery. DA.live supports versioning, localization, and multistore management, making it a powerful tool for complex commerce operations.
+
+## How to use the Document Authoring tool
+
+Information about the tool and how to use it is well-documented in the following tutorial and within the Document Authoring application itself. Links to both are provided below.
+
+- [DA.live tutorial](https://www.aem.live/developer/da-tutorial)
+- [DA.live documentation](https://da.live/docs)
diff --git a/src/content/docs/merchants/storefront-builder/images/storefront-builder.png b/src/content/docs/merchants/storefront-builder/images/storefront-builder.png
new file mode 100644
index 000000000..ff911679b
Binary files /dev/null and b/src/content/docs/merchants/storefront-builder/images/storefront-builder.png differ
diff --git a/src/content/docs/merchants/storefront-builder/index.mdx b/src/content/docs/merchants/storefront-builder/index.mdx
index bb5bf6448..d4f603a61 100644
--- a/src/content/docs/merchants/storefront-builder/index.mdx
+++ b/src/content/docs/merchants/storefront-builder/index.mdx
@@ -1,42 +1,82 @@
 ---
-title: About Storefront Builder
-description: Learn about the Storefront Builder and how to use it to build your storefront.
+title: Create your content
+description: Learn about the Commerce Storefront and how to use it to create and manage content for your storefront.
 ---
 
 import { Steps } from '@astrojs/starlight/components';
+import Diagram from '@components/Diagram.astro';
+import PDFViewer from '@components/PDFViewer.astro';
+import Callouts from '@components/Callouts.astro';
 
-**Storefront Builder** is included with Adobe Commerce as a Cloud Service, and is designed to streamline both the technical and editorial workflows for building and maintaining commerce storefronts. 
+**Commerce Storefront** is included with Adobe Commerce as a Cloud Service and Adobe Commerce Optimizer. It is designed to streamline both the technical and editorial workflows for creating and maintaining the content for your commerce storefronts. 
 
-## What is the Storefront Builder?
+## What is the Commerce Storefront?
 
-The **Storefront Builder** is a collection of tools and technologies from Adobe Commerce designed to make it easy to create, manage, and customize modern, high-performance storefronts. It brings together the following elements of a commerce storefront:
+The **Commerce Storefront** is a collection of tools and technologies from Adobe designed to make it easy to create, manage, and customize modern, high-performance storefronts. It brings together the following tools—the building blocks of a commerce storefront:
 
-- **DA.live (Document Authoring Live)**: The content management system where your storefront's pages, blocks, and assets are authored and managed.
-- **Content and Commerce Blocks**: Pre-built, reusable UI components (carts, product lists, etc.) that can be seamlessly integrated into your storefront.
-- **Edge Delivery Services (EDS)**: A fast, scalable delivery platform for your storefront content and assets.
-- **Visual Editor**: A visual, in-context editing tool that lets business users and content authors update storefront content directly, with real-time preview.
-- **Digital Asset Management (DAM)**: For storing and managing editorial assets like images and other media used on content pages and product enrichments in your storefront.
+<Diagram caption="What is the Commerce Storefront?">
+  ![What is the Commerce Storefront?](images/storefront-builder.png)
+</Diagram>
+
+<Callouts columnCount="1">
+
+1. **Document Authoring (DA.live)**: The content management app (CMS) where your storefront's pages, blocks, and assets are authored and managed.
+
+1. **Visual Editor**: A subset of features from the AEM Universal Editor that provides business users and content authors a WYSIWYG editor for updating content directly on the rendered page of the storefront.
+
+1. **Digital Assets Management**: Tools for storing and managing images and other media used on your storefront.
+
+1. **Content Blocks**: Pre-built content components used to build the static storefront content, such as buttons, images, lists, links, and more.
+
+1. **Commerce Blocks**: Pre-built commerce components that use drop-ins to add commerce features to your storefront, such as product details, cart, checkout, product lists, and more.
+
+1. **Edge Delivery Services**: A fast, scalable delivery platform for your storefront and its assets.
+
+</Callouts>
 
 ### DA.live (Document Authoring)
 
-DA.live (Document Authoring) is the content management system (CMS) at the heart of Storefront Builder. It is where your storefront's pages, blocks, and assets are authored, organized, and managed. DA.live provides a collaborative environment for content teams to create and structure site content, manage translations, and control publishing workflows. It integrates with Visual Editor for in-context editing and with Edge Delivery Services for fast, reliable content delivery. DA.live supports versioning, localization, and multistore management, making it a powerful tool for complex commerce operations.
+DA.live (Document Authoring) is the content management system (CMS) you use to build you storefront site. It is where you create and manage your storefront's pages, blocks, and assets. DA.live provides a collaborative environment for content teams to create and structure site content, manage translations, and control publishing workflows. It integrates with Visual Editor for in-context editing and with Edge Delivery Services for fast, reliable content delivery. DA.live supports versioning, localization, and the features required to manage multiple commerce storefronts.
 
-### Edge Delivery Services
+Learn more about DA.live in the [DA.live tutorial](https://www.aem.live/developer/da-tutorial).
+
+### Visual Editor
 
-Edge Delivery Services is a fast, scalable platform for delivering your storefront's content and assets to customers. It leverages a global content delivery network (CDN) to ensure that pages, images, and other resources load quickly, no matter where your customers are located. By serving content from the edge, EDS reduces latency and improves site performance, which is critical for both user experience and SEO. Edge Delivery Services is tightly integrated with the Storefront Builder ecosystem, ensuring seamless deployment and updates of your storefront content.
+The Visual Editor is a powerful visual editing tool that enables business users and content authors to edit website content in real-time with immediate live previews and publishing. This in-context editing experience eliminates the need to switch between different tools or wait for publishing cycles to see changes.
+
+Learn how to use the Visual Editor in the [Using the Visual Editor](/merchants/storefront-builder/visual-editor/) topic.
+
+For more information about the Universal Editor, see [Universal Editor authoring](https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/universal-editor/authoring).
+
+### Digital Assets Management
+
+The digital assets management (DAM) tool, powered by Adobe Experience Manager Assets, provides access to editorial assets like images, videos, and other media used on content pages and product enrichments. The DAM tools integrate with DA.live and Visual Editor for seamless media content management and asset selection. It works with Edge Delivery Services to deliver optimized assets globally.
+
+For more information about AEM Assets, see [Publishing pages with AEM Assets](https://www.aem.live/docs/universal-editor-assets) and [AEM Assets overview](https://experienceleague.adobe.com/en/docs/experience-manager-assets/content/home.html).
 
 ### Content and Commerce blocks
 
-Blocks are a foundational concept for adding form and function to page sections. They are defined using tables in the content and decorated by your custom code during page rendering. Drop-ins are dynamic, commerce-specific front-end components that can be integrated within a Block.
+Blocks are a foundational concept for adding form and function to page sections. They are defined using tables in the content and rendered on-screen using content properties and style-sheets. Commerce blocks are content blocks that use drop-ins to add commerce features to your storefront, such as product details, cart, checkout, product lists, and more.
+
+Learn how to use the Content and Commerce blocks in the [Content and Commerce blocks](/merchants/storefront-builder/content-commerce-blocks/) topic.
+
+For more information about content blocks, see the [Block Collection](https://www.aem.live/developer/block-collection) topic.
+
+### Edge Delivery Services
+
+Edge Delivery Services is a fast, scalable platform for delivering your storefront's content and assets to customers. It leverages a global content delivery network (CDN) to ensure that pages, images, and other resources load quickly, no matter where your customers are located. By serving content from the edge (geographically distributed servers closer to your customers), we reduce latency and improve site performance, which is critical for both user experience and SEO. Edge Delivery Services is tightly integrated with the Commerce Storefront ecosystem, ensuring seamless deployment and updates to your customer's storefront experience.
 
-### Visual Editor (Universal Editor features)
+Learn more about Edge Delivery Services in the [Edge Delivery Services Overview](https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/overview) topic.
 
-Visual Editor is a visual, in-context editing tool that empowers business users and content authors to update storefront content directly on the page, with real-time preview. With Visual Editor, you can make changes to text, images, blocks, and drop-ins without needing to write code or wait for developer assistance. This tool streamlines content workflows, reduces time-to-market for updates, and ensures that your storefront always reflects the latest campaigns, promotions, and brand messaging. Visual Editor is fully integrated with DA.live and supports localization and multistore editing.
+## Summary
 
-### Product Visuals
+The Commerce Storefront is Adobe's comprehensive solution for creating and managing modern, high-performance storefronts. It combines six essential tools into a unified ecosystem:
 
-[Product Visuals](https://experienceleague.adobe.com/en/docs/commerce/product-visuals/overview) is an integration of Adobe Experience Manager Assets with your Adobe Commerce backend. For Storefront Builder, the digital asset management (DAM) solution accesses editorial assets like images, videos, and other media used on content pages and product enrichments. The DAM integrates with DA.live and Visual Editor for seamless media content management and works with Edge Delivery Services to deliver optimized assets globally.
+- **DA.live** serves as your content management system for authoring and organizing storefront content
+- **Visual Editor** provides real-time, in-context editing capabilities for business users and content authors
+- **Product Visuals** offers digital asset management for storing and optimizing editorial media
+- **Content Blocks** and **Commerce Blocks** provide pre-built components for both static content and dynamic commerce functionality
+- **Edge Delivery Services** ensures fast, global content delivery through a scalable CDN platform
 
-## What's next?
+Together, these tools streamline both technical and editorial workflows, enabling teams to efficiently create, customize, and maintain commerce storefronts that deliver exceptional user experiences and optimal performance.
 
-Detailed instructions for building your storefront with the Storefront Builder will be available soon.
diff --git a/src/content/docs/merchants/storefront-builder/visual-editor.mdx b/src/content/docs/merchants/storefront-builder/visual-editor.mdx
new file mode 100644
index 000000000..cecd2bda6
--- /dev/null
+++ b/src/content/docs/merchants/storefront-builder/visual-editor.mdx
@@ -0,0 +1,54 @@
+---
+title: Using the Visual Editor
+description: Learn about the Visual Editor and how to use it to edit your storefront content.
+---
+
+The **Visual Editor** is a powerful visual editing tool that enables business users and content authors to edit website content in real-time with immediate live preview. This in-context editing experience eliminates the need to switch between different tools or wait for publishing cycles to see changes.
+
+Visual Editor provides a WYSIWYG (What You See Is What You Get) experience while updating content directly on the rendered page of your storefront. It offers an intuitive interface for updating text, images, blocks, and drop-ins without requiring technical knowledge or switching between different tools.
+
+With Visual Editor, you can make immediate changes to your storefront content and see the results instantly, eliminating the need for separate preview environments or publishing cycles. This tool is particularly valuable for marketing teams, content creators, and business users who need to quickly update product descriptions, promotional content, or page layouts to respond to market demands or campaign requirements.
+
+## What is the Visual Editor?
+
+Visual Editor is a subset of features from the AEM Universal Editor that provides business users and content authors with an intuitive, visual interface for content management. As a key component of the Commerce Storefront ecosystem, it bridges the gap between technical implementation and content authoring.
+
+### Key Features
+
+The Visual Editor offers several powerful capabilities:
+
+- **Real-time editing**: Make changes and see them immediately on the live page
+- **In-context editing**: Edit content directly where it appears on the storefront
+- **WYSIWYG interface**: See exactly how your content will look to customers
+- **Block and drop-in management**: Easily update both content and commerce components
+- **No technical knowledge required**: Business users can make changes without developer assistance
+- **Seamless workflow**: Eliminate the need to switch between different editing tools
+
+### Integration with Commerce Storefront
+
+Visual Editor works seamlessly with other Commerce Storefront components:
+
+- **Document Authoring (DA.live)**: Edit content that's managed and organized in the CMS
+- **Content and Commerce Blocks**: Visually modify both static content blocks and dynamic commerce blocks
+- **Edge Delivery Services**: Changes are delivered through the fast, global CDN
+- **Product Visuals**: Access and update media assets directly within the editing interface
+
+### Benefits for Business Users
+
+Visual Editor is specifically designed to empower non-technical users:
+
+- **Faster content updates**: No need to wait for development cycles or technical assistance
+- **Immediate feedback**: See changes instantly without publishing delays
+- **Reduced errors**: Visual editing reduces the risk of formatting or layout issues
+- **Enhanced productivity**: Streamlined workflow for content teams and marketers
+- **Campaign agility**: Quickly respond to market changes or promotional opportunities
+
+## How to use the Visual Editor
+
+Visual Editor provides an intuitive, point-and-click interface that makes content editing accessible to business users. The tool integrates directly with your storefront pages, allowing you to edit content in the context where it will be displayed to customers.
+
+Information about the Visual Editor and how to use share many of the same features as the Universal Editor. A link to the Universal Editor documentation is provided here:
+
+- [Universal Editor authoring](https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/universal-editor/authoring)
+- [Block Collection documentation](https://www.aem.live/developer/block-collection)
+- [Drop-ins documentation](/dropins/all/introduction/)