diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 715cf8315..fe56045b0 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -108,7 +108,7 @@
             font-weight: 600;
             font-style: normal;
             background-color: var(--doc-highlight-text-bg);
-            color: var(---doc-highlight-text-color);
+            color: var(--doc-highlight-text-color);
         }
 
         a {
@@ -120,6 +120,15 @@
             }
         }
     }
+
+    .notification {
+        line-height: 1.5;
+        padding: 1rem;
+        font-weight: 500;
+        border-radius: var(--border-radius);
+        background-color: var(--doc-highlight-text-bg);
+        color: var(--doc-highlight-text-color);
+    }
 }
 
 .doc-section-nav {
diff --git a/doc/accessibility/FormControlsDoc.vue b/doc/accessibility/FormControlsDoc.vue
index 1df73df11..5f19cde24 100644
--- a/doc/accessibility/FormControlsDoc.vue
+++ b/doc/accessibility/FormControlsDoc.vue
@@ -10,7 +10,7 @@
         
 </code></pre>
 
-    <div class="doc-section-description">
+    <div class="doc-section-description mt-3">
         <p>On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
     </div>
     <pre v-code><code>
@@ -18,7 +18,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description">
+    <div class="doc-section-description mt-3">
         <p>
             <i>tabindex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form
             controls should be preferred.
@@ -29,7 +29,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description">
+    <div class="doc-section-description mt-3">
         <p>Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.</p>
     </div>
     <pre v-code><code>
diff --git a/doc/accessibility/SemanticHTMLDoc.vue b/doc/accessibility/SemanticHTMLDoc.vue
index d58ea3e6f..43396fc3f 100644
--- a/doc/accessibility/SemanticHTMLDoc.vue
+++ b/doc/accessibility/SemanticHTMLDoc.vue
@@ -26,7 +26,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description">
+    <div class="doc-section-description mt-3">
         <p>Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
     </div>
     <pre v-code><code>
diff --git a/doc/accessibility/WAIAriaDoc.vue b/doc/accessibility/WAIAriaDoc.vue
index df8facc00..1d1649b3b 100644
--- a/doc/accessibility/WAIAriaDoc.vue
+++ b/doc/accessibility/WAIAriaDoc.vue
@@ -18,7 +18,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description">
+    <div class="doc-section-description mt-3">
         <p>
             A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be
             read by a reader.
@@ -31,7 +31,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description">
+    <div class="doc-section-description mt-3">
         <p>One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with for.</p>
     </div>
     <pre v-code><code>
@@ -43,7 +43,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description">
+    <div class="doc-section-description mt-3">
         <p>
             However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of
             <i>p-sr-only</i>
@@ -60,7 +60,7 @@
 
 </code></pre>
 
-    <div class="doc-section-description">
+    <div class="doc-section-description mt-3">
         <p>A working sample is the PrimeVue checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
     </div>
 
diff --git a/doc/theming/ArchitectureDoc.vue b/doc/theming/ArchitectureDoc.vue
index 4ef290328..dcf0f3b53 100644
--- a/doc/theming/ArchitectureDoc.vue
+++ b/doc/theming/ArchitectureDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">
+        <p class="notification">
             <strong>Note</strong>: In near future, theming architecture of the styled mode will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach.
         </p>
         <p>
diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue
index 5c67164e8..3a5de50ae 100644
--- a/doc/theming/SwitchThemesDoc.vue
+++ b/doc/theming/SwitchThemesDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">
+        <p class="notification">
             Solution below works however there is room for improvement. The upcoming styling api will greatly improve dynamic theme switching ability, eliminates the prerequisites with the introduction of CSS variables and dynamic imports.
         </p>
         <p>
diff --git a/pages/accessibility/index.vue b/pages/accessibility/index.vue
index d949e50d6..4368e620d 100644
--- a/pages/accessibility/index.vue
+++ b/pages/accessibility/index.vue
@@ -9,8 +9,7 @@
             <div class="doc-main">
                 <div class="doc-intro">
                     <h1>Accessibility</h1>
-                    <p>An introduction to accessibility and how it translates to Vue UI Components.</p>
-                    <p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">PrimeVue has WCAG 2.1 AA level compliancy. Refer to the accessibility documentation of each component for detailed information.</p>
+                    <p>PrimeVue has WCAG 2.1 AA level compliance, refer to the accessibility documentation of each component for detailed information.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>