diff --git a/ui/scripts/network.js b/ui/scripts/network.js
index 3a5df98421e..c5492570d43 100644
--- a/ui/scripts/network.js
+++ b/ui/scripts/network.js
@@ -174,7 +174,7 @@
           }
         });
 
-        var sectionsToShow = ['networks', 'vpc'];
+        var sectionsToShow = ['networks', 'vpc', 'vpnCustomerGateway'];
         if(havingSecurityGroupNetwork == true)
           sectionsToShow.push('securityGroups');
 
@@ -3763,7 +3763,76 @@
             }
           }								
         }
-      }			
+      },	
+      
+			vpnCustomerGateway: {
+        type: 'select',
+        title: 'VPN Customer Gateway',
+        listView: {
+          id: 'vpnCustomerGateway',
+          label: 'VPN Customer Gateway',
+          fields: {
+            gateway: { label: 'label.gateway' },
+            cidrlist: { label: 'CIDR list' },
+						ipsecpsk: { label: 'IPsec Preshared-Key' }
+          },
+          dataProvider: function(args) {					  
+						var array1 = [];  
+						if(args.filterBy != null) {          
+							if(args.filterBy.search != null && args.filterBy.search.by != null && args.filterBy.search.value != null) {
+								switch(args.filterBy.search.by) {
+								case "name":
+									if(args.filterBy.search.value.length > 0)
+										array1.push("&keyword=" + args.filterBy.search.value);
+									break;
+								}
+							}
+						}
+						
+            $.ajax({
+              url: createURL("listVpnCustomerGateways&listAll=true&page=" + args.page + "&pagesize=" + pageSize + array1.join("")),
+              dataType: "json",
+              async: true,
+              success: function(json) {							  
+                var items = json.listvpncustomergatewaysresponse.vpncustomergateway;
+                args.response.success({data: items});
+              }
+            });
+          },
+					detailView: {
+            name: 'label.details',
+            tabs: {
+              details: {
+                title: 'label.details',
+                fields: [
+                  {
+                    gateway: { label: 'label.gateway' }
+									},
+									{
+										cidrlist: { label: 'CIDR list' },
+										ipsecpsk: { label: 'IPsec Preshared-Key' }, 										
+										id: { label: 'label.id' },										
+										domain: { label: 'label.domain' },
+										account: { label: 'label.account' }												
+                  }
+                ],
+                dataProvider: function(args) {		
+									$.ajax({
+										url: createURL("listVpnCustomerGateways"),
+										data: {
+										  id: args.context.vpnCustomerGateway[0].id
+										},										
+										success: function(json) {
+											var item = json.listvpncustomergatewaysresponse.vpncustomergateway[0];
+											args.response.success({data: item});
+										}
+									});									
+								}
+              }
+            }
+          }
+        }
+      }
     }
   };
 	
diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js
index ff575407a55..4f488933dc1 100644
--- a/ui/scripts/vpc.js
+++ b/ui/scripts/vpc.js
@@ -669,18 +669,18 @@
 			id: 'siteToSiteVpn',
 			sectionSelect: {
 				preFilter: function(args) {
-					return ["vpnCustomerGateway", "vpnConnection"];			
+					return ["vpnGateway", "vpnConnection"];			
           //return ["vpnConnection"];							
 				},
 				label: 'label.select-view'
 			},
 			sections: {	
 				
-				vpnCustomerGateway: {
+				vpnGateway: {
 					type: 'select',
-					title: 'Customer Gateway',
+					title: 'VPN Gateway',
 					listView: {
-						id: 'vpnCustomerGateway',
+						id: 'vpnGateway',
 						label: 'Customer Gateway',
 						fields: {
 							publicip: { label: 'label.ip.address' },				
@@ -721,16 +721,16 @@
 											publicip: { label: 'label.ip.address' }
                     },
                     {											
-											account: { label: 'label.account' },
+											id: { label: 'label.id' },
 											domain: { label: 'label.domain' },
-											id: { label: 'label.id' }
+											account: { label: 'label.account' }											
 										}
 									],
 									dataProvider: function(args) {		
 										$.ajax({
 											url: createURL("listVpnGateways"),
 											data: {
-											  id: args.context.vpnCustomerGateway[0].id
+											  id: args.context.vpnGateway[0].id
 											},
 											async: true,
 											success: function(json) {											 
@@ -744,11 +744,7 @@
 						}
 					}
 				},
-				
-				
-			  //???
-			
-				vpnConnection: {					
+				vpnConnection: {	//???				
 					type: 'select',
 					title: 'VPN Connection',
 					listView: {