diff --git a/README.md b/README.md
index 065985f0..e3775765 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,7 @@ Please see our [roadmap](https://github.com/mue/mue/projects)
     <li> Click <b>Load unpacked</b> (Make sure <b>Developer Mode</b> is on)
     <li> Go to the directory containing the built copy of Mue and click <b>ok</b>
     <li> Enjoy your new tab!
+  </ol>
 </details>
 <details>
   <summary><b>Opera</b> (Click to expand)</summary>
@@ -98,6 +99,7 @@ Please see our [roadmap](https://github.com/mue/mue/projects)
     <li> Click <b>Load unpacked extension...</b> (Make sure <b>Developer Mode</b> is on)
     <li> Go to the directory containing Mue and click <b>ok</b>
     <li> Enjoy your new tab!
+  </ol>
 </details>
 <details>
   <summary><b>Firefox</b> (Click to expand)</summary>
@@ -113,20 +115,23 @@ Please see our [roadmap](https://github.com/mue/mue/projects)
 <details>
   <summary><b>Other</b> (Click to expand)</summary>
   <i>Note: To get the full new tab experience, set your browser to open the <code>index.html</code> on startup and tab open!</i>
-    <ol>
-      <li> <code>yarn run build</code> or <code>npm run build</code>
-      <li> Open the <code>index.html</code> in your browser
-      <li> Enjoy your new tab!
-    </ol>
+  <ol>
+    <li> <code>yarn run build</code> or <code>npm run build</code>
+    <li> Open the <code>index.html</code> in your browser
+    <li> Enjoy your new tab!
+  </ol>
 </details>
 
 ## Credits
-### Maintainers
+### Core Team
+#### Maintainers
 [David Ralph (ohlookitsderpy)](https://github.com/ohlookitsderpy) - Founder, Lead development, Photographer <br>
+
 [Alex Sparkes](https://github.com/alexsparkes) - Name, Lead design, Photographer <br>
 
-### Contributors
+#### Developers
 [Wessel Tip](https://github.com/Wessel) - Development <br>
+
 [Isaac (Eartharoid)](https://github.com/eartharoid) - QA, Development, Photographer <br>
 
 ### Translators
@@ -138,11 +143,13 @@ Please see our [roadmap](https://github.com/mue/mue/projects)
 
 [Pronin Egor](https://github.com/MrZillaGold) - Russian
 
-### Other
+[Vicente](https://github.com/Vicente015) - Spanish
+
+### Resources
 [Pexels](https://pexels.com) - Stock photos used for offline mode
 
 [Opera Forum](https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14) - Portions of code to add Opera support
 
-[Google Fonts](https://fonts.google.com) - Lexend Deca and Roboto fonts
+Many thanks to [Highholding](https://discord.bio/p/highholding), [Noa Shapira](#), [Roee Lupo](https://github.com/RoeeLupo), [Jeroen](#), [Glasvegas](https://twitter.com/_glasvegas), [Anders](https://github.com/FuryingFox), [Oded Shapira](https://twitter.com/dondishdev), Jacob Tyrrell and [Nikka Lai](#) for letting us use their wonderful photographs.
 
-And many thanks to [Highholding](https://discord.bio/p/highholding), [Noa Shapira](#), [Roee Lupo](https://github.com/RoeeLupo), [Jeroen](#), [Glasvegas](https://twitter.com/_glasvegas), [Anders](https://github.com/FuryingFox), [Oded Shapira](https://twitter.com/dondishdev), Jacob Tyrrell and [Nikka Lai](#) for letting us use their wonderful photographs
+And finally, a big thank you to all the [contributors](https://github.com/mue/mue/graphs/contributors)!
\ No newline at end of file
diff --git a/package.json b/package.json
index 7c838833..8e20fbb8 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "David \"ohlookitsderpy\" Ralph <d.ralph@muetab.com> (https://derpyenterprises.org)",
     "Alex \"TurboMarshmello\" Sparkes <a.sparkes@muetab.com> (https://github.com/alexsparkes)"
   ],
-  "description": "Fast, open and free-to-use new tab page for most modern browsers.",
+  "description": "Fast, open and free-to-use new tab page for modern browsers.",
   "repository": {
     "url": "github:mue/mue"
   },
@@ -18,6 +18,8 @@
     "@material-ui/core": "4.11.0",
     "@material-ui/icons": "4.9.1",
     "@muetab/quotes": "^1.0.0",
+    "fontsource-lexend-deca": "^3.0.10",
+    "fontsource-roboto": "^3.0.3",
     "lodash.merge": "4.6.2",
     "react": "16.14.0",
     "react-clock": "^2.4.0",
@@ -28,7 +30,7 @@
     "supports-webp": "2.0.1"
   },
   "devDependencies": {
-    "react-scripts": "3.4.4",
+    "react-scripts": "4.0.0",
     "node-sass": "^4.14.1"
   },
   "scripts": {
diff --git a/public/fonts/LexendDeca-Regular.woff2 b/public/fonts/LexendDeca-Regular.woff2
deleted file mode 100644
index d5651fff..00000000
Binary files a/public/fonts/LexendDeca-Regular.woff2 and /dev/null differ
diff --git a/public/fonts/Roboto-Cyrillic.woff2 b/public/fonts/Roboto-Cyrillic.woff2
deleted file mode 100644
index de226b37..00000000
Binary files a/public/fonts/Roboto-Cyrillic.woff2 and /dev/null differ
diff --git a/src/components/modals/settings/Dropdown.jsx b/src/components/modals/settings/Dropdown.jsx
new file mode 100644
index 00000000..ea65294d
--- /dev/null
+++ b/src/components/modals/settings/Dropdown.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default class Dropdown extends React.PureComponent {
+  getLabel() {
+    return this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null;
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        {this.getLabel()}
+        <div className='dropdown' style={{ display: 'inline' }}>
+          <select name={this.props.name} id={this.props.id} onChange={this.props.onChange}>
+            {this.props.children}
+          </select>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx
index 6ec876f6..2bd3c9b1 100644
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/src/components/modals/settings/sections/BackgroundSettings.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { toast } from 'react-toastify';
 import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
 import Section from '../Section';
 import { ColorPicker } from 'react-color-gradient-picker';
 import 'react-color-gradient-picker/dist/index.css';
@@ -191,13 +192,15 @@ export default class BackgroundSettings extends React.PureComponent {
             <Checkbox name='refresh' text={this.props.language.background.refresh} />
           </ul>
           <ul>
-            <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
-            <label className='dropdown'>
-              <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
-                <option className='choices' value='mue'>Mue</option>
-                <option className='choices' value='unsplash'>Unsplash</option>
-              </select>
-            </label>
+            <Dropdown
+              label={this.props.language.background.API}
+              name='backgroundapi'
+              id='backgroundAPI'
+              onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}
+            >
+              <option className='choices' value='mue'>Mue</option>
+              <option className='choices' value='unsplash'>Unsplash</option>
+            </Dropdown>
           </ul>
           <ul>
             <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
diff --git a/src/components/modals/settings/sections/LanguageSettings.jsx b/src/components/modals/settings/sections/LanguageSettings.jsx
index 3c058006..0bc2ec7c 100644
--- a/src/components/modals/settings/sections/LanguageSettings.jsx
+++ b/src/components/modals/settings/sections/LanguageSettings.jsx
@@ -1,18 +1,24 @@
 import React from 'react';
+import Dropdown from '../Dropdown';
 
 export default class LanguageSettings extends React.PureComponent {
   render() {
     return (
-        <div className='section'>
+      <div className='section'>
         <h4 htmlFor='language' className='nodropdown'>{this.props.language.language}</h4>
-          <select className='select-css' name='language' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
-            <option className='choices' value='en'>English</option>
-            <option className='choices' value='nl'>Nederlands</option>
-            <option className='choices' value='fr'>Français</option>
-            <option className='choices' value='no'>Norsk</option>
-            <option className='choices' value='ru'>Pусский</option>
-          </select>
-        </div>
+        <Dropdown
+          name='language'
+          id='language'
+          onChange={() => localStorage.setItem('language', document.getElementById('language').value)}
+        >
+          <option className='choices' value='en'>English</option>
+          <option className='choices' value='es'>Español</option>
+          <option className='choices' value='fr'>Français</option>
+          <option className='choices' value='nl'>Nederlands</option>
+          <option className='choices' value='no'>Norsk</option>
+          <option className='choices' value='ru'>Pусский</option>
+        </Dropdown>
+      </div>
     );
   }
 }
\ No newline at end of file
diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx
index 0003754b..e9f0ecde 100644
--- a/src/components/modals/settings/sections/SearchSettings.jsx
+++ b/src/components/modals/settings/sections/SearchSettings.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import SettingsFunctions from '../../../../modules/settingsFunctions';
 import { toast } from 'react-toastify';
 import Section from '../Section';
+import Dropdown from '../Dropdown';
 
 const searchEngines = require('../../../../modules/searchEngines.json');
 
@@ -25,23 +26,26 @@ export default class SearchSettings extends React.PureComponent {
 
   render() {
     return (
-        <React.Fragment>
-          <Section title={this.props.language.searchbar.title} name='searchBar'>
-            <ul>
-              <label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
-                <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
-                  {searchEngines.map((engine) =>
-                    <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
-                  )}
-                  <option className='choices' value='custom'>Custom</option>
-                </select>
-              </ul>
-              <ul id='searchEngineInput' style={{ display: 'none' }}>
-                <p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
-                <input type='text' id='customSearchEngine'></input>
-              </ul>
-            </Section>
-        </React.Fragment>
+      <React.Fragment>
+        <Section title={this.props.language.searchbar.title} name='searchBar'>
+          <ul>
+            <Dropdown label={this.props.language.searchbar.searchengine}
+              name='searchEngine'
+              id='searchEngine'
+              onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}
+            >
+              {searchEngines.map((engine) =>
+                <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
+              )}
+              <option className='choices' value='custom'>Custom</option>
+            </Dropdown>
+          </ul>
+          <ul id='searchEngineInput' style={{ display: 'none' }}>
+            <p style={{ "marginTop": "0px" }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
+            <input type='text' id='customSearchEngine'></input>
+          </ul>
+        </Section>
+      </React.Fragment>
     );
   }
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index edb71b8b..db69523f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,9 @@ import App from './App';
 import './scss/index.scss';
 import 'react-toastify/dist/ReactToastify.css'; // the toast css is based on default so we need to import it
 
+import 'fontsource-lexend-deca/latin-400-normal.css';
+import 'fontsource-roboto/cyrillic-400-normal.css';
+
 ReactDOM.render(
     <App/>,
     document.getElementById('root')
diff --git a/src/modules/settingsFunctions.js b/src/modules/settingsFunctions.js
index dd3eddc6..6dfabf51 100644
--- a/src/modules/settingsFunctions.js
+++ b/src/modules/settingsFunctions.js
@@ -78,7 +78,7 @@ export default class SettingsFunctions {
         if (supportsWebP) localStorage.setItem('supportswebp', 'true');
 
         // Languages
-        const languages = ['nl', 'no', 'fr', 'ru'];
+        const languages = ['nl', 'no', 'fr', 'ru', 'es'];
         const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
         if (languages.includes(browserLanguage)) {
             localStorage.setItem('language', browserLanguage);
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 666b0035..ccbcfd29 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -13,6 +13,7 @@
 @import 'modules/marketplace';
 @import 'modules/checkbox';
 @import 'modules/buttons';
+@import 'modules/dropdown';
 @import 'modules/welcome';
 
 body {
@@ -29,16 +30,6 @@ body {
     outline: none;
 }
 
-@font-face {
-    font-family: 'Lexend Deca';
-    src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    src: url('/./fonts/Roboto-Cyrillic.woff2') format('woff2');
-}
-
 #center {
     margin-left: 2vw;
     margin-right: 2vw;
diff --git a/src/scss/modules/_dropdown.scss b/src/scss/modules/_dropdown.scss
new file mode 100644
index 00000000..c33a0f8a
--- /dev/null
+++ b/src/scss/modules/_dropdown.scss
@@ -0,0 +1,16 @@
+.dropdown {
+  select {
+    background: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
+    height: 34px;
+    width: 120px;
+    color: map-get($modal, "text");
+
+    border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
+    border-image-slice: 1;
+    border-width: 3px 4px;
+  }
+
+  select#language {
+    float: right;
+  }
+}
diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss
index e706e458..9373e0ed 100644
--- a/src/scss/modules/_settings.scss
+++ b/src/scss/modules/_settings.scss
@@ -225,20 +225,6 @@ button.remove + input[type=color].colour  {
   margin-left: 7px;
 }
 
-select {
-  background: none;
-  height: 34px;
-  width: 120px;
-  border-image-slice: 1;
-  border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
-  border-left: 10px solid;
-  color: map-get($modal, "text");
-}
-
-select#language {
-  float: right;
-}
-
 #customBackgroundColour {
   cursor: pointer;
 }
diff --git a/src/translations/es.json b/src/translations/es.json
new file mode 100644
index 00000000..3b96bf14
--- /dev/null
+++ b/src/translations/es.json
@@ -0,0 +1,135 @@
+{
+    "greeting": {
+        "morning": "Buenos días",
+        "afternoon": "Buenas tardes",
+        "evening": "Buenas noches",
+        "christmas": "Feliz Navidad",
+        "newyear": "Feliz año nuevo",
+        "halloween": "Feliz Halloween"
+    },
+    "credit": "Foto por",
+    "search": "Buscar",
+    "modals": {
+        "title": "Opciones",
+        "settings": "Ajustes",
+        "addons": "Mis complementos",
+        "marketplace": "Tienda"
+    },
+    "settings": {
+        "time": {
+            "title": "Tiempo",
+            "seconds": "Segundos",
+            "twentyfourhour": "24 Horas",
+            "ampm": "AM/PM (12 horas)",
+            "zero": "Sin ceros",
+            "analog": "Analógico"
+        },
+        "greeting": {
+            "title": "Saludos",
+            "events": "Eventos",
+            "default": "Mensaje del saludo por defecto",
+            "name": "Nombre para el saludo"
+        },
+        "quote": {
+            "title": "Cita",
+            "copy": "Botón de copiar",
+            "tweet": "Botón de Tweet",
+            "favourite": "Botón de favoritos"
+        },
+        "background": {
+            "title": "Fondo",
+            "API": "Fondos API",
+            "blur": "Ajustar difuminado",
+            "brightness": "Ajustar brillo",
+            "customURL": "URL del fondo personalizado",
+            "custombackground": "Fondo personalizado",
+            "customcolour": "Color del fondo personalizado",
+            "upload": "Subir",
+            "addcolour": "Añadir color",
+            "favourite": "Favorito",
+            "view": "Ver",
+            "refresh": "Refrescar",
+            "disabled": "Desactivado"
+        },
+        "searchbar": {
+            "title": "Barra de búsqueda",
+            "searchengine": "Motor de búsqueda",
+            "custom": "URL de búsqueda personalizada"
+        },
+        "offline": "Modo Offline",
+        "dark": "Tema Oscuro",
+        "experimental": {
+            "title": "Experimental",
+            "webp": "Activar WebP",
+            "animations": "Animaciones",
+            "voicesearch": "Búsqueda por voz",
+            "nightmode": "Modo nocturno automático"
+        },
+        "language": "Lenguaje",
+        "apply": "Aplicar",
+        "reset": "Reiniciar",
+        "import": "Importar",
+        "export": "Exportar"
+    },
+    "update": {
+        "title": "Actualizar",
+        "offline": {
+            "title": "Offline",
+            "description": "No se pueden obtener actualizaciones en modo sin conexión"
+        },
+        "error": {
+            "title": "Error",
+            "description": "No se pudo conectar con el servidor"
+        },
+        "loading": "Cargando...",
+        "readblog": "Leer en el blog aquí",
+        "contactsupport": "Contáctanos aquí"
+    },
+    "toasts": {
+        "quote": "Cita copiada",
+        "reset": "Restablecido correctamente",
+        "installed": "Instalado correctamente",
+        "removed": "Retirado correctamente",
+        "error": "Algo salió mal",
+        "imported": "Importado correctamente"
+    },
+    "marketplace": {
+        "photo_packs": "Paquetes de fotos",
+        "quote_packs": "Paquetes de citas",
+        "preset_settings": "Ajustes preestablecidos",
+        "themes": "Tema",
+        "product": {
+            "overview": "Visión general",
+            "information": "Información",
+            "last_updated": "Última actualización",
+            "version": "Versión",
+            "author": "Autor",
+            "notice": {
+                "title": "Aviso",
+                "description": "Para que se realice el cambio, la página debe actualizarse."
+            },
+            "buttons": {
+                "addtomue": "Añadir a Mue",
+                "remove": "Remover"
+            },
+            "quoteWarning": {
+                "title": "Advertencia",
+                "description": "¡Este paquete de citas solicita a servidores externos que pueden rastrearlo!"
+            }
+        },
+        "offline": {
+            "title": "Parece que estás desconectado",
+            "description": "Por favor conéctate a Internet."
+        },
+        "see_more": "Ver más"
+    },
+    "addons": {
+        "added": "Añadido",
+        "empty": {
+            "title": "Está vacío aquí",
+            "description": "Dirígete a la tienda para agregar algunos.",
+            "button": "Llévame allí"
+        },
+        "sideload": "Cargar complemento localmente"
+    }
+}
\ No newline at end of file
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 5e8297fc..26e563f0 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -32,7 +32,9 @@
         },
         "quote": {
             "title": "Цитата",
-            "copy": "Кнопка копирования"
+            "copy": "Кнопка копирования",
+            "tweet": "Кнопка твита",
+            "favourite": "Кнопка для оценки"
         },
         "background": {
             "title": "Фон",
@@ -43,18 +45,25 @@
             "custombackground": "Пользовательский фон",
             "customcolour": "Пользовательский цвет фона",
             "upload": "Загрузить",
-            "addcolour": "Добавить цвет"
+            "addcolour": "Добавить цвет",
+            "favourite": "Любимые",
+            "view": "Просмотр",
+            "refresh": "Обновить",
+            "disabled": "Выключен"
         },
         "searchbar": {
             "title": "Панель поиска",
-            "searchengine": "Поисковый движок"
+            "searchengine": "Поисковый движок",
+            "custom": "Пользовательский поисковый движок"
         },
         "offline": "Офлайн режим",
         "dark": "Тёмная тема",
         "experimental": {
             "title": "Экспериментальные настройки",
             "webp": "Включить WebP",
-            "animations": "Анимации"
+            "animations": "Анимации",
+            "voicesearch": "Поиск голосом",
+            "nightmode": "Автоматический ночной режим"
         },
         "language": "Язык",
         "apply": "Применить",
@@ -72,14 +81,17 @@
             "title": "Ошибка",
             "content": "Не удалось подключиться к серверу"
         },
-        "loading": "Загрузка..."
+        "loading": "Загрузка...",
+        "readblog": "Прочитайте об изменениях в блоге",
+        "contactsupport": "Связаться с нами"
     },
     "toasts": {
         "quote": "Цитата скопирована!",
         "reset": "Сброшено!",
         "installed": "Успешно установлено",
         "removed": "Успешно удалено",
-        "error": "Что-то пошло не так"
+        "error": "Что-то пошло не так",
+        "imported": "Успешно импортировано"
     },
     "marketplace": {
         "photo_packs": "Наборы фото",
@@ -99,6 +111,10 @@
             "buttons": {
                 "addtomue": "Добавить в Mue",
                 "remove": "Удалить"
+            },
+            "quoteWarning": {
+                "title": "Предупреждение",
+                "description": "Этот пакет цитат обращается к внешнему серверу и может отслеживать вас!"
             }
         },
         "offline": {
@@ -113,6 +129,7 @@
             "title": "Здесь пусто",
             "description": "Зайдите в магазин, чтобы найти что-то интересное.",
             "button": "Перейти"
-        }
+        },
+        "sideload": "Загрузить"
     }
 }