diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 2713c20..3e52b19 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -81,7 +81,7 @@
 
 .sp-supported-by-card {
   background: #FFFFFF;
-  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
+  box-shadow: $shadow;
   border-radius: 10px;
   border: none;
   margin-top: 1rem;
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index c284a43..642d12f 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -6,7 +6,11 @@ Add styles or override variables from the theme here.
 
 $primary: #7EB07F;
 $secondary: #F2C94C;
+$gray: #616161;
 $dark: #30312C;
+$bg-color: whitesmoke;
+
+$shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
 
 $td-enable-google-fonts: false;
 $google_font_name: "Montserrat";
diff --git a/assets/scss/docsy_overrides.scss b/assets/scss/docsy_overrides.scss
index d383e5e..5702ce0 100644
--- a/assets/scss/docsy_overrides.scss
+++ b/assets/scss/docsy_overrides.scss
@@ -9,7 +9,7 @@
         font-weight: 600;
     }
     .nav-link:hover, .nav-link.active{
-        background-color: #616161;
+        background-color: $gray;
         border-radius: 5px;
     }
     .td-navbar-nav-scroll {
@@ -30,7 +30,7 @@
 
 .td-sidebar-nav .td-sidebar-link__page,
 ul.ul-2>.td-sidebar-nav__section-title a {
-    color: #616161 !important;
+    color: $gray !important;
     font-weight: 400;
 }
 
@@ -82,7 +82,7 @@ ul.ul-2>.td-sidebar-nav__section-title a:hover {
     right: 0;
     left: unset;
     padding: 0px;
-    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
+    box-shadow: $shadow;
 }
   
 .dropdown-item {