diff --git a/components/grid/grid.css b/components/grid/grid.css
index 6242395..1d26e28 100644
--- a/components/grid/grid.css
+++ b/components/grid/grid.css
@@ -1,19 +1,94 @@
 .grid {
 	display: flex;
-	flex-direction: column;
-	flex: 1;
 }
 
-.grid__row {
+.grid__item {
 	display: flex;
 	flex: 1;
+	position: relative;
 }
 
-.grid__cell {
+/*.grid-item__row {
+	flex: 1;
 	display: flex;
+	transition: margin 200ms;
+	height: 100%;
+	position: relative;
+}
+
+.grid-item__column {
 	flex: 1;
+	display: flex;
+	flex-direction: column;
+	transition: margin 200ms;
+	width: 100%;
+	position: relative;
+}
+
+.grid-item__top {
+	position: absolute;
+	top: 0;
+	left: 25%;
+	width: 50%;
+	height: 25%;
+}*/
+
+.grid-item__left {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 25%;
+	height: 100%;
+}
+
+/*.grid-item__center {
+	position: absolute;
+	top: 25%;
+	left: 25%;
+	width: 50%;
+	height: 50%;
+}*/
+
+.grid-item__center {
+	position: absolute;
+	top: 0;
+	left: 25%;
+	width: 50%;
+	height: 100%;
+}
+
+.grid-item__right {
+	position: absolute;
+	top: 0;
+	left: 75%;
+	width: 25%;
+	height: 100%;
+}
+
+/*.grid-item__bottom {
+	position: absolute;
+	top: 75%;
+	left: 25%;
+	width: 50%;
+	height: 25%;
+}
+
+.grid__item[data-drag-over='left'] {
+	margin: 0 0 0 32px;
+}
+
+.grid__item[data-drag-over='center'] {
+	margin: 0;
+}
+
+.grid__item[data-drag-over='right'] {
+	margin: 0 32px 0 0;
+}*/
+
+.grid__item[data-drag-over='left'] > .grid-item__left {
+	background: #e1bee7;
 }
 
-.grid__cell[data-dragging=true] {
-	opacity: .75;
+.grid__item[data-drag-over='right'] > .grid-item__right {
+	background: #e1bee7;
 }
\ No newline at end of file
diff --git a/components/grid/grid.js b/components/grid/grid.js
index f381ec7..b1ea870 100644
--- a/components/grid/grid.js
+++ b/components/grid/grid.js
@@ -3,53 +3,334 @@ function createGrid() {
 
 	grid.className = 'grid';
 
-	grid.addRow = function () {
+	/*grid.addCell = function () {
+		var cell = document.createElement('div'),
+			before = document.createElement('div'),
+			after = document.createElement('div');
+
+		before.className = 'grid-cell__before';
+		after.className = 'grid-cell__after';
+		cell.className = 'grid__cell';
+
+		cell.draggable = true;
+
+		cell.addEventListener('dragstart', function() {
+			this.dataset.dragging = true;
+		});
+
+		cell.addEventListener('dragend', function() {
+			delete this.dataset.dragging;
+		});
+
+		before.addEventListener('dragover', function(event) {
+			var drag = document.querySelector('.grid__cell[data-dragging=true]');
+
+			if (!event.target.dataset.dragging) {
+				this.parentNode.parentNode.insertBefore(drag, this.parentNode);
+			}
+		});
+
+		after.addEventListener('dragover', function(event) {
+			var drag = document.querySelector('.grid__cell[data-dragging=true]');
+
+			if (!event.target.dataset.dragging) {
+				this.parentNode.parentNode.insertBefore(drag, this.parentNode.nextElementSibling);
+			}
+		});
+
+		cell.addEventListener('dragleave', function() {
+			this.style.backgroundColor = '';
+		});
+
+		cell.appendChild(before);
+		cell.appendChild(after);
+		this.appendChild(cell);
+
+		return cell;
+	};
+
+	grid.addColumn = function (options) {
 		var row = document.createElement('div');
 
-		row.className = 'grid__row';
+		if (typeof options !== 'object') {
+			options = {};
+		}
 
-		row.addCell = function () {
-			var cell = document.createElement('div');
+		if (options.before !== false) {
+			var before = document.createElement('div');
 
-			cell.className = 'grid__cell';
+			before.className = 'grid-row__before';
 
-			cell.draggable = true;
+			before.addEventListener('dragover', function(event) {
+				var drag = document.querySelector('.grid__cell[data-dragging=true]');
 
-			cell.addEventListener('dragstart', function() {
-				this.dataset.dragging = true;
+				if (!event.target.dataset.dragging) {
+					this.parentNode.parentNode.insertBefore(drag, this.parentNode);
+				}
 			});
 
-			cell.addEventListener('dragend', function() {
-				delete this.dataset.dragging;
+			row.appendChild(before);
+		}
+
+		if (options.after !== false) {
+			var after = document.createElement('div');
+
+			after.className = 'grid-row__after';
+
+			after.addEventListener('dragover', function(event) {
+				var drag = document.querySelector('.grid__cell[data-dragging=true]');
+
+				if (!event.target.dataset.dragging) {
+					this.parentNode.parentNode.insertBefore(drag, this.parentNode.nextElementSibling);
+				}
 			});
 
-			cell.addEventListener('dragover', function(event) {
-				var drag = document.querySelector('.grid__cell[data-dragging=true]'),
-					x = event.layerX / (event.target.offsetWidth / 100),
-					y = event.layerY / (event.target.offsetHeight / 100);
+			row.appendChild(after);
+		}
+
+		row.className = 'grid__row';
+
+		row.addCell = this.addCell;
+
+		this.appendChild(row);
+
+		return row;
+	};
+
+	grid.addRow = function (options) {
+		var row = document.createElement('div');
+
+		row.parent = this;
+
+		if (typeof options !== 'object') {
+			options = {};
+		}
+
+		if (options.before !== false) {
+			var before = document.createElement('div');
+
+			before.className = 'grid-row__before';
+
+			before.addEventListener('dragover', function(event) {
+				var drag = document.querySelector('.grid__cell[data-dragging=true]');
 
 				if (!event.target.dataset.dragging) {
-					if (x < 50) {
-						this.parentNode.insertBefore(drag, this);
-					} else {
-						this.parentNode.insertBefore(drag, this.nextElementSibling);
-					}
+					this.parentNode.parentNode.insertBefore(drag, this.parentNode);
 				}
 			});
 
-			cell.addEventListener('dragleave', function() {
-				this.style.backgroundColor = '';
+			row.appendChild(before);
+		}
+
+		if (options.after !== false) {
+			var after = document.createElement('div');
+
+			after.className = 'grid-row__after';
+
+			after.addEventListener('dragover', function(event) {
+				var drag = document.querySelector('.grid__cell[data-dragging=true]');
+
+				if (!event.target.dataset.dragging) {
+					this.parentNode.parentNode.insertBefore(drag, this.parentNode.nextElementSibling);
+				}
 			});
 
-			this.appendChild(cell);
+			row.appendChild(after);
+		}
 
-			return cell;
-		};
+		row.className = 'grid__row';
+
+		row.addColumn = this.addColumn;
 
 		this.appendChild(row);
 
 		return row;
-	};
+	};*/
+
+	grid.addItem = function(options) {
+		var item = document.createElement('div'),
+			//row = document.createElement('div'),
+			left = document.createElement('div'),
+			right = document.createElement('div'),
+			//column = document.createElement('div'),
+			//top = document.createElement('div'),
+			center = document.createElement('div');
+			//bottom = document.createElement('div'),
+
+		item.className = 'grid__item';
+		//row.className = 'grid-item__row';
+		left.className = 'grid-item__left';
+		right.className = 'grid-item__right';
+		//column.className = 'grid-item__column';
+		//top.className = 'grid-item__top';
+		center.className = 'grid-item__center';
+		//bottom.className = 'grid-item__bottom';
+
+		if (typeof options !== 'object') {
+			options = {};
+		}
+
+		item.draggable = true;
+
+		item.options = options;
+		item.parent = this.parent || this;
+		item.addItem = this.addItem;
+
+		//row.parent = item;
+		left.parent = item;
+		right.parent = item;
+		//column.parent = item;
+		//top.parent = item;
+		center.parent = item;
+		//bottom.parent = item;
+
+
+		// MOUSE OVER
+		item.addEventListener('mouseover', function(event) {
+			var target = event.target.parentNode;
+
+			if (target.classList.contains('grid__item')) {
+				target.classList.add('grid__item--hover');
+			}
+		});
+
+		item.addEventListener('mouseout', function(event) {
+			var target = event.target.parentNode;
+
+			if (target.classList.contains('grid__item')) {
+				target.classList.remove('grid__item--hover');
+			}
+		});
+
+
+		// DRAG & DROP (CHILD)
+		item.addEventListener('dragstart', function(event) {
+			event.target.parent.dragChild = event.target;
+
+			event.target.classList.add('grid__item--drag');
+		});
+
+		item.addEventListener('dragend', function(event) {
+			var parent = this.parent.dragParent,
+				child = this.parent.dragChild;
+
+			if (parent && child) {
+			console.log(parent.type);
+				if (parent.type === 'left') {
+					var target = parent.target;
+
+					target.parentNode.insertBefore(target.parent.dragChild, target);
+				} else if (parent.type === 'center') {
+					var target = parent.target;
+
+					target.appendChild(target.parent.dragChild);
+				} else if (parent.type === 'right') {
+					var target = parent.target;
+
+					target.parentNode.insertBefore(target.parent.dragChild, target.nextElementSibling);
+				}
+			}
+
+			delete this.parent.dragParent;
+			delete this.parent.dragChild;
+			
+			event.target.classList.remove('grid__item--drag');
+		});
+
+
+		// DRAG & DROP (INSERT BEFORE PARENT)
+		left.addEventListener('dragover', function(event) {
+			var target = event.target.parentNode;
+
+			if (target.classList.contains('grid__item--drag') === false) {
+				target.classList.add('grid__item--dragover');
+
+				target.dataset.dragOver = 'left';
+
+				target.parent.dragParent = {
+					type: 'left',
+					target: target
+				};
+			}
+		});
+
+		left.addEventListener('dragleave', function(event) {
+			var target = event.target.parentNode;
+
+			delete target.dataset.dragOver;
+
+			target.classList.remove('grid__item--dragover');
+		});
+
+		// DRAG & DROP (INSERT TO PARENT)
+		center.addEventListener('dragover', function(event) {
+			var target = event.target.parentNode;
+
+			if (target.classList.contains('grid__item--drag') === false) {
+				target.classList.add('grid__item--dragover');
+
+				target.dataset.dragOver = 'center';
+
+				target.parent.dragParent = {
+					type: 'center',
+					target: target
+				};
+			}
+		});
+
+		center.addEventListener('dragleave', function(event) {
+			var target = event.target.parentNode;
+
+			delete target.dataset.dragOver;
+
+			target.classList.remove('grid__item--dragover');
+		});
+
+		// DRAG & DROP (INSERT AFTER PARENT)
+		right.addEventListener('dragover', function(event) {
+			var target = event.target.parentNode;
+
+			if (target.classList.contains('grid__item--drag') === false) {
+				target.classList.add('grid__item--dragover');
+
+				target.dataset.dragOver = 'right';
+
+				target.parent.dragParent = {
+					type: 'right',
+					target: target
+				};
+			}
+		});
+
+		right.addEventListener('dragleave', function(event) {
+			var target = event.target.parentNode;
+
+			delete target.dataset.dragOver;
+
+			target.classList.remove('grid__item--dragover');
+		});
+
+		//item.appendChild(row);
+		item.appendChild(left);
+		item.appendChild(center);
+		item.appendChild(right);
+		/*row.appendChild(left);
+		row.appendChild(column);
+		row.appendChild(right);
+		column.appendChild(top);
+		column.appendChild(center);
+		column.appendChild(bottom);*/
+		
+		/*if (this.classList.contains('grid__item')) {
+			this.children[0].children[1].appendChild(item);
+		} else {
+			this.appendChild(item);
+		}*/
+
+		this.appendChild(item);
+
+		return item;
+	}
 
 	return grid;
 }
\ No newline at end of file
diff --git a/components/table/table.css b/components/table/table.css
index e4e6101..0ae355f 100644
--- a/components/table/table.css
+++ b/components/table/table.css
@@ -48,6 +48,16 @@
     display: flex;
 }
 
+.table__body > .selected {
+    background: #FFD740;
+    color: #222;
+}
+
+.table__body > .selection {
+    background: #FFAB00;
+    color: #222;
+}
+
 .table__body>div>div {
     overflow: hidden;
     margin: 8px;
diff --git a/components/table/table.js b/components/table/table.js
index f9bb055..649db7e 100644
--- a/components/table/table.js
+++ b/components/table/table.js
@@ -7,12 +7,14 @@ function createTable(columns, data) {
 		head = document.createElement('div'),
 		body = document.createElement('div'),
 		footer = document.createElement('div'),
+		selection = document.createElement('div'),
 		pagination = document.createElement('div');
 
 	table.className = 'table';
 	head.className = 'table__head';
 	body.className = 'table__body';
 	footer.className = 'table__footer';
+	selection.className = 'table__selection';
 	pagination.className = 'table__pagination';
 
 	table.order = {
@@ -22,6 +24,10 @@ function createTable(columns, data) {
 	table.data = data;
 	table.pageIndex = 1;
 	table.body = body;
+	table.selection = {
+		element: selection,
+		rows: {}
+	};
 	table.pagination = pagination;
 
 	table.sort = function() {
@@ -67,6 +73,9 @@ function createTable(columns, data) {
 		for (var i = this.pageIndex * 100 - 100, l = Math.min(this.data.length, i + 100); i < l; i++) {
 			var row = document.createElement('div');
 
+			row.data = this.data[i];
+			row.index = i;
+
 			for (var j = 0, k = this.data[i].length; j < k; j++) {
 				var column = document.createElement('div');
 
@@ -160,8 +169,180 @@ function createTable(columns, data) {
 		head.appendChild(column);
 	}
 
+	function createSelectionBar(table) {
+	    var bar = table.selection.element;
+
+	    if (bar.children.length > 0) {
+	        return;
+	    }
+	    
+	    var undo_button = document.createElement('button'),
+	        delete_button = document.createElement('button'),
+	        bookmark_button = document.createElement('button');
+
+	    undo_button.textContent = 'Undo selection';
+	    delete_button.textContent = 'Delete';
+	    bookmark_button.textContent = 'Bookmark';
+
+	    undo_button.addEventListener('click', function() {
+	        var table = this.parentNode.parentNode.parentNode,
+	            elements = table.querySelectorAll('.selected');
+
+	        for (var i = 0, l = elements.length; i < l; i++) {
+	            elements[i].classList.remove('selected');
+	        }
+
+	        removeSelectionBar(table);
+
+	        table.data.selection = {
+	            length: 0
+	        };
+	    });
+
+	    delete_button.addEventListener('click', function() {
+	        var table = this.parentNode.parentNode.parentNode,
+	            elements = table.querySelectorAll('.selected');
+
+	        for (var i = elements.length - 1; i > 0; i--) {
+	            var element = elements[i - 1];
+
+	            delete table.data.table[element.data.index];
+	            delete table.data.selection[element.data.index];
+
+	            element.remove();
+	        }
+
+	        removeSelectionBar(table);
+
+	        table.data.selection = {
+	            length: 0
+	        };
+	    });
+
+	    bookmark_button.addEventListener('click', function() {
+	        var table = this.parentNode.parentNode.parentNode;
+
+	        for (var key in table.data.selection) {
+	            var element = elements[key];
+
+	            delete table.data.table[element.data.index];
+	            delete table.data.selection[element.data.index];
+
+	            chrome.bookmarks.create({
+	                title: this.parentNode.children[1].innerText,
+	                url: this.parentNode.children[2].children[0].href,
+	                parentId: '1'
+	            }, function (item) {
+	                self.bookmarkId = item.id;
+	            });
+	        }
+	    });
+
+	    bar.appendChild(undo_button);
+	    bar.appendChild(delete_button);
+	    bar.appendChild(bookmark_button);
+	}
+
+	function removeSelectionBar(table) {
+	    var elements = table.selection.element.children;
+
+	    for (var i = elements.length; i > 0; i--) {
+	        elements[i - 1].remove();
+	    }
+	}
+
+	table.addEventListener('mousedown', function(event) {
+		var table = this,
+	        rows = [],
+	        start_row,
+	        next_row,
+	        end_row,
+	        start_mouse_y = 0,
+	        end_mouse_y = 0;
+
+	    function mousemove(event) {
+	        for (var i = 0, l = rows.length; i < l; i++) {
+	            rows[i].classList.remove('selection');
+	        }
+
+	        rows.splice(1, rows.length);
+
+	        for (var i = 0, l = event.path.length; i < l; i++) {
+	            var item = event.path[i];
+
+	            if (item.parentNode && item.parentNode.className === 'table__body') {
+	                end_row = item;
+	            }
+	        }
+
+	        if (end_row && start_row !== end_row) {
+	            next_row = start_row;
+
+	            while (next_row !== end_row) {
+	                if (start_mouse_y < event.clientY) {
+	                    next_row = next_row.nextElementSibling;
+	                } else {
+	                    next_row = next_row.previousElementSibling;
+	                }
+	                
+	                rows.push(next_row);
+	            }
+	        }
+	        
+	        for (var i = 0, l = rows.length; i < l; i++) {
+	            rows[i].classList.add('selection');
+	        }
+	    }
+
+	    function mouseup() {
+	        for (var i = 0, l = rows.length; i < l; i++) {
+	            var row = rows[i];
+
+	            row.classList.remove('selection');
+	            row.classList.toggle('selected');
+
+	            if (row.classList.contains('selected')) {
+	                table.selection.rows[row.index] = row.data;
+
+	                table.selection.rows.length++;
+	            } else {
+	                delete table.selection.rows[row.index];
+
+	                table.selection.rows.length--;
+	            }
+	        }
+
+	        if (table.selection.rows.length === 0) {
+	            removeSelectionBar(table);
+	        } else {
+	            createSelectionBar(table);
+	        }
+
+	        window.removeEventListener('mousemove', mousemove);
+	        window.removeEventListener('mouseup', mouseup);
+	    }
+
+	    window.addEventListener('mousemove', mousemove);
+	    window.addEventListener('mouseup', mouseup);
+
+	    start_mouse_y = event.clientY;
+
+	    for (var i = 0, l = event.path.length; i < l; i++) {
+	        var item = event.path[i];
+
+	        if (item.parentNode && item.parentNode.className === 'table__body') {
+	            start_row = item;
+
+	            rows.push(start_row);
+
+	            event.preventDefault();
+	        }
+	    }
+	});
+
 	table.appendChild(head);
 	table.appendChild(body);
+	footer.appendChild(selection);
 	footer.appendChild(pagination);
 	table.appendChild(footer);
 
diff --git a/index-testing.html b/index-testing.html
new file mode 100644
index 0000000..31eb4be
--- /dev/null
+++ b/index-testing.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width">
+		<title>History Manager</title>
+		<style>
+			body {
+				display: flex;
+				overflow: hidden;
+				height: 100vh;
+				margin: 0;
+				background: #fff;
+			}
+
+			.grid {
+				flex: 1;
+			}
+
+			.grid > *::before {
+				content: 'DOUBLE CLICK, then DRAG & DROP';
+				position: absolute;
+				pointer-events: none;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				z-index: 1
+			}
+
+			.grid__item {
+				box-sizing: border-box;
+				border: 1px solid rgba(0, 0, 0, .1);
+				background: rgba(0, 0, 0, .1);
+				position: relative;
+    			z-index: 1;
+    			margin: 16px;
+			}
+
+			/*.grid-item__row {
+				padding: 0 16px;
+			}
+
+			.grid-item__column {
+				padding: 16px 0;
+			}*/
+
+			.grid__item--hover {
+				background: #d7e3ff;
+			}
+
+			.grid__item--drag {
+				opacity: .4;
+				background: #fff8e1;
+			}
+
+			.grid__item--dragover {
+				background: #dcedc8;
+			}
+		</style>
+	</head>
+	<body>
+		<link rel="stylesheet" href="components/grid/grid.css">
+		<script src="components/grid/grid.js"></script>
+		<script src="script-testing.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 725c359..a0b9bc5 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,7 +15,7 @@
         ]
     },
 
-    "chrome_url_overrides": {
+    "2chrome_url_overrides": {
         "newtab": "index.html"
     },
 
diff --git a/script-testing.js b/script-testing.js
new file mode 100644
index 0000000..eb09d78
--- /dev/null
+++ b/script-testing.js
@@ -0,0 +1,26 @@
+/*var grid = createGrid(),
+	row1 = grid.addRow(),
+	row2 = grid.addRow(),
+	row3 = grid.addRow();
+
+/*row1.addCell().appendChild(document.createTextNode('#001'));
+row1.addCell().appendChild(document.createTextNode('#002'));
+row1.addCell().appendChild(document.createTextNode('#003'));
+
+row2.addCell().appendChild(document.createTextNode('#004'));
+row2.addCell().appendChild(document.createTextNode('#005'));
+
+row3.addCell().appendChild(document.createTextNode('#006'));*/
+
+var grid = createGrid(),
+	item = grid.addItem();
+
+function addNewItem(event) {
+	event.stopPropagation();
+
+	this.addItem().addEventListener('dblclick', addNewItem);
+}
+
+item.addEventListener('dblclick', addNewItem);
+
+document.body.appendChild(grid);
\ No newline at end of file