diff --git a/react/features/base/color-scheme/defaultScheme.js b/react/features/base/color-scheme/defaultScheme.js
index 36bfb6e6f..98c8fa7ad 100644
--- a/react/features/base/color-scheme/defaultScheme.js
+++ b/react/features/base/color-scheme/defaultScheme.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { ColorPalette } from '../styles';
+import { ColorPalette, getRGBAFormat } from '../styles';
 
 /**
  * The default color scheme of the application.
@@ -40,8 +40,8 @@ export default {
     },
     'Toolbox': {
         button: 'rgb(255, 255, 255)',
-        buttonToggled: 'rgba(255, 255, 255, 0)',
-        buttonToggledBorder: '#a4b8d1',
+        buttonToggled: 'rgb(38, 58, 76)',
+        buttonToggledBorder: getRGBAFormat('#a4b8d1', 0.6),
         hangup: 'rgb(225, 45, 45)'
     }
 };
diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js
index 1b40c1b0f..f77012ca0 100644
--- a/react/features/conference/components/native/Conference.js
+++ b/react/features/conference/components/native/Conference.js
@@ -256,7 +256,7 @@ class Conference extends AbstractConference<Props, *> {
                         pointerEvents = 'none'
                         start = {{
                             x: 0.0,
-                            y: applyGradientStretching ? 0.5 : 1.0
+                            y: 1.0
                         }}
                         style = { [
                             styles.bottomGradient,
diff --git a/react/features/conference/components/native/NavigationBar.js b/react/features/conference/components/native/NavigationBar.js
index 32488f7f7..ae9d26b3d 100644
--- a/react/features/conference/components/native/NavigationBar.js
+++ b/react/features/conference/components/native/NavigationBar.js
@@ -46,7 +46,7 @@ class NavigationBar extends Component<Props> {
                 pointerEvents = 'none'
                 style = { styles.gradient }>
                 <SafeAreaView>
-                    <View style = { styles.gradientStretch } />
+                    <View style = { styles.gradientStretchTop } />
                 </SafeAreaView>
             </LinearGradient>,
             <View
diff --git a/react/features/conference/components/native/styles.js b/react/features/conference/components/native/styles.js
index 1ef3d5d40..8d6c6e8c9 100644
--- a/react/features/conference/components/native/styles.js
+++ b/react/features/conference/components/native/styles.js
@@ -2,10 +2,11 @@ import { BoxModel, ColorPalette, fixAndroidViewClipping } from '../../../base/st
 
 import { FILMSTRIP_SIZE } from '../../../filmstrip';
 
-export const NAVBAR_GRADIENT_COLORS = [ '#0000007F', '#00000000' ];
+export const NAVBAR_GRADIENT_COLORS = [ '#000000FF', '#00000000' ];
 
 // From brand guideline
-const GRADIENT_HEIGHT = 116;
+const BOTTOM_GRADIENT_HEIGHT = 290;
+const DEFAULT_GRADIENT_SIZE = 140;
 
 /**
  * The styles of the feature conference.
@@ -16,7 +17,7 @@ export default {
         bottom: 0,
         flexDirection: 'column',
         justifyContent: 'flex-end',
-        minHeight: GRADIENT_HEIGHT,
+        minHeight: DEFAULT_GRADIENT_SIZE,
         left: 0,
         position: 'absolute',
         right: 0
@@ -40,11 +41,11 @@ export default {
     },
 
     gradientStretchBottom: {
-        height: GRADIENT_HEIGHT + FILMSTRIP_SIZE
+        height: BOTTOM_GRADIENT_HEIGHT
     },
 
-    gradientStretch: {
-        height: GRADIENT_HEIGHT
+    gradientStretchTop: {
+        height: DEFAULT_GRADIENT_SIZE
     },
 
     /**