diff --git a/manifest/background.js b/manifest/background.js
index a889ce2b..f44ae484 100644
--- a/manifest/background.js
+++ b/manifest/background.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-undef */
-if (typeof browser === "undefined") {
+if (typeof browser === 'undefined') {
   var browser = chrome;
 }
 
diff --git a/src/components/Elements/AddModal/AddModal.jsx b/src/components/Elements/AddModal/AddModal.jsx
index 26b23403..c86ab7c5 100644
--- a/src/components/Elements/AddModal/AddModal.jsx
+++ b/src/components/Elements/AddModal/AddModal.jsx
@@ -77,4 +77,4 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
 }
 
 const MemoizedAddModal = memo(AddModal);
-export { MemoizedAddModal as default, MemoizedAddModal as AddModal}
\ No newline at end of file
+export { MemoizedAddModal as default, MemoizedAddModal as AddModal };
diff --git a/src/components/Elements/AddModal/index.jsx b/src/components/Elements/AddModal/index.jsx
index 9d77026e..1a5ba255 100644
--- a/src/components/Elements/AddModal/index.jsx
+++ b/src/components/Elements/AddModal/index.jsx
@@ -1 +1 @@
-export * from './AddModal';
\ No newline at end of file
+export * from './AddModal';
diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss
index b5b9e6b9..f4ab83e5 100644
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@@ -259,11 +259,13 @@ h5 {
     flex-flow: row;
     align-items: center;
     gap: 25px;
+
     svg {
-      @include themed() {
+      @include themed {
         background-image: t($slightGradient);
         box-shadow: t($boxShadow);
       }
+
       padding: 15px;
       border-radius: 100%;
     }
diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
index 433f40dc..cdf06d34 100644
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
@@ -4,6 +4,7 @@
 
 .btn-settings {
   @include modal-button(standard);
+
   display: inline;
   margin-top: 0;
   float: none !important;
@@ -12,6 +13,7 @@
 
 .btn-navigation {
   @include modal-button(standard);
+
   padding: 0 15px;
 
   @include themed {
@@ -58,15 +60,11 @@
 }
 
 .btn-collection {
-  display: flex;
-  align-items: center;
-  gap: 15px;
   padding: 1px 12px;
   backdrop-filter: blur(16px) saturate(180%);
   background-color: rgb(255 255 255 / 10%);
   border: 1px solid rgb(209 213 219 / 30%);
   color: #fff;
-
   border-radius: 12px;
   height: 40px;
   font-size: 1rem;
@@ -85,21 +83,21 @@
   }
 
   &:active {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebarActive);
       box-shadow: 0 0 0 1px t($color);
     }
   }
 
   &:focus {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebarActive);
       box-shadow: 0 0 0 1px t($color);
     }
   }
 
   &:disabled {
-    @include themed() {
+    @include themed {
       background: t($modal-sidebarActive);
       cursor: not-allowed;
     }
diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
index 8568b385..301e3c84 100644
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
@@ -22,6 +22,7 @@ p.description {
   .item {
     flex: 1 0 40% !important;
   }
+
   .infoItem {
     display: flex;
     flex-flow: row;
@@ -30,10 +31,11 @@ p.description {
     flex: 1 0 44%;
 
     svg {
-      @include themed() {
+      @include themed {
         background-image: t($slightGradient);
       }
-      -webkit-background-clip: text;
+
+      background-clip: text;
       -webkit-text-fill-color: transparent;
       font-size: 20px;
       border-radius: 100%;
@@ -47,6 +49,7 @@ p.description {
 
   .header {
     text-transform: uppercase;
+
     @include themed {
       color: t($subColor);
     }
@@ -66,7 +69,6 @@ p.description {
   }
 }
 
-
 .showMoreItems {
   display: flex;
   flex-flow: column;
@@ -79,4 +81,4 @@ p.description {
   display: flex;
   flex-flow: column;
   gap: 15px;
-}
\ No newline at end of file
+}
diff --git a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
index 61a730a2..d60baa72 100644
--- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
+++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
@@ -5,7 +5,7 @@
 
   /* button {
     @include modal-button(standard);
-  }*/
+  } */
 
   @include themed {
     padding: 1rem 3rem 3rem;
@@ -148,6 +148,7 @@ table {
   gap: 25px;
   padding: 25px;
   justify-content: space-between;
+
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
@@ -162,10 +163,11 @@ table {
   }
 
   .icon {
-    @include themed() {
+    @include themed {
       background-image: t($slightGradient);
       box-shadow: t($boxShadow);
     }
+
     padding: 15px;
     border-radius: 100%;
     font-size: 25px;
diff --git a/src/components/Elements/MainModal/scss/settings/_main.scss b/src/components/Elements/MainModal/scss/settings/_main.scss
index e56dc9cb..d8c8e34a 100644
--- a/src/components/Elements/MainModal/scss/settings/_main.scss
+++ b/src/components/Elements/MainModal/scss/settings/_main.scss
@@ -51,7 +51,6 @@ input {
   /* date picker */
   &[type='date'] {
     width: 260px;
-    display: flex;
     flex-flow: column;
 
     @include themed {
diff --git a/src/components/Elements/ShareModal/sharemodal.scss b/src/components/Elements/ShareModal/sharemodal.scss
index 0ff88b7b..084a383d 100644
--- a/src/components/Elements/ShareModal/sharemodal.scss
+++ b/src/components/Elements/ShareModal/sharemodal.scss
@@ -86,7 +86,6 @@
     border: none;
     outline: none;
   }
-
 }
 
 .shareHeader {
@@ -94,12 +93,14 @@
   flex-flow: row;
   justify-content: space-between;
   align-items: center;
+
   .close {
     padding: 15px;
     place-items: center;
     display: grid;
     cursor: pointer;
     transition: 0.3s;
+
     @include themed {
       border-radius: t($borderRadius);
     }
diff --git a/src/features/background/api/gradient/setRgba.js b/src/features/background/api/gradient/setRgba.js
index 38f1899b..386783e4 100644
--- a/src/features/background/api/gradient/setRgba.js
+++ b/src/features/background/api/gradient/setRgba.js
@@ -5,7 +5,7 @@
  */
 export function isValidRGBValue(value) {
   return typeof value === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255;
-};
+}
 
 /**
  * "If the red, green, and blue values are valid, return an object with the red, green, and blue
diff --git a/src/features/background/components/PhotoInformation.jsx b/src/features/background/components/PhotoInformation.jsx
index f9e2bc83..e49d6075 100644
--- a/src/features/background/components/PhotoInformation.jsx
+++ b/src/features/background/components/PhotoInformation.jsx
@@ -63,7 +63,9 @@ function PhotoInformation({ info, url, api }) {
   const [other, setOther] = useState(false);
   const [shareModal, openShareModal] = useState(false);
   const [excludeModal, openExcludeModal] = useState(false);
-  const [favouriteTooltipText, setFavouriteTooltipText] = useState(variables.getMessage('widgets.quote.favourite'));
+  const [favouriteTooltipText, setFavouriteTooltipText] = useState(
+    variables.getMessage('widgets.quote.favourite'),
+  );
 
   if (info.hidden === true || !info.credit) {
     return null;
@@ -207,11 +209,7 @@ function PhotoInformation({ info, url, api }) {
             <Share onClick={() => openShareModal(true)} />
           </Tooltip>
         )}
-        <Tooltip
-          title={favouriteTooltipText}
-          key="favourite"
-          placement="top"
-        >
+        <Tooltip title={favouriteTooltipText} key="favourite" placement="top">
           <Favourite
             pun={info.pun}
             offline={info.offline}
diff --git a/src/features/background/options/Colour.jsx b/src/features/background/options/Colour.jsx
index 86a46510..6cc58406 100644
--- a/src/features/background/options/Colour.jsx
+++ b/src/features/background/options/Colour.jsx
@@ -210,7 +210,14 @@ export default class ColourSettings extends PureComponent {
           <div className="colourInput">{gradientInputs}</div>
           {!gradientHasMoreThanOneColour && (
             <>
-              <Button type="settings" onClick={this.addColour} icon={<MdAdd />} label={variables.getMessage('modals.main.settings.sections.background.source.add_colour')} />
+              <Button
+                type="settings"
+                onClick={this.addColour}
+                icon={<MdAdd />}
+                label={variables.getMessage(
+                  'modals.main.settings.sections.background.source.add_colour',
+                )}
+              />
             </>
           )}
         </>
diff --git a/src/features/background/options/Custom.jsx b/src/features/background/options/Custom.jsx
index 9b743513..7788f27e 100644
--- a/src/features/background/options/Custom.jsx
+++ b/src/features/background/options/Custom.jsx
@@ -197,8 +197,22 @@ export default class CustomSettings extends PureComponent {
               </div>
             </div>
             <div className="topbarbuttons">
-              <Button type="settings" onClick={() => this.uploadCustomBackground()} icon={<MdOutlineFileUpload />} label={variables.getMessage('modals.main.settings.sections.background.source.upload')} />
-              <Button type="settings" onClick={() => this.setState({ customURLModal: true })} icon={<MdAddLink />} label={variables.getMessage('modals.main.settings.sections.background.source.add_url')} />
+              <Button
+                type="settings"
+                onClick={() => this.uploadCustomBackground()}
+                icon={<MdOutlineFileUpload />}
+                label={variables.getMessage(
+                  'modals.main.settings.sections.background.source.upload',
+                )}
+              />
+              <Button
+                type="settings"
+                onClick={() => this.setState({ customURLModal: true })}
+                icon={<MdAddLink />}
+                label={variables.getMessage(
+                  'modals.main.settings.sections.background.source.add_url',
+                )}
+              />
             </div>
           </div>
           <div className="dropzone-content">
@@ -217,7 +231,11 @@ export default class CustomSettings extends PureComponent {
                           'modals.main.settings.sections.background.source.remove',
                         )}
                       >
-                        <Button type="settings" onClick={() => this.modifyCustomBackground('remove', index)} icon={<MdCancel />} />
+                        <Button
+                          type="settings"
+                          onClick={() => this.modifyCustomBackground('remove', index)}
+                          icon={<MdCancel />}
+                        />
                       </Tooltip>
                     )}
                   </div>
@@ -240,7 +258,14 @@ export default class CustomSettings extends PureComponent {
                       },
                     )}
                   </span>
-                  <Button type="settings" onClick={() => this.uploadCustomBackground()} icon={<MdFolder />} label={variables.getMessage('modals.main.settings.sections.background.source.select')} />
+                  <Button
+                    type="settings"
+                    onClick={() => this.uploadCustomBackground()}
+                    icon={<MdFolder />}
+                    label={variables.getMessage(
+                      'modals.main.settings.sections.background.source.select',
+                    )}
+                  />
                 </div>
               </div>
             )}
diff --git a/src/features/greeting/index.jsx b/src/features/greeting/index.jsx
index 5a75ab25..b565f605 100644
--- a/src/features/greeting/index.jsx
+++ b/src/features/greeting/index.jsx
@@ -1,2 +1,2 @@
 export * from './options';
-export * from './Greeting';
\ No newline at end of file
+export * from './Greeting';
diff --git a/src/features/greeting/options/index.jsx b/src/features/greeting/options/index.jsx
index 48a5be47..bf05b9ca 100644
--- a/src/features/greeting/options/index.jsx
+++ b/src/features/greeting/options/index.jsx
@@ -1 +1 @@
-export * from './GreetingOptions';
\ No newline at end of file
+export * from './GreetingOptions';
diff --git a/src/features/marketplace/components/Collection/Collection.jsx b/src/features/marketplace/components/Collection/Collection.jsx
index ffc2fe03..3399e1c1 100644
--- a/src/features/marketplace/components/Collection/Collection.jsx
+++ b/src/features/marketplace/components/Collection/Collection.jsx
@@ -3,51 +3,51 @@ import { Button } from 'components/Elements';
 import variables from 'config/variables';
 
 const Collection = ({ collection, toggle, collectionFunction }) => {
-    const { news, background_colour, img, display_name, description, name } = collection;
+  const { news, background_colour, img, display_name, description, name } = collection;
 
-    const getStyle = () => {
-        if (news) {
-            return { backgroundColor: background_colour };
-        }
-        return {
-            backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${variables.constants.DDG_IMAGE_PROXY + img}')`,
-        };
+  const getStyle = () => {
+    if (news) {
+      return { backgroundColor: background_colour };
+    }
+    return {
+      backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${variables.constants.DDG_IMAGE_PROXY + img}')`,
     };
+  };
 
-    return (
-        <div className="collection" style={getStyle()}>
-            <div className="content">
-                <span className="title">{display_name} using component</span>
-                <span className="subtitle">{description}</span>
-            </div>
-            {collection.news === true ? (
-              <a
-                className="btn-collection"
-                href={collection.news_link}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
-              </a>
-            ) : (
-              <Button
-                type="collection"
-                onClick={() => collectionFunction(collection.name)}
-                icon={<MdOutlineArrowForward />}
-                label={variables.getMessage('modals.main.marketplace.explore_collection')}
-                iconPlacement={'right'}
-              />
-            )}
-            {/*<Button
+  return (
+    <div className="collection" style={getStyle()}>
+      <div className="content">
+        <span className="title">{display_name} using component</span>
+        <span className="subtitle">{description}</span>
+      </div>
+      {collection.news === true ? (
+        <a
+          className="btn-collection"
+          href={collection.news_link}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
+        </a>
+      ) : (
+        <Button
+          type="collection"
+          onClick={() => collectionFunction(collection.name)}
+          icon={<MdOutlineArrowForward />}
+          label={variables.getMessage('modals.main.marketplace.explore_collection')}
+          iconPlacement={'right'}
+        />
+      )}
+      {/*<Button
                 type="collection"
                 onClick={() => toggle('collection', name)}
                 icon={<MdOutlineArrowForward />}
                 label={variables.getMessage('modals.main.marketplace.explore_collection')}
                 iconPlacement="right"
             />*/}
-        </div>
-    );
+    </div>
+  );
 };
 
 export default Collection;
-export { Collection };
\ No newline at end of file
+export { Collection };
diff --git a/src/features/marketplace/components/Collection/index.jsx b/src/features/marketplace/components/Collection/index.jsx
index b9d8ea40..11e99ee3 100644
--- a/src/features/marketplace/components/Collection/index.jsx
+++ b/src/features/marketplace/components/Collection/index.jsx
@@ -1 +1 @@
-export * from './Collection';
\ No newline at end of file
+export * from './Collection';
diff --git a/src/features/marketplace/components/Elements/Carousel/carousel.scss b/src/features/marketplace/components/Elements/Carousel/carousel.scss
index 98b55939..a001a451 100644
--- a/src/features/marketplace/components/Elements/Carousel/carousel.scss
+++ b/src/features/marketplace/components/Elements/Carousel/carousel.scss
@@ -22,7 +22,7 @@
 .carousel_container {
   display: flex;
   -webkit-touch-callout: none;
-  -webkit-user-select: none;
+  user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   margin-left: -10px;
diff --git a/src/features/marketplace/components/Elements/Carousel/index.jsx b/src/features/marketplace/components/Elements/Carousel/index.jsx
index 7837b1c9..c0ab1996 100644
--- a/src/features/marketplace/components/Elements/Carousel/index.jsx
+++ b/src/features/marketplace/components/Elements/Carousel/index.jsx
@@ -1 +1 @@
-export * from './Carousel';
\ No newline at end of file
+export * from './Carousel';
diff --git a/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx b/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx
index 59afca97..7d122df2 100644
--- a/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx
+++ b/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx
@@ -16,4 +16,4 @@ function Lightbox({ modalClose, img }) {
 
 const MemoizedLightbox = memo(Lightbox);
 export default MemoizedLightbox;
-export { MemoizedLightbox as Lightbox };
\ No newline at end of file
+export { MemoizedLightbox as Lightbox };
diff --git a/src/features/marketplace/components/Elements/Lightbox/index.jsx b/src/features/marketplace/components/Elements/Lightbox/index.jsx
index be6f8581..3d1465be 100644
--- a/src/features/marketplace/components/Elements/Lightbox/index.jsx
+++ b/src/features/marketplace/components/Elements/Lightbox/index.jsx
@@ -1 +1 @@
-export * from './Lightbox';
\ No newline at end of file
+export * from './Lightbox';
diff --git a/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx b/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
index 182a14c5..ceb290ab 100644
--- a/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
+++ b/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
@@ -25,4 +25,4 @@ function SideloadFailedModal({ modalClose, reason }) {
 const MemoizedSideloadFailedModal = memo(SideloadFailedModal);
 
 export default MemoizedSideloadFailedModal;
-export { MemoizedSideloadFailedModal as SideloadFailedModal };
\ No newline at end of file
+export { MemoizedSideloadFailedModal as SideloadFailedModal };
diff --git a/src/features/marketplace/components/Elements/SideloadFailedModal/index.jsx b/src/features/marketplace/components/Elements/SideloadFailedModal/index.jsx
index 7b7ea247..c659c178 100644
--- a/src/features/marketplace/components/Elements/SideloadFailedModal/index.jsx
+++ b/src/features/marketplace/components/Elements/SideloadFailedModal/index.jsx
@@ -1 +1 @@
-export * from './SideloadFailedModal';
\ No newline at end of file
+export * from './SideloadFailedModal';
diff --git a/src/features/marketplace/components/Elements/index.jsx b/src/features/marketplace/components/Elements/index.jsx
index 63a1a581..d1c2dfe2 100644
--- a/src/features/marketplace/components/Elements/index.jsx
+++ b/src/features/marketplace/components/Elements/index.jsx
@@ -1,3 +1,3 @@
 export * from './Carousel';
 export * from './SideloadFailedModal';
-export * from './Lightbox';
\ No newline at end of file
+export * from './Lightbox';
diff --git a/src/features/marketplace/components/Items/Item.jsx b/src/features/marketplace/components/Items/Item.jsx
index 78771873..feff209b 100644
--- a/src/features/marketplace/components/Items/Item.jsx
+++ b/src/features/marketplace/components/Items/Item.jsx
@@ -209,7 +209,10 @@ class Item extends PureComponent {
               <span className="title">
                 {variables.getMessage('modals.main.marketplace.product.description')}
               </span>
-              <span className="subtitle" dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
+              <span
+                className="subtitle"
+                dangerouslySetInnerHTML={{ __html: this.props.data.description }}
+              />
             </div>
             <div className="moreInfo">
               {moreInfoItem(
diff --git a/src/features/marketplace/components/index.jsx b/src/features/marketplace/components/index.jsx
index 1f5d55b4..7de844ba 100644
--- a/src/features/marketplace/components/index.jsx
+++ b/src/features/marketplace/components/index.jsx
@@ -1,2 +1,2 @@
 export * from './Elements';
-export * from './Items';
\ No newline at end of file
+export * from './Items';
diff --git a/src/features/marketplace/views/Added.jsx b/src/features/marketplace/views/Added.jsx
index f528ccf7..2d5cc056 100644
--- a/src/features/marketplace/views/Added.jsx
+++ b/src/features/marketplace/views/Added.jsx
@@ -25,7 +25,11 @@ export default class Added extends PureComponent {
     };
     this.buttons = {
       uninstall: (
-        <Button type="settings" onClick={() => this.uninstall()} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+        <Button
+          type="settings"
+          onClick={() => this.uninstall()}
+          label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+        />
       ),
     };
   }
diff --git a/src/features/marketplace/views/Create.jsx b/src/features/marketplace/views/Create.jsx
index b45d869b..57c8b389 100644
--- a/src/features/marketplace/views/Create.jsx
+++ b/src/features/marketplace/views/Create.jsx
@@ -28,7 +28,10 @@ export default class Create extends PureComponent {
               {variables.getMessage('modals.main.addons.create.moved_description')}
             </span>
             <div className="createButtons">
-              <Button type="settings" label={variables.getMessage('modals.main.addons.create.moved_button')} />
+              <Button
+                type="settings"
+                label={variables.getMessage('modals.main.addons.create.moved_button')}
+              />
             </div>
           </div>
         </div>
diff --git a/src/features/message/index.jsx b/src/features/message/index.jsx
index bd85bdff..f4f40dc6 100644
--- a/src/features/message/index.jsx
+++ b/src/features/message/index.jsx
@@ -1,2 +1,2 @@
 export * from './Message';
-export * from './options';
\ No newline at end of file
+export * from './options';
diff --git a/src/features/message/options/MessageOptions.jsx b/src/features/message/options/MessageOptions.jsx
index 48502c09..cec36b8d 100644
--- a/src/features/message/options/MessageOptions.jsx
+++ b/src/features/message/options/MessageOptions.jsx
@@ -105,7 +105,12 @@ class MessageOptions extends PureComponent {
                 </div>
                 <div>
                   <div className="messageAction">
-                    <Button type="settings" onClick={() => this.modifyMessage('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+                    <Button
+                      type="settings"
+                      onClick={() => this.modifyMessage('remove', index)}
+                      icon={<MdCancel />}
+                      label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+                    />
                   </div>
                 </div>
               </div>
@@ -136,4 +141,4 @@ class MessageOptions extends PureComponent {
   }
 }
 
-export { MessageOptions as default, MessageOptions };
\ No newline at end of file
+export { MessageOptions as default, MessageOptions };
diff --git a/src/features/message/options/index.jsx b/src/features/message/options/index.jsx
index 5c290397..f88a9e8c 100644
--- a/src/features/message/options/index.jsx
+++ b/src/features/message/options/index.jsx
@@ -1 +1 @@
-export * from './MessageOptions';
\ No newline at end of file
+export * from './MessageOptions';
diff --git a/src/features/misc/sections/Changelog.jsx b/src/features/misc/sections/Changelog.jsx
index 260b694e..01a039c6 100644
--- a/src/features/misc/sections/Changelog.jsx
+++ b/src/features/misc/sections/Changelog.jsx
@@ -28,7 +28,7 @@ class Changelog extends PureComponent {
     );
 
     return text;
-  }
+  };
 
   async getUpdate() {
     const releases = await fetch(
diff --git a/src/features/misc/sections/Stats.jsx b/src/features/misc/sections/Stats.jsx
index b241f4ef..56b34cdd 100644
--- a/src/features/misc/sections/Stats.jsx
+++ b/src/features/misc/sections/Stats.jsx
@@ -14,7 +14,7 @@ import { getLocalisedAchievementData, achievements, checkAchievements } from 'ut
 
 class Stats extends PureComponent {
   constructor() {
-  super();
+    super();
     this.state = {
       stats: JSON.parse(localStorage.getItem('statsData')) || {},
       achievements,
diff --git a/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx b/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx
index 021be119..9ed368d1 100644
--- a/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx
+++ b/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx
@@ -52,12 +52,22 @@ const QuickLink = ({ item, deleteLink, startEditLink }) => {
       </div>
       <div>
         <div className="messageAction">
-          <Button type="settings" onClick={() => startEditLink(item)} icon={<MdEdit />} label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')} />
-          <Button type="settings" onClick={(e) => deleteLink(item.key, e)} icon={ <MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+          <Button
+            type="settings"
+            onClick={() => startEditLink(item)}
+            icon={<MdEdit />}
+            label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+          />
+          <Button
+            type="settings"
+            onClick={(e) => deleteLink(item.key, e)}
+            icon={<MdCancel />}
+            label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+          />
         </div>
       </div>
     </div>
   );
 };
 
-export default QuickLink;
\ No newline at end of file
+export default QuickLink;
diff --git a/src/features/navbar/components/Maximise.jsx b/src/features/navbar/components/Maximise.jsx
index 5238f577..222d0d7e 100644
--- a/src/features/navbar/components/Maximise.jsx
+++ b/src/features/navbar/components/Maximise.jsx
@@ -75,7 +75,7 @@ class Maximise extends PureComponent {
         title={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
       >
         <button
-        className="navbarButton"
+          className="navbarButton"
           style={{ fontSize: this.props.fontSize }}
           onClick={this.maximise}
           aria-label={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
diff --git a/src/features/quicklinks/QuickLinks.jsx b/src/features/quicklinks/QuickLinks.jsx
index da988abe..4588df8c 100644
--- a/src/features/quicklinks/QuickLinks.jsx
+++ b/src/features/quicklinks/QuickLinks.jsx
@@ -120,4 +120,4 @@ class QuickLinks extends PureComponent {
   }
 }
 
-export { QuickLinks as default, QuickLinks };
\ No newline at end of file
+export { QuickLinks as default, QuickLinks };
diff --git a/src/features/quicklinks/index.jsx b/src/features/quicklinks/index.jsx
index 2f7b4883..ad73ba50 100644
--- a/src/features/quicklinks/index.jsx
+++ b/src/features/quicklinks/index.jsx
@@ -1,2 +1,2 @@
 export * from './options';
-export * from './QuickLinks';
\ No newline at end of file
+export * from './QuickLinks';
diff --git a/src/features/quicklinks/options/QuickLink.jsx b/src/features/quicklinks/options/QuickLink.jsx
index 53d1b804..21334557 100644
--- a/src/features/quicklinks/options/QuickLink.jsx
+++ b/src/features/quicklinks/options/QuickLink.jsx
@@ -52,8 +52,18 @@ const QuickLink = ({ item, deleteLink, startEditLink }) => {
       </div>
       <div>
         <div className="messageAction">
-        <Button type="settings" onClick={() => startEditLink(item)} icon={<MdEdit />} label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')} />
-          <Button type="settings" onClick={(e) => deleteLink(item.key, e)} icon={ <MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+          <Button
+            type="settings"
+            onClick={() => startEditLink(item)}
+            icon={<MdEdit />}
+            label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+          />
+          <Button
+            type="settings"
+            onClick={(e) => deleteLink(item.key, e)}
+            icon={<MdCancel />}
+            label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+          />
         </div>
       </div>
     </div>
diff --git a/src/features/quicklinks/options/index.jsx b/src/features/quicklinks/options/index.jsx
index 3a1a800a..d15a42fc 100644
--- a/src/features/quicklinks/options/index.jsx
+++ b/src/features/quicklinks/options/index.jsx
@@ -1 +1 @@
-export * from './QuickLinksOptions';
\ No newline at end of file
+export * from './QuickLinksOptions';
diff --git a/src/features/quote/options/QuoteOptions.jsx b/src/features/quote/options/QuoteOptions.jsx
index dffd8716..eebe8b02 100644
--- a/src/features/quote/options/QuoteOptions.jsx
+++ b/src/features/quote/options/QuoteOptions.jsx
@@ -169,7 +169,12 @@ class QuoteOptions extends PureComponent {
               subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
             />
             <Action>
-              <Button type="settings" onClick={() => this.modifyCustomQuote('add')} icon={<MdAdd />} label={variables.getMessage(`${QUOTE_SECTION}.add`)} />
+              <Button
+                type="settings"
+                onClick={() => this.modifyCustomQuote('add')}
+                icon={<MdAdd />}
+                label={variables.getMessage(`${QUOTE_SECTION}.add`)}
+              />
             </Action>
           </Row>
 
@@ -202,7 +207,14 @@ class QuoteOptions extends PureComponent {
                   </div>
                   <div>
                     <div className="messageAction">
-                      <Button type="settings" onClick={() => this.modifyCustomQuote('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+                      <Button
+                        type="settings"
+                        onClick={() => this.modifyCustomQuote('remove', index)}
+                        icon={<MdCancel />}
+                        label={variables.getMessage(
+                          'modals.main.marketplace.product.buttons.remove',
+                        )}
+                      />
                     </div>
                   </div>
                 </div>
@@ -216,7 +228,12 @@ class QuoteOptions extends PureComponent {
                 <span className="subtitle">
                   {variables.getMessage('modals.main.settings.sections.message.add_some')}
                 </span>
-                <Button type="settings" onClick={() => this.modifyCustomQuote('add')} icon={<MdAdd />} label={variables.getMessage(`${QUOTE_SECTION}.add`)} />
+                <Button
+                  type="settings"
+                  onClick={() => this.modifyCustomQuote('add')}
+                  icon={<MdAdd />}
+                  label={variables.getMessage(`${QUOTE_SECTION}.add`)}
+                />
               </div>
             </div>
           )}
diff --git a/src/features/search/index.jsx b/src/features/search/index.jsx
index ca5d4651..f90d96d1 100644
--- a/src/features/search/index.jsx
+++ b/src/features/search/index.jsx
@@ -1,2 +1,2 @@
 export * from './options';
-export * from './Search';
\ No newline at end of file
+export * from './Search';
diff --git a/src/features/search/options/index.jsx b/src/features/search/options/index.jsx
index 5abc490f..f435cf18 100644
--- a/src/features/search/options/index.jsx
+++ b/src/features/search/options/index.jsx
@@ -1 +1 @@
-export * from './SearchOptions';
\ No newline at end of file
+export * from './SearchOptions';
diff --git a/src/features/weather/index.jsx b/src/features/weather/index.jsx
index cf6f77a5..f89eaea8 100644
--- a/src/features/weather/index.jsx
+++ b/src/features/weather/index.jsx
@@ -1,2 +1,2 @@
 export * from './options';
-export * from './Weather';
\ No newline at end of file
+export * from './Weather';
diff --git a/src/features/weather/options/WeatherOptions.jsx b/src/features/weather/options/WeatherOptions.jsx
index b4d13829..e85041e5 100644
--- a/src/features/weather/options/WeatherOptions.jsx
+++ b/src/features/weather/options/WeatherOptions.jsx
@@ -221,4 +221,4 @@ class WeatherOptions extends PureComponent {
   }
 }
 
-export { WeatherOptions as default, WeatherOptions };
\ No newline at end of file
+export { WeatherOptions as default, WeatherOptions };
diff --git a/src/features/weather/options/index.jsx b/src/features/weather/options/index.jsx
index 75c185e1..d1419f8d 100644
--- a/src/features/weather/options/index.jsx
+++ b/src/features/weather/options/index.jsx
@@ -1 +1 @@
-export * from './WeatherOptions';
\ No newline at end of file
+export * from './WeatherOptions';
diff --git a/src/features/weather/weather.scss b/src/features/weather/weather.scss
index a6f5a303..24ff4144 100644
--- a/src/features/weather/weather.scss
+++ b/src/features/weather/weather.scss
@@ -76,18 +76,21 @@
   flex-flow: row;
   width: 100%;
   justify-content: space-between;
+
   svg {
     font-size: 2em !important;
   }
+
   span {
     font-size: 34px;
   }
 }
 
 .weatherExpandedInfo {
-  padding: 0 25px 25px 25px;
+  padding: 0 25px 25px;
   text-align: left;
-  @include themed() {
+
+  @include themed {
     border-top: 1px solid t($btn-backgroundHover);
   }
 }
diff --git a/src/features/welcome/components/Elements/ProgressBar/ProgressBar.jsx b/src/features/welcome/components/Elements/ProgressBar/ProgressBar.jsx
index acd12b64..b7cb1720 100644
--- a/src/features/welcome/components/Elements/ProgressBar/ProgressBar.jsx
+++ b/src/features/welcome/components/Elements/ProgressBar/ProgressBar.jsx
@@ -28,4 +28,4 @@ function ProgressBar({ numberOfTabs, currentTab, switchTab }) {
 const MemoizedProgressBar = memo(ProgressBar);
 
 export default MemoizedProgressBar;
-export { MemoizedProgressBar as ProgressBar };
\ No newline at end of file
+export { MemoizedProgressBar as ProgressBar };
diff --git a/src/features/welcome/components/Elements/ProgressBar/index.jsx b/src/features/welcome/components/Elements/ProgressBar/index.jsx
index 979a48fd..51a1fa96 100644
--- a/src/features/welcome/components/Elements/ProgressBar/index.jsx
+++ b/src/features/welcome/components/Elements/ProgressBar/index.jsx
@@ -1 +1 @@
-export * from './ProgressBar';
\ No newline at end of file
+export * from './ProgressBar';
diff --git a/src/features/welcome/components/Layout/Content.jsx b/src/features/welcome/components/Layout/Content.jsx
index 3e8d0410..30ef08dd 100644
--- a/src/features/welcome/components/Layout/Content.jsx
+++ b/src/features/welcome/components/Layout/Content.jsx
@@ -1,7 +1,5 @@
 const Content = ({ children }) => {
-    return (
-        <div className="content">{children}</div>
-    )
-}
+  return <div className="content">{children}</div>;
+};
 
-export { Content as default, Content };
\ No newline at end of file
+export { Content as default, Content };
diff --git a/src/features/welcome/components/Layout/Header.jsx b/src/features/welcome/components/Layout/Header.jsx
index 46ba683e..119078a2 100644
--- a/src/features/welcome/components/Layout/Header.jsx
+++ b/src/features/welcome/components/Layout/Header.jsx
@@ -2,9 +2,7 @@ function Header({ title, subtitle }) {
   return (
     <>
       <span className="mainTitle">{title}</span>
-      <span className="subtitle">
-        {subtitle}
-      </span>
+      <span className="subtitle">{subtitle}</span>
     </>
   );
 }
diff --git a/src/features/welcome/components/Layout/Layout.jsx b/src/features/welcome/components/Layout/Layout.jsx
index 1785b539..31c1d96b 100644
--- a/src/features/welcome/components/Layout/Layout.jsx
+++ b/src/features/welcome/components/Layout/Layout.jsx
@@ -1,7 +1,5 @@
 function Layout() {
-    return (
-        <h1>Cheese</h1>
-    )
+  return <h1>Cheese</h1>;
 }
 
-export { Layout as default, Layout };
\ No newline at end of file
+export { Layout as default, Layout };
diff --git a/src/features/welcome/components/Layout/Panel.jsx b/src/features/welcome/components/Layout/Panel.jsx
index 6f67ab9f..c0edfccc 100644
--- a/src/features/welcome/components/Layout/Panel.jsx
+++ b/src/features/welcome/components/Layout/Panel.jsx
@@ -1,7 +1,3 @@
-const Panel = ({ children, type }) => (
-  <section className={type}>
-    {children}
-  </section>
-);
+const Panel = ({ children, type }) => <section className={type}>{children}</section>;
 
 export { Panel as default, Panel };
diff --git a/src/features/welcome/components/Layout/Wrapper.jsx b/src/features/welcome/components/Layout/Wrapper.jsx
index cb786559..1e648d89 100644
--- a/src/features/welcome/components/Layout/Wrapper.jsx
+++ b/src/features/welcome/components/Layout/Wrapper.jsx
@@ -1,5 +1,3 @@
-const Wrapper =  ({ children }) => (
-    <div className="welcomeContent">{children}</div>
-)
+const Wrapper = ({ children }) => <div className="welcomeContent">{children}</div>;
 
-export { Wrapper as default, Wrapper };
\ No newline at end of file
+export { Wrapper as default, Wrapper };
diff --git a/src/features/welcome/components/Layout/index.jsx b/src/features/welcome/components/Layout/index.jsx
index 9f455392..d9850df4 100644
--- a/src/features/welcome/components/Layout/index.jsx
+++ b/src/features/welcome/components/Layout/index.jsx
@@ -1,4 +1,4 @@
 export * from './Wrapper';
 export * from './Panel';
 export * from './Header';
-export * from './Content';
\ No newline at end of file
+export * from './Content';
diff --git a/src/features/welcome/components/Sections/index.jsx b/src/features/welcome/components/Sections/index.jsx
index 2884bb5d..35a8c6dc 100644
--- a/src/features/welcome/components/Sections/index.jsx
+++ b/src/features/welcome/components/Sections/index.jsx
@@ -4,4 +4,4 @@ export * from './ImportSettings';
 export * from './ThemeSelection';
 export * from './StyleSelection';
 export * from './PrivacyOptions';
-export * from './Final';
\ No newline at end of file
+export * from './Final';
diff --git a/src/features/welcome/components/index.jsx b/src/features/welcome/components/index.jsx
index 9ec85a93..dabdb6b4 100644
--- a/src/features/welcome/components/index.jsx
+++ b/src/features/welcome/components/index.jsx
@@ -1,2 +1,2 @@
 export * from './Layout';
-export * from './Elements';
\ No newline at end of file
+export * from './Elements';
diff --git a/src/features/welcome/welcome.scss b/src/features/welcome/welcome.scss
index 7bb0f4f7..c7bd5a0a 100644
--- a/src/features/welcome/welcome.scss
+++ b/src/features/welcome/welcome.scss
@@ -1,4 +1,4 @@
-@import '../../scss/index.scss';
+@import '../../scss/index';
 @import 'scss/variables';
 
 .welcomemodal {
@@ -92,13 +92,16 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto auto;
+
   div:nth-child(1) {
     grid-column: span 1 / span 1 !important;
   }
+
   div:nth-child(2),
   div:nth-child(3) {
     grid-column: span 1 / span 1 !important;
   }
+
   @include themed {
     .active {
       background: t($modal-sidebarActive);
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 7bb7020b..9bace7cc 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -68,7 +68,7 @@ $themes: (
     'modal-sidebarActive': rgb(219 219 219 / 72%),
     'modal-secondaryColour': #fafafa,
     'link': #5352ed,
-    'slightGradient': linear-gradient(#ffffff, #dddddd),
+    'slightGradient': linear-gradient(#fff, #ddd),
   ),
   dark: (
     'weather': #e7e7e7,
diff --git a/src/scss/index.scss b/src/scss/index.scss
index bbe9de53..24c90a27 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -133,7 +133,7 @@ body {
   a {
     border: 0;
     border-radius: 12px;
-    padding: 10px 30px 10px 30px;
+    padding: 10px 30px;
     font-size: 1rem;
     display: flex;
     align-items: center;
@@ -150,7 +150,7 @@ body {
 @media (prefers-color-scheme: dark) {
   /** {
     background-color: #000000 !important;
-  }*/
+  } */
 
   .criticalError {
     .criticalError-message {
@@ -158,7 +158,7 @@ body {
     }
 
     p {
-      color: rgba(255, 255, 255, 0.7529411765);
+      color: rgb(255 255 255 / 75.3%);
     }
 
     a {
@@ -175,7 +175,7 @@ body {
 
 @media (prefers-color-scheme: light) {
   * {
-    background-color: #ffffff !important;
+    background-color: #fff !important;
   }
 
   .criticalError {
@@ -184,7 +184,7 @@ body {
     }
 
     p {
-      color: rgba(0, 0, 0, 0.7529411765);
+      color: rgb(0 0 0 / 75.3%);
     }
 
     a {
diff --git a/src/utils/links/index.js b/src/utils/links/index.js
index ce99246d..281f13cc 100644
--- a/src/utils/links/index.js
+++ b/src/utils/links/index.js
@@ -1,4 +1,4 @@
-import { getTitleFromUrl } from "./getTitleFromUrl";
-import { isValidUrl } from "./isValidUrl";
+import { getTitleFromUrl } from './getTitleFromUrl';
+import { isValidUrl } from './isValidUrl';
 
-export { getTitleFromUrl, isValidUrl };
\ No newline at end of file
+export { getTitleFromUrl, isValidUrl };
diff --git a/src/utils/settings/load.js b/src/utils/settings/load.js
index 3374ef13..ccc6fbbf 100644
--- a/src/utils/settings/load.js
+++ b/src/utils/settings/load.js
@@ -1,5 +1,5 @@
-import variables from "config/variables";
-import ExperimentalInit from "utils/experimental";
+import variables from 'config/variables';
+import ExperimentalInit from 'utils/experimental';
 
 /**
  * It loads the settings from localStorage and applies them to the page.
diff --git a/src/utils/settings/move.js b/src/utils/settings/move.js
index 17bcf947..28eae8b7 100644
--- a/src/utils/settings/move.js
+++ b/src/utils/settings/move.js
@@ -1,4 +1,4 @@
-import { setDefaultSettings } from "./default";
+import { setDefaultSettings } from './default';
 
 /**
  * Saves all of the current settings, resets them, sets the defaults and then overrides