diff --git a/src/App.tsx b/src/App.tsx
index fc377df0c2bfa3..6331dfea425d12 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { NetworkProvider } from "./providers/network";
 import { TransactionsProvider } from "./providers/transactions";
 import NetworkStatusButton from "./components/NetworkStatusButton";
@@ -37,7 +38,6 @@ function App() {
           </div>
         </div>
       </div>
-
       <Overlay show={showModal} onClick={() => setShowModal(false)} />
     </NetworkProvider>
   );
@@ -49,9 +49,10 @@ type OverlayProps = {
 };
 
 function Overlay({ show, onClick }: OverlayProps) {
-  return show ? (
-    <div className="modal-backdrop fade show" onClick={onClick}></div>
-  ) : null;
+  if (show)
+    return <div className="modal-backdrop fade show" onClick={onClick}></div>;
+
+  return <div className="fade"></div>;
 }
 
 export default App;
diff --git a/src/components/NetworkModal.tsx b/src/components/NetworkModal.tsx
index 0e53dea60f7c76..628361575dea47 100644
--- a/src/components/NetworkModal.tsx
+++ b/src/components/NetworkModal.tsx
@@ -16,17 +16,14 @@ type Props = {
 };
 
 function NetworkModal({ show, onClose }: Props) {
-  const cancelClose = React.useCallback(e => e.stopPropagation(), []);
-
   return (
     <div
-      className={`modal fade fixed-right ${show ? "show" : ""}`}
-      tabIndex={-1}
+      className={`modal fade fixed-right${show ? " show" : ""}`}
       onClick={onClose}
     >
       <div className="modal-dialog modal-dialog-vertical">
         <div className="modal-content">
-          <div className="modal-body" onClick={cancelClose}>
+          <div className="modal-body" onClick={e => e.stopPropagation()}>
             <span className="close" onClick={onClose}>
               &times;
             </span>