diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/AppBar/index.jelly b/src/main/resources/io/jenkins/plugins/designlibrary/AppBar/index.jelly
index 34d2c081..de9e104a 100644
--- a/src/main/resources/io/jenkins/plugins/designlibrary/AppBar/index.jelly
+++ b/src/main/resources/io/jenkins/plugins/designlibrary/AppBar/index.jelly
@@ -3,16 +3,18 @@
   <s:layout>
     <s:section title="${%topAppBar}" description="${%topAppBar.description}">
       <s:group>
-        <s:preview fullWidth="true" noBottomPadding="true">
-          <l:app-bar title="Page title" subtitle="3">
-            <button class="jenkins-button jenkins-button--primary">
-              <l:icon src="symbol-add-outline plugin-ionicons-api" />
-              Primary action
-            </button>
-            <button class="jenkins-button">Secondary</button>
-            <button class="jenkins-button">Secondary</button>
-            <t:help href="https://www.jenkins.io" />
-          </l:app-bar>
+        <s:preview fullWidth="true">
+          <div class="jdl-app-bars-page__example jdl-app-bars-page__example--top">
+            <l:app-bar title="Page title" subtitle="3">
+              <button class="jenkins-button jenkins-button--primary">
+                <l:icon src="symbol-add-outline plugin-ionicons-api" />
+                Primary
+              </button>
+              <button class="jenkins-button">Secondary</button>
+              <button class="jenkins-button">Secondary</button>
+              <t:help href="https://www.jenkins.io" />
+            </l:app-bar>
+          </div>
         </s:preview>
         <s:code file="topAppBar.jelly" />
       </s:group>
@@ -32,16 +34,23 @@
     <s:section title="${%bottomAppBar}" description="${%bottomAppBar.description}">
       <s:group>
         <s:preview fullWidth="true">
-          <p class="jdl-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis accumsan lorem vel maximus. Vestibulum malesuada velit elementum, finibus arcu nec, maximus eros. Donec varius lacus at orci ultrices volutpat. Nulla ex dui, fringilla a sem a, imperdiet auctor enim. Aliquam ipsum orci, volutpat quis porta sit amet, commodo et sem.</p>
-          <p class="jdl-paragraph">Maecenas a elit eget est aliquam consectetur dapibus eu nibh. Suspendisse potenti. Fusce tristique nisl ut malesuada sollicitudin. Praesent sed nisl nibh. Etiam tincidunt enim sit amet eleifend maximus. Aenean molestie congue est, eu vehicula ex vulputate nec. Duis commodo, arcu a malesuada facilisis, purus ex imperdiet dolor, nec rhoncus nibh nisi eu ex. Vivamus varius eleifend sollicitudin.</p>
-          <f:bottomButtonBar>
-            <div class="jenkins-buttons-row">
-              <button class="jenkins-button jenkins-button--primary">
-                Primary control
-              </button>
-              <button class="jenkins-button">Secondary</button>
+          <div class="jdl-app-bars-page__example jdl-app-bars-page__example--bottom">
+            <div class="jdl-app-bars-page__skeleton">
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
             </div>
-          </f:bottomButtonBar>
+            <f:bottomButtonBar>
+              <div class="jenkins-buttons-row">
+                <button class="jenkins-button jenkins-button--primary">
+                  Save
+                </button>
+                <button class="jenkins-button">Apply</button>
+              </div>
+            </f:bottomButtonBar>
+          </div>
         </s:preview>
         <s:code file="bottomAppBar.jelly" />
       </s:group>
diff --git a/src/main/resources/scss/abstracts/_overrides.scss b/src/main/resources/scss/abstracts/_overrides.scss
index fedf32c7..5d81dd63 100644
--- a/src/main/resources/scss/abstracts/_overrides.scss
+++ b/src/main/resources/scss/abstracts/_overrides.scss
@@ -1,12 +1,14 @@
 :root {
   --jdl-spacing: var(--section-padding);
   --jdl-border-width: 1.5px;
-  --jdl-border: var(--jdl-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, transparent);
+  --jdl-border: var(--jdl-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, var(--card-background));
+  --jdl-border-translucent: var(--jdl-border-width) solid color-mix(in srgb, var(--text-color-secondary) 9%, transparent);
   --jdl-box-shadow: 0 0 0 var(--jdl-border-width) color-mix(in srgb, currentColor 5%, transparent),
   0 10px 15px rgba(0, 0, 0, 0.05);
 
   @media (prefers-contrast: more) {
     --jdl-border: var(--jdl-border-width) solid var(--text-color);
+    --jdl-border-translucent: var(--jdl-border-width) solid var(--text-color);
     --jdl-box-shadow: 0 0 0 var(--jdl-border-width) var(--text-color);
   }
 }
diff --git a/src/main/resources/scss/components/_component-sample.scss b/src/main/resources/scss/components/_component-sample.scss
index b619ce89..176294f4 100644
--- a/src/main/resources/scss/components/_component-sample.scss
+++ b/src/main/resources/scss/components/_component-sample.scss
@@ -10,24 +10,11 @@
   gap: 1rem;
   border-radius: 0.66rem;
   border: var(--jdl-border);
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: radial-gradient(at 40% 20%, hsl(312, 42%, 60%) 0, transparent 50%),
-    radial-gradient(at 80% 0%, hsl(11, 100%, 56%) 0, transparent 50%),
-    radial-gradient(at 0% 50%, hsl(354, 64%, 72%) 0, transparent 50%),
-    radial-gradient(at 80% 50%, hsl(319, 66%, 64%) 0, transparent 50%),
-    radial-gradient(at 0% 100%, hsl(264, 37%, 59%) 0, transparent 50%),
-    radial-gradient(at 80% 100%, hsl(342, 55%, 41%) 0, transparent 50%),
-    radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0, transparent 50%);
-    background-attachment: fixed;
-    background-position: center;
-    z-index: -1;
-    opacity: 0.075;
-  }
+  background: linear-gradient(45deg, color-mix(in srgb, var(--pink) 7.5%, transparent),
+          color-mix(in srgb, var(--light-indigo) 7.5%, transparent));
+  background-attachment: fixed;
+  background-position: center;
+  background-clip: padding-box;
 
   &--full-width {
     align-items: unset;
diff --git a/src/main/resources/scss/pages/_app-bars.scss b/src/main/resources/scss/pages/_app-bars.scss
new file mode 100644
index 00000000..3578f39d
--- /dev/null
+++ b/src/main/resources/scss/pages/_app-bars.scss
@@ -0,0 +1,84 @@
+.jdl-app-bars-page__example {
+  padding: var(--jdl-spacing);
+  border: var(--jdl-border);
+
+  .jenkins-app-bar {
+    margin-bottom: 0;
+  }
+
+  #bottom-sticker {
+    margin-bottom: calc(var(--jdl-spacing) * -0.5);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: calc(var(--jdl-spacing) * 2);
+    pointer-events: none;
+    backdrop-filter: blur(20px);
+  }
+
+  &--top {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    margin-bottom: calc(var(--jdl-spacing) * -1);
+    padding-bottom: calc(var(--jdl-spacing) * 2);
+    background: linear-gradient(var(--background) 90%, transparent);
+
+    &::after {
+      bottom: 0;
+      mask-image: linear-gradient(transparent, black 80%);
+    }
+  }
+
+  &--bottom {
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+    margin-top: calc(var(--jdl-spacing) * -1);
+    padding-top: calc(var(--jdl-spacing) * 2);
+    background: linear-gradient(transparent, var(--background) 10%);
+
+    &::after {
+      top: 0;
+      mask-image: linear-gradient(black 20%, transparent);
+      border-top-left-radius: calc(0.66rem - var(--jdl-border-width));
+      border-top-right-radius: calc(0.66rem - var(--jdl-border-width));
+    }
+  }
+}
+
+.jdl-app-bars-page__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: calc(var(--jdl-spacing) * 0.5);
+
+  div {
+    width: 50%;
+    height: 10px;
+    border-radius: 0.25rem;
+    background: var(--text-color-secondary);
+
+    @media (prefers-contrast: no-preference) {
+      opacity: 0.5;
+    }
+
+    &:nth-of-type(2) {
+      width: 40%;
+    }
+
+    &:nth-of-type(3) {
+      width: 30%;
+    }
+
+    &:nth-of-type(4) {
+      width: 45%;
+    }
+
+    &:nth-of-type(5) {
+      width: 40%;
+    }
+  }
+}
diff --git a/src/main/resources/scss/pages/_home.scss b/src/main/resources/scss/pages/_home.scss
index 03eea9a9..127c6012 100644
--- a/src/main/resources/scss/pages/_home.scss
+++ b/src/main/resources/scss/pages/_home.scss
@@ -41,7 +41,7 @@
     left: 0;
     right: 0;
     aspect-ratio: 16 / 7;
-    border: var(--jdl-border);
+    border: var(--jdl-border-translucent);
     border-radius: 1rem;
   }
 }
diff --git a/src/main/resources/scss/pages/_index.scss b/src/main/resources/scss/pages/_index.scss
index c99cd0f1..9255b134 100644
--- a/src/main/resources/scss/pages/_index.scss
+++ b/src/main/resources/scss/pages/_index.scss
@@ -1,3 +1,4 @@
+@use "app-bars";
 @use "cards";
 @use "colors";
 @use "conventions";
diff --git a/src/main/webapp/AppBar/bottomAppBar.jelly b/src/main/webapp/AppBar/bottomAppBar.jelly
index 1085880c..3c905dc4 100644
--- a/src/main/webapp/AppBar/bottomAppBar.jelly
+++ b/src/main/webapp/AppBar/bottomAppBar.jelly
@@ -1,11 +1,10 @@
 <div>
-  <p>...</p>
   <f:bottomButtonBar>
     <div class="jenkins-buttons-row">
       <button class="jenkins-button jenkins-button--primary">
-        Primary control
+        Save
       </button>
-      <button class="jenkins-button">Secondary</button>
+      <button class="jenkins-button">Apply</button>
     </div>
   </f:bottomButtonBar>
 </div>
diff --git a/src/main/webapp/AppBar/topAppBar.jelly b/src/main/webapp/AppBar/topAppBar.jelly
index f9825c49..e2d287a0 100644
--- a/src/main/webapp/AppBar/topAppBar.jelly
+++ b/src/main/webapp/AppBar/topAppBar.jelly
@@ -2,7 +2,7 @@
   <l:app-bar title="Page title" subtitle="3">
     <button class="jenkins-button jenkins-button--primary">
       <l:icon src="symbol-add" />
-      Primary control
+      Primary
     </button>
     <button class="jenkins-button">Secondary</button>
     <button class="jenkins-button">Secondary</button>