diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 4d419b0..2c7602d 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -1,37 +1,4 @@
-.td-navbar {
-  background: $dark;
-  min-height: 5rem;
-  .navbar-brand__name {
-    display: none;
-  }
-  .nav-link {
-    color: $secondary !important;
-    font-weight: 600;
-    border-radius: 5px;
-  }
-  .nav-link:hover {
-    background-color: #61616144;
-    transition: background-color 0.2s ease-in-out;
-  }
-  
-  .nav-link.active{
-    background-color: #616161;
-    color: white;
-  }
-}
-
-.td-breadcrumbs__single {
-  visibility: hidden;
-}
-
-.td-navbar .td-navbar-nav-scroll {
-  height: unset !important;
-  margin-top: unset !important;
-}
-
-.td-navbar .td-navbar-nav-scroll .nav-link {
-  padding: .5rem 1.5rem;
-}
+@import "docsy_overrides";
 
 .sp-footer h2,
 .sp-footer h3,
@@ -57,103 +24,6 @@
   margin: auto;
 }
 
-.td-navbar .td-navbar-nav-scroll .navbar-nav {
-  padding-bottom: 0 !important;
-}
-
-.nav-item {
-  margin-right: .5rem !important;
-}
-
-.dropdown-menu {
-  right: 0;
-  left: unset;
-  padding: 0px;
-  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
-}
-
-.dropdown-item {
-  padding: 0.5rem 1.5rem;
-  border-radius: 0.25rem;
-}
-
-.td-sidebar-nav-active-item {
-  color: $primary !important;
-  font-weight: 600;
-}
-
-.td-sidebar-nav .td-sidebar-link__page,
-ul.ul-2>.td-sidebar-nav__section-title a {
-  color: #616161 !important;
-  font-weight: 400;
-  padding: .3rem .8rem !important;
-  border-radius: .3rem;
-  margin: .1rem !important;
-}
-
-.td-sidebar-link.td-sidebar-link__section {
-  border-radius: .3rem;
-  padding: .3rem .8rem !important;
-  margin: .1rem !important;
-}
-
-.td-sidebar-link.td-sidebar-link__section:hover {
-  color: $primary !important;
-  background-color: #7EB07F11;
-  transition: background-color 0.2s ease-in-out;
-  transition: color 0.2s ease-in-out;
-}
-
-.td-sidebar-nav a.active {
-  color: $primary !important;
-  background-color: #7EB07F22;
-}
-
-ul.ul-2 {
-  padding: 0;
-}
-
-ul.ul-2>.td-sidebar-nav__section-title a:hover {
-  color: $primary !important;
-  background-color: #7EB07F11;
-  transition: background-color 0.2s ease-in-out;
-  transition: color 0.2s ease-in-out;
-}
-
-ul.ul-0 li a.tree-root,
-h5.taxonomy-title {
-  display: none !important;
-}
-
-li:has(input[type="checkbox"]) {
-  list-style-type: none;
-}
-
-.td-toc ul {
-  margin-top: 1rem;
-}
-
-.td-toc li {
-  display: block;
-  padding-bottom: .5rem;
-}
-
-.td-toc a{
-  display: inline !important;
-}
-
-@media (min-width: 768px)  {
-  .td-sidebar {
-    padding-top: 5rem;
-  }
-  .td-404 main, .td-main main {
-    padding-top: 6.5rem;
-  }
-  .td-sidebar-toc {
-    padding-top: 2.75rem;
-  }
-}
-
 .rounded-img {
   border-radius: 1rem;
 }
@@ -171,10 +41,6 @@ li:has(input[type="checkbox"]) {
   padding-top: 0.8rem;
 }
 
-.btn {
-    font-weight: 600;
-}
-
 .sp-feature-title {
   font-weight: 600;
 }
@@ -184,23 +50,26 @@ li:has(input[type="checkbox"]) {
     font-weight: 600;
     padding: 0.3rem 0;
     color: $navbar-dark-color;
-
     &:hover {
       color: $navbar-dark-hover-color;
     }
-
     &:active {
       color: $navbar-dark-active-color;
     }
-
     &:disabled {
       color: $navbar-dark-disabled-color;
     }
+    span {
+      width: 2rem;
+      display: inline-flex;
+      align-items: center;
+      border-radius: .1rem;
+      padding: .5rem;
+    }
+  }
+  span i {
+    margin: auto;
   }
-}
-
-.text-secondary {
-  font-weight: 600;
 }
 
 .sp-service-icon {
@@ -212,7 +81,7 @@ li:has(input[type="checkbox"]) {
 }
 
 .sp-service-card {
-  background: #FFFFFF;
+  background: white;
   box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
   border-radius: 10px;
   border: none;
@@ -222,10 +91,6 @@ li:has(input[type="checkbox"]) {
   margin-top: 6rem;
 }
 
-.tab-content .tab-pane {
-  max-width: 100% !important;
-}
-
 .sp-supperted-by-img {
   max-height: 5rem;
   margin: 1rem;
@@ -239,29 +104,28 @@ li:has(input[type="checkbox"]) {
 }
 
 .sp-supported-by-card {
-  background: #FFFFFF;
-  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
+  background: white;
+  box-shadow: $shadow;
   border-radius: 10px;
   border: none;
   margin-top: 1rem;
 }
 
 body {
-  background-color: whitesmoke;
+  background-color: $bg-color;
 }
 
 a.nav-link.sp-coming-soon {
   pointer-events: none;
   cursor: default;
-  color: #616161;
+  color: $gray;
+  &::after {
+    content: "Coming soon!";
+    display: inline-block;
+    background-color: $gray;
+    color: $dark;
+    margin-left: .5rem;
+    padding: .1rem .5rem;
+    border-radius: .1rem;
+  }
 }
-
-a.nav-link.sp-coming-soon::after {
-  content: "Coming soon!";
-  display: inline-block;
-  background-color: #616161;
-  color: $dark;
-  margin-left: .5rem;
-  padding: .1rem .5rem;
-  border-radius: .1rem;
-}
\ No newline at end of file
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
new file mode 100644
index 0000000..5051973
--- /dev/null
+++ b/assets/scss/docsy_overrides.scss
@@ -0,0 +1,157 @@
+.td-navbar {
+    background: $dark;
+    min-height: 5rem;
+    .navbar-brand__name {
+        display: none;
+    }
+    .nav-link {
+        color: $secondary !important;
+        font-weight: 600;
+        border-radius: 5px;
+        &:hover {
+            background-color: #61616144;
+            transition: background-color 0.2s ease-in-out;
+        }
+        &.nav-link.active {
+            background-color: #616161;
+        }
+    }
+    .td-navbar-nav-scroll {
+        height: unset !important;
+        margin-top: unset !important;
+        .nav-link {
+            padding: .5rem 1.5rem;
+        }
+        .navbar-nav {
+            padding-bottom: 0 !important;
+        }
+    }
+}
+
+.td-breadcrumbs__single {
+    visibility: hidden;
+}
+
+.td-sidebar-nav .td-sidebar-link__page,
+ul.ul-2>.td-sidebar-nav__section-title a {
+    color: $gray !important;
+    font-weight: 400;
+    &:hover {
+        color: $blue !important;
+    }
+}
+
+ul.ul-2 {
+    padding: 0;
+    &>.td-sidebar-nav__section-title a:hover {
+        color: $primary !important;
+        background-color: #7EB07F11;
+        transition: background-color 0.2s ease-in-out;
+        transition: color 0.2s ease-in-out;
+    }
+}
+
+ul.ul-0 li a.tree-root,
+h5.taxonomy-title {
+  display: none !important;
+}
+
+.nav-item {
+    margin-right: .5rem !important;
+  }
+  
+.td-sidebar-nav-active-item {
+    color: $primary !important;
+    font-weight: 600;
+}
+
+.td-sidebar-nav a.active {
+    color: $primary !important;
+    background-color: #7EB07F22;
+}
+  
+.td-sidebar-link {
+&.td-sidebar-link__section, &.td-sidebar-link__page {
+    border-radius: .3rem;
+    padding: .3rem .8rem !important;
+    margin: .1rem !important;
+
+    &:hover {
+        color: $primary !important;
+        background-color: #7EB07F11;
+        transition: background-color 0.2s ease-in-out;
+        transition: color 0.2s ease-in-out;
+    }
+}
+}
+  
+.td-toc {
+    ul {
+        margin-top: 1rem;
+    }
+    li {
+        display: block;
+        padding-bottom: .5rem;
+    }
+    a {
+        display: inline !important;
+    }
+}
+
+.tab-content {
+    .tab-pane {
+        border: 1px solid rgba(0, 0, 0, 0.125) !important;
+        border-radius: 0px .25rem .25rem .25rem;
+        max-width: 100% !important;
+    }
+    ul li, ol li {
+        margin-bottom: unset !important;
+    }
+    div {
+        transition: none;
+    }
+}
+
+.nav-tabs {
+    border: none !important;
+    a:not(.active).nav-link:hover {
+        background-color:  #0d6efd11;
+    }
+}
+
+.nav-item {
+    margin-right: .5rem !important;
+}
+  
+.dropdown-menu {
+    right: 0;
+    left: unset;
+    padding: 0px;
+    box-shadow: $shadow;
+}
+  
+.dropdown-item {
+    padding: 0.5rem 1.5rem;
+    border-radius: 0.25rem;
+}
+  
+li:has(input[type="checkbox"]) {
+    list-style-type: none;
+}
+
+.btn,
+.text-secondary {
+    font-weight: 600;
+}
+
+@media (min-width: 768px)  {
+    .td-sidebar {
+        padding-top: 5rem;
+    }
+    .td-404 main, .td-main main {
+        padding-top: 6.5rem;
+    }
+    .td-sidebar-toc {
+        padding-top: 2.75rem;
+    }
+}
\ No newline at end of file