diff --git a/src/features/navbar/Navbar.jsx b/src/features/navbar/Navbar.jsx
index 7ce46198..50f5a492 100644
--- a/src/features/navbar/Navbar.jsx
+++ b/src/features/navbar/Navbar.jsx
@@ -1,11 +1,14 @@
 import variables from 'config/variables';
 import { PureComponent, createRef } from 'react';
 
-import { MdRefresh, MdSettings } from 'react-icons/md';
+import { MdSettings } from 'react-icons/md';
+
+// import Notes from './buttons/Notes';
+// import Todo from './buttons/Todo';
+// import Apps from './buttons/Apps';
+
+import { Notes, Todo, Apps, Refresh } from './components';
 
-import Notes from './Notes';
-import Todo from './Todo';
-import Apps from './Apps';
 import Maximise from '../background/Maximise';
 import { Tooltip } from 'components/Elements';
 import EventBus from 'utils/eventbus';
@@ -113,20 +116,7 @@ class Navbar extends PureComponent {
             <Apps fontSize={this.state.zoomFontSize} />
           )}
 
-          {this.refreshEnabled !== 'false' && (
-            <Tooltip
-              title={variables.getMessage('widgets.navbar.tooltips.refresh')}
-              subtitle={this.state.refreshText}
-            >
-              <button
-                onClick={() => this.refresh()}
-                style={{ fontSize: this.state.zoomFontSize }}
-                aria-label={variables.getMessage('widgets.navbar.tooltips.refresh')}
-              >
-                <MdRefresh className="refreshicon topicons" />
-              </button>
-            </Tooltip>
-          )}
+          {this.refreshEnabled !== 'false' && <Refresh fontSize={this.state.zoomFontSize} />}
 
           <Tooltip
             title={variables.getMessage('modals.main.navbar.settings', {
diff --git a/src/features/navbar/Apps.jsx b/src/features/navbar/components/Apps.jsx
similarity index 97%
rename from src/features/navbar/Apps.jsx
rename to src/features/navbar/components/Apps.jsx
index a61fc7f2..17966283 100644
--- a/src/features/navbar/Apps.jsx
+++ b/src/features/navbar/components/Apps.jsx
@@ -151,4 +151,5 @@ function AppsWrapper() {
   );
 }
 
-export default memo(AppsWrapper);
+const MemoizedAppsWrapper = memo(AppsWrapper);
+export { MemoizedAppsWrapper as default, MemoizedAppsWrapper as Apps };
diff --git a/src/features/navbar/Notes.jsx b/src/features/navbar/components/Notes.jsx
similarity index 97%
rename from src/features/navbar/Notes.jsx
rename to src/features/navbar/components/Notes.jsx
index de609ca3..d71f6665 100644
--- a/src/features/navbar/Notes.jsx
+++ b/src/features/navbar/components/Notes.jsx
@@ -170,4 +170,5 @@ function NotesWrapper() {
   );
 }
 
-export default memo(NotesWrapper);
+const MemoizedNotesWrapper = memo(NotesWrapper);
+export { MemoizedNotesWrapper as default, MemoizedNotesWrapper as Notes };
diff --git a/src/features/navbar/components/Refresh.jsx b/src/features/navbar/components/Refresh.jsx
new file mode 100644
index 00000000..3fcf1b91
--- /dev/null
+++ b/src/features/navbar/components/Refresh.jsx
@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import variables from 'config/variables';
+import { MdRefresh } from 'react-icons/md';
+import { Tooltip } from 'components/Elements';
+import EventBus from 'utils/eventbus';
+
+function Refresh() {
+  const [refreshText, setRefreshText] = useState('');
+  const [refreshOption, setRefreshOption] = useState(localStorage.getItem('refreshOption') || '');
+
+  useEffect(() => {
+    EventBus.on('refresh', (data) => {
+      if (data === 'navbar' || data === 'background') {
+        setRefreshOption(localStorage.getItem('refreshOption'));
+        updateRefreshText();
+      }
+    });
+
+    updateRefreshText();
+  }, []);
+
+  function updateRefreshText() {
+    let text;
+    switch (localStorage.getItem('refreshOption')) {
+      case 'background':
+        text = variables.getMessage('modals.main.settings.sections.background.title');
+        break;
+      case 'quote':
+        text = variables.getMessage('modals.main.settings.sections.quote.title');
+        break;
+      case 'quotebackground':
+        text =
+          variables.getMessage('modals.main.settings.sections.quote.title') +
+          ' ' +
+          variables.getMessage('modals.main.settings.sections.background.title');
+        break;
+      default:
+        text = variables.getMessage(
+          'modals.main.settings.sections.appearance.navbar.refresh_options.page',
+        );
+        break;
+    }
+
+    setRefreshText(text);
+  }
+
+  function refresh() {
+    switch (refreshOption) {
+      case 'background':
+        return EventBus.emit('refresh', 'backgroundrefresh');
+      case 'quote':
+        return EventBus.emit('refresh', 'quoterefresh');
+      case 'quotebackground':
+        EventBus.emit('refresh', 'quoterefresh');
+        return EventBus.emit('refresh', 'backgroundrefresh');
+      default:
+        window.location.reload();
+    }
+  }
+
+  return (
+    <Tooltip title={variables.getMessage('widgets.navbar.tooltips.refresh')} subtitle={refreshText}>
+      <button
+        onClick={refresh}
+        aria-label={variables.getMessage('widgets.navbar.tooltips.refresh')}
+      >
+        <MdRefresh className="refreshicon topicons" />
+      </button>
+    </Tooltip>
+  );
+}
+
+export { Refresh as default, Refresh };
diff --git a/src/features/navbar/Todo.jsx b/src/features/navbar/components/Todo.jsx
similarity index 98%
rename from src/features/navbar/Todo.jsx
rename to src/features/navbar/components/Todo.jsx
index 8fc90253..0081a959 100644
--- a/src/features/navbar/Todo.jsx
+++ b/src/features/navbar/components/Todo.jsx
@@ -254,4 +254,5 @@ function TodoWrapper() {
   );
 }
 
-export default memo(TodoWrapper);
+const MemoizedTodoWrapper = memo(TodoWrapper);
+export { MemoizedTodoWrapper as default, MemoizedTodoWrapper as Todo };
diff --git a/src/features/navbar/components/index.jsx b/src/features/navbar/components/index.jsx
new file mode 100644
index 00000000..4292e939
--- /dev/null
+++ b/src/features/navbar/components/index.jsx
@@ -0,0 +1,4 @@
+export * from './Apps';
+export * from './Notes';
+export * from './Todo';
+export * from './Refresh';