diff --git a/README.md b/README.md
index 104f053d..dc5df101 100644
--- a/README.md
+++ b/README.md
@@ -207,5 +207,6 @@ In your Vercel project browse to Settings --> Environment Variables and edit the
 -   [Contribution Model (fork, PR, etc.)](https://github.com/amplience/dc-cli/blob/master/CONTRIBUTING.md)
 -   [FAQ](docs/FAQ.md)
 -   Upgrades:
+    -   [v5.0.0 Upgrade](docs/v5.0.0-upgrade.md)
     -   [v4.0.0 Upgrade](docs/v4.0.0-upgrade.md)
     -   [v3.0.0 Upgrade](docs/v3.0.0-upgrade.md)
diff --git a/components/cms-modern/Navigation/Navigation.tsx b/components/cms-modern/Navigation/Navigation.tsx
index 345208d2..a9c37b3d 100644
--- a/components/cms-modern/Navigation/Navigation.tsx
+++ b/components/cms-modern/Navigation/Navigation.tsx
@@ -16,6 +16,7 @@ const Navigation = ({ pages, style }: NavigationProps) => {
     const { navigationToggle, toggleNavigation } = useUI();
     const [selectedMenuKey, setSelectedMenuKey] = useState<number | null>(null);
     const router = useRouter();
+    const vse = router.query.vse;
     const isRouteActive = (href: string | undefined, category: any): boolean => {
         // !!using the first word in the category slug as the current category
         // => full path should be present in slugs, and 1st level category slug shouldn't contain '-'
@@ -61,52 +62,57 @@ const Navigation = ({ pages, style }: NavigationProps) => {
         setSelectedMenuKey(null);
     };
 
+    const itemType = (type: string) => {
+        switch (type) {
+            case 'ecommerce-category-generated':
+                return 'Commerce Item';
+            case 'category':
+                return 'CMS Override Item';
+            default:
+                return 'CMS Item';
+        }
+    };
+
     return (
         <nav className="navigation" style={style}>
             <ul className="navigation__list">
-                {pages
-                    .sort((p1, p2) => {
-                        const menu1Priority = p1.content?.menu?.priority || 0;
-                        const menu2Priority = p2.content?.menu?.priority || 0;
-                        return menu1Priority > menu2Priority ? 1 : menu1Priority < menu2Priority ? -1 : 0;
-                    })
-                    .map(({ title, href = '', children = [], content, category }, index) => {
-                        return (
-                            <li
-                                key={index}
-                                className={clsx('navigation__list__item', {
-                                    ['navigation__list__item--active']: isRouteActive(href || '', category),
-                                    ['navigation__list__item--open']: isMenuOpen(index),
-                                })}
-                            >
-                                {title && href && (
-                                    <Link
-                                        href={href || ''}
-                                        onClick={(event) =>
-                                            children.length === 0 ? handleRouteChange() : handleClick(event, index)
-                                        }
-                                        className="navigation__list__item__link"
-                                        title={`priority: ${content?.menu?.priority}`}
-                                    >
-                                        {title}
-                                    </Link>
-                                )}
-                                {children.length > 0 ? (
-                                    <MegaMenu
-                                        content={content?.menu?.content}
-                                        handleRouteChange={handleRouteChange}
-                                        closeMenu={closeMenu}
-                                        title={title}
-                                        href={href || ''}
-                                    >
-                                        {children}
-                                    </MegaMenu>
-                                ) : (
-                                    <div></div>
-                                )}
-                            </li>
-                        );
-                    })}
+                {pages.map(({ title, href = '', children = [], content, category, type }, index) => {
+                    return (
+                        <li
+                            key={index}
+                            className={clsx('navigation__list__item', {
+                                ['navigation__list__item--active']: isRouteActive(href || '', category),
+                                ['navigation__list__item--open']: isMenuOpen(index),
+                            })}
+                        >
+                            {title && href && (
+                                <Link
+                                    href={href || ''}
+                                    onClick={(event) =>
+                                        children.length === 0 ? handleRouteChange() : handleClick(event, index)
+                                    }
+                                    className="navigation__list__item__link"
+                                    title={vse && itemType(type)}
+                                >
+                                    {title}
+                                </Link>
+                            )}
+                            {children.length > 0 ? (
+                                <MegaMenu
+                                    content={content?.menu?.content}
+                                    handleRouteChange={handleRouteChange}
+                                    closeMenu={closeMenu}
+                                    title={title}
+                                    href={href || ''}
+                                >
+                                    {children}
+                                </MegaMenu>
+                            ) : (
+                                <div></div>
+                            )}
+                        </li>
+                    );
+                })}
             </ul>
             <ul className="navigation__list--search">
                 <li className="navigation__list__item navigation__list__item--search" key={pages.length}>
diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index 2ed7dee4..fc85dc36 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -1,18 +1,19 @@
 import { createContext, useMemo, useContext, PropsWithChildren } from 'react';
 import { CmsHierarchyNode } from '@lib/cms/fetchHierarchy';
 import { CmsContent } from '@lib/cms/CmsContent';
-import walkNavigation, { enrichCmsEntries, getTypeFromSchema } from './walkNavigation';
+import walkNavigation, { enrichHierarchyNodes, getTypeFromSchema } from './walkNavigation';
 import { useUserContext } from '@lib/user/UserContext';
+import { Category } from '@amplience/dc-integration-middleware';
 
 export type NavigationItem = {
-    type: 'page' | 'external-page' | 'category' | 'group';
+    type: 'page' | 'external-page' | 'category' | 'group' | 'ecommerce-category-generated';
     title: string;
     href?: string;
     children: NavigationItem[];
     parents: NavigationItem[];
 
     content?: CmsContent;
-    category?: any;
+    category?: Category;
 
     nodeContentItem?: CmsContent;
 };
@@ -22,18 +23,20 @@ export type NavigationState = {
     findByHref: (href: string) => NavigationItem | undefined;
 };
 
+export type CategoryById = Record<string, Category>;
+
 const NavigationContext = createContext<NavigationState | null>(null);
 
 interface WithNavigationContextProps extends PropsWithChildren {
     pages: CmsHierarchyNode;
-    categories: any;
+    categories: Category[];
 }
 
 export const WithNavigationContext = ({ pages, categories, children }: WithNavigationContextProps) => {
     const { language } = useUserContext();
-    const flattenCategories = (categories: any[]) => {
-        const allCategories: any[] = [];
-        const bulldozeCategories = (cat: any) => {
+    const flattenCategories = (categories: Category[]) => {
+        const allCategories: Category[] = [];
+        const bulldozeCategories = (cat: Category) => {
             allCategories.push(cat);
             cat.children && cat.children.forEach(bulldozeCategories);
         };
@@ -41,7 +44,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
         return allCategories;
     };
     const categoriesById = useMemo(() => {
-        const result: any = {};
+        const result: CategoryById = {};
         for (let item of flattenCategories(categories)) {
             result[item.id] = item;
         }
@@ -51,14 +54,14 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
     const rootItems = useMemo(() => {
         const buildCategoryItem = (
             cmsCategory: CmsHierarchyNode | undefined,
-            ecommerceCategory: any | undefined,
+            ecommerceCategory: Category | undefined,
         ): NavigationItem | null => {
             if (!cmsCategory && !ecommerceCategory) {
                 return null;
             }
             const children: NavigationItem[] = [];
             const result = {
-                type: 'category',
+                type: getTypeFromSchema(cmsCategory?.content?._meta?.schema) || 'category',
                 title: ecommerceCategory?.name,
                 href: cmsCategory?.content?._meta?.deliveryKey
                     ? `/category/${cmsCategory?.content?._meta?.deliveryKey.split('/')[1]}`
@@ -149,13 +152,10 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             if (!type) {
                 return null;
             }
-            if (!node.content?.active) {
-                return null;
-            }
             switch (type) {
                 case 'category':
-                    let category = categoriesById[node.content.name];
-                    return buildCategoryItem(node, category);
+                case 'ecommerce-category-generated':
+                    return buildCategoryItem(node, categoriesById[node.content.categoryId]);
                 case 'group':
                     return buildGroupItem(node);
                 case 'page':
@@ -163,35 +163,23 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
                 case 'external-page':
                     return buildExternalPageItem(node);
             }
-
             return null;
         };
 
         const buildCmsEntries = (children: CmsHierarchyNode[] = []): NavigationItem[] => {
-            children.sort(function (a: any, b: any) {
-                const priorityA = a.menu?.priority || a.priority || a.title;
-                const priorityB = b.menu?.priority || b.priority || b.title;
-
-                if (priorityA < priorityB) {
-                    return 1;
-                } else if (priorityA > priorityB) {
-                    return -1;
-                }
-                return 0;
-            });
             return children.map(buildCmsItem).filter((x) => x != null) as NavigationItem[];
         };
 
-        enrichCmsEntries(pages, categoriesById, categories);
+        const enrichedPages = enrichHierarchyNodes(pages, categoriesById, categories);
 
-        const rootEntries = buildCmsEntries(pages.children);
+        const rootEntries = buildCmsEntries(enrichedPages.children);
         rootEntries.forEach((rootEntry) => {
             walkNavigation(rootEntry, (node: NavigationItem, parents: NavigationItem[]) => {
                 node.parents = parents;
             });
         });
         return rootEntries as NavigationItem[];
-    }, [pages, categories, categoriesById, language]);
+    }, [pages, categoriesById, categories, language]);
 
     const findByHref = (href: string) => {
         let result: NavigationItem | undefined;
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index c78d75ba..5c995531 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -1,10 +1,11 @@
 import { CmsHierarchyNode } from '@lib/cms/fetchHierarchy';
-import { NavigationItem } from './NavigationContext';
+import { CategoryById, NavigationItem } from './NavigationContext';
+import { Category } from '@amplience/dc-integration-middleware';
 
 export default function walkNavigation(
     current: NavigationItem,
     visitor: (item: NavigationItem, parents: NavigationItem[]) => void,
-    parents: NavigationItem[] = []
+    parents: NavigationItem[] = [],
 ) {
     visitor(current, parents);
     for (let child of current.children) {
@@ -14,7 +15,7 @@ export default function walkNavigation(
 
 export function walkNavigationItems(
     items: NavigationItem[],
-    visitor: (item: NavigationItem, parents: NavigationItem[]) => void
+    visitor: (item: NavigationItem, parents: NavigationItem[]) => void,
 ) {
     for (let item of items) {
         walkNavigation(item, visitor);
@@ -31,88 +32,99 @@ export function getTypeFromSchema(schema: string) {
             return 'group';
         case 'https://demostore.amplience.com/site/pages/category':
             return 'category';
+        case 'https://demostore.amplience.com/site/pages/ecommerce-container':
+            return 'ecommerce-container';
+        case 'https://demostore.amplience.com/site/pages/ecommerce-category-generated':
+            return 'ecommerce-category-generated';
     }
     return null;
 }
 
-export function enrichCmsEntries(cmsEntry: CmsHierarchyNode, categoriesById: any, categories: any) {
-    // Generate fake cms entries for categories that exist on the backend,
-    // are flagged as being visible in menu, and don't have an existing cms entry.
-
-    const myType = getTypeFromSchema(cmsEntry.content?._meta?.schema);
+export function generateCmsCategory({ id, name, slug, children }: Category): CmsHierarchyNode {
+    return {
+        content: {
+            _meta: {
+                name,
+                schema: 'https://demostore.amplience.com/site/pages/ecommerce-category-generated',
+                deliveryKey: `category/${slug}`,
+                hierarchy: {
+                    parentId: 'generated',
+                    root: false,
+                },
+                deliveryId: id,
+            },
+            hideProductList: false,
+            components: [],
+            slots: [],
+            active: true,
+            menu: {
+                hidden: false,
+            },
+            categoryId: id,
+        },
+        children: children.map((child) => generateCmsCategory(child)),
+    };
+}
 
-    if (!cmsEntry.content.ecommCategories) {
-        categories = null;
-    } else if (categories == null && myType === 'category') {
-        // Locate the category by ID.
+export function enrichEcommerceContainer(node: CmsHierarchyNode, categoriesById: CategoryById, categories: Category[]) {
+    const { ecommerceConfiguration } = node.content;
+    const categoryIds: string[] = ecommerceConfiguration?.showAll
+        ? categories.map((category) => category.id)
+        : ecommerceConfiguration?.categoryIds || [];
 
-        categories = categoriesById[cmsEntry.content.name]?.children;
-    }
-
-    if (categories == null) {
-        for (const child of cmsEntry.children) {
-            enrichCmsEntries(child, categoriesById, null);
-        }
-    } else {
-        const children = cmsEntry.children;
-        const remainingChildren = [...children];
+    return categoryIds.map((categoryId) => generateCmsCategory(categoriesById[categoryId]));
+}
 
-        let generated = 0;
-        for (const category of categories) {
-            // Does a CMS category exist for this entry?
+export function enrichCategory(node: CmsHierarchyNode, categoriesById: CategoryById) {
+    return {
+        ...node,
+        children: categoriesById[node.content.categoryId]?.children.map((child) => generateCmsCategory(child)),
+    };
+}
 
-            let cmsChild = children.find((child) => {
-                const type = getTypeFromSchema(child.content?._meta?.schema);
-                if (!type) {
+export function enrichHierarchyNodes(
+    hierarchyNode: CmsHierarchyNode,
+    categoriesById: CategoryById,
+    categories: Category[],
+): CmsHierarchyNode {
+    const overrideCategoryIds: string[] = [];
+
+    const enrichHierarchy = (node: CmsHierarchyNode): CmsHierarchyNode => {
+        const children = node.children
+            .filter((childNode) => childNode.content?.active)
+            .flatMap((childNode) => {
+                if (getTypeFromSchema(childNode.content?._meta?.schema) === 'ecommerce-container') {
+                    return enrichEcommerceContainer(childNode, categoriesById, categories);
+                }
+                if (getTypeFromSchema(childNode.content?._meta?.schema) === 'category') {
+                    overrideCategoryIds.push(childNode.content.categoryId);
+                    return enrichCategory(childNode, categoriesById);
+                }
+                return childNode;
+            })
+            .map((childNode) => enrichHierarchy(childNode));
+
+        return { ...node, children };
+    };
+
+    const filterOverridesFromHierarchy = (node: CmsHierarchyNode): CmsHierarchyNode => {
+        const children = node.children
+            .filter((childNode) => {
+                if (
+                    getTypeFromSchema(childNode.content?._meta?.schema) === 'ecommerce-category-generated' &&
+                    overrideCategoryIds.includes(childNode.content.categoryId)
+                ) {
                     return false;
                 }
+                return true;
+            })
+            .map((childNode) => filterOverridesFromHierarchy(childNode));
 
-                return type === 'category' && child.content.name === category.id;
-            });
-
-            let pushCount = 0;
-
-            if (!cmsChild && category.showInMenu) {
-                // Create a dummy one, if it's meant to be visible
-                generated++;
-                cmsChild = {
-                    content: {
-                        _meta: {
-                            name: category.name,
-                            schema: 'https://demostore.amplience.com/site/pages/category',
-                            deliveryKey: 'category/' + category.slug,
-                            hierarchy: {
-                                parentId: 'generated',
-                                root: false,
-                            },
-                            deliveryId: category.id,
-                        },
-                        ecommCategories: true,
-                        hideProductList: false,
-                        components: [],
-                        slots: [],
-                        active: true,
-                        menu: {
-                            hidden: false,
-                            priority: generated * 10,
-                        },
-                        name: category.id,
-                    },
-                    children: [],
-                };
+        return { ...node, children };
+    };
 
-                children.splice(pushCount++, 0, cmsChild);
-            }
+    const enrichedHierarchy = enrichHierarchy(hierarchyNode);
+    const processedHierarchy = filterOverridesFromHierarchy(enrichedHierarchy);
 
-            if (cmsChild) {
-                enrichCmsEntries(cmsChild, categoriesById, category.children);
-
-                remainingChildren.splice(remainingChildren.indexOf(cmsChild), 1);
-            }
-        }
-
-        for (const cmsChild of remainingChildren) {
-            enrichCmsEntries(cmsChild, categoriesById, null);
-        }
-    }
+    return processedHierarchy;
 }
diff --git a/docs/ArchDiagram.md b/docs/ArchDiagram.md
index b828214b..69fd32c6 100644
--- a/docs/ArchDiagram.md
+++ b/docs/ArchDiagram.md
@@ -1,7 +1,7 @@
-
 # High-Level Architecture
 
-<!-- TODO: Update to look better -->
+## dc-demostore Architecture
+
 ![High-Level Architecture](../media/architecture.png)
 
-[back](../README.md)
\ No newline at end of file
+[back](../README.md)
diff --git a/docs/DeepDive.md b/docs/DeepDive.md
index 1887bb5d..2fe03a14 100644
--- a/docs/DeepDive.md
+++ b/docs/DeepDive.md
@@ -100,22 +100,24 @@ let filterRequest: GetByFilterRequest =
 
 ## Navigation Hierarchy
 
-![Site Pages](../media/sitePages.png)
+![alt text](../media/nav-sitePagesNew.png)
 
 The `Site Pages` hierarchy defines the top navigation of the site.
 This hierarchy is always loaded server-side and available for the Next.js pages.
 
-Each commerce related node (Site Pages and Category Page) has an option to populate sub nodes from commerce.
+Each commerce related node (Category Page and eComm Container) has an option to populate sub nodes from commerce. 
 
-![Site Pages](../media/site-pages-sub.png)
+The eComm Container allows you to select all commerce categories to be shown in the visualisation menu or a selection of your choice. These can be re-ordered as you wish. More than one eComm Container can be added to distribute the commerce categories through the visualisation menu as desired.
 
-When set to true, the navigation will auto populate sub items from the commerce category (or root).
+![alt text](../media/nav-ecommContainer.png)
 
-If set to false, only CMS managed sub items will appear.
+The Category Page allows you to select one commerce category. 
 
-CMS managed sub items will display AFTER the commerce items.
+![alt text](../media/nav-categoryPage.png)
 
-The default automation has the Site Pages node set to true to automatically render sub items from commerce.
+Further details are available at [WorkingWithPages.md](../docs/WorkingWithPages.md)
+
+The default automation has the eComm Container node set to Show All to automatically render all sub items from commerce.
 
 Other sub-hierarchies like `Components` and `Themes` are also always loaded in.
 
diff --git a/docs/ECommerceConfiguration.md b/docs/ECommerceConfiguration.md
index 80238228..c4d02613 100644
--- a/docs/ECommerceConfiguration.md
+++ b/docs/ECommerceConfiguration.md
@@ -19,7 +19,7 @@ For any of the supported integrations, you will need follow the guidance to setu
 
 Details can be found in [dc-demostore-integration](https://github.com/amplience/dc-integration-middleware) for each of the supported commerce vendors.
 
-## What do i need to change?
+## What do I need to change?
 
 There are 2 elements that you need to change to have your demostore work with a different supported eCommerce Vendor:
 
diff --git a/docs/FeatureHighlights.md b/docs/FeatureHighlights.md
index fc705626..3bafc5ce 100644
--- a/docs/FeatureHighlights.md
+++ b/docs/FeatureHighlights.md
@@ -3,6 +3,7 @@
 -   Content fully coming from Amplience Dynamic Content
 -   Multi-language & multi-currency front-end
 -   Multiple Components and Content Types implemented (banners, card lists, blogs, slots, etc.)
+-   Fully content managed 'Drag and Drop' hierarchy implementation.
 -   Multiple Visualisation implemented (page, standalone, time-based, etc.)
 -   Visualisation SDK implementation for Real-Time Visualisation from Amplience Dynamic Content
 -   Filter API implementation for Store page & Product Details Page personalisation
diff --git a/docs/WorkingWithPages.md b/docs/WorkingWithPages.md
index 3ceaa232..99df4974 100644
--- a/docs/WorkingWithPages.md
+++ b/docs/WorkingWithPages.md
@@ -4,9 +4,29 @@ The concepts of pages are a key demonstrable area of Demostore. They exist in 2
 
 ### Navigation:
 
--   **Category Page** - An item & page linked to a Commerce category (PLP)
--   **Landing Page** - An item and standalone page for content only
--   **External Page** - An item which has an external link for its page content
+-   **Landing Page** - A pure CMS driven page. An item and standalone page for content only. Via Page Group can link to a Category Page, External Page or another Landing Page. Shows as a CMS Item on hover in the visualisation.
+
+![alt text](../media/nav-landing-page.png)
+
+-   **Category Page** - Links directly to a commerce category and allows CMS content. An item & page linked to a Commerce category (PLP), to which Page Groups or further Category Pages can be added. Shows as a CMS Override Item on hover in the visualisation.
+
+![alt text](../media/nav-category-page.png)
+
+-   **Ecommerce Container** - Allows to you to draw all Ecommerce Categories into a single node - via Show All switch. Alternatively, select and reorder multiple Ecommerce Categories so you can control the order in which they appear in that existing node. Furthermore, you can use multiple Ecommerce Containers to distribute Ecommerce Categories amongst the CMS items. Shows as a Commerce Item on hover in the visualisation.
+
+![alt text](../media/nav-ecommerce-container.png)
+
+Show All above, below is selected Ecommerce Categories:
+
+![alt text](../media/nav-ecommerce-categories.png)
+
+-   **External Page** - Menu item that links to an external URL. As this links to an External site, there are no further items that can be added. Displays as CMS Item on hover in the visualisation.
+
+![alt text](../media/nav-external-page.png)
+
+-   **Page Group** - A grouping for sub nodes of any type with the exception of External Pages and Ecommerce Containers.
+
+![alt text](../media/nav-page-group.png)
 
 ### Standalone:
 
@@ -14,25 +34,28 @@ The concepts of pages are a key demonstrable area of Demostore. They exist in 2
 
 ## Ordering in Navigation
 
-Each item in the navigation has a `Priority` attribute. The number set in here is the order in which the navigation item is rendered.
+Each of the navigation items mentioned above can be arranged by dragging and dropping in the left-hand-side hierarchy menu. This provides a powerful and flexible way to arrange items in the menu according to preference.
+
+![alt text](../media/nav-ordering.png)
 
-Example: 0 will be first
+Existing drag-and-drop functionality, eg dragging a Page Group from a Landing Page to a Category Page continues to be available.
 
-The priority is in relation to other priorities set at the same at the same level in the hierarchy. So for example if you have 2 nodes at the same level
+When creating / adding an Ecommerce Container, you have two options:
 
--   MyItemA [Priority set to 50]
--   MyItemB [Priority set to 10]
+1. When the 'Show All' toggle switch is checked (default option), this will pull in all the Ecommerce Categories in the order they are obtained from the CMS.
 
-Will display as `MyItemB,MyItemA` in that order
+![alt text](../media/nav-show-all.png)
 
-> Note: When categories are set to automatically draw from commerce, they are given their priority with increments of 10 so that you can mix and max dynamic and curated navigation.
+2. When it is unchecked you will be able to manually select and arrange the eCommerce categories via drag-and-drop inside of the Ecommerce Container. In addition to the drag-and-drop re-ording function, here are a number of other functions available to enhance the user experience such as Move to top, Add below, Move to top etc
 
-> Additional node: If items have the same priority, they will display in order of which they are returned from the API.
+> Note: A Page Group can only be added as a child of a Category Page or Landing Page.
 
 ## Hiding a page
 
 Each of these content types has a flag in the content form called `is Active` which defaults to true.
 
+![alt text](../media/nav-is-active.png)
+
 If you disable this, then the page is no longer visible if attempting to visit it directly or in the menu navigation.
 
 ## Archiving a page & delivery keys
diff --git a/docs/v5.0.0-upgrade.md b/docs/v5.0.0-upgrade.md
new file mode 100644
index 00000000..6373e07b
--- /dev/null
+++ b/docs/v5.0.0-upgrade.md
@@ -0,0 +1,40 @@
+# V5.0.0 Upgrade
+
+## ⚠️ Breaking change v5.0.0 (after v4.3.0) ⚠️
+
+A breaking change was introduced _after_ version `v4.3.0` of this demostore FE due to depencies on the latest version of [dc-demostore-automation](https://github.com/amplience/dc-demostore-automation) `v5.0.0`
+
+In order for your demostore to function, you need the following:
+
+1. Automation should use latest automation `v5.0.0` from [dc-demostore-automation](https://github.com/amplience/dc-demostore-automation) using the lastest version of [dc-demostore-cli](https://github.com/amplience/dc-demostore-cli)
+2. Latest version of the dc-demostore-core FE from [dc-demostore-core](https://github.com/amplience/dc-demostore-core)
+
+### Recommended Upgrade path
+
+This path assumes that you already have an Amplience Dynamic Content account with content and a deployed URL in Vercel.
+
+1. Get latest version of dc-demostore-cli from npm
+
+`npm update @amplience/dc-demostore-cli` or if you installed globally `npm update @amplience/dc-demostore-cli -g`
+
+Once updated you can validate you are on the latest version by running the following command and checking that it matches the latest release on this github page:
+
+```
+demostore --version
+```
+
+2. Clean your Amplience Dynamic Content account to start from a blank canvas
+
+`demostore cleanup -c -a`
+
+3. Import from latest automation set
+
+`demostore import -l`
+
+See [import](../README.md#import) for details needed to update your front end
+
+4. Update your front end [dc-demostore-core](https://github.com/amplience/dc-demostore-core) to the latest version and deploy using the right environment variables
+
+### Staying on an older version
+
+Deployed versions will continue to work if you are not changing anything.
diff --git a/media/architecture.png b/media/architecture.png
index 90cf7dde..4845e81b 100644
Binary files a/media/architecture.png and b/media/architecture.png differ
diff --git a/media/nav-category-page.png b/media/nav-category-page.png
new file mode 100644
index 00000000..fa7e2eea
Binary files /dev/null and b/media/nav-category-page.png differ
diff --git a/media/nav-categoryPage.png b/media/nav-categoryPage.png
new file mode 100644
index 00000000..d54fd281
Binary files /dev/null and b/media/nav-categoryPage.png differ
diff --git a/media/nav-ecommContainer.png b/media/nav-ecommContainer.png
new file mode 100644
index 00000000..a1c5f018
Binary files /dev/null and b/media/nav-ecommContainer.png differ
diff --git a/media/nav-ecommerce-categories.png b/media/nav-ecommerce-categories.png
new file mode 100644
index 00000000..5c09c092
Binary files /dev/null and b/media/nav-ecommerce-categories.png differ
diff --git a/media/nav-ecommerce-container.png b/media/nav-ecommerce-container.png
new file mode 100644
index 00000000..1393b0ee
Binary files /dev/null and b/media/nav-ecommerce-container.png differ
diff --git a/media/nav-external-page.png b/media/nav-external-page.png
new file mode 100644
index 00000000..4ef0abde
Binary files /dev/null and b/media/nav-external-page.png differ
diff --git a/media/nav-is-active.png b/media/nav-is-active.png
new file mode 100644
index 00000000..d2024c36
Binary files /dev/null and b/media/nav-is-active.png differ
diff --git a/media/nav-landing-page.png b/media/nav-landing-page.png
new file mode 100644
index 00000000..3373b72f
Binary files /dev/null and b/media/nav-landing-page.png differ
diff --git a/media/nav-ordering.png b/media/nav-ordering.png
new file mode 100644
index 00000000..cc85f85e
Binary files /dev/null and b/media/nav-ordering.png differ
diff --git a/media/nav-page-group.png b/media/nav-page-group.png
new file mode 100644
index 00000000..c2c90896
Binary files /dev/null and b/media/nav-page-group.png differ
diff --git a/media/nav-show-all.png b/media/nav-show-all.png
new file mode 100644
index 00000000..53091fd7
Binary files /dev/null and b/media/nav-show-all.png differ
diff --git a/media/nav-sitePagesNew.png b/media/nav-sitePagesNew.png
new file mode 100644
index 00000000..4fc74a0d
Binary files /dev/null and b/media/nav-sitePagesNew.png differ
diff --git a/pages/category/[slug].tsx b/pages/category/[slug].tsx
index 7377670e..bcd52100 100644
--- a/pages/category/[slug].tsx
+++ b/pages/category/[slug].tsx
@@ -72,9 +72,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     );
 
     let category;
-    if (data.content.page?.name) {
-        const cmsslug = data.content.page?.name;
-        category = findCategory(props.ecommerce.categories, (cat) => cat.id === cmsslug);
+    if (data.content.page?.categoryId) {
+        category = findCategory(props.ecommerce.categories, (cat) => cat.id === data.content.page?.categoryId);
     } else {
         category = findCategory(props.ecommerce.categories, (cat) => cat.slug === slug);
     }
@@ -118,7 +117,7 @@ function CategoryPage(props: InferGetServerSidePropsType<typeof getServerSidePro
                     <div>
                         <Breadcrumb />
                         <div style={{ marginBottom: '30px' }}>
-                            <Typography variant="h2">{category && category.name}</Typography>
+                            <Typography variant="h2">{category && category.categoryId}</Typography>
                         </div>
                     </div>
                 }
diff --git a/styles/_stylitics.scss b/styles/_stylitics.scss
new file mode 100644
index 00000000..2ad3ebf7
--- /dev/null
+++ b/styles/_stylitics.scss
@@ -0,0 +1,6 @@
+.stylitics .stylitics-moodboard-base {
+    display: none !important;
+}
+.stylitics .stylitics-moodboard-base:first-child {
+    display: block !important;
+}
diff --git a/styles/main.scss b/styles/main.scss
index 1e1eeaa3..1a107bf7 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -37,4 +37,6 @@
 
 @import './debug';
 
+@import './stylitics';
+
 @import '~react-image-gallery/styles/scss/image-gallery.scss';