diff --git a/ui/packaging/package.sh b/ui/packaging/package.sh
index 2ae27297d86..1160de44f32 100644
--- a/ui/packaging/package.sh
+++ b/ui/packaging/package.sh
@@ -22,8 +22,6 @@ set -x
 ROOT=$PWD
 
 function package_deb() {
-    VERSION=$(cd ../; grep --color=none \"version\" package.json | cut -d '"' -f4)
-    DATE=$(date +"%Y%m%d")
     sed -i "s/VERSION/$VERSION-$DATE/g" debian/changelog
     dpkg-buildpackage -uc -us
     $(cd ../; tar czf cloudstack-primate-$VERSION-$DATE.tar.gz dist --transform s/dist/primate/)
@@ -33,10 +31,9 @@ function package_rpm() {
     CWD=`pwd`
     RPMDIR=$CWD/../build
 
-    VERSION=$(cd ../; grep --color=none \"version\" package.json | cut -d '"' -f4)
     REALVER=`echo $VERSION`
     DEFVER="-D_ver $REALVER"
-    DEFREL="-D_rel $(date +"%Y%m%d")"
+    DEFREL="-D_rel $DATE"
 
     echo Preparing to package CloudStack Primate ${VERSION}
 
@@ -63,6 +60,10 @@ function package_rpm() {
     fi
 }
 
+DATE=$(date +"%Y%m%d")
+VERSION=$(grep -Po '"version": "\K[^"]*' ../package.json)
+sed -i "s/\"version\":.*/\"version\": \"$VERSION$DATE\",/g" ../package.json
+
 case "$1" in
   deb ) package_deb
       ;;
diff --git a/ui/src/components/page/GlobalFooter.vue b/ui/src/components/page/GlobalFooter.vue
index 94384949819..1df96d49c51 100644
--- a/ui/src/components/page/GlobalFooter.vue
+++ b/ui/src/components/page/GlobalFooter.vue
@@ -18,7 +18,9 @@
 <template>
   <div class="footer">
     <div class="links">
-      CloudStack Server {{ $store.getters.features.cloudstackversion }}
+      CloudStack {{ $store.getters.features.cloudstackversion }}
+      <a-divider type="vertical" />
+      Primate {{ $store.getters.version }}
       <a-divider type="vertical" />
       <a href="https://github.com/apache/cloudstack-primate/issues/new/choose" target="_blank">
         <a-icon type="github"/>
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index fba66a8a1c8..97103b49a48 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -17,6 +17,7 @@
 
 const getters = {
   device: state => state.app.device,
+  version: state => state.app.version,
   theme: state => state.app.theme,
   color: state => state.app.color,
   token: state => state.user.token,
diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
index b71b7729695..c954ff68186 100644
--- a/ui/src/store/modules/app.js
+++ b/ui/src/store/modules/app.js
@@ -31,6 +31,7 @@ import {
 
 const app = {
   state: {
+    version: process.env.PACKAGE_VERSION || 'master',
     sidebar: true,
     device: 'desktop',
     theme: '',
diff --git a/ui/vue.config.js b/ui/vue.config.js
index 3bb6d87c7a9..4421a0217ee 100644
--- a/ui/vue.config.js
+++ b/ui/vue.config.js
@@ -18,6 +18,8 @@
 const path = require('path')
 const webpack = require('webpack')
 const fs = require('fs')
+const packageJson = fs.readFileSync('./package.json')
+const version = JSON.parse(packageJson).version || 'master'
 
 function resolve (dir) {
   return path.join(__dirname, dir)
@@ -43,7 +45,12 @@ module.exports = {
   configureWebpack: {
     plugins: [
       // Ignore all locale files of moment.js
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.DefinePlugin({
+        'process.env': {
+          PACKAGE_VERSION: '"' + version + '"'
+        }
+      })
     ]
   },