diff --git a/client/configuration/webpack/SUPPORTED_BROWSERS_REGEX.js b/client/configuration/webpack/SUPPORTED_BROWSERS_REGEX.js
index f7a362251..fedd9a005 100644
--- a/client/configuration/webpack/SUPPORTED_BROWSERS_REGEX.js
+++ b/client/configuration/webpack/SUPPORTED_BROWSERS_REGEX.js
@@ -1 +1 @@
-module.exports = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(10[_.]3|10[_.]([4-9]|\d{2,})|(1[1-9]|[2-9]\d|\d{3,})[_.]\d+|11[_.]0|11[_.]([1-9]|\d{2,})|11[_.]2|11[_.]([3-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})[_.]\d+|12[_.]0|12[_.]([1-9]|\d{2,})|12[_.]5|12[_.]([6-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})[_.]\d+|13[_.]0|13[_.]([1-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|(CFNetwork\/8.* Darwin\/16\.5\.\d+)|(CFNetwork\/8.* Darwin\/16\.6\.\d+)|(CFNetwork\/8.* Darwin\/16\.7\.\d+)|(CFNetwork\/8.* Darwin\/17\.0\.\d+)|(CFNetwork\/8.* Darwin\/17\.2\.\d+)|(CFNetwork\/8.* Darwin\/17\.3\.\d+)|(CFNetwork\/8.* Darwin\/17\.\d+)|(Edge\/(79(?:\.0)?|79(?:\.([1-9]|\d{2,}))?|([8-9]\d|\d{3,})(?:\.\d+)?|83(?:\.0)?|83(?:\.([1-9]|\d{2,}))?|(8[4-9]|9\d|\d{3,})(?:\.\d+)?))|((Chromium|Chrome)\/(61\.0|61\.([1-9]|\d{2,})|(6[2-9]|[7-9]\d|\d{3,})\.\d+|83\.0|83\.([1-9]|\d{2,})|(8[4-9]|9\d|\d{3,})\.\d+)(?:\.\d+)?)|(Firefox\/(60\.0|60\.([1-9]|\d{2,})|(6[1-9]|[7-9]\d|\d{3,})\.\d+)\.\d+)|(Firefox\/(60\.0|60\.([1-9]|\d{2,})|(6[1-9]|[7-9]\d|\d{3,})\.\d+)(pre|[ab]\d+[a-z]*)?)/;
+module.exports = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(10[_.]3|10[_.]([4-9]|\d{2,})|(1[1-9]|[2-9]\d|\d{3,})[_.]\d+|11[_.]0|11[_.]([1-9]|\d{2,})|11[_.]2|11[_.]([3-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})[_.]\d+|12[_.]0|12[_.]([1-9]|\d{2,})|12[_.]5|12[_.]([6-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})[_.]\d+|13[_.]0|13[_.]([1-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|(CFNetwork\/8.* Darwin\/16\.5\.\d+)|(CFNetwork\/8.* Darwin\/16\.6\.\d+)|(CFNetwork\/8.* Darwin\/16\.7\.\d+)|(CFNetwork\/8.* Darwin\/17\.0\.\d+)|(CFNetwork\/8.* Darwin\/17\.2\.\d+)|(CFNetwork\/8.* Darwin\/17\.3\.\d+)|(CFNetwork\/8.* Darwin\/17\.\d+)|(Edge\/(79(?:\.0)?|79(?:\.([1-9]|\d{2,}))?|([8-9]\d|\d{3,})(?:\.\d+)?|83(?:\.0)?|83(?:\.([1-9]|\d{2,}))?|(8[4-9]|9\d|\d{3,})(?:\.\d+)?))|((Chromium|Chrome)\/(61\.0|61\.([1-9]|\d{2,})|(6[2-9]|[7-9]\d|\d{3,})\.\d+|83\.0|83\.([1-9]|\d{2,})|(8[4-9]|9\d|\d{3,})\.\d+)(?:\.\d+)?)|(Version\/(12\.0|12\.([1-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})\.\d+|13\.0|13\.([1-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(60\.0|60\.([1-9]|\d{2,})|(6[1-9]|[7-9]\d|\d{3,})\.\d+)\.\d+)|(Firefox\/(60\.0|60\.([1-9]|\d{2,})|(6[1-9]|[7-9]\d|\d{3,})\.\d+)(pre|[ab]\d+[a-z]*)?)/;
diff --git a/client/configuration/webpack/obsoleteHTMLTemplate.html b/client/configuration/webpack/obsoleteHTMLTemplate.html
index ec459ea5d..ecfe70ce0 100644
--- a/client/configuration/webpack/obsoleteHTMLTemplate.html
+++ b/client/configuration/webpack/obsoleteHTMLTemplate.html
@@ -11,10 +11,7 @@
     font-family: 'Inter, sans serif';
   "
 >
-  <img
-    src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/cellxgene-logo.png"
-    style="width: 320px"
-  />
+  <img src="/images/cellxgene.png" style="width: 320px" />
   <div
     style="
       margin-top: 16px;
@@ -38,27 +35,35 @@
       <a
         href="https://www.google.com/chrome/?hl=en%22"
         aria-label="Download Google Chrome"
+        target="_blank"
       >
-        <img
-          src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/chrome.png"
-          style="width: 80px; height: 80px"
-        />
+        <img src="/images/chrome.png" style="width: 80px; height: 80px" />
         <div>Chrome &gt; 60</div>
       </a>
-      <a href="https://www.mozilla.com/firefox/" aria-label="Download Firefox">
-        <img
-          src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/firefox.png"
-          style="width: 80px; height: 80px"
-        />
+      <a
+        href="https://www.mozilla.com/firefox/"
+        aria-label="Download Firefox"
+        target="_blank"
+      >
+        <img src="/images/firefox.png" style="width: 80px; height: 80px" />
         <div>Firefox ≥ 60</div>
       </a>
-      <a href="//www.microsoft.com/edge" aria-label="Download Edge">
-        <img
-          src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/edge.png"
-          style="width: 80px; height: 80px"
-        />
+      <a
+        href="https://www.microsoft.com/edge"
+        aria-label="Download Edge"
+        target="_blank"
+      >
+        <img src="/images/edge.png" style="width: 80px; height: 80px" />
         <div>Edge ≥ 79</div>
       </a>
+      <a
+        href="https://www.apple.com/ca/safari/"
+        aria-label="Download Safari"
+        target="_blank"
+      >
+        <img src="/images/safari.png" style="width: 80px; height: 80px" />
+        <div>Safari ≥ 12</div>
+      </a>
     </div>
   </div>
 </div>
diff --git a/client/configuration/webpack/webpack.config.dev.js b/client/configuration/webpack/webpack.config.dev.js
index e5152224a..d327f4b95 100644
--- a/client/configuration/webpack/webpack.config.dev.js
+++ b/client/configuration/webpack/webpack.config.dev.js
@@ -31,6 +31,7 @@ const devConfig = {
     // so it ignores the base_url (/d, /e) and dataset in the url.
     // e.g., http://localhost:3000/static/assets/heatmap.svg
     publicPath: "/",
+    assetModuleFilename: "images/[name][ext][query]",
   },
   module: {
     rules: [
@@ -41,12 +42,7 @@ const devConfig = {
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
-        loader: "file-loader",
-        options: {
-          name: "static/assets/[name].[ext]",
-          // (thuang): This is needed to make sure @font url path is '/static/assets/'
-          publicPath: "/",
-        },
+        type: "asset/resource",
       },
     ],
   },
@@ -57,7 +53,7 @@ const devConfig = {
     }),
     new FaviconsWebpackPlugin({
       logo: "./favicon.png",
-      prefix: "static/img/",
+      prefix: "static/assets/",
       favicons: {
         icons: {
           android: false,
diff --git a/client/configuration/webpack/webpack.config.prod.js b/client/configuration/webpack/webpack.config.prod.js
index d5095c3b6..6be64ca6c 100644
--- a/client/configuration/webpack/webpack.config.prod.js
+++ b/client/configuration/webpack/webpack.config.prod.js
@@ -35,6 +35,7 @@ const prodConfig = {
   cache: false,
   output: {
     filename: "static/[name]-[contenthash].js",
+    assetModuleFilename: "images/[name][ext][query]",
   },
   optimization: {
     minimize: true,
@@ -55,10 +56,7 @@ const prodConfig = {
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
-        loader: "file-loader",
-        options: {
-          name: "static/assets/[name]-[contenthash].[ext]",
-        },
+        type: "asset/resource",
       },
     ],
   },
diff --git a/client/package.json b/client/package.json
index 4440bd986..9a31e1bed 100644
--- a/client/package.json
+++ b/client/package.json
@@ -36,8 +36,8 @@
     "iOS >= 10.3",
     "Firefox >= 60",
     "Edge >= 79",
-    "not Explorer > 0",
-    "not Safari > 0"
+    "Safari >= 12",
+    "not Explorer > 0"
   ],
   "dependencies": {
     "@aws-sdk/client-secrets-manager": "^3.13.0",
diff --git a/client/src/assets/img/cellxgene.png b/client/src/assets/img/cellxgene.png
new file mode 100644
index 000000000..5f6555524
Binary files /dev/null and b/client/src/assets/img/cellxgene.png differ
diff --git a/client/src/assets/img/chrome.png b/client/src/assets/img/chrome.png
new file mode 100644
index 000000000..40b579b32
Binary files /dev/null and b/client/src/assets/img/chrome.png differ
diff --git a/client/src/assets/img/edge.png b/client/src/assets/img/edge.png
new file mode 100644
index 000000000..961311a8a
Binary files /dev/null and b/client/src/assets/img/edge.png differ
diff --git a/client/src/assets/img/firefox.png b/client/src/assets/img/firefox.png
new file mode 100644
index 000000000..9ebb1069a
Binary files /dev/null and b/client/src/assets/img/firefox.png differ
diff --git a/client/src/assets/img/safari.png b/client/src/assets/img/safari.png
new file mode 100644
index 000000000..d072f5a83
Binary files /dev/null and b/client/src/assets/img/safari.png differ
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 1c7e68883..4b867b499 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -9,6 +9,16 @@ import "./index.css";
 import App from "./components/app";
 import store from "./reducers";
 
+/**
+ * These are imported for Webpack asset/resource module
+ * to bundle in order to be used in obsolete browser template
+ */
+import "./assets/img/safari.png";
+import "./assets/img/chrome.png";
+import "./assets/img/firefox.png";
+import "./assets/img/edge.png";
+import "./assets/img/cellxgene.png";
+
 FocusStyleManager.onlyShowFocusOnTabs();
 
 ReactDOM.render(