diff --git a/functionalTests/designer/add-new-question.ts b/functionalTests/designer/add-new-question.ts
index b98b37cefa..d857de461f 100644
--- a/functionalTests/designer/add-new-question.ts
+++ b/functionalTests/designer/add-new-question.ts
@@ -23,7 +23,7 @@ test("Add New Question", async t => {
     .click(getAddNewQuestionButton())
     .expect(Selector("span").withText("question1").visible).ok()
     .expect(getVisibleElement(".svc-question__content.svc-question__content--selected").exists).ok()
-    .click(Selector(".svc-element__add-new-question > button.svc-element__question-type-selector"))
+    .click(Selector(".svc-element__add-new-question button.svc-question-type-selector__button"))
     .wait(100)
     .pressKey("p")
     .click(Selector(".sv-popup:not(.sv-popup--overlay) li").withExactText("Panel").filterVisible())
diff --git a/functionalTests/designer/page-navigator.ts b/functionalTests/designer/page-navigator.ts
index 8b3bb95c26..e66ad890f3 100644
--- a/functionalTests/designer/page-navigator.ts
+++ b/functionalTests/designer/page-navigator.ts
@@ -3,7 +3,7 @@ import { ClientFunction, Selector } from "testcafe";
 const title = "Page navigator";
 
 export function getAddNewQuestionButton(n = 0) {
-  return Selector(".svc-element__add-new-question > span").withText("Add Question").nth(n);
+  return Selector(".svc-element__add-new-question > .svc-add-new-item-button__text").withText("Add Question").nth(n);
 }
 
 fixture`${title}`.page`${url}`.beforeEach(async (t) => {
diff --git a/functionalTests/designer/responsiveness.ts b/functionalTests/designer/responsiveness.ts
index 7a9e3936b4..ec01090ad4 100644
--- a/functionalTests/designer/responsiveness.ts
+++ b/functionalTests/designer/responsiveness.ts
@@ -307,7 +307,7 @@ test("Question type popup - wide", async (t) => {
   await setJSON(json);
   await t
     .resizeWindow(1920, 900)
-    .click(Selector("button.svc-element__question-type-selector"))
+    .click(Selector("button.svc-question-type-selector__button"))
     .expect(Selector(".sv-popup:not(.sv-popup--overlay) li").withText("Single-Line Input").visible).ok();
 });
 
@@ -326,7 +326,7 @@ test("Question type popup - narrow", async (t) => {
   await setJSON(json);
   await t
     .resizeWindow(380, 600)
-    .click(Selector("button.svc-element__question-type-selector"))
+    .click(Selector("button.svc-question-type-selector__button"))
     .expect(Selector(".sv-popup.sv-popup--overlay li").withText("Single-Line Input").filterVisible().exists).ok();
 });
 
diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts
index e480701096..6ed4f6d5d3 100644
--- a/functionalTests/helper.ts
+++ b/functionalTests/helper.ts
@@ -131,7 +131,7 @@ export function getSurveyListItemByText(text) {
   return Selector(".sv-popup__content .sv-list__item").withText(text).filterVisible();
 }
 export function getAddNewQuestionButton() {
-  return Selector(".svc-element__add-new-question > span").withText("Add Question");
+  return Selector(".svc-element__add-new-question > .svc-add-new-item-button__text").withText("Add Question");
 }
 
 export function getVisibleElement(selector: string | Selector): Selector {
@@ -148,7 +148,7 @@ export function getSubToolboxItemByText(text: string) {
 }
 export async function addQuestionByAddQuestionButton(t: TestController, text: string) {
   await t
-    .click(Selector(".svc-element__add-new-question .svc-element__question-type-selector"))
+    .click(Selector(".svc-element__add-new-question .svc-question-type-selector"))
     .click(Selector(".svc-list__item span").withExactText(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 a2318d2e61..16567eed4a 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,11 @@
 <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]="'auto'" sv-ng-svg-icon></svg>
+  <span class="svc-question-type-selector">
+    <button type="button" [key2click] (click)="selectQuestionType($event)"
+      [attr.title]="questionTypeSelectorModel.title" [attr.aria-label]="questionTypeSelectorModel.title"
+      class="svc-question-type-selector__button">
+      <svg class="svc-question-type-selector__icon" [iconName]="questionTypeSelectorModel.iconName" [size]="'auto'"
+        sv-ng-svg-icon></svg>
+    </button>
     <sv-ng-popup *ngIf="renderPopup" [popupModel]="questionTypeSelectorModel.popupModel"></sv-ng-popup>
-  </button>
+  </span>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 893a6826b7..7c0c12da9c 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -394,43 +394,45 @@ svc-page {
     var(--ctr-button-border-color-focused, var(--sjs-primary-background-500, #19b394ff));
 }
 
-.svc-element__question-type-selector {
+.svc-question-type-selector {
   position: absolute;
   inset-inline-end: 0;
-
-  appearance: none;
   display: flex;
-  padding: var(--ctr-surface-button-contextual-button-padding-top, var(--lbr-spacing-x1))
-    var(--ctr-surface-button-contextual-button-padding-right, var(--lbr-spacing-x1))
-    var(--ctr-surface-button-contextual-button-padding-bottom, var(--lbr-spacing-x1))
-    var(--ctr-surface-button-contextual-button-padding-left, var(--lbr-spacing-x1));
-  border-radius: var(--ctr-surface-button-contextual-button-corner-radius, var(--lbr-corner-radius-x05));
   box-sizing: border-box;
   border: none;
+  border-radius: var(--ctr-surface-button-contextual-button-corner-radius, var(--lbr-corner-radius-x05));
   background: transparent;
   cursor: pointer;
 
   margin: var(--ctr-surface-button-contextual-button-margin-vertical, var(--lbr-spacing-x1))
     var(--ctr-surface-button-contextual-button-margin-horizontal, var(--lbr-spacing-x1));
-  outline: none;
   transition: background-color $creator-transition-duration;
 
-  &:hover {
-    background-color: var(
-      --ctr-button-contextual-button-background-color-hovered,
+  &:focus-within {
+    background: var(
+      --ctr-button-contextual-button-background-color-focused,
       var(--sjs-primary-background-10, #19b3941a)
     );
   }
-
-  &:focus {
-    background: var(
-      --ctr-button-contextual-button-background-color-focused,
+  &:hover {
+    background-color: var(
+      --ctr-button-contextual-button-background-color-hovered,
       var(--sjs-primary-background-10, #19b3941a)
     );
   }
 }
+.svc-question-type-selector__button {
+  appearance: none;
+  padding: var(--ctr-surface-button-contextual-button-padding-top, var(--lbr-spacing-x1))
+    var(--ctr-surface-button-contextual-button-padding-right, var(--lbr-spacing-x1))
+    var(--ctr-surface-button-contextual-button-padding-bottom, var(--lbr-spacing-x1))
+    var(--ctr-surface-button-contextual-button-padding-left, var(--lbr-spacing-x1));
+  background: transparent;
+  border: none;
+  outline: none;
+}
 
-.svc-element__question-type-selector-icon {
+.svc-question-type-selector__icon {
   width: var(--ctr-surface-button-contextual-button-icon-width, var(--lbr-size-x3));
   height: var(--ctr-surface-button-contextual-button-icon-height, var(--lbr-size-x3));
   display: flex;
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 1e0d501b64..7662ae5631 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -1,7 +1,12 @@
 @use "../variables" as *;
 @use "./carry-forward-panel.scss" as *;
 
-$drop-indicator-position: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / -2);
+$drop-indicator-position: calc(
+  calc(
+      var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) +
+        var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))
+    ) / -2
+);
 
 svc-question {
   display: block;
@@ -62,29 +67,37 @@ svc-question {
   margin: 0 var(--thm-survey-question-panel-toolbar-button-gap);
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, var(--lbr-corner-radius-x075));
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, var(--lbr-spacing-x05))
-           var(--ctr-survey-question-panel-toolbar-item-padding-right, var(--lbr-spacing-x05))
-           var(--ctr-survey-question-panel-toolbar-item-padding-bottom, var(--lbr-spacing-x05))
-           var(--ctr-survey-question-panel-toolbar-item-padding-left, var(--lbr-spacing-x05));
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, var(--lbr-spacing-x05))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, var(--lbr-spacing-x05))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, var(--lbr-spacing-x05));
 
   justify-content: center;
   align-items: center;
 
   background-color: transparent;
-  transition: background $creator-transition-duration, opacity $creator-transition-duration;
+  transition:
+    background $creator-transition-duration,
+    opacity $creator-transition-duration;
   use {
     fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394ff));
   }
   //hovered and focused state
   &:hover,
   &:focus-visible {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-secondary-background-10, #19b3941a));
+    background-color: var(
+      --ctr-survey-question-panel-toolbar-item-background-color-hovered,
+      var(--sjs-secondary-background-10, #19b3941a)
+    );
   }
 
   //pressed state
   &:active,
   &.svc-survey-element-toolbar__item--pressed {
     opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, var(--sjs-layer-1-background-400, #f5f5f5ff));
+    background-color: var(
+      --ctr-survey-question-panel-toolbar-item-background-color-pressed,
+      var(--sjs-layer-1-background-400, #f5f5f5ff)
+    );
     use {
       fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
       opacity: 0.45;
@@ -93,12 +106,21 @@ svc-question {
 
   //checked state
   &.svc-survey-element-toolbar__item--active {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-secondary-background-10, #19b3941a));
+    background-color: var(
+      --ctr-survey-question-panel-toolbar-item-background-color-selected,
+      var(--sjs-secondary-background-10, #19b3941a)
+    );
     .svc-survey-element-toolbar-item__title {
-      color: var(--ctr-survey-question-panel-toolbar-item-text-color-selected, var(--sjs-secondary-background-400, #14a48bff));
+      color: var(
+        --ctr-survey-question-panel-toolbar-item-text-color-selected,
+        var(--sjs-secondary-background-400, #14a48bff)
+      );
     }
     use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color-selected, var(--sjs-secondary-background-500, #19b394ff));
+      fill: var(
+        --ctr-survey-question-panel-toolbar-item-icon-color-selected,
+        var(--sjs-secondary-background-500, #19b394ff)
+      );
     }
   }
 
@@ -108,7 +130,10 @@ svc-question {
     background-color: transparent;
     cursor: default;
     use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color-disabled, var(--sjs-layer-1-foreground-50, #00000080));
+      fill: var(
+        --ctr-survey-question-panel-toolbar-item-icon-color-disabled,
+        var(--sjs-layer-1-foreground-50, #00000080)
+      );
       opacity: 1;
     }
   }
@@ -144,15 +169,14 @@ svc-question {
   }
 }
 
-
 .svc-survey-element-toolbar-item__icon,
 .svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
   box-sizing: border-box;
   display: block;
-  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, var(--lbr-spacing-x05)) 
-           var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, var(--lbr-spacing-x05)) 
-           var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, var(--lbr-spacing-x05)) 
-           var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, var(--lbr-spacing-x05));
+  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, var(--lbr-spacing-x05))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, var(--lbr-spacing-x05))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, var(--lbr-spacing-x05))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, var(--lbr-spacing-x05));
   width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, var(--lbr-size-x3));
   height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, var(--lbr-size-x3));
 }
@@ -194,14 +218,14 @@ svc-question {
 
   box-sizing: border-box;
 
-  padding: var(--lbr-question-panel-padding-top, var(--lbr-spacing-x4)) var(--lbr-question-panel-padding-right, var(--lbr-spacing-x5))
-    var(--ctr-survey-question-panel-padding-bottom-selected, var(--lbr-spacing-x2)) var(--lbr-question-panel-padding-left, var(--lbr-spacing-x5));
+  padding: var(--lbr-question-panel-padding-top, var(--lbr-spacing-x4))
+    var(--lbr-question-panel-padding-right, var(--lbr-spacing-x5))
+    var(--ctr-survey-question-panel-padding-bottom-selected, var(--lbr-spacing-x2))
+    var(--lbr-question-panel-padding-left, var(--lbr-spacing-x5));
   border-radius: var(--lbr-question-panel-corner-radius, var(--lbr-corner-radius-x05));
   background: var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, #ffffffff));
-  box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px)
-    var(--lbr-question-panel-shadow-offset-y, 1px)
-    var(--lbr-question-panel-shadow-blur, 2px)
-    var(--lbr-question-panel-shadow-spread, 0px)
+  box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px) var(--lbr-question-panel-shadow-offset-y, 1px)
+    var(--lbr-question-panel-shadow-blur, 2px) var(--lbr-question-panel-shadow-spread, 0px)
     var(--lbr-question-panel-shadow-color, var(--sjs-special-shadow, #00000040));
 
   outline: none;
@@ -269,7 +293,8 @@ svc-question {
 .svc-question__placeholders > div {
   overflow: visible;
 }
-.svc-question--enter, .svc-question--leave {
+.svc-question--enter,
+.svc-question--leave {
   animation-name: fadeIn, moveInWithOverflow;
   animation-fill-mode: forwards;
   animation-direction: var(--animation-direction);
@@ -278,9 +303,9 @@ svc-question {
   animation-delay: var(--fade-animation-delay), var(--move-animation-delay);
 }
 .svc-question--enter {
-    opacity: 0;
+  opacity: 0;
   --fade-animation-duration: #{$svc-expand-fade-in-duration};
-  --move-animation-duration:  #{$svc-expand-move-in-duration};
+  --move-animation-duration: #{$svc-expand-move-in-duration};
   --fade-animation-delay: #{$svc-expand-fade-in-delay};
   --move-animation-delay: 0s;
   --animation-timing-function: #{$ease-out};
@@ -288,7 +313,7 @@ svc-question {
 }
 .svc-question--leave {
   --fade-animation-duration: #{$svc-collapse-fade-out-duration};
-  --move-animation-duration:  #{$svc-collapse-move-out-duration};
+  --move-animation-duration: #{$svc-collapse-move-out-duration};
   --fade-animation-delay: 0s;
   --move-animation-delay: #{$svc-collapse-move-out-delay};
   --animation-direction: reverse;
@@ -304,9 +329,9 @@ svc-question {
   }
 }
 
-.svc-question--enter, .svc-question--leave {
-  &.svc-question__adorner
-   {
+.svc-question--enter,
+.svc-question--leave {
+  &.svc-question__adorner {
     opacity: 1;
     animation-name: changeAlignSelf;
     animation-duration: 0s;
@@ -316,17 +341,18 @@ svc-question {
   &.svc-question__adorner {
     align-self: flex-start;
     animation-delay: var(--move-animation-duration);
-   }
+  }
 }
 
 .svc-question--leave {
   &.svc-question__adorner {
     animation-delay: var(--move-animation-delay);
-   }
+  }
 }
 
 .svc-creator--disable-animations {
-  .svc-question--enter, .svc-question--leave {
+  .svc-question--enter,
+  .svc-question--leave {
     animation: none;
   }
 }
@@ -450,7 +476,7 @@ svc-question {
 
   .svc-list__item:hover > .svc-list__item-body .sv-svg-icon use,
   .sv-svg-icon use {
-    fill: var(--sjs-secondary-background-500, #19B394FF);
+    fill: var(--sjs-secondary-background-500, #19b394ff);
   }
 }
 
@@ -515,8 +541,8 @@ svc-question {
   opacity: var(--ctr-survey-question-panel-opacity-hidden, 0.25);
 
   & > .svc-question__content-actions {
-      opacity: 0;
-    }
+    opacity: 0;
+  }
 }
 
 .svc-creator--mobile {
@@ -531,7 +557,7 @@ svc-question {
     }
   }
   .svc-question__content {
-    padding: calcSize(2) calcSize(3) calcSize(2);  
+    padding: calcSize(2) calcSize(3) calcSize(2);
   }
   .svc-element__header--hidden {
     margin-top: calcSize(2);
@@ -542,31 +568,30 @@ svc-question {
     & > .svc-element__header--hidden {
       margin-top: calcSize(3);
       margin-bottom: calcSize(3);
-    } 
+    }
   }
   .svc-question__content--selected {
     padding-top: calcSize(3);
     padding-bottom: calcSize(2);
     & > .svc-question__content-actions {
-     height: calcSize(6);
-     overflow: visible;
+      height: calcSize(6);
+      overflow: visible;
 
-    & > .sv-action-bar {
-      margin-top: calcSize(2);
-     }
-     &.svc-question--enter {
-       animation-name: fadeIn, moveInWithOverflow;
-     }
-   }
+      & > .sv-action-bar {
+        margin-top: calcSize(2);
+      }
+      &.svc-question--enter {
+        animation-name: fadeIn, moveInWithOverflow;
+      }
+    }
   }
   &.svc-creator--disable-animations {
     .svc-question--enter {
       animation: none;
     }
-  } 
+  }
 }
 
-
 .svc-question__content {
   .sd-question.sd-question--table {
     margin-top: calcSize(-1);
@@ -579,20 +604,19 @@ svc-question {
   border-radius: var(--ctr-toolbox-item-corner-radius, var(--sjs-corner-radius-x1));
   background-color: var(--ctr-toolbox-item-background-color-floating, var(--sjs-layer-1-background-500, #ffffffff));
   color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-layer-1-foreground-100, #000000e6));
-  padding: var(--ctr-toolbox-item-padding-top-submenu, var(--sjs-spacing-x150)) var(--ctr-toolbox-item-padding-right, var(--sjs-spacing-x2)) var(--ctr-toolbox-item-padding-bottom-submenu, var(--sjs-spacing-x150)) var(--ctr-toolbox-item-padding-left-submenu, var(--sjs-spacing-x2));
+  padding: var(--ctr-toolbox-item-padding-top-submenu, var(--sjs-spacing-x150))
+    var(--ctr-toolbox-item-padding-right, var(--sjs-spacing-x2))
+    var(--ctr-toolbox-item-padding-bottom-submenu, var(--sjs-spacing-x150))
+    var(--ctr-toolbox-item-padding-left-submenu, var(--sjs-spacing-x2));
   cursor: grabbing;
   position: absolute;
   z-index: 1000;
   box-shadow:
-    var(--ctr-toolbox-item-shadow-floating-1-offset-x, 0px)
-      var(--ctr-toolbox-item-shadow-floating-1-offset-y, 2px)
-      var(--ctr-toolbox-item-shadow-floating-1-blur, 8px)
-      var(--ctr-toolbox-item-shadow-floating-1-spread, 0px)
+    var(--ctr-toolbox-item-shadow-floating-1-offset-x, 0px) var(--ctr-toolbox-item-shadow-floating-1-offset-y, 2px)
+      var(--ctr-toolbox-item-shadow-floating-1-blur, 8px) var(--ctr-toolbox-item-shadow-floating-1-spread, 0px)
       var(--ctr-toolbox-item-shadow-floating-1-color, var(--sjs-special-glow, #004c441a)),
-    var(--ctr-toolbox-item-shadow-floating-2-offset-x, 0px)
-      var(--ctr-toolbox-item-shadow-floating-2-offset-y, 16px)
-      var(--ctr-toolbox-item-shadow-floating-2-blur, 32px)
-      var(--ctr-toolbox-item-shadow-floating-2-spread, 0px)
+    var(--ctr-toolbox-item-shadow-floating-2-offset-x, 0px) var(--ctr-toolbox-item-shadow-floating-2-offset-y, 16px)
+      var(--ctr-toolbox-item-shadow-floating-2-blur, 32px) var(--ctr-toolbox-item-shadow-floating-2-spread, 0px)
       var(--ctr-toolbox-item-shadow-floating-2-color, var(--sjs-special-glow, #004c441a));
   @include disableUserSelect;
   //max-width: 500px;
@@ -615,7 +639,10 @@ svc-question {
 }
 
 .svc-dragged-element-shortcut--has-icon {
-  padding: var(--ctr-toolbox-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-toolbox-item-padding-right, var(--sjs-spacing-x2)) var(--ctr-toolbox-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-toolbox-item-padding-left, var(--sjs-spacing-x150));
+  padding: var(--ctr-toolbox-item-padding-top, var(--sjs-spacing-x1))
+    var(--ctr-toolbox-item-padding-right, var(--sjs-spacing-x2))
+    var(--ctr-toolbox-item-padding-bottom, var(--sjs-spacing-x1))
+    var(--ctr-toolbox-item-padding-left, var(--sjs-spacing-x150));
   display: flex;
   gap: var(--ctr-toolbox-item-gap, var(--sjs-spacing-x1));
   justify-content: center;
@@ -716,13 +743,19 @@ svc-question {
 .sd-panel {
   .svc-question__content--drag-over-left {
     .svc-question__drop-indicator--left {
-      left: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2)));
+      left: calc(
+        calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) +
+          var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))
+      );
     }
   }
 
   .svc-question__content--drag-over-right {
     .svc-question__drop-indicator--right {
-      right: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2)));
+      right: calc(
+        calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) +
+          var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))
+      );
     }
   }
 }
@@ -745,13 +778,19 @@ svc-question {
 
   .svc-question__content--drag-over-top {
     .svc-question__drop-indicator--top {
-      top: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2)));
+      top: calc(
+        calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) +
+          var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))
+      );
     }
   }
 
   .svc-question__content--drag-over-bottom {
     .svc-question__drop-indicator--bottom {
-      bottom: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2)));
+      bottom: calc(
+        calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) +
+          var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))
+      );
     }
   }
 }
@@ -857,7 +896,8 @@ svc-question,
   .svc-string-editor,
   sv-ng-string > .svc-string-editor {
     display: inline-block;
-    &::before, &::after {
+    &::before,
+    &::after {
       content: none;
     }
   }
@@ -873,15 +913,14 @@ svc-question,
     }
 
     .svc-question__content--collapsed {
-
-      &>.svc-question__dropdown-choices--wrapper,
-      &>.svc-panel__placeholder_frame-wrapper,
-      &>.svc-question__content-actions,
-      &>.svc-panel__add-new-question-container,
-      &>.svc-carry-forward-panel-wrapper,
-      &>.svc-image-question-controls,
-      &>.sd-file,
-      &>sv-ng-file-question {
+      & > .svc-question__dropdown-choices--wrapper,
+      & > .svc-panel__placeholder_frame-wrapper,
+      & > .svc-question__content-actions,
+      & > .svc-panel__add-new-question-container,
+      & > .svc-carry-forward-panel-wrapper,
+      & > .svc-image-question-controls,
+      & > .sd-file,
+      & > sv-ng-file-question {
         display: none;
       }
       .svc-question__drop-indicator {
@@ -894,13 +933,13 @@ svc-question,
         display: flex;
       }
       .sd-element {
-        &>*:not(.sd-element__header) {
+        & > *:not(.sd-element__header) {
           display: none;
         }
       }
 
       .sd-element__header {
-        &>*:not(.sd-element__title) {
+        & > *:not(.sd-element__title) {
           display: none;
         }
       }
@@ -917,7 +956,7 @@ svc-question,
     padding-top: calcSize(4);
 
     .sd-element__header,
-    .sd-element--complex>.sd-element__header {
+    .sd-element--complex > .sd-element__header {
       padding-top: 0;
       padding-bottom: 0;
     }
@@ -928,7 +967,7 @@ svc-question,
   .svc-question__top-actions {
     padding: 0;
   }
-  
+
   .svc-question__adorner {
     .svc-question__content--collapsed {
       padding-bottom: calcSize(2);
@@ -985,7 +1024,8 @@ svc-question,
   .svc-question__content {
     border-radius: 0;
     box-shadow: none;
-    outline: var(--ctr-survey-question-panel-border-width-nested, var(--lbr-stroke-x1)) dashed var(--ctr-survey-question-panel-border-color-nested, var(--sjs-border-25, #d4d4d4ff));
+    outline: var(--ctr-survey-question-panel-border-width-nested, var(--lbr-stroke-x1)) dashed
+      var(--ctr-survey-question-panel-border-color-nested, var(--sjs-border-25, #d4d4d4ff));
     outline-offset: calc(-1 * var(--ctr-survey-question-panel-border-width-nested, var(--lbr-stroke-x1)));
   }
 
@@ -1096,7 +1136,7 @@ svc-question,
     }
   }
 
-  .svc-element__question-type-selector {
+  .svc-question-type-selector {
     position: absolute;
     inset-inline-end: 0;
     bottom: 0;
@@ -1186,7 +1226,7 @@ svc-question,
       height: var(--ctr-button-contextual-button-icon-height, var(--sjs-font-size-x3));
     }
 
-    .svc-element__question-type-selector {
+    .svc-question-type-selector {
       display: none;
     }
 
@@ -1360,7 +1400,10 @@ svc-question,
   &:hover,
   &:focus-visible {
     opacity: initial;
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-secondary-background-10, #19b3941a));
+    background-color: var(
+      --ctr-survey-question-panel-toolbar-item-background-color-hovered,
+      var(--sjs-secondary-background-10, #19b3941a)
+    );
   }
 
   use {
diff --git a/packages/survey-creator-core/src/components/tabs/designer.scss b/packages/survey-creator-core/src/components/tabs/designer.scss
index 31d2d54116..9311ee66a7 100644
--- a/packages/survey-creator-core/src/components/tabs/designer.scss
+++ b/packages/survey-creator-core/src/components/tabs/designer.scss
@@ -160,19 +160,19 @@ svc-tab-designer {
     padding: var(--ctr-button-padding-vertical, var(--sjs-spacing-x2))
       var(--ctr-button-padding-horizontal-contextual-button, var(--sjs-spacing-x10));
 
-    .svc-element__question-type-selector {
+    .svc-question-type-selector {
+      margin: var(--ctr-button-contextual-button-margin-vertical, var(--sjs-spacing-x1))
+        var(--ctr-button-contextual-button-margin-horizontal, var(--sjs-spacing-x1));
+      border-radius: var(--ctr-button-contextual-button-corner-radius, var(--sjs-corner-radius-x05));
+    }
+    .svc-question-type-selector__button {
       padding: var(--ctr-button-contextual-button-padding-top, var(--sjs-spacing-x1))
         var(--ctr-button-contextual-button-padding-right, var(--sjs-spacing-x1))
         var(--ctr-button-contextual-button-padding-bottom, var(--sjs-spacing-x1))
         var(--ctr-button-contextual-button-padding-left, var(--sjs-spacing-x1));
-
-      margin: var(--ctr-button-contextual-button-margin-vertical, var(--sjs-spacing-x1))
-        var(--ctr-button-contextual-button-margin-horizontal, var(--sjs-spacing-x1));
-
-      border-radius: var(--ctr-button-contextual-button-corner-radius, var(--sjs-corner-radius-x05));
     }
 
-    .svc-element__question-type-selector-icon {
+    .svc-question-type-selector__icon {
       width: var(--ctr-button-contextual-button-icon-width, var(--sjs-font-size-x3));
       height: var(--ctr-button-contextual-button-icon-height, var(--sjs-font-size-x3));
 
diff --git a/packages/survey-creator-react/src/AddQuestionButton.tsx b/packages/survey-creator-react/src/AddQuestionButton.tsx
index eb6566d6ba..b9edba23eb 100644
--- a/packages/survey-creator-react/src/AddQuestionButton.tsx
+++ b/packages/survey-creator-react/src/AddQuestionButton.tsx
@@ -1,11 +1,9 @@
 import * as React from "react";
-import { Action, Base, IAction, PageModel, SurveyModel } from "survey-core";
+import { Action } from "survey-core";
 import {
   attachKey2click,
   Popup,
-  SurveyActionBar,
   ReactElementFactory,
-  SurveyPage,
   SvgIcon,
   SurveyElementBase
 } from "survey-react-ui";
@@ -17,26 +15,27 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
   }
   protected renderTypeSelector(): React.JSX.Element {
     const questionTypeSelectorModel = this.model.questionTypeSelectorModel;
-    return attachKey2click(<button
-      type="button"
-      onClick={(e) => {
-        e.stopPropagation();
-        questionTypeSelectorModel.action();
-      }}
-      className="svc-element__question-type-selector"
-      title={this.model.addNewQuestionText}
-    >
-      <span className="svc-element__question-type-selector-icon">
-        <SvgIcon
-          iconName={questionTypeSelectorModel.iconName}
-          size={"auto"}
-          title={this.model.addNewQuestionText}
-        ></SvgIcon>
-      </span>
-      {this.props.renderPopup === undefined || this.props.renderPopup ?
-        <Popup model={questionTypeSelectorModel.popupModel}></Popup>
-        : null}
-    </button>);
+    return <span className={"svc-question-type-selector"}>{
+      attachKey2click(<button
+        onClick={(e) => {
+          e.stopPropagation();
+          questionTypeSelectorModel.action();
+        }}
+        className="svc-question-type-selector__button"
+        title={this.model.addNewQuestionText}
+      >
+        <span className="svc-question-type-selector__icon">
+          <SvgIcon
+            iconName={questionTypeSelectorModel.iconName}
+            size={"auto"}
+            title={this.model.addNewQuestionText}
+          ></SvgIcon>
+        </span>
+      </button>)}
+    {this.props.renderPopup === undefined || this.props.renderPopup ?
+      <Popup model={questionTypeSelectorModel.popupModel}></Popup>
+      : null}
+    </span>;
   }
   protected renderElement(): React.JSX.Element {
     const addButtonClass = this.props.buttonClass || "svc-btn";
diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
index 6febb79215..432a96dff0 100644
--- a/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
@@ -1,39 +1,41 @@
 <template>
-  <button type="button"
-    v-on:click="
-      (e) => {
-        questionTypeSelectorModel.action();
-        e.stopPropagation();
-      }
-    "
-    :title="questionTypeSelectorModel.title"
-    v-key2click
-    :aria-label="questionTypeSelectorModel.title"
-    class="svc-element__question-type-selector"
-  >
-    <SvComponent
-      :is="'sv-svg-icon'"
-      class="svc-element__question-type-selector-icon"
-      v-bind="{
-        iconName: questionTypeSelectorModel.iconName,
-        size: 'auto',
-        title: questionTypeSelectorModel.title,
-      }"
-    ></SvComponent>
+  <span class="svc-question-type-selector">
+    <button
+      class="svc-question-type-selector__button"
+      v-on:click="
+        (e) => {
+          questionTypeSelectorModel.action();
+          e.stopPropagation();
+        }
+      "
+      :title="questionTypeSelectorModel.title"
+      v-key2click
+      :aria-label="questionTypeSelectorModel.title"
+    >
+      <SvComponent
+        :is="'sv-svg-icon'"
+        class="svc-question-type-selector__icon"
+        v-bind="{
+          iconName: questionTypeSelectorModel.iconName,
+          size: 'auto',
+          title: questionTypeSelectorModel.title,
+        }"
+      ></SvComponent>
+    </button>
     <SvComponent
       v-if="renderPopup"
       :is="'sv-popup'"
       :model="questionTypeSelectorModel.popupModel"
     ></SvComponent>
-  </button>
+  </span>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
-import type { Action } from "survey-core";
-import type {} from "survey-creator-core";
 import { key2ClickDirective as vKey2click } from "survey-vue3-ui";
 import { useBase } from "survey-vue3-ui";
 import { SvComponent } from "survey-vue3-ui";
-const props = defineProps<{ questionTypeSelectorModel: any, renderPopup: any}>();
+const props = defineProps<{
+  questionTypeSelectorModel: any;
+  renderPopup: any;
+}>();
 useBase(() => props.questionTypeSelectorModel);
 </script>
diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
index 2034fedf73..7eb74a5efa 100644
--- a/visualRegressionTests/tests/designer/surface.ts
+++ b/visualRegressionTests/tests/designer/surface.ts
@@ -130,8 +130,8 @@ test("Test question type converter on page for panel - 2", async (t) => {
 
     await t
       .scroll(Selector(".svc-tab-designer"), "bottom")
-      .expect(Selector(".svc-element__question-type-selector").visible).ok()
-      .click(Selector(".svc-element__question-type-selector"))
+      .expect(Selector(".svc-question-type-selector").visible).ok()
+      .click(Selector(".svc-question-type-selector"))
       .expect(Selector(".sv-popup__container").filterVisible().visible).ok();
     await takeElementScreenshot("convert-to-popup-panel-not-empty.png", Selector(".sv-popup__container").filterVisible(), t, comparer);
   });
@@ -195,7 +195,7 @@ test("Test question type selector", async (t) => {
     await setJSON(surveyJSON);
 
     await t
-      .click(Selector(".svc-page__content--new .svc-element__question-type-selector-icon"))
+      .click(Selector(".svc-page__content--new .svc-question-type-selector__icon"))
       .expect(Selector(".sv-popup__container").filterVisible().visible).ok();
     await takeElementScreenshot("select-type-popup.png", Selector(".sv-popup__container").filterVisible(), t, comparer);
   });
@@ -1468,14 +1468,14 @@ test("Question add type selector button", async (t) => {
       ]
     };
     await setJSON(json);
-    await t.hover(Selector(".svc-panel__add-new-question-container .svc-element__question-type-selector"));
+    await t.hover(Selector(".svc-panel__add-new-question-container .svc-question-type-selector"));
     await takeElementScreenshot("question-add-type-selector-button-panel-hover.png", Selector(".svc-panel__add-new-question-container"), t, comparer);
-    await ClientFunction(() => { (document.querySelector(".svc-panel__add-new-question-container .svc-element__question-type-selector") as HTMLDivElement).focus(); })();
+    await ClientFunction(() => { (document.querySelector(".svc-panel__add-new-question-container .svc-question-type-selector") as HTMLDivElement).focus(); })();
     await takeElementScreenshot("question-add-type-selector-button-panel-focus.png", Selector(".svc-panel__add-new-question-container"), t, comparer);
 
-    await t.hover(Selector(".svc-page__footer .svc-element__question-type-selector"));
+    await t.hover(Selector(".svc-page__footer .svc-question-type-selector"));
     await takeElementScreenshot("question-add-type-selector-button-page-hover.png", Selector(".svc-page__footer .svc-element__add-new-question"), t, comparer);
-    await ClientFunction(() => { (document.querySelector(".svc-page__footer .svc-element__question-type-selector") as HTMLDivElement).focus(); })();
+    await ClientFunction(() => { (document.querySelector(".svc-page__footer .svc-question-type-selector") as HTMLDivElement).focus(); })();
     await takeElementScreenshot("question-add-type-selector-button-page-focus.png", Selector(".svc-page__footer .svc-element__add-new-question"), t, comparer);
   });
 });
@@ -2475,7 +2475,7 @@ test("Question types with subtypes", async (t) => {
     await setShowToolbox(false);
 
     await t
-      .click(Selector(".svc-element__question-type-selector"))
+      .click(Selector(".svc-question-type-selector"))
       .hover(getListItemByText("Rating Scale").filterVisible())
       .wait(400)
       .hover(getListItemByText("Labels").nth(1));
diff --git a/visualRegressionTests/tests/designer/toolbox.ts b/visualRegressionTests/tests/designer/toolbox.ts
index 1a22b2a349..a17cb04b30 100644
--- a/visualRegressionTests/tests/designer/toolbox.ts
+++ b/visualRegressionTests/tests/designer/toolbox.ts
@@ -590,7 +590,7 @@ test("Toolbox disabled items", async (t) => {
     await setShowSidebar(false);
     await takeElementScreenshot("toolbox-compact-disabled-items.png", toolboxElement, t, comparer);
     await t
-      .click(Selector("button.svc-element__question-type-selector"))
+      .click(Selector("button.svc-question-type-selector__button"))
       .expect(Selector(".sv-popup__container").filterVisible().visible).ok();
     await takeElementScreenshot("add-new-disabled-items.png", Selector(".sv-popup__container").filterVisible(), t, comparer);
   });