diff --git a/daisen/static/src/css/app.css b/daisen/static/src/css/app.css
index d78ac03..ffae862 100644
--- a/daisen/static/src/css/app.css
+++ b/daisen/static/src/css/app.css
@@ -24,22 +24,17 @@ body {
   position: relative;
 }
 
-#inner-container {
-  display: flex;
-}
-
 .pagination-container {
   position: fixed;
   bottom: 0;
-  display: flex;
   align-items: center;
   justify-content: space-between;
-  color:#2c7bb6
+  color: #2c7bb6;
+  z-index: 1000;
 }
 
 .page-info {
   margin-left: 10px;
-  margin-bottom: -10px;
 }
 
 .burger-menu {
diff --git a/daisen/static/src/dashboard.ts b/daisen/static/src/dashboard.ts
index ad6ca9f..b497188 100644
--- a/daisen/static/src/dashboard.ts
+++ b/daisen/static/src/dashboard.ts
@@ -67,6 +67,8 @@ class Dashboard {
     this._pageBtnContainer = pageBtnContainer;
     this._toolBar = toolBar;
   
+    this._canvas.classList.add('canvas-container');
+    
     const burgerMenu = document.createElement('div');
     burgerMenu.classList.add('burger-menu');
     burgerMenu.innerHTML = `
@@ -100,7 +102,6 @@ class Dashboard {
       }
       this._resize();
     }, 200));
-  
     this._addZoomResetButton(this._toolBar);
     this._addFilterUI(this._toolBar);
     this._addPrimarySelector(this._toolBar);
@@ -117,30 +118,55 @@ class Dashboard {
     this._resetNumRowCol();
     const width = this._widgetWidth();
     const height = this._widgetHeight();
-    console.log(width, height);
     this._widgets.forEach((w: Widget) => {
       w.resize(width, height);
     });
   }
 
   _resetNumRowCol() {
-    const minWidgetWidth = 300;
+    const rowColTable = [
+      [0, 0],
+      [1, 1],
+      [2, 1],
+      [2, 2],
+      [2, 2],
+      [2, 3],
+      [2, 3],
+      [3, 3],
+      [3, 3],
+      [3, 3],
+      [3, 4],
+      [3, 4],
+      [3, 4],
+      [4, 4],
+      [4, 4],
+      [4, 4],
+      [4, 4],
+    ];
     const width = window.innerWidth;
     const height = window.innerHeight;
-    this._numCol = Math.min(4, Math.ceil(width / minWidgetWidth));
-    if (this._numCol < 1) this._numCol = 1; 
-    this._numRow = Math.ceil(this._numWidget / this._numCol);
-    console.log(this._numRow, this._numCol);
+    this._numCol = rowColTable[this._numWidget][0];
+    this._numRow = rowColTable[this._numWidget][1];
+    if (width >= 800) {
+      this._numCol = 4;
+    }
+    if (width < 800 && width >= 500) {
+      this._numCol = 3;
+    }
+    if (width < 500) {
+      this._numCol = 2;
+    }
+    console.log(width, height);
   }
 
   _widgetWidth(): number {
+    this._resetNumRowCol();
     const numGap = this._numCol + 1;
     const marginLeft = 5;
     const gapSpace = numGap * marginLeft;
     const widgetSpace = this._canvas.offsetWidth - gapSpace;
     const width = Math.floor(widgetSpace / this._numCol);
-    // return width;
-    return Math.max(width, 300);
+    return width;
   }
 
   _widgetHeight(): number {
@@ -250,6 +276,7 @@ class Dashboard {
     };
   
     container.appendChild(selectorGroup);
+    this._canvas.classList.add('canvas-container');
   }
   
   _addSecondarySelector(container: HTMLElement) {
@@ -616,6 +643,7 @@ class Dashboard {
       widget.render(true);
     });
   }
+
 }
 
 export default Dashboard;
\ No newline at end of file