diff --git a/src/App.jsx b/src/App.jsx
index bc2a627c..784206dd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -31,6 +31,10 @@ export default class App extends PureComponent {
     variables.stats.tabLoad();
   }
 
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
   render() {
     return (
       <>
diff --git a/src/components/helpers/autocomplete/Autocomplete.jsx b/src/components/helpers/autocomplete/Autocomplete.jsx
index 2f524e5b..40dfd67f 100644
--- a/src/components/helpers/autocomplete/Autocomplete.jsx
+++ b/src/components/helpers/autocomplete/Autocomplete.jsx
@@ -55,7 +55,7 @@ export default class Autocomplete extends PureComponent {
     });
   }
 
-  componentWillUmount() {
+  componentWillUnmount() {
     EventBus.off('refresh');
   }
 
diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx
index 37032e13..f6f1c8e7 100644
--- a/src/components/modals/main/Main.jsx
+++ b/src/components/modals/main/Main.jsx
@@ -30,7 +30,6 @@ const renderLoader = (current) => (
 );
 
 export default function MainModal({ modalClose }) {
-  const display = localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none';
   const [currentTab, setCurrentTab] = useState(0);
 
   const changeTab = (type) => {
diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index cfa93f85..a9e68638 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent, createRef } from 'react';
+import { PureComponent } from 'react';
 import { MdUpdate, MdOutlineExtensionOff, MdCode } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import Modal from 'react-modal';
diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx
index 4b8748a0..1d206721 100644
--- a/src/components/modals/main/tabs/backend/Tabs.jsx
+++ b/src/components/modals/main/tabs/backend/Tabs.jsx
@@ -26,8 +26,10 @@ export default class Tabs extends PureComponent {
   };
 
   render() {
+    const display = localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none';
+
     const reminderInfo = (
-      <div className="reminder-info" style={{ display: 'none' }}>
+      <div className="reminder-info" style={{ display }}>
         <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
         <span className="subtitle">
           {variables.getMessage('modals.main.settings.reminder.message')}
diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx
index 151dcbc5..27a4a7ec 100644
--- a/src/components/widgets/Widgets.jsx
+++ b/src/components/widgets/Widgets.jsx
@@ -66,6 +66,10 @@ export default class Widgets extends PureComponent {
     });
   }
 
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
   render() {
     // don't show when welcome is there
     return this.state.welcome !== 'false' ? (
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index 0c1f830b..67758b02 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -119,25 +119,6 @@ export default function PhotoInformation({ info, url, api }) {
     );
   }
 
-  /*const downloadEnabled =
-    localStorage.getItem('downloadbtn') === 'true' && !info.offline && !info.photographerURL && api;
-  const downloadBackground = () => {
-    if (downloadEnabled) {
-      downloadImage(info);
-    }
-  };
-
-  const showBackgroundInformation = () => {
-    const element = document.querySelector('.infoCard');
-    if (element) {
-      if (element.style.display === 'none' || element.style.display === '') {
-        element.style.display = 'block';
-      } else {
-        element.style.display = 'none';
-      }
-    }
-  };*/
-
   let showingPhotoMap = false;
   const photoMap = () => {
     if (
diff --git a/src/components/widgets/message/Message.jsx b/src/components/widgets/message/Message.jsx
index fbc61f13..66f438d4 100644
--- a/src/components/widgets/message/Message.jsx
+++ b/src/components/widgets/message/Message.jsx
@@ -28,20 +28,23 @@ export default class Message extends PureComponent {
     });
 
     const messages = JSON.parse(localStorage.getItem('messages')) || [];
+    if (messages.length === 0) {
+      return (this.message.current.style.display = 'none');
+    }
 
     this.message.current.style.fontSize = `${
       1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
     }em`;
     
-    if (messages.length === 0) {
-      return (this.message.current.style.display = 'none');
-    }
-
     this.setState({
       messageText: messages[Math.floor(Math.random() * messages.length)],
     });
   }
 
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
   render() {
     return (
       <h2 className="message" ref={this.message}>
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index b8902adc..69bf8752 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -15,11 +15,11 @@ export default class Navbar extends PureComponent {
   constructor() {
     super();
     this.navbarContainer = createRef();
-    this.refreshEnabled = localStorage.getItem('refresh');
-    this.refreshValue = localStorage.getItem('refreshOption');
     this.state = {
       classList: localStorage.getItem('widgetStyle') === 'legacy' ? 'navbar old' : 'navbar new',
       refreshText: '',
+      refreshEnabled: localStorage.getItem('refresh'),
+      refreshOption: localStorage.getItem('refreshOption') || ''
     };
   }
 
@@ -29,46 +29,57 @@ export default class Navbar extends PureComponent {
     });
   }
 
+  updateRefreshText() {
+    let refreshText;
+    switch (localStorage.getItem('refreshOption')) {
+      case 'background':
+        refreshText = variables.getMessage('modals.main.settings.sections.background.title');
+        break;
+      case 'quote':
+        refreshText = variables.getMessage('modals.main.settings.sections.quote.title');
+        break;
+      case 'quotebackground':
+        refreshText =
+          variables.getMessage('modals.main.settings.sections.quote.title') +
+          ' ' +
+          variables.getMessage('modals.main.settings.sections.background.title');
+        break;
+      default:
+        refreshText = variables.getMessage(
+          'modals.main.settings.sections.appearance.navbar.refresh_options.page',
+        );
+        break;
+    }
+
+    this.setState({
+      refreshText,
+    });
+  }
+
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'navbar' || data === 'background') {
-        this.refreshEnabled = localStorage.getItem('refresh');
-        this.refreshValue = localStorage.getItem('refreshOption');
-        this.forceUpdate();
+        this.setState({
+          refreshEnabled: localStorage.getItem('refresh'),
+          refreshOption: localStorage.getItem('refreshOption')
+        });
         try {
+          this.updateRefreshText();
           this.setZoom();
         } catch (e) {}
       }
     });
 
-    if (localStorage.getItem('refreshOption') === 'background') {
-      this.setState({
-        refreshText: variables.getMessage('modals.main.settings.sections.background.title'),
-      });
-    } else if (localStorage.getItem('refreshOption') === 'quote') {
-      this.setState({
-        refreshText: variables.getMessage('modals.main.settings.sections.quote.title'),
-      });
-    } else if (localStorage.getItem('refreshOption') === 'quotebackground') {
-      this.setState({
-        refreshText:
-          variables.getMessage('modals.main.settings.sections.quote.title') +
-          ' ' +
-          variables.getMessage('modals.main.settings.sections.background.title'),
-      });
-    } else {
-      this.setState({
-        refreshText: variables.getMessage(
-          'modals.main.settings.sections.appearance.navbar.refresh_options.page',
-        ),
-      });
-    }
-
+    this.updateRefreshText();
     this.setZoom();
   }
 
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
   refresh() {
-    switch (this.refreshValue) {
+    switch (this.state.refreshOption) {
       case 'background':
         return EventBus.dispatch('refresh', 'backgroundrefresh');
       case 'quote':
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 545b7c38..8a267fcd 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -26,7 +26,7 @@ class Notes extends PureComponent {
 
   componentDidMount() {
     EventBus.on('refresh', (data) => {
-      if (data === 'navbar' || data === 'background') {
+      if (data === 'navbar') {
         this.forceUpdate();
         try {
           this.setZoom();
@@ -37,6 +37,10 @@ class Notes extends PureComponent {
     this.setZoom();
   }
 
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
   setNotes = (e) => {
     localStorage.setItem('notes', e.target.value);
     this.setState({
@@ -140,7 +144,7 @@ class Notes extends PureComponent {
   }
 }
 
-export default function NotesWrapper(props) {
+export default function NotesWrapper() {
   const { x, y, reference, floating, strategy } = useFloating({
     placement: 'bottom',
     middleware: [shift()],
diff --git a/src/components/widgets/navbar/Todo.jsx b/src/components/widgets/navbar/Todo.jsx
index 501b54cc..8245787b 100644
--- a/src/components/widgets/navbar/Todo.jsx
+++ b/src/components/widgets/navbar/Todo.jsx
@@ -36,12 +36,12 @@ class Todo extends PureComponent {
   setZoom() {
     this.setState({
       zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
-    })
+    });
   }
 
   componentDidMount() {
     EventBus.on('refresh', (data) => {
-      if (data === 'navbar' || data === 'background') {
+      if (data === 'navbar') {
         this.forceUpdate();
         try {
           this.setZoom();
@@ -52,6 +52,10 @@ class Todo extends PureComponent {
     this.setZoom();
   }
 
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
   arrayMove(array, oldIndex, newIndex) {
     const result = Array.from(array);
     const [removed] = result.splice(oldIndex, 1);
@@ -79,56 +83,50 @@ class Todo extends PureComponent {
   }
 
   updateTodo(action, index, data) {
-    let todoContent = this.state.todo;
+    let todo = this.state.todo;
     switch (action) {
       case 'add':
-        todoContent.push({
+        todo.push({
           value: '',
           done: false,
         });
         break;
       case 'remove':
-        todoContent.splice(index, 1);
-        if (todoContent.length === 0) {
-          todoContent.push({
+        todo.splice(index, 1);
+        if (todo.length === 0) {
+          todo.push({
             value: '',
             done: false,
           });
         }
         break;
       case 'set':
-        todoContent[index] = {
+        todo[index] = {
           value: data.target.value,
-          done: todoContent[index].done,
+          done: todo[index].done,
         };
         break;
       case 'done':
-        todoContent[index].done = !todoContent[index].done;
+        todo[index].done = !todo[index].done;
         break;
       default:
         break;
     }
 
-    localStorage.setItem('todoContent', JSON.stringify(todoContent));
+    localStorage.setItem('todo', JSON.stringify(todo));
     this.setState({
-      todo: todoContent,
+      todo,
     });
     this.forceUpdate();
   }
 
   pin() {
     variables.stats.postEvent('feature', 'Todo pin');
-    if (localStorage.getItem('todoPinned') === 'true') {
-      localStorage.setItem('todoPinned', false);
-      this.setState({
-        showTodo: false,
-      });
-    } else {
-      localStorage.setItem('todoPinned', true);
-      this.setState({
-        showTodo: true,
-      });
-    }
+    const todoPinned = (localStorage.getItem('todoPinned') === 'true');
+    localStorage.setItem('todoPinned', !todoPinned);
+    this.setState({
+      showTodo: !todoPinned,
+    });
   }
 
   render() {
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 7a05ea12..c6f8864d 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -1,10 +1,5 @@
-import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { TextareaAutosize } from '@mui/material';
-import { MdAddToPhotos } from 'react-icons/md';
-
 import Tooltip from 'components/helpers/tooltip/Tooltip';
-
 import EventBus from 'modules/helpers/eventbus';
 
 import './quicklinks.scss';
@@ -14,98 +9,21 @@ export default class QuickLinks extends PureComponent {
     super();
     this.state = {
       items: JSON.parse(localStorage.getItem('quicklinks')),
-      name: '',
-      url: '',
-      showAddLink: 'none',
-      nameError: '',
-      urlError: '',
     };
     this.quicklinksContainer = createRef();
   }
 
-  deleteLink(key, event) {
-    event.preventDefault();
-
-    // remove link from array
-    const data = JSON.parse(localStorage.getItem('quicklinks')).filter((i) => i.key !== key);
-
-    localStorage.setItem('quicklinks', JSON.stringify(data));
-    this.setState({
-      items: data,
-    });
-
-    variables.stats.postEvent('feature', 'Quicklink delete');
-  }
-
-  addLink = () => {
-    const data = JSON.parse(localStorage.getItem('quicklinks'));
-    let url = this.state.url;
-    let urlError;
-
-    // regex: https://ihateregex.io/expr/url/
-    // eslint-disable-next-line no-useless-escape
-    if (
-      url.length <= 0 ||
-      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_.~#?&=]*)/.test(
-        url,
-      ) === false
-    ) {
-      urlError = variables.getMessage('widgets.quicklinks.url_error');
-    }
-
-    if (urlError) {
-      return this.setState({
-        urlError,
-      });
-    }
-
-    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-      url = 'http://' + url;
-    }
-
-    data.push({
-      name: this.state.name || url,
-      url,
-      icon: this.state.icon || '',
-      key: Math.random().toString(36).substring(7) + 1,
-    });
-
-    localStorage.setItem('quicklinks', JSON.stringify(data));
-
-    this.setState({
-      items: data,
-      name: '',
-      url: '',
-    });
-
-    variables.stats.postEvent('feature', 'Quicklink add');
-
-    this.toggleAdd();
-
-    // make sure image is correct size
-    this.setZoom(this.quicklinksContainer.current);
-  };
-
-  toggleAdd = () => {
-    this.setState({
-      showAddLink: this.state.showAddLink === 'none' ? 'flex' : 'none',
-    });
-  };
-
   // widget zoom
   setZoom(element) {
     const zoom = localStorage.getItem('zoomQuicklinks') || 100;
+    for (const link of element.getElementsByTagName('span')) {
+      link.style.fontSize = `${14 * Number(zoom / 100)}px`;
+    }
+
     if (localStorage.getItem('quickLinksStyle') !== 'text') {
-      for (const link of element.getElementsByTagName('span')) {
-        link.style.fontSize = `${14 * Number(zoom / 100)}px`;
-      }
       for (const img of element.getElementsByTagName('img')) {
         img.style.height = `${30 * Number(zoom / 100)}px`;
       }
-    } else {
-      for (const link of element.getElementsByTagName('span')) {
-        link.style.fontSize = `${14 * Number(zoom / 100)}px`;
-      }
     }
   }
 
@@ -128,16 +46,6 @@ export default class QuickLinks extends PureComponent {
     this.setZoom(this.quicklinksContainer.current);
   }
 
-  // allows you to add a link by pressing enter
-  topbarEnter = (e) => {
-    e = e || window.event;
-    const code = e.which || e.keyCode;
-    if (code === 13 && this.state.showAddLink === 'visible') {
-      this.addLink();
-      e.preventDefault();
-    }
-  };
-
   componentWillUnmount() {
     EventBus.off('refresh');
   }
@@ -199,7 +107,7 @@ export default class QuickLinks extends PureComponent {
       );
 
       return tooltipEnabled === 'true' ? (
-        <Tooltip title={item.name} placement="bottom">
+        <Tooltip title={item.name} placement="bottom" key={item.key}>
           {link}
         </Tooltip>
       ) : (
@@ -208,44 +116,9 @@ export default class QuickLinks extends PureComponent {
     };
 
     return (
-      <>
-        <div className="quicklinkscontainer" ref={this.quicklinksContainer}>
-          {this.state.items.map((item) => quickLink(item))}
-        </div>
-        <div className="quicklinkscontainer">
-          <div
-            className="quicklinksdropdown"
-            onKeyDown={this.topbarEnter}
-            style={{ display: this.state.showAddLink }}
-          >
-            <span className="dropdown-title">{variables.getMessage('widgets.quicklinks.new')}</span>
-            <TextareaAutosize
-              maxRows={1}
-              placeholder={variables.getMessage('widgets.quicklinks.name')}
-              value={this.state.name}
-              onChange={(e) => this.setState({ name: e.target.value })}
-            />
-            <span className="dropdown-error" />
-            <TextareaAutosize
-              maxRows={10}
-              placeholder={variables.getMessage('widgets.quicklinks.url')}
-              value={this.state.url}
-              onChange={(e) => this.setState({ url: e.target.value })}
-            />
-            <span className="dropdown-error">{this.state.urlError}</span>
-            <TextareaAutosize
-              maxRows={10}
-              placeholder={variables.getMessage('widgets.quicklinks.icon')}
-              value={this.state.icon}
-              onChange={(e) => this.setState({ icon: e.target.value })}
-            />
-            <span className="dropdown-error" />
-            <button onClick={this.addLink}>
-              <MdAddToPhotos /> {variables.getMessage('widgets.quicklinks.add')}
-            </button>
-          </div>
-        </div>
-      </>
+      <div className="quicklinkscontainer" ref={this.quicklinksContainer}>
+        {this.state.items.map((item) => quickLink(item))}
+      </div>
     );
   }
 }
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 5d5c791b..827e631c 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -359,6 +359,7 @@ export default class Quote extends PureComponent {
       }
     }
     });
+
     EventBus.on('refresh', (data) => {
       if (data === 'quote') {
         if (localStorage.getItem('quote') === 'false') {
diff --git a/src/components/widgets/weather/Expanded.jsx b/src/components/widgets/weather/Expanded.jsx
new file mode 100644
index 00000000..ba564e64
--- /dev/null
+++ b/src/components/widgets/weather/Expanded.jsx
@@ -0,0 +1,109 @@
+import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
+import { MdDisabledVisible } from 'react-icons/md';
+
+import WeatherIcon from './WeatherIcon';
+import WindDirectionIcon from './WindDirectionIcon';
+
+import Tooltip from '../../helpers/tooltip/Tooltip';
+
+export default function Expanded({ state, weatherType, variables }) {
+  const enabled = (setting) => {
+    return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
+  };
+
+  return (
+    <div className="expanded-info">
+      {weatherType >= 3 && (
+        <span className="subtitle">
+          {variables.getMessage('widgets.weather.extra_information')}
+        </span>
+      )}
+      {enabled('cloudiness') ? (
+        <Tooltip
+          title={variables.getMessage(
+            'modals.main.settings.sections.weather.extra_info.cloudiness',
+          )}
+          placement="left"
+        >
+          <span>
+            <WiCloud className="weatherIcon" />
+            {state.weather.cloudiness}%
+          </span>
+        </Tooltip>
+      ) : null}
+      {enabled('windspeed') ? (
+        <Tooltip
+          title={variables.getMessage(
+            'modals.main.settings.sections.weather.extra_info.wind_speed',
+          )}
+          placement="left"
+        >
+          <span>
+            <WiWindy className="weatherIcon" />
+            {state.weather.wind_speed}
+            <span className="minmax"> m/s</span>{' '}
+            {enabled('windDirection') ? (
+              <WindDirectionIcon
+                className="weatherIcon"
+                degrees={state.weather.wind_degrees}
+              />
+            ) : null}
+          </span>
+        </Tooltip>
+      ) : null}
+      {enabled('atmosphericpressure') ? (
+        <Tooltip
+          title={variables.getMessage(
+            'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
+          )}
+          placement="left"
+        >
+          <span>
+            <WiBarometer className="weatherIcon" />
+            {state.weather.pressure}
+            <span className="minmax"> hPa</span>
+          </span>
+        </Tooltip>
+      ) : null}
+      {enabled('weatherdescription') ? (
+        <Tooltip
+          title={variables.getMessage(
+            'modals.main.settings.sections.weather.extra_info.show_description',
+          )}
+          placement="left"
+        >
+          <span>
+            <WeatherIcon className="weatherIcon" name={state.icon} />
+            {state.weather.description}
+          </span>
+        </Tooltip>
+      ) : null}
+      {enabled('visibility') ? (
+        <Tooltip
+          title={variables.getMessage(
+            'modals.main.settings.sections.weather.extra_info.visibility',
+          )}
+          placement="left"
+        >
+          <span>
+            <MdDisabledVisible className="materialWeatherIcon" />
+            {variables.getMessage('widgets.weather.meters', {
+              amount: state.weather.visibility,
+            })}
+          </span>
+        </Tooltip>
+      ) : null}
+      {enabled('humidity') ? (
+        <Tooltip
+          title={variables.getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
+          placement="left"
+        >
+          <span>
+            <WiHumidity className="materialWeatherIcon" />
+            {state.weather.humidity}
+          </span>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index 1a8f7853..add0b9bd 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -1,12 +1,9 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
-import { MdDisabledVisible } from 'react-icons/md';
 
 import WeatherIcon from './WeatherIcon';
-import WindDirectionIcon from './WindDirectionIcon';
+import Expanded from './Expanded';
 
-import Tooltip from '../../helpers/tooltip/Tooltip';
 import EventBus from 'modules/helpers/eventbus';
 
 import './weather.scss';
@@ -16,21 +13,7 @@ export default class Weather extends PureComponent {
     super();
     this.state = {
       location: localStorage.getItem('location') || 'London',
-      icon: '',
-      temp_text: '',
-      weather: {
-        temp: '',
-        description: '',
-        temp_min: '',
-        temp_max: '',
-        temp_feels_like: '',
-        humidity: '',
-        wind_speed: '',
-        wind_degrees: '',
-        cloudiness: '',
-        visibility: '',
-        pressure: '',
-      },
+      done: false,
     };
   }
 
@@ -38,40 +21,17 @@ export default class Weather extends PureComponent {
     const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
     document.querySelector('.weather').style.fontSize = zoomWeather;
 
-    let data = {
-      weather: [
-        {
-          description: this.state.weather.description,
-          icon: this.state.icon,
-        },
-      ],
-      main: {
-        temp: this.state.weather.original_temp,
-        temp_min: this.state.weather.original_temp_min,
-        temp_max: this.state.weather.original_temp_max,
-        temp_feels_like: this.state.weather.original_temp_feels_like,
-        humidity: this.state.weather.humidity,
-        pressure: this.state.weather.pressure,
-      },
-      visibility: this.state.weather.visibility,
-      wind: {
-        speed: this.state.weather.wind_speed,
-        deg: this.state.weather.wind_degrees,
-      },
-      clouds: {
-        all: this.state.weather.cloudiness,
-      },
-    };
-
-    if (!this.state.weather.temp) {
-      data = await (
-        await fetch(
-          variables.constants.PROXY_URL +
-            `/weather/current?city=${this.state.location}&lang=${variables.languagecode}`,
-        )
-      ).json();
+    if (this.state.done === true) {
+      return;
     }
 
+    const data = await (
+      await fetch(
+        variables.constants.PROXY_URL +
+          `/weather/current?city=${this.state.location}&lang=${variables.languagecode}`,
+      )
+    ).json();
+
     if (data.cod === '404') {
       return this.setState({
         location: variables.getMessage('widgets.weather.not_found'),
@@ -84,24 +44,18 @@ export default class Weather extends PureComponent {
     let temp_feels_like = data.main.temp_feels_like;
     let temp_text = 'K';
 
-    switch (localStorage.getItem('tempformat')) {
-      case 'celsius':
-        temp -= 273.15;
-        temp_min -= 273.15;
-        temp_max -= 273.15;
-        temp_feels_like -= 273.15;
-        temp_text = '°C';
-        break;
-      case 'fahrenheit':
-        temp = (temp - 273.15) * 1.8 + 32;
-        temp_min = (temp_min - 273.15) * 1.8 + 32;
-        temp_max = (temp_max - 273.15) * 1.8 + 32;
-        temp_feels_like = (temp_feels_like - 273.15) * 1.8 + 32;
-        temp_text = '°F';
-        break;
-      // kelvin
-      default:
-        break;
+    if (localStorage.getItem('tempformat') === 'celsius') {
+      temp -= 273.15;
+      temp_min -= 273.15;
+      temp_max -= 273.15;
+      temp_feels_like -= 273.15;
+      temp_text = '°C';
+    } else {
+      temp = (temp - 273.15) * 1.8 + 32;
+      temp_min = (temp_min - 273.15) * 1.8 + 32;
+      temp_max = (temp_max - 273.15) * 1.8 + 32;
+      temp_feels_like = (temp_feels_like - 273.15) * 1.8 + 32;
+      temp_text = '°F';
     }
 
     this.setState({
@@ -118,12 +72,9 @@ export default class Weather extends PureComponent {
         wind_degrees: data.wind.deg,
         cloudiness: data.clouds.all,
         visibility: data.visibility,
-        pressure: data.main.pressure,
-        original_temp: data.main.temp,
-        original_temp_min: data.main.temp_min,
-        original_temp_max: data.main.temp_max,
-        original_temp_feels_like: data.main.temp_feels_like,
+        pressure: data.main.pressure
       },
+      done: true
     });
 
     document.querySelector('.weather svg').style.fontSize = zoomWeather;
@@ -144,10 +95,11 @@ export default class Weather extends PureComponent {
   }
 
   render() {
+    if (this.state.done === false) {
+      return <div className="weather"></div>;
+    }
+
     const weatherType = localStorage.getItem('weatherType') || 1;
-    const enabled = (setting) => {
-      return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
-    };
 
     if (this.state.location === variables.getMessage('weather.not_found')) {
       return (
@@ -156,107 +108,7 @@ export default class Weather extends PureComponent {
         </div>
       );
     }
-
-    const expandedInfo = () => {
-      return (
-        <div className="expanded-info">
-          {weatherType >= 3 && (
-            <span className="subtitle">
-              {variables.getMessage('widgets.weather.extra_information')}
-            </span>
-          )}
-          {enabled('cloudiness') ? (
-            <Tooltip
-              title={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.cloudiness',
-              )}
-              placement="left"
-            >
-              <span>
-                <WiCloud className="weatherIcon" />
-                {this.state.weather.cloudiness}%
-              </span>
-            </Tooltip>
-          ) : null}
-          {enabled('windspeed') ? (
-            <Tooltip
-              title={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.wind_speed',
-              )}
-              placement="left"
-            >
-              <span>
-                <WiWindy className="weatherIcon" />
-                {this.state.weather.wind_speed}
-                <span className="minmax"> m/s</span>{' '}
-                {enabled('windDirection') ? (
-                  <WindDirectionIcon
-                    className="weatherIcon"
-                    degrees={this.state.weather.wind_degrees}
-                  />
-                ) : null}
-              </span>
-            </Tooltip>
-          ) : null}
-          {enabled('atmosphericpressure') ? (
-            <Tooltip
-              title={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
-              )}
-              placement="left"
-            >
-              <span>
-                <WiBarometer className="weatherIcon" />
-                {this.state.weather.pressure}
-                <span className="minmax"> hPa</span>
-              </span>
-            </Tooltip>
-          ) : null}
-          {enabled('weatherdescription') ? (
-            <Tooltip
-              title={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.show_description',
-              )}
-              placement="left"
-            >
-              <span>
-                <WeatherIcon className="weatherIcon" name={this.state.icon} />
-                {this.state.weather.description}
-              </span>
-            </Tooltip>
-          ) : null}
-          {enabled('visibility') ? (
-            <Tooltip
-              title={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.visibility',
-              )}
-              placement="left"
-            >
-              <span>
-                <MdDisabledVisible className="materialWeatherIcon" />
-                {variables.getMessage('widgets.weather.meters', {
-                  amount: this.state.weather.visibility,
-                })}
-              </span>
-            </Tooltip>
-          ) : null}
-          {enabled('humidity') ? (
-            <Tooltip
-              title={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.humidity',
-              )}
-              placement="left"
-            >
-              <span>
-                <WiHumidity className="materialWeatherIcon" />
-                {this.state.weather.humidity}
-              </span>
-            </Tooltip>
-          ) : null}
-        </div>
-      );
-    };
-
+  
     return (
       <div className="weather">
         <div className="top-weather">
@@ -283,7 +135,7 @@ export default class Weather extends PureComponent {
             <span className="loc">{this.state.location}</span>
           </div>
         )}
-        {weatherType >= 3 ? expandedInfo() : null}
+        {weatherType >= 3 ? <Expanded weatherType={weatherType} state={this.state} variables={variables}/> : null}
       </div>
     );
   }