diff --git a/web/src/js/components/Modal/Modal.jsx b/web/src/js/components/Modal/Modal.jsx
deleted file mode 100644
index 64b61fcce..000000000
--- a/web/src/js/components/Modal/Modal.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from "react"
-import ModalList from './ModalList'
-import { useAppSelector } from "../../ducks";
-
-
-export default function PureModal() {
-    const activeModal = useAppSelector(state => state.ui.modal.activeModal)
-    const ActiveModal = ModalList.find(m => m.name === activeModal )
-
-    return(
-        activeModal ? <ActiveModal/> : <div/>
-    )
-}
diff --git a/web/src/js/components/Modal/Modal.tsx b/web/src/js/components/Modal/Modal.tsx
new file mode 100644
index 000000000..d9a475eb9
--- /dev/null
+++ b/web/src/js/components/Modal/Modal.tsx
@@ -0,0 +1,13 @@
+import * as React from "react"
+import ModalList from './ModalList'
+import { useAppSelector } from "../../ducks";
+
+
+export default function PureModal() {
+    const activeModal : string = useAppSelector(state => state.ui.modal.activeModal)
+    const ActiveModal:(() => JSX.Element)  | undefined= ModalList.find(m => m.name === activeModal )
+
+    return(
+        activeModal&&ActiveModal!==undefined ? <ActiveModal/> : <div/>
+    )
+}
diff --git a/web/src/js/components/Modal/ModalLayout.jsx b/web/src/js/components/Modal/ModalLayout.tsx
similarity index 67%
rename from web/src/js/components/Modal/ModalLayout.jsx
rename to web/src/js/components/Modal/ModalLayout.tsx
index 387f7ded9..dd21aed08 100644
--- a/web/src/js/components/Modal/ModalLayout.jsx
+++ b/web/src/js/components/Modal/ModalLayout.tsx
@@ -1,10 +1,14 @@
 import * as React from "react"
 
-export default function ModalLayout ({ children }) {
+type ModalLayoutProps = {
+    children: React.ReactNode,
+}
+
+export default function ModalLayout ({ children}: ModalLayoutProps ) {
     return (
         <div>
         <div className="modal-backdrop fade in"></div>
-        <div className="modal modal-visible" id="optionsModal" tabIndex="-1" role="dialog" aria-labelledby="options">
+        <div className="modal modal-visible" id="optionsModal" tabIndex={-1} role="dialog" aria-labelledby="options">
         <div className="modal-dialog modal-lg" role="document">
             <div className="modal-content">
                 {children}
diff --git a/web/src/js/filt/filt.js b/web/src/js/filt/filt.js
index 3b7699362..7d496bd4b 100644
--- a/web/src/js/filt/filt.js
+++ b/web/src/js/filt/filt.js
@@ -2024,7 +2024,9 @@ export default (function() {
         new RegExp("application/x-javascript"),
         new RegExp("application/javascript"),
         new RegExp("text/css"),
-        new RegExp("image/.*")
+        new RegExp("image/.*"),
+        new RegExp("font/.*"),
+        new RegExp("application/font.*"),
     ];
     function assetFilter(flow) {
         if (flow.response) {