diff --git a/src/css/spacelab-theme.css b/src/css/spacelab-theme.css
index 4a7ff38..66bc6ed 100644
--- a/src/css/spacelab-theme.css
+++ b/src/css/spacelab-theme.css
@@ -1,4 +1,292 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+.bg-blue {
+  background-color: #446e9b !important;
+}
+
+.bg-indigo {
+  background-color: #6610f2 !important;
+}
+
+.bg-purple {
+  background-color: #6f42c1 !important;
+}
+
+.bg-pink {
+  background-color: #e83e8c !important;
+}
+
+.bg-red {
+  background-color: #cd0200 !important;
+}
+
+.bg-orange {
+  background-color: #fd7e14 !important;
+}
+
+.bg-yellow {
+  background-color: #d47500 !important;
+}
+
+.bg-green {
+  background-color: #3cb521 !important;
+}
+
+.bg-teal {
+  background-color: #20c997 !important;
+}
+
+.bg-cyan {
+  background-color: #3399f3 !important;
+}
+
+.bg-white {
+  background-color: #fff !important;
+}
+
+.bg-gray {
+  background-color: #777 !important;
+}
+
+.bg-gray-dark {
+  background-color: #333 !important;
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(87deg, #446e9b 0, #444a9b 100%) !important;
+}
+
+.bg-gradient-secondary {
+  background: linear-gradient(87deg, #999 0, #999999 100%) !important;
+}
+
+.bg-gradient-success {
+  background: linear-gradient(87deg, #3cb521 0, #21b544 100%) !important;
+}
+
+.bg-gradient-info {
+  background: linear-gradient(87deg, #3399f3 0, #3349f3 100%) !important;
+}
+
+.bg-gradient-warning {
+  background: linear-gradient(87deg, #d47500 0, #d4cd00 100%) !important;
+}
+
+.bg-gradient-danger {
+  background: linear-gradient(87deg, #cd0200 0, #cd5700 100%) !important;
+}
+
+.bg-gradient-light {
+  background: linear-gradient(87deg, #eee 0, #eeeeee 100%) !important;
+}
+
+.bg-gradient-dark {
+  background: linear-gradient(87deg, #333 0, #333333 100%) !important;
+}
+
+.bg-gradient-blue {
+  background: linear-gradient(87deg, #446e9b 0, #444a9b 100%) !important;
+}
+
+.bg-gradient-indigo {
+  background: linear-gradient(87deg, #6610f2 0, #c410f2 100%) !important;
+}
+
+.bg-gradient-purple {
+  background: linear-gradient(87deg, #6f42c1 0, #a442c1 100%) !important;
+}
+
+.bg-gradient-pink {
+  background: linear-gradient(87deg, #e83e8c 0, #e83e45 100%) !important;
+}
+
+.bg-gradient-red {
+  background: linear-gradient(87deg, #cd0200 0, #cd5700 100%) !important;
+}
+
+.bg-gradient-orange {
+  background: linear-gradient(87deg, #fd7e14 0, #fddf14 100%) !important;
+}
+
+.bg-gradient-yellow {
+  background: linear-gradient(87deg, #d47500 0, #d4cd00 100%) !important;
+}
+
+.bg-gradient-green {
+  background: linear-gradient(87deg, #3cb521 0, #21b544 100%) !important;
+}
+
+.bg-gradient-teal {
+  background: linear-gradient(87deg, #20c997 0, #20b5c9 100%) !important;
+}
+
+.bg-gradient-cyan {
+  background: linear-gradient(87deg, #3399f3 0, #3349f3 100%) !important;
+}
+
+.bg-gradient-white {
+  background: linear-gradient(87deg, #fff 0, white 100%) !important;
+}
+
+.bg-gradient-gray {
+  background: linear-gradient(87deg, #777 0, #777777 100%) !important;
+}
+
+.bg-gradient-gray-dark {
+  background: linear-gradient(87deg, #333 0, #333333 100%) !important;
+}
+
+.bg-translucent-primary {
+  background-color: rgba(57, 92, 130, 0.6) !important;
+}
+
+.bg-translucent-secondary {
+  background-color: rgba(135, 135, 135, 0.6) !important;
+}
+
+.bg-translucent-success {
+  background-color: rgba(50, 151, 27, 0.6) !important;
+}
+
+.bg-translucent-info {
+  background-color: rgba(17, 136, 241, 0.6) !important;
+}
+
+.bg-translucent-warning {
+  background-color: rgba(176, 97, 0, 0.6) !important;
+}
+
+.bg-translucent-danger {
+  background-color: rgba(169, 2, 0, 0.6) !important;
+}
+
+.bg-translucent-light {
+  background-color: rgba(220, 220, 220, 0.6) !important;
+}
+
+.bg-translucent-dark {
+  background-color: rgba(33, 33, 33, 0.6) !important;
+}
+
+.section-primary {
+  background-color: #446e9b !important;
+}
+
+.section-secondary {
+  background-color: #999 !important;
+}
+
+.section-light {
+  background-color: #ced4da !important;
+}
+
+.section-dark {
+  background-color: #333 !important;
+}
+
+.section-darker {
+  background-color: #333 !important;
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(87deg, #446e9b 0, #444a9b 100%) !important;
+}
+
+.bg-gradient-secondary {
+  background: linear-gradient(87deg, #999 0, #999999 100%) !important;
+}
+
+.bg-gradient-success {
+  background: linear-gradient(87deg, #3cb521 0, #21b544 100%) !important;
+}
+
+.bg-gradient-info {
+  background: linear-gradient(87deg, #3399f3 0, #3349f3 100%) !important;
+}
+
+.bg-gradient-warning {
+  background: linear-gradient(87deg, #d47500 0, #d4cd00 100%) !important;
+}
+
+.bg-gradient-danger {
+  background: linear-gradient(87deg, #cd0200 0, #cd5700 100%) !important;
+}
+
+.bg-gradient-light {
+  background: linear-gradient(87deg, #eee 0, #eeeeee 100%) !important;
+}
+
+.bg-gradient-dark {
+  background: linear-gradient(87deg, #333 0, #333333 100%) !important;
+}
+
+.fill-primary {
+  fill: #446e9b;
+}
+
+.stroke-primary {
+  stroke: #446e9b;
+}
+
+.fill-secondary {
+  fill: #999;
+}
+
+.stroke-secondary {
+  stroke: #999;
+}
+
+.fill-success {
+  fill: #3cb521;
+}
+
+.stroke-success {
+  stroke: #3cb521;
+}
+
+.fill-info {
+  fill: #3399f3;
+}
+
+.stroke-info {
+  stroke: #3399f3;
+}
+
+.fill-warning {
+  fill: #d47500;
+}
+
+.stroke-warning {
+  stroke: #d47500;
+}
+
+.fill-danger {
+  fill: #cd0200;
+}
+
+.stroke-danger {
+  stroke: #cd0200;
+}
+
+.fill-light {
+  fill: #eee;
+}
+
+.stroke-light {
+  stroke: #eee;
+}
+
+.fill-dark {
+  fill: #333;
+}
+
+.stroke-dark {
+  stroke: #333;
+}
+
+.fill-opacity-8 {
+  fill-opacity: .8;
+}
+
 .icon-actions > a {
   display: inline-block;
   margin-right: .75rem;
diff --git a/src/index.html b/src/index.html
index de0ed11..1f8627f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -199,7 +199,7 @@
   </div>
   <div class="card">
     <div class="card-body">
-      <div class="icon icon-shape icon-shape-info  rounded-circle shadow mb-4">
+      <div class="icon icon-shape bg-gradient-primary   rounded-circle shadow mb-4">
         <i class="bi bi-arrow-bar-up"></i>
       </div>
       <h5 class="h3">Plugins</h5>
diff --git a/src/scss/argon/custom/_icon-gradient.scss b/src/scss/argon/custom/_icon-gradient.scss
new file mode 100644
index 0000000..89437eb
--- /dev/null
+++ b/src/scss/argon/custom/_icon-gradient.scss
@@ -0,0 +1,87 @@
+$translucent-color-opacity: .6 ;
+
+// Sections
+
+$section-colors: () !default;
+$section-colors: map-merge((
+  "primary":      $primary,
+  "secondary":    $secondary,
+  "light":        $gray-400,
+  "dark":         $dark,
+  "darker":       $dark
+), $section-colors);
+
+// Contextual backgrounds
+@mixin bg-variant($parent, $color) {
+    #{$parent} {
+        background-color: $color !important;
+    }
+ 
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+    #{$parent} {
+        background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
+    }
+}
+
+@mixin bg-translucent-variant($parent, $color) {
+    #{$parent} {
+        background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
+    }
+
+    
+}
+
+//
+// Backgrounds
+//
+
+
+@each $color, $value in $colors {
+	@include bg-variant(".bg-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+@each $color, $value in $colors {
+	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Background colors with transparency
+
+@each $color, $value in $theme-colors {
+    @include bg-translucent-variant(".bg-translucent-#{$color}", $value);
+}
+
+
+// Sections backgrounds
+
+@each $color, $value in $section-colors {
+    @include bg-variant(".section-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Shape (svg) fill colors
+
+@each $color, $value in $theme-colors {
+    .fill-#{$color}  {
+        fill: $value;
+    }
+
+    .stroke-#{$color}  {
+        stroke: $value;
+    }
+}
+
+.fill-opacity-8 {
+	fill-opacity: .8;
+}
+
diff --git a/src/scss/spacelab-theme.scss b/src/scss/spacelab-theme.scss
index 526afc0..46a23de 100644
--- a/src/scss/spacelab-theme.scss
+++ b/src/scss/spacelab-theme.scss
@@ -3,8 +3,9 @@
 
 // spacelab varialbes
 @import "../scss/spacelab/variables";
-@import "argon/custom/icon-variables";
 @import "../../node_modules/bootstrap/scss/variables";
+@import "argon/custom/icon-variables";
+@import "../scss/argon/custom/icon-gradient";
 // spacelab mixins
 
 // Bootstrap mixins