diff --git a/module/common/lang/zh-cn.php b/module/common/lang/zh-cn.php
index b4a41eaa13..34535e388c 100644
--- a/module/common/lang/zh-cn.php
+++ b/module/common/lang/zh-cn.php
@@ -245,9 +245,9 @@ $lang->report->menu->staff   = array('link' => '组织|report|workload');
 /* 资源视图菜单设置。*/
 $lang->webapp = new stdclass();
 $lang->webapp->menu = new stdclass();
-$lang->webapp->menu->obtain     = array('link' => '<span class="icon-webapp-obtain">&nbsp;</span>应用商店|webapp|obtain', 'float' => 'right');
-$lang->webapp->menu->manageTree = array('link' => "<span class='icon-webapp-manage'>&nbsp;</span>维护分类|tree|browse|rootID=0&view=webapp", 'float' => 'right');
-$lang->webapp->menu->create     = array('link' => "<span class='icon-webapp-create'>&nbsp;</span>创建应用|webapp|create", 'float' => 'right');
+$lang->webapp->menu->obtain     = array('link' => '<span class="icon-shopping-cart">&nbsp;</span>应用商店|webapp|obtain', 'float' => 'right');
+$lang->webapp->menu->manageTree = array('link' => "<span class='icon-cogs'>&nbsp;</span>维护分类|tree|browse|rootID=0&view=webapp", 'float' => 'right');
+$lang->webapp->menu->create     = array('link' => "<span class='icon-plus'>&nbsp;</span>创建应用|webapp|create", 'float' => 'right');
 
 /* 组织结构视图菜单设置。*/
 $lang->company = new stdclass();
diff --git a/module/common/view/debug.html.php b/module/common/view/debug.html.php
index 576dc3f0ed..d882c012e8 100644
--- a/module/common/view/debug.html.php
+++ b/module/common/view/debug.html.php
@@ -4,7 +4,7 @@
     <i class='icon icon-terminal'></i> <strong id='debugTitle'><?php echo $lang->debug;?></strong>
   </header>
   <div id='debugContent'></div>
-  <div id='debugIframeTip' class='hidden'><strong id='debugIframeTipId'></strong> <span class='debugIframeTipTime'></span> The following content from iframe.</div>
+  <div id='debugIframeTip' class='hidden'>#<strong id='debugIframeTipId'></strong> <span class='debugIframeTipTime'></span> The following content from iframe.</div>
   <iframe style='width:580px; height: 400px ' frameborder='0' name='hiddenwin' id='hiddenwin' scrolling='no' class='debugwin'></iframe>
 </div>
 <style>
diff --git a/module/extension/view/obtain.html.php b/module/extension/view/obtain.html.php
index 7bb7f6f08e..c7219a15c9 100644
--- a/module/extension/view/obtain.html.php
+++ b/module/extension/view/obtain.html.php
@@ -33,7 +33,6 @@
             ?>
         </div>
       </div>
-
       <div class='panel panel-sm'>
         <div class='panel-heading'><?php echo $lang->extension->byCategory;?></div>
         <div class='panel-body'>
diff --git a/module/todo/view/view.html.php b/module/todo/view/view.html.php
index ea80613c58..4339015f8a 100644
--- a/module/todo/view/view.html.php
+++ b/module/todo/view/view.html.php
@@ -12,7 +12,7 @@
 ?>
 <?php include '../../common/view/header.html.php';?>
 <?php if(!$todo->private or ($todo->private and $todo->account == $app->user->account)):?>
-  <div id='titlebar'>
+<div id='titlebar'>
   <div class='heading'>
     <span class='prefix' title='TODO'><?php echo html::icon($lang->icons['todo']) . ' #' . $todo->id;?></span>
     <strong><?php echo $todo->name;?></strong>
diff --git a/module/webapp/css/common.css b/module/webapp/css/common.css
index 83e3299bf2..d292652558 100644
--- a/module/webapp/css/common.css
+++ b/module/webapp/css/common.css
@@ -1,6 +1,8 @@
 .webapps .card {position: relative; padding-left: 85px;}
-.webapps .card > .card-content {height: 30px}
+.webapps .card > .card-content {height: 20px; overflow: hidden; text-overflow:ellipsis; padding-bottom: 0;margin-bottom: 5px;}
+.webapps.webstore .card > .card-content {height: 40px; overflow: hidden; text-overflow:ellipsis; padding-bottom: 0;margin-bottom: 5px;}
 .webapps .card > .card-actions .btn {padding: 3px 12px; min-width: 70px}
 .webapps .card > .media {position: absolute; left: 10px; top: 10px;}
+.webapps .card > .card-heading strong {font-size: 14px}
 .webapps .card > .card-heading > .pull-right {display: none}
 .webapps .card:hover > .card-heading > .pull-right {display: block;}
diff --git a/module/webapp/css/edit.css b/module/webapp/css/edit.css
new file mode 100644
index 0000000000..bc4870e9b7
--- /dev/null
+++ b/module/webapp/css/edit.css
@@ -0,0 +1 @@
+form {margin-bottom: 70px;}
diff --git a/module/webapp/js/common.js b/module/webapp/js/common.js
index 3be9a968d4..ec481da61c 100644
--- a/module/webapp/js/common.js
+++ b/module/webapp/js/common.js
@@ -48,10 +48,11 @@ function addView(webappID)
 function customSize(value)
 {
     $('.customSize').hide();
-    if(value == 'custom') $('.customSize').show();
+    if(value == 'custom') $('.customSize').removeClass('hidden').show();
 }
 
-$(function(){
+$(function()
+{
     if($('a.iframe').length)
     {
         $("a.iframe").modalTrigger({width:450, type:'iframe', afterHide:function()
@@ -65,11 +66,12 @@ $(function(){
 
     if($('a.webapp').length) $("a.webapp").modalTrigger({width:700, type:'iframe'});
     if($('a.apiapp').length) $("a.apiapp").modalTrigger({width:700, type:'iframe'});
-    if($('a.popup').length) $("a.popup").modalTrigger({width:900, type:'iframe'});
+    $('.runapp.popup').modalTrigger({width:700, type:'iframe'});
+    $('.runapp:not(.popup)').modalTrigger({size:'fullscreen', type:'iframe', cssClass:'app-inside'});
 
     setSize($('#target').val());
     $('#target').change(function(){setSize($(this).val())});
     $('#size').change(function(){customSize($(this).val())});
     $('#modulemenu ul li').removeClass('active');
-    if(typeof(module) != "undefined") $('#modulemenu ul li #submenu' + module).parent().addClass('active');
+    if(typeof(module) == "string") $('#modulemenu ul li #submenu' + module).parent().addClass('active');
 })
diff --git a/module/webapp/lang/zh-cn.php b/module/webapp/lang/zh-cn.php
index 6a94f35de8..424979fc00 100644
--- a/module/webapp/lang/zh-cn.php
+++ b/module/webapp/lang/zh-cn.php
@@ -60,6 +60,9 @@ $lang->webapp->targetList['popup']  = '弹窗';
 $lang->webapp->targetList['iframe'] = '内嵌';
 $lang->webapp->targetList['blank']  = '新窗口';
 
+$lang->webapp->width  = '宽度';
+$lang->webapp->height = '高度';
+
 $lang->webapp->sizeList['']         = "";
 $lang->webapp->sizeList['1024x600'] = "1024 x 600";
 $lang->webapp->sizeList['900x600']  = "900 x 600";
diff --git a/module/webapp/view/edit.html.php b/module/webapp/view/edit.html.php
index c785d7ed0f..54d1d3b7f8 100644
--- a/module/webapp/view/edit.html.php
+++ b/module/webapp/view/edit.html.php
@@ -11,79 +11,88 @@
  */
 ?>
 <?php include '../../common/view/header.lite.html.php';?>
-<form method='post' target='hiddenwin' enctype='multipart/form-data'>
-<table class='table-1'>
-  <caption><?php echo $lang->webapp->edit?></caption>
-  <tr>
-    <th align='left'><?php echo $lang->webapp->module?></th>
-    <td><?php echo html::select('module', $modules, $webapp->module, "class='form-control'")?></td>
-  </tr>
-  <?php if($webapp->addType != 'system'):?>
-  <tr>
-    <th align='left'><?php echo $lang->webapp->name?></th>
-    <td><?php echo html::input('name', $webapp->name, "class='form-control'")?></td>
-  </tr>
-  <tr>
-    <th align='left'><?php echo $lang->webapp->url?></th>
-    <td><?php echo html::input('url', $webapp->url, "class='form-control'")?></td>
-  </tr>
-  <?php endif;?>
-  <tr>
-    <th align='left'><?php echo $lang->webapp->target?></th>
-    <td><?php echo html::select('target', $lang->webapp->targetList, $webapp->target, "class='form-control'")?></td>
-  </tr>
-  <?php 
-  $customWidth  = '';
-  $customHeight = '';
-  if(!array_key_exists($webapp->size, $lang->webapp->sizeList))
-  {
-      $size = $webapp->size;
-      $webapp->size = 'custom';
-      if(strpos($size, 'x') !== false) list($customWidth, $customHeight) = explode('x', $size);
-  }
-  ?>
-  <tr class="size">
-    <th align='left'><?php echo $lang->webapp->size?></th>
-    <td><?php echo html::select('size', $lang->webapp->sizeList, $webapp->size, "class='form-control'")?></td>
-  </tr>
-  <tr class="customSize <?php if($webapp->size != 'custom') echo 'hidden'?>">
-    <th align='left'><?php echo $lang->webapp->custom?></th>
-    <td><?php echo html::input('customWidth', $customWidth, "class='w-40px'") . 'px X ' . html::input('customHeight', $customHeight, "class='w-40px'") . 'px';?></td>
-  </tr>
-  <tr>
-    <th align='left'><?php echo $lang->webapp->abstract?></th>
-    <td><?php echo html::input('abstract', $webapp->abstract, "class='form-control' maxlength='30'")?> <span><?php echo $lang->webapp->noticeAbstract?></span></td>
-  </tr>
-  <tr>
-    <th align='left'><?php echo $lang->webapp->desc?></th>
-    <td><?php echo html::textarea('desc', $webapp->desc, "class='form-control' rows='5'")?></td>
-  </tr>
-  <?php if($webapp->addType == 'custom'):?>
-  <tr>
-    <th align='left'><?php echo $lang->webapp->icon?></th>
-    <td>
-      <?php
-      if($webapp->icon) echo "<p><img src='{$webapp->icon->webPath}' /></p>";
-      echo html::file('files', "class='form-control' size='57'");
+<div id='titlebar'>
+  <div class='heading'>
+    <span class='prefix' title='WEBAPP'><?php echo html::icon($lang->icons['app']) . ' #' . $webapp->id;?></span>
+    <strong><?php echo $webapp->name;?></strong>
+    <small class='text-muted'> <i class='icon-pencil'></i> <?php echo $lang->webapp->edit?></small>
+  </div>
+</div>
+<div class='main'>
+  <form class='form-condensed' method='post' target='hiddenwin' enctype='multipart/form-data'>
+    <table class='table table-form'>
+      <tr>
+        <th class='w-80px'><?php echo $lang->webapp->module?></th>
+        <td class='w-p45'><?php echo html::select('module', $modules, $webapp->module, "class='form-control'")?></td><td></td>
+      </tr>
+      <?php if($webapp->addType != 'system'):?>
+      <tr>
+        <th><?php echo $lang->webapp->name?></th>
+        <td><?php echo html::input('name', $webapp->name, "class='form-control'")?></td>
+      </tr>
+      <tr>
+        <th><?php echo $lang->webapp->url?></th>
+        <td><?php echo html::input('url', $webapp->url, "class='form-control'")?></td>
+      </tr>
+      <?php endif;?>
+      <tr>
+        <th><?php echo $lang->webapp->target?></th>
+        <td><?php echo html::select('target', $lang->webapp->targetList, $webapp->target, "class='form-control'")?></td>
+      </tr>
+      <?php 
+      $customWidth  = '';
+      $customHeight = '';
+      if(!array_key_exists($webapp->size, $lang->webapp->sizeList))
+      {
+          $size = $webapp->size;
+          $webapp->size = 'custom';
+          if(strpos($size, 'x') !== false) list($customWidth, $customHeight) = explode('x', $size);
+      }
       ?>
-      <br /><span><?php echo $lang->webapp->noticeIcon?></span>
-    </td>
-  </tr>
-  <?php endif;?>
-  <tr><td colspan='2' align='center'><?php echo html::submitButton()?></td></tr>
-</table>
-</form>
-<div class='hidden'>
-<table class='table-1'>
-  <tr class="hideSize">
-    <th><?php echo $lang->webapp->size?></th>
-    <td><?php echo html::select('size', $lang->webapp->sizeList, $webapp->size, "class='form-control'")?></td>
-  </tr>
-  <tr class="hideHeight">
-    <th><?php echo $lang->webapp->height?></th>
-    <td><?php echo html::input('size', $webapp->size, "class='form-control'")?></td>
-  </tr>
-</table>
+      <tr class="size">
+        <th><?php echo $lang->webapp->size?></th>
+        <td><?php echo html::select('size', $lang->webapp->sizeList, $webapp->size, "class='form-control'")?></td>
+      </tr>
+      <tr class="customSize <?php if($webapp->size != 'custom') echo 'hidden'?>">
+        <th><?php echo $lang->webapp->custom?></th>
+        <td>
+          <div class='input-group'>
+            <span class='input-group-addon'><?php echo $lang->webapp->width;?></span>
+            <?php echo html::input('customWidth', $customWidth, "class='form-control'");?>
+            <span class='input-group-addon'>px</span>
+          </div>
+        </td>
+        <td>
+          <div class='input-group'>
+            <span class='input-group-addon'><?php echo $lang->webapp->height;?></span>
+            <?php echo html::input('customHeight', $customHeight, "class='form-control'");?>
+            <span class='input-group-addon'>px</span>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <th><?php echo $lang->webapp->abstract?></th>
+        <td colspan='2'><?php echo html::input('abstract', $webapp->abstract, "class='form-control' maxlength='30'")?><span class='help-block'><?php echo $lang->webapp->noticeAbstract?></span></td>
+      </tr>
+      <tr>
+        <th><?php echo $lang->webapp->desc?></th>
+        <td colspan='2'><?php echo html::textarea('desc', $webapp->desc, "class='form-control' rows='5'")?></td>
+      </tr>
+      <?php if($webapp->addType == 'custom'):?>
+      <tr>
+        <th><?php echo $lang->webapp->icon?></th>
+        <td>
+          <?php
+          if($webapp->icon) echo "<p><img src='{$webapp->icon->webPath}' width='72' height='72' /></p>";
+          echo html::file('files', "class='form-control' size='57'");
+          ?>
+        </td>
+        <td><span class='help-block'><?php echo $lang->webapp->noticeIcon?></span></td>
+      </tr>
+      <?php endif;?>
+      <tr><th></th><td colspan='2'><?php echo html::submitButton()?></td></tr>
+    </table>
+  </form>
 </div>
 <?php include '../../common/view/footer.lite.html.php';?>
 
diff --git a/module/webapp/view/index.html.php b/module/webapp/view/index.html.php
index c29a2cf792..8b2792f9c3 100644
--- a/module/webapp/view/index.html.php
+++ b/module/webapp/view/index.html.php
@@ -21,26 +21,26 @@
         <div class='pull-right'>
         <?php common::printLink('webapp', 'uninstall',  "webapp=$webapp->id", "<i class='icon-remove'></i> " . $lang->webapp->uninstall, 'hiddenwin',  "class='text-muted'"); ?>
         </div>
-        <strong><?php common::printLink('webapp', 'view', "webappID=$webapp->id", $webapp->name, '',  "class='webapp'");?></strong> <small class='text-muted'><?php echo $webapp->author;?></small></div>
-      <div class='card-content text-muted'><?php echo $webapp->abstract;?></div>
+        <strong><?php common::printLink('webapp', 'view', "webappID=$webapp->id", $webapp->name, '',  "class='webapp'");?></strong> <small class='text-muted'><?php echo $webapp->author;?></small>
+      </div>
+      <div class='card-content text-muted' title='<?php echo $webapp->abstract?>'><?php echo $webapp->abstract;?></div>
       <div class='card-actions webapp-actions'>
         <div class='pull-right'>
         <?php
         $url     = $webapp->addType == 'custom' ? $webapp->url : $config->webapp->url . "/webapp-showapp-{$webapp->appid}.html";
-        $method  = '';
         $popup   = '';
         $target  = '_self';
+        $misc    = '';
         if($webapp->target == 'blank') $target   = '_blank';
-        if($webapp->target == 'iframe')$method   = "toggleShowapp($webapp->id, \"$webapp->name\");";
         if($webapp->target == 'popup')
         {
             $width  = 0;
             $height = 0;
             if($webapp->size) list($width, $height) = explode('x', $webapp->size);
-            $method = "popup($width, $height);";
+            $misc = "data-width='" . $width . "' data-height='" . $height . "'";
             $popup  = 'popup';
         }
-        echo html::a($url, $lang->webapp->useapp, $target,  "id='useapp$webapp->id' class='btn btn-success $popup' onclick='addView($webapp->id);$method'");
+        echo html::a($url, $lang->webapp->useapp, $target,  "id='useapp$webapp->id' class='btn btn-success runapp $popup' onclick='addView($webapp->id);' data-title='$webapp->name' $misc");
         ?>
         </div>
       </div>
diff --git a/module/webapp/view/install.html.php b/module/webapp/view/install.html.php
index 976a078fa3..751a0e088d 100644
--- a/module/webapp/view/install.html.php
+++ b/module/webapp/view/install.html.php
@@ -11,17 +11,27 @@
  */
 ?>
 <?php include '../../common/view/header.lite.html.php';?>
-<form class='form-condensed' method='post' target='hiddenwin'>
-<div class='box-title'><?php echo $lang->webapp->install?></div>
-<div class='box-content'>
-  <p align='center' style='margin:30px 0;'><span><?php echo $lang->webapp->selectModule?></span>
-  <?php
-  echo html::select('module', $modules);
-  echo html::submitButton();
-  common::printLink('tree', 'browse', "rootID=0&view=webapp", $lang->tree->manage, '_parent');
-  ?>
-  </p>
-<div>
+<div id='titlebar'>
+  <div class='heading'>
+    <span class='prefix' title='WEBAPP'><?php echo html::icon($lang->icons['app']);?></span>
+    <strong><small class='text-muted'> <i class='icon-cog'></i></small> <?php echo $lang->webapp->install;?></strong>
+  </div>
+</div>
+<div class='main'>
+</div>
+<form class='form-condensed' method='post' target='hiddenwin' style='padding: 40px 5%'>
+  <table class='table table-form'>
+    <tr>
+      <td>
+        <div class='input-group'>
+          <span class='input-group-addon'><?php echo $lang->webapp->selectModule?></span>
+          <?php echo html::select('module', $modules, '', "class='form-control'");?>
+        </div>
+      </td>
+      <td><?php echo html::submitButton();?></td>
+      <td class='w-80px'><?php common::printLink('tree', 'browse', "rootID=0&view=webapp", $lang->tree->manage, '_parent');?></td>
+    </tr>
+  </table>
 </form>
 <?php include '../../common/view/footer.lite.html.php';?>
 
diff --git a/module/webapp/view/obtain.html.php b/module/webapp/view/obtain.html.php
index ffd92f5da7..3804eef79c 100644
--- a/module/webapp/view/obtain.html.php
+++ b/module/webapp/view/obtain.html.php
@@ -12,77 +12,88 @@
 ?>
 <?php include '../../common/view/header.html.php';?>
 <?php include '../../common/view/treeview.html.php';?>
-<table class='cont-lt1'>
-  <tr valign='top'>
-    <td class='side'>
-      <div class='box-title'><?php echo $lang->webapp->obtain;?></div>
-      <div class='box-content a-center'>
-        <?php
-        echo "<span id='byupdatedtime'>" . html::a(inlink('obtain', 'type=byUpdatedTime'), $lang->webapp->byUpdatedTime) . '</span><br />';
-        echo "<span id='byaddedtime'>"   . html::a(inlink('obtain', 'type=byAddedTime'),   $lang->webapp->byAddedTime)   . '</span><br />';
-        echo "<span id='bydownloads'>"   . html::a(inlink('obtain', 'type=byDownloads'),   $lang->webapp->byDownloads)   . '</span><br />';
-        ?>
+<div class='container bd-0'>
+  <div class='row pd-0'>
+    <div class='col-md-3'>
+      <form class='side-search mgb-20' method='post' action='<?php echo inlink('obtain', 'type=bySearch');?>'>
+        <div class="input-group">
+          <?php echo html::input('key', $this->post->key, "class='form-control'");?>
+          <span class="input-group-btn">
+            <?php echo html::submitButton('<i class="icon-search"></i> ' . $lang->webapp->bySearch, '', ''); ?>
+          </span>
+        </div>
+      </form>
+      <div class='panel panel-sm'>
+        <div class='panel-heading'><?php echo $lang->webapp->obtain;?></div>
+        <div class='list-group'>
+            <?php
+            echo html::a(inlink('obtain', 'type=byUpdatedTime'), $lang->webapp->byUpdatedTime, '', "class='list-group-item' id='byupdatedtime'");
+            echo html::a(inlink('obtain', 'type=byAddedTime'),   $lang->webapp->byAddedTime, '', "class='list-group-item' id='byaddedtime'");
+            echo html::a(inlink('obtain', 'type=byDownloads'),   $lang->webapp->byDownloads, '', "class='list-group-item' id='bydownloads'");
+            ?>
+        </div>
       </div>
-      <div class='box-title'><?php echo $lang->webapp->bySearch;?></div>
-      <div class='box-content a-center'>
-        <form method='post' action='<?php echo inlink('obtain', 'type=bySearch');?>'>
-        <?php echo html::input('key', $this->post->key, "class='form-control'") . html::submitButton($lang->webapp->bySearch);?>
-        </form>
+      <div class='panel panel-sm'>
+        <div class='panel-heading'><?php echo $lang->webapp->byCategory;?></div>
+        <div class='panel-body'>
+          <?php $moduleTree ? print($moduleTree) : print($lang->webapp->errorGetModules);?>
+        </div>
       </div>
-      <div class='box-title'><?php echo $lang->webapp->byCategory;?></div>
-      <div class='box-content' class='tree'>
-        <?php $moduleTree ? print($moduleTree) : print($lang->webapp->errorGetModules);?>
-      </div>
-    </td>
-    <td class='divider'></td>
-    <td> 
+    </div>
+    <div class='col-md-9'>
       <?php if($webapps):?>
-      <ul id='webapps'>
+      <div id='webapps' class='cards webstore webapps pd-0 mg-0'>
         <?php foreach($webapps as $webapp):?>
-        <li>
-          <table class='fixed exttable'>
-            <tr>
-              <td rowspan='3' width='73' height='73' class='webapp-icon'><img src='<?php echo empty($webapp->icon) ? '/theme/default/images/main/webapp-default.png' : $config->webapp->url . $webapp->icon?>' width='72' height='72' /></td>
-              <td class='webapp-name' title='<?php echo $webapp->name?>'><?php echo $webapp->name?></td>
-            </tr>
-            <tr><td valign='top'><div class='webapp-info' title='<?php echo $webapp->abstract?>'><?php echo empty($webapp->abstract) ? '&nbsp;' : $webapp->abstract?></div></td></tr>
-            <tr>
-              <td>
-                <div class='webapp-actions'>
-                  <?php
-                  $url     = $webapp->url;
-                  $method  = '';
-                  $popup   = '';
-                  $target  = '_self';
-                  if($webapp->target == 'popup')
-                  {
-                      $width  = 0;
-                      $height = 0;
-                      if($webapp->size) list($width, $height) = explode('x', $webapp->size);
-                      $method = "popup($width, $height);";
-                      $popup  = 'popup';
-                  }
-                  else
-                  {
-                      $method = "popup(1024, 600);";
-                      $popup  = 'popup';
-                  }
-                  echo isset($installeds[$webapp->id]) ? html::commonButton($lang->webapp->installed, "disabled='disabled' style='color:gray'") : html::a(inLink('install', "webappID={$webapp->id}"), $lang->webapp->install, '_self', "class='button-c iframe'");
-                  common::printLink('webapp', 'view', "webappID=$webapp->id&type=api", $lang->webapp->view, '',  "class='button-c apiapp'");
-                  echo html::a($url, $lang->webapp->preview, '', "id='useapp$webapp->id' class='button-c $popup' onclick='$method'");
-                  ?>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </li>
+        <div class='col-md-6 col-sm-6'><div class='card' id='webapp<?php echo $webapp->id?>'>
+          <div class='media webapp-icon'><img src='<?php echo empty($webapp->icon) ? '/theme/default/images/main/webapp-default.png' : $config->webapp->url . $webapp->icon?>' width='72' height='72' /></div>
+          <div class='card-heading' class='webapp-name' title='<?php echo $webapp->name?>'>
+            <strong><?php common::printLink('webapp', 'view', "webappID=$webapp->id&type=api", $webapp->name, '',  "class='apiapp'");?></strong> <small class='text-muted'><?php echo $webapp->author;?></small>
+          </div>
+          <div class='card-content text-muted' title='<?php echo $webapp->abstract?>'><?php echo $webapp->abstract;?></div>
+          <div class='card-actions webapp-actions'>
+            <div class='pull-right'>
+              <div class='btn-group'>
+              <?php
+              $url     = $webapp->url;
+              $popup   = '';
+              $target  = '_self';
+              $misc    = '';
+              if($webapp->target == 'popup')
+              {
+                  $width  = 0;
+                  $height = 0;
+                  if($webapp->size) list($width, $height) = explode('x', $webapp->size);
+                  $misc = "data-width='" . $width . "' data-height='" . $height . "'";
+                  $popup  = 'popup';
+              }
+              else
+              {
+                  $method = "popup(1024, 600);";
+                  $misc = "data-width='1024' data-height='600'";
+                  $popup  = 'popup';
+              }
+              echo isset($installeds[$webapp->id]) ? html::commonButton("<i class='icon-ok'></i> " . $lang->webapp->installed, "disabled='disabled'", 'btn-success') : html::a(inLink('install', "webappID={$webapp->id}"), $lang->webapp->install, '_self', "class='btn btn-primary iframe'");
+
+              echo html::a($url, $lang->webapp->preview, '', "id='useapp$webapp->id' class='btn runapp $popup' data-title='$webapp->name' $misc");
+              ?>
+              </div>
+            </div>
+          </div>
+        </div></div>
         <?php endforeach;?>
-      </ul>
+      </div>
       <p class='c-left'><?php if($pager) $pager->show();?></p>
       <?php else:?>
         <div class='box-title'><?php echo $lang->webapp->errorOccurs;?></div>
         <div class='box-content'><?php echo $lang->webapp->errorGetExtensions;?></div>
-      <?php endif;?>
+      <?php endif;?>    
+    </div>
+  </div>
+</div>
+<table class='cont-lt1'>
+  <tr valign='top'>
+    <td> 
+
     </td>
   </tr>
 </table>
diff --git a/module/webapp/view/view.html.php b/module/webapp/view/view.html.php
index a1d8feb1c6..2c0da6983a 100644
--- a/module/webapp/view/view.html.php
+++ b/module/webapp/view/view.html.php
@@ -11,79 +11,87 @@
  */
 ?>
 <?php include '../../common/view/header.lite.html.php';?>
-<table class='table-1'>
-  <caption>
-    <?php echo $lang->webapp->view?>
-    <span class='text-right'><?php if($type =='local') common::printLink('webapp', 'edit', "webappID=$webapp->id", $lang->edit);?></span>
-  </caption>
-  <?php if($type == 'local'):?>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->module?></th>
-    <td><?php echo $modules[$webapp->module]?></td>
-  </tr>
-  <?php endif;?>
-  <tr>
-    <th class='text-right' width='60'><?php echo $lang->webapp->name?></th>
-    <td><?php echo $webapp->name?></td>
-  </tr>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->url?></th>
-    <td><?php echo $webapp->url?></td>
-  </tr>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->author?></th>
-    <td><?php echo $webapp->author?></td>
-  </tr>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->target?></th>
-    <td><?php echo $lang->webapp->targetList[$webapp->target]?></td>
-  </tr>
-  <?php if($webapp->target == 'popup'):?>
-  <?php
-  if(!array_key_exists($webapp->size, $lang->webapp->sizeList))
-  {
-      $size = $webapp->size;
-      $webapp->size = 'custom';
-  }
-  ?>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->size?></th>
-    <td>
-      <?php
-      echo $lang->webapp->sizeList[$webapp->size];
-      if(isset($size)) echo ' ： ' . $size;
-      ?>
-    </td>
-  </tr>
-  <?php endif;?>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->abstract?></th>
-    <td><?php echo $webapp->abstract?></td>
-  </tr>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->desc?></th>
-    <td><?php echo $webapp->desc?></td>
-  </tr>
-  <?php if($type == 'local'):?>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->addType?></th>
-    <td><?php echo $lang->webapp->addTypeList[$webapp->addType]?></td>
-  </tr>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->addedBy?></th>
-    <td><?php echo $users[$webapp->addedBy]?></td>
-  </tr>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->addedDate?></th>
-    <td><?php echo $webapp->addedDate?></td>
-  </tr>
-  <?php endif;?>
-  <?php if($type == 'api'):?>
-  <tr>
-    <th class='text-right'><?php echo $lang->webapp->downloads?></th>
-    <td><?php echo $webapp->downloads?></td>
-  </tr>
-  <?php endif;?>
-</table>
+<div id='titlebar'>
+  <div class='heading'>
+    <span class='prefix' title='WEBAPP'><?php echo html::icon($lang->icons['app']) . ' #' . $webapp->id;?></span>
+    <strong><?php echo $webapp->name;?></strong>
+    <small class='text-muted'> <i class='icon-file-text'></i> <?php echo $lang->webapp->view?></small>
+  </div>
+  <div class='actions'>
+  <?php if($type =='local') common::printLink('webapp', 'edit', "webappID=$webapp->id", "<i class='icon-pencil'></i> " . $lang->edit, '', "class='btn btn-primary'");?>
+  </div>
+</div>
+<div class='main'>
+  <table class='table table-data table-condensed table-borderless'>
+    <?php if($type == 'local'):?>
+    <tr>
+      <th><?php echo $lang->webapp->module?></th>
+      <td><?php echo $modules[$webapp->module]?></td>
+    </tr>
+    <?php endif;?>
+    <tr>
+      <th class='w-100px'><?php echo $lang->webapp->name?></th>
+      <td><?php echo $webapp->name?></td>
+    </tr>
+    <tr>
+      <th><?php echo $lang->webapp->url?></th>
+      <td><?php echo $webapp->url?></td>
+    </tr>
+    <tr>
+      <th><?php echo $lang->webapp->author?></th>
+      <td><?php echo $webapp->author?></td>
+    </tr>
+    <tr>
+      <th><?php echo $lang->webapp->target?></th>
+      <td><?php echo $lang->webapp->targetList[$webapp->target]?></td>
+    </tr>
+    <?php if($webapp->target == 'popup'):?>
+    <?php
+    if(!array_key_exists($webapp->size, $lang->webapp->sizeList))
+    {
+        $size = $webapp->size;
+        $webapp->size = 'custom';
+    }
+    ?>
+    <tr>
+      <th><?php echo $lang->webapp->size?></th>
+      <td>
+        <?php
+        echo $lang->webapp->sizeList[$webapp->size];
+        if(isset($size)) echo ' ： ' . $size;
+        ?>
+      </td>
+    </tr>
+    <?php endif;?>
+    <tr>
+      <th><?php echo $lang->webapp->abstract?></th>
+      <td><?php echo $webapp->abstract?></td>
+    </tr>
+    <tr>
+      <th><?php echo $lang->webapp->desc?></th>
+      <td><?php echo $webapp->desc?></td>
+    </tr>
+    <?php if($type == 'local'):?>
+    <tr>
+      <th><?php echo $lang->webapp->addType?></th>
+      <td><?php echo $lang->webapp->addTypeList[$webapp->addType]?></td>
+    </tr>
+    <tr>
+      <th><?php echo $lang->webapp->addedBy?></th>
+      <td><?php echo $users[$webapp->addedBy]?></td>
+    </tr>
+    <tr>
+      <th><?php echo $lang->webapp->addedDate?></th>
+      <td><?php echo $webapp->addedDate?></td>
+    </tr>
+    <?php endif;?>
+    <?php if($type == 'api'):?>
+    <tr>
+      <th><?php echo $lang->webapp->downloads?></th>
+      <td><?php echo $webapp->downloads?></td>
+    </tr>
+    <?php endif;?>
+  </table>
+</div>
 <?php include '../../common/view/footer.lite.html.php';?>
 
diff --git a/www/js/my.full.js b/www/js/my.full.js
index 88d3634393..9f1b7f5cf5 100644
--- a/www/js/my.full.js
+++ b/www/js/my.full.js
@@ -462,7 +462,7 @@ function setForm()
  */
 function setFormAction(actionLink, hiddenwin)
 {
-  if(hiddenwin) $('form').attr('target', hiddenwin);
+  // if(hiddenwin) $('form').attr('target', hiddenwin);
   $('form').attr('action', actionLink).submit();
 }
 
@@ -804,6 +804,24 @@ function ajaxDelete(url, replaceID, notice)
     }
 }
 
+/**
+ * Judge the string is a integer number
+ * 
+ * @access public
+ * @return bool
+ */
+function isNum(s)
+{
+    if(s!=null)
+    {
+        var r, re;
+        re = /\d*/i;
+        r = s.match(re);
+        return (r == s) ? true : false;
+    }
+    return false;
+}
+
 /**
  * Set modal load content with ajax or iframe
  * 
@@ -832,28 +850,52 @@ function setModal()
                     height: $e.data('height') || 'auto',
                     icon:   $e.data('icon') || '?',
                     title:  $e.data('title') || $e.attr('title') || $e.text(),
-                    name:   $e.data('name') || 'modalIframe'
+                    name:   $e.data('name') || 'modalIframe',
+                    cssClass: $e.data('class')
                 }
                 options = $.extend(options, setting);
                 
-                if(options.height != 'auto') options.height += 'px';
+                if(isNum(options.height.toString())) options.height += 'px';
+                if(isNum(options.width.toString())) options.width += 'px';
+                if(options.size == 'fullscreen')
+                {
+                    var $w = $(window);
+                    options.width = $w.width();
+                    options.height = $w.height();
+                    options.cssClass += ' fullscreen';
+                }
+
                 if(options.icon == '?')
                 {
                     var i = $e.find("[class^='icon-']");
                     options.icon = i.length ? i.attr('class').substring(5) : 'file-text';
                 }
                 var modal = $('#ajaxModal').addClass('modal-loading');
-                modal.html("<div class='icon-spinner icon-spin loader'></div><div class='modal-dialog modal-iframe' style='width: {width}px; height: auto'><div class='modal-content'><div class='modal-header'><button class='close' data-dismiss='modal'>×</button><h4 class='modal-title'><i class='icon-{icon}'></i> {title}</h4></div><div class='modal-body' style='height:{height}'><iframe id='{name}' name='{name}' src='{url}' frameborder='no' allowtransparency='true' scrolling='auto' hidefocus='' style='width: 100%; height: 100%; left: 0px;'></iframe></div></div></div>".format(options));
+                modal.html("<div class='icon-spinner icon-spin loader'></div><div class='modal-dialog modal-iframe' style='width: {width};'><div class='modal-content'><div class='modal-header'><button class='close' data-dismiss='modal'>×</button><h4 class='modal-title'><i class='icon-{icon}'></i> {title}</h4></div><div class='modal-body' style='height:{height}'><iframe id='{name}' name='{name}' src='{url}' frameborder='no' allowtransparency='true' scrolling='auto' hidefocus='' style='width: 100%; height: 100%; left: 0px;'></iframe></div></div></div>".format(options));
 
                 var modalBody = modal.find('.modal-body');
+                if(options.cssClass)
+                {
+                    modal.find('.modal-dialog').addClass(options.cssClass);
+                }
                 var frame = document.getElementById(options.name);
                 frame.onload = frame.onreadystatechange = function()
                 {
                     if (this.readyState && this.readyState != 'complete') return;
+
+                    modalBody.css('height', options.height - modal.find('.modal-header').outerHeight());
+
                     try
                     {
                         var $frame = $(window.frames[options.name].document);
-                        if($frame.find('#titlebar').length) modal.addClass('with-titlebar');
+                        if($frame.find('#titlebar').length)
+                        {
+                            modal.addClass('with-titlebar');
+                            if(options.size == 'fullscreen')
+                            {
+                                modalBody.css('height', options.height);
+                            }
+                        }
                         if(options.height == 'auto')
                         {
                             setTimeout(function()
diff --git a/www/theme/default/style.css b/www/theme/default/style.css
index 5300fa3e02..5acf436073 100644
--- a/www/theme/default/style.css
+++ b/www/theme/default/style.css
@@ -462,9 +462,6 @@ body {font-size: 12px; color:#141414;padding-bottom: 40px;}
 
 /* modal with iframe */
 .modal-dialog {transition: all .5s;}
-.modal-loading .modal-dialog {margin-top: -100%;}
-.loader {display: none}
-.modal-loading .loader{display: block; text-align: center; font-size: 56px; color: #fff; margin-top: 10%}
 .modal-iframe .modal-body {transition: all 0.5s; padding: 0}
 .modal.with-titlebar .modal-header {position: relative; height: 0; padding: 0; border: none; z-index: 999; min-height: 0}
 .modal.with-titlebar .modal-header .modal-body {z-index: 990}
@@ -475,6 +472,14 @@ body {font-size: 12px; color:#141414;padding-bottom: 40px;}
 .body-modal .outer > .main, .body-modal .outer > .container > .main, .body-modal > .main {padding: 10px 20px; margin: 0}
 .body-modal > form {padding-bottom: 15px;}
 .body-modal .outer > .container {padding: 0}
+.body-modal #titlebar .actions {right: 40px}
+
+.modal-dialog.fullscreen {width: 100% !important; height: 100% !important; margin: 0; border: none !important;}
+.modal-dialog.fullscreen .modal-body iframe {height: 100%}
+
+.modal-loading .modal-dialog {margin-top: -100%;}
+.loader {display: none}
+.modal-loading .loader{display: block; text-align: center; font-size: 56px; color: #fff; margin-top: 10%}
 
 /*-----------------------LAYOUT SETTING ----------------------------*/