diff --git a/package-lock.json b/package-lock.json
index 5ec4266..3b1e4a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "framer-motion": "^11.11.8"
+        "framer-motion": "^11.11.8",
+        "to-do-list": "file:"
       },
       "devDependencies": {
         "@eslint/js": "^9.12.0",
@@ -966,6 +967,7 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
       "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -1052,6 +1054,10 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/to-do-list": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
diff --git a/package.json b/package.json
index fc42fe4..125feae 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "prettier": "^3.3.3"
   },
   "dependencies": {
-    "framer-motion": "^11.11.8"
+    "framer-motion": "^11.11.8",
+    "to-do-list": "file:"
   }
 }
diff --git a/style.css b/style.css
index a101990..44ddb6e 100644
--- a/style.css
+++ b/style.css
@@ -30,7 +30,7 @@ why-need-link {
   border-radius: 5px;
   transition: background-color 0.3s ease;
 }
-. .container {
+.container {
   width: 100%;
   max-width: 1000px;
   padding: 20px;
@@ -83,13 +83,28 @@ h1 {
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
   gap: 10px;
   row-gap: 1rem;
-  background-color: rgba(255, 255, 255, 0.9);
+  /* background-color: rgba(255, 255, 255, 0.9); */
+  background: linear-gradient(-45deg, #cb115f, #e423da, #ff5f5f, #ffc371);
+  background-size: 400% 400%;
+  animation: gradientAnimation 15s ease infinite;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
 }
 
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 .js-actions-wrapper {
   display: flex;
   justify-content: center;