diff --git a/src/App.tsx b/src/App.tsx
index 6b701ab..4ba39f6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,7 +21,7 @@ export default function App() {
   }, []);
 
   return (
-    <div className="app-container">
+    <div className="app-container relative z-10 isolate">
   <div id="nav" data-section="nav">
       <NavbarCentered
       logo={<img src={logoImg} alt="Apex Plumbing" className="h-8 w-auto" />}
diff --git a/src/index.css b/src/index.css
index 09a346b..e69df4f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -134,33 +134,18 @@ html {
 
 body {
   margin: 0;
-  background-color: var(--background);
   color: var(--foreground);
   font-family: '${inter.variable} ${openSans.variable}', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
   overscroll-behavior-y: none;
+  background: linear-gradient(60deg, var(--background) 0%, var(--background-accent) 50%, var(--background) 100%);
+  background-size: 200% 200%;
+  animation: moveGradient 15s ease infinite;
 }
 
 .app-container {
-  position: relative;
-  isolation: isolate;
-}
-
-.app-container::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background: linear-gradient(
-    60deg,
-    var(--background) 0%,
-    var(--accent) 50%,
-    var(--background) 100%
-  );
-  background-size: 400% 400%;
-  animation: moveGradient 15s ease infinite;
 }
 
 h1,