diff --git a/web/app/View/Layouts/default.ctp b/web/app/View/Layouts/default.ctp
index ca71a7f7a..4ce4abc92 100644
--- a/web/app/View/Layouts/default.ctp
+++ b/web/app/View/Layouts/default.ctp
@@ -34,6 +34,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
 		echo $this->Html->css('colorbox');
 		echo $this->Html->css('bootstrap-theme.min');
 		echo $this->Html->css('bootstrap.min');
+		echo $this->Html->css('main');
 
 		echo $this->fetch('meta');
 		echo $this->fetch('css');
diff --git a/web/app/View/Monitors/index.ctp b/web/app/View/Monitors/index.ctp
index 38d6ea49a..bbf15e219 100755
--- a/web/app/View/Monitors/index.ctp
+++ b/web/app/View/Monitors/index.ctp
@@ -4,9 +4,9 @@
   $this->end();
 ?>
 
-<div id="monitors" class="js-masonry" data-masonry-options='{ "gutter": 10, "itemSelector": ".monitor" }'>
+<div id="monitors">
   <?php foreach ($monitors as $monitor => $mon): ?>
-    <div class="panel panel-default monitor" id="Monitor_<?= $mon['Monitor']['Id']; ?>" style="width:<?php $mon['img']['width'];?>">
+    <div class="panel panel-default monitor pull-left" id="Monitor_<?= $mon['Monitor']['Id']; ?>" style="width:<?php echo Configure::read('ZM_WEB_LIST_THUMB_WIDTH'); ?>px;">
       <div class="panel-heading">
         <h4><?php echo $this->Html->link($mon['Monitor']['Name'],array('controller' => 'monitors', 'action' => 'view', $mon['Monitor']['Id'])); ?></h4>
       </div>
diff --git a/web/app/webroot/css/main.css b/web/app/webroot/css/main.css
new file mode 100644
index 000000000..3c5db08c6
--- /dev/null
+++ b/web/app/webroot/css/main.css
@@ -0,0 +1,3 @@
+.monitor{
+  margin: 5px;
+}