diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx
index 46654057..3c474110 100644
--- a/src/components/modals/settings/Section.jsx
+++ b/src/components/modals/settings/Section.jsx
@@ -6,8 +6,8 @@ export default class Section extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      display: 'block',
-      transform: 'rotate(-180deg)'
+      display: 'none',
+      transform: 'rotate(0)'
     };
   }
 
@@ -19,6 +19,10 @@ export default class Section extends React.PureComponent {
       display: display,
       transform: transform
     });
+
+    if(this.props.onToggle) {
+      this.props.onToggle(display);
+    }
   }
 
   render() {
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx
index 2970d977..0c576793 100644
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/src/components/modals/settings/sections/BackgroundSettings.jsx
@@ -14,7 +14,8 @@ export default class BackgroundSettings extends React.PureComponent {
     this.state = {
       blur: 0,
       brightness: 100,
-      gradientSettings: this.DefaultGradientSettings
+      gradientSettings: this.DefaultGradientSettings,
+      shown: false
     };
   }
 
@@ -262,6 +263,14 @@ export default class BackgroundSettings extends React.PureComponent {
     });
   };
 
+  onSection = () => {
+    this.setState((state) => {
+      return {
+        shown: !state.shown
+      };
+    })
+  }
+
   render() {
     let colourSettings = null;
     if (typeof this.state.gradientSettings === 'object') {
@@ -294,7 +303,7 @@ export default class BackgroundSettings extends React.PureComponent {
     }
     return (
       <React.Fragment>
-        <Section title={this.props.language.background.title} name='background'>
+        <Section title={this.props.language.background.title} name='background' onToggle={this.onSection}>
           <ul>
             <Checkbox name='view' text={this.props.language.background.view} />
             <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
@@ -329,7 +338,7 @@ export default class BackgroundSettings extends React.PureComponent {
           <ul>
             <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
             <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
-            {colourSettings}
+            {this.state.shown && colourSettings}
           </ul>
         </Section>
       </React.Fragment>