diff --git a/src/App.tsx b/src/App.tsx
index 3bcd4f3..bec8f72 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,7 +40,7 @@ export default function App() {
     />
   </div>
 
-  <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero" className="relative">
       <HeroBillboard
       tag="Since 1994"
       title="Artisan Bread & Pastries"
@@ -57,7 +57,7 @@ export default function App() {
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="relative">
       <AboutMediaOverlay
       tag="Our Story"
       title="Quality You Can Taste"
@@ -70,7 +70,7 @@ export default function App() {
     />
   </div>
 
-  <div id="products" data-section="products">
+  <div id="products" data-section="products" className="relative">
       <ProductMediaCards
       tag="Our Bakes"
       title="Fresh From The Oven"
@@ -110,7 +110,7 @@ export default function App() {
     />
   </div>
 
-  <div id="features" data-section="features">
+  <div id="features" data-section="features" className="relative">
       <FeaturesTaggedCards
       tag="Our Philosophy"
       title="Why Choose Us?"
@@ -138,7 +138,7 @@ export default function App() {
     />
   </div>
 
-  <div id="metrics" data-section="metrics">
+  <div id="metrics" data-section="metrics" className="relative">
       <MetricsSimpleCards
       tag="Our Impact"
       title="By The Numbers"
@@ -160,7 +160,7 @@ export default function App() {
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
+  <div id="testimonials" data-section="testimonials" className="relative">
       <TestimonialMarqueeCards
       tag="Loved By Locals"
       title="What People Say"
@@ -200,7 +200,7 @@ export default function App() {
     />
   </div>
 
-  <div id="faq" data-section="faq">
+  <div id="faq" data-section="faq" className="relative">
       <FaqTwoColumn
       tag="Questions?"
       title="Common Inquiries"
@@ -226,7 +226,7 @@ export default function App() {
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="relative">
       <ContactSplitEmail
       tag="Get in touch"
       title="Stay Connected"
diff --git a/src/index.css b/src/index.css
index c2aa875..e38b248 100644
--- a/src/index.css
+++ b/src/index.css
@@ -175,3 +175,11 @@ h6 {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   border: 1px solid var(--color-secondary-cta);
 }
+
+.glassmorphic-badge {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}