diff --git a/src/components/helpers/sharemodal/sharemodal.scss b/src/components/helpers/sharemodal/sharemodal.scss
index 7ae10b41..a2afb884 100644
--- a/src/components/helpers/sharemodal/sharemodal.scss
+++ b/src/components/helpers/sharemodal/sharemodal.scss
@@ -1,4 +1,4 @@
-@import '../../../scss/variables';
+@import 'scss/variables';
 
 .smallModal {
   @extend %tabText;
diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx
index 151e8ea6..9a6b0b12 100644
--- a/src/components/modals/main/Main.jsx
+++ b/src/components/modals/main/Main.jsx
@@ -7,7 +7,7 @@ import { MdClose } from 'react-icons/md';
 import Tabs from './tabs/backend/Tabs';
 
 import './scss/index.scss';
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 // Lazy load all the tabs instead of the modal itself
 const Settings = lazy(() => import('./tabs/Settings'));
diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx
index 1c4a1f01..c1727f8c 100644
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
-import Tooltip from '../../../helpers/tooltip/Tooltip';
-import ImageCarousel from '../../../helpers/carousel/Carousel';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
+import ImageCarousel from 'components/helpers/carousel/Carousel';
 import { toast } from 'react-toastify';
 import {
   MdIosShare,
@@ -20,7 +20,7 @@ import Modal from 'react-modal';
 
 import { install, uninstall } from 'modules/helpers/marketplace';
 
-import ShareModal from '../../../helpers/sharemodal/ShareModal';
+import ShareModal from 'components/helpers/sharemodal/ShareModal';
 
 export default class Item extends PureComponent {
   constructor(props) {
diff --git a/src/components/modals/main/marketplace/SideloadFailedModal.jsx b/src/components/modals/main/marketplace/SideloadFailedModal.jsx
index 04007a43..567c6325 100644
--- a/src/components/modals/main/marketplace/SideloadFailedModal.jsx
+++ b/src/components/modals/main/marketplace/SideloadFailedModal.jsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import variables from 'modules/variables';
 import { MdClose } from 'react-icons/md';
-import Tooltip from '../../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 function SideloadFailedModal({ modalClose, reason }) {
   return (
diff --git a/src/components/modals/main/scss/modules/_scrollbars.scss b/src/components/modals/main/scss/modules/_scrollbars.scss
index d7895f45..500e876e 100644
--- a/src/components/modals/main/scss/modules/_scrollbars.scss
+++ b/src/components/modals/main/scss/modules/_scrollbars.scss
@@ -1,4 +1,4 @@
-@import '../.../../../../../././../scss/variables';
+@import 'scss/variables';
 
 ::-webkit-scrollbar {
   width: 6px;
diff --git a/src/components/modals/main/scss/modules/_sidebar.scss b/src/components/modals/main/scss/modules/_sidebar.scss
index a251eacc..32beb5fe 100644
--- a/src/components/modals/main/scss/modules/_sidebar.scss
+++ b/src/components/modals/main/scss/modules/_sidebar.scss
@@ -1,4 +1,4 @@
-@import '../.../../../../../././../scss/variables';
+@import 'scss/variables';
 
 .sidebar {
   @include themed {
diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss
index 8b1f9e5d..338e4a45 100644
--- a/src/components/modals/main/scss/modules/_tab-content.scss
+++ b/src/components/modals/main/scss/modules/_tab-content.scss
@@ -1,4 +1,4 @@
-@import '../../../../../scss/variables';
+@import 'scss/variables';
 
 .tab-content {
   button {
diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index a93ee1ba..1a6179dc 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -249,6 +249,8 @@ h4 {
   }
 }
 
-.customcss {
-  color: orange !important;
+.customcss textarea {
+  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter',
+    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco,
+    'Courier New', Courier, monospace !important;
 }
diff --git a/src/components/modals/main/scss/settings/modules/_material-ui.scss b/src/components/modals/main/scss/settings/modules/_material-ui.scss
index 250f4277..e397b902 100644
--- a/src/components/modals/main/scss/settings/modules/_material-ui.scss
+++ b/src/components/modals/main/scss/settings/modules/_material-ui.scss
@@ -1,6 +1,6 @@
 /* these are overrides for the material ui default styles */
 
-@import '../../../../../../scss/variables';
+@import 'scss/variables';
 
 .MuiCheckbox-colorPrimary.Mui-checked,
 .MuiSwitch-colorPrimary.Mui-checked,
diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
index 82343cb5..c6f71437 100644
--- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss
+++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../scss/variables';
+@import 'scss/variables';
 
 .sortableItem {
   @include themed {
@@ -111,9 +111,6 @@
     box-shadow: t($boxShadow);
   }
 
-  .previewContainer {
-  }
-
   .previewItem {
     display: flex;
     flex-flow: column;
@@ -153,6 +150,7 @@
   .content {
     margin: 20px 20px 0;
   }
+
   @include themed {
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);
diff --git a/src/components/modals/main/settings/ChipSelect.jsx b/src/components/modals/main/settings/ChipSelect.jsx
index 5f25df48..ecb6f7ce 100644
--- a/src/components/modals/main/settings/ChipSelect.jsx
+++ b/src/components/modals/main/settings/ChipSelect.jsx
@@ -9,7 +9,9 @@ import Chip from '@mui/material/Chip';
 
 function ChipSelect({ label, options, name }) {
   let start = (localStorage.getItem('apiCategories') || '').split(',');
-  if (start[0] === '') start = [];
+  if (start[0] === '') {
+    start = [];
+  }
 
   const [optionsSelected, setoptionsSelected] = useState(start);
 
diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx
index 6ccfa4d6..c522373b 100644
--- a/src/components/modals/main/settings/Header.jsx
+++ b/src/components/modals/main/settings/Header.jsx
@@ -8,7 +8,7 @@ import Switch from './Switch';
 import SettingsItem from './SettingsItem';
 
 import { values } from 'modules/helpers/settings/modals';
-import Tooltip from '../../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 export default class Header extends PureComponent {
   render() {
diff --git a/src/components/modals/main/settings/ResetModal.jsx b/src/components/modals/main/settings/ResetModal.jsx
index 04614dec..bc88c0da 100644
--- a/src/components/modals/main/settings/ResetModal.jsx
+++ b/src/components/modals/main/settings/ResetModal.jsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 import variables from 'modules/variables';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { setDefaultSettings } from 'modules/helpers/settings';
-import Tooltip from '../../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 function ResetModal({ modalClose }) {
   const reset = () => {
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index 7b37c128..34c4cf09 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@@ -54,6 +54,7 @@ export default class Text extends PureComponent {
             value={this.state.value}
             onChange={this.handleChange}
             varient="outlined"
+            className={this.props.customcss ? 'customcss' : ''}
             multiline
             spellCheck={false}
             minRows={4}
diff --git a/src/components/modals/main/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx
index d4706981..f3f6b7c9 100644
--- a/src/components/modals/main/settings/sections/Experimental.jsx
+++ b/src/components/modals/main/settings/sections/Experimental.jsx
@@ -34,7 +34,7 @@ function ExperimentalSettings() {
           marks={values('experimental')}
           element=".other"
         />
-        <p>Send Event</p>
+        <p style={{ textAlign: 'left' }}>Send Event</p>
         <TextField
           label={'Type'}
           value={eventType}
@@ -51,14 +51,14 @@ function ExperimentalSettings() {
           varient="outlined"
           InputLabelProps={{ shrink: true }}
         />
-      </SettingsItem>
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
-        final={true}
-      >
-        <button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>
+                <button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>
           Send
         </button>
+      </SettingsItem>
+      <SettingsItem
+        title='Data'
+        final={true}
+      >
         <button
           className="reset"
           style={{ marginLeft: '0px' }}
diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx
index 2e58da8e..afd72d10 100644
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@@ -78,7 +78,7 @@ export default class Message extends PureComponent {
         </SettingsItem>
         <div className="messagesContainer">
           {this.state.messages.map((_url, index) => (
-            <div className="messageMap">
+            <div className="messageMap" key={index}>
               <div className="flexGrow">
                 <div className="icon">
                   <MdOutlineTextsms />
diff --git a/src/components/modals/main/settings/sections/advanced/Advanced.jsx b/src/components/modals/main/settings/sections/advanced/Advanced.jsx
index 891c3cee..691aa577 100644
--- a/src/components/modals/main/settings/sections/advanced/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/advanced/Advanced.jsx
@@ -130,7 +130,7 @@ export default class AdvancedSettings extends PureComponent {
             'modals.main.settings.sections.advanced.custom_css_subtitle',
           )}
         >
-          <Text name="customcss" textarea={true} category="other" />
+          <Text name="customcss" textarea={true} category="other" customcss={true} />
         </SettingsItem>
         <SettingsItem
           title={variables.getMessage('modals.main.settings.sections.experimental.title')}
diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx
index a6f66419..5601543d 100644
--- a/src/components/modals/main/settings/sections/background/Custom.jsx
+++ b/src/components/modals/main/settings/sections/background/Custom.jsx
@@ -15,7 +15,7 @@ import { videoCheck } from 'modules/helpers/background/widget';
 
 import Checkbox from '../../Checkbox';
 import FileUpload from '../../FileUpload';
-import Tooltip from '../../../../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 import Modal from 'react-modal';
 
diff --git a/src/components/modals/main/settings/sections/background/CustomURLModal.jsx b/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
index 2cda4bae..560b37e9 100644
--- a/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
+++ b/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { useState, memo } from 'react';
 import { MdAdd, MdClose } from 'react-icons/md';
-import Tooltip from '../../../../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 function CustomURLModal({ modalClose, modalCloseOnly }) {
   const [url, setURL] = useState();
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index ec25259d..ce23a989 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -14,9 +14,9 @@ import {
   MdCategory as Category,
   MdVisibilityOff as VisibilityOff,
 } from 'react-icons/md';
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 import Modal from 'react-modal';
-import ShareModal from '../../helpers/sharemodal/ShareModal';
+import ShareModal from 'components/helpers/sharemodal/ShareModal';
 import ExcludeModal from './ExcludeModal';
 
 const toDataURL = async (url) => {
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index d216d868..303dc09c 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -4,7 +4,7 @@ import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/
 import { useFloating, shift } from '@floating-ui/react-dom';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 import { saveFile } from 'modules/helpers/settings/modals';
 import EventBus from 'modules/helpers/eventbus';
 
diff --git a/src/components/widgets/navbar/Todo.jsx b/src/components/widgets/navbar/Todo.jsx
index 10412b15..b12d28b4 100644
--- a/src/components/widgets/navbar/Todo.jsx
+++ b/src/components/widgets/navbar/Todo.jsx
@@ -9,7 +9,7 @@ import {
   MdPlaylistRemove,
 } from 'react-icons/md';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import { shift, useFloating } from '@floating-ui/react-dom';
 import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 0429d1bc..732b88fb 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -11,9 +11,9 @@ import {
 
 import { toast } from 'react-toastify';
 
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 import Modal from 'react-modal';
-import ShareModal from '../../helpers/sharemodal/ShareModal';
+import ShareModal from 'components/helpers/sharemodal/ShareModal';
 
 import offline_quotes from './offline_quotes.json';
 
diff --git a/src/components/widgets/weather/Expanded.jsx b/src/components/widgets/weather/Expanded.jsx
index 109bdea0..4c7b3897 100644
--- a/src/components/widgets/weather/Expanded.jsx
+++ b/src/components/widgets/weather/Expanded.jsx
@@ -6,7 +6,7 @@ import { MdDisabledVisible } from 'react-icons/md';
 import WeatherIcon from './WeatherIcon';
 import WindDirectionIcon from './WindDirectionIcon';
 
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 function Expanded({ state, weatherType, variables }) {
   const enabled = (setting) => {
diff --git a/src/components/widgets/weather/WindDirectionIcon.jsx b/src/components/widgets/weather/WindDirectionIcon.jsx
index 6758f643..b767153f 100644
--- a/src/components/widgets/weather/WindDirectionIcon.jsx
+++ b/src/components/widgets/weather/WindDirectionIcon.jsx
@@ -15,38 +15,43 @@ import {
 function WindDirectionIcon({ degrees }) {
   // convert the number OpenWeatherMap gives us to the closest direction or something
   const directions = [
-    'North',
-    'North-West',
-    'West',
-    'South-West',
-    'South',
-    'South-East',
-    'East',
-    'North-East',
+    {
+      name: 'North',
+      icon: <WiDirectionUp />,
+    },
+    {
+      name: 'North-West',
+      icon: <WiDirectionUpLeft />,
+    },
+    {
+      name: 'West',
+      icon: <WiDirectionLeft />,
+    },
+    {
+      name: 'South-West',
+      icon: <WiDirectionDownLeft />,
+    },
+    {
+      name: 'South',
+      icon: <WiDirectionDown />,
+    },
+    {
+      name: 'South-East',
+      icon: <WiDirectionDownRight />,
+    },
+    {
+      name: 'East',
+      icon: <WiDirectionRight />,
+    },
+    {
+      name: 'North-East',
+      icon: <WiDirectionUpRight />,
+    },
   ];
   const direction =
     directions[Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8];
 
-  switch (direction) {
-    case 'North':
-      return <WiDirectionUp />;
-    case 'North-West':
-      return <WiDirectionUpLeft />;
-    case 'West':
-      return <WiDirectionLeft />;
-    case 'South-West':
-      return <WiDirectionDownLeft />;
-    case 'South':
-      return <WiDirectionDown />;
-    case 'South-East':
-      return <WiDirectionDownRight />;
-    case 'East':
-      return <WiDirectionRight />;
-    case 'North-East':
-      return <WiDirectionUpRight />;
-    default:
-      return null;
-  }
+  return direction ? direction.icon : null;
 }
 
 export default memo(WindDirectionIcon);