diff --git a/src/core/colors/background.ts b/src/core/colors/background.ts
index efbe233..fbc1c8c 100644
--- a/src/core/colors/background.ts
+++ b/src/core/colors/background.ts
@@ -23,8 +23,17 @@ export class Background {
                 throw new Error('Only array of Colors or Backgrounds is supported for new Background(...).');
             }
         });
-        // sort the colors from the brightest
-        this._colors.sort((a, b) => a.getLuminance() - b.getLuminance());
+        // sort the colors based on hue (starting from around 195 - light blue)
+        // the Official app is olso showing only 5 colors, so every color gets wide enough stripe in card
+        // I think it's like cheating, so we don't do this (at least not now)
+        const getSortValue = (c: Color) => {
+            let result = c.getHue() - 195; // this hue value should be first
+            if (result < 0) {
+                result += 360;
+            }
+            return result;
+        }
+        this._colors.sort((a, b) => getSortValue(a) - getSortValue(b));
     }
 
     /**
@@ -66,6 +75,6 @@ export class Background {
             colors += `, ${this._colors[i]} ${Math.round(currentStep)}%`;
         }
 
-        return `linear-gradient(90deg, ${colors})`;
+        return `linear-gradient(100deg, ${colors})`;
     }
 }
\ No newline at end of file
diff --git a/src/types/consts.ts b/src/types/consts.ts
index 20627c3..5284740 100644
--- a/src/types/consts.ts
+++ b/src/types/consts.ts
@@ -23,7 +23,7 @@ export class Consts {
     public static readonly DialogBgColor = '#171717';
     public static readonly DialogFgLightColor = new Color('#aaa');
     public static readonly DialogOffColor = '#363636';
-    public static readonly GradientOffset = 10; // percent
+    public static readonly GradientOffset = 7; // percent
     public static readonly TransitionDefault = 'all 0.3s ease-out 0s';
     public static readonly TimeCacheInterval = 1500; // ms