diff --git a/production/index3.html b/production/index3.html
index ac9ed448..f649c97b 100755
--- a/production/index3.html
+++ b/production/index3.html
@@ -436,7 +436,7 @@
               </div>
 
               <div class="col-md-4 col-sm-6 ">
-                <div class="x_panel fixed_height_320">
+                <div class="x_panel tile fixed_height_320">
                   <div class="x_title">
                     <h2>Daily users <small>Sessions</small></h2>
                     <ul class="nav navbar-right panel_toolbox">
diff --git a/production/tables_dynamic.html b/production/tables_dynamic.html
index 3f68d149..28969068 100755
--- a/production/tables_dynamic.html
+++ b/production/tables_dynamic.html
@@ -10,6 +10,7 @@
     <title>DataTables | Gentelella</title>
 
     <!-- Bootstrap -->
+    <link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
     <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->
     <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
@@ -18,6 +19,7 @@
     <!-- iCheck -->
     <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
     <!-- Datatables -->
+    
     <link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
     <link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
     <link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
@@ -292,7 +294,7 @@
             <div class="clearfix"></div>
 
             <div class="row">
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Default Example <small>Users</small></h2>
@@ -312,6 +314,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
                     </p>
@@ -788,10 +793,13 @@
                       </tbody>
                     </table>
                   </div>
+                  </div>
+              </div>
+            </div>
                 </div>
               </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Plus Table Design</small></h2>
@@ -811,6 +819,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
                     </p>
@@ -1461,10 +1472,13 @@
                       </tbody>
                     </table>
                   </div>
+                  </div>
+              </div>
+            </div>
                 </div>
               </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Button Example <small>Users</small></h2>
@@ -1484,6 +1498,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built.
                     </p>
@@ -1962,8 +1979,11 @@
                   </div>
                 </div>
               </div>
+            </div>
+                </div>
+              </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Fixed Header Example <small>Users</small></h2>
@@ -1983,6 +2003,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       This example shows FixedHeader being styling by the Bootstrap CSS framework.
                     </p>
@@ -2461,8 +2484,11 @@
                   </div>
                 </div>
               </div>
+            </div>
+                </div>
+              </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>KeyTable example <small>Users</small></h2>
@@ -2968,7 +2994,7 @@
                 </div>
               </div>
 
-              <div class="col-md-12 col-sm-12 col-xs-12">
+              <div class="col-md-12 col-sm-12 ">
                 <div class="x_panel">
                   <div class="x_title">
                     <h2>Responsive example<small>Users</small></h2>
@@ -2988,6 +3014,9 @@
                     <div class="clearfix"></div>
                   </div>
                   <div class="x_content">
+                      <div class="row">
+                          <div class="col-sm-12">
+                            <div class="card-box table-responsive">
                     <p class="text-muted font-13 m-b-30">
                       Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.
                     </p>
@@ -3641,6 +3670,9 @@
                   </div>
                 </div>
               </div>
+            </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index 939dbd00..2a7b7472 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -481,6 +481,7 @@
   .item{
     display:block;
   }
+
 }
 .nav-md .container.body .col-md-3.left_col {
   min-height: 100%;
@@ -538,7 +539,7 @@ body .container.body .right_col {
     font-size: 17px;
   }
   .tile, .graph {
-    zoom: 85%;
+    zoom: 75%;
     height: inherit;
   }
   .item{
@@ -1464,21 +1465,21 @@ table.jambo_table tbody tr.selected td {
 //   zoom: 1;
 // }
 
-.dataTables_processing {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 250px;
-  height: 30px;
-  margin-left: -125px;
-  margin-top: -15px;
-  padding: 14px 0 2px 0;
-  border: 1px solid #ddd;
-  text-align: center;
-  color: #999;
-  font-size: 14px;
-  background-color: white;
-}
+// .dataTables_processing {
+//   position: absolute;
+//   top: 50%;
+//   left: 50%;
+//   width: 250px;
+//   height: 30px;
+//   margin-left: -125px;
+//   margin-top: -15px;
+//   padding: 14px 0 2px 0;
+//   border: 1px solid #ddd;
+//   text-align: center;
+//   color: #999;
+//   font-size: 14px;
+//   background-color: white;
+// }
 
 // .dataTables_length {
 //   width: auto;
@@ -1492,10 +1493,10 @@ table.jambo_table tbody tr.selected td {
 //   text-align: right;
 // }
 
-.dataTables_info {
-  width: 60%;
-  float: left;
-}
+// .dataTables_info {
+//   width: 60%;
+//   float: left;
+// }
 
 .dataTables_paginate {
   float: right;
@@ -1543,27 +1544,27 @@ table.display thead th:active, table.display thead td:active {
   outline: none;
 }
 
-.dataTables_scroll {
-  clear: both;
-}
+// .dataTables_scroll {
+//   clear: both;
+// }
 
-.dataTables_scrollBody {
-  *margin-top: -1px;
-  -webkit-overflow-scrolling: touch;
-}
+// .dataTables_scrollBody {
+//   *margin-top: -1px;
+//   -webkit-overflow-scrolling: touch;
+// }
 
-.top, .bottom {}
-.top .dataTables_info {
-  float: none;
-}
+// .top, .bottom {}
+// .top .dataTables_info {
+//   float: none;
+// }
 
 .clear {
   clear: both;
 }
 
-.dataTables_empty {
-  text-align: center;
-}
+// .dataTables_empty {
+//   text-align: center;
+// }
 
 tfoot input {
   margin: 0.5em 0;
@@ -1586,9 +1587,9 @@ td.details {
   border: 2px solid #A19B9E;
 }
 
-.example_alt_pagination div.dataTables_info {
-  width: 40%;
-}
+// .example_alt_pagination div.dataTables_info {
+//   width: 40%;
+// }
 
 .paging_full_numbers {
   width: 400px;
@@ -4709,6 +4710,10 @@ ul.notifications {
     right: 135px;
     top: 7px;
 }
+.tile, .graph {
+  zoom: 70%;
+  height: inherit;
+}
 }
 @media (min-width: 768px) and (max-width: 1024px){
   .info-number .badge {