diff --git a/package.json b/package.json
index 74f721e7..df27b166 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,8 @@
   "version": "5.0.0",
   "dependencies": {
     "@eartharoid/dtf": "^1.0.8",
-    "@fontsource/lexend-deca": "^4.2.2",
-    "@fontsource/roboto": "^4.2.1",
+    "@fontsource/lexend-deca": "^4.2.3",
+    "@fontsource/roboto": "^4.2.2",
     "@material-ui/core": "4.11.3",
     "@material-ui/icons": "4.11.2",
     "react": "17.0.1",
diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
index 514e5891..40870073 100644
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -3,16 +3,18 @@ import React from 'react';
 export default class ErrorBoundary extends React.PureComponent {
     constructor(props) {
       super(props);
-      this.state = { hasError: false, error: '' };
+      this.state = { 
+        error: false 
+      };
     }
   
     static getDerivedStateFromError(error) {
-        console.log(error);
-        return { hasError: true, error: error };
+      console.log(error);
+      return { error: true };
     }
     
     render() {
-      if (this.state.hasError) {
+      if (this.state.error) {
         return (
             <div style={{'text-align': 'center'}}>
                 <h1>Error</h1>
@@ -24,4 +26,4 @@ export default class ErrorBoundary extends React.PureComponent {
   
       return this.props.children; 
     }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/modals/marketplace/Items.jsx b/src/components/modals/marketplace/Items.jsx
index e62ef487..acf55904 100644
--- a/src/components/modals/marketplace/Items.jsx
+++ b/src/components/modals/marketplace/Items.jsx
@@ -2,28 +2,19 @@ import React from 'react';
 
 export default function Items(props) {
     if (props.items.length === 0) {
-        return null; // if there are no items in category don't render it
-    }
-
-    let seeMoreHTML;
-    if (props.seeMoreFunction && props.items.length === 3) {
-        seeMoreHTML = <button className='addToMue seemore' onClick={props.seeMoreFunction}>{props.seeMoreTitle}</button>; // only render see more button if there are enough addons
+        return null; // todo: add message here
     }
 
     return (
-        <div>
-            {seeMoreHTML}
-            <h1>{props.title}</h1>
-            <div className='items'>
-                {props.items.map((item) =>
-                    <div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
-                        <img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
-                        <div className='details'>
-                            <h4>{item.display_name ? item.display_name : item.name}</h4>
-                            <p>{item.author}</p>
-                        </div>
-                    </div>)}
-                </div>
-          </div>
+        <div className='items'>
+            {props.items.map((item) =>
+                <div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
+                    <img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
+                    <div className='details'>
+                        <h4>{item.display_name ? item.display_name : item.name}</h4>
+                        <p>{item.author}</p>
+                    </div>
+                </div>)}
+        </div>
     );
 }
\ No newline at end of file
diff --git a/src/components/modals/marketplace/sections/Added.jsx b/src/components/modals/marketplace/sections/Added.jsx
new file mode 100644
index 00000000..f127ab3c
--- /dev/null
+++ b/src/components/modals/marketplace/sections/Added.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+
+import LocalMallIcon from '@material-ui/icons/LocalMall';
+import Item from '../Item';
+import Items from '../Items';
+import FileUpload from '../../settings/FileUpload';
+
+export default class Added extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        installed: JSON.parse(localStorage.getItem('installed')),
+        current_data: {
+            type: '',
+            name: '',
+            content: {}
+        },
+        item_data: {
+            name: 'Name',
+            author: 'Author',
+            description: 'Description',
+            updated: '???',
+            version: '1.0.0',
+            icon: ''
+        },
+        button: ''
+    }
+    this.buttons = {
+        uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
+    }
+  }
+
+  toggle(type, type2, data) {
+    if (type === 'item') {
+        const installed = JSON.parse(localStorage.getItem('installed'));
+        const info = installed.find(i => i.name === data);
+
+        this.setState({
+            current_data: { 
+                type: type2,
+                name: data,
+                content: info 
+            },
+            item_data: {
+                name: info.name,
+                author: info.author,
+                description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
+                updated: 'Not Implemented',
+                version: info.version,
+                icon: info.screenshot_url
+            }
+        });
+
+        document.getElementById('item').style.display = 'block';
+        document.getElementById('marketplace').style.display = 'none';
+     } else {
+        document.getElementById('marketplace').style.display = 'block';
+        document.getElementById('item').style.display = 'none';
+    }
+
+    this.setState({ 
+        button: this.buttons.uninstall 
+    });
+}
+
+
+  render() {
+    let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />;
+
+    if (this.state.installed.length === 0) {
+         content = (
+           <div className='items'>
+            <div className='emptyMessage'>
+                <LocalMallIcon/>
+                <h1>Empty</h1>
+                <p className='description'>Nothing here (yet)</p>
+                <button className='goToMarket'>not implemented</button>
+           </div>
+          </div>
+        );
+    }
+
+    return (
+       <React.Fragment>
+        <div id='marketplace'>
+          <FileUpload id='file-input' accept='application/json' loadFunction={(e) => this.manage('install', JSON.parse(e.target.result))} />
+          <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button>
+          {content}
+        </div>
+       </React.Fragment>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/components/modals/marketplace/sections/Marketplace.jsx b/src/components/modals/marketplace/sections/Marketplace.jsx
new file mode 100644
index 00000000..748f417b
--- /dev/null
+++ b/src/components/modals/marketplace/sections/Marketplace.jsx
@@ -0,0 +1,176 @@
+import React from 'react';
+
+import WifiOffIcon from '@material-ui/icons/WifiOff';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import Item from '../Item';
+import Items from '../Items';
+
+import MarketplaceFunctions from '../../../../modules/helpers/marketplace';
+
+import { toast } from 'react-toastify';
+
+import * as Constants from '../../../../modules/constants';
+
+export default class Marketplace extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        items: [],
+        current_data: {
+            type: '',
+            name: '',
+            content: {}
+        },
+        button: '',
+        featured: {},
+        done: false,
+        item_data: {
+            name: 'Name',
+            author: 'Author',
+            description: 'Description',
+            updated: '???',
+            version: '1.0.0',
+            icon: ''
+        }
+      }
+      this.buttons = {
+          uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
+          install: <button className='addToMue' onClick={() => this.manage('install')}>Add to Mue</button>
+      }
+    }
+
+  async toggle(type, data) {
+    switch (type) {
+        case 'item':
+            let info; // get item info
+            try { 
+              info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json(); 
+            } catch (e) { 
+              return toast(this.props.toastLanguage.error);
+            }
+
+            // check if already installed
+            let button = this.buttons.install; 
+
+            const installed = JSON.parse(localStorage.getItem('installed'));
+
+            if (installed.some(item => item.name === data)) {
+              button = this.buttons.uninstall;
+            }
+
+            this.setState({
+                current_data: { type: this.props.type, name: data, content: info },
+                item_data: {
+                    name: info.data.name,
+                    author: info.data.author,
+                    description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+                    updated: info.updated,
+                    version: info.data.version,
+                    icon: info.data.screenshot_url
+                },
+                button: button
+            });
+
+            document.getElementById('marketplace').style.display = 'none';
+            document.getElementById('item').style.display = 'block';
+            break;
+
+        default:
+            document.getElementById('marketplace').style.display = 'block';
+            document.getElementById('item').style.display = 'none';
+            break;
+        }
+   }
+
+  async getItems() {
+    const { data } = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
+    const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
+
+    this.setState({
+        items: data[this.props.type],
+        featured: featured.data,
+        done: true
+    });
+  }
+
+  manage(type) {
+    switch (type) {
+        case 'install': 
+          MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); 
+          break;
+        case 'uninstall': 
+          MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); 
+          break;
+        default:
+          break;
+    }
+
+    toast(this.props.toastLanguage[type + 'ed']);
+    this.setState({
+      button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
+    });
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('animations') === 'true') {
+      document.getElementById('marketplace').classList.add('marketplaceanimation');
+    }
+
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+      return;
+    }
+
+    this.getItems();
+  }
+
+  render() {
+    const errorMessage = (msg) => {
+        return (
+            <div id='marketplace'>
+              <div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
+                {msg}
+              </div>
+            </div>
+        );
+    }
+
+    if (navigator.onLine === false) {
+        return errorMessage(
+            <React.Fragment>
+                <WifiOffIcon/>
+                <h1>Offline</h1>
+                <p className='description'>Mue down!</p>
+            </React.Fragment>
+        );
+    }
+
+    if (localStorage.getItem('offlineMode') === 'true') {
+      return errorMessage(
+        <React.Fragment>
+            <WifiOffIcon/>
+            <h1>Offline mode is enabled</h1>
+            <p className='description'>Please turn off offline mode to access the marketplace</p>
+        </React.Fragment>
+      );
+    }
+
+    if (this.state.done === false) {
+      return errorMessage(<h1>Loading</h1>);
+    }
+
+    return (
+        <React.Fragment>
+            <div id='marketplace'>
+                <div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
+                    <p>{this.state.featured.title}</p>
+                    <h1>{this.state.featured.name}</h1>
+                    <button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
+                </div>
+                <Items
+                   items={this.state.items.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', input)} />
+            </div>
+        </React.Fragment>
+      );
+    }
+}
\ No newline at end of file
diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/tabs/Addons.jsx
index 4a4e6b21..fd599da8 100644
--- a/src/components/modals/tabs/Addons.jsx
+++ b/src/components/modals/tabs/Addons.jsx
@@ -1,129 +1,20 @@
 import React from 'react';
 
-import LocalMallIcon from '@material-ui/icons/LocalMall';
-import Item from '../marketplace/Item';
-import Items from '../marketplace/Items';
-import FileUpload from '../settings/FileUpload';
+import Added from '../marketplace/sections/Added';
 
-import { toast } from 'react-toastify';
-
-import MarketplaceFunctions from '../../../modules/helpers/marketplace';
-
-export default class Addons extends React.PureComponent {
-    constructor(...args) {
-        super(...args);
-        this.state = {
-            installed: JSON.parse(localStorage.getItem('installed')),
-            current_data: {
-                type: '',
-                name: '',
-                content: {}
-            },
-            item_data: {
-                name: 'Name',
-                author: 'Author',
-                description: 'Description',
-                updated: '???',
-                version: '1.0.0',
-                icon: ''
-            },
-            button: ''
-        }
-        this.buttons = {
-            uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.props.marketplaceLanguage.product.buttons.remove}</button>,
-        }
-    }
-
-    toggle(type, type2, data) {
-        if (type === 'item') {
-            const installed = JSON.parse(localStorage.getItem('installed'));
-            const info = installed.find(i => i.name === data);
-
-            this.setState({
-                current_data: { 
-                    type: type2,
-                    name: data,
-                    content: info 
-                },
-                item_data: {
-                    name: info.name,
-                    author: info.author,
-                    description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
-                    updated: 'Not Implemented',
-                    version: info.version,
-                    icon: info.screenshot_url
-                }
-            });
-
-            document.getElementById('item').style.display = 'block';
-            document.getElementById('marketplace').style.display = 'none';
-         } else {
-            document.getElementById('marketplace').style.display = 'block';
-            document.getElementById('item').style.display = 'none';
-        }
-
-        this.setState({ 
-            button: this.buttons.uninstall 
-        });
-    }
-
-  manage(type, input) {
-    switch (type) {
-        case 'install': 
-          MarketplaceFunctions.install(input.type, input, true); 
-          break;
-        case 'uninstall': 
-          MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type); 
-          break;
-        default: 
-          break;
-    }
-
-    toast(this.props.toastLanguage[type + 'ed']);
-
-    let button = '';
-    if (type === 'install') {
-        button = this.buttons.uninstall;
-    }
-
-    this.setState({ 
-        button: button, 
-        installed: JSON.parse(localStorage.getItem('installed')) 
-    });
-  }
-
-  componentDidMount() {
-    if (localStorage.getItem('animations') === 'true') {
-        document.getElementById('marketplace').classList.add('marketplaceanimation');
-    }
-  }
-
-  render() {
-    let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />;
-
-    if (this.state.installed.length === 0) {
-         content = (
-           <div className='items'>
-            <div className='emptyMessage'>
-                <LocalMallIcon/>
-                <h1>{this.props.language.empty.title}</h1>
-                <p className='description'>{this.props.language.empty.description}</p>
-                <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
-           </div>
-          </div>
-        );
-    }
+import AddonsTabs from './backend/Tabs';
 
+export default function Addons (props) {
     return (
-       <React.Fragment>
-        <div id='marketplace'>
-          <FileUpload id='file-input' accept='application/json' loadFunction={(e) => this.manage('install', JSON.parse(e.target.result))} />
-          <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
-          <h1>{this.props.language.added}</h1>
-          {content}
-        </div>
-        <Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
-       </React.Fragment>
-      );
-    }
+      <React.Fragment>
+        <AddonsTabs>
+          <div label='Added'>
+            <Added/>
+          </div>
+          <div label=''>
+              
+          </div>
+        </AddonsTabs>
+      </React.Fragment>
+    );
 }
\ No newline at end of file
diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx
index 4e508134..cb660da6 100644
--- a/src/components/modals/tabs/Marketplace.jsx
+++ b/src/components/modals/tabs/Marketplace.jsx
@@ -1,223 +1,19 @@
 import React from 'react';
 
-import WifiOffIcon from '@material-ui/icons/WifiOff';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import Item from '../marketplace/Item';
-import Items from '../marketplace/Items';
-
-import MarketplaceFunctions from '../../../modules/helpers/marketplace';
-
-import { toast } from 'react-toastify';
-
-import * as Constants from '../../../modules/constants';
-
-export default class Marketplace extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-        settings: [],
-        photo_packs: [],
-        quote_packs: [],
-        see_more: [],
-        see_more_type: '',
-        current_data: {
-            type: '',
-            name: '',
-            content: {}
-        },
-        button: '',
-        featured: {},
-        done: false,
-        item_data: {
-            name: 'Name',
-            author: 'Author',
-            description: 'Description',
-            updated: '???',
-            version: '1.0.0',
-            icon: ''
-        }
-      }
-      this.buttons = {
-          uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.props.language.product.buttons.remove}</button>,
-          install: <button className='addToMue' onClick={() => this.manage('install')}>{this.props.language.product.buttons.addtomue}</button>
-      }
-    }
-
-  async toggle(type, type2, data) {
-    switch (type) {
-        case 'seemore':
-            document.getElementById('marketplace').style.display = 'none';
-            document.getElementById('seemore').style.display = 'block';
-            
-            this.setState({ 
-              see_more: this.state[type2], 
-              see_more_type: type2 
-            });
-            break;
-
-        case 'item':
-            let info; // get item info
-            try { 
-              info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); 
-            } catch (e) { 
-              return toast(this.props.toastLanguage.error);
-            }
-
-            // check if already installed
-            let button = this.buttons.install; 
-
-            const installed = JSON.parse(localStorage.getItem('installed'));
-
-            if (installed.some(item => item.name === data)) {
-              button = this.buttons.uninstall;
-            }
-
-            this.setState({
-                current_data: { type: type2, name: data, content: info },
-                item_data: {
-                    name: info.data.name,
-                    author: info.data.author,
-                    description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
-                    updated: info.updated,
-                    version: info.data.version,
-                    icon: info.data.screenshot_url
-                },
-                button: button
-            });
-
-            document.getElementById('marketplace').style.display = 'none';
-            document.getElementById('seemore').style.display = 'none';
-            document.getElementById('item').style.display = 'block';
-            break;
-
-        default:
-            document.getElementById('marketplace').style.display = 'block';
-            document.getElementById('item').style.display = 'none';
-            document.getElementById('seemore').style.display = 'none';
-            break;
-        }
-   }
-
-  async getItems() {
-    const { data } = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
-    const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
-
-    this.setState({
-        settings: data.settings,
-        photo_packs: data.photo_packs,
-        quote_packs: data.quote_packs,
-        see_more: data.photo_packs,
-        featured: featured.data,
-        done: true
-    });
-  }
-
-  manage(type) {
-    switch (type) {
-        case 'install': 
-          MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); 
-          break;
-        case 'uninstall': 
-          MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); 
-          break;
-        default:
-          break;
-    }
-
-    toast(this.props.toastLanguage[type + 'ed']);
-    this.setState({
-      button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
-    });
-  }
-
-  componentDidMount() {
-    if (localStorage.getItem('animations') === 'true') {
-      document.getElementById('marketplace').classList.add('marketplaceanimation');
-    }
-
-    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
-      return;
-    }
-
-    this.getItems();
-  }
-
-  render() {
-    const errorMessage = (msg) => {
-        return (
-            <div id='marketplace'>
-              <div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
-                {msg}
-              </div>
-            </div>
-        );
-    }
-
-    if (navigator.onLine === false) {
-        return errorMessage(
-            <React.Fragment>
-                <WifiOffIcon/>
-                <h1>{this.props.language.offline.title}</h1>
-                <p className='description'>{this.props.language.offline.description}</p>
-            </React.Fragment>
-        );
-    }
-
-    if (localStorage.getItem('offlineMode') === 'true') {
-      return errorMessage(
-        <React.Fragment>
-            <WifiOffIcon/>
-            <h1>Offline mode is enabled</h1>
-            <p className='description'>Please turn off offline mode to access the marketplace</p>
-        </React.Fragment>
-      );
-    }
-
-    if (this.state.done === false) {
-      return errorMessage(<h1>{this.props.updateLanguage.loading}</h1>);
-    }
+import MarketplaceBackend from '../marketplace/sections/Marketplace';
+import MarketplaceTabs from './backend/Tabs';
 
+export default function Marketplace (props) {
     return (
-        <React.Fragment>
-            <div id='marketplace'>
-                <div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
-                    <p>{this.state.featured.title}</p>
-                    <h1>{this.state.featured.name}</h1>
-                    <button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
-                </div>
-                <Items
-                   title={this.props.language.photo_packs}
-                   seeMoreTitle={this.props.language.see_more}
-                   items={this.state.photo_packs.slice(0, 3)}
-                   toggleFunction={(input) => this.toggle('item', 'photo_packs', input)}
-                   seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} />
-                <Items
-                   title={this.props.language.preset_settings}
-                   seeMoreTitle={this.props.language.see_more}
-                   items={this.state.settings.slice(0, 3)}
-                   toggleFunction={(input) => this.toggle('item', 'settings', input)}
-                   seeMoreFunction={() => this.toggle('seemore', 'settings')} />
-                <Items
-                   title={this.props.language.quote_packs}
-                   seeMoreTitle={this.props.language.see_more}
-                   items={this.state.quote_packs.slice(0, 3)}
-                   toggleFunction={(input) => this.toggle('item', 'quote_packs', input)}
-                   seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} />
-            </div>
-            <Item
-               button={this.state.button}
-               data={this.state.item_data}
-               content={this.state.current_data}
-               function={() => this.toggle()} language={this.props.language.product} />
-            <div id='seemore'>
-                <ArrowBackIcon className='backArrow' onClick={() => this.toggle()} />
-                <Items
-                  title={this.props.language.see_more}
-                  seeMoreTitle={this.props.language.see_more}
-                  toggleFunction={(input) => this.toggle('item', this.state.see_more_type, input)}
-                  items={this.state.see_more} />
-            </div>
-        </React.Fragment>
-      );
-    }
+      <React.Fragment>
+        <MarketplaceTabs>
+          <div label='Photo Packs'>
+            <MarketplaceBackend type='photo_packs'/>
+          </div>
+          <div label='Quote Packs'>
+            <MarketplaceBackend type='quote_packs'/>
+          </div>
+        </MarketplaceTabs>
+      </React.Fragment>
+    );
 }
\ No newline at end of file
diff --git a/src/components/modals/tabs/backend/Tab.jsx b/src/components/modals/tabs/backend/Tab.jsx
index 21492d7c..4d098e14 100644
--- a/src/components/modals/tabs/backend/Tab.jsx
+++ b/src/components/modals/tabs/backend/Tab.jsx
@@ -67,7 +67,7 @@ export default class Tab extends React.PureComponent {
           // Store
           case 'Themes': icon = <Colors/>; break; 
           case 'Photo Packs': icon = <Background/>; break; 
-          case 'Quotes Packs': icon = <Quote/>; break;
+          case 'Quote Packs': icon = <Quote/>; break;
           case 'Plugins':
             icon = <Plugins/>;
             divider = <div><hr/></div>;
diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss
index 7703ebe7..c4e19158 100644
--- a/src/scss/modules/_marketplace.scss
+++ b/src/scss/modules/_marketplace.scss
@@ -9,7 +9,7 @@
 
 .items {
   display: flex;
-  margin-top: -10px;
+  margin-top: 15px;
 
   .item {
     position: relative;