diff --git a/src/components/modals/settings/sections/About.jsx b/src/components/modals/settings/sections/About.jsx
index eb4aac39..a82c7ba3 100644
--- a/src/components/modals/settings/sections/About.jsx
+++ b/src/components/modals/settings/sections/About.jsx
@@ -2,39 +2,55 @@ import React from 'react';
 
 import Tooltip from '@material-ui/core/Tooltip';
 
+import * as Constants from '../../../../modules/constants';
+
 export default class About extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-        contributors: []
+      contributors: [],
+      update: ''
     }
   }
 
-  async getContributors() {
-    const data = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
+  async getGitHubData() {
+    const contributors = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
+    const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
+
+    let updateMsg = 'No update available';
+    let version = versionData[0].tag_name;
+    if (version !== '5.0' && version !== '4.1') {
+      updateMsg = 'Update available: ' + version;
+    }
 
     this.setState({ 
-        contributors: data // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK
+        contributors: contributors, // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK,
+        update: updateMsg
     });
   }
 
   componentDidMount() {
-    this.getContributors();
+    this.getGitHubData();
   }
 
   render() {
     return (
       <div>
           <h2>About</h2>
-          <img style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
-          <p>Copyright 2018-2021 Mue Tab (BSD-3 License)</p>
-          <p>Version 5.0.0</p>
+          <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
+          <p>Copyright 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
+          <p>Version {Constants.VERSION} ({this.state.update})</p>
+          <h3>Resources Used</h3>
+          <p>Pexels (Background Images)</p>
+          <p>Google (Pin Icon)</p>
           <h3>Contributors</h3>
           {this.state.contributors.map((item) =>
             <Tooltip title={item.login} placement='top' key={item.login}>
-                <a href={'https://github.com/' + item.login}><img className='abouticon' src={item.avatar_url} alt={item.login}></img></a>
+                <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
             </Tooltip>
           )}
+          <h3>Supporters</h3>
+          <p>to be implemented</p>
       </div>
     );
   }
diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/settings/sections/Appearance.jsx
index d63f975c..0b6878b8 100644
--- a/src/components/modals/settings/sections/Appearance.jsx
+++ b/src/components/modals/settings/sections/Appearance.jsx
@@ -5,7 +5,6 @@ export default function AppearanceSettings (props) {
   return (
     <div>
         <h2>Appearance</h2>
-        <Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
         <Checkbox name='darkTheme' text={props.language.dark} />
         <Checkbox name='brightnessTime' text={props.language.experimental.night_mode} betaFeature={true} />
         <ul>
@@ -13,6 +12,7 @@ export default function AppearanceSettings (props) {
             <textarea id='customcss'></textarea>
         </ul>
         <h3>Accessibility</h3>
+        <Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
         <ul>
             <p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
             <input className='range' type='range' min='50' max='200' value={100} />
diff --git a/src/components/modals/tabs-backend/Tab.jsx b/src/components/modals/tabs-backend/Tab.jsx
index a5a8316d..7422310c 100644
--- a/src/components/modals/tabs-backend/Tab.jsx
+++ b/src/components/modals/tabs-backend/Tab.jsx
@@ -36,9 +36,7 @@ export default class Tab extends React.PureComponent {
           }
         }
 
-        let icon;
-        let divider;
-
+        let icon, divider;
         switch (this.props.label) {
           // Navbar
           case 'Settings': icon = <Settings/>; break;
@@ -62,7 +60,7 @@ export default class Tab extends React.PureComponent {
           case 'Photo Packs': icon = <Background/>; break; 
           case 'Quotes Packs': icon = <Quote/>; break;
           case 'Plugins':
-            icon = <Plugins />
+            icon = <Plugins/>;
             divider = <div><hr/></div>;
             break;
           case 'Added': icon = <Added/>; break;
diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx
index c86bb840..90439aad 100644
--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -11,31 +11,30 @@ import Background from '../settings/sections/Background';
 
 import SettingsTabs from '../tabs-backend/Tabs';
 
-export default class Settings extends React.PureComponent {
-  render() {
+export default function Settings (props) {
     return (
       <React.Fragment>
         <SettingsTabs>
           <div label='Time'>
-            <Time language={this.props.language}/>
+            <Time language={props.language}/>
           </div>
           <div label='Quote'>
-            <Quote language={this.props.language}/>
+            <Quote language={props.language}/>
           </div>
           <div label='Greeting'>
-            <Greeting language={this.props.language}/>
+            <Greeting language={props.language} toastLanguage={props.toastLanguage} />
           </div>
           <div label='Background'>
-            <Background language={this.props.language}/>
+            <Background language={props.language} toastLanguage={props.toastLanguage}/>
           </div>
           <div label='Search'>
-            <Search language={this.props.language}/>
+            <Search language={props.language}/>
           </div>
           <div label='Appearance'>
-            <Appearance language={this.props.language}/>
+            <Appearance language={props.language} toastLanguage={props.toastLanguage}/>
           </div>
           <div label='Language'>
-            <Language language={this.props.language}/>
+            <Language language={props.language}/>
           </div>
           <div label='Change Log'>
             <About/>
@@ -46,5 +45,4 @@ export default class Settings extends React.PureComponent {
         </SettingsTabs>
       </React.Fragment>
     );
-  }
-}
+}
\ No newline at end of file
diff --git a/src/modules/constants.js b/src/modules/constants.js
index ce294f9f..2a975991 100644
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@@ -3,4 +3,5 @@ export const UNSPLASH_URL = 'https://unsplash.muetab.com';
 export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const WEBSITE_URL = 'https://muetab.com';
 export const OFFLINE_IMAGES = 20;
-export const BETA_VERSION = false;
\ No newline at end of file
+export const BETA_VERSION = false;
+export const VERSION = '5.0.0';
\ No newline at end of file
diff --git a/src/scss/modules/modals/_main.scss b/src/scss/modules/modals/_main.scss
index 3ff5b608..a2001fbd 100644
--- a/src/scss/modules/modals/_main.scss
+++ b/src/scss/modules/modals/_main.scss
@@ -48,6 +48,20 @@
 .dark {
     background-color: #2f3542 !important;
     color: white !important;
+
+    .sidebar {
+        background-color: #2a303b !important;
+    }
+
+    .tab-list-active {
+        background: rgba(161, 159, 159, 0.8);
+    }
+
+    .tab-list-item {
+        &:hover {
+            background: rgba(161, 159, 159, 0.8);
+        }
+    }
 }
 
 .ReactModal__Html--open,