diff --git a/components/AnimatedBackground.module.css b/components/AnimatedBackground.module.css
index 61e6332..5274402 100644
--- a/components/AnimatedBackground.module.css
+++ b/components/AnimatedBackground.module.css
@@ -1,8 +1,31 @@
+.footerContainer {
+    position: relative;
+    background-color: #000; /* Ensures no white background */
+}
+
 .sketchContainer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 20; /* Adjust if needed to be above the video but below other content */
+    z-index: 20; /* Animation layer below footer text */
+    opacity: 0.5; /* Slightly dimmed for readability */
+}
+
+/* Overlay to darken the background */
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Darkens the background for readability */
+    z-index: 25; /* Overlay layer just above the animation */
+}
+
+.footerContent {
+    z-index: 30; /* Ensure footer content is on top */
+    position: relative;
+    color: white; /* Ensure text remains legible */
 }
diff --git a/components/Footer.js b/components/Footer.js
index 9c05973..c5b7800 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -2,15 +2,14 @@ import React, { useState } from 'react'
 import Image from 'next/image'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowPointer } from '@fortawesome/free-solid-svg-icons'
+import AnimatedBackground from './AnimatedBackground'
 
 import styles from './Footer.module.css'
 
 export default function Footer() {
     const currentYear = new Date().getFullYear()
 
-    // Function to handle the reveal of the email address
     const revealEmail = () => {
-        // Construct the email address and open in mail client
         const user = 'hello'
         const domain = 'openadapt.ai'
         window.location.href = `mailto:${user}@${domain}`
@@ -18,9 +17,11 @@ export default function Footer() {
 
     return (
         <div className={styles.footerContainer}>
-            <footer className="grid grid-flow-row auto-rows-max gap-4">
+            <AnimatedBackground /> {/* Background animation component */}
+            <div className={styles.overlay}></div> {/* Dark overlay for readability */}
+            <footer className={`${styles.footerContent} relative grid grid-flow-row auto-rows-max gap-4`}>
                 <div className="m-auto pb-10">
-                    <div className="flex items-center justify-center z-10">
+                    <div className="flex items-center justify-center z-30">
                         <Image
                             className="invert"
                             priority
@@ -58,7 +59,7 @@ export default function Footer() {
                     <div className={styles.footerLinks}>
                         <a href="/privacy-policy" className={styles.link}>
                             Privacy Policy
-                        </a>{' '}
+                        </a>
                         <a href="/terms-of-service" className={styles.link}>
                             Terms of Service
                         </a>