diff --git a/webui/src/_services/HttpService.js b/webui/src/_services/HttpService.js
index 48010c1e0..0e206b24d 100644
--- a/webui/src/_services/HttpService.js
+++ b/webui/src/_services/HttpService.js
@@ -1,14 +1,15 @@
 import { APP } from '../_helpers/APP'
+import { getTotal } from './utils'
 
 const apiBase = '/http'
 
 function getAllRouters (params) {
   return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
-      const total = body.data ? body.data.length : 0
-      console.log('Success -> HttpService -> getAllRouters', body.data)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
-      return { data: body.data || [], total }
+    .then(response => {
+      const { data = [], headers } = response
+      const total = getTotal(headers, params)
+      console.log('Success -> HttpService -> getAllRouters', response, response.data)
+      return { data, total }
     })
 }
 
@@ -22,11 +23,11 @@ function getRouterByName (name) {
 
 function getAllServices (params) {
   return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
-      const total = body.data ? body.data.length : 0
-      console.log('Success -> HttpService -> getAllServices', body.data)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
-      return { data: body.data || [], total }
+    .then(response => {
+      const { data = [], headers } = response
+      const total = getTotal(headers, params)
+      console.log('Success -> HttpService -> getAllServices', response.data)
+      return { data, total }
     })
 }
 
@@ -40,11 +41,11 @@ function getServiceByName (name) {
 
 function getAllMiddlewares (params) {
   return APP.api.get(`${apiBase}/middlewares?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
-      const total = body.data ? body.data.length : 0
-      console.log('Success -> HttpService -> getAllMiddlewares', body.data)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
-      return { data: body.data || [], total }
+    .then(response => {
+      const { data = [], headers } = response
+      const total = getTotal(headers, params)
+      console.log('Success -> HttpService -> getAllMiddlewares', response.data)
+      return { data, total }
     })
 }
 
diff --git a/webui/src/_services/TcpService.js b/webui/src/_services/TcpService.js
index 694ce099c..41c7d3dfa 100644
--- a/webui/src/_services/TcpService.js
+++ b/webui/src/_services/TcpService.js
@@ -1,14 +1,15 @@
 import { APP } from '../_helpers/APP'
+import { getTotal } from './utils'
 
 const apiBase = '/tcp'
 
 function getAllRouters (params) {
   return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
-      const total = body.data ? body.data.length : 0
-      console.log('Success -> HttpService -> getAllRouters', body.data)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
-      return { data: body.data || [], total }
+    .then(response => {
+      const { data = [], headers } = response
+      const total = getTotal(headers, params)
+      console.log('Success -> HttpService -> getAllRouters', response.data)
+      return { data, total }
     })
 }
 
@@ -22,11 +23,11 @@ function getRouterByName (name) {
 
 function getAllServices (params) {
   return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
-      const total = body.data ? body.data.length : 0
-      console.log('Success -> HttpService -> getAllServices', body.data)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
-      return { data: body.data || [], total }
+    .then(response => {
+      const { data = [], headers } = response
+      const total = getTotal(headers, params)
+      console.log('Success -> HttpService -> getAllServices', response.data)
+      return { data, total }
     })
 }
 
diff --git a/webui/src/_services/utils.js b/webui/src/_services/utils.js
new file mode 100644
index 000000000..1f310c15d
--- /dev/null
+++ b/webui/src/_services/utils.js
@@ -0,0 +1,8 @@
+export const getTotal = (headers, params) => {
+  const nextPage = parseInt(headers['x-next-page'], 10) || 1
+  const hasNextPage = nextPage > 1
+
+  return hasNextPage
+    ? (params.page + 1) * params.limit
+    : params.page * params.limit
+}
diff --git a/webui/src/index.template.html b/webui/src/index.template.html
index c0e888f21..9991c1293 100644
--- a/webui/src/index.template.html
+++ b/webui/src/index.template.html
@@ -7,7 +7,7 @@
     <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
     <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
     <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">