diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss
index 032433c0..348766a1 100644
--- a/assets/styles/styles.scss
+++ b/assets/styles/styles.scss
@@ -120,3 +120,19 @@ input[type="search"]::-webkit-search-cancel-button {
 .nav-tabs {
   --bs-nav-tabs-border-radius: 0.25rem;
 }
+
+[data-bs-theme="light"] .alert-danger i.modus-icons {
+  color: var(--bs-danger);
+}
+
+[data-bs-theme="light"] .alert-primary i.modus-icons {
+  color: var(--bs-primary);
+}
+
+[data-bs-theme="light"] .alert-success i.modus-icons {
+  color: var(--bs-success);
+}
+
+[data-bs-theme="light"] .alert-warning i.modus-icons {
+  color: var(--bs-warning);
+}
diff --git a/content/components/web/alerts/_index.md b/content/components/web/alerts/_index.md
index 00347b29..d9a8538f 100644
--- a/content/components/web/alerts/_index.md
+++ b/content/components/web/alerts/_index.md
@@ -32,14 +32,16 @@ Alerts display in direct response to a user action (e.g. clicking the Submit but
     <tr>
       <td style="line-height: 1.25" scope="row">
         <div class="border">
-          <div class="alert alert-danger d-flex align-items-center mx-3 mt-3 mb-0" role="alert">
-            <i class="modus-icons alert-icon me-2" aria-hidden="true">warning</i>
+          <div class="alert alert-danger d-flex align-items-center mx-3 mt-3 mb-0 alert-dismissible fade show" role="alert">
+            <i class="modus-icons alert-icon me-2" aria-hidden="true">alert</i>
             <div>Error! Your username and password were incorrect</div>
+            <button type="button" class="btn-close" aria-label="Close">
+            </button>
           </div>
           <div class="p-3">
             <form>
               <div class="form-group mb-3">
-                <label for="exampleInputEmail1">Email address</label>
+                <label for="exampleInputEmail1" class="form-label">Email address</label>
                 <input
                   type="email"
                   class="form-control"
@@ -49,7 +51,7 @@ Alerts display in direct response to a user action (e.g. clicking the Submit but
                 />
               </div>
               <div class="form-group mb-3">
-                <label for="exampleInputPassword1">Password</label>
+                <label for="exampleInputPassword1" class="form-label">Password</label>
                 <input
                   type="password"
                   class="form-control"
diff --git a/content/components/web/alerts/styles.md b/content/components/web/alerts/styles.md
index 6c298cf1..ef987811 100644
--- a/content/components/web/alerts/styles.md
+++ b/content/components/web/alerts/styles.md
@@ -17,29 +17,31 @@ popoverCSSInspector: true
 
 ## Specifications
 
-- Container (Height: 56px; Radius: 2px; <span class="theme-l">background-color: white;</span> 1px border, 8px indicator line same color as border on the left; Padding: 16px; Margin: 16px) _required_
+- Container (Height: 56px; Radius: 2px; 1px border, 12px indicator line same color as border on the left; Padding: 16px; Margin: 16px) _required_
 - Alert text (Font: Open Sans Bold 14px) _required_
 - Leading Non-Interactive Icon/ Charm (16x16px) _optional_
-- Button (text only, right aligned) or trailing close icon (16px16px) _optional_
+- Button (text only, right aligned) or trailing close icon (16px16px)
 - Link (underlined, only one per alert) _optional_
 
 <div class="p-5 my-3 pr-5 bg-dark bg-opacity-10">
   <br />
   <br />
   <div
-    class="alert alert-success d-flex align-items-center bg-white"
+    class="alert alert-success d-flex align-items-center alert-dismissible fade show"
     style="max-width: 460px; height: 56px"
     role="alert"
     data-bs-toggle="popover"
     data-bs-placement="right"
     data-bs-custom-class="popover-css-inspector"
     data-css-inspector-hide="b-width margin width"
-    data-css-inspector-show="b-color b-width b-left-width "
-    data-bs-container="td">
+    data-css-inspector-show="b-color b-width b-left-width"
+    data-bs-container="main">
     <i class="modus-icons notranslate alert-icon me-2" aria-hidden="true">
       check_circle
     </i>
     <div>You have completed a task.</div>
+    <button type="button" class="btn-close" aria-label="Close">
+      </button>
   </div>
   <br />
 </div>
@@ -65,77 +67,54 @@ document.addEventListener('DOMContentLoaded', function() {
 ### Examples
 
 <style>
-[data-bs-theme=light] .alert {
-  background-color: white !important;
-}
-.bg-light .alert {
-  max-width: 600px;
-}
 .css-max-width {
   display: none;
 }
-[data-bs-theme=dark] .popover-body .theme-d {
+[data-bs-theme="dark"] .popover-body .theme-d {
   display: inline-block !important;
 }
-[data-bs-theme=dark] code {
+[data-bs-theme="dark"] code {
   filter: brightness(250%);
 }
 </style>
 
 <div class="bg-secondary bg-opacity-10">
   <div class="p-3 p-xl-4 px-xl-5 mx-4">
-    <div class="alert alert-primary d-flex align-items-center" role="alert">
+    <div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
       <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">info</i>
     <div>
       An example alert with an icon
     </div>
+     <button type="button" class="btn-close" aria-label="Close">
+      </button>
   </div>
-    <div class="alert alert-secondary d-flex align-items-center py-2" role="alert">
-      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">help</i>
-      <div>A basic secondary alert with a button</div>
-      <div class="ms-auto">
-        <a href="#" class="btn-text-primary">Button</a>
-      </div>
-    </div>
-    <div class="alert alert-dark d-flex align-items-center" role="alert">
-      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">info</i>
-      <div>A basic dark alert with a <a href="#examples">link</a></div>
-    </div>
     <div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
       <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">check_circle</i>
       <div>Success! A basic success alert with a dismiss icon</div>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
-      </button>
-    </div>
-    <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
-    <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">warning</i>
-      <div> Error! A basic error alert with a dismiss icon</div>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+      <button type="button" class="btn-close" aria-label="Close">
       </button>
     </div>
     <div class="alert alert-warning d-flex align-items-center alert-dismissible fade show" role="alert">
-      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">alert_outlined</i>
+      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">warning</i>
       <div>Warning! A basic warning alert with a dismiss icon</div>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+      <button type="button" class="btn-close" aria-label="Close">
+      </button>
+    </div>
+    <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
+    <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">alert</i>
+      <div> Error! A basic error alert with a dismiss icon</div>
+      <button type="button" class="btn-close" aria-label="Close">
       </button>
     </div>
   </div>
 </div>
 
-### Colors
-
 <!-- prettier-ignore-start -->
 | Element   | Property   | Color                                                                              |
 | --------- | ---------- | ---------------------------------------------------------------------------------- |
 | Primary   | Color      | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD=" " hexD="#ffffff" >}} |
 |           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#0063a380" >}}      |
 |           | Border     | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD=" " hexD="#019AEB" >}} |
-| Secondary | Color      | {{< color-preview nameL="Gray 6" hexL="#6a6e79" nameD=" " hexD="#ffffff" >}}       |
-|           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#6a6e7980" >}}      |
-|           | Border     | {{< color-preview nameL="Gray 8" hexL="#464B52" nameD=" " hexD="#6a6e79" >}}       |
-| Dark      | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD=" " hexD="#ffffff" >}} |
-|           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#171c1e80" >}}      |
-|           | Border     | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD=" " hexD="#464b52" >}} |
 | Success   | Color      | {{< color-preview nameL="Green Dark" hexL="#006638" nameD=" " hexD="#ffffff" >}}   |
 |           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#1e8a4480" >}}      |
 |           | Border     | {{< color-preview nameL="Green Dark" hexL="#006638" nameD=" " hexD="#1e8a44" >}}   |
@@ -145,7 +124,7 @@ document.addEventListener('DOMContentLoaded', function() {
 | Warning   | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252A2E" nameD=" " hexD="#ffffff" >}} |
 |           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#fbad2680" >}}      |
 |           | Border     | {{< color-preview nameL="Yellow Dark" hexL="#e49325" nameD=" " hexD="#fbad26" >}}  |
-{class="table table-sm table-bordered border border-opacity-50"}
+{class="table table-sm table-bordered border border-opacity-50 d-none"}
 <!-- prettier-ignore-end -->
 
 ### Behaviors
diff --git a/content/components/web/rich-text-format-editor/styles.md b/content/components/web/rich-text-format-editor/styles.md
index 73ae5c93..48788e48 100644
--- a/content/components/web/rich-text-format-editor/styles.md
+++ b/content/components/web/rich-text-format-editor/styles.md
@@ -169,11 +169,11 @@ The modals consists of following elements:
           </div>
           <div class="modal-body">
             <div class="form-group mb-3">
-              <label for="inputText">Text <span class="text-danger">*</span></label>
+              <label for="inputText" class="form-label">Text <span class="text-danger">*</span></label>
               <input class="form-control my-1" placeholder="Enter text" type="text" id="inputText" required />
             </div>
             <div class="form-group mb-3">
-              <label for="inputUrl">URL <span class="text-danger">*</span></label>
+              <label for="inputUrl" class="form-label">URL <span class="text-danger">*</span></label>
               <input class="form-control my-1" placeholder="Placeholder text" type="url" id="inputUrl" required />
             </div>
           </div>
diff --git a/package-lock.json b/package-lock.json
index fa1b970f..7bdd8e59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,13 +10,13 @@
       "license": "private",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "6.0.0",
-        "@trimble-oss/modus-bootstrap": "2.0.0-alpha32",
+        "@trimble-oss/modus-bootstrap": "2.0.0-alpha33",
         "@trimble-oss/modus-icons": "1.14.0",
         "autoprefixer": "10.4.19",
         "bootstrap-print-css": "1.0.1",
         "cross-env": "7.0.3",
         "htmlhint": "1.1.4",
-        "hugo-bin": "0.124.0",
+        "hugo-bin": "0.125.0",
         "list.js": "2.3.1",
         "npm-run-all": "4.1.5",
         "popover-css-inspector": "1.0.0-beta14",
@@ -775,9 +775,9 @@
       "dev": true
     },
     "node_modules/@trimble-oss/modus-bootstrap": {
-      "version": "2.0.0-alpha32",
-      "resolved": "https://registry.npmjs.org/@trimble-oss/modus-bootstrap/-/modus-bootstrap-2.0.0-alpha32.tgz",
-      "integrity": "sha512-eWSwyMLMB7GwL1KtgT2axEbnlMy3A2rfug2+f5uG3aX+b/KuX7l3mW2eisWyhSqEZ5KjqO3+6p0W5yiv5xtT6g==",
+      "version": "2.0.0-alpha33",
+      "resolved": "https://registry.npmjs.org/@trimble-oss/modus-bootstrap/-/modus-bootstrap-2.0.0-alpha33.tgz",
+      "integrity": "sha512-3snYk1YXdp3l6/1uw9pAWYpCgqUo49+nCaxJPNahNh0j+G1wXZY6N2XwZsJClX696zoBUZlbfNRmzttjy6qbyw==",
       "dev": true,
       "dependencies": {
         "bootstrap": "5.3.3"
@@ -2849,9 +2849,9 @@
       }
     },
     "node_modules/hugo-bin": {
-      "version": "0.124.0",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.124.0.tgz",
-      "integrity": "sha512-5Vi0XZ0wJS8tmp+RzYwhfAS6gBtU9ZcaVmGHVl7RSiYzbuFVA8YDhsdFry2kZPf2ZOlA3uZuVDJmVCRVzit7xw==",
+      "version": "0.125.0",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.125.0.tgz",
+      "integrity": "sha512-cTvHzQdK04KrBaW3jPdd/JAQXCOdXT1GiPHaMxe0YtLTVCV0ElgxkvXn6eQJUDl4QqM8+IlsFg/b2ofz6XS//A==",
       "dev": true,
       "funding": [
         {
diff --git a/package.json b/package.json
index accc796f..4e6076f2 100644
--- a/package.json
+++ b/package.json
@@ -44,13 +44,13 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "6.0.0",
-    "@trimble-oss/modus-bootstrap": "2.0.0-alpha32",
+    "@trimble-oss/modus-bootstrap": "2.0.0-alpha33",
     "@trimble-oss/modus-icons": "1.14.0",
     "autoprefixer": "10.4.19",
     "bootstrap-print-css": "1.0.1",
     "cross-env": "7.0.3",
     "htmlhint": "1.1.4",
-    "hugo-bin": "0.124.0",
+    "hugo-bin": "0.125.0",
     "list.js": "2.3.1",
     "npm-run-all": "4.1.5",
     "popover-css-inspector": "1.0.0-beta14",