diff --git a/angular.json b/angular.json
index 5a561c976..f6d1b7327 100644
--- a/angular.json
+++ b/angular.json
@@ -36,8 +36,8 @@
               "src/static"
             ],
             "styles": [
-              "src/styles.scss",
-              "node_modules/shepherd.js/dist/css/shepherd.css"
+              "node_modules/shepherd.js/dist/css/shepherd.css",
+              "src/styles.scss"
             ],
             "scripts": [],
             "webWorkerTsConfig": "src/tsconfig.worker.json"
@@ -214,8 +214,8 @@
             "preserveSymlinks": true,
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.scss",
-              "node_modules/shepherd.js/dist/css/shepherd.css"
+              "node_modules/shepherd.js/dist/css/shepherd.css",
+              "src/styles.scss"
             ],
             "scripts": [],
             "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"]
diff --git a/src/styles/components/shepherd.scss b/src/styles/components/shepherd.scss
index bf906edde..f1c2b0f0b 100644
--- a/src/styles/components/shepherd.scss
+++ b/src/styles/components/shepherd.scss
@@ -40,8 +40,41 @@
   font-weight: bold;
 }
 
+.shepherd-title,
+.shepherd-text {
+  font-size: 16px;
+  line-height: 1.5;
+  @include darkTheme(true) {
+    color: $dark-theme-text-color;
+  }
+}
+
+.shepherd-header {
+  padding: $s 1rem !important;
+  //background: transparent !important;
+  @include darkTheme(true) {
+    background: $dark8 !important;
+  }
+}
+
 .shepherd-element {
+  border-radius: 8px;
+
+  @include darkTheme(true) {
+    background: $dark24 !important;
+  }
+
   .material-icons {
     vertical-align: middle;
   }
 }
+
+.shepherd-arrow:before {
+  @include darkTheme(true) {
+    background: $dark24 !important;
+  }
+}
+
+.shepherd-button {
+  font-weight: bold;
+}