diff --git a/src/App.jsx b/src/App.jsx
index e91dc1e7..5f13d415 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -73,7 +73,7 @@ export default class App extends React.PureComponent {
             <Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <MainModal
                 language={language}
-                modalClose={() => this.setState({ mainsModal: false })} />
+                modalClose={() => this.setState({ mainModal: false })} />
             </Modal>
             <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Update
diff --git a/src/components/modals/MainModal.jsx b/src/components/modals/MainModal.jsx
index 73f69978..c9d0428d 100644
--- a/src/components/modals/MainModal.jsx
+++ b/src/components/modals/MainModal.jsx
@@ -4,6 +4,10 @@ import Settings from './tabs/Settings';
 import Addons from './tabs/Addons';
 import Marketplace from './tabs/Marketplace';
 
+import SettingsIcon from '@material-ui/icons/Settings';
+import AddonsIcon from '@material-ui/icons/Widgets';
+import MarketplaceIcon from '@material-ui/icons/ShoppingBasket';
+
 export default class MainModal extends React.PureComponent {
     constructor(...args) {
         super(...args);
@@ -62,9 +66,9 @@ export default class MainModal extends React.PureComponent {
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.language.modals.title}</h1>
         <div className='tab'>
-          <button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}>{this.props.language.modals.marketplace}</button>
-          <button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}>{this.props.language.modals.addons}</button>
-          <button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}>{this.props.language.modals.settings}</button>
+          <button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}><MarketplaceIcon/> {this.props.language.modals.marketplace}</button>
+          <button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}><AddonsIcon/> {this.props.language.modals.addons}</button>
+          <button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}><SettingsIcon/> {this.props.language.modals.settings}</button>
         </div>
         <br/>
         {this.state.tab}
diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss
index e9b66edf..909d2fc2 100644
--- a/src/scss/modules/_buttons.scss
+++ b/src/scss/modules/_buttons.scss
@@ -10,6 +10,7 @@
   font-size: 20px;
   border-radius: 24px;
   background: none;
+  box-shadow: 0 5px 15px rgba(46, 213, 115, .4);
 
   &:hover {
     outline: none;
@@ -35,9 +36,9 @@
 
 .reset {
   @extend %settingsButton;
+  margin-left: 5px;
   background-color: map-get($button-colours, 'reset');
   border: 2px solid map-get($button-colours, 'reset');
-  margin-left: 5px;
 
   &:hover {
     border: 2px solid map-get($button-colours, 'reset');
diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss
index be344c42..f067dbde 100644
--- a/src/scss/modules/_modal.scss
+++ b/src/scss/modules/_modal.scss
@@ -30,8 +30,10 @@
 }
 
 .closeModal {
-  float: right;
-  font-size: 2em;
+  position: absolute;
+  top: 1rem;
+  right: 2rem;
+  font-size: 4em;
   cursor: pointer;
 
   &:hover {
@@ -173,4 +175,9 @@
   background: #34495e;
   border-top-right-radius: map-get($modal, "border-radius");
   border-bottom-right-radius: map-get($modal, "border-radius");
+}
+
+.tablinks svg {
+  top: 0.125em;
+  position: relative;
 }
\ No newline at end of file