diff --git a/group_vars/all/13_theming.yml b/group_vars/all/13_theming.yml
index 9ecb7a91..59cf7cbd 100644
--- a/group_vars/all/13_theming.yml
+++ b/group_vars/all/13_theming.yml
@@ -29,5 +29,13 @@ global_theming:
       # Shadows & borders (unchanged)
       shadow: "rgba(0, 0, 0, 0.1)"
       border: "#DDDDDD"
-
+      # New settings for cards and buttons:
+      # Cards: a slightly lighter tone than the background for subtle differentiation
+      card_bg_color: "#E6EFF9"
+      # Buttons: a background that is only a bit darker than the main background and in a blue tone
+      button_bg_color: "#C6D7E6"
+      # Bold, larger shadow for containers (cards, dropdowns, etc.)
+      large_shadow: "4px 4px 15px rgba(0, 0, 0, 0.2)"
+      # Reduced shadow for buttons
+      small_shadow: "1px 1px 3px rgba(0, 0, 0, 0.1)"
 global_theming_enabled: true
diff --git a/roles/nginx-global-css/templates/global.css.j2 b/roles/nginx-global-css/templates/global.css.j2
index b89fde62..bb9db043 100644
--- a/roles/nginx-global-css/templates/global.css.j2
+++ b/roles/nginx-global-css/templates/global.css.j2
@@ -1,19 +1,25 @@
 /* Global Theming Styles – Color and Shadow Variables */
 :root {
-    --primary-color: {{ global_theming.css.colors.primary }};
-    --secondary-color: {{ global_theming.css.colors.secondary }};
-    --background-color: {{ global_theming.css.colors.background }};
+    --primary-color:         {{ global_theming.css.colors.primary }};
+    --secondary-color:       {{ global_theming.css.colors.secondary }};
+    --background-color:      {{ global_theming.css.colors.background }};
     --background-dark-color: {{ global_theming.css.colors.background_dark }};
-    --text-color: {{ global_theming.css.colors.text }};
-    --accent-color: {{ global_theming.css.colors.accent }};
-    --success-color: {{ global_theming.css.colors.success }};
-    --warning-color: {{ global_theming.css.colors.warning }};
-    --error-color: {{ global_theming.css.colors.error }};
-    --info-color: {{ global_theming.css.colors.info }};
-    --link-color: {{ global_theming.css.colors.link }};
-    --button-text-color: {{ global_theming.css.colors.button_text }};
-    --shadow-color: {{ global_theming.css.colors.shadow }};
-    --border-color: {{ global_theming.css.colors.border }};
+    --text-color:            {{ global_theming.css.colors.text }};
+    --accent-color:          {{ global_theming.css.colors.accent }};
+    --success-color:         {{ global_theming.css.colors.success }};
+    --warning-color:         {{ global_theming.css.colors.warning }};
+    --error-color:           {{ global_theming.css.colors.error }};
+    --info-color:            {{ global_theming.css.colors.info }};
+    --link-color:            {{ global_theming.css.colors.link }};
+    --button-text-color:     {{ global_theming.css.colors.button_text }};
+    --shadow-color:          {{ global_theming.css.colors.shadow }};
+    --border-color:          {{ global_theming.css.colors.border }};
+    
+    /* New variables for cards and buttons */
+    --card-bg-color:         {{ global_theming.css.colors.card_bg_color }};
+    --large-shadow:          {{ global_theming.css.colors.large_shadow }};
+    --button-bg-color:       {{ global_theming.css.colors.button_bg_color }};
+    --small-shadow:          {{ global_theming.css.colors.small_shadow }};
 }
 
 /* Bootstrap Overrides (Color/Shadow Variables Only) */
@@ -27,7 +33,7 @@
     --bs-success: var(--success-color);
     --bs-info: var(--info-color);
     --bs-link-color: var(--link-color);
-    --bs-btn-color: var(--button-text-color);
+    --bs-btn-color: var(--background-dark-color);
 }
 
 /* Peertube Overrides */
@@ -48,12 +54,13 @@ a {
     color: var(--link-color) !important;
 }
 
-/* Buttons (Background, Text, Border, and Shadow) */
+/* Buttons (Background, Text, Border, and Shadow)
+   Now using a button background that is only slightly darker than the overall background */
 button, .btn {
-    background-color: var(--primary-color) !important;
-    color: var(--button-text-color) !important;
-    border: 1px solid var(--border-color) !important;
-    box-shadow: 2px 2px 5px var(--shadow-color) !important;
+    background-color: var(--button-bg-color) !important;
+    color: var(--primary-color) !important;
+    border-color: var(--border-color) !important;
+    box-shadow: var(--small-shadow) !important;
     cursor: pointer;
 }
 
@@ -61,7 +68,6 @@ button:hover, .btn:hover {
     filter: brightness(0.9);
 }
 
-
 /* States: Success, Warning, Error, Info (Background and Text Colors) */
 .success, .alert-success {
     background-color: var(--success-color) !important;
@@ -73,7 +79,7 @@ button:hover, .btn:hover {
 }
 .error, .alert-danger {
     background-color: var(--error-color) !important;
-    color: var(--button-text-color) !important;
+    color: var(--background-dark-color) !important;
 }
 .info, .alert-info {
     background-color: var(--info-color) !important;
@@ -94,36 +100,36 @@ input:focus, textarea:focus, select:focus {
 /* Navigation (Background and Text Colors) */
 .navbar, .navbar-light, .navbar-dark {
     background-color: var(--background-color) !important;
-    color: var(--button-text-color) !important;
+    color: var(--primary-color) !important;
 }
 
 .navbar a {
-    color: var(--button-text-color) !important;
-}
-
-.navbar a.dropdown-item{
     color: var(--background-dark-color) !important;
 }
 
-.card-body{
+.navbar a.dropdown-item {
     color: var(--background-dark-color) !important;
 }
 
+.card-body {
+    color: var(--background-dark-color) !important;
+}
 
 /* Tables (Borders and Header Colors) */
 th, td {
-    border: 1px solid var(--border-color);
+    border-color: var(--border-color) !important;
 }
 thead {
     background-color: var(--primary-color);
-    color: var(--button-text-color);
+    color: var(--background-dark-color);
 }
 
-/* Cards / Containers (Background, Border, and Shadow) */
+/* Cards / Containers (Background, Border, and Shadow)
+   Cards now use a slightly lighter background and a bold, clear shadow */
 .card {
-    background-color: var(--background-color) !important;
-    box-shadow: 2px 2px 10px var(--shadow-color) !important;
-    border: 1px solid var(--border-color);
+    background-color: var(--card-bg-color) !important;
+    box-shadow: var(--large-shadow) !important;
+    border-color: var(--border-color) !important;
 }
 
 /* Headings (Text Color) */
@@ -131,6 +137,11 @@ h1, h2 {
     color: var(--text-color);
 }
 
+div#mastodon p{
+    color: var(--background-dark-color) !important;
+}
+
+
 /* Dark Mode Adjustments (Background and Text Colors) */
 @media (prefers-color-scheme: dark) {
     h1, h2 {
@@ -144,7 +155,9 @@ h1, h2 {
     input, textarea, select {
         color: var(--button-text-color) !important;
         background-color: var(--background-dark-color) !important;
-        color: var(--text-color) !important;
+    }
+    div#mastodon p{
+        color: var(--button-text-color) !important;
     }
 }
 
@@ -166,16 +179,18 @@ h1, h2 {
     background-color: var(--secondary-color) !important;
     color: var(--text-color) !important;
 }
-/* Ensure the button itself uses the light text color. Occured in Mastodon */
+
+/* Ensure the button itself uses the light text color. Occurred in Mastodon */
 button.icon-button {
-  color: var(--button-text-color) !important;
+    color: var(--button-text-color) !important;
+}
+
+/** Nextcloud specific **/
+button.files-list__row-name-link, button.button-vue{
+    background-color: transparent !important;
 }
 
 /* Peertube specific configuration */
-.peertube-container button{
-  background-color: transparent !important;
-}
-
-.peertube-container .title-col{
-
+.peertube-container button {
+    background-color: transparent !important;
 }
\ No newline at end of file