diff --git a/api/js/etemplate/Et2Button/ButtonMixin.ts b/api/js/etemplate/Et2Button/ButtonMixin.ts
index 4d668b0b84..4d9a56983e 100644
--- a/api/js/etemplate/Et2Button/ButtonMixin.ts
+++ b/api/js/etemplate/Et2Button/ButtonMixin.ts
@@ -130,7 +130,7 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
 			
 			/* Override primary styling - we use variant=primary on first dialog button */
 			.button--standard.button--primary {
-				background-color: var(--sl-color-gray-100);
+				background-color: hsl(240deg 5% 96%);
 				border-color: var(--sl-color-gray-400);
 				color: var(--sl-input-color-hover);
 			}
diff --git a/api/js/etemplate/Styles/shoelace.ts b/api/js/etemplate/Styles/shoelace.ts
index 4ddca900c1..ddd466dffb 100644
--- a/api/js/etemplate/Styles/shoelace.ts
+++ b/api/js/etemplate/Styles/shoelace.ts
@@ -1,3 +1,4 @@
+import sl_css from '@shoelace-style/shoelace/dist/themes/light.styles.js';
 import {css} from "lit";
 
 import {registerIconLibrary} from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
@@ -37,26 +38,26 @@ if(typeof egw !== "undefined" && typeof egw.image == "function")
  * Customise shoelace styles to match our stuff
  * External CSS & widget styles will override this
  */
-export default [css`
+export default [sl_css, css`
   :root,
   :host,
   .sl-theme-light {
-	  --sl-font-sans: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-	  --sl-button-font-size-medium: var(--sl-font-size-medium);
-	  --sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
-	  --sl-spacing-small: 0.1rem;
-	  --sl-spacing-medium: 0.5rem;
+	--sl-font-sans: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+	--sl-button-font-size-medium: var(--sl-font-size-medium);
+	--sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
+	--sl-spacing-small: 0.1rem;
+	--sl-spacing-medium: 0.5rem;
 
-	  --sl-input-border-radius-small: 2px;
-	  --sl-input-border-radius-medium: 3px;
-	  --sl-input-border-color-focus: #E6E6E6;
-	  --indicator-color: #696969;
-	  --sl-input-focus-ring-color: #26537C;
-	  --sl-focus-ring-width: 2px;
-	  --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
+	--sl-input-border-radius-small: 2px;
+	--sl-input-border-radius-medium: 3px;
+	--sl-input-border-color-focus: #E6E6E6;
+	--indicator-color: #696969;
+	--sl-input-focus-ring-color: #26537C;
+	--sl-focus-ring-width: 2px;
+	--sl-color-gray-150: #f0f0f0;
+      
   }
-
-	.tab-group--top .tab-group__tabs {
+  .tab-group--top .tab-group__tabs {
       --track-width: 3px;
   }
   .form-control--has-label .form-control__label {