diff --git a/package-lock.json b/package-lock.json
index d4f55677..04e446c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3318,12 +3318,12 @@
       }
     },
     "@quarkly/components": {
-      "version": "0.2.50",
-      "resolved": "https://registry.npmjs.org/@quarkly/components/-/components-0.2.50.tgz",
-      "integrity": "sha512-BqwjUvgZKLm40LwjsXrVm6A0ItI3u0F/jsWzQ3MHjKX3vtNOivHDpMjcxk/IHBdWUefyCsnB7FrY3eDslOT3fg==",
+      "version": "0.2.68",
+      "resolved": "https://registry.npmjs.org/@quarkly/components/-/components-0.2.68.tgz",
+      "integrity": "sha512-o/IomgsEaISr1P6EdCDsUZFMSo8FLR4PTbsbxz4j9yRUdse1ZoW3/a4pIFtOoZrcas73PpD3glYQ+BohoP4dKw==",
       "dev": true,
       "requires": {
-        "@quarkly/widgets": "^0.2.50",
+        "@quarkly/widgets": "^0.2.68",
         "@reach/router": "^1.3.4"
       }
     },
diff --git a/package.json b/package.json
index 647bf76b..d0756393 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@quarkly/atomize": "^1.0.8",
-    "@quarkly/components": "^0.2.50",
+    "@quarkly/components": "^0.2.68",
     "@quarkly/sdk": "^0.5.4",
     "@quarkly/theme": "^0.1.3",
     "@quarkly/widgets": "^0.2.68",
diff --git a/preview/docs/Picture.md b/preview/docs/Picture.md
index c9aa2670..99eb678e 100644
--- a/preview/docs/Picture.md
+++ b/preview/docs/Picture.md
@@ -4,7 +4,7 @@ This container component provides an optimized image version for different scree
 
 ## ⚙️ Usage
 
-Add the component to the page, than add an Image and/or Source components (optionally) to it, and see how it works in the preview mode.
+Add the component to the page, than add an Source components (optionally) to it, and see how it works in the preview mode.
 
 ## 🗓 Changelog
 
diff --git a/preview/docs/Vimeo.md b/preview/docs/Vimeo.md
index db998bfa..5c2bb196 100644
--- a/preview/docs/Vimeo.md
+++ b/preview/docs/Vimeo.md
@@ -8,6 +8,12 @@ Use this component to add the Vimeo video player.
 2.  Specify the `Video link or ID` on the Props panel
 3.  See how it works in the preview mode
 
+### Setting up the video player
+
+Some video player settings are supported for Plus or PRO accounts.
+
+Learn more: [Supported Player Parameters](https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters#h_01FNYA7F7GKWE17XDQJPMBC058)
+
 ### Playing in the background
 
 If the `Play in the background` prop is enabled, the video will be played in the background. In this case, all the controls are hidden, automatic playback is enabled, and the video loops.
diff --git a/preview/docs/ru/Picture.md b/preview/docs/ru/Picture.md
index eaa5e011..075a011b 100644
--- a/preview/docs/ru/Picture.md
+++ b/preview/docs/ru/Picture.md
@@ -4,7 +4,7 @@
 
 ## ⚙️ Использование
 
-Добавьте компонент на страницу, поместите в него компоненты `Image` и `Source` (опционально), затем посмотрите как он работает в режиме превью.
+Добавьте компонент на страницу, поместите в него компоненты `Source` (опционально), затем посмотрите как он работает в режиме превью.
 
 ## 🗓 Changelog
 
diff --git a/src/BeforeAfterImage.js b/src/BeforeAfterImage.js
index 0baf825c..ddd46b6f 100644
--- a/src/BeforeAfterImage.js
+++ b/src/BeforeAfterImage.js
@@ -210,7 +210,11 @@ const BeforeAfterImage = ({
                     }}
                 >
                     <Image {...override('Image', 'Before Image')} />
-                    <Text {...override('Label', 'Before Label')} />
+                    <Text
+                        {...override('Label', 'Before Label', {
+                            defaultKey: 'Before Label',
+                        })}
+                    />
                 </Box>
                 <Box
                     {...imageStyles}
@@ -224,7 +228,11 @@ const BeforeAfterImage = ({
                     }}
                 >
                     <Image {...override('Image', 'After Image')} />
-                    <Text {...override('Label', 'After Label')} />
+                    <Text
+                        {...override('Label', 'After Label', {
+                            defaultKey: 'After Label',
+                        })}
+                    />
                 </Box>
                 <Box
                     min-width="0px"
diff --git a/src/BgImageParallax.js b/src/BgImageParallax.js
index aee53e25..969a697b 100644
--- a/src/BgImageParallax.js
+++ b/src/BgImageParallax.js
@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useEffect, useRef } from 'react';
 import atomize from '@quarkly/atomize';
 import { useOverrides } from '@quarkly/components';
 import { Box } from '@quarkly/widgets';
+import ComponentNotice from './ComponentNotice';
 
 const overrides = {
     Bground: {
@@ -132,13 +133,24 @@ const BgImageParallax = ({
     });
 
     return (
-        <Box position="relative" overflow="hidden" {...rest} ref={wrapperRef}>
+        <Box
+            position="relative"
+            overflow="hidden"
+            min-height="32px"
+            {...rest}
+            ref={wrapperRef}
+        >
             <Bground
                 ref={bgroundRef}
                 background={`transparent url(${imageURL}) ${imagePosition} top/${imageSize} ${imageRepeat}`}
                 {...override('Bground')}
             />
-            <Content {...override('Content')}>{children}</Content>
+            <Content {...override('Content')}>
+                {children}
+                {!imageURL && (
+                    <ComponentNotice message="Add Image in the Props panel" />
+                )}
+            </Content>
         </Box>
     );
 };
diff --git a/src/CardFlip/CardFlip.js b/src/CardFlip/CardFlip.js
index 1e34489d..04a1a650 100644
--- a/src/CardFlip/CardFlip.js
+++ b/src/CardFlip/CardFlip.js
@@ -1,7 +1,7 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import { useOverrides } from '@quarkly/components';
-import { Box, Image } from '@quarkly/widgets';
-import { parseTime } from '../utils';
+import { Box, Placeholder } from '@quarkly/widgets';
+import { isEmptyChildren, parseTime } from '../utils';
 
 const overrides = {
     'Card Flip Content': {
@@ -37,17 +37,6 @@ const overrides = {
             position: 'absolute',
         },
     },
-    'Card Flip Item Face': {
-        kind: 'Box',
-    },
-    'Card Flip Item Back': {
-        kind: 'Box',
-        props: {
-            padding: '24px 16px',
-            background: '--color-lightD2',
-            'box-sizing': 'border-box',
-        },
-    },
 };
 
 const flipStyles = {
@@ -83,26 +72,50 @@ const CardFlip = ({
     isFlippedProp,
     ...props
 }) => {
-    const { override, children, rest } = useOverrides(props, overrides);
+    const { override, ChildPlaceholder, rest } = useOverrides(props, overrides);
 
     const [isFlipped, setFlipped] = useState(isFlippedProp);
+    const [isFlipEnd, setFlipEnd] = useState(true);
 
     const flipTrigger = flipTriggerProp === 'click';
 
     const flipDuration = parseTime(flipDurationProp);
 
     const onClickFlip = useCallback(() => {
-        if (flipTrigger) setFlipped((prevFlipped) => !prevFlipped);
+        if (flipTrigger) {
+            setFlipped((prevFlipped) => !prevFlipped);
+            setFlipEnd(false);
+        }
     }, [flipTrigger]);
 
     const onHoverFlip = useCallback(() => {
-        if (!flipTrigger) setFlipped((prevFlipped) => !prevFlipped);
+        if (!flipTrigger) {
+            setFlipped((prevFlipped) => !prevFlipped);
+            setFlipEnd(false);
+        }
     }, [flipTrigger]);
 
     useEffect(() => {
         setFlipped(isFlippedProp);
     }, [isFlippedProp]);
 
+    const boxRef = useRef();
+
+    useEffect(() => {
+        if (!boxRef.current) return;
+        const box = boxRef.current;
+
+        const handle = () => {
+            setFlipEnd(true);
+        };
+
+        box.addEventListener('transitionend', handle);
+
+        return () => {
+            box.removeEventListener('transitionend', handle);
+        };
+    }, []);
+
     return (
         <Box
             height={aspectRatioProp === 'auto' ? '500px' : 'auto'}
@@ -116,6 +129,7 @@ const CardFlip = ({
             {...rest}
         >
             <Box
+                ref={boxRef}
                 transition={`transform ${flipDuration}ms ${timingFunctionProp}`}
                 {...override('Card Flip Content')}
                 {...(isFlipped && flipStyles[flipDirectionProp])}
@@ -126,14 +140,24 @@ const CardFlip = ({
                 }
                 height={aspectRatioProp !== 'auto' ? '0' : '100%'}
             >
-                <Box {...override(`Card Flip Item`, `Card Flip Item Face`)}>
-                    <Image {...override('Card Flip Image')} />
+                <Box
+                    display={isFlipped && isFlipEnd && 'none'}
+                    {...override(`Card Flip Item`, `Card Flip Item Face`)}
+                >
+                    <ChildPlaceholder slot={'Card Flip Item Face'} />
+                    {isEmptyChildren(
+                        override('Card Flip Item Face').children
+                    ) && <Placeholder message="Drop content here" />}
                 </Box>
                 <Box
+                    display={!isFlipped && isFlipEnd && 'none'}
                     {...override(`Card Flip Item`, `Card Flip Item Back`)}
                     {...flipStyles[flipDirectionProp]}
                 >
-                    {children}
+                    <ChildPlaceholder slot={'Card Flip Item Back'} />
+                    {isEmptyChildren(
+                        override('Card Flip Item Back').children
+                    ) && <Placeholder message="Drop content here" />}
                 </Box>
             </Box>
         </Box>
diff --git a/src/Collapse/Collapse.js b/src/Collapse/Collapse.js
index f3503196..2b6f5f05 100644
--- a/src/Collapse/Collapse.js
+++ b/src/Collapse/Collapse.js
@@ -96,6 +96,10 @@ const Collapse = ({
         ref.current.addEventListener('transitionend', handle);
     }, [animFunction, collapsedHeight, destination, duration, handle, mode]);
 
+    const buttonOveride = `Button ${
+        isOpen !== isCollapsing ? ':open' : ':close'
+    }`;
+
     return (
         <Box
             padding="8px"
@@ -103,7 +107,12 @@ const Collapse = ({
             border-radius="4px"
             {...rest}
         >
-            <Button {...override('Button')} onClick={toggleOpen} />
+            <Button
+                {...override('Button', buttonOveride, {
+                    defaultKey: buttonOveride,
+                })}
+                onClick={toggleOpen}
+            />
             <Box
                 ref={ref}
                 {...override(
diff --git a/src/Formspree.js b/src/Formspree.js
index 62c0e257..da016fbb 100644
--- a/src/Formspree.js
+++ b/src/Formspree.js
@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import atomize from '@quarkly/atomize';
-import { Text, Link, Strong } from '@quarkly/widgets';
+import { Text, Strong } from '@quarkly/widgets';
 import { useForm, withForm } from './Form/context';
 
+const AbsoluteLink = atomize.a();
+
 const NoEndPoint = atomize.div`
 	padding: 16px 32px;
 	border: 2px solid;
@@ -86,7 +88,7 @@ const Formspree = (props) => {
             <Wrapper {...rest}>
                 <NoEndPoint>
                     Create a form on{' '}
-                    <Link
+                    <AbsoluteLink
                         color="currentColor"
                         text-decoration="underline"
                         target="_blank"
@@ -94,7 +96,7 @@ const Formspree = (props) => {
                         href="https://formspree.io/"
                     >
                         formspree.io
-                    </Link>{' '}
+                    </AbsoluteLink>{' '}
                     and fill in the <Strong>endpoint</Strong> field on the{' '}
                     <Strong>props panel</Strong>
                 </NoEndPoint>
diff --git a/src/Lottie/Lottie.js b/src/Lottie/Lottie.js
index a9405dbe..230a8692 100644
--- a/src/Lottie/Lottie.js
+++ b/src/Lottie/Lottie.js
@@ -96,7 +96,6 @@ const Lottie = ({
     return (
         <Box
             ref={ref}
-            margin="0 auto"
             outline="none"
             overflow="hidden"
             position={renderer === 'html' && 'relative'}
diff --git a/src/MailChimp/MailChimp.js b/src/MailChimp/MailChimp.js
index e4115728..6de01b34 100644
--- a/src/MailChimp/MailChimp.js
+++ b/src/MailChimp/MailChimp.js
@@ -57,7 +57,7 @@ const MailChimp = ({ url, ...props }) => {
     );
 
     return (
-        <Box width={400} {...rest}>
+        <Box {...rest}>
             {!url ? (
                 <ComponentNotice message="Add your Form URL in the Props panel" />
             ) : (
@@ -70,7 +70,10 @@ const MailChimp = ({ url, ...props }) => {
                         >
                             {children}
                             {isEmptyChildren(children) && (
-                                <Placeholder message="Drop form components here" />
+                                <Placeholder
+                                    message="Drop form components here"
+                                    width="100%"
+                                />
                             )}
                         </Form>
                     )}
diff --git a/src/NetlifyForm/NetlifyForm.js b/src/NetlifyForm/NetlifyForm.js
index 197ced2a..f71bb0c7 100644
--- a/src/NetlifyForm/NetlifyForm.js
+++ b/src/NetlifyForm/NetlifyForm.js
@@ -4,6 +4,8 @@ import { Box, Text, Input } from '@quarkly/widgets';
 import { useOverrides } from '@quarkly/components';
 import { overrides, propInfo, defaultProps } from './props';
 import { useForm, withForm } from '../Form/context';
+import ComponentNotice from '../ComponentNotice';
+import { isEmptyChildren } from '../utils';
 
 const Form = atomize.form();
 
@@ -66,6 +68,9 @@ const NetlifyForm = ({ formName, successMessage, errorMessage, ...props }) => {
                         defaultValue={formName}
                     />
                     {children}
+                    {isEmptyChildren(children) && (
+                        <ComponentNotice message="Drag Input, Textarea, Checkbox or RadioGroup component here" />
+                    )}
                     {error && (
                         <Text {...override('Text', 'Error Text')}>
                             {errorMessage}
diff --git a/src/Picture.js b/src/Picture.js
index c1e5c04d..7f0fd152 100644
--- a/src/Picture.js
+++ b/src/Picture.js
@@ -1,55 +1,43 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import atomize from '@quarkly/atomize';
 import { useOverrides } from '@quarkly/components';
-
-import ComponentNotice from './ComponentNotice';
+import { Image } from '@quarkly/widgets';
 
 const overrides = {
     'Picture Tag': {
         kind: 'Picture Tag',
         props: {
-            width: '100%',
-            height: 'auto',
+            display: 'inline-block',
+        },
+    },
+    Image: {
+        kind: 'Image',
+        props: {
+            src:
+                'https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=200',
         },
     },
 };
 
 const Picture = atomize.picture();
 const Wrapper = atomize.div();
-const Content = atomize.div();
 
-const PictureComponent = ({ children, ...props }) => {
-    const { override, rest } = useOverrides(props, overrides);
-
-    const [isEmpty, setEmpty] = useState(false);
-    const contentRef = useRef(null);
-
-    useEffect(() => {
-        setEmpty(contentRef.current?.innerHTML === '<!--child placeholder-->');
-    }, [children]);
+const PictureComponent = (props) => {
+    const { override, children, rest } = useOverrides(props, overrides);
 
     return (
-        <Wrapper {...rest}>
-            <Picture {...override('Picture Tag')} display={isEmpty && 'none'}>
-                <Content ref={contentRef}>
-                    {React.Children.map(
-                        children,
-                        (child) =>
-                            React.isValidElement(child) &&
-                            React.cloneElement(child, {
-                                container: 'picture',
-                            })
-                    )}
-                </Content>
+        <Wrapper display="inline-block" font-size="0" {...rest}>
+            <Picture {...override('Picture Tag')}>
+                {React.Children.map(
+                    children,
+                    (child) =>
+                        React.isValidElement(child) &&
+                        React.cloneElement(child, {
+                            container: 'picture',
+                        })
+                )}
+                <Image {...override('Image')} />
             </Picture>
-
-            {isEmpty && (
-                <ComponentNotice
-                    message={
-                        'Drag the Image and Source components here (optional)'
-                    }
-                />
-            )}
         </Wrapper>
     );
 };
@@ -62,4 +50,5 @@ export default atomize(PictureComponent)({
         ru:
             'Контейнер для обеспечения оптимальной версии изображения для различных размеров экрана',
     },
+    overrides,
 });
diff --git a/src/Source.js b/src/Source.js
index 809de3fc..f249a1be 100644
--- a/src/Source.js
+++ b/src/Source.js
@@ -34,8 +34,8 @@ const SourceComponent = ({
             src={src}
             srcSet={srcSet}
             type={type}
-            media={container !== 'picture' ? mediaInput || mediaSelect : ''}
-            sizes={container !== 'picture' ? sizes : ''}
+            media={container === 'picture' ? mediaInput || mediaSelect : ''}
+            sizes={container === 'picture' ? sizes : ''}
         />
     ) : (
         <ComponentNotice
diff --git a/src/Vimeo.js b/src/Vimeo.js
index 174e47c1..ff69082b 100644
--- a/src/Vimeo.js
+++ b/src/Vimeo.js
@@ -58,7 +58,7 @@ const VimeoComponent = ({
 
     const dStart = useDebounce(parseFloat(start), 1000);
 
-    const key = `vimeo-${video}${muted}${controls}${playBackground}${showByline}${dStart}${autoplay}${showTitle}${responsive}`;
+    const key = `vimeo-${video}${muted}${controls}${playBackground}${showByline}${dStart}${autoplay}${showPortrait}${showTitle}${responsive}`;
 
     return (
         <Wrapper