diff --git a/src/www/vpn_openvpn_export_shared.php b/src/www/vpn_openvpn_export_shared.php
index e2ed59e05..962462293 100644
--- a/src/www/vpn_openvpn_export_shared.php
+++ b/src/www/vpn_openvpn_export_shared.php
@@ -36,138 +36,122 @@ require_once("openvpn-client-export.inc");
 
 $pgtitle = array("OpenVPN", "Client Export Utility");
 
-if (!isset($config['openvpn']['openvpn-server'])) {
-    $config['openvpn']['openvpn-server'] = array();
-}
-
-$a_server = $config['openvpn']['openvpn-server'];
-
 $ras_server = array();
-foreach ($a_server as $sindex => $server) {
-    if (isset($server['disable'])) {
-        continue;
-    }
-    $ras_user = array();
-    if ($server['mode'] != "p2p_shared_key") {
-        continue;
-    }
+if (isset($config['openvpn']['openvpn-server'])) {
+  foreach ($config['openvpn']['openvpn-server'] as $sindex => $server) {
+      if (isset($server['disable'])) {
+          continue;
+      }
+      $ras_user = array();
+      if ($server['mode'] != "p2p_shared_key") {
+          continue;
+      }
 
-    $ras_serverent = array();
-    $prot = $server['protocol'];
-    $port = $server['local_port'];
-    if ($server['description']) {
-        $name = "{$server['description']} {$prot}:{$port}";
-    } else {
-        $name = "Shared Key Server {$prot}:{$port}";
-    }
-    $ras_serverent['index'] = $sindex;
-    $ras_serverent['name'] = $name;
-    $ras_serverent['mode'] = $server['mode'];
-    $ras_server[] = $ras_serverent;
+      $ras_serverent = array();
+      $prot = $server['protocol'];
+      $port = $server['local_port'];
+      if ($server['description']) {
+          $name = "{$server['description']} {$prot}:{$port}";
+      } else {
+          $name = "Shared Key Server {$prot}:{$port}";
+      }
+      $ras_serverent['index'] = $sindex;
+      $ras_serverent['name'] = $name;
+      $ras_serverent['mode'] = $server['mode'];
+      $ras_server[] = $ras_serverent;
+  }
 }
 
-$id = $_GET['id'];
-if (isset($_POST['id'])) {
-    $id = $_POST['id'];
-}
-
-$act = $_GET['act'];
-if (isset($_POST['act'])) {
-    $act = $_POST['act'];
-}
-
-$error = false;
-
-if (($act == "skconf") || ($act == "skzipconf")) {
-    $srvid = $_GET['srvid'];
-    if (($srvid === false) || ($config['openvpn']['openvpn-server'][$srvid]['mode'] != "p2p_shared_key")) {
-        redirectHeader("vpn_openvpn_export.php");
-        exit;
-    }
-
-    if (empty($_GET['useaddr'])) {
-        $error = true;
-        $input_errors[] = "You need to specify an IP or hostname.";
-    } else {
-        $useaddr = $_GET['useaddr'];
-    }
-
-    $proxy = "";
-    if (!empty($_GET['proxy_addr']) || !empty($_GET['proxy_port'])) {
-        $proxy = array();
-        if (empty($_GET['proxy_addr'])) {
-            $error = true;
-            $input_errors[] = "You need to specify an address for the proxy port.";
-        } else {
-            $proxy['ip'] = $_GET['proxy_addr'];
+if (isset($_GET['act'])) {
+    $input_errors = array();
+    $act = $_GET['act'];
+    if (($act == "skconf") || ($act == "skzipconf")) {
+        $srvid = isset($_GET['srvid']) ? $_GET['srvid'] : false;
+        if ( $srvid === false || !isset($config['openvpn']['openvpn-server'][$srvid]['mode']) ||
+              $config['openvpn']['openvpn-server'][$srvid]['mode'] != "p2p_shared_key") {
+                redirectHeader("vpn_openvpn_export.php");
+                exit;
         }
-        if (empty($_GET['proxy_port'])) {
-            $error = true;
-            $input_errors[] = "You need to specify a port for the proxy ip.";
+
+        if (empty($_GET['useaddr'])) {
+            $input_errors[] = "You need to specify an IP or hostname.";
         } else {
-            $proxy['port'] = $_GET['proxy_port'];
+            $useaddr = $_GET['useaddr'];
         }
-        $proxy['proxy_type'] = $_GET['proxy_type'];
-        $proxy['proxy_authtype'] = $_GET['proxy_authtype'];
-        if ($_GET['proxy_authtype'] != "none") {
-            if (empty($_GET['proxy_user'])) {
-                $error = true;
-                $input_errors[] = "You need to specify a username with the proxy config.";
+
+        $proxy = "";
+        if (!empty($_GET['proxy_addr']) || !empty($_GET['proxy_port'])) {
+            $proxy = array();
+            if (empty($_GET['proxy_addr'])) {
+                $input_errors[] = "You need to specify an address for the proxy port.";
             } else {
-                $proxy['user'] = $_GET['proxy_user'];
+                $proxy['ip'] = $_GET['proxy_addr'];
             }
-            if (!empty($_GET['proxy_user']) && empty($_GET['proxy_password'])) {
-                $error = true;
-                $input_errors[] = "You need to specify a password with the proxy user.";
+            if (empty($_GET['proxy_port'])) {
+                $input_errors[] = "You need to specify a port for the proxy ip.";
             } else {
-                $proxy['password'] = $_GET['proxy_password'];
+                $proxy['port'] = $_GET['proxy_port'];
+            }
+            $proxy['proxy_type'] = $_GET['proxy_type'];
+            $proxy['proxy_authtype'] = $_GET['proxy_authtype'];
+            if ($_GET['proxy_authtype'] != "none") {
+                if (empty($_GET['proxy_user'])) {
+                    $input_errors[] = "You need to specify a username with the proxy config.";
+                } else {
+                    $proxy['user'] = $_GET['proxy_user'];
+                }
+                if (!empty($_GET['proxy_user']) && empty($_GET['proxy_password'])) {
+                    $input_errors[] = "You need to specify a password with the proxy user.";
+                } else {
+                    $proxy['password'] = $_GET['proxy_password'];
+                }
             }
         }
-    }
 
-    $exp_name = openvpn_client_export_prefix($srvid);
-    if ($act == "skzipconf") {
-        $zipconf = true;
-    }
-    $exp_data = openvpn_client_export_sharedkey_config($srvid, $useaddr, $proxy, $zipconf);
-    if (!$exp_data) {
-        $input_errors[] = "Failed to export config files!";
-        $error = true;
-    }
-    if (!$error) {
-        if ($zipconf) {
-            $exp_name = urlencode($exp_data);
-            $exp_size = filesize("/tmp/{$exp_data}");
-        } else {
-            $exp_name = urlencode($exp_name."-config.ovpn");
-            $exp_size = strlen($exp_data);
+        $exp_name = openvpn_client_export_prefix($srvid);
+        if ($act == "skzipconf") {
+            $zipconf = true;
         }
-
-        header('Pragma: ');
-        header('Cache-Control: ');
-        header("Content-Type: application/octet-stream");
-        header("Content-Disposition: attachment; filename={$exp_name}");
-        header("Content-Length: $exp_size");
-        if ($zipconf) {
-            readfile("/tmp/{$exp_data}");
-        } else {
-            echo $exp_data;
+        $exp_data = openvpn_client_export_sharedkey_config($srvid, $useaddr, $proxy, $zipconf);
+        if (!$exp_data) {
+            $input_errors[] = "Failed to export config files!";
         }
+        if (count($input_errors) == 0) {
+            if ($zipconf) {
+                $exp_name = urlencode($exp_data);
+                $exp_size = filesize("/tmp/{$exp_data}");
+            } else {
+                $exp_name = urlencode($exp_name."-config.ovpn");
+                $exp_size = strlen($exp_data);
+            }
 
-        @unlink("/tmp/{$exp_data}");
-        exit;
+            header('Pragma: ');
+            header('Cache-Control: ');
+            header("Content-Type: application/octet-stream");
+            header("Content-Disposition: attachment; filename={$exp_name}");
+            header("Content-Length: $exp_size");
+            if ($zipconf) {
+                readfile("/tmp/{$exp_data}");
+            } else {
+                echo $exp_data;
+            }
+
+            @unlink("/tmp/{$exp_data}");
+            exit;
+        }
     }
 }
 
 include("head.inc");
-
 ?>
 
-<body link="#0000CC" vlink="#0000CC" alink="#0000CC">
+<body>
 <?php include("fbegin.inc"); ?>
 <script type="text/javascript">
 //<![CDATA[
-var viscosityAvailable = false;
+$( document ).ready(function() {
+  server_changed();
+});
 
 var servers = new Array();
 <?php	foreach ($ras_server as $sindex => $server) :
@@ -252,10 +236,10 @@ function download_begin(act) {
 }
 
 function server_changed() {
-
 	var table = document.getElementById("clients");
-	while (table.rows.length > 1 )
-		table.deleteRow(1);
+	while (table.rows.length > 1 ) {
+    table.deleteRow(1);
+  }
 
 	var index = document.getElementById("server").selectedIndex;
 
@@ -263,32 +247,38 @@ function server_changed() {
 		var row = table.insertRow(table.rows.length);
 		var cell0 = row.insertCell(0);
 		var cell1 = row.insertCell(1);
-		cell0.className = "listlr";
 		cell0.innerHTML = "Other Shared Key OS Client";
-		cell1.className = "listr";
-		cell1.innerHTML = "<a href='javascript:download_begin(\"skconf\")'>Configuration<\/a>";
-		cell1.innerHTML += "<br\/>";
-		cell1.innerHTML += "<a href='javascript:download_begin(\"skzipconf\")'>Configuration archive<\/a>";
+    cell1.innerHTML += "<div>";
+    cell1.innerHTML += "<button type='button' class='btn btn-primary btn-xs' onclick='download_begin(\"skconf\")'>Configuration</button>";
+    cell1.innerHTML += "&nbsp;";
+    cell1.innerHTML += "<button type='button' class='btn btn-primary btn-xs' onclick='download_begin(\"skzipconf\")'>Configuration archive</button>";
+    cell1.innerHTML += "</div>";
+
 	}
 }
 
 function useaddr_changed(obj) {
 
 	if (obj.value == "other")
-		$('HostName').show();
+		$('#HostName').show();
 	else
-		$('HostName').hide();
+		$('#HostName').hide();
 
 }
 
 function useproxy_changed(obj) {
 
-	if ((obj.id == "useproxy" && obj.checked) ||
-		(obj.id == "useproxypass" && (obj.value != 'none'))) {
-		$(obj.id + '_opts').show();
-	} else {
-		$(obj.id + '_opts').hide();
-	}
+  if ($('#useproxy').prop( "checked" ) ){
+      $('#useproxy_opts').show();
+  } else {
+      $('#useproxy_opts').hide();
+  }
+
+  if ($( "#useproxypass option:selected" ).text() != 'none') {
+      $('#useproxypass_opts').show();
+  } else {
+      $('#useproxypass_opts').hide();
+  }
 }
 //]]>
 </script>
@@ -300,199 +290,122 @@ if (isset($savemsg)) {
     print_info_box($savemsg);
 }
 ?>
-<table width="100%" border="0" cellpadding="0" cellspacing="0" summary="openvpn export shared">
-	<tr>
-		<td>
-			<?php
-                $tab_array = array();
-                $tab_array[] = array(gettext("Server"), false, "vpn_openvpn_server.php");
-                $tab_array[] = array(gettext("Client"), false, "vpn_openvpn_client.php");
-                $tab_array[] = array(gettext("Client Specific Overrides"), false, "vpn_openvpn_csc.php");
-                $tab_array[] = array(gettext("Wizards"), false, "wizard.php?xml=openvpn_wizard.xml");
-                $tab_array[] = array(gettext("Client Export"), false, "vpn_openvpn_export.php");
-                $tab_array[] = array(gettext("Shared Key Export"), true, "vpn_openvpn_export_shared.php");
-                display_top_tabs($tab_array);
-            ?>
-		</td>
-	</tr>
-	<tr>
-		<td id="mainarea">
-			<div class="tabcont">
-				<table width="100%" border="0" cellpadding="6" cellspacing="0" summary="main area">
-					<tr>
-						<td width="22%" valign="top" class="vncellreq">Shared Key Server</td>
-						<td width="78%" class="vtable">
-							<select name="server" id="server" class="formselect" onchange="server_changed()">
-								<?php foreach ($ras_server as & $server) :
+<section class="page-content-main">
+  <div class="container-fluid">
+    <div class="row">
+      <section class="col-xs-12">
+        <?php
+                  $tab_array = array();
+                  $tab_array[] = array(gettext("Server"), false, "vpn_openvpn_server.php");
+                  $tab_array[] = array(gettext("Client"), false, "vpn_openvpn_client.php");
+                  $tab_array[] = array(gettext("Client Specific Overrides"), false, "vpn_openvpn_csc.php");
+                  $tab_array[] = array(gettext("Wizards"), false, "wizard.php?xml=openvpn_wizard.xml");
+                  $tab_array[] = array(gettext("Client Export"), false, "vpn_openvpn_export.php");
+                  $tab_array[] = array(gettext("Shared Key Export"), true, "vpn_openvpn_export_shared.php");
+                  display_top_tabs($tab_array);
+              ?>
+        <div class="tab-content content-box col-xs-12">
+          <div class="table-responsive">
+            <table width="100%" border="0" class="table table-striped" cellpadding="0" cellspacing="0">
+              <tr>
+                <td width="22%"></td>
+                <td width="78%" align="right">
+                  <small><?=gettext("full help"); ?> </small>
+                  <i class="fa fa-toggle-off text-danger" style="cursor: pointer;" id="show_all_help_opnvpn_server" type="button"></i></a>
+                </td>
+              </tr>
+              <tr>
+                <td width="22%" valign="top" class="vncellreq"><i class="fa fa-info-circle text-muted"></i> <?=gettext("Shared Key Server");?></td>
+                <td width="78%" class="vtable">
+                  <select name="server" id="server" class="formselect" onchange="server_changed()">
+                    <?php foreach ($ras_server as & $server) :
+    ?>
+                    <option value="<?=htmlspecialchars($server['sindex']);?>"><?=htmlspecialchars($server['name']);?></option>
+                    <?php
+    endforeach; ?>
+                  </select>
+                </td>
+              </tr>
+              <tr>
+                <td width="22%" valign="top" class="vncell"><i class="fa fa-info-circle text-muted"></i> <?=gettext("Host Name Resolution");?></td>
+                <td width="78%" class="vtable">
+                  <select name="useaddr" id="useaddr" class="formselect" onchange="useaddr_changed(this)">
+                    <option value="serveraddr" ><?=gettext("Interface IP Address");?></option>
+                    <option value="serverhostname" ><?=gettext("Installation hostname");?></option>
+                    <?php if (isset($config['dyndnses']['dyndns'])) :
 ?>
-								<option value="<?=$server['sindex'];
-?>"><?=$server['name'];?></option>
-								<?php
+                      <?php foreach ($config['dyndnses']['dyndns'] as $ddns) :
+?>
+                        <option value="<?= htmlspecialchars($ddns["host"]); ?>"><?=gettext("DynDNS:");?> <?= htmlspecialchars($ddns["host"]);?></option>
+                      <?php
 endforeach; ?>
-							</select>
-						</td>
-					</tr>
-					<tr>
-						<td width="22%" valign="top" class="vncell">Host Name Resolution</td>
-						<td width="78%" class="vtable">
-							<table border="0" cellpadding="2" cellspacing="0" summary="host name resolution">
-								<tr>
-									<td>
-										<select name="useaddr" id="useaddr" class="formselect" onchange="useaddr_changed(this)">
-											<option value="serveraddr" >Interface IP Address</option>
-											<option value="serverhostname" >Installation hostname</option>
-											<?php if (isset($config['dyndnses']['dyndns'])) :
-?>
-												<?php foreach ($config['dyndnses']['dyndns'] as $ddns) :
-?>
-													<option value="<?php echo $ddns["host"] ?>">DynDNS: <?php echo $ddns["host"] ?></option>
-												<?php
-endforeach; ?>
-											<?php
+                    <?php
 endif; ?>
-											<option value="other">Other</option>
-										</select>
-										<br />
-										<div style="display:none;" id="HostName">
-											<input name="useaddr_hostname" id="useaddr_hostname" size="40" />
-											<span class="vexpl">
-												Enter the hostname or IP address the client will use to connect to this server.
-											</span>
-										</div>
-									</td>
-								</tr>
-							</table>
-						</td>
-					</tr>
-					<tr>
-						<td width="22%" valign="top" class="vncell">Use Proxy</td>
-						<td width="78%" class="vtable">
-							 <table border="0" cellpadding="2" cellspacing="0" summary="http proxy">
-								<tr>
-									<td>
-										<input name="useproxy" id="useproxy" type="checkbox" value="yes" onclick="useproxy_changed(this)" />
+                    <option value="other"><?=gettext("Other");?></option>
+                  </select>
+                  <div style="display:none;" id="HostName">
+                    <?=gettext("Enter the hostname or IP address the client will use to connect to this server.");?>
+                    <input name="useaddr_hostname" type="text" id="useaddr_hostname" size="40" />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td width="22%" valign="top" class="vncell"><a id="help_for_use_proxy" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Use Proxy");?></td>
+                <td width="78%" class="vtable">
+                  <input name="useproxy" id="useproxy" type="checkbox" value="yes" onclick="useproxy_changed(this)" />
+
+                  <div id="useproxy_opts" style="display:none">
+                      <?=gettext("Type");?> :
+                      <select name="useproxytype" id="useproxytype" class="formselect">
+                        <option value="http"><?=gettext("HTTP");?></option>
+                        <option value="socks"><?=gettext("Socks");?></option>
+                      </select>
+
+                      <?=gettext("IP Address")?> :
+                      <input name="proxyaddr" id="proxyaddr" type="text" class="formfld unknown" size="30" value="" />
+                      <?=gettext("Port");?> :
+                      <input name="proxyport" id="proxyport" type="text" class="formfld unknown" size="5" value="" />
+                      <?=gettext("Choose proxy authentication if any.");?>
+                      <select name="useproxypass" id="useproxypass" class="formselect" onchange="useproxy_changed(this)">
+                        <option value="none"><?=gettext("none");?></option>
+                        <option value="basic"><?=gettext("basic");?></option>
+                        <option value="ntlm"><?=gettext("ntlm");?></option>
+                      </select>
+                      <div id="useproxypass_opts">
+                        <?=gettext("Username")?> :
+                        <input name="proxyuser" id="proxyuser" type="text" class="formfld unknown" size="20" value="" />
+                        <?=gettext("Password");?> :
+                        <input name="proxypass" id="proxypass" type="password" class="formfld pwd" size="20" value="" />
+                        <?=gettext("Confirm");?> :
+                        <input name="proxyconf" id="proxyconf" type="password" class="formfld pwd" size="20" value="" />
+                      </div>
+                  </div>
+                  <div class="hidden" for="help_for_use_proxy">
+                      <?= gettext("Use proxy to communicate with the server.");?>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td><a id="help_for_client_conf_pkg" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Client Configuration Packages");?></td>
+                <td>
+                  <table width="100%" id="clients" border="0" cellpadding="0" cellspacing="0" class="table table-striped table-bordered ">
+                    <tr>
+                      <td width="25%" class="listhdrr"><b><?=gettext("Client Type");?></b></td>
+                      <td width="50%" class="listhdrr"><b><?=gettext("Export");?></b></td>
+                    </tr>
+                  </table>
+                  <div class="hidden" for="help_for_client_conf_pkg">
+                      <?= gettext("NOTE:") ?> <br/>
+                      <?= gettext("These are shared key configurations for use in site-to-site tunnels with other routers. Shared key tunnels are not normally used for remote access connections to end users.") ?>
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</section>
 
-									</td>
-									<td>
-										<span class="vexpl">
-											Use proxy to communicate with the server.
-										</span>
-									</td>
-								</tr>
-							</table>
-							<table border="0" cellpadding="2" cellspacing="0" id="useproxy_opts" style="display:none" summary="user options">
-								<tr>
-									<td align="right" width="25%">
-										<span class="vexpl">
-											 &nbsp;     Type :&nbsp;
-										</span>
-									</td>
-									<td>
-										<select name="useproxytype" id="useproxytype" class="formselect">
-											<option value="http">HTTP</option>
-											<option value="socks">Socks</option>
-										</select>
-									</td>
-								</tr>
-								<tr>
-									<td align="right" width="25%">
-										<span class="vexpl">
-											 &nbsp;     IP Address :&nbsp;
-										</span>
-									</td>
-									<td>
-										<input name="proxyaddr" id="proxyaddr" class="formfld unknown" size="30" value="" />
-									</td>
-								</tr>
-								<tr>
-									<td align="right" width="25%">
-										<span class="vexpl">
-											 &nbsp;      Port :&nbsp;
-										</span>
-									</td>
-														<td>
-										<input name="proxyport" id="proxyport" class="formfld unknown" size="5" value="" />
-									</td>
-								</tr>
-								<tr>
-									<td width="25%">
-							<br />
-									</td>
-									<td>
-										<select name="useproxypass" id="useproxypass" class="formselect" onchange="useproxy_changed(this)">
-											<option value="none">none</option>
-											<option value="basic">basic</option>
-											<option value="ntlm">ntlm</option>
-										</select>
-										<span class="vexpl">
-											Choose proxy authentication if any.
-										</span>
-							<br />
-							<table border="0" cellpadding="2" cellspacing="0" id="useproxypass_opts" style="display:none" summary="name and password">
-								<tr>
-									<td align="right" width="25%">
-										<span class="vexpl">
-											 &nbsp;Username :&nbsp;
-										</span>
-									</td>
-									<td>
-										<input name="proxyuser" id="proxyuser" class="formfld unknown" size="20" value="" />
-									</td>
-								</tr>
-								<tr>
-									<td align="right" width="25%">
-										<span class="vexpl">
-											 &nbsp;Password :&nbsp;
-										</span>
-									</td>
-									<td>
-										<input name="proxypass" id="proxypass" type="password" class="formfld pwd" size="20" value="" />
-									</td>
-								</tr>
-								<tr>
-									<td align="right" width="25%">
-										<span class="vexpl">
-											 &nbsp;Confirm :&nbsp;
-										</span>
-									</td>
-														<td>
-										<input name="proxyconf" id="proxyconf" type="password" class="formfld pwd" size="20" value="" />
-									</td>
-								</tr>
-							</table>
-									</td>
-								</tr>
-							</table>
-						</td>
-					</tr>
-					<tr>
-						<td colspan="2" class="list" height="12">&nbsp;</td>
-					</tr>
-					<tr>
-						<td colspan="2" valign="top" class="listtopic">Client Configuration Packages</td>
-					</tr>
-				</table>
-				<table width="100%" id="clients" border="0" cellpadding="0" cellspacing="0" summary="heading">
-					<tr>
-						<td width="25%" class="listhdrr"><?=gettext("Client Type");?></td>
-						<td width="50%" class="listhdrr"><?=gettext("Export");?></td>
-					</tr>
-				</table>
-				<table width="100%" border="0" cellpadding="5" cellspacing="10" summary="note">
-					<tr>
-						<td align="right" valign="top" width="5%"><?= gettext("NOTE:") ?></td>
-						<td><?= gettext("These are shared key configurations for use in site-to-site tunnels with other routers. Shared key tunnels are not normally used for remote access connections to end users.") ?></td>
-					</tr>
-				</table>
-			</div>
-		</td>
-	</tr>
-</table>
-<script type="text/javascript">
-//<![CDATA[
-server_changed();
-//]]>
-</script>
 <?php include("foot.inc"); ?>
-</body>
-</html>