diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
index dbf80f33..395271fb 100644
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -55,6 +55,14 @@
   height: auto !important;
 }
 
+.if-overflow {
+  float: left;
+  width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @-moz-keyframes loader {
   from {
     transform: rotate(0);
diff --git a/src/components/Common/TextBox.vue b/src/components/Common/TextBox.vue
index 723ef1d2..f40b392a 100644
--- a/src/components/Common/TextBox.vue
+++ b/src/components/Common/TextBox.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="text-box">
-    <v-subheader>{{ label }}</v-subheader>
+    <v-subheader>
+      <span>{{ label }}</span>
+      <span v-if="desc" class="ml-2">({{ desc }})</span>
+    </v-subheader>
     <v-text-field
         solo
         dense
@@ -27,6 +30,10 @@ export default {
       type: String,
       required: true
     },
+    desc: {
+      type: String,
+      required: false
+    },
     value: {
       type: [Number, String]
     },
diff --git a/src/components/Jobs/ListItem.vue b/src/components/Jobs/ListItem.vue
index 26edb8df..16a6461e 100644
--- a/src/components/Jobs/ListItem.vue
+++ b/src/components/Jobs/ListItem.vue
@@ -10,7 +10,7 @@
       <span class="font-weight-bold"># {{ wrapper.buildNumber }}</span>
       <v-tooltip bottom>
         <template v-slot:activator="{ on }">
-          <v-icon small class="ml-3" v-on="on">{{ wrapper.triggerIcon }}</v-icon>
+          <v-icon small class="ml-2" v-on="on">{{ wrapper.triggerIcon }}</v-icon>
         </template>
         <span>{{ wrapper.triggerText }}</span>
       </v-tooltip>
@@ -29,13 +29,22 @@
              no-gutters
              v-if="wrapper.isPushTrigger || wrapper.isTagTrigger || wrapper.hasGitCommitInfo">
         <v-col cols="4">
-          <span class="font-weight-medium">{{ wrapper.branch }}</span>
+          <div>
+            <v-icon small class="mr-1" v-if="wrapper.pushOrTag.branch">mdi-source-branch</v-icon>
+            <span class="font-weight-medium">{{ wrapper.pushOrTag.branch }}</span>
+          </div>
+          <div v-if="wrapper.pushOrTag.commit_total">
+            <v-icon small class="mr-1">flow-icon-git-commit</v-icon>
+            <span class="font-weight-medium">{{ wrapper.pushOrTag.commit_total }}</span>
+            <span class="ml-1">commits</span>
+          </div>
         </v-col>
 
         <v-col cols="4">
           <v-list-item-subtitle>
-            <div class="commit-text caption"> {{ wrapper.commitMsg }}</div>
-            <a :href="wrapper.commitUrl" class="caption" target="_blank">{{ wrapper.commitId }}</a>
+            <div class="commit-text caption"> {{ wrapper.pushOrTag.head_commit.message }}</div>
+            <a :href="wrapper.pushOrTag.head_commit.url" class="caption"
+               target="_blank">{{ wrapper.pushOrTag.head_commit.id }}</a>
           </v-list-item-subtitle>
         </v-col>
       </v-row>
@@ -47,9 +56,9 @@
         <v-col cols="4">
           <v-list-item-subtitle>
             <div v-if="wrapper.prBaseRepo !== wrapper.prHeadRepo" class="caption">
-              {{ wrapper.prBaseRepo }} &#x2190; {{ wrapper.prHeadRepo}}
+              {{ wrapper.prBaseRepo }} &#x2190; {{ wrapper.prHeadRepo }}
             </div>
-            <div class="caption">{{ wrapper.prBaseBranch }} &#x2190; {{ wrapper.prHeadBranch}}</div>
+            <div class="caption">{{ wrapper.prBaseBranch }} &#x2190; {{ wrapper.prHeadBranch }}</div>
           </v-list-item-subtitle>
         </v-col>
 
@@ -79,38 +88,38 @@
 </template>
 
 <script>
-  import { JobWrapper } from '@/util/jobs'
+import {JobWrapper} from '@/util/jobs'
 
-  export default {
-    props: {
-      job: {
-        type: Object,
-        required: true
-      }
-    },
-    computed: {
-      wrapper() {
-        return new JobWrapper(this.job)
-      }
+export default {
+  props: {
+    job: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    wrapper() {
+      return new JobWrapper(this.job)
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .job-item {
-    min-height: 68px;
-  }
+.job-item {
+  min-height: 68px;
+}
 
-  .commit-text {
-    max-width: 300px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: #4e4e53;
-  }
+.commit-text {
+  max-width: 300px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: #4e4e53;
+}
 
-  .vertical-bar {
-    display: flex;
-    height: 40px;
-    border-left: 2px solid #c6c6cb;
-  }
+.vertical-bar {
+  display: flex;
+  height: 40px;
+  border-left: 2px solid #c6c6cb;
+}
 </style>
diff --git a/src/util/jobs.js b/src/util/jobs.js
index 29aa1992..540ec9f4 100644
--- a/src/util/jobs.js
+++ b/src/util/jobs.js
@@ -26,6 +26,27 @@ export const TRIGGER_SCHEDULER = 'SCHEDULER'
 export class JobWrapper {
   constructor(job) {
     this.job = job
+
+    this.builtInVarList = []
+    this.customVarList = []
+
+    Object.keys(this.context).forEach(key => {
+      let value = this.context[key]
+      if (key === '_TYPE_') {
+        return
+      }
+
+      if (value === '') {
+        return
+      }
+
+      if (key.startsWith('FLOWCI_')) {
+        this.builtInVarList.push({key: key, value: value})
+        return
+      }
+
+      this.customVarList.push({key: key, value: value})
+    })
   }
 
   get context() {
@@ -48,30 +69,10 @@ export class JobWrapper {
     return this.context[vars.git.credential] || '-'
   }
 
-  get commitId() {
-    return this.context[vars.git.commit.id]
-  }
-
-  get commitMsg() {
-    return this.context[vars.git.commit.message]
-  }
-
-  get commitUrl() {
-    return this.context[vars.git.commit.url]
-  }
-
-  get commitNum() {
-    return this.context[vars.git.commit.number]
-  }
-
   get fromNow() {
     return timeFormatFromNow(this.job.createdAt)
   }
 
-  get branch() {
-    return this.context[vars.git.branch]
-  }
-
   get buildNumber() {
     return this.job.buildNumber
   }
@@ -106,16 +107,11 @@ export class JobWrapper {
     return status
   }
 
-  get customVarList() {
-    const contextAsPairList = []
-
-    Object.keys(this.context).forEach(key => {
-      if (!key.startsWith('FLOWCI_')) {
-        contextAsPairList.push({key: key, value: this.context[key]})
-      }
-    })
-
-    return contextAsPairList
+  get vars() {
+    return {
+      builtIn: this.builtInVarList,
+      custom: this.customVarList
+    }
   }
 
   get duration() {
@@ -172,6 +168,27 @@ export class JobWrapper {
     return this.job.yamlRepoBranch
   }
 
+  get pushOrTag() {
+    let commitListB64 = this.context[vars.git.push.commit_list]
+    let commitList = []
+    if (commitListB64) {
+      try {
+        commitList = JSON.parse(atob(commitListB64))
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    return {
+      branch: this.context[vars.git.push.branch],
+      message: this.context[vars.git.push.message],
+      author: this.context[vars.git.push.author],
+      commit_total: this.context[vars.git.push.commit_total],
+      commit_list: commitList,
+      head_commit: commitList.length === 0 ? {id: '', message: ''} : commitList[0]
+    }
+  }
+
   get prTitle() {
     return this.context[vars.git.pr.title]
   }
@@ -205,8 +222,7 @@ export class JobWrapper {
   }
 
   get hasGitCommitInfo() {
-    return this.context[vars.git.commit.id]
-      && this.context[vars.git.commit.message]
+    return this.context[vars.git.push.message]
   }
 
   get isPushTrigger() {
diff --git a/src/util/vars.js b/src/util/vars.js
index 261915c4..034af12b 100644
--- a/src/util/vars.js
+++ b/src/util/vars.js
@@ -26,23 +26,22 @@ export default {
 
   git: {
     url: 'FLOWCI_GIT_URL',
-    branch: 'FLOWCI_GIT_BRANCH',
     credential: 'FLOWCI_GIT_CREDENTIAL',
 
     source: 'FLOWCI_GIT_SOURCE',
     event: 'FLOWCI_GIT_EVENT',
-    author: 'FLOWCI_GIT_AUTHOR',
     compare_url: 'FLOWCI_GIT_COMPARE_URL',
 
-    commit: {
-      id: 'FLOWCI_GIT_COMMIT_ID',
+    push: {
+      author: 'FLOWCI_GIT_AUTHOR',
       message: 'FLOWCI_GIT_COMMIT_MESSAGE',
-      time: 'FLOWCI_GIT_COMMIT_TIME',
-      url: 'FLOWCI_GIT_COMMIT_URL',
-      number: 'FLOWCI_GIT_COMMIT_NUM'
+      branch: 'FLOWCI_GIT_BRANCH',
+      commit_total: 'FLOWCI_GIT_COMMIT_TOTAL',
+      commit_list: 'FLOWCI_GIT_COMMIT_LIST'
     },
 
     pr: {
+      author: 'FLOWCI_GIT_AUTHOR',
       title: 'FLOWCI_GIT_PR_TITLE',
       message: 'FLOWCI_GIT_PR_MESSAGE',
       url: 'FLOWCI_GIT_PR_URL',
diff --git a/src/view/Job/DetailTabContext.vue b/src/view/Job/DetailTabContext.vue
index b88c5f0b..4cdc87a6 100644
--- a/src/view/Job/DetailTabContext.vue
+++ b/src/view/Job/DetailTabContext.vue
@@ -1,211 +1,226 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <div>
-      <v-data-table
-          v-for="(value, key) in contextData"
-          :key="key"
-          :items="value.data"
-          class="mb-2 bottom-border"
-          v-show="value.show"
-          hide-default-footer
-          hide-default-header>
-
-        <template v-slot:header="{}">
-          <div class="header">{{ value.name }}</div>
-        </template>
-
-        <template v-slot:item="{ item }">
-          <tr>
-            <td>
-              <v-row no-gutters>
-                <v-col cols="3" class="caption">
-                  <span>{{ item.key }}</span>
-                </v-col>
-                <v-col class="caption">
+    <v-data-table
+        v-for="(value, key) in contextData"
+        :key="key"
+        :items="value.data"
+        class="mb-2 bottom-border"
+        v-show="value.show"
+        disable-pagination
+        hide-default-footer
+        hide-default-header>
+
+      <template v-slot:header="{}">
+        <div class="header">{{ value.name }}</div>
+      </template>
+
+      <template v-slot:item="{ item }">
+        <tr>
+          <td>
+            <v-row no-gutters>
+              <v-col cols="2" class="caption">
+                <span>{{ item.key }}</span>
+              </v-col>
+              <v-col class="caption d-flex">
+                <div class="vertical-bar mr-4" v-if="value.showBar"></div>
+
+                <div v-if="item.value instanceof Array">
+                    <div v-for="(itemOfArray, index) of item.value" :key="index">
+                      <span>-</span>
+                      <a :href="itemOfArray.url" target="_blank" class="mx-2">{{ itemOfArray.id }}</a>
+                      <span>{{ itemOfArray.message }}</span>
+                    </div>
+                </div>
+
+                <div v-else>
                   <a v-if="item.link" :href="item.link" target="_blank">{{ item.value }}</a>
-                  <span v-if="!item.link">{{ item.value }}</span>
-                </v-col>
-              </v-row>
-            </td>
-          </tr>
-        </template>
-      </v-data-table>
+                  <span  class="d-inline-block text-truncate" style="max-width: 800px;" v-if="!item.link">{{ item.value }}</span>
+                </div>
+              </v-col>
+            </v-row>
+          </td>
+        </tr>
+      </template>
+    </v-data-table>
   </div>
 
 </template>
 
 <script>
-  export default {
-    name: 'JobDetailInfo',
-    data() {
-      return {}
-    },
-    props: {
-      wrapper: {
-        required: true,
-        type: Object
+export default {
+  name: 'JobDetailInfo',
+  data() {
+    return {}
+  },
+  props: {
+    wrapper: {
+      required: true,
+      type: Object
+    }
+  },
+  computed: {
+    contextData() {
+      return {
+        agent: {
+          name: 'Agent Detail',
+          show: true,
+          data: this.getAgentData()
+        },
+
+        push: {
+          name: 'Git Push Info',
+          show: this.wrapper.isPushTrigger || this.wrapper.hasGitCommitInfo,
+          data: this.getPushData()
+        },
+
+        tag: {
+          name: 'Git Tag Info',
+          show: this.wrapper.isTagTrigger,
+          data: this.getTagData()
+        },
+
+        pr: {
+          name: 'Git Pull Request Info',
+          show: this.wrapper.isPrOpenedTrigger || this.wrapper.isPrClosedTrigger,
+          data: this.getPrData()
+        },
+
+        variables: {
+          name: 'Variables',
+          show: true,
+          data: this.wrapper.vars.custom,
+          showBar: true
+        },
+
+        builtInVars: {
+          name: 'Built In Variables',
+          show: true,
+          data: this.wrapper.vars.builtIn,
+          showBar: true
+        }
+      }
+    }
+  },
+  methods: {
+    getAgentData() {
+      let agents = [];
+
+      for (const [_, info] of Object.entries(this.wrapper.snapshots)) {
+        let cpuInfo = `CPU: ${info.cpuNum} cores / ${info.cpuUsage.toFixed(2)} %`
+        let memInfo = `Memory: ${info.freeMemory} MB (free) / ${info.totalMemory} MB`
+        let diskInfo = `Disk: ${info.freeDisk} MB free / ${info.totalDisk} MB`
+
+        agents.push({
+          key: info.name,
+          value: `${cpuInfo} | ${memInfo} | ${diskInfo}`
+        })
       }
+
+      return agents
     },
-    computed: {
-      contextData() {
-        return {
-          agent: {
-            name: 'Agent Detail',
-            show: true,
-            data: this.getAgentData()
-          },
-
-          push: {
-            name: 'Git Push Info',
-            show: this.wrapper.isPushTrigger || this.wrapper.hasGitCommitInfo,
-            data: this.getPushData()
-          },
-
-          tag: {
-            name: 'Git Tag Info',
-            show: this.wrapper.isTagTrigger,
-            data: this.getTagData()
-          },
-
-          pr: {
-            name: 'Git Pull Request Info',
-            show: this.wrapper.isPrOpenedTrigger || this.wrapper.isPrClosedTrigger,
-            data: this.getPrData()
-          },
-
-          variables: {
-            name: 'Variables',
-            show: true,
-            data: this.wrapper.customVarList
-          }
+
+    getPushData() {
+      let push = this.wrapper.pushOrTag
+      return [
+        {
+          key: 'Repo',
+          value: this.wrapper.gitUrl
+        },
+        {
+          key: 'Credential',
+          value: this.wrapper.gitCredential
+        },
+        {
+          key: 'Branch',
+          value: push.branch
+        },
+        {
+          key: 'Commits',
+          value: push.commit_list
         }
-      }
+      ]
     },
-    methods: {
-      getAgentData() {
-        let agents = [];
-
-        for (const [_, info] of Object.entries(this.wrapper.snapshots)) {
-          let cpuInfo = `CPU: ${info.cpuNum} cores / ${info.cpuUsage.toFixed(2)} %`
-          let memInfo = `Memory: ${info.freeMemory} MB (free) / ${info.totalMemory} MB`
-          let diskInfo = `Disk: ${info.freeDisk} MB free / ${info.totalDisk} MB`
-
-          agents.push({
-            key: info.name,
-            value: `${cpuInfo} | ${memInfo} | ${diskInfo}`
-          })
+
+    getTagData() {
+      let tag = this.wrapper.pushOrTag
+      return [
+        {
+          key: 'Repo',
+          value: this.wrapper.gitUrl
+        },
+        {
+          key: 'Credential',
+          value: this.wrapper.gitCredential
+        },
+        {
+          key: 'Tag',
+          value: tag.branch
+        },
+        {
+          key: 'Commits',
+          value: tag.commit_list,
         }
+      ]
+    },
 
-        return agents
-      },
-
-      getPushData() {
-        return [
-          {
-            key: 'Repo',
-            value: this.wrapper.gitUrl
-          },
-          {
-            key: 'Credential',
-            value: this.wrapper.gitCredential
-          },
-          {
-            key: 'Branch',
-            value: this.wrapper.branch
-          },
-          {
-            key: 'Commits',
-            value: this.wrapper.commitNum
-          },
-          {
-            key: 'Last Commit ID',
-            value: this.wrapper.commitId,
-            link: this.wrapper.commitUrl
-          },
-          {
-            key: 'Last Commit Message',
-            value: this.wrapper.commitMsg
-          }
-        ]
-      },
-
-      getTagData() {
-        return [
-          {
-            key: 'Repo',
-            value: this.wrapper.gitUrl
-          },
-          {
-            key: 'Credential',
-            value: this.wrapper.gitCredential
-          },
-          {
-            key: 'Tag',
-            value: this.wrapper.branch
-          },
-          {
-            key: 'Commit ID',
-            value: this.wrapper.commitId,
-            link: this.wrapper.commitUrl
-          },
-          {
-            key: 'Commit Message',
-            value: this.wrapper.commitMsg
-          }
-        ]
-      },
-
-      getPrData() {
-        return [
-          {
-            key: 'Repo',
-            value: this.wrapper.gitUrl
-          },
-          {
-            key: 'Credential',
-            value: this.wrapper.gitCredential
-          },
-          {
-            key: 'Title',
-            value: this.wrapper.prTitle
-          },
-          {
-            key: 'Status',
-            value: this.wrapper.isPrOpenedTrigger ? 'Opened' : (this.wrapper.isPrMergedTrigger ? 'Merged' : '-')
-          },
-          {
-            key: 'Message',
-            value: this.wrapper.prMessage
-          },
-          {
-            key: 'PR Number',
-            value: this.wrapper.prNumber,
-            link: this.wrapper.prUrl
-          },
-          {
-            key: 'PR Head Repo/Branch',
-            value: this.wrapper.prHeadRepo + ' / ' + this.wrapper.prHeadBranch
-          },
-          {
-            key: 'PR Base Repo/Branch',
-            value: this.wrapper.prBaseRepo + ' / ' + this.wrapper.prBaseBranch
-          }
-        ]
-      }
+    getPrData() {
+      return [
+        {
+          key: 'Repo',
+          value: this.wrapper.gitUrl
+        },
+        {
+          key: 'Credential',
+          value: this.wrapper.gitCredential
+        },
+        {
+          key: 'Title',
+          value: this.wrapper.prTitle
+        },
+        {
+          key: 'Status',
+          value: this.wrapper.isPrOpenedTrigger ? 'Opened' : (this.wrapper.isPrMergedTrigger ? 'Merged' : '-')
+        },
+        {
+          key: 'Message',
+          value: this.wrapper.prMessage
+        },
+        {
+          key: 'PR Number',
+          value: this.wrapper.prNumber,
+          link: this.wrapper.prUrl
+        },
+        {
+          key: 'PR Head Repo/Branch',
+          value: this.wrapper.prHeadRepo + ' / ' + this.wrapper.prHeadBranch
+        },
+        {
+          key: 'PR Base Repo/Branch',
+          value: this.wrapper.prBaseRepo + ' / ' + this.wrapper.prBaseBranch
+        }
+      ]
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .text-center {
-    text-align: center
-  }
-
-  .header {
-    padding: 1px 10px 1px 10px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-    vertical-align: middle;
-    background-color: #E0E0E0;
-  }
+.text-center {
+  text-align: center
+}
+
+.header {
+  padding: 1px 10px 1px 10px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+  vertical-align: middle;
+  background-color: #E0E0E0;
+}
+
+.vertical-bar {
+  display: flex;
+  height: 20px;
+  border-left: 1px solid #c6c6cb;
+}
 </style>
diff --git a/src/view/Settings/System/Index.vue b/src/view/Settings/System/Index.vue
index 5cdb8f4c..09a02fcf 100644
--- a/src/view/Settings/System/Index.vue
+++ b/src/view/Settings/System/Index.vue
@@ -1,23 +1,30 @@
 <template>
   <div>
-    <v-row>
-      <v-col cols="9">
-        <v-form ref="form" lazy-validation>
+    <v-form ref="form" lazy-validation>
+      <v-row>
+        <v-col cols="8">
           <text-box label="Server URL"
+                    desc="url of flow-core-x"
                     :rules="urlRules"
                     v-model="settings.serverUrl"
           ></text-box>
-        </v-form>
-      </v-col>
-    </v-row>
+        </v-col>
+
+        <v-col cols="8">
+          <text-box label="Web URL"
+                    desc="url of flow-web-x"
+                    :rules="urlRules"
+                    v-model="settings.webUrl"
+          ></text-box>
+        </v-col>
+      </v-row>
+    </v-form>
 
     <v-row>
       <v-col cols="9" class="text-end">
         <save-btn :on-click="onSaveClick"></save-btn>
       </v-col>
     </v-row>
-
-    <v-divider></v-divider>
   </div>
 </template>
 
@@ -25,8 +32,8 @@
 import SaveBtn from '@/components/Settings/SaveBtn'
 import TextBox from '@/components/Common/TextBox'
 import actions from '@/store/actions'
-import { mapState } from 'vuex'
-import { httpUrl, required } from '@/util/rules'
+import {mapState} from 'vuex'
+import {httpUrl, required} from '@/util/rules'
 
 export default {
   name: "SystemSettingsHome",
@@ -60,7 +67,7 @@ export default {
       }
 
       this.$store.dispatch(actions.settings.save, this.settings).then(() => {
-            this.showSnackBar("Saved")
+        this.showSnackBar("Saved")
       })
     }
   }