diff --git a/src/components/modals/settings/sections/Advanced.jsx b/src/components/modals/settings/sections/Advanced.jsx
index 5fb3d55f..e924f5e9 100644
--- a/src/components/modals/settings/sections/Advanced.jsx
+++ b/src/components/modals/settings/sections/Advanced.jsx
@@ -13,11 +13,6 @@ export default class AdvancedSettings extends React.PureComponent {
     toast(this.props.language.toasts.reset);
   }
 
-  componentDidMount() {
-    document.getElementById('customcss').value = localStorage.getItem('customcss');
-    document.getElementById('customjs').value = localStorage.getItem('customjs');
-  }
-
   settingsImport(e) {
     const content = JSON.parse(e.target.result);
 
@@ -28,7 +23,12 @@ export default class AdvancedSettings extends React.PureComponent {
     toast(this.props.language.toasts.imported);
   }
 
-  componentWillUnmount() {
+  componentDidMount() {
+    document.getElementById('customcss').value = localStorage.getItem('customcss');
+    document.getElementById('customjs').value = localStorage.getItem('customjs');
+  }
+
+  componentDidUpdate() {
     localStorage.setItem('customcss', document.getElementById('customcss').value);
     localStorage.setItem('customjs', document.getElementById('customjs').value);
   }
diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/settings/sections/Appearance.jsx
index 22010f21..ba0354ad 100644
--- a/src/components/modals/settings/sections/Appearance.jsx
+++ b/src/components/modals/settings/sections/Appearance.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
 
 import { toast } from 'react-toastify';
 
@@ -50,6 +51,10 @@ export default class AppearanceSettings extends React.PureComponent {
     localStorage.setItem('font', this.state.font.charAt(0).toUpperCase() + this.state.font.slice(1));
   }
 
+  componentDidMount() {
+    document.getElementById('fontWeight').value = localStorage.getItem('fontWeight') || 400;
+  }
+
   render() {
     const { appearance } = this.props.language.sections;
 
@@ -68,6 +73,21 @@ export default class AppearanceSettings extends React.PureComponent {
           <p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.props.language.buttons.reset}</span></p>
           <input type='text' value={this.state.font} onChange={(e) => this.setState({ font: e.target.value })}></input>
         </ul>
+        <Dropdown
+            label='Font Weight'
+            name='fontweight'
+            id='fontWeight'
+            onChange={() => localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}>
+              {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
+              <option className='choices' value='100'>Thin</option>
+              <option className='choices' value='200'>Extra-Light</option>
+              <option className='choices' value='300'>Light</option>
+              <option className='choices' value='400'>Normal</option>
+              <option className='choices' value='500'>Medium</option>
+              <option className='choices' value='600'>Semi-Bold</option>
+              <option className='choices' value='700'>Bold</option>
+              <option className='choices' value='800'>Extra-Bold</option>
+        </Dropdown>
         <Checkbox name='fontGoogle' text={appearance.font.google} />
 
         <h3>{appearance.accessibility.title}</h3>
diff --git a/src/components/modals/settings/sections/Background.jsx b/src/components/modals/settings/sections/Background.jsx
index 878a9518..b23f1223 100644
--- a/src/components/modals/settings/sections/Background.jsx
+++ b/src/components/modals/settings/sections/Background.jsx
@@ -37,7 +37,10 @@ export default class BackgroundSettings extends React.PureComponent {
         break;
 
       case 'customBackground':
-        document.getElementById('customBackground').value = '';
+        localStorage.setItem('customBackground', '');
+        this.setState({
+          customBackground: ''
+        });
         break;
 
       case 'blur':
@@ -225,6 +228,7 @@ export default class BackgroundSettings extends React.PureComponent {
           <Checkbox name='view' text={background.buttons.view} />
           <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
         </ul>
+
         <h3>{background.effects.title}</h3>
         <ul>
           <p>{background.effects.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.buttons.reset}</span></p>
@@ -234,13 +238,14 @@ export default class BackgroundSettings extends React.PureComponent {
           <p>{background.effects.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.buttons.reset}</span></p>
           <input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
         </ul>
+    
         <h3>{background.source.title}</h3>
         <ul>
           <Dropdown
             label={background.source.api}
             name='backgroundapi'
             id='backgroundAPI'
-            onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
+            onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
               <option className='choices' value='mue'>Mue</option>
               <option className='choices' value='unsplash'>Unsplash</option>
           </Dropdown>
diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/settings/sections/Time.jsx
index 1005a7ea..78444b7a 100644
--- a/src/components/modals/settings/sections/Time.jsx
+++ b/src/components/modals/settings/sections/Time.jsx
@@ -72,6 +72,7 @@ export default class TimeSettings extends React.PureComponent {
         <h3>{time.date.title}</h3>
         <Checkbox name='date' text={this.props.language.enabled} />
         <Checkbox name='dayofweek' text={time.date.day_of_week} />
+        <Checkbox name='weeknumber' text={time.date.week_number} />
         <Checkbox name='datenth' text={time.date.datenth} />
         <Checkbox name='short' text={time.date.short_date} betaFeature={true} />
         <Dropdown label={time.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss
index f8007012..5f210441 100644
--- a/src/components/widgets/background/scss/index.scss
+++ b/src/components/widgets/background/scss/index.scss
@@ -62,4 +62,3 @@
     transform: scale(1.1);
   }
 }
-
diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss
index 36c3feaf..0d8d0be5 100644
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -29,6 +29,11 @@
     font-size: 30px;
     filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
     cursor: pointer;
+    transition: all 0.5s ease 0s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
   }
 }
 
diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx
index ce63856e..13a63057 100644
--- a/src/components/widgets/time/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -71,11 +71,28 @@ export default class DateWidget extends React.PureComponent {
     }
   }
 
+  // based on https://gist.github.com/IamSilviu/5899269#gistcomment-2773524
+  getWeekNumber() {
+    const today = new Date();
+    const firstDayOfYear = new Date(today.getFullYear(), 0, 1);
+    const pastDaysOfYear = (today - firstDayOfYear) / 86400000;
+    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
+  }
+
   componentDidMount() {
     this.getDate();
   }
 
   render() {
-    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>
+    return (
+      <div>
+        <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>
+        {(localStorage.getItem('weeknumber') === 'true') ?
+          <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}><br/>
+            {'Week ' + this.getWeekNumber()}
+          </span>
+        :null}
+      </div>
+    )
   }
 }
diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js
index b1b8357b..2f2ec0fd 100644
--- a/src/modules/helpers/settings.js
+++ b/src/modules/helpers/settings.js
@@ -91,16 +91,28 @@ export default class SettingsFunctions {
     if (font) {
       const google = localStorage.getItem('fontGoogle');
 
-      let url = '';
+      let url, fontweight, fontstyle = '';
       if (google === 'true') {
         url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`;
       }
 
+      const fontWeight = localStorage.getItem('fontWeight');
+      if (fontWeight) {
+        fontweight = `font-weight: ${fontWeight};`;
+      }
+
+      const fontStyle = localStorage.getItem('fontStyle');
+      if (fontStyle) {
+        fontstyle = `font-style: ${fontStyle};`;
+      }
+
       document.head.insertAdjacentHTML('beforeend', `
         <style>
           ${url}
           * {
             font-family: '${font}', 'Lexend Deca' !important;
+            ${fontweight}
+            ${fontstyle}
           }
       </style>`);
     }
diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json
index 44cee06f..01678b58 100644
--- a/src/translations/en-GB.json
+++ b/src/translations/en-GB.json
@@ -58,6 +58,7 @@
             "date": {
               "title": "Date",
               "day_of_week": "Day of week",
+              "week_number": "Week Number",
               "datenth": "Date nth",
               "short_date": "Short Date",
               "short_format": "Short Format",