diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..9c9ea40
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "public/bower_components"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 774183f..3b57a30 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@ Gravity Widget Plugin for Kibana.
 # Install
 
 ```bash
+cd ./kibana-gravity
+bower install
 cp -R ./kibana-gravity kibana/src/plugins/
 ```
 
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..376210b
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,28 @@
+{
+  "name": "kibana-gravity",
+  "description": "Kibana Gravity Plugin Widget",
+  "main": "index.js",
+  "authors": [
+    "Marius Kolkowski <marius.kolkowski@raystorm.place>"
+  ],
+  "license": "Apache 2.0",
+  "keywords": [
+    "kibana",
+    "gravity",
+    "plugin",
+    "widget",
+    "raystorm"
+  ],
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "ace-builds": "1.2.3",
+    "angular-ui-ace": "0.2.3"
+  }
+}
diff --git a/public/gravity.js b/public/gravity.js
index e921183..a65270a 100644
--- a/public/gravity.js
+++ b/public/gravity.js
@@ -1,5 +1,8 @@
 define(function (require) {
-  // we need to load the css ourselves
+  require('plugins/kibana-gravity/bower_components/ace-builds/src-min-noconflict/ace.js');
+  require('plugins/kibana-gravity/bower_components/ace-builds/src-min-noconflict/mode-html.js');
+  require('plugins/kibana-gravity/bower_components/ace-builds/src-min-noconflict/theme-monokai.js');
+  require('plugins/kibana-gravity/bower_components/angular-ui-ace/ui-ace.min.js');
   require('plugins/kibana-gravity/gravity.less');
 
   // we also need to load the controller and used by the template
diff --git a/public/gravity.less b/public/gravity.less
index 8b46e43..a5d2558 100644
--- a/public/gravity.less
+++ b/public/gravity.less
@@ -5,6 +5,15 @@
   width: 100%;
 }
 
+.vis-editor-sidebar {
+  max-width: 600px;
+}
+
+.html-gravity-editor {
+  min-height: 500px;
+  min-width: 600px;
+}
+
 .vis-editor {
 
   &.vis-type-markdown {
diff --git a/public/gravity_controller.js b/public/gravity_controller.js
index 42a32d6..4c81be3 100644
--- a/public/gravity_controller.js
+++ b/public/gravity_controller.js
@@ -5,7 +5,7 @@ define(function (require) {
 
   require('ui/notify');
 
-  var module = require('ui/modules').get('kibana/kibana-gravity', ['kibana']);
+  var module = require('ui/modules').get('kibana/kibana-gravity', ['kibana', 'ui.ace']);
   module.service('gravityHelper', [function () {
     this.elasticHitToGravity = function(hit) {
       var gravity = {
@@ -20,6 +20,13 @@ define(function (require) {
       return gravity;
     };
   }]);
+
+  module.controller('KbnGravityEditController', ['$scope', function($scope) {
+    $scope.aceLoaded = function(_editor){
+      _editor.$blockScrolling = Infinity;
+    };
+  }]);
+
   module.controller('KbnGravityVisController', function ($scope, $compile, $interpolate, $sce, courier, Private, Promise, Notifier,
                                                          gravityHelper, savedSearches, timefilter, AppState) {
     var HitSortFn = Private(require('plugins/kibana/discover/_hit_sort_fn'));
diff --git a/public/gravity_params.html b/public/gravity_params.html
index f0fd30d..b64724a 100644
--- a/public/gravity_params.html
+++ b/public/gravity_params.html
@@ -2,5 +2,7 @@
   <div>
     <label>HTML</label>
   </div>
-  <textarea ng-model="vis.params.html" class="form-control" rows="20"></textarea>
+  <div ng-controller="KbnGravityEditController">
+    <div ui-ace="{theme: 'monokai', mode: 'html', onLoad: aceLoaded }" class="html-gravity-editor" ng-model="vis.params.html"></div>
+  </div>
 </div>
\ No newline at end of file