diff --git a/README.md b/README.md
index f8d6f74bd2..c701acc0a9 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ https://github.com/surveyjs/survey-creator/assets/102306951/afb8a75d-921e-4e5f-8
 - [Angular](https://surveyjs.io/survey-creator/documentation/get-started-angular)
 - [Vue](https://surveyjs.io/survey-creator/documentation/get-started-vue)
 - [React](https://surveyjs.io/survey-creator/documentation/get-started-react)
-- [HTML/CSS/JavaScript](/survey-creator/documentation/get-started-html-css-javascript)
+- [HTML/CSS/JavaScript](https://surveyjs.io/survey-creator/documentation/get-started-html-css-javascript)
 
 ## Resources
 
diff --git a/devops-visual-regression-tests-v2.yml b/devops-visual-regression-tests-v2.yml
new file mode 100644
index 0000000000..1f5d2a3167
--- /dev/null
+++ b/devops-visual-regression-tests-v2.yml
@@ -0,0 +1,339 @@
+# Node.js
+# Build a general Node.js project with npm.
+# Add steps that analyze code, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
+
+resources:
+  repositories:
+    - repository: EmptyRepo
+      type: github
+      endpoint: dmitrykurmanov:admin
+      name: surveyjs/azure-pipelines-repo-dont-remove-please
+
+trigger:
+  batch: true
+  branches:
+    exclude:
+    - master
+  tags:
+    exclude:
+      - v*.*.*
+
+pool:
+  vmImage: 'windows-latest'
+
+jobs:
+
+- job: CreatorV2Core
+  steps:
+  - checkout: self
+  - checkout: EmptyRepo
+    persistCredentials: true
+    clean: true
+
+  - task: NodeTool@0
+    inputs:
+      versionSpec: '16.x'
+    displayName: 'Install Node.js'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: "$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core/"
+      Contents: "package.json"
+      TargetFolder: "$(Build.SourcesDirectory)/Temp/"
+      OverWrite: true
+    displayName: "Copy package.json for cache key"
+
+  - task: Cache@2
+    inputs:
+      key: 'npm-cache-creator-core | $(Build.SourcesDirectory)/Temp/package.json'
+      path: $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core/node_modules
+      cacheHitVar: NPM_CACHE_RESTORED
+    displayName: Cache NPM Core
+
+  - task: DownloadBuildArtifacts@0
+    inputs:
+      buildType: 'specific'
+      project: 'af2804d2-859a-4705-9ef5-cdf46d1d5d4f'
+      pipeline: '56'
+      specificBuildWithTriggering: true
+      buildVersionToDownload: 'latest'
+      downloadType: 'single'
+      artifactName: 'SurveyJSLibraryBuildCoreAngularJquery'
+      downloadPath: '$(System.ArtifactsDirectory)'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(System.ArtifactsDirectory)/SurveyJSLibraryBuildCoreAngularJquery/packages'
+      Contents: '**'
+      TargetFolder: '$(Build.SourcesDirectory)/survey-library/build'
+      OverWrite: true
+
+  - task: Npm@1
+    displayName: 'Npm install survey-creator-core'
+    inputs:
+      command: install
+      verbose: false
+      workingDir: $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core
+    condition: ne(variables.NPM_CACHE_RESTORED, 'true')
+
+  # update 'file' npm dependencies in case of cache
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: $(Build.SourcesDirectory)/survey-library/build/survey-core
+      TargetFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core/node_modules/survey-core'
+      OverWrite: true
+    condition: ne(variables.NPM_CACHE_RESTORED, 'false')
+    displayName: 'copy survey-core in case of npm cache'
+  # EO update 'file' npm dependencies in case of cache
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core
+      npm run remove-package-lock
+    displayName: 'npm run remove-package-lock'
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core
+      npm run build:themes
+    displayName: 'Build Creator V2 Core themes'
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core
+      npm run build:i18n
+    displayName: 'Build Creator V2 Core i18n'
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core
+      npm run build
+    displayName: 'Build Creator V2 Core'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core/build'
+      targetFolder: $(Build.ArtifactStagingDirectory)/SurveyJSCreatorV2Build/build/survey-creator-core
+
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: '$(Build.ArtifactStagingDirectory)/SurveyJSCreatorV2Build/build/survey-creator-core'
+      ArtifactName: 'SurveyJSCreatorV2Build-VRT-Core-$(Build.BuildId)'
+      publishLocation: 'Container'  
+
+- job: CreatorV2React
+  dependsOn: CreatorV2Core
+  steps:
+  - checkout: self
+  - checkout: EmptyRepo
+    persistCredentials: true
+    clean: true
+
+  - task: PowerShell@2
+    displayName: 'update Google Chrome to latest'
+    inputs:
+      targetType: 'inline'
+      script: '$Path = $env:TEMP; $Installer = ''chrome_installer.exe''; Invoke-WebRequest -Uri ''http://dl.google.com/chrome/install/375.126/chrome_installer.exe'' -OutFile $Path\$Installer; Start-Process -FilePath $Path\$Installer -Args ''/silent /install'' -Verb RunAs -Wait; Remove-Item -Path $Path\$Installer'
+
+  - task: NodeTool@0
+    inputs:
+      versionSpec: '16.x'
+    displayName: 'Install Node.js'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: "$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react/"
+      Contents: "package.json"
+      TargetFolder: "$(Build.SourcesDirectory)/Temp/react/"
+      OverWrite: true
+    displayName: "Copy package.json for cache key (react)"
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: "$(Build.SourcesDirectory)/survey-creator/"
+      Contents: "package.json"
+      TargetFolder: "$(Build.SourcesDirectory)/Temp/root/"
+      OverWrite: true
+    displayName: "Copy package.json for cache key (root)"
+  - task: Cache@2
+    inputs:
+      key: 'npm-cache-creator-react | $(Build.SourcesDirectory)/Temp/react/package.json'
+      path: $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react/node_modules
+      cacheHitVar: NPM_CACHE_RESTORED
+    displayName: Cache NPM
+
+  - task: Cache@2
+    inputs:
+      key: 'npm-cache-creator-root | $(Build.SourcesDirectory)/Temp/root/package.json'
+      path: $(Build.SourcesDirectory)/survey-creator/node_modules
+      cacheHitVar: NPM_CACHE_RESTORED_ROOT
+    displayName: Cache NPM
+
+  - task: DownloadBuildArtifacts@0
+    inputs:
+      buildType: 'specific'
+      project: 'af2804d2-859a-4705-9ef5-cdf46d1d5d4f'
+      pipeline: '56'
+      specificBuildWithTriggering: true
+      buildVersionToDownload: 'latest'
+      downloadType: 'single'
+      artifactName: 'SurveyJSLibraryBuildReact'
+      downloadPath: '$(System.ArtifactsDirectory)'
+
+  - task: DownloadBuildArtifacts@0
+    inputs:
+      buildType: 'specific'
+      project: 'af2804d2-859a-4705-9ef5-cdf46d1d5d4f'
+      pipeline: '56'
+      specificBuildWithTriggering: true
+      buildVersionToDownload: 'latest'
+      downloadType: 'single'
+      artifactName: 'SurveyJSLibraryBuildCoreAngularJquery'
+      downloadPath: '$(System.ArtifactsDirectory)'
+
+  
+  - task: DownloadBuildArtifacts@0
+    inputs:
+      buildType: 'current'
+      downloadType: 'single'
+      artifactName: 'SurveyJSCreatorV2Build-VRT-Core-$(Build.BuildId)'
+      downloadPath: '$(System.ArtifactsDirectory)'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(System.ArtifactsDirectory)/SurveyJSLibraryBuildCoreAngularJquery/packages'
+      Contents: '**'
+      TargetFolder: '$(Build.SourcesDirectory)/survey-library/build'
+      OverWrite: true
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(System.ArtifactsDirectory)/SurveyJSLibraryBuildReact/packages'
+      Contents: '**'
+      TargetFolder: '$(Build.SourcesDirectory)/survey-library/build'
+      OverWrite: true
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-library/build/survey-react-ui
+      sed -i 's/"survey-core": .*"/"survey-core": "latest"/g' package.json
+    displayName: 'Change survey-core dependency version from release next ver to local dependency'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: $(System.ArtifactsDirectory)/SurveyJSCreatorV2Build-VRT-Core-$(Build.BuildId)
+      TargetFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-core/build'
+  
+  - task: Npm@1
+    displayName: 'Npm install root'
+    inputs:
+      command: install
+      verbose: false
+      workingDir: $(Build.SourcesDirectory)/survey-creator
+    condition: ne(variables.NPM_CACHE_RESTORED_ROOT, 'true')
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react
+      npx puppeteer browsers install chrome
+    displayName: "install chrome"
+  
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator
+      npm run lint
+    displayName: 'check lint'
+  
+  - task: Npm@1
+    displayName: 'Npm install survey-creator-react'
+    inputs:
+      command: install
+      verbose: false
+      workingDir: $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react
+    condition: ne(variables.NPM_CACHE_RESTORED, 'true')
+
+  - task: DownloadBuildArtifacts@0
+    inputs:
+      buildType: 'specific'
+      project: 'af2804d2-859a-4705-9ef5-cdf46d1d5d4f'
+      pipeline: '56'
+      specificBuildWithTriggering: true
+      buildVersionToDownload: 'latest'
+      downloadType: 'single'
+      artifactName: 'SurveyJSLibraryBuildCoreAngularJquery'
+      downloadPath: '$(System.ArtifactsDirectory)'
+
+  # update 'file' npm dependencies in case of cache
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: $(System.ArtifactsDirectory)/SurveyJSLibraryBuildCoreAngularJquery/packages/survey-core
+      TargetFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react/node_modules/survey-core'
+      OverWrite: true
+    condition: ne(variables.NPM_CACHE_RESTORED, 'false')
+    displayName: 'copy survey-core in case of npm cache'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: $(Build.SourcesDirectory)/survey-library/build/survey-react-ui
+      TargetFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react/node_modules/survey-react-ui'
+      OverWrite: true
+    condition: ne(variables.NPM_CACHE_RESTORED, 'false')
+    displayName: 'copy survey-react-ui in case of npm cache'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: $(System.ArtifactsDirectory)/SurveyJSCreatorV2Build-VRT-Core-$(Build.BuildId)
+      TargetFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react/node_modules/survey-creator-core'
+      OverWrite: true
+    condition: ne(variables.NPM_CACHE_RESTORED, 'false')
+    displayName: 'copy survey-creator-core in case of npm cache'
+  # EO update 'file' npm dependencies in case of cache
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react
+      npm run remove-package-lock
+    displayName: 'npm run remove-package-lock'
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(System.ArtifactsDirectory)/SurveyJSLibraryBuildCoreAngularJquery/packages/survey-core'
+      Contents: '**'
+      TargetFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react/node_modules/survey-core'
+      OverWrite: true
+    displayName: 'copy build from library for f-f tests'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(System.ArtifactsDirectory)/SurveyJSLibraryBuildReact/packages/survey-react-ui'
+      Contents: '**'
+      TargetFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react/node_modules/survey-react-ui'
+      OverWrite: true
+    displayName: 'copy build from library for f-f tests'
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react/node_modules/@types'
+      Contents: '**'
+      TargetFolder: '$(Build.SourcesDirectory)/survey-library/node_modules/@types'
+      OverWrite: true
+    displayName: 'copy @types into library directory'
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react
+      npm run build
+    displayName: 'Build CreatorV2 React'
+
+  - script: |
+      cd $(Build.SourcesDirectory)/survey-creator/packages/survey-creator-react
+      npm run vrt:v2:ci
+    displayName: 'Visual Regression Tests V2 Creator React'
+  
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(Build.SourcesDirectory)/survey-creator/visualRegressionTests-V2'
+      Contents: '**'
+      TargetFolder: '$(Build.ArtifactStagingDirectory)/Creator_React_VRT-V2'
+      OverWrite: true
+    condition: always()
+    displayName: 'copy vrt v2 react artifacts'
+  
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: '$(Build.ArtifactStagingDirectory)/Creator_React_VRT-V2/'
+      ArtifactName: 'Creator_React_VRT-V2'
+      publishLocation: 'Container'
+    condition: always()
+    displayName: 'publish vrt v2 react artifacts'
\ No newline at end of file
diff --git a/functionalTests/designer/add-new-question.ts b/functionalTests/designer/add-new-question.ts
index bcce2a348d..252a468b3c 100644
--- a/functionalTests/designer/add-new-question.ts
+++ b/functionalTests/designer/add-new-question.ts
@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON } from "../helper";
+import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON, getQuestionBarItemByTitle } from "../helper";
 
 const title = "Add new question";
 
@@ -137,8 +137,8 @@ test("Add New Question with sub type", async t => {
     .wait(400)
     .click(getListItemByText("Stars").nth(1))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Rating Scale")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Stars");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Rating Scale")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Stars");
 
   let expectedJson = {
     "logoPosition": "right",
@@ -159,13 +159,13 @@ test("Add New Question with sub type", async t => {
   await t.expect(resultJson).eql(expectedJson);
 
   await t
-    .click(getBarItemByTitle("Rating Scale"))
+    .click(getQuestionBarItemByTitle("Rating Scale"))
     .hover(getListItemByText("Single-Line Input").filterVisible())
     .wait(400)
     .click(getListItemByText("Password").nth(1))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Single-Line Input")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Password");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Single-Line Input")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Password");
 
   expectedJson = <any>{
     "logoPosition": "right",
@@ -186,13 +186,13 @@ test("Add New Question with sub type", async t => {
   await t.expect(resultJson).eql(expectedJson);
 
   await t
-    .click(getBarItemByTitle("Single-Line Input"))
+    .click(getQuestionBarItemByTitle("Single-Line Input"))
     .hover(getListItemByText("Single-Line Input").filterVisible())
     .wait(400)
     .click(getListItemByText("Rating Scale"))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Rating Scale")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Labels");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Rating Scale")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Labels");
 
   expectedJson = <any>{
     "logoPosition": "right",
diff --git a/functionalTests/designer/creator.ts b/functionalTests/designer/creator.ts
index 3acc0b6d57..a0e142de2e 100644
--- a/functionalTests/designer/creator.ts
+++ b/functionalTests/designer/creator.ts
@@ -71,27 +71,27 @@ test("Keyboard tab navigation between questions", async (t) => {
     .click(Selector(".sv-string-editor").withText("question2"))
     .expect(Selector(".sv-string-editor").withText("question2").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Delete").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Delete").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Required").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Required").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Duplicate").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Duplicate").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Text").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Text").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Single-Line Input").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Single-Line Input").focused).ok()
     .pressKey("shift+tab")
     .expect(Selector(".sv-string-editor").withText("question1").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Single-Line Input").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Single-Line Input").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Text").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Text").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Duplicate").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Duplicate").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Required").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Required").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Delete").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Delete").focused).ok()
     .pressKey("tab")
     .expect(Selector(".sv-string-editor").withText("question2").focused).ok();
 });
diff --git a/functionalTests/designer/hovers.ts b/functionalTests/designer/hovers.ts
index 50f62ca39e..d0416790d3 100644
--- a/functionalTests/designer/hovers.ts
+++ b/functionalTests/designer/hovers.ts
@@ -117,7 +117,7 @@ test("Question hover and events", async t => {
   await t
     .maximizeWindow();
   const questionTitle = Selector(".svc-string-editor").withText("string_editor");
-  const action = Selector(".svc-tab-designer .svc-question__adorner.svc-hovered .sv-action-bar-item[title=Delete]");
+  const action = Selector(".svc-tab-designer .svc-question__adorner.svc-hovered .svc-survey-element-toolbar__item[title=Delete]");
   await t
     .hover(questionTitle, { offsetX: 5, offsetY: 5 })
     .wait(300)
diff --git a/functionalTests/designer/question-wrapper.ts b/functionalTests/designer/question-wrapper.ts
index 030debed2a..5d6237939a 100644
--- a/functionalTests/designer/question-wrapper.ts
+++ b/functionalTests/designer/question-wrapper.ts
@@ -163,13 +163,13 @@ test("Single input question wrapper action change require", async (t) => {
   let title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1")
-    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).notOk()
+    .expect(requiredActionButton.hasClass("svc-survey-element-toolbar__item--active")).notOk()
 
     .click(requiredActionButton);
   title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1 *")
-    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).ok();
+    .expect(requiredActionButton.hasClass("svc-survey-element-toolbar__item--active")).ok();
 });
 
 test("Single input question wrapper action delete", async (t) => {
@@ -243,9 +243,9 @@ test("Rating question required property", async (t) => {
     .hover(getToolboxItemByText("Rating Scale"))
     .click(getToolboxItemByText("Rating Scale"))
     .expect(isrequiredButton.visible).ok()
-    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("sv-action-bar-item--active")
+    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("svc-survey-element-toolbar__item--active")
     .click(isrequiredButton)
-    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("sv-action-bar-item--active");
+    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("svc-survey-element-toolbar__item--active");
 });
 
 fixture`${title}`.page`${urlDropdownCollapseView}`.beforeEach(async (t) => {
@@ -377,7 +377,7 @@ test("No tab stop in dynamic panel", async (t) => {
     .expect(Selector(".svc-question__content--panel .svc-action-button").withText("Add Question").focused).ok()
     .pressKey("tab")
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--panel .sv-action-bar-item").withText("Panel").focused).ok();
+    .expect(Selector(".svc-question__content--panel .svc-survey-element-toolbar__item").withText("Panel").focused).ok();
 });
 
 test("Question adorner - collapse button in differen modes", async (t) => {
diff --git a/functionalTests/designer/responsiveness.ts b/functionalTests/designer/responsiveness.ts
index a6ad2a146b..169df6fd90 100644
--- a/functionalTests/designer/responsiveness.ts
+++ b/functionalTests/designer/responsiveness.ts
@@ -195,7 +195,7 @@ test("property grid for mobile devices", async (t) => {
 
     .click(Selector(".svd-grid-hide"))
     .click(getAddNewQuestionButton())
-    .click(getBarItemByTitle("Open settings").filterVisible().nth(0))
+    .click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible().nth(0))
     .expect(Selector(selectedObjectTextSelector).innerText).eql("question1")
 
     .resizeWindow(1920, 900)
@@ -245,17 +245,13 @@ test("test tab for mobile devices", async (t) => {
     .expect(creatorFooterToolbarActions.nth(1).id).eql("svd-preview")
     .expect(creatorFooterToolbarActions.nth(2).id).eql("prevPage")
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(true)
-    //.expect(creatorFooterToolbarActions.nth(2).hasClass("sv-action-bar-item--secondary")).notOk()
     .expect(creatorFooterToolbarActions.nth(3).id).eql("nextPage")
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(false)
-    //.expect(creatorFooterToolbarActions.nth(3).hasClass("sv-action-bar-item--secondary")).ok()
     .expect(creatorFooterToolbarActions.nth(4).id).eql("showInvisible")
 
     .click(creatorFooterToolbarActions.nth(3))
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(false)
-    //.expect(creatorFooterToolbarActions.nth(2).hasClass("sv-action-bar-item--secondary")).ok()
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(true)
-    //.expect(creatorFooterToolbarActions.nth(3).hasClass("sv-action-bar-item--secondary")).notOk()
 
     .resizeWindow(1920, 900)
     .expect(testTabToolbar.exists).ok()
@@ -295,10 +291,10 @@ test("Property grid editor popup", async (t) => {
     .expect(Selector(".sv-popup--modal").visible).ok()
     .click(Selector("button").withExactText("Cancel"))
     .resizeWindow(380, 600)
-    .click(Selector(".sv-action-bar-item[title=\"Open settings\"]").filterVisible())
+    .click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
     .click(Selector(".svd-grid-hide"))
     .click(question1, { offsetX: 5, offsetY: 5 })
-    .click(Selector(".svc-question__content-actions .sv-action-bar-item[title=\"Open settings\"]").filterVisible())
+    .click(Selector(".svc-question__content-actions .svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
     .click(Selector("span").withExactText("Set Default Answer"))
     .expect(Selector(".sv-popup--overlay").visible).ok();
 });
diff --git a/functionalTests/designer/surface.ts b/functionalTests/designer/surface.ts
index ced35609e0..a435d972e3 100644
--- a/functionalTests/designer/surface.ts
+++ b/functionalTests/designer/surface.ts
@@ -390,9 +390,9 @@ test("Check page adorner state is restored after shrink and stretch", async (t)
   };
   await setJSON(json);
   await t.click(".svc-page", { offsetX: 3, offsetY: 3 });
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
   await t.resizeWindow(500, 1080);
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).notOk();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).notOk();
   await t.resizeWindow(1920, 1080);
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
 });
\ No newline at end of file
diff --git a/functionalTests/designer/toolbox.ts b/functionalTests/designer/toolbox.ts
index b0dbd3b386..ad18ea5f65 100644
--- a/functionalTests/designer/toolbox.ts
+++ b/functionalTests/designer/toolbox.ts
@@ -338,7 +338,7 @@ test("toolbar responsiveness in compact mode", async (t) => {
     .expect(Selector(".svc-toolbox__category>.svc-toolbox__tool").count).eql(22)
 
     .click(".svc-question__content--text", { offsetX: 200, offsetY: 20 })
-    .click(Selector(".sv-action-bar-item__title").withText("Save as Toolbox Item"))
+    .click(Selector(".svc-survey-element-toolbar-item__title").withText("Save as Toolbox Item"))
 
     .expect(Selector(".svc-toolbox .sv-dots__item").visible).ok()
     .expect(Selector(".svc-toolbox__container").clientHeight).lte(510)
diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts
index 215437304b..db6e760a32 100644
--- a/functionalTests/helper.ts
+++ b/functionalTests/helper.ts
@@ -119,6 +119,9 @@ export function getPropertyGridCategory(categoryName) {
 export function getBarItemByTitle(text: string) {
   return Selector(".sv-action-bar-item[title=\"" + text + "\"]");
 }
+export function getQuestionBarItemByTitle(text: string) {
+  return Selector(".svc-survey-element-toolbar__item[title=\"" + text + "\"]");
+}
 export function getListItemByText(text) {
   return Selector(".sv-popup__content .sv-list .sv-list__item").withText(text).filterVisible();
 }
diff --git a/packages/survey-creator-angular/src/add-question-type-selector.component.html b/packages/survey-creator-angular/src/add-question-type-selector.component.html
index a40569c0ff..a2318d2e61 100644
--- a/packages/survey-creator-angular/src/add-question-type-selector.component.html
+++ b/packages/survey-creator-angular/src/add-question-type-selector.component.html
@@ -1,8 +1,8 @@
 <ng-template #template>
   <button type="button" [key2click] (click)="selectQuestionType($event)" [attr.title]="questionTypeSelectorModel.title"
     [attr.aria-label]="questionTypeSelectorModel.title" class="svc-element__question-type-selector">
-    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName" [size]="24"
-      sv-ng-svg-icon></svg>
+    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName"
+      [size]="'auto'" sv-ng-svg-icon></svg>
     <sv-ng-popup *ngIf="renderPopup" [popupModel]="questionTypeSelectorModel.popupModel"></sv-ng-popup>
   </button>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/add-question.component.html b/packages/survey-creator-angular/src/add-question.component.html
index e371edad46..12f19c5fd8 100644
--- a/packages/survey-creator-angular/src/add-question.component.html
+++ b/packages/survey-creator-angular/src/add-question.component.html
@@ -3,7 +3,7 @@
     (click)="addNewQuestion($event)"
     (mouseover)="adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)"
     data-bind="clickBubble: false">
-    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24" sv-ng-svg-icon></svg>
+    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
     <span class="svc-add-new-item-button__text">
       {{ adorner.addNewQuestionText }}
     </span>
diff --git a/packages/survey-creator-angular/src/adorners/image-item-value.component.html b/packages/survey-creator-angular/src/adorners/image-item-value.component.html
index 56037b5995..c6e09420db 100644
--- a/packages/survey-creator-angular/src/adorners/image-item-value.component.html
+++ b/packages/survey-creator-angular/src/adorners/image-item-value.component.html
@@ -14,17 +14,18 @@
         <span *ngIf="adorner.isDraggable && adorner.canRenderControls"
           class="svc-context-button svc-image-item-value-controls__drag-area-indicator"
           (pointerdown)="adorner.onPointerDown($event)" [attr.title]="undefined" [attr.aria-label]="undefined">
-          <svg [iconName]="'icon-drag-24x24'" [size]="24" sv-ng-svg-icon></svg>
+          <svg [iconName]="'icon-drag-24x24'" [size]="'auto'" sv-ng-svg-icon></svg>
         </span>
         <div *ngIf="adorner.canRenderControls" class="svc-context-container svc-image-item-value-controls">
           <ng-container *ngIf="adorner.allowRemove && !adorner.isUploading">
             <span class="svc-context-button" (click)="adorner.chooseFile(adorner)" [key2click] [attr.title]="undefined"
               [attr.aria-label]="undefined">
-              <svg role="button" [iconName]="'icon-choosefile'" [size]="24" [title]="adorner.selectFileTitle" sv-ng-svg-icon></svg>
+              <svg role="button" [iconName]="'icon-choosefile'" [size]="'auto'" [title]="adorner.selectFileTitle" sv-ng-svg-icon></svg>
             </span>
             <span class="svc-context-button svc-context-button--danger" (click)="adorner.remove(adorner)" [key2click]
               [attr.title]="undefined" [attr.aria-label]="undefined">
-              <svg role="button" [iconName]="'icon-delete'" [size]="24" [title]="adorner.removeFileTitle" sv-ng-svg-icon></svg>
+              <svg role="button" [iconName]="'icon-delete'" [size]="'auto'" [title]="adorner.removeFileTitle"
+                sv-ng-svg-icon></svg>
             </span>
           </ng-container>
         </div>
@@ -48,7 +49,7 @@
           <span class="svc-context-button svc-image-item-value-controls__add"
             *ngIf="adorner.allowAdd && !adorner.isUploading" [key2click] (click)="adorner.chooseNewFile(adorner)"
             [attr.title]="undefined" [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-add-lg'" [size]="24" sv-ng-svg-icon [title]="adorner.addFileTitle"></svg>
+            <svg [iconName]="'icon-add-lg'" [size]="'auto'" sv-ng-svg-icon [title]="adorner.addFileTitle"></svg>
           </span>
         </div>
       </ng-container>
diff --git a/packages/survey-creator-angular/src/adorners/item-value.component.html b/packages/survey-creator-angular/src/adorners/item-value.component.html
index 595eb92483..88e96dd064 100644
--- a/packages/survey-creator-angular/src/adorners/item-value.component.html
+++ b/packages/survey-creator-angular/src/adorners/item-value.component.html
@@ -6,7 +6,7 @@
     <div class="svc-item-value__ghost"></div>
     <div class="svc-item-value-controls">
       <span *ngIf="adorner.isDraggable" class="svc-item-value-controls__button svc-item-value-controls__drag">
-        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-24x24'" [size]="24"
+        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-24x24'" [size]="'auto'"
           [attr.title]="adorner.dragTooltip" sv-ng-svg-icon></svg>
       </span>
       <span *ngIf="adorner.allowAdd" class="svc-item-value-controls__button svc-item-value-controls__add" [key2click]
diff --git a/packages/survey-creator-angular/src/adorners/matrix-cell.component.html b/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
index 12bd370f9b..6fb29dfda8 100644
--- a/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
+++ b/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
@@ -5,8 +5,9 @@
     <div class="svc-matrix-cell--selected" [class.svc-visible]="adorner.isSelected"></div>
     <ng-container *ngTemplateOutlet="contentTempl"></ng-container>
     <div *ngIf="isSupportCellEditor" class="svc-matrix-cell__question-controls">
-      <span class="svc-matrix-cell__question-controls-button" (click)="adorner.editQuestion(adorner, $event)" [key2click]>
-        <svg [iconName]="'icon-edit'" [size]="24" [size]="24" sv-ng-svg-icon></svg>
+      <span class="svc-matrix-cell__question-controls-button svc-context-button"
+        (click)="adorner.editQuestion(adorner, $event)" [key2click]>
+        <svg [iconName]="'icon-edit'" [size]="'auto'" [size]="'auto'" sv-ng-svg-icon></svg>
       </span>
     </div>
   </div>
diff --git a/packages/survey-creator-angular/src/adorners/question-image.component.html b/packages/survey-creator-angular/src/adorners/question-image.component.html
index 3db77b1214..e017013a51 100644
--- a/packages/survey-creator-angular/src/adorners/question-image.component.html
+++ b/packages/survey-creator-angular/src/adorners/question-image.component.html
@@ -4,7 +4,7 @@
       <input type="file" aria-hidden="true" tabindex="-1" [accept]="adorner.acceptedTypes"
         class="svc-choose-file-input" />
       <span class="svc-context-button" [key2click] [attr.title]="undefined" [attr.aria-label]="undefined">
-        <svg [iconName]="'icon-choosefile'" [size]="24" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
+        <svg [iconName]="'icon-choosefile'" [size]="'auto'" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
       </span>
     </ng-container>
   </div>
diff --git a/packages/survey-creator-angular/src/components/question-error.component.html b/packages/survey-creator-angular/src/components/question-error.component.html
index 0e5e5dbf76..0aaf80df21 100644
--- a/packages/survey-creator-angular/src/components/question-error.component.html
+++ b/packages/survey-creator-angular/src/components/question-error.component.html
@@ -1,5 +1,5 @@
 <div>
-  <svg [class]="cssClasses.error.icon" [iconName]="('icon-alert_24x24')" [size]="24" sv-ng-svg-icon></svg>
+  <svg [class]="cssClasses.error.icon" [iconName]="('icon-alert_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
   <span [class]="cssClasses ? cssClasses.error.item : 'panel-error-item'" [model]="error.locText" sv-ng-string>
   </span>
 </div>
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/header/logo-image.component.html b/packages/survey-creator-angular/src/header/logo-image.component.html
index 5a7d8828a7..9efe7f9a7f 100644
--- a/packages/survey-creator-angular/src/header/logo-image.component.html
+++ b/packages/survey-creator-angular/src/header/logo-image.component.html
@@ -15,11 +15,11 @@
         <div class="svc-context-container svc-logo-image-controls">
           <span class="svc-context-button" (click)="model.chooseFile(model)" [key2click] [attr.title]="undefined"
             [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-choosefile'" [size]="24" sv-ng-svg-icon></svg>
+            <svg [iconName]="'icon-choosefile'" [size]="'auto'" sv-ng-svg-icon></svg>
           </span>
           <span class="svc-context-button svc-context-button--danger" (click)="model.remove(model)" [key2click]
             [attr.title]="undefined" [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-clear'" [size]="24" sv-ng-svg-icon></svg>
+            <svg [iconName]="'icon-clear'" [size]="'auto'" sv-ng-svg-icon></svg>
           </span>
         </div>
         <sv-logo-image [data]="survey"></sv-logo-image>
diff --git a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
index 141076c7fd..b1eb6ef05e 100644
--- a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
+++ b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
@@ -2,7 +2,7 @@
   <div class="svc-page-navigator" #container [visible]="model.visible">
       <div class="svc-page-navigator__selector"
           (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__selector--opened]="model.isPopupOpened">
-          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="24" sv-ng-svg-icon></svg>
+          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="'auto'" sv-ng-svg-icon></svg>
           <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
       </div>
       <div>
diff --git a/packages/survey-creator-angular/src/page.component.html b/packages/survey-creator-angular/src/page.component.html
index c789b33fbb..79826c0c13 100644
--- a/packages/survey-creator-angular/src/page.component.html
+++ b/packages/survey-creator-angular/src/page.component.html
@@ -1,12 +1,12 @@
-<div *ngIf="model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)" class="svc-page__content"
-  [class]="adorner.css" [key2click] (click)="adorner.select(adorner, $event)" (dblclick)="adorner.dblclick($event)"
+<div *ngIf="model && adorner" class="svc-page__content" [class]="adorner.css" [key2click]
+  (click)="adorner.select(adorner, $event)" (dblclick)="adorner.dblclick($event)"
   (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.target)"
   [id]="adorner.page.id" [attr.data-sv-drop-target-survey-page]="adorner.dropTargetName" #container>
   <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
   <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
   <div *ngIf="adorner.allowDragging && !adorner.isGhost" class="svc-question__drag-area"
     (pointerdown)="adorner.onPointerDown($event)">
-    <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+    <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
       sv-ng-svg-icon></svg>
     <div class="svc-page__content-actions">
       <sv-action-bar [model]="adorner.actionContainer"></sv-action-bar>
diff --git a/packages/survey-creator-angular/src/page.component.ts b/packages/survey-creator-angular/src/page.component.ts
index 0c4a5e3564..e02160dfcb 100644
--- a/packages/survey-creator-angular/src/page.component.ts
+++ b/packages/survey-creator-angular/src/page.component.ts
@@ -13,7 +13,7 @@ export class PageDesignerComponent extends CreatorModelComponent<PageAdorner> {
   @Input() model!: PageModel;
   @Input() survey!: SurveyModel;
   @Input() creator!: SurveyCreatorModel;
-  @Input() isGhost?: boolean;
+  @Input() isGhost!: boolean;
   @ViewChild("container", { read: ElementRef }) container!: ElementRef<HTMLDivElement>
   public adorner!: PageAdorner;
   protected createModel(): void {
@@ -22,6 +22,13 @@ export class PageDesignerComponent extends CreatorModelComponent<PageAdorner> {
     }
     if (this.model) {
       this.adorner = new PageAdorner(this.creator, this.model);
+      this.adorner.isGhost = this.isGhost;
+    }
+  }
+  override ngDoCheck(): void {
+    super.ngDoCheck();
+    if(this.adorner) {
+      this.adorner.isGhost = this.isGhost;
     }
   }
   protected getModel(): PageAdorner {
diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html
index 173d82ddaa..a749187332 100644
--- a/packages/survey-creator-angular/src/panel.component.html
+++ b/packages/survey-creator-angular/src/panel.component.html
@@ -16,7 +16,7 @@
       <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging && adorner.element.isInteractiveDesignElement" class="svc-question__drag-area"
         (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
           sv-ng-svg-icon></svg>
         <div class="svc-question__top-actions">
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
@@ -29,7 +29,7 @@
             <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
             <div *ngIf="adorner.showAddQuestionButton" class="svc-panel__add-new-question svc-action-button" [key2click]
               (click)="addNewQuestion($event)">
-              <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24"
+              <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="'auto'"
                 sv-ng-svg-icon></svg>
               <span class="svc-add-new-item-button__text">
                 {{ adorner.addNewQuestionText }}
diff --git a/packages/survey-creator-angular/src/question-widget.component.html b/packages/survey-creator-angular/src/question-widget.component.html
index 2ea5c9cd54..c19791ede9 100644
--- a/packages/survey-creator-angular/src/question-widget.component.html
+++ b/packages/survey-creator-angular/src/question-widget.component.html
@@ -2,7 +2,8 @@
   <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()" (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)" [attr.data-sv-drop-target-survey-element]="adorner.element.name || null">
     <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content" [class]="adorner.css()" [key2click] (click)="adorner.select(adorner, $event)" data-bind="clickBubble: false" #container>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24" sv-ng-svg-icon></svg>
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
+          sv-ng-svg-icon></svg>
       </div>
       <div class="svc-widget__content">
         <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html
index 38f6559126..318876c167 100644
--- a/packages/survey-creator-angular/src/question.component.html
+++ b/packages/survey-creator-angular/src/question.component.html
@@ -14,7 +14,7 @@
       <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
       <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
           sv-ng-svg-icon></svg>
         <div class="svc-question__top-actions">
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
diff --git a/packages/survey-creator-angular/src/questions/logic-operator.component.html b/packages/survey-creator-angular/src/questions/logic-operator.component.html
index 02f1c9c5d3..62864bf3e0 100644
--- a/packages/survey-creator-angular/src/questions/logic-operator.component.html
+++ b/packages/survey-creator-angular/src/questions/logic-operator.component.html
@@ -17,7 +17,7 @@
           <div>{{model.readOnlyText}}</div>
         </div>
         <div *ngIf="model.allowClear && model.cssClasses.cleanButtonIconId" [class]="model.cssClasses.cleanButton" (click)="clear" [visible]="!model.isEmpty()">
-          <svg [class]="model.cssClasses.cleanButtonSvg" [iconName]="model.cssClasses.cleanButtonIconId" [size]="'auto'" [title]="model.clearCaption" [size]="24" sv-ng-svg-icon></svg>
+          <svg [class]="model.cssClasses.cleanButtonSvg" [iconName]="model.cssClasses.cleanButtonIconId" [size]="'auto'" [title]="model.clearCaption" sv-ng-svg-icon></svg>
         </div>
       </div>
         <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
diff --git a/packages/survey-creator-angular/src/side-bar/tab-button.component.html b/packages/survey-creator-angular/src/side-bar/tab-button.component.html
index abed4768ca..0bf9b5ae5e 100644
--- a/packages/survey-creator-angular/src/side-bar/tab-button.component.html
+++ b/packages/survey-creator-angular/src/side-bar/tab-button.component.html
@@ -4,7 +4,7 @@
       [attr.title]="model.tooltip" (click)="model.action()">
       <div class="svc-menu-action__icon">
         <div class="svc-menu-action__icon-container">
-          <svg [iconName]="model.iconName" [size]="24" sv-ng-svg-icon></svg>
+          <svg [iconName]="model.iconName" [size]="'auto'" sv-ng-svg-icon></svg>
         </div>
       </div>
     </div>
diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-pages.component.html b/packages/survey-creator-angular/src/tabs/designer/designer-pages.component.html
index 09a6ff8629..f3dc3f4049 100644
--- a/packages/survey-creator-angular/src/tabs/designer/designer-pages.component.html
+++ b/packages/survey-creator-angular/src/tabs/designer/designer-pages.component.html
@@ -2,6 +2,6 @@
   <div class="svc-page" [attr.data-sv-drop-target-survey-element]="model.displayPageDropTarget"
     [attr.data-sv-drop-target-page]="model.pagesController.page2Display.name">
     <ng-template
-      [component]="{ name: 'svc-page', data: { model: model.pagesController.page2Display, creator, survey }}"></ng-template>
+      [component]="{ name: 'svc-page', data: { model: model.pagesController.page2Display, creator, survey, isGhost: model.pagesController.page2Display == model.newPage }}"></ng-template>
   </div>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
index cda65bffab..3efb0fb65b 100644
--- a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
+++ b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
@@ -6,14 +6,12 @@
     </div>
 
     <ng-container *ngIf="creator.pageEditMode !== 'bypage'">
-      <ng-container *ngFor="let page of survey.pages">
-        <ng-container *ngIf="!model.showNewPage || page !== model.newPage">
-          <ng-container *ngTemplateOutlet="pageContainer; context: { page, isGhost: false }"></ng-container>
+      <ng-container *ngFor="let page of model.pages; trackBy: trackPageBy ">
+        <ng-container>
+          <ng-container
+            *ngTemplateOutlet="pageContainer; context: { page, isGhost: model.newPage == page }"></ng-container>
         </ng-container>
       </ng-container>
-      <ng-container *ngIf="model.showNewPage && model.newPage">
-        <ng-container *ngTemplateOutlet="pageContainer; context: { page: model.newPage, isGhost: true }"></ng-container>
-      </ng-container>
     </ng-container>
     <ng-container *ngIf="model.pagesController.page2Display && creator.pageEditMode === 'bypage'">
       <svc-designer-pages [model]="model"></svc-designer-pages>
@@ -33,6 +31,7 @@
 <ng-template let-page="page" let-isGhost="isGhost" #pageContainer>
   <div class="svc-page" [attr.data-sv-drop-target-survey-element]="isGhost ? 'newGhostPage' : page.name"
     [attr.data-sv-drop-target-page]="page.name">
-    <ng-template [component]="{ name: 'svc-page', data: { model: page, creator, survey, isGhost }}"></ng-template>
+    <ng-template
+      [component]="{ name: 'svc-page', data: { model: page, creator, survey, isGhost: isGhost }}"></ng-template>
   </div>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.ts b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.ts
index 685097d12b..4a87b769df 100644
--- a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.ts
+++ b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from "@angular/core";
-import { SurveyModel } from "survey-core";
+import { PageModel, SurveyModel } from "survey-core";
 import { TabDesignerViewModel } from "survey-creator-core";
 import { BaseAngular } from "survey-angular-ui";
 
@@ -19,4 +19,7 @@ export class DesignerSurveyComponent extends BaseAngular<SurveyModel> {
   public get survey() {
     return this.creator.survey;
   }
+  public trackPageBy(index: number, page: PageModel): string {
+    return page.id;
+  }
 }
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/tabs/designer/designer.component.html b/packages/survey-creator-angular/src/tabs/designer/designer.component.html
index 7155872cb2..ad9b28f6d4 100644
--- a/packages/survey-creator-angular/src/tabs/designer/designer.component.html
+++ b/packages/survey-creator-angular/src/tabs/designer/designer.component.html
@@ -12,8 +12,8 @@
           <svc-surface-placeholder [name]="'designer'" [placeholderTitleText]="model.placeholderTitleText"
             [placeholderDescriptionText]="model.placeholderDescriptionText">
           </svc-surface-placeholder>
-          <svc-page class="svc-designer-placeholder-page" [model]="model.newPage" [survey]="survey"
-            [creator]="creator"></svc-page>
+          <svc-page class="svc-designer-placeholder-page" [model]="model.newPage" [survey]="survey" [creator]="creator"
+            [isGhost]="true"></svc-page>
         </div>
       </ng-container>
 
diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js
index bc4de6e162..c29968231c 100644
--- a/packages/survey-creator-core/creator-themes-import.js
+++ b/packages/survey-creator-core/creator-themes-import.js
@@ -69,7 +69,7 @@ function capitalizedFirstLetter(word) {
 }
 
 function getCorrectValue(variableKey, value) {
-  if(variableKey.indexOf("-opacity-") > -1) {
+  if(variableKey.indexOf("-opacity") > -1) {
     return parseInt(value) / 100;
   } else {
     return value;
diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
index d084327546..d7b42c911e 100644
--- a/packages/survey-creator-core/src/components/action-container-view-model.ts
+++ b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -165,14 +165,16 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     };
     const afterRunAnimation = (el: HTMLElement, animatingClassName: string) => {
       this.expandCollapseAnimationRunning = false;
-      cleanHtmlElementAfterAnimation(el);
-      const innerAnimatedElements = this.getInnerAnimatedElements();
-      innerAnimatedElements.forEach((elem: HTMLElement) => {
-        cleanHtmlElementAfterAnimation(elem);
-      });
-      innerAnimatedElements.forEach((elem: HTMLElement) => {
-        elem.classList.remove(animatingClassName);
-      });
+      if(this.surveyElement) {
+        cleanHtmlElementAfterAnimation(el);
+        const innerAnimatedElements = this.getInnerAnimatedElements();
+        innerAnimatedElements.forEach((elem: HTMLElement) => {
+          cleanHtmlElementAfterAnimation(elem);
+        });
+        innerAnimatedElements.forEach((elem: HTMLElement) => {
+          elem.classList.remove(animatingClassName);
+        });
+      }
     };
     return {
       getRerenderEvent: () => this.onElementRerendered,
@@ -221,7 +223,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
 
   protected createActionContainer(): ActionContainer {
     const actionContainer = new SurveyElementActionContainer();
-    actionContainer.dotsItem.iconSize = 16;
+    actionContainer.dotsItem.iconSize = "auto" as any;
     actionContainer.dotsItem.popupModel.horizontalPosition = "center";
     return actionContainer;
   }
@@ -360,9 +362,9 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     const expandIcon = "icon-expandpanel-16x16";
     return {
       id: "collapse",
-      css: "sv-action-bar-item--secondary sv-action-bar-item--collapse",
+      css: "sv-action-bar-item--collapse",
       iconName: new ComputedUpdater<string>(() => this.collapsed ? expandIcon : collapseIcon) as any,
-      iconSize: 16,
+      iconSize: "auto",
       action: () => {
         this.collapsed = !this.collapsed;
       }
@@ -424,10 +426,10 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "duplicate",
         iconName: "icon-duplicate_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         title: this.creator.getLocString("survey.duplicate"),
         visibleIndex: 10,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => this.duplicate(),
         onFocus: (isMouse: boolean, event: any) => this.disableActionFocusing(isMouse, event)
       })
@@ -437,11 +439,11 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "settings",
         iconName: "icon-settings_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         title: this.creator.getLocString("ed.settings"),
         locTooltipName: "ed.settingsTooltip",
         visibleIndex: 20,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => {
           this.creator.setShowSidebar(true, true);
           if (!this.creator.isMobileView) {
@@ -457,11 +459,11 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "delete",
         iconName: "icon-delete_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         //needSeparator: items.length > 0,
         title: this.creator.getLocString("pe.delete"),
         visibleIndex: 30,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => {
           this.delete();
         },
diff --git a/packages/survey-creator-core/src/components/item-value.scss b/packages/survey-creator-core/src/components/item-value.scss
index cb8b422adf..5a3b0d84ae 100644
--- a/packages/survey-creator-core/src/components/item-value.scss
+++ b/packages/survey-creator-core/src/components/item-value.scss
@@ -78,6 +78,13 @@
 .svc-item-value-controls__drag-icon {
   display: block;
   transition: opacity $creator-transition-duration;
+  width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+  height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
+
+  .sv-svg-icon {
+    width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+    height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
+  }
 }
 
 .svc-item-value-wrapper:hover:not(.svc-item-value--ghost),
@@ -88,7 +95,11 @@
 }
 
 .svc-item-value-controls__drag {
-  padding: calcSize(0.5) calcSize(1);
+  padding: var(--ctr-survey-item-actionbar-drag-indicator-padding-top, calcSize(0.5))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-right,  calcSize(1))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-left,  calcSize(1));
+
   cursor: move;
   opacity: 0.25;
 
diff --git a/packages/survey-creator-core/src/components/matrix-cell.scss b/packages/survey-creator-core/src/components/matrix-cell.scss
index aae70c76ee..c8dd9304c0 100644
--- a/packages/survey-creator-core/src/components/matrix-cell.scss
+++ b/packages/survey-creator-core/src/components/matrix-cell.scss
@@ -53,19 +53,7 @@
 }
 
 .svc-matrix-cell__question-controls-button {
-  display: block;
-  width: calcSize(6);
-  height: calcSize(6);
-  background: $background;
   border: 1px solid $border;
-  box-sizing: border-box;
-  border-radius: 50%;
-  padding: calcSize(1.5);
-  cursor: pointer;
-
-  use {
-    fill: $foreground-light;
-  }
 }
 
 .svc-matrix-cell:hover .svc-matrix-cell__question-controls {
diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
index 79eaec18f7..21a3ce2ef6 100644
--- a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
+++ b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
@@ -8,13 +8,18 @@ svc-page-navigator,
 
 .svc-page-navigator__navigator-icon {
   display: block;
-  height: calcSize(3);
-  width: calcSize(3);
-  border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
+  width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
+  height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
   padding: var(--ctr-page-navigator-button-padding, calcSize(1.25));
+  border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
   cursor: pointer;
   transition: background-color $creator-transition-duration;
 
+  .sv-svg-icon {
+    width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
+    height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
+  }
+
   use {
     fill: var(--ctr-page-navigator-button-icon-color, $foreground-light);
     transition: fill $creator-transition-duration;
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 0de0f9b642..c3e07977e3 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -28,16 +28,22 @@ svc-page {
   padding: calcSize(1) calcSize(0) calcSize(3);
   box-sizing: border-box;
   width: 100%;
-  outline: none;
-  transition: background $creator-transition-duration, box-shadow $creator-transition-duration;
+  outline-color: transparent;
+  outline: 2px transparent dashed;
+  transition-property: background-color, box-shadow, outline-color;
+  transition-duration: $creator-transition-duration;
 
   .sd-page {
     margin: 0;
     padding: calcSize(1) calcSize(3) 0;
   }
 
-  &>.svc-question__drag-area {
+  & > .svc-question__drag-area {
     padding-top: calcSize(1.25);
+
+    .svc-question__drag-element {
+      transition: opacity $creator-transition-duration;
+    }
   }
 }
 
@@ -67,57 +73,116 @@ svc-page {
   }
 }
 
-.svc-page__content-actions {
-  .sv-action-bar-item {
-    border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, 4px);
-    background-color: transparent;
-    color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
-    transition: background-color $creator-transition-duration;
-  }
+.svc-page-toolbar__item {
+  @include defaultActionButtonSettings;
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5));
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  justify-content: center;
+  align-items: center;
 
-  .sv-action-bar-item__icon {
-    use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+  background-color: transparent;
+  transition: background-color $creator-transition-duration;
+}
 
-  //hovered state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
-  }
+.svc-page-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
 
-  //pressed state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-  }
+.svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item {
+  margin-inline-end: 0;
+}
 
-  //disabled state
-  .sv-action-bar-item:disabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
-  }
+.svc-page-toolbar .sv-action:first-of-type .svc-page-toolbar__item {
+  margin-inline-start: 0;
+}
 
-  .sv-action-bar-item--secondary {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+//hovered state
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):hover:enabled,
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):focus:enabled {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+}
 
-  .sv-action-bar-item--active {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
+//pressed state
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):active:enabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+}
+
+//disabled state
+.svc-page-toolbar__item:disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
+
+.svc-page-toolbar__item--active {
+  .svc-page-toolbar-item__icon use {
+    fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
   }
+}
 
+.svc-page-toolbar__item--pressed:not(.svc-page-toolbar__item--active) {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, $background-dim);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+}
+
+.svc-page-toolbar-item__icon {
+  --thm-survey-page-toolbar-item-icon-width: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --thm-survey-page-toolbar-item-icon-height: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  width: var(--thm-survey-page-toolbar-item-icon-width, calcSize(2));
+  height: var(--thm-survey-page-toolbar-item-icon-height, calcSize(2));
+}
+
+.svc-page-toolbar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
+}
+
+.svc-page-toolbar-item__title {
+  @include ctrSmallBoldFont;
+  color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
+}
+
+.svc-page__content-actions {
   .sv-action-bar-item-dropdown {
     border-radius: calcCornerRadius(0.5);
     background-color: transparent;
   }
-
-  .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-    background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, $background-dim);
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
-  }
 }
 
 .svc-page__content:focus,
@@ -125,6 +190,7 @@ svc-page {
   box-shadow: 0 0 0 2px $secondary-light;
   background: var(--ctr-survey-page-background-color-hovered, $secondary-backcolor-semi-light);
 }
+
 .svc-page__content--new.svc-page__content--new {
   box-shadow: none;
   background-color: transparent;
@@ -136,10 +202,12 @@ svc-page {
     opacity: 1;
   }
 
-  &>.svc-question__drag-area {
+  & > .svc-question__drag-area {
     z-index: 1;
 
     .svc-question__drag-element {
+      width: var(--ctr-survey-page-drag-indicator-width, calcSize(3));
+      height: var(--ctr-survey-page-drag-indicator-height, calcSize(2));
       opacity: var(--ctr-survey-page-drag-indicator-opacity, 0.5);
     }
   }
@@ -150,12 +218,12 @@ svc-page {
   background: $secondary-backcolor-semi-light;
 }
 
-
 .svc-page__content--animation-running {
   .svc-row {
     .svc-question--enter {
       animation: none;
-    }  
+    }
+
     .svc-question--leave {
       animation-name: moveInWithOverflow;
       animation-direction: reverse;
@@ -164,29 +232,34 @@ svc-page {
       animation-duration: $svc-collapse-move-out-duration;
       animation-delay: $svc-collapse-move-out-delay;
     }
-  } 
+  }
 }
+
 .svc-creator--disable-animations {
   .svc-row {
     .svc-question--leave {
       animation: none;
-     }
+    }
   }
 }
-.svc-page__content--collapse-onhover, .svc-page__content--collapse-always {
+
+.svc-page__content--collapse-onhover,
+.svc-page__content--collapse-always {
   outline: 2px transparent dashed;
-  transition: outline-color $creator-transition-duration;
+
   &.svc-page__content--selected,
   &.svc-page__content.svc-hovered {
     outline-color: transparent;
   }
+
   &.svc-page__content--collapsed-drag-over-inside {
     box-shadow: 0 0 0 2px $primary;
     background: $primary-light;
     animation: collapsed-drag-over-inside-blinking 1s infinite;
     outline-color: transparent;
   }
-} 
+}
+
 .svc-page__content--collapsed {
   outline-color: $border;
 }
@@ -245,6 +318,7 @@ svc-page {
 
 .svc-element__add-new-question {
   -webkit-tap-highlight-color: transparent;
+  height: auto;
 }
 
 .svc-add-new-item-button__text {
@@ -255,21 +329,21 @@ svc-page {
 .svc-element__question-type-selector {
   appearance: none;
   display: flex;
-  height: calcSize(5);
-  padding: calcSize(1);
+  padding: var(--ctr-button-contextual-button-padding-top, calcSize(1))
+    var(--ctr-button-contextual-button-padding-right, calcSize(1))
+    var(--ctr-button-contextual-button-padding-bottom, calcSize(1))
+    var(--ctr-button-contextual-button-padding-left, calcSize(1));
+  border-radius: var(--ctr-button-contextual-button-corner-radius, 2px);
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
   background-color: transparent;
   cursor: pointer;
-  margin-inline-end: calcSize(1); // margin-right
+  margin: var(--ctr-button-contextual-button-margin-vertical, calcSize(1))
+    var(--ctr-button-contextual-button-margin-horizontal, calcSize(1));
+  margin-inline-start: 0; // TODO
   outline: none;
   transition: background-color $creator-transition-duration;
 
-  use {
-    fill: var(--ctr-library-contextual-button-icon-color, $foreground-light);
-  }
-
   &:hover {
     background-color: var(--ctr-button-contextual-button-background-color-hovered, $background-dim);
   }
@@ -279,6 +353,20 @@ svc-page {
   }
 }
 
+.svc-element__question-type-selector-icon {
+  width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+  height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+
+  .sv-svg-icon {
+    width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+    height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+  }
+
+  use {
+    fill: var(--ctr-button-contextual-button-icon-color, $foreground-light);
+  }
+}
+
 .svc-page--drag-over-empty:after {
   content: " ";
   position: absolute;
@@ -321,20 +409,20 @@ svc-page {
       pointer-events: none;
     }
 
-    .sv-list__item.sv-list__item--selected.sv-list__item--group>.sv-list__item-body {
+    .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
       @include ctrDefaultBoldFont;
       background-color: $primary;
       color: $primary-foreground;
     }
 
-    .sv-list__item.sv-list__item--selected.sv-list__item--group>.sv-list__item-body use {
+    .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
       fill: $background;
     }
   }
 }
 
 .svc-page__content--collapsed {
-  &>.sv-action-bar {
+  & > .sv-action-bar {
     display: none;
   }
 
@@ -349,7 +437,7 @@ svc-page {
   .sd-page {
     display: flex;
 
-    &>* {
+    & > * {
       display: none;
     }
 
@@ -396,4 +484,67 @@ svc-page {
       }
     }
   }
-}
\ No newline at end of file
+}
+
+$svc-page-fade-in-duration: var(--sjs-svc-page-fade-in-duration, 250ms);
+$svc-page-move-in-duration: var(--sjs-svc-page-move-in-duration, 250ms);
+$svc-page-fade-in-delay: var(--sjs-svc-page-fade-in-delay, 100ms);
+$svc-page-fade-out-duration: var(--sjs-svc-page-fade-out-duration, 250ms);
+$svc-page-move-out-duration: var(--sjs-svc-page-move-out-duration, 250ms);
+$svc-page-move-out-delay: var(--sjs-svc-page-move-out-delay, 100ms);
+
+.svc-page--enter,
+.svc-page--leave {
+  animation-name: fadeIn, moveInWithOverflow;
+  animation-fill-mode: forwards;
+  animation-duration: var(--fade-animation-duration), var(--move-animation-duration);
+  animation-direction: var(--animation-direction);
+  animation-timing-function: var(--animation-timing-function);
+  animation-delay: var(--fade-animation-delay), var(--move-animation-delay);
+}
+
+.svc-page--enter {
+  opacity: 0;
+  --animation-direction: normal;
+  --animation-timing-function: #{$ease-out};
+  --fade-animation-duration: #{$svc-page-fade-in-duration};
+  --move-animation-duration: #{$svc-page-move-in-duration};
+  --fade-animation-delay: #{$svc-page-fade-in-delay};
+  --move-animation-delay: 0s;
+}
+
+.svc-page--leave {
+  --animation-direction: reverse;
+  --animation-timing-function: #{$reverse-ease-out};
+  --fade-animation-duration: #{$svc-page-fade-out-duration};
+  --move-animation-duration: #{$svc-page-move-out-duration};
+  --fade-animation-delay: 0s;
+  --move-animation-delay: #{$svc-page-move-out-delay};
+}
+.svc-creator--disable-animations {
+  .svc-page--enter,
+  .svc-page--leave {
+    animation: none;
+  }
+}
+
+.svc-page--enter.svc-page--enter {
+  .svc-page__content-actions {
+    opacity: 0;
+  }
+
+  .svc-page__content {
+    box-shadow: 0 0 0 2px transparent;
+    background-color: transparent;
+
+    & > .svc-question__drag-area {
+      .svc-question__drag-element {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.svc-page {
+  scroll-margin-top: calcSize(1);
+}
diff --git a/packages/survey-creator-core/src/components/page.ts b/packages/survey-creator-core/src/components/page.ts
index 86e012a7c5..7811bbaa70 100644
--- a/packages/survey-creator-core/src/components/page.ts
+++ b/packages/survey-creator-core/src/components/page.ts
@@ -1,4 +1,4 @@
-import { Action, ActionContainer, classesToSelector, ComputedUpdater, DragOrClickHelper, DragTypeOverMeEnum, IAction, IElement, PageModel, property, SurveyElement } from "survey-core";
+import { Action, ActionContainer, classesToSelector, ComputedUpdater, DragOrClickHelper, DragTypeOverMeEnum, IAction, IElement, PageModel, property, QuestionRowModel, SurveyElement } from "survey-core";
 import { SurveyCreatorModel } from "../creator-base";
 import { IPortableMouseEvent } from "../utils/events";
 import { SurveyElementAdornerBase } from "./action-container-view-model";
@@ -28,8 +28,8 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       this.isDragMe = this.page?.isDragMe;
     }
   }
-  private updateShowPlaceholder(elements?: Array<IElement>) {
-    this.showPlaceholder = !this.isGhost && (elements || this.page.elements).length === 0;
+  private updateShowPlaceholder(visibleRows?: Array<QuestionRowModel>) {
+    this.showPlaceholder = !this.isGhost && (visibleRows || this.page.visibleRows).length === 0;
   }
 
   constructor(creator: SurveyCreatorModel, page: PageModel) {
@@ -64,17 +64,8 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       surveyElement["surveyChangedCallback"] = () => {
         this.isPageLive = !!surveyElement.survey;
       };
-      if (this.calcIsGhostPage(surveyElement)) {
-        this.updateActionsProperties();
-        surveyElement.registerFunctionOnPropertiesValueChanged(
-          ["title", "description"],
-          () => {
-            this.addGhostPage();
-            this.updateShowPlaceholder();
-          },
-          "add_ghost"
-        );
-        this.patchPageForDragDrop(surveyElement, this.addGhostPage);
+      if (this.isGhost) {
+        this.addGhostPageSubsribes(surveyElement);
       }
       surveyElement.registerFunctionOnPropertiesValueChanged(
         ["dragTypeOverMe"],
@@ -88,7 +79,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
           this.updateIsDragMe();
         }
       );
-      surveyElement.registerFunctionOnPropertiesValueChanged(["elements"], (newValue: Array<IElement>) => {
+      surveyElement.registerFunctionOnPropertiesValueChanged(["visibleRows"], (newValue: Array<QuestionRowModel>) => {
         this.updateShowPlaceholder(newValue);
       });
       this.updateShowPlaceholder();
@@ -132,11 +123,27 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       addGhostPage();
     };
   }
-  protected calcIsGhostPage(page: PageModel) {
-    return this.creator.survey.pages.indexOf(page) < 0;
-  }
-  public get isGhost(): boolean {
-    return this.calcIsGhostPage(this.page);
+  @property({
+    onSet(val, target: PageAdorner, prevVal) {
+      if(val != prevVal) {
+        target.updateShowPlaceholder();
+        target.updateActionsProperties();
+        if(val && target.surveyElement) {
+          target.addGhostPageSubsribes(target.surveyElement);
+        }
+      }
+    },
+  }) isGhost: boolean;
+  private addGhostPageSubsribes(surveyElement: PageModel) {
+    surveyElement.registerFunctionOnPropertiesValueChanged(
+      ["title", "description"],
+      () => {
+        this.addGhostPage();
+        this.updateShowPlaceholder();
+      },
+      "add_ghost"
+    );
+    this.patchPageForDragDrop(this.surveyElement, this.addGhostPage);
   }
   public get placeholderText(): string {
     if (this.creator.isMobileView)
@@ -156,6 +163,16 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
   protected createActionContainer(): ActionContainer<Action> {
     const container = new ActionContainer();
     container.sizeMode = "small";
+    container.cssClasses = {
+      root: "svc-page-toolbar sv-action-bar",
+      item: "svc-page-toolbar__item",
+      itemWithTitle: "svc-page-toolbar__item--with-text",
+      itemActive: "svc-page-toolbar__item--active",
+      itemPressed: "svc-page-toolbar__item--pressed",
+      itemIcon: "svc-page-toolbar-item__icon",
+      itemTitle: "svc-page-toolbar-item__title",
+      itemTitleWithIcon: "svc-page-toolbar-item__title--with-icon",
+    };
     return container;
   }
   protected getExpandCollapseAction(): IAction {
@@ -182,6 +199,8 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
   }
 
   addNewQuestion = (model: PageAdorner, event: IPortableMouseEvent, type?: string) => {
+    const isGhost = this.isGhost;
+    const page = this.page;
     this.creator.addNewQuestionInPage((type) => {
       this.addGhostPage(false);
       this.creator.survey.currentPage = this.page;
@@ -226,9 +245,9 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
         this.dragOut();
       }
     }
-    if (this.allowExpandCollapse) {
+    if (this.allowExpandCollapse || this.page["isGhost"]) {
       result += (" svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility);
-      if (this.renderedCollapsed) result += (" svc-page__content--collapsed");
+      if (this.renderedCollapsed || this.page["isGhost"]) result += (" svc-page__content--collapsed");
       if (this.expandCollapseAnimationRunning) result += (" svc-page__content--animation-running");
     }
     if (this.isDragMe) {
@@ -292,11 +311,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
     if (cssClasses.pageRow) return [].slice.call(this.rootElement?.querySelectorAll(`:scope .svc-page__footer, :scope ${classesToSelector(this.surveyElement.cssRoot)} > .svc-row`));
     return null;
   }
-  public onPageSelected() {
-    if (this.rootElement) {
-      SurveyHelper.scrollIntoViewIfNeeded(this.rootElement);
-    }
-  }
+  public onPageSelected() {}
   protected getAllowDragging(options: any): boolean {
     return this.creator.allowDragPages && super.getAllowDragging(options);
   }
diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss
index 22e08e8c93..382a2493c3 100644
--- a/packages/survey-creator-core/src/components/popup.scss
+++ b/packages/survey-creator-core/src/components/popup.scss
@@ -141,13 +141,16 @@
 
     &.sv-list__item--group {
       & > .sv-list__item-body {
-        background: var(--ctr-list-item-background-color-selected, $primary-light);
-        color: var(--ctr-list-item-text-color-selected, $foreground);
+        background: var(--ctr-list-item-background-color-selected-submenu, $primary-light);
+        color: var(--ctr-list-item-text-color-selected-submenu, $foreground);
         font-weight: 400;
       }
 
       .sv-list__item-icon use {
-        fill: var(--ctr-list-item-icon-color-hovered, $foreground-light);
+        fill: var(--ctr-list-item-icon-color-selected-submenu, $foreground-light);
+      }
+      .sv-list-item__marker-icon use {
+        fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, $foreground-light);
       }
     }
   }
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 3434e64c58..f6dc907314 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -52,63 +52,152 @@ svc-question {
   }
 }
 
-.svc-question__adorner {
-  .sv-action-bar-item {
-    background-color: transparent;
-    color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
-    transition:
-      background $creator-transition-duration,
-      color $creator-transition-duration,
-      opacity $creator-transition-duration;
-  }
+.svc-survey-element-toolbar__item {
+  @include defaultActionButtonSettings;
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.25));
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
 
-  .sv-action-bar-item__icon {
-    use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+  justify-content: center;
+  align-items: center;
 
-  //hovered state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
-  }
+  background-color: transparent;
+  transition:
+    background $creator-transition-duration,
+    opacity $creator-transition-duration;
+}
 
-  //pressed state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-  }
+.svc-survey-element-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
 
-  //disabled state
-  .sv-action-bar-item:disabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
-  }
+.svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item {
+  margin-inline-end: 0;
+}
 
-  .sv-action-bar-item--secondary {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+.svc-survey-element-toolbar .sv-action:first-of-type .svc-survey-element-toolbar__item {
+  margin-inline-start: 0;
+}
 
-  .sv-action-bar-item--active {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
 
-  .sv-action-bar-item-dropdown {
-    background-color: transparent;
+  flex-direction: row-reverse;
+  padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
+
+.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+
+  .svc-survey-element-toolbar-item__icon {
+    padding: 0;
+    width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
+    height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
   }
+}
+
+//hovered state
+.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):hover:enabled,
+.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):focus:enabled {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+}
+
+//pressed state
+.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):active:enabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+}
+
+//disabled state
+.svc-survey-element-toolbar__item:disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
 
-  .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, $background-dim);
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+.svc-survey-element-toolbar__item--active {
+  .svc-survey-element-toolbar-item__icon use {
+    fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
   }
+}
+
+.svc-survey-element-toolbar__item--pressed:not(.svc-survey-element-toolbar__item--active) {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, $background-dim);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+}
 
-  .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:hover,
-  .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:focus,
-  .sv-action-bar-item.sv-action-bar-item--active {
-    background-color: $secondary-backcolor-semi-light;
+.svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:hover,
+.svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:focus,
+.svc-survey-element-toolbar__item--active {
+  background-color: $secondary-backcolor-semi-light;
+}
+
+.svc-survey-element-toolbar-item__icon,
+.svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
+  --ctr-survey-question-toolbar-item-icon-width: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --ctr-survey-question-toolbar-item-icon-height: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+
+  width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
+  height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
+}
+
+.svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
+}
+
+.svc-survey-element-toolbar-item__title {
+  @include ctrSmallBoldFont;
+  color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
+  transition: color $creator-transition-duration;
+}
+
+.svc-question__adorner {
+  .sv-action-bar-item-dropdown {
+    background-color: transparent;
   }
 }
 
@@ -303,80 +392,85 @@ svc-question {
     margin-top: calcSize(2);
   }
 
-  .sv-action--convertTo {
-    max-width: max-content;
-
-    .sv-action-bar-item {
-      flex-direction: row-reverse;
-    }
-
-    .sv-action-bar-item--icon {
-      max-width: 100%;
-      padding: calcSize(0.5);
-    }
-
-    .sv-action-bar-item__title {
-      display: inline-block;
-      justify-content: left;
-    }
-
-    .sv-action-bar-item__icon {
-      margin-inline-start: calcSize(0.5);
+  .svc-action-bar-item--right:first-of-type {
+    margin-inline-start: auto;
+  }
+}
 
-      &:last-child {
-        margin-inline-start: 0;
-      }
-    }
+.svc-dropdown-action--convertTo {
+  max-width: max-content;
 
-    .sv-action-bar-item__icon:last-child {
-      use {
-        fill: $primary;
-      }
-    }
+  .svc-survey-element-toolbar__item {
+    flex-direction: row-reverse;
+  }
 
-    .sv-action-bar-item__title--with-icon {
-      margin-inline-start: 0; // margin-left
-      margin-inline-end: 0; // margin-right
-    }
+  .sv-action-bar-item--icon {
+    max-width: 100%;
+    padding: calcSize(0.5);
   }
 
-  .sv-action--convertTo.sv-action--hidden {
-    min-width: 0;
+  .svc-survey-element-toolbar-item__title {
+    display: inline-block;
+    justify-content: left;
   }
 
-  .sv-action--convertTo-last {
-    margin-inline-end: auto; // margin-right
+  .svc-survey-element-toolbar-item__icon {
+    &:last-child {
+      margin-inline-start: 0;
+    }
   }
 
-  .svc-action-bar-item--right:first-of-type {
-    margin-inline-start: auto;
+  .svc-survey-element-toolbar-item__icon:last-child {
+    use {
+      fill: $primary;
+    }
   }
+}
 
-  .sv-dots {
-    width: calcSize(4);
-    margin-left: calcSize(1);
-    margin-right: calcSize(0.5);
+.svc-dropdown-action--convertTo.sv-action--hidden {
+  min-width: 0;
+}
 
-    &.sv-action--hidden {
-      width: 0;
-      margin: 0;
+.svc-dropdown-action--convertTo-last {
+  margin-inline-end: auto; // margin-right
+}
 
-      .sv-action__content {
-        display: none;
-      }
-    }
+.svc-survey-element-toolbar__dots-item {
+  width: calcSize(4);
+  margin-left: calcSize(1);
+  margin-right: calcSize(0.5);
 
-    .sv-dots__item {
-      margin-left: 0;
+  &.sv-action--hidden {
+    width: 0;
+    margin: 0;
+
+    .sv-action__content {
+      display: none;
     }
   }
 
   .sv-dots__item {
-    //border-radius: calcSize(0.5);
+    margin-left: 0;
+  }
 
-    use {
-      fill: $secondary;
-    }
+  .sv-list__item-icon {
+    --ctr-survey-question-toolbar-item-icon-width: calc(
+      var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+    );
+    --ctr-survey-question-toolbar-item-icon-height: calc(
+      var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+    );
+
+    width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
+    height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
+  }
+
+  use {
+    fill: $secondary;
   }
 }
 
@@ -736,11 +830,11 @@ svc-question,
 // EO reset styles for drag-drop-ghost-survey-element to avoid layout jumping while dragging
 
 .svc-hovered > .svc-question__content > .svc-question__drag-area > .svc-question__drag-element {
-  opacity: 0.5;
+  opacity: var(--ctr-survey-question-panel-drag-area-drag-indicator-opacity, 0.5);
 }
 
 .svc-question__content.svc-question__content--selected > .svc-question__drag-area > .svc-question__drag-element {
-  opacity: 0.5;
+  opacity: var(--ctr-survey-question-panel-drag-area-drag-indicator-opacity, 0.5);
   z-index: 1;
 }
 .svc-element__header--hidden {
@@ -868,9 +962,10 @@ svc-question,
 
 .svc-question__drag-element {
   width: 100%;
-  height: calcSize(4);
   opacity: 0;
   transition: opacity $creator-transition-duration;
+  width: var(--ctr-survey-question-panel-drag-area-drag-indicator-width, calcSize(3));
+  height: var(--ctr-survey-question-panel-drag-area-drag-indicator-height, calcSize(2));
 
   use {
     fill: var(--ctr-survey-question-panel-drag-area-drag-indicator-color, $foreground-light);
@@ -1167,6 +1262,8 @@ svc-question,
   .svc-panel__add-new-question-container {
     .svc-panel__add-new-question-icon {
       display: block;
+      width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+      height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
     }
 
     .svc-element__question-type-selector {
@@ -1184,11 +1281,6 @@ svc-question,
   }
 }
 
-.sv-list__container .sv-action-bar-item--secondary {
-  .sv-list__item-icon use {
-    fill: $secondary;
-  }
-}
 
 .sd-panel {
   .svc-row {
@@ -1332,21 +1424,26 @@ svc-question,
   top: 0;
   right: 0;
   visibility: hidden;
+}
 
-  .sv-action-bar-item {
-    margin: 0;
-    padding: calcSize(0.5);
-    opacity: 0.5;
-    height: 24px;
+.svc-survey-element-top-toolbar__item {
+  @include defaultActionButtonSettings;
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left-small, calcSize(0.5));
+  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
+  background-color: transparent;
 
-    &:hover,
-    &:focus {
-      opacity: initial;
-    }
+  &:hover,
+  &:focus {
+    opacity: initial;
+    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+  }
 
-    .sv-action-bar-item__icon use {
-      fill: $foreground-dim-light;
-    }
+  use {
+    fill: $foreground-dim-light;
   }
 }
 
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
index e9b2e9afae..26303f7ddf 100644
--- a/packages/survey-creator-core/src/components/question.ts
+++ b/packages/survey-creator-core/src/components/question.ts
@@ -34,7 +34,7 @@ import {
   propertyExists,
   toggleHovered
 } from "../utils/utils";
-import { SurveyElementAdornerBase } from "./action-container-view-model";
+import { SurveyElementActionContainer, SurveyElementAdornerBase } from "./action-container-view-model";
 require("./question.scss");
 import { settings } from "../creator-settings";
 import { StringEditorConnector, StringItemsNavigatorBase } from "./string-editor";
@@ -298,8 +298,30 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
   }
   protected createActionContainers(): void {
     super.createActionContainers();
+    const defaultCssClasses = {
+      root: "svc-survey-element-toolbar sv-action-bar",
+      item: "svc-survey-element-toolbar__item",
+      itemWithTitle: "svc-survey-element-toolbar__item--with-text",
+      itemAsIcon: "svc-survey-element-toolbar__item--icon",
+      itemActive: "svc-survey-element-toolbar__item--active",
+      itemPressed: "svc-survey-element-toolbar__item--pressed",
+      itemIcon: "svc-survey-element-toolbar-item__icon",
+      itemTitle: "svc-survey-element-toolbar-item__title",
+      itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
+    };
+
     this.actionContainer.sizeMode = "small";
+    this.actionContainer.cssClasses = defaultCssClasses;
+    (<SurveyElementActionContainer>this.actionContainer).dotsItem.css += " svc-survey-element-toolbar__dots-item";
+    (<SurveyElementActionContainer>this.actionContainer).dotsItem.innerCss += " svc-survey-element-toolbar__item";
     this.topActionContainer = new ActionContainer();
+    this.topActionContainer.cssClasses = {
+      root: "svc-survey-element-top-toolbar sv-action-bar",
+      item: "svc-survey-element-top-toolbar__item",
+      itemIcon: "svc-survey-element-toolbar-item__icon",
+      itemTitle: "svc-survey-element-toolbar-item__title",
+      itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
+    };
     this.topActionContainer.sizeMode = "small";
     this.topActionContainer.setItems([this.expandCollapseAction]);
   }
@@ -477,7 +499,8 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       enabled: true,
       visibleIndex: 0,
       title: !!currItem ? currItem.title : editorLocalization.getString("qt." + this.currentType),
-      iconName: "icon-chevron_16x16"
+      iconName: "icon-chevron_16x16",
+      iconSize: "auto"
     };
     const newAction = this.createDropdownModel({
       actionData: actionData,
@@ -492,9 +515,6 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       }
       return "icon-chevron_16x16";
     });
-    newAction.iconSize = <any>new ComputedUpdater(() => {
-      return newAction.mode === "small" ? 24 : 16;
-    });
     newAction.disableHide = true;
     return newAction;
   }
@@ -632,9 +652,9 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
   private createDropdownModel(options: { actionData: IAction, items: Array<IAction>, updateListModel: (listModel: ListModel) => void }): Action {
     const newAction = createDropdownActionModel({
       id: options.actionData.id,
-      css: "sv-action--convertTo sv-action-bar-item--secondary",
+      css: "svc-dropdown-action--convertTo",
       iconName: options.actionData.iconName,
-      iconSize: 16,
+      iconSize: "auto",
       title: options.actionData.title,
       enabled: options.actionData.enabled,
       visibleIndex: options.actionData.visibleIndex,
@@ -669,12 +689,12 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       id: "isrequired",
       ariaChecked: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       ariaRole: "checkbox",
-      css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+      css: "svc-action-bar-item--right",
       innerCss: "svc-required-action",
       title: this.creator.getLocString("pe.isRequired"),
       visibleIndex: 20,
       iconName: "icon-required",
-      iconSize: 16,
+      iconSize: "auto",
       active: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       action: () => {
         if (
@@ -711,7 +731,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     if (!!inputTypeConverter) {
       items.push(inputTypeConverter);
     }
-    items[items.length - 1].css += " sv-action--convertTo-last";
+    items[items.length - 1].css += " svc-dropdown-action--convertTo-last";
     if (
       typeof element["isRequired"] !== "undefined" &&
       propertyExists(element, "isRequired") &&
diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
index 000d44a4e4..4e68c6eca4 100644
--- a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
+++ b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
@@ -123,6 +123,7 @@ export class SidebarModel extends Base {
     this._collapseAction = new Action({
       id: "svd-grid-hide",
       iconName: "icon-collapse-panel",
+      iconSize: "auto",
       css: "svd-grid-hide",
       locTitleName: "ed.hidePanel",
       showTitle: false,
@@ -147,6 +148,7 @@ export class SidebarModel extends Base {
       this._expandAction = new Action({
         id: "svd-grid-expand",
         iconName: "icon-expand-panel",
+        iconSize: "auto",
         css: "svd-grid-expand",
         needSeparator: true,
         action: () => {
diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar.scss b/packages/survey-creator-core/src/components/side-bar/side-bar.scss
index 05f56ab697..e312a6194a 100644
--- a/packages/survey-creator-core/src/components/side-bar/side-bar.scss
+++ b/packages/survey-creator-core/src/components/side-bar/side-bar.scss
@@ -327,9 +327,19 @@ $tabs-width: calc(var(--ctr-menu-toolbar-button-padding-left, 8px) + var(--ctr-m
   }
 }
 
-
 .svd-grid-hide {
   margin-inline-end: auto;
+
+  .sv-action-bar-item--icon {
+    padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-right, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-left, calcSize(1));
+  }
+  .sv-svg-icon {
+    width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
+    height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+  }
 }
 
 .svc-side-bar {
diff --git a/packages/survey-creator-core/src/components/side-bar/tab-control.scss b/packages/survey-creator-core/src/components/side-bar/tab-control.scss
index 9f9ee2936f..efb7509550 100644
--- a/packages/survey-creator-core/src/components/side-bar/tab-control.scss
+++ b/packages/survey-creator-core/src/components/side-bar/tab-control.scss
@@ -158,6 +158,11 @@
   justify-content: center;
   align-items: center;
 
+  .sv-svg-icon {
+    width: var(--ctr-menu-toolbar-button-icon-width, 24px);
+    height: var(--ctr-menu-toolbar-button-icon-height, 24px);
+  }
+
   use {
     fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
   }
diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
index 5466358b69..e193513f94 100644
--- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
@@ -163,6 +163,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
       id: "theme-settings",
       locTooltipName: "pe.tabs.creatorSettingTitle",
       iconName: "icon-config",
+      iconSize: "auto",
       pressed: false,
       action: () => {
         this.creator.sidebar.expandSidebar();
@@ -245,6 +246,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
           id: p.name,
           tooltip: p.title,
           iconName: pgTabIcons[p.name] || pgTabIcons["undefined"],
+          iconSize: "auto",
           active: this.activePageIsPropertyGrid && p.name === this.propertyGrid.survey.currentPage.name,
           pressed: false,
           action: () => {
@@ -314,6 +316,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     const toolboxAction = new Action({
       id: "svd-toolbox",
       iconName: "icon-toolbox",
+      iconSize: "auto",
       needSeparator: true,
       action: () => {
         if (!this.creator.showSidebar) {
@@ -332,6 +335,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.surveySettingsAction = new Action({
       id: "svd-settings",
       iconName: "icon-settings",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return notShortCircuitAnd(this.creator.toolboxLocation !== "sidebar", !this.creator.isMobileView);
       }),
@@ -354,6 +358,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.saveSurveyAction = new Action({
       id: "svd-save",
       iconName: "icon-save",
+      iconSize: "auto",
       action: () => this.creator.saveSurveyActionHandler(),
       active: false,
       enabled: false,
@@ -368,6 +373,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       visible: this.createVisibleUpdater(),
       active: true,
       locTitleName: "ed.designer",
@@ -378,6 +384,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       action: () => {
         this.creator.makeNewViewActive(this.creator.showThemeTab ? "theme" : "test");
       },
diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts
index 9c75cb313b..b5216001f2 100644
--- a/packages/survey-creator-core/src/components/tabs/designer.ts
+++ b/packages/survey-creator-core/src/components/tabs/designer.ts
@@ -1,9 +1,10 @@
-import { Base, PageModel, property, SurveyModel, ComputedUpdater, settings, IPage, ActionContainer } from "survey-core";
+import { Base, PageModel, property, SurveyModel, ComputedUpdater, settings, IPage, ActionContainer, propertyArray, IAnimationGroupConsumer, AnimationGroup, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation } from "survey-core";
 import { SurveyCreatorModel } from "../../creator-base";
 import { getLocString } from "../../editorLocalization";
 import { PagesController } from "../../pages-controller";
 import { SurveyHelper } from "../../survey-helper";
 import { DragDropSurveyElements } from "../../survey-elements";
+import { SurveyElementAdornerBase } from "../action-container-view-model";
 require("./designer.scss");
 
 export const initialSettingsAllowShowEmptyTitleInDesignMode = settings.allowShowEmptyTitleInDesignMode;
@@ -95,11 +96,13 @@ export class TabDesignerViewModel extends Base {
       id: "collapseAll",
       locTooltipName: "ed.collapseAllTooltip",
       iconName: "icon-collapseall-24x24",
+      iconSize: "auto",
       action: action
     }, {
       id: "expandAll",
       locTooltipName: "ed.expandAllTooltip",
       iconName: "icon-expandall-24x24",
+      iconSize: "auto",
       action: action
     }]);
   }
@@ -142,9 +145,6 @@ export class TabDesignerViewModel extends Base {
       }
       this.checkNewPage(updatePageController);
     }
-    if (propName === "pages" && obj.isDescendantOf("survey")) {
-      this.checkNewPage(true);
-    }
     this.isUpdatingNewPage = false;
   }
   private calculateDesignerCss() {
@@ -155,10 +155,15 @@ export class TabDesignerViewModel extends Base {
     this.showNewPage = false;
     this.newPage = undefined;
     this.checkNewPage(false);
+    this.updatePages();
     this.cssUpdater && this.cssUpdater.dispose();
     this.cssUpdater = new ComputedUpdater<string>(() => {
       return this.calculateDesignerCss();
     });
+    this.survey.registerFunctionOnPropertyValueChanged("pages", () => {
+      this.checkNewPage(true);
+      this.updatePages();
+    });
     this.designerCss = <any>this.cssUpdater;
     this.pagesController.onSurveyChanged();
   }
@@ -190,6 +195,9 @@ export class TabDesignerViewModel extends Base {
       this.pagesController.raisePagesChanged();
     }
   }
+  private updatePages() {
+    this.pages = this.survey.pages.concat(this.showNewPage ? [this.newPage] : []);
+  }
   public dispose(): void {
     super.dispose();
     this.cssUpdater && this.cssUpdater.dispose();
@@ -206,6 +214,60 @@ export class TabDesignerViewModel extends Base {
     return true;
   }
 
+  @propertyArray() _pages: Array<PageModel> = [];
+
+  public get pages(): Array<PageModel> {
+    return this._pages;
+  }
+  public set pages(val: Array<PageModel>) {
+    this.pagesAnimation.sync(val);
+  }
+
+  private pagesAnimation = new AnimationGroup(this.getPagesAnimationOptions(), (val) => {
+    this._pages = val;
+    this._pages.forEach(page => delete page["draggedFrom"]);
+  }, () => this._pages)
+
+  private getPagesAnimationOptions(): IAnimationGroupConsumer<PageModel> {
+    return {
+      getEnterOptions: (item, info) => {
+        return {
+          onBeforeRunAnimation: prepareElementForVerticalAnimation,
+          cssClass: "svc-page--enter",
+          onAfterRunAnimation: cleanHtmlElementAfterAnimation
+        };
+      },
+      getLeaveOptions: (item, info) => {
+        return {
+          onBeforeRunAnimation: prepareElementForVerticalAnimation,
+          cssClass: "svc-page--leave",
+          onAfterRunAnimation: cleanHtmlElementAfterAnimation };
+      },
+      isAnimationEnabled: () => {
+        return this.animationAllowed;
+      },
+      getKey(page) {
+        return page.id;
+      },
+      getAnimatedElement: (item) => SurveyElementAdornerBase.GetAdorner(item)?.rootElement?.parentElement,
+      getRerenderEvent: () => this.onElementRerendered,
+      onCompareArrays(options) {
+        const droppedPage = options.mergedItems.filter(page => page["draggedFrom"] !== undefined)[0];
+        if(droppedPage) {
+          options.reorderedItems = [];
+          options.addedItems = [droppedPage];
+          const ghostPage = new PageModel();
+          ghostPage.setSurveyImpl(droppedPage.survey as SurveyModel);
+          ghostPage.title = droppedPage.title;
+          ghostPage.num = droppedPage.num;
+          ghostPage["isGhost"] = true;
+          options.deletedItems = [ghostPage];
+          options.mergedItems.splice(droppedPage["draggedFrom"], 0, ghostPage);
+        }
+      },
+    };
+  }
+
   public clickDesigner() {
     this.creator.selectedElement = this.creator.survey;
   }
diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts b/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
index 90893813e1..a00d78091d 100644
--- a/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
@@ -96,7 +96,7 @@ export abstract class JsonEditorBaseModel extends Base {
         title: title,
         tooltip: error.text,
         iconName: "icon-error",
-        iconSize: 16,
+        iconSize: "auto",
         data: {
           error: error,
           showFixButton: error.isFixable,
@@ -162,6 +162,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.importAction = new Action({
       id: "svc-json-import",
       iconName: "icon-load",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonImportButton",
       locTooltipName: "ed.surveyJsonImportButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
@@ -188,6 +189,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.exportAction = new Action({
       id: "svc-json-export",
       iconName: "icon-download",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonExportButton",
       locTooltipName: "ed.surveyJsonExportButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
@@ -202,6 +204,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.copyAction = new Action({
       id: "svc-json-copy",
       iconName: "icon-copy",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonCopyButton",
       locTooltipName: "ed.surveyJsonCopyButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
index 4f26a931ed..632314f631 100644
--- a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
+++ b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
@@ -100,6 +100,8 @@ svc-tab-json-editor-textarea {
 
 .svc-json-error__icon {
   fill: $red;
+  width: var(--ctr-code-viewer-code-error-row-icon-width, calcSize(2));
+  height: var(--ctr-code-viewer-code-error-row-icon-height, calcSize(2));
 }
 
 .svc-json-error__container {
diff --git a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
index a05636f04b..71438ae3d1 100644
--- a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
@@ -146,6 +146,7 @@ export class TabLogicPlugin implements ICreatorPlugin {
       this.fastEntryAction = new Action({
         id: "svc-logic-fast-entry",
         iconName: "icon-fast-entry",
+        iconSize: "auto",
         locTitleName: "pe.fastEntry",
         visible: false,
         component: "sv-action-bar-item",
diff --git a/packages/survey-creator-core/src/components/tabs/preview.ts b/packages/survey-creator-core/src/components/tabs/preview.ts
index 649639839c..aeebf6a159 100644
--- a/packages/survey-creator-core/src/components/tabs/preview.ts
+++ b/packages/survey-creator-core/src/components/tabs/preview.ts
@@ -73,6 +73,12 @@ export class PreviewViewModel extends Base {
   constructor(protected surveyProvider: SurveyCreatorModel, private startThemeClasses: any = defaultV2Css) {
     super();
     this.simulator = new SurveySimulatorModel(surveyProvider);
+    this.pages.cssClasses = {
+      root: "sv-action-bar svc-pages-toolbar",
+      item: "sv-action-bar-item svc-survey-element-toolbar__item",
+      itemAsIcon: "svc-survey-element-toolbar__item--icon",
+      itemIcon: "sv-action-bar-item__icon svc-survey-element-toolbar-item__icon",
+    };
   }
 
   public get isMobileView() {
@@ -239,9 +245,6 @@ export class PreviewViewModel extends Base {
       this.prevPageAction.iconName = <any>new ComputedUpdater<string>(() => {
         return this.surveyProvider.isMobileView ? "icon-arrow-left" : "icon-arrow-left_16x16";
       });
-      this.prevPageAction.iconSize = <any>new ComputedUpdater<number>(() => {
-        return this.surveyProvider.isMobileView ? 24 : 16;
-      });
       this.prevPageAction.action = () => setNearPage(false);
       pageActions.push(this.prevPageAction);
     }
@@ -278,9 +281,6 @@ export class PreviewViewModel extends Base {
       this.nextPageAction.iconName = <any>new ComputedUpdater<string>(() => {
         return this.surveyProvider.isMobileView ? "icon-arrow-right" : "icon-arrow-right_16x16";
       });
-      this.nextPageAction.iconSize = <any>new ComputedUpdater<number>(() => {
-        return this.surveyProvider.isMobileView ? 24 : 16;
-      });
       this.nextPageAction.action = () => setNearPage(true);
       pageActions.push(this.nextPageAction);
     }
diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
index b0121bcbf7..5bcb7d5f80 100644
--- a/packages/survey-creator-core/src/components/tabs/test-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
@@ -150,6 +150,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.deviceSelectorAction = createDropdownActionModel({
         id: "deviceSelector",
         iconName: "icon-device-desktop",
+        iconSize: "auto",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
           return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
@@ -168,6 +169,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.orientationSelectorAction = new Action({
         id: "orientationSelector",
         iconName: "icon-device-rotate",
+        iconSize: "auto",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
           return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
@@ -183,6 +185,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.invisibleToggleAction = new Action({
         id: "showInvisible",
         iconName: "icon-invisible-items",
+        iconSize: "auto",
         mode: "small",
         needSeparator: <any>new ComputedUpdater<boolean>(() => {
           return !this.creator.isMobileView;
@@ -236,6 +239,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.changeThemeAction = new Action({
         id: "themeSwitcher",
         iconName: "icon-theme",
+        iconSize: "auto",
         component: "sv-action-bar-item-dropdown",
         mode: "large",
         locTitleName: this.getThemeLocName(getStartThemeName()),
@@ -276,6 +280,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       action: () => { this.creator.makeNewViewActive("designer"); },
       visible: this.createVisibleUpdater(),
       locTitleName: "ed.designer",
@@ -285,6 +290,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       active: true,
       visible: this.createVisibleUpdater(),
       locTitleName: "tabs.preview",
@@ -295,6 +301,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.prevPageAction = new Action({
       id: "prevPage",
       iconName: "icon-arrow-left_16x16",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return this.creator.isMobileView;
       }),
@@ -304,6 +311,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.nextPageAction = new Action({
       id: "nextPage",
       iconName: "icon-arrow-right_16x16",
+      iconSize: "auto",
       visible: false
     });
     return items;
diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
index 537946e9e7..f3afe2d7b4 100644
--- a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
@@ -499,6 +499,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       action: () => { this.creator.makeNewViewActive("designer"); },
       visible: this.createVisibleUpdater(),
       locTitleName: "ed.designer",
@@ -508,6 +509,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.prevPageAction = new Action({
       id: "prevPage",
       iconName: "icon-arrow-left_16x16",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return this.creator.isMobileView;
       }),
@@ -517,12 +519,14 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.nextPageAction = new Action({
       id: "nextPage",
       iconName: "icon-arrow-right_16x16",
+      iconSize: "auto",
       visible: false
     });
 
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       active: true,
       visible: this.createVisibleUpdater(),
       locTitleName: "tabs.preview",
@@ -533,6 +537,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.testAgainAction = new Action({
       id: "testSurveyAgain",
       visible: false,
+      iconSize: "auto",
       locTitleName: "ed.testSurveyAgain",
       action: () => {
         this.model.testAgain();
@@ -542,6 +547,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.undoAction = new Action({
       id: "action-undo-theme",
       iconName: "icon-undo",
+      iconSize: "auto",
       locTitleName: "ed.undo",
       showTitle: false,
       visible: this.createVisibleUpdater(),
@@ -550,6 +556,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.redoAction = new Action({
       id: "action-redo-theme",
       iconName: "icon-redo",
+      iconSize: "auto",
       locTitleName: "ed.redo",
       showTitle: false,
       visible: this.createVisibleUpdater(),
@@ -561,6 +568,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.saveThemeAction = new Action({
       id: "svd-save-theme",
       iconName: "icon-save",
+      iconSize: "auto",
       action: () => {
         this.creator.saveThemeActionHandler();
         this.saveThemeAction.enabled = false;
@@ -579,6 +587,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.resetTheme = new Action({
       id: "svc-reset-theme",
       iconName: "icon-reset",
+      iconSize: "auto",
       locTitleName: "ed.themeResetButton",
       locTooltipName: "ed.themeResetButton",
       mode: "small",
@@ -596,6 +605,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.themeSettingsAction = new Action({
       id: "svc-theme-settings",
       iconName: "icon-theme",
+      iconSize: "auto",
       action: () => {
         if (!this.creator.showSidebar) {
           this.creator.setShowSidebar(true, true);
@@ -613,6 +623,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.importAction = new Action({
       id: "svc-theme-import",
       iconName: "icon-load",
+      iconSize: "auto",
       locTitleName: "ed.themeImportButton",
       locTooltipName: "ed.themeImportButton",
       visible: this.createVisibleUpdater(),
@@ -639,6 +650,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.exportAction = new Action({
       id: "svc-theme-export",
       iconName: "icon-download",
+      iconSize: "auto",
       locTitleName: "ed.themeExportButton",
       locTooltipName: "ed.themeExportButton",
       visible: this.createVisibleUpdater(),
@@ -654,6 +666,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
       this.invisibleToggleAction = new Action({
         id: "showInvisible",
         iconName: "icon-invisible-items",
+        iconSize: "auto",
         mode: "small",
         locTitleName: "ts.showInvisibleElements",
         visible: false,
diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts
index b55cf1f073..1a2c0a671b 100644
--- a/packages/survey-creator-core/src/components/tabs/translation.ts
+++ b/packages/survey-creator-core/src/components/tabs/translation.ts
@@ -771,6 +771,7 @@ export class Translation extends Base implements ITranslationLocales {
           const locale = q.value[rowIndex].name;
           options.actions.splice(0, 0, new Action({
             iconName: "icon-language",
+            iconSize: "auto",
             locTooltipName: "ed.translateUsigAI",
             location: "end",
             action: () => this.showTranslationEditor(locale)
@@ -1087,6 +1088,7 @@ export class Translation extends Base implements ITranslationLocales {
     this.addLanguageAction = createDropdownActionModel({
       id: "svc-translation-choose-language",
       iconName: "icon-add",
+      iconSize: "auto",
       enabled: <any>(new ComputedUpdater(() => this.isChooseLanguageEnabled && !this.readOnly)),
     }, {
       items: this.chooseLanguageActions,
@@ -1577,11 +1579,12 @@ export class TranslationEditor {
     navigationBar.cssClasses = survey.css.actionBar;
     navigationBar.containerCss = survey.css.footer;
     survey.addNavigationItem(this.createLocaleFromAction());
-    const actionCss = "svc-action-bar-item--right sv-action-bar-item--secondary";
+    const actionCss = "svc-action-bar-item--right";
     if (this.options.getHasMachineTranslation()) {
       survey.addNavigationItem(new Action({
         id: "svc-translation-machine",
         iconName: "icon-language",
+        iconSize: "auto",
         css: actionCss,
         locTitleName: "ed.translateUsigAI",
         component: "sv-action-bar-item",
@@ -1646,7 +1649,6 @@ export class TranslationEditor {
       css: "st-translation-machine-from",
       location: "start",
       title: defaultLocaleTitle,
-      iconSize: "auto",
       innerCss: "st-translation-machine-from__btn",
       data: {
         additionalTitleCss: "st-translation-machine-from__title",
@@ -1665,6 +1667,7 @@ export class TranslationEditor {
     if(!!action) {
       action.enabled = this.fromLocales.length > 0;
       action.iconName = action.enabled ? "icon-chevron_16x16" : undefined;
+      action.iconSize = "auto";
       action.data.containerCss = new CssClassBuilder()
         .append("st-translation-machine-from__container")
         .append("st-translation-machine-from__container--disabled", !action.enabled)
@@ -1680,6 +1683,7 @@ export function createImportCSVAction(action: () => void, needSeparator: boolean
   return new Action({
     id: "svc-translation-import",
     iconName: "icon-load",
+    iconSize: "auto",
     locTitleName: "ed.translationImportFromSCVButton",
     locTooltipName: "ed.translationImportFromSCVButton",
     mode: isInEditor ? "large" : "small",
@@ -1692,6 +1696,7 @@ export function createExportCSVAction(action: () => void, isInEditor: boolean =
   return new Action({
     id: "svc-translation-export",
     iconName: "icon-download",
+    iconSize: "auto",
     locTitleName: "ed.translationExportToSCVButton",
     locTooltipName: "ed.translationExportToSCVButton",
     mode: isInEditor ? "large" : "small",
diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
index 01c0e45fb1..df7cf98fde 100644
--- a/packages/survey-creator-core/src/creator-base.ts
+++ b/packages/survey-creator-core/src/creator-base.ts
@@ -1939,11 +1939,16 @@ export class SurveyCreatorModel extends Base
     });
   }
   public restorePagesState(): void {
-    setTimeout(() => {
-      this.survey.pages.forEach(page => {
+    this.survey.pages.forEach(page => {
+      if(page["draggedFrom"] !== undefined) {
+        const adorner = SurveyElementAdornerBase.GetAdorner(page);
+        adorner?.blockAnimations();
         SurveyElementAdornerBase.RestoreStateFor(page);
-      });
-    }, 10);
+        adorner?.releaseAnimations();
+      } else {
+        SurveyElementAdornerBase.RestoreStateFor(page);
+      }
+    });
   }
   private initDragDropChoices() {
     this.dragDropChoices = new DragDropChoices(null, this);
@@ -2090,7 +2095,8 @@ export class SurveyCreatorModel extends Base
   private doOnPageAdded(page: PageModel) {
     var options = { page: page };
     this.onPageAdded.fire(this, options);
-    this.setModified({ type: "PAGE_ADDED", newValue: options.page });
+    const pType = this.isCopyingPage ? "ELEMENT_COPIED" : "PAGE_ADDED";
+    this.setModified({ type: pType, newValue: options.page });
   }
   private getPageByElement(obj: Base): PageModel {
     return this.survey.getPageByElement(<IElement>(<any>obj));
@@ -2668,6 +2674,7 @@ export class SurveyCreatorModel extends Base
    * @see onPageAdded
    */
   public copyPage(page: PageModel): PageModel {
+    this.isCopyingPage = true;
     var newPage = <PageModel>(<any>this.copyElement(page));
     var index = this.survey.pages.indexOf(page);
     if (index > -1) {
@@ -2675,6 +2682,7 @@ export class SurveyCreatorModel extends Base
     } else {
       this.survey.pages.push(newPage);
     }
+    this.isCopyingPage = false;
     newPage.questions.forEach(q => {
       this.addNewElementReason = "ELEMENT_COPIED";
       this.doOnQuestionAdded(q, q.parent);
@@ -2684,6 +2692,7 @@ export class SurveyCreatorModel extends Base
     this.addNewElementReason = "";
     return newPage;
   }
+  private isCopyingPage: boolean;
 
   protected deleteObjectCore(obj: any) {
     if (obj.isPage) {
@@ -3745,6 +3754,7 @@ export class SurveyCreatorModel extends Base
       title: item.title,
       id: item.name,
       iconName: item.iconName,
+      iconSize: "auto",
       visible: item.visible,
       enabled: item.enabled,
       needSeparator: needSeparator
diff --git a/packages/survey-creator-core/src/custom-questions/question-color.ts b/packages/survey-creator-core/src/custom-questions/question-color.ts
index bc985f4425..cafc78e7b3 100644
--- a/packages/survey-creator-core/src/custom-questions/question-color.ts
+++ b/packages/survey-creator-core/src/custom-questions/question-color.ts
@@ -151,6 +151,7 @@ export class QuestionColorModel extends QuestionTextModel {
     const dropdownAction = this.dropdownAction;
     dropdownAction.cssClasses = { item: classes.colorDropdown };
     dropdownAction.iconName = classes.colorDropdownIcon;
+    dropdownAction.iconSize = "auto" as any;
     const listModel = <ListModel<ItemValue>>dropdownAction.popupModel.contentComponentData.model;
     listModel.cssClasses = {};
     listModel.cssClasses = {
diff --git a/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts b/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
index 6352ee4008..6853836326 100644
--- a/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
+++ b/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
@@ -156,6 +156,7 @@ export class UndoRedoController extends Base {
     this.undoAction = new Action({
       id: "action-undo",
       iconName: "icon-undo",
+      iconSize: "auto",
       locTitleName: "ed.undo",
       showTitle: false,
       visible: <any>new ComputedUpdater(() => this.creator.activeTab === "designer"),
@@ -167,6 +168,7 @@ export class UndoRedoController extends Base {
     this.redoAction = new Action({
       id: "action-redo",
       iconName: "icon-redo",
+      iconSize: "auto",
       locTitleName: "ed.redo",
       showTitle: false,
       visible: <any>new ComputedUpdater(() => this.creator.activeTab === "designer"),
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
index dfbc604c8f..35d06c6cfd 100644
--- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
@@ -39,8 +39,16 @@
   }
 }
 
+.spg-action-button--icon {
+  padding: var(--ctr-actionbar-button-padding-top-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-right-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-bottom-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-left-large-icon, calcSize(1));
+}
 .spg-action-button__icon {
   display: block;
+  width: var(--ctr-actionbar-button-icon-width, calcSize(3));
+  height: var(--ctr-actionbar-button-icon-height, calcSize(3));
 
   use {
     fill: var(--ctr-actionbar-button-icon-color, $foreground-light);
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
index f709d8d637..ad23f727c3 100644
--- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
@@ -146,10 +146,12 @@
 
 .spg-question__erbox {
   @include ctrDefaultFont;
-  padding: calcSize(1) calcSize(1.5) calcSize(1) calcSize(1.5);
+  padding: var(--ctr-error-message-padding-top, calcSize(1)) var(--ctr-error-message-padding-right, calcSize(1.5))
+    var(--ctr-error-message-padding-bottom, calcSize(1)) var(--ctr-error-message-padding-left, calcSize(1.5));
+
   color: var(--ctr-error-message-text-color, $foreground);
   background-color: var(--ctr-error-message-background-color, $red-light);
-  border-radius: calcSize(0.5);
+  border-radius: var(--ctr-error-message-corner-radius, calcSize(0.5));
 }
 
 .spg-question__erbox,
@@ -157,15 +159,18 @@
 sv-question-error {
   & > div {
     display: flex;
-    gap: calcSize(1);
+    gap: var(--ctr-error-message-gap, calcSize(1));
   }
 }
 
-
-
 .spg-question__erbox-icon {
+  width: var(--ctr-error-message-icon-width, calcSize(3));
+  height: var(--ctr-error-message-icon-height, calcSize(3));
+  
   .sv-svg-icon {
     vertical-align: top;
+    width: var(--ctr-error-message-icon-width, calcSize(3));
+    height: var(--ctr-error-message-icon-height, calcSize(3));
   }
 
   use {
diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
index 1bee4c6c2e..5236c0cd7b 100644
--- a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
@@ -124,8 +124,11 @@
     flex-grow: 1;
 
     .spg-action-button--icon {
-      opacity: 0.5;
-      padding: calcSize(0.5);
+      padding: var(--ctr-actionbar-button-padding-top-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-right-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-bottom-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-left-small-icon, calcSize(0.5));
+      opacity: var(--ctr-actionbar-button-opacity-muted, 0.5);
     }
 
     .spg-action-button--icon:focus,
@@ -137,6 +140,11 @@
       opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
     }
 
+    .spg-action-button__icon {
+      width: var(--ctr-actionbar-button-icon-width-small, calcSize(2));
+      height: var(--ctr-actionbar-button-icon-height-small, calcSize(2));
+    }
+
     svg {
       fill: $foreground-dim-light;
     }
diff --git a/packages/survey-creator-core/src/property-grid/index.ts b/packages/survey-creator-core/src/property-grid/index.ts
index 7ced86f63d..4963069fa0 100644
--- a/packages/survey-creator-core/src/property-grid/index.ts
+++ b/packages/survey-creator-core/src/property-grid/index.ts
@@ -373,7 +373,6 @@ export class PropertyGridTitleActionsCreator {
     if (!!helpAction) {
       actions.unshift(helpAction);
       question.getTitleToolbar().containerCss += " spg-title-toolbar--single-help-action";
-      helpAction.iconSize = 16;
     }
     if (actions.length > 0) {
       options.titleActions = actions;
@@ -390,6 +389,7 @@ export class PropertyGridTitleActionsCreator {
       title: getLocString("pe.clear"),
       showTitle: false,
       iconName: "icon-clear",
+      iconSize: "auto",
       innerCss: "spg-action-button--danger",
       enabled: enabled,
       visible: <any>new ComputedUpdater<boolean>(() => {
@@ -428,6 +428,7 @@ export class PropertyGridTitleActionsCreator {
     var setupAction = {
       id: "property-grid-setup",
       iconName: property.isArray ? "icon-fast-entry" : "icon-wizard",
+      iconSize: "auto",
       enabled: enabled,
       title: getLocString("pe.edit"),
       showTitle: false,
@@ -444,6 +445,7 @@ export class PropertyGridTitleActionsCreator {
       tooltip: question.description,
       id: "property-grid-help",
       iconName: this.getHelpActionIconName(question),
+      iconSize: "auto",
       css: "spg-help-action",
       showTitle: false,
       action: () => {
diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
index 24127617dc..e5b3cedaee 100644
--- a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
+++ b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
@@ -159,7 +159,7 @@ export class PropertyGridViewModel extends Base {
     this.objectSelectionAction = new MenuButton({
       id: "svd-grid-object-selector",
       title: this.selectedElementName,
-      css: "sv-action--object-selector sv-action-bar-item--secondary",
+      css: "sv-action--object-selector",
       component: "sv-action-bar-item-dropdown",
       disableHide: true,
       pressed: false,
diff --git a/packages/survey-creator-core/src/responsivity.scss b/packages/survey-creator-core/src/responsivity.scss
index e768c7a026..7fd4e418d1 100644
--- a/packages/survey-creator-core/src/responsivity.scss
+++ b/packages/survey-creator-core/src/responsivity.scss
@@ -117,24 +117,24 @@
   .svc-question__content-actions {
     width: calc(100% + 3 * #{$base-unit});
 
-    .sv-action-bar-item {
+    .svc-survey-element-toolbar__item {
       border: 0;
     }
   }
 
   .svc-page__content-actions {
-    .sv-action-bar {
+    .svc-page-toolbar {
       padding-right: calcSize(1);
 
       .sv-action {
         .sv-action__content {
           padding-right: 0;
-
-          .sv-action-bar-item__title--with-icon {
-            display: none;
-          }
         }
       }
     }
   }
+
+  .svc-page-toolbar-item__title--with-icon {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/packages/survey-creator-core/src/survey-elements.ts b/packages/survey-creator-core/src/survey-elements.ts
index 7df2293c6a..5a70a5df8a 100644
--- a/packages/survey-creator-core/src/survey-elements.ts
+++ b/packages/survey-creator-core/src/survey-elements.ts
@@ -427,8 +427,14 @@ export class DragDropSurveyElements extends DragDropCore<any> {
 
     if (dragged.isPage && dragged instanceof PageModel) {
       const survey = dragged.survey;
-      survey.pages.splice(survey.pages.indexOf(dragged), 1);
-      survey.pages.splice(survey.pages.indexOf(this.dropTarget) + (this.dragOverLocation === DragTypeOverMeEnum.Top ? 0 : 1), 0, dragged);
+      const indexOfDraggedPage = survey.pages.indexOf(dragged);
+      survey.pages.splice(indexOfDraggedPage, 1);
+      const indexOfDropTarget = survey.pages.indexOf(this.dropTarget) + (this.dragOverLocation === DragTypeOverMeEnum.Top ? 0 : 1);
+      survey.pages.splice(indexOfDropTarget, 0, dragged);
+
+      if(indexOfDraggedPage !== indexOfDropTarget) {
+        dragged["draggedFrom"] = indexOfDraggedPage < indexOfDropTarget ? indexOfDraggedPage : indexOfDraggedPage + 1;
+      }
       return dragged;
     }
 
diff --git a/packages/survey-creator-core/src/textWorker.ts b/packages/survey-creator-core/src/textWorker.ts
index c1988e4acd..bc56bba6de 100644
--- a/packages/survey-creator-core/src/textWorker.ts
+++ b/packages/survey-creator-core/src/textWorker.ts
@@ -1,14 +1,24 @@
-import { SurveyModel, JsonError, Base, ISurveyElement } from "survey-core";
+import { SurveyModel, JsonError, Base, ISurveyElement, ISurveyData, ISurvey } from "survey-core";
 import { SurveyHelper } from "./survey-helper";
 import { SurveyJSON5 } from "./json5";
 import { settings } from "./creator-settings";
 
 class SurveyForTextWorker extends SurveyModel {
+  private isRunEndLoadingFromJson: boolean;
   constructor(jsonObj: any) {
     super();
     this.setDesignMode(true);
     this.fromJSON(jsonObj);
   }
+  //Run endLoading before fixing issues with unique names
+  public runEndLoadingFromJson(): void {
+    if(this.isRunEndLoadingFromJson) return;
+    this.isRunEndLoadingFromJson = true;
+    super.endLoadingFromJson();
+  }
+  //Do nothing on end loading
+  endLoadingFromJson(): void {}
+  getSurveyData(): ISurveyData { return null; }
 }
 
 class SurveyTextWorkerJsonErrorFixerBase {
@@ -113,7 +123,11 @@ class SurveyTextWorkerJsonDuplicateNameErrorFixer extends SurveyTextWorkerJsonEr
     return this.getNewIndex(text, "\"name\":", at, end);
   }
   protected updatedJsonObjOnFix(json: any): void {
-    json["name"] = SurveyHelper.getNewElementName(<ISurveyElement><any>this.element);
+    const el: any = this.element;
+    if(el.survey?.runEndLoadingFromJson) {
+      el.survey.runEndLoadingFromJson();
+    }
+    json["name"] = SurveyHelper.getNewElementName(el);
   }
 }
 class SurveyTextWorkerJsonRequiredPropertyErrorFixer extends SurveyTextWorkerJsonErrorFixer {
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index 6cec96e155..3e14c6d5a6 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -49,15 +49,19 @@ const Theme = {
     "--ctr-toolbox-item-text-opacity-disabled": 0.25,
     "--ctr-page-navigator-button-opacity-pressed": 0.5,
     "--ctr-button-text-opacity-disabled": 0.25,
-    "--ctr-notification-opacity": "75px",
+    "--ctr-notification-opacity": 0.75,
     "--ctr-notification-opacity-error": 1,
     "--ctr-toolbox-group-header-border-width-top": "0px",
     "--ctr-toolbox-group-header-border-width-left": "0px",
     "--ctr-toolbox-group-header-border-width-right": "0px",
+    "--ctr-data-table-cell-drop-down-arrow-opacity": 0.5,
     "--ctr-data-table-row-padding-left": "0px",
+    "--ctr-data-table-row-border-width-last-row": "0px",
     "--ctr-toolbox-separator-padding-right": "0px",
     "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5,
     "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25,
+    "--ctr-survey-question-panel-toolbar-item-opacity-muted": 0.5,
+    "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": 0.5,
     "--ctr-label-padding-left": "0px",
     "--ctr-label-padding-right": "0px",
     "--ctr-survey-action-button-opacity-disabled": 0.25,
@@ -90,7 +94,7 @@ const Theme = {
     "--ctr-toolbox-item-shadow-subitem-1-color": "#00000000",
     "--ctr-toolbox-item-shadow-subitem-2-color": "#00000000",
     "--ctr-toolbox-submenu-margin-left": "0px",
-    "--ctr-survey-page-drag-indicator-opacity": "50px",
+    "--ctr-survey-page-drag-indicator-opacity": 0.5,
     "--ctr-toggle-button-thumb-border-width": "0px",
     "--ctr-line-height-unit": "8px",
     "--ctr-font-unit": "8px",
@@ -149,6 +153,7 @@ const Theme = {
     "--ctr-actionbar-button-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-popup-menu-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-popup-menu-footer-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-icon-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-button-group-item-background-color-disabled": "var(--sjs-layer-1-background-500)",
     "--ctr-radio-button-background-color-selected-hovered": "var(--sjs-layer-1-background-500)",
     "--ctr-checkbox-background-color-selected-hovered": "var(--sjs-layer-1-background-500)",
@@ -172,6 +177,8 @@ const Theme = {
     "--ctr-popup-corner-radius": "var(--sjs-corner-radius-x2)",
     "--ctr-shadow-large-color": "var(--sjs-special-glow)",
     "--ctr-shadow-medium-color": "var(--sjs-special-glow)",
+    "--ctr-button-contextual-button-margin-horizontal": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-margin-vertical": "var(--sjs-spacing-x1)",
     "--ctr-button-padding-horizontal-small": "var(--sjs-spacing-x4)",
     "--ctr-button-padding-vertical-small": "var(--sjs-spacing-x150)",
     "--ctr-button-corner-radius": "var(--sjs-corner-radius-x075)",
@@ -241,6 +248,10 @@ const Theme = {
     "--ctr-actionbar-button-padding-bottom-large-icon": "var(--sjs-spacing-x1)",
     "--ctr-actionbar-button-text-color": "var(--sjs-primary-background-500)",
     "--ctr-actionbar-button-background-color-hovered": "var(--sjs-primary-background-10)",
+    "--ctr-actionbar-button-padding-left-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-right-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-top-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-bottom-small-icon": "var(--sjs-spacing-x05)",
     "--ctr-actionbar-button-padding-left-medium-text": "var(--sjs-spacing-x2)",
     "--ctr-actionbar-button-padding-right-medium-text": "var(--sjs-spacing-x2)",
     "--ctr-actionbar-button-padding-top-medium-text": "var(--sjs-spacing-x05)",
@@ -266,6 +277,10 @@ const Theme = {
     "--ctr-editor-button-padding-bottom": "var(--sjs-spacing-x1)",
     "--ctr-editor-button-padding-left": "var(--sjs-spacing-x1)",
     "--ctr-editor-button-padding-right": "var(--sjs-spacing-x1)",
+    "--ctr-actionbar-button-icon-width-small": "var(--sjs-size-x2)",
+    "--ctr-actionbar-button-icon-height-small": "var(--sjs-size-x2)",
+    "--ctr-actionbar-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-actionbar-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-editor-color-swatch-icon-width": "var(--sjs-size-x2)",
     "--ctr-editor-color-swatch-icon-height": "var(--sjs-size-x2)",
     "--ctr-editor-button-icon-width": "var(--sjs-size-x3)",
@@ -315,6 +330,8 @@ const Theme = {
     "--ctr-page-navigator-item-gap": "var(--sjs-spacing-x1)",
     "--ctr-page-navigator-item-corner-radius": "var(--sjs-corner-radius-x075)",
     "--ctr-page-navigator-button-padding": "var(--sjs-spacing-x125)",
+    "--ctr-page-navigator-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-page-navigator-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-page-navigator-button-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-page-navigator-button-background-color-hovered": "var(--sjs-primary-background-10)",
     "--ctr-button-background-color": "var(--sjs-layer-1-background-500)",
@@ -426,12 +443,14 @@ const Theme = {
     "--ctr-data-table-cell-padding-right": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-padding-top": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-padding-bottom": "var(--sjs-spacing-x1)",
+    "--ctr-data-table-cell-drop-down-arrow-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-data-table-cell-text-color-header": "var(--sjs-layer-3-foreground-50)",
     "--ctr-data-table-cell-border-color-focused": "var(--sjs-primary-background-500)",
     "--ctr-data-table-cell-corner-radius-focused": "var(--sjs-corner-radius-x075)",
     "--ctr-data-table-row-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-data-table-row-background-color-header": "var(--sjs-layer-3-background-500)",
     "--ctr-data-table-row-border-color": "var(--sjs-border-10)",
+    "--ctr-data-table-row-border-width": "var(--sjs-stroke-x1)",
     "--ctr-data-table-row-padding-top": "var(--sjs-spacing-x05)",
     "--ctr-data-table-row-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-data-table-row-padding-right": "var(--sjs-spacing-x05)",
@@ -440,6 +459,14 @@ const Theme = {
     "--ctr-data-table-row-padding-bottom-header": "var(--sjs-spacing-x1)",
     "--ctr-data-table-row-background-color-drop-spot": "var(--sjs-layer-1-background-400)",
     "--ctr-error-message-background-color": "var(--sjs-semantic-red-background-10)",
+    "--ctr-error-message-corner-radius": "var(--sjs-corner-radius-x05)",
+    "--ctr-error-message-gap": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-padding-left": "var(--sjs-spacing-x150)",
+    "--ctr-error-message-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-error-message-padding-top": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-padding-bottom": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-icon-width": "var(--sjs-size-x3)",
+    "--ctr-error-message-icon-height": "var(--sjs-size-x3)",
     "--ctr-error-message-icon-color": "var(--sjs-semantic-red-background-500)",
     "--ctr-error-message-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-toolbox-separator-color": "var(--sjs-border-25)",
@@ -454,18 +481,42 @@ const Theme = {
     "--ctr-toolbox-group-gap": "var(--sjs-spacing-x05)",
     "--ctr-toolbox-group-padding-left": "var(--sjs-spacing-x150)",
     "--ctr-toolbox-group-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-button-contextual-button-corner-radius": "var(--sjs-corner-radius-x05)",
+    "--ctr-button-contextual-button-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-right": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-top": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-bottom": "var(--sjs-spacing-x1)",
     "--ctr-button-contextual-button-background-color-hovered": "var(--sjs-layer-3-background-500)",
+    "--ctr-button-contextual-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-button-contextual-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-button-contextual-button-background-color-focused": "var(--sjs-primary-background-10)",
+    "--ctr-survey-question-panel-toolbar-item-gap": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-padding-left": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-padding-right": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-padding-top": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-survey-question-panel-toolbar-item-background-color-hovered": "var(--sjs-layer-1-background-400)",
+    "--ctr-survey-question-panel-toolbar-item-icon-container-width": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-toolbar-item-icon-container-height": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-left": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-right": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-top": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-survey-question-panel-toolbar-item-icon-color": "var(--sjs-secondary-background-500)",
     "--ctr-survey-question-panel-toolbar-item-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-survey-question-panel-toolbar-item-background-color-selected": "var(--sjs-secondary-background-10)",
     "--ctr-survey-page-toolbar-item-icon-color-pressed": "var(--sjs-layer-3-foreground-50)",
     "--ctr-survey-page-toolbar-item-text-color": "var(--sjs-layer-3-foreground-100)",
+    "--ctr-survey-question-panel-toolbar-item-padding-left-with-text": "var(--sjs-spacing-x1)",
+    "--ctr-survey-question-panel-toolbar-item-padding-right-with-text": "var(--sjs-spacing-x1)",
     "--ctr-survey-page-toolbar-item-background-color-selected": "var(--sjs-primary-background-10)",
     "--ctr-survey-question-panel-drag-area-drag-indicator-color": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-question-panel-drag-area-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-drag-area-drag-indicator-height": "var(--sjs-size-x2)",
     "--ctr-preview-pager-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-preview-pager-border-color": "var(--sjs-border-25)",
+    "--ctr-code-viewer-code-error-row-icon-width": "var(--sjs-size-x2)",
+    "--ctr-code-viewer-code-error-row-icon-height": "var(--sjs-size-x2)",
     "--ctr-code-viewer-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-code-viewer-text-color": "var(--sjs-code-gray-300)",
     "--ctr-code-viewer-line-number-panel-background-color": "var(--sjs-layer-2-background-500)",
@@ -515,6 +566,8 @@ const Theme = {
     "--ctr-search-button-padding-vertical": "var(--sjs-spacing-x05)",
     "--ctr-search-button-padding-horizontal": "var(--sjs-spacing-x05)",
     "--ctr-search-button-background-color-hovered": "var(--sjs-layer-1-background-400)",
+    "--ctr-search-button-icon-width": "var(--sjs-size-x2)",
+    "--ctr-search-button-icon-height": "var(--sjs-size-x2)",
     "--ctr-property-grid-search-button-icon-color": "var(--sjs-layer-3-foreground-50)",
     "--ctr-property-grid-search-button-background-color-hovered": "var(--sjs-layer-3-background-400)",
     "--ctr-property-grid-search-icon-color": "var(--sjs-layer-3-foreground-50)",
@@ -522,6 +575,7 @@ const Theme = {
     "--ctr-scrollbar-background-color": "var(--sjs-border-10)",
     "--ctr-scrollbar-padding-vertical": "var(--sjs-spacing-x05)",
     "--ctr-scrollbar-width": "var(--sjs-size-x150)",
+    "--ctr-survey-question-panel-toolbar-gap": "var(--sjs-spacing-x1)",
     "--ctr-survey-info-panel-background-color": "var(--sjs-layer-2-background-500)",
     "--ctr-survey-info-panel-text-color": "var(--sjs-layer-2-foreground-50)",
     "--ctr-survey-action-button-icon-color-positive": "var(--sjs-primary-background-500)",
@@ -531,6 +585,12 @@ const Theme = {
     "--ctr-survey-action-button-background-color-hovered-positive": "var(--sjs-primary-background-10)",
     "--ctr-survey-action-button-background-color-hovered-negative": "var(--sjs-semantic-red-background-10)",
     "--ctr-survey-action-button-icon-color-disabled": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-contextual-button-width": "var(--sjs-size-x6)",
+    "--ctr-survey-contextual-button-height": "var(--sjs-size-x6)",
+    "--ctr-survey-contextual-button-padding-left": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-top": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-bottom": "var(--sjs-spacing-x150)",
     "--lbr-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)",
     "--ctr-property-grid-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-survey-header-logo-placeholder-icon-color": "var(--sjs-layer-3-foreground-50)",
@@ -543,11 +603,18 @@ const Theme = {
     "--ctr-survey-image-picker-drop-spot-color": "var(--sjs-layer-2-background-500)",
     "--ctr-data-table-row-corner-radius-floating": "var(--sjs-corner-radius-x05)",
     "--ctr-survey-item-actionbar-drag-indicator-color": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-right": "var(--sjs-spacing-x1)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-top": "var(--sjs-spacing-x05)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-bottom": "var(--sjs-spacing-x05)",
+    "--ctr-survey-item-actionbar-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-item-actionbar-drag-indicator-height": "var(--sjs-size-x3)",
     "--ctr-toolbox-search-padding-left": "var(--sjs-spacing-x3)",
     "--ctr-toolbox-search-padding-right": "var(--sjs-spacing-x2)",
     "--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)",
     "--ctr-toolbox-search-icon-color-placeholder": "var(--sjs-layer-1-foreground-50)",
     "--ctr-toolbox-search-padding-bottom": "var(--sjs-spacing-x250)",
+    "--ctr-toolbox-search-gap": "var(--sjs-spacing-x1)",
     "--ctr-toolbox-search-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-toolbox-search-border-width-bottom": "var(--sjs-stroke-x1)",
     "--ctr-toolbox-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)",
@@ -602,6 +669,8 @@ const Theme = {
     "--ctr-list-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)",
     "--ctr-property-grid-search-icon-width": "var(--sjs-size-x3)",
     "--ctr-property-grid-search-icon-height": "var(--sjs-size-x3)",
+    "--ctr-toolbox-search-icon-width": "var(--sjs-size-x3)",
+    "--ctr-toolbox-search-icon-height": "var(--sjs-size-x3)",
     "--ctr-expression-item-padding-left-button": "var(--sjs-spacing-x4)",
     "--ctr-expression-item-padding-right-button": "var(--sjs-spacing-x4)",
     "--ctr-toolbox-shadow-floating-1-offset-x": "var(--ctr-shadow-medium-offset-x)",
@@ -695,6 +764,8 @@ const Theme = {
     "--ctr-toolbox-submenu-shadow-2-spread": "var(--ctr-shadow-large-spread)",
     "--ctr-toolbox-submenu-shadow-2-color": "var(--ctr-shadow-large-color)",
     "--ctr-toolbox-submenu-margin-top": "var(--sjs-spacing-x1n)",
+    "--ctr-list-item-background-color-selected-submenu": "var(--sjs-primary-background-10)",
+    "--ctr-list-item-text-color-selected-submenu": "var(--sjs-layer-1-foreground-100)",
     "--ctr-list-item-icon-color-selected-submenu": "var(--sjs-primary-background-500)",
     "--ctr-list-item-submenu-arrow-color-selected-item-submenu": "var(--sjs-layer-1-foreground-75)",
     "--ctr-menu-item-padding-left-icon": "var(--sjs-spacing-x2)",
@@ -713,6 +784,8 @@ const Theme = {
     "--ctr-data-table-form-border-color": "var(--sjs-border-10)",
     "--ctr-menu-toolbar-button-padding-left-with-description": "var(--sjs-spacing-x150)",
     "--ctr-menu-toolbar-button-padding-right-with-description": "var(--sjs-spacing-x150)",
+    "--ctr-survey-page-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-page-drag-indicator-height": "var(--sjs-size-x2)",
     "--ctr-survey-resize-frame-grip-width": "var(--sjs-size-x150)",
     "--ctr-survey-resize-frame-grip-height": "var(--sjs-size-x150)",
     "--ctr-survey-resize-frame-margin": "var(--sjs-spacing-x1n)",
diff --git a/packages/survey-creator-core/src/utils/context-button.scss b/packages/survey-creator-core/src/utils/context-button.scss
index 02a47801ee..4446eeeb4d 100644
--- a/packages/survey-creator-core/src/utils/context-button.scss
+++ b/packages/survey-creator-core/src/utils/context-button.scss
@@ -11,12 +11,21 @@
   box-sizing: border-box;
   background-color: $background;
   border-radius: 50%;
-  width: calcSize(6);
-  height: calcSize(6);
+  width: var(--ctr-survey-contextual-button-width, calcSize(6));
+  height: var(--ctr-survey-contextual-button-height, calcSize(6));
+  padding: var(--ctr-survey-contextual-button-padding-top, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-right, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-bottom, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-left, calcSize(1.5));
+
   cursor: pointer;
-  padding: calcSize(1.5);
   outline: none;
 
+  .sv-svg-icon {
+    width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+    height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+  }
+
   use {
     fill: $foreground-light;
     transition: fill $creator-transition-duration;
diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss
index 46d413f876..405ac68f6d 100644
--- a/packages/survey-creator-core/src/utils/layout.scss
+++ b/packages/survey-creator-core/src/utils/layout.scss
@@ -35,10 +35,18 @@
 .sv-action-bar--default-size-mode .sv-action-bar-separator {
   height: calcSize(5);
 }
+.sv-action-bar--default-size-mode .sv-action-bar-item {
+  height: auto;
+  width: auto;
+}
 
 .sv-action-bar--small-size-mode .sv-action-bar-separator {
   height: calcSize(4);
 }
+.sv-action-bar--small-size-mode .sv-action-bar-item {
+  height: auto;
+  width: auto;
+}
 
 .svc-creator--mobile {
   .sv-action-bar-separator {
@@ -106,9 +114,18 @@
     height: auto;
   }
 
+  .sv-action-bar-item--icon {
+    padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-right, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-left, calcSize(1));
+    border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0);
+  }
+
   .sv-action-bar-item__icon {
     width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
     height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+
     use {
       fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
     }
@@ -130,11 +147,6 @@
     opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
   }
 
-  .sv-action-bar-item--secondary {
-    .sv-action-bar-item__icon use {
-      fill: $secondary;
-    }
-  }
 
   .sv-action-bar-item--active {
     .sv-action-bar-item__icon use {
@@ -167,5 +179,10 @@
       border-top: 1px solid $border;
       box-sizing: border-box;
     }
+
+    .sv-action-bar-item__icon {
+      width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
+      height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/survey-creator-core/src/variables.scss b/packages/survey-creator-core/src/variables.scss
index 6caf1fdda9..1d1fac10a2 100644
--- a/packages/survey-creator-core/src/variables.scss
+++ b/packages/survey-creator-core/src/variables.scss
@@ -83,6 +83,18 @@ $tab-min-height: var(--tab-min-height, auto);
   text-overflow: ellipsis;
 }
 
+@mixin defaultActionButtonSettings {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  display: flex;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
 @mixin disableUserSelect {
   -moz-user-select: none;
   -webkit-user-select: none;
diff --git a/packages/survey-creator-core/tests/creator-base.tests.ts b/packages/survey-creator-core/tests/creator-base.tests.ts
index fde6f91e1a..1442ae5e4a 100644
--- a/packages/survey-creator-core/tests/creator-base.tests.ts
+++ b/packages/survey-creator-core/tests/creator-base.tests.ts
@@ -166,19 +166,19 @@ test("PageAdorner - remove page if: it is the last page, there is no elements an
   expect(creator.survey.pages).toHaveLength(1);
   expect(desigerTab.newPage).toBeTruthy();
   let pageAdorner = new PageAdorner(creator, desigerTab.newPage);
-  expect(pageAdorner.isGhost).toBeTruthy();
+  pageAdorner.isGhost = true;
   pageAdorner.addNewQuestion(pageAdorner, undefined);
   expect(creator.survey.pages).toHaveLength(2);
   creator.survey.pages[1].elements[0].delete();
   expect(creator.survey.pages).toHaveLength(1);
 
   pageAdorner = new PageAdorner(creator, desigerTab.newPage);
-  expect(pageAdorner.isGhost).toBeTruthy();
+  pageAdorner.isGhost = true;
   pageAdorner.addNewQuestion(pageAdorner, undefined);
   expect(creator.survey.pages).toHaveLength(2);
 
   pageAdorner = new PageAdorner(creator, desigerTab.newPage);
-  expect(pageAdorner.isGhost).toBeTruthy();
+  pageAdorner.isGhost = true;
   pageAdorner.addNewQuestion(pageAdorner, undefined);
   expect(creator.survey.pages).toHaveLength(3);
   creator.survey.pages[2].title = "New title";
@@ -213,7 +213,7 @@ test("PageAdorner - do not remove page if it is last and empty but the name has
   expect(creator.survey.pages).toHaveLength(1);
   expect(desigerTab.newPage).toBeTruthy();
   let pageAdorner = new PageAdorner(creator, desigerTab.newPage);
-  expect(pageAdorner.isGhost).toBeTruthy();
+  pageAdorner.isGhost = true;
   pageAdorner.addNewQuestion(pageAdorner, undefined);
   expect(creator.survey.pages).toHaveLength(2);
   creator.survey.pages[1].name = "newPage";
@@ -795,9 +795,9 @@ test("Create new page on changing title/description in ghost", (): any => {
   expect(creator.survey.pages).toHaveLength(1);
   expect(designerPlugin.model.newPage).toBeTruthy();
   let pageModel = new PageAdorner(creator, designerPlugin.model.newPage);
-  expect(pageModel.isGhost).toBeTruthy();
+  pageModel.isGhost = true;
   designerPlugin.model.newPage.title = "Some title";
-  expect(pageModel.isGhost).toBeFalsy();
+  pageModel.isGhost = false;
   expect(creator.survey.pages).toHaveLength(2);
   expect(designerPlugin.model.newPage).toBeTruthy();
   expect(designerPlugin.model.showNewPage).toBeTruthy();
@@ -808,10 +808,10 @@ test("Create new page on changing title/description in ghost", (): any => {
 
   creator.survey.pages[1].addNewQuestion("text", "q2");
   pageModel = new PageAdorner(creator, designerPlugin.model.newPage);
-  expect(pageModel.isGhost).toBeTruthy();
+  pageModel.isGhost = true;
   expect(designerPlugin.model.newPage).toBeTruthy();
   designerPlugin.model.newPage.description = "Some description";
-  expect(pageModel.isGhost).toBeFalsy();
+  pageModel.isGhost = false;
   expect(creator.survey.pages).toHaveLength(3);
   expect(designerPlugin.model.showNewPage).toBeTruthy();
   expect(designerPlugin.model.newPage).toBeTruthy();
@@ -831,8 +831,8 @@ test("Don't add extra subscriptions and fully unsubscribe title/description chan
   expect(creator.survey.pages).toHaveLength(1);
   expect(designerPlugin.model.newPage).toBeTruthy();
   let pageModel = new PageAdorner(creator, designerPlugin.model.newPage);
+  pageModel.isGhost = true;
   const getTitleSubscriptions = () => designerPlugin.model.newPage["onPropChangeFunctions"].filter(f => f.name === "title");
-  expect(pageModel.isGhost).toBeTruthy();
   expect(getTitleSubscriptions().length).toBe(1);
   pageModel["attachElement"](designerPlugin.model.newPage);
   expect(getTitleSubscriptions().length).toBe(1);
@@ -855,13 +855,13 @@ test("Create new page on changing title/description in ghost PageAdorner resets
 
   let currentNewPage = designerPlugin.model.newPage;
   const pageWrapperViewModel = new PageAdorner(creator, currentNewPage);
-  expect(pageWrapperViewModel.isGhost).toBeTruthy();
+  pageWrapperViewModel.isGhost = true;
   expect(pageWrapperViewModel.showPlaceholder).toBeFalsy();
 
   designerPlugin.model.newPage.title = "Some title";
   expect(creator.survey.pages).toHaveLength(2);
   expect(designerPlugin.model.newPage).toBeTruthy();
-  expect(pageWrapperViewModel.isGhost).toBeFalsy();
+  pageWrapperViewModel.isGhost = false;
   expect(pageWrapperViewModel.showPlaceholder).toBeTruthy();
 
   pageWrapperViewModel.addNewQuestion(null, undefined);
@@ -886,7 +886,7 @@ test("Create new ghost on moving a question from one page to the ghost page", ()
 
   let currentNewPage = designerPlugin.model.newPage;
   let pageWrapperViewModel = new PageAdorner(creator, currentNewPage);
-  expect(pageWrapperViewModel.isGhost).toBeTruthy();
+  pageWrapperViewModel.isGhost = true;
 
   const question1 = creator.survey.pages[0].questions[0];
   creator.survey.startMovingQuestion();
@@ -901,6 +901,7 @@ test("Create new ghost on moving a question from one page to the ghost page", ()
   currentNewPage = designerPlugin.model.newPage;
   expect(currentNewPage.name).toEqual("page3");
   pageWrapperViewModel = new PageAdorner(creator, currentNewPage);
+  pageWrapperViewModel.isGhost = true;
   expect(pageWrapperViewModel.isGhost).toBeTruthy();
 
   creator.survey.startMovingQuestion();
@@ -1057,6 +1058,7 @@ test("Page duplicate and add new page, check name", (): any => {
     creator.getPlugin("designer")
   );
   let pageModelNew = new PageAdorner(creator, designerPlugin.model.newPage);
+  pageModelNew.isGhost = true;
   pageModelNew.addNewQuestion(pageModelNew, null);
   expect(creator.survey.pages[3].name).toEqual("page4");
 
@@ -1096,6 +1098,7 @@ test("Check action container for new added page", (): any => {
     creator.getPlugin("designer")
   );
   const pageModel = new PageAdorner(creator, designerPlugin.model.newPage);
+  pageModel.isGhost = true;
   pageModel.addNewQuestion(pageModel, null);
   expect(creator.survey.pages).toHaveLength(2);
   expect(pageModel.actionContainer.actions).toHaveLength(3);
@@ -2138,7 +2141,7 @@ test("PageAdorner, actions and isGhost", (): any => {
   );
   expect(designerPlugin.model.newPage).toBeTruthy();
   const pageModel = new PageAdorner(creator, designerPlugin.model.newPage);
-  expect(pageModel.isGhost).toBeTruthy();
+  pageModel.isGhost = true;
   expect(pageModel.getActionById("delete").visible).toBeFalsy();
   expect(pageModel.getActionById("duplicate").visible).toBeFalsy();
   expect(pageModel.allowDragging).toBeFalsy();
@@ -2477,16 +2480,16 @@ test("convertInputType, change inputType for a text question", (): any => {
   expect(questionModel.getActionById("convertInputType")).toBeFalsy();
   let action = questionModel.getActionById("convertTo");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeTruthy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeTruthy();
   question = creator.survey.getQuestionByName("q2");
   creator.selectElement(question);
   questionModel = new QuestionAdornerViewModel(creator, question, undefined);
   action = questionModel.getActionById("convertTo");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeFalsy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeFalsy();
   action = questionModel.getActionById("convertInputType");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeTruthy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeTruthy();
   expect(action.title).toBe("Text");
   let popup = action.popupModel;
   let popupViewModel = new PopupDropdownViewModel(popup); // need for popupModel.onShow
@@ -4654,4 +4657,21 @@ test("check tabResponsivenessMode property", () => {
 
   creator.tabResponsivenessMode = "menu";
   expect(creator.tabbedMenu.actions.every((action) => action.disableShrink)).toBeTruthy();
+});
+test("onModified options, on adding page and on copying page", () => {
+  const creator = new CreatorTester({
+    pages: [{ elements: [{ type: "text", name: "q1" }] }]
+  });
+  const modifiedOptions = new Array<any>();
+  creator.onModified.add(function (survey, options) {
+    modifiedOptions.push(options);
+  });
+  const newPage = new PageModel();
+  newPage.name = "page2";
+  creator.addPage(newPage);
+  creator.copyPage(creator.survey.pages[0]);
+  expect(modifiedOptions[0].type).toBe("PAGE_ADDED");
+  expect(modifiedOptions[0].newValue.name).toBe("page2");
+  expect(modifiedOptions[2].type).toBe("ELEMENT_COPIED");
+  expect(modifiedOptions[2].newValue.name).toBe("page3");
 });
\ No newline at end of file
diff --git a/packages/survey-creator-core/tests/creator-undo-redo.tests.ts b/packages/survey-creator-core/tests/creator-undo-redo.tests.ts
index 3e43150fc0..727647087f 100644
--- a/packages/survey-creator-core/tests/creator-undo-redo.tests.ts
+++ b/packages/survey-creator-core/tests/creator-undo-redo.tests.ts
@@ -107,17 +107,17 @@ test("undo/redo add new page", (): any => {
   expect(creator.survey.pages[0].name).toEqual("page1");
   expect(designerPlugin.model.newPage.name).toEqual("page2");
   let newPageModel = new PageAdorner(creator, designerPlugin.model.newPage);
-  expect(newPageModel.isGhost).toBeTruthy();
+  newPageModel.isGhost = true;
   newPageModel.addNewQuestion(newPageModel, null);
-  expect(newPageModel.isGhost).toBeFalsy();
+  newPageModel.isGhost = false;
   expect(creator.survey.pageCount).toEqual(2);
   expect(creator.survey.pages[1].name).toEqual("page2");
   expect(designerPlugin.model.newPage.name).toEqual("page3");
 
   newPageModel = new PageAdorner(creator, designerPlugin.model.newPage);
-  expect(newPageModel.isGhost).toBeTruthy();
+  newPageModel.isGhost = true;
   newPageModel.addNewQuestion(newPageModel, null);
-  expect(newPageModel.isGhost).toBeFalsy();
+  newPageModel.isGhost = false;
   expect(creator.survey.pageCount).toEqual(3);
   expect(creator.survey.pages[2].name).toEqual("page3");
   expect(designerPlugin.model.newPage.name).toEqual("page4");
@@ -141,6 +141,7 @@ test("undo/redo add new page, via page model by adding new question", (): any =>
   expect(creator.survey.pages[0].name).toEqual("page1");
   expect(designerPlugin.model.newPage.name).toEqual("page2");
   let pageModel = new PageAdorner(creator, designerPlugin.model.newPage);
+  pageModel.isGhost = true;
   pageModel.addNewQuestion(pageModel, null);
   expect(creator.survey.pageCount).toEqual(2);
   expect(creator.survey.pages[1].name).toEqual("page2");
@@ -149,6 +150,7 @@ test("undo/redo add new page, via page model by adding new question", (): any =>
   expect(designerPlugin.model.newPage.name).toEqual("page3");
 
   pageModel = new PageAdorner(creator, designerPlugin.model.newPage);
+  pageModel.isGhost = true;
   pageModel.addNewQuestion(pageModel, null);
   expect(creator.survey.pageCount).toEqual(3);
   expect(creator.survey.pages[2].name).toEqual("page3");
@@ -388,6 +390,7 @@ test("Undo restore deleted page and question", (): any => {
   const survey = creator.survey;
   expect(survey.pages).toHaveLength(1);
   const pageAdorner = new PageAdorner(creator, designerPlugin.model.newPage);
+  pageAdorner.isGhost = true;
   pageAdorner.addNewQuestion(pageAdorner, undefined, "text");
   expect(survey.pages).toHaveLength(2);
   expect(survey.pages[1].questions).toHaveLength(1);
@@ -410,6 +413,7 @@ test("Undo on removing questions in deleted two pages", (): any => {
   expect(survey.pages).toHaveLength(1);
   creator.clickToolboxItem({ type: "text" });
   const pageAdorner = new PageAdorner(creator, designerPlugin.model.newPage);
+  pageAdorner.isGhost = true;
   pageAdorner.addNewQuestion(pageAdorner, undefined, "text");
   expect(survey.pages).toHaveLength(2);
   creator.selectElement(survey.getQuestionByName("question2"));
diff --git a/packages/survey-creator-core/tests/dragdrop-elements.tests.ts b/packages/survey-creator-core/tests/dragdrop-elements.tests.ts
index 50c8cf94d6..5e001a9cf8 100644
--- a/packages/survey-creator-core/tests/dragdrop-elements.tests.ts
+++ b/packages/survey-creator-core/tests/dragdrop-elements.tests.ts
@@ -1447,4 +1447,46 @@ test("drag drop page", () => {
       { "name": "page2", "elements": [{ "type": "text", "name": "q2" }] },
     ]
   });
+});
+
+test("drag drop page check draggedFrom property", () => {
+  const json = {
+    "pages": [
+      { "name": "page1", "elements": [{ "type": "text", "name": "q1" }] },
+      { "name": "page2", "elements": [{ "type": "text", "name": "q2" }] },
+      { "name": "page3", "elements": [{ "type": "text", "name": "q3" }] },
+    ]
+  };
+  const survey = new SurveyModel(json);
+
+  const [p1, p2, p3] = survey.pages;
+
+  const ddHelper: any = new DragDropSurveyElements(survey);
+
+  ddHelper.draggedElement = p3;
+  ddHelper.dragOverCore(p2, DragTypeOverMeEnum.Top);
+  ddHelper.doDrop();
+  expect(p3["draggedFrom"]).toStrictEqual(3);
+
+  ddHelper.draggedElement = p3;
+  ddHelper.dragOverCore(p2, DragTypeOverMeEnum.Bottom);
+  ddHelper.doDrop();
+  expect(p3["draggedFrom"]).toStrictEqual(1);
+
+  ddHelper.draggedElement = p1;
+  ddHelper.dragOverCore(p3, DragTypeOverMeEnum.Bottom);
+  ddHelper.doDrop();
+  expect(p1["draggedFrom"]).toStrictEqual(0);
+
+  ddHelper.draggedElement = p3;
+  p3["draggedFrom"] = undefined;
+  ddHelper.dragOverCore(p2, DragTypeOverMeEnum.Bottom);
+  ddHelper.doDrop();
+  expect(p3["draggedFrom"]).toStrictEqual(undefined);
+
+  ddHelper.draggedElement = p3;
+  p3["draggedFrom"] = undefined;
+  ddHelper.dragOverCore(p2, DragTypeOverMeEnum.Top);
+  ddHelper.doDrop();
+  expect(p3["draggedFrom"]).toStrictEqual(2);
 });
\ No newline at end of file
diff --git a/packages/survey-creator-core/tests/page-adorner.tests.ts b/packages/survey-creator-core/tests/page-adorner.tests.ts
index 342c9348d4..a20add9120 100644
--- a/packages/survey-creator-core/tests/page-adorner.tests.ts
+++ b/packages/survey-creator-core/tests/page-adorner.tests.ts
@@ -121,6 +121,7 @@ test("Check ghost page adorner actions visibility", (): any => {
     creator,
     newPage
   );
+  pageAdornerGhost.isGhost = true;
   expect(pageAdorner.getActionById("settings").visible).toBeTruthy();
   expect(pageAdornerGhost.getActionById("settings").visible).toBeFalsy();
-});
+});
\ No newline at end of file
diff --git a/packages/survey-creator-core/tests/tabs/designer.test.ts b/packages/survey-creator-core/tests/tabs/designer.test.ts
index 07c3080a82..a42008a799 100644
--- a/packages/survey-creator-core/tests/tabs/designer.test.ts
+++ b/packages/survey-creator-core/tests/tabs/designer.test.ts
@@ -1,4 +1,4 @@
-import { SurveyModel, ILocalizableOwner, LocalizableString, Serializer, JsonObjectProperty, QuestionMatrixDynamicModel, RegexValidator } from "survey-core";
+import { SurveyModel, ILocalizableOwner, LocalizableString, Serializer, JsonObjectProperty, QuestionMatrixDynamicModel, RegexValidator, IAnimationGroupConsumer, PageModel } from "survey-core";
 import { editorLocalization } from "../../src/editorLocalization";
 import { StringEditorViewModelBase } from "../../src/components/string-editor";
 import { CreatorTester } from "../creator-tester";
@@ -7,6 +7,7 @@ import { LogoImageViewModel } from "../../src/components/header/logo-image";
 import { SurveyLogicUI } from "../../src/components/tabs/logic-ui";
 import { PageAdorner } from "../../src/components/page";
 import { QuestionAdornerViewModel } from "../../src/components/question";
+import { TabDesignerViewModel } from "../../src/components/tabs/designer";
 export * from "../../src/property-grid/matrices";
 
 test("Survey/page title/description placeholders text", () => {
@@ -344,3 +345,90 @@ test("expand all and collapse all", () => {
   expect(questionAdorner.collapsed).toBeFalsy();
   expect(panelAdorner.collapsed).toBeFalsy();
 });
+
+test("check pages animation", () => {
+  const creator = new CreatorTester();
+  creator.expandCollapseButtonVisibility = "onhover";
+  creator.JSON = {
+    "pages": [
+      {
+        "name": "page1",
+        title: "Test page",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question1"
+          }
+        ]
+      },
+      {
+        "name": "page2",
+        "elements": [
+          {
+            "type": "panel",
+            "name": "panel1"
+          }
+        ]
+      }
+    ]
+  };
+
+  const designer = new TabDesignerViewModel(creator);
+  const [p1, p2] = creator.survey.pages;
+  const page1Adorner = new PageAdorner(creator, p1);
+  const container = document.createElement("div");
+  const parentContainer = document.createElement("div");
+  parentContainer.appendChild(container);
+  page1Adorner.rootElement = container;
+  const animationOptions = designer["getPagesAnimationOptions"]() as Required<IAnimationGroupConsumer<PageModel>>;
+
+  expect(animationOptions.getAnimatedElement(p1)).toBe(parentContainer);
+
+  const enterOptions = animationOptions.getEnterOptions(p1);
+  expect(enterOptions.cssClass).toBe("svc-page--enter");
+  enterOptions.onBeforeRunAnimation && enterOptions.onBeforeRunAnimation(parentContainer);
+  expect(parentContainer.style.getPropertyValue("--animation-height-from")).toBe("0px");
+  enterOptions.onAfterRunAnimation && enterOptions.onAfterRunAnimation(parentContainer);
+  expect(parentContainer.style.getPropertyValue("--animation-height-from")).toBe("");
+
+  const leaveOptions = animationOptions.getLeaveOptions(p1);
+  expect(leaveOptions.cssClass).toBe("svc-page--leave");
+  leaveOptions.onBeforeRunAnimation && leaveOptions.onBeforeRunAnimation(parentContainer);
+  expect(parentContainer.style.getPropertyValue("--animation-height-from")).toBe("0px");
+  leaveOptions.onAfterRunAnimation && leaveOptions.onAfterRunAnimation(parentContainer);
+  expect(parentContainer.style.getPropertyValue("--animation-height-from")).toBe("");
+
+  p1["draggedFrom"] = 0;
+  let options = { deletedItems: [], reorderedItems: [{ item: p1, movedForward: true }, { item: p2, movedForward: false }], addedItems: [], mergedItems: [p2, p1] };
+  animationOptions.onCompareArrays(options);
+  expect(options.reorderedItems).toEqual([]);
+  expect(options.addedItems).toEqual([p1]);
+  expect(options.deletedItems.length).toEqual(1);
+  let ghostPage = options.deletedItems[0] as PageModel;
+  expect(ghostPage["isGhost"]).toEqual(true);
+  expect(ghostPage !== p1).toBeTruthy();
+  expect(ghostPage.title).toBe("Test page");
+  expect(ghostPage.num).toBe(1);
+  expect(options.mergedItems).toEqual([ghostPage, p2, p1]);
+
+  p1["draggedFrom"] = 2;
+  options = { deletedItems: [], reorderedItems: [{ item: p1, movedForward: false }, { item: p2, movedForward: true }], addedItems: [], mergedItems: [p1, p2] };
+  animationOptions.onCompareArrays(options);
+  expect(options.reorderedItems).toEqual([]);
+  expect(options.addedItems).toEqual([p1]);
+  expect(options.deletedItems.length).toEqual(1);
+  ghostPage = options.deletedItems[0] as PageModel;
+  expect(ghostPage["isGhost"]).toEqual(true);
+  expect(ghostPage).not.toBe(p1);
+  expect(ghostPage.title).toBe("Test page");
+  expect(ghostPage.num).toBe(1);
+  expect(options.mergedItems).toEqual([p1, p2, ghostPage]);
+
+  p1["draggedFrom"] = undefined;
+  options = { deletedItems: [], reorderedItems: [], addedItems: [], mergedItems: [p1, p2] };
+  animationOptions.onCompareArrays(options);
+  expect(options.reorderedItems).toEqual([]);
+  expect(options.addedItems).toEqual([]);
+  expect(options.deletedItems).toEqual([]);
+  expect(options.mergedItems).toEqual([p1, p2]);
+});
diff --git a/packages/survey-creator-knockout/src/action-button.html b/packages/survey-creator-knockout/src/action-button.html
index ed4c2989be..2cf6acb09b 100644
--- a/packages/survey-creator-knockout/src/action-button.html
+++ b/packages/survey-creator-knockout/src/action-button.html
@@ -12,13 +12,13 @@
 <!-- ko if: data.iconName-->
 <!-- ko if: data.disabled -->
 <sv-svg-icon class="svc-action-button svc-action-button--disabled svc-action-button--icon"
-  data-bind="class: data.classes, attr: { title: data.title}" params="iconName: data.iconName, size: 24">
+  data-bind="class: data.classes, attr: { title: data.title}" params="iconName: data.iconName, size: 'auto'">
 </sv-svg-icon>
 <!-- /ko -->
 <!-- ko ifnot: data.disabled -->
 <sv-svg-icon class="svc-action-button svc-action-button--icon"
   data-bind="click: onClick, key2click, attr: { title: data.title, 'aria-label': data.text }, class: data.classes, css:{'svc-action-button--selected':data.selected}"
-  params="iconName: data.iconName, size: 24">
+  params="iconName: data.iconName, size: 'auto'">
 </sv-svg-icon>
 <!-- /ko -->
 <!-- /ko -->
\ No newline at end of file
diff --git a/packages/survey-creator-knockout/src/add-question-type-selector.html b/packages/survey-creator-knockout/src/add-question-type-selector.html
index 57100cb35d..81c7a425e8 100644
--- a/packages/survey-creator-knockout/src/add-question-type-selector.html
+++ b/packages/survey-creator-knockout/src/add-question-type-selector.html
@@ -2,7 +2,7 @@
 <button type="button"
   data-bind="click: action, key2click, clickBubble: false, attr: { title: title, 'aria-label': title }"
   class="svc-element__question-type-selector">
-  <sv-svg-icon class="svc-element__question-type-selector-icon" params="iconName: iconName, size: 24, title: title">
+  <sv-svg-icon class="svc-element__question-type-selector-icon" params="iconName: iconName, size: 'auto', title: title">
   </sv-svg-icon>
   <!-- ko if: $parent.renderPopup -->
   <sv-popup params="model: popupModel"></sv-popup>
diff --git a/packages/survey-creator-knockout/src/add-question.html b/packages/survey-creator-knockout/src/add-question.html
index c78fec2cdd..df6e1ead56 100644
--- a/packages/survey-creator-knockout/src/add-question.html
+++ b/packages/survey-creator-knockout/src/add-question.html
@@ -1,6 +1,6 @@
 <div
   data-bind="css: 'svc-element__add-new-question ' + buttonClass, click: data.addNewQuestion, key2click, clickBubble: false, event: { mouseover: function(m, e) { data.hoverStopper && data.hoverStopper(e, $element); }}">
-  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 24 } } -->
+  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 'auto' } } -->
   <!-- /ko -->
   <span class="svc-add-new-item-button__text" data-bind="text: data.addNewQuestionText">
   </span>
diff --git a/packages/survey-creator-knockout/src/adorners/image-item-value.html b/packages/survey-creator-knockout/src/adorners/image-item-value.html
index 4fb144b1ea..a8fee43d3d 100644
--- a/packages/survey-creator-knockout/src/adorners/image-item-value.html
+++ b/packages/survey-creator-knockout/src/adorners/image-item-value.html
@@ -15,7 +15,7 @@
     <!-- ko if: isDraggable && canRenderControls-->
     <sv-svg-icon class="svc-context-button svc-image-item-value-controls__drag-area-indicator"
       data-bind="event: { pointerdown: function(model, event) { onPointerDown(event); } }"
-      params="iconName: 'icon-drag-24x24', size: 24">
+      params="iconName: 'icon-drag-24x24', size: 'auto'">
     </sv-svg-icon>
     <!-- /ko -->
 
@@ -23,9 +23,9 @@
     <div class="svc-context-container svc-image-item-value-controls" data-bind="event: { pointerdown: blockEvent }">
       <!-- ko if: allowRemove && !isUploading -->
       <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-        params="iconName: 'icon-choosefile', size: 24, title: selectFileTitle" role="button"></sv-svg-icon>
+        params="iconName: 'icon-choosefile', size: 'auto', title: selectFileTitle" role="button"></sv-svg-icon>
       <sv-svg-icon class="svc-context-button svc-context-button--danger" data-bind="click: remove, key2click"
-        params="iconName: 'icon-delete', size: 24, title: removeFileTitle" role="button"></sv-svg-icon>
+        params="iconName: 'icon-delete', size: 'auto', title: removeFileTitle" role="button"></sv-svg-icon>
       <!-- /ko -->
     </div>
     <!-- /ko -->
@@ -50,7 +50,8 @@
     <div class="svc-image-item-value-controls" data-bind="event: { pointerdown: blockEvent }">
       <!-- ko if: allowAdd && !isUploading -->
       <sv-svg-icon class="svc-context-button svc-image-item-value-controls__add"
-        data-bind="click: chooseNewFile, key2click, clickBubble: false" params="iconName: 'icon-add-lg', size: 24, title: addFileTitle">
+        data-bind="click: chooseNewFile, key2click, clickBubble: false"
+        params="iconName: 'icon-add-lg', size: 'auto', title: addFileTitle">
       </sv-svg-icon>
       <!-- /ko -->
     </div>
diff --git a/packages/survey-creator-knockout/src/adorners/item-value.html b/packages/survey-creator-knockout/src/adorners/item-value.html
index d0a05d26da..055558d170 100644
--- a/packages/survey-creator-knockout/src/adorners/item-value.html
+++ b/packages/survey-creator-knockout/src/adorners/item-value.html
@@ -5,7 +5,7 @@
     <!-- ko if: isDraggable -->
     <span class="svc-item-value-controls__button svc-item-value-controls__drag">
       <sv-svg-icon class="svc-item-value-controls__drag-icon"
-        params="iconName: 'icon-drag-24x24', size: 24, title: dragTooltip"></sv-svg-icon>
+        params="iconName: 'icon-drag-24x24', size: 'auto', title: dragTooltip"></sv-svg-icon>
     </span>
     <!-- /ko -->
     <!-- ko if: allowAdd -->
diff --git a/packages/survey-creator-knockout/src/adorners/matrix-cell.html b/packages/survey-creator-knockout/src/adorners/matrix-cell.html
index 53fb4612a5..39c08f864d 100644
--- a/packages/survey-creator-knockout/src/adorners/matrix-cell.html
+++ b/packages/survey-creator-knockout/src/adorners/matrix-cell.html
@@ -7,8 +7,8 @@
 
   <!-- ko if: $data.isSupportCellEditor -->
   <div class="svc-matrix-cell__question-controls">
-    <sv-svg-icon class="svc-matrix-cell__question-controls-button" data-bind="click: editQuestion, key2click"
-      params="iconName: 'icon-edit', size: 24"></sv-svg-icon>
+    <sv-svg-icon class="svc-matrix-cell__question-controls-button svc-context-button" data-bind="click: editQuestion, key2click"
+      params="iconName: 'icon-edit', size: 'auto'"></sv-svg-icon>
   </div>
   <!-- /ko -->
 
diff --git a/packages/survey-creator-knockout/src/adorners/panel.html b/packages/survey-creator-knockout/src/adorners/panel.html
index 3b84375678..8382ca6865 100644
--- a/packages/survey-creator-knockout/src/adorners/panel.html
+++ b/packages/survey-creator-knockout/src/adorners/panel.html
@@ -20,7 +20,7 @@
     <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
     <!-- ko if: allowDragging && $data.element.isInteractiveDesignElement -->
     <div class="svc-question__drag-area" data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event) } }">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
       <div class="svc-question__top-actions">
         <!-- ko component: { name: 'sv-action-bar', params: { model: topActionContainer, handleClick: false } } -->
@@ -38,7 +38,7 @@
         <!-- ko if: showAddQuestionButton -->
         <div class="svc-panel__add-new-question svc-action-button"
           data-bind="click: addNewQuestion, key2click, clickBubble: false">
-          <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 24 } } -->
+          <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 'auto' } } -->
           <!-- /ko -->
           <span class="svc-add-new-item-button__text" data-bind="text: $data.addNewQuestionText">
           </span>
diff --git a/packages/survey-creator-knockout/src/adorners/question-image.html b/packages/survey-creator-knockout/src/adorners/question-image.html
index 0d548e81b0..2ac30f974f 100644
--- a/packages/survey-creator-knockout/src/adorners/question-image.html
+++ b/packages/survey-creator-knockout/src/adorners/question-image.html
@@ -4,7 +4,7 @@
   <input type="file" aria-hidden="true" tabindex="-1" class="svc-choose-file-input"
     data-bind="attr: { accept: acceptedTypes }" />
   <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-    params="iconName: 'icon-choosefile', size: 24"></sv-svg-icon>
+    params="iconName: 'icon-choosefile', size: 'auto'"></sv-svg-icon>
   <!-- /ko -->
 </div>
 <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/adorners/question.html b/packages/survey-creator-knockout/src/adorners/question.html
index e7b021744f..5039f6d263 100644
--- a/packages/survey-creator-knockout/src/adorners/question.html
+++ b/packages/survey-creator-knockout/src/adorners/question.html
@@ -21,7 +21,7 @@
     <!-- ko if: allowDragging -->
     <div class="svc-question__drag-area"
       data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event); return true; } }">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
       <div class="svc-question__top-actions">
         <!-- ko component: { name: 'sv-action-bar', params: { model: topActionContainer, handleClick: false } } -->
diff --git a/packages/survey-creator-knockout/src/header/logo-image.html b/packages/survey-creator-knockout/src/header/logo-image.html
index 6e621f1b66..7e6fa9ecf1 100644
--- a/packages/survey-creator-knockout/src/header/logo-image.html
+++ b/packages/survey-creator-knockout/src/header/logo-image.html
@@ -14,9 +14,9 @@
   <div data-bind="css: containerCss">
     <div class="svc-context-container svc-logo-image-controls">
       <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-        params="iconName: 'icon-choosefile', size: 24"></sv-svg-icon>
+        params="iconName: 'icon-choosefile', size: 'auto'"></sv-svg-icon>
       <sv-svg-icon class="svc-context-button svc-context-button--danger" data-bind="click: remove, key2click"
-        params="iconName: 'icon-clear', size: 24"></sv-svg-icon>
+        params="iconName: 'icon-clear', size: 'auto'"></sv-svg-icon>
     </div>
     <!-- ko component: { name: 'sv-logo-image', params: survey } -->
     <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
index 98b73b1674..043cf56614 100644
--- a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
+++ b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
@@ -2,7 +2,7 @@
 <div class="svc-page-navigator">
     <div class="svc-page-navigator__selector"
         data-bind="click: togglePageSelector, key2click, attr: { title: pageSelectorCaption }, css: { 'svc-page-navigator__selector--opened': isPopupOpened }">
-        <sv-svg-icon class="svc-page-navigator__navigator-icon" params="iconName: icon, size: 24"></sv-svg-icon>
+        <sv-svg-icon class="svc-page-navigator__navigator-icon" params="iconName: icon, size: 'auto'"></sv-svg-icon>
         <sv-popup params="model: popupModel, cssClass: 'svc-page-navigator__popup'"></sv-popup>
     </div>
     <div>
diff --git a/packages/survey-creator-knockout/src/page.html b/packages/survey-creator-knockout/src/page.html
index 7e28e7d256..755ab55001 100644
--- a/packages/survey-creator-knockout/src/page.html
+++ b/packages/survey-creator-knockout/src/page.html
@@ -6,7 +6,7 @@
   <!-- ko if: allowDragging && !isGhost -->
   <div class="svc-question__drag-area"
     data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event); return true; } }">
-    <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+    <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
     <!-- /ko -->
     <div class="svc-page__content-actions">
       <!-- ko component: { name: 'sv-action-bar', params: { model: actionContainer } } -->
diff --git a/packages/survey-creator-knockout/src/page.ts b/packages/survey-creator-knockout/src/page.ts
index 9382ff7299..f672c69368 100644
--- a/packages/survey-creator-knockout/src/page.ts
+++ b/packages/survey-creator-knockout/src/page.ts
@@ -8,9 +8,10 @@ const template = require("./page.html");
 
 export class CreatorSurveyPageComponent extends PageAdorner {
   private pageUpdater;
+  private isGhostUpdater;
   private currPage: PageModel;
 
-  constructor(creator: SurveyCreatorModel, private _page: PageModel | ko.Observable<PageModel>) {
+  constructor(creator: SurveyCreatorModel, private _page: PageModel | ko.Observable<PageModel>, private _isGhost: boolean | ko.Observable<boolean>) {
     super(creator, ko.unwrap(_page));
 
     if (ko.isSubscribable(_page)) {
@@ -18,11 +19,18 @@ export class CreatorSurveyPageComponent extends PageAdorner {
         this.detachElement(this.currPage);
         this.currPage = newPage;
         this.attachElement(newPage);
+        this.isGhost = ko.unwrap(this._isGhost);
+      });
+    }
+    if (ko.isSubscribable(this._isGhost)) {
+      this.isGhostUpdater = this._isGhost.subscribe((newValue: boolean) => {
+        this.isGhost = newValue;
       });
     }
     this.currPage = ko.unwrap(_page);
     this._page = _page;
     this.attachElement(this.page);
+    this.isGhost = ko.unwrap(this._isGhost);
     new ImplementorBase(this);
   }
 
@@ -32,6 +40,7 @@ export class CreatorSurveyPageComponent extends PageAdorner {
 
   fixedDispose(): void {
     this.pageUpdater && this.pageUpdater.dispose();
+    this.isGhostUpdater && this.isGhostUpdater.dispose();
     super.dispose();
     if (ko.isWritableObservable(this._page)) {
       (this._page as ko.Observable<PageModel>)(undefined);
@@ -47,8 +56,7 @@ ko.components.register("svc-page", {
   viewModel: {
     createViewModel: (params: any, componentInfo: any) => {
       const creator: SurveyCreator = params.creator;
-
-      const pageAdornerViewModel = new CreatorSurveyPageComponent(creator, params.page);
+      const pageAdornerViewModel = new CreatorSurveyPageComponent(creator, params.page, params.isGhost);
       pageAdornerViewModel.rootElement = componentInfo.element;
       ko.utils.domNodeDisposal.addDisposeCallback(componentInfo.element, () => {
         pageAdornerViewModel.fixedDispose();
diff --git a/packages/survey-creator-knockout/src/question-widget.html b/packages/survey-creator-knockout/src/question-widget.html
index a8e4a23b98..3ff6e83db0 100644
--- a/packages/survey-creator-knockout/src/question-widget.html
+++ b/packages/survey-creator-knockout/src/question-widget.html
@@ -5,7 +5,7 @@
     <!-- ko if: allowDragging -->
     <div class="svc-question__drag-area"
       data-bind="visible:allowDragging, event: {pointerdown: (model, event)=>{onPointerDown(event)}}">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
     </div>
     <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/side-bar/tab-button.html b/packages/survey-creator-knockout/src/side-bar/tab-button.html
index 9f19f105c8..a9fcfc20c5 100644
--- a/packages/survey-creator-knockout/src/side-bar/tab-button.html
+++ b/packages/survey-creator-knockout/src/side-bar/tab-button.html
@@ -4,7 +4,7 @@
     attr: { title: model.tooltip }">
     <div class="svc-menu-action__icon">
       <div class="svc-menu-action__icon-container">
-        <!-- ko component: { name: 'sv-svg-icon', params: { iconName: model.iconName, size: 24 } } -->
+        <!-- ko component: { name: 'sv-svg-icon', params: { iconName: model.iconName, size: 'auto' } } -->
         <!-- /ko -->
       </div>
     </div>
diff --git a/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html b/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
index ee6f860b40..ef311ebdb2 100644
--- a/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
+++ b/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
@@ -1,6 +1,6 @@
 <div>
   <sv-svg-icon aria-hidden="true" data-bind="css: cssClasses.error.icon"
-    params="iconName: 'icon-alert_24x24', size: 24">
+    params="iconName: 'icon-alert_24x24', size: 'auto'">
   </sv-svg-icon>
   <span data-bind="css: cssClasses.error.item">
     <!-- ko template: { name: 'survey-string', data: error.locText } --><!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/tabs/designer.html b/packages/survey-creator-knockout/src/tabs/designer.html
index b10f50e4cc..62a1032fce 100644
--- a/packages/survey-creator-knockout/src/tabs/designer.html
+++ b/packages/survey-creator-knockout/src/tabs/designer.html
@@ -15,7 +15,8 @@
       data-bind="attr: { 'data-sv-drop-target-survey-element': 'newGhostPage' }">
       <!-- ko component: { name: 'svc-surface-placeholder', params: { name: 'designer', placeholderTitleText: $data.placeholderTitleText, placeholderDescriptionText: $data.placeholderDescriptionText } } -->
       <!-- /ko -->
-      <svc-page class=" svc-designer-placeholder-page" params="survey: survey, creator: creator, page: newPage">
+      <svc-page class=" svc-designer-placeholder-page"
+        params="survey: survey, creator: creator, page: newPage, isGhost: true">
       </svc-page>
     </div>
     <!-- /ko -->
@@ -40,18 +41,18 @@
       <!-- ko foreach: survey.pages -->
       <svc-page class="svc-page"
         data-bind="attr: { 'data-sv-drop-target-survey-element': $data.name, 'data-sv-drop-target-page': $data.name }"
-        params="survey: $parent.survey, page: $data, creator: $parent.creator"></svc-page>
+        params="survey: $parent.survey, page: $data, creator: $parent.creator, isGhost: false"></svc-page>
       <!-- /ko -->
       <!-- ko if: showNewPage -->
       <svc-page class="svc-page" data-bind="attr: { 'data-sv-drop-target-survey-element': 'newGhostPage' }"
-        params="survey: survey, creator: creator, page: newPage"></svc-page>
+        params="survey: survey, creator: creator, page: newPage, isGhost: true"></svc-page>
       <!-- /ko -->
       <!-- /ko -->
 
       <!-- ko if: pagesController.page2Display && creator.pageEditMode === 'bypage' -->
       <svc-page class="svc-page"
         data-bind="attr: { 'data-sv-drop-target-survey-element': displayPageDropTarget, 'data-sv-drop-target-page': pagesController.page2Display.name }"
-        params="survey: survey, page: pagesController.page2Display, creator: creator"></svc-page>
+        params="survey: survey, page: pagesController.page2Display, creator: creator, isGhost: pagesController.page2Display == newPage"></svc-page>
       <!-- /ko -->
 
       <!-- ko if: false && survey.isShowProgressBarOnBottom -->
diff --git a/packages/survey-creator-knockout/tests/creator.spec.ts b/packages/survey-creator-knockout/tests/creator.spec.ts
index a3f6a391fd..51a7c7f0a6 100644
--- a/packages/survey-creator-knockout/tests/creator.spec.ts
+++ b/packages/survey-creator-knockout/tests/creator.spec.ts
@@ -40,7 +40,7 @@ test("isGhost value for attached element", (): any => {
   designerPlugin.model.newPage.unRegisterFunctionOnPropertiesValueChanged(["title"]);
   creator.survey.pages[0].unRegisterFunctionOnPropertiesValueChanged(["title"]);
   let pageAdornerModel = new CreatorSurveyPageComponent(creator as any, designerPlugin.model.newPage as any);
-  expect(pageAdornerModel.isGhost).toBeTruthy();
+  pageAdornerModel.isGhost = true;
   expect(designerPlugin.model.newPage["onPropChangeFunctions"].filter(f => f.name === "title").length).toBe(1);
 
   pageAdornerModel = new CreatorSurveyPageComponent(creator as any, creator.survey.pages[0] as any);
diff --git a/packages/survey-creator-react/src/AddQuestionButton.tsx b/packages/survey-creator-react/src/AddQuestionButton.tsx
index 80d65da20d..3c52187948 100644
--- a/packages/survey-creator-react/src/AddQuestionButton.tsx
+++ b/packages/survey-creator-react/src/AddQuestionButton.tsx
@@ -29,7 +29,7 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
       <span className="svc-element__question-type-selector-icon">
         <SvgIcon
           iconName={questionTypeSelectorModel.iconName}
-          size={24}
+          size={"auto"}
           title={this.model.addNewQuestionText}
         ></SvgIcon>
       </span>
@@ -52,7 +52,7 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
         <SvgIcon
           className={"svc-panel__add-new-question-icon"}
           iconName={"icon-add_24x24"}
-          size={24}
+          size={"auto"}
         ></SvgIcon>
         <span className="svc-add-new-item-button__text">
           {this.model.addNewQuestionText}
diff --git a/packages/survey-creator-react/src/ImageItemValueWrapper.tsx b/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
index 10d10b1a56..7fd2afa97a 100644
--- a/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
+++ b/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
@@ -84,7 +84,7 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
 
         <div className="svc-image-item-value-controls">
           {this.model.allowAdd && !this.model.isUploading ? attachKey2click(<span className="svc-context-button svc-image-item-value-controls__add" onClick={() => this.model.chooseNewFile(this.model)}>
-            <SvgIcon size={24} iconName={"icon-add-lg"} title={this.model.addFileTitle}></SvgIcon>
+            <SvgIcon size={"auto"} iconName={"icon-add-lg"} title={this.model.addFileTitle}></SvgIcon>
           </span>) : null}
         </div>
       </>);
@@ -100,7 +100,7 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
               <span className="svc-context-button svc-image-item-value-controls__drag-area-indicator"
                 onPointerDown={(event: any) => this.model.onPointerDown(event)}
               >
-                <SvgIcon size={24} iconName={"icon-drag-24x24"}></SvgIcon>
+                <SvgIcon size={"auto"} iconName={"icon-drag-24x24"}></SvgIcon>
               </span>
               : null
           }
@@ -112,13 +112,13 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
                   className="svc-context-button"
                   onClick={() => this.model.chooseFile(this.model)}
                 >
-                  <SvgIcon role="button" size={24} iconName={"icon-choosefile"} title={this.model.selectFileTitle}></SvgIcon>
+                  <SvgIcon role="button" size={"auto"} iconName={"icon-choosefile"} title={this.model.selectFileTitle}></SvgIcon>
                 </span>) : null}
                 {this.model.allowRemove && !this.model.isUploading ? attachKey2click(<span
                   className="svc-context-button svc-context-button--danger"
                   onClick={() => this.model.remove(this.model)}
                 >
-                  <SvgIcon role="button" size={24} iconName={"icon-delete"} title={this.model.removeFileTitle}></SvgIcon>
+                  <SvgIcon role="button" size={"auto"} iconName={"icon-delete"} title={this.model.removeFileTitle}></SvgIcon>
                 </span>) : null}
               </div>
               : null
diff --git a/packages/survey-creator-react/src/ItemValueWrapper.tsx b/packages/survey-creator-react/src/ItemValueWrapper.tsx
index 46dd714f9e..0808b0eab7 100644
--- a/packages/survey-creator-react/src/ItemValueWrapper.tsx
+++ b/packages/survey-creator-react/src/ItemValueWrapper.tsx
@@ -79,7 +79,7 @@ export class ItemValueAdornerComponent extends CreatorModelElement<
           <span
             className="svc-item-value-controls__button svc-item-value-controls__drag"
           >
-            <SvgIcon className="svc-item-value-controls__drag-icon" size={24} iconName={"icon-drag-24x24"} title={this.model.dragTooltip}></SvgIcon>
+            <SvgIcon className="svc-item-value-controls__drag-icon" size={"auto"} iconName={"icon-drag-24x24"} title={this.model.dragTooltip}></SvgIcon>
           </span>
         ) : null}
         {this.model.allowRemove ? attachKey2click(<span
diff --git a/packages/survey-creator-react/src/LogoImage.tsx b/packages/survey-creator-react/src/LogoImage.tsx
index a4bb2845ac..b9d233cb5d 100644
--- a/packages/survey-creator-react/src/LogoImage.tsx
+++ b/packages/survey-creator-react/src/LogoImage.tsx
@@ -37,7 +37,7 @@ export class LogoImageComponent extends CreatorModelElement<ILogoImageComponentP
       className="svc-context-button"
       onClick={() => this.model.chooseFile(this.model)}
     >
-      <SvgIcon size={24} iconName={"icon-choosefile"}></SvgIcon>
+      <SvgIcon size={"auto"} iconName={"icon-choosefile"}></SvgIcon>
     </span>);
   }
   renderClearButton() {
@@ -45,7 +45,7 @@ export class LogoImageComponent extends CreatorModelElement<ILogoImageComponentP
       className="svc-context-button svc-context-button--danger"
       onClick={() => this.model.remove(this.model)}
     >
-      <SvgIcon size={24} iconName={"icon-clear"}></SvgIcon>
+      <SvgIcon size={"auto"} iconName={"icon-clear"}></SvgIcon>
     </span>);
   }
   renderButtons() {
diff --git a/packages/survey-creator-react/src/MatrixCellWrapper.tsx b/packages/survey-creator-react/src/MatrixCellWrapper.tsx
index 1b8b717aa5..19f852aa1a 100644
--- a/packages/survey-creator-react/src/MatrixCellWrapper.tsx
+++ b/packages/survey-creator-react/src/MatrixCellWrapper.tsx
@@ -54,8 +54,8 @@ export class MatrixCellAdornerComponent extends CreatorModelElement<
     let controls = null;
     if (!!this.model.isSupportCellEditor) {
       controls = <div className="svc-matrix-cell__question-controls">
-        {attachKey2click(<span className="svc-matrix-cell__question-controls-button" onClick={(event: any) => this.model.editQuestion(this.model, event)}>
-          <SvgIcon size={24} iconName={"icon-edit"}></SvgIcon>
+        {attachKey2click(<span className="svc-matrix-cell__question-controls-button svc-context-button" onClick={(event: any) => this.model.editQuestion(this.model, event)}>
+          <SvgIcon size={"auto"} iconName={"icon-edit"}></SvgIcon>
         </span>)}
       </div>;
     }
diff --git a/packages/survey-creator-react/src/PageNavigator.tsx b/packages/survey-creator-react/src/PageNavigator.tsx
index 7424f69de2..bf1112ad61 100644
--- a/packages/survey-creator-react/src/PageNavigator.tsx
+++ b/packages/survey-creator-react/src/PageNavigator.tsx
@@ -88,7 +88,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
           <SvgIcon
             className="svc-page-navigator__navigator-icon"
             iconName={this.model.icon}
-            size={24}
+            size={"auto"}
             title={this.model.pageSelectorCaption}
           ></SvgIcon>
 
diff --git a/packages/survey-creator-react/src/adorners/Page.tsx b/packages/survey-creator-react/src/adorners/Page.tsx
index b74ce18c66..564c74d913 100644
--- a/packages/survey-creator-react/src/adorners/Page.tsx
+++ b/packages/survey-creator-react/src/adorners/Page.tsx
@@ -22,6 +22,7 @@ interface ICreatorSurveyPageComponentProps {
   creator: SurveyCreatorModel;
   survey: SurveyModel;
   page: PageModel;
+  isGhost: boolean;
 }
 
 export class CreatorSurveyPageComponent extends CreatorModelElement<
@@ -40,8 +41,16 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
     }
     this.model = new PageAdorner(
       props.creator,
-      props.page
+      props.page,
     );
+    this.model.isGhost = this.props.isGhost;
+  }
+  shouldComponentUpdate(nextProps: any, nextState: any): boolean {
+    const res = super.shouldComponentUpdate(nextProps, nextState);
+    if(this.model) {
+      this.model.isGhost = this.props.isGhost;
+    }
+    return res;
   }
   public componentDidUpdate(prevProps: any, prevState: any): void {
     super.componentDidUpdate(prevProps, prevState);
@@ -55,18 +64,14 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
   componentDidMount() {
     super.componentDidMount();
     this.model.attachToUI(this.props.page, this.rootRef.current);
+    this.model.isGhost = this.props.isGhost;
   }
   componentWillUnmount() {
     super.componentWillUnmount();
     this.model.detachFromUI();
   }
   protected canRender(): boolean {
-    return (
-      !!this.model &&
-      this.model.isPageLive &&
-      !!this.model.page &&
-      !!this.model.page.survey
-    );
+    return super.canRender();
   }
   renderElement(): JSX.Element {
     if (!this.props.page) return null;
@@ -116,7 +121,7 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
       <div className={"svc-question__drag-area"}
         onPointerDown={(event: any) => this.model.onPointerDown(event)}
       >
-        <SvgIcon className="svc-question__drag-element" size={24} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
+        <SvgIcon className="svc-question__drag-element" size={"auto"} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
         {actions}
       </div>
     );
diff --git a/packages/survey-creator-react/src/adorners/Panel.tsx b/packages/survey-creator-react/src/adorners/Panel.tsx
index 174abf1307..bba1a5339f 100644
--- a/packages/survey-creator-react/src/adorners/Panel.tsx
+++ b/packages/survey-creator-react/src/adorners/Panel.tsx
@@ -35,7 +35,7 @@ export class PanelAdornerComponent extends QuestionAdornerComponent {
             <SvgIcon
               className={"svc-panel__add-new-question-icon"}
               iconName={"icon-add_24x24"}
-              size={24}
+              size={"auto"}
             ></SvgIcon>
             <span className="svc-add-new-item-button__text">
               {this.model.addNewQuestionText}
diff --git a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
index e88c0dcc33..592b957787 100644
--- a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
@@ -26,7 +26,7 @@ export class QuestionWrapperHeader extends React.Component<QuestionWrapperHeader
           this.props.model.onPointerDown(event)
         }
       >
-        <SvgIcon className="svc-question__drag-element" size={24} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
+        <SvgIcon className="svc-question__drag-element" size={"auto"} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
         <div className="svc-question__top-actions">
           <SurveyActionBar model={this.props.model.topActionContainer} handleClick={false}></SurveyActionBar>
         </div>
diff --git a/packages/survey-creator-react/src/adorners/QuestionImage.tsx b/packages/survey-creator-react/src/adorners/QuestionImage.tsx
index 6e9b8655d7..7d7bbf4fb8 100644
--- a/packages/survey-creator-react/src/adorners/QuestionImage.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionImage.tsx
@@ -53,7 +53,7 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
         className="svc-context-button"
         onClick={() => this.imageModel.chooseFile(this.imageModel)}
       >
-        <SvgIcon size={24} iconName={"icon-choosefile"}></SvgIcon>
+        <SvgIcon size={"auto"} iconName={"icon-choosefile"}></SvgIcon>
       </span>) : null}
     </div>);
   }
diff --git a/packages/survey-creator-react/src/side-bar/TabButton.tsx b/packages/survey-creator-react/src/side-bar/TabButton.tsx
index 066d5550be..d7f8bbbe27 100644
--- a/packages/survey-creator-react/src/side-bar/TabButton.tsx
+++ b/packages/survey-creator-react/src/side-bar/TabButton.tsx
@@ -22,7 +22,7 @@ export class TabButtonComponent extends SurveyElementBase<{ model: MenuButton },
       >
         <div className="svc-menu-action__icon">
           <div className="svc-menu-action__icon-container">
-            <SvgIcon iconName={this.props.model.iconName} size={24}></SvgIcon>
+            <SvgIcon iconName={this.props.model.iconName} size={"auto"}></SvgIcon>
           </div>
         </div>
       </div>, this.props.model
diff --git a/packages/survey-creator-react/src/tabs/Designer.tsx b/packages/survey-creator-react/src/tabs/Designer.tsx
index 36465913cf..ab9e1f95e9 100644
--- a/packages/survey-creator-react/src/tabs/Designer.tsx
+++ b/packages/survey-creator-react/src/tabs/Designer.tsx
@@ -59,15 +59,10 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
     const renderedPages = [];
 
     if (this.creator.pageEditMode !== "bypage") {
-      const pages = this.creator.survey.pages;
-
+      const pages = this.model.pages;
       pages.forEach((page) => {
-        renderedPages.push(this.createRenderedPage(page));
+        renderedPages.push(this.createRenderedPage(page, page == this.model.newPage));
       });
-
-      if (this.model.showNewPage) {
-        renderedPages.push(this.renderNewPage("svc-page", this.model.newPage.id + "-ghost-new-page"));
-      }
     } else {
       const page2Display = this.model.pagesController.page2Display;
       if (!!page2Display) {
@@ -85,7 +80,7 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
         data-sv-drop-target-survey-element={isGhostPage ? "newGhostPage" : page.name}
         key={page.id}
       >
-        {this.renderPage(page)}
+        {this.renderPage(page, isGhostPage)}
       </div>
     );
   }
@@ -96,12 +91,12 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
           className={className}
           data-sv-drop-target-survey-element={"newGhostPage"}
         >
-          {!!this.model.newPage ? this.renderPage(this.model.newPage) : null}
+          {!!this.model.newPage ? this.renderPage(this.model.newPage, true) : null}
         </div>
       </React.Fragment>);
   }
-  protected renderPage(pageV: PageModel): JSX.Element {
-    return ReactElementFactory.Instance.createElement("svc-page", { survey: this.creator.survey, page: pageV, creator: this.creator });
+  protected renderPage(pageV: PageModel, isGhost: boolean): JSX.Element {
+    return ReactElementFactory.Instance.createElement("svc-page", { survey: this.creator.survey, page: pageV, creator: this.creator, isGhost });
   }
   renderElement(): JSX.Element {
     const designerTabClassName = "svc-tab-designer " + this.model.getRootCss();
diff --git a/packages/survey-creator-vue/src/adorners/CustomWidget.vue b/packages/survey-creator-vue/src/adorners/CustomWidget.vue
index 4715e6a7bd..c8dda0be6b 100644
--- a/packages/survey-creator-vue/src/adorners/CustomWidget.vue
+++ b/packages/survey-creator-vue/src/adorners/CustomWidget.vue
@@ -25,7 +25,7 @@
           :is="'sv-svg-icon'"
           class="svc-question__drag-element"
           :iconName="'icon-drag-area-indicator_24x16'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
       </div>
       <div class="svc-widget__content">
diff --git a/packages/survey-creator-vue/src/adorners/Image.vue b/packages/survey-creator-vue/src/adorners/Image.vue
index 4a23247990..85a4d02586 100644
--- a/packages/survey-creator-vue/src/adorners/Image.vue
+++ b/packages/survey-creator-vue/src/adorners/Image.vue
@@ -20,7 +20,7 @@
         <SvComponent
           :is="'sv-svg-icon'"
           :iconName="'icon-choosefile'"
-          :size="24"
+          :size="'auto'"
           @click="model.chooseFile(model)"
         ></SvComponent>
       </span>
diff --git a/packages/survey-creator-vue/src/adorners/ImageItemValue.vue b/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
index 8a195620e7..6c1cf119ac 100644
--- a/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
+++ b/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
@@ -33,7 +33,7 @@
           <SvComponent
             :is="'sv-svg-icon'"
             :iconName="'icon-drag-24x24'"
-            :size="24"
+            :size="'auto'"
           ></SvComponent>
         </span>
         <div
@@ -51,7 +51,7 @@
               :is="'sv-svg-icon'"
               role="button"
               :iconName="'icon-choosefile'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.selectFileTitle"
             ></SvComponent>
           </span>
@@ -66,7 +66,7 @@
               :is="'sv-svg-icon'"
               role="button"
               :iconName="'icon-delete'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.removeFileTitle"
             ></SvComponent>
           </span>
@@ -109,7 +109,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-add-lg'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.addFileTitle"
             ></SvComponent>
           </span>
diff --git a/packages/survey-creator-vue/src/adorners/ItemValue.vue b/packages/survey-creator-vue/src/adorners/ItemValue.vue
index d72876b67c..e53d412e75 100644
--- a/packages/survey-creator-vue/src/adorners/ItemValue.vue
+++ b/packages/survey-creator-vue/src/adorners/ItemValue.vue
@@ -22,7 +22,7 @@
           :is="'sv-svg-icon'"
           class="svc-item-value-controls__drag-icon"
           :iconName="'icon-drag-24x24'"
-          :size="24"
+          :size="'auto'"
           :title="adorner.dragTooltip"
         ></SvComponent>
       </span>
diff --git a/packages/survey-creator-vue/src/adorners/MatrixCell.vue b/packages/survey-creator-vue/src/adorners/MatrixCell.vue
index bc7dfc1c83..d1251219de 100644
--- a/packages/survey-creator-vue/src/adorners/MatrixCell.vue
+++ b/packages/survey-creator-vue/src/adorners/MatrixCell.vue
@@ -16,14 +16,14 @@
       class="svc-matrix-cell__question-controls"
     >
       <span
-        class="svc-matrix-cell__question-controls-button"
+        class="svc-matrix-cell__question-controls-button svc-context-button"
         @click="adorner.editQuestion(adorner, $event)"
         v-key2click
       >
         <SvComponent
           :is="'sv-svg-icon'"
           :iconName="'icon-edit'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
       </span>
     </div>
diff --git a/packages/survey-creator-vue/src/adorners/Panel.vue b/packages/survey-creator-vue/src/adorners/Panel.vue
index ef8f950eda..964e1a62c0 100644
--- a/packages/survey-creator-vue/src/adorners/Panel.vue
+++ b/packages/survey-creator-vue/src/adorners/Panel.vue
@@ -54,7 +54,7 @@
           :is="'sv-svg-icon'"
           class="svc-question__drag-element"
           :iconName="'icon-drag-area-indicator_24x16'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
         <div class="svc-question__top-actions">
           <SvComponent
@@ -84,7 +84,7 @@
               :is="'sv-svg-icon'"
               class="svc-panel__add-new-question-icon"
               :iconName="'icon-add_24x24'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
             <span class="svc-add-new-item-button__text">
               {{ adorner.addNewQuestionText }}
diff --git a/packages/survey-creator-vue/src/adorners/QuestionBase.vue b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
index 96bcd7651d..87d973abae 100644
--- a/packages/survey-creator-vue/src/adorners/QuestionBase.vue
+++ b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
@@ -53,7 +53,7 @@
           v-bind="{
             css: 'svc-question__drag-element',
             iconName: 'icon-drag-area-indicator_24x16',
-            size: 24,
+            size: 'auto',
           }"
         ></SvComponent>
         <div class="svc-question__top-actions">
diff --git a/packages/survey-creator-vue/src/components/QuestionError.vue b/packages/survey-creator-vue/src/components/QuestionError.vue
index d66ebd0ffd..8c42f22f42 100644
--- a/packages/survey-creator-vue/src/components/QuestionError.vue
+++ b/packages/survey-creator-vue/src/components/QuestionError.vue
@@ -4,7 +4,7 @@
       :is="'sv-svg-icon'"
       :class="cssClasses.error.icon"
       :iconName="'icon-alert_24x24'"
-      :size="24"
+      :size="'auto'"
     ></SvComponent>
     <span
       :class="
diff --git a/packages/survey-creator-vue/src/header/Logo.vue b/packages/survey-creator-vue/src/header/Logo.vue
index 0589e88368..36ac4fd3ee 100644
--- a/packages/survey-creator-vue/src/header/Logo.vue
+++ b/packages/survey-creator-vue/src/header/Logo.vue
@@ -33,7 +33,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-choosefile'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
           </span>
           <span
@@ -46,7 +46,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-clear'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
           </span>
         </div>
diff --git a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
index 4632388b96..acf00e8d14 100644
--- a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
+++ b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
@@ -11,7 +11,7 @@
         :is="'sv-svg-icon'"
         class="svc-page-navigator__navigator-icon"
         :iconName="model.icon"
-        :size="24"
+        :size="'auto'"
       ></SvComponent>
       <SvComponent :is="'sv-popup'" :model="model.popupModel"></SvComponent>
     </div>
diff --git a/packages/survey-creator-vue/src/side-bar/TabButton.vue b/packages/survey-creator-vue/src/side-bar/TabButton.vue
index 84b76b5aae..9bfa60eae7 100644
--- a/packages/survey-creator-vue/src/side-bar/TabButton.vue
+++ b/packages/survey-creator-vue/src/side-bar/TabButton.vue
@@ -11,7 +11,7 @@
           <SvComponent
             :is="'sv-svg-icon'"
             :iconName="model.iconName"
-            :size="24"
+            :size="'auto'"
           ></SvComponent>
         </div>
       </div>
diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
index fc713d44e9..bb1832203a 100644
--- a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
@@ -14,7 +14,7 @@
       :is="'sv-svg-icon'"
       class="svc-panel__add-new-question-icon"
       :iconName="'icon-add_24x24'"
-      :size="24"
+      :size="'auto'"
     ></SvComponent>
     <span class="svc-add-new-item-button__text">
       {{ item.data.addNewQuestionText }}
diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
index 30d040a279..6febb79215 100644
--- a/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
@@ -16,7 +16,7 @@
       class="svc-element__question-type-selector-icon"
       v-bind="{
         iconName: questionTypeSelectorModel.iconName,
-        size: 24,
+        size: 'auto',
         title: questionTypeSelectorModel.title,
       }"
     ></SvComponent>
diff --git a/packages/survey-creator-vue/src/tabs/designer/Designer.vue b/packages/survey-creator-vue/src/tabs/designer/Designer.vue
index ff602eafcd..ca80635339 100644
--- a/packages/survey-creator-vue/src/tabs/designer/Designer.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/Designer.vue
@@ -29,7 +29,11 @@
           class="svc-designer__placeholder-container"
           :data-sv-drop-target-survey-element="'newGhostPage'"
         >
-          <SurfacePlaceholder :name="'designer'" :placeholderTitleText="model.placeholderTitleText" :placeholderDescriptionText="model.placeholderDescriptionText" />
+          <SurfacePlaceholder
+            :name="'designer'"
+            :placeholderTitleText="model.placeholderTitleText"
+            :placeholderDescriptionText="model.placeholderDescriptionText"
+          />
           <div
             className="svc-designer-placeholder-page"
             data-sv-drop-target-survey-element="newGhostPage"
@@ -39,6 +43,7 @@
               :survey="model.creator.survey"
               :creator="model.creator"
               :page="model.newPage"
+              :isGhost="true"
             />
           </div>
         </div>
@@ -58,16 +63,9 @@
           >
             <SvComponent :is="'survey-header'" :survey="model.creator.survey" />
           </div>
-          <!--
-          <SvComponent
-            v-if="survey.isShowProgressBarOnTop"
-            :name="model.creator.survey.getProgressTypeComponent()"
-            :survey="model.creator.survey"
-          ></SvComponent>
-          -->
           <template v-if="model.creator.pageEditMode !== 'bypage'">
             <div
-              v-for="page in pages"
+              v-for="page in model.pages"
               :key="page.id"
               class="svc-page"
               :data-sv-drop-target-survey-element="
@@ -80,6 +78,7 @@
                 :survey="model.creator.survey"
                 :creator="model.creator"
                 :page="page"
+                :isGhost="page == model.newPage"
               />
             </div>
           </template>
@@ -96,15 +95,9 @@
               :is="'svc-page'"
               :page="model.pagesController.page2Display"
               :creator="model.creator"
+              :isGhost="model.pagesController.page2Display == model.newPage"
             />
           </div>
-          <!--
-          <SvComponent
-            v-if="survey.isShowProgressBarOnBottom"
-            :name="model.creator.survey.getProgressTypeComponent()"
-            :survey="model.creator.survey"
-          ></SvComponent>
-          -->
         </div>
         <div
           v-if="model.creator.showPageNavigator"
@@ -133,8 +126,4 @@ const props = defineProps<{ model: TabDesignerViewModel }>();
 const survey = computed(() => props.model.survey);
 useBase(() => props.model);
 useBase(() => survey.value);
-const pages = computed(() => {
-  const model = props.model;
-  return survey.value.pages.concat(model.showNewPage ? [model.newPage] : []);
-});
 </script>
diff --git a/packages/survey-creator-vue/src/tabs/designer/Page.vue b/packages/survey-creator-vue/src/tabs/designer/Page.vue
index 4168df1276..9c94738c55 100644
--- a/packages/survey-creator-vue/src/tabs/designer/Page.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/Page.vue
@@ -35,7 +35,7 @@
         v-bind="{
           css: 'svc-question__drag-element',
           iconName: 'icon-drag-area-indicator_24x16',
-          size: 24,
+          size: 'auto',
         }"
       ></SvComponent>
       <div class="svc-page__content-actions">
@@ -45,7 +45,10 @@
         ></SvComponent>
       </div>
     </div>
-    <div v-if="!model.allowDragging || model.isGhost" class="svc-page__content-actions">
+    <div
+      v-if="!model.allowDragging || model.isGhost"
+      class="svc-page__content-actions"
+    >
       <SvComponent
         :is="'sv-action-bar'"
         :model="model.actionContainer"
@@ -74,20 +77,33 @@ import { useCreatorModel } from "@/creator-model";
 import type { SurveyModel, PageModel } from "survey-core";
 import type { SurveyCreatorModel } from "survey-creator-core";
 import { PageAdorner } from "survey-creator-core";
-import { onMounted, onUpdated, ref } from "vue";
+import { onMounted, onUpdated, ref, watch } from "vue";
 const props = defineProps<{
   creator: SurveyCreatorModel;
   survey?: SurveyModel;
   page: PageModel;
+  isGhost: boolean;
 }>();
 const root = ref();
 const model = useCreatorModel(
-  () => new PageAdorner(props.creator, props.page),
+  () => {
+    const adorner = new PageAdorner(props.creator, props.page);
+    adorner.isGhost = props.isGhost;
+    return adorner;
+  },
   [() => props.page],
   (value) => {
     value.dispose();
   }
 );
+watch(
+  () => props.isGhost,
+  () => {
+    if (model.value) {
+      model.value.isGhost = props.isGhost;
+    }
+  }
+);
 onUpdated(() => {
   if (root.value && model.value) {
     model.value.rootElement = root.value;
diff --git a/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png b/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png
index dcc776d86d..24943e0291 100644
Binary files a/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png and b/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png differ
diff --git a/visualRegressionTests/tests/designer/etalons/question-small.png b/visualRegressionTests/tests/designer/etalons/question-small.png
index abc338d88d..64624a67bf 100644
Binary files a/visualRegressionTests/tests/designer/etalons/question-small.png and b/visualRegressionTests/tests/designer/etalons/question-small.png differ
diff --git a/visualRegressionTests/tests/designer/etalons/small-dropdown-2-selected.png b/visualRegressionTests/tests/designer/etalons/small-dropdown-2-selected.png
index 915d4f44df..cf08376469 100644
Binary files a/visualRegressionTests/tests/designer/etalons/small-dropdown-2-selected.png and b/visualRegressionTests/tests/designer/etalons/small-dropdown-2-selected.png differ
diff --git a/visualRegressionTests/tests/designer/etalons/top-menu-responsivity-icons-small.png b/visualRegressionTests/tests/designer/etalons/top-menu-responsivity-icons-small.png
index f272ad76b1..9b13882a73 100644
Binary files a/visualRegressionTests/tests/designer/etalons/top-menu-responsivity-icons-small.png and b/visualRegressionTests/tests/designer/etalons/top-menu-responsivity-icons-small.png differ
diff --git a/visualRegressionTests/tests/designer/pg-editors.ts b/visualRegressionTests/tests/designer/pg-editors.ts
index ec6ee171aa..a364a53899 100644
--- a/visualRegressionTests/tests/designer/pg-editors.ts
+++ b/visualRegressionTests/tests/designer/pg-editors.ts
@@ -1,4 +1,4 @@
-import { url, setJSON, takeElementScreenshot, getPropertyGridCategory, generalGroupName, wrapVisualTest, addQuestionByAddQuestionButton, resetHoverToCreator, surveySettingsButtonSelector, inputMaskSettingsGroupName, getListItemByText, getVisibleElement, changeToolboxSearchEnabled, getToolboxItemByAriaLabel } from "../../helper";
+import { url, setJSON, takeElementScreenshot, getPropertyGridCategory, generalGroupName, wrapVisualTest, addQuestionByAddQuestionButton, resetHoverToCreator, surveySettingsButtonSelector, inputMaskSettingsGroupName, getListItemByText, getVisibleElement, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, getQuestionBarItemByTitle } from "../../helper";
 import { ClientFunction, Selector } from "testcafe";
 const title = "Property Grid Editors";
 
@@ -830,7 +830,7 @@ test("popup overlay in property grid", async (t) => {
 
     await t
       .click("div[data-sv-drop-target-survey-element='question1']", { offsetX: 200, offsetY: 30 })
-      .click(getVisibleElement(".sv-action-bar-item[title='Open settings']"))
+      .click(getQuestionBarItemByTitle("Open settings"))
       .click(Selector(".spg-dropdown[aria-label='Input type']"));
 
     await takeElementScreenshot("pg-overlay-popup.png", getVisibleElement(".sv-popup .sv-popup__container"), t, comparer);
diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
index 7537f7c6cc..7ca790cc37 100644
--- a/visualRegressionTests/tests/designer/surface.ts
+++ b/visualRegressionTests/tests/designer/surface.ts
@@ -1714,7 +1714,7 @@ test("Question adorners for different sizes", async (t) => {
               "type": "text",
               "name": "question1",
               "minWidth": "100px",
-              "maxWidth": "300px",
+              "maxWidth": "250px",
               "title": "Q"
             },
             {
diff --git a/visualRegressionTests/tests/designer/translation-tab.ts b/visualRegressionTests/tests/designer/translation-tab.ts
index 14ab4c1542..e43ed3bbe7 100644
--- a/visualRegressionTests/tests/designer/translation-tab.ts
+++ b/visualRegressionTests/tests/designer/translation-tab.ts
@@ -77,7 +77,7 @@ test("tranlation property grid", async (t) => {
   });
 });
 
-test("tranlation property grid", async (t) => {
+test("tranlation property grid + onMachineTranslate", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await t.resizeWindow(2560, 1440);
     await ClientFunction(() => {