diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/settings/sections/Appearance.jsx
index 7a00e895..251832dd 100644
--- a/src/components/modals/settings/sections/Appearance.jsx
+++ b/src/components/modals/settings/sections/Appearance.jsx
@@ -1,15 +1,46 @@
 import React from 'react';
+
 import Checkbox from '../Checkbox';
 
+import { toast } from 'react-toastify';
+
 export default class AppearanceSettings extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      zoom: 100,
-      toast_duration: 2500
+      zoom: localStorage.getItem('zoom'),
+      toast_duration: localStorage.getItem('toastDisplayTime')
     };
   }
 
+  resetItem(key) {
+    switch (key) {
+      case 'zoom':
+        localStorage.setItem('zoom', 100);
+        this.setState({
+          zoom: 100
+        });
+        break;
+
+      case 'toast_duration':
+        localStorage.setItem('toastDisplayTime', 2500);
+        this.setState({
+          toast_duration: 2500
+        });
+        break;
+
+      default:
+        toast('resetItem requires a key!');
+    }
+
+    toast(this.props.language.toasts.reset);
+  }
+
+  componentDidUpdate() {
+    localStorage.setItem('zoom', this.state.zoom);
+    localStorage.setItem('toastDisplayTime', this.state.toast_duration);
+  }
+
   render() {
     const { appearance } = this.props.language.sections;
 
@@ -21,12 +52,12 @@ export default class AppearanceSettings extends React.PureComponent {
         <h3>{appearance.accessibility.title}</h3>
         <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
         <ul>
-          <p>{appearance.accessibility.zoom} (100%) <span className='modalLink'>{this.props.language.buttons.reset}</span></p>
-          <input className='range' type='range' min='50' max='200' value={100} />
+          <p>{appearance.accessibility.zoom} ({this.state.zoom}%) <span className='modalLink' onClick={() => this.resetItem('zoom')}>{this.props.language.buttons.reset}</span></p>
+          <input className='range' type='range' min='50' max='200' value={this.state.zoom} onChange={(event) => this.setState({ zoom: event.target.value })} />
         </ul>
         <ul>
-          <p>{appearance.accessibility.toast_duration} (2500 {appearance.accessibility.milliseconds}) <span className='modalLink'>{this.props.language.buttons.reset}</span></p>
-          <input className='range' type='range' min='50' max='200' value={100} />
+          <p>{appearance.accessibility.toast_duration} ({this.state.toast_duration} {appearance.accessibility.milliseconds}) <span className='modalLink' onClick={() => this.resetItem('toast_duration')}>{this.props.language.buttons.reset}</span></p>
+          <input className='range' type='range' min='500' max='5000' value={this.state.toast_duration} onChange={(event) => this.setState({ toast_duration: event.target.value })} />
         </ul>
       </div>
     );
diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json
index 1709bd23..a0df4ee6 100644
--- a/src/modules/default_settings.json
+++ b/src/modules/default_settings.json
@@ -110,5 +110,13 @@
   {
     "name": "shortFormat",
     "value": "default"
+  },
+  {
+    "name": "zoom",
+    "value": 100
+  },
+  {
+    "name": "toastDisplayTime",
+    "value": 2500
   }
 ]