diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
index 277da5be3ba2..e3659c3476c4 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
@@ -410,8 +410,6 @@ hqDefine("cloudcare/js/form_entry/form_ui", [
         self.hasSubmitAttempted = ko.observable(false);
         self.isSubmitting = ko.observable(false);
         self.isAnchoredSubmitStyle = toggles.toggleEnabled('WEB_APPS_ANCHORED_SUBMIT');
-        self.submitClass = constants.FULL_WIDTH + ' text-center' +
-          (self.isAnchoredSubmitStyle ? ' anchored-submit' : ' nonanchored-submit');
 
         self.currentIndex = ko.observable("0");
         self.atLastIndex = ko.observable(false);
diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap3/form.html b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap3/form.html
index 55d5e1194fbf..de78caaff210 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap3/form.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap3/form.html
@@ -42,20 +42,18 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
           </div>
         </div>
       {% endif %}
-      <div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">
-        <div data-bind="
-          css: submitClass,
-          style: {
-            'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} {% if environment != "web-apps" %} && false {% endif %} ? '30px' : '' {# data preview bar #}
-          }">
+      <div id="submit-button" class="form-actions form-group noprint-sub-container"
+           data-bind="
+              visible: showSubmitButton,
+              css: { 'sticky-submit': isAnchoredSubmitStyle },
+              style: {
+                'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} {% if environment != "web-apps" %} && false {% endif %} ? '30px' : '0' {# data preview bar #}
+              }"
+      >
+        <div class="col-12 text-center submit">
           <button class="submit btn btn-primary"
                   type="submit"
-                  data-bind="
-                    enable: enableSubmitButton,
-                    css: {
-                      'btn-lg': !isAnchoredSubmitStyle,
-                      'btn-sm': isAnchoredSubmitStyle,
-                    }">
+                  data-bind="enable: enableSubmitButton">
             <i class="fa fa-spin fa-refresh"
                data-bind="visible: !enableSubmitButton(){% if environment == "web-apps" %} && erroredQuestions.length != 0{% endif %}"
             ></i>
diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap5/form.html b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap5/form.html
index 3bb97a0e85ae..5169dac3820c 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap5/form.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/bootstrap5/form.html
@@ -42,20 +42,18 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
           </div>
         </div>
       {% endif %}
-      <div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">  {# todo B5: css:form-group #}
-        <div data-bind="
-          css: submitClass,
-          style: {
-            'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} {% if environment != "web-apps" %} && false {% endif %} ? '30px' : '' {# data preview bar #}
-          }">
+      <div id="submit-button" class="form-actions form-group noprint-sub-container"  {# todo B5: css:form-group #}
+           data-bind="
+              visible: showSubmitButton,
+              css: { 'sticky-submit': isAnchoredSubmitStyle },
+              style: {
+                'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} {% if environment != "web-apps" %} && false {% endif %} ? '30px' : '0' {# data preview bar #}
+              }"
+      >
+        <div class="col-12 text-center submit">
           <button class="submit btn btn-primary"
                   type="submit"
-                  data-bind="
-                    enable: enableSubmitButton,
-                    css: {
-                      'btn-lg': !isAnchoredSubmitStyle,
-                      'btn-sm': isAnchoredSubmitStyle,
-                    }">
+                  data-bind="enable: enableSubmitButton">
             <i class="fa fa-spin fa-refresh"
                data-bind="visible: !enableSubmitButton(){% if environment == "web-apps" %} && erroredQuestions.length != 0{% endif %}"
             ></i>
diff --git a/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less b/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less
index fd5601f9957e..87bb6fe09274 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less
+++ b/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less
@@ -28,25 +28,18 @@
       margin-right: -@form-text-indent;
     }
 
-    background-color: lighten(@cc-brand-hi, 10);
+    background-color: @call-to-action-extra-hi;
     .border-bottom-radius(0);
 
-    .nonanchored-submit .btn {
+    .submit .btn {
       font-size: 20px;
       padding: 13px 24px;
       .transition(all .5s);
     }
   }
 
-  .anchored-submit {
-    background-color: @call-to-action-low;
-    width: 100vw;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    position: fixed;
-    bottom: 0px;
-    left: 0;
-    z-index: @zindex-formplayer-anchored-submit;
+  .sticky-submit {
+    position: sticky;
   }
 
   // Bootstrap introduces -10px left/right margin for row classes. This causes element to overflow parent.
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss
index fd5601f9957e..115272feb9f3 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss
@@ -28,25 +28,18 @@
       margin-right: -@form-text-indent;
     }
 
-    background-color: lighten(@cc-brand-hi, 10);
+    background-color: var(--bsprimary-bg-subtle);
     .border-bottom-radius(0);
 
-    .nonanchored-submit .btn {
+    .submit .btn {
       font-size: 20px;
       padding: 13px 24px;
       .transition(all .5s);
     }
   }
 
-  .anchored-submit {
-    background-color: @call-to-action-low;
-    width: 100vw;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    position: fixed;
-    bottom: 0px;
-    left: 0;
-    z-index: @zindex-formplayer-anchored-submit;
+  .sticky-submit {
+    position: sticky;
   }
 
   // Bootstrap introduces -10px left/right margin for row classes. This causes element to overflow parent.
diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less
index cdcc37ef095f..1b882f6091b0 100644
--- a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less
+++ b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/includes/variables.less
@@ -116,7 +116,6 @@
 @zindex-formplayer-progress:          990;
 @zindex-cloudcare-debugger:           1005;
 @zindex-formplayer-scroll-to-bottom:    5;
-@zindex-formplayer-anchored-submit:     2;
 
 
 @input-border-radius-large:       5px;
diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss
index 0b754778c71f..bb47d1ddc37a 100644
--- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss
+++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables_bootstrap3.scss
@@ -64,7 +64,6 @@ $zindex-persistent-tile-cloudcare:    993;
 $zindex-formplayer-progress:          990;
 $zindex-cloudcare-debugger:          1005;
 $zindex-formplayer-scroll-to-bottom:    5;
-$zindex-formplayer-anchored-submit:     2;
 $zindex-select2-results:             1056;  // higher than $zindex-modal so select2s can be used in modals
 
 $cursor-disabled: 'not-allowed';
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/partials/form_entry/form.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/partials/form_entry/form.html.diff.txt
index 1af728fdc79f..55107ffb967e 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/partials/form_entry/form.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/partials/form_entry/form.html.diff.txt
@@ -22,12 +22,12 @@
            </div>
          </div>
        {% endif %}
--      <div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">
-+      <div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">  {# todo B5: css:form-group #}
-         <div data-bind="
-           css: submitClass,
-           style: {
-@@ -69,10 +69,10 @@
+-      <div id="submit-button" class="form-actions form-group noprint-sub-container"
++      <div id="submit-button" class="form-actions form-group noprint-sub-container"  {# todo B5: css:form-group #}
+            data-bind="
+               visible: showSubmitButton,
+               css: { 'sticky-submit': isAnchoredSubmitStyle },
+@@ -67,10 +67,10 @@
      {% if environment == "web-apps" %}
        {% if request|ui_notify_enabled:"JUMP_TO_INVALID_QUESTIONS_WEBAPPS" %}
          <div class="alert alert-ui-notify alert-dismissible helpbubble helpbubble-purple helpbubble-bottom-left fade in"
@@ -40,7 +40,7 @@
              <span aria-hidden="true">&times;</span>
            </button>
            <p class="lead">{% trans 'Navigate Across Required Questions' %}</p>
-@@ -87,7 +87,7 @@
+@@ -85,7 +85,7 @@
          </div>
        {% endif %}
      {% endif %}
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/formplayer-webapp_form.formplayer-webapp_form.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/formplayer-webapp_form.formplayer-webapp_form.style.diff.txt
index e69de29bb2d1..fadfc3e1e96d 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/formplayer-webapp_form.formplayer-webapp_form.style.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/formplayer-webapp_form.formplayer-webapp_form.style.diff.txt
@@ -0,0 +1,11 @@
+--- 
++++ 
+@@ -28,7 +28,7 @@
+       margin-right: -@form-text-indent;
+     }
+ 
+-    background-color: @call-to-action-extra-hi;
++    background-color: var(--bsprimary-bg-subtle);
+     .border-bottom-radius(0);
+ 
+     .submit .btn {
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt
index c055fae6b61d..3064370f6abc 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt
@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,124 +1,225 @@
+@@ -1,123 +1,225 @@
 -@import "@{b3-import-variables}";
 -
 -// Nunito Sans is used on dimagi.com and embedded in hqwebapp/base.html
@@ -198,7 +198,6 @@
 -@zindex-formplayer-progress:          990;
 -@zindex-cloudcare-debugger:           1005;
 -@zindex-formplayer-scroll-to-bottom:    5;
--@zindex-formplayer-anchored-submit:     2;
 -
 -
 -@input-border-radius-large:       5px;
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt
index 107820298537..d3622bbee4d0 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables_bootstrap3.style.diff.txt
@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,124 +1,70 @@
+@@ -1,123 +1,69 @@
 -@import "@{b3-import-variables}";
 +/*
 +These are Boostrap 3 variables that were carried over in the
@@ -161,7 +161,6 @@
 -@zindex-formplayer-progress:          990;
 -@zindex-cloudcare-debugger:           1005;
 -@zindex-formplayer-scroll-to-bottom:    5;
--@zindex-formplayer-anchored-submit:     2;
 +$zindex-navbar:                      1000;
 +$zindex-report-loading:               100;
 +$zindex-app-preview:                  998;
@@ -170,7 +169,6 @@
 +$zindex-formplayer-progress:          990;
 +$zindex-cloudcare-debugger:          1005;
 +$zindex-formplayer-scroll-to-bottom:    5;
-+$zindex-formplayer-anchored-submit:     2;
 +$zindex-select2-results:             1056;  // higher than $zindex-modal so select2s can be used in modals
  
 -