diff --git a/src/App.jsx b/src/App.jsx
index e47a5451..c4fdca4d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
-import Background from './components/widgets/Background';
-import Clock from './components/widgets/Clock';
-import Greeting from './components/widgets/Greeting';
-import Quote from './components/widgets/Quote';
-import Search from './components/widgets/Search';
-import Maximise from './components/widgets/Maximise';
-import Favourite from './components/widgets/Favourite';
-import PhotoInformation from './components/widgets/PhotoInformation';
-import Date from './components/widgets/Date';
+import Background from './components/widgets/background/Background';
+import Clock from './components/widgets/time/Clock';
+import Greeting from './components/widgets/greeting/Greeting';
+import Quote from './components/widgets/quote/Quote';
+import Search from './components/widgets/search/Search';
+import Maximise from './components/widgets/background/Maximise';
+import Favourite from './components/widgets/background/Favourite';
+import PhotoInformation from './components/widgets/background/PhotoInformation';
+import Date from './components/widgets/time/Date';
 
-import Navbar from './components/Navbar';
+import Navbar from './components/widgets/navbar/Navbar';
 
 import SettingsFunctions from './modules/helpers/settings';
 import { ToastContainer } from 'react-toastify';
@@ -38,6 +38,8 @@ export default class App extends React.PureComponent {
   componentDidMount() {
     if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings();
     if (localStorage.getItem('showWelcome') === 'true') this.setState({ welcomeModal: true });
+    const css = localStorage.getItem('customcss');
+    if (css) document.head.insertAdjacentHTML('beforeend', '<style>' + css + '</style>');
   }
 
   closeWelcome() {
diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx
index 25a1d11c..5b799c6d 100644
--- a/src/components/modals/settings/Checkbox.jsx
+++ b/src/components/modals/settings/Checkbox.jsx
@@ -19,6 +19,7 @@ export default class Checkbox extends React.PureComponent {
   render() {
     let text = this.props.text;
     if (this.props.newFeature) text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+    else if (this.props.betaFeature) text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
 
     return (
       <React.Fragment>
diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx
index 9634fd36..130b34f0 100644
--- a/src/components/modals/settings/Section.jsx
+++ b/src/components/modals/settings/Section.jsx
@@ -12,7 +12,7 @@ export default class Section extends React.PureComponent {
   }
 
   toggleSection() {
-    const display = (this.state.display === 'none') ? 'block': 'none';
+    const display = (this.state.display === 'none') ? 'block' : 'none';
 
     this.setState({
       display: display,
@@ -26,7 +26,11 @@ export default class Section extends React.PureComponent {
     let extraHTML, expandMore, slider, noDropdown;
 
     if (this.props.children) {
-        extraHTML = <li className='extraSettings'>{this.props.children}</li>
+        extraHTML = (
+          <div style={{ display: this.state.display }}>
+            <li className='extraSettings'>{this.props.children}</li>
+          </div>
+        );
         expandMore = (
           <ExpandMore
             style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
@@ -35,16 +39,14 @@ export default class Section extends React.PureComponent {
         );
     }
     if (this.props.slider !== false) slider = <Slider name={this.props.name} />;
-    if (this.props.noDropdown) noDropdown = 'nodropdown';
+    if (this.props.dropdown === false) noDropdown = 'nodropdown';
 
     return (
         <div className='section'>
             <h4 className={noDropdown} onClick={() => this.toggleSection()}>{this.props.title}</h4>
             {expandMore}
             {slider}
-            <div style={{ display: this.state.display }}>
-              {extraHTML}
-            </div>
+            {extraHTML}
         </div>
     );
   }
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx
index 97ca0921..aa6d6b6e 100644
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/src/components/modals/settings/sections/BackgroundSettings.jsx
@@ -194,6 +194,7 @@ export default class BackgroundSettings extends React.PureComponent {
             <Checkbox name='view' text={this.props.language.background.view} />
             <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
             <Checkbox name='refresh' text={this.props.language.background.refresh} />
+            <Checkbox name='webp' text={this.props.language.experimental.webp} betaFeature={true} />
           </ul>
           <ul>
             <Dropdown
diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx
index c336c750..24e9eb26 100644
--- a/src/components/modals/settings/sections/SearchSettings.jsx
+++ b/src/components/modals/settings/sections/SearchSettings.jsx
@@ -3,8 +3,9 @@ import SettingsFunctions from '../../../../modules/helpers/settings';
 import { toast } from 'react-toastify';
 import Section from '../Section';
 import Dropdown from '../Dropdown';
+import Checkbox from '../Checkbox';
 
-const searchEngines = require('../../../../modules/json/search_engines.json');
+const searchEngines = require('../../../widgets/search/search_engines.json');
 
 export default class SearchSettings extends React.PureComponent {
   resetSearch() {
@@ -27,6 +28,9 @@ export default class SearchSettings extends React.PureComponent {
   render() {
     return (
         <Section title={this.props.language.searchbar.title} name='searchBar'>
+          <ul>
+            <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} />
+          </ul>
           <ul>
             <Dropdown label={this.props.language.searchbar.search_engine}
               name='searchEngine'
@@ -39,7 +43,7 @@ export default class SearchSettings extends React.PureComponent {
             </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>
+            <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>
diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx
index 79c084bb..57b6cecd 100644
--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -9,8 +9,12 @@ import SearchSettings from '../settings/sections/SearchSettings';
 import LanguageSettings from '../settings/sections/LanguageSettings';
 
 export default class Settings extends React.PureComponent {
-  resetGreeting() {
-    document.getElementById('greetingName').value = '';
+  resetItem(type) {
+    switch (type) {
+      case 'greeting': document.getElementById('greetingName').value = ''; break;
+      case 'css': document.getElementById('customcss').value = ''; break;
+      default: break;
+    }
     toast(this.props.toastLanguage.reset);
   }
 
@@ -18,6 +22,7 @@ export default class Settings extends React.PureComponent {
     // Settings
     document.getElementById('greetingName').value = localStorage.getItem('greetingName');
     document.getElementById('language').value = localStorage.getItem('language');
+    document.getElementById('customcss').value = localStorage.getItem('customcss');
 
     if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns
       const choices = document.getElementsByClassName('choices');
@@ -45,13 +50,14 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='ampm' text={this.props.language.time.ampm} />
             <Checkbox name='zero' text={this.props.language.time.zero} />
             <Checkbox name='analog' text={this.props.language.time.analog} />
+            <Checkbox name='percentageComplete' text={this.props.language.time.percentageComplete} />
           </Section>
 
           <Section title={this.props.language.greeting.title} name='greeting'>
             <Checkbox name='events' text={this.props.language.greeting.events} />
             <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
             <ul>
-              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetGreeting()}>{this.props.language.reset}</span></p>
+              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greeting')}>{this.props.language.reset}</span></p>
               <input type='text' id='greetingName'></input>
             </ul>
           </Section>
@@ -63,17 +69,17 @@ export default class Settings extends React.PureComponent {
           </Section>
 
           <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-
           <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+          <Section title={this.props.language.offline} name='offlineMode' dropdown={false} />
 
-          <Section title={this.props.language.offline} name='offlineMode' noDropdown={true} />
-          <Section title={this.props.language.dark} name='darkTheme' noDropdown={true} />
-
-          <Section title={this.props.language.experimental.title} name='experimental' slider={false}>
-            <Checkbox name='webp' text={this.props.language.experimental.webp} />
-            <Checkbox name='animations' text={this.props.language.experimental.animations} />
-            <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} newFeature={true} />
-            <Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} newFeature={true} />
+          <Section title='Appearance' name='appearance' slider={false}>
+            <Checkbox name='animations' text={this.props.language.experimental.animations} betaFeature={true} />
+            <Checkbox name='darkTheme' text={this.props.language.dark} />
+            <Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} betaFeature={true} />
+            <ul>
+              <p>Custom CSS <span className='modalLink' onClick={() => this.resetItem('css')}>{this.props.language.reset}</span> <span className='newFeature'> NEW</span></p>
+              <textarea id='customcss'></textarea>
+            </ul>
           </Section>
 
           <LanguageSettings language={this.props.language} />
diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/background/Background.jsx
similarity index 89%
rename from src/components/widgets/Background.jsx
rename to src/components/widgets/background/Background.jsx
index dce35c26..e89c88af 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import * as Constants from '../../modules/constants';
+import * as Constants from '../../../modules/constants';
+
+import './scss/index.scss';
 
 export default class Background extends React.PureComponent {
   gradientStyleBuilder(gradientSettings) {
@@ -46,7 +48,7 @@ export default class Background extends React.PureComponent {
   }
 
   doOffline() { // Handles setting the background if the user is offline
-    const offlineImages = require('../../modules/json/offline_images.json');
+    const offlineImages = require('./offline_images.json');
     const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json
     const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys
     const randomImage = offlineImages[photographer].photo[
@@ -67,7 +69,6 @@ export default class Background extends React.PureComponent {
     const customBackgroundColour = localStorage.getItem('customBackgroundColour');
     const customBackground = localStorage.getItem('customBackground');
     const favourited = JSON.parse(localStorage.getItem('favourite'));
-    const customBackgroundVideo = localStorage.getItem('customBackgroundVideo');
 
     if (favourited) {
       if (offlineMode === 'true') return this.doOffline();
@@ -82,13 +83,13 @@ export default class Background extends React.PureComponent {
       document.getElementById('location').textContent = randomPhoto.location;
     }
     else if (customBackgroundColour) this.setBackground(null, customBackgroundColour, 'false');
-    else if (customBackground !== '') this.setBackground(customBackground, null, 'false'); // Local
-    else if (customBackgroundVideo) {
-      document.getElementById('backgroundImage').innerHTML = `
-      <video autoplay muted loop id="backgroundVideo">
-          <source src="${customBackgroundVideo}"/>
-      </video>`;
-      document.querySelector('.photoInformation').style.display = 'none'; // Hide the credit
+    else if (customBackground !== '') {
+      if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) {
+        document.getElementById('backgroundImage').innerHTML = `
+        <video autoplay muted loop id='backgroundVideo'>
+            <source src='${customBackground}'/>
+        </video>`;
+      } else this.setBackground(customBackground, null, 'false'); // Local
     } else { // Online
       if (offlineMode === 'true') return this.doOffline();
       try { // First we try and get an image from the API...
@@ -96,9 +97,7 @@ export default class Background extends React.PureComponent {
         let requestURL;
 
         switch (localStorage.getItem('backgroundAPI')) {
-          case 'unsplash':
-            requestURL = `${Constants.UNSPLASH_URL}/getImage`;
-            break;
+          case 'unsplash': requestURL = `${Constants.UNSPLASH_URL}/getImage`; break;
           default: // Defaults to Mue
             if (localStorage.getItem('supportswebp') === 'true' && enabled === 'true') requestURL = `${Constants.API_URL}/getImage?webp=true`;
             else requestURL = `${Constants.API_URL}/getImage?category=Outdoors`;
diff --git a/src/components/widgets/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
similarity index 100%
rename from src/components/widgets/Favourite.jsx
rename to src/components/widgets/background/Favourite.jsx
diff --git a/src/components/widgets/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
similarity index 100%
rename from src/components/widgets/Maximise.jsx
rename to src/components/widgets/background/Maximise.jsx
diff --git a/src/components/widgets/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
similarity index 100%
rename from src/components/widgets/PhotoInformation.jsx
rename to src/components/widgets/background/PhotoInformation.jsx
diff --git a/src/modules/json/offline_images.json b/src/components/widgets/background/offline_images.json
similarity index 100%
rename from src/modules/json/offline_images.json
rename to src/components/widgets/background/offline_images.json
diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss
new file mode 100644
index 00000000..d443c155
--- /dev/null
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@@ -0,0 +1,86 @@
+.photoInformation {
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+    font-size: calc(10px + 0.1vmin) !important;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+
+    svg {
+        float: left;
+        vertical-align: middle;
+        margin-right: 1rem;
+        font-size: calc(10px + 2vmin);
+    }
+
+    span {
+        display: none;
+    }
+
+    h1 {
+        position: relative;
+    }
+
+    svg,
+    h1 {
+        display: inline;
+    }
+
+    svg:hover+.infoCard {
+        display: block;
+    }
+}
+
+.infoCard {
+    display: none;
+    background: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    color: #000;
+    position: fixed;
+    bottom: 3.25rem;
+    left: 0.7em;
+    padding: 1rem;
+    border-radius: 24px 24px 24px 0;
+    max-width: 500px;
+    text-align: left;
+    text-shadow: none;
+
+    span {
+        display: block;
+    }
+
+    svg {
+        margin-right: 0.5rem;
+        vertical-align: middle;
+        display: inline-flex;
+        padding: 2px;
+    }
+
+    span,
+    svg {
+        font-size: 2em;
+    }
+
+    h1,
+    .infoIcon {
+        font-size: 3em;
+    }
+
+    .infoIcon {
+        padding: 4px;
+    }
+
+    hr {
+        height: 3px;
+        background: #2d3436;
+        outline: none;
+        border: none;
+    }
+}
+
+.infoCard:hover {
+    display: block !important;
+}
+
+.photoInformationHover {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss
new file mode 100644
index 00000000..9e7a62f6
--- /dev/null
+++ b/src/components/widgets/background/scss/index.scss
@@ -0,0 +1,69 @@
+@import 'photoinformation';
+@import '../../../../scss/mixins';
+
+#backgroundImage {
+    height: 100vh;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+#backgroundVideo {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+}
+
+.fade-in {
+    @include animation('fadein 2s');
+}
+
+@include keyframes(fadein) {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.backgroundEffects {
+    opacity: 0.7;
+    transition: ease 0.6s;
+}
+
+.creditlink {
+    text-decoration: none;
+    color: white;
+}
+
+.view {
+    bottom: 10px;
+    right: 25px;
+}
+
+.favourite {
+    bottom: 10px;
+    right: 50px;
+    padding-right: 5px;
+}
+
+.view,
+.favourite {
+    position: absolute;
+    transition: all 0.5s ease 0s;
+
+    &:hover {
+        transform: scale(1.1);
+    }
+}
+
+#viewButton,
+#favouriteButton {
+    width: auto;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/widgets/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx
similarity index 98%
rename from src/components/widgets/Greeting.jsx
rename to src/components/widgets/greeting/Greeting.jsx
index 3f986632..40fb121c 100644
--- a/src/components/widgets/Greeting.jsx
+++ b/src/components/widgets/greeting/Greeting.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './greeting.scss';
+
 export default class Greeting extends React.PureComponent {
   constructor(...args) {
     super(...args);
diff --git a/src/scss/modules/_greeting.scss b/src/components/widgets/greeting/greeting.scss
similarity index 92%
rename from src/scss/modules/_greeting.scss
rename to src/components/widgets/greeting/greeting.scss
index db18fba5..fe984650 100644
--- a/src/scss/modules/_greeting.scss
+++ b/src/components/widgets/greeting/greeting.scss
@@ -1,4 +1,4 @@
-.greeting {
-    margin: 0;
-    font-size: 1.6em;
+.greeting {
+    margin: 0;
+    font-size: 1.6em;
 }
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
similarity index 89%
rename from src/components/Navbar.jsx
rename to src/components/widgets/navbar/Navbar.jsx
index f7aff52c..c4f06188 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -5,9 +5,11 @@ import NewReleases from '@material-ui/icons/NewReleasesRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Tooltip from '@material-ui/core/Tooltip';
 import Report from '@material-ui/icons/SmsFailed';
-import * as Constants from '../modules/constants';
+import * as Constants from '../../../modules/constants';
 
-const Notes = React.lazy(() => import('./widgets/Notes')); // the user probably won't use the notes feature every time so we lazy load
+import './scss/index.scss';
+
+const Notes = React.lazy(() => import('./Notes')); // the user probably won't use the notes feature every time so we lazy load
 const renderLoader = () => <div></div>;
 
 export default class Navbar extends React.PureComponent {
diff --git a/src/components/widgets/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
similarity index 98%
rename from src/components/widgets/Notes.jsx
rename to src/components/widgets/navbar/Notes.jsx
index 5395b665..81e9e470 100644
--- a/src/components/widgets/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import CopyIcon from '@material-ui/icons/FileCopyRounded';
-import Pin from './icons/Pin';
+import Pin from './Pin';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 
 export default class Notes extends React.PureComponent {
diff --git a/src/components/widgets/icons/Pin.jsx b/src/components/widgets/navbar/Pin.jsx
similarity index 100%
rename from src/components/widgets/icons/Pin.jsx
rename to src/components/widgets/navbar/Pin.jsx
diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss
new file mode 100644
index 00000000..8d5c879e
--- /dev/null
+++ b/src/components/widgets/navbar/scss/_notes.scss
@@ -0,0 +1,80 @@
+.notes {
+    position: relative;
+    display: inline-block;
+
+    h3 {
+        text-shadow: none;
+        margin: 0;
+    }
+}
+
+.notes .notescontainer {
+    text-align: center;
+    padding: 15px;
+    visibility: hidden;
+    background-color: #fff;
+    color: #000;
+    text-align: center;
+    border-radius: 12px;
+    position: absolute;
+    z-index: 1;
+    top: 80%;
+    left: 50%;
+    margin-left: -125px;
+
+    input[type=text] {
+        border: none;
+        color: #2d3436;
+    }
+
+    svg,
+    input[type=text] {
+        display: inline-flex;
+    }
+
+    svg {
+        float: left;
+    }
+
+    ::placeholder {
+        color: #636e72;
+        opacity: 1;
+    }
+}
+
+
+.notes:hover .notescontainer {
+    visibility: visible;
+}
+
+textarea {
+    overflow: none;
+    border: none;
+    outline: none;
+    width: 200px;
+    resize: none;
+    height: 100px;
+    margin: 10px;
+}
+
+.noteIcon {
+    display: inline;
+    font-size: 1em;
+    float: none;
+}
+
+.topbarnotes {
+    text-align: center;
+
+    svg {
+        font-size: 48px;
+        float: left !important;
+        padding: 9px;
+    }
+
+    h3 {
+        font-size: 48px;
+        float: right;
+        margin-right: 20px;
+    }
+}
\ No newline at end of file
diff --git a/src/scss/modules/_navbar.scss b/src/components/widgets/navbar/scss/index.scss
similarity index 54%
rename from src/scss/modules/_navbar.scss
rename to src/components/widgets/navbar/scss/index.scss
index 73a140dc..2a48bb44 100644
--- a/src/scss/modules/_navbar.scss
+++ b/src/components/widgets/navbar/scss/index.scss
@@ -1,3 +1,6 @@
+@import 'notes';
+@import '../../../../scss/variables';
+
 .navbar-container {
     position: absolute;
     top: 1rem;
@@ -63,87 +66,6 @@
     }
 }
 
-.notes {
-    position: relative;
-    display: inline-block;
-
-    h3 {
-        text-shadow: none;
-        margin: 0;
-    }
-}
-
-.notes .notescontainer {
-    text-align: center;
-    padding: 15px;
-    visibility: hidden;
-    background-color: #fff;
-    color: #000;
-    text-align: center;
-    border-radius: 12px;
-    position: absolute;
-    z-index: 1;
-    top: 80%;
-    left: 50%;
-    margin-left: -125px;
-
-    input[type=text] {
-        border: none;
-        color: #2d3436;
-    }
-
-    svg,
-    input[type=text] {
-        display: inline-flex;
-    }
-
-    svg {
-        float: left;
-    }
-
-    ::placeholder {
-        color: #636e72;
-        opacity: 1;
-    }
-}
-
-
-.notes:hover .notescontainer {
-    visibility: visible;
-}
-
-textarea {
-    overflow: none;
-    border: none;
-    outline: none;
-    width: 200px;
-    resize: none;
-    height: 100px;
-    margin: 10px;
-}
-
-.noteIcon {
-    display: inline;
-    font-size: 1em;
-    float: none;
-}
-
-.topbarnotes {
-    text-align: center;
-
-    svg {
-        font-size: 48px;
-        float: left !important;
-        padding: 9px;
-    }
-
-    h3 {
-        font-size: 48px;
-        float: right;
-        margin-right: 20px;
-    }
-}
-
 .visibilityshow {
     visibility: visible !important;
 }
\ No newline at end of file
diff --git a/src/components/widgets/Quote.jsx b/src/components/widgets/quote/Quote.jsx
similarity index 98%
rename from src/components/widgets/Quote.jsx
rename to src/components/widgets/quote/Quote.jsx
index 1cbfedc4..44c250b3 100644
--- a/src/components/widgets/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -2,11 +2,13 @@ import React from 'react';
 import Quotes from '@muetab/quotes';
 import FileCopy from '@material-ui/icons/FilterNone';
 import { toast } from 'react-toastify';
-import * as Constants from '../../modules/constants';
+import * as Constants from '../../../modules/constants';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';
 
+import './quote.scss';
+
 export default class Quote extends React.PureComponent {
   constructor(...args) {
     super(...args);
diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss
new file mode 100644
index 00000000..23a57d7e
--- /dev/null
+++ b/src/components/widgets/quote/quote.scss
@@ -0,0 +1,59 @@
+@import '../../../scss/variables';
+
+.quote {
+    font-size: 0.8em;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+@media screen and (min-width: 600px) {
+    .quote {
+        margin-left: 30%;
+        margin-right: 30%;
+    }
+}
+
+.quoteauthor {
+    font-size: 0.9em;
+    letter-spacing: 0.5px;
+    margin: 0;
+}
+
+.quoteAuthor,
+.copyButton {
+    display: inline;
+    font-size: 0.8em;
+    position: relative !important;
+    display: block;
+    margin: 0 auto;
+}
+
+.copyButton {
+    cursor: pointer;
+    vertical-align: middle;
+    float: middle;
+    margin: 0 auto;
+    text-align: right;
+    transition: ease 0.2s !important;
+
+    &:hover {
+        transform: scale(1.1);
+    }
+}
+
+i.material-icons,
+h1.quoteauthor {
+    display: inline;
+}
+
+button.copyButton {
+    background: transparent;
+    border: none;
+    color: map-get($theme-colours, 'main');
+    padding: 20px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: table-cell
+}
\ No newline at end of file
diff --git a/src/components/widgets/Search.jsx b/src/components/widgets/search/Search.jsx
similarity index 96%
rename from src/components/widgets/Search.jsx
rename to src/components/widgets/search/Search.jsx
index a9a81c8c..9873f497 100644
--- a/src/components/widgets/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import SearchIcon from '@material-ui/icons/Search';
 import MicIcon from '@material-ui/icons/Mic';
 
-const searchEngines = require('../../modules/json/search_engines.json');
+import './search.scss';
+
+const searchEngines = require('./search_engines.json');
 
 export default class Search extends React.PureComponent {
   constructor(...args) {
diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss
new file mode 100644
index 00000000..aab31294
--- /dev/null
+++ b/src/components/widgets/search/search.scss
@@ -0,0 +1,48 @@
+@import '../../../scss/variables';
+
+.searchbar {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    display: flex;
+    flex-direction: row;
+    display: block;
+    color: map-get($theme-colours, 'main-text-color');
+
+    input[type=text] {
+        width: 140px;
+        margin-left: 12px;
+        border-radius: 24px;
+        font-size: calc(5px + 1.2vmin);
+        background: transparent;
+        border: none;
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.1);
+        -webkit-transition: width 0.5s ease-in-out;
+        transition: width 0.5s ease-in-out;
+
+        &:focus {
+            width: 400px;
+            background-color: rgba(0, 0, 0, .3);
+        }
+    }
+
+    .MuiSvgIcon-root {
+        margin-top: 4px;
+        font-size: 30px;
+        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
+        cursor: pointer;
+    }
+}
+
+.input.searchtext {
+    border: none;
+}
+
+.micIcon {
+    margin-right: 10px;
+}
+
+#searchEngine {
+    width: 130px;
+}
\ No newline at end of file
diff --git a/src/modules/json/search_engines.json b/src/components/widgets/search/search_engines.json
similarity index 100%
rename from src/modules/json/search_engines.json
rename to src/components/widgets/search/search_engines.json
diff --git a/src/components/widgets/Clock.jsx b/src/components/widgets/time/Clock.jsx
similarity index 93%
rename from src/components/widgets/Clock.jsx
rename to src/components/widgets/time/Clock.jsx
index e56e2c37..f7c0adb0 100644
--- a/src/components/widgets/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import Analog from 'react-clock';
 
+import './clock.scss';
+
 export default class Clock extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -17,14 +19,12 @@ export default class Clock extends React.PureComponent {
       const now = new Date();
 
       // Percentage
-      if (localStorage.getItem('percentageComplete') === 'true') {
-        return this.setState({ time: (now.getHours() / 24).toFixed(2) + '%'})
-      }
+      if (localStorage.getItem('percentageComplete') === 'true') return this.setState({ time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'});
 
       // Analog clock
       if (localStorage.getItem('analog') === 'true') this.setState({ time: now });
       else {
-        let sec = '';
+        let time, sec = '';
 
         // Extra 0
         const zero = localStorage.getItem('zero');
@@ -35,7 +35,6 @@ export default class Clock extends React.PureComponent {
         }
 
         if (localStorage.getItem('24hour') === 'true') {
-          let time = '';
           if (zero === 'false') time = `${now.getHours()}:${now.getMinutes()}${sec}`;
           else time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
 
@@ -49,7 +48,6 @@ export default class Clock extends React.PureComponent {
           let ampm = now.getHours() > 11 ? 'PM' : 'AM';
           if (localStorage.getItem('ampm') === 'false') ampm = '';
 
-          let time = '';
           if (zero === 'false') time = `${hours}:${now.getMinutes()}${sec}`;
           else time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
 
diff --git a/src/components/widgets/Date.jsx b/src/components/widgets/time/Date.jsx
similarity index 88%
rename from src/components/widgets/Date.jsx
rename to src/components/widgets/time/Date.jsx
index f1ce72a7..190c13ad 100644
--- a/src/components/widgets/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -11,15 +11,16 @@ export default class DateWidget extends React.PureComponent {
 
   getDate() {
     const date = new Date();
+    const dateFormat = localStorage.getItem('dateFormat');
 
-    if (localStorage.getItem('dateFormat') === 'short') {
+    if (dateFormat === 'short') {
       const dateDay = date.getDate();
       const dateMonth = date.getMonth() + 1;
       const dateYear = date.getFullYear();
 
       let day = dateDay, month = dateMonth, year = dateYear;
 
-      switch (localStorage.getItem('dateFormat')) {
+      switch (dateFormat) {
         case 'MDY':
           day = dateMonth;
           month = dateDay;
@@ -28,8 +29,7 @@ export default class DateWidget extends React.PureComponent {
           day = dateYear;
           year = dateDay;
           break;
-        default: // DMY
-          break;
+        default: break; // DMY
       }
 
       let format;
@@ -58,6 +58,6 @@ export default class DateWidget extends React.PureComponent {
   }
 
   render() {
-    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold'}}>{this.state.date}</span>
+    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>
   }
 }
\ No newline at end of file
diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss
new file mode 100644
index 00000000..777a123e
--- /dev/null
+++ b/src/components/widgets/time/clock.scss
@@ -0,0 +1,24 @@
+@import '../../../scss/variables';
+
+.clock {
+    font-size: 4em;
+    margin: 0;
+}
+
+.ampm {
+    font-size: 0.5em;
+}
+
+.analogclock,
+.react-clock__face {
+    margin: 0 auto;
+    border-radius: 100%;
+    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
+    border: 1px solid map-get($theme-colours, "main");
+}
+
+.react-clock__hand__body {
+    background: map-get($theme-colours, "main");
+    ;
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+}
\ No newline at end of file
diff --git a/src/modules/json/default_settings.json b/src/modules/default_settings.json
similarity index 100%
rename from src/modules/json/default_settings.json
rename to src/modules/default_settings.json
diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js
index 7752ad49..e88a9466 100644
--- a/src/modules/helpers/settings.js
+++ b/src/modules/helpers/settings.js
@@ -1,7 +1,6 @@
-const defaultSettings = require('../json/default_settings.json');
+const defaultSettings = require('../default_settings.json');
 
 const saveFile = (data, filename = 'file') => {
-    if (!data) return console.error('No data');
     if (typeof data === 'object') data = JSON.stringify(data, undefined, 4);
 
     const blob = new Blob([data], { type: 'text/json' });
@@ -52,6 +51,7 @@ export default class SettingsFunctions {
         localStorage.setItem('brightness', document.getElementById('brightnessRange').value);
         localStorage.setItem('greetingName', document.getElementById('greetingName').value);
         localStorage.setItem('customBackground', document.getElementById('customBackground').value);
+        localStorage.setItem('customcss', document.getElementById('customcss').value);
         if (document.getElementById('customBackgroundHex').value !== hexDisabled) {
             localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
         }
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 8470cb88..4890ca30 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1,12 +1,6 @@
 @import 'variables';
 @import 'mixins';
 
-@import 'modules/clock';
-@import 'modules/greeting';
-@import 'modules/quote';
-@import 'modules/search';
-@import 'modules/credit';
-@import 'modules/navbar';
 @import 'modules/modal';
 @import 'modules/settings';
 @import 'modules/toast';
@@ -59,44 +53,4 @@ body {
     min-height: 100vh;
     display: grid;
     color: map-get($theme-colours, 'main-text-color');
-}
-
-#backgroundImage {
-    height: 100vh;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-attachment: fixed;
-}
-
-#backgroundVideo {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
-}
-
-.fade-in {
-    @include animation('fadein 2s');
-}
-
-@include keyframes(fadein) {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-.backgroundEffects {
-    opacity: 0.7;
-    transition: ease 0.6s;
-}
-
-.creditlink {
-    text-decoration: none;
-    color: white;
 }
\ No newline at end of file
diff --git a/src/scss/modules/_clock.scss b/src/scss/modules/_clock.scss
deleted file mode 100644
index 1a972b5b..00000000
--- a/src/scss/modules/_clock.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.clock {
-  font-size: 4em;
-  margin: 0;
-}
-
-.ampm {
-  font-size: 0.5em;
-}
-
-.analogclock, .react-clock__face {
-  margin: 0 auto;
-  border-radius: 100%;
-  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
-  border: 1px solid map-get($theme-colours, "main");
-}
-
-.react-clock__hand__body {
-  background: map-get($theme-colours, "main");;
-  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
-}
\ No newline at end of file
diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss
deleted file mode 100644
index 5da3afe5..00000000
--- a/src/scss/modules/_credit.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-.photoInformation {
-  position: absolute;
-  bottom: 1rem;
-  left: 1rem;
-  font-size: calc(10px + 0.1vmin) !important;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-
-  svg {
-    float: left;
-    vertical-align: middle;
-    margin-right: 1rem;
-    font-size:  calc(10px + 2vmin);
-  }
-
-  span {
-    display: none;
-  }
-
-  h1 {
-    position: relative;
-  }
-
-  svg, h1 {
-    display: inline;
-  }
-
-  svg:hover + .infoCard {
-    display: block;
-  }
-}
-
-.infoCard {
-  display: none;
-  background: #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  color: #000;
-  position: fixed;
-  bottom: 3.25rem;
-  left: 0.7em;
-  padding: 1rem;
-  border-radius: 24px 24px 24px 0;
-  max-width: 500px;
-  text-align: left;
-  text-shadow: none;
-
-  span {
-    display: block;
-  }
-
-  svg {
-    margin-right: 0.5rem;
-    vertical-align: middle;
-    display: inline-flex;
-    padding: 2px;
-  }
-
-  span, svg {
-    font-size: 2em;
-  }
-
-  h1, .infoIcon {
-    font-size: 3em;
-  }
-
-  .infoIcon {
-    padding: 4px;
-  }
-
-  hr {
-    height: 3px;
-    background: #2d3436;
-    outline: none;
-    border: none;
-  }
-}
-
-.infoCard:hover {
-  display: block !important;
-}
-
-.photoInformationHover {
-  cursor: pointer;
-}
-
-.view {
-  bottom: 10px;
-  right: 25px;
-}
-
-.favourite {
-  bottom: 10px;
-  right: 50px;
-  padding-right: 5px;
-}
-
-.view, .favourite {
-  position: absolute;
-  transition: all 0.5s ease 0s;
-  &:hover {
-    transform: scale(1.1);
-  }
-}
-
-#viewButton, #favouriteButton {
-  width: auto;
-  cursor: pointer;
-}
diff --git a/src/scss/modules/_quote.scss b/src/scss/modules/_quote.scss
deleted file mode 100644
index 3cbb3cbb..00000000
--- a/src/scss/modules/_quote.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.quote {
-  font-size: 0.8em;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-}
-
-@media screen and (min-width: 600px) {
-  .quote {
-    margin-left: 30%;
-    margin-right: 30%;
-  }
-}
-
-.quoteauthor {
-  font-size: 0.9em;
-  letter-spacing: 0.5px;
-  margin: 0;
-}
-
-.quoteAuthor, .copyButton {
-  display: inline;
-  font-size: 0.8em;
-  position: relative !important;
-  display: block;
-  margin: 0 auto;
-}
-
-.copyButton {
-  cursor: pointer;
-  vertical-align: middle;
-  float: middle;
-  margin: 0 auto;
-  text-align: right;
-  transition: ease 0.2s !important;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-}
-
-i.material-icons,
-h1.quoteauthor {
-  display: inline;
-}
-
-button.copyButton {
-  background: transparent;
-  border: none;
-  color: map-get($theme-colours, 'main');
-  padding: 20px 20px;
-  text-align: center;
-  text-decoration: none;
-  font-size: 20px;
-  cursor: pointer;
-  border-radius: 5px;
-  display: table-cell
-}
\ No newline at end of file
diff --git a/src/scss/modules/_search.scss b/src/scss/modules/_search.scss
deleted file mode 100644
index 3925640c..00000000
--- a/src/scss/modules/_search.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.searchbar {
-  position: absolute;
-  left: 20px;
-  top: 20px;
-  display: flex;
-  flex-direction: row;
-  display: block;
-  color: map-get($theme-colours, 'main-text-color');
-
-  input[type=text] {
-    width: 140px;
-    margin-left: 12px;
-    border-radius: 24px;
-    font-size: calc(5px + 1.2vmin);
-    background: transparent;
-    border: none;
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.1);
-    -webkit-transition: width 0.5s ease-in-out;
-    transition: width 0.5s ease-in-out;
-
-    &:focus {
-      width: 400px;
-      background-color: rgba(0, 0, 0, .3);
-    }
-  }
-
-  .MuiSvgIcon-root {
-    margin-top: 4px;
-    font-size: 30px;
-    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
-    cursor: pointer;
-  }
-}
-
-.input.searchtext {
-  border: none;
-}
-
-.micIcon {
-  margin-right: 10px;
-}
-
-#searchEngine {
-  width: 130px;
-}
\ No newline at end of file
diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss
index b6e3a0c2..4cc27925 100644
--- a/src/scss/modules/_settings.scss
+++ b/src/scss/modules/_settings.scss
@@ -255,4 +255,10 @@ button.remove + input[type=color].colour  {
 .newFeature {
   color: #ff4757;
   font-size: 12px;
+}
+
+#customcss {
+  font-family: Consolas !important;
+  border: solid 1px black !important;
+  margin-left: 0px;
 }
\ No newline at end of file
diff --git a/src/translations/en.json b/src/translations/en.json
index 1a95a599..79e1dacb 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -23,7 +23,8 @@
             "twentyfourhour": "24 Hour",
             "ampm": "AM/PM (12 hour)",
             "zero": "Zero-padded",
-            "analog": "Analog"
+            "analog": "Analog",
+            "percentageComplete": "Percentage of the Day Complete"
         },
         "greeting": {
             "title": "Greeting",