diff --git a/app/index.html b/app/index.html
index 1f160a9..b73f60a 100644
--- a/app/index.html
+++ b/app/index.html
@@ -31,12 +31,10 @@
 
     <!-- build:js(.) scripts/vendor.js -->
     <!-- bower:js -->
-    <script src="bower_components/jquery/dist/jquery.js"></script>
     <script src="bower_components/angular/angular.js"></script>
     <script src="bower_components/angular-animate/angular-animate.js"></script>
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
     <script src="bower_components/tinycolor/tinycolor.js"></script>
-    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
     <script src="bower_components/angular-color-picker/angularjs-color-picker.js"></script>
     <script src="bower_components/d3/d3.js"></script>
     <script src="bower_components/angular-d3-module/angular-d3-module.js"></script>
@@ -48,6 +46,7 @@
     <script src="bower_components/underscore/underscore.js"></script>
     <script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>
     <script src="bower_components/Leaflet.extra-markers/src/leaflet.extra-markers.js"></script>
+    <script src="bower_components/textures/textures.min.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
diff --git a/app/scripts/app.js b/app/scripts/app.js
index 545f675..fe8bb8e 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -17,7 +17,8 @@ angular
     'angularMoment',
     'leaflet-directive',
     'color.picker',
-    'd3'
+    'd3',
+    'textures'
 ])
 .config(['$logProvider', function ($logProvider){
     //leaflet map debug hide
diff --git a/app/scripts/controllers/vis.js b/app/scripts/controllers/vis.js
index 39eae6b..c8196d1 100644
--- a/app/scripts/controllers/vis.js
+++ b/app/scripts/controllers/vis.js
@@ -3,8 +3,8 @@
 /* select year, then select and customize places to visualize */
 
 angular.module('365daysApp').controller('VisCtrl', [
-    '$scope', '$location', '_', 'analyzer', 'visualizer',
-    function ($scope, $location, _, analyzer, visualizer) {
+    '$scope', '$location', '_', 'textures', 'analyzer', 'visualizer',
+    function ($scope, $location, _, textures, analyzer, visualizer) {
 
         //TODO: make previous step done check as function
         //check data created
@@ -16,11 +16,15 @@ angular.module('365daysApp').controller('VisCtrl', [
         //get dataset for vis
         var dataset = analyzer.getDatasetForVis();
 
-        //set colors for vis
+        //places for editing directives
+        $scope.places = dataset.places;
+
+        //set colors and textures for vis
         var colors = {
             home: ['#db59a0', '#eb7e58', '#eb535a', '#ebcd53'], //warm color
             work: ['#4fa6ce', '#5dd5ba', '#527cb0', '#96d070'], //cold color
-            others: ['#666666', '#8c8c8c', '#b3b3b3', '#d9d9d9'] //grey HSB B- 40, 55, 70, 85%
+            //others: ['#666666', '#8c8c8c', '#b3b3b3', '#d9d9d9'] //grey HSB B- 40, 55, 70, 85%
+            others: ['#8c8c8c', '#8c8c8c', '#8c8c8c', '#8c8c8c'] //grey HSB B- 40, 55, 70, 85%
         };
         $scope.colors = _.object(_.map(dataset.places, function (list, type) {
             var c = _.map(_.range(list.length), function (i) {
@@ -28,28 +32,90 @@ angular.module('365daysApp').controller('VisCtrl', [
             });
             return [type, c];
         }));
-        var oldColors = angular.copy($scope.colors);
-        $scope.places = dataset.places; //needed for directives
+
+        //for texture options in the edit panel
+        var textureOptions = [
+            {}, //no texture
+            textures.lines().size(8),
+            textures.circles().size(8),
+            textures.lines().size(4),
+            textures.circles().size(4)
+        ];
+
+        //index for texture options
+        var txt = {
+            home: [1],
+            work: [0],
+            others: [1, 2, 3, 4]
+        };
+        $scope.textures = _.object(_.map(dataset.places, function (list, type) {
+            var t = _.map(_.range(list.length), function (i) {
+                return txt[type][i % txt[type].length];
+            });
+            return [type, t];
+        }));
+        $scope.textOptionsCount = function () {
+            return _.range(textureOptions.length);
+        };
 
         //draw vis
+        visualizer.drawCanvas();
         visualizer.drawVis(dataset, $scope.colors);
 
         //color change
         $scope.isEditCollapsed = true;
-        $scope.$watch('colors', function (newVal, oldVal) {
-            if (newVal !== oldVal) {
-                _.each(oldColors, function (list, type) {
-                    //find the changed color and update the vis
-                    var oldColor = _.difference(list, newVal[type])[0];
-                    var newColor = _.difference(newVal[type], list)[0];
-                    if (!_.isUndefined(oldColor) && !_.isUndefined(newColor)) {
-                        var changeIndex = _.indexOf(list, oldColor);
-                        visualizer.updateColor(type, changeIndex, newColor);
-                        //update old color with new one
-                        oldColors[type] = angular.copy(newVal[type]);
-                    }
-                });
+
+        $scope.drawColorTextureChip = function (wrapper, index) {
+
+            var texture = angular.copy(textureOptions[index]);
+
+            var color = 'rgba(0, 0, 0, 0)';
+            if (index === 0) {
+                texture.url = function () { return color; };
+            } else {
+                texture.background(color);
+                wrapper.call(texture);
             }
-        }, true);
+            wrapper.append('rect')
+                .attr('width', 100)
+                .attr('height', 20)
+                .style('fill', texture.url());
+        };
+
+        $scope.updateTextureSelection = function (type, placeIndex, textureIndex) {
+            $scope.textures[type][placeIndex] = textureIndex;
+        };
     }
-]);
\ No newline at end of file
+])
+.directive('colorChip', ['d3', 'visualizer', function (d3, visualizer) {
+    return {
+        restrict: 'E',
+        scope: {
+            color: '=',
+            texture: '=',
+            type: '@',
+            index: '@'
+        },
+        link: function (scope, elem) {
+            scope.$watchGroup(['color', 'texture'], function (newVals) {
+                //apply color and pattern to the color chip
+                var svg = d3.select(elem[0]).select('svg');
+                svg.selectAll('*').remove();
+                scope.$parent.drawColorTextureChip(svg, newVals[1]);
+                visualizer.updateColor(scope.type, scope.index, newVals[0]);
+            });
+        }
+    };
+}])
+.directive('textureList', ['d3', function (d3) {
+    return {
+        restrict: 'EA',
+        scope: {
+            index: '@',
+            type: '@'
+        },
+        link: function (scope, elem) {
+            scope.$parent.drawColorTextureChip(d3.select(elem[0]).select('svg'), +scope.index);
+        }
+    };
+}]);
\ No newline at end of file
diff --git a/app/scripts/services/visualizer.js b/app/scripts/services/visualizer.js
index 5d5b917..03ccf3f 100644
--- a/app/scripts/services/visualizer.js
+++ b/app/scripts/services/visualizer.js
@@ -9,10 +9,12 @@ angular.module('365daysApp').factory('visualizer', [
         landscape: { w: 4000, h: 3000 }
     };
     var options = { orientation: 'portrait', size: 1 };
-
     this.getCanvasSettings = function () {
         return options;
     };
+
+    //canvas layout variables
+    var svg;
     var margin = { top: 200 };
     var dim = {};
 
@@ -48,6 +50,13 @@ angular.module('365daysApp').factory('visualizer', [
         };
     };
 
+    this.drawCanvas = function () {
+        //draw canvas - keep only one SVG for export later
+        svg = d3.select('#vis').append('svg')
+            .attr('width', dim.w + margin.left + margin.right)
+            .attr('height', dim.h + margin.top + margin.bottom);
+    };
+
     function drawDay(g, startDate, dayUnit, index) {
 
         //offset from the rectangle composed of the blocks to put text
@@ -288,12 +297,7 @@ angular.module('365daysApp').factory('visualizer', [
 
     this.drawVis = function (data, colors) {
 
-        console.log('---vis draw', colors);
-
-        //draw canvas - keep only one SVG for export later
-        var svg = d3.select('#vis').append('svg')
-            .attr('width', dim.w + margin.left + margin.right)
-            .attr('height', dim.h + margin.top + margin.bottom);
+        //console.log('---vis draw', colors);
         var g = svg.append('g')
             .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
diff --git a/app/views/vis.html b/app/views/vis.html
index f0f901e..d9946d2 100644
--- a/app/views/vis.html
+++ b/app/views/vis.html
@@ -6,24 +6,28 @@ <h2> Colors </h2>
             <ul>
                 <li ng-repeat="place in list">
                     {{ place.name }} / {{ place.humanTime }} / {{ place.count }} days
-                    <!-- options.colors[type][$index % options.colors[type].length] -->
-                    <div style="background-color:{{ colors[type][$index] }};" class="chip"></div>
+                    <color-chip data-color="colors[type][$index]" data-texture="textures[type][$index]" data-type="{{ type }}" data-index="{{ $index }}">
+                        <div class="chip" style="background-color: {{ colors[type][$index] }}"><svg width="60" height="20"></svg></div>
+                    </color-chip>
                     <span>
                         <a ng-click="isEditCollapsed = !isEditCollapsed">
                             <span ng-show="isEditCollapsed">Edit</span>
                             <span ng-hide="isEditCollapsed">Close</span>
                         </a>
                     </span>
+                    <!-- color and texture edit panel -->
                     <div ng-hide="isEditCollapsed" class="fill-edit">
                         <color-picker ng-model="colors[type][$index]" color-picker-format="'hex'" color-picker-alpha="false" color-picker-case="'lower'"></color-picker>
-                        <div>new pattern selection comes here</div>
-                        <button type="button" class="btn btn-primary" ng-click="isEditCollapsed = true">Edit</button>
+                        <texture-list ng-repeat="i in textOptionsCount()" data-index="{{ i }}">
+                            <div ng-class="textures[type][$parent.$index] == i ? 'texture selected' : 'texture normal'" style="background-color: {{ colors[type][$parent.$index] }}" ng-click="updateTextureSelection(type, $parent.$index, i)">
+                                <svg width="20" height="20"></svg>
+                            </div>
+                        </texure-list>
                     </div>
                 </li>
             </ul>
         </div>
     </div>
- <!--    <p ng-if="edited"><a class="btn btn-lg btn-success" ng-click="completeEdit(); edited = false">Update <span class="glyphicon glyphicon-ok"></span></a></p> -->
 </div>
 <div class="wrapper-right vis">
     <div id="vis"></div>
diff --git a/bower.json b/bower.json
index 7abf6cd..f40fb89 100644
--- a/bower.json
+++ b/bower.json
@@ -15,6 +15,7 @@
     "leaflet": "~0.7.7",
     "Leaflet.extra-markers": "~1.0.3",
     "moment": "~2.11.1",
+    "textures": "*",
     "underscore": "~1.8.3"
   },
   "devDependencies": {
diff --git a/less/main.less b/less/main.less
index ebf926d..c4c4fb8 100644
--- a/less/main.less
+++ b/less/main.less
@@ -81,6 +81,7 @@
     border-radius: 0;
     box-shadow: none;
 }
+
 /* vis */
 .vis-options {
     a {
@@ -98,6 +99,18 @@
     .color-picker-wrapper {
         width: 120px;
     }
+    .texture {
+        width: 24px;
+        height: 24px;
+        margin-right: 6px;
+        display: inline-block;
+    }
+    .selected {
+        border: 2px solid #000;
+    }
+    .normal {
+        border: 2px solid #fff;
+    }
 }
 
 @import 'd3';
\ No newline at end of file
diff --git a/test/karma.conf.js b/test/karma.conf.js
index b03ce46..900c6ea 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -31,6 +31,7 @@ module.exports = function(config) {
       'bower_components/angular-color-picker/angularjs-color-picker.js',
       'bower_components/d3/d3.js',
       'bower_components/angular-d3-module/angular-d3-module.js',
+      'bower_components/angular-global-injector/angular-global-injector.js',
       'bower_components/leaflet/dist/leaflet-src.js',
       'bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js',
       'bower_components/moment/moment.js',
@@ -39,6 +40,7 @@ module.exports = function(config) {
       'bower_components/underscore/underscore.js',
       'bower_components/angular-underscore-module/angular-underscore-module.js',
       'bower_components/Leaflet.extra-markers/src/leaflet.extra-markers.js',
+      'bower_components/textures/textures.min.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       "app/scripts/**/*.js",