diff --git a/metager/resources/less/metager/pages/startpage/tiles.less b/metager/resources/less/metager/pages/startpage/tiles.less
index 9ab89b38150099f92081e31c2b7dc778572b25fd..0d396e1755ebe38ba633b1f8cc71cff0e09afeb9 100644
--- a/metager/resources/less/metager/pages/startpage/tiles.less
+++ b/metager/resources/less/metager/pages/startpage/tiles.less
@@ -83,7 +83,11 @@ div#tiles-container {
             }
 
             &.orange>div.image {
-                background-color: fade(@metager-orange, 60%);
+                @gradient-from: fade(@metager-orange, 80%);
+                @gradient-to: darken(fade(@metager-orange, 80%), 1%);
+
+                background-color: @metager-orange;
+                background: linear-gradient(0deg, @gradient-from 0%, @gradient-to 100%);
             }
 
             >div.title {
diff --git a/metager/resources/less/metager/variables-dark.less b/metager/resources/less/metager/variables-dark.less
index 4b912f811a54ff3051edf009575f793d85dabd99..2a7224410d6ac73addd87d0cbb772fbddc8a4b26 100644
--- a/metager/resources/less/metager/variables-dark.less
+++ b/metager/resources/less/metager/variables-dark.less
@@ -1,5 +1,7 @@
 @import "./variables.less";
 
+@metager-orange: darken(#ff8000, 15%);
+
 // Default Background Color
 @background-color: @color-almost-black;
 @background-color-mobile: @color-almost-black;