diff --git a/constants/gradientCard.js b/constants/gradientCard.js
index 1749ec3..b6a1968 100644
--- a/constants/gradientCard.js
+++ b/constants/gradientCard.js
@@ -13,6 +13,104 @@ let gradientCards = [{
         gradientName: 'flare',
         gradientMaker: 'ShyamTala'
     },
+    {
+        id: ++autoId,
+        colors: ['#4facfe', '#00f2fe'],
+        gradientColor: 'linear-gradient(to right, #4facfe,#00f2fe)',
+        gradientName: 'malibu beach',
+        gradientMaker: 'ShyamTala'
+    },
+    {
+        id: ++autoId,
+        colors: ['#13547a', '#80d0c7'],
+        gradientColor: 'linear-gradient(to right, #13547a,#80d0c7)',
+        gradientName: 'aqua splash',
+        gradientMaker: 'ShyamTala'
+    },
+    {
+        id: ++autoId,
+        colors: ['#50cc7f', '#f5d100'],
+        gradientColor: 'linear-gradient(to right, #50cc7f,#f5d100)',
+        gradientName: 'millennium pine',
+        gradientMaker: 'ShyamTala'
+    },
+    {
+        id: ++autoId,
+        colors: ['#209cff', '#68e0cf'],
+        gradientColor: 'linear-gradient(to right, #209cff,#68e0cf)',
+        gradientName: 'sea shore',
+        gradientMaker: 'ShyamTala'
+    },
+    {
+        id: ++autoId,
+        colors: ['#ff5858', '#f09819'],
+        gradientColor: 'linear-gradient(to right, #ff5858,#f09819)',
+        gradientName: 'happy memories',
+        gradientMaker: 'ShyamTala'
+    },
+    {
+        id: ++autoId,
+        colors: ['#29323c', '#485563'],
+        gradientColor: 'linear-gradient(to right, #29323c,#485563)',
+        gradientName: 'vicious stance',
+        gradientMaker: 'ShyamTala'
+    },
+    {
+        id: ++autoId,
+        colors: ['#808080', '#3fada8'],
+        gradientColor: 'linear-gradient(to right, #808080,#3fada8)',
+        gradientName: 'vicious stance',
+        gradientMaker: 'allen design'
+    },
+    {
+        id: ++autoId,
+        colors: ['#eaf6a3', '#9aeabf'],
+        gradientColor: 'linear-gradient(to right, #eaf6a3,#9aeabf)',
+        gradientName: 'light shaded',
+        gradientMaker: 'surya design'
+    },
+    {
+        id: ++autoId,
+        colors: ['#f2e7f8', '#cac2ff'],
+        gradientColor: 'linear-gradient(to right, #f2e7f8,#cac2ff)',
+        gradientName: 'light shaded',
+        gradientMaker: 'surya design'
+    },
+    {
+        id: ++autoId,
+        colors: ['#ffffff', '#badbfb'],
+        gradientColor: 'linear-gradient(to right, #ffffff,#badbfb)',
+        gradientName: 'light shaded',
+        gradientMaker: 'surya design'
+    },
+    {
+        id: ++autoId,
+        colors: ['#e0fff9', '#8be7c8'],
+        gradientColor: 'linear-gradient(to right, #e0fff9,#8be7c8)',
+        gradientName: 'light shaded',
+        gradientMaker: 'surya design'
+    },
+    {
+        id: ++autoId,
+        colors: ['#ffe9c9', '#ffd260'],
+        gradientColor: 'linear-gradient(to right, #ffe9c9,#ffd260)',
+        gradientName: 'light shaded',
+        gradientMaker: 'surya design'
+    },
+    {
+        id: ++autoId,
+        colors: ['#ed6ea0', '#ec8c69'],
+        gradientColor: 'linear-gradient(to right, #ed6ea0,#ec8c69)',
+        gradientName: 'royal garden',
+        gradientMaker: 'ShyamTala'
+    },
+    {
+        id: ++autoId,
+        colors: ['#1aa37a', '#9dffb3'],
+        gradientColor: 'linear-gradient(to right, #1aa37a,#9dffb3)',
+        gradientName: 'lush',
+        gradientMaker: 'ShyamTala'
+    },
     {
         id: ++autoId,
         colors: ['#12c2e9', '#c471ed', '#f64f59'],
diff --git a/constants/meshGradientCard.js b/constants/meshGradientCard.js
index 481e8e9..0183300 100644
--- a/constants/meshGradientCard.js
+++ b/constants/meshGradientCard.js
@@ -10,17 +10,7 @@ let meshGradientCards = [{
         gradientName: 'mesh gradient',
         gradientMaker: 'ShyamTala'
     },
-    {
-        id: ++autoId,
-        colors: ['#ac9dff', '#9384ff', '#ff93c4', '#ff80cd'],
-        gradientColor: `radial-gradient(at 100% 0%, hsla(249,100%,80%,1) 0px, transparent 50%),
-                    radial-gradient(at 9% 89%, hsla(247,100%,75%,1) 0px, transparent 50%),
-                    radial-gradient(at 99% 98%, hsla(332,100%,78%,1) 0px, transparent 50%),
-                    radial-gradient(at 0% 0%, hsla(323,100%,75%,1) 0px, transparent 50%)`,
-        backgroundColor: '#b3ff99',
-        gradientName: 'killer mesh gradie',
-        gradientMaker: 'ShyamTala'
-    },
+
     {
         id: ++autoId,
         colors: ['#ff8fcd', '#c6fcfe', '#95f3ff', '#b8ffbb'],
diff --git a/index.html b/index.html
index 51fe9c8..42ecd42 100644
--- a/index.html
+++ b/index.html
@@ -98,7 +98,7 @@
       </nav>
 
       <main class="hero_section">
-        <h2>Beautiful hand-crafted gradients,</h2>
+        <h2>Explore a constantly updated library of gradients,</h2>
         <h2>curated by the community.</h2>
 
         <div class="form">
diff --git a/style.css b/style.css
index ab7989b..4a1712f 100644
--- a/style.css
+++ b/style.css
@@ -7,7 +7,15 @@
 }
 
 ::-webkit-scrollbar {
-  /* display: none; */
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: linear-gradient(to top, #e3d2c4, #fcfcfb);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(to top, #ed6ea0, #ec8c69);
 }
 
 /* code for toast msg */
@@ -394,22 +402,37 @@ footer {
   font-size: 18px;
   line-height: 28px;
   color: #374151;
-  background: #b3ff99;
-  background-image: radial-gradient(
-      at 0% 0%,
-      hsla(279, 96%, 79%, 1) 0px,
-      transparent 50%
-    ),
-    radial-gradient(at 100% 0%, hsla(58, 100%, 78%, 1) 0px, transparent 50%),
-    radial-gradient(at 9% 89%, hsla(243, 89%, 78%, 1) 0px, transparent 50%),
-    radial-gradient(at 99% 98%, hsla(10, 100%, 79%, 1) 0px, transparent 50%);
+  background: linear-gradient(
+    90deg,
+    #6d28d9,
+    #db2777,
+    #feac5e,
+    #c779d0,
+    #4bc0c8
+  );
+  background-size: 600% 600%;
+  animation: gradient_footer 16s ease infinite;
+}
+
+@keyframes gradient_footer {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
 footer p.text {
   font-size: 18px;
   line-height: 28px;
   font-weight: 400;
-  color: #434343;
+  color: #ffffff;
 }
 
 .subscription_form {
@@ -429,6 +452,7 @@ footer input[type="email"] {
   font-size: 0.8rem;
   width: 100%;
   border-radius: 5px;
+  color: #fff;
 }
 
 footer input[type="email"]::placeholder {
@@ -486,19 +510,20 @@ button.subscribe ion-icon {
 
 .desc .title {
   font-weight: 700;
+  color: #fff;
 }
 
 .desc .detailed {
   font-weight: 400;
   line-height: 20px;
-  color: #374151;
+  color: #e7e7e7;
 }
 
 .desc a {
   display: inline-block;
   margin-top: 5px;
   font-size: 16px;
-  color: #be185d;
+  color: #ffffff;
   border-bottom: 2px solid;
 }
 
@@ -511,18 +536,18 @@ button.subscribe ion-icon {
 
 .social_links a {
   font-size: 1.3rem;
-  color: #555555;
+  color: #fff;
   transition: all 0.4s;
 }
 
 .social_links a:hover {
-  color: #737982;
+  color: #e3e3e3;
   transform: translateY(-20%);
 }
 
 p.copyright {
   margin-top: 0.5rem;
-  color: #555555;
+  color: #d4d4d4;
   font-size: 1rem;
   line-height: 1.2rem;
   text-align: center;