diff --git a/examples/knockout/index.html b/examples/knockout/index.html
index 60da490b56..2062fe11cf 100644
--- a/examples/knockout/index.html
+++ b/examples/knockout/index.html
@@ -8,12 +8,12 @@
 
     <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> -->
     <!-- <script src="../../build/survey-core/plugins/bootstrap-integration.js"></script> -->
-    <link rel="stylesheet" href="../../build/survey-knockout/survey.css" />
-    <!-- <link rel="stylesheet" href="../../build/survey-knockout/modern.css" /> -->
-    <link rel="stylesheet" href="../../build/survey-knockout/defaultV2.css" />
+    <!-- <link rel="stylesheet" href="../../build/survey-core/survey.css" /> -->
+    <!-- <link rel="stylesheet" href="../../build/survey-core/modern.css" /> -->
+    <link rel="stylesheet" href="../../build/survey-core/defaultV2.css" />
     <script src="../../build/survey-core/survey.core.js"></script>
-    <script src="../../build/survey-knockout/survey.ko.js"></script>
-    <!-- <script src="../../build/survey-knockout-ui/survey-knockout-ui.js"></script> -->
+    <!-- <script src="../../build/survey-knockout/survey.ko.js"></script> -->
+    <script src="../../build/survey-knockout-ui/survey-knockout-ui.js"></script>
 </head>
 
   <body>
diff --git a/examples/react/index.html b/examples/react/index.html
index 2ae859b783..d4a6d20ad0 100644
--- a/examples/react/index.html
+++ b/examples/react/index.html
@@ -14,10 +14,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
 
     <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> -->
-    <!-- <link rel="stylesheet" href="../../build/survey-react/survey.css" /> -->
-    <!-- <link rel="stylesheet" href="../../build/survey-react/modern.css" /> -->
-    <link rel="stylesheet" href="../../build/survey-react/defaultV2.css" />
-    <script src="../../build/survey-react/survey.react.js"></script>
+    <!-- <link rel="stylesheet" href="../../build/survey-core/survey.css" /> -->
+    <!-- <link rel="stylesheet" href="../../build/survey-core/modern.css" /> -->
+    <link rel="stylesheet" href="../../build/survey-core/defaultV2.css" />
+    <script src="../../build/survey-core/survey.core.js"></script>
+    <!-- <script src="../../build/survey-react/survey.react.js"></script> -->
+    <script src="../../build/survey-react-ui/survey-react-ui.js"></script>
   </head>
 
   <body>
diff --git a/examples/react/index.js b/examples/react/index.js
index b1a7c65137..a9d89e7d9b 100644
--- a/examples/react/index.js
+++ b/examples/react/index.js
@@ -1031,7 +1031,7 @@ function init() {
 
   //Survey.StylesManager.applyTheme("default");
   //Survey.StylesManager.applyTheme("modern");
-  Survey.StylesManager.applyTheme("defaultV2");
+  // Survey.StylesManager.applyTheme("defaultV2");
 
   var model = new Survey.Model(json);
   //model.setDesignMode(true);
@@ -1048,7 +1048,7 @@ function init() {
     });
 
   ReactDOM.render(
-    <Survey.Survey model={model} />,
+    <SurveyReact.Survey model={model} />,
     document.getElementById("surveyElement")
   );
 }
diff --git a/packages/survey-angular-ui/src/components-container.component.html b/packages/survey-angular-ui/src/components-container.component.html
index 3f67502dc5..1063bd6531 100644
--- a/packages/survey-angular-ui/src/components-container.component.html
+++ b/packages/survey-angular-ui/src/components-container.component.html
@@ -2,13 +2,13 @@
   <ng-container *ngIf="isNeedRenderWrapper">
     <div *ngIf="components.length > 0" class="sv-components-column">
       <ng-container *ngFor="let component of components">
-        <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+        <ng-template [component]="{ name: component.component, data: { survey: survey, container: container, model: component.data } }"></ng-template>
       </ng-container>
     </div>
   </ng-container>
   <ng-container *ngIf="!isNeedRenderWrapper && components.length > 0">
     <ng-container *ngFor="let component of components">
-      <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+      <ng-template [component]="{ name: component.component, data: { survey: survey, container: container, model: component.data } }"></ng-template>
     </ng-container>
   </ng-container>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/components/progress/default/progress.component.html b/packages/survey-angular-ui/src/components/progress/default/progress.component.html
index 93d9bb7673..4763ba36f9 100644
--- a/packages/survey-angular-ui/src/components/progress/default/progress.component.html
+++ b/packages/survey-angular-ui/src/components/progress/default/progress.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div [class]="model.getProgressCssClasses()">
+  <div [class]="model.getProgressCssClasses(container)">
     <div [class]="model.css.progressBar" [style.width]="model.progressValue + '%'"
         role="progressbar" aria-valuemin="0" aria-valuemax="100">
         <span [class]="getProgressTextInBarCss(model.css)">
diff --git a/packages/survey-angular-ui/src/components/progress/default/progress.component.ts b/packages/survey-angular-ui/src/components/progress/default/progress.component.ts
index 902abeb845..6cb4952ee5 100644
--- a/packages/survey-angular-ui/src/components/progress/default/progress.component.ts
+++ b/packages/survey-angular-ui/src/components/progress/default/progress.component.ts
@@ -8,6 +8,7 @@ import { EmbeddedViewContentComponent } from "../../../embedded-view-content.com
   templateUrl: "./progress.component.html"
 })
 export class ProgressDefaultComponent extends EmbeddedViewContentComponent {
+  @Input() container?: string;
   @Input() model: any;
   getProgressTextInBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextInBarCss(css);
diff --git a/packages/survey-vue3-ui/src/components/Container.vue b/packages/survey-vue3-ui/src/components/Container.vue
index 39757bc9d0..b731bc21f9 100644
--- a/packages/survey-vue3-ui/src/components/Container.vue
+++ b/packages/survey-vue3-ui/src/components/Container.vue
@@ -5,6 +5,7 @@
         <component
           :is="component.component"
           :survey="survey"
+          :container="container"
           :model="component.data"
         ></component>
       </template>
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
index 12dae96557..bdac38afe8 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
@@ -24,6 +24,7 @@ import { onMounted, onUnmounted, ref } from "vue";
 
 const props = defineProps<{
   model: ActionContainer;
+  container?: string;
   handleClick?: boolean;
 }>();
 const root = ref<HTMLDivElement>(null as any as HTMLDivElement);
diff --git a/packages/survey-vue3-ui/src/components/progress/Progress.vue b/packages/survey-vue3-ui/src/components/progress/Progress.vue
index 2a3187aaaf..40fa4d8fa5 100644
--- a/packages/survey-vue3-ui/src/components/progress/Progress.vue
+++ b/packages/survey-vue3-ui/src/components/progress/Progress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="survey.getProgressCssClasses()">
+  <div :class="survey.getProgressCssClasses(container)">
     <div
       :class="survey.css.progressBar"
       :style="{ width: progress }"
@@ -23,6 +23,7 @@ import { SurveyModel, SurveyProgressModel } from "survey-core";
 
 const props = defineProps<{
   survey: SurveyModel;
+  container?: string;
   css?: any;
 }>();
 const progress = computed(() => props.survey.progressValue + "%");
diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
index cac51f858d..29a27b758a 100644
--- a/src/defaultV2-theme/blocks/sd-body.scss
+++ b/src/defaultV2-theme/blocks/sd-body.scss
@@ -93,16 +93,6 @@
   gap: calcSize(2);
 }
 
-.sd-body__progress {
-  margin-bottom: calcSize(4);
-}
-
-.sd-body__progress--top {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-}
-
 .sd-body--empty {
   min-height: 400px;
   text-align: center;
@@ -158,6 +148,7 @@
     &:hover {
       background-color: $background-dark;
     }
+
     &:focus {
       box-shadow: 0 0 0 2px $primary;
     }
diff --git a/src/defaultV2-theme/blocks/sd-progress.scss b/src/defaultV2-theme/blocks/sd-progress.scss
index 18627cec38..d9066f24fa 100644
--- a/src/defaultV2-theme/blocks/sd-progress.scss
+++ b/src/defaultV2-theme/blocks/sd-progress.scss
@@ -27,4 +27,15 @@
   @media only screen and (max-width: calcSize(125)) {
     margin-left: 10px;
   }
+}
+
+.sd-body__progress--top {
+  margin-bottom: calcSize(4);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.sd-body__progress--bottom .sd-progress__text {
+  margin-top: calcSize(-3.5);
 }
\ No newline at end of file
diff --git a/src/knockout/components/components-container/components-container.html b/src/knockout/components/components-container/components-container.html
index f5e8f7e429..b1d5a86b45 100644
--- a/src/knockout/components/components-container/components-container.html
+++ b/src/knockout/components/components-container/components-container.html
@@ -3,7 +3,7 @@
 <div data-bind="css: css">
   <!-- ko foreach: components -->
   <!-- ko if: $data.component && !$data.template -->
-  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data } } -->
+  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data, container: $parent.container } } -->
   <!-- /ko -->
   <!-- /ko -->
   <!-- ko if: $data.template -->
@@ -16,7 +16,7 @@
 <!-- ko ifnot: $data.needRenderWrapper -->
   <!-- ko foreach: components -->
   <!-- ko if: $data.component && !$data.template -->
-  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data } } -->
+  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data, container: $parent.container } } -->
   <!-- /ko -->
   <!-- /ko -->
   <!-- ko if: $data.template -->
diff --git a/src/knockout/components/progress/progress.html b/src/knockout/components/progress/progress.html
index 44d35b786a..5b789f5401 100644
--- a/src/knockout/components/progress/progress.html
+++ b/src/knockout/components/progress/progress.html
@@ -1,4 +1,4 @@
-<div data-bind="css: model.getProgressCssClasses()">
+<div data-bind="css: getProgressCssClasses()">
     <div data-bind="css: model.css.progressBar, style: { width: model.progressValue + '%' }"
         role="progressbar" aria-valuemin="0" aria-valuemax="100">
         <span data-bind="text: model.progressText, css: getProgressTextInBarCss(model.css)"></span>
diff --git a/src/knockout/components/progress/progress.ts b/src/knockout/components/progress/progress.ts
index b0c2537f9e..447096b442 100644
--- a/src/knockout/components/progress/progress.ts
+++ b/src/knockout/components/progress/progress.ts
@@ -3,7 +3,7 @@ import { SurveyProgressModel } from "survey-core";
 const template = require("html-loader?interpolate!val-loader!./progress.html");
 
 export class ProgressViewModel {
-  constructor(public model: any) {}
+  constructor(public model: any, private container: string = "header") { }
 
   getProgressTextInBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextInBarCss(css);
@@ -11,12 +11,15 @@ export class ProgressViewModel {
   getProgressTextUnderBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextUnderBarCss(css);
   }
+  getProgressCssClasses() {
+    return this.model.getProgressCssClasses(this.container);
+  }
 }
 
 ko.components.register("sv-progress-progress", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: template
@@ -26,7 +29,7 @@ const templateBridge = "<!-- ko component: { name: 'sv-progress-progress', param
 ko.components.register("sv-progress-pages", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
@@ -34,7 +37,7 @@ ko.components.register("sv-progress-pages", {
 ko.components.register("sv-progress-questions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
@@ -42,7 +45,7 @@ ko.components.register("sv-progress-questions", {
 ko.components.register("sv-progress-correctquestions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
@@ -50,7 +53,7 @@ ko.components.register("sv-progress-correctquestions", {
 ko.components.register("sv-progress-requiredquestions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
diff --git a/src/react/components/components-container.tsx b/src/react/components/components-container.tsx
index 303ef91efe..01b3ddd80e 100644
--- a/src/react/components/components-container.tsx
+++ b/src/react/components/components-container.tsx
@@ -12,13 +12,13 @@ export class ComponentsContainer extends React.Component<any, any> {
     if(!needRenderWrapper) {
       return <>
         {components.map(component => {
-          return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, key: component.id });
+          return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, container: this.props.container, key: component.id });
         })}
       </>;
     }
     return <div className="sv-components-column">
       {components.map(component => {
-        return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, key: component.id });
+        return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, container: this.props.container, key: component.id });
       })}
     </div>;
   }
diff --git a/src/react/reactSurveyProgress.tsx b/src/react/reactSurveyProgress.tsx
index bc7a4efa63..bb16e5a9d9 100644
--- a/src/react/reactSurveyProgress.tsx
+++ b/src/react/reactSurveyProgress.tsx
@@ -21,7 +21,7 @@ export class SurveyProgress extends SurveyNavigationBase {
       width: this.progress + "%",
     };
     return (
-      <div className={this.survey.getProgressCssClasses()}>
+      <div className={this.survey.getProgressCssClasses(this.props.container)}>
         <div
           style={progressStyle}
           className={this.css.progressBar}
diff --git a/src/survey.ts b/src/survey.ts
index 49214f147d..0ad9cbd676 100644
--- a/src/survey.ts
+++ b/src/survey.ts
@@ -2529,11 +2529,11 @@ export class SurveyModel extends SurveyElementCore
   public getProgressTypeComponent(): string {
     return "sv-progress-" + this.progressBarType.toLowerCase();
   }
-  public getProgressCssClasses(): string {
+  public getProgressCssClasses(container: string = ""): string {
     return new CssClassBuilder()
       .append(this.css.progress)
-      .append(this.css.progressTop, this.isShowProgressBarOnTop)
-      .append(this.css.progressBottom, this.isShowProgressBarOnBottom)
+      .append(this.css.progressTop, this.isShowProgressBarOnTop && (!container || container == "header"))
+      .append(this.css.progressBottom, this.isShowProgressBarOnBottom && (!container || container == "footer"))
       .toString();
   }
   private canShowProresBar(): boolean {
@@ -7244,7 +7244,7 @@ export class SurveyModel extends SurveyElementCore
             containerLayoutElements.push(layoutElement);
           }
         }
-        if(container === "contentBottom") {
+        if(container === "footer") {
           if(this.isShowProgressBarOnBottom && !this.isShowStartingPage) {
             containerLayoutElements.push(layoutElement);
           }
diff --git a/src/vue/components/action-bar/action-bar.vue b/src/vue/components/action-bar/action-bar.vue
index 2210d10577..c734535033 100644
--- a/src/vue/components/action-bar/action-bar.vue
+++ b/src/vue/components/action-bar/action-bar.vue
@@ -31,6 +31,7 @@ export * from "./action-bar-separator.vue";
 @Component
 export class ActionBarViewModel extends BaseVue {
   @Prop() model: ActionContainer;
+  @Prop() container: string;
   @Prop() handleClick: boolean;
   constructor(props: any) {
     super(props);
diff --git a/src/vue/components/container.vue b/src/vue/components/container.vue
index 623874b50a..569f773714 100644
--- a/src/vue/components/container.vue
+++ b/src/vue/components/container.vue
@@ -4,6 +4,7 @@
       <component 
         :is="component.component"
         :survey="survey"
+        :container="container"
         :model="component.data"
       ></component>
     </template>
diff --git a/src/vue/progress.vue b/src/vue/progress.vue
index 71a9bd65fe..354b37387d 100644
--- a/src/vue/progress.vue
+++ b/src/vue/progress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="survey.getProgressCssClasses()">
+  <div :class="survey.getProgressCssClasses(container)">
     <div
       :class="survey.css.progressBar"
       :style="{ width: progress }"
@@ -25,6 +25,7 @@ import { SurveyModel, SurveyProgressModel } from "survey-core";
 @Component
 export class Progress extends Vue {
   @Prop() survey: SurveyModel;
+  @Prop() container: string;
   @Prop() css: any;
   public get progress() {
     return this.survey.progressValue + "%";
diff --git a/testCafe/survey/options.js b/testCafe/survey/options.js
index 3b1460707d..cb52fc38b0 100644
--- a/testCafe/survey/options.js
+++ b/testCafe/survey/options.js
@@ -202,14 +202,18 @@ frameworks.forEach(framework => {
   });
 
   test("show bottom progress bar", async t => {
-    const questionElements = Selector(".sv_body > .sv-components-column > div");
+    const progressRootElement = Selector(".sv_main > form > .sv_container .sv-components-row ~ div");
     await t.expect(progressbar.exists).notOk();
 
     await show_bottom_progress_bar();
     await t
       .expect(progressbar.visible).ok()
-      .expect(progressbar.textContent).contains("Page 1 of 3")
-      .expect(questionElements.classNames).contains("sv_progress");
+      .expect(progressbar.textContent).contains("Page 1 of 3");
+    if(framework === "vue") {
+      await t.expect(progressRootElement.find(".sv_progress").visible).ok();
+    } else {
+      await t.expect(progressRootElement.classNames).contains("sv_progress");
+    }
   });
 
   test("check progress bar page 2", async t => {
diff --git a/tests/surveytests.ts b/tests/surveytests.ts
index 3abcd0f247..5457c3acd8 100644
--- a/tests/surveytests.ts
+++ b/tests/surveytests.ts
@@ -863,8 +863,10 @@ QUnit.test("progressText, 'requiredQuestions' type and required matrix dropdown,
     progressBarType: "requiredQuestions",
     elements: [
       { type: "text", name: "q1", isRequired: true },
-      { type: "matrixdropdown", name: "q2", isRequired: true,
-        columns: [{ name: "col1", cellType: "text" }], rows: ["row1"] }
+      {
+        type: "matrixdropdown", name: "q2", isRequired: true,
+        columns: [{ name: "col1", cellType: "text" }], rows: ["row1"]
+      }
     ]
   });
   assert.equal(survey.progressText, "Answered 0/2 questions");
@@ -5422,7 +5424,7 @@ QUnit.test("Survey text preprocessing: survey.onGetQuestionDisplayValue", functi
     ]
   });
   survey.onGetQuestionDisplayValue.add((sender, options) => {
-    if(options.question.isEmpty()) {
+    if (options.question.isEmpty()) {
       options.displayValue = "{" + options.question.title + "}";
     } else {
       options.displayValue = "[" + options.displayValue + "]";
@@ -5976,8 +5978,8 @@ QUnit.test("onMatrixRowAdding, support options.canAddRow & options.allow", funct
   let allow: any = undefined;
   let canAddRow: any = undefined;
   survey.onMatrixRowAdding.add(function (sender, options) {
-    if(allow !== undefined) options.allow = allow;
-    if(canAddRow !== undefined) options.canAddRow = canAddRow;
+    if (allow !== undefined) options.allow = allow;
+    if (canAddRow !== undefined) options.canAddRow = canAddRow;
   });
   const page = survey.addNewPage("Page 1");
   const matrix = new QuestionMatrixDynamicModel("matrixdynamic");
@@ -6222,7 +6224,7 @@ QUnit.test("Notify the user about the status of sending data to custom server",
   let notifierLog = "";
   survey.notify = (msg, type) => {
     notifierLog += msg;
-    if(type) {
+    if (type) {
       notifierLog += " - " + type;
     }
   };
@@ -6258,7 +6260,7 @@ QUnit.test("Notifier button", function (assert) {
   let notifierLog = "";
   survey.notify = (msg, type) => {
     notifierLog += msg;
-    if(type) {
+    if (type) {
       notifierLog += " - " + type;
     }
   };
@@ -7681,7 +7683,7 @@ QUnit.test(
     assert.equal(survey.getCorrectedAnswerCount(), 1, "The order is correct");
   }
 );
-QUnit.test("Quiz, correct, incorrect answers and onIsAnswerCorrect event", function(assert) {
+QUnit.test("Quiz, correct, incorrect answers and onIsAnswerCorrect event", function (assert) {
   const survey = new SurveyModel({
     "elements": [
       {
@@ -7734,7 +7736,8 @@ QUnit.test("question.isCorrectAnswer() and onIsAnswerCorrect event", function (a
     elements: [
       { type: "text", name: "q1", correctAnswer: 1 },
       { type: "text", name: "q2", correctAnswer: 2 }
-    ] });
+    ]
+  });
   survey.onIsAnswerCorrect.add((sender, options) => {
     const q = options.question;
     options.result = Math.abs(q.value - q.correctAnswer) < 2;
@@ -7927,13 +7930,13 @@ QUnit.test("survey.onVisibleChanged & survey.onQuestionVisibleChanged are same e
   const survey = new SurveyModel();
   assert.equal(survey.onVisibleChanged.length, 0, "#1 onVisibleChanged.length");
   assert.equal(survey.onQuestionVisibleChanged.length, 0, "#1 onQuestionVisibleChanged.length");
-  survey.onQuestionVisibleChanged.add((sender, options) => {});
+  survey.onQuestionVisibleChanged.add((sender, options) => { });
   assert.equal(survey.onVisibleChanged.length, 1, "#2 onVisibleChanged.length");
   assert.equal(survey.onQuestionVisibleChanged.length, 1, "#2 onQuestionVisibleChanged.length");
   survey.onQuestionVisibleChanged.clear();
   assert.equal(survey.onVisibleChanged.length, 0, "#3 onVisibleChanged.length");
   assert.equal(survey.onQuestionVisibleChanged.length, 0, "#3 onQuestionVisibleChanged.length");
-  survey.onVisibleChanged.add((sender, options) => {});
+  survey.onVisibleChanged.add((sender, options) => { });
   assert.equal(survey.onVisibleChanged.length, 1, "#4 onVisibleChanged.length");
   assert.equal(survey.onQuestionVisibleChanged.length, 1, "#4 onQuestionVisibleChanged.length");
   survey.onVisibleChanged.clear();
@@ -10890,7 +10893,7 @@ QUnit.test("Server validation - do no fire onValidatedErrorsOnCurrentPage  on ch
     const survey = new SurveyModel({ "elements": [{ name: "name", type: "text", isRequired: true }] });
     let counter = 0;
     survey.onValidatedErrorsOnCurrentPage.add(function (sender, options) {
-      counter ++;
+      counter++;
     });
     survey.completeLastPage();
     assert.equal(survey.state, "running");
@@ -16785,12 +16788,12 @@ QUnit.test("getContainerContent - progress", function (assert) {
 
   survey.showProgressBar = "bottom";
   assert.deepEqual(getContainerContent("header"), [], "progress bottom header");
-  assert.deepEqual(getContainerContent("footer"), [], "progress bottom footer");
-  assert.deepEqual(getContainerContent("contentTop"), [], "progress bottom contentTop");
-  assert.deepEqual(getContainerContent("contentBottom"), [{
+  assert.deepEqual(getContainerContent("footer"), [{
     "component": "sv-progress-pages",
     "id": "progress-pages"
-  }], "progress bottom contentBottom");
+  }], "progress bottom footer");
+  assert.deepEqual(getContainerContent("contentTop"), [], "progress bottom contentTop");
+  assert.deepEqual(getContainerContent("contentBottom"), [], "progress bottom contentBottom");
   assert.deepEqual(getContainerContent("left"), [], "progress bottom left");
   assert.deepEqual(getContainerContent("right"), [], "progress bottom right");
 
@@ -16799,12 +16802,12 @@ QUnit.test("getContainerContent - progress", function (assert) {
     "component": "sv-progress-pages",
     "id": "progress-pages"
   }], "progress both  header");
-  assert.deepEqual(getContainerContent("footer"), [], "progress both footer");
-  assert.deepEqual(getContainerContent("contentTop"), [], "progress both contentTop");
-  assert.deepEqual(getContainerContent("contentBottom"), [{
+  assert.deepEqual(getContainerContent("footer"), [{
     "component": "sv-progress-pages",
     "id": "progress-pages"
-  }], "progress both contentBottom");
+  }], "progress both footer");
+  assert.deepEqual(getContainerContent("contentTop"), [], "progress both contentTop");
+  assert.deepEqual(getContainerContent("contentBottom"), [], "progress both contentBottom");
   assert.deepEqual(getContainerContent("left"), [], "progress both left");
   assert.deepEqual(getContainerContent("right"), [], "progress both right");
 
@@ -16813,12 +16816,12 @@ QUnit.test("getContainerContent - progress", function (assert) {
     "component": "sv-progress-questions",
     "id": "progress-questions"
   }], "progress questions both header");
-  assert.deepEqual(getContainerContent("footer"), [], "progress questions both footer");
-  assert.deepEqual(getContainerContent("contentTop"), [], "progress questions both contentTop");
-  assert.deepEqual(getContainerContent("contentBottom"), [{
+  assert.deepEqual(getContainerContent("footer"), [{
     "component": "sv-progress-questions",
     "id": "progress-questions"
-  }], "progress questions both contentBottom");
+  }], "progress questions both footer");
+  assert.deepEqual(getContainerContent("contentTop"), [], "progress questions both contentTop");
+  assert.deepEqual(getContainerContent("contentBottom"), [], "progress questions both contentBottom");
   assert.deepEqual(getContainerContent("left"), [], "progress questions both left");
   assert.deepEqual(getContainerContent("right"), [], "progress questions both right");
 
@@ -16827,12 +16830,12 @@ QUnit.test("getContainerContent - progress", function (assert) {
     "component": "sv-progress-questions",
     "id": "progress-questions"
   }], "progress toc both header");
-  assert.deepEqual(getContainerContent("footer"), [], "progress toc both footer");
-  assert.deepEqual(getContainerContent("contentTop"), [], "progress toc both contentTop");
-  assert.deepEqual(getContainerContent("contentBottom"), [{
+  assert.deepEqual(getContainerContent("footer"), [{
     "component": "sv-progress-questions",
     "id": "progress-questions"
-  }], "progress toc both contentBottom");
+  }], "progress toc both footer");
+  assert.deepEqual(getContainerContent("contentTop"), [], "progress toc both contentTop");
+  assert.deepEqual(getContainerContent("contentBottom"), [], "progress toc both contentBottom");
   assert.deepEqual(getContainerContent("left"), [{
     "component": "sv-progress-toc",
     "id": "toc-navigation"
@@ -17063,7 +17066,8 @@ const structedDataSurveyJSON = {
       name: "page1",
       elements: [
         { type: "text", name: "q1" },
-        { type: "panel", name: "panel1",
+        {
+          type: "panel", name: "panel1",
           elements: [
             { type: "text", name: "q2" },
             {
@@ -17078,7 +17082,8 @@ const structedDataSurveyJSON = {
       name: "page2",
       elements: [
         { type: "text", name: "q21" },
-        { type: "panel", name: "panel21",
+        {
+          type: "panel", name: "panel21",
           elements: [
             { type: "text", name: "q22" }
           ]
@@ -17133,21 +17138,24 @@ QUnit.test("getStructuredData function", function (assert) {
 });
 QUnit.test("setStructuredData function", function (assert) {
   const survey = new SurveyModel(structedDataSurveyJSON);
-  survey.setStructuredData({ page1: { q1: 100, panel1: { q2: 200, panel2: { q3: 300 } } },
-    page2: { q21: 2100, panel21: { q22: 2200 } } });
+  survey.setStructuredData({
+    page1: { q1: 100, panel1: { q2: 200, panel2: { q3: 300 } } },
+    page2: { q21: 2100, panel21: { q22: 2200 } }
+  });
   assert.deepEqual(survey.data, { q1: 100, q2: 200, q3: 300, q21: 2100, q22: 2200 }, "#1");
   survey.setStructuredData({
     q1: 101, panel1: { q2: 201, panel2: { q3: 301 } },
-    q21: 2101, panel21: { q22: 2201 } });
+    q21: 2101, panel21: { q22: 2201 }
+  });
   assert.deepEqual(survey.data, { q1: 101, q2: 201, q3: 301, q21: 2101, q22: 2201 }, "#2");
   survey.setStructuredData({
     page1: { q1: 102, q2: 202, q3: 302 },
     page2: { q21: 2102, q22: 2202 },
   });
   assert.deepEqual(survey.data, { q1: 102, q2: 202, q3: 302, q21: 2102, q22: 2202 }, "#3");
-  survey.setStructuredData({ page1: { q1: 103 } }, true),
+  survey.setStructuredData({ page1: { q1: 103 } }, true);
   assert.deepEqual(survey.data, { q1: 103, q2: 202, q3: 302, q21: 2102, q22: 2202 }, "#4");
-  survey.setStructuredData({ page1: { q1: 104 } }),
+  survey.setStructuredData({ page1: { q1: 104 } });
   assert.deepEqual(survey.data, { q1: 104 }, "#5");
 });
 
@@ -17206,14 +17214,14 @@ QUnit.test("Try again button should call onComplete", function (assert) {
   class SurveyModelTester extends SurveyModel {
     public doErrorAction(): void {
       const action = this.createTryAgainAction().action;
-      if(!!action) action();
+      if (!!action) action();
     }
   }
   var survey = new SurveyModelTester({ elements: [{ type: "text", name: "q1" }] });
   let attempts = 0;
   survey.onComplete.add((sender, options) => {
-    attempts ++;
-    if(attempts < 3) {
+    attempts++;
+    if (attempts < 3) {
       survey.doErrorAction();
     }
   });
@@ -17392,7 +17400,7 @@ QUnit.test("Do not run onComplete twice if complete trigger and completeLastPage
   });
   let counter = 0;
   survey.onComplete.add((sender, options) => {
-    counter ++;
+    counter++;
   });
   survey.setValue("question1", 1);
   survey.completeLastPage();
@@ -17439,8 +17447,8 @@ QUnit.test("Expression with dates & defaultValueExpression & expression question
       }
     ]
   });
-  const checkFunc= function(res: Array<boolean>, no: number) {
-    for(var i = 0; i < res.length; i ++) {
+  const checkFunc = function (res: Array<boolean>, no: number) {
+    for (var i = 0; i < res.length; i++) {
       const name = "check" + (i + 1).toString();
       const val = survey.getValue(name);
       assert.equal(val, res[i], "check no: " + no + ", value name: " + name);
@@ -17612,15 +17620,20 @@ QUnit.test("survey.applyTheme", function (assert) {
 });
 QUnit.test("page/panel delete do it recursively", function (assert) {
   const survey = new SurveyModel({
-    elements: [{ type: "panel", name: "p1",
+    elements: [{
+      type: "panel", name: "p1",
       elements: [
         { type: "text", name: "q1" },
-      ] },
-    { type: "panel", name: "p2",
+      ]
+    },
+    {
+      type: "panel", name: "p2",
       elements: [
         { type: "text", name: "q2" },
-      ] }
-    ] });
+      ]
+    }
+    ]
+  });
   const p1 = survey.getPanelByName("p1");
   const p2 = survey.getPanelByName("p2");
   const q1 = survey.getQuestionByName("q1");
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bottom-brand.png b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bottom-brand.png
new file mode 100644
index 0000000000..14bf175f6a
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bottom-brand.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bottom.png b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bottom.png
new file mode 100644
index 0000000000..cc6ce6bef0
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bottom.png differ
diff --git a/visualRegressionTests/tests/defaultV2/survey.ts b/visualRegressionTests/tests/defaultV2/survey.ts
index 97444c178e..5ad0869b3f 100644
--- a/visualRegressionTests/tests/defaultV2/survey.ts
+++ b/visualRegressionTests/tests/defaultV2/survey.ts
@@ -112,6 +112,38 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-progress-bar-top.png", Selector(".sd-container-modern"), t, comparer); // title + progress
     });
   });
+  test("Check survey with progress bottom", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, json);
+      await ClientFunction(() => {
+        (<any>window).survey.showProgressBar = "bottom";
+        (<any>window).survey.progressBarType = "pages";
+        (<any>window).survey.currentPageNo = 1;
+      })();
+      await takeElementScreenshot("survey-progress-bar-bottom.png", Selector(".sd-container-modern"), t, comparer); // title + progress
+    });
+  });
+  test("Check survey with progress bottom with brand info and fit to container", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1800, 900);
+      await initSurvey(framework, json);
+      await ClientFunction(() => {
+        const container = (<any>window).document.getElementById("surveyElement");
+        container.style.position = "fixed";
+        container.style.top = 0;
+        container.style.bottom = 0;
+        container.style.left = 0;
+        container.style.right = 0;
+        (<any>window).survey.showBrandInfo = true;
+        (<any>window).survey.fitToContainer = true;
+        (<any>window).survey.showProgressBar = "bottom";
+        (<any>window).survey.progressBarType = "pages";
+        (<any>window).survey.currentPageNo = 1;
+      })();
+      await takeElementScreenshot("survey-progress-bar-bottom-brand.png", Selector("#surveyElement"), t, comparer); // title + progress
+    });
+  });
   test("Check survey with progress top buttons", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
@@ -382,7 +414,7 @@ frameworks.forEach(framework => {
         const style = document.createElement("style");
         style.innerHTML = ".sd-timer__progress--animation { transition: none !important; }";
         document.body.appendChild(style);
-        (<any>window).Survey.SurveyTimer.instance.start = () => {};
+        (<any>window).Survey.SurveyTimer.instance.start = () => { };
       })();
       await initSurvey(framework, json);
       await t.click(Selector(".sd-navigation__start-btn"));
@@ -454,7 +486,7 @@ frameworks.forEach(framework => {
         const style = document.createElement("style");
         style.innerHTML = ".sd-timer__progress--animation { transition: none !important; }";
         document.body.appendChild(style);
-        (<any>window).Survey.SurveyTimer.instance.start = () => {};
+        (<any>window).Survey.SurveyTimer.instance.start = () => { };
       })();
       await initSurvey(framework, json);
       await t.click(Selector(".sd-navigation__start-btn"));
@@ -523,7 +555,7 @@ frameworks.forEach(framework => {
         ]
       };
       await ClientFunction(() => {
-        (<any>window).Survey.SurveyTimer.instance.start = () => {};
+        (<any>window).Survey.SurveyTimer.instance.start = () => { };
       })();
       await initSurvey(framework, json);
       await t.click(Selector(".sd-navigation__start-btn"));
@@ -532,7 +564,7 @@ frameworks.forEach(framework => {
     });
   });
   test("Check survey progress bar freezes on top", async (t) => {
-    if(framework in ["knockout", "react", "angular"]) { // TODO: reanimate Vue after Vue3 supported
+    if (framework in ["knockout", "react", "angular"]) { // TODO: reanimate Vue after Vue3 supported
       await wrapVisualTest(t, async (t, comparer) => {
         await t.resizeWindow(1500, 720);
         const json = {
@@ -584,7 +616,7 @@ frameworks.forEach(framework => {
         await initSurvey(framework, json);
         await ClientFunction(() => {
           const surveyElement = document.getElementById("surveyElement");
-          if(surveyElement) {
+          if (surveyElement) {
             surveyElement.style.height = "90vh";
             surveyElement.style.overflowY = "auto";
             document.querySelector("[data-name='libertyordeath']")?.scrollIntoView(true);
@@ -668,16 +700,18 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await ClientFunction(() => { (<any>window).Survey.settings.notifications.lifetime = 10000; })();
       await t.resizeWindow(1920, 900);
-      await initSurvey(framework, notifierJson, { onComplete: (_sender, options) => {
-        options.isCompleteOnTrigger = false;
-        options.showDataSaving();
-        let fail = true;
+      await initSurvey(framework, notifierJson, {
+        onComplete: (_sender, options) => {
+          options.isCompleteOnTrigger = false;
+          options.showDataSaving();
+          let fail = true;
 
-        new Promise((resolve, reject) => { setTimeout(fail ? reject : resolve, 10000); }).then(
-          () => { options.showDataSavingSuccess(); },
-          () => { options.showDataSavingError(); }
-        );
-      } });
+          new Promise((resolve, reject) => { setTimeout(fail ? reject : resolve, 10000); }).then(
+            () => { options.showDataSavingSuccess(); },
+            () => { options.showDataSavingError(); }
+          );
+        }
+      });
       await setData({ nps_score: 4 });
       await t.click("input[value=\"Complete\"]");
       await takeElementScreenshot("save-data-saving.png", Selector(".sv-save-data_root"), t, comparer);
@@ -689,16 +723,18 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await ClientFunction(() => { (<any>window).Survey.settings.notifications.lifetime = 10000; })();
       await t.resizeWindow(1920, 900);
-      await initSurvey(framework, notifierJson, { onComplete: (_sender, options) => {
-        options.isCompleteOnTrigger = false;
-        options.showDataSaving();
-        let fail = true;
+      await initSurvey(framework, notifierJson, {
+        onComplete: (_sender, options) => {
+          options.isCompleteOnTrigger = false;
+          options.showDataSaving();
+          let fail = true;
 
-        new Promise((resolve, reject) => { setTimeout(fail ? reject : resolve, 500); }).then(
-          () => { options.showDataSavingSuccess(); },
-          () => { options.showDataSavingError(); }
-        );
-      } });
+          new Promise((resolve, reject) => { setTimeout(fail ? reject : resolve, 500); }).then(
+            () => { options.showDataSavingSuccess(); },
+            () => { options.showDataSavingError(); }
+          );
+        }
+      });
       await setData({ nps_score: 4 });
       await t.click("input[value=\"Complete\"]");
       await takeElementScreenshot("save-data-error.png", Selector(".sv-save-data_root.sv-save-data_error"), t, comparer);
@@ -710,16 +746,18 @@ frameworks.forEach(framework => {
     await ClientFunction(() => { (<any>window).Survey.settings.notifications.lifetime = 10000; })();
     await t.resizeWindow(1920, 900);
     await wrapVisualTest(t, async (t, comparer) => {
-      await initSurvey(framework, notifierJson, { onComplete: (_sender, options) => {
-        options.isCompleteOnTrigger = false;
-        options.showDataSaving();
-        let fail = false;
+      await initSurvey(framework, notifierJson, {
+        onComplete: (_sender, options) => {
+          options.isCompleteOnTrigger = false;
+          options.showDataSaving();
+          let fail = false;
 
-        new Promise((resolve, reject) => { setTimeout(fail ? reject : resolve, 500); }).then(
-          () => { options.showDataSavingSuccess(); },
-          () => { options.showDataSavingError(); }
-        );
-      } });
+          new Promise((resolve, reject) => { setTimeout(fail ? reject : resolve, 500); }).then(
+            () => { options.showDataSavingSuccess(); },
+            () => { options.showDataSavingError(); }
+          );
+        }
+      });
       await setData({ nps_score: 4 });
       await t.click("input[value=\"Complete\"]");
       await takeElementScreenshot("save-data-success.png", Selector(".sv-save-data_root.sv-save-data_success"), t, comparer);
@@ -933,7 +971,7 @@ frameworks.forEach(framework => {
   test("TOC survey navigation mobile", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(800, 900);
-      await ClientFunction(()=>{
+      await ClientFunction(() => {
         window["Survey"]._setIsTouch(true);
       })();
 
