diff --git a/packages/ipfs/src/http/api/routes/index.js b/packages/ipfs/src/http/api/routes/index.js
index b08d1c8369..1e81cc77ef 100644
--- a/packages/ipfs/src/http/api/routes/index.js
+++ b/packages/ipfs/src/http/api/routes/index.js
@@ -2,7 +2,8 @@
 
 const Boom = require('@hapi/boom')
 
-const METHODS = [
+// RPC API requires POST, we block every other method
+const BLOCKED_METHODS = [
   'GET',
   'PUT',
   'PATCH',
@@ -27,7 +28,6 @@ const routes = [
   ...require('./files'),
   ...require('./pubsub'),
   require('./debug'),
-  ...require('./webui'),
   ...require('./dag'),
   require('./dns'),
   ...require('./key'),
@@ -37,13 +37,15 @@ const routes = [
   ...require('./dht')
 ]
 
-const extraRoutes = []
+// webui is loaded from API port, but works over GET (not a part of RPC API)
+const extraRoutes = [...require('./webui')]
 
 const handler = () => {
   throw Boom.methodNotAllowed()
 }
 
-METHODS.forEach(method => {
+// add routes that return HTTP 504 for non-POST requests to RPC API
+BLOCKED_METHODS.forEach(method => {
   routes.forEach(route => {
     extraRoutes.push({
       method,
diff --git a/packages/ipfs/src/http/api/routes/webui.js b/packages/ipfs/src/http/api/routes/webui.js
index 9c8c15cd7f..4f9806fc82 100644
--- a/packages/ipfs/src/http/api/routes/webui.js
+++ b/packages/ipfs/src/http/api/routes/webui.js
@@ -1,36 +1,31 @@
 'use strict'
 
-const multiaddr = require('multiaddr')
 const debug = require('debug')
+const { gateway } = require('../../gateway/resources')
 const log = debug('ipfs:webui:info')
 log.error = debug('ipfs:webui:error')
 
+const webuiCid = 'bafybeidatpz2hli6fgu3zul5woi27ujesdf5o5a7bu622qj6ugharciwjq' // v2.7.5
+
 module.exports = [
   {
-    method: '*',
-    path: '/webui',
-    async handler (request, h) {
-      let scheme = 'http'
-      let port
-      let host
-
-      try {
-        const { ipfs } = request.server.app
-        const gateway = await ipfs.config.get('Addresses.Gateway')
-        const address = multiaddr(gateway).nodeAddress()
-
-        port = address.port
-        host = address.address
-      } catch (err) {
-        // may not have gateway configured
-        log.error(err)
-
-        scheme = 'https'
-        port = 443
-        host = 'gateway.ipfs.io'
+    method: 'GET',
+    path: `/ipfs/${webuiCid}/{path*}`, // only the whitelisted webui is allowed on API port
+    options: {
+      handler: gateway.handler,
+      response: {
+        ranges: false // disable built-in support, handler does it manually
+      },
+      ext: {
+        onPostHandler: { method: gateway.afterHandler }
       }
-
-      return h.redirect(`${scheme}://${host}:${port}/ipfs/Qmexhq2sBHnXQbvyP2GfUdbnY7HCagH2Mw5vUNSBn2nxip`)
+    }
+  },
+  {
+    method: 'GET',
+    path: '/webui/{slug?}', // optional slug makes it work with and without slash
+    handler (request, h) {
+      return h.redirect(`/ipfs/${webuiCid}/`)
     }
   }
 ]