diff --git a/src/main/resources/swagger/index.html b/src/main/resources/swagger/index.html
index a1c3c76a4d93b88a522dbf5060ca00b4bebbf947..0e6f7d415c3d1756e31577421e911ea0e9914478 100644
--- a/src/main/resources/swagger/index.html
+++ b/src/main/resources/swagger/index.html
@@ -1,26 +1,36 @@
-<!doctype html>
-<head>
-  <title>Static Data Swagger Docs</title>
-  <meta charset="utf8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>NSHMP WS Services</title>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://unpkg.com/swagger-ui-dist/favicon-32x32.png"
+      sizes="32x32"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://unpkg.com/swagger-ui-dist/favicon-16x16.png"
+      sizes="16x16"
+    />
+    <script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>
+    <script src="https://unpkg.com/swagger-ui-dist/swagger-ui-standalone-preset.js"></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://unpkg.com/swagger-ui-dist/swagger-ui.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://unpkg.com/swagger-ui-themes@3.0.0/themes/3.x/theme-material.css"
+    />
+  </head>
 
-  <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@3/swagger-ui.css"/>
-</head>
-<body>
-  <div id="swagger-ui"></div>
-
-  <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
-  <script>
-    let pathname = window.location.pathname;
-    pathname = pathname == "/" ? "" : pathname;
-
-    SwaggerUIBundle({
-        url: `${pathname}/swagger/netcdf-services.yml`,
-        dom_id: '#swagger-ui',
-        presets: [
-          SwaggerUIBundle.presets.apis
-        ]
-    });
-  </script>
-</body>
+  <body>
+    <div id="swagger-ui"></div>
+    <script src="index.js"></script>
+  </body>
 </html>
diff --git a/src/main/resources/swagger/index.js b/src/main/resources/swagger/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4d3c03f3b2a22b78111eba39ee2e986c678d48fa
--- /dev/null
+++ b/src/main/resources/swagger/index.js
@@ -0,0 +1,42 @@
+window.onload = function() {
+  const extract = function(v) {
+    return decodeURIComponent(
+        v.replace(
+          /(?:(?:^|.*;\s*)contextPath\s*\=\s*([^;]*).*$)|^.*$/,
+          "$1"
+        )
+      );
+    },
+    cookie = extract(document.cookie),
+    contextPath = cookie === "" ? extract(window.location.search.substring(1)) : cookie,
+    f = contextPath === "" ? undefined : function(system) {
+      return {
+        statePlugins: {
+          spec: {
+            wrapActions: {
+              updateJsonSpec: (oriAction, system) => (...args) => {
+                let [spec] = args;
+                if (spec && spec.paths) {
+                  const newPaths = {};
+                  Object.entries(spec.paths)
+                      .forEach(([path, value]) => (newPaths[contextPath + path] = value));
+                  spec.paths = newPaths;
+                }
+                oriAction(...args);
+              }
+            }
+          }
+        }
+      };
+    },
+    ui = SwaggerUIBundle({
+      url: contextPath + "/swagger/netcdf-services.yml",
+      dom_id: "#swagger-ui",
+      tagsSorter: 'alpha',
+      presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
+      plugins: [SwaggerUIBundle.plugins.DownloadUrl, f],
+      validatorUrl: null,
+      deepLinking: true
+    });
+  window.ui = ui;
+};