diff --git a/src/components/homepage/HomepageBasics/styles.module.css b/src/components/homepage/HomepageBasics/styles.module.css
index b038fce0e..087bd3db8 100644
--- a/src/components/homepage/HomepageBasics/styles.module.css
+++ b/src/components/homepage/HomepageBasics/styles.module.css
@@ -64,13 +64,13 @@ a:hover, a:visited, a:link, a:active
   opacity: 1;
 
   box-shadow: 0px 20px 60px #00000015;
-  border: 2px solid #cc27b0;
+  border: 2px solid #df61ca;
   border-radius: 5px;
 }
 
 .link {
-  color: #cc27b0;
+  color: #df61ca;
 }
 .link:hover {
-  color: #cc27b0;
+  color: #df61ca;
 }
\ No newline at end of file
diff --git a/src/components/homepage/HomepageGettingStarted/styles.module.css b/src/components/homepage/HomepageGettingStarted/styles.module.css
index 572e26a1d..39266e730 100644
--- a/src/components/homepage/HomepageGettingStarted/styles.module.css
+++ b/src/components/homepage/HomepageGettingStarted/styles.module.css
@@ -78,7 +78,7 @@
   .mainCard {
     grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
       /* UI Properties */
-    background: var(--dev-large-background);
+    background: var(--main-hero-card-background);
     box-shadow: var(--dev-card-shadow);
     border: 1px solid var(--dev-card-background);
     border-radius: 40px;
diff --git a/src/css/custom.css b/src/css/custom.css
index 707a5b840..1f1539f53 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -35,7 +35,6 @@
   --dev-card-background: #ffffff;
   --dev-card-shadow:  0px 20px 60px #00000015;
   --dev-card-selected: 0 4px 5px rgba(0,0,0,0.2);
-  --dev-large-background: #ffffff;
 
   --ifm-github-logo: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
   --ifm-medium-logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 1770 1000"><circle cx="500" cy="500" r="500"/><ellipse ry="475" rx="250" cy="501" cx="1296"/><ellipse cx="1682" cy="502" rx="88" ry="424"/></svg>');
@@ -46,13 +45,13 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #54c0e8;
-  --ifm-color-primary-dark: #38b6e4;
-  --ifm-color-primary-darker: #2ab1e2;
-  --ifm-color-primary-darkest: #1a95c3;
-  --ifm-color-primary-light: #70caec;
-  --ifm-color-primary-lighter: #7ecfee;
-  --ifm-color-primary-lightest: #a8dff3;
+  --ifm-color-primary: #7ecfee;
+  --ifm-color-primary-dark: #5ec3ea;
+  --ifm-color-primary-darker: #4ebde8;
+  --ifm-color-primary-darkest: #1eabe1;
+  --ifm-color-primary-light: #8ed5f0;
+  --ifm-color-primary-lighter: #aee1f4;
+  --ifm-color-primary-lightest: #bee7f6;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --dev-text-color-cobalt: #ffffff;
   --dev-boarder-color-theme: white;
@@ -60,11 +59,13 @@
   --dev-text-color-normal: #ffffff;
 
   /*card css*/
-  --dev-card-background: #242526;
+  --dev-card-background: #2a2b2d;
   --dev-card-shadow:  0 4px 5px rgba(0,0,0,0.2);
   --dev-card-selected: 0 5px 5px rgba(107, 107, 107, 0.2);
-  --dev-large-background: #1b1b1d;
   --dev-secondary-text:#dae1e9;
+
+  /*main hero card*/
+  --main-hero-card-background: #202122;
 }
 
 .navbar__logo {
@@ -186,4 +187,9 @@ html[data-theme="dark"] .header-github-link:before {
 .footer__copyright {
   font-size: 10px;
   font-weight: 300;
+}
+
+html[data-theme="dark"] .footer {
+  border-top: 1px solid;
+  border-color: #7f7f7f;
 }
\ No newline at end of file