diff --git a/src/App.tsx b/src/App.tsx
index 3489ab2..c157af9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,7 +12,7 @@ import { Award, Shield, Zap } from "lucide-react";
 
 export default function App() {
   return (
-    <>
+    <div className="main-container">
   <div id="nav" data-section="nav">
       <NavbarCentered
       logo="AGENCY"
@@ -276,6 +276,6 @@ export default function App() {
       ]}
     />
   </div>
-    </>
+    </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 217a971..e5ad451 100644
--- a/src/index.css
+++ b/src/index.css
@@ -134,7 +134,9 @@ html {
 
 body {
   margin: 0;
-  background-color: var(--background);
+  background: linear-gradient(-45deg, var(--background), var(--background-accent), var(--background));
+  background-size: 400% 400%;
+  animation: animated-gradient 15s ease infinite;
   color: var(--foreground);
   font-family: '${inter.variable} ${openSans.variable}', sans-serif;
   position: relative;
diff --git a/src/styles/animations.css b/src/styles/animations.css
index d39bb32..2f8531e 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -128,6 +128,18 @@
   }
 }
 
+@keyframes animated-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 /* Animation classes */
 
 .animate-pulsate {
@@ -169,3 +181,16 @@
 .animate-progress {
   animation: progress linear forwards;
 }
+
+/* Button hover animations */
+button,
+.primary-button,
+.secondary-button {
+  transition: all 0.2s ease-in-out;
+}
+
+button:hover,
+.primary-button:hover,
+.secondary-button:hover {
+  transform: scale(1.03) translateY(-2px);
+}