diff --git a/packages/admin-ui/src/Accordion/components/AccordionContent.tsx b/packages/admin-ui/src/Accordion/components/AccordionContent.tsx
index a8ce2077c2c..6a622dbc9d6 100644
--- a/packages/admin-ui/src/Accordion/components/AccordionContent.tsx
+++ b/packages/admin-ui/src/Accordion/components/AccordionContent.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { cva, type VariantProps, cn } from "~/utils";
 
-const accordionContentVariants = cva(
+const collapsiblePrimitiveVariants = cva(
     [
         "wby-overflow-hidden wby-text-md",
         "wby-transition-all data-[state=closed]:wby-animate-collapsible-up data-[state=open]:wby-animate-collapsible-down"
@@ -10,38 +10,72 @@ const accordionContentVariants = cva(
     {
         // Using pixel values here because of non-existing design tokens.
         variants: {
+            padding: {
+                expanded: "",
+                collapsed: ""
+            },
             withIcon: {
-                true: "wby-pl-9"
+                true: ""
             },
             withHandle: {
-                true: "wby-pl-5"
+                true: ""
             }
         },
         compoundVariants: [
+            {
+                withIcon: true,
+                padding: "expanded",
+                className: "wby-pl-9"
+            },
+            {
+                withHandle: true,
+                padding: "expanded",
+                className: "wby-pl-5"
+            },
             {
                 withIcon: true,
                 withHandle: true,
+                padding: "expanded",
                 className: "wby-pl-14"
-            }
+            },
         ],
         defaultVariants: {
             withIcon: false,
-            withHandle: false
+            withHandle: false,
+            padding: "expanded"
         }
     }
 );
 
+const contentDivVariants = cva("wby-pt-sm wby-pb-lg wby-pl-md", {
+    variants: {
+        padding: {
+            collapsed: "wby-pr-md",
+            expanded: "wby-pr-[52px]"
+        }
+    }
+});
+
 export interface AccordionContentProps
     extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
-        VariantProps<typeof accordionContentVariants> {}
+        VariantProps<typeof collapsiblePrimitiveVariants> {}
 
-const AccordionContent = ({ children, withIcon, withHandle, ...props }: AccordionContentProps) => {
+const AccordionContent = ({
+    children,
+    withIcon,
+    withHandle,
+    padding,
+    ...props
+}: AccordionContentProps) => {
     return (
         <CollapsiblePrimitive.Content
             {...props}
-            className={cn(accordionContentVariants({ withHandle, withIcon }), props.className)}
+            className={cn(
+                collapsiblePrimitiveVariants({ withHandle, withIcon, padding }),
+                props.className
+            )}
         >
-            <div className={"wby-pt-sm wby-pb-lg wby-pl-md wby-pr-[52px]"}>{children}</div>
+            <div className={contentDivVariants({ padding })}>{children}</div>
         </CollapsiblePrimitive.Content>
     );
 };
diff --git a/packages/admin-ui/src/Accordion/components/AccordionItem.tsx b/packages/admin-ui/src/Accordion/components/AccordionItem.tsx
index c0e3516c6ef..7b79262c8f9 100644
--- a/packages/admin-ui/src/Accordion/components/AccordionItem.tsx
+++ b/packages/admin-ui/src/Accordion/components/AccordionItem.tsx
@@ -12,6 +12,7 @@ interface AccordionItemProps extends Omit<AccordionRootProps, "title"> {
     description?: React.ReactNode;
     icon?: React.ReactNode;
     handle?: React.ReactNode;
+    padding?: "collapsed";
     interactive?: boolean;
     actions?: React.ReactNode;
     children: React.ReactNode;
@@ -30,6 +31,7 @@ const AccordionItemBase = (props: AccordionItemProps) => {
 
             // Content props.
             children,
+            padding,
 
             // Trigger props.
             ...triggerProps
@@ -47,7 +49,12 @@ const AccordionItemBase = (props: AccordionItemProps) => {
                 ...triggerProps,
                 interactive
             },
-            contentProps: { children, withIcon: !!props.icon, withHandle: !!props.handle }
+            contentProps: {
+                children,
+                withIcon: !!props.icon,
+                withHandle: !!props.handle,
+                padding
+            }
         };
     }, [props]);
 
diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx
index 0c85a2e3322..02611f46596 100644
--- a/packages/admin-ui/src/Grid/Grid.tsx
+++ b/packages/admin-ui/src/Grid/Grid.tsx
@@ -62,7 +62,8 @@ const gridVariants = cva("wby-grid", {
     variants: {
         gap: {
             comfortable: "wby-gap-lg",
-            spacious: "wby-gap-xl"
+            spacious: "wby-gap-xl",
+            "none": "wby-gap-0",
         }
     },
     defaultVariants: {
diff --git a/packages/admin-ui/src/HeaderBar/HeaderBar.tsx b/packages/admin-ui/src/HeaderBar/HeaderBar.tsx
index 9a258887a6f..eaee8f31dc1 100644
--- a/packages/admin-ui/src/HeaderBar/HeaderBar.tsx
+++ b/packages/admin-ui/src/HeaderBar/HeaderBar.tsx
@@ -1,20 +1,23 @@
 import React from "react";
-import { makeDecoratable } from "~/utils";
+import { cn, makeDecoratable } from "~/utils";
 import { Separator } from "~/Separator";
 
-interface HeaderBarProps {
+interface HeaderBarProps extends React.HTMLAttributes<HTMLDivElement> {
     start?: React.ReactNode;
     middle?: React.ReactNode;
     end?: React.ReactNode;
 }
 
-const HeaderBarBase = ({ start, middle, end }: HeaderBarProps) => {
+const HeaderBarBase = ({ start, middle, end, className, ...props }: HeaderBarProps) => {
     return (
-        <header>
-            <div
-                className={
-                    "wby-grid wby-grid-cols-[1fr_auto_1fr] wby-w-full wby-py-xs-plus wby-px-sm wby-bg-neutral-base"
-                }
+        <>
+            <header
+                className={cn(
+                    "wby-relative wby-w-full wby-py-xs-plus wby-px-sm wby-bg-neutral-base",
+                    "wby-grid wby-grid-cols-[1fr_auto_1fr]",
+                    className
+                )}
+                {...props}
             >
                 <div className="wby-h-full wby-flex wby-items-center wby-justify-self-start">
                     {start}
@@ -23,9 +26,9 @@ const HeaderBarBase = ({ start, middle, end }: HeaderBarProps) => {
                 <div className="wby-h-full wby-flex wby-items-center wby-justify-self-end">
                     {end}
                 </div>
-            </div>
+            </header>
             <Separator margin={"none"} variant={"subtle"} />
-        </header>
+        </>
     );
 };
 
diff --git a/packages/admin-ui/src/Icon/Icon.tsx b/packages/admin-ui/src/Icon/Icon.tsx
index 9a8a0e56226..35848ad02e9 100644
--- a/packages/admin-ui/src/Icon/Icon.tsx
+++ b/packages/admin-ui/src/Icon/Icon.tsx
@@ -61,7 +61,7 @@ const IconBase = (props: IconProps) => {
     return (
         <AccessibleIcon.Root label={label}>
             {/* @ts-expect-error */}
-            {React.cloneElement(icon, {
+            {icon && React.cloneElement(icon, {
                 ...rest,
                 className: cn(iconVariants({ color, disabled, size }), className)
             })}
diff --git a/packages/admin-ui/src/theme.scss b/packages/admin-ui/src/theme.scss
index f05ebedfb30..7110ad0d1b6 100644
--- a/packages/admin-ui/src/theme.scss
+++ b/packages/admin-ui/src/theme.scss
@@ -237,6 +237,7 @@
     --spacing-xxs: 2px;
     --spacing-sidebar-collapsed: 44px;
     --spacing-sidebar-expanded: 256px;
+    --spacing-headerbar: 45px;
 
     // Text color.
     --text-accent-muted: var(--color-primary-300);
diff --git a/packages/admin-ui/tailwind.config.theme.js b/packages/admin-ui/tailwind.config.theme.js
index 5b1360ddf27..c88924d48a3 100644
--- a/packages/admin-ui/tailwind.config.theme.js
+++ b/packages/admin-ui/tailwind.config.theme.js
@@ -345,6 +345,7 @@ module.exports = {
     spacing: {
         "sidebar-collapsed": "var(--spacing-sidebar-collapsed)",
         "sidebar-expanded": "var(--spacing-sidebar-expanded)",
+        "headerbar": "var(--spacing-headerbar)",
         "3xl": "var(--spacing-3xl)",
         lg: "var(--spacing-lg)",
         md: "var(--spacing-md)",
diff --git a/packages/app-page-builder/src/blockEditor/config/TopBar/BackButton/BackButton.tsx b/packages/app-page-builder/src/blockEditor/config/TopBar/BackButton/BackButton.tsx
index 1f5af0e0d67..b6e1112a8e5 100644
--- a/packages/app-page-builder/src/blockEditor/config/TopBar/BackButton/BackButton.tsx
+++ b/packages/app-page-builder/src/blockEditor/config/TopBar/BackButton/BackButton.tsx
@@ -1,15 +1,10 @@
 import React, { useCallback } from "react";
-import { css } from "emotion";
 import { useLocation, useNavigate } from "@webiny/react-router";
-import { IconButton } from "@webiny/ui/Button";
+import { IconButton } from "@webiny/admin-ui";
 import { ReactComponent as BackIcon } from "./round-arrow_back-24px.svg";
 import { useBlock } from "~/blockEditor/hooks/useBlock";
 import { BlockEditorConfig } from "~/blockEditor/editorConfig/BlockEditorConfig";
 
-const backStyles = css({
-    marginLeft: -10
-});
-
 export function BackButton() {
     const { key } = useLocation();
     const navigate = useNavigate();
@@ -27,8 +22,8 @@ export function BackButton() {
     return (
         <>
             <IconButton
+                className={"mr-sm-plus"}
                 data-testid="pb-editor-back-button"
-                className={backStyles}
                 onClick={onClick}
                 icon={<BackIcon />}
             />
diff --git a/packages/app-page-builder/src/editor/components/ColorPicker/ColorPicker.tsx b/packages/app-page-builder/src/editor/components/ColorPicker/ColorPicker.tsx
index 5c159a2a893..1c1f29369a1 100644
--- a/packages/app-page-builder/src/editor/components/ColorPicker/ColorPicker.tsx
+++ b/packages/app-page-builder/src/editor/components/ColorPicker/ColorPicker.tsx
@@ -1,117 +1,41 @@
-import React, { useState, useCallback } from "react";
-import classnames from "classnames";
-import styled from "@emotion/styled";
+import React, { useCallback, useState } from "react";
 import { css } from "emotion";
-import classNames from "classnames";
 import isEqual from "lodash/isEqual";
 import { ChromePicker, ColorState, RGBColor } from "react-color";
 import { Menu } from "@webiny/ui/Menu";
+import { cn, ColorPicker as AdminUiColorPickerPrimitive, SwitchPrimitive } from "@webiny/admin-ui";
 import { usePageElements } from "@webiny/app-page-builder-elements/hooks/usePageElements";
+import styled from "@emotion/styled";
 
-// Icons
-import { ReactComponent as IconPalette } from "../../assets/icons/round-color_lens-24px.svg";
-import { ReactComponent as ColorizeIcon } from "./colorize.svg";
-import { ReactComponent as NoColorSelectedIcon } from "./unselected.svg";
-import { COLORS } from "../../plugins/elementSettings/components/StyledComponents";
-
-const ColorPickerStyle = styled("div")({
-    display: "flex",
-    flexWrap: "wrap",
-    justifyContent: "space-between"
-});
-
-const CompactColorPicker = styled("div")({
-    display: "flex",
-    justifyContent: "flex-end",
-    "& .mdc-menu-surface--anchor": {
-        /**
-         * This menu is being treated differently because its parent "Accordion" has property "overflow: hidden",
-         * which makes it impossible to show the complete content of absolute positioned element using z-index.
-         * To overcome this issue, we're using a trick known as "Popping Out of Hidden Overflow"
-         * https://css-tricks.com/popping-hidden-overflow/
-         */
-        position: "static",
-        "& .mdc-menu-surface": {
-            transition: "transform 0.12s cubic-bezier(0, 0, 0.2, 1)"
-        },
-        /**
-         * Adjusting Menu position due to the fact it's positioned relative to "Accordion" and not to its direct parent.
-         */
-        "& .mdc-menu-surface--open": {
-            transform: "translate(-42px, 64px)"
-        }
-    },
-    "& .mdc-menu-surface": {
-        overflow: "visible"
-    }
-});
-
-const ColorList = styled("div")({
-    display: "flex"
-});
-
-const ColorPreview = styled("div")({
-    boxSizing: "border-box",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 4,
-    border: `1px solid ${COLORS.gray}`,
-    backgroundColor: COLORS.lightGray,
-
-    ".color": {
-        width: 20,
-        height: 20,
-        cursor: "pointer"
-    },
-
-    "& .not-selected": {
-        width: 20,
-        height: 20
-    }
-});
-
-const ColorBox = styled("div")({
-    cursor: "pointer",
-    width: 50,
-    height: 40,
-    margin: 10,
-    padding: 5,
-    borderRadius: 2,
-    boxSizing: "border-box",
-    transition: "transform 0.2s",
-    color: "var(--mdc-theme-text-secondary-on-background)"
-});
+const ColorBox = ({ children, className, ...props }: React.HTMLProps<HTMLDivElement>) => {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "wby-inline-block wby-rounded-md wby-border-sm wby-border-neutral-dimmed wby-transition-transform wby-duration-200",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+};
 
-const Color = styled("div")({
-    cursor: "pointer",
-    width: 40,
-    height: 30,
-    border: "1px solid var(--mdc-theme-on-background)",
-    transition: "transform 0.2s, scale 0.2s",
-    display: "flex",
-    alignItems: "center",
-    "&::after": {
-        boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
-        transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        zIndex: -1,
-        opacity: 0
-    },
-    "&:hover": {
-        transform: "scale(1.25)",
-        "&::after": {
-            opacity: 1
-        }
-    }
-});
+const Color = ({ children, className, ...props }: React.HTMLProps<HTMLDivElement>) => {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "wby-cursor-pointer wby-w-xl wby-h-xl wby-rounded-md wby-transition-transform wby-duration-200 wby-flex wby-items-center wby-relative hover:wby-scale-[1.25] wby-after:content-[''] wby-after:box-shadow-[0_0.25rem_0.125rem_0_rgba(0,0,0,0.05)] wby-after:transition-opacity after:wby-duration-[500ms] wby-after:ease-[cubic-bezier(0.165,0.84,0.44,1)] wby-after:absolute wby-after:top-0 wby-after:left-0 wby-after:w-full wby-after:h-full wby-after:opacity-0 wby-hover:after:opacity-100 wby-flex wby-justify-center wby-items-center",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+};
 
-const transparent = css({
+const TransparentColor = styled(Color)({
     backgroundSize: "10px 10px",
     backgroundImage:
         "linear-gradient( 45deg, #555 25%, transparent 25%, transparent)," +
@@ -128,45 +52,22 @@ const chromePickerStyles = css({
     }
 });
 
-const iconPaletteStyle = css({
-    height: 20,
-    width: "100%",
-    marginTop: 1,
-    color: "var(--mdc-theme-secondary)"
-});
-
-const styles = {
-    selectedColor: css({
-        boxShadow: "0px 0px 0px 2px var(--mdc-theme-secondary)"
-    }),
-    button: css({
-        backgroundColor: COLORS.lightGray,
-        borderRadius: 1,
-        border: `1px solid ${COLORS.gray}`,
-        cursor: "pointer",
-        height: 30,
-        boxSizing: "border-box",
-        "&:hover:not(:disabled)": { borderColor: COLORS.darkGray, backgroundColor: COLORS.gray },
-        "&:focus:not(:disabled)": {
-            borderColor: COLORS.darkGray,
-            outline: "none",
-            backgroundColor: COLORS.gray
-        },
-        "&:disabled": {
-            opacity: 0.5,
-            cursor: "not-allowed",
-            borderColor: COLORS.lightGray
-        },
-        "& svg": {
-            width: 16,
-            height: 16
-        }
-    }),
-    color: css({
-        width: "40px",
-        height: "100%",
-        borderRadius: "2px"
-    })
+const ColorPickerMenuLabel = ({
+    children,
+    className,
+    ...props
+}: React.HTMLProps<HTMLDivElement>) => {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "wby-text-sm wby-uppercase wby-text-neutral-strong wby-font-semibold wby-mb-xs wby-flex",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
 };
 
 interface ColorPickerProps {
@@ -178,7 +79,7 @@ interface ColorPickerProps {
 }
 
 const ColorPicker = ({ value, onChange, onChangeComplete, compact = false }: ColorPickerProps) => {
-    const [showPicker, setShowPicker] = useState(false);
+    const [showPicker, setShowPicker] = useState(true);
 
     const getColorValue = useCallback((rgb: RGBColor) => {
         return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
@@ -202,13 +103,9 @@ const ColorPicker = ({ value, onChange, onChangeComplete, compact = false }: Col
         setShowPicker(false);
     }, [setShowPicker]);
 
-    const togglePicker = useCallback(
-        (e: React.MouseEvent) => {
-            e.stopPropagation();
-            setShowPicker(!showPicker);
-        },
-        [showPicker, setShowPicker]
-    );
+    const togglePicker = useCallback(() => {
+        setShowPicker(prev => !prev);
+    }, [setShowPicker]);
 
     const pageElements = usePageElements();
 
@@ -226,53 +123,50 @@ const ColorPicker = ({ value, onChange, onChangeComplete, compact = false }: Col
     // Either a custom color or a color coming from the theme object.
     const actualSelectedColor = themeColors[value] || value || "#fff";
 
-    let themeColor = false;
     const colorPicker = (
-        <ColorPickerStyle onClick={hidePicker}>
-            {Object.keys(themeColors).map((key, index) => {
-                const color = themeColors[key];
-                if (color === value || value === "transparent") {
-                    themeColor = true;
-                }
-
-                return (
-                    <ColorBox key={index}>
-                        <Color
-                            className={key === value ? styles.selectedColor : ""}
-                            style={{ backgroundColor: color }}
-                            onClick={() => {
-                                hidePicker();
-
-                                // With page elements implementation, we want to store the color key and
-                                // then the actual color will be retrieved from the theme object.
-                                onChangeComplete(key);
-                            }}
-                        />
-                    </ColorBox>
-                );
-            })}
+        <div className={"wby-gap-sm-plus wby-px-sm"}>
+            <ColorPickerMenuLabel>Theme Colors</ColorPickerMenuLabel>
+            <div className={"wby-flex wby-flex-wrap wby-gap-xs-plus wby-mb-md"}>
+                {Object.keys(themeColors).map((key, index) => {
+                    const color = themeColors[key];
+                    if (color === value || value === "transparent") {
+                        // themeColor = true;
+                    }
 
-            <ColorBox>
-                <Color
-                    className={classnames(transparent, {
-                        [styles.selectedColor]: value === "transparent"
-                    })}
-                    onClick={() => {
-                        hidePicker();
-                        onChangeComplete("transparent");
-                    }}
+                    return (
+                        <ColorBox key={index}>
+                            <Color
+                                style={{ backgroundColor: color }}
+                                onClick={() => {
+                                    hidePicker();
+
+                                    // With page elements implementation, we want to store the color key and
+                                    // then the actual color will be retrieved from the theme object.
+                                    onChangeComplete(key);
+                                }}
+                            />
+                        </ColorBox>
+                    );
+                })}
+                <ColorBox>
+                    <TransparentColor
+                        onClick={() => {
+                            hidePicker();
+                            onChangeComplete("transparent");
+                        }}
+                    />
+                </ColorBox>
+            </div>
+
+            <ColorPickerMenuLabel className={"wby-justify-between wby-items-center"}>
+                Custom Color
+                <SwitchPrimitive
+                    checked={showPicker}
+                    onChange={togglePicker}
+                    label={""}
                 />
-            </ColorBox>
+            </ColorPickerMenuLabel>
 
-            <ColorBox>
-                <Color
-                    className={value && !themeColor ? styles.selectedColor : ""}
-                    style={{ backgroundColor: themeColor ? "#fff" : value }}
-                    onClick={togglePicker}
-                >
-                    <IconPalette className={iconPaletteStyle} />
-                </Color>
-            </ColorBox>
             {showPicker && (
                 <span onClick={e => e.stopPropagation()} className={chromePickerStyles}>
                     <ChromePicker
@@ -282,36 +176,19 @@ const ColorPicker = ({ value, onChange, onChangeComplete, compact = false }: Col
                     />
                 </span>
             )}
-        </ColorPickerStyle>
+        </div>
     );
 
     if (compact) {
         return (
-            <CompactColorPicker>
+            <div className={"wby-flex wby-justify-end"}>
                 <Menu
                     anchor={"bottomLeft"}
-                    handle={
-                        <button className={styles.button}>
-                            <ColorizeIcon />
-                        </button>
-                    }
+                    handle={<AdminUiColorPickerPrimitive value={actualSelectedColor} />}
                 >
-                    <ColorList>
-                        {React.cloneElement(colorPicker, { style: { width: 240 } })}
-                    </ColorList>
+                    <div className={"wby-flex wby-max-w-[210px] wby-pt-xs"}>{colorPicker}</div>
                 </Menu>
-                <ColorPreview>
-                    {value ? (
-                        <button
-                            className={classNames(styles.button, "color")}
-                            style={{ backgroundColor: actualSelectedColor }}
-                            onClick={() => onChange("")}
-                        />
-                    ) : (
-                        <NoColorSelectedIcon className={"not-selected"} />
-                    )}
-                </ColorPreview>
-            </CompactColorPicker>
+            </div>
         );
     }
 
diff --git a/packages/app-page-builder/src/editor/components/Editor/Editor.tsx b/packages/app-page-builder/src/editor/components/Editor/Editor.tsx
index 4b33feb7d22..b31cf0312dd 100644
--- a/packages/app-page-builder/src/editor/components/Editor/Editor.tsx
+++ b/packages/app-page-builder/src/editor/components/Editor/Editor.tsx
@@ -74,6 +74,7 @@ export const Editor = () => {
     }, []);
 
     const classes = {
+        "wby-bg-neutral-dimmed": true,
         "pb-editor": true,
         "pb-editor-dragging": isDragging,
         "pb-editor-resizing": isResizing
diff --git a/packages/app-page-builder/src/editor/config/Content/Layout.tsx b/packages/app-page-builder/src/editor/config/Content/Layout.tsx
index 21d25d0725c..1a41b66e42e 100644
--- a/packages/app-page-builder/src/editor/config/Content/Layout.tsx
+++ b/packages/app-page-builder/src/editor/config/Content/Layout.tsx
@@ -1,26 +1,21 @@
 import React from "react";
-import { css } from "emotion";
-import { Elevation } from "@webiny/ui/Elevation";
+import { cn } from "@webiny/admin-ui";
 
 export interface LayoutProps {
     className?: string;
     children: React.ReactNode;
 }
 
-const contentContainerWrapper = css`
-    margin: 95px 65px 50px 85px;
-    padding: 0;
-    position: absolute;
-    width: calc(100vw - 415px);
-    top: 0;
-    box-sizing: border-box;
-    z-index: 1;
-`;
-
-export const Layout = ({ className = contentContainerWrapper, children }: LayoutProps) => {
+export const Layout = ({ className, children }: LayoutProps) => {
     return (
-        <Elevation className={className} z={0} data-role={"content-layout"}>
+        <div
+            className={cn(
+                "wby-m-[78px] wby-p-0 wby-absolute wby-w-[calc(100vw-415px)] wby-top-0 wby-box-border wby-z-1 wby-bg-white",
+                className
+            )}
+            data-role={"content-layout"}
+        >
             {children}
-        </Elevation>
+        </div>
     );
 };
diff --git a/packages/app-page-builder/src/editor/config/Sidebar/Layout.tsx b/packages/app-page-builder/src/editor/config/Sidebar/Layout.tsx
index 4a1f3b68002..b8226a0dc31 100644
--- a/packages/app-page-builder/src/editor/config/Sidebar/Layout.tsx
+++ b/packages/app-page-builder/src/editor/config/Sidebar/Layout.tsx
@@ -1,37 +1,29 @@
 import React from "react";
-import { css } from "emotion";
 import { makeDecoratable } from "@webiny/app-admin";
-import { Elevation } from "@webiny/ui/Elevation";
 import { Tabs } from "@webiny/ui/Tabs";
 import { Sidebar } from "./Sidebar";
 import { SidebarHighlight } from "./SidebarHighlight";
-
-const rightSideBar = css({
-    boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)",
-    position: "fixed",
-    right: 0,
-    top: 65,
-    height: "100%",
-    width: 300,
-    zIndex: 1
-});
+import { cn } from "@webiny/admin-ui";
 
 export interface LayoutProps {
     className?: string;
 }
 
-export const Layout = makeDecoratable(
-    "SidebarLayout",
-    ({ className = rightSideBar }: LayoutProps) => {
-        const { activeGroup, setActiveGroup } = Sidebar.useActiveGroup();
+export const Layout = makeDecoratable("SidebarLayout", ({ className }: LayoutProps) => {
+    const { activeGroup, setActiveGroup } = Sidebar.useActiveGroup();
 
-        return (
-            <Elevation z={1} className={className} data-role={"sidebar-layout"}>
-                <Tabs value={activeGroup} onActivate={setActiveGroup}>
-                    <Sidebar.Elements group="groups" />
-                </Tabs>
-                <SidebarHighlight />
-            </Elevation>
-        );
-    }
-);
+    return (
+        <div
+            className={cn(
+                "wby-fixed wby-top-headerbar wby-right-0 wby-h-[calc(100vh-theme(height.headerbar))] wby-bg-neutral-base wby-w-[300px]",
+                className
+            )}
+            data-role={"sidebar-layout"}
+        >
+            <Tabs value={activeGroup} onActivate={setActiveGroup} spacing={"md"}>
+                <Sidebar.Elements group="groups" />
+            </Tabs>
+            <SidebarHighlight />
+        </div>
+    );
+});
diff --git a/packages/app-page-builder/src/editor/config/Toolbar/Layout.tsx b/packages/app-page-builder/src/editor/config/Toolbar/Layout.tsx
index 2e5567d82e2..ad38ba068d9 100644
--- a/packages/app-page-builder/src/editor/config/Toolbar/Layout.tsx
+++ b/packages/app-page-builder/src/editor/config/Toolbar/Layout.tsx
@@ -12,18 +12,6 @@ const ToolbarDrawerContainer = styled("div")({
     zIndex: 2
 });
 
-const ToolbarContainer = styled("div")({
-    position: "fixed",
-    display: "inline-block",
-    padding: "2px 1px 2px 3px",
-    width: 50,
-    top: 64,
-    height: "calc(100vh - 68px)",
-    backgroundColor: "var(--mdc-theme-surface)",
-    boxShadow: "1px 0px 5px 0px var(--mdc-theme-on-background)",
-    zIndex: 3
-});
-
 const ToolbarActions = styled("div")({
     position: "relative",
     display: "flex",
@@ -44,16 +32,21 @@ export const Layout = () => {
                     </DrawerProvider>
                 ))}
             </ToolbarDrawerContainer>
-            <ToolbarContainer data-role={"toolbar-layout"}>
+            <div
+                data-role={"toolbar-layout"}
+                className={
+                    "wby-fixed wby-top-headerbar wby-left-0 wby-p-sm wby-h-[calc(100vh-theme(height.headerbar))] wby-bg-neutral-base"
+                }
+            >
                 <ToolbarActions data-role={"toolbar-actions"}>
-                    <div>
+                    <div className={"wby-flex wby-flex-col"}>
                         <Toolbar.Elements group={"top"} />
                     </div>
-                    <div>
+                    <div className={"wby-flex wby-flex-col"}>
                         <Toolbar.Elements group={"bottom"} />
                     </div>
                 </ToolbarActions>
-            </ToolbarContainer>
+            </div>
         </>
     );
 };
diff --git a/packages/app-page-builder/src/editor/config/TopBar/Divider.tsx b/packages/app-page-builder/src/editor/config/TopBar/Divider.tsx
index 9174fffa7d7..f565d974dff 100644
--- a/packages/app-page-builder/src/editor/config/TopBar/Divider.tsx
+++ b/packages/app-page-builder/src/editor/config/TopBar/Divider.tsx
@@ -1,15 +1,7 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { makeDecoratable } from "@webiny/app-admin";
-
-const StyledDivider = styled.div`
-    width: 1px;
-    margin: 0 5px;
-    height: 100%;
-    flex: none;
-    background-color: var(--mdc-theme-on-background);
-`;
+import { Separator } from "@webiny/admin-ui";
 
 export const Divider = makeDecoratable("TopBarDivider", () => {
-    return <StyledDivider />;
+    return <Separator orientation={"vertical"}  />;
 });
diff --git a/packages/app-page-builder/src/editor/config/TopBar/Layout.tsx b/packages/app-page-builder/src/editor/config/TopBar/Layout.tsx
index 5c9ec2e88c2..f14c8250efa 100644
--- a/packages/app-page-builder/src/editor/config/TopBar/Layout.tsx
+++ b/packages/app-page-builder/src/editor/config/TopBar/Layout.tsx
@@ -1,48 +1,20 @@
 import React from "react";
-import { css } from "emotion";
 import { makeDecoratable } from "@webiny/app-admin";
-import { TopAppBar, TopAppBarSection } from "@webiny/ui/TopAppBar";
+import {cn, HeaderBar} from "@webiny/admin-ui";
 import { TopBar } from "./TopBar";
 
-const topBar = css`
-    box-shadow: 1px 0px 5px 0px rgba(128, 128, 128, 1);
-    height: 64px;
-    display: flex;
-    > * {
-        flex: 1;
-    }
-`;
-
-const centerTopBar = css`
-    &.mdc-top-app-bar__section {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-`;
-
-const oneThird = { width: "33%" };
-
 export interface TopBarLayoutProps {
-    fixed?: boolean;
     className?: string;
 }
 
-export const Layout = makeDecoratable("TopBarLayout", (props: TopBarLayoutProps) => {
+export const Layout = makeDecoratable("TopBarLayout", ({className}: TopBarLayoutProps) => {
     return (
-        <TopAppBar
-            className={props.className ?? topBar}
-            fixed={props.fixed ?? true}
+        <HeaderBar
+            className={cn("wby-fixed wby-top-0 wby-z-[100] wby-px-sm", className)}
             data-role={"top-bar-layout"}
-        >
-            <TopAppBarSection alignStart style={oneThird}>
-                <TopBar.Elements group={"left"} />
-            </TopAppBarSection>
-            <TopAppBarSection className={centerTopBar} style={oneThird}>
-                <TopBar.Elements group={"center"} />
-            </TopAppBarSection>
-            <TopAppBarSection alignEnd style={oneThird}>
-                <TopBar.Elements group={"actions"} />
-            </TopAppBarSection>
-        </TopAppBar>
+            start={<TopBar.Elements group={"left"} />}
+            middle={<TopBar.Elements group={"center"} />}
+            end={<TopBar.Elements group={"actions"} />}
+        />
     );
 });
diff --git a/packages/app-page-builder/src/editor/defaultConfig/Content/Background/Background.tsx b/packages/app-page-builder/src/editor/defaultConfig/Content/Background/Background.tsx
index 65dff05dc85..720514ab392 100644
--- a/packages/app-page-builder/src/editor/defaultConfig/Content/Background/Background.tsx
+++ b/packages/app-page-builder/src/editor/defaultConfig/Content/Background/Background.tsx
@@ -1,15 +1,6 @@
 import React, { useCallback } from "react";
-import { css } from "emotion";
 import { useActiveElement } from "~/editor/hooks/useActiveElement";
 
-const backgroundStyle = css`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: 100%;
-`;
-
 export const Background = () => {
     const [activeElement, setActiveElement] = useActiveElement();
 
@@ -20,5 +11,10 @@ export const Background = () => {
         setActiveElement(null);
     }, [activeElement]);
 
-    return <div className={backgroundStyle} onClick={deactivateElement} />;
+    return (
+        <div
+            className={"wby-fixed wby-top-0 wby-left-0 wby-w-full wby-h-min-full"}
+            onClick={deactivateElement}
+        />
+    );
 };
diff --git a/packages/app-page-builder/src/editor/defaultConfig/TopBar/DisplayModeSelector/DisplayModeSelector.tsx b/packages/app-page-builder/src/editor/defaultConfig/TopBar/DisplayModeSelector/DisplayModeSelector.tsx
index f527179d8cf..d59cacd516c 100644
--- a/packages/app-page-builder/src/editor/defaultConfig/TopBar/DisplayModeSelector/DisplayModeSelector.tsx
+++ b/packages/app-page-builder/src/editor/defaultConfig/TopBar/DisplayModeSelector/DisplayModeSelector.tsx
@@ -1,85 +1,10 @@
 import React, { useMemo } from "react";
-import { css } from "emotion";
 import classNames from "classnames";
 import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { Typography } from "@webiny/ui/Typography";
+import { Heading, Tooltip, Icon } from "@webiny/admin-ui";
 import { DisplayMode } from "~/types";
 import { useDisplayMode } from "~/editor";
 
-const classes = {
-    wrapper: css({
-        height: "100%",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-
-        "& .action-wrapper": {
-            height: "100%",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            borderRight: "1px solid var(--mdc-theme-background)",
-            "&:first-child": {
-                borderLeft: "1px solid var(--mdc-theme-background)"
-            },
-            "&.active": {
-                backgroundColor: "var(--mdc-theme-background)",
-                "& .mdc-icon-button": {
-                    color: "var(--mdc-theme-text-primary-on-background)"
-                }
-            }
-        }
-    }),
-    dimensionIndicator: css({
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        padding: "0px 16px",
-        borderRight: "1px solid var(--mdc-theme-background)",
-
-        "& span": {
-            color: "var(--mdc-theme-text-primary-on-background)"
-        },
-        "& .width": {
-            marginRight: 8,
-            "& span:last-child": {
-                marginLeft: 4
-            }
-        },
-        "& .height": {
-            "& span:last-child": {
-                marginLeft: 4
-            }
-        }
-    }),
-    tooltip: css({
-        textAlign: "left",
-        textTransform: "initial",
-        "& .tooltip__title": {
-            "& span": {
-                fontWeight: 900
-            }
-        },
-        "& .tooltip__info": {
-            display: "flex",
-            "& span": {
-                fontWeight: 600
-            },
-            "& svg": {
-                fill: "var(--mdc-theme-surface)",
-                marginRight: 4
-            }
-        },
-        "& .tooltip__body": {
-            marginTop: 4,
-            "& span": {
-                fontWeight: 600
-            }
-        }
-    })
-};
-
 export const DisplayModeSelector = () => {
     const { displayMode, displayModes, setDisplayMode } = useDisplayMode();
 
@@ -88,30 +13,38 @@ export const DisplayModeSelector = () => {
             return (
                 <Tooltip
                     key={mode}
+                    trigger={
+                        <IconButton
+                            icon={icon}
+                            onClick={() => setDisplayMode(mode as DisplayMode)}
+                        />
+                    }
                     content={
-                        <div className={classes.tooltip}>
-                            <div className={"tooltip__title"}>
-                                <Typography use={"subtitle1"}>{tooltip.title}</Typography>
-                            </div>
-                            <div className={"tooltip__info"}>
-                                {tooltip.subTitleIcon}
-                                <Typography use={"body2"}>{tooltip.subTitle}</Typography>
-                            </div>
-                            <div className={"tooltip__body"}>
-                                <Typography use={"body2"}>{tooltip.body}</Typography>
+                        <div className={'wby-flex wby-flex-col wby-gap-xs'}>
+                            <Heading level={6}>{tooltip.title}</Heading>
+                            <div className={"wby-font-semibold wby-flex wby-items-center"}>
+                                {tooltip.subTitleIcon && (
+                                    <Icon
+                                        icon={tooltip.subTitleIcon}
+                                        size={'xs'}
+                                        label={tooltip.subTitle}
+                                        color={"neutral-light"}
+                                    />
+                                )}
+
+                                {tooltip.subTitle}
                             </div>
+                            {tooltip.body}
                         </div>
                     }
-                    placement={"bottom"}
+                    side={"bottom"}
                     className={classNames("action-wrapper", {
                         active: mode === displayMode
                     })}
-                >
-                    <IconButton icon={icon} onClick={() => setDisplayMode(mode as DisplayMode)} />
-                </Tooltip>
+                />
             );
         });
     }, [setDisplayMode, displayMode]);
 
-    return <div className={classes.wrapper}>{responsiveBarContent}</div>;
+    return <div>{responsiveBarContent}</div>;
 };
diff --git a/packages/app-page-builder/src/editor/defaultConfig/TopBar/DropdownActions/PageOptionsDropdown.tsx b/packages/app-page-builder/src/editor/defaultConfig/TopBar/DropdownActions/PageOptionsDropdown.tsx
index 41c0ed1a21f..cb8beec5554 100644
--- a/packages/app-page-builder/src/editor/defaultConfig/TopBar/DropdownActions/PageOptionsDropdown.tsx
+++ b/packages/app-page-builder/src/editor/defaultConfig/TopBar/DropdownActions/PageOptionsDropdown.tsx
@@ -1,18 +1,10 @@
-import React, { Fragment } from "react";
-import { css } from "emotion";
+import React from "react";
 import { Menu } from "@webiny/ui/Menu";
 import { IconButton } from "@webiny/ui/Button";
 import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
 import { TopBar } from "~/editor/config/TopBar/TopBar";
 import { useEditorConfig } from "~/editor/config";
 
-const menuStyles = css`
-    .disabled {
-        opacity: 0.5;
-        pointer-events: none;
-    }
-`;
-
 export const PageOptionsDropdown = () => {
     const { elements } = useEditorConfig();
     const dropdownActions = elements.filter(
@@ -26,11 +18,9 @@ export const PageOptionsDropdown = () => {
     return (
         <Menu
             data-testid="pb-editor-page-options-menu"
-            className={menuStyles}
             handle={<IconButton icon={<MoreVerticalIcon />} />}
         >
             {/* We need to have more than 1 element in the children to force the Menu to render as a regular Menu. */}
-            <Fragment />
             <TopBar.Elements group={"dropdownActions"} />
         </Menu>
     );
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/align/HorizontalAlignFlexSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/align/HorizontalAlignFlexSettings.tsx
index ccdfe17dde9..4fbd93ee963 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/align/HorizontalAlignFlexSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/align/HorizontalAlignFlexSettings.tsx
@@ -83,7 +83,7 @@ const HorizontalAlignFlexSettings = ({
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${config.displayMode}`}>
-                    {config.icon}
+                    <Accordion.Icon icon={config.icon} label={"Horizontal align"} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/align/VerticalAlignSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/align/VerticalAlignSettings.tsx
index 5c5af32c43e..cae90690112 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/align/VerticalAlignSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/align/VerticalAlignSettings.tsx
@@ -82,7 +82,7 @@ const VerticalAlignSettings = ({
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${config.displayMode}`}>
-                    {config.icon}
+                    <Accordion.Icon icon={config.icon} label={"Vertical align"} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/background/BackgroundSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/background/BackgroundSettings.tsx
index 545521a4bbb..ecc5d6c7cf6 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/background/BackgroundSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/background/BackgroundSettings.tsx
@@ -6,7 +6,6 @@ import set from "lodash/set";
 import merge from "lodash/merge";
 import { Tooltip } from "@webiny/ui/Tooltip";
 import { plugins } from "@webiny/plugins";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import SingleImageUpload from "@webiny/app-admin/components/SingleImageUpload";
 import { FileManagerFileItem } from "@webiny/app-admin";
 import {
@@ -49,6 +48,7 @@ interface SettingsPropsType extends PbEditorPageElementSettingsRenderComponentPr
         [key: string]: any;
     };
 }
+
 const BackgroundSettings = ({ options, defaultAccordionValue }: SettingsPropsType) => {
     const { displayMode } = useDisplayMode();
     const [element] = useActiveElement();
@@ -120,23 +120,21 @@ const BackgroundSettings = ({ options, defaultAccordionValue }: SettingsPropsTyp
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${activeDisplayModeConfig.displayMode}`}>
-                    {activeDisplayModeConfig.icon}
+                    <Accordion.Icon icon={activeDisplayModeConfig.icon} label={"Background"} />
                 </Tooltip>
             }
         >
             <ContentWrapper direction={"column"}>
-                <Grid className={classes.simpleGrid}>
-                    <Cell span={12}>
-                        <ColorPicker
-                            label={"Color"}
-                            value={backgroundColor}
-                            updatePreview={onColorChange}
-                            updateValue={setColor}
-                        />
-                    </Cell>
-                </Grid>
+                <Wrapper label={"Color"}>
+                    <ColorPicker
+                        value={backgroundColor}
+                        updatePreview={onColorChange}
+                        updateValue={setColor}
+                    />
+                </Wrapper>
+
                 {options.image !== false && (
-                    <React.Fragment>
+                    <>
                         <Wrapper label={"Image"} containerClassName={classes.simpleGrid}>
                             <SingleImageUpload
                                 className={imageSelect}
@@ -171,7 +169,7 @@ const BackgroundSettings = ({ options, defaultAccordionValue }: SettingsPropsTyp
                                 ))}
                             </SelectField>
                         </Wrapper>
-                    </React.Fragment>
+                    </>
                 )}
             </ContentWrapper>
         </Accordion>
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/border/BorderSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/border/BorderSettings.tsx
index 23fccbcae93..a3ec9f2437f 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/border/BorderSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/border/BorderSettings.tsx
@@ -68,7 +68,7 @@ const BorderSettings = ({
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${config.displayMode}`}>
-                    {config.icon}
+                    <Accordion.Icon icon={config.icon} label={"Border"} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/cell/VerticalAlignSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/cell/VerticalAlignSettings.tsx
index 9564b0fb84f..fbf8b97db06 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/cell/VerticalAlignSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/cell/VerticalAlignSettings.tsx
@@ -94,7 +94,7 @@ const VerticalAlignSettings = ({
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${config.displayMode}`}>
-                    {config.icon}
+                    <Accordion.Icon icon={config.icon} label={"Vertical align"} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/Accordion.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/components/Accordion.tsx
index 4b92bae00ea..a5cf36e4eb4 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/Accordion.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/Accordion.tsx
@@ -1,158 +1,41 @@
-import React, { ReactElement, useCallback, useState } from "react";
-import { css } from "emotion";
-import classNames from "classnames";
-import { COLORS } from "./StyledComponents";
-import { Typography } from "@webiny/ui/Typography";
-
-const classes = {
-    accordionWrapper: css({
-        /**
-         * We're using position: "relative" here for "Popping Out of Hidden Overflow" https://css-tricks.com/popping-hidden-overflow/
-         * so that, we can use absolute positioned element inside without "overflow: hidden" being a problem
-         */
-        position: "relative",
-        width: "100%",
-        borderBottom: `1px solid ${COLORS.gray}`
-    }),
-    accordionHeader: css({
-        position: "relative",
-        color: "var(--mdc-theme-text-secondary-on-background)",
-        cursor: "pointer",
-        padding: "12px 16px",
-
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-
-        "& .accordion-header--left": {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            paddingLeft: "16px",
-            "& .accordion-title": {
-                span: {
-                    marginLeft: 16
-                }
-            }
-        },
-        "& .accordion-header--right": {
-            display: "flex",
-            "& .action-container": {
-                display: "none",
-                marginRight: 8
-            },
-            "& .icon-container": {
-                display: "flex",
-                alignItems: "center",
-
-                "& span": {
-                    display: "flex"
-                },
-                "& svg": {
-                    fill: "currentColor",
-                    width: 14,
-                    height: 14
-                }
-            }
-        },
-
-        "&::before": {
-            position: "absolute",
-            top: 20,
-            left: 16,
-            content: '""',
-            width: 0,
-            height: 0,
-
-            // Arrow right.
-            borderTop: "5px solid transparent",
-            borderBottom: "5px solid transparent",
-            borderLeft: "5px solid currentColor"
-        },
-
-        "&.open": {
-            color: COLORS.black,
-            backgroundColor: "hsla(0,0%,97%,1)",
-
-            "&::before": {
-                transform: "translateY(3px) rotate(90deg)"
-            },
-
-            "& .action-container": {
-                display: "block"
-            }
-        }
-    }),
-    accordionItem: css({
-        overflow: "hidden",
-        height: "auto",
-        maxHeight: "9999px",
-        transition: "max-height 0.3s cubic-bezier(1, 0, 1, 1)",
-
-        "&.collapsed": {
-            maxHeight: 0,
-            transition: "max-height 0.35s cubic-bezier(0, 1, 0, 1)"
-        },
-
-        "&.open": {
-            animation: "delay-overflow 10ms 400ms forwards"
-        },
-
-        "& .accordion-content": {
-            padding: "16px 12px 24px"
-        },
-
-        "@keyframes delay-overflow": {
-            to: { overflow: "visible" }
-        }
-    })
-};
+import React, { ReactElement } from "react";
+import { Accordion as AdminUiAccordion, IconProps } from "@webiny/admin-ui";
 
 export interface AccordionProps {
     title: string;
     children: ReactElement;
     action?: ReactElement;
     icon?: ReactElement;
-    defaultValue?: boolean;
     className?: string;
+    defaultValue?: boolean;
 }
 
-const Accordion = ({
-    title,
-    children,
-    action,
-    icon,
-    defaultValue = false,
-    className
-}: AccordionProps) => {
-    const [isOpen, setOpen] = useState(defaultValue);
-    const toggleOpen = useCallback(() => setOpen(!isOpen), [isOpen]);
-
-    return (
-        <div className={classNames(classes.accordionWrapper, className)}>
-            <div
-                className={classNames(classes.accordionHeader, { open: isOpen })}
-                onClick={toggleOpen}
-            >
-                <div className="accordion-header--left">
-                    <div className={"accordion-title"}>
-                        <Typography use={"subtitle1"} tag={"span"}>
-                            {title}
-                        </Typography>
-                    </div>
-                </div>
-                <div className="accordion-header--right">
-                    <div className={"action-container"}>{action}</div>
-                    <div className={"icon-container"}>{icon}</div>
-                </div>
-            </div>
-            <div
-                className={classNames(classes.accordionItem, { collapsed: !isOpen, open: isOpen })}
-            >
-                <div className="accordion-content">{children}</div>
-            </div>
-        </div>
-    );
+const AccordionBase = React.memo(
+    ({ title, children, action, icon, className, defaultValue }: AccordionProps) => {
+        return (
+            <AdminUiAccordion variant={"container"} background={"light"} className={"wby-mb-sm"} defaultOpen={defaultValue}>
+                <AdminUiAccordion.Item
+                    padding={"collapsed"}
+                    title={title}
+                    icon={icon}
+                    actions={action}
+                    className={className}
+                >
+                    {children}
+                </AdminUiAccordion.Item>
+            </AdminUiAccordion>
+        );
+    }
+);
+
+AccordionBase.displayName = "Accordion";
+
+const AccordionIcon = (props: IconProps) => {
+    return <AdminUiAccordion.Item.Icon {...props} />;
 };
 
-export default React.memo(Accordion);
+const Accordion = Object.assign(AccordionBase, {
+    Icon: AccordionIcon
+});
+
+export default Accordion;
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/ColorPicker.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/components/ColorPicker.tsx
index 91af9100f3b..61b275d5e18 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/ColorPicker.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/ColorPicker.tsx
@@ -23,7 +23,7 @@ const extrapolateActiveElementValue = (
 };
 
 interface ColorPickerProps {
-    label: string;
+    label?: string;
     value?: string;
     valueKey?: string;
     defaultValue?: string;
@@ -63,6 +63,7 @@ const ColorPicker = ({
 export default React.memo(ColorPicker);
 
 type BaseColorPickerComponent = Omit<ColorPickerProps, "label">;
+
 export const BaseColorPickerComponent = ({
     value,
     valueKey,
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/InputField.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/components/InputField.tsx
index d5b78f56415..884b67d5ae2 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/InputField.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/InputField.tsx
@@ -1,55 +1,9 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { css } from "emotion";
-import classNames from "classnames";
 import omit from "lodash/omit";
-import { Typography } from "@webiny/ui/Typography";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { COLORS } from "./StyledComponents";
 import { Validation } from "@webiny/form";
 import debounce from "lodash/debounce";
 import { useIsMounted } from "@webiny/app-admin";
-
-const inputStyle = css({
-    boxSizing: "border-box",
-    border: "1px solid var(--mdc-theme-on-background)",
-    width: "100%",
-    padding: "4px 8px",
-    textAlign: "left",
-    minHeight: 32,
-    backgroundColor: COLORS.lightGray,
-    "&:focus:not(:disabled)": {
-        backgroundColor: COLORS.gray
-    },
-    "&:hover:not(:disabled)": {
-        backgroundColor: COLORS.gray
-    },
-    "&:disabled": {
-        opacity: 0.5,
-        cursor: "not-allowed"
-    },
-
-    "&.text-center": {
-        textAlign: "center",
-        padding: 4
-    },
-
-    "&::-webkit-inner-spin-button": {
-        WebkitAppearance: "none",
-        margin: 0
-    },
-    "&::-webkit-outer-spin-button": {
-        WebkitAppearance: "none",
-        margin: 0
-    }
-});
-
-const labelStyle = css({
-    marginBottom: 8,
-    padding: "0px 8px",
-    "& span": {
-        color: "var(--mdc-theme-text-primary-on-background)"
-    }
-});
+import { Input as AdminUiInput } from "@webiny/admin-ui";
 
 interface GetValueCallableParams {
     value: string | number;
@@ -82,7 +36,6 @@ interface InputBoxProps {
 }
 
 const InputField = ({
-    className,
     value,
     onChange,
     label,
@@ -123,35 +76,23 @@ const InputField = ({
     }, [localValue, value]);
 
     return (
-        <React.Fragment>
-            {label && (
-                <div className={labelStyle}>
-                    <Typography use={"body2"}>{label}</Typography>
-                </div>
-            )}
-            <input
-                className={classNames(inputStyle, className)}
-                value={getValue({
-                    value: localValue as string,
-                    type: props.type || "string",
-                    defaultValue
-                })}
-                onChange={({ target: { value } }) => {
-                    if (!onChange) {
-                        return;
-                    }
-                    onChange(value);
-                    setLocalValue(value);
-                }}
-                {...omit(props, "validate")}
-            />
-            {validation.isValid === false && (
-                <FormElementMessage error>{validation.message}</FormElementMessage>
-            )}
-            {validation.isValid !== false && description && (
-                <FormElementMessage>{description}</FormElementMessage>
-            )}
-        </React.Fragment>
+        <AdminUiInput
+            label={label}
+            value={getValue({
+                value: localValue as string,
+                type: props.type || "string",
+                defaultValue
+            })}
+            description={description}
+            onChange={value => {
+                if (!onChange) {
+                    return;
+                }
+                onChange(value);
+                setLocalValue(value);
+            }}
+            {...omit(props, "validate")}
+        />
     );
 };
 
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/MarginPaddingSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/components/MarginPaddingSettings.tsx
index cd04e59927a..3253623b71e 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/MarginPaddingSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/MarginPaddingSettings.tsx
@@ -279,7 +279,7 @@ const MarginPaddingSettings = ({
             }
             icon={
                 <Tooltip content={`Changes will apply for ${activeEditorModeConfig.displayMode}`}>
-                    {activeEditorModeConfig.icon}
+                    <Accordion.Icon icon={activeEditorModeConfig.icon} label={startCase(styleAttribute)} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/SelectField.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/components/SelectField.tsx
index 89a91b3bd6b..3944bb6eb33 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/SelectField.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/SelectField.tsx
@@ -1,91 +1,30 @@
 import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
 import omit from "lodash/omit";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { COLORS } from "./StyledComponents";
+import { Select } from "@webiny/admin-ui";
 
-const selectStyle = css({
-    display: "block",
-    color: COLORS.darkestGray,
-    padding: ".6em 1.4em .5em .8em",
-    width: "100%",
-    maxWidth: "100%",
-    boxSizing: "border-box",
-    margin: "0",
-    border: `1px solid ${COLORS.gray}`,
-    borderRadius: 1,
-    MozAppearance: "none",
-    WebkitAppearance: "none",
-    appearance: "none",
-    backgroundColor: COLORS.lightGray,
-    backgroundImage: `url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")`,
-    backgroundRepeat: "no-repeat, repeat",
-    backgroundPosition: "right .7em top 50%, 0 0",
-    backgroundSize: "24px auto, 100%",
-
-    "&::-ms-expand": { display: "none" },
-    "&:hover:not(:disabled)": { borderColor: COLORS.darkGray, backgroundColor: COLORS.gray },
-    "&:focus:not(:disabled)": {
-        borderColor: COLORS.darkGray,
-        outline: "none",
-        backgroundColor: COLORS.gray
-    },
-    "&:disabled": {
-        opacity: 0.5,
-        cursor: "not-allowed",
-        borderColor: COLORS.lightGray
-    },
-    "& option": { fontWeight: "normal" }
-});
-
-interface SelectProps {
-    value?: string;
-    onChange?: (value: string) => void;
-    // One or more <option> or <optgroup> elements.
-    children?: Array<React.ReactElement<"option"> | React.ReactElement<"optgroup">>;
-    className?: string;
-    [key: string]: any;
-}
+type SelectProps = React.ComponentProps<typeof Select>;
 
 const SelectField = ({
     value = "",
     onChange,
-    children,
-    className,
     validation = { isValid: true },
     description,
     placeholder = "",
     ...props
 }: SelectProps) => {
     return (
-        <React.Fragment>
-            <select
-                className={classNames(selectStyle, className)}
-                value={value}
-                onChange={({ target: { value } }) => {
-                    if (!onChange) {
-                        return;
-                    }
-                    onChange(value);
-                }}
-                {...omit(props, "validate")}
-            >
-                {placeholder ? (
-                    <option value="" disabled hidden>
-                        {placeholder}
-                    </option>
-                ) : null}
-                {children}
-            </select>
-            {validation.isValid === false && (
-                <FormElementMessage error>{validation.message}</FormElementMessage>
-            )}
-
-            {validation.isValid !== false && description && (
-                <FormElementMessage>{description}</FormElementMessage>
-            )}
-        </React.Fragment>
+        <Select
+            placeholder={placeholder}
+            description={description}
+            value={value}
+            onChange={value => {
+                if (!onChange) {
+                    return;
+                }
+                onChange(value);
+            }}
+            {...omit(props, "validate")}
+        />
     );
 };
 
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/SpacingPicker.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/components/SpacingPicker.tsx
index d48cad0944b..1081d36cc6a 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/SpacingPicker.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/SpacingPicker.tsx
@@ -1,54 +1,9 @@
-import React, { useMemo, useCallback } from "react";
-import { css } from "emotion";
-import classNames from "classnames";
+import React, { useCallback, useMemo } from "react";
 import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 import { BindComponentRenderPropValidation, Form, FormOnSubmit } from "@webiny/form";
 import InputField from "./InputField";
 import SelectField from "./SelectField";
 
-const defaultWrapperStyle = css({
-    width: 60,
-    "& .inner-wrapper": {
-        display: "flex"
-    }
-});
-
-const defaultInputStyle = css({
-    appearance: "none",
-    background: "transparent",
-    border: "none",
-    margin: 0,
-    fontSize: 11,
-    padding: 0,
-    width: 24,
-    textAlign: "right",
-
-    transition: "all 200ms ease-in",
-
-    "&:focus": {
-        padding: "0px 4px",
-        width: 36,
-        textAlign: "center",
-        outlineColor: "lightblue"
-    }
-});
-
-const defaultSelectStyle = css({
-    appearance: "none",
-    background: "transparent",
-    border: "none",
-    padding: "0px 0px 0px 4px",
-    margin: 0,
-    fontSize: 12,
-    width: 28,
-    backgroundImage: "none",
-    "&:focus": {
-        outlineWidth: 2,
-        outlineStyle: "solid",
-        outlineColor: "lightblue"
-    }
-});
-
 interface SpacingPickerProps {
     value: string;
     onChange: (value: string | number) => void;
@@ -72,10 +27,7 @@ const SpacingPicker = ({
     disabled,
     options = [],
     validation,
-    className,
-    inputClassName,
-    selectClassName,
-    useDefaultStyle = true
+    className
 }: SpacingPickerProps) => {
     const formData = useMemo(() => {
         const parsedValue = parseFloat(value);
@@ -112,44 +64,35 @@ const SpacingPicker = ({
             {({ data, Bind }) => {
                 const unitValue = data.unit || defaultUnitValue;
                 return (
-                    <div
-                        className={classNames(className, {
-                            [defaultWrapperStyle]: useDefaultStyle
-                        })}
-                    >
-                        <div className={"inner-wrapper"}>
-                            <Bind name={"value"}>
-                                <InputField
-                                    className={classNames(inputClassName, {
-                                        [defaultInputStyle]: useDefaultStyle
-                                    })}
-                                    disabled={data.unit === "auto" || disabled}
-                                    type={"number"}
-                                    onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
-                                        event.target.select()
-                                    }
-                                    onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
-                                        if (event.target.value === "") {
-                                            onChange("0" + (formData.unit || defaultUnitValue));
+                    <div className={className}>
+                        <div className={"wby-flex"}>
+                            <div className={"wby-w-[68px]"}>
+                                <Bind name={"value"}>
+                                    <InputField
+                                        disabled={data.unit === "auto" || disabled}
+                                        type={"number"}
+                                        onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
+                                            event.target.select()
                                         }
-                                    }}
-                                />
-                            </Bind>
-                            <Bind name={"unit"}>
-                                <SelectField
-                                    className={classNames(selectClassName, {
-                                        [defaultSelectStyle]: useDefaultStyle
-                                    })}
-                                    disabled={disabled}
-                                    value={unitValue}
-                                >
-                                    {options.map(item => (
-                                        <option key={item.value} value={item.value}>
-                                            {item.label}
-                                        </option>
-                                    ))}
-                                </SelectField>
-                            </Bind>
+                                        onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
+                                            if (event.target.value === "") {
+                                                onChange("0" + (formData.unit || defaultUnitValue));
+                                            }
+                                        }}
+                                    />
+                                </Bind>
+                            </div>
+                            &nbsp;
+                            <div className={"wby-w-[70px]"}>
+                                <Bind name={"unit"}>
+                                    <SelectField
+                                        displayResetAction={false}
+                                        disabled={disabled}
+                                        value={unitValue}
+                                        options={options}
+                                    />
+                                </Bind>
+                            </div>
                         </div>
                         {validation && validation.isValid === false && (
                             <FormElementMessage error>{validation.message}</FormElementMessage>
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/StyledComponents.ts b/packages/app-page-builder/src/editor/plugins/elementSettings/components/StyledComponents.tsx
similarity index 79%
rename from packages/app-page-builder/src/editor/plugins/elementSettings/components/StyledComponents.ts
rename to packages/app-page-builder/src/editor/plugins/elementSettings/components/StyledComponents.tsx
index 7eceb9e19b5..3c9a6938fa6 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/StyledComponents.ts
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/StyledComponents.tsx
@@ -1,5 +1,7 @@
+import React from "react";
 import styled from "@emotion/styled";
 import { css } from "emotion";
+import { cn } from "@webiny/admin-ui";
 
 export const classes = {
     simpleGrid: css({
@@ -44,14 +46,34 @@ export const InputContainer = styled.div<InputContainerProps>(props => ({
     }
 }));
 
-type ContentWrapperProps = {
+interface ContentWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
     direction?: "row" | "row-reverse" | "column" | "column-reverse";
-};
+}
 
-export const ContentWrapper = styled.div<ContentWrapperProps>(props => ({
-    display: "flex",
-    flexDirection: props.direction || "row"
-}));
+export const ContentWrapper = ({
+    className,
+    direction = "column",
+    children,
+    ...props
+}: ContentWrapperProps) => {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "wby-flex wby-gap-sm",
+                {
+                    "wby-flex-row": direction === "row",
+                    "wby-flex-row-reverse": direction === "row-reverse",
+                    "wby-flex-col": direction === "column",
+                    "wby-flex-col-reverse": direction === "column-reverse"
+                },
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+};
 
 export const COLORS = {
     lightGray: "hsla(0, 0%, 97%, 1)",
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/Wrapper.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/components/Wrapper.tsx
index 1bac0727281..adf90e64961 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/Wrapper.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/Wrapper.tsx
@@ -1,12 +1,11 @@
 import React, { ReactElement } from "react";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
+import { Grid, ColumnProps, cn } from "@webiny/admin-ui";
 
 interface WrapperPropsType {
     label: string;
     containerClassName?: string;
-    leftCellSpan?: number;
-    rightCellSpan?: number;
+    leftCellSpan?: ColumnProps["span"];
+    rightCellSpan?: ColumnProps["span"];
     leftCellClassName?: string;
     rightCellClassName?: string;
     children: ReactElement;
@@ -22,13 +21,19 @@ const Wrapper = ({
     children
 }: WrapperPropsType) => {
     return (
-        <Grid className={containerClassName}>
-            <Cell span={leftCellSpan} className={leftCellClassName}>
-                <Typography use={"body2"}>{label}</Typography>
-            </Cell>
-            <Cell span={rightCellSpan} className={rightCellClassName}>
+        <Grid className={cn(containerClassName, "wby-min-h-xl")} gap={"none"}>
+            <Grid.Column
+                span={leftCellSpan}
+                className={cn("wby-flex wby-items-center", leftCellClassName)}
+            >
+                {label}
+            </Grid.Column>
+            <Grid.Column
+                span={rightCellSpan}
+                className={cn("wby-flex wby-items-center wby-justify-self-end", rightCellClassName)}
+            >
                 {children}
-            </Cell>
+            </Grid.Column>
         </Grid>
     );
 };
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/grid/GridSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/grid/GridSettings.tsx
index 5dff9f1756a..c56223d34af 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/grid/GridSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/grid/GridSettings.tsx
@@ -124,7 +124,7 @@ export const GridSettings = ({
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${config.displayMode}`}>
-                    {config.icon}
+                    <Accordion.Icon icon={config.icon} label={"Grid Settings"} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/height/HeightSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/height/HeightSettings.tsx
index f264381ea6b..7f78ae39392 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/height/HeightSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/height/HeightSettings.tsx
@@ -149,7 +149,7 @@ const Settings = ({ defaultAccordionValue }: PbEditorPageElementSettingsRenderCo
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${activeDisplayModeConfig.displayMode}`}>
-                    {activeDisplayModeConfig.icon}
+                    <Accordion.Icon icon={activeDisplayModeConfig.icon} label={"Height"} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/link/HrefSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/link/HrefSettings.tsx
index 8212407fb1e..9e43d848dda 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/link/HrefSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/link/HrefSettings.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { css } from "emotion";
 import { merge } from "dot-prop-immutable";
 import { Switch } from "@webiny/ui/Switch";
 import { Form } from "@webiny/form";
@@ -8,23 +7,12 @@ import { withActiveElement } from "~/editor/components";
 import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
 import { useEventActionHandler } from "~/editor/hooks/useEventActionHandler";
 import { UpdateElementActionEvent } from "~/editor/recoil/actions";
-import { PbEditorPageElementSettingsRenderComponentProps, PbEditorElement } from "~/types";
+import { PbEditorElement, PbEditorPageElementSettingsRenderComponentProps } from "~/types";
 // Components
 import Accordion from "../components/Accordion";
 import Wrapper from "../components/Wrapper";
 import InputField from "../components/InputField";
-
-const classes = {
-    gridClass: css({
-        "&.mdc-layout-grid": {
-            padding: 0,
-            marginBottom: 24
-        }
-    }),
-    gridCellClass: css({
-        justifySelf: "end"
-    })
-};
+import {ContentWrapper} from "~/editor/plugins/elementSettings/components/StyledComponents";
 
 interface LinkSettingsFormData {
     newTab?: boolean;
@@ -66,8 +54,8 @@ const LinkSettingsComponent = ({ element, defaultAccordionValue }: LinkSettingsC
         <Accordion title={"Link"} defaultValue={defaultAccordionValue}>
             <Form data={{ href, newTab }} onChange={updateSettings}>
                 {({ Bind }) => (
-                    <>
-                        <Wrapper label={"URL"} containerClassName={classes.gridClass}>
+                    <ContentWrapper direction={"column"}>
+                        <Wrapper label={"URL"}>
                             <Bind
                                 name={"href"}
                                 validators={validation.create("url:allowRelative:allowHref")}
@@ -84,16 +72,12 @@ const LinkSettingsComponent = ({ element, defaultAccordionValue }: LinkSettingsC
                                 </DelayedOnChange>
                             </Bind>
                         </Wrapper>
-                        <Wrapper
-                            label={"New tab"}
-                            containerClassName={classes.gridClass}
-                            rightCellClassName={classes.gridCellClass}
-                        >
+                        <Wrapper label={"New tab"} rightCellClassName={"wby-justify-self-end"}>
                             <Bind name={"newTab"}>
                                 <Switch />
                             </Bind>
                         </Wrapper>
-                    </>
+                    </ContentWrapper>
                 )}
             </Form>
         </Accordion>
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/property/PropertySettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/property/PropertySettings.tsx
index b3000eefa7e..916b215a39f 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/property/PropertySettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/property/PropertySettings.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo } from "react";
-import { css } from "emotion";
 import { useRecoilValue } from "recoil";
 import merge from "lodash/merge";
 import set from "lodash/set";
@@ -29,22 +28,6 @@ import useUpdateHandlers from "../../elementSettings/useUpdateHandlers";
 import InputField from "../components/InputField";
 import { ContentWrapper } from "../components/StyledComponents";
 
-const classes = {
-    grid: css({
-        "&.mdc-layout-grid": {
-            padding: 0,
-            margin: "0px 0px 16px"
-        }
-    }),
-    rightCellStyle: css({
-        justifySelf: "end",
-        alignSelf: "center"
-    }),
-    leftCellStyle: css({
-        alignSelf: "center"
-    })
-};
-
 const DATA_NAMESPACE = "data.settings.property";
 
 const validateId: Validator = (value: string | undefined) => {
@@ -77,6 +60,7 @@ interface UseVisibilitySettingResult {
     element: PbEditorElement;
     updateVisibility: (value: boolean) => void;
 }
+
 export const useVisibilitySetting = (elementId: string): UseVisibilitySettingResult => {
     const { displayMode } = useRecoilValue(uiAtom);
     const element = useRecoilValue(elementWithChildrenByIdSelector(elementId)) as PbEditorElement;
@@ -164,7 +148,7 @@ const PropertySettings = ({ defaultAccordionValue }: PropertySettingsProps) => {
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${activeDisplayModeConfig.displayMode}`}>
-                    {activeDisplayModeConfig.icon}
+                    <Accordion.Icon icon={activeDisplayModeConfig.icon} label={"Property"} />
                 </Tooltip>
             }
         >
@@ -180,21 +164,14 @@ const PropertySettings = ({ defaultAccordionValue }: PropertySettingsProps) => {
                 {({ Bind }) => {
                     return (
                         <ContentWrapper direction={"column"}>
-                            <Wrapper
-                                containerClassName={classes.grid}
-                                label={"Hide element"}
-                                leftCellSpan={8}
-                                rightCellSpan={4}
-                                leftCellClassName={classes.leftCellStyle}
-                                rightCellClassName={classes.rightCellStyle}
-                            >
+                            <Wrapper label={"Hide element"} leftCellSpan={8} rightCellSpan={4}>
                                 <Bind name={"hidden"}>
                                     {({ value, onChange }) => (
                                         <Switch value={value} onChange={onChange} />
                                     )}
                                 </Bind>
                             </Wrapper>
-                            <Wrapper label={"Element ID"} containerClassName={classes.grid}>
+                            <Wrapper label={"Element ID"}>
                                 <Bind name={"id"} validators={validateId}>
                                     {({ value, onChange, validation }) => (
                                         <InputField
@@ -205,7 +182,7 @@ const PropertySettings = ({ defaultAccordionValue }: PropertySettingsProps) => {
                                     )}
                                 </Bind>
                             </Wrapper>
-                            <Wrapper label={"CSS class"} containerClassName={classes.grid}>
+                            <Wrapper label={"CSS class"}>
                                 <Bind name={"className"} validators={validateClassName}>
                                     {({ value, onChange, validation }) => (
                                         <InputField
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/shadow/ShadowSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/shadow/ShadowSettings.tsx
index c6b2279ec44..8ccca9872e5 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/shadow/ShadowSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/shadow/ShadowSettings.tsx
@@ -25,7 +25,7 @@ const Settings = () => {
 
     return (
         <Accordion title={"Shadow"}>
-            <ContentWrapper direction={"column"}>
+            <ContentWrapper>
                 <Wrapper label={"Color"} containerClassName={classes.simpleGrid}>
                     <BaseColorPickerComponent
                         // @ts-refactor label does not exist on BaseColorPicker nor are props passed on
@@ -42,6 +42,7 @@ const Settings = () => {
                     rightCellSpan={4}
                 >
                     <InputField
+                        placeholder={"px"}
                         value={get(element, DATA_NAMESPACE + ".horizontal", 0)}
                         onChange={getUpdateValue("horizontal")}
                     />
@@ -54,6 +55,7 @@ const Settings = () => {
                     rightCellSpan={4}
                 >
                     <InputField
+                        placeholder={"px"}
                         value={get(element, DATA_NAMESPACE + ".vertical", 0)}
                         onChange={getUpdateValue("vertical")}
                     />
@@ -66,6 +68,7 @@ const Settings = () => {
                     rightCellSpan={4}
                 >
                     <InputField
+                        placeholder={"px"}
                         value={get(element, DATA_NAMESPACE + ".blur", 0)}
                         onChange={getUpdateValue("blur")}
                     />
@@ -78,6 +81,7 @@ const Settings = () => {
                     rightCellSpan={4}
                 >
                     <InputField
+                        placeholder={"px"}
                         value={get(element, DATA_NAMESPACE + ".spread", 0)}
                         onChange={getUpdateValue("spread")}
                     />
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/text/TextSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/text/TextSettings.tsx
index 7c201f016e9..5b9d63c3bb5 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/text/TextSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/text/TextSettings.tsx
@@ -180,7 +180,7 @@ const TextSettings = ({ defaultAccordionValue, options }: TextSettingsProps) =>
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${activeDisplayModeConfig.displayMode}`}>
-                    {activeDisplayModeConfig.icon}
+                    <Accordion.Icon icon={activeDisplayModeConfig.icon} label={"Text"} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/width/WidthSettings.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/width/WidthSettings.tsx
index 7c6099908e9..98ba6fb1ea7 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/width/WidthSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/width/WidthSettings.tsx
@@ -152,7 +152,7 @@ const Settings = ({ defaultAccordionValue }: PbEditorPageElementSettingsRenderCo
             defaultValue={defaultAccordionValue}
             icon={
                 <Tooltip content={`Changes will apply for ${activeDisplayModeConfig.displayMode}`}>
-                    {activeDisplayModeConfig.icon}
+                    <Accordion.Icon icon={activeDisplayModeConfig.icon} label={"Width"} />
                 </Tooltip>
             }
         >
diff --git a/packages/app-page-builder/src/editor/plugins/elements/image/ImageSettings.tsx b/packages/app-page-builder/src/editor/plugins/elements/image/ImageSettings.tsx
index 639eff08ac6..80c0d20b361 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/image/ImageSettings.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/image/ImageSettings.tsx
@@ -9,7 +9,10 @@ import Wrapper from "~/editor/plugins/elementSettings/components/Wrapper";
 import InputField from "~/editor/plugins/elementSettings/components/InputField";
 import SpacingPicker from "~/editor/plugins/elementSettings/components/SpacingPicker";
 import useUpdateHandlers from "~/editor/plugins/elementSettings/useUpdateHandlers";
-import { justifySelfEndStyle } from "~/editor/plugins/elementSettings/components/StyledComponents";
+import {
+    ContentWrapper,
+    justifySelfEndStyle
+} from "~/editor/plugins/elementSettings/components/StyledComponents";
 import {
     WIDTH_UNIT_OPTIONS,
     HEIGHT_UNIT_OPTIONS
@@ -25,13 +28,6 @@ const classes = {
     })
 };
 
-const spacingPickerStyle = css({
-    width: "120px",
-    "& .inner-wrapper": {
-        display: "flex"
-    }
-});
-
 const ImageSettings = ({
     defaultAccordionValue = false
 }: PbEditorPageElementSettingsRenderComponentProps) => {
@@ -53,7 +49,7 @@ const ImageSettings = ({
 
     return (
         <Accordion title={"Image"} defaultValue={defaultAccordionValue}>
-            <>
+            <ContentWrapper direction={"column"}>
                 <Wrapper containerClassName={classes.grid} label={"Title"}>
                     <InputField value={image?.title || ""} onChange={updateTitle} />
                 </Wrapper>
@@ -67,7 +63,6 @@ const ImageSettings = ({
                         onChange={updateWidth}
                         options={WIDTH_UNIT_OPTIONS}
                         useDefaultStyle={false}
-                        className={spacingPickerStyle}
                     />
                 </Wrapper>
                 <Wrapper
@@ -80,7 +75,6 @@ const ImageSettings = ({
                         onChange={updateHeight}
                         options={HEIGHT_UNIT_OPTIONS}
                         useDefaultStyle={false}
-                        className={spacingPickerStyle}
                     />
                 </Wrapper>
                 <Wrapper
@@ -89,13 +83,18 @@ const ImageSettings = ({
                     leftCellSpan={4}
                     rightCellSpan={8}
                 >
-                    <SelectField value={image?.htmlTag || "img"} onChange={updateHtmlTag}>
-                        <option value={"auto"}>{"Auto-detect"}</option>
-                        <option value={"img"}>{"<img>"}</option>
-                        <option value={"object"}>{"<object>"} (for SVGs)</option>
-                    </SelectField>
+                    <SelectField
+                        displayResetAction={false}
+                        value={image?.htmlTag || "img"}
+                        onChange={updateHtmlTag}
+                        options={[
+                            { label: "Auto-detect", value: "auto" },
+                            { label: "<img>", value: "img" },
+                            { label: "<object>", value: "object" }
+                        ]}
+                    />
                 </Wrapper>
-            </>
+            </ContentWrapper>
         </Accordion>
     );
 };
diff --git a/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/laptop_mac.svg b/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/laptop_mac.svg
deleted file mode 100644
index 319463bccbc..00000000000
--- a/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/laptop_mac.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM5 5h14c.55 0 1 .45 1 1v9c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1zm7 14c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/phone_iphone.svg b/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/phone_iphone.svg
deleted file mode 100644
index 9cc47fb76c4..00000000000
--- a/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/phone_iphone.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"/></svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/star_rate.svg b/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/star_rate.svg
deleted file mode 100644
index 45172ed6338..00000000000
--- a/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/star_rate.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><g><rect fill="none" height="24" width="24"/><path d="M14.43,10l-1.47-4.84c-0.29-0.95-1.63-0.95-1.91,0L9.57,10H5.12c-0.97,0-1.37,1.25-0.58,1.81l3.64,2.6l-1.43,4.61 c-0.29,0.93,0.79,1.68,1.56,1.09L12,17.31l3.69,2.81c0.77,0.59,1.85-0.16,1.56-1.09l-1.43-4.61l3.64-2.6 c0.79-0.57,0.39-1.81-0.58-1.81H14.43z"/></g></svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/tablet_mac.svg b/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/tablet_mac.svg
deleted file mode 100644
index 001b8a45343..00000000000
--- a/packages/app-page-builder/src/editor/plugins/responsiveMode/icons/tablet_mac.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M18.5 0h-14C3.12 0 2 1.12 2 2.5v19C2 22.88 3.12 24 4.5 24h14c1.38 0 2.5-1.12 2.5-2.5v-19C21 1.12 19.88 0 18.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7.5-4H4V3h15v16z"/></svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/editor/plugins/responsiveMode/index.tsx b/packages/app-page-builder/src/editor/plugins/responsiveMode/index.tsx
index eb96f4e8496..c566e626091 100644
--- a/packages/app-page-builder/src/editor/plugins/responsiveMode/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/responsiveMode/index.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 import { css } from "emotion";
 import { PbEditorResponsiveModePlugin, DisplayMode } from "~/types";
+
 // Icons
-import { ReactComponent as DesktopIcon } from "./icons/laptop_mac.svg";
-import { ReactComponent as TabletIcon } from "./icons/tablet_mac.svg";
-import { ReactComponent as MobileIcon } from "./icons/phone_iphone.svg";
-import { ReactComponent as StarIcon } from "./icons/star_rate.svg";
+import { ReactComponent as DesktopIcon } from "@webiny/icons/laptop_mac.svg";
+import { ReactComponent as TabletIcon } from "@webiny/icons/tablet_mac.svg";
+import { ReactComponent as MobileIcon } from "@webiny/icons/phone_iphone.svg";
+import { ReactComponent as StarIcon } from "@webiny/icons/star_rate.svg";
 
 const rotateStyle = css({
     transform: "rotate(90deg)"
diff --git a/packages/app-page-builder/src/pageEditor/config/TopBar/BackButton/BackButton.tsx b/packages/app-page-builder/src/pageEditor/config/TopBar/BackButton/BackButton.tsx
index 2645c2e62bf..8be36e30f46 100644
--- a/packages/app-page-builder/src/pageEditor/config/TopBar/BackButton/BackButton.tsx
+++ b/packages/app-page-builder/src/pageEditor/config/TopBar/BackButton/BackButton.tsx
@@ -1,23 +1,18 @@
 import React from "react";
 import { ReactComponent as BackIcon } from "@webiny/icons/arrow_back.svg";
-import styled from "@emotion/styled";
-import { IconButton } from "@webiny/ui/Button";
+import { IconButton } from "@webiny/admin-ui";
 import { useNavigatePage } from "~/admin/hooks/useNavigatePage";
 
-const BackButtonWrapper = styled.div`
-    margin-left: -10px;
-`;
-
 export const BackButton = () => {
     const navigate = useNavigatePage();
 
     return (
-        <BackButtonWrapper>
-            <IconButton
-                data-testid="pb-editor-back-button"
-                onClick={navigate.navigateToLatestFolder}
-                icon={<BackIcon />}
-            />
-        </BackButtonWrapper>
+        <IconButton
+            variant={"ghost"}
+            className={"wby-mr-sm-plus"}
+            data-testid="pb-editor-back-button"
+            onClick={navigate.navigateToLatestFolder}
+            icon={<BackIcon />}
+        />
     );
 };
diff --git a/packages/app-page-builder/src/pageEditor/config/TopBar/Title/Styled.ts b/packages/app-page-builder/src/pageEditor/config/TopBar/Title/Styled.ts
deleted file mode 100644
index 9cc99b3970c..00000000000
--- a/packages/app-page-builder/src/pageEditor/config/TopBar/Title/Styled.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import styled from "@emotion/styled";
-import { css } from "emotion";
-
-export const TitleInputWrapper = styled("div")({
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    "> .mdc-text-field--upgraded": {
-        height: 35,
-        marginTop: "0 !important",
-        paddingLeft: 10,
-        paddingRight: 40
-    }
-});
-
-export const TitleWrapper = styled("div")({
-    height: 50,
-    display: "flex",
-    alignItems: "baseline",
-    justifyContent: "flex-start",
-    flexDirection: "column",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    position: "relative",
-    width: "100%",
-    marginLeft: 10
-});
-
-export const PageTitle = styled("div")({
-    fontFamily: "var(--mdc-typography-font-family)",
-    border: "1px solid transparent",
-    fontSize: 20,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    width: "100%",
-    lineHeight: "120%",
-    "&:hover": {
-        border: "1px solid var(--mdc-theme-on-background)"
-    }
-});
-
-export const pageTitleWrapper = css({
-    maxWidth: "calc(100% - 100px)"
-});
-
-export const PageVersion = styled("span")({
-    fontSize: 20,
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    marginLeft: 5,
-    lineHeight: "120%"
-});
-
-export const PageMeta = styled("div")({
-    height: 20,
-    margin: "-2px 2px 2px 2px"
-});
diff --git a/packages/app-page-builder/src/pageEditor/config/TopBar/Title/Title.tsx b/packages/app-page-builder/src/pageEditor/config/TopBar/Title/Title.tsx
index f574e26d516..50d441e164a 100644
--- a/packages/app-page-builder/src/pageEditor/config/TopBar/Title/Title.tsx
+++ b/packages/app-page-builder/src/pageEditor/config/TopBar/Title/Title.tsx
@@ -1,20 +1,10 @@
 import React, { useState, useCallback, SyntheticEvent } from "react";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { Input } from "@webiny/ui/Input";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { Typography } from "@webiny/ui/Typography";
-import {
-    PageMeta,
-    PageTitle,
-    pageTitleWrapper,
-    PageVersion,
-    TitleInputWrapper,
-    TitleWrapper
-} from "./Styled";
 import { useEventActionHandler } from "~/editor/hooks/useEventActionHandler";
 import { usePage } from "~/pageEditor/hooks/usePage";
 import { PageAtomType } from "~/pageEditor/state";
 import { UpdateDocumentActionEvent } from "~/editor/recoil/actions";
+import { Heading, Input, Tooltip } from "@webiny/admin-ui";
 
 declare global {
     interface Window {
@@ -41,7 +31,7 @@ export const Title = () => {
     const handler = useEventActionHandler();
     const [page] = usePage();
     const { showSnackbar } = useSnackbar();
-    const { pageTitle, pageVersion, pageLocked } = extractPageInfo(page);
+    const { pageTitle, pageVersion } = extractPageInfo(page);
     const [editTitle, setEdit] = useState<boolean>(false);
     const [stateTitle, setTitle] = useState<string | null>(null);
     let title = stateTitle === null ? pageTitle : stateTitle;
@@ -102,35 +92,35 @@ export const Title = () => {
     const autoFocus = !window.Cypress;
 
     return editTitle ? (
-        <TitleInputWrapper data-testid="pb-editor-page-title">
+        <div data-testid="pb-editor-page-title">
             <Input
+                size={"md"}
                 autoFocus={autoFocus}
-                fullwidth
                 value={title}
                 onChange={setTitle}
                 onKeyDown={onKeyDown}
                 onBlur={onBlur}
             />
-        </TitleInputWrapper>
+        </div>
     ) : (
-        <TitleWrapper>
-            <PageMeta>
-                <Typography use={"overline"}>
-                    {`(status: ${pageLocked ? "published" : "draft"})`}
-                </Typography>
-            </PageMeta>
-            <div style={{ width: "100%", display: "flex" }}>
-                <Tooltip
-                    className={pageTitleWrapper}
-                    placement={"bottom"}
-                    content={<span>Rename</span>}
-                >
-                    <PageTitle data-testid="pb-editor-page-title" onClick={enableEdit}>
+        <div className={"wby-flex wby-items-center wby-gap-xs wby-w-full"}>
+            <Tooltip
+                side={"bottom"}
+                content={"Rename"}
+                trigger={
+                    <Heading
+                        level={5}
+                        className={
+                            "wby-border-sm wby-border-transparent hover:wby-border-neutral-muted"
+                        }
+                        data-testid="pb-editor-page-title"
+                        onClick={enableEdit}
+                    >
                         {title}
-                    </PageTitle>
-                </Tooltip>
-                <PageVersion>{`(v${pageVersion})`}</PageVersion>
-            </div>
-        </TitleWrapper>
+                    </Heading>
+                }
+            />
+            <div className={"wby-text-neutral-muted"}>(v{pageVersion})</div>
+        </div>
     );
 };
diff --git a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddBlock.tsx b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddBlock.tsx
index 90dadd52692..e1ca02c996c 100644
--- a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddBlock.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddBlock.tsx
@@ -1,23 +1,17 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { ButtonFloating } from "@webiny/ui/Button";
+import { Button } from "@webiny/admin-ui";
 import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { useBlocksBrowser } from "./useBlocksBrowser";
 
-const SIDEBAR_WIDTH = 300;
-const BottomRight = styled("div")({
-    position: "fixed",
-    zIndex: 101,
-    bottom: 20,
-    right: 20 + SIDEBAR_WIDTH
-});
-
 export const AddBlock = () => {
     const { openBrowser } = useBlocksBrowser();
 
     return (
-        <BottomRight>
-            <ButtonFloating onClick={openBrowser} icon={<AddIcon />} />
-        </BottomRight>
+        <Button
+            size={"xl"}
+            className={"wby-fixed wby-z-101 wby-bottom-[20px] wby-right-[calc(340px)]"}
+            onClick={openBrowser}
+            icon={<AddIcon />}
+        />
     );
 };
diff --git a/packages/app-page-builder/src/templateEditor/config/TopBar/BackButton/BackButton.tsx b/packages/app-page-builder/src/templateEditor/config/TopBar/BackButton/BackButton.tsx
index ad2036cf4ac..8a98a62aacb 100644
--- a/packages/app-page-builder/src/templateEditor/config/TopBar/BackButton/BackButton.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/TopBar/BackButton/BackButton.tsx
@@ -1,14 +1,9 @@
 import React, { useCallback } from "react";
-import { css } from "emotion";
 import { useNavigate } from "@webiny/react-router";
-import { IconButton } from "@webiny/ui/Button";
+import { IconButton } from "@webiny/admin-ui";
 import { ReactComponent as BackIcon } from "@webiny/icons/arrow_back.svg";
 import { TopBar } from "~/editor/config/TopBar/TopBar";
 
-const backStyles = css({
-    marginLeft: -10
-});
-
 export function BackButton() {
     const navigate = useNavigate();
 
@@ -19,8 +14,8 @@ export function BackButton() {
     return (
         <>
             <IconButton
+                className={"mr-sm-plus"}
                 data-testid="pb-editor-back-button"
-                className={backStyles}
                 onClick={onClick}
                 icon={<BackIcon />}
             />
diff --git a/packages/ui/src/Grid/Grid.tsx b/packages/ui/src/Grid/Grid.tsx
index 9e4421174c6..a5a721ae2e4 100644
--- a/packages/ui/src/Grid/Grid.tsx
+++ b/packages/ui/src/Grid/Grid.tsx
@@ -87,7 +87,6 @@ export type GridProps = RmwcGridProps & {
 };
 
 /**
- * Use Grid component to display a list of choices, once the handler is triggered.
  * @deprecated This component is deprecated and will be removed in future releases.
  * Please use the `Grid` component from the `@webiny/admin-ui` package instead.
  */
diff --git a/packages/ui/src/Tabs/Tabs.tsx b/packages/ui/src/Tabs/Tabs.tsx
index fa9b77c0d08..c464decd8c9 100644
--- a/packages/ui/src/Tabs/Tabs.tsx
+++ b/packages/ui/src/Tabs/Tabs.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, PropsWithChildren, useCallback, useMemo, useState } from "react";
-import { Tabs as AdminTabs } from "@webiny/admin-ui";
+import { Tabs as AdminTabs, TabsProps as AdminTabsProps } from "@webiny/admin-ui";
 import { TabProps } from "./Tab";
 
 const VALUE_PREFIX = "tab-";
@@ -29,6 +29,10 @@ export type TabsProps = PropsWithChildren<{
      * Tab ID for the testing.
      */
     "data-testid"?: string;
+
+    size?: AdminTabsProps["size"];
+
+    spacing?: AdminTabsProps["spacing"];
 }>;
 
 interface TabItem extends TabProps {
@@ -113,9 +117,9 @@ export const Tabs = ({ value, onActivate, ...props }: TabsProps) => {
                 value={`${VALUE_PREFIX}${activeIndex}`}
                 onValueChange={onValueChange}
                 tabs={newTabs}
-                size={"md"}
+                size={props.size || 'md'}
                 separator={true}
-                spacing={"lg"}
+                spacing={props.spacing || 'lg'}
             />
             <DeprecatedTabsContext.Provider value={context}>
                 {props.children}
diff --git a/todo.md b/todo.md
new file mode 100644
index 00000000000..94a050a9dd5
--- /dev/null
+++ b/todo.md
@@ -0,0 +1,21 @@
+MH
+- headerbar styles in import script!
+- right sidebar
+  - iconpicker
+- z indexes messed up
+
+## backlog
+- see if we can avoid hardcoding of 45px height of the top app bar
+- chevron visible briefly when expanding
+- sidebar rerenders?
+    - layout component not used?
+    - secureRoute wrapping layout also kills sidebar?
+    - HasPermissions instead of SecureRoute helps!
+- HCMS SIDEBAR bug
+- adminConfig APIs are directly using admin-ui packages, they should NOT be (sidebar)
+- Widgets APIs (Pavel)
+- No routes matched location "/" Error Component Stack
+- what's this for? packages/app-apw/src/plugins/cms/MenuGroupRenderer.tsx:11
+- logo.element or logo.src
+- revisit <Menu.User.Link icon={<Menu.User.Link.Icon element={<AccountIcon />} label={"Account settings"} />} API
+- Tenant/Theme remove, use only Theme.Color