diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts b/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts
index 9e28553b265d..fecf729bdf67 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts
@@ -7,19 +7,13 @@ import type { ComputedStyleDecl } from "~/shared/style-object-model";
 import { $computedStyleDeclarations } from "../../shared/model";
 import { sections } from "../sections";
 
-// @todo will be fully deleted https://github.com/webstudio-is/webstudio/issues/4871
-const initialProperties = new Set<CssProperty>([
-  "cursor",
-  "mix-blend-mode",
-  "opacity",
-  "pointer-events",
-  "user-select",
-]);
-
 export const $advancedStyleDeclarations = computed(
   [$computedStyleDeclarations, $settings, $selectedInstance],
   (computedStyleDeclarations, settings, selectedInstance) => {
-    const advancedStyles: Array<ComputedStyleDecl> = [];
+    const advancedStyles = new Map<
+      ComputedStyleDecl["property"],
+      ComputedStyleDecl
+    >();
     // All properties used by the panels except the advanced panel
     const visualProperties = new Set<CssProperty>([]);
     for (const { properties } of sections.values()) {
@@ -37,6 +31,14 @@ export const $advancedStyleDeclarations = computed(
       ) {
         continue;
       }
+      // ignore predefined styles in advanced mode
+      // @todo will be deleted https://github.com/webstudio-is/webstudio/issues/4871
+      if (
+        styleDecl.source.name === "default" &&
+        settings.stylePanelMode === "advanced"
+      ) {
+        continue;
+      }
       const { property, listed } = styleDecl;
       // When property is listed, it was added from advanced panel.
       // If we are in advanced mode, we show them all.
@@ -45,22 +47,10 @@ export const $advancedStyleDeclarations = computed(
         listed ||
         settings.stylePanelMode === "advanced"
       ) {
-        advancedStyles.push(styleDecl);
-      }
-    }
-    // In advanced mode we assume user knows the properties they need, so we don't need to show these.
-    // @todo https://github.com/webstudio-is/webstudio/issues/4871
-    if (settings.stylePanelMode !== "advanced") {
-      for (const property of initialProperties) {
-        const styleDecl = computedStyleDeclarations.find(
-          (styleDecl) => styleDecl.property === property
-        );
-        if (styleDecl) {
-          advancedStyles.push(styleDecl);
-        }
+        advancedStyles.set(styleDecl.property, styleDecl);
       }
     }
 
-    return advancedStyles;
+    return Array.from(advancedStyles.values());
   }
 );
diff --git a/apps/builder/app/builder/features/style-panel/shared/model.tsx b/apps/builder/app/builder/features/style-panel/shared/model.tsx
index 9f846842e0f9..893259bfd7cc 100644
--- a/apps/builder/app/builder/features/style-panel/shared/model.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/model.tsx
@@ -268,6 +268,15 @@ export const $computedStyleDeclarations = computed(
       styleSourceSelections,
       styles,
     });
+    // In advanced mode we assume user knows the properties they need, so we don't need to show these.
+    // @todo will be fully deleted https://github.com/webstudio-is/webstudio/issues/4871
+    definedStyles.push(
+      { property: "cursor" },
+      { property: "mix-blend-mode" },
+      { property: "opacity" },
+      { property: "pointer-events" },
+      { property: "user-select" }
+    );
     const computedStyles = new Map<string, ComputedStyleDecl>();
     for (const { property, listed } of definedStyles) {
       // deduplicate by property name
diff --git a/packages/sdk-components-animation/src/video-animation.template.tsx b/packages/sdk-components-animation/src/video-animation.template.tsx
index 96005b00d479..6a4253df3253 100644
--- a/packages/sdk-components-animation/src/video-animation.template.tsx
+++ b/packages/sdk-components-animation/src/video-animation.template.tsx
@@ -1,13 +1,10 @@
 import { $, type TemplateMeta } from "@webstudio-is/template";
-import { YoutubeIcon } from "@webstudio-is/icons/svg";
 import { animation } from "./shared/proxy";
 
 export const meta: TemplateMeta = {
   category: "animations",
   description: "Video Animation",
   order: 2,
-  icon: YoutubeIcon,
-
   template: (
     <animation.VideoAnimation>
       <$.Video
diff --git a/packages/sdk-components-animation/src/video-animation.ws.ts b/packages/sdk-components-animation/src/video-animation.ws.ts
index 3c7ac8dcfa2e..1f2a94cf8306 100644
--- a/packages/sdk-components-animation/src/video-animation.ws.ts
+++ b/packages/sdk-components-animation/src/video-animation.ws.ts
@@ -1,15 +1,18 @@
 import { PlayIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
 import { props } from "./__generated__/video-animation.props";
+import { div } from "@webstudio-is/sdk/normalize.css";
 
 export const meta: WsComponentMeta = {
   icon: PlayIcon,
   label: "Video Animation",
-  order: 3,
   contentModel: {
     category: "none",
     children: ["instance"],
   },
+  presetStyle: {
+    div,
+  },
 };
 
 export const propsMeta: WsComponentPropsMeta = {