diff --git a/Gruntfile.js b/Gruntfile.js
index 272ac9f..1d1f6af 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -8,11 +8,31 @@ module.exports = function(grunt) {
             },
             dist: {
                 files: {
-                    'dist/<%= pkg.name %>.min.js': ['src/leaflet.orderlayers.js']
+                    'dist/<%= pkg.name %>.min.js': ['src/leaflet.control.orderlayers.js'],
                 }
             }
         },
 
+		cssmin: {
+			add_banner: {
+				options: {
+					banner:'/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
+				},
+				files: {
+					'dist/css/<%= pkg.name %>.min.css':['src/css/*.css']
+				}
+			}
+		},
+		
+		copy: {
+			main: {
+				expand: true,
+				cwd: 'src/',
+				src: '**',
+				dest: 'dist/',
+			},
+		},
+
         jshint: {
             options: {
                 jquery: true,
@@ -36,7 +56,7 @@ module.exports = function(grunt) {
                 }
             },
             source: {
-                src: ['src/leaflet.orderlayers.js']
+                src: ['src/leaflet.control.orderlayers.js']
             },
             tests: {
                 src: ['test/unit/*.js', 'test/e2e/*.js'],
@@ -88,13 +108,15 @@ module.exports = function(grunt) {
 
     grunt.loadNpmTasks('grunt-contrib-jshint');
     grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-contrib-connect');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-karma');
 
     grunt.registerTask('test:e2e', ['connect:testserver', 'karma:e2e']);
     grunt.registerTask('test', ['karma:unit', 'test:e2e']);
+    grunt.registerTask('release', ['copy', 'uglify', 'cssmin']);
     grunt.registerTask('server', ['connect:server']);
     grunt.registerTask('default', ['karma:background', 'watch']);
-
 };
diff --git a/dist/css/leaflet.control.orderlayers.css b/dist/css/leaflet.control.orderlayers.css
new file mode 100644
index 0000000..661567f
--- /dev/null
+++ b/dist/css/leaflet.control.orderlayers.css
@@ -0,0 +1,50 @@
+.leaflet-control-layers {
+	width: 150px;
+	padding: 10px !important;
+}
+
+.leaflet-control-layers-separator {
+	float: left;
+    width: 100%;
+}
+
+.leaflet-control-layers .leaflet-control-layers-title {
+	font-size: 1.2em;
+}
+
+.leaflet-control-layers .leaflet-row {
+	float: left;
+    width: 100%;
+}
+
+.leaflet-control-layers .leaflet-row .leaflet-input {
+	float: left;
+	width: 15%;
+}
+
+.leaflet-control-layers .leaflet-row .leaflet-name {
+	float: left;
+	width: 60%;
+}
+
+.leaflet-control-layers .leaflet-row .leaflet-up {
+	float: left;
+	background-image: url(../images/arrow-up.png);
+	background-repeat: no-repeat;
+	background-position: center;
+    height: 20px;
+    width: 16px;
+    opacity: 0.75;
+    cursor: pointer;
+}
+
+.leaflet-control-layers .leaflet-row .leaflet-down {
+	float: left;
+	background-image: url(../images/arrow-down.png);
+	background-repeat: no-repeat;
+	background-position: center;
+    height: 20px;
+    width: 16px;
+    opacity: 0.75;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/dist/css/leaflet.control.orderlayers.min.css b/dist/css/leaflet.control.orderlayers.min.css
new file mode 100644
index 0000000..fa25b82
--- /dev/null
+++ b/dist/css/leaflet.control.orderlayers.min.css
@@ -0,0 +1,3 @@
+/*! leaflet.control.orderlayers 26-09-2013 */
+
+.leaflet-control-layers{width:150px;padding:10px!important}.leaflet-control-layers-separator{float:left;width:100%}.leaflet-control-layers .leaflet-control-layers-title{font-size:1.2em}.leaflet-control-layers .leaflet-row{float:left;width:100%}.leaflet-control-layers .leaflet-row .leaflet-input{float:left;width:15%}.leaflet-control-layers .leaflet-row .leaflet-name{float:left;width:60%}.leaflet-control-layers .leaflet-row .leaflet-up{float:left;background-image:url(../images/arrow-up.png);background-repeat:no-repeat;background-position:center;height:20px;width:16px;opacity:.75;cursor:pointer}.leaflet-control-layers .leaflet-row .leaflet-down{float:left;background-image:url(../images/arrow-down.png);background-repeat:no-repeat;background-position:center;height:20px;width:16px;opacity:.75;cursor:pointer}
\ No newline at end of file
diff --git a/dist/images/arrow-down.png b/dist/images/arrow-down.png
new file mode 100644
index 0000000..bcef3ff
Binary files /dev/null and b/dist/images/arrow-down.png differ
diff --git a/dist/images/arrow-up.png b/dist/images/arrow-up.png
new file mode 100644
index 0000000..5a396c9
Binary files /dev/null and b/dist/images/arrow-up.png differ
diff --git a/src/leaflet.orderlayers.js b/dist/leaflet.control.orderlayers.js
similarity index 100%
rename from src/leaflet.orderlayers.js
rename to dist/leaflet.control.orderlayers.js
diff --git a/package.json b/package.json
index 78ea488..834f279 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "version": "0.1.0",
   "homepage": "http://elesdoar.github.io/leaflet-control-orderlayers/",
   "repository": {
-  	"type": "git",
+    "type": "git",
     "url": "https://github.com/elesdoar/leaflet-control-orderlayers"
   },
   "keywords": [
@@ -20,13 +20,14 @@
     "grunt": "latest",
     "grunt-contrib-uglify": "latest",
     "grunt-contrib-jshint": "latest",
-    "grunt-contrib-copy": "latest",
+    "grunt-contrib-copy": "~0.4.1",
     "grunt-contrib-watch": "latest",
     "grunt-contrib-concat": "latest",
     "grunt-contrib-connect": "latest",
     "grunt-karma": "latest",
     "jasmine-node": "latest",
     "karma": "latest",
-    "karma-ng-scenario": "latest"
+    "karma-ng-scenario": "latest",
+    "grunt-contrib-cssmin": "~0.6.2"
   }
 }
diff --git a/src/css/leaflet.control.orderlayers.css b/src/css/leaflet.control.orderlayers.css
new file mode 100644
index 0000000..661567f
--- /dev/null
+++ b/src/css/leaflet.control.orderlayers.css
@@ -0,0 +1,50 @@
+.leaflet-control-layers {
+	width: 150px;
+	padding: 10px !important;
+}
+
+.leaflet-control-layers-separator {
+	float: left;
+    width: 100%;
+}
+
+.leaflet-control-layers .leaflet-control-layers-title {
+	font-size: 1.2em;
+}
+
+.leaflet-control-layers .leaflet-row {
+	float: left;
+    width: 100%;
+}
+
+.leaflet-control-layers .leaflet-row .leaflet-input {
+	float: left;
+	width: 15%;
+}
+
+.leaflet-control-layers .leaflet-row .leaflet-name {
+	float: left;
+	width: 60%;
+}
+
+.leaflet-control-layers .leaflet-row .leaflet-up {
+	float: left;
+	background-image: url(../images/arrow-up.png);
+	background-repeat: no-repeat;
+	background-position: center;
+    height: 20px;
+    width: 16px;
+    opacity: 0.75;
+    cursor: pointer;
+}
+
+.leaflet-control-layers .leaflet-row .leaflet-down {
+	float: left;
+	background-image: url(../images/arrow-down.png);
+	background-repeat: no-repeat;
+	background-position: center;
+    height: 20px;
+    width: 16px;
+    opacity: 0.75;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/images/arrow-down.png b/src/images/arrow-down.png
new file mode 100644
index 0000000..bcef3ff
Binary files /dev/null and b/src/images/arrow-down.png differ
diff --git a/src/images/arrow-up.png b/src/images/arrow-up.png
new file mode 100644
index 0000000..5a396c9
Binary files /dev/null and b/src/images/arrow-up.png differ
diff --git a/src/leaflet.control.orderlayers.js b/src/leaflet.control.orderlayers.js
new file mode 100644
index 0000000..f73166c
--- /dev/null
+++ b/src/leaflet.control.orderlayers.js
@@ -0,0 +1,346 @@
+/*
+ * L.Control.OrderLayers is a control to allow users to switch between different layers on the map.
+ */
+
+L.Control.OrderLayers = L.Control.extend({
+	options: {
+		collapsed: true,
+		position: 'topright',
+		autoZIndex: true,
+		title: 'Administrador de Capas'
+	},
+
+	initialize: function (baseLayers, overlays, options) {
+		L.setOptions(this, options);
+
+		this._layers = {};
+		this._lastZIndex = 0;
+		this._handlingClick = false;
+
+		for (var i in baseLayers) {
+			this._addLayer(baseLayers[i], i);
+		}
+
+		for (i in overlays) {
+			this._addLayer(overlays[i], i, true);
+		}
+	},
+
+	onAdd: function (map) {
+		this._initLayout();
+		this._update();
+
+		map
+		    .on('layeradd', this._onLayerChange, this)
+		    .on('layerremove', this._onLayerChange, this)
+			.on('changeorder', this._onLayerChange, this);
+
+		return this._container;
+	},
+
+	onRemove: function (map) {
+		map
+		    .off('layeradd', this._onLayerChange)
+		    .off('layerremove', this._onLayerChange)
+			.off('changeorder', this._onLayerChange);
+	},
+
+	addBaseLayer: function (layer, name) {
+		this._addLayer(layer, name);
+		this._update();
+		return this;
+	},
+
+	addOverlay: function (layer, name) {
+		this._addLayer(layer, name, true);
+		this._update();
+		return this;
+	},
+
+	removeLayer: function (layer) {
+		var id = L.stamp(layer);
+		delete this._layers[id];
+		this._update();
+		return this;
+	},
+
+	_initLayout: function () {
+		var className = 'leaflet-control-layers',
+		    container = this._container = L.DomUtil.create('div', className);
+		
+		//Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
+		container.setAttribute('aria-haspopup', true);
+
+		if (!L.Browser.touch) {
+			L.DomEvent.disableClickPropagation(container);
+			L.DomEvent.on(container, 'mousewheel', L.DomEvent.stopPropagation);
+		} else {
+			L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
+		}
+
+		var form = this._form = L.DomUtil.create('form', className + '-list');
+
+		if (this.options.collapsed) {
+			if (!L.Browser.android) {
+				L.DomEvent
+				    .on(container, 'mouseover', this._expand, this)
+				    .on(container, 'mouseout', this._collapse, this);
+			}
+			var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
+			link.href = '#';
+			link.title = 'Layers';
+
+			if (L.Browser.touch) {
+				L.DomEvent
+				    .on(link, 'click', L.DomEvent.stop)
+				    .on(link, 'click', this._expand, this);
+			}
+			else {
+				L.DomEvent.on(link, 'focus', this._expand, this);
+			}
+
+			this._map.on('click', this._collapse, this);
+			// TODO keyboard accessibility
+		} else {
+			this._expand();
+		}
+
+		if(this.options.title) {
+			var title = L.DomUtil.create('h3', className + '-title');
+			title.innerHTML = this.options.title;
+			form.appendChild(title);
+		}
+
+		this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
+		this._separator = L.DomUtil.create('div', className + '-separator', form);
+		this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
+
+		container.appendChild(form);
+	},
+
+	_addLayer: function (layer, name, overlay) {
+		var id = L.stamp(layer);
+
+		this._layers[id] = {
+			layer: layer,
+			name: name,
+			overlay: overlay
+		};
+
+		if (this.options.autoZIndex && layer.setZIndex) {
+			this._lastZIndex++;
+			layer.setZIndex(this._lastZIndex);
+		}
+	},
+
+	_update: function () {
+		if (!this._container) {
+			return;
+		}
+
+		this._baseLayersList.innerHTML = '';
+		this._overlaysList.innerHTML = '';
+
+		var baseLayersPresent = false,
+		    overlaysPresent = false,
+		    i, obj;
+		
+		var overlaysLayers = [];
+		for (i in this._layers) {
+			obj = this._layers[i];
+			if(!obj.overlay) {
+				this._addItem(obj);
+			} else if(obj.layer.options.zIndex) {
+				overlaysLayers[obj.layer.options.zIndex] = obj;
+			}
+			overlaysPresent = overlaysPresent || obj.overlay;
+			baseLayersPresent = baseLayersPresent || !obj.overlay;
+		}
+		
+		for(i = 0; i < overlaysLayers.length; i++) {
+			if(overlaysLayers[i]) {
+				this._addItem(overlaysLayers[i]);
+			}
+		}
+		
+		L.DomUtil.create('div', 'clearfix', this._baseLayersList);
+		L.DomUtil.create('div', 'clearfix', this._overlaysList);
+		this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
+	},
+
+	_onLayerChange: function (e) {
+		var obj = this._layers[L.stamp(e.layer)];
+
+		if (!obj) { return; }
+
+		if (!this._handlingClick) {
+			this._update();
+		}
+
+		var type = obj.overlay ?
+			(e.type === 'layeradd' ? 'overlayadd' : 'overlayremove') :
+			(e.type === 'layeradd' ? 'baselayerchange' : null);
+
+		if (type) {
+			this._map.fire(type, obj);
+		}
+	},
+
+	// IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
+	_createRadioElement: function (name, checked) {
+
+		var radioHtml = '<input type="radio" class="leaflet-control-layers-selector" name="' + name + '"';
+		if (checked) {
+			radioHtml += ' checked="checked"';
+		}
+		radioHtml += '/>';
+
+		var radioFragment = document.createElement('div');
+		radioFragment.innerHTML = radioHtml;
+
+		return radioFragment.firstChild;
+	},
+
+	_addItem: function (obj) {
+		var row = L.DomUtil.create('div', 'leaflet-row');
+		
+		var label = L.DomUtil.create('label', ''),
+		    input,
+		    checked = this._map.hasLayer(obj.layer);
+
+		if (obj.overlay) {
+			input = L.DomUtil.create('input');
+			input.type = 'checkbox';
+			input.className = 'leaflet-control-layers-selector';
+			input.defaultChecked = checked;
+		} else {
+			input = this._createRadioElement('leaflet-base-layers', checked);
+		}
+
+		input.layerId = L.stamp(obj.layer);
+
+		L.DomEvent.on(input, 'click', this._onInputClick, this);
+
+		var name = document.createElement('span');
+		name.innerHTML = ' ' + obj.name;
+		
+		var col = L.DomUtil.create('div', 'leaflet-input');
+		col.appendChild(input);
+		row.appendChild(col);
+		col = L.DomUtil.create('div', 'leaflet-name');
+		col.appendChild(label);
+		row.appendChild(col);
+		label.appendChild(name);
+		
+		var container;
+		if(obj.overlay) {
+			col = L.DomUtil.create('div', 'leaflet-up');
+			L.DomEvent.on(col, 'click', this._onUpClick, this);
+			col.layerId = input.layerId;
+			row.appendChild(col);
+			col = L.DomUtil.create('div', 'leaflet-down');
+			col.layerId = input.layerId;
+			L.DomEvent.on(col, 'click', this._onDownClick, this);
+			row.appendChild(col);
+			container = this._overlaysList; 
+		} else {
+			container = this._baseLayersList;
+		}
+		container.appendChild(row);
+		return label;
+	},
+
+	_onInputClick: function () {
+		var i, input, obj,
+		    inputs = this._form.getElementsByTagName('input'),
+		    inputsLen = inputs.length;
+
+		this._handlingClick = true;
+
+		for (i = 0; i < inputsLen; i++) {
+			input = inputs[i];
+			obj = this._layers[input.layerId];
+
+			if (input.checked && !this._map.hasLayer(obj.layer)) {
+				this._map.addLayer(obj.layer);
+
+			} else if (!input.checked && this._map.hasLayer(obj.layer)) {
+				this._map.removeLayer(obj.layer);
+			}
+		}
+
+		this._handlingClick = false;
+	},
+	
+	_onUpClick: function(e) {
+		var layerId = e.currentTarget.layerId;
+		var inputs = this._form.getElementsByTagName('input');
+		var obj = this._layers[layerId];
+		
+		if(!obj.overlay) {
+			return;
+		}
+		
+		var replaceLayer = null;
+		for(var i=0; i < inputs.length; i++) {
+			var auxLayer = this._layers[inputs[i].layerId];
+			if(auxLayer.overlay && (obj.layer.options.zIndex - 1) === auxLayer.layer.options.zIndex) {
+				replaceLayer = auxLayer;
+				break;
+			}
+		}
+		
+		var newZIndex = obj.layer.options.zIndex - 1;
+		if(replaceLayer) {
+			obj.layer.setZIndex(newZIndex);
+			replaceLayer.layer.setZIndex(newZIndex + 1);
+			this._map.fire('changeorder', obj, this);
+		}
+	},
+	
+	_onDownClick: function(e) {
+		var layerId = e.currentTarget.layerId;
+		var inputs = this._form.getElementsByTagName('input');
+		var obj = this._layers[layerId];
+		
+		if(!obj.overlay) {
+			return;
+		}
+		
+		var replaceLayer = null;
+		for(var i=0; i < inputs.length; i++) {
+			var auxLayer = this._layers[inputs[i].layerId];
+			if(auxLayer.overlay && (obj.layer.options.zIndex + 1) === auxLayer.layer.options.zIndex) {
+				replaceLayer = auxLayer;
+				break;
+			}
+		}
+		
+		var newZIndex = obj.layer.options.zIndex + 1;
+		if(replaceLayer) {
+			obj.layer.setZIndex(newZIndex);
+			replaceLayer.layer.setZIndex(newZIndex - 1);
+			this._map.fire('changeorder', obj, this);
+		}
+	},
+
+	_expand: function () {
+		L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+	},
+
+	_collapse: function () {
+		this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
+	},
+	
+	hide: function() {
+		this._container.style.display = 'none';
+	},
+	
+	show: function() {
+		this._container.style.display = '';
+	}
+});
+
+L.control.orderlayers = function (baseLayers, overlays, options) {
+	return new L.Control.OrderLayers(baseLayers, overlays, options);
+};
\ No newline at end of file