diff --git a/module/project/css/create.css b/module/project/css/create.css
index fa0cdf6e0d..30ede19d20 100644
--- a/module/project/css/create.css
+++ b/module/project/css/create.css
@@ -1,6 +1,4 @@
 #tipsModal {margin-top: 10%;}
-#begin + .input-group-addon {border-left: none; border-right: none;}
-#begin,#end {max-width: 150px; width: auto}
 
 #copyProjectModal {padding: 0}
 #copyProjectModal {padding: 0 2px}
@@ -16,4 +14,5 @@
 
 .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {margin-top: 1px;}
 
-.type-tips {display: none; margin: 5px 0; color: #545454;}
+.type-tips {display: none;}
+.chosen-container-single .chosen-single > span{max-width:200px;}
diff --git a/module/project/js/common.js b/module/project/js/common.js
index b27ac9b066..cd2ea7ffe4 100644
--- a/module/project/js/common.js
+++ b/module/project/js/common.js
@@ -129,7 +129,7 @@ function loadBranches(product)
         var $product = $(product);
         if($product.val() != 0 && $product.val() == $(this).val() && $product.attr('id') != $(this).attr('id'))
         {
-            bootbox.alert(errorSameProducts);
+            alert(errorSameProducts);
             $product.val(0);
             $product.trigger("chosen:updated");
             return false;
@@ -139,11 +139,13 @@ function loadBranches(product)
     if($('#productsBox .input-group:last select:first').val() != 0)
     {
         var length = $('#productsBox .input-group').size();
-        $('#productsBox .row').append('<div class="col-sm-3">' + $('#productsBox .col-sm-3:last').html() + '</div>');
+        $('#productsBox .row').append('<div class="col-sm-4">' + $('#productsBox .col-sm-4:last').html() + '</div>');
         if($('#productsBox .input-group:last select').size() >= 2) $('#productsBox .input-group:last select:last').remove();
         $('#productsBox .input-group:last .chosen-container').remove();
         $('#productsBox .input-group:last select:first').attr('name', 'products[' + length + ']').attr('id', 'products' + length);
-        $('#productsBox .input-group:last .chosen').chosen(defaultChosenOptions);
+        $('#productsBox .input-group:last .chosen').chosen();
+
+        adjustProductBoxMargin();
     }
 
     var $inputgroup = $(product).closest('.input-group');
@@ -169,13 +171,40 @@ function loadBranches(product)
         {
             if(data)
             {
-                $("#plansBox .row").append('<div class="col-sm-3" id="plan' + productID+ '">' + data + '</div>');
+                $("#plansBox .row").append('<div class="col-sm-4" id="plan' + productID+ '">' + data + '</div>');
                 $("#plan" + $(product).val()).find('select').attr('name', 'plans[' + productID + ']').attr('id', 'plans' + productID);
+
+                adjustPlanBoxMargin();
             }
         });
     }
 }
 
+
+function adjustProductBoxMargin()
+{
+    var productRows = Math.ceil($('#productsBox > .row > .col-sm-4').length / 3);
+    if(productRows > 1)
+    {
+        for(i = 1; i <= productRows - 1; i++)
+        {
+            $('#productsBox .col-sm-4:lt(' + (i * 3) + ')').css('margin-bottom', '10px');
+        }
+    }
+}
+
+function adjustPlanBoxMargin()
+{
+    var planRows = Math.ceil($('#plansBox > .row > .col-sm-4').length / 3);
+    if(planRows > 1)
+    {
+        for(j = 1; j <= productRows - 1; j++)
+        {
+            $('#plansBox .col-sm-4:lt(' + (j * 3) + ')').css('margin-bottom', '10px');
+        }
+    }
+}
+
 function loadBranch(){}
 
 /* Auto compute the work days. */
@@ -217,4 +246,6 @@ $(function()
         e.stopPropagation();
         e.preventDefault();
     });
+
+    adjustProductBoxMargin();
 });
diff --git a/module/project/js/create.js b/module/project/js/create.js
index cec75c4dff..54a809d03a 100644
--- a/module/project/js/create.js
+++ b/module/project/js/create.js
@@ -7,12 +7,6 @@ $(function()
 {
     $('#cpmBtn').click(function(){$('#copyProjectModal').modal('show')});
     $('#copyProjects a').click(function(){setCopyProject($(this).data('id')); $('#copyProjectModal').modal('hide')});
-    var typeWidth = $('#type').closest('td').width();
-    $('#productsBox .col-sm-3,#plansBox .col-sm-3').width(typeWidth);
-    $(document).on('change', "#productsBox select", function()
-    {
-        $('#productsBox .col-sm-3,#plansBox .col-sm-3').width(typeWidth);
-    });
     $('#begin').on('change', function()
     {
        $("#end").val('');
diff --git a/module/project/view/create.html.php b/module/project/view/create.html.php
index 0b823d15e1..0765739716 100644
--- a/module/project/view/create.html.php
+++ b/module/project/view/create.html.php
@@ -27,120 +27,114 @@
 </html>
 <?php exit;?>
 <?php endif;?>
+
 <?php include '../../common/view/header.html.php';?>
-<?php include '../../common/view/datepicker.html.php';?>
 <?php include '../../common/view/kindeditor.html.php';?>
 <?php js::import($jsRoot . 'misc/date.js');?>
 <?php js::set('weekend', $config->project->weekend);?>
 <?php js::set('holders', $lang->project->placeholder);?>
-<div class='container mw-1400px'>
-  <div id='titlebar'>
-    <div class='heading'>
-      <span class='prefix'><?php echo html::icon($lang->icons['project']);?></span>
-      <strong><small class='text-muted'><i class='icon icon-plus'></i></small> <?php echo $lang->project->create;?></strong>
-    </div>
-    <div class='actions'>
-      <button class='btn' id='cpmBtn'><?php echo html::icon($lang->icons['copy']) . ' ' . $lang->project->copy;?></button>
+<?php js::set('errorSameProducts', $lang->project->errorSameProducts);?>
+<div id='mainContent' class='main-content'>
+  <div class='center-block'>
+    <div class='main-header'>
+      <h2><?php echo $lang->project->create;?></h2>
+      <div class="pull-right btn-toolbar">
+        <button type='button' class='btn btn-link' id='cpmBtn'><?php echo html::icon($lang->icons['copy']) . ' ' . $lang->project->copy;?></button>
+      </div>
     </div>
+    <form class='form-indicator main-form' method='post' target='hiddenwin' id='dataform'>
+      <table class='table table-form'>
+        <tr>
+          <th><?php echo $lang->project->name;?></th>
+          <td><?php echo html::input('name', $name, "class='form-control' autocomplete='off' required");?></td><td></td><td></td>
+        </tr>
+        <tr>
+          <th><?php echo $lang->project->code;?></th>
+          <td><?php echo html::input('code', $code, "class='form-control' autocomplete='off' required");?></td><td></td><td></td>
+        </tr>
+        <tr>
+          <th><?php echo $lang->project->dateRange;?></th>
+          <td>
+            <div class='input-group'>
+              <?php echo html::input('begin', (isset($plan) && !empty($plan->begin) ? $plan->begin : date('Y-m-d')), "class='form-control form-date' onchange='computeWorkDays()' placeholder='" . $lang->project->begin . "' required");?>
+              <span class='input-group-addon'><?php echo $lang->project->to;?></span>
+              <?php echo html::input('end', (isset($plan) && !empty($plan->end) ? $plan->end : ''), "class='form-control form-date' onchange='computeWorkDays()' placeholder='" . $lang->project->end . "' required");?>
+            </div>
+          </td>
+          <td colspan='2'><?php echo html::radio('delta', $lang->project->endList , '', "onclick='computeEndDate(this.value)'");?></td>
+        </tr>
+        <tr>
+          <th><?php echo $lang->project->days;?></th>
+          <td>
+            <div class='input-group'>
+              <?php echo html::input('days', (isset($plan) && !empty($plan->begin) ? helper::workDays($plan->begin, $plan->end) : ''), "class='form-control' autocomplete='off'");?>
+              <span class='input-group-addon'><?php echo $lang->project->day;?></span>
+            </div>
+          </td><td></td><td></td>
+        </tr>
+        <tr>
+          <th><?php echo $lang->project->teamname;?></th>
+          <td><?php echo html::input('team', $team, "class='form-control' autocomplete='off'");?></td><td></td><td></td>
+        </tr>
+        <tr>
+          <th><?php echo $lang->project->type;?></th>
+          <td><?php echo html::select('type', $lang->project->typeList, '', "class='form-control' onchange='showTypeTips()'");?></td>
+          <td class='muted' colspan='2'><div class='type-tips'><?php echo $lang->project->typeDesc;?></div></td>
+        </tr>
+        <tr <?php if($this->config->global->flow == 'onlyTask') echo "class='hidden'";?>>
+          <th><?php echo $lang->project->manageProducts;?></th>
+          <td class='text-left' id='productsBox' colspan="3">
+            <div class='row'>
+              <?php $i = 0;?>
+              <?php foreach($products as $product):?>
+              <div class='col-sm-4'>
+                <div class='input-group'>
+                  <?php echo html::select("products[$i]", $allProducts, $product->id, "class='form-control chosen' onchange='loadBranches(this)' data-last='" . $product->id . "'");?>
+                  <span class='input-group-addon fix-border'></span>
+                  <?php if($product->type != 'normal') echo html::select("branch[$i]", $branchGroups[$product->id], $product->branch, "class='form-control chosen'")?>
+                </div>
+              </div>
+              <?php $i++;?>
+              <?php endforeach;?>
+              <div class='col-sm-4'>
+                <div class='input-group'>
+                  <?php echo html::select("products[$i]", $allProducts, '', "class='form-control chosen' onchange='loadBranches(this)'");?>
+                  <span class='input-group-addon fix-border'></span>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr <?php if($this->config->global->flow == 'onlyTask') echo "class='hidden'";?>>
+          <th><?php echo $lang->project->linkPlan;?></th>
+          <td colspan="3" id="plansBox">
+            <div class='row'>
+              <?php if(isset($plan) && !empty($plan->begin)):?>
+              <div class="col-sm-4" id="plan<?php echo $plan->product;?>">
+                <?php echo html::select("plans[" . $plan->product . "]", $productPlan, $plan->id, "class='form-control'");?>
+              </div>
+              <?php endif;?>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <th><?php echo $lang->project->desc;?></th>
+          <td colspan='3'><?php echo html::textarea('desc', '', "rows='6' class='form-control kindeditor' hidefocus='true'");?></td>
+        </tr>
+        <tr>
+          <th><?php echo $lang->project->acl;?></th>
+          <td colspan='3'><?php echo nl2br(html::radio('acl', $lang->project->aclList, $acl, "onclick='setWhite(this.value);'", 'block'));?></td>
+        </tr>
+        <tr id='whitelistBox' <?php if($acl != 'custom') echo "class='hidden'";?>>
+          <th><?php echo $lang->project->whitelist;?></th>
+          <td colspan='3'><?php echo html::checkbox('whitelist', $groups, $whitelist, '', '', 'inline');?></td>
+        </tr>
+        <tr>
+          <td colspan='4' class='text-center'><?php echo html::submitButton('', '', 'btn btn-wide btn-primary') . html::backButton('', '', 'btn btn-wide btn-gray');?></td>
+        </tr>
+      </table>
+    </form>
   </div>
-  <form class='form-condensed' method='post' target='hiddenwin' id='dataform'>
-    <table class='table table-form'>
-      <tr>
-        <th class='w-100px'><?php echo $lang->project->name;?></th>
-        <td class='w-p25-f'><?php echo html::input('name', $name, "class='form-control' autocomplete='off'");?></td><td></td>
-      </tr>
-      <tr>
-        <th><?php echo $lang->project->code;?></th>
-        <td><?php echo html::input('code', $code, "class='form-control' autocomplete='off'");?></td>
-      </tr>
-      <tr>
-        <th><?php echo $lang->project->dateRange;?></th>
-        <td>
-          <div class='input-group'>
-            <?php echo html::input('begin', (isset($plan) && !empty($plan->begin) ? $plan->begin : date('Y-m-d')), "class='form-control w-100px form-date' onchange='computeWorkDays()' placeholder='" . $lang->project->begin . "'");?>
-            <span class='input-group-addon'><?php echo $lang->project->to;?></span>
-            <?php echo html::input('end', (isset($plan) && !empty($plan->end) ? $plan->end : ''), "class='form-control form-date' onchange='computeWorkDays()' placeholder='" . $lang->project->end . "'");?>
-          </div>
-        </td>
-        <td>
-          &nbsp; &nbsp; <?php echo html::radio('delta', $lang->project->endList , '', "onclick='computeEndDate(this.value)'");?>
-        </td>
-      </tr>
-      <tr>
-        <th><?php echo $lang->project->days;?></th>
-        <td>
-          <div class='input-group'>
-          <?php echo html::input('days', (isset($plan) && !empty($plan->begin) ? helper::workDays($plan->begin, $plan->end) : ''), "class='form-control' autocomplete='off'");?>
-            <span class='input-group-addon'><?php echo $lang->project->day;?></span>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <th><?php echo $lang->project->teamname;?></th>
-        <td><?php echo html::input('team', $team, "class='form-control' autocomplete='off'");?></td>
-      </tr>
-      <tr>
-        <th><?php echo $lang->project->type;?></th>
-        <td>
-          <?php echo html::select('type', $lang->project->typeList, '', "class='form-control' onchange='showTypeTips()'");?>
-        </td>
-        <td>
-          <div class='type-tips'><?php echo $lang->project->typeDesc;?></div>
-        </td>
-      </tr>
-      <tr <?php if($this->config->global->flow == 'onlyTask') echo "class='hidden'";?>>
-        <th><?php echo $lang->project->manageProducts;?></th>
-        <td class='text-left' id='productsBox' colspan="2">
-          <div class='row'>
-            <?php $i = 0;?>
-            <?php foreach($products as $product):?>
-            <div class='col-sm-3'>
-              <div class='input-group'>
-                <?php echo html::select("products[$i]", $allProducts, $product->id, "class='form-control chosen' onchange='loadBranches(this)' data-last='" . $product->id . "'");?>
-                <span class='input-group-addon fix-border' style='padding:0'></span>
-                <?php if($product->type != 'normal') echo html::select("branch[$i]", $branchGroups[$product->id], $product->branch, "class='form-control' style='width:80px'")?>
-              </div>
-            </div>
-            <?php $i++;?>
-            <?php endforeach;?>
-            <div class='col-sm-3'>
-              <div class='input-group'>
-                <?php echo html::select("products[$i]", $allProducts, '', "class='form-control chosen' onchange='loadBranches(this)'");?>
-                <span class='input-group-addon fix-border' style='padding:0'></span>
-              </div>
-            </div>
-          </div>
-        </td>
-      </tr>
-      <tr <?php if($this->config->global->flow == 'onlyTask') echo "class='hidden'";?>>
-        <th><?php echo $lang->project->linkPlan;?></th>
-        <td colspan="2" id="plansBox">
-          <div class='row'>
-            <?php if(isset($plan) && !empty($plan->begin)):?>
-            <div class="col-sm-3" id="plan<?php echo $plan->product;?>">
-              <?php echo html::select("plans[" . $plan->product . "]", $productPlan, $plan->id, "class='form-control'");?>
-            </div>
-            <?php endif;?>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <th><?php echo $lang->project->desc;?></th>
-        <td colspan='2'><?php echo html::textarea('desc', '', "rows='6' class='form-control'");?></td>
-      </tr>
-      <tr>
-        <th><?php echo $lang->project->acl;?></th>
-        <td colspan='2'><?php echo nl2br(html::radio('acl', $lang->project->aclList, $acl, "onclick='setWhite(this.value);'", 'block'));?></td>
-      </tr>
-      <tr id='whitelistBox' <?php if($acl != 'custom') echo "class='hidden'";?>>
-        <th><?php echo $lang->project->whitelist;?></th>
-        <td colspan='2'><?php echo html::checkbox('whitelist', $groups, $whitelist);?></td>
-      </tr>
-      <tr>
-        <td></td><td colspan='2' class='text-center'><?php echo html::submitButton() . html::backButton();?></td>
-      </tr>
-    </table>
-  </form>
 </div>
 <div class='modal fade' id='copyProjectModal'>
   <div class='modal-dialog mw-800px'>
@@ -150,21 +144,19 @@
     </div>
     <div class='modal-body'>
       <?php if(count($projects) == 1):?>
-      <div class='alert alert-warning'>
+      <div class='alert alert-warning with-icon'>
         <i class='icon-info-sign'></i>
-        <div class='content'>
-          <p><?php echo $lang->project->copyNoProject;?></p>
-        </div>
+        <div class='content'><?php echo $lang->project->copyNoProject;?></div>
       </div>
       <?php else:?>
       <div id='copyProjects' class='row'>
       <?php foreach ($projects as $id => $name):?>
       <?php if(empty($id)):?>
-        <?php if($copyProjectID != 0):?>
-        <div class='col-md-4 col-sm-6'><a href='javascript:;' data-id='' class='cancel'><?php echo html::icon($lang->icons['cancel']) . ' ' . $lang->project->cancelCopy;?></a></div>
-        <?php endif;?>
+      <?php if($copyProjectID != 0):?>
+      <div class='col-md-4 col-sm-6'><a href='javascript:;' data-id='' class='cancel'><?php echo html::icon($lang->icons['cancel']) . ' ' . $lang->project->cancelCopy;?></a></div>
+      <?php endif;?>
       <?php else: ?>
-        <div class='col-md-4 col-sm-6'><a href='javascript:;' data-id='<?php echo $id;?>' class='nobr <?php echo ($copyProjectID == $id) ? ' active' : '';?>'><?php echo html::icon($lang->icons['project'], 'text-muted') . ' ' . $name;?></a></div>
+      <div class='col-md-4 col-sm-6'><a href='javascript:;' data-id='<?php echo $id;?>' class='nobr <?php echo ($copyProjectID == $id) ? ' active' : '';?>'><?php echo html::icon($lang->icons['project'], 'text-muted') . ' ' . $name;?></a></div>
       <?php endif; ?>
       <?php endforeach;?>
       </div>
@@ -172,6 +164,4 @@
     </div>
   </div>
 </div>
-<?php js::set('weekend', $config->project->weekend);?>
-<?php js::set('errorSameProducts', $lang->project->errorSameProducts);?>
 <?php include '../../common/view/footer.html.php';?>
diff --git a/module/project/view/tips.html.php b/module/project/view/tips.html.php
index 93e982f658..9f2a06ae54 100644
--- a/module/project/view/tips.html.php
+++ b/module/project/view/tips.html.php
@@ -1,6 +1,6 @@
 <div style='margin: 0 auto; max-width: 400px'>
-  <h6><?php echo $lang->project->afterInfo;?></h6>
-  <div class='pdb-20'>
+  <p><strong><?php echo $lang->project->afterInfo;?></strong></p>
+  <div>
     <?php echo html::a($this->createLink('project', 'team', "projectID=$projectID"), $lang->project->setTeam, '', "class='btn'");?>
     <?php if($this->config->global->flow != 'onlyTask' && $project->type != 'ops') echo html::a($this->createLink('project', 'linkstory', "projectID=$projectID"), $lang->project->linkStory, '', "class='btn'");?>
     <?php echo html::a($this->createLink('task', 'create', "project=$projectID"), $lang->project->createTask, '', "class='btn'");?>