diff --git a/challenge/package.json b/challenge/package.json
index 099301c..fac12b9 100644
--- a/challenge/package.json
+++ b/challenge/package.json
@@ -51,7 +51,7 @@
     "devDependencies": {
         "autoprefixer": "^10.4.20",
         "postcss": "^8.4.45",
-        "tailwindcss": "^3.4.10"
+        "tailwindcss": "^3.4.10",
         "dotenv": "^16.4.5"
     }
 }
diff --git a/challenge/public/images/animatedBackground.webp b/challenge/public/images/animatedBackground.webp
new file mode 100644
index 0000000..7d1648a
Binary files /dev/null and b/challenge/public/images/animatedBackground.webp differ
diff --git a/challenge/src/App.jsx b/challenge/src/App.jsx
index 6e5c957..8dce6ca 100644
--- a/challenge/src/App.jsx
+++ b/challenge/src/App.jsx
@@ -84,24 +84,28 @@ class App extends Component {
   }
 
   render() {
-    console.log("User has selected page ", this.state.currentPageName);
-
-  
     const backgroundStyle = {
-      background: 'linear-gradient(90deg, #FFD700, #FF69B4, #8A2BE2)', // Horizontal Yellowish-Pinkish-Darkish Gradient
+      background: 'linear-gradient(90deg, #FFD700, #FF69B4, #8A2BE2)', 
       backgroundSize: '200% 200%',
       animation: 'gradientAnimation 10s ease infinite',
       minHeight: '100vh',
       padding: '20px',
       color: '#000',
     };
-    
-    
-
 
     return (
       <MuiThemeProvider theme={theme}>
         <div style={backgroundStyle}>
+          {/* Keyframe definition for gradient animation */}
+          <style>
+            {`
+              @keyframes gradientAnimation {
+                0% { background-position: 0% 50%; }
+                50% { background-position: 100% 50%; }
+                100% { background-position: 0% 50%; }
+              }
+            `}
+          </style>
           <Navbar
             fixed={true}
             items={["Home", "Sponsors", "About", "Contact us", "Fun Facts", "Memes"]}