From 2f02da1c95ad73ee0a3f64a9ff600ecf0093ce35 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Sun, 31 May 2020 10:39:20 +0530
Subject: [PATCH] config: automatic translation key migration (#370)

The new convention used:
- All lower keys
- Most keys start with `label.` prefix
- All spaces and underscores replaced with `.`

Quick ugly hack and similar for config `title`:
> IFS=$'\n'
> git grep -l "\$t('" | grep -v -e "\$t('label\." -e "\$t('message" -e "\$t('error" > ftr
> for f in $(cat ftr); do echo $f; for w in $(grep -Po '\$t\(\K[^)]*' $f | grep "^'" | grep -v -e ^\'message -e ^\'error -e ^\'label); do echo WORD IS $w; nw=$(echo $w | sed "s/$w/'label\.\L&/g" | sed "s/label\.'/label\./g" | sed "s/ /\./g" | sed "s/_/\./g"); echo $w = $nw; sed -i "s/\$t($w/\$t($nw/g" $f; done; done

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/header/ProjectMenu.vue      |   2 +-
 ui/src/components/view/DedicateData.vue       |   8 +-
 ui/src/components/view/DedicateDomain.vue     |   4 +-
 ui/src/components/view/DetailsTab.vue         |   2 +-
 ui/src/components/view/InfoCard.vue           | 106 ++++++------
 ui/src/components/view/ResourceLimitTab.vue   |   2 +-
 ui/src/components/view/ResourceView.vue       |   2 +-
 ui/src/components/view/TreeView.vue           |   2 +-
 ui/src/components/view/VmwareData.vue         |   6 +-
 ui/src/config/section/account.js              |   6 +-
 ui/src/config/section/compute.js              |  12 +-
 ui/src/config/section/config.js               |   8 +-
 ui/src/config/section/domain.js               |   8 +-
 ui/src/config/section/event.js                |   4 +-
 ui/src/config/section/image.js                |  12 +-
 ui/src/config/section/infra.js                |  10 +-
 ui/src/config/section/infra/clusters.js       |   6 +-
 ui/src/config/section/infra/hosts.js          |   6 +-
 ui/src/config/section/infra/ilbvms.js         |   2 +-
 ui/src/config/section/infra/nsp.js            |   2 +-
 ui/src/config/section/infra/phynetworks.js    |  10 +-
 ui/src/config/section/infra/pods.js           |   6 +-
 .../config/section/infra/primaryStorages.js   |   6 +-
 ui/src/config/section/infra/routers.js        |   2 +-
 .../config/section/infra/secondaryStorages.js |   4 +-
 ui/src/config/section/infra/systemVms.js      |   2 +-
 ui/src/config/section/infra/zones.js          |  16 +-
 ui/src/config/section/network.js              |  50 +++---
 ui/src/config/section/offering.js             |  20 +--
 ui/src/config/section/plugin/cloudian.js      |   2 +-
 ui/src/config/section/plugin/quota.js         |   8 +-
 ui/src/config/section/project.js              |   2 +-
 ui/src/config/section/role.js                 |   4 +-
 ui/src/config/section/user.js                 |   2 +-
 ui/src/locales/en.json                        |   6 +
 ui/src/views/AutogenView.vue                  |   4 +-
 ui/src/views/compute/AssignInstance.vue       |  20 +--
 ui/src/views/compute/BackupScheduleWizard.vue |   2 +-
 .../views/compute/CreateKubernetesCluster.vue |  28 ++--
 ui/src/views/compute/CreateSSHKeyPair.vue     |  12 +-
 ui/src/views/compute/DeployVM.vue             |  48 +++---
 ui/src/views/compute/InstanceHardware.vue     |  28 ++--
 ui/src/views/compute/KubernetesServiceTab.vue |  34 ++--
 ui/src/views/compute/MigrateWizard.vue        |  12 +-
 .../views/compute/ScaleKubernetesCluster.vue  |   8 +-
 .../compute/UpgradeKubernetesCluster.vue      |   6 +-
 .../views/compute/backup/BackupSchedule.vue   |   6 +-
 ui/src/views/compute/backup/FormSchedule.vue  |  22 +--
 .../compute/wizard/AffinityGroupSelection.vue |   4 +-
 .../wizard/ComputeOfferingSelection.vue       |   6 +-
 .../views/compute/wizard/ComputeSelection.vue |   6 +-
 .../compute/wizard/DiskOfferingSelection.vue  |  10 +-
 .../compute/wizard/DiskSizeSelection.vue      |   2 +-
 .../compute/wizard/NetworkConfiguration.vue   |  10 +-
 .../views/compute/wizard/NetworkSelection.vue |  10 +-
 .../compute/wizard/SshKeyPairSelection.vue    |  14 +-
 .../compute/wizard/TemplateIsoRadioGroup.vue  |   8 +-
 .../compute/wizard/TemplateIsoSelection.vue   |   4 +-
 ui/src/views/dashboard/UsageDashboard.vue     |   2 +-
 ui/src/views/iam/AddLdapAccount.vue           |  22 +--
 ui/src/views/iam/ChangeUserPassword.vue       |  10 +-
 ui/src/views/iam/SSLCertificateTab.vue        |  16 +-
 .../image/AddKubernetesSupportedVersion.vue   |  20 +--
 ui/src/views/image/IsoZones.vue               |  16 +-
 ui/src/views/image/RegisterOrUploadIso.vue    |  36 ++--
 .../views/image/RegisterOrUploadTemplate.vue  |  60 +++----
 ui/src/views/image/TemplateZones.vue          |  16 +-
 .../UpdateKubernetesSupportedVersion.vue      |  10 +-
 .../image/UpdateTemplateIsoPermissions.vue    |  24 +--
 ui/src/views/infra/AddPrimaryStorage.vue      |  66 ++++----
 ui/src/views/infra/AddSecondaryStorage.vue    |  30 ++--
 ui/src/views/infra/ClusterAdd.vue             |  22 +--
 ui/src/views/infra/HostAdd.vue                |  26 +--
 ui/src/views/infra/HostInfoTab.vue            |  18 +-
 ui/src/views/infra/InfraSummary.vue           |   6 +-
 ui/src/views/infra/PodAdd.vue                 |  18 +-
 .../views/infra/network/DedicatedVLANTab.vue  |  22 +--
 .../infra/network/IpRangesTabManagement.vue   |  30 ++--
 .../views/infra/network/IpRangesTabPublic.vue |  40 ++---
 .../infra/network/IpRangesTabStorage.vue      |  26 +--
 .../views/infra/network/TrafficTypesTab.vue   |   4 +-
 .../views/infra/zone/PhysicalNetworksTab.vue  |  10 +-
 ui/src/views/infra/zone/SystemVmsTab.vue      |  12 +-
 .../infra/zone/ZoneWizardAddResources.vue     |   2 +-
 ui/src/views/network/AclListRulesTab.vue      |  50 +++---
 .../network/CreateIsolatedNetworkForm.vue     |  54 +++---
 ui/src/views/network/CreateL2NetworkForm.vue  |  36 ++--
 ui/src/views/network/CreateNetwork.vue        |   6 +-
 .../views/network/CreateSharedNetworkForm.vue | 106 ++++++------
 .../network/CreateVpnCustomerGateway.vue      |  44 ++---
 ui/src/views/network/EgressRulesTab.vue       |  24 +--
 ui/src/views/network/EnableStaticNat.vue      |  16 +-
 ui/src/views/network/FirewallRules.vue        |  44 ++---
 .../network/IngressEgressRuleConfigure.vue    |  30 ++--
 .../views/network/InternalLBAssignVmForm.vue  |  20 +--
 .../views/network/InternalLBAssignedVmTab.vue |   4 +-
 ui/src/views/network/IpAddressesTab.vue       |  12 +-
 ui/src/views/network/LoadBalancing.vue        |  54 +++---
 ui/src/views/network/PortForwarding.vue       |  46 ++---
 ui/src/views/network/RoutersTab.vue           |  16 +-
 ui/src/views/network/StaticRoutesTab.vue      |   6 +-
 ui/src/views/network/VpcTab.vue               |  46 ++---
 ui/src/views/network/VpcTiersTab.vue          |  66 ++++----
 ui/src/views/offering/AddComputeOffering.vue  | 158 +++++++++---------
 ui/src/views/offering/AddDiskOffering.vue     |  92 +++++-----
 ui/src/views/offering/AddNetworkOffering.vue  | 152 ++++++++---------
 ui/src/views/offering/AddVpcOffering.vue      |  30 ++--
 .../views/offering/ImportBackupOffering.vue   |  14 +-
 .../views/offering/UpdateOfferingAccess.vue   |  10 +-
 ui/src/views/project/AccountsTab.vue          |  10 +-
 .../views/project/InvitationTokenTemplate.vue |  14 +-
 ui/src/views/project/InvitationsTemplate.vue  |  18 +-
 ui/src/views/storage/CreateVolume.vue         |  16 +-
 ui/src/views/storage/FormSchedule.vue         |  28 ++--
 ui/src/views/storage/MigrateVolume.vue        |  10 +-
 .../views/storage/RecurringSnapshotVolume.vue |   2 +-
 ui/src/views/storage/ResizeVolume.vue         |  14 +-
 .../storage/RestoreAttachBackupVolume.vue     |   8 +-
 ui/src/views/storage/ScheduledSnapshots.vue   |  10 +-
 ui/src/views/storage/TakeSnapshot.vue         |  14 +-
 ui/src/views/storage/UploadLocalVolume.vue    |  16 +-
 121 files changed, 1260 insertions(+), 1254 deletions(-)

diff --git a/ui/src/components/header/ProjectMenu.vue b/ui/src/components/header/ProjectMenu.vue
index d0a6b4ded84..dc3eb358d28 100644
--- a/ui/src/components/header/ProjectMenu.vue
+++ b/ui/src/components/header/ProjectMenu.vue
@@ -29,7 +29,7 @@
 
       <a-tooltip placement="bottom" slot="suffixIcon">
         <template slot="title">
-          <span>{{ $t('projects') }}</span>
+          <span>{{ $t('label.projects') }}</span>
         </template>
         <a-icon style="font-size: 20px; color: #999; margin-top: -5px" type="project" />
       </a-tooltip>
diff --git a/ui/src/components/view/DedicateData.vue b/ui/src/components/view/DedicateData.vue
index b35d6c9b876..9c5a93a9f3b 100644
--- a/ui/src/components/view/DedicateData.vue
+++ b/ui/src/components/view/DedicateData.vue
@@ -19,15 +19,15 @@
   <a-list-item v-if="dedicatedDomainId">
     <div>
       <div style="margin-bottom: 10px;">
-        <strong>{{ $t('dedicated') }}</strong>
+        <strong>{{ $t('label.dedicated') }}</strong>
         <div>Yes</div>
       </div>
       <p>
-        <strong>{{ $t('domainid') }}</strong><br/>
+        <strong>{{ $t('label.domainid') }}</strong><br/>
         <router-link :to="{ path: '/domain/' + dedicatedDomainId }">{{ dedicatedDomainId }}</router-link>
       </p>
       <p v-if="dedicatedAccountId">
-        <strong>{{ $t('account') }}</strong><br/>
+        <strong>{{ $t('label.account') }}</strong><br/>
         <router-link :to="{ path: '/account/' + dedicatedAccountId }">{{ dedicatedAccountId }}</router-link>
       </p>
       <a-button style="margin-top: 10px; margin-bottom: 10px;" type="danger" @click="handleRelease">
@@ -37,7 +37,7 @@
   </a-list-item>
   <a-list-item v-else>
     <div>
-      <strong>{{ $t('dedicated') }}</strong>
+      <strong>{{ $t('label.dedicated') }}</strong>
       <div>No</div>
       <a-button type="primary" style="margin-top: 10px; margin-bottom: 10px;" @click="modalActive = true">
         {{ dedicatedButtonLabel }}
diff --git a/ui/src/components/view/DedicateDomain.vue b/ui/src/components/view/DedicateDomain.vue
index 5dcf859d6c7..01d730647b2 100644
--- a/ui/src/components/view/DedicateDomain.vue
+++ b/ui/src/components/view/DedicateDomain.vue
@@ -19,8 +19,8 @@
   <div class="form">
     <div class="form__item" :class="{'error': domainError}">
       <a-spin :spinning="domainsLoading">
-        <p class="form__label">{{ $t('domain') }}<span class="required">*</span></p>
-        <p class="required required-label">{{ $t('required') }}</p>
+        <p class="form__label">{{ $t('label.domain') }}<span class="required">*</span></p>
+        <p class="required required-label">{{ $t('label.required') }}</p>
         <a-select style="width: 100%" @change="handleChangeDomain" v-model="domainId">
           <a-select-option v-for="(domain, index) in domainsList" :value="domain.id" :key="index">
             {{ domain.name }}
diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
index 418f4ef6044..be553acc3f1 100644
--- a/ui/src/components/view/DetailsTab.vue
+++ b/ui/src/components/view/DetailsTab.vue
@@ -21,7 +21,7 @@
     :dataSource="$route.meta.details">
     <a-list-item slot="renderItem" slot-scope="item" v-if="item in resource">
       <div>
-        <strong>{{ item === 'service' ? $t('supportedservices') : $t(item) }}</strong>
+        <strong>{{ item === 'service' ? $t('label.supportedservices') : $t('label.' + item) }}</strong>
         <br/>
         <div v-if="Array.isArray(resource[item]) && item === 'service'">
           <div v-for="(service, idx) in resource[item]" :key="idx">
diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue
index befda64b93b..279e9c153e3 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -50,10 +50,10 @@
                 {{ resource.hypervisor }}
               </a-tag>
               <a-tag v-if="resource.haenable">
-                {{ $t('haenable') }}
+                {{ $t('label.haenable') }}
               </a-tag>
               <a-tag v-if="resource.isdynamicallyscalable">
-                {{ $t('isdynamicallyscalable') }}
+                {{ $t('label.isdynamicallyscalable') }}
               </a-tag>
               <a-tag v-if="resource.scope">
                 {{ resource.scope }}
@@ -68,21 +68,21 @@
         <a-divider/>
 
         <div class="resource-detail-item" v-if="resource.state || resource.status">
-          <div class="resource-detail-item__label">{{ $t('status') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.status') }}</div>
           <div class="resource-detail-item__details">
             <status class="status" :text="resource.state || resource.status"/>
             <span>{{ resource.state || resource.status }}</span>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.allocationstate">
-          <div class="resource-detail-item__label">{{ $t('allocationstate') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.allocationstate') }}</div>
           <div class="resource-detail-item__details">
             <status class="status" :text="resource.allocationstate"/>
             <span>{{ resource.allocationstate }}</span>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.resourcestate">
-          <div class="resource-detail-item__label">{{ $t('resourcestate') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.resourcestate') }}</div>
           <div class="resource-detail-item__details">
             <status class="status" :text="resource.resourcestate"/>
             <span>{{ resource.resourcestate }}</span>
@@ -90,7 +90,7 @@
         </div>
 
         <div class="resource-detail-item" v-if="resource.id">
-          <div class="resource-detail-item__label">{{ $t('id') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.id') }}</div>
           <div class="resource-detail-item__details">
             <a-tooltip placement="right" >
               <template slot="title">
@@ -104,14 +104,14 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.ostypename && resource.ostypeid">
-          <div class="resource-detail-item__label">{{ $t('ostypename') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.ostypename') }}</div>
           <div class="resource-detail-item__details">
             <os-logo :osId="resource.ostypeid" :osName="resource.ostypename" size="lg" style="margin-left: -1px" />
             <span style="margin-left: 8px">{{ resource.ostypename }}</span>
           </div>
         </div>
         <div class="resource-detail-item" v-if="(resource.cpunumber && resource.cpuspeed) || resource.cputotal">
-          <div class="resource-detail-item__label">{{ $t('cpu') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.cpu') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="appstore" />
             <span v-if="resource.cpunumber && resource.cpuspeed">{{ resource.cpunumber }} CPU x {{ parseFloat(resource.cpuspeed / 1000.0).toFixed(2) }} Ghz</span>
@@ -125,7 +125,7 @@
                 size="small"
                 status="active"
                 :percent="parseFloat(resource.cpuused)"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('cpuusedghz')"
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.cpuusedghz')"
               />
             </span>
             <span v-if="resource.cpuallocated">
@@ -133,13 +133,13 @@
                 class="progress-bar"
                 size="small"
                 :percent="parseFloat(resource.cpuallocated)"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('cpuallocatedghz')"
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.cpuallocatedghz')"
               />
             </span>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.memory">
-          <div class="resource-detail-item__label">{{ $t('memory') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.memory') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="bulb" />{{ resource.memory }} MB Memory
           </div>
@@ -150,13 +150,13 @@
                 size="small"
                 status="active"
                 :percent="Number(parseFloat(100.0 * (resource.memorykbs - resource.memoryintfreekbs) / resource.memorykbs).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryusedgb')"
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.memoryusedgb')"
               />
             </span>
           </div>
         </div>
         <div class="resource-detail-item" v-else-if="resource.memorytotalgb">
-          <div class="resource-detail-item__label">{{ $t('memory') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.memory') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="bulb" />{{ resource.memorytotalgb }} Memory
           </div>
@@ -167,7 +167,7 @@
                 size="small"
                 status="active"
                 :percent="Number(parseFloat(100.0 * parseFloat(resource.memoryusedgb) / parseFloat(resource.memorytotalgb)).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryusedgb')"
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.memoryusedgb')"
               />
             </span>
             <span v-if="resource.memoryallocatedgb">
@@ -175,13 +175,13 @@
                 class="progress-bar"
                 size="small"
                 :percent="Number(parseFloat(100.0 * parseFloat(resource.memoryallocatedgb) / parseFloat(resource.memorytotalgb)).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryallocatedgb')"
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.memoryallocatedgb')"
               />
             </span>
           </div>
         </div>
         <div class="resource-detail-item" v-else-if="resource.memorytotal">
-          <div class="resource-detail-item__label">{{ $t('Memory') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.memory') }}</div>
           <div class="resource-detail-item__details">
 
             <div style="display: flex; flex-direction: column; width: 100%;">
@@ -196,7 +196,7 @@
                     size="small"
                     status="active"
                     :percent="parseFloat(resource.memoryused)"
-                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryused')" />
+                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.memoryused')" />
                 </span>
                 <span
                   v-if="resource.memoryallocated">
@@ -204,7 +204,7 @@
                     class="progress-bar"
                     size="small"
                     :percent="parseFloat(resource.memoryallocated)"
-                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryallocatedgb')" />
+                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.memoryallocatedgb')" />
                 </span>
               </div>
             </div>
@@ -212,7 +212,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.volumes || resource.sizegb">
-          <div class="resource-detail-item__label">{{ $t('disksize') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.disksize') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="hdd" />
             <span style="width: 100%;" v-if="$route.meta.name === 'vm' && resource.volumes">{{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage</span>
@@ -226,7 +226,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-else-if="resource.disksizetotalgb">
-          <div class="resource-detail-item__label">{{ $t('disksize') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.disksize') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="database" />{{ resource.disksizetotalgb }}
           </div>
@@ -237,19 +237,19 @@
                 size="small"
                 status="active"
                 :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeusedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('disksizeusedgb')" />
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.disksizeusedgb')" />
             </span>
             <span v-if="resource.disksizeallocatedgb">
               <a-progress
                 class="progress-bar"
                 size="small"
                 :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeallocatedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('disksizeallocatedgb')" />
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.disksizeallocatedgb')" />
             </span>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.nic || ('networkkbsread' in resource && 'networkkbswrite' in resource)">
-          <div class="resource-detail-item__label">{{ $t('network') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.network') }}</div>
           <div class="resource-detail-item__details resource-detail-item__details--start">
             <a-icon type="wifi" />
             <div>
@@ -270,7 +270,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.ipaddress">
-          <div class="resource-detail-item__label">{{ $t('ip') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.ip') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="environment" />
             <span v-if="resource.nic && resource.nic.length > 0">{{ resource.nic.filter(e => { return e.ipaddress }).map(e => { return e.ipaddress }).join(', ') }}</span>
@@ -284,21 +284,21 @@
         </div>
 
         <div class="resource-detail-item" v-if="resource.groupid">
-          <div class="resource-detail-item__label">{{ $t('group') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.group') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="gold" />
             <router-link :to="{ path: '/vmgroup/' + resource.groupid }">{{ resource.group || resource.groupid }}</router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.keypair">
-          <div class="resource-detail-item__label">{{ $t('keypair') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.keypair') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="key" />
             <router-link :to="{ path: '/ssh/' + resource.keypair }">{{ resource.keypair }}</router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.virtualmachineid">
-          <div class="resource-detail-item__label">{{ $t('vmname') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.vmname') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="desktop" />
             <router-link :to="{ path: '/vm/' + resource.virtualmachineid }">{{ resource.vmname || resource.vm || resource.virtualmachinename || resource.virtualmachineid }} </router-link>
@@ -306,35 +306,35 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.volumeid">
-          <div class="resource-detail-item__label">{{ $t('volume') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.volume') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="hdd" />
             <router-link :to="{ path: '/volume/' + resource.volumeid }">{{ resource.volumename || resource.volume || resource.volumeid }} </router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.associatednetworkid">
-          <div class="resource-detail-item__label">{{ $t('associatednetwork') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.associatednetwork') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="wifi" />
             <router-link :to="{ path: '/guestnetwork/' + resource.associatednetworkid }">{{ resource.associatednetworkname || resource.associatednetworkid }} </router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.guestnetworkid">
-          <div class="resource-detail-item__label">{{ $t('guestNetwork') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.guestnetwork') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="gateway" />
             <router-link :to="{ path: '/guestnetwork/' + resource.guestnetworkid }">{{ resource.guestnetworkname || resource.guestnetworkid }} </router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.vpcid">
-          <div class="resource-detail-item__label">{{ $t('vpcname') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.vpcname') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="deployment-unit" />
             <router-link :to="{ path: '/vpc/' + resource.vpcid }">{{ resource.vpcname || resource.vpcid }}</router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.affinitygroup && resource.affinitygroup.length > 0">
-          <div class="resource-detail-item__label">{{ $t('affinitygroup') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.affinitygroup') }}</div>
           <a-icon type="swap" />
           <span
             v-for="(group, index) in resource.affinitygroup"
@@ -345,14 +345,14 @@
           </span>
         </div>
         <div class="resource-detail-item" v-if="resource.templateid">
-          <div class="resource-detail-item__label">{{ $t('templatename') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.templatename') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="picture" />
             <router-link :to="{ path: '/template/' + resource.templateid }">{{ resource.templatename || resource.templateid }} </router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.serviceofferingname && resource.serviceofferingid">
-          <div class="resource-detail-item__label">{{ $t('serviceofferingname') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.serviceofferingname') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="cloud" />
             <router-link v-if="$router.resolve('/computeoffering/' + resource.serviceofferingid).route.name !== '404'" :to="{ path: '/computeoffering/' + resource.serviceofferingid }">{{ resource.serviceofferingname || resource.serviceofferingid }} </router-link>
@@ -360,7 +360,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.diskofferingname && resource.diskofferingid">
-          <div class="resource-detail-item__label">{{ $t('diskoffering') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.diskoffering') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="hdd" />
             <router-link v-if="$router.resolve('/diskoffering/' + resource.diskofferingid).route.name !== '404'" :to="{ path: '/diskoffering/' + resource.diskofferingid }">{{ resource.diskofferingname || resource.diskofferingid }} </router-link>
@@ -368,26 +368,26 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.backupofferingid">
-          <div class="resource-detail-item__label">{{ $t('backupofferingid') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.backupofferingid') }}</div>
           <a-icon type="cloud-upload" />
           <router-link :to="{ path: '/backupoffering/' + resource.backupofferingid }">{{ resource.backupofferingname || resource.backupofferingid }} </router-link>
         </div>
         <div class="resource-detail-item" v-if="resource.networkofferingid">
-          <div class="resource-detail-item__label">{{ $t('networkofferingid') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.networkofferingid') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="wifi" />
             <router-link :to="{ path: '/networkoffering/' + resource.networkofferingid }">{{ resource.networkofferingname || resource.networkofferingid }} </router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.vpcofferingid">
-          <div class="resource-detail-item__label">{{ $t('vpcoffering') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.vpcoffering') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="deployment-unit" />
             <router-link :to="{ path: '/vpcoffering/' + resource.vpcofferingid }">{{ resource.vpcofferingname || resource.vpcofferingid }} </router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.storageid">
-          <div class="resource-detail-item__label">{{ $t('storagePool') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.storagepool') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="database" />
             <router-link v-if="$router.resolve('/storagepool/' + resource.storageid).route.name !== '404'" :to="{ path: '/storagepool/' + resource.storageid }">{{ resource.storage || resource.storageid }} </router-link>
@@ -398,7 +398,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.hostid">
-          <div class="resource-detail-item__label">{{ $t('hostname') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.hostname') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="desktop" />
             <router-link v-if="$router.resolve('/host/' + resource.hostid).route.name !== '404'" :to="{ path: '/host/' + resource.hostid }">{{ resource.hostname || resource.hostid }} </router-link>
@@ -406,7 +406,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.clusterid">
-          <div class="resource-detail-item__label">{{ $t('clusterid') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.clusterid') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="cluster" />
             <router-link v-if="$router.resolve('/cluster/' + resource.clusterid).route.name !== '404'" :to="{ path: '/cluster/' + resource.clusterid }">{{ resource.clustername || resource.cluster || resource.clusterid }}</router-link>
@@ -414,7 +414,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.podid">
-          <div class="resource-detail-item__label">{{ $t('podId') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.podid') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="appstore" />
             <router-link v-if="$router.resolve('/pod/' + resource.podid).route.name !== '404'" :to="{ path: '/pod/' + resource.podid }">{{ resource.podname || resource.pod || resource.podid }}</router-link>
@@ -422,7 +422,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.zoneid">
-          <div class="resource-detail-item__label">{{ $t('zone') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.zone') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="global" />
             <router-link v-if="$router.resolve('/zone/' + resource.zoneid).route.name !== '404'" :to="{ path: '/zone/' + resource.zoneid }">{{ resource.zonename || resource.zoneid }}</router-link>
@@ -430,14 +430,14 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.account">
-          <div class="resource-detail-item__label">{{ $t('account') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.account') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="user" />
             <router-link :to="{ path: '/account', query: { name: resource.account, domainid: resource.domainid } }">{{ resource.account }}</router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.roleid">
-          <div class="resource-detail-item__label">{{ $t('role') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.role') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="idcard" />
             <router-link v-if="$router.resolve('/role/' + resource.roleid).route.name !== '404'" :to="{ path: '/role/' + resource.roleid }">{{ resource.rolename || resource.role || resource.roleid }}</router-link>
@@ -445,7 +445,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.domainid">
-          <div class="resource-detail-item__label">{{ $t('domain') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.domain') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="block" />
             <router-link v-if="$router.resolve('/domain/' + resource.domainid).route.name !== '404'" :to="{ path: '/domain/' + resource.domainid }">{{ resource.domain || resource.domainid }}</router-link>
@@ -453,7 +453,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.managementserverid">
-          <div class="resource-detail-item__label">{{ $t('Management Servers') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.management.servers') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="rocket" />
             <router-link v-if="$router.resolve('/managementserver/' + resource.managementserverid).route.name !== '404'" :to="{ path: '/managementserver/' + resource.managementserverid }">{{ resource.managementserver || resource.managementserverid }}</router-link>
@@ -461,7 +461,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.created">
-          <div class="resource-detail-item__label">{{ $t('created') }}</div>
+          <div class="resource-detail-item__label">{{ $t('label.created') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="calendar" />{{ resource.created }}
           </div>
@@ -486,10 +486,10 @@
         <div class="user-keys">
           <a-icon type="key" />
           <strong>
-            {{ $t('apikey') }}
+            {{ $t('label.apikey') }}
             <a-tooltip placement="right" >
               <template slot="title">
-                <span>Copy {{ $t('apikey') }}</span>
+                <span>Copy {{ $t('label.apikey') }}</span>
               </template>
               <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="resource.apikey">
                 <a-icon type="copy"/>
@@ -503,10 +503,10 @@
         <div class="user-keys">
           <a-icon type="lock" />
           <strong>
-            {{ $t('secretkey') }}
+            {{ $t('label.secretkey') }}
             <a-tooltip placement="right" >
               <template slot="title">
-                <span>Copy {{ $t('secretkey') }}</span>
+                <span>Copy {{ $t('label.secretkey') }}</span>
               </template>
               <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="resource.secretkey">
                 <a-icon type="copy"/>
@@ -521,7 +521,7 @@
 
       <div class="account-center-tags" v-if="resourceType && 'listTags' in $store.getters.apis">
         <a-divider/>
-        <div class="title">Tags</div>
+        <div class="title">{{ $t('label.tags') }}</div>
         <div>
           <template v-for="(tag, index) in tags">
             <a-tag :key="index" :closable="true" :afterClose="() => handleDeleteTag(tag)">
diff --git a/ui/src/components/view/ResourceLimitTab.vue b/ui/src/components/view/ResourceLimitTab.vue
index acdbc9466cc..db951dc8e68 100644
--- a/ui/src/components/view/ResourceLimitTab.vue
+++ b/ui/src/components/view/ResourceLimitTab.vue
@@ -40,7 +40,7 @@
           v-if="!($route.meta.name === 'domain' && resource.level === 0)"
           :loading="formLoading"
           type="primary"
-          @click="handleSubmit">{{ $t('submit') }}</a-button>
+          @click="handleSubmit">{{ $t('label.submit') }}</a-button>
       </div>
     </a-form>
   </a-spin>
diff --git a/ui/src/components/view/ResourceView.vue b/ui/src/components/view/ResourceView.vue
index 2eb314788d2..f3f79e279f5 100644
--- a/ui/src/components/view/ResourceView.vue
+++ b/ui/src/components/view/ResourceView.vue
@@ -41,7 +41,7 @@
           @change="onTabChange" >
           <a-tab-pane
             v-for="tab in tabs"
-            :tab="$t(tab.name)"
+            :tab="$t('label.' + tab.name)"
             :key="tab.name"
             v-if="showHideTab(tab)">
             <component :is="tab.component" :resource="resource" :loading="loading" :tab="activeTab" />
diff --git a/ui/src/components/view/TreeView.vue b/ui/src/components/view/TreeView.vue
index 7aa90b36d09..cd82a81d63d 100644
--- a/ui/src/components/view/TreeView.vue
+++ b/ui/src/components/view/TreeView.vue
@@ -59,7 +59,7 @@
           @change="onTabChange" >
           <a-tab-pane
             v-for="tab in tabs"
-            :tab="$t(tab.name)"
+            :tab="$t('label.' + tab.name)"
             :key="tab.name"
             v-if="checkShowTabDetail(tab)">
             <component
diff --git a/ui/src/components/view/VmwareData.vue b/ui/src/components/view/VmwareData.vue
index 9e23a9f045c..b5144c18dd3 100644
--- a/ui/src/components/view/VmwareData.vue
+++ b/ui/src/components/view/VmwareData.vue
@@ -19,15 +19,15 @@
   <a-list-item v-if="vmwaredc">
     <div>
       <div style="margin-bottom: 10px;">
-        <div><strong>{{ $t('vmwaredcName') }}</strong></div>
+        <div><strong>{{ $t('label.vmwaredcname') }}</strong></div>
         <div>{{ vmwaredc.name }}</div>
       </div>
       <div style="margin-bottom: 10px;">
-        <div><strong>{{ $t('vmwaredcVcenter') }}</strong></div>
+        <div><strong>{{ $t('label.vmwaredcvcenter') }}</strong></div>
         <div>{{ vmwaredc.vcenter }}</div>
       </div>
       <div style="margin-bottom: 10px;">
-        <div><strong>{{ $t('vmwaredcId') }}</strong></div>
+        <div><strong>{{ $t('label.vmwaredcid') }}</strong></div>
         <div>{{ vmwaredc.id }}</div>
       </div>
     </div>
diff --git a/ui/src/config/section/account.js b/ui/src/config/section/account.js
index f33da29a419..6dded7dd27d 100644
--- a/ui/src/config/section/account.js
+++ b/ui/src/config/section/account.js
@@ -17,14 +17,14 @@
 
 export default {
   name: 'account',
-  title: 'Accounts',
+  title: 'label.accounts',
   icon: 'team',
   permission: ['listAccounts'],
   columns: ['name', 'state', 'rolename', 'roletype', 'domain'],
   details: ['name', 'id', 'rolename', 'roletype', 'domain', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'receivedbytes', 'sentbytes', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit'],
   related: [{
     name: 'accountuser',
-    title: 'Users',
+    title: 'label.users',
     param: 'account'
   }],
   tabs: [
@@ -42,7 +42,7 @@ export default {
       component: () => import('@/components/view/ResourceLimitTab.vue')
     },
     {
-      name: 'Settings',
+      name: 'settings',
       component: () => import('@/components/view/SettingsTab.vue'),
       show: (record, route, user) => { return ['Admin'].includes(user.roletype) }
     }
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 0faec6e4311..5f39a67e987 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -341,7 +341,7 @@ export default {
     },
     {
       name: 'kubernetes',
-      title: 'Kubernetes',
+      title: 'label.kubernetes',
       icon: kubernetes,
       permission: ['listKubernetesClusters'],
       columns: ['name', 'state', 'size', 'cpunumber', 'memory', 'account', 'zonename'],
@@ -402,7 +402,7 @@ export default {
     },
     {
       name: 'vmgroup',
-      title: 'Instance Groups',
+      title: 'label.instance.groups',
       icon: 'gold',
       docHelp: 'adminguide/virtual_machines.html#changing-the-vm-name-os-or-group',
       permission: ['listInstanceGroups'],
@@ -438,7 +438,7 @@ export default {
     },
     {
       name: 'ssh',
-      title: 'SSH Key Pairs',
+      title: 'label.ssh.key.pairs',
       icon: 'key',
       docHelp: 'adminguide/virtual_machines.html#using-ssh-keys-for-authentication',
       permission: ['listSSHKeyPairs'],
@@ -446,7 +446,7 @@ export default {
       details: ['name', 'fingerprint', 'account', 'domain'],
       related: [{
         name: 'vm',
-        title: 'Instances',
+        title: 'label.instances',
         param: 'keypair'
       }],
       actions: [
@@ -480,7 +480,7 @@ export default {
     },
     {
       name: 'affinitygroup',
-      title: 'Affinity Groups',
+      title: 'label.affinity.groups',
       icon: 'swap',
       docHelp: 'adminguide/virtual_machines.html#affinity-groups',
       permission: ['listAffinityGroups'],
@@ -488,7 +488,7 @@ export default {
       details: ['name', 'id', 'description', 'type', 'account', 'domain'],
       related: [{
         name: 'vm',
-        title: 'Instances',
+        title: 'label.instances',
         param: 'affinitygroupid'
       }],
       actions: [
diff --git a/ui/src/config/section/config.js b/ui/src/config/section/config.js
index f1aa907f0ba..bd640785c6b 100644
--- a/ui/src/config/section/config.js
+++ b/ui/src/config/section/config.js
@@ -17,13 +17,13 @@
 
 export default {
   name: 'config',
-  title: 'Configuration',
+  title: 'label.configuration',
   icon: 'setting',
   permission: ['listConfigurations'],
   children: [
     {
       name: 'globalsetting',
-      title: 'Global Settings',
+      title: 'label.global.settings',
       icon: 'setting',
       permission: ['listConfigurations'],
       columns: ['name', 'description', 'category', 'value', 'actions'],
@@ -31,7 +31,7 @@ export default {
     },
     {
       name: 'ldapsetting',
-      title: 'LDAP Configuration',
+      title: 'label.ldap.configuration',
       icon: 'team',
       permission: ['listLdapConfigurations'],
       columns: ['hostname', 'port', 'domainid'],
@@ -62,7 +62,7 @@ export default {
     },
     {
       name: 'hypervisorcapability',
-      title: 'Hypervisor Capabilities',
+      title: 'label.hypervisor.capabilities',
       icon: 'database',
       permission: ['listHypervisorCapabilities'],
       columns: ['hypervisor', 'hypervisorversion', 'maxguestslimit', 'maxdatavolumeslimit', 'maxhostspercluster'],
diff --git a/ui/src/config/section/domain.js b/ui/src/config/section/domain.js
index 8f646a742c0..b833cda1308 100644
--- a/ui/src/config/section/domain.js
+++ b/ui/src/config/section/domain.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'domain',
-  title: 'Domains',
+  title: 'label.domains',
   icon: 'block',
   permission: ['listDomains', 'listDomainChildren'],
   resourceType: 'Domain',
@@ -25,12 +25,12 @@ export default {
   details: ['name', 'id', 'path', 'parentdomainname', 'level', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit'],
   related: [{
     name: 'account',
-    title: 'Accounts',
+    title: 'label.accounts',
     param: 'domainid'
   }],
   tabs: [
     {
-      name: 'Domain',
+      name: 'domain',
       component: () => import('@/components/view/InfoCard.vue'),
       show: (record, route) => { return route.path === '/domain' }
     },
@@ -44,7 +44,7 @@ export default {
       component: () => import('@/components/view/ResourceLimitTab.vue')
     },
     {
-      name: 'Settings',
+      name: 'settings',
       component: () => import('@/components/view/SettingsTab.vue'),
       show: (record, route, user) => { return ['Admin'].includes(user.roletype) }
     }
diff --git a/ui/src/config/section/event.js b/ui/src/config/section/event.js
index 24d5ed7386d..43b4738949a 100644
--- a/ui/src/config/section/event.js
+++ b/ui/src/config/section/event.js
@@ -17,14 +17,14 @@
 
 export default {
   name: 'event',
-  title: 'Events',
+  title: 'label.events',
   icon: 'schedule',
   permission: ['listEvents'],
   columns: ['username', 'description', 'state', 'level', 'type', 'account', 'domain', 'created'],
   details: ['username', 'id', 'description', 'state', 'level', 'type', 'account', 'domain', 'created'],
   related: [{
     name: 'event',
-    title: 'Event Timeline',
+    title: 'label.event.timeline',
     param: 'startid'
   }],
   actions: [
diff --git a/ui/src/config/section/image.js b/ui/src/config/section/image.js
index 9b0276eb721..fc19e7ae2e4 100644
--- a/ui/src/config/section/image.js
+++ b/ui/src/config/section/image.js
@@ -19,12 +19,12 @@ import kubernetes from '@/assets/icons/kubernetes.svg?inline'
 
 export default {
   name: 'image',
-  title: 'Images',
+  title: 'label.images',
   icon: 'picture',
   children: [
     {
       name: 'template',
-      title: 'Templates',
+      title: 'label.templates',
       icon: 'save',
       permission: ['listTemplates'],
       params: { templatefilter: 'self' },
@@ -34,7 +34,7 @@ export default {
       details: ['name', 'id', 'displaytext', 'checksum', 'hypervisor', 'format', 'ostypename', 'size', 'isready', 'passwordenabled', 'directdownload', 'isextractable', 'isdynamicallyscalable', 'ispublic', 'isfeatured', 'crosszones', 'type', 'account', 'domain', 'created'],
       related: [{
         name: 'vm',
-        title: 'Instances',
+        title: 'label.instances',
         param: 'templateid'
       }],
       tabs: [{
@@ -101,7 +101,7 @@ export default {
     },
     {
       name: 'iso',
-      title: 'ISOs',
+      title: 'label.isos',
       icon: 'usb',
       permission: ['listIsos'],
       params: { isofilter: 'self' },
@@ -111,7 +111,7 @@ export default {
       details: ['name', 'id', 'displaytext', 'checksum', 'ostypename', 'size', 'bootable', 'isready', 'directdownload', 'isextractable', 'ispublic', 'isfeatured', 'crosszones', 'account', 'domain', 'created'],
       related: [{
         name: 'vm',
-        title: 'Instances',
+        title: 'label.instances',
         param: 'isoid'
       }],
       tabs: [{
@@ -176,7 +176,7 @@ export default {
     },
     {
       name: 'kubernetesiso',
-      title: 'Kubernetes ISOs',
+      title: 'label.kubernetes.isos',
       icon: kubernetes,
       permission: ['listKubernetesSupportedVersions'],
       columns: ['name', 'state', 'semanticversion', 'isostate', 'mincpunumber', 'minmemory', 'zonename'],
diff --git a/ui/src/config/section/infra.js b/ui/src/config/section/infra.js
index dc09f6898d8..25989e7b016 100644
--- a/ui/src/config/section/infra.js
+++ b/ui/src/config/section/infra.js
@@ -29,13 +29,13 @@ import ilbvms from '@/config/section/infra/ilbvms'
 
 export default {
   name: 'infra',
-  title: 'Infrastructure',
+  title: 'label.infrastructure',
   icon: 'bank',
   permission: ['listInfrastructure'],
   children: [
     {
       name: 'infrasummary',
-      title: 'Summary',
+      title: 'label.summary',
       icon: 'read',
       permission: ['listInfrastructure'],
       component: () => import('@/views/infra/InfraSummary.vue')
@@ -53,7 +53,7 @@ export default {
     ilbvms,
     {
       name: 'cpusocket',
-      title: 'CPU Sockets',
+      title: 'label.cpu.sockets',
       icon: 'inbox',
       permission: ['listHosts'],
       params: { type: 'routing' },
@@ -61,14 +61,14 @@ export default {
     },
     {
       name: 'managementserver',
-      title: 'Management Servers',
+      title: 'label.management.servers',
       icon: 'rocket',
       permission: ['listManagementServers'],
       columns: ['name', 'state', 'version']
     },
     {
       name: 'alert',
-      title: 'Alerts',
+      title: 'label.alerts',
       icon: 'flag',
       permission: ['listAlerts'],
       columns: ['name', 'description', 'type', 'sent'],
diff --git a/ui/src/config/section/infra/clusters.js b/ui/src/config/section/infra/clusters.js
index 05f4f32ac9a..5e51fb1f82f 100644
--- a/ui/src/config/section/infra/clusters.js
+++ b/ui/src/config/section/infra/clusters.js
@@ -17,21 +17,21 @@
 
 export default {
   name: 'cluster',
-  title: 'Clusters',
+  title: 'label.clusters',
   icon: 'cluster',
   permission: ['listClustersMetrics'],
   columns: ['name', 'state', 'allocationstate', 'clustertype', 'hypervisortype', 'hosts', 'cpuused', 'cpumaxdeviation', 'cpuallocated', 'cputotal', 'memoryused', 'memorymaxdeviation', 'memoryallocated', 'memorytotal', 'podname', 'zonename'],
   details: ['name', 'id', 'allocationstate', 'clustertype', 'hypervisortype', 'podname', 'zonename'],
   related: [{
     name: 'host',
-    title: 'Hosts',
+    title: 'label.hosts',
     param: 'clusterid'
   }],
   tabs: [{
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
   }, {
-    name: 'Settings',
+    name: 'settings',
     component: () => import('@/components/view/SettingsTab.vue')
   }],
   actions: [
diff --git a/ui/src/config/section/infra/hosts.js b/ui/src/config/section/infra/hosts.js
index acf3f7ff560..9c5373d6bfb 100644
--- a/ui/src/config/section/infra/hosts.js
+++ b/ui/src/config/section/infra/hosts.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'host',
-  title: 'Hosts',
+  title: 'label.hosts',
   icon: 'desktop',
   permission: ['listHostsMetrics'],
   resourceType: 'Host',
@@ -28,12 +28,12 @@ export default {
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
   }, {
-    name: 'Config',
+    name: 'config',
     component: () => import('@/views/infra/HostInfoTab.vue')
   }],
   related: [{
     name: 'vm',
-    title: 'Instances',
+    title: 'label.instances',
     param: 'hostid'
   }],
   actions: [
diff --git a/ui/src/config/section/infra/ilbvms.js b/ui/src/config/section/infra/ilbvms.js
index 2cf7cb471b2..e000d69e2d7 100644
--- a/ui/src/config/section/infra/ilbvms.js
+++ b/ui/src/config/section/infra/ilbvms.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'ilbvm',
-  title: 'Internal LB VMs',
+  title: 'label.internal.lb',
   icon: 'share-alt',
   permission: ['listInternalLoadBalancerVMs'],
   params: { projectid: '-1' },
diff --git a/ui/src/config/section/infra/nsp.js b/ui/src/config/section/infra/nsp.js
index 7cc286006a7..6d3175617cd 100644
--- a/ui/src/config/section/infra/nsp.js
+++ b/ui/src/config/section/infra/nsp.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'nsp',
-  title: 'Network Service Providers',
+  title: 'label.network.service.providers',
   icon: 'compass',
   hidden: true,
   permission: ['listNetworkServiceProviders'],
diff --git a/ui/src/config/section/infra/phynetworks.js b/ui/src/config/section/infra/phynetworks.js
index fa2e7c8203e..63730126962 100644
--- a/ui/src/config/section/infra/phynetworks.js
+++ b/ui/src/config/section/infra/phynetworks.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'physicalnetwork',
-  title: 'Physical Networks',
+  title: 'label.physical.networks',
   icon: 'api',
   hidden: true,
   permission: ['listPhysicalNetworks'],
@@ -27,18 +27,18 @@ export default {
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
   }, {
-    name: 'Traffic Types',
+    name: 'traffic.types',
     component: () => import('@/views/infra/network/TrafficTypesTab.vue')
   }, {
-    name: 'Service Providers',
+    name: 'network.service.providers',
     component: () => import('@/views/infra/network/ServiceProvidersTab.vue')
   }, {
-    name: 'Dedicated VLAN/VNI Ranges',
+    name: 'dedicated.vlan.vni.ranges',
     component: () => import('@/views/infra/network/DedicatedVLANTab.vue')
   }],
   related: [{
     name: 'guestnetwork',
-    title: 'Networks',
+    title: 'label.networks',
     param: 'physicalnetworkid'
   }],
   actions: [
diff --git a/ui/src/config/section/infra/pods.js b/ui/src/config/section/infra/pods.js
index c46ad2e672b..e8c8ebc0dc0 100644
--- a/ui/src/config/section/infra/pods.js
+++ b/ui/src/config/section/infra/pods.js
@@ -17,18 +17,18 @@
 
 export default {
   name: 'pod',
-  title: 'Pods',
+  title: 'label.pods',
   icon: 'appstore',
   permission: ['listPods'],
   columns: ['name', 'allocationstate', 'gateway', 'netmask', 'zonename'],
   details: ['name', 'id', 'allocationstate', 'netmask', 'gateway', 'zonename'],
   related: [{
     name: 'cluster',
-    title: 'Clusters',
+    title: 'label.clusters',
     param: 'podid'
   }, {
     name: 'host',
-    title: 'Hosts',
+    title: 'label.hosts',
     param: 'podid'
   }],
   actions: [
diff --git a/ui/src/config/section/infra/primaryStorages.js b/ui/src/config/section/infra/primaryStorages.js
index ecbe7a6b882..a4e209a887a 100644
--- a/ui/src/config/section/infra/primaryStorages.js
+++ b/ui/src/config/section/infra/primaryStorages.js
@@ -17,21 +17,21 @@
 
 export default {
   name: 'storagepool',
-  title: 'Primary Storage',
+  title: 'label.primary.storage',
   icon: 'database',
   permission: ['listStoragePoolsMetrics'],
   columns: ['name', 'state', 'ipaddress', 'type', 'path', 'scope', 'disksizeusedgb', 'disksizetotalgb', 'disksizeallocatedgb', 'disksizeunallocatedgb', 'clustername', 'zonename'],
   details: ['name', 'id', 'ipaddress', 'type', 'scope', 'tags', 'path', 'provider', 'hypervisor', 'overprovisionfactor', 'disksizetotal', 'disksizeallocated', 'disksizeused', 'clustername', 'podname', 'zonename', 'created'],
   related: [{
     name: 'volume',
-    title: 'Volumes',
+    title: 'label.volumes',
     param: 'storageid'
   }],
   tabs: [{
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
   }, {
-    name: 'Settings',
+    name: 'settings',
     component: () => import('@/components/view/SettingsTab.vue')
   }],
   actions: [
diff --git a/ui/src/config/section/infra/routers.js b/ui/src/config/section/infra/routers.js
index adec638e734..0ba9d32e241 100644
--- a/ui/src/config/section/infra/routers.js
+++ b/ui/src/config/section/infra/routers.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'router',
-  title: 'Virtual Routers',
+  title: 'label.virtual.routers',
   icon: 'fork',
   permission: ['listRouters'],
   params: { projectid: '-1' },
diff --git a/ui/src/config/section/infra/secondaryStorages.js b/ui/src/config/section/infra/secondaryStorages.js
index ffd8245b84e..0359a526209 100644
--- a/ui/src/config/section/infra/secondaryStorages.js
+++ b/ui/src/config/section/infra/secondaryStorages.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'imagestore',
-  title: 'Secondary Storages',
+  title: 'label.secondary.storage',
   icon: 'picture',
   permission: ['listImageStores'],
   columns: ['name', 'url', 'protocol', 'scope', 'zonename'],
@@ -26,7 +26,7 @@ export default {
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
   }, {
-    name: 'Settings',
+    name: 'settings',
     component: () => import('@/components/view/SettingsTab.vue')
   }],
   actions: [
diff --git a/ui/src/config/section/infra/systemVms.js b/ui/src/config/section/infra/systemVms.js
index b02f833bc65..60429aaea80 100644
--- a/ui/src/config/section/infra/systemVms.js
+++ b/ui/src/config/section/infra/systemVms.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'systemvm',
-  title: 'System VMs',
+  title: 'label.system.vms',
   icon: 'thunderbolt',
   permission: ['listSystemVms'],
   columns: ['name', 'state', 'agentstate', 'systemvmtype', 'publicip', 'privateip', 'linklocalip', 'hostname', 'zonename'],
diff --git a/ui/src/config/section/infra/zones.js b/ui/src/config/section/infra/zones.js
index 211103faa0d..fdd75a2b3c4 100644
--- a/ui/src/config/section/infra/zones.js
+++ b/ui/src/config/section/infra/zones.js
@@ -17,40 +17,40 @@
 
 export default {
   name: 'zone',
-  title: 'Zones',
+  title: 'label.zones',
   icon: 'global',
   permission: ['listZonesMetrics'],
   columns: ['name', 'state', 'allocationstate', 'networktype', 'clusters', 'cpuused', 'cpumaxdeviation', 'cpuallocated', 'cputotal', 'memoryused', 'memorymaxdeviation', 'memoryallocated', 'memorytotal', 'order'],
   details: ['name', 'id', 'allocationstate', 'networktype', 'guestcidraddress', 'localstorageenabled', 'securitygroupsenabled', 'dns1', 'dns2', 'internaldns1', 'internaldns2'],
   related: [{
     name: 'pod',
-    title: 'Pods',
+    title: 'label.pods',
     param: 'zoneid'
   }, {
     name: 'cluster',
-    title: 'Clusters',
+    title: 'label.clusters',
     param: 'zoneid'
   }, {
     name: 'host',
-    title: 'Hosts',
+    title: 'label.hosts',
     param: 'zoneid'
   }, {
     name: 'storagepool',
-    title: 'Primate Storage',
+    title: 'label.primate.storage',
     param: 'zoneid'
   }, {
     name: 'imagestore',
-    title: 'Secondary Storage',
+    title: 'label.secondary.storage',
     param: 'zoneid'
   }],
   tabs: [{
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
   }, {
-    name: 'Physical Networks',
+    name: 'physical.networks',
     component: () => import('@/views/infra/zone/PhysicalNetworksTab.vue')
   }, {
-    name: 'System VMs',
+    name: 'system.vms',
     component: () => import('@/views/infra/zone/SystemVmsTab.vue')
   }, {
     name: 'resources',
diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index 2b7fb48bd5a..a87761f2a9c 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -39,15 +39,15 @@ export default {
         name: 'details',
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
-        name: 'Egress Rules',
+        name: 'egress.rules',
         component: () => import('@/views/network/EgressRulesTab.vue'),
         show: (record) => { return record.type === 'Isolated' && 'listEgressFirewallRules' in store.getters.apis }
       }, {
-        name: 'Public IP Addresses',
+        name: 'public.ip.addresses',
         component: () => import('@/views/network/IpAddressesTab.vue'),
         show: (record) => { return record.type === 'Isolated' && 'listPublicIpAddresses' in store.getters.apis }
       }, {
-        name: 'Virtual Routers',
+        name: 'virtual.routers',
         component: () => import('@/views/network/RoutersTab.vue'),
         show: (record) => { return (record.type === 'Isolated' || record.type === 'Shared') && 'listRouters' in store.getters.apis }
       }],
@@ -109,19 +109,19 @@ export default {
       details: ['name', 'id', 'displaytext', 'cidr', 'networkdomain', 'ispersistent', 'redundantvpcrouter', 'restartrequired', 'zonename', 'account', 'domain'],
       related: [{
         name: 'vm',
-        title: 'Instances',
+        title: 'label.instances',
         param: 'vpcid'
       }, {
         name: 'router',
-        title: 'Virtual Routers',
+        title: 'label.virtual.routers',
         param: 'vpcid'
       }, {
         name: 'ilbvm',
-        title: 'Internal LB VMs',
+        title: 'label.internal.lb.vms',
         param: 'vpcid'
       }],
       tabs: [{
-        name: 'VPC',
+        name: 'vpc',
         component: () => import('@/views/network/VpcTab.vue')
       }],
       actions: [
@@ -156,7 +156,7 @@ export default {
     },
     {
       name: 'securitygroups',
-      title: 'Security Groups',
+      title: 'label.security.groups',
       icon: 'fire',
       permission: ['listSecurityGroups'],
       resourceType: 'SecurityGroup',
@@ -166,10 +166,10 @@ export default {
         name: 'details',
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
-        name: 'Ingress Rule',
+        name: 'ingress.rule',
         component: () => import('@/views/network/IngressEgressRuleConfigure.vue')
       }, {
-        name: 'Egress Rule',
+        name: 'egress.rule',
         component: () => import('@/views/network/IngressEgressRuleConfigure.vue')
       }],
       actions: [
@@ -191,7 +191,7 @@ export default {
     },
     {
       name: 'publicip',
-      title: 'Public IP Addresses',
+      title: 'label.public.ip.addresses',
       icon: 'environment',
       permission: ['listPublicIpAddresses'],
       resourceType: 'PublicIpAddress',
@@ -201,19 +201,19 @@ export default {
         name: 'details',
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
-        name: 'Firewall',
+        name: 'firewall',
         component: () => import('@/views/network/FirewallRules.vue'),
         networkServiceFilter: networkService => networkService.filter(x => x.name === 'Firewall').length > 0
       }, {
-        name: 'Port Forwarding',
+        name: 'portforwarding',
         component: () => import('@/views/network/PortForwarding.vue'),
         networkServiceFilter: networkService => networkService.filter(x => x.name === 'PortForwarding').length > 0
       }, {
-        name: 'Load Balancing',
+        name: 'loadbalancing',
         component: () => import('@/views/network/LoadBalancing.vue'),
         networkServiceFilter: networkService => networkService.filter(x => x.name === 'Lb').length > 0
       }, {
-        name: 'VPN',
+        name: 'vpn',
         component: () => import('@/views/network/VpnDetails.vue'),
         show: (record) => { return record.issourcenat }
       }],
@@ -258,7 +258,7 @@ export default {
     },
     {
       name: 'privategw',
-      title: 'Private Gateway',
+      title: 'label.private.gateway',
       icon: 'branches',
       hidden: true,
       permission: ['listPrivateGateways'],
@@ -268,7 +268,7 @@ export default {
         name: 'details',
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
-        name: 'Static Routes',
+        name: 'static.routes',
         component: () => import('@/views/network/StaticRoutesTab.vue'),
         show: () => true
       }],
@@ -311,7 +311,7 @@ export default {
     },
     {
       name: 's2svpn',
-      title: 'Site-to-Site VPNs',
+      title: 'label.site-to-site.vpns',
       icon: 'lock',
       hidden: true,
       permission: ['listVpnGateways'],
@@ -335,7 +335,7 @@ export default {
     },
     {
       name: 's2svpnconn',
-      title: 'Site-to-Site VPN Connections',
+      title: 'label.site-to-site.vpn.connections',
       icon: 'sync',
       hidden: true,
       permission: ['listVpnConnections'],
@@ -373,7 +373,7 @@ export default {
     },
     {
       name: 'acllist',
-      title: 'Network ACL Lists',
+      title: 'label.network.acl.lists',
       icon: 'bars',
       hidden: true,
       permission: ['listNetworkACLLists'],
@@ -383,7 +383,7 @@ export default {
         name: 'details',
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
-        name: 'ACL List Rules',
+        name: 'acl.list.rules',
         component: () => import('@/views/network/AclListRulesTab.vue'),
         show: () => true
       }],
@@ -412,7 +412,7 @@ export default {
     },
     {
       name: 'ilb',
-      title: 'Internal LB',
+      title: 'label.internal.lb',
       icon: 'share-alt',
       hidden: true,
       permission: ['listLoadBalancers'],
@@ -422,7 +422,7 @@ export default {
         name: 'details',
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
-        name: 'Assigned VMs',
+        name: 'loadbalancerinstance',
         component: () => import('@/views/network/InternalLBAssignedVmTab.vue'),
         show: () => true
       }],
@@ -468,7 +468,7 @@ export default {
     },
     {
       name: 'vpnuser',
-      title: 'VPN Users',
+      title: 'label.vpn.users',
       icon: 'user',
       permission: ['listVpnUsers'],
       columns: ['username', 'state', 'account', 'domain'],
@@ -503,7 +503,7 @@ export default {
     },
     {
       name: 'vpncustomergateway',
-      title: 'VPN Customer Gateway',
+      title: 'label.vpncustomergatewayid',
       icon: 'lock',
       permission: ['listVpnCustomerGateways'],
       columns: ['name', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain'],
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
index b4c53b82881..dfc7501686d 100644
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@@ -17,13 +17,13 @@
 
 export default {
   name: 'offering',
-  title: 'Offerings',
+  title: 'label.menu.service.offerings',
   icon: 'shopping',
   permission: ['listServiceOfferings', 'listDiskOfferings', 'listDomains'],
   children: [
     {
       name: 'computeoffering',
-      title: 'Compute Offerings',
+      title: 'label.compute.offerings',
       icon: 'cloud',
       permission: ['listServiceOfferings', 'listDomains'],
       params: { isrecursive: 'true' },
@@ -31,7 +31,7 @@ export default {
       details: ['name', 'id', 'displaytext', 'offerha', 'provisioningtype', 'storagetype', 'iscustomized', 'limitcpuuse', 'cpunumber', 'cpuspeed', 'memory', 'tags', 'domain', 'zone', 'created'],
       related: [{
         name: 'vm',
-        title: 'Instances',
+        title: 'label.instances',
         param: 'serviceofferingid'
       }],
       actions: [{
@@ -63,7 +63,7 @@ export default {
     },
     {
       name: 'systemoffering',
-      title: 'System Offerings',
+      title: 'label.system.offerings',
       icon: 'setting',
       permission: ['listServiceOfferings', 'listInfrastructure'],
       params: { issystem: 'true', isrecursive: 'true' },
@@ -94,7 +94,7 @@ export default {
     },
     {
       name: 'diskoffering',
-      title: 'Disk Offerings',
+      title: 'label.disk.offerings',
       icon: 'hdd',
       permission: ['listDiskOfferings', 'listDomains'],
       params: { isrecursive: 'true' },
@@ -102,7 +102,7 @@ export default {
       details: ['name', 'id', 'displaytext', 'disksize', 'provisioningtype', 'storagetype', 'iscustomized', 'tags', 'domain', 'zone', 'created'],
       related: [{
         name: 'volume',
-        title: 'Volumes',
+        title: 'label.volumes',
         param: 'diskofferingid'
       }],
       actions: [{
@@ -134,7 +134,7 @@ export default {
     },
     {
       name: 'backupoffering',
-      title: 'Backup Offerings',
+      title: 'label.backup.offerings',
       icon: 'cloud-upload',
       permission: ['listBackupOfferings', 'listInfrastructure'],
       columns: ['name', 'description', 'zoneid'],
@@ -155,7 +155,7 @@ export default {
     },
     {
       name: 'networkoffering',
-      title: 'Network Offerings',
+      title: 'label.network.offerings',
       icon: 'wifi',
       permission: ['listNetworkOfferings', 'listInfrastructure'],
       params: { isrecursive: 'true' },
@@ -219,7 +219,7 @@ export default {
     },
     {
       name: 'vpcoffering',
-      title: 'VPC Offerings',
+      title: 'label.vpc.offerings',
       icon: 'deployment-unit',
       permission: ['listVPCOfferings', 'listInfrastructure'],
       params: { isrecursive: 'true' },
@@ -228,7 +228,7 @@ export default {
       details: ['name', 'id', 'displaytext', 'distributedvpcrouter', 'tags', 'service', 'domain', 'zone', 'created'],
       related: [{
         name: 'vpc',
-        title: 'VPCs',
+        title: 'label.vpcs',
         param: 'vpcofferingid'
       }],
       actions: [{
diff --git a/ui/src/config/section/plugin/cloudian.js b/ui/src/config/section/plugin/cloudian.js
index 101c70d2c11..24f8d2009b9 100644
--- a/ui/src/config/section/plugin/cloudian.js
+++ b/ui/src/config/section/plugin/cloudian.js
@@ -19,7 +19,7 @@ import cloudian from '@/assets/icons/cloudian.svg?inline'
 
 export default {
   name: 'cloudian',
-  title: 'Cloudian Storage',
+  title: 'label.cloudian.storage',
   icon: cloudian,
   permission: ['cloudianSsoLogin'],
   component: () => import('@/views/plugins/CloudianPlugin.vue')
diff --git a/ui/src/config/section/plugin/quota.js b/ui/src/config/section/plugin/quota.js
index b4fff921763..2776959b397 100644
--- a/ui/src/config/section/plugin/quota.js
+++ b/ui/src/config/section/plugin/quota.js
@@ -17,13 +17,13 @@
 
 export default {
   name: 'quota',
-  title: 'Quota',
+  title: 'label.quota',
   icon: 'pie-chart',
   permission: ['quotaSummary'],
   children: [
     {
       name: 'quotasummary',
-      title: 'Summary',
+      title: 'label.summary',
       icon: 'bars',
       permission: ['quotaSummary'],
       columns: ['account', 'domain', 'state', 'currency', 'balance', 'quota'],
@@ -31,7 +31,7 @@ export default {
     },
     {
       name: 'quotatariff',
-      title: 'Tariff',
+      title: 'label.tariff',
       icon: 'credit-card',
       permission: ['quotaTariffList'],
       columns: ['usageName', 'description', 'usageUnit', 'tariffValue'],
@@ -39,7 +39,7 @@ export default {
     },
     {
       name: 'quotaemailtemplate',
-      title: 'Email Template',
+      title: 'label.email.template',
       icon: 'mail',
       permission: ['quotaEmailTemplateList'],
       columns: ['templatetype', 'templatesubject', 'templatebody'],
diff --git a/ui/src/config/section/project.js b/ui/src/config/section/project.js
index 4d471c486f9..a0334e7abb7 100644
--- a/ui/src/config/section/project.js
+++ b/ui/src/config/section/project.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'project',
-  title: 'Projects',
+  title: 'label.projects',
   icon: 'project',
   permission: ['listProjects'],
   resourceType: 'Project',
diff --git a/ui/src/config/section/role.js b/ui/src/config/section/role.js
index 0aa5d64aea2..a4a0a077994 100644
--- a/ui/src/config/section/role.js
+++ b/ui/src/config/section/role.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'role',
-  title: 'Roles',
+  title: 'label.roles',
   icon: 'idcard',
   permission: ['listRoles', 'listRolePermissions'],
   columns: ['name', 'type', 'description'],
@@ -26,7 +26,7 @@ export default {
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
   }, {
-    name: 'Rules',
+    name: 'rules',
     component: () => import('@/views/iam/RolePermissionTab.vue')
   }],
   actions: [
diff --git a/ui/src/config/section/user.js b/ui/src/config/section/user.js
index 480c29948f1..e58d65e2fdb 100644
--- a/ui/src/config/section/user.js
+++ b/ui/src/config/section/user.js
@@ -17,7 +17,7 @@
 
 export default {
   name: 'accountuser',
-  title: 'Users',
+  title: 'label.users',
   icon: 'user',
   hidden: true,
   permission: ['listUsers'],
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 11d3a79cdeb..f1f04b22586 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -428,6 +428,7 @@
 "label.available.public.ips": "Available Public IP Addresses",
 "label.back": "Back",
 "label.backup": "Backups",
+"label.backup.offerings": "Backup Offerings",
 "label.backup.offering.assign": "Assign VM to backup offering",
 "label.backup.offering.remove": "Remove VM from backup offering",
 "label.backup.restore": "Restore VM Backup",
@@ -921,6 +922,7 @@
 "label.ikehash": "IKE Hash",
 "label.ikelifetime": "IKE lifetime (second)",
 "label.ikepolicy": "IKE policy",
+"label.images": "Images",
 "label.import.backup.offering": "Import Backup Offering",
 "label.info": "Info",
 "label.info.upper": "INFO",
@@ -949,6 +951,7 @@
 "label.instancename": "Internal name",
 "label.instanceport": "Instance Port",
 "label.instances": "Instances",
+"label.instance.groups": "Instance Groups",
 "label.instanciate.template.associate.profile.blade": "Instanciate Template and Associate Profile to Blade",
 "label.intermediate.certificate": "Intermediate certificate {0}",
 "label.internal.dns.1": "Internal DNS 1",
@@ -1046,6 +1049,7 @@
 "label.keyboard": "Keyboard language",
 "label.keyboardtype": "Keyboard type",
 "label.keypair": "SSH Key Pair",
+"label.kubernetes": "Kubernetes",
 "label.kubernetes.cluster": "Kubernetes cluster",
 "label.kubernetes.cluster.create": "Create Kubernetes Cluster",
 "label.kubernetes.cluster.delete": "Delete Kubernetes Cluster",
@@ -1054,6 +1058,7 @@
 "label.kubernetes.cluster.start": "Start Kubernetes Cluster",
 "label.kubernetes.cluster.stop": "Stop Kubernetes Cluster",
 "label.kubernetes.cluster.upgrade": "Upgrade Kubernetes Cluster",
+"label.kubernetes.isos": "Kubernetes ISOs",
 "label.kubernetes.service": "Kubernetes Service",
 "label.kubernetes.version.add": "Add Kubernetes Version",
 "label.kubernetes.version.delete": "Delete Kubernetes Version",
@@ -1815,6 +1820,7 @@
 "label.submitted.by": "[Submitted by: <span id=\"submitted_by\"></span>]",
 "label.succeeded": "Succeeded",
 "label.suitability": "Suitability",
+"label.summary": "Summary",
 "label.sunday": "Sunday",
 "label.supportedservices": "Supported Services",
 "label.supportspublicaccess": "Supports Public Access",
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 470cdf3115e..0b34d31f47b 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -50,12 +50,12 @@
             <a-select
               v-if="filters && filters.length > 0"
               placeholder="Filter By"
-              :value="$t(selectedFilter)"
+              :value="$t('label.' + selectedFilter)"
               style="min-width: 100px; margin-left: 10px"
               @change="changeFilter">
               <a-icon slot="suffixIcon" type="filter" />
               <a-select-option v-for="filter in filters" :key="filter">
-                {{ $t(filter) }}
+                {{ $t('label.' + filter) }}
               </a-select-option>
             </a-select>
             <a-input-search
diff --git a/ui/src/views/compute/AssignInstance.vue b/ui/src/views/compute/AssignInstance.vue
index 0798d5f304b..99519a4e753 100644
--- a/ui/src/views/compute/AssignInstance.vue
+++ b/ui/src/views/compute/AssignInstance.vue
@@ -26,15 +26,15 @@
       </div>
 
       <div class="form__item">
-        <p class="form__label">{{ $t('accounttype') }}</p>
+        <p class="form__label">{{ $t('label.accounttype') }}</p>
         <a-select v-model="selectedAccountType" defaultValue="account">
-          <a-select-option :value="$t('account')">{{ $t('account') }}</a-select-option>
-          <a-select-option :value="$t('project')">{{ $t('project') }}</a-select-option>
+          <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
+          <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
         </a-select>
       </div>
 
       <div class="form__item">
-        <p class="form__label"><span class="required">*</span>{{ $t('domain') }}</p>
+        <p class="form__label"><span class="required">*</span>{{ $t('label.domain') }}</p>
         <a-select @change="changeDomain" v-model="selectedDomain" :defaultValue="selectedDomain">
           <a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id">
             {{ domain.path }}
@@ -44,30 +44,30 @@
 
       <template v-if="selectedAccountType === 'Account'">
         <div class="form__item">
-          <p class="form__label"><span class="required">*</span>{{ $t('account') }}</p>
+          <p class="form__label"><span class="required">*</span>{{ $t('label.account') }}</p>
           <a-select @change="changeAccount" v-model="selectedAccount">
             <a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
               {{ account.name }}
             </a-select-option>
           </a-select>
-          <span v-if="accountError" class="required">{{ $t('required') }}</span>
+          <span v-if="accountError" class="required">{{ $t('label.required') }}</span>
         </div>
       </template>
 
       <template v-else>
         <div class="form__item">
-          <p class="form__label"><span class="required">*</span>{{ $t('project') }}</p>
+          <p class="form__label"><span class="required">*</span>{{ $t('label.project') }}</p>
           <a-select @change="changeProject" v-model="selectedProject">
             <a-select-option v-for="project in projects" :key="project.id" :value="project.id">
               {{ project.name }}
             </a-select-option>
           </a-select>
-          <span v-if="projectError" class="required">{{ $t('required') }}</span>
+          <span v-if="projectError" class="required">{{ $t('label.required') }}</span>
         </div>
       </template>
 
       <div class="form__item">
-        <p class="form__label">{{ $t('network') }}</p>
+        <p class="form__label">{{ $t('label.network') }}</p>
         <a-select v-model="selectedNetwork">
           <a-select-option v-for="network in networks" :key="network.id" :value="network.id">
             {{ network.name ? network.name : '-' }}
@@ -76,7 +76,7 @@
       </div>
 
       <a-button type="primary" class="submit-btn" @click="submitData">
-        {{ $t('submit') }}
+        {{ $t('label.submit') }}
       </a-button>
 
     </div>
diff --git a/ui/src/views/compute/BackupScheduleWizard.vue b/ui/src/views/compute/BackupScheduleWizard.vue
index 6bb566c84ae..eac8995c74d 100644
--- a/ui/src/views/compute/BackupScheduleWizard.vue
+++ b/ui/src/views/compute/BackupScheduleWizard.vue
@@ -18,7 +18,7 @@
 <template>
   <div class="backup-layout">
     <a-tabs defaultActiveKey="1" :animated="false">
-      <a-tab-pane :tab="$t('schedule')" key="1">
+      <a-tab-pane :tab="$t('label.schedule')" key="1">
         <FormSchedule
           :loading="loading"
           :resource="resource"
diff --git a/ui/src/views/compute/CreateKubernetesCluster.vue b/ui/src/views/compute/CreateKubernetesCluster.vue
index e306d72f4a7..f51a9deb383 100644
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@@ -22,21 +22,21 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: 'Please enter Kubernetes cluster name' }]
             }]"
             :placeholder="apiParams.name.description"/>
         </a-form-item>
-        <a-form-item :label="$t('description')">
+        <a-form-item :label="$t('label.description')">
           <a-input
             v-decorator="['description', {
               rules: [{ required: true, message: 'Please enter Kubernetes cluster description' }]
             }]"
             :placeholder="apiParams.description.description"/>
         </a-form-item>
-        <a-form-item :label="$t('zoneid')">
+        <a-form-item :label="$t('label.zoneid')">
           <a-select
             id="zone-selection"
             v-decorator="['zoneid', {
@@ -55,7 +55,7 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('kubernetesversionid')">
+        <a-form-item :label="$t('label.kubernetesversionid')">
           <a-select
             id="version-selection"
             v-decorator="['kubernetesversionid', {
@@ -74,7 +74,7 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('serviceofferingid')">
+        <a-form-item :label="$t('label.serviceofferingid')">
           <a-select
             id="offering-selection"
             v-decorator="['serviceofferingid', {
@@ -92,7 +92,7 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('noderootdisksize')">
+        <a-form-item :label="$t('label.noderootdisksize')">
           <a-input
             v-decorator="['noderootdisksize', {
               rules: [{
@@ -106,7 +106,7 @@
             }]"
             :placeholder="apiParams.noderootdisksize.description"/>
         </a-form-item>
-        <a-form-item :label="$t('networkid')">
+        <a-form-item :label="$t('label.networkid')">
           <a-select
             id="network-selection"
             v-decorator="['networkid', {}]"
@@ -122,10 +122,10 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('haenable')" v-if="this.selectedKubernetesVersion != null && this.selectedKubernetesVersion != undefined && this.selectedKubernetesVersion.supportsha === true">
+        <a-form-item :label="$t('label.haenable')" v-if="this.selectedKubernetesVersion != null && this.selectedKubernetesVersion != undefined && this.selectedKubernetesVersion.supportsha === true">
           <a-switch v-decorator="['haenable', {initialValue: this.haEnabled}]" :checked="this.haEnabled" @change="val => { this.haEnabled = val }" />
         </a-form-item>
-        <a-form-item :label="$t('masternodes')" v-if="this.haEnabled">
+        <a-form-item :label="$t('label.masternodes')" v-if="this.haEnabled">
           <a-input
             v-decorator="['masternodes', {
               initialValue: '1',
@@ -142,12 +142,12 @@
             }]"
             :placeholder="apiParams.masternodes.description"/>
         </a-form-item>
-        <a-form-item :label="$t('externalloadbalanceripaddress')" v-if="this.haEnabled">
+        <a-form-item :label="$t('label.externalloadbalanceripaddress')" v-if="this.haEnabled">
           <a-input
             v-decorator="['externalloadbalanceripaddress', {}]"
             :placeholder="apiParams.externalloadbalanceripaddress.description"/>
         </a-form-item>
-        <a-form-item :label="$t('cks.cluster.size')">
+        <a-form-item :label="$t('label.cks.cluster.size')">
           <a-input
             v-decorator="['size', {
               initialValue: '1',
@@ -164,7 +164,7 @@
             }]"
             :placeholder="apiParams.size.description"/>
         </a-form-item>
-        <a-form-item :label="$t('keypair')">
+        <a-form-item :label="$t('label.keypair')">
           <a-select
             id="keypair-selection"
             v-decorator="['keypair', {}]"
@@ -182,8 +182,8 @@
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/compute/CreateSSHKeyPair.vue b/ui/src/views/compute/CreateSSHKeyPair.vue
index 9d0e3f7aff4..2800d9dc5a0 100644
--- a/ui/src/views/compute/CreateSSHKeyPair.vue
+++ b/ui/src/views/compute/CreateSSHKeyPair.vue
@@ -23,19 +23,19 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: 'Please enter name' }]
             }]"
             :placeholder="apiParams.name.description"/>
         </a-form-item>
-        <a-form-item :label="$t('publickey')">
+        <a-form-item :label="$t('label.publickey')">
           <a-input
             v-decorator="['publickey', {}]"
             :placeholder="apiParams.publickey.description"/>
         </a-form-item>
-        <a-form-item :label="$t('domainid')" v-if="this.isAdminOrDomainAdmin()">
+        <a-form-item :label="$t('label.domainid')" v-if="this.isAdminOrDomainAdmin()">
           <a-select
             id="domain-selection"
             v-decorator="['domainid', {}]"
@@ -52,15 +52,15 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('account')" v-if="this.isAdminOrDomainAdmin() && !this.isObjectEmpty(this.selectedDomain) && this.selectedDomain.id !== null">
+        <a-form-item :label="$t('label.account')" v-if="this.isAdminOrDomainAdmin() && !this.isObjectEmpty(this.selectedDomain) && this.selectedDomain.id !== null">
           <a-input
             v-decorator="['account', {}]"
             :placeholder="apiParams.account.description"/>
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index 4943cbb876c..d7b234f2351 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -19,22 +19,22 @@
   <div>
     <a-row :gutter="12">
       <a-col :md="24" :lg="17">
-        <a-card :bordered="true" :title="this.$t('newInstance')">
+        <a-card :bordered="true" :title="this.$t('label.newinstance')">
           <a-form
             :form="form"
             @submit="handleSubmit"
             layout="vertical"
           >
             <a-steps direction="vertical" size="small">
-              <a-step :title="this.$t('details')" status="process">
+              <a-step :title="this.$t('label.details')" status="process">
                 <template slot="description">
                   <div style="margin-top: 15px">
-                    <a-form-item :label="this.$t('name')">
+                    <a-form-item :label="this.$t('label.name')">
                       <a-input
                         v-decorator="['name']"
                       />
                     </a-form-item>
-                    <a-form-item :label="this.$t('zoneid')">
+                    <a-form-item :label="this.$t('label.zoneid')">
                       <a-select
                         v-decorator="['zoneid', {
                           rules: [{ required: true, message: 'Please select option' }]
@@ -46,7 +46,7 @@
                     </a-form-item>
                     <a-form-item
                       v-if="!isNormalAndDomainUser"
-                      :label="this.$t('podId')">
+                      :label="this.$t('label.podid')">
                       <a-select
                         v-decorator="['podid']"
                         :options="podSelectOptions"
@@ -55,7 +55,7 @@
                     </a-form-item>
                     <a-form-item
                       v-if="!isNormalAndDomainUser"
-                      :label="this.$t('clusterid')">
+                      :label="this.$t('label.clusterid')">
                       <a-select
                         v-decorator="['clusterid']"
                         :options="clusterSelectOptions"
@@ -64,23 +64,23 @@
                     </a-form-item>
                     <a-form-item
                       v-if="!isNormalAndDomainUser"
-                      :label="this.$t('hostId')">
+                      :label="this.$t('label.hostid')">
                       <a-select
                         v-decorator="['hostid']"
                         :options="hostSelectOptions"
                         :loading="loading.hosts"
                       ></a-select>
                     </a-form-item>
-                    <a-form-item :label="this.$t('group')">
+                    <a-form-item :label="this.$t('label.group')">
                       <a-input v-decorator="['group']" />
                     </a-form-item>
-                    <a-form-item :label="this.$t('keyboard')">
+                    <a-form-item :label="this.$t('label.keyboard')">
                       <a-select
                         v-decorator="['keyboard']"
                         :options="keyboardSelectOptions"
                       ></a-select>
                     </a-form-item>
-                    <a-form-item :label="this.$t('userdata')">
+                    <a-form-item :label="this.$t('label.userdata')">
                       <a-textarea
                         v-decorator="['userdata']">
                       </a-textarea>
@@ -89,7 +89,7 @@
                 </template>
               </a-step>
               <a-step
-                :title="this.$t('templateIso')"
+                :title="this.$t('label.templateiso')"
                 :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
                   <div v-if="zoneSelected" style="margin-top: 15px">
@@ -119,7 +119,7 @@
                           :loading="loading.isos"
                           :preFillContent="dataPreFill"
                           @update-template-iso="updateFieldValue" />
-                        <a-form-item :label="this.$t('hypervisor')">
+                        <a-form-item :label="this.$t('label.hypervisor')">
                           <a-select
                             v-decorator="['hypervisor', {
                               initialValue: hypervisorSelectOptions && hypervisorSelectOptions.length > 0
@@ -145,7 +145,7 @@
                 </template>
               </a-step>
               <a-step
-                :title="this.$t('serviceOfferingId')"
+                :title="this.$t('label.serviceofferingid')"
                 :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
                   <div v-if="zoneSelected">
@@ -189,7 +189,7 @@
                 </template>
               </a-step>
               <a-step
-                :title="this.$t('diskofferingid')"
+                :title="this.$t('label.diskofferingid')"
                 :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
                   <div v-if="zoneSelected">
@@ -213,7 +213,7 @@
                 </template>
               </a-step>
               <a-step
-                :title="this.$t('Affinity Groups')"
+                :title="this.$t('label.affinity.groups')"
                 :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
                   <div v-if="zoneSelected">
@@ -229,7 +229,7 @@
                 </template>
               </a-step>
               <a-step
-                :title="this.$t('networks')"
+                :title="this.$t('label.networks')"
                 :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
                   <div v-if="zoneSelected">
@@ -253,7 +253,7 @@
                 </template>
               </a-step>
               <a-step
-                :title="this.$t('sshKeyPairs')"
+                :title="this.$t('label.sshkeypairs')"
                 :status="zoneSelected ? 'process' : 'wait'">
                 <template slot="description">
                   <div v-if="zoneSelected">
@@ -272,11 +272,11 @@
             <div class="card-footer">
               <!-- ToDo extract as component -->
               <a-button @click="() => this.$router.back()" :loading="loading.deploy">
-                {{ this.$t('cancel') }}
+                {{ this.$t('label.cancel') }}
               </a-button>
               <a-button type="primary" @click="handleSubmit" :loading="loading.deploy">
                 <a-icon type="rocket" />
-                {{ this.$t('Launch VM') }}
+                {{ this.$t('label.launch.vm') }}
               </a-button>
             </div>
           </a-form>
@@ -284,7 +284,7 @@
       </a-col>
       <a-col :md="24" :lg="7" v-if="!isMobile()">
         <a-affix :offsetTop="75">
-          <info-card class="vm-info-card" :resource="vm" :title="this.$t('yourInstance')">
+          <info-card class="vm-info-card" :resource="vm" :title="this.$t('label.yourinstance')">
             <!-- ToDo: Refactor this, maybe move everything to the info-card component -->
             <div slot="details" v-if="diskSize" style="margin-bottom: 12px;">
               <a-icon type="hdd"></a-icon>
@@ -421,11 +421,11 @@ export default {
       tabList: [
         {
           key: 'templateid',
-          tab: this.$t('Templates')
+          tab: this.$t('label.templates')
         },
         {
           key: 'isoid',
-          tab: this.$t('ISOs')
+          tab: this.$t('label.isos')
         }
       ],
       tabKey: 'templateid',
@@ -816,7 +816,7 @@ export default {
       this.networkConfig = networks
     },
     updateSshKeyPairs (name) {
-      if (name === this.$t('noselect')) {
+      if (name === this.$t('label.noselect')) {
         this.form.setFieldsValue({
           keypair: undefined
         })
@@ -926,7 +926,7 @@ export default {
         deployVmData.displayname = values.name
         const title = this.$t('label.launch.vm')
         const description = values.name || ''
-        const password = this.$t('password')
+        const password = this.$t('label.password')
         api('deployVirtualMachine', deployVmData).then(response => {
           const jobId = response.deployvirtualmachineresponse.jobid
           if (jobId) {
diff --git a/ui/src/views/compute/InstanceHardware.vue b/ui/src/views/compute/InstanceHardware.vue
index 07a1acf9e03..c285722e475 100644
--- a/ui/src/views/compute/InstanceHardware.vue
+++ b/ui/src/views/compute/InstanceHardware.vue
@@ -68,19 +68,19 @@
             <div>
               <a-divider class="divider-small" />
               <div class="attribute">
-                <div class="label">{{ $t('size') }}</div>
+                <div class="label">{{ $t('label.size') }}</div>
                 <div>{{ (item.size / (1024 * 1024 * 1024.0)).toFixed(2) }} GB</div>
               </div>
               <div class="attribute" v-if="item.physicalsize">
-                <div class="label">{{ $t('physicalsize') }}</div>
+                <div class="label">{{ $t('label.physicalsize') }}</div>
                 <div>{{ (item.physicalsize / (1024 * 1024 * 1024.0)).toFixed(4) }} GB</div>
               </div>
               <div class="attribute">
-                <div class="label">{{ $t('storagePool') }}</div>
+                <div class="label">{{ $t('label.storagepool') }}</div>
                 <div>{{ item.storage }} ({{ item.storagetype }})</div>
               </div>
               <div class="attribute">
-                <div class="label">{{ $t('id') }}</div>
+                <div class="label">{{ $t('label.id') }}</div>
                 <div><a-icon type="barcode"/> {{ item.id }}</div>
               </div>
             </div>
@@ -155,7 +155,7 @@
                   </div>
                   <div class="tags">
                     <a-tag v-if="item.isdefault">
-                      {{ $t('default') }}
+                      {{ $t('label.default') }}
                     </a-tag>
                     <a-tag v-if="item.type">
                       {{ item.type }}
@@ -173,27 +173,27 @@
             <div>
               <a-divider class="divider-small" />
               <div class="attribute">
-                <div class="label">{{ $t('macaddress') }}</div>
+                <div class="label">{{ $t('label.macaddress') }}</div>
                 <div>{{ item.macaddress }}</div>
               </div>
               <div class="attribute" v-if="item.ipaddress">
-                <div class="label">{{ $t('IP Address') }}</div>
+                <div class="label">{{ $t('label.ip.address') }}</div>
                 <div>{{ item.ipaddress }}</div>
               </div>
               <div class="attribute" v-if="item.secondaryip && item.secondaryip.length > 0 && item.type !== 'L2'">
-                <div class="label">{{ $t('Secondary IPs') }}</div>
+                <div class="label">{{ $t('label.secondary.ips') }}</div>
                 <div>{{ item.secondaryip.map(x => x.ipaddress).join(', ') }}</div>
               </div>
               <div class="attribute" v-if="item.netmask">
-                <div class="label">{{ $t('netmask') }}</div>
+                <div class="label">{{ $t('label.netmask') }}</div>
                 <div>{{ item.netmask }}</div>
               </div>
               <div class="attribute" v-if="item.gateway">
-                <div class="label">{{ $t('gateway') }}</div>
+                <div class="label">{{ $t('label.gateway') }}</div>
                 <div>{{ item.gateway }}</div>
               </div>
               <div class="attribute">
-                <div class="label">{{ $t('id') }}</div>
+                <div class="label">{{ $t('label.id') }}</div>
                 <div><a-icon type="barcode"/> {{ item.id }}</div>
               </div>
             </div>
@@ -210,7 +210,7 @@
       {{ $t('message.network.addVM.desc') }}
 
       <div class="modal-form">
-        <p class="modal-form__label">{{ $t('Network') }}:</p>
+        <p class="modal-form__label">{{ $t('label.network') }}:</p>
         <a-select :defaultValue="addNetworkData.network" @change="e => addNetworkData.network === e">
           <a-select-option
             v-for="network in addNetworkData.allNetworks"
@@ -219,7 +219,7 @@
             {{ network.name }}
           </a-select-option>
         </a-select>
-        <p class="modal-form__label">{{ $t('publicip') }}:</p>
+        <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
         <a-input v-model="addNetworkData.ip"></a-input>
       </div>
 
@@ -234,7 +234,7 @@
       {{ $t('message.network.updateIp') }}
 
       <div class="modal-form">
-        <p class="modal-form__label">{{ $t('publicip') }}:</p>
+        <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
         <a-input v-model="editIpAddressValue"></a-input>
       </div>
 
diff --git a/ui/src/views/compute/KubernetesServiceTab.vue b/ui/src/views/compute/KubernetesServiceTab.vue
index 4b597ebc889..66b5ba9208d 100644
--- a/ui/src/views/compute/KubernetesServiceTab.vue
+++ b/ui/src/views/compute/KubernetesServiceTab.vue
@@ -22,15 +22,15 @@
       :tabPosition="device === 'mobile' ? 'top' : 'left'"
       :animated="false"
       @change="handleChangeTab">
-      <a-tab-pane :tab="$t('details')" key="details">
+      <a-tab-pane :tab="$t('label.details')" key="details">
         <DetailsTab :resource="resource" :loading="loading" />
       </a-tab-pane>
-      <a-tab-pane :tab="$t('access')" key="access">
+      <a-tab-pane :tab="$t('label.access')" key="access">
         <a-card title="Kubernetes Cluster Config" :loading="this.versionLoading">
           <div v-if="this.clusterConfig !== ''">
             <a-textarea :value="this.clusterConfig" :rows="5" readonly />
             <div :span="24" class="action-button">
-              <a-button @click="downloadKubernetesClusterConfig" type="primary">{{ this.$t('Download') }}</a-button>
+              <a-button @click="downloadKubernetesClusterConfig" type="primary">{{ this.$t('label.download') }}</a-button>
             </div>
           </div>
           <div v-else>
@@ -92,7 +92,7 @@
           <p>More about accessing dashboard UI, <a href="https://kubernetes.io/docs/tasks/access-application-cluster/web-ui-dashboard/#accessing-the-dashboard-ui">https://kubernetes.io/docs/tasks/access-application-cluster/web-ui-dashboard/#accessing-the-dashboard-ui</a></p>
         </a-card>
       </a-tab-pane>
-      <a-tab-pane :tab="$t('instances')" key="instances">
+      <a-tab-pane :tab="$t('label.instances')" key="instances">
         <a-table
           class="table"
           size="small"
@@ -109,13 +109,13 @@
           </template>
         </a-table>
       </a-tab-pane>
-      <a-tab-pane :tab="$t('firewall')" key="firewall">
+      <a-tab-pane :tab="$t('label.firewall')" key="firewall">
         <FirewallRules :resource="this.publicIpAddress" :loading="this.networkLoading" />
       </a-tab-pane>
-      <a-tab-pane :tab="$t('portforwarding')" key="portforwarding">
+      <a-tab-pane :tab="$t('label.portforwarding')" key="portforwarding">
         <PortForwarding :resource="this.publicIpAddress" :loading="this.networkLoading" />
       </a-tab-pane>
-      <a-tab-pane :tab="$t('loadbalancing')" key="loadbalancing">
+      <a-tab-pane :tab="$t('label.loadbalancing')" key="loadbalancing">
         <LoadBalancing :resource="this.publicIpAddress" :loading="this.networkLoading" />
       </a-tab-pane>
     </a-tabs>
@@ -173,48 +173,48 @@ export default {
     if (this.isAdminOrDomainAdmin()) {
       this.vmColumns = [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'name',
           scopedSlots: { customRender: 'name' }
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state',
           scopedSlots: { customRender: 'state' }
         },
         {
-          title: this.$t('instancename'),
+          title: this.$t('label.instancename'),
           dataIndex: 'instancename'
         },
         {
-          title: this.$t('ipaddress'),
+          title: this.$t('label.ipaddress'),
           dataIndex: 'ipaddress'
         },
         {
-          title: this.$t('zonename'),
+          title: this.$t('label.zonename'),
           dataIndex: 'zonename'
         }
       ]
     } else {
       this.vmColumns = [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'name'
         },
         {
-          title: this.$t('displayname'),
+          title: this.$t('label.displayname'),
           dataIndex: 'displayname'
         },
         {
-          title: this.$t('ipaddress'),
+          title: this.$t('label.ipaddress'),
           dataIndex: 'ipaddress'
         },
         {
-          title: this.$t('zonename'),
+          title: this.$t('label.zonename'),
           dataIndex: 'zonename'
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state'
         }
       ]
diff --git a/ui/src/views/compute/MigrateWizard.vue b/ui/src/views/compute/MigrateWizard.vue
index b99125c5a73..3f9e2279ec5 100644
--- a/ui/src/views/compute/MigrateWizard.vue
+++ b/ui/src/views/compute/MigrateWizard.vue
@@ -69,7 +69,7 @@
 
     <div style="margin-top: 20px; display: flex; justify-content:flex-end;">
       <a-button type="primary" :disabled="!selectedHost.id" @click="submitForm">
-        {{ $t('ok') }}
+        {{ $t('label.ok') }}
       </a-button>
     </div>
   </div>
@@ -98,23 +98,23 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'name'
         },
         {
-          title: this.$t('Suitability'),
+          title: this.$t('label.suitability'),
           scopedSlots: { customRender: 'suitability' }
         },
         {
-          title: this.$t('cpuused'),
+          title: this.$t('label.cpuused'),
           dataIndex: 'cpuused'
         },
         {
-          title: this.$t('memused'),
+          title: this.$t('label.memused'),
           scopedSlots: { customRender: 'memused' }
         },
         {
-          title: this.$t('select'),
+          title: this.$t('label.select'),
           scopedSlots: { customRender: 'select' }
         }
       ]
diff --git a/ui/src/views/compute/ScaleKubernetesCluster.vue b/ui/src/views/compute/ScaleKubernetesCluster.vue
index c07890f40ef..75edb9ebb5e 100644
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@@ -22,7 +22,7 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('cks.cluster.size')">
+        <a-form-item :label="$t('label.cks.cluster.size')">
           <a-input
             v-decorator="['size', {
               initialValue: originalSize,
@@ -37,7 +37,7 @@
             }]"
             :placeholder="apiParams.size.description"/>
         </a-form-item>
-        <a-form-item :label="$t('serviceofferingid')">
+        <a-form-item :label="$t('label.serviceofferingid')">
           <a-select
             id="offering-selection"
             v-decorator="['serviceofferingid', {}]"
@@ -55,8 +55,8 @@
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/compute/UpgradeKubernetesCluster.vue b/ui/src/views/compute/UpgradeKubernetesCluster.vue
index 78dfaabca00..1e2efbd3104 100644
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@@ -22,7 +22,7 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('kubernetesversionid')">
+        <a-form-item :label="$t('label.kubernetesversionid')">
           <a-select
             id="version-selection"
             v-decorator="['kubernetesversionid', {
@@ -42,8 +42,8 @@
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/compute/backup/BackupSchedule.vue b/ui/src/views/compute/backup/BackupSchedule.vue
index 9c6bf67a741..64ffa61dc8c 100644
--- a/ui/src/views/compute/backup/BackupSchedule.vue
+++ b/ui/src/views/compute/backup/BackupSchedule.vue
@@ -112,7 +112,7 @@ export default {
           scopedSlots: { customRender: 'icon' }
         },
         {
-          title: this.$t('time'),
+          title: this.$t('label.time'),
           dataIndex: 'schedule',
           scopedSlots: { customRender: 'time' }
         },
@@ -122,12 +122,12 @@ export default {
           scopedSlots: { customRender: 'interval' }
         },
         {
-          title: this.$t('timezone'),
+          title: this.$t('label.timezone'),
           dataIndex: 'timezone',
           scopedSlots: { customRender: 'timezone' }
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           dataIndex: 'action',
           width: 50,
           scopedSlots: { customRender: 'action' }
diff --git a/ui/src/views/compute/backup/FormSchedule.vue b/ui/src/views/compute/backup/FormSchedule.vue
index 981e6a98de3..3dd7bea14d8 100644
--- a/ui/src/views/compute/backup/FormSchedule.vue
+++ b/ui/src/views/compute/backup/FormSchedule.vue
@@ -28,7 +28,7 @@
           @submit="handleSubmit">
           <a-row :gutter="12">
             <a-col :md="24" :lg="24">
-              <a-form-item :label="$t('intervaltype')">
+              <a-form-item :label="$t('label.intervaltype')">
                 <a-radio-group
                   v-decorator="['intervaltype', {
                     initialValue: intervalType
@@ -36,22 +36,22 @@
                   buttonStyle="solid"
                   @change="handleChangeIntervalType">
                   <a-radio-button value="hourly">
-                    {{ $t('HOURLY') }}
+                    {{ $t('label.hourly') }}
                   </a-radio-button>
                   <a-radio-button value="daily">
-                    {{ $t('DAILY') }}
+                    {{ $t('label.daily') }}
                   </a-radio-button>
                   <a-radio-button value="weekly">
-                    {{ $t('WEEKLY') }}
+                    {{ $t('label.weekly') }}
                   </a-radio-button>
                   <a-radio-button value="monthly">
-                    {{ $t('MONTHLY') }}
+                    {{ $t('label.monthly') }}
                   </a-radio-button>
                 </a-radio-group>
               </a-form-item>
             </a-col>
             <a-col :md="24" :lg="12" v-if="intervalType==='hourly'">
-              <a-form-item :label="$t('time')">
+              <a-form-item :label="$t('label.time')">
                 <a-tooltip
                   placement="right"
                   :title="$t('label.minute.past.hour')">
@@ -68,7 +68,7 @@
             <a-col :md="24" :lg="12" v-if="['daily', 'weekly', 'monthly'].includes(intervalType)">
               <a-form-item
                 class="custom-time-select"
-                :label="$t('time')">
+                :label="$t('label.time')">
                 <a-time-picker
                   use12Hours
                   format="h:mm A"
@@ -112,7 +112,7 @@
               </a-form-item>
             </a-col>
             <a-col :md="24" :lg="24">
-              <a-form-item :label="$t('timezone')">
+              <a-form-item :label="$t('label.timezone')">
                 <a-select
                   showSearch
                   v-decorator="['timezone', {
@@ -133,13 +133,13 @@
             <a-button
               :loading="actionLoading"
               @click="closeAction">
-              {{ this.$t('Cancel') }}
+              {{ this.$t('label.cancel') }}
             </a-button>
             <a-button
               :loading="actionLoading"
               type="primary"
               @click="handleSubmit">
-              {{ this.$t('OK') }}
+              {{ this.$t('label.ok') }}
             </a-button>
           </div>
         </a-form>
@@ -207,7 +207,7 @@ export default {
         const dayName = this.listDayOfWeek[index]
         this.dayOfWeek.push({
           id: dayName,
-          name: this.$t(dayName)
+          name: this.$t('label.' + dayName)
         })
       }
     },
diff --git a/ui/src/views/compute/wizard/AffinityGroupSelection.vue b/ui/src/views/compute/wizard/AffinityGroupSelection.vue
index 9c25355002b..2a6ef92ed98 100644
--- a/ui/src/views/compute/wizard/AffinityGroupSelection.vue
+++ b/ui/src/views/compute/wizard/AffinityGroupSelection.vue
@@ -65,12 +65,12 @@ export default {
       columns: [
         {
           dataIndex: 'name',
-          title: this.$t('Affinity Groups'),
+          title: this.$t('label.affinity.groups'),
           width: '40%'
         },
         {
           dataIndex: 'description',
-          title: this.$t('description'),
+          title: this.$t('label.description'),
           width: '60%'
         }
       ],
diff --git a/ui/src/views/compute/wizard/ComputeOfferingSelection.vue b/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
index 6f2304dfb75..0ffd53bcdba 100644
--- a/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
+++ b/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
@@ -32,8 +32,8 @@
       @change="handleTableChange"
       :scroll="{ y: 225 }"
     >
-      <span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('cpu') }}</span>
-      <span slot="ramTitle"><a-icon type="bulb" /> {{ $t('memory') }}</span>
+      <span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('label.cpu') }}</span>
+      <span slot="ramTitle"><a-icon type="bulb" /> {{ $t('label.memory') }}</span>
     </a-table>
   </div>
 </template>
@@ -65,7 +65,7 @@ export default {
       columns: [
         {
           dataIndex: 'name',
-          title: this.$t('serviceOfferingId'),
+          title: this.$t('label.serviceofferingid'),
           width: '40%'
         },
         {
diff --git a/ui/src/views/compute/wizard/ComputeSelection.vue b/ui/src/views/compute/wizard/ComputeSelection.vue
index 68ae44219c5..358099c02b8 100644
--- a/ui/src/views/compute/wizard/ComputeSelection.vue
+++ b/ui/src/views/compute/wizard/ComputeSelection.vue
@@ -21,7 +21,7 @@
       <a-row>
         <a-col :md="colContraned" :lg="colContraned">
           <a-form-item
-            :label="this.$t('cpunumber')"
+            :label="this.$t('label.cpunumber')"
             :validate-status="errors.cpu.status"
             :help="errors.cpu.message">
             <a-row :gutter="12">
@@ -45,7 +45,7 @@
         </a-col>
         <a-col :md="8" :lg="8" v-show="!isConstrained">
           <a-form-item
-            :label="this.$t('cpuspeed')"
+            :label="this.$t('label.cpuspeed')"
             :validate-status="errors.cpuspeed.status"
             :help="errors.cpuspeed.message">
             <a-input-number
@@ -56,7 +56,7 @@
         </a-col>
         <a-col :md="colContraned" :lg="colContraned">
           <a-form-item
-            :label="this.$t('memory')"
+            :label="this.$t('label.memory')"
             :validate-status="errors.memory.status"
             :help="errors.memory.message">
             <a-row :gutter="12">
diff --git a/ui/src/views/compute/wizard/DiskOfferingSelection.vue b/ui/src/views/compute/wizard/DiskOfferingSelection.vue
index 78b06efac2e..65a40be9356 100644
--- a/ui/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/ui/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -32,10 +32,10 @@
       @change="handleTableChange"
       :scroll="{ y: 225 }"
     >
-      <span slot="diskSizeTitle"><a-icon type="hdd" /> {{ $t('disksize') }}</span>
-      <span slot="iopsTitle"><a-icon type="rocket" /> {{ $t('minMaxIops') }}</span>
+      <span slot="diskSizeTitle"><a-icon type="hdd" /> {{ $t('label.disksize') }}</span>
+      <span slot="iopsTitle"><a-icon type="rocket" /> {{ $t('label.minmaxiops') }}</span>
       <template slot="diskSize" slot-scope="text, record">
-        <div v-if="record.isCustomized">{{ $t('isCustomized') }}</div>
+        <div v-if="record.isCustomized">{{ $t('label.iscustomized') }}</div>
         <div v-else-if="record.diskSize">{{ record.diskSize }} GB</div>
         <div v-else>-</div>
       </template>
@@ -76,7 +76,7 @@ export default {
       columns: [
         {
           dataIndex: 'name',
-          title: this.$t('diskoffering'),
+          title: this.$t('label.diskoffering'),
           width: '40%'
         },
         {
@@ -156,7 +156,7 @@ export default {
       this.dataItems = []
       this.dataItems.push({
         id: '0',
-        name: this.$t('noselect'),
+        name: this.$t('label.noselect'),
         diskSize: undefined,
         miniops: undefined,
         maxiops: undefined,
diff --git a/ui/src/views/compute/wizard/DiskSizeSelection.vue b/ui/src/views/compute/wizard/DiskSizeSelection.vue
index 684cb18d47c..9e44ecf6929 100644
--- a/ui/src/views/compute/wizard/DiskSizeSelection.vue
+++ b/ui/src/views/compute/wizard/DiskSizeSelection.vue
@@ -17,7 +17,7 @@
 
 <template>
   <a-form-item
-    :label="this.$t('diskSize')"
+    :label="this.$t('label.disksize')"
     class="form-item">
     <a-row :gutter="12">
       <a-col :md="10" :lg="10">
diff --git a/ui/src/views/compute/wizard/NetworkConfiguration.vue b/ui/src/views/compute/wizard/NetworkConfiguration.vue
index d2c0a4dc869..823f1b1f3ad 100644
--- a/ui/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/ui/src/views/compute/wizard/NetworkConfiguration.vue
@@ -28,13 +28,13 @@
     <template slot="ipAddress" slot-scope="text, record">
       <a-input
         style="width: 150px;"
-        :placeholder="$t('ipaddress')"
+        :placeholder="$t('label.ipaddress')"
         @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)" />
     </template>
     <template slot="macAddress" slot-scope="text, record">
       <a-input
         style="width: 150px;"
-        :placeholder="$t('macaddress')"
+        :placeholder="$t('label.macaddress')"
         @change="($event) => updateNetworkData('macAddress', record.id, $event.target.value)" />
     </template>
   </a-table>
@@ -63,18 +63,18 @@ export default {
       columns: [
         {
           dataIndex: 'name',
-          title: this.$t('defaultNetwork'),
+          title: this.$t('label.defaultnetwork'),
           width: '30%'
         },
         {
           dataIndex: 'ip',
-          title: this.$t('ip'),
+          title: this.$t('label.ip'),
           width: '30%',
           scopedSlots: { customRender: 'ipAddress' }
         },
         {
           dataIndex: 'mac',
-          title: this.$t('macaddress'),
+          title: this.$t('label.macaddress'),
           width: '30%',
           scopedSlots: { customRender: 'macAddress' }
         }
diff --git a/ui/src/views/compute/wizard/NetworkSelection.vue b/ui/src/views/compute/wizard/NetworkSelection.vue
index a80c891d32a..1f14a590d33 100644
--- a/ui/src/views/compute/wizard/NetworkSelection.vue
+++ b/ui/src/views/compute/wizard/NetworkSelection.vue
@@ -135,17 +135,17 @@ export default {
       return [
         {
           dataIndex: 'name',
-          title: this.$t('networks'),
+          title: this.$t('label.networks'),
           width: '40%'
         },
         {
           dataIndex: 'type',
-          title: this.$t('guestIpType'),
+          title: this.$t('label.guestiptype'),
           width: '30%'
         },
         {
           dataIndex: 'vpcName',
-          title: this.$t('VPC'),
+          title: this.$t('label.vpc'),
           width: '30%',
           filters: vpcFilter,
           filteredValue: _.get(this.filteredInfo, 'id'),
@@ -214,11 +214,11 @@ export default {
     getDetails (network) {
       return [
         {
-          title: this.$t('description'),
+          title: this.$t('label.description'),
           description: network.displaytext
         },
         {
-          title: this.$t('networkOfferingId'),
+          title: this.$t('label.networkofferingid'),
           description: network.networkofferingdisplaytext
         }
       ]
diff --git a/ui/src/views/compute/wizard/SshKeyPairSelection.vue b/ui/src/views/compute/wizard/SshKeyPairSelection.vue
index f443cfcc9b2..64110c2117b 100644
--- a/ui/src/views/compute/wizard/SshKeyPairSelection.vue
+++ b/ui/src/views/compute/wizard/SshKeyPairSelection.vue
@@ -32,8 +32,8 @@
       @change="handleTableChange"
       :scroll="{ y: 225 }"
     >
-      <template v-slot:account><a-icon type="user" /> {{ $t('account') }}</template>
-      <template v-slot:domain><a-icon type="block" /> {{ $t('domain') }}</template>
+      <template v-slot:account><a-icon type="user" /> {{ $t('label.account') }}</template>
+      <template v-slot:domain><a-icon type="block" /> {{ $t('label.domain') }}</template>
     </a-table>
   </div>
 </template>
@@ -65,7 +65,7 @@ export default {
       columns: [
         {
           dataIndex: 'name',
-          title: this.$t('sshKeyPairs'),
+          title: this.$t('label.sshkeypairs'),
           width: '40%'
         },
         {
@@ -79,7 +79,7 @@ export default {
           width: '30%'
         }
       ],
-      selectedRowKeys: [this.$t('noselect')],
+      selectedRowKeys: [this.$t('label.noselect')],
       dataItems: []
     }
   },
@@ -130,8 +130,8 @@ export default {
           this.selectedRowKeys = [this.preFillContent.keypair]
           this.$emit('select-ssh-key-pair-item', this.preFillContent.keypair)
         } else {
-          this.selectedRowKeys = [this.$t('noselect')]
-          this.$emit('select-ssh-key-pair-item', this.$t('noselect'))
+          this.selectedRowKeys = [this.$t('label.noselect')]
+          this.$emit('select-ssh-key-pair-item', this.$t('label.noselect'))
         }
       }
     }
@@ -140,7 +140,7 @@ export default {
     initDataItem () {
       this.dataItems = []
       this.dataItems.push({
-        name: this.$t('noselect'),
+        name: this.$t('label.noselect'),
         account: '-',
         domain: '-'
       })
diff --git a/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue b/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
index c01e753739b..a77d97ad546 100644
--- a/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
+++ b/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
@@ -37,22 +37,22 @@
               :visible="os.ispublic && !os.isfeatured"
               color="blue"
               @click="onFilterTag('is: public')"
-            >{{ $t('isPublic') }}</a-tag>
+            >{{ $t('label.ispublic') }}</a-tag>
             <a-tag
               :visible="os.isfeatured"
               color="green"
               @click="onFilterTag('is: featured')"
-            >{{ $t('isFeatured') }}</a-tag>
+            >{{ $t('label.isfeatured') }}</a-tag>
             <a-tag
               :visible="isSelf(os)"
               color="orange"
               @click="onFilterTag('is: self')"
-            >{{ $t('isSelf') }}</a-tag>
+            >{{ $t('label.isself') }}</a-tag>
             <a-tag
               :visible="isShared(os)"
               color="cyan"
               @click="onFilterTag('is: shared')"
-            >{{ $t('isShared') }}</a-tag>
+            >{{ $t('label.isshared') }}</a-tag>
           </a-radio>
         </a-radio-group>
       </a-list-item>
diff --git a/ui/src/views/compute/wizard/TemplateIsoSelection.vue b/ui/src/views/compute/wizard/TemplateIsoSelection.vue
index bffc9b5f77b..0a055d2681c 100644
--- a/ui/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/ui/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -34,14 +34,14 @@
               :form="form"
               layout="vertical"
               @submit="handleSubmit">
-              <a-form-item :label="$t('filter')">
+              <a-form-item :label="$t('label.filter')">
                 <a-select
                   allowClear
                   mode="multiple"
                   v-decorator="['filter']">
                   <a-select-option
                     v-for="(opt) in filterOpts"
-                    :key="opt.id">{{ $t(opt.name) }}</a-select-option>
+                    :key="opt.id">{{ $t('label.' + opt.name) }}</a-select-option>
                 </a-select>
               </a-form-item>
               <div class="filter-group-button">
diff --git a/ui/src/views/dashboard/UsageDashboard.vue b/ui/src/views/dashboard/UsageDashboard.vue
index 79c02ba23eb..6bba43bb9f8 100644
--- a/ui/src/views/dashboard/UsageDashboard.vue
+++ b/ui/src/views/dashboard/UsageDashboard.vue
@@ -26,7 +26,7 @@
             @change="onTabChange">
             <a-tab-pane
               v-for="tab in $route.meta.tabs"
-              :tab="$t(tab.name)"
+              :tab="$t('label.' + tab.name)"
               :key="tab.name"
               v-if="'show' in tab ? tab.show(project, $route, $store.getters.userInfo) : true">
               <component
diff --git a/ui/src/views/iam/AddLdapAccount.vue b/ui/src/views/iam/AddLdapAccount.vue
index 1fdb098c16b..f8e753ecf74 100644
--- a/ui/src/views/iam/AddLdapAccount.vue
+++ b/ui/src/views/iam/AddLdapAccount.vue
@@ -50,7 +50,7 @@
             @submit="handleSubmit"
             layout="vertical"
           >
-            <a-form-item :label="$t('domain')">
+            <a-form-item :label="$t('label.domain')">
               <a-select
                 showSearch
                 v-decorator="['domainid', {
@@ -63,13 +63,13 @@
                 </a-select-option>
               </a-select>
             </a-form-item>
-            <a-form-item :label="$t('account')">
+            <a-form-item :label="$t('label.account')">
               <a-input
                 v-decorator="['account']"
                 :placeholder="apiParams.account.description"
               />
             </a-form-item>
-            <a-form-item :label="$t('role')">
+            <a-form-item :label="$t('label.role')">
               <a-select
                 showSearch
                 v-decorator="['roleid', {
@@ -82,7 +82,7 @@
                 </a-select-option>
               </a-select>
             </a-form-item>
-            <a-form-item :label="$t('timezone')">
+            <a-form-item :label="$t('label.timezone')">
               <a-select
                 showSearch
                 v-decorator="['timezone']"
@@ -93,21 +93,21 @@
                 </a-select-option>
               </a-select>
             </a-form-item>
-            <a-form-item :label="$t('networkdomain')">
+            <a-form-item :label="$t('label.networkdomain')">
               <a-input
                 v-decorator="['networkdomain']"
                 :placeholder="apiParams.networkdomain.description"
               />
             </a-form-item>
-            <a-form-item :label="$t('group')">
+            <a-form-item :label="$t('label.group')">
               <a-input
                 v-decorator="['group']"
                 :placeholder="apiParams.group.description"
               />
             </a-form-item>
             <div class="card-footer">
-              <a-button @click="handleClose">{{ $t('Close') }}</a-button>
-              <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('add') }}</a-button>
+              <a-button @click="handleClose">{{ $t('label.close') }}</a-button>
+              <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.add') }}</a-button>
             </div>
           </a-form>
         </a-card>
@@ -160,19 +160,19 @@ export default {
     this.listRoles = []
     this.columns = [
       {
-        title: this.$t('name'),
+        title: this.$t('label.name'),
         dataIndex: 'name',
         width: 120,
         scopedSlots: { customRender: 'name' }
       },
       {
-        title: this.$t('username'),
+        title: this.$t('label.username'),
         dataIndex: 'username',
         width: 120,
         scopedSlots: { customRender: 'username' }
       },
       {
-        title: this.$t('email'),
+        title: this.$t('label.email'),
         dataIndex: 'email',
         scopedSlots: { customRender: 'email' }
       }
diff --git a/ui/src/views/iam/ChangeUserPassword.vue b/ui/src/views/iam/ChangeUserPassword.vue
index d6f7744b887..c98def50b31 100644
--- a/ui/src/views/iam/ChangeUserPassword.vue
+++ b/ui/src/views/iam/ChangeUserPassword.vue
@@ -24,7 +24,7 @@
         layout="vertical">
         <a-form-item v-if="!this.isAdminOrDomainAdmin()">
           <span slot="label">
-            {{ $t('currentpassword') }}
+            {{ $t('label.currentpassword') }}
             <a-tooltip :title="apiParams.currentpassword.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
@@ -37,7 +37,7 @@
         </a-form-item>
         <a-form-item>
           <span slot="label">
-            {{ $t('password') }}
+            {{ $t('label.password') }}
             <a-tooltip :title="apiParams.password.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
@@ -50,7 +50,7 @@
         </a-form-item>
         <a-form-item>
           <span slot="label">
-            {{ $t('confirmpassword') }}
+            {{ $t('label.confirmpassword') }}
             <a-tooltip :title="apiParams.password.description">
               <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
             </a-tooltip>
@@ -71,8 +71,8 @@
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/iam/SSLCertificateTab.vue b/ui/src/views/iam/SSLCertificateTab.vue
index 0a67e5c5d86..9f8d413324b 100644
--- a/ui/src/views/iam/SSLCertificateTab.vue
+++ b/ui/src/views/iam/SSLCertificateTab.vue
@@ -31,13 +31,13 @@
           <span slot="action" slot-scope="text, record" class="cert-button-action">
             <a-tooltip placement="top">
               <template slot="title">
-                {{ $t('quickview') }}
+                {{ $t('label.quickview') }}
               </template>
               <a-button type="primary" shape="circle" icon="eye" size="small" @click="onQuickView(record.id)" />
             </a-tooltip>
             <a-tooltip placement="top">
               <template slot="title">
-                {{ $t('Delete SSL Certificate') }}
+                {{ $t('label.delete.ssl.certificate') }}
               </template>
               <a-button
                 type="danger"
@@ -51,7 +51,7 @@
 
         <a-list size="small" :dataSource="detailColumn" v-if="quickview">
           <div class="close-quickview">
-            <a-button @click="() => { this.quickview = false }">{{ $t('close') }}</a-button>
+            <a-button @click="() => { this.quickview = false }">{{ $t('label.close') }}</a-button>
           </div>
           <a-list-item slot="renderItem" slot-scope="item" v-if="item in detail">
             <div>
@@ -120,18 +120,18 @@ export default {
   created () {
     this.columns = [
       {
-        title: this.$t('name'),
+        title: this.$t('label.name'),
         dataIndex: 'name',
         scopedSlots: { customRender: 'name' }
       },
       {
-        title: this.$t('certificateid'),
+        title: this.$t('label.certificateid'),
         dataIndex: 'id',
         width: 450,
         scopedSlots: { customRender: 'id' }
       },
       {
-        title: this.$t('action'),
+        title: this.$t('label.action'),
         dataIndex: 'action',
         fixed: 'right',
         width: 80,
@@ -205,8 +205,8 @@ export default {
     },
     onShowConfirm (row) {
       const self = this
-      let title = this.$t('deleteconfirm')
-      title = title.replace('{name}', this.$t('certificate'))
+      let title = this.$t('label.deleteconfirm')
+      title = title.replace('{name}', this.$t('label.certificate'))
 
       this.$confirm({
         title: title,
diff --git a/ui/src/views/image/AddKubernetesSupportedVersion.vue b/ui/src/views/image/AddKubernetesSupportedVersion.vue
index 089348f0151..6d481b258dc 100644
--- a/ui/src/views/image/AddKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/AddKubernetesSupportedVersion.vue
@@ -22,21 +22,21 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('semanticversion')">
+        <a-form-item :label="$t('label.semanticversion')">
           <a-input
             v-decorator="['semanticversion', {
               rules: [{ required: true, message: 'Please enter Kubernetes semantic version' }]
             }]"
             :placeholder="apiParams.semanticversion.description"/>
         </a-form-item>
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ message: 'Please enter name' }]
             }]"
-            :placeholder="$t('name')"/>
+            :placeholder="$t('label.name')"/>
         </a-form-item>
-        <a-form-item :label="$t('zoneid')">
+        <a-form-item :label="$t('label.zoneid')">
           <a-select
             id="zone-selection"
             v-decorator="['zoneid', {
@@ -63,21 +63,21 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('url')">
+        <a-form-item :label="$t('label.url')">
           <a-input
             v-decorator="['url', {
               rules: [{ required: true, message: 'Please enter binaries ISO URL' }]
             }]"
             :placeholder="apiParams.url.description" />
         </a-form-item>
-        <a-form-item :label="$t('checksum')">
+        <a-form-item :label="$t('label.checksum')">
           <a-input
             v-decorator="['checksum', {
               rules: [{ required: false, message: 'Please enter input' }]
             }]"
             :placeholder="apiParams.checksum.description" />
         </a-form-item>
-        <a-form-item :label="$t('mincpunumber')">
+        <a-form-item :label="$t('label.mincpunumber')">
           <a-input
             v-decorator="['mincpunumber', {
               rules: [{ required: true, message: 'Please enter value' },
@@ -93,7 +93,7 @@
             }]"
             :placeholder="apiParams.mincpunumber.description"/>
         </a-form-item>
-        <a-form-item :label="$t('minmemory')">
+        <a-form-item :label="$t('label.minmemory')">
           <a-input
             v-decorator="['minmemory', {
               rules: [{ required: true, message: 'Please enter value' },
@@ -111,8 +111,8 @@
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index afff7715351..37e7992f588 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -26,8 +26,8 @@
       :pagination="false"
       :rowKey="record => record.zoneid">
       <div slot="isready" slot-scope="text, record">
-        <span v-if="record.isready">{{ $t('Yes') }}</span>
-        <span v-else>{{ $t('No') }}</span>
+        <span v-if="record.isready">{{ $t('label.yes') }}</span>
+        <span v-else>{{ $t('label.no') }}</span>
       </div>
       <template slot="action" slot-scope="text, record">
         <span style="margin-right: 5px">
@@ -43,8 +43,8 @@
             v-if="'deleteIso' in $store.getters.apis"
             placement="topRight"
             title="Delete the ISO for this zone?"
-            :ok-text="$t('Yes')"
-            :cancel-text="$t('No')"
+            :ok-text="$t('label.yes')"
+            :cancel-text="$t('label.no')"
             :loading="deleteLoading"
             @confirm="deleteIso(record)"
           >
@@ -83,7 +83,7 @@
           :form="form"
           @submit="handleCopyIsoSubmit"
           layout="vertical">
-          <a-form-item :label="$t('zoneid')">
+          <a-form-item :label="$t('label.zoneid')">
             <a-select
               id="zone-selection"
               mode="multiple"
@@ -155,15 +155,15 @@ export default {
   created () {
     this.columns = [
       {
-        title: this.$t('zonename'),
+        title: this.$t('label.zonename'),
         dataIndex: 'zonename'
       },
       {
-        title: this.$t('status'),
+        title: this.$t('label.status'),
         dataIndex: 'status'
       },
       {
-        title: this.$t('isready'),
+        title: this.$t('label.isready'),
         dataIndex: 'isready',
         scopedSlots: { customRender: 'isready' }
       },
diff --git a/ui/src/views/image/RegisterOrUploadIso.vue b/ui/src/views/image/RegisterOrUploadIso.vue
index d61142b6bfe..7ed97ef31f6 100644
--- a/ui/src/views/image/RegisterOrUploadIso.vue
+++ b/ui/src/views/image/RegisterOrUploadIso.vue
@@ -27,14 +27,14 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item v-if="currentForm === 'Create'" :label="$t('url')">
+        <a-form-item v-if="currentForm === 'Create'" :label="$t('label.url')">
           <a-input
             v-decorator="['url', {
               rules: [{ required: true, message: 'Please upload an ISO' }]
             }]"
-            :placeholder="$t('iso.url.description')" />
+            :placeholder="$t('label.iso.url.description')" />
         </a-form-item>
-        <a-form-item v-if="currentForm === 'Upload'" :label="$t('templateFileUpload')">
+        <a-form-item v-if="currentForm === 'Upload'" :label="$t('label.templatefileupload')">
           <a-upload-dragger
             :multiple="false"
             :fileList="fileList"
@@ -51,27 +51,27 @@
             </p>
           </a-upload-dragger>
         </a-form-item>
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: 'Please enter input' }]
             }]"
-            :placeholder="$t('iso.name.description')" />
+            :placeholder="$t('label.iso.name.description')" />
         </a-form-item>
 
-        <a-form-item :label="$t('displaytext')">
+        <a-form-item :label="$t('label.displaytext')">
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: 'Please enter input' }]
             }]"
-            :placeholder="$t('iso.displaytext.description')" />
+            :placeholder="$t('label.iso.displaytext.description')" />
         </a-form-item>
 
-        <a-form-item v-if="allowed && currentForm !== 'Upload'" :label="$t('directdownload')">
+        <a-form-item v-if="allowed && currentForm !== 'Upload'" :label="$t('label.directdownload')">
           <a-switch v-decorator="['directdownload']"/>
         </a-form-item>
 
-        <a-form-item :label="$t('zoneid')">
+        <a-form-item :label="$t('label.zoneid')">
           <a-select
             v-decorator="['zoneid', {
               initialValue: this.selectedZone,
@@ -88,7 +88,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="$t('iso.zoneid.description')">
+            :placeholder="$t('label.iso.zoneid.description')">
             <a-select-option :value="opt.id" v-for="opt in zones" :key="opt.id">
               <div v-if="currentForm === 'Upload'">
                 <div v-if="opt.name !== $t('label.all.zone')">
@@ -102,7 +102,7 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item :label="$t('bootable')">
+        <a-form-item :label="$t('label.bootable')">
           <a-switch
             v-decorator="['bootable', {
               initialValue: true,
@@ -111,7 +111,7 @@
             @change="val => bootable = val"/>
         </a-form-item>
 
-        <a-form-item v-if="bootable" :label="$t('ostypeid')">
+        <a-form-item v-if="bootable" :label="$t('label.ostypeid')">
           <a-select
             v-decorator="['ostypeid', {
               initialValue: defaultOsType,
@@ -123,28 +123,28 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="osTypeLoading"
-            :placeholder="$t('iso.ostypeid.description')">
+            :placeholder="$t('label.iso.ostypeid.description')">
             <a-select-option :value="opt.description" v-for="(opt, optIndex) in osTypes" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
 
-        <a-form-item :label="$t('isextractable')">
+        <a-form-item :label="$t('label.isextractable')">
           <a-switch
             v-decorator="['isextractable', {
               initialValue: false
             }]" />
         </a-form-item>
 
-        <a-form-item :label="$t('ispublic')">
+        <a-form-item :label="$t('label.ispublic')">
           <a-switch
             v-decorator="['ispublic', {
               initialValue: false
             }]" />
         </a-form-item>
 
-        <a-form-item :label="$t('isfeatured')">
+        <a-form-item :label="$t('label.isfeatured')">
           <a-switch
             v-decorator="['isfeatured', {
               initialValue: false
@@ -152,8 +152,8 @@
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/image/RegisterOrUploadTemplate.vue b/ui/src/views/image/RegisterOrUploadTemplate.vue
index ef4d45d45ae..c06885e14e8 100644
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@@ -29,7 +29,7 @@
         layout="vertical">
         <div v-if="currentForm === 'Create'">
           <a-row :gutter="12">
-            <a-form-item :label="$t('url')">
+            <a-form-item :label="$t('label.url')">
               <a-input
                 v-decorator="['url', {
                   rules: [{ required: true, message: 'Please enter input' }]
@@ -39,7 +39,7 @@
           </a-row>
         </div>
         <div v-if="currentForm === 'Upload'">
-          <a-form-item :label="$t('templateFileUpload')">
+          <a-form-item :label="$t('label.templatefileupload')">
             <a-upload-dragger
               :multiple="false"
               :fileList="fileList"
@@ -58,7 +58,7 @@
           </a-form-item>
         </div>
         <a-row :gutter="12">
-          <a-form-item :label="$t('name')">
+          <a-form-item :label="$t('label.name')">
             <a-input
               v-decorator="['name', {
                 rules: [{ required: true, message: 'Please upload a template ' }]
@@ -67,7 +67,7 @@
           </a-form-item>
         </a-row>
         <a-row :gutter="12">
-          <a-form-item :label="$t('displaytext')">
+          <a-form-item :label="$t('label.displaytext')">
             <a-input
               v-decorator="['displaytext', {
                 rules: [{ required: true, message: 'Please enter input' }]
@@ -79,7 +79,7 @@
           <a-row :gutter="12">
             <a-col :md="24" :lg="24">
               <a-form-item
-                :label="$t('zone')"
+                :label="$t('label.zone')"
                 :validate-status="zoneError"
                 :help="zoneErrorMessage">
                 <a-select
@@ -108,7 +108,7 @@
           <a-row :gutter="12">
             <a-col :md="24" :lg="24">
               <a-form-item
-                :label="$t('zoneid')"
+                :label="$t('label.zoneid')"
                 :validate-status="zoneError"
                 :help="zoneErrorMessage">
                 <a-select
@@ -129,7 +129,7 @@
         </div>
         <a-row :gutter="12">
           <a-col :md="24" :lg="12">
-            <a-form-item :label="$t('hypervisor')">
+            <a-form-item :label="$t('label.hypervisor')">
               <a-select
                 v-decorator="['hypervisor', {
                   rules: [
@@ -149,7 +149,7 @@
             </a-form-item>
           </a-col>
           <a-col :md="24" :lg="12">
-            <a-form-item :label="$t('format')">
+            <a-form-item :label="$t('label.format')">
               <a-select
                 v-decorator="['format', {
                   rules: [
@@ -169,12 +169,12 @@
         </a-row>
         <a-row :gutter="12" v-if="allowed && hyperKVMShow && currentForm !== 'Upload'">
           <a-col :md="24" :lg="12">
-            <a-form-item :label="$t('directdownload')">
+            <a-form-item :label="$t('label.directdownload')">
               <a-switch v-decorator="['directdownload']" @change="handleChangeDirect" />
             </a-form-item>
           </a-col>
           <a-col :md="24" :lg="12" v-if="allowDirectDownload">
-            <a-form-item :label="$t('checksum')">
+            <a-form-item :label="$t('label.checksum')">
               <a-input
                 v-decorator="['checksum', {
                   rules: [{ required: false, message: 'Please enter input' }]
@@ -184,7 +184,7 @@
           </a-col>
         </a-row>
         <a-row :gutter="12" v-if="allowed && hyperXenServerShow">
-          <a-form-item v-if="hyperXenServerShow" :label="$t('xenserverToolsVersion61plus')">
+          <a-form-item v-if="hyperXenServerShow" :label="$t('label.xenservertoolsversion61plus')">
             <a-switch
               v-decorator="['xenserverToolsVersion61plus',{
                 initialValue: xenServerProvider
@@ -194,7 +194,7 @@
         </a-row>
         <a-row :gutter="12" v-if="hyperKVMShow || hyperVMWShow">
           <a-col :md="24" :lg="24" v-if="hyperKVMShow">
-            <a-form-item :label="$t('rootDiskControllerType')">
+            <a-form-item :label="$t('label.rootdiskcontrollertype')">
               <a-select
                 v-decorator="['rootDiskControllerType', {
                   rules: [
@@ -205,7 +205,7 @@
                   ]
                 }]"
                 :loading="rootDisk.loading"
-                :placeholder="$t('rootdiskcontroller')">
+                :placeholder="$t('label.rootdiskcontroller')">
                 <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
                   {{ opt.name || opt.description }}
                 </a-select-option>
@@ -213,7 +213,7 @@
             </a-form-item>
           </a-col>
           <a-col :md="24" :lg="12" v-if="hyperVMWShow">
-            <a-form-item :label="$t('rootDiskControllerType')">
+            <a-form-item :label="$t('label.rootdiskcontrollertype')">
               <a-select
                 v-decorator="['rootDiskControllerType', {
                   rules: [
@@ -224,7 +224,7 @@
                   ]
                 }]"
                 :loading="rootDisk.loading"
-                :placeholder="$t('rootdiskcontroller')">
+                :placeholder="$t('label.rootdiskcontroller')">
                 <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
                   {{ opt.name || opt.description }}
                 </a-select-option>
@@ -232,7 +232,7 @@
             </a-form-item>
           </a-col>
           <a-col :md="24" :lg="12" v-if="hyperVMWShow">
-            <a-form-item :label="$t('nicAdapterType')">
+            <a-form-item :label="$t('label.nicadaptertype')">
               <a-select
                 v-decorator="['nicAdapterType', {
                   rules: [
@@ -242,7 +242,7 @@
                     }
                   ]
                 }]"
-                :placeholder="$t('nicadaptertype')">
+                :placeholder="$t('label.nicadaptertype')">
                 <a-select-option v-for="opt in nicAdapterType.opts" :key="opt.id">
                   {{ opt.name || opt.description }}
                 </a-select-option>
@@ -250,7 +250,7 @@
             </a-form-item>
           </a-col>
           <a-col :md="24" :lg="24">
-            <a-form-item v-if="hyperVMWShow" :label="$t('keyboardType')">
+            <a-form-item v-if="hyperVMWShow" :label="$t('label.keyboardtype')">
               <a-select
                 v-decorator="['keyboardType', {
                   rules: [
@@ -260,7 +260,7 @@
                     }
                   ]
                 }]"
-                :placeholder="$t('keyboard')">
+                :placeholder="$t('label.keyboard')">
                 <a-select-option v-for="opt in keyboardType.opts" :key="opt.id">
                   {{ opt.name || opt.description }}
                 </a-select-option>
@@ -270,7 +270,7 @@
         </a-row>
         <a-row :gutter="12">
           <a-col :md="24" :lg="24">
-            <a-form-item :label="$t('ostypeid')">
+            <a-form-item :label="$t('label.ostypeid')">
               <a-select
                 showSearch
                 v-decorator="['ostypeid', {
@@ -301,48 +301,48 @@
                 <a-row>
                   <a-col :span="12">
                     <a-checkbox value="isextractable">
-                      {{ $t('isextractable') }}
+                      {{ $t('label.isextractable') }}
                     </a-checkbox>
                   </a-col>
                   <a-col :span="12">
                     <a-checkbox value="passwordenabled">
-                      {{ $t('passwordenabled') }}
+                      {{ $t('label.passwordenabled') }}
                     </a-checkbox>
                   </a-col>
                 </a-row>
                 <a-row>
                   <a-col :span="12">
                     <a-checkbox value="isdynamicallyscalable">
-                      {{ $t('isdynamicallyscalable') }}
+                      {{ $t('label.isdynamicallyscalable') }}
                     </a-checkbox>
                   </a-col>
                   <a-col :span="12">
                     <a-checkbox value="sshkeyenabled">
-                      {{ $t('sshkeyenabled') }}
+                      {{ $t('label.sshkeyenabled') }}
                     </a-checkbox>
                   </a-col>
                 </a-row>
                 <a-row>
                   <a-col :span="12">
                     <a-checkbox value="isrouting">
-                      {{ $t('isrouting') }}
+                      {{ $t('label.isrouting') }}
                     </a-checkbox>
                   </a-col>
                   <a-col :span="12">
                     <a-checkbox value="ispublic">
-                      {{ $t('ispublic') }}
+                      {{ $t('label.ispublic') }}
                     </a-checkbox>
                   </a-col>
                 </a-row>
                 <a-row>
                   <a-col :span="12">
                     <a-checkbox value="requireshvm">
-                      {{ $t('requireshvm') }}
+                      {{ $t('label.requireshvm') }}
                     </a-checkbox>
                   </a-col>
                   <a-col :span="12">
                     <a-checkbox value="isfeatured">
-                      {{ $t('isfeatured') }}
+                      {{ $t('label.isfeatured') }}
                     </a-checkbox>
                   </a-col>
                 </a-row>
@@ -352,8 +352,8 @@
         </a-row>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index 87e81a64348..e8801b00ec9 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -26,8 +26,8 @@
       :pagination="false"
       :rowKey="record => record.zoneid">
       <div slot="isready" slot-scope="text, record">
-        <span v-if="record.isready">{{ $t('Yes') }}</span>
-        <span v-else>{{ $t('No') }}</span>
+        <span v-if="record.isready">{{ $t('label.yes') }}</span>
+        <span v-else>{{ $t('label.no') }}</span>
       </div>
       <template slot="action" slot-scope="text, record">
         <span style="margin-right: 5px">
@@ -43,8 +43,8 @@
             v-if="'deleteTemplate' in $store.getters.apis"
             placement="topRight"
             title="Delete the template for this zone?"
-            :ok-text="$t('Yes')"
-            :cancel-text="$t('No')"
+            :ok-text="$t('label.yes')"
+            :cancel-text="$t('label.no')"
             :loading="deleteLoading"
             @confirm="deleteTemplate(record)"
           >
@@ -83,7 +83,7 @@
           :form="form"
           @submit="handleCopyTemplateSubmit"
           layout="vertical">
-          <a-form-item :label="$t('zoneid')">
+          <a-form-item :label="$t('label.zoneid')">
             <a-select
               id="zone-selection"
               mode="multiple"
@@ -155,15 +155,15 @@ export default {
   created () {
     this.columns = [
       {
-        title: this.$t('zonename'),
+        title: this.$t('label.zonename'),
         dataIndex: 'zonename'
       },
       {
-        title: this.$t('status'),
+        title: this.$t('label.status'),
         dataIndex: 'status'
       },
       {
-        title: this.$t('isready'),
+        title: this.$t('label.isready'),
         dataIndex: 'isready',
         scopedSlots: { customRender: 'isready' }
       },
diff --git a/ui/src/views/image/UpdateKubernetesSupportedVersion.vue b/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
index a0a2255a186..c7edec3bed1 100644
--- a/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
@@ -22,7 +22,7 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('state')">
+        <a-form-item :label="$t('label.state')">
           <a-select
             id="state-selection"
             v-decorator="['state', {
@@ -42,8 +42,8 @@
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -80,11 +80,11 @@ export default {
     this.states = [
       {
         id: 'Enabled',
-        name: this.$t('enabled')
+        name: this.$t('label.enabled')
       },
       {
         id: 'Disabled',
-        name: this.$t('disabled')
+        name: this.$t('label.disabled')
       }
     ]
   },
diff --git a/ui/src/views/image/UpdateTemplateIsoPermissions.vue b/ui/src/views/image/UpdateTemplateIsoPermissions.vue
index ecde71d4e29..1e21ae8239b 100644
--- a/ui/src/views/image/UpdateTemplateIsoPermissions.vue
+++ b/ui/src/views/image/UpdateTemplateIsoPermissions.vue
@@ -22,11 +22,11 @@
     </div>
 
     <div class="form__item">
-      <p class="form__label">{{ $t('operation') }}</p>
+      <p class="form__label">{{ $t('label.operation') }}</p>
       <a-select v-model="selectedOperation" defaultValue="Add" @change="fetchData">
-        <a-select-option :value="$t('add')">{{ $t('add') }}</a-select-option>
-        <a-select-option :value="$t('remove')">{{ $t('remove') }}</a-select-option>
-        <a-select-option :value="$t('reset')">{{ $t('reset') }}</a-select-option>
+        <a-select-option :value="$t('label.add')">{{ $t('label.add') }}</a-select-option>
+        <a-select-option :value="$t('label.remove')">{{ $t('label.remove') }}</a-select-option>
+        <a-select-option :value="$t('label.reset')">{{ $t('label.reset') }}</a-select-option>
       </a-select>
     </div>
 
@@ -34,18 +34,18 @@
       <div class="form__item">
         <p class="form__label">
           <span class="required">*</span>
-          {{ $t('shareWith') }}
+          {{ $t('label.sharewith') }}
         </p>
         <a-select v-model="selectedShareWith" defaultValue="Account" @change="fetchData">
-          <a-select-option :value="$t('account')">{{ $t('account') }}</a-select-option>
-          <a-select-option :value="$t('project')">{{ $t('project') }}</a-select-option>
+          <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
+          <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
         </a-select>
       </div>
 
       <template v-if="selectedShareWith === 'Account'">
         <div class="form__item">
           <p class="form__label">
-            {{ $t('account') }}
+            {{ $t('label.account') }}
           </p>
           <div v-if="showAccountSelect">
             <a-select
@@ -67,7 +67,7 @@
       <template v-else>
         <div class="form__item">
           <p class="form__label">
-            {{ $t('project') }}
+            {{ $t('label.project') }}
           </p>
           <a-select
             mode="multiple"
@@ -83,10 +83,10 @@
     </template>
     <div class="actions">
       <a-button @click="closeModal">
-        {{ $t('Cancel') }}
+        {{ $t('label.cancel') }}
       </a-button>
       <a-button type="primary" @click="submitData">
-        {{ $t('OK') }}
+        {{ $t('label.ok') }}
       </a-button>
     </div>
   </div>
@@ -113,7 +113,7 @@ export default {
       selectedProjects: [],
       selectedAccountsList: '',
       selectedOperation: 'Add',
-      selectedShareWith: this.$t('account'),
+      selectedShareWith: this.$t('label.account'),
       accountError: false,
       projectError: false,
       showAccountSelect: true,
diff --git a/ui/src/views/infra/AddPrimaryStorage.vue b/ui/src/views/infra/AddPrimaryStorage.vue
index 6de0af6f72a..b3b18b09364 100644
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@@ -19,14 +19,14 @@
   <div class="form-layout">
     <a-spin :spinning="loading">
       <a-form :form="form" layout="vertical">
-        <a-form-item :label="$t('scope')">
+        <a-form-item :label="$t('label.scope')">
           <a-select v-decorator="['scope', { initialValue: 'cluster' }]" @change="val => { this.scope = val }">
-            <a-select-option :value="'cluster'"> {{ $t('clusterid') }} </a-select-option>
-            <a-select-option :value="'zone'"> {{ $t('zoneid') }} </a-select-option>
+            <a-select-option :value="'cluster'"> {{ $t('label.clusterid') }} </a-select-option>
+            <a-select-option :value="'zone'"> {{ $t('label.zoneid') }} </a-select-option>
           </a-select>
         </a-form-item>
         <div v-if="this.scope === 'zone'">
-          <a-form-item :label="$t('hypervisor')">
+          <a-form-item :label="$t('label.hypervisor')">
             <a-select
               v-decorator="['hypervisor', { initialValue: hypervisors[0]}]"
               @change="val => this.selectedHypervisor = val">
@@ -36,7 +36,7 @@
             </a-select>
           </a-form-item>
         </div>
-        <a-form-item :label="$t('zoneid')">
+        <a-form-item :label="$t('label.zoneid')">
           <a-select
             v-decorator="['zone', { initialValue: this.zoneSelected, rules: [{ required: true, message: 'required'}] }]"
             @change="val => changeZone(val)">
@@ -46,7 +46,7 @@
           </a-select>
         </a-form-item>
         <div v-if="this.scope === 'cluster' || this.scope === 'host'">
-          <a-form-item :label="$t('podId')">
+          <a-form-item :label="$t('label.podid')">
             <a-select
               v-decorator="['pod', { initialValue: this.podSelected, rules: [{ required: true, message: 'required'}] }]"
               @change="val => changePod(val)">
@@ -55,7 +55,7 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('clusterId')">
+          <a-form-item :label="$t('label.clusterid')">
             <a-select
               v-decorator="['cluster', { initialValue: this.clusterSelected, rules: [{ required: true, message: 'required'}] }]"
               @change="val => fetchHypervisor(val)">
@@ -66,7 +66,7 @@
           </a-form-item>
         </div>
         <div v-if="this.scope === 'host'">
-          <a-form-item :label="$t('hostId')">
+          <a-form-item :label="$t('label.hostid')">
             <a-select
               v-decorator="['host', { initialValue: this.hostSelected, rules: [{ required: true, message: 'required'}] }]"
               @change="val => this.hostSelected = val">
@@ -76,10 +76,10 @@
             </a-select>
           </a-form-item>
         </div>
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input v-decorator="['name', { rules: [{ required: true, message: 'required' }] }]"/>
         </a-form-item>
-        <a-form-item :label="$t('protocol')">
+        <a-form-item :label="$t('label.protocol')">
           <a-select
             v-decorator="['protocol', { initialValue: this.protocols[0], rules: [{ required: true, message: 'required'}] }]"
             @change="val => this.protocolSelected = val">
@@ -90,43 +90,43 @@
         </a-form-item>
         <div
           v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'iscsi' || protocolSelected === 'vmfs'|| protocolSelected === 'Gluster'">
-          <a-form-item :label="$t('server')">
+          <a-form-item :label="$t('label.server')">
             <a-input v-decorator="['server', { rules: [{ required: true, message: 'required' }] }]" />
           </a-form-item>
         </div>
         <div v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'ocfs2' || protocolSelected === 'preSetup'|| protocolSelected === 'SharedMountPoint'">
-          <a-form-item :label="$t('path')">
+          <a-form-item :label="$t('label.path')">
             <a-input v-decorator="['path', { rules: [{ required: true, message: 'required' }] }]" />
           </a-form-item>
         </div>
         <div v-if="protocolSelected === 'SMB'">
-          <a-form-item :label="$t('smbUsername')">
+          <a-form-item :label="$t('label.smbusername')">
             <a-input v-decorator="['smbUsername', { rules: [{ required: true, message: 'required' }] }]"/>
           </a-form-item>
-          <a-form-item :label="$t('smbPassword')">
+          <a-form-item :label="$t('label.smbpassword')">
             <a-input-password v-decorator="['smbPassword', { rules: [{ required: true, message: 'required' }] }]"/>
           </a-form-item>
-          <a-form-item :label="$t('smbDomain')">
+          <a-form-item :label="$t('label.smbdomain')">
             <a-input v-decorator="['smbDomain', { rules: [{ required: true, message: 'required' }] }]"/>
           </a-form-item>
         </div>
         <div v-if="protocolSelected === 'iscsi'">
-          <a-form-item :label="$t('iqn')">
+          <a-form-item :label="$t('label.iqn')">
             <a-input v-decorator="['iqn', { rules: [{ required: true, message: 'required' }] }]"/>
           </a-form-item>
-          <a-form-item :label="$t('lun')">
+          <a-form-item :label="$t('label.lun')">
             <a-input v-decorator="['lun', { rules: [{ required: true, message: 'required' }] }]"/>
           </a-form-item>
         </div>
         <div v-if="protocolSelected === 'vmfs'">
-          <a-form-item :label="$t('vCenterDataCenter')">
+          <a-form-item :label="$t('label.vcenterdatacenter')">
             <a-input v-decorator="['vCenterDataCenter', { rules: [{ required: true, message: 'required' }] }]"/>
           </a-form-item>
-          <a-form-item :label="$t('vCenterDataStore')">
+          <a-form-item :label="$t('label.vcenterdatastore')">
             <a-input v-decorator="['vCenterDataStore', { rules: [{ required: true, message: 'required' }] }]"/>
           </a-form-item>
         </div>
-        <a-form-item :label="$t('providername')">
+        <a-form-item :label="$t('label.providername')">
           <a-select
             v-decorator="['provider', { initialValue: providerSelected, rules: [{ required: true, message: 'required'}] }]"
             @change="val => this.providerSelected = val">
@@ -136,45 +136,45 @@
           </a-select>
         </a-form-item>
         <div v-if="this.providerSelected !== 'DefaultPrimary'">
-          <a-form-item :label="$t('isManaged')">
+          <a-form-item :label="$t('label.ismanaged')">
             <a-checkbox-group v-decorator="['managed']" >
               <a-checkbox value="ismanaged"></a-checkbox>
             </a-checkbox-group>
           </a-form-item>
-          <a-form-item :label="$t('capacityBytes')">
+          <a-form-item :label="$t('label.capacitybytes')">
             <a-input v-decorator="['capacityBytes']" />
           </a-form-item>
-          <a-form-item :label="$t('capacityIops')">
+          <a-form-item :label="$t('label.capacityiops')">
             <a-input v-decorator="['capacityIops']" />
           </a-form-item>
-          <a-form-item :label="$t('url')">
+          <a-form-item :label="$t('label.url')">
             <a-input v-decorator="['url']" />
           </a-form-item>
         </div>
         <div v-if="this.protocolSelected === 'RBD'">
-          <a-form-item :label="$t('radosmonitor')">
+          <a-form-item :label="$t('label.radosmonitor')">
             <a-input v-decorator="['radosmonitor']" />
-          </a-form-item><a-form-item :label="$t('radospool')">
+          </a-form-item><a-form-item :label="$t('label.radospool')">
             <a-input v-decorator="['radospool']" />
           </a-form-item>
-          <a-form-item :label="$t('radosuser')">
+          <a-form-item :label="$t('label.radosuser')">
             <a-input v-decorator="['radosuser']" />
           </a-form-item>
-          <a-form-item :label="$t('radossecret')">
+          <a-form-item :label="$t('label.radossecret')">
             <a-input v-decorator="['radossecret']" />
           </a-form-item>
         </div>
         <div v-if="protocolSelected === 'CLVM'">
-          <a-form-item :label="$t('volumegroup')">
+          <a-form-item :label="$t('label.volumegroup')">
             <a-input v-decorator="['volumegroup', { rules: [{ required: true, message: 'required'}] }]" />
           </a-form-item>
         </div>
         <div v-if="protocolSelected === 'Gluster'">
-          <a-form-item :label="$t('volume')">
+          <a-form-item :label="$t('label.volume')">
             <a-input v-decorator="['volume']" />
           </a-form-item>
         </div>
-        <a-form-item :label="$t('storagetags')">
+        <a-form-item :label="$t('label.storagetags')">
           <a-select
             mode="tags"
             v-model="selectedTags"
@@ -184,8 +184,8 @@
         </a-form-item>
       </a-form>
       <div class="actions">
-        <a-button @click="closeModal">{{ $t('cancel') }}</a-button>
-        <a-button type="primary" @click="handleSubmit">{{ $t('ok') }}</a-button>
+        <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+        <a-button type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
diff --git a/ui/src/views/infra/AddSecondaryStorage.vue b/ui/src/views/infra/AddSecondaryStorage.vue
index 8ed3ecdc6d9..8af2c852461 100644
--- a/ui/src/views/infra/AddSecondaryStorage.vue
+++ b/ui/src/views/infra/AddSecondaryStorage.vue
@@ -19,10 +19,10 @@
   <div class="form-layout">
     <a-spin :spinning="loading">
       <a-form :form="form" layout="vertical">
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input v-decorator="['name']" />
         </a-form-item>
-        <a-form-item :label="$t('providername')">
+        <a-form-item :label="$t('label.providername')">
           <a-select
             v-decorator="[
               'provider',
@@ -39,7 +39,7 @@
           </a-select>
         </a-form-item>
         <div v-if="provider !== 'Swift'">
-          <a-form-item :label="$t('zone')">
+          <a-form-item :label="$t('label.zone')">
             <a-select
               v-decorator="[
                 'zone',
@@ -56,7 +56,7 @@
               >{{ zone.name }}</a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('server')">
+          <a-form-item :label="$t('label.server')">
             <a-input
               v-decorator="[
                 'server',
@@ -65,7 +65,7 @@
                 }]"
             />
           </a-form-item>
-          <a-form-item :label="$t('path')">
+          <a-form-item :label="$t('label.path')">
             <a-input
               v-decorator="[
                 'path',
@@ -76,7 +76,7 @@
           </a-form-item>
         </div>
         <div v-if="provider === 'SMB/CIFS'">
-          <a-form-item :label="$t('smbUsername')">
+          <a-form-item :label="$t('label.smbusername')">
             <a-input
               v-decorator="[
                 'smbUsername',
@@ -85,7 +85,7 @@
                 }]"
             />
           </a-form-item>
-          <a-form-item :label="$t('smbPassword')">
+          <a-form-item :label="$t('label.smbpassword')">
             <a-input-password
               v-decorator="[
                 'smbPassword',
@@ -94,7 +94,7 @@
                 }]"
             />
           </a-form-item>
-          <a-form-item :label="$t('smbDomain')">
+          <a-form-item :label="$t('label.smbdomain')">
             <a-input
               v-decorator="[
                 'smbDomain',
@@ -105,7 +105,7 @@
           </a-form-item>
         </div>
         <div v-if="provider === 'Swift'">
-          <a-form-item :label="$t('url')">
+          <a-form-item :label="$t('label.url')">
             <a-input
               v-decorator="[
                 'url',
@@ -114,7 +114,7 @@
                 }]"
             />
           </a-form-item>
-          <a-form-item :label="$t('account')">
+          <a-form-item :label="$t('label.account')">
             <a-input
               v-decorator="[
                 'account',
@@ -123,7 +123,7 @@
                 }]"
             />
           </a-form-item>
-          <a-form-item :label="$t('username')">
+          <a-form-item :label="$t('label.username')">
             <a-input
               v-decorator="[
                 'username',
@@ -132,7 +132,7 @@
                 }]"
             />
           </a-form-item>
-          <a-form-item :label="$t('key')">
+          <a-form-item :label="$t('label.key')">
             <a-input
               v-decorator="[
                 'key',
@@ -141,7 +141,7 @@
                 }]"
             />
           </a-form-item>
-          <a-form-item :label="$t('storagepolicy')">
+          <a-form-item :label="$t('label.storagepolicy')">
             <a-input
               v-decorator="[
                 'storagepolicy'
@@ -150,8 +150,8 @@
           </a-form-item>
         </div>
         <div class="actions">
-          <a-button @click="closeModal">{{ $t('Cancel') }}</a-button>
-          <a-button type="primary" @click="handleSubmit">{{ $t('OK') }}</a-button>
+          <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
diff --git a/ui/src/views/infra/ClusterAdd.vue b/ui/src/views/infra/ClusterAdd.vue
index ad142ed9e3e..d58bfe5ce5a 100644
--- a/ui/src/views/infra/ClusterAdd.vue
+++ b/ui/src/views/infra/ClusterAdd.vue
@@ -19,7 +19,7 @@
   <a-spin :spinning="loading">
     <div class="form">
       <div class="form__item">
-        <div class="form__label"><span class="required">* </span>{{ $t('zonenamelabel') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
         <a-select v-model="zoneId" @change="fetchPods">
           <a-select-option
             v-for="zone in zonesList"
@@ -31,7 +31,7 @@
       </div>
 
       <div class="form__item">
-        <div class="form__label">{{ $t('hypervisor') }}</div>
+        <div class="form__label">{{ $t('label.hypervisor') }}</div>
         <a-select v-model="hypervisor" @change="resetAllFields">
           <a-select-option
             v-for="hv in hypervisorsList"
@@ -43,7 +43,7 @@
       </div>
 
       <div class="form__item">
-        <div class="form__label">{{ $t('podname') }}</div>
+        <div class="form__label">{{ $t('label.podname') }}</div>
         <a-select v-model="podId">
           <a-select-option
             v-for="pod in podsList"
@@ -55,35 +55,35 @@
       </div>
 
       <div class="form__item">
-        <div class="form__label"><span class="required">* </span>{{ $t('clusternamelabel') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ $t('label.clusternamelabel') }}</div>
         <span class="required required-label" ref="requiredCluster">Required</span>
         <a-input :placeholder="placeholder.clustername" v-model="clustername"></a-input>
       </div>
 
       <template v-if="hypervisor === 'VMware'">
         <div class="form__item">
-          <div class="form__label">{{ $t('vCenterHost') }}</div>
+          <div class="form__label">{{ $t('label.vcenterhost') }}</div>
           <a-input v-model="host"></a-input>
         </div>
 
         <div class="form__item">
-          <div class="form__label">{{ $t('vCenterUsername') }}</div>
+          <div class="form__label">{{ $t('label.vcenterusername') }}</div>
           <a-input v-model="username"></a-input>
         </div>
 
         <div class="form__item">
-          <div class="form__label">{{ $t('vCenterPassword') }}</div>
+          <div class="form__label">{{ $t('label.vcenterpassword') }}</div>
           <a-input v-model="password"></a-input>
         </div>
 
         <div class="form__item">
-          <div class="form__label">{{ $t('vCenterDataCenter') }}</div>
+          <div class="form__label">{{ $t('label.vcenterdatacenter') }}</div>
           <a-input v-model="dataCenter"></a-input>
         </div>
       </template>
 
       <div class="form__item">
-        <div class="form__label">{{ $t('isDedicated') }}</div>
+        <div class="form__label">{{ $t('label.isdedicated') }}</div>
         <a-checkbox @change="toggleDedicated" />
       </div>
 
@@ -97,8 +97,8 @@
       <a-divider></a-divider>
 
       <div class="actions">
-        <a-button @click="() => this.$parent.$parent.close()">{{ $t('cancel') }}</a-button>
-        <a-button @click="handleSubmitForm" type="primary">{{ $t('ok') }}</a-button>
+        <a-button @click="() => this.$parent.$parent.close()">{{ $t('label.cancel') }}</a-button>
+        <a-button @click="handleSubmitForm" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </div>
diff --git a/ui/src/views/infra/HostAdd.vue b/ui/src/views/infra/HostAdd.vue
index a86c64b8cc4..0551549395b 100644
--- a/ui/src/views/infra/HostAdd.vue
+++ b/ui/src/views/infra/HostAdd.vue
@@ -20,7 +20,7 @@
     <div class="form">
 
       <div class="form__item">
-        <div class="form__label"><span class="required">* </span>{{ $t('zonenamelabel') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
         <a-select v-model="zoneId" @change="fetchPods">
           <a-select-option
             v-for="zone in zonesList"
@@ -32,7 +32,7 @@
       </div>
 
       <div class="form__item">
-        <div class="form__label"><span class="required">* </span>{{ $t('podname') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ $t('label.podname') }}</div>
         <a-select v-model="podId" @change="fetchClusters">
           <a-select-option
             v-for="pod in podsList"
@@ -44,7 +44,7 @@
       </div>
 
       <div class="form__item">
-        <div class="form__label"><span class="required">* </span>{{ $t('clustername') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ $t('label.clustername') }}</div>
         <a-select v-model="clusterId" @change="handleChangeCluster">
           <a-select-option
             v-for="cluster in clustersList"
@@ -56,41 +56,41 @@
       </div>
 
       <div class="form__item required-field">
-        <div class="form__label"><span class="required">* </span>{{ selectedClusterHyperVisorType === 'VMware' ? $t('vcenterHost') : $t('hostnamelabel') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ selectedClusterHyperVisorType === 'VMware' ? $t('label.vcenterhost') : $t('label.hostnamelabel') }}</div>
         <span class="required required-label">Required</span>
         <a-input v-model="hostname"></a-input>
       </div>
 
       <div class="form__item required-field" v-if="selectedClusterHyperVisorType !== 'VMware'">
-        <div class="form__label"><span class="required">* </span>{{ $t('username') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ $t('label.username') }}</div>
         <span class="required required-label">Required</span>
         <a-input :placeholder="placeholder.username" v-model="username"></a-input>
       </div>
 
       <div class="form__item required-field" v-if="selectedClusterHyperVisorType !== 'VMware'">
-        <div class="form__label"><span class="required">* </span>{{ $t('password') }}</div>
+        <div class="form__label"><span class="required">* </span>{{ $t('label.password') }}</div>
         <span class="required required-label">Required</span>
         <a-input :placeholder="placeholder.password" type="password" v-model="password"></a-input>
       </div>
 
       <template v-if="selectedClusterHyperVisorType === 'Ovm3'">
         <div class="form__item">
-          <div class="form__label">{{ $t('agentUsername') }}</div>
+          <div class="form__label">{{ $t('label.agentusername') }}</div>
           <a-input v-model="agentusername"></a-input>
         </div>
         <div class="form__item required-field">
-          <div class="form__label"><span class="required">* </span>{{ $t('agentPassword') }}</div>
+          <div class="form__label"><span class="required">* </span>{{ $t('label.agentpassword') }}</div>
           <span class="required required-label">Required</span>
           <a-input type="password" v-model="agentpassword"></a-input>
         </div>
         <div class="form__item">
-          <div class="form__label">{{ $t('agentPort') }}</div>
+          <div class="form__label">{{ $t('label.agentport') }}</div>
           <a-input v-model="agentport"></a-input>
         </div>
       </template>
 
       <div class="form__item">
-        <div class="form__label">{{ $t('hostTags') }}</div>
+        <div class="form__label">{{ $t('label.hosttags') }}</div>
         <a-select
           mode="tags"
           :placeholder="placeholder.hosttags"
@@ -101,7 +101,7 @@
       </div>
 
       <div class="form__item">
-        <div class="form__label">{{ $t('isDedicated') }}</div>
+        <div class="form__label">{{ $t('label.isdedicated') }}</div>
         <a-checkbox @change="toggleDedicated" />
       </div>
 
@@ -115,8 +115,8 @@
       <a-divider></a-divider>
 
       <div class="actions">
-        <a-button @click="() => this.$parent.$parent.close()">{{ $t('cancel') }}</a-button>
-        <a-button @click="handleSubmitForm" type="primary">{{ $t('ok') }}</a-button>
+        <a-button @click="() => this.$parent.$parent.close()">{{ $t('label.cancel') }}</a-button>
+        <a-button @click="handleSubmitForm" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </div>
diff --git a/ui/src/views/infra/HostInfoTab.vue b/ui/src/views/infra/HostInfoTab.vue
index ad71712a5a2..b3239e726a5 100644
--- a/ui/src/views/infra/HostInfoTab.vue
+++ b/ui/src/views/infra/HostInfoTab.vue
@@ -20,7 +20,7 @@
     <a-list size="small">
       <a-list-item>
         <div>
-          <strong>{{ $t('hypervisorversion') }}</strong>
+          <strong>{{ $t('label.hypervisorversion') }}</strong>
           <div v-if="host.details">
             {{ host.hypervisor }}
             {{ host.details['Host.OS'] + ' ' + host.details['Host.OS.Version'] }}
@@ -29,7 +29,7 @@
       </a-list-item>
       <a-list-item v-if="host.details && host.details.secured">
         <div>
-          <strong>{{ $t('Secured') }}</strong>
+          <strong>{{ $t('label.secured') }}</strong>
           <div>
             {{ host.details.secured }}
           </div>
@@ -37,7 +37,7 @@
       </a-list-item>
       <a-list-item>
         <div>
-          <strong>{{ $t('hosttags') }}</strong>
+          <strong>{{ $t('label.hosttags') }}</strong>
           <div>
             {{ host.hosttags }}
           </div>
@@ -45,7 +45,7 @@
       </a-list-item>
       <a-list-item>
         <div>
-          <strong>{{ $t('oscategoryid') }}</strong>
+          <strong>{{ $t('label.oscategoryid') }}</strong>
           <div>
             {{ host.oscategoryname }}
           </div>
@@ -53,7 +53,7 @@
       </a-list-item>
       <a-list-item v-if="host.outofbandmanagement">
         <div>
-          <strong>{{ $t('OOBM') }}</strong>
+          <strong>{{ $t('label.oobm') }}</strong>
           <div>
             {{ host.outofbandmanagement.enabled }}
           </div>
@@ -61,7 +61,7 @@
       </a-list-item>
       <a-list-item v-if="host.outofbandmanagement">
         <div>
-          <strong>{{ $t('powerstate') }}</strong>
+          <strong>{{ $t('label.powerstate') }}</strong>
           <div>
             {{ host.outofbandmanagement.powerstate }}
           </div>
@@ -69,7 +69,7 @@
       </a-list-item>
       <a-list-item v-if="host.hostha">
         <div>
-          <strong>{{ $t('haenable') }}</strong>
+          <strong>{{ $t('label.haenable') }}</strong>
           <div>
             {{ host.hostha.haenable }}
           </div>
@@ -77,7 +77,7 @@
       </a-list-item>
       <a-list-item v-if="host.hostha">
         <div>
-          <strong>{{ $t('hastate') }}</strong>
+          <strong>{{ $t('label.hastate') }}</strong>
           <div>
             {{ host.hostha.hastate }}
           </div>
@@ -85,7 +85,7 @@
       </a-list-item>
       <a-list-item v-if="host.hostha">
         <div>
-          <strong>{{ $t('haprovider') }}</strong>
+          <strong>{{ $t('label.haprovider') }}</strong>
           <div>
             {{ host.hostha.haprovider }}
           </div>
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 01e620dc59d..04787ddd319 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -28,7 +28,7 @@
             size="small"
             shape="round"
             @click="fetchData()" >
-            {{ $t('refresh') }}
+            {{ $t('label.refresh') }}
           </a-button>
           <a-button
             style="margin-left: 12px; margin-top: 4px"
@@ -36,10 +36,10 @@
             size="small"
             shape="round"
             @click="sslFormVisible = true">
-            {{ $t('Setup SSL Certificate') }}
+            {{ $t('label.setup.ssl.certificate') }}
           </a-button>
           <a-modal
-            :title="$t('SSL Certificate')"
+            :title="$t('label.ssl.certificate')"
             :visible="sslFormVisible"
             :footer="null"
             @cancel="sslModalClose">
diff --git a/ui/src/views/infra/PodAdd.vue b/ui/src/views/infra/PodAdd.vue
index eeab99d1de1..48326a184f7 100644
--- a/ui/src/views/infra/PodAdd.vue
+++ b/ui/src/views/infra/PodAdd.vue
@@ -19,7 +19,7 @@
   <a-spin :spinning="loading">
     <a-form :form="form" layout="vertical" class="form">
 
-      <a-form-item class="form__item" :label="$t('zone')">
+      <a-form-item class="form__item" :label="$t('label.zone')">
         <a-select
           v-decorator="['zoneid', {
             initialValue: this.zoneId,
@@ -34,7 +34,7 @@
         </a-select>
       </a-form-item>
 
-      <a-form-item class="form__item" :label="$t('podname')">
+      <a-form-item class="form__item" :label="$t('label.podname')">
         <a-input
           :placeholder="placeholder.name"
           v-decorator="[
@@ -45,7 +45,7 @@
         />
       </a-form-item>
 
-      <a-form-item class="form__item" :label="$t('reservedSystemGateway')">
+      <a-form-item class="form__item" :label="$t('label.reservedsystemgateway')">
         <a-input
           :placeholder="placeholder.gateway"
           v-decorator="[
@@ -56,7 +56,7 @@
         />
       </a-form-item>
 
-      <a-form-item class="form__item" :label="$t('reservedSystemNetmask')">
+      <a-form-item class="form__item" :label="$t('label.reservedsystemnetmask')">
         <a-input
           :placeholder="placeholder.netmask"
           v-decorator="[
@@ -67,7 +67,7 @@
         />
       </a-form-item>
 
-      <a-form-item class="form__item" :label="$t('reservedSystemStartIp')">
+      <a-form-item class="form__item" :label="$t('label.reservedsystemstartip')">
         <a-input
           :placeholder="placeholder.startip"
           v-decorator="[
@@ -78,7 +78,7 @@
         />
       </a-form-item>
 
-      <a-form-item class="form__item" :label="$t('reservedSystemEndIp')">
+      <a-form-item class="form__item" :label="$t('label.reservedsystemendip')">
         <a-input
           :placeholder="placeholder.endip"
           v-decorator="['endip']"
@@ -86,7 +86,7 @@
       </a-form-item>
 
       <div class="form__item">
-        <div class="form__label">{{ $t('isDedicated') }}</div>
+        <div class="form__label">{{ $t('label.isdedicated') }}</div>
         <a-checkbox @change="toggleDedicate" />
       </div>
 
@@ -100,8 +100,8 @@
       <a-divider></a-divider>
 
       <div class="actions">
-        <a-button @click="() => this.$parent.$parent.close()">{{ $t('cancel') }}</a-button>
-        <a-button @click="handleSubmit" type="primary">{{ $t('ok') }}</a-button>
+        <a-button @click="() => this.$parent.$parent.close()">{{ $t('label.cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </a-form>
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index 7f0577445b2..50a66ee4089 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -56,7 +56,7 @@
           :form="form"
           @submit="handleSubmit"
           layout="vertical" >
-          <a-form-item :label="$t('vlanRange')">
+          <a-form-item :label="$t('label.vlanrange')">
             <a-input
               v-decorator="['range', {
                 rules: [{ required: true, message: 'Required' }]
@@ -64,14 +64,14 @@
             ></a-input>
           </a-form-item>
 
-          <a-form-item :label="$t('scope')">
+          <a-form-item :label="$t('label.scope')">
             <a-select defaultValue="account" v-model="selectedScope" @change="handleScopeChange">
-              <a-select-option value="account">{{ $t('account') }}</a-select-option>
-              <a-select-option value="project">{{ $t('project') }}</a-select-option>
+              <a-select-option value="account">{{ $t('label.account') }}</a-select-option>
+              <a-select-option value="project">{{ $t('label.project') }}</a-select-option>
             </a-select>
           </a-form-item>
 
-          <a-form-item :label="$t('domain')">
+          <a-form-item :label="$t('label.domain')">
             <a-select
               @change="handleDomainChange"
               v-decorator="['domain', {
@@ -82,7 +82,7 @@
             </a-select>
           </a-form-item>
 
-          <a-form-item :label="$t('account')" v-if="selectedScope === 'account'">
+          <a-form-item :label="$t('label.account')" v-if="selectedScope === 'account'">
             <a-select
               v-decorator="['account', {
                 rules: [{ required: true, message: 'Required' }]
@@ -97,7 +97,7 @@
             </a-select>
           </a-form-item>
 
-          <a-form-item :label="$t('project')" v-if="selectedScope === 'project'">
+          <a-form-item :label="$t('label.project')" v-if="selectedScope === 'project'">
             <a-select
               v-decorator="['project', {
                 rules: [{ required: true, message: 'Required' }]
@@ -149,19 +149,19 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('vlanrange'),
+          title: this.$t('label.vlanrange'),
           dataIndex: 'guestvlanrange'
         },
         {
-          title: this.$t('domain'),
+          title: this.$t('label.domain'),
           dataIndex: 'domain'
         },
         {
-          title: this.$t('account'),
+          title: this.$t('label.account'),
           dataIndex: 'account'
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ]
diff --git a/ui/src/views/infra/network/IpRangesTabManagement.vue b/ui/src/views/infra/network/IpRangesTabManagement.vue
index 92cad026282..712064082d0 100644
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@@ -69,7 +69,7 @@
         layout="vertical"
         class="form"
       >
-        <a-form-item :label="$t('podId')" class="form__item">
+        <a-form-item :label="$t('label.podid')" class="form__item">
           <a-select
             v-decorator="['pod', {
               rules: [{ required: true, message: 'Required' }]
@@ -78,32 +78,32 @@
             <a-select-option v-for="item in items" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('gateway')" class="form__item">
+        <a-form-item :label="$t('label.gateway')" class="form__item">
           <a-input
             v-decorator="['gateway', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('netmask')" class="form__item">
+        <a-form-item :label="$t('label.netmask')" class="form__item">
           <a-input
             v-decorator="['netmask', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('vlan')" class="form__item">
+        <a-form-item :label="$t('label.vlan')" class="form__item">
           <a-input
             v-decorator="['vlan']">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('startip')" class="form__item">
+        <a-form-item :label="$t('label.startip')" class="form__item">
           <a-input
             v-decorator="['startip', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('endip')" class="form__item">
+        <a-form-item :label="$t('label.endip')" class="form__item">
           <a-input
             v-decorator="['endip', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('System VMs')" class="form__item">
+        <a-form-item :label="$t('label.system.vms')" class="form__item">
           <a-checkbox v-decorator="['vms']"></a-checkbox>
         </a-form-item>
       </a-form>
@@ -139,39 +139,39 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('podid'),
+          title: this.$t('label.podid'),
           dataIndex: 'name'
         },
         {
-          title: this.$t('gateway'),
+          title: this.$t('label.gateway'),
           dataIndex: 'gateway'
         },
         {
-          title: this.$t('netmask'),
+          title: this.$t('label.netmask'),
           dataIndex: 'netmask'
         },
         {
-          title: this.$t('vlan'),
+          title: this.$t('label.vlan'),
           dataIndex: 'vlanid',
           scopedSlots: { customRender: 'vlan' }
         },
         {
-          title: this.$t('startip'),
+          title: this.$t('label.startip'),
           dataIndex: 'startip',
           scopedSlots: { customRender: 'startip' }
         },
         {
-          title: this.$t('endip'),
+          title: this.$t('label.endip'),
           dataIndex: 'endip',
           scopedSlots: { customRender: 'endip' }
         },
         {
-          title: this.$t('System VMs'),
+          title: this.$t('label.system.vms'),
           dataIndex: 'forsystemvms',
           scopedSlots: { customRender: 'forsystemvms' }
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ]
diff --git a/ui/src/views/infra/network/IpRangesTabPublic.vue b/ui/src/views/infra/network/IpRangesTabPublic.vue
index dc0a3d1a5ca..1706ad76269 100644
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@@ -78,15 +78,15 @@
     <a-modal v-model="accountModal" v-if="selectedItem" @ok="accountModal = false">
       <div>
         <div style="margin-bottom: 10px;">
-          <div class="list__label">{{ $t('account') }}</div>
+          <div class="list__label">{{ $t('label.account') }}</div>
           <div>{{ selectedItem.account }}</div>
         </div>
         <div style="margin-bottom: 10px;">
-          <div class="list__label">{{ $t('domain') }}</div>
+          <div class="list__label">{{ $t('label.domain') }}</div>
           <div>{{ selectedItem.domain }}</div>
         </div>
         <div style="margin-bottom: 10px;">
-          <div class="list__label">{{ $t('System VMs') }}</div>
+          <div class="list__label">{{ $t('label.system.vms') }}</div>
           <div>{{ selectedItem.forsystemvms }}</div>
         </div>
       </div>
@@ -95,11 +95,11 @@
     <a-modal :zIndex="1001" v-model="addAccountModal" :title="$t('label.add.account')" @ok="handleAddAccount">
       <a-spin :spinning="domainsLoading">
         <div style="margin-bottom: 10px;">
-          <div class="list__label">{{ $t('account') }}:</div>
+          <div class="list__label">{{ $t('label.account') }}:</div>
           <a-input v-model="addAccount.account"></a-input>
         </div>
         <div>
-          <div class="list__label">{{ $t('domain') }}:</div>
+          <div class="list__label">{{ $t('label.domain') }}:</div>
           <a-select v-model="addAccount.domain">
             <a-select-option
               v-for="domain in domains"
@@ -118,27 +118,27 @@
         layout="vertical"
         class="form"
       >
-        <a-form-item :label="$t('gateway')" class="form__item">
+        <a-form-item :label="$t('label.gateway')" class="form__item">
           <a-input
             v-decorator="['gateway', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('netmask')" class="form__item">
+        <a-form-item :label="$t('label.netmask')" class="form__item">
           <a-input
             v-decorator="['netmask', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('vlan')" class="form__item">
+        <a-form-item :label="$t('label.vlan')" class="form__item">
           <a-input
             v-decorator="['vlan']">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('startip')" class="form__item">
+        <a-form-item :label="$t('label.startip')" class="form__item">
           <a-input
             v-decorator="['startip', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('endip')" class="form__item">
+        <a-form-item :label="$t('label.endip')" class="form__item">
           <a-input
             v-decorator="['endip', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
@@ -150,14 +150,14 @@
         <div v-if="showAccountFields" style="margin-top: 20px;">
           <p>(optional) Please specify an account to be associated with this IP range.</p>
           <p>System VMs: Enable dedication of public IP range for SSVM and CPVM, account field disabled. Reservation strictness defined on 'system.vm.public.ip.reservation.mode.strictness'.</p>
-          <a-form-item :label="$t('System VMs')" class="form__item">
+          <a-form-item :label="$t('label.system.vms')" class="form__item">
             <a-switch v-decorator="['forsystemvms']"></a-switch>
           </a-form-item>
           <a-spin :spinning="domainsLoading">
-            <a-form-item :label="$t('account')" class="form__item">
+            <a-form-item :label="$t('label.account')" class="form__item">
               <a-input v-decorator="['account']"></a-input>
             </a-form-item>
-            <a-form-item :label="$t('domain')" class="form__item">
+            <a-form-item :label="$t('label.domain')" class="form__item">
               <a-select v-decorator="['domain']">
                 <a-select-option
                   v-for="domain in domains"
@@ -212,31 +212,31 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('gateway'),
+          title: this.$t('label.gateway'),
           dataIndex: 'gateway'
         },
         {
-          title: this.$t('netmask'),
+          title: this.$t('label.netmask'),
           dataIndex: 'netmask'
         },
         {
-          title: this.$t('vlan'),
+          title: this.$t('label.vlan'),
           dataIndex: 'vlan'
         },
         {
-          title: this.$t('startip'),
+          title: this.$t('label.startip'),
           dataIndex: 'startip'
         },
         {
-          title: this.$t('endip'),
+          title: this.$t('label.endip'),
           dataIndex: 'endip'
         },
         {
-          title: this.$t('account'),
+          title: this.$t('label.account'),
           scopedSlots: { customRender: 'account' }
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ]
diff --git a/ui/src/views/infra/network/IpRangesTabStorage.vue b/ui/src/views/infra/network/IpRangesTabStorage.vue
index 9fcd4395624..548743afe39 100644
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@@ -67,7 +67,7 @@
         layout="vertical"
         class="form"
       >
-        <a-form-item :label="$t('podId')" class="form__item">
+        <a-form-item :label="$t('label.podid')" class="form__item">
           <a-select
             v-decorator="['pod', {
               rules: [{ required: true, message: 'Required' }]
@@ -76,27 +76,27 @@
             <a-select-option v-for="pod in pods" :key="pod.id" :value="pod.id">{{ pod.name }}</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('gateway')" class="form__item">
+        <a-form-item :label="$t('label.gateway')" class="form__item">
           <a-input
             v-decorator="['gateway', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('netmask')" class="form__item">
+        <a-form-item :label="$t('label.netmask')" class="form__item">
           <a-input
             v-decorator="['netmask', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('vlan')" class="form__item">
+        <a-form-item :label="$t('label.vlan')" class="form__item">
           <a-input
             v-decorator="['vlan']">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('startip')" class="form__item">
+        <a-form-item :label="$t('label.startip')" class="form__item">
           <a-input
             v-decorator="['startip', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
         </a-form-item>
-        <a-form-item :label="$t('endip')" class="form__item">
+        <a-form-item :label="$t('label.endip')" class="form__item">
           <a-input
             v-decorator="['endip', { rules: [{ required: true, message: 'Required' }] }]">
           </a-input>
@@ -133,31 +133,31 @@ export default {
       defaultSelectedPod: null,
       columns: [
         {
-          title: this.$t('podId'),
+          title: this.$t('label.podid'),
           scopedSlots: { customRender: 'name' }
         },
         {
-          title: this.$t('gateway'),
+          title: this.$t('label.gateway'),
           dataIndex: 'gateway'
         },
         {
-          title: this.$t('netmask'),
+          title: this.$t('label.netmask'),
           dataIndex: 'netmask'
         },
         {
-          title: this.$t('vlan'),
+          title: this.$t('label.vlan'),
           dataIndex: 'vlanid'
         },
         {
-          title: this.$t('startip'),
+          title: this.$t('label.startip'),
           dataIndex: 'startip'
         },
         {
-          title: this.$t('endip'),
+          title: this.$t('label.endip'),
           dataIndex: 'endip'
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ],
diff --git a/ui/src/views/infra/network/TrafficTypesTab.vue b/ui/src/views/infra/network/TrafficTypesTab.vue
index 1fb714ad8b2..7abdf032d32 100644
--- a/ui/src/views/infra/network/TrafficTypesTab.vue
+++ b/ui/src/views/infra/network/TrafficTypesTab.vue
@@ -28,11 +28,11 @@
         </div>
         <div v-if="item.traffictype === 'Public'">
           <div style="margin-bottom: 10px;">
-            <div><strong>{{ $t('traffictype') }}</strong></div>
+            <div><strong>{{ $t('label.traffictype') }}</strong></div>
             <div>{{ publicNetwork.traffictype }}</div>
           </div>
           <div style="margin-bottom: 10px;">
-            <div><strong>{{ $t('broadcastdomaintype') }}</strong></div>
+            <div><strong>{{ $t('label.broadcastdomaintype') }}</strong></div>
             <div>{{ publicNetwork.broadcastdomaintype }}</div>
           </div>
           <a-divider />
diff --git a/ui/src/views/infra/zone/PhysicalNetworksTab.vue b/ui/src/views/infra/zone/PhysicalNetworksTab.vue
index b46b6bc924c..66e8e5c123f 100644
--- a/ui/src/views/infra/zone/PhysicalNetworksTab.vue
+++ b/ui/src/views/infra/zone/PhysicalNetworksTab.vue
@@ -23,19 +23,19 @@
           <div class="list__item-container">
             <div class="list__col">
               <div class="list__label">
-                {{ $t('name') }}
+                {{ $t('label.name') }}
               </div>
               <div>
                 <router-link :to="{ path: '/physicalnetwork/' + network.id }">{{ network.name }}</router-link>
               </div>
             </div>
             <div class="list__col">
-              <div class="list__label">{{ $t('state') }}</div>
+              <div class="list__label">{{ $t('label.state') }}</div>
               <div><status :text="network.state" displayText></status></div>
             </div>
             <div class="list__col">
               <div class="list__label">
-                {{ $t('isolationmethods') }}
+                {{ $t('label.isolationmethods') }}
               </div>
               <div>
                 {{ network.isolationmethods }}
@@ -43,13 +43,13 @@
             </div>
             <div class="list__col">
               <div class="list__label">
-                {{ $t('vlan') }}
+                {{ $t('label.vlan') }}
               </div>
               <div>{{ network.vlan }}</div>
             </div>
             <div class="list__col">
               <div class="list__label">
-                {{ $t('broadcastdomainrange') }}
+                {{ $t('label.broadcastdomainrange') }}
               </div>
               <div>{{ network.broadcastdomainrange }}</div>
             </div>
diff --git a/ui/src/views/infra/zone/SystemVmsTab.vue b/ui/src/views/infra/zone/SystemVmsTab.vue
index 34744fea9fa..9ccd96867a8 100644
--- a/ui/src/views/infra/zone/SystemVmsTab.vue
+++ b/ui/src/views/infra/zone/SystemVmsTab.vue
@@ -23,23 +23,23 @@
           <div class="list__item-container">
             <div class="list__col">
               <div class="list__label">
-                {{ $t('name') }}
+                {{ $t('label.name') }}
               </div>
               <div>
                 <router-link :to="{ path: '/systemvm/' + vm.id }">{{ vm.name }}</router-link>
               </div>
             </div>
             <div class="list__col">
-              <div class="list__label">{{ $t('vmstate') }}</div>
+              <div class="list__label">{{ $t('label.vmstate') }}</div>
               <div><status :text="vm.state" displayText></status></div>
             </div>
             <div class="list__col">
-              <div class="list__label">{{ $t('agentstate') }}</div>
+              <div class="list__label">{{ $t('label.agentstate') }}</div>
               <div><status :text="vm.agentstate || 'Unknown'" displayText></status></div>
             </div>
             <div class="list__col">
               <div class="list__label">
-                {{ $t('type') }}
+                {{ $t('label.type') }}
               </div>
               <div>
                 {{ vm.systemvmtype == 'consoleproxy' ? 'Console Proxy VM' : 'Secondary Storage VM' }}
@@ -47,7 +47,7 @@
             </div>
             <div class="list__col">
               <div class="list__label">
-                {{ $t('publicip') }}
+                {{ $t('label.publicip') }}
               </div>
               <div>
                 {{ vm.publicip }}
@@ -55,7 +55,7 @@
             </div>
             <div class="list__col">
               <div class="list__label">
-                {{ $t('hostname') }}
+                {{ $t('label.hostname') }}
               </div>
               <div>
                 <router-link :to="{ path: '/host/' + vm.hostid }">{{ vm.hostname }}</router-link>
diff --git a/ui/src/views/infra/zone/ZoneWizardAddResources.vue b/ui/src/views/infra/zone/ZoneWizardAddResources.vue
index b00fc01b769..117c3792641 100644
--- a/ui/src/views/infra/zone/ZoneWizardAddResources.vue
+++ b/ui/src/views/infra/zone/ZoneWizardAddResources.vue
@@ -748,7 +748,7 @@ export default {
       if (['KVM', 'VMware', 'Hyperv'].includes(hypervisor)) {
         scope.push({
           id: 'zone',
-          description: this.$t('zone')
+          description: this.$t('label.zone')
         })
         scope.push({
           id: 'cluster',
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index c27302ae357..782abfddadd 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -19,7 +19,7 @@
   <a-spin :spinning="fetchLoading">
     <div style="width: 100%; display: flex">
       <a-button type="dashed" icon="plus" style="width: 100%; margin-right: 10px" @click="openAddRuleModal">
-        {{ $t('add') }} {{ $t('aclid') }}
+        {{ $t('label.add') }} {{ $t('label.aclid') }}
       </a-button>
 
       <a-button type="dashed" @click="exportAclList" style="width: 100%" icon="download">
@@ -41,43 +41,43 @@
             </div>
             <div class="list__container">
               <div class="list__col">
-                <div class="list__label">{{ $t('number') }}</div>
+                <div class="list__label">{{ $t('label.number') }}</div>
                 <div>{{ acl.number }}</div>
               </div>
               <div class="list__col">
-                <div class="list__label">{{ $t('cidrlist') }}</div>
+                <div class="list__label">{{ $t('label.cidrlist') }}</div>
                 <div>{{ acl.cidrlist }}</div>
               </div>
               <div class="list__col">
-                <div class="list__label">{{ $t('action') }}</div>
+                <div class="list__label">{{ $t('label.action') }}</div>
                 <div>{{ acl.action }}</div>
               </div>
               <div class="list__col">
-                <div class="list__label">{{ $t('protocol') }}</div>
+                <div class="list__label">{{ $t('label.protocol') }}</div>
                 <div>{{ acl.protocol }}</div>
               </div>
               <div class="list__col" v-if="acl.startport">
-                <div class="list__label">{{ $t('startport') }}</div>
+                <div class="list__label">{{ $t('label.startport') }}</div>
                 <div>{{ acl.startport }}</div>
               </div>
               <div class="list__col" v-if="acl.endport">
-                <div class="list__label">{{ $t('endport') }}</div>
+                <div class="list__label">{{ $t('label.endport') }}</div>
                 <div>{{ acl.endport }}</div>
               </div>
               <div class="list__col" v-if="acl.icmpcode">
-                <div class="list__label">{{ $t('icmpcode') }}</div>
+                <div class="list__label">{{ $t('label.icmpcode') }}</div>
                 <div>{{ acl.icmpcode }}</div>
               </div>
               <div class="list__col" v-if="acl.icmptype">
-                <div class="list__label">{{ $t('icmptype') }}</div>
+                <div class="list__label">{{ $t('label.icmptype') }}</div>
                 <div>{{ acl.icmptype }}</div>
               </div>
               <div class="list__col">
-                <div class="list__label">{{ $t('traffictype') }}</div>
+                <div class="list__label">{{ $t('label.traffictype') }}</div>
                 <div>{{ acl.traffictype }}</div>
               </div>
               <div class="list__col">
-                <div class="list__label">{{ $t('reason') }}</div>
+                <div class="list__label">{{ $t('label.reason') }}</div>
                 <div>{{ acl.reason }}</div>
               </div>
             </div>
@@ -97,13 +97,13 @@
       <div v-else>
         <a-form :form="newTagsForm" class="add-tags" @submit="handleAddTag">
           <div class="add-tags__input">
-            <p class="add-tags__label">{{ $t('key') }}</p>
+            <p class="add-tags__label">{{ $t('label.key') }}</p>
             <a-form-item>
               <a-input v-decorator="['key', { rules: [{ required: true, message: 'Please specify a tag key'}] }]" />
             </a-form-item>
           </div>
           <div class="add-tags__input">
-            <p class="add-tags__label">{{ $t('value') }}</p>
+            <p class="add-tags__label">{{ $t('label.value') }}</p>
             <a-form-item>
               <a-input v-decorator="['value', { rules: [{ required: true, message: 'Please specify a tag value'}] }]" />
             </a-form-item>
@@ -121,25 +121,25 @@
           </div>
         </div>
 
-        <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('OK') }}</a-button>
+        <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </a-modal>
     <a-modal :title="ruleModalTitle" v-model="ruleModalVisible" @ok="handleRuleModalForm">
       <a-form :form="ruleForm" @submit="handleRuleModalForm">
-        <a-form-item :label="$t('number')">
+        <a-form-item :label="$t('label.number')">
           <a-input v-decorator="['number']" />
         </a-form-item>
-        <a-form-item :label="$t('cidrlist')">
+        <a-form-item :label="$t('label.cidrlist')">
           <a-input v-decorator="['cidr']" />
         </a-form-item>
-        <a-form-item :label="$t('action')">
+        <a-form-item :label="$t('label.action')">
           <a-select v-decorator="['action']">
             <a-select-option value="allow">Allow</a-select-option>
             <a-select-option value="deny">Deny</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('protocol')">
+        <a-form-item :label="$t('label.protocol')">
           <a-select v-decorator="['protocol']">
             <a-select-option value="tcp">TCP</a-select-option>
             <a-select-option value="udp">UDP</a-select-option>
@@ -149,35 +149,35 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item v-if="ruleForm.getFieldValue('protocol') === 'protocolnumber'" :label="$t('protocolnumber')">
+        <a-form-item v-if="ruleForm.getFieldValue('protocol') === 'protocolnumber'" :label="$t('label.protocolnumber')">
           <a-input v-decorator="['protocolnumber' , { rules: [{ required: true, message: 'required' }]}]" />
         </a-form-item>
 
         <div v-if="ruleForm.getFieldValue('protocol') === 'icmp' || ruleForm.getFieldValue('protocol') === 'protocolnumber'">
-          <a-form-item :label="$t('icmptype')">
+          <a-form-item :label="$t('label.icmptype')">
             <a-input v-decorator="['icmptype']" placeholder="Please specify -1 if you want to allow all ICMP types." />
           </a-form-item>
-          <a-form-item :label="$t('icmpcode')">
+          <a-form-item :label="$t('label.icmpcode')">
             <a-input v-decorator="['icmpcode']" placeholder="Please specify -1 if you want to allow all ICMP types." />
           </a-form-item>
         </div>
 
         <div v-if="ruleForm.getFieldValue('protocol') === 'tcp' || ruleForm.getFieldValue('protocol') === 'udp' || ruleForm.getFieldValue('protocol') === 'protocolnumber'">
-          <a-form-item :label="$t('startport')">
+          <a-form-item :label="$t('label.startport')">
             <a-input v-decorator="['startport']" />
           </a-form-item>
-          <a-form-item :label="$t('endport')">
+          <a-form-item :label="$t('label.endport')">
             <a-input v-decorator="['endport']" />
           </a-form-item>
         </div>
 
-        <a-form-item :label="$t('traffictype')">
+        <a-form-item :label="$t('label.traffictype')">
           <a-select v-decorator="['traffictype']">
             <a-select-option value="ingress">Ingress</a-select-option>
             <a-select-option value="egress">Egress</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('reason')">
+        <a-form-item :label="$t('label.reason')">
           <a-textarea
             v-decorator="['reason']"
             :autosize="{ minRows: 2 }"
diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index a4c40a62f31..2bdb468b857 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -23,21 +23,21 @@
           :form="form"
           layout="vertical"
           @submit="handleSubmit">
-          <a-form-item :label="$t('name')">
+          <a-form-item :label="$t('label.name')">
             <a-input
               v-decorator="['name', {
                 rules: [{ required: true, message: 'Please enter name' }]
               }]"
-              :placeholder="this.$t('Name')"/>
+              :placeholder="this.$t('label.name')"/>
           </a-form-item>
-          <a-form-item :label="$t('displaytext')">
+          <a-form-item :label="$t('label.displaytext')">
             <a-input
               v-decorator="['displaytext', {
                 rules: [{ required: true, message: 'Please enter display text' }]
               }]"
-              :placeholder="this.$t('Display text')"/>
+              :placeholder="this.$t('label.display.text')"/>
           </a-form-item>
-          <a-form-item :label="$t('zoneid')">
+          <a-form-item :label="$t('label.zoneid')">
             <a-select
               v-decorator="['zoneid', {
                 rules: [
@@ -53,14 +53,14 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="zoneLoading"
-              :placeholder="this.$t('.zoneid')"
+              :placeholder="this.$t('label..zoneid')"
               @change="val => { this.handleZoneChange(this.zones[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('domain')" v-if="this.isAdminOrDomainAdmin()">
+          <a-form-item :label="$t('label.domain')" v-if="this.isAdminOrDomainAdmin()">
             <a-select
               v-decorator="['domainid', {}]"
               showSearch
@@ -69,14 +69,14 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="domainLoading"
-              :placeholder="this.$t('domainid')"
+              :placeholder="this.$t('label.domainid')"
               @change="val => { this.handleDomainChange(this.domains[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('networkofferingid')">
+          <a-form-item :label="$t('label.networkofferingid')">
             <a-select
               v-decorator="['networkofferingid', {
                 rules: [
@@ -92,21 +92,21 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="networkOfferingLoading"
-              :placeholder="this.$t('networkofferingid')"
+              :placeholder="this.$t('label.networkofferingid')"
               @change="val => { this.handleNetworkOfferingChange(this.networkOfferings[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.networkOfferings" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('vlan')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
+          <a-form-item :label="$t('label.vlan')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
             <a-input
               v-decorator="['vlanid', {
                 rules: [{ required: true, message: 'Please enter value' }]
               }]"
-              :placeholder="this.$t('vlanid')"/>
+              :placeholder="this.$t('label.vlanid')"/>
           </a-form-item>
-          <a-form-item :label="$t('vpcid')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.forvpc">
+          <a-form-item :label="$t('label.vpcid')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.forvpc">
             <a-select
               v-decorator="['vpcid', {
                 rules: [
@@ -122,53 +122,53 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="vpcLoading"
-              :placeholder="this.$t('vpcid')"
+              :placeholder="this.$t('label.vpcid')"
               @change="val => { this.selectedVpc = this.vpcs[val] }">
               <a-select-option v-for="(opt, optIndex) in this.vpcs" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('externalid')">
+          <a-form-item :label="$t('label.externalid')">
             <a-input
               v-decorator="['externalid', {}]"
-              :placeholder="$t('externalid')"/>
+              :placeholder="$t('label.externalid')"/>
           </a-form-item>
-          <a-form-item :label="$t('gateway')">
+          <a-form-item :label="$t('label.gateway')">
             <a-input
               v-decorator="['gateway', {}]"
-              :placeholder="this.$t('gateway')"/>
+              :placeholder="this.$t('label.gateway')"/>
           </a-form-item>
-          <a-form-item :label="$t('netmask')">
+          <a-form-item :label="$t('label.netmask')">
             <a-input
               v-decorator="['netmask', {}]"
-              :placeholder="this.$t('netmask')"/>
+              :placeholder="this.$t('label.netmask')"/>
           </a-form-item>
-          <a-form-item :label="$t('networkdomain')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && !this.selectedNetworkOffering.forvpc">
+          <a-form-item :label="$t('label.networkdomain')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && !this.selectedNetworkOffering.forvpc">
             <a-input
               v-decorator="['networkdomain', {}]"
-              :placeholder="this.$t('networkdomain')"/>
+              :placeholder="this.$t('label.networkdomain')"/>
           </a-form-item>
-          <a-form-item :label="$t('account')" v-if="this.accountVisible">
+          <a-form-item :label="$t('label.account')" v-if="this.accountVisible">
             <a-input
               v-decorator="['account', {
                 rules: [
-                  { required: true, message: this.$t('required') }
+                  { required: true, message: this.$t('label.required') }
                 ]
               }]"
-              :placeholder="this.$t('account')"/>
+              :placeholder="this.$t('label.account')"/>
           </a-form-item>
           <div :span="24" class="action-button">
             <a-button
               :loading="actionLoading"
               @click="closeAction">
-              {{ this.$t('Cancel') }}
+              {{ this.$t('label.cancel') }}
             </a-button>
             <a-button
               :loading="actionLoading"
               type="primary"
               @click="handleSubmit">
-              {{ this.$t('OK') }}
+              {{ this.$t('label.ok') }}
             </a-button>
           </div>
         </a-form>
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index 0489aa7b49a..46f9dcbf997 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -23,21 +23,21 @@
           :form="form"
           layout="vertical"
           @submit="handleSubmit">
-          <a-form-item :label="$t('name')">
+          <a-form-item :label="$t('label.name')">
             <a-input
               v-decorator="['name', {
                 rules: [{ required: true, message: 'Please enter name' }]
               }]"
-              :placeholder="this.$t('Name')"/>
+              :placeholder="this.$t('label.name')"/>
           </a-form-item>
-          <a-form-item :label="$t('displaytext')">
+          <a-form-item :label="$t('label.displaytext')">
             <a-input
               v-decorator="['displaytext', {
                 rules: [{ required: true, message: 'Please enter display text' }]
               }]"
-              :placeholder="this.$t('displaytext')"/>
+              :placeholder="this.$t('label.displaytext')"/>
           </a-form-item>
-          <a-form-item :label="$t('zoneid')">
+          <a-form-item :label="$t('label.zoneid')">
             <a-select
               v-decorator="['zoneid', {
                 rules: [
@@ -53,14 +53,14 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="zoneLoading"
-              :placeholder="this.$t('zoneid')"
+              :placeholder="this.$t('label.zoneid')"
               @change="val => { this.handleZoneChange(this.zones[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('domain')" v-if="this.isAdminOrDomainAdmin()">
+          <a-form-item :label="$t('label.domain')" v-if="this.isAdminOrDomainAdmin()">
             <a-select
               v-decorator="['domainid', {}]"
               showSearch
@@ -69,14 +69,14 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="domainLoading"
-              :placeholder="this.$t('domainid')"
+              :placeholder="this.$t('label.domainid')"
               @change="val => { this.handleDomainChange(this.domains[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('networkofferingid')">
+          <a-form-item :label="$t('label.networkofferingid')">
             <a-select
               v-decorator="['networkofferingid', {
                 rules: [
@@ -92,43 +92,43 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="networkOfferingLoading"
-              :placeholder="this.$t('networkofferingid')"
+              :placeholder="this.$t('label.networkofferingid')"
               @change="val => { this.handleNetworkOfferingChange(this.networkOfferings[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.networkOfferings" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('vlan')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
+          <a-form-item :label="$t('label.vlan')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
             <a-input
               v-decorator="['vlanid', {
                 rules: [{ required: true, message: 'Please enter value' }]
               }]"
-              :placeholder="this.$t('vlanid')"/>
+              :placeholder="this.$t('label.vlanid')"/>
           </a-form-item>
-          <a-form-item :label="$t('bypassvlanoverlapcheck')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
+          <a-form-item :label="$t('label.bypassvlanoverlapcheck')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
             <a-switch v-decorator="['bypassvlanoverlapcheck']" />
           </a-form-item>
-          <a-form-item :label="$t('account')" v-if="this.accountVisible">
+          <a-form-item :label="$t('label.account')" v-if="this.accountVisible">
             <a-input
               v-decorator="['account', {
                 rules: [
-                  { required: true, message: this.$t('required') }
+                  { required: true, message: this.$t('label.required') }
                 ]
               }]"
-              :placeholder="this.$t('account')"/>
+              :placeholder="this.$t('label.account')"/>
           </a-form-item>
           <div :span="24" class="action-button">
             <a-button
               :loading="actionLoading"
               @click="closeAction">
-              {{ this.$t('Cancel') }}
+              {{ this.$t('label.cancel') }}
             </a-button>
             <a-button
               :loading="actionLoading"
               type="primary"
               @click="handleSubmit">
-              {{ this.$t('OK') }}
+              {{ this.$t('label.ok') }}
             </a-button>
           </div>
         </a-form>
diff --git a/ui/src/views/network/CreateNetwork.vue b/ui/src/views/network/CreateNetwork.vue
index 15bb4662534..88f98fe5391 100644
--- a/ui/src/views/network/CreateNetwork.vue
+++ b/ui/src/views/network/CreateNetwork.vue
@@ -18,21 +18,21 @@
 <template>
   <div class="form-layout">
     <a-tabs defaultActiveKey="1" :animated="false">
-      <a-tab-pane :tab="$t('Isolated')" key="1" v-if="this.isAdvancedZoneWithoutSGAvailable()">
+      <a-tab-pane :tab="$t('label.isolated')" key="1" v-if="this.isAdvancedZoneWithoutSGAvailable()">
         <CreateIsolatedNetworkForm
           :loading="loading"
           @close-action="closeAction"
           @refresh-data="refreshParent"
           @refresh="handleRefresh"/>
       </a-tab-pane>
-      <a-tab-pane :tab="$t('L2')" key="2">
+      <a-tab-pane :tab="$t('label.l2')" key="2">
         <CreateL2NetworkForm
           :loading="loading"
           @close-action="closeAction"
           @refresh-data="refreshParent"
           @refresh="handleRefresh"/>
       </a-tab-pane>
-      <a-tab-pane :tab="$t('Shared')" key="3" v-if="this.isAdmin()">
+      <a-tab-pane :tab="$t('label.shared')" key="3" v-if="this.isAdmin()">
         <CreateSharedNetworkForm
           :loading="loading"
           @close-action="closeAction"
diff --git a/ui/src/views/network/CreateSharedNetworkForm.vue b/ui/src/views/network/CreateSharedNetworkForm.vue
index f47a0085d03..86ae587c030 100644
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@@ -23,21 +23,21 @@
           :form="form"
           layout="vertical"
           @submit="handleSubmit">
-          <a-form-item :label="$t('name')">
+          <a-form-item :label="$t('label.name')">
             <a-input
               v-decorator="['name', {
                 rules: [{ required: true, message: 'Please enter name' }]
               }]"
-              :placeholder="this.$t('Name')"/>
+              :placeholder="this.$t('label.name')"/>
           </a-form-item>
-          <a-form-item :label="$t('displaytext')">
+          <a-form-item :label="$t('label.displaytext')">
             <a-input
               v-decorator="['displaytext', {
                 rules: [{ required: true, message: 'Please enter display text' }]
               }]"
-              :placeholder="this.$t('Display text')"/>
+              :placeholder="this.$t('label.display.text')"/>
           </a-form-item>
-          <a-form-item :label="$t('zoneid')" v-if="this.isObjectEmpty(this.zone)">
+          <a-form-item :label="$t('label.zoneid')" v-if="this.isObjectEmpty(this.zone)">
             <a-select
               v-decorator="['zoneid', {
                 rules: [
@@ -53,14 +53,14 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="zoneLoading"
-              :placeholder="this.$t('zoneid')"
+              :placeholder="this.$t('label.zoneid')"
               @change="val => { this.handleZoneChange(this.zones[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('physicalnetworkid')" v-if="this.isObjectEmpty(this.zone)">
+          <a-form-item :label="$t('label.physicalnetworkid')" v-if="this.isObjectEmpty(this.zone)">
             <a-select
               v-decorator="['physicalnetworkid', {}]"
               showSearch
@@ -69,24 +69,24 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="zoneLoading"
-              :placeholder="this.$t('physicalnetworkid')"
+              :placeholder="this.$t('label.physicalnetworkid')"
               @change="val => { this.handleZoneChange(this.formPhysicalNetworks[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.formPhysicalNetworks" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('vlan')">
+          <a-form-item :label="$t('label.vlan')">
             <a-input
               v-decorator="['vlanid', {
                 rules: [{ required: true, message: 'Please enter value' }]
               }]"
-              :placeholder="this.$t('vlanid')"/>
+              :placeholder="this.$t('label.vlanid')"/>
           </a-form-item>
-          <a-form-item :label="$t('bypassvlanoverlapcheck')">
+          <a-form-item :label="$t('label.bypassvlanoverlapcheck')">
             <a-switch v-decorator="['bypassvlanoverlapcheck']" />
           </a-form-item>
-          <a-form-item :label="$t('isolatedpvlantype')">
+          <a-form-item :label="$t('label.isolatedpvlantype')">
             <a-radio-group
               v-decorator="['isolatedpvlantype', {
                 initialValue: this.isolatePvlanType
@@ -94,25 +94,25 @@
               buttonStyle="solid"
               @change="selected => { this.handleIsolatedPvlanTypeChange(selected.target.value) }">
               <a-radio-button value="none">
-                {{ $t('None') }}
+                {{ $t('label.none') }}
               </a-radio-button>
               <a-radio-button value="community">
-                {{ $t('Community') }}
+                {{ $t('label.community') }}
               </a-radio-button>
               <a-radio-button value="isolated">
-                {{ $t('Isolated') }}
+                {{ $t('label.isolated') }}
               </a-radio-button>
               <a-radio-button value="promiscuous">
-                {{ $t('Promiscuous') }}
+                {{ $t('label.promiscuous') }}
               </a-radio-button>
             </a-radio-group>
           </a-form-item>
-          <a-form-item :label="$t('isolatedpvlan')" v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
+          <a-form-item :label="$t('label.isolatedpvlan')" v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
             <a-input
               v-decorator="['isolatedpvlan', {}]"
-              :placeholder="this.$t('isolatedpvlan')"/>
+              :placeholder="this.$t('label.isolatedpvlan')"/>
           </a-form-item>
-          <a-form-item :label="$t('scope')">
+          <a-form-item :label="$t('label.scope')">
             <a-radio-group
               v-decorator="['scope', {
                 initialValue: this.scopeType
@@ -120,20 +120,20 @@
               buttonStyle="solid"
               @change="selected => { this.handleScopeTypeChange(selected.target.value) }">
               <a-radio-button value="all">
-                {{ $t('All') }}
+                {{ $t('label.all') }}
               </a-radio-button>
               <a-radio-button value="domain" v-if="!this.parseBooleanValueForKey(this.selectedZone, 'securitygroupsenabled')">
-                {{ $t('Domain') }}
+                {{ $t('label.domain') }}
               </a-radio-button>
               <a-radio-button value="account" v-if="!this.parseBooleanValueForKey(this.selectedZone, 'securitygroupsenabled')">
-                {{ $t('Account') }}
+                {{ $t('label.account') }}
               </a-radio-button>
               <a-radio-button value="project" v-if="!this.parseBooleanValueForKey(this.selectedZone, 'securitygroupsenabled')">
-                {{ $t('Project') }}
+                {{ $t('label.project') }}
               </a-radio-button>
             </a-radio-group>
           </a-form-item>
-          <a-form-item :label="$t('domain')" v-if="this.scopeType !== 'all'">
+          <a-form-item :label="$t('label.domain')" v-if="this.scopeType !== 'all'">
             <a-select
               v-decorator="['domainid', {
                 rules: [
@@ -149,22 +149,22 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="domainLoading"
-              :placeholder="this.$t('domainid')"
+              :placeholder="this.$t('label.domainid')"
               @change="val => { this.handleDomainChange(this.domains[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('subdomainaccess')" v-if="this.scopeType === 'domain'">
+          <a-form-item :label="$t('label.subdomainaccess')" v-if="this.scopeType === 'domain'">
             <a-switch v-decorator="['subdomainaccess']" />
           </a-form-item>
-          <a-form-item :label="$t('account')" v-if="this.scopeType === 'account'">
+          <a-form-item :label="$t('label.account')" v-if="this.scopeType === 'account'">
             <a-input
               v-decorator="['account', {}]"
-              :placeholder="this.$t('account')"/>
+              :placeholder="this.$t('label.account')"/>
           </a-form-item>
-          <a-form-item :label="$t('projectid')" v-if="this.scopeType === 'project'">
+          <a-form-item :label="$t('label.projectid')" v-if="this.scopeType === 'project'">
             <a-select
               v-decorator="['projectid', {
                 rules: [
@@ -180,14 +180,14 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="projectLoading"
-              :placeholder="this.$t('projectid')"
+              :placeholder="this.$t('label.projectid')"
               @change="val => { this.handleProjectChange(this.projects[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.projects" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('networkofferingid')">
+          <a-form-item :label="$t('label.networkofferingid')">
             <a-select
               v-decorator="['networkofferingid', {
                 rules: [
@@ -203,72 +203,72 @@
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="networkOfferingLoading"
-              :placeholder="this.$t('networkofferingid')"
+              :placeholder="this.$t('label.networkofferingid')"
               @change="val => { this.handleNetworkOfferingChange(this.networkOfferings[val]) }">
               <a-select-option v-for="(opt, optIndex) in this.networkOfferings" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('ip4gateway')">
+          <a-form-item :label="$t('label.ip4gateway')">
             <a-input
               v-decorator="['ip4gateway', {}]"
-              :placeholder="this.$t('ip4gateway')"/>
+              :placeholder="this.$t('label.ip4gateway')"/>
           </a-form-item>
-          <a-form-item :label="$t('ip4Netmask')">
+          <a-form-item :label="$t('label.ip4netmask')">
             <a-input
               v-decorator="['netmask', {}]"
-              :placeholder="this.$t('netmask')"/>
+              :placeholder="this.$t('label.netmask')"/>
           </a-form-item>
-          <a-form-item :label="$t('startipv4')">
+          <a-form-item :label="$t('label.startipv4')">
             <a-input
               v-decorator="['startipv4', {}]"
-              :placeholder="this.$t('startipv4')"/>
+              :placeholder="this.$t('label.startipv4')"/>
           </a-form-item>
-          <a-form-item :label="$t('endipv4')">
+          <a-form-item :label="$t('label.endipv4')">
             <a-input
               v-decorator="['endipv4', {}]"
-              :placeholder="this.$t('endipv4')"/>
+              :placeholder="this.$t('label.endipv4')"/>
           </a-form-item>
-          <a-form-item :label="$t('ip6gateway')">
+          <a-form-item :label="$t('label.ip6gateway')">
             <a-input
               v-decorator="['ip6gateway', {}]"
-              :placeholder="this.$t('ip6gateway')"/>
+              :placeholder="this.$t('label.ip6gateway')"/>
           </a-form-item>
-          <a-form-item :label="$t('ip6cidr')">
+          <a-form-item :label="$t('label.ip6cidr')">
             <a-input
               v-decorator="['ip6cidr', {}]"
-              :placeholder="this.$t('ip6cidr')"/>
+              :placeholder="this.$t('label.ip6cidr')"/>
           </a-form-item>
-          <a-form-item :label="$t('startipv6')">
+          <a-form-item :label="$t('label.startipv6')">
             <a-input
               v-decorator="['startipv6', {}]"
-              :placeholder="this.$t('startipv6')"/>
+              :placeholder="this.$t('label.startipv6')"/>
           </a-form-item>
-          <a-form-item :label="$t('endipv6')">
+          <a-form-item :label="$t('label.endipv6')">
             <a-input
               v-decorator="['endipv6', {}]"
-              :placeholder="this.$t('endipv6')"/>
+              :placeholder="this.$t('label.endipv6')"/>
           </a-form-item>
-          <a-form-item :label="$t('networkdomain')">
+          <a-form-item :label="$t('label.networkdomain')">
             <a-input
               v-decorator="['networkdomain', {}]"
-              :placeholder="this.$t('networkdomain')"/>
+              :placeholder="this.$t('label.networkdomain')"/>
           </a-form-item>
-          <a-form-item :label="$t('hideipaddressusage')">
+          <a-form-item :label="$t('label.hideipaddressusage')">
             <a-switch v-decorator="['hideipaddressusage']" />
           </a-form-item>
           <div :span="24" class="action-button">
             <a-button
               :loading="actionLoading"
               @click="closeAction">
-              {{ this.$t('Cancel') }}
+              {{ this.$t('label.cancel') }}
             </a-button>
             <a-button
               :loading="actionLoading"
               type="primary"
               @click="handleSubmit">
-              {{ this.$t('OK') }}
+              {{ this.$t('label.ok') }}
             </a-button>
           </div>
         </a-form>
diff --git a/ui/src/views/network/CreateVpnCustomerGateway.vue b/ui/src/views/network/CreateVpnCustomerGateway.vue
index 93c316f451c..135ebce3412 100644
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@@ -17,7 +17,7 @@
 <template>
   <div>
     <a-form class="form-layout" :form="form" layout="vertical">
-      <a-form-item :label="$t('name')">
+      <a-form-item :label="$t('label.name')">
         <a-input
           v-decorator="[
             'name',
@@ -25,9 +25,9 @@
               rules: [{ required: true, message: 'required' }],
             }
           ]"
-          :placeholder="$t('vpncustomergatewayname')" />
+          :placeholder="$t('label.vpncustomergatewayname')" />
       </a-form-item>
-      <a-form-item :label="$t('gateway')">
+      <a-form-item :label="$t('label.gateway')">
         <a-input
           v-decorator="[
             'gateway',
@@ -35,9 +35,9 @@
               rules: [{ required: true, message: 'required'}],
             }
           ]"
-          :placeholder="$t('vpncustomergateway')" />
+          :placeholder="$t('label.vpncustomergateway')" />
       </a-form-item>
-      <a-form-item :label="$t('cidrlist')">
+      <a-form-item :label="$t('label.cidrlist')">
         <a-input
           v-decorator="[
             'cidrlist',
@@ -45,10 +45,10 @@
               rules: [{ required: true, message: 'required'}],
             }
           ]"
-          :placeholder="$t('vpncustomergateway_cidrlist')" />
+          :placeholder="$t('label.vpncustomergateway.cidrlist')" />
       </a-form-item>
       <a-form-item
-        :label="$t('ipsecpsk')">
+        :label="$t('label.ipsecpsk')">
         <a-input
           v-decorator="[
             'ipsecpsk',
@@ -56,10 +56,10 @@
               rules: [{ required: true, message: 'required'}],
             }
           ]"
-          :placeholder="$t('vpncustomergateway_secretkey')" />
+          :placeholder="$t('label.vpncustomergateway.secretkey')" />
       </a-form-item>
       <a-form-item
-        :label="$t('ikeEncryption')">
+        :label="$t('label.ikeencryption')">
         <a-select
           v-decorator="[
             'ikeEncryption',
@@ -73,7 +73,7 @@
         </a-select>
       </a-form-item>
       <a-form-item
-        :label="$t('ikeHash')">
+        :label="$t('label.ikehash')">
         <a-select
           v-decorator="[
             'ikeHash',
@@ -87,7 +87,7 @@
         </a-select>
       </a-form-item>
       <a-form-item
-        :label="$t('ikeDh')">
+        :label="$t('label.ikedh')">
         <a-select
           v-decorator="[
             'ikeDh',
@@ -103,7 +103,7 @@
         </a-select>
       </a-form-item>
       <a-form-item
-        :label="$t('espEncryption')">
+        :label="$t('label.espencryption')">
         <a-select
           v-decorator="[
             'espEncryption',
@@ -117,7 +117,7 @@
         </a-select>
       </a-form-item>
       <a-form-item
-        :label="$t('espHash')">
+        :label="$t('label.esphash')">
         <a-select
           v-decorator="[
             'espHash',
@@ -131,7 +131,7 @@
         </a-select>
       </a-form-item>
       <a-form-item
-        :label="$t('perfectForwardSecrecy')">
+        :label="$t('label.perfectforwardsecrecy')">
         <a-select
           v-decorator="[
             'perfectForwardSecrecy',
@@ -150,7 +150,7 @@
         </a-select>
       </a-form-item>
       <a-form-item
-        :label="$t('ikelifetime')">
+        :label="$t('label.ikelifetime')">
         <a-input
           v-decorator="[
             'ikelifetime',
@@ -158,10 +158,10 @@
               initialValue: '86400',
             },
           ]"
-          :placeholder="$t('vpncustomergateway_ikelifetime')"/>
+          :placeholder="$t('label.vpncustomergateway.ikelifetime')"/>
       </a-form-item>
       <a-form-item
-        :label="$t('esplifetime')">
+        :label="$t('label.esplifetime')">
         <a-input
           v-decorator="[
             'esplifetime',
@@ -169,9 +169,9 @@
               initialValue: '3600',
             },
           ]"
-          :placeholder="$t('vpncustomergateway_esplifetime')"/>
+          :placeholder="$t('label.vpncustomergateway.esplifetime')"/>
       </a-form-item>
-      <a-form-item :label="$t('dpd')">
+      <a-form-item :label="$t('label.dpd')">
         <a-switch
           v-decorator="[
             'dpd',
@@ -180,7 +180,7 @@
             },
           ]"/>
       </a-form-item>
-      <a-form-item :label="$t('forceencap')">
+      <a-form-item :label="$t('label.forceencap')">
         <a-switch
           v-decorator="[
             'forceencap',
@@ -191,10 +191,10 @@
       </a-form-item>
       <div class="actions">
         <a-button @click="closeModal">
-          {{ $t('Cancel') }}
+          {{ $t('label.cancel') }}
         </a-button>
         <a-button type="primary" @click="handleSubmit">
-          {{ $t('OK') }}
+          {{ $t('label.ok') }}
         </a-button>
       </div>
     </a-form>
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index c6fdc174606..789b0e3517c 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -20,15 +20,15 @@
     <div>
       <div class="form">
         <div class="form__item">
-          <div class="form__label">{{ $t('sourcecidr') }}</div>
+          <div class="form__label">{{ $t('label.sourcecidr') }}</div>
           <a-input v-model="newRule.cidrlist"></a-input>
         </div>
         <div class="form__item">
-          <div class="form__label">{{ $t('destcidr') }}</div>
+          <div class="form__label">{{ $t('label.destcidr') }}</div>
           <a-input v-model="newRule.destcidrlist"></a-input>
         </div>
         <div class="form__item">
-          <div class="form__label">{{ $t('protocol') }}</div>
+          <div class="form__label">{{ $t('label.protocol') }}</div>
           <a-select v-model="newRule.protocol" style="width: 100%;" @change="resetRulePorts">
             <a-select-option value="tcp">TCP</a-select-option>
             <a-select-option value="udp">UDP</a-select-option>
@@ -37,23 +37,23 @@
           </a-select>
         </div>
         <div v-show="newRule.protocol === 'tcp' || newRule.protocol === 'udp'" class="form__item">
-          <div class="form__label">{{ $t('startport') }}</div>
+          <div class="form__label">{{ $t('label.startport') }}</div>
           <a-input v-model="newRule.startport"></a-input>
         </div>
         <div v-show="newRule.protocol === 'tcp' || newRule.protocol === 'udp'" class="form__item">
-          <div class="form__label">{{ $t('endport') }}</div>
+          <div class="form__label">{{ $t('label.endport') }}</div>
           <a-input v-model="newRule.endport"></a-input>
         </div>
         <div v-show="newRule.protocol === 'icmp'" class="form__item">
-          <div class="form__label">{{ $t('icmptype') }}</div>
+          <div class="form__label">{{ $t('label.icmptype') }}</div>
           <a-input v-model="newRule.icmptype"></a-input>
         </div>
         <div v-show="newRule.protocol === 'icmp'" class="form__item">
-          <div class="form__label">{{ $t('icmpcode') }}</div>
+          <div class="form__label">{{ $t('label.icmpcode') }}</div>
           <a-input v-model="newRule.icmpcode"></a-input>
         </div>
         <div class="form__item">
-          <a-button type="primary" icon="plus" @click="addRule">{{ $t('add') }}</a-button>
+          <a-button type="primary" icon="plus" @click="addRule">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>
@@ -126,15 +126,15 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('sourcecidr'),
+          title: this.$t('label.sourcecidr'),
           dataIndex: 'cidrlist'
         },
         {
-          title: this.$t('destcidr'),
+          title: this.$t('label.destcidr'),
           dataIndex: 'destcidrlist'
         },
         {
-          title: this.$t('protocol'),
+          title: this.$t('label.protocol'),
           scopedSlots: { customRender: 'protocol' }
         },
         {
@@ -146,7 +146,7 @@ export default {
           scopedSlots: { customRender: 'endport' }
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ]
diff --git a/ui/src/views/network/EnableStaticNat.vue b/ui/src/views/network/EnableStaticNat.vue
index 63eba0a5ee5..bf01d164730 100644
--- a/ui/src/views/network/EnableStaticNat.vue
+++ b/ui/src/views/network/EnableStaticNat.vue
@@ -81,8 +81,8 @@
       showSizeChanger/>
 
     <div class="list__footer">
-      <a-button @click="handleClose">{{ $t('cancel') }}</a-button>
-      <a-button @click="handleSubmit" type="primary" :disabled="!selectedVm || !selectedNic">{{ $t('OK') }}</a-button>
+      <a-button @click="handleClose">{{ $t('label.cancel') }}</a-button>
+      <a-button @click="handleSubmit" type="primary" :disabled="!selectedVm || !selectedNic">{{ $t('label.ok') }}</a-button>
     </div>
 
   </div>
@@ -113,27 +113,27 @@ export default {
       selectedNic: null,
       columns: [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           scopedSlots: { customRender: 'name' }
         },
         {
-          title: this.$t('instancename'),
+          title: this.$t('label.instancename'),
           dataIndex: 'instancename'
         },
         {
-          title: this.$t('displayname'),
+          title: this.$t('label.displayname'),
           dataIndex: 'displayname'
         },
         {
-          title: this.$t('account'),
+          title: this.$t('label.account'),
           dataIndex: 'account'
         },
         {
-          title: this.$t('zonenamelabel'),
+          title: this.$t('label.zonenamelabel'),
           dataIndex: 'zonename'
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state',
           scopedSlots: { customRender: 'state' }
         },
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 368b454efaf..04f1aeb2a79 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -20,35 +20,35 @@
     <div>
       <div class="form">
         <div class="form__item">
-          <div class="form__label">{{ $t('sourcecidr') }}</div>
+          <div class="form__label">{{ $t('label.sourcecidr') }}</div>
           <a-input v-model="newRule.cidrlist"></a-input>
         </div>
         <div class="form__item">
-          <div class="form__label">{{ $t('protocol') }}</div>
+          <div class="form__label">{{ $t('label.protocol') }}</div>
           <a-select v-model="newRule.protocol" style="width: 100%;" @change="resetRulePorts">
-            <a-select-option value="tcp">{{ $t('tcp') }}</a-select-option>
-            <a-select-option value="udp">{{ $t('udp') }}</a-select-option>
-            <a-select-option value="icmp">{{ $t('icmp') }}</a-select-option>
+            <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
+            <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
+            <a-select-option value="icmp">{{ $t('label.icmp') }}</a-select-option>
           </a-select>
         </div>
         <div v-show="newRule.protocol === 'tcp' || newRule.protocol === 'udp'" class="form__item">
-          <div class="form__label">{{ $t('startport') }}</div>
+          <div class="form__label">{{ $t('label.startport') }}</div>
           <a-input v-model="newRule.startport"></a-input>
         </div>
         <div v-show="newRule.protocol === 'tcp' || newRule.protocol === 'udp'" class="form__item">
-          <div class="form__label">{{ $t('endport') }}</div>
+          <div class="form__label">{{ $t('label.endport') }}</div>
           <a-input v-model="newRule.endport"></a-input>
         </div>
         <div v-show="newRule.protocol === 'icmp'" class="form__item">
-          <div class="form__label">{{ $t('icmptype') }}</div>
+          <div class="form__label">{{ $t('label.icmptype') }}</div>
           <a-input v-model="newRule.icmptype"></a-input>
         </div>
         <div v-show="newRule.protocol === 'icmp'" class="form__item">
-          <div class="form__label">{{ $t('icmpcode') }}</div>
+          <div class="form__label">{{ $t('label.icmpcode') }}</div>
           <a-input v-model="newRule.icmpcode"></a-input>
         </div>
         <div class="form__item" style="margin-left: auto;">
-          <a-button type="primary" @click="addRule">{{ $t('add') }}</a-button>
+          <a-button type="primary" @click="addRule">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>
@@ -67,10 +67,10 @@
         {{ record.protocol | capitalise }}
       </template>
       <template slot="startport" slot-scope="record">
-        {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('all') }}
+        {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
       </template>
       <template slot="endport" slot-scope="record">
-        {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('all') }}
+        {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
       </template>
       <template slot="actions" slot-scope="record">
         <div class="actions">
@@ -94,14 +94,14 @@
     <a-modal title="Edit Tags" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
       <div class="add-tags">
         <div class="add-tags__input">
-          <p class="add-tags__label">{{ $t('key') }}</p>
+          <p class="add-tags__label">{{ $t('label.key') }}</p>
           <a-input v-model="newTag.key"></a-input>
         </div>
         <div class="add-tags__input">
-          <p class="add-tags__label">{{ $t('value') }}</p>
+          <p class="add-tags__label">{{ $t('label.value') }}</p>
           <a-input v-model="newTag.value"></a-input>
         </div>
-        <a-button type="primary" @click="() => handleAddTag()" :loading="addTagLoading">{{ $t('add') }}</a-button>
+        <a-button type="primary" @click="() => handleAddTag()" :loading="addTagLoading">{{ $t('label.add') }}</a-button>
       </div>
 
       <a-divider></a-divider>
@@ -114,7 +114,7 @@
         </div>
       </div>
 
-      <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('done') }}</a-button>
+      <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.done') }}</a-button>
     </a-modal>
 
   </div>
@@ -157,27 +157,27 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('sourcecidr'),
+          title: this.$t('label.sourcecidr'),
           dataIndex: 'cidrlist'
         },
         {
-          title: this.$t('protocol'),
+          title: this.$t('label.protocol'),
           scopedSlots: { customRender: 'protocol' }
         },
         {
-          title: `${this.$t('startport')}/${this.$t('icmptype')}`,
+          title: `${this.$t('label.startport')}/${this.$t('label.icmptype')}`,
           scopedSlots: { customRender: 'startport' }
         },
         {
-          title: `${this.$t('endport')}/${this.$t('icmpcode')}`,
+          title: `${this.$t('label.endport')}/${this.$t('label.icmpcode')}`,
           scopedSlots: { customRender: 'endport' }
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state'
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ]
diff --git a/ui/src/views/network/IngressEgressRuleConfigure.vue b/ui/src/views/network/IngressEgressRuleConfigure.vue
index 42e6b871255..963761cdb34 100644
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@@ -29,27 +29,27 @@
 
       <div class="form">
         <div class="form__item">
-          <div class="form__label">{{ $t('protocol') }}</div>
+          <div class="form__label">{{ $t('label.protocol') }}</div>
           <a-select v-model="newRule.protocol" style="width: 100%;" @change="resetRulePorts">
-            <a-select-option value="tcp">{{ $t('tcp') | capitalise }}</a-select-option>
-            <a-select-option value="udp">{{ $t('udp') | capitalise }}</a-select-option>
-            <a-select-option value="icmp">{{ $t('icmp') | capitalise }}</a-select-option>
+            <a-select-option value="tcp">{{ $t('label.tcp') | capitalise }}</a-select-option>
+            <a-select-option value="udp">{{ $t('label.udp') | capitalise }}</a-select-option>
+            <a-select-option value="icmp">{{ $t('label.icmp') | capitalise }}</a-select-option>
           </a-select>
         </div>
         <div v-show="newRule.protocol === 'tcp' || newRule.protocol === 'udp'" class="form__item">
-          <div class="form__label">{{ $t('startport') }}</div>
+          <div class="form__label">{{ $t('label.startport') }}</div>
           <a-input v-model="newRule.startport"></a-input>
         </div>
         <div v-show="newRule.protocol === 'tcp' || newRule.protocol === 'udp'" class="form__item">
-          <div class="form__label">{{ $t('endport') }}</div>
+          <div class="form__label">{{ $t('label.endport') }}</div>
           <a-input v-model="newRule.endport"></a-input>
         </div>
         <div v-show="newRule.protocol === 'icmp'" class="form__item">
-          <div class="form__label">{{ $t('icmptype') }}</div>
+          <div class="form__label">{{ $t('label.icmptype') }}</div>
           <a-input v-model="newRule.icmptype"></a-input>
         </div>
         <div v-show="newRule.protocol === 'icmp'" class="form__item">
-          <div class="form__label">{{ $t('icmpcode') }}</div>
+          <div class="form__label">{{ $t('label.icmpcode') }}</div>
           <a-input v-model="newRule.icmpcode"></a-input>
         </div>
         <div class="form__item" v-if="addType === 'cidr'">
@@ -103,13 +103,13 @@
       <div v-else>
         <a-form :form="newTagsForm" class="add-tags" @submit="handleAddTag">
           <div class="add-tags__input">
-            <p class="add-tags__label">{{ $t('key') }}</p>
+            <p class="add-tags__label">{{ $t('label.key') }}</p>
             <a-form-item>
               <a-input v-decorator="['key', { rules: [{ required: true, message: 'Please specify a tag key'}] }]" />
             </a-form-item>
           </div>
           <div class="add-tags__input">
-            <p class="add-tags__label">{{ $t('value') }}</p>
+            <p class="add-tags__label">{{ $t('label.value') }}</p>
             <a-form-item>
               <a-input v-decorator="['value', { rules: [{ required: true, message: 'Please specify a tag value'}] }]" />
             </a-form-item>
@@ -127,7 +127,7 @@
           </div>
         </div>
 
-        <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('OK') }}</a-button>
+        <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </a-modal>
@@ -174,15 +174,15 @@ export default {
       tabType: null,
       columns: [
         {
-          title: this.$t('protocol'),
+          title: this.$t('label.protocol'),
           scopedSlots: { customRender: 'protocol' }
         },
         {
-          title: this.$t('startport'),
+          title: this.$t('label.startport'),
           dataIndex: 'startport'
         },
         {
-          title: this.$t('endport'),
+          title: this.$t('label.endport'),
           dataIndex: 'endport'
         },
         {
@@ -202,7 +202,7 @@ export default {
           scopedSlots: { customRender: 'account' }
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ]
diff --git a/ui/src/views/network/InternalLBAssignVmForm.vue b/ui/src/views/network/InternalLBAssignVmForm.vue
index 15725d0f765..f84fe60d156 100644
--- a/ui/src/views/network/InternalLBAssignVmForm.vue
+++ b/ui/src/views/network/InternalLBAssignVmForm.vue
@@ -19,14 +19,14 @@
   <a-spin :spinning="fetchLoading">
     <div>
       <div class="vm-modal__header">
-        <span style="min-width: 200px;">{{ $t('name') }}</span>
-        <span>{{ $t('state') }}</span>
-        <span>{{ $t('instancename') }}</span>
-        <span>{{ $t('displayname') }}</span>
-        <span>{{ $t('ip') }}</span>
-        <span>{{ $t('account') }}</span>
-        <span>{{ $t('zonenamelabel') }}</span>
-        <span>{{ $t('select') }}</span>
+        <span style="min-width: 200px;">{{ $t('label.name') }}</span>
+        <span>{{ $t('label.state') }}</span>
+        <span>{{ $t('label.instancename') }}</span>
+        <span>{{ $t('label.displayname') }}</span>
+        <span>{{ $t('label.ip') }}</span>
+        <span>{{ $t('label.account') }}</span>
+        <span>{{ $t('label.zonenamelabel') }}</span>
+        <span>{{ $t('label.select') }}</span>
       </div>
 
       <a-checkbox-group style="width: 100%;">
@@ -70,10 +70,10 @@
     </div>
     <div class="actions">
       <a-button @click="closeModal">
-        {{ $t('Cancel') }}
+        {{ $t('label.cancel') }}
       </a-button>
       <a-button type="primary" @click="handleSubmit">
-        {{ $t('OK') }}
+        {{ $t('label.ok') }}
       </a-button>
     </div>
   </a-spin>
diff --git a/ui/src/views/network/InternalLBAssignedVmTab.vue b/ui/src/views/network/InternalLBAssignedVmTab.vue
index a44d52e3db7..5e925875b56 100644
--- a/ui/src/views/network/InternalLBAssignedVmTab.vue
+++ b/ui/src/views/network/InternalLBAssignedVmTab.vue
@@ -76,12 +76,12 @@ export default {
       totalInstances: 0,
       columns: [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'displayname',
           scopedSlots: { customRender: 'displayname' }
         },
         {
-          title: this.$t('ipaddress'),
+          title: this.$t('label.ipaddress'),
           dataIndex: 'ipaddress',
           scopedSlots: { customRender: 'ipaddress' }
         },
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 7d63894c9b4..e9e9412826a 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -18,7 +18,7 @@
 <template>
   <a-spin :spinning="fetchLoading">
     <a-button type="dashed" icon="plus" style="width: 100%; margin-bottom: 15px" @click="acquireIpAddress">
-      {{ $t("label.acquire.new.ip") }}
+      {{ $t('label.acquire.new.ip') }}
     </a-button>
     <div v-if="$route.path.startsWith('/vpc')">
       Select Tier:
@@ -30,7 +30,7 @@
         @change="handleTierSelect"
       >
         <a-select-option key="all" value="">
-          {{ $t('Show All') }}
+          {{ $t('label.show.all') }}
         </a-select-option>
         <a-select-option v-for="network in networksList" :key="network.id" :value="network.id">
           {{ network.name }}
@@ -118,22 +118,22 @@ export default {
       tiersSelect: false,
       columns: [
         {
-          title: this.$t('ipaddress'),
+          title: this.$t('label.ipaddress'),
           dataIndex: 'ipaddress',
           scopedSlots: { customRender: 'ipaddress' }
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state',
           scopedSlots: { customRender: 'state' }
         },
         {
-          title: this.$t('vm'),
+          title: this.$t('label.vm'),
           dataIndex: 'virtualmachineid',
           scopedSlots: { customRender: 'virtualmachineid' }
         },
         {
-          title: this.$t('Network'),
+          title: this.$t('label.network'),
           dataIndex: 'associatednetworkname',
           scopedSlots: { customRender: 'associatednetworkname' }
         },
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 50c72c44a98..586210a7fce 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -20,22 +20,22 @@
     <div>
       <div class="form">
         <div class="form__item" ref="newRuleName">
-          <div class="form__label"><span class="form__required">*</span>{{ $t('name') }}</div>
+          <div class="form__label"><span class="form__required">*</span>{{ $t('label.name') }}</div>
           <a-input v-model="newRule.name"></a-input>
           <span class="error-text">Required</span>
         </div>
         <div class="form__item" ref="newRulePublicPort">
-          <div class="form__label"><span class="form__required">*</span>{{ $t('publicport') }}</div>
+          <div class="form__label"><span class="form__required">*</span>{{ $t('label.publicport') }}</div>
           <a-input v-model="newRule.publicport"></a-input>
           <span class="error-text">Required</span>
         </div>
         <div class="form__item" ref="newRulePrivatePort">
-          <div class="form__label"><span class="form__required">*</span>{{ $t('privateport') }}</div>
+          <div class="form__label"><span class="form__required">*</span>{{ $t('label.privateport') }}</div>
           <a-input v-model="newRule.privateport"></a-input>
           <span class="error-text">Required</span>
         </div>
         <div class="form__item">
-          <div class="form__label">{{ $t('algorithm') }}</div>
+          <div class="form__label">{{ $t('label.algorithm') }}</div>
           <a-select v-model="newRule.algorithm">
             <a-select-option value="roundrobin">Round-robin</a-select-option>
             <a-select-option value="leastconn">Least connections</a-select-option>
@@ -43,7 +43,7 @@
           </a-select>
         </div>
         <div class="form__item">
-          <div class="form__label">{{ $t('protocol') }}</div>
+          <div class="form__label">{{ $t('label.protocol') }}</div>
           <a-select v-model="newRule.protocol" style="min-width: 100px">
             <a-select-option value="tcp-proxy">TCP Proxy</a-select-option>
             <a-select-option value="tcp">TCP</a-select-option>
@@ -80,7 +80,7 @@
       </template>
       <template slot="add" slot-scope="record">
         <a-button type="primary" icon="plus" @click="() => { selectedRule = record; handleOpenAddVMModal() }">
-          {{ $t('add') }}
+          {{ $t('label.add') }}
         </a-button>
       </template>
       <template slot="expandedRowRender" slot-scope="record">
@@ -138,13 +138,13 @@
 
       <a-form :form="newTagsForm" class="add-tags" @submit="handleAddTag">
         <div class="add-tags__input">
-          <p class="add-tags__label">{{ $t('key') }}</p>
+          <p class="add-tags__label">{{ $t('label.key') }}</p>
           <a-form-item>
             <a-input v-decorator="['key', { rules: [{ required: true, message: 'Please specify a tag key'}] }]" />
           </a-form-item>
         </div>
         <div class="add-tags__input">
-          <p class="add-tags__label">{{ $t('value') }}</p>
+          <p class="add-tags__label">{{ $t('label.value') }}</p>
           <a-form-item>
             <a-input v-decorator="['value', { rules: [{ required: true, message: 'Please specify a tag value'}] }]" />
           </a-form-item>
@@ -162,7 +162,7 @@
         </div>
       </div>
 
-      <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('done') }}</a-button>
+      <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.done') }}</a-button>
     </a-modal>
 
     <a-modal
@@ -244,11 +244,11 @@
 
       <div class="edit-rule" v-if="selectedRule">
         <div class="edit-rule__item">
-          <p class="edit-rule__label">{{ $t('name') }}</p>
+          <p class="edit-rule__label">{{ $t('label.name') }}</p>
           <a-input v-model="editRuleDetails.name" />
         </div>
         <div class="edit-rule__item">
-          <p class="edit-rule__label">{{ $t('algorithm') }}</p>
+          <p class="edit-rule__label">{{ $t('label.algorithm') }}</p>
           <a-select v-model="editRuleDetails.algorithm">
             <a-select-option value="roundrobin">Round-robin</a-select-option>
             <a-select-option value="leastconn">Least connections</a-select-option>
@@ -256,7 +256,7 @@
           </a-select>
         </div>
         <div class="edit-rule__item">
-          <p class="edit-rule__label">{{ $t('protocol') }}</p>
+          <p class="edit-rule__label">{{ $t('label.protocol') }}</p>
           <a-select v-model="editRuleDetails.protocol">
             <a-select-option value="tcp-proxy">TCP proxy</a-select-option>
             <a-select-option value="tcp">TCP</a-select-option>
@@ -281,14 +281,14 @@
 
       <div v-else>
         <div class="vm-modal__header">
-          <span style="min-width: 200px;">{{ $t('name') }}</span>
-          <span>{{ $t('instancename') }}</span>
-          <span>{{ $t('displayname') }}</span>
-          <span>{{ $t('ip') }}</span>
-          <span>{{ $t('account') }}</span>
-          <span>{{ $t('zonenamelabel') }}</span>
-          <span>{{ $t('state') }}</span>
-          <span>{{ $t('select') }}</span>
+          <span style="min-width: 200px;">{{ $t('label.name') }}</span>
+          <span>{{ $t('label.instancename') }}</span>
+          <span>{{ $t('label.displayname') }}</span>
+          <span>{{ $t('label.ip') }}</span>
+          <span>{{ $t('label.account') }}</span>
+          <span>{{ $t('label.zonenamelabel') }}</span>
+          <span>{{ $t('label.state') }}</span>
+          <span>{{ $t('label.select') }}</span>
         </div>
 
         <a-checkbox-group style="width: 100%;">
@@ -386,27 +386,27 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'name'
         },
         {
-          title: this.$t('publicport'),
+          title: this.$t('label.publicport'),
           dataIndex: 'publicport'
         },
         {
-          title: this.$t('privateport'),
+          title: this.$t('label.privateport'),
           dataIndex: 'privateport'
         },
         {
-          title: this.$t('algorithm'),
+          title: this.$t('label.algorithm'),
           scopedSlots: { customRender: 'algorithm' }
         },
         {
-          title: this.$t('protocol'),
+          title: this.$t('label.protocol'),
           scopedSlots: { customRender: 'protocol' }
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state'
         },
         {
@@ -418,7 +418,7 @@ export default {
           scopedSlots: { customRender: 'add' }
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ]
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index a2292ec88bb..334102d3b2d 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -20,7 +20,7 @@
     <div>
       <div class="form">
         <div class="form__item">
-          <div class="form__label">{{ $t('privateport') }}</div>
+          <div class="form__label">{{ $t('label.privateport') }}</div>
           <a-input-group class="form__item__input-container" compact>
             <a-input
               v-model="newRule.privateport"
@@ -38,7 +38,7 @@
           </a-input-group>
         </div>
         <div class="form__item">
-          <div class="form__label">{{ $t('publicport') }}</div>
+          <div class="form__label">{{ $t('label.publicport') }}</div>
           <a-input-group class="form__item__input-container" compact>
             <a-input
               v-model="newRule.publicport"
@@ -56,15 +56,15 @@
           </a-input-group>
         </div>
         <div class="form__item">
-          <div class="form__label">{{ $t('protocol') }}</div>
+          <div class="form__label">{{ $t('label.protocol') }}</div>
           <a-select v-model="newRule.protocol" style="width: 100%;">
-            <a-select-option value="tcp">{{ $t('tcp') }}</a-select-option>
-            <a-select-option value="udp">{{ $t('udp') }}</a-select-option>
+            <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
+            <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
           </a-select>
         </div>
         <div class="form__item" style="margin-left: auto;">
           <div class="form__label">{{ $t('label.add.VM') }}</div>
-          <a-button type="primary" @click="openAddVMModal">{{ $t('add') }}</a-button>
+          <a-button type="primary" @click="openAddVMModal">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>
@@ -120,11 +120,11 @@
 
       <div class="add-tags">
         <div class="add-tags__input">
-          <p class="add-tags__label">{{ $t('key') }}</p>
+          <p class="add-tags__label">{{ $t('label.key') }}</p>
           <a-input v-model="newTag.key"></a-input>
         </div>
         <div class="add-tags__input">
-          <p class="add-tags__label">{{ $t('value') }}</p>
+          <p class="add-tags__label">{{ $t('label.value') }}</p>
           <a-input v-model="newTag.value"></a-input>
         </div>
         <a-button type="primary" @click="() => handleAddTag()">{{ $t('label.add') }}</a-button>
@@ -140,7 +140,7 @@
         </div>
       </div>
 
-      <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('done') }}</a-button>
+      <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.done') }}</a-button>
     </a-modal>
 
     <a-modal
@@ -158,14 +158,14 @@
 
       <div v-else>
         <div class="vm-modal__header">
-          <span style="min-width: 200px;">{{ $t('name') }}</span>
-          <span>{{ $t('instancename') }}</span>
-          <span>{{ $t('displayname') }}</span>
-          <span>{{ $t('ip') }}</span>
-          <span>{{ $t('account') }}</span>
-          <span>{{ $t('zone') }}</span>
-          <span>{{ $t('state') }}</span>
-          <span>{{ $t('select') }}</span>
+          <span style="min-width: 200px;">{{ $t('label.name') }}</span>
+          <span>{{ $t('label.instancename') }}</span>
+          <span>{{ $t('label.displayname') }}</span>
+          <span>{{ $t('label.ip') }}</span>
+          <span>{{ $t('label.account') }}</span>
+          <span>{{ $t('label.zone') }}</span>
+          <span>{{ $t('label.state') }}</span>
+          <span>{{ $t('label.select') }}</span>
         </div>
 
         <a-radio-group v-model="newRule.virtualmachineid" style="width: 100%;" @change="fetchNics">
@@ -243,27 +243,27 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('privateport'),
+          title: this.$t('label.privateport'),
           scopedSlots: { customRender: 'privateport' }
         },
         {
-          title: this.$t('publicport'),
+          title: this.$t('label.publicport'),
           scopedSlots: { customRender: 'publicport' }
         },
         {
-          title: this.$t('protocol'),
+          title: this.$t('label.protocol'),
           scopedSlots: { customRender: 'protocol' }
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state'
         },
         {
-          title: this.$t('vm'),
+          title: this.$t('label.vm'),
           scopedSlots: { customRender: 'vm' }
         },
         {
-          title: this.$t('action'),
+          title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
       ]
diff --git a/ui/src/views/network/RoutersTab.vue b/ui/src/views/network/RoutersTab.vue
index 7f7040e97f0..876a77af8bb 100644
--- a/ui/src/views/network/RoutersTab.vue
+++ b/ui/src/views/network/RoutersTab.vue
@@ -32,7 +32,7 @@
       <status class="status" :text="item.state" displayText />
     </template>
     <template slot="requiresupgrade" slot-scope="text, item">
-      {{ item.requiresupgrade ? $t('Yes') : $t('No') }}
+      {{ item.requiresupgrade ? $t('label.yes') : $t('label.no') }}
     </template>
     <template slot="isredundantrouter" slot-scope="text, record">
       {{ record.isredundantrouter ? record.redundantstate : record.isredundantrouter }}
@@ -68,35 +68,35 @@ export default {
       routers: [],
       columns: [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'name',
           scopedSlots: { customRender: 'name' }
         },
         {
-          title: this.$t('status'),
+          title: this.$t('label.status'),
           dataIndex: 'state',
           scopedSlots: { customRender: 'status' }
         },
         {
-          title: this.$t('ip'),
+          title: this.$t('label.ip'),
           dataIndex: 'publicip'
         },
         {
-          title: this.$t('version'),
+          title: this.$t('label.version'),
           dataIndex: 'version'
         },
         {
-          title: this.$t('requiresupgrade'),
+          title: this.$t('label.requiresupgrade'),
           dataIndex: 'requiresupgrade',
           scopedSlots: { customRender: 'requiresupgrade' }
         },
         {
-          title: this.$t('isredundantrouter'),
+          title: this.$t('label.isredundantrouter'),
           dataIndex: 'isredundantrouter',
           scopedSlots: { customRender: 'isredundantrouter' }
         },
         {
-          title: this.$t('hostname'),
+          title: this.$t('label.hostname'),
           dataIndex: 'hostname',
           scopedSlots: { customRender: 'hostname' }
         }
diff --git a/ui/src/views/network/StaticRoutesTab.vue b/ui/src/views/network/StaticRoutesTab.vue
index c5e84752ac5..edb0313152f 100644
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@@ -41,13 +41,13 @@
       <div v-else>
         <a-form :form="newTagsForm" class="add-tags" @submit="handleAddTag">
           <div class="add-tags__input">
-            <p class="add-tags__label">{{ $t('key') }}</p>
+            <p class="add-tags__label">{{ $t('label.key') }}</p>
             <a-form-item>
               <a-input v-decorator="['key', { rules: [{ required: true, message: 'Please specify a tag key'}] }]" />
             </a-form-item>
           </div>
           <div class="add-tags__input">
-            <p class="add-tags__label">{{ $t('value') }}</p>
+            <p class="add-tags__label">{{ $t('label.value') }}</p>
             <a-form-item>
               <a-input v-decorator="['value', { rules: [{ required: true, message: 'Please specify a tag value'}] }]" />
             </a-form-item>
@@ -65,7 +65,7 @@
           </div>
         </div>
 
-        <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('OK') }}</a-button>
+        <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </a-modal>
diff --git a/ui/src/views/network/VpcTab.vue b/ui/src/views/network/VpcTab.vue
index 15a6e6020b8..2a52c8d5673 100644
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@@ -22,10 +22,10 @@
       :tabPosition="device === 'mobile' ? 'top' : 'left'"
       :animated="false"
       @change="handleChangeTab">
-      <a-tab-pane :tab="$t('details')" key="details">
+      <a-tab-pane :tab="$t('label.details')" key="details">
         <DetailsTab :resource="resource" :loading="loading" />
       </a-tab-pane>
-      <a-tab-pane :tab="$t('networks')" key="tier">
+      <a-tab-pane :tab="$t('label.networks')" key="tier">
         <VpcTiersTab :resource="resource" :loading="loading" />
       </a-tab-pane>
       <a-tab-pane tab="Public IP Addresses" key="ip" v-if="'listPublicIpAddresses' in $store.getters.apis">
@@ -72,7 +72,7 @@
             <a-form-item :label="$t('label.add.list.name')">
               <a-input v-decorator="['name', {rules: [{ required: true, message: 'Required' }]}]"></a-input>
             </a-form-item>
-            <a-form-item :label="$t('description')">
+            <a-form-item :label="$t('label.description')">
               <a-input v-decorator="['description', {rules: [{ required: true, message: 'Required' }]}]"></a-input>
             </a-form-item>
           </a-form>
@@ -115,7 +115,7 @@
           <a-spin :spinning="modals.gatewayLoading">
             <p>{{ $t('message.add.new.gateway.to.vpc') }}</p>
             <a-form @submit.prevent="handleGatewayFormSubmit" :form="gatewayForm">
-              <a-form-item :label="$t('physicalnetworkid')">
+              <a-form-item :label="$t('label.physicalnetworkid')">
                 <a-select v-decorator="['physicalnetwork']">
                   <a-select-option v-for="item in physicalnetworks" :key="item.id" :value="item.id">
                     {{ item.name }}
@@ -128,28 +128,28 @@
                   v-decorator="['vlan', {rules: [{ required: true, message: 'Required' }]}]"
                 ></a-input>
               </a-form-item>
-              <a-form-item :label="$t('publicip')" :required="true">
+              <a-form-item :label="$t('label.publicip')" :required="true">
                 <a-input
                   :placeholder="placeholders.ipaddress"
                   v-decorator="['ipaddress', {rules: [{ required: true, message: 'Required' }]}]"
                 ></a-input>
               </a-form-item>
-              <a-form-item :label="$t('gateway')" :required="true">
+              <a-form-item :label="$t('label.gateway')" :required="true">
                 <a-input
                   :placeholder="placeholders.gateway"
                   v-decorator="['gateway', {rules: [{ required: true, message: 'Required' }]}]"
                 ></a-input>
               </a-form-item>
-              <a-form-item :label="$t('netmask')" :required="true">
+              <a-form-item :label="$t('label.netmask')" :required="true">
                 <a-input
                   :placeholder="placeholders.netmask"
                   v-decorator="['netmask', {rules: [{ required: true, message: 'Required' }]}]"
                 ></a-input>
               </a-form-item>
-              <a-form-item :label="$t('sourceNat')">
+              <a-form-item :label="$t('label.sourcenat')">
                 <a-checkbox v-decorator="['nat']"></a-checkbox>
               </a-form-item>
-              <a-form-item :label="$t('aclid')">
+              <a-form-item :label="$t('label.aclid')">
                 <a-select v-decorator="['acl']">
                   <a-select-option v-for="item in networkAcls" :key="item.id" :value="item.id">
                     {{ item.name }}
@@ -173,7 +173,7 @@
           <a-list-item v-for="item in vpnGateways" :key="item.id">
             <div class="list__item">
               <div class="list__col">
-                <div class="list__label">{{ $t('ip') }}</div>
+                <div class="list__label">{{ $t('label.ip') }}</div>
                 <div>
                   <router-link :to="{ path: '/s2svpn/' + item.id }">
                     {{ item.publicip }}
@@ -222,14 +222,14 @@
         <a-modal v-model="modals.vpnConnection" :title="$t('label.create.VPN.connection')" @ok="handleVpnConnectionFormSubmit">
           <a-spin :spinning="modals.vpnConnectionLoading">
             <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
-              <a-form-item :label="$t('vpncustomergatewayid')">
+              <a-form-item :label="$t('label.vpncustomergatewayid')">
                 <a-select v-decorator="['vpncustomergateway']">
                   <a-select-option v-for="item in vpncustomergateways" :key="item.id" :value="item.id">
                     {{ item.name }}
                   </a-select-option>
                 </a-select>
               </a-form-item>
-              <a-form-item :label="$t('passive')">
+              <a-form-item :label="$t('label.passive')">
                 <a-checkbox v-decorator="['passive']"></a-checkbox>
               </a-form-item>
             </a-form>
@@ -296,56 +296,56 @@ export default {
       vpncustomergateways: [],
       privateGatewaysColumns: [
         {
-          title: this.$t('ip'),
+          title: this.$t('label.ip'),
           dataIndex: 'ipaddress',
           scopedSlots: { customRender: 'ipaddress' }
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state',
           scopedSlots: { customRender: 'state' }
         },
         {
-          title: this.$t('gateway'),
+          title: this.$t('label.gateway'),
           dataIndex: 'gateway'
         },
         {
-          title: this.$t('netmask'),
+          title: this.$t('label.netmask'),
           dataIndex: 'netmask'
         },
         {
-          title: this.$t('vlan'),
+          title: this.$t('label.vlan'),
           dataIndex: 'vlan'
         }
       ],
       vpnConnectionsColumns: [
         {
-          title: this.$t('ip'),
+          title: this.$t('label.ip'),
           dataIndex: 'publicip',
           scopedSlots: { customRender: 'publicip' }
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state',
           scopedSlots: { customRender: 'state' }
         },
         {
-          title: this.$t('gateway'),
+          title: this.$t('label.gateway'),
           dataIndex: 'gateway'
         },
         {
-          title: this.$t('ipsecpsk'),
+          title: this.$t('label.ipsecpsk'),
           dataIndex: 'ipsecpsk'
         }
       ],
       networkAclsColumns: [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'name',
           scopedSlots: { customRender: 'name' }
         },
         {
-          title: this.$t('description'),
+          title: this.$t('label.description'),
           dataIndex: 'description'
         }
       ],
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index a94e1f26400..c6361c619a8 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -24,7 +24,7 @@
           <div class="list__item-container">
             <div class="list__col">
               <div class="list__label">
-                {{ $t('name') }}
+                {{ $t('label.name') }}
               </div>
               <div>
                 <router-link :to="{ path: '/guestnetwork/' + network.id }">{{ network.name }} </router-link>
@@ -32,18 +32,18 @@
               </div>
             </div>
             <div class="list__col">
-              <div class="list__label">{{ $t('state') }}</div>
+              <div class="list__label">{{ $t('label.state') }}</div>
               <div><status :text="network.state" displayText></status></div>
             </div>
             <div class="list__col">
               <div class="list__label">
-                {{ $t('CIDR') }}
+                {{ $t('label.cidr') }}
               </div>
               <div>{{ network.cidr }}</div>
             </div>
             <div class="list__col">
               <div class="list__label">
-                {{ $t('aclid') }}
+                {{ $t('label.aclid') }}
               </div>
               <div>
                 <router-link :to="{ path: '/acllist/' + network.aclid }">
@@ -56,9 +56,9 @@
             <template v-slot:expandIcon="props">
               <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
             </template>
-            <a-collapse-panel :header="$t('Instances')" key="vm" :style="customStyle">
+            <a-collapse-panel :header="$t('label.instances')" key="vm" :style="customStyle">
               <a-button icon="plus" type="dashed" style="margin-bottom: 15px; width: 100%" @click="$router.push({ path: '/action/deployVirtualMachine?networkid=' + network.id })">
-                {{ $t('Add Instance') }}
+                {{ $t('label.add.instance') }}
               </a-button>
               <a-table
                 class="table"
@@ -92,7 +92,7 @@
                 @showSizeChange="changePageSize"
                 showSizeChanger/>
             </a-collapse-panel>
-            <a-collapse-panel :header="$t('Internal LB')" key="ilb" :style="customStyle" :disabled="!showIlb(network)" >
+            <a-collapse-panel :header="$t('label.internal.lb')" key="ilb" :style="customStyle" :disabled="!showIlb(network)" >
               <a-button icon="plus" type="dashed" style="margin-bottom: 15px; width: 100%" @click="handleAddInternalLB(network.id)">
                 {{ $t('label.add.internal.lb') }}
               </a-button>
@@ -131,12 +131,12 @@
     <a-modal v-model="showCreateNetworkModal" :title="$t('label.add.new.tier')" @ok="handleAddNetworkSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddNetworkSubmit" :form="form">
-          <a-form-item :label="$t('name')">
+          <a-form-item :label="$t('label.name')">
             <a-input
               placeholder="A unique name of the tier"
               v-decorator="['name',{rules: [{ required: true, message: 'Required' }]}]"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('networkOfferingId')">
+          <a-form-item :label="$t('label.networkofferingid')">
             <a-select
               v-decorator="['networkOffering',{rules: [{ required: true, message: 'Required' }]}]">
               <a-select-option v-for="item in networkOfferings" :key="item.id" :value="item.id">
@@ -144,21 +144,21 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('gateway')">
+          <a-form-item :label="$t('label.gateway')">
             <a-input
               placeholder="The gateway of the tier in the super CIDR range and not overlapping the CIDR of any other tier in this VPC."
               v-decorator="['gateway',{rules: [{ required: true, message: 'Required' }]}]"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('netmask')">
+          <a-form-item :label="$t('label.netmask')">
             <a-input
               placeholder="Netmask of the tier. For example, with VPC CIDR of 10.0.0.0/16 and network tier CIDR of 10.1.1.0/24, gateway is 10.1.1.1 and netmask is 255.255.255.0"
               v-decorator="['netmask',{rules: [{ required: true, message: 'Required' }]}]"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('externalid')">
+          <a-form-item :label="$t('label.externalid')">
             <a-input
               v-decorator="['externalId']"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('aclid')">
+          <a-form-item :label="$t('label.aclid')">
             <a-select v-decorator="['acl']">
               <a-select-option v-for="item in networkAclList" :key="item.id" :value="item.id">
                 {{ item.name }}
@@ -172,30 +172,30 @@
     <a-modal v-model="showAddInternalLB" :title="$t('label.add.internal.lb')" @ok="handleAddInternalLBSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddInternalLBSubmit" :form="form">
-          <a-form-item :label="$t('name')">
+          <a-form-item :label="$t('label.name')">
             <a-input
               placeholder="Unique name for Internal LB"
               v-decorator="['name', { rules: [{ required: true, message: 'Please specify a name for the Internal LB'}] }]"/>
           </a-form-item>
-          <a-form-item :label="$t('description')">
+          <a-form-item :label="$t('label.description')">
             <a-input
               placeholder="Brief description of the Internal LB"
               v-decorator="['description']"/>
           </a-form-item>
-          <a-form-item :label="$t('sourceipaddress')">
+          <a-form-item :label="$t('label.sourceipaddress')">
             <a-input
               placeholder="Brief description of the Internal LB"
               v-decorator="['sourceIP']"/>
           </a-form-item>
-          <a-form-item :label="$t('sourceport')">
+          <a-form-item :label="$t('label.sourceport')">
             <a-input
               v-decorator="['sourcePort', { rules: [{ required: true, message: 'Please specify a Source Port'}] }]"/>
           </a-form-item>
-          <a-form-item :label="$t('instanceport')">
+          <a-form-item :label="$t('label.instanceport')">
             <a-input
               v-decorator="['instancePort', { rules: [{ required: true, message: 'Please specify a Instance Port'}] }]"/>
           </a-form-item>
-          <a-form-item :label="$t('algorithm')">
+          <a-form-item :label="$t('label.algorithm')">
             <a-select
               v-decorator="[
                 'algorithm',
@@ -254,69 +254,69 @@ export default {
       },
       internalLbCols: [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'name',
           scopedSlots: { customRender: 'name' }
         },
         {
-          title: this.$t('sourceipaddress'),
+          title: this.$t('label.sourceipaddress'),
           dataIndex: 'sourceipaddress'
         },
         {
-          title: this.$t('algorithm'),
+          title: this.$t('label.algorithm'),
           dataIndex: 'algorithm'
         },
         {
-          title: this.$t('account'),
+          title: this.$t('label.account'),
           dataIndex: 'account'
         }
       ],
       LBPublicIPCols: [
         {
-          title: this.$t('ip'),
+          title: this.$t('label.ip'),
           dataIndex: 'ipaddress',
           scopedSlots: { customRender: 'ipaddress' }
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state'
         },
         {
-          title: this.$t('networkid'),
+          title: this.$t('label.networkid'),
           dataIndex: 'associatedNetworkName'
         },
         {
-          title: this.$t('vm'),
+          title: this.$t('label.vm'),
           dataIndex: 'virtualmachinename'
         }
       ],
       StaticNatCols: [
         {
-          title: this.$t('ips'),
+          title: this.$t('label.ips'),
           dataIndex: 'ipaddress',
           scopedSlots: { customRender: 'ipaddress' }
         },
         {
-          title: this.$t('zoneid'),
+          title: this.$t('label.zoneid'),
           dataIndex: 'zonename'
         },
         {
-          title: this.$t('networkid'),
+          title: this.$t('label.networkid'),
           dataIndex: 'associatedNetworkName'
         },
         {
-          title: this.$t('state'),
+          title: this.$t('label.state'),
           dataIndex: 'state'
         }
       ],
       vmCols: [
         {
-          title: this.$t('name'),
+          title: this.$t('label.name'),
           dataIndex: 'name',
           scopedSlots: { customRender: 'name' }
         },
         {
-          title: this.$t('ip'),
+          title: this.$t('label.ip'),
           scopedSlots: { customRender: 'ip' }
         }
       ],
diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index 71848bacd28..e82bcdecb2f 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -22,21 +22,21 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="this.$t('Name')"/>
+            :placeholder="this.$t('label.name')"/>
         </a-form-item>
-        <a-form-item :label="$t('displaytext')">
+        <a-form-item :label="$t('label.displaytext')">
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="this.$t('displaytext')"/>
+            :placeholder="this.$t('label.displaytext')"/>
         </a-form-item>
-        <a-form-item :label="$t('systemvmtype')" v-if="this.isSystem">
+        <a-form-item :label="$t('label.systemvmtype')" v-if="this.isSystem">
           <a-select
             v-decorator="['systemvmtype', {
               initialValue: 'domainrouter'
@@ -46,13 +46,13 @@
             :filterOption="(input, option) => {
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
-            :placeholder="this.$t('systemvmtype')">
+            :placeholder="this.$t('label.systemvmtype')">
             <a-select-option key="domainrouter">Domain Router</a-select-option>
             <a-select-option key="consoleproxy">Console Proxy</a-select-option>
             <a-select-option key="secondarystoragevm">Secondary Storage VM</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('storagetype')">
+        <a-form-item :label="$t('label.storagetype')">
           <a-radio-group
             v-decorator="['storagetype', {
               initialValue: this.storageType
@@ -60,14 +60,14 @@
             buttonStyle="solid"
             @change="selected => { this.handleStorageTypeChange(selected.target.value) }">
             <a-radio-button value="shared">
-              {{ $t('shared') }}
+              {{ $t('label.shared') }}
             </a-radio-button>
             <a-radio-button value="local">
-              {{ $t('local') }}
+              {{ $t('label.local') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('provisioningtype')">
+        <a-form-item :label="$t('label.provisioningtype')">
           <a-radio-group
             v-decorator="['provisioningtype', {
               initialValue: this.provisioningType
@@ -75,17 +75,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
             <a-radio-button value="thin">
-              {{ $t('thin') }}
+              {{ $t('label.thin') }}
             </a-radio-button>
             <a-radio-button value="sparse">
-              {{ $t('sparse') }}
+              {{ $t('label.sparse') }}
             </a-radio-button>
             <a-radio-button value="fat">
-              {{ $t('fat') }}
+              {{ $t('label.fat') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('cachemode')">
+        <a-form-item :label="$t('label.cachemode')">
           <a-radio-group
             v-decorator="['cachemode', {
               initialValue: this.cacheMode
@@ -93,17 +93,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleCacheModeChange(selected.target.value) }">
             <a-radio-button value="none">
-              {{ $t('nodiskcache') }}
+              {{ $t('label.nodiskcache') }}
             </a-radio-button>
             <a-radio-button value="writeback">
-              {{ $t('writeback') }}
+              {{ $t('label.writeback') }}
             </a-radio-button>
             <a-radio-button value="writethrough">
-              {{ $t('writethrough') }}
+              {{ $t('label.writethrough') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('offeringtype')" v-show="!this.isSystem">
+        <a-form-item :label="$t('label.offeringtype')" v-show="!this.isSystem">
           <a-radio-group
             v-decorator="['offeringtype', {
               initialValue: this.offeringType
@@ -111,17 +111,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleComputeOfferingTypeChange(selected.target.value) }">
             <a-radio-button value="fixed">
-              {{ $t('fixed') }}
+              {{ $t('label.fixed') }}
             </a-radio-button>
             <a-radio-button value="customconstrained">
-              {{ $t('customconstrained') }}
+              {{ $t('label.customconstrained') }}
             </a-radio-button>
             <a-radio-button value="customunconstrained">
-              {{ $t('customunconstrained') }}
+              {{ $t('label.customunconstrained') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('cpunumber')" v-if="this.offeringType === 'fixed'">
+        <a-form-item :label="$t('label.cpunumber')" v-if="this.offeringType === 'fixed'">
           <a-input
             v-decorator="['cpunumber', {
               rules: [{ required: true, message: $t('message.error.required.input') },
@@ -135,9 +135,9 @@
                       }
               ]
             }]"
-            :placeholder="this.$t('cpunumber')"/>
+            :placeholder="this.$t('label.cpunumber')"/>
         </a-form-item>
-        <a-form-item :label="$t('cpuspeed')" v-if="this.offeringType !== 'customunconstrained'">
+        <a-form-item :label="$t('label.cpuspeed')" v-if="this.offeringType !== 'customunconstrained'">
           <a-input
             v-decorator="['cpuspeed', {
               rules: [{ required: true, message: $t('message.error.required.input') },
@@ -151,9 +151,9 @@
                       }
               ]
             }]"
-            :placeholder="this.$t('cpuspeed')"/>
+            :placeholder="this.$t('label.cpuspeed')"/>
         </a-form-item>
-        <a-form-item :label="$t('mincpunumber')" v-if="this.offeringType === 'customconstrained'">
+        <a-form-item :label="$t('label.mincpunumber')" v-if="this.offeringType === 'customconstrained'">
           <a-input
             v-decorator="['mincpunumber', {
               rules: [{ required: true, message: $t('message.error.required.input') },
@@ -167,9 +167,9 @@
                       }
               ]
             }]"
-            :placeholder="this.$t('mincpunumber')"/>
+            :placeholder="this.$t('label.mincpunumber')"/>
         </a-form-item>
-        <a-form-item :label="$t('maxcpunumber')" v-if="this.offeringType === 'customconstrained'">
+        <a-form-item :label="$t('label.maxcpunumber')" v-if="this.offeringType === 'customconstrained'">
           <a-input
             v-decorator="['maxcpunumber', {
               rules: [{ required: true, message: $t('message.error.required.input') },
@@ -183,9 +183,9 @@
                       }
               ]
             }]"
-            :placeholder="this.$t('maxcpunumber')"/>
+            :placeholder="this.$t('label.maxcpunumber')"/>
         </a-form-item>
-        <a-form-item :label="$t('memory')" v-if="this.offeringType === 'fixed'">
+        <a-form-item :label="$t('label.memory')" v-if="this.offeringType === 'fixed'">
           <a-input
             v-decorator="['memory', {
               rules: [{ required: true, message: $t('message.error.required.input') },
@@ -199,9 +199,9 @@
                       }
               ]
             }]"
-            :placeholder="this.$t('memory')"/>
+            :placeholder="this.$t('label.memory')"/>
         </a-form-item>
-        <a-form-item :label="$t('minmemory')" v-if="this.offeringType === 'customconstrained'">
+        <a-form-item :label="$t('label.minmemory')" v-if="this.offeringType === 'customconstrained'">
           <a-input
             v-decorator="['minmemory', {
               rules: [{ required: true, message: $t('message.error.required.input') },
@@ -215,9 +215,9 @@
                       }
               ]
             }]"
-            :placeholder="this.$t('minmemory')"/>
+            :placeholder="this.$t('label.minmemory')"/>
         </a-form-item>
-        <a-form-item :label="$t('maxmemory')" v-if="this.offeringType === 'customconstrained'">
+        <a-form-item :label="$t('label.maxmemory')" v-if="this.offeringType === 'customconstrained'">
           <a-input
             v-decorator="['maxmemory', {
               rules: [{ required: true, message: $t('message.error.required.input') },
@@ -231,9 +231,9 @@
                       }
               ]
             }]"
-            :placeholder="this.$t('maxmemory')"/>
+            :placeholder="this.$t('label.maxmemory')"/>
         </a-form-item>
-        <a-form-item :label="$t('networkrate')">
+        <a-form-item :label="$t('label.networkrate')">
           <a-input
             v-decorator="['networkrate', {
               rules: [
@@ -247,9 +247,9 @@
                 }
               ]
             }]"
-            :placeholder="this.$t('networkrate')"/>
+            :placeholder="this.$t('label.networkrate')"/>
         </a-form-item>
-        <a-form-item :label="$t('qostype')">
+        <a-form-item :label="$t('label.qostype')">
           <a-radio-group
             v-decorator="['qostype', {
               initialValue: this.qosType
@@ -257,17 +257,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleQosTypeChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('none') }}
+              {{ $t('label.none') }}
             </a-radio-button>
             <a-radio-button value="hypervisor">
-              {{ $t('hypervisor') }}
+              {{ $t('label.hypervisor') }}
             </a-radio-button>
             <a-radio-button value="storage">
-              {{ $t('storage') }}
+              {{ $t('label.storage') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('diskbytesreadrate')" v-if="this.qosType === 'hypervisor'">
+        <a-form-item :label="$t('label.diskbytesreadrate')" v-if="this.qosType === 'hypervisor'">
           <a-input
             v-decorator="['diskbytesreadrate', {
               rules: [{
@@ -279,9 +279,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskbytesreadrate')"/>
+            :placeholder="this.$t('label.diskbytesreadrate')"/>
         </a-form-item>
-        <a-form-item :label="$t('diskbyteswriterate')" v-if="this.qosType === 'hypervisor'">
+        <a-form-item :label="$t('label.diskbyteswriterate')" v-if="this.qosType === 'hypervisor'">
           <a-input
             v-decorator="['diskbyteswriterate', {
               rules: [{
@@ -293,9 +293,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskbyteswriterate')"/>
+            :placeholder="this.$t('label.diskbyteswriterate')"/>
         </a-form-item>
-        <a-form-item :label="$t('diskiopsreadrate')" v-if="this.qosType === 'hypervisor'">
+        <a-form-item :label="$t('label.diskiopsreadrate')" v-if="this.qosType === 'hypervisor'">
           <a-input
             v-decorator="['diskiopsreadrate', {
               rules: [{
@@ -307,9 +307,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskiopsreadrate')"/>
+            :placeholder="this.$t('label.diskiopsreadrate')"/>
         </a-form-item>
-        <a-form-item :label="$t('diskiopswriterate')" v-if="this.qosType === 'hypervisor'">
+        <a-form-item :label="$t('label.diskiopswriterate')" v-if="this.qosType === 'hypervisor'">
           <a-input
             v-decorator="['diskiopswriterate', {
               rules: [{
@@ -321,12 +321,12 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskiopswriterate')"/>
+            :placeholder="this.$t('label.diskiopswriterate')"/>
         </a-form-item>
-        <a-form-item :label="$t('iscustomizeddiskiops')" v-if="!this.isSystem && this.qosType === 'storage'">
+        <a-form-item :label="$t('label.iscustomizeddiskiops')" v-if="!this.isSystem && this.qosType === 'storage'">
           <a-switch v-decorator="['iscustomizeddiskiops', {initialValue: this.isCustomizedDiskIops}]" :defaultChecked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
         </a-form-item>
-        <a-form-item :label="$t('diskiopsmin')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
+        <a-form-item :label="$t('label.diskiopsmin')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
           <a-input
             v-decorator="['diskiopsmin', {
               rules: [{
@@ -338,9 +338,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskiopsmin')"/>
+            :placeholder="this.$t('label.diskiopsmin')"/>
         </a-form-item>
-        <a-form-item :label="$t('diskiopsmax')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
+        <a-form-item :label="$t('label.diskiopsmax')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
           <a-input
             v-decorator="['diskiopsmax', {
               rules: [{
@@ -352,9 +352,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskiopsmax')"/>
+            :placeholder="this.$t('label.diskiopsmax')"/>
         </a-form-item>
-        <a-form-item :label="$t('hypervisorsnapshotreserve')" v-if="!this.isSystem && this.qosType === 'storage'">
+        <a-form-item :label="$t('label.hypervisorsnapshotreserve')" v-if="!this.isSystem && this.qosType === 'storage'">
           <a-input
             v-decorator="['hypervisorsnapshotreserve', {
               rules: [{
@@ -366,17 +366,17 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('hypervisorsnapshotreserve')"/>
+            :placeholder="this.$t('label.hypervisorsnapshotreserve')"/>
         </a-form-item>
-        <a-form-item :label="$t('offerha')">
+        <a-form-item :label="$t('label.offerha')">
           <a-switch v-decorator="['offerha', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('hosttags')" v-if="this.isAdmin()">
+        <a-form-item :label="$t('label.hosttags')" v-if="this.isAdmin()">
           <a-input
             v-decorator="['hosttags', {}]"
-            :placeholder="this.$t('hosttags')"/>
+            :placeholder="this.$t('label.hosttags')"/>
         </a-form-item>
-        <a-form-item :label="$t('storagetags')" v-if="this.isAdmin()">
+        <a-form-item :label="$t('label.storagetags')" v-if="this.isAdmin()">
           <a-select
             mode="tags"
             v-decorator="['storagetags', {}]"
@@ -386,20 +386,20 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="storageTagLoading"
-            :placeholder="$t('storagetags')"
+            :placeholder="$t('label.storagetags')"
             v-if="this.isAdmin()">
             <a-select-option v-for="opt in storageTags" :key="opt">
               {{ opt }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('limitcpuuse')">
+        <a-form-item :label="$t('label.limitcpuuse')">
           <a-switch v-decorator="['limitcpuuse', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('isvolatile')" v-if="!this.isSystem">
+        <a-form-item :label="$t('label.isvolatile')" v-if="!this.isSystem">
           <a-switch v-decorator="['isvolatile', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('deploymentplanner')" v-if="!this.isSystem && this.isAdmin()">
+        <a-form-item :label="$t('label.deploymentplanner')" v-if="!this.isSystem && this.isAdmin()">
           <a-select
             v-decorator="['deploymentplanner', {
               initialValue: this.deploymentPlanners.length > 0 ? this.deploymentPlanners[0].name : ''
@@ -410,14 +410,14 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="deploymentPlannerLoading"
-            :placeholder="this.$t('deploymentplanner')"
+            :placeholder="this.$t('label.deploymentplanner')"
             @change="val => { this.handleDeploymentPlannerChange(val) }">
             <a-select-option v-for="(opt) in this.deploymentPlanners" :key="opt.name">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('plannermode')" v-if="this.plannerModeVisible">
+        <a-form-item :label="$t('label.plannermode')" v-if="this.plannerModeVisible">
           <a-radio-group
             v-decorator="['plannermode', {
               initialValue: this.plannerMode
@@ -425,17 +425,17 @@
             buttonStyle="solid"
             @change="selected => { this.handlePlannerModeChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('none') }}
+              {{ $t('label.none') }}
             </a-radio-button>
             <a-radio-button value="strict">
-              {{ $t('strict') }}
+              {{ $t('label.strict') }}
             </a-radio-button>
             <a-radio-button value="preferred">
-              {{ $t('preferred') }}
+              {{ $t('label.preferred') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('gpu')" v-if="!this.isSystem">
+        <a-form-item :label="$t('label.gpu')" v-if="!this.isSystem">
           <a-radio-group
             v-decorator="['pcidevice', {
               initialValue: this.selectedGpu
@@ -447,7 +447,7 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('vgputype')" v-if="this.vGpuVisible">
+        <a-form-item :label="$t('label.vgputype')" v-if="this.vGpuVisible">
           <a-select
             v-decorator="['vgputype', {}]"
             showSearch
@@ -455,16 +455,16 @@
             :filterOption="(input, option) => {
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
-            :placeholder="this.$t('vgputype')">
+            :placeholder="this.$t('label.vgputype')">
             <a-select-option v-for="(opt, optIndex) in this.vGpuTypes" :key="optIndex">
               {{ opt }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
+        <a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
           <a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
         </a-form-item>
-        <a-form-item :label="$t('domain')" v-if="!this.isPublic">
+        <a-form-item :label="$t('label.domain')" v-if="!this.isPublic">
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
@@ -481,13 +481,13 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('domainid')">
+            :placeholder="this.$t('label.domainid')">
             <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('zoneid')" v-if="!this.isSystem">
+        <a-form-item :label="$t('label.zoneid')" v-if="!this.isSystem">
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -509,7 +509,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="this.$t('zoneid')">
+            :placeholder="this.$t('label.zoneid')">
             <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -517,8 +517,8 @@
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
diff --git a/ui/src/views/offering/AddDiskOffering.vue b/ui/src/views/offering/AddDiskOffering.vue
index ba1d1c674e4..2655c819af5 100644
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@@ -22,21 +22,21 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="this.$t('Name')"/>
+            :placeholder="this.$t('label.name')"/>
         </a-form-item>
-        <a-form-item :label="$t('displaytext')">
+        <a-form-item :label="$t('label.displaytext')">
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="this.$t('displaytext')"/>
+            :placeholder="this.$t('label.displaytext')"/>
         </a-form-item>
-        <a-form-item :label="$t('storagetype')">
+        <a-form-item :label="$t('label.storagetype')">
           <a-radio-group
             v-decorator="['storagetype', {
               initialValue: this.storageType
@@ -44,14 +44,14 @@
             buttonStyle="solid"
             @change="selected => { this.handleStorageTypeChange(selected.target.value) }">
             <a-radio-button value="shared">
-              {{ $t('shared') }}
+              {{ $t('label.shared') }}
             </a-radio-button>
             <a-radio-button value="local">
-              {{ $t('local') }}
+              {{ $t('label.local') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('provisioningtype')">
+        <a-form-item :label="$t('label.provisioningtype')">
           <a-radio-group
             v-decorator="['provisioningtype', {
               initialValue: this.provisioningType
@@ -59,20 +59,20 @@
             buttonStyle="solid"
             @change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
             <a-radio-button value="thin">
-              {{ $t('thin') }}
+              {{ $t('label.thin') }}
             </a-radio-button>
             <a-radio-button value="sparse">
-              {{ $t('sparse') }}
+              {{ $t('label.sparse') }}
             </a-radio-button>
             <a-radio-button value="fat">
-              {{ $t('fat') }}
+              {{ $t('label.fat') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('customdisksize')">
+        <a-form-item :label="$t('label.customdisksize')">
           <a-switch v-decorator="['customdisksize', { initialValue: this.isCustomDiskSize }]" :checked="this.isCustomDiskSize" @change="val => { this.isCustomDiskSize = val }" />
         </a-form-item>
-        <a-form-item :label="$t('disksize')" v-if="!this.isCustomDiskSize">
+        <a-form-item :label="$t('label.disksize')" v-if="!this.isCustomDiskSize">
           <a-input
             v-decorator="['disksize', {
               rules: [
@@ -87,9 +87,9 @@
                 }
               ]
             }]"
-            :placeholder="this.$t('disksize')"/>
+            :placeholder="this.$t('label.disksize')"/>
         </a-form-item>
-        <a-form-item :label="$t('qostype')">
+        <a-form-item :label="$t('label.qostype')">
           <a-radio-group
             v-decorator="['qostype', {
               initialValue: this.qosType
@@ -97,17 +97,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleQosTypeChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('none') }}
+              {{ $t('label.none') }}
             </a-radio-button>
             <a-radio-button value="hypervisor">
-              {{ $t('hypervisor') }}
+              {{ $t('label.hypervisor') }}
             </a-radio-button>
             <a-radio-button value="storage">
-              {{ $t('storage') }}
+              {{ $t('label.storage') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('diskbytesreadrate')" v-if="this.qosType === 'hypervisor'">
+        <a-form-item :label="$t('label.diskbytesreadrate')" v-if="this.qosType === 'hypervisor'">
           <a-input
             v-decorator="['diskbytesreadrate', {
               rules: [{
@@ -119,9 +119,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskbytesreadrate')"/>
+            :placeholder="this.$t('label.diskbytesreadrate')"/>
         </a-form-item>
-        <a-form-item :label="$t('diskbyteswriterate')" v-if="this.qosType === 'hypervisor'">
+        <a-form-item :label="$t('label.diskbyteswriterate')" v-if="this.qosType === 'hypervisor'">
           <a-input
             v-decorator="['diskbyteswriterate', {
               rules: [{
@@ -133,9 +133,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskbyteswriterate')"/>
+            :placeholder="this.$t('label.diskbyteswriterate')"/>
         </a-form-item>
-        <a-form-item :label="$t('diskiopsreadrate')" v-if="this.qosType === 'hypervisor'">
+        <a-form-item :label="$t('label.diskiopsreadrate')" v-if="this.qosType === 'hypervisor'">
           <a-input
             v-decorator="['diskiopsreadrate', {
               rules: [{
@@ -147,9 +147,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskiopsreadrate')"/>
+            :placeholder="this.$t('label.diskiopsreadrate')"/>
         </a-form-item>
-        <a-form-item :label="$t('diskiopswriterate')" v-if="this.qosType === 'hypervisor'">
+        <a-form-item :label="$t('label.diskiopswriterate')" v-if="this.qosType === 'hypervisor'">
           <a-input
             v-decorator="['diskiopswriterate', {
               rules: [{
@@ -161,12 +161,12 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskiopswriterate')"/>
+            :placeholder="this.$t('label.diskiopswriterate')"/>
         </a-form-item>
-        <a-form-item :label="$t('iscustomizeddiskiops')" v-if="this.qosType === 'storage'">
+        <a-form-item :label="$t('label.iscustomizeddiskiops')" v-if="this.qosType === 'storage'">
           <a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
         </a-form-item>
-        <a-form-item :label="$t('diskiopsmin')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
+        <a-form-item :label="$t('label.diskiopsmin')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
           <a-input
             v-decorator="['diskiopsmin', {
               rules: [{
@@ -178,9 +178,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskiopsmin')"/>
+            :placeholder="this.$t('label.diskiopsmin')"/>
         </a-form-item>
-        <a-form-item :label="$t('diskiopsmax')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
+        <a-form-item :label="$t('label.diskiopsmax')" v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
           <a-input
             v-decorator="['diskiopsmax', {
               rules: [{
@@ -192,9 +192,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('diskiopsmax')"/>
+            :placeholder="this.$t('label.diskiopsmax')"/>
         </a-form-item>
-        <a-form-item :label="$t('hypervisorsnapshotreserve')" v-if="this.qosType === 'storage'">
+        <a-form-item :label="$t('label.hypervisorsnapshotreserve')" v-if="this.qosType === 'storage'">
           <a-input
             v-decorator="['hypervisorsnapshotreserve', {
               rules: [{
@@ -206,9 +206,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('hypervisorsnapshotreserve')"/>
+            :placeholder="this.$t('label.hypervisorsnapshotreserve')"/>
         </a-form-item>
-        <a-form-item :label="$t('writecachetype')">
+        <a-form-item :label="$t('label.writecachetype')">
           <a-radio-group
             v-decorator="['writecachetype', {
               initialValue: this.writeCacheType
@@ -216,17 +216,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleWriteCacheTypeChange(selected.target.value) }">
             <a-radio-button value="none">
-              {{ $t('nodiskcache') }}
+              {{ $t('label.nodiskcache') }}
             </a-radio-button>
             <a-radio-button value="writeback">
-              {{ $t('writeback') }}
+              {{ $t('label.writeback') }}
             </a-radio-button>
             <a-radio-button value="writethrough">
-              {{ $t('writethrough') }}
+              {{ $t('label.writethrough') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('storagetags')" v-if="this.isAdmin()">
+        <a-form-item :label="$t('label.storagetags')" v-if="this.isAdmin()">
           <a-select
             mode="tags"
             v-decorator="['tags', {}]"
@@ -236,17 +236,17 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="storageTagLoading"
-            :placeholder="this.$t('tags')"
+            :placeholder="this.$t('label.tags')"
             v-if="this.isAdmin()">
             <a-select-option v-for="(opt) in this.storageTags" :key="opt.name">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
+        <a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
           <a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
         </a-form-item>
-        <a-form-item :label="$t('domainid')" v-if="!this.isPublic">
+        <a-form-item :label="$t('label.domainid')" v-if="!this.isPublic">
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
@@ -263,13 +263,13 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('domainid')">
+            :placeholder="this.$t('label.domainid')">
             <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('zoneid')">
+        <a-form-item :label="$t('label.zoneid')">
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -291,7 +291,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="this.$t('zoneid')">
+            :placeholder="this.$t('label.zoneid')">
             <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -299,8 +299,8 @@
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
diff --git a/ui/src/views/offering/AddNetworkOffering.vue b/ui/src/views/offering/AddNetworkOffering.vue
index 5b7a41d5c26..68f08396271 100644
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@@ -22,21 +22,21 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: 'Please enter name' }]
             }]"
-            :placeholder="this.$t('name')"/>
+            :placeholder="this.$t('label.name')"/>
         </a-form-item>
-        <a-form-item :label="$t('displaytext')">
+        <a-form-item :label="$t('label.displaytext')">
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: 'Please enter description' }]
             }]"
-            :placeholder="this.$t('displaytext')"/>
+            :placeholder="this.$t('label.displaytext')"/>
         </a-form-item>
-        <a-form-item :label="$t('networkrate')">
+        <a-form-item :label="$t('label.networkrate')">
           <a-input
             v-decorator="['networkrate', {
               rules: [{
@@ -48,9 +48,9 @@
                 }
               }]
             }]"
-            :placeholder="this.$t('networkrate')"/>
+            :placeholder="this.$t('label.networkrate')"/>
         </a-form-item>
-        <a-form-item :label="$t('guestiptype')">
+        <a-form-item :label="$t('label.guestiptype')">
           <a-radio-group
             v-decorator="['guestiptype', {
               initialValue: this.guestType
@@ -58,43 +58,43 @@
             buttonStyle="solid"
             @change="selected => { this.handleGuestTypeChange(selected.target.value) }">
             <a-radio-button value="isolated">
-              {{ $t('isolated') }}
+              {{ $t('label.isolated') }}
             </a-radio-button>
             <a-radio-button value="l2">
-              {{ $t('l2') }}
+              {{ $t('label.l2') }}
             </a-radio-button>
             <a-radio-button value="shared">
-              {{ $t('shared') }}
+              {{ $t('label.shared') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('ispersistent')" v-if="this.guestType !== 'shared'">
+        <a-form-item :label="$t('label.ispersistent')" v-if="this.guestType !== 'shared'">
           <a-switch v-decorator="['ispersistent', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('specifyvlan')" v-if="this.guestType !== 'shared'">
+        <a-form-item :label="$t('label.specifyvlan')" v-if="this.guestType !== 'shared'">
           <a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
         </a-form-item>
-        <a-form-item :label="$t('vpc')" v-if="this.guestType === 'isolated'">
+        <a-form-item :label="$t('label.vpc')" v-if="this.guestType === 'isolated'">
           <a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="val => { this.handleForVpcChange(val) }" />
         </a-form-item>
-        <a-form-item :label="$t('userdatal2')" v-if="this.guestType === 'l2'">
+        <a-form-item :label="$t('label.userdatal2')" v-if="this.guestType === 'l2'">
           <a-switch v-decorator="['userdatal2', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('lbtype')" v-if="this.forVpc && this.lbServiceChecked">
+        <a-form-item :label="$t('label.lbtype')" v-if="this.forVpc && this.lbServiceChecked">
           <a-radio-group
             v-decorator="['lbtype', {
               initialValue: 'publicLb'
             }]"
             buttonStyle="solid">
             <a-radio-button value="publicLb">
-              {{ $t('Public LB') }}
+              {{ $t('label.public.lb') }}
             </a-radio-button>
             <a-radio-button value="internalLb">
-              {{ $t('Internal LB') }}
+              {{ $t('label.internal.lb') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('promiscuousmode')">
+        <a-form-item :label="$t('label.promiscuousmode')">
           <a-radio-group
             v-decorator="['promiscuousmode', {
               initialValue: this.promiscuousMode
@@ -102,17 +102,17 @@
             buttonStyle="solid"
             @change="selected => { this.handlePromiscuousModeChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('none') }}
+              {{ $t('label.none') }}
             </a-radio-button>
             <a-radio-button value="accept">
-              {{ $t('accept') }}
+              {{ $t('label.accept') }}
             </a-radio-button>
             <a-radio-button value="reject">
-              {{ $t('reject') }}
+              {{ $t('label.reject') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('macaddresschanges')">
+        <a-form-item :label="$t('label.macaddresschanges')">
           <a-radio-group
             v-decorator="['macaddresschanges', {
               initialValue: this.macAddressChanges
@@ -120,17 +120,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleMacAddressChangesChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('none') }}
+              {{ $t('label.none') }}
             </a-radio-button>
             <a-radio-button value="accept">
-              {{ $t('accept') }}
+              {{ $t('label.accept') }}
             </a-radio-button>
             <a-radio-button value="reject">
-              {{ $t('reject') }}
+              {{ $t('label.reject') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('forgedtransmits')">
+        <a-form-item :label="$t('label.forgedtransmits')">
           <a-radio-group
             v-decorator="['forgedtransmits', {
               initialValue: this.forgedTransmits
@@ -138,17 +138,17 @@
             buttonStyle="solid"
             @change="selected => { this.handleForgedTransmitsChange(selected.target.value) }">
             <a-radio-button value="">
-              {{ $t('none') }}
+              {{ $t('label.none') }}
             </a-radio-button>
             <a-radio-button value="accept">
-              {{ $t('accept') }}
+              {{ $t('label.accept') }}
             </a-radio-button>
             <a-radio-button value="reject">
-              {{ $t('reject') }}
+              {{ $t('label.reject') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('supportedservices')" v-if="this.guestType !== 'l2'">
+        <a-form-item :label="$t('label.supportedservices')" v-if="this.guestType !== 'l2'">
           <div class="supported-services-container" scroll-to="last-child">
             <a-list itemLayout="horizontal" :dataSource="this.supportedServices">
               <a-list-item slot="renderItem" slot-scope="item">
@@ -164,7 +164,7 @@
             </a-list>
           </div>
         </a-form-item>
-        <a-form-item :label="$t('serviceofferingid')" v-if="this.isVirtualRouterForAtLeastOneService">
+        <a-form-item :label="$t('label.serviceofferingid')" v-if="this.isVirtualRouterForAtLeastOneService">
           <a-select
             v-decorator="['serviceofferingid', {
               rules: [
@@ -181,47 +181,47 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="serviceOfferingLoading"
-            :placeholder="this.$t('serviceofferingid')">
+            :placeholder="this.$t('label.serviceofferingid')">
             <a-select-option v-for="(opt, optIndex) in this.serviceOfferings" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('redundantrouter')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.sourceNatServiceChecked && !this.isVpcVirtualRouterForAtLeastOneService">
+        <a-form-item :label="$t('label.redundantrouter')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.sourceNatServiceChecked && !this.isVpcVirtualRouterForAtLeastOneService">
           <a-switch v-decorator="['redundantroutercapability', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('sourcenattype')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.sourceNatServiceChecked">
+        <a-form-item :label="$t('label.sourcenattype')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.sourceNatServiceChecked">
           <a-radio-group
             v-decorator="['sourcenattype', {
               initialValue: 'peraccount'
             }]"
             buttonStyle="solid">
             <a-radio-button value="peraccount">
-              {{ $t('peraccount') }}
+              {{ $t('label.peraccount') }}
             </a-radio-button>
             <a-radio-button value="perzone">
-              {{ $t('perzone') }}
+              {{ $t('label.perzone') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('service.Lb.elasticLb')" v-if="this.guestType == 'shared' && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.lb.elasticlb')" v-if="this.guestType == 'shared' && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
           <a-switch v-decorator="['elasticlb', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('service.Lb.inlineMode')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.firewallServiceChecked && this.lbServiceProvider === 'F5BigIp' && this.firewallServiceProvider === 'JuniperSRX'">
+        <a-form-item :label="$t('label.service.lb.inlinemode')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.firewallServiceChecked && this.lbServiceProvider === 'F5BigIp' && this.firewallServiceProvider === 'JuniperSRX'">
           <a-radio-group
             v-decorator="['inlinemode', {
               initialValue: 'false'
             }]"
             buttonStyle="solid">
             <a-radio-button value="false">
-              {{ $t('side by side') }}
+              {{ $t('label.side.by.side') }}
             </a-radio-button>
             <a-radio-button value="true">
-              {{ $t('inline') }}
+              {{ $t('label.inline') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('service.Lb.netscaler.service.packages')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.lb.netscaler.service.packages')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
           <a-select
             v-decorator="['netscalerservicepackages', {}]"
             showSearch
@@ -230,83 +230,83 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="registeredServicePackageLoading"
-            :placeholder="this.$t('netscaler.service.packages')">
+            :placeholder="this.$t('label.netscaler.service.packages')">
             <a-select-option v-for="(opt, optIndex) in this.registeredServicePackages" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('service.Lb.netscaler.service.packages.description')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.lb.netscaler.service.packages.description')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
           <a-input
             v-decorator="['netscalerservicepackagesdescription', {}]"
-            :placeholder="this.$t('netscaler.service.packages.description')"/>
+            :placeholder="this.$t('label.netscaler.service.packages.description')"/>
         </a-form-item>
-        <a-form-item :label="$t('service.Lb.lbIsolation')" v-show="false">
+        <a-form-item :label="$t('label.service.lb.lbisolation')" v-show="false">
           <a-radio-group
             v-decorator="['isolation', {
               initialValue: 'dedicated'
             }]"
             buttonStyle="solid">
             <a-radio-button value="dedicated">
-              {{ $t('Dedicated') }}
+              {{ $t('label.dedicated') }}
             </a-radio-button>
             <a-radio-button value="shared">
-              {{ $t('Shared') }}
+              {{ $t('label.shared') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('service.StaticNat.elasticIp')" v-if="this.guestType == 'shared' && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.staticnat.elasticip')" v-if="this.guestType == 'shared' && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
           <a-switch v-decorator="['elasticip', {initialValue: this.isElasticIp}]" :defaultChecked="this.isElasticIp" @change="val => { this.isElasticIp = val }" />
         </a-form-item>
-        <a-form-item :label="$t('service.StaticNat.associatePublicIP')" v-if="this.isElasticIp && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.staticnat.associatepublicip')" v-if="this.isElasticIp && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
           <a-switch v-decorator="['associatepublicip', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('service.Connectivity.supportsstrechedl2subnet')" v-if="this.connectivityServiceChecked">
+        <a-form-item :label="$t('label.service.connectivity.supportsstrechedl2subnet')" v-if="this.connectivityServiceChecked">
           <a-switch v-decorator="['supportsstrechedl2subnet', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('service.Connectivity.supportspublicaccess')" v-show="false">
+        <a-form-item :label="$t('label.service.connectivity.supportspublicaccess')" v-show="false">
           <a-switch v-decorator="['supportspublicaccess', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('conservemode')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
+        <a-form-item :label="$t('label.conservemode')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
           <a-switch v-decorator="['conservemode', {initialValue: true}]" :defaultChecked="true" />
         </a-form-item>
-        <a-form-item :label="$t('tags')">
+        <a-form-item :label="$t('label.tags')">
           <a-input
             v-decorator="['tags', {}]"
-            :placeholder="this.$t('networktags')"/>
+            :placeholder="this.$t('label.networktags')"/>
         </a-form-item>
-        <a-form-item :label="$t('availability')" v-if="this.requiredNetworkOfferingExists && this.guestType === 'isolated' && this.sourceNatServiceChecked">
+        <a-form-item :label="$t('label.availability')" v-if="this.requiredNetworkOfferingExists && this.guestType === 'isolated' && this.sourceNatServiceChecked">
           <a-radio-group
             v-decorator="['availability', {
               initialValue: 'optional'
             }]"
             buttonStyle="solid">
             <a-radio-button value="optional">
-              {{ $t('optional') }}
+              {{ $t('label.optional') }}
             </a-radio-button>
             <a-radio-button value="required">
-              {{ $t('required') }}
+              {{ $t('label.required') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('egressdefaultpolicy')" v-if="this.firewallServiceChecked">
+        <a-form-item :label="$t('label.egressdefaultpolicy')" v-if="this.firewallServiceChecked">
           <a-radio-group
             v-decorator="['egressdefaultpolicy', {
               initialValue: 'allow'
             }]"
             buttonStyle="solid">
             <a-radio-button value="allow">
-              {{ $t('Allow') }}
+              {{ $t('label.allow') }}
             </a-radio-button>
             <a-radio-button value="deny">
-              {{ $t('Deny') }}
+              {{ $t('label.deny') }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
+        <a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
           <a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :defaultChecked="this.isPublic" @change="val => { this.isPublic = val }" />
         </a-form-item>
-        <a-form-item :label="$t('domainid')" v-if="!this.isPublic">
+        <a-form-item :label="$t('label.domainid')" v-if="!this.isPublic">
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
@@ -323,13 +323,13 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('domain')">
+            :placeholder="this.$t('label.domain')">
             <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('zoneid')">
+        <a-form-item :label="$t('label.zoneid')">
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -351,7 +351,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="this.$t('zone')">
+            :placeholder="this.$t('label.zone')">
             <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -359,8 +359,8 @@
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
@@ -487,31 +487,31 @@ export default {
           // Sanitize names
           // switch (serviceName) {
           //   case 'Vpn':
-          //     serviceDisplayName = this.$t('vpn')
+          //     serviceDisplayName = this.$t('label.vpn')
           //     break
           //   case 'Dhcp':
-          //     serviceDisplayName = this.$t('dhcp')
+          //     serviceDisplayName = this.$t('label.dhcp')
           //     break
           //   case 'Dns':
-          //     serviceDisplayName = this.$t('dns')
+          //     serviceDisplayName = this.$t('label.dns')
           //     break
           //   case 'Lb':
-          //     serviceDisplayName = this.$t('load.balancer')
+          //     serviceDisplayName = this.$t('label.load.balancer')
           //     break
           //   case 'SourceNat':
-          //     serviceDisplayName = this.$t('source.nat')
+          //     serviceDisplayName = this.$t('label.source.nat')
           //     break
           //   case 'StaticNat':
-          //     serviceDisplayName = this.$t('static.nat')
+          //     serviceDisplayName = this.$t('label.static.nat')
           //     break
           //   case 'PortForwarding':
-          //     serviceDisplayName = this.$t('port.forwarding')
+          //     serviceDisplayName = this.$t('label.port.forwarding')
           //     break
           //   case 'UserData':
-          //     serviceDisplayName = this.$t('user.data')
+          //     serviceDisplayName = this.$t('label.user.data')
           //     break
           //   case 'Connectivity':
-          //     serviceDisplayName = this.$t('virtual.networking')
+          //     serviceDisplayName = this.$t('label.virtual.networking')
           //     break
           //   default:
           //     serviceDisplayName = serviceName
diff --git a/ui/src/views/offering/AddVpcOffering.vue b/ui/src/views/offering/AddVpcOffering.vue
index 25867c85d7a..8719c88e5e9 100644
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@@ -22,21 +22,21 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: 'Please enter name' }]
             }]"
-            :placeholder="this.$t('Name')"/>
+            :placeholder="this.$t('label.name')"/>
         </a-form-item>
-        <a-form-item :label="$t('displaytext')">
+        <a-form-item :label="$t('label.displaytext')">
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: 'Please enter description' }]
             }]"
-            :placeholder="this.$t('displaytext')"/>
+            :placeholder="this.$t('label.displaytext')"/>
         </a-form-item>
-        <a-form-item :label="$t('supportedservices')">
+        <a-form-item :label="$t('label.supportedservices')">
           <div class="supported-services-container" scroll-to="last-child">
             <a-list itemLayout="horizontal" :dataSource="this.supportedServices">
               <a-list-item slot="renderItem" slot-scope="item">
@@ -52,19 +52,19 @@
             </a-list>
           </div>
         </a-form-item>
-        <a-form-item :label="$t('regionlevelvpc')" v-if="this.connectivityServiceChecked">
+        <a-form-item :label="$t('label.regionlevelvpc')" v-if="this.connectivityServiceChecked">
           <a-switch v-decorator="['regionlevelvpc', {initialValue: true}]" defaultChecked />
         </a-form-item>
-        <a-form-item :label="$t('distributedrouter')" v-if="this.connectivityServiceChecked">
+        <a-form-item :label="$t('label.distributedrouter')" v-if="this.connectivityServiceChecked">
           <a-switch v-decorator="['distributedrouter', {initialValue: true}]" defaultChecked />
         </a-form-item>
-        <a-form-item :label="$t('redundantrouter')" v-if="this.sourceNatServiceChecked">
+        <a-form-item :label="$t('label.redundantrouter')" v-if="this.sourceNatServiceChecked">
           <a-switch v-decorator="['redundantrouter', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('ispublic')" v-if="this.isAdmin()">
+        <a-form-item :label="$t('label.ispublic')" v-if="this.isAdmin()">
           <a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :defaultChecked="this.isPublic" @change="val => { this.isPublic = val }" />
         </a-form-item>
-        <a-form-item :label="$t('domainid')" v-if="!this.isPublic">
+        <a-form-item :label="$t('label.domainid')" v-if="!this.isPublic">
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
@@ -81,13 +81,13 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('domain')">
+            :placeholder="this.$t('label.domain')">
             <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('zoneid')">
+        <a-form-item :label="$t('label.zoneid')">
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -109,7 +109,7 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="this.$t('zone')">
+            :placeholder="this.$t('label.zone')">
             <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -117,8 +117,8 @@
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
diff --git a/ui/src/views/offering/ImportBackupOffering.vue b/ui/src/views/offering/ImportBackupOffering.vue
index f211e723a68..f25fcdd7bd4 100644
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@@ -21,19 +21,19 @@
       layout="vertical"
       :form="form"
       @submit="handleSubmit">
-      <a-form-item :label="$t('name')">
+      <a-form-item :label="$t('label.name')">
         <a-input
           v-decorator="['name', {
             rules: [{ required: true, message: 'Please enter input' }]
           }]"/>
       </a-form-item>
-      <a-form-item :label="$t('description')">
+      <a-form-item :label="$t('label.description')">
         <a-input
           v-decorator="['description', {
             rules: [{ required: true, message: 'Please enter input' }]
           }]"/>
       </a-form-item>
-      <a-form-item :label="$t('zoneid')">
+      <a-form-item :label="$t('label.zoneid')">
         <a-select
           showSearch
           allowClear
@@ -47,7 +47,7 @@
           </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item :label="$t('externalid')">
+      <a-form-item :label="$t('label.externalid')">
         <a-select
           allowClear
           v-decorator="['externalid'] "
@@ -57,14 +57,14 @@
           </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item :label="$t('allowuserdrivenbackups')">
+      <a-form-item :label="$t('label.allowuserdrivenbackups')">
         <a-switch
           v-decorator="['allowuserdrivenbackups']"
           :default-checked="true"/>
       </a-form-item>
       <div :span="24" class="action-button">
-        <a-button :loading="loading" @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        <a-button :loading="loading" @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
diff --git a/ui/src/views/offering/UpdateOfferingAccess.vue b/ui/src/views/offering/UpdateOfferingAccess.vue
index 6d80a16397f..7f3c43639f5 100644
--- a/ui/src/views/offering/UpdateOfferingAccess.vue
+++ b/ui/src/views/offering/UpdateOfferingAccess.vue
@@ -23,11 +23,11 @@
         @submit="handleSubmit"
         layout="vertical">
 
-        <a-form-item :label="$t('ispublic')" v-show="this.isAdmin()">
+        <a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
           <a-switch v-decorator="['ispublic', { initialValue: this.offeringIsPublic }]" :checked="this.offeringIsPublic" @change="val => { this.offeringIsPublic = val }" />
         </a-form-item>
 
-        <a-form-item :label="$t('domainid')" v-if="!this.offeringIsPublic">
+        <a-form-item :label="$t('label.domainid')" v-if="!this.offeringIsPublic">
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
@@ -52,7 +52,7 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item :label="$t('zoneid')">
+        <a-form-item :label="$t('label.zoneid')">
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -82,8 +82,8 @@
         </a-form-item>
 
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
 
       </a-form>
diff --git a/ui/src/views/project/AccountsTab.vue b/ui/src/views/project/AccountsTab.vue
index 5b80cad11fc..8f48f24ceb0 100644
--- a/ui/src/views/project/AccountsTab.vue
+++ b/ui/src/views/project/AccountsTab.vue
@@ -88,18 +88,18 @@ export default {
   created () {
     this.columns = [
       {
-        title: this.$t('account'),
+        title: this.$t('label.account'),
         dataIndex: 'account',
         width: '35%',
         scopedSlots: { customRender: 'account' }
       },
       {
-        title: this.$t('role'),
+        title: this.$t('label.role'),
         dataIndex: 'role',
         scopedSlots: { customRender: 'role' }
       },
       {
-        title: this.$t('action'),
+        title: this.$t('label.action'),
         dataIndex: 'action',
         fixed: 'right',
         width: 100,
@@ -182,8 +182,8 @@ export default {
     },
     onShowConfirmDelete (record) {
       const self = this
-      let title = this.$t('deleteconfirm')
-      title = title.replace('{name}', this.$t('account'))
+      let title = this.$t('label.deleteconfirm')
+      title = title.replace('{name}', this.$t('label.account'))
 
       this.$confirm({
         title: title,
diff --git a/ui/src/views/project/InvitationTokenTemplate.vue b/ui/src/views/project/InvitationTokenTemplate.vue
index ededf58a96d..75a10846f64 100644
--- a/ui/src/views/project/InvitationTokenTemplate.vue
+++ b/ui/src/views/project/InvitationTokenTemplate.vue
@@ -22,26 +22,26 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('projectid')">
+        <a-form-item :label="$t('label.projectid')">
           <a-input
             v-decorator="['projectid', {
               rules: [{ required: true, message: 'Please enter input' }]
             }]"
-            :placeholder="$t('project.projectid.description')"
+            :placeholder="$t('label.project.projectid.description')"
           />
         </a-form-item>
-        <a-form-item :label="$t('token')">
+        <a-form-item :label="$t('label.token')">
           <a-input
             v-decorator="['token', {
               rules: [{ required: true, message: 'Please enter input' }]
             }]"
-            :placeholder="$t('project.token.description')"
+            :placeholder="$t('label.project.token.description')"
           />
         </a-form-item>
         <div class="card-footer">
           <!-- ToDo extract as component -->
-          <a-button @click="() => $emit('close-action')">{{ this.$t('cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="() => $emit('close-action')">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -71,7 +71,7 @@ export default {
         }
 
         const title = this.$t('label.accept.project.invitation')
-        const description = this.$t('projectid') + ' ' + values.projectid
+        const description = this.$t('label.projectid') + ' ' + values.projectid
         const loading = this.$message.loading(title + 'in progress for ' + description, 0)
 
         this.loading = true
diff --git a/ui/src/views/project/InvitationsTemplate.vue b/ui/src/views/project/InvitationsTemplate.vue
index 0eb6c297db3..21b246eae82 100644
--- a/ui/src/views/project/InvitationsTemplate.vue
+++ b/ui/src/views/project/InvitationsTemplate.vue
@@ -107,38 +107,38 @@ export default {
   created () {
     this.columns = [
       {
-        title: this.$t('project'),
+        title: this.$t('label.project'),
         dataIndex: 'project',
         scopedSlots: { customRender: 'project' }
       },
       {
-        title: this.$t('domain'),
+        title: this.$t('label.domain'),
         dataIndex: 'domain',
         scopedSlots: { customRender: 'domain' }
       },
       {
-        title: this.$t('state'),
+        title: this.$t('label.state'),
         dataIndex: 'state',
         width: 130,
         scopedSlots: { customRender: 'state' },
         filters: [
           {
-            text: this.$t('Pending'),
+            text: this.$t('label.pending'),
             value: 'Pending'
           },
           {
-            text: this.$t('Completed'),
+            text: this.$t('label.completed'),
             value: 'Completed'
           },
           {
-            text: this.$t('Declined'),
+            text: this.$t('label.declined'),
             value: 'Declined'
           }
         ],
         filterMultiple: false
       },
       {
-        title: this.$t('action'),
+        title: this.$t('label.action'),
         dataIndex: 'action',
         width: 80,
         scopedSlots: { customRender: 'action' }
@@ -196,7 +196,7 @@ export default {
     },
     onShowConfirmAcceptInvitation (record) {
       const self = this
-      const title = this.$t('confirmacceptinvitation')
+      const title = this.$t('label.confirmacceptinvitation')
 
       this.$confirm({
         title: title,
@@ -241,7 +241,7 @@ export default {
     },
     onShowConfirmRevokeInvitation (record) {
       const self = this
-      const title = this.$t('confirmdeclineinvitation')
+      const title = this.$t('label.confirmdeclineinvitation')
 
       this.$confirm({
         title: title,
diff --git a/ui/src/views/storage/CreateVolume.vue b/ui/src/views/storage/CreateVolume.vue
index 62a3503eb25..394a48666b8 100644
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@@ -18,14 +18,14 @@
 <template>
   <a-spin :spinning="loading">
     <a-form class="form" :form="form" @submit="handleSubmit" layout="vertical">
-      <a-form-item :label="$t('name')">
+      <a-form-item :label="$t('label.name')">
         <a-input
           v-decorator="['name', {
             rules: [{ required: true, message: 'Please enter volume name' }]
           }]"
-          :placeholder="$t('volumename')"/>
+          :placeholder="$t('label.volumename')"/>
       </a-form-item>
-      <a-form-item :label="$t('zoneid')">
+      <a-form-item :label="$t('label.zoneid')">
         <a-select
           v-decorator="['zoneid', {
             initialValue: selectedZoneId,
@@ -40,7 +40,7 @@
           </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item :label="$t('diskoffering')">
+      <a-form-item :label="$t('label.diskoffering')">
         <a-select
           v-decorator="['diskofferingid', {
             initialValue: selectedDiskOfferingId,
@@ -57,16 +57,16 @@
         </a-select>
       </a-form-item>
       <span v-if="customDiskOffering">
-        <a-form-item :label="$t('Size (GB)')">
+        <a-form-item :label="$t('label.sizegb')">
           <a-input
             v-decorator="['size', {
               rules: [{ required: true, message: 'Please enter custom disk size' }]}]"
-            :placeholder="$t('Enter Size in GB')"/>
+            :placeholder="$t('label.enter.size.in.gb')"/>
         </a-form-item>
       </span>
       <div :span="24" class="action-button">
-        <a-button @click="closeModal">{{ $t('cancel') }}</a-button>
-        <a-button type="primary" @click="handleSubmit">{{ $t('ok') }}</a-button>
+        <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+        <a-button type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
       </div>
     </a-form>
   </a-spin>
diff --git a/ui/src/views/storage/FormSchedule.vue b/ui/src/views/storage/FormSchedule.vue
index 0f2ae8b41ad..f8f7cd3f589 100644
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@@ -28,7 +28,7 @@
           @submit="handleSubmit">
           <a-row :gutter="12">
             <a-col :md="24" :lg="24">
-              <a-form-item :label="$t('intervaltype')">
+              <a-form-item :label="$t('label.intervaltype')">
                 <a-radio-group
                   v-decorator="['intervaltype', {
                     initialValue: intervalType
@@ -36,22 +36,22 @@
                   buttonStyle="solid"
                   @change="handleChangeIntervalType">
                   <a-radio-button value="hourly" :disabled="handleVisibleInterval(0)">
-                    {{ $t('HOURLY') }}
+                    {{ $t('label.hourly') }}
                   </a-radio-button>
                   <a-radio-button value="daily" :disabled="handleVisibleInterval(1)">
-                    {{ $t('DAILY') }}
+                    {{ $t('label.daily') }}
                   </a-radio-button>
                   <a-radio-button value="weekly" :disabled="handleVisibleInterval(2)">
-                    {{ $t('WEEKLY') }}
+                    {{ $t('label.weekly') }}
                   </a-radio-button>
                   <a-radio-button value="monthly" :disabled="handleVisibleInterval(3)">
-                    {{ $t('MONTHLY') }}
+                    {{ $t('label.monthly') }}
                   </a-radio-button>
                 </a-radio-group>
               </a-form-item>
             </a-col>
             <a-col :md="24" :lg="12" v-if="intervalType==='hourly'">
-              <a-form-item :label="$t('time')">
+              <a-form-item :label="$t('label.time')">
                 <a-tooltip
                   placement="right"
                   :title="$t('label.minute.past.hour')">
@@ -68,7 +68,7 @@
             <a-col :md="24" :lg="12" v-if="['daily', 'weekly', 'monthly'].includes(intervalType)">
               <a-form-item
                 class="custom-time-select"
-                :label="$t('time')">
+                :label="$t('label.time')">
                 <a-time-picker
                   use12Hours
                   format="h:mm A"
@@ -112,10 +112,10 @@
               </a-form-item>
             </a-col>
             <a-col :md="24" :lg="12">
-              <a-form-item :label="$t('keep')">
+              <a-form-item :label="$t('label.keep')">
                 <a-tooltip
                   placement="right"
-                  :title="$t('Snapshots')">
+                  :title="$t('label.snapshots')">
                   <a-input-number
                     style="width: 100%"
                     v-decorator="['maxsnaps', {
@@ -127,7 +127,7 @@
               </a-form-item>
             </a-col>
             <a-col :md="24" :lg="24">
-              <a-form-item :label="$t('timezone')">
+              <a-form-item :label="$t('label.timezone')">
                 <a-select
                   showSearch
                   v-decorator="['timezone', {
@@ -145,7 +145,7 @@
             </a-col>
           </a-row>
           <a-divider/>
-          <div class="tagsTitle">{{ $t('tags') }}</div>
+          <div class="tagsTitle">{{ $t('label.tags') }}</div>
           <div>
             <template v-for="(tag, index) in tags">
               <a-tag :key="index" :closable="true" :afterClose="() => handleDeleteTag(tag)">
@@ -178,14 +178,14 @@
             <a-button
               :loading="actionLoading"
               @click="closeAction">
-              {{ this.$t('Cancel') }}
+              {{ this.$t('label.cancel') }}
             </a-button>
             <a-button
               v-if="handleShowButton()"
               :loading="actionLoading"
               type="primary"
               @click="handleSubmit">
-              {{ this.$t('OK') }}
+              {{ this.$t('label.ok') }}
             </a-button>
           </div>
         </a-form>
@@ -258,7 +258,7 @@ export default {
         const dayName = this.listDayOfWeek[index]
         this.dayOfWeek.push({
           id: dayName,
-          name: this.$t(dayName)
+          name: 'label.' + this.$t(dayName)
         })
       }
     },
diff --git a/ui/src/views/storage/MigrateVolume.vue b/ui/src/views/storage/MigrateVolume.vue
index 1bd720f1dd1..aa61e4fa045 100644
--- a/ui/src/views/storage/MigrateVolume.vue
+++ b/ui/src/views/storage/MigrateVolume.vue
@@ -19,7 +19,7 @@
   <div class="migrate-volume-container">
 
     <div class="modal-form">
-      <p class="modal-form__label">{{ $t('storagePool') }}</p>
+      <p class="modal-form__label">{{ $t('label.storagepool') }}</p>
       <a-select v-model="selectedStoragePool" style="width: 100%;">
         <a-select-option v-for="(storagePool, index) in storagePools" :value="storagePool.id" :key="index">
           {{ storagePool.name }} <span v-if="resource.virtualmachineid">{{ storagePool.suitableformigration ? '(Suitable)' : '(Not Suitable)' }}</span>
@@ -27,12 +27,12 @@
       </a-select>
       <template v-if="this.resource.virtualmachineid">
         <p class="modal-form__label" @click="replaceDiskOffering = !replaceDiskOffering" style="cursor:pointer;">
-          {{ $t('useNewDiskOffering') }}
+          {{ $t('label.usenewdiskoffering') }}
         </p>
         <a-checkbox v-model="replaceDiskOffering" />
 
         <template v-if="replaceDiskOffering">
-          <p class="modal-form__label">{{ $t('newDiskOffering') }}</p>
+          <p class="modal-form__label">{{ $t('label.newdiskoffering') }}</p>
           <a-select v-model="selectedDiskOffering" style="width: 100%;">
             <a-select-option v-for="(diskOffering, index) in diskOfferings" :value="diskOffering.id" :key="index">
               {{ diskOffering.displaytext }}
@@ -47,10 +47,10 @@
 
     <div class="actions">
       <a-button @click="closeModal">
-        {{ $t('Cancel') }}
+        {{ $t('label.cancel') }}
       </a-button>
       <a-button type="primary" @click="submitMigrateVolume">
-        {{ $t('OK') }}
+        {{ $t('label.ok') }}
       </a-button>
     </div>
 
diff --git a/ui/src/views/storage/RecurringSnapshotVolume.vue b/ui/src/views/storage/RecurringSnapshotVolume.vue
index 29ce0140fa6..113cc351849 100644
--- a/ui/src/views/storage/RecurringSnapshotVolume.vue
+++ b/ui/src/views/storage/RecurringSnapshotVolume.vue
@@ -18,7 +18,7 @@
 <template>
   <div class="snapshot-layout">
     <a-tabs defaultActiveKey="1" :animated="false">
-      <a-tab-pane :tab="$t('schedule')" key="1">
+      <a-tab-pane :tab="$t('label.schedule')" key="1">
         <FormSchedule
           :loading="loading"
           :resource="resource"
diff --git a/ui/src/views/storage/ResizeVolume.vue b/ui/src/views/storage/ResizeVolume.vue
index ee460b55047..4c67e36e6f7 100644
--- a/ui/src/views/storage/ResizeVolume.vue
+++ b/ui/src/views/storage/ResizeVolume.vue
@@ -18,13 +18,13 @@
 <template>
   <div class="form-layout">
     <a-form :form="form" layout="vertical">
-      <a-form-item :label="$t('diskoffering')" v-if="resource.type !== 'ROOT'">
+      <a-form-item :label="$t('label.diskoffering')" v-if="resource.type !== 'ROOT'">
         <a-select
           v-decorator="['diskofferingid', {
             initialValue: selectedDiskOfferingId,
             rules: [{ required: true, message: 'Please select an option' }]}]"
           :loading="loading"
-          :placeholder="$t('Offering Type')"
+          :placeholder="$t('label.offering.type')"
           @change="id => (customDiskOffering = offerings.filter(x => x.id === id)[0].iscustomized || false)"
         >
           <a-select-option
@@ -35,19 +35,19 @@
         </a-select>
       </a-form-item>
       <div v-if="customDiskOffering || resource.type === 'ROOT'">
-        <a-form-item :label="$t('Size (GB)')">
+        <a-form-item :label="$t('label.sizegb')">
           <a-input
             v-decorator="['size', {
               rules: [{ required: true, message: 'Please enter size in GB' }]}]"
-            :placeholder="$t('Enter Size')"/>
+            :placeholder="$t('label.enter.size')"/>
         </a-form-item>
       </div>
-      <a-form-item :label="$t('shrinkok')">
+      <a-form-item :label="$t('label.shrinkok')">
         <a-checkbox v-decorator="['shrinkok']" />
       </a-form-item>
       <div :span="24" class="action-button">
-        <a-button @click="closeModal">{{ $t('cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('ok') }}</a-button>
+        <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
diff --git a/ui/src/views/storage/RestoreAttachBackupVolume.vue b/ui/src/views/storage/RestoreAttachBackupVolume.vue
index a158f6ff532..9db6f878e7c 100644
--- a/ui/src/views/storage/RestoreAttachBackupVolume.vue
+++ b/ui/src/views/storage/RestoreAttachBackupVolume.vue
@@ -18,7 +18,7 @@
 <template>
   <div class="form-layout">
     <a-form layout="vertical" :form="form">
-      <a-form-item :label="$t('volume')">
+      <a-form-item :label="$t('label.volume')">
         <a-select
           allowClear
           v-decorator="['volumeid', {
@@ -32,7 +32,7 @@
           </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item :label="$t('vm')">
+      <a-form-item :label="$t('label.vm')">
         <a-select
           showSearch
           allowClear
@@ -48,8 +48,8 @@
         </a-select>
       </a-form-item>
       <div :span="24" class="action-button">
-        <a-button :loading="loading || actionLoading" @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-        <a-button :loading="loading || actionLoading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        <a-button :loading="loading || actionLoading" @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+        <a-button :loading="loading || actionLoading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
diff --git a/ui/src/views/storage/ScheduledSnapshots.vue b/ui/src/views/storage/ScheduledSnapshots.vue
index 82ce4b04fbf..2a206c7421c 100644
--- a/ui/src/views/storage/ScheduledSnapshots.vue
+++ b/ui/src/views/storage/ScheduledSnapshots.vue
@@ -115,7 +115,7 @@ export default {
         scopedSlots: { customRender: 'icon' }
       },
       {
-        title: this.$t('time'),
+        title: this.$t('label.time'),
         dataIndex: 'schedule',
         scopedSlots: { customRender: 'time' }
       },
@@ -125,22 +125,22 @@ export default {
         scopedSlots: { customRender: 'interval' }
       },
       {
-        title: this.$t('timezone'),
+        title: this.$t('label.timezone'),
         dataIndex: 'timezone',
         scopedSlots: { customRender: 'timezone' }
       },
       {
-        title: this.$t('keep'),
+        title: this.$t('label.keep'),
         dataIndex: 'maxsnaps',
         scopedSlots: { customRender: 'keep' }
       },
       {
-        title: this.$t('tags'),
+        title: this.$t('label.tags'),
         dataIndex: 'tags',
         scopedSlots: { customRender: 'tags' }
       },
       {
-        title: this.$t('action'),
+        title: this.$t('label.action'),
         dataIndex: 'action',
         width: 50,
         scopedSlots: { customRender: 'action' }
diff --git a/ui/src/views/storage/TakeSnapshot.vue b/ui/src/views/storage/TakeSnapshot.vue
index e59d26cb3ee..32473035c2d 100644
--- a/ui/src/views/storage/TakeSnapshot.vue
+++ b/ui/src/views/storage/TakeSnapshot.vue
@@ -28,25 +28,25 @@
         @submit="handleSubmit">
         <a-row :gutter="12">
           <a-col :md="24" :lg="24">
-            <a-form-item :label="$t('name')">
+            <a-form-item :label="$t('label.name')">
               <a-input
                 v-decorator="['name']"
                 :placeholder="apiParams.name.description" />
             </a-form-item>
           </a-col>
           <a-col :md="24" :lg="24">
-            <a-form-item :label="$t('asyncbackup')">
+            <a-form-item :label="$t('label.asyncbackup')">
               <a-switch v-decorator="['asyncbackup']" />
             </a-form-item>
           </a-col>
           <a-col :md="24" :lg="24" v-if="quiescevm">
-            <a-form-item :label="$t('quiescevm')">
+            <a-form-item :label="$t('label.quiescevm')">
               <a-switch v-decorator="['quiescevm']" />
             </a-form-item>
           </a-col>
         </a-row>
         <a-divider/>
-        <div class="tagsTitle">{{ $t('tags') }}</div>
+        <div class="tagsTitle">{{ $t('label.tags') }}</div>
         <div>
           <template v-for="(tag, index) in tags">
             <a-tag :key="index" :closable="true">
@@ -79,14 +79,14 @@
           <a-button
             :loading="actionLoading"
             @click="closeAction">
-            {{ this.$t('Cancel') }}
+            {{ this.$t('label.cancel') }}
           </a-button>
           <a-button
             v-if="handleShowButton()"
             :loading="actionLoading"
             type="primary"
             @click="handleSubmit">
-            {{ this.$t('OK') }}
+            {{ this.$t('label.ok') }}
           </a-button>
         </div>
       </a-form>
@@ -162,7 +162,7 @@ export default {
 
         this.actionLoading = true
         const title = this.$t('label.action.take.snapshot')
-        const description = this.$t('volume') + ' ' + this.resource.id
+        const description = this.$t('label.volume') + ' ' + this.resource.id
         api('createSnapshot', params).then(json => {
           const jobId = json.createsnapshotresponse.jobid
           if (jobId) {
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index 1b22789d602..b464f2debcd 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -27,7 +27,7 @@
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
-        <a-form-item :label="$t('templateFileUpload')">
+        <a-form-item :label="$t('label.templatefileupload')">
           <a-upload-dragger
             :multiple="false"
             :fileList="fileList"
@@ -44,14 +44,14 @@
             </p>
           </a-upload-dragger>
         </a-form-item>
-        <a-form-item :label="$t('name')">
+        <a-form-item :label="$t('label.name')">
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: 'Please enter Volume name' }]
             }]"
-            :placeholder="$t('volumename')" />
+            :placeholder="$t('label.volumename')" />
         </a-form-item>
-        <a-form-item :label="$t('zone')">
+        <a-form-item :label="$t('label.zone')">
           <a-select
             v-decorator="['zoneId', {
               initialValue: zoneSelected,
@@ -67,7 +67,7 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('format')">
+        <a-form-item :label="$t('label.format')">
           <a-select
             v-decorator="['format', {
               initialValue: formats[0],
@@ -83,15 +83,15 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('volumeChecksum')">
+        <a-form-item :label="$t('label.volumechecksum')">
           <a-input
             v-decorator="['checksum']"
             placeholder="Use the hash that you created at the start of the volume upload procedure"
           />
         </a-form-item>
         <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>