diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx
index 5547c4e1..8db10b40 100644
--- a/src/components/modals/main/Main.jsx
+++ b/src/components/modals/main/Main.jsx
@@ -4,27 +4,21 @@ import Settings from './tabs/Settings';
 import Addons from './tabs/Addons';
 import Marketplace from './tabs/Marketplace';
 
-import Navigation from './tabs/backend/Tabs';
+import Tabs from './tabs/backend/Tabs';
 
 import './scss/index.scss';
 
 export default function MainModal(props) {
-  const language = window.language;
+  const language = window.language.modals.main.navbar;
 
   return (
     <>
       <span className='closeModal' onClick={props.modalClose}>&times;</span>
-      <Navigation navbar={true}>
-        <div label={language.modals.main.navbar.settings}>
-          <Settings/>
-        </div>
-        <div label={language.modals.main.navbar.addons}>
-          <Addons/>
-        </div>
-        <div label={language.modals.main.navbar.marketplace}>
-          <Marketplace/>
-        </div>
-      </Navigation>
+      <Tabs navbar={true}>
+        <div label={language.settings}><Settings/></div>
+        <div label={language.addons}><Addons/></div>
+        <div label={language.marketplace}><Marketplace/></div>
+      </Tabs>
     </>
   );
 }
diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx
index 409a2bff..f7f4520e 100644
--- a/src/components/modals/main/settings/Checkbox.jsx
+++ b/src/components/modals/main/settings/Checkbox.jsx
@@ -25,9 +25,9 @@ export default class Checkbox extends React.PureComponent {
     let text = this.props.text;
 
     if (this.props.newFeature) {
-      text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
     } else if (this.props.betaFeature) {
-      text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
+      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
     }
 
     return (
diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx
index bfdedd01..76e516f1 100644
--- a/src/components/modals/main/settings/Switch.jsx
+++ b/src/components/modals/main/settings/Switch.jsx
@@ -25,9 +25,9 @@ export default class Switch extends React.PureComponent {
     let text = this.props.text;
 
     if (this.props.newFeature) {
-      text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
     } else if (this.props.betaFeature) {
-      text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
+      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
     }
 
     return (
diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx
index 199a254b..4e39033f 100644
--- a/src/components/modals/main/settings/sections/Background.jsx
+++ b/src/components/modals/main/settings/sections/Background.jsx
@@ -176,7 +176,7 @@ export default class BackgroundSettings extends React.PureComponent {
             onChange={(color) => this.onColorPickerChange(color, 'change')}
             onEndChange={(color) => this.onColorPickerChange(color, 'end')}
             gradient={this.GradientPickerInitalState}
-            isGradient />
+            isGradient/>
         );
       } else {
         gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
@@ -190,12 +190,12 @@ export default class BackgroundSettings extends React.PureComponent {
       }
 
       colourSettings = (
-        <div>
+        <>
           {gradientInputs}
           {this.state.gradientSettings.gradient[0].colour !== background.source.disabled &&
            !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button>) : null
           }
-        </div>
+        </>
       );
     }
 
diff --git a/src/components/modals/main/tabs/Addons.jsx b/src/components/modals/main/tabs/Addons.jsx
index 98749cf8..0bf4d638 100644
--- a/src/components/modals/main/tabs/Addons.jsx
+++ b/src/components/modals/main/tabs/Addons.jsx
@@ -6,15 +6,9 @@ import AddonsTabs from './backend/Tabs';
 
 export default function Addons() {
   return (
-    <>
-      <AddonsTabs>
-        <div label='Added'>
-          <Added/>
-        </div>
-        <div label=''>
-
-        </div>
-      </AddonsTabs>
-    </>
+    <AddonsTabs>
+      <div label='Added'><Added/></div>
+      <div label=''></div>
+    </AddonsTabs>
   );
 }
diff --git a/src/components/modals/main/tabs/Marketplace.jsx b/src/components/modals/main/tabs/Marketplace.jsx
index 64ff0e33..fd6f0f43 100644
--- a/src/components/modals/main/tabs/Marketplace.jsx
+++ b/src/components/modals/main/tabs/Marketplace.jsx
@@ -1,19 +1,14 @@
 import React from 'react';
 
-import MarketplaceBackend from '../marketplace/sections/Marketplace';
-import MarketplaceTabs from './backend/Tabs';
+import MarketplaceTab from '../marketplace/sections/Marketplace';
+
+import Tabs from './backend/Tabs';
 
 export default function Marketplace() {
   return (
-    <>
-      <MarketplaceTabs>
-        <div label='Photo Packs'>
-          <MarketplaceBackend type='photo_packs'/>
-        </div>
-        <div label='Quote Packs'>
-          <MarketplaceBackend type='quote_packs'/>
-        </div>
-      </MarketplaceTabs>
-    </>
+    <Tabs>
+      <div label='Photo Packs'><MarketplaceTab type='photo_packs'/></div>
+      <div label='Quote Packs'><MarketplaceTab type='quote_packs'/></div>
+    </Tabs>
   );
 }
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index 1dc7968e..7be56839 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -12,13 +12,13 @@ import Advanced from '../settings/sections/Advanced';
 import Changelog from '../settings/sections/Changelog';
 import Order from '../settings/sections/Order';
 
-import SettingsTabs from './backend/Tabs';
+import Tabs from './backend/Tabs';
 
 export default function Settings() {
   const language = window.language.modals.main.settings.sections;
   return (
     <>
-      <SettingsTabs>
+      <Tabs>
         <div label={language.time.title}><Time/></div>
         <div label={language.quote.title}><Quote/></div>
         <div label={language.greeting.title}><Greeting/></div>
@@ -31,7 +31,7 @@ export default function Settings() {
         <div label='Experimental'></div>
         <div label={language.changelog}><Changelog/></div>
         <div label={language.about.title}><About/></div>
-      </SettingsTabs>
+      </Tabs>
       <div className='reminder-info'>
         <h1>IMPORTANT INFO</h1>
         <p>In order for changes to take place, the page must be refreshed.</p>
diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx
index 59837a46..bdd12d0e 100644
--- a/src/components/modals/main/tabs/backend/Tabs.jsx
+++ b/src/components/modals/main/tabs/backend/Tabs.jsx
@@ -32,7 +32,7 @@ export default class Tabs extends React.PureComponent {
     return (
       <span className='tabs'>
         <ul className={className}>
-         {optionsText}
+          {optionsText}
           {this.props.children.map((tab) => {
             return (
               <Tab
@@ -47,10 +47,10 @@ export default class Tabs extends React.PureComponent {
         </ul>
         <div className={tabClass}>
           <ErrorBoundary>
-          {this.props.children.map((child) => {
-            if (child.props.label !== this.state.currentTab) return undefined;
-            return child.props.children;
-          })}
+            {this.props.children.map((child) => {
+              if (child.props.label !== this.state.currentTab) return undefined;
+              return child.props.children;
+            })}
           </ErrorBoundary>
         </div>
       </span>
diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx
index 483ee345..a91f8cee 100644
--- a/src/components/widgets/Widgets.jsx
+++ b/src/components/widgets/Widgets.jsx
@@ -74,7 +74,7 @@ export default class Widgets extends React.PureComponent {
 
     if (order) {
       order.forEach(element => {
-        elements.push(this.widgets[element]);
+        elements.push(<React.Fragment key={element}>{this.widgets[element]}</React.Fragment>);
       });
     } else {
       elements = ['greeting', 'time', 'quote', 'date'];
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 78780bb0..dde789d2 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -199,7 +199,8 @@ export default class Background extends React.PureComponent {
     return (
       <React.Fragment>
         <div id='backgroundImage'/>
-        <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
+        {(this.state.photoInfo.credit !== '') ? <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
+        : null}
       </React.Fragment>
     );
   }
diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
index 2cfed0d5..ced681a5 100644
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -7,7 +7,7 @@ export default class Favourite extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      favourited: <StarIcon2 onClick={() => this.favourite()} />
+      favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={() => this.favourite()} /> : <StarIcon2 onClick={() => this.favourite()} />
     };
   }
 
@@ -30,14 +30,6 @@ export default class Favourite extends React.PureComponent {
     }
   }
 
-  componentDidMount() {
-    if (localStorage.getItem('favourite')) {
-      this.setState({
-        favourited: <StarIcon onClick={() => this.favourite()} />
-      });
-    }
-  }
-
   render() {
     if (localStorage.getItem('favouriteEnabled') === 'false' || localStorage.getItem('background') === 'false' || localStorage.getItem('customBackgroundColour') || localStorage.getItem('customBackground')) {
       return null;
diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
index 4d65e9d0..8da004e3 100644
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -19,7 +19,7 @@ export default class View extends React.PureComponent {
 
   viewStuff() {
     // elements to hide
-    const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
+    const elements = ['.searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
 
     elements.forEach((element) => {
       try {
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index 51ce7a5e..85eed99c 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -10,7 +10,7 @@ import './scss/index.scss';
 
 // the user probably won't use the notes feature every time so we lazy load
 const Notes = React.lazy(() => import('./Notes'));
-const renderLoader = () => <div></div>;
+const renderLoader = () => <></>;
 
 export default function Navbar(props) {
   const language = window.language;
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index 05e460df..e0ced641 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -70,13 +70,11 @@ export default class Search extends React.PureComponent {
 
   render() {
     return (
-      <>
-        <form action={this.state.url} id='searchBar'>
-          {this.state.microphone}
-          <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
-          <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
-        </form>
-      </>
+      <form action={this.state.url} className='searchBar'>
+        {this.state.microphone}
+        <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
+        <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
+      </form>
     );
   }
 }
diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss
index a20d02d9..c800a376 100644
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -1,6 +1,6 @@
 @import '../../../scss/variables';
 
-#searchBar {
+.searchBar {
   position: absolute;
   left: 20px;
   top: 20px;