diff --git a/packages/ui-services/src/Theme/ThemeManager.ts b/packages/ui-services/src/Theme/ThemeManager.ts
index 32a466ae8..0466a7fc4 100644
--- a/packages/ui-services/src/Theme/ThemeManager.ts
+++ b/packages/ui-services/src/Theme/ThemeManager.ts
@@ -60,7 +60,12 @@ export class ThemeManager extends AbstractService {
       }
       case ApplicationEvent.Launched: {
         if (!this.application.isNativeMobileWeb()) {
-          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.colorSchemeEventHandler)
+          const mq = window.matchMedia('(prefers-color-scheme: dark)')
+          if (mq.addEventListener != undefined) {
+            mq.addEventListener('change', this.colorSchemeEventHandler)
+          } else {
+            mq.addListener(this.colorSchemeEventHandler)
+          }
         }
         break
       }
@@ -131,7 +136,13 @@ export class ThemeManager extends AbstractService {
     ;(this.unregisterDesktop as unknown) = undefined
     ;(this.unregisterStream as unknown) = undefined
 
-    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.colorSchemeEventHandler)
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    if (mq.removeEventListener != undefined) {
+      mq.removeEventListener('change', this.colorSchemeEventHandler)
+    } else {
+      mq.removeListener(this.colorSchemeEventHandler)
+    }
+
     ;(this.application as unknown) = undefined
 
     this.unsubApp()
diff --git a/packages/web/.babelrc.json b/packages/web/.babelrc.json
index d5e8e32f5..7ccf6fb5e 100644
--- a/packages/web/.babelrc.json
+++ b/packages/web/.babelrc.json
@@ -1,4 +1,4 @@
 {
   "presets": ["@babel/preset-typescript", "@babel/preset-env"],
-  "plugins": [["@babel/plugin-transform-react-jsx"]]
+  "plugins": [["@babel/plugin-transform-react-jsx"], "@babel/plugin-proposal-class-properties"]
 }
diff --git a/packages/web/.browserslistrc b/packages/web/.browserslistrc
index b9145d54f..eac7884b6 100644
--- a/packages/web/.browserslistrc
+++ b/packages/web/.browserslistrc
@@ -4,3 +4,5 @@ last 2 Edge versions
 last 2 Safari versions
 last 2 Opera versions
 Firefox ESR
+safari 11
+safari 13
\ No newline at end of file
diff --git a/packages/web/package.json b/packages/web/package.json
index 616f98bda..f284cb3dc 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@babel/core": "*",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@babel/preset-env": "*",
     "@babel/preset-typescript": "^7.18.6",
diff --git a/packages/web/src/javascripts/Controllers/PaneController.ts b/packages/web/src/javascripts/Controllers/PaneController.ts
index 9064e2145..b2842efe6 100644
--- a/packages/web/src/javascripts/Controllers/PaneController.ts
+++ b/packages/web/src/javascripts/Controllers/PaneController.ts
@@ -21,11 +21,21 @@ export class PaneController {
       setIsInMobileView: action,
     })
 
-    window.matchMedia(MediaQueryBreakpoints.md).addEventListener('change', this.mediumScreenMQHandler)
+    const mediaQuery = window.matchMedia(MediaQueryBreakpoints.md)
+    if (mediaQuery?.addEventListener != undefined) {
+      mediaQuery.addEventListener('change', this.mediumScreenMQHandler)
+    } else {
+      mediaQuery.addListener(this.mediumScreenMQHandler)
+    }
   }
 
   deinit() {
-    window.matchMedia(MediaQueryBreakpoints.md).removeEventListener('change', this.mediumScreenMQHandler)
+    const mq = window.matchMedia(MediaQueryBreakpoints.md)
+    if (mq?.removeEventListener != undefined) {
+      mq.removeEventListener('change', this.mediumScreenMQHandler)
+    } else {
+      mq.removeListener(this.mediumScreenMQHandler)
+    }
   }
 
   mediumScreenMQHandler = (event: MediaQueryListEvent) => {
diff --git a/packages/web/src/javascripts/Hooks/useMediaQuery.tsx b/packages/web/src/javascripts/Hooks/useMediaQuery.tsx
index e1a6a5657..1c3088c9d 100644
--- a/packages/web/src/javascripts/Hooks/useMediaQuery.tsx
+++ b/packages/web/src/javascripts/Hooks/useMediaQuery.tsx
@@ -18,9 +18,21 @@ export const useMediaQuery = (mediaQuery: string) => {
       setMatches(event.matches)
     }
 
-    window.matchMedia(mediaQuery).addEventListener('change', handler)
+    const mq = window.matchMedia(mediaQuery)
+    if (mq.addEventListener != undefined) {
+      mq.addEventListener('change', handler)
+    } else {
+      mq.addListener(handler)
+    }
 
-    return () => window.matchMedia(mediaQuery).removeEventListener('change', handler)
+    return () => {
+      const mq = window.matchMedia(mediaQuery)
+      if (mq.removeEventListener != undefined) {
+        mq.removeEventListener('change', handler)
+      } else {
+        mq.removeListener(handler)
+      }
+    }
   }, [mediaQuery])
 
   return matches
diff --git a/packages/web/web.webpack.config.js b/packages/web/web.webpack.config.js
index e559a89ab..0b6b4c673 100644
--- a/packages/web/web.webpack.config.js
+++ b/packages/web/web.webpack.config.js
@@ -47,9 +47,9 @@ module.exports = (env) => {
           { from: 'src/500.html' },
           { from: 'src/index.html' },
           { from: 'src/manifest.webmanifest' },
-          { from: 'src/robots.txt' }
-        ]
-      })
+          { from: 'src/robots.txt' },
+        ],
+      }),
     ],
     resolve: {
       extensions: ['.ts', '.tsx', '.js'],
@@ -67,7 +67,10 @@ module.exports = (env) => {
       rules: [
         {
           test: /\.(js|tsx?)$/,
-          exclude: /(node_modules)/,
+          /**
+           * @standardnotes/common uses class properties which we need to run through our babel rules.
+           */
+          exclude: /node_modules\/(?!(@standardnotes\/common))/,
           use: [
             'babel-loader',
             {
diff --git a/yarn.lock b/yarn.lock
index 637cb3e3b..b0090db55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7521,6 +7521,7 @@ __metadata:
   resolution: "@standardnotes/web@workspace:packages/web"
   dependencies:
     "@babel/core": "*"
+    "@babel/plugin-proposal-class-properties": ^7.18.6
     "@babel/plugin-transform-react-jsx": ^7.19.0
     "@babel/preset-env": "*"
     "@babel/preset-typescript": ^7.18.6