diff --git a/src/main/webui/src/app/RestClient.js b/src/main/webui/src/app/RestClient.js
index 5e75859..129970a 100644
--- a/src/main/webui/src/app/RestClient.js
+++ b/src/main/webui/src/app/RestClient.js
@@ -29,9 +29,9 @@ const http = {
 };
 
 const jsonRest ={
-  get: (url, payload) => httpCall(url, "GET", {"Content-type": "application/json"}, payload),
-  post: (url, payload) => httpCall(url, "POST", {"Content-type": "application/json"}, payload),
-  put: (url, payload) => httpCall(url, "PUT", {"Content-type": "application/json"}, payload)
+  get: (url, payload) => httpCall(url, "GET", {"Content-type": "application/json"}, JSON.stringify(payload)),
+  post: (url, payload) => httpCall(url, "POST", {"Content-type": "application/json"}, JSON.stringify(payload)),
+  put: (url, payload) => httpCall(url, "PUT", {"Content-type": "application/json"}, JSON.stringify(payload))
 };
 
 export {http, jsonRest};
diff --git a/src/main/webui/src/app/components/nav/NavFooter.jsx b/src/main/webui/src/app/components/nav/NavFooter.jsx
index 672b6a5..281c64b 100644
--- a/src/main/webui/src/app/components/nav/NavFooter.jsx
+++ b/src/main/webui/src/app/components/nav/NavFooter.jsx
@@ -14,16 +14,35 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import {jsonRest} from '../../RestClient';
+import {Utils} from '../CompUtils';
 
 export default function NavFooter() {
-  // TODO: stats will be render based on the backend addons response, this is a mock;
-  const stats = {
-    version: "1.6.0",
-    commitId: "f472176",
-    builder: "ligangty",
-    timestamp: "2018-10-24 05:54 +0000"
-  };
+  const [state, setState] = useState({stats: {}});
+
+  (function(){
+    const versionUrl = `/api/stats/version-info`;
+    useEffect(()=>{
+      const fetchVersion = async () => {
+        const response = await jsonRest.get(versionUrl);
+        if (response.ok){
+          const raw = await response.json();
+          setState({
+            stats: raw
+          });
+        }else{
+          response.text().then(data => {
+            Utils.logMessage(`Failed to version info. Error reason: ${response.status}->${response.statusText}`);
+          });
+        }
+      };
+
+      fetchVersion();
+    }, []);
+  }());
+
+  const stats = state.stats;
   const gridClass = "col-md-auto border-right border-secondary";
   return (
     <nav className="navbar fixed-bottom navbar-expand-lg navbar-light bg-light" role="navigation">
diff --git a/src/main/webui/src/server/app.js b/src/main/webui/src/server/app.js
index 2810460..dfa7ed4 100644
--- a/src/main/webui/src/server/app.js
+++ b/src/main/webui/src/server/app.js
@@ -26,6 +26,15 @@ app.get('/api/stats/package-type/keys', (req, res)=>{
   res.status(200).json(["generic-http", "maven", "npm"]);
 });
 
+app.get('/api/stats/version-info', (req, res) => {
+  res.status(200).json({
+      version: "3.3.2",
+      commitId: "f472176",
+      builder: "test-builder",
+      timestamp: "2023-10-24 05:54 +0000"
+    });
+});
+
 app.get('/api/admin/stores/_all/remote', (req, res) => {
   const remoteList = require('./mock/list/FakeRemoteList.json');
   res.status(200).json(remoteList);