diff --git a/pluginTester/app.js b/pluginTester/app.js
index 75e6f38f..ca92a655 100644
--- a/pluginTester/app.js
+++ b/pluginTester/app.js
@@ -1,7 +1,7 @@
 /**
  * Created by Daniel on 5/23/2015.
  */
-var $app = angular.module('buildfire', ['ngRoute', 'ui.bootstrap', 'ngFileUpload', 'ngMap', 'ngAutocomplete']);
+var $app = angular.module('buildfire', ['ngRoute', 'ui.bootstrap', 'ngFileUpload', 'ngMap', 'ngAutocomplete','angularGrid']);
 
 $app.config(['$routeProvider', '$sceDelegateProvider', function ($routeProvider, $sceDelegateProvider) {
 
diff --git a/pluginTester/index.html b/pluginTester/index.html
index 69081077..712224c4 100644
--- a/pluginTester/index.html
+++ b/pluginTester/index.html
@@ -166,6 +166,7 @@
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
 <script type="text/javascript" src="../scripts/angular/ng-map.min.js"></script>
 <script type="text/javascript" src="../scripts/angular/ngAutocomplete.js"></script>
+<script type="text/javascript" src="../scripts/angular/angulargrid.js"></script>
 
 <!-- JS -->
 <script type="text/javascript" src="app.js"></script>
diff --git a/plugins/testPlugin/control/content/index.html b/plugins/testPlugin/control/content/index.html
index 59fd2064..c94ab00e 100644
--- a/plugins/testPlugin/control/content/index.html
+++ b/plugins/testPlugin/control/content/index.html
@@ -12,7 +12,7 @@
 	-->
 	
 	<!-- JS -->
-	<script src="../../../../scripts/buildfire.js"></script>
+	<script src="../../../../scripts/buildfire.min.js"></script>
    
  	<!--
     <script src="../../../../scripts/angular/angular.min.js"></script>
diff --git a/plugins/testPlugin/widget/index.html b/plugins/testPlugin/widget/index.html
index ed89f197..3baaa116 100644
--- a/plugins/testPlugin/widget/index.html
+++ b/plugins/testPlugin/widget/index.html
@@ -8,7 +8,7 @@
 	-->
 	
 	<!-- JS -->
-	<script src="../../../scripts/buildfire.js"></script>
+	<script src="../../../scripts/buildfire.min.js"></script>
    
  	<!--
     <script src="../../../scripts/angular/angular.min.js"></script>
diff --git a/scripts/angular/angulargrid.js b/scripts/angular/angulargrid.js
new file mode 100644
index 00000000..068d5630
--- /dev/null
+++ b/scripts/angular/angulargrid.js
@@ -0,0 +1,698 @@
+/*
+    angularGrid.js v 0.6.5
+    Author: Sudhanshu Yadav
+    Copyright (c) 2015-2016 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+    Demo on: http://ignitersworld.com/lab/angulargrid/
+    Documentation and download on https://github.com/s-yadav/angulargrid
+*/
+ 
+/* module to create pinterest like responsive masonry grid system for angular */
+
+;(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) {
+    // CommonJS
+    module.exports = factory(require('angular'), root);
+  } else if (typeof define === 'function' && define.amd) {
+    // AMD
+    define(['angular'], function (angular) {
+        return factory(angular, root);
+    });
+  } else {
+    // Global Variables
+    factory(root.angular, root);
+  }
+}(this, function (angular, window, undefined) {
+  "use strict";
+
+  //defaults for plugin
+  var defaults = {
+    gridWidth: 300, //minumum width of a grid, this may increase to take whole space of container
+    gutterSize: 10, //spacing between two grid,
+    gridNo: 'auto', // grid number, by default calculate auto matically
+    direction: 'ltor', //direction of grid item
+    refreshOnImgLoad: true, // to make a refresh on image load inside container
+    cssGrid: false,
+    performantScroll: false,
+    pageSize: 'auto', //decide based on screen size
+    scrollContainer: 'body',
+    infiniteScrollDelay: 3000,
+    infiniteScrollDistance: 100,
+  };
+
+  var $ = angular.element;
+  var camelCaseToHyphenCase = function(str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  };
+
+  //css for the clones
+  var cloneCss = {
+    visibility: 'hidden',
+    opacity: 0,
+    top: 0,
+    left: 0,
+    width: ''
+  };
+
+  var single = (function() {
+    var $elm = $(window);
+    return function(elm) {
+      $elm[0] = elm;
+      return $elm;
+    };
+  }());
+
+  //function to check if image is loaded
+  function imageLoaded(img) {
+    return img.complete && (typeof img.naturalWidth === 'undefined' || img.naturalWidth !== 0);
+  }
+
+  //function to covert domlist to array
+  function domToAry(list) {
+    return Array.prototype.slice.call(list);
+  }
+
+  //add required css
+  $(document.head).append('<style>' +
+    '.ag-no-transition{' +
+    '-webkit-transition: none !important;' +
+    'transition: none !important;' +
+    '} ' +
+    '.angular-grid{position : relative;} ' +
+    '.angular-grid > *{opacity : 0} ' +
+    '.angular-grid > .angular-grid-item{opacity : 1}' + '</style>');
+
+  return angular.module('angularGrid', [])
+    .directive('angularGrid', ['$timeout', '$window', '$q', 'angularGridInstance',
+      function($timeout, $window, $q, angularGridInstance) {
+        return {
+          restrict: 'A',
+          scope: {
+            model: '=angularGrid',
+            /** deprecated options ***/
+            dep_gridWidth: '=gridWidth',
+            dep_gutterSize: '=gutterSize',
+            dep_refreshOnImgLoad: '=refreshOnImgLoad',
+            dep_direction: '=direction',
+            dep_cssGrid: '=cssGrid',
+            dep_options: '=angularGridOptions',
+            dep_gridNo: '=gridNo',
+            dep_agId: '@angularGridId',
+            /** deprecated options end***/
+
+            gridNo: '=agGridNo',
+            gridWidth: '=agGridWidth',
+            gutterSize: '=agGutterSize',
+            refreshOnImgLoad: '=agRefreshOnImgLoad',
+            direction: '=agDirection',
+            cssGrid: '=agCssGrid',
+            options: '=agOptions',
+            agId: '@',
+            pageSize: '=agPageSize',
+            performantScroll: '=agPerformantScroll',
+            scrollContainer: '@agScrollContainer',
+            infiniteScroll: '&agInfiniteScroll',
+            infiniteScrollDistance: '=agInfiniteScrollDistance',
+            infiniteScrollDelay: '=agInfiniteScrollDelay'
+          },
+          link: function(scope, element, attrs) {
+            var domElm = element[0],
+              win = $($window),
+              agId = scope.agId || scope.dep_agId, // angularGridId is deprecated
+              listElms,
+              reflowCount = 0, //to keep tack of times reflowgrid been called
+              timeoutPromise;
+
+            element.addClass('angular-grid');
+
+
+
+            //get the user input options
+            var options;
+
+            //check deprecated options
+            ['gridWidth', 'gutterSize', 'refreshOnImgLoad', 'direction', 'options', 'cssGrid','gridNo', 'agId'].forEach(function(key) {
+              var depKey = camelCaseToHyphenCase(key);
+              var correctKey = 'ag-' + camelCaseToHyphenCase(key);
+              if (key == 'options') depKey = "angular-grid-options";
+              if (key == 'agId') {
+                depKey = "angular-grid-id";
+                correctKey = "ag-id";
+              }
+              if (scope['dep_' + key] !== undefined) {
+                if (console && console.warn) console.warn(depKey + ' is deprecated. Use ' + correctKey + ' instead in template.');
+              }
+            });
+
+            function getOptions() {
+              options = {};
+              Object.keys(defaults).forEach(function(key) {
+                if (scope[key] !== undefined) {
+                  options[key] = scope[key];
+                } else if (scope['dep_' + key] !== undefined) {
+                  options[key] = scope['dep_' + key];
+                }
+              });
+              options = angular.extend({}, defaults, options, scope.options || scope.dep_options);
+              if (options.cssGrid) options.gutterSize = 0;
+              if (options.pageSize == 'auto') {
+                options.pageSize = window.offsetWidth >= 768 ? 2 : 3;
+              }
+            }
+
+            getOptions();
+
+
+            /********
+            code to allow performant scroll
+            *****/
+            var scrollNs = {}; //namespace for performantScroll
+
+            function findPos(obj, withRespectTo) {
+              withRespectTo = withRespectTo || document.body;
+              var curleft = 0,
+                curtop = 0;
+              if (obj.offsetParent) {
+                do {
+                  curleft += obj.offsetLeft;
+                  curtop += obj.offsetTop;
+                  obj = obj.offsetParent;
+                } while (obj && obj != withRespectTo);
+              }
+              return {
+                left: curleft,
+                top: curtop
+              };
+            }
+
+            function getScrollContainerInfo() {
+              var container = $(document.querySelector(options.scrollContainer)),
+                contElm = container[0];
+
+              var $elm = options.scrollContainer === 'body' ? win : container;
+
+              return {
+                height: $elm[0].innerHeight || $elm[0].offsetHeight,
+                scrollHeight: contElm.scrollHeight,
+                startFrom: findPos(domElm, contElm).top,
+                $elm: $elm
+              };
+            }
+
+
+            //this method check what all elements should be present on dom at specific page
+            function calculatePageInfo(listElmPosInfo, scrollBodyHeight, colNo) {
+
+              scrollNs.pageInfo = [{
+                from: 0
+              }];
+
+              var elmInfo, from, to,
+                pageSize = options.pageSize,
+                scrollContHeight = scrollNs.scrollContInfo.height,
+                pageHeight = scrollContHeight * pageSize,
+                totalPages = Math.ceil(scrollBodyHeight / pageHeight),
+                pageNo = 0;
+
+
+              for (pageNo = 0; pageNo < totalPages; pageNo++) {
+                for (var idx = 0, ln = listElmPosInfo.length; idx < ln; idx++) {
+                  elmInfo = listElmPosInfo[idx];
+                  from = pageNo ? pageHeight * pageNo : 0;
+                  to = pageHeight * (pageNo + 1);
+
+                  if (elmInfo.bottom < from || elmInfo.top > to) {
+                    if (elmInfo.top > to) break;
+                  } else {
+                    if (!scrollNs.pageInfo[pageNo]) scrollNs.pageInfo[pageNo] = {
+                      from: idx
+                    };
+                    scrollNs.pageInfo[pageNo].to = idx;
+                  }
+                }
+              }
+
+              scrollNs.pageInfo = scrollNs.pageInfo.map(function(page, idx) {
+                var fromPage = Math.max(idx - 1, 0),
+                  toPage = Math.min(idx + 1, scrollNs.pageInfo.length - 1);
+                return {
+                  from: scrollNs.pageInfo[fromPage].from,
+                  to: scrollNs.pageInfo[toPage].to
+                };
+              });
+            }
+
+            //unbind/bind watchers
+            function bindWatchersOnVisible(visibleELm) {
+              var itemData, $item, i, ln;
+              //unbind watchers from all element
+              for (i = 0, ln = listElms.length; i < ln; i++) {
+                $item = single(listElms[i]);
+                itemData = $item.data();
+                if (itemData.$scope) {
+                  $item.data('_agOldWatchers', itemData.$scope.$$watchers);
+                  itemData.$scope.$$watchers = [];
+                }
+              }
+
+              //bind watchers on all visible element
+              for (i = 0, ln = visibleELm.length; i < ln; i++) {
+                itemData = single(visibleELm[i]).data();
+                if (itemData.$scope) {
+                  itemData.$scope.$$watchers = itemData._agOldWatchers || [];
+                  //trigger digest on each child scope
+                  itemData.$scope.$digest();
+                }
+              }
+            }
+
+            function refreshDomElm(scrollTop) {
+              scrollNs.lastScrollPosition = scrollTop;
+              var filteredElm;
+              if (scrollNs.isBusy) return;
+              var currentPage = 0,
+                pageSize = options.pageSize;
+
+              if (scrollTop > scrollNs.scrollContInfo.startFrom + scrollNs.scrollContInfo.height * pageSize) {
+                currentPage = Math.floor((scrollTop - scrollNs.scrollContInfo.startFrom) / (scrollNs.scrollContInfo.height * pageSize));
+              }
+              if (currentPage == scrollNs.lastPage) return;
+              scrollNs.lastPage = currentPage;
+              var curPageInfo = scrollNs.pageInfo[currentPage];
+
+              if (curPageInfo) {
+                element.children().detach();
+                filteredElm = Array.prototype.slice.call(listElms, curPageInfo.from, curPageInfo.to + 1);
+                bindWatchersOnVisible(filteredElm);
+                element.append(filteredElm);
+              }
+            }
+
+
+            /********
+            code to allow performant scroll end
+            *****/
+
+            /***** code for infiniteScroll start ******/
+            function reEnableInfiniteScroll() {
+              clearTimeout(scrollNs.infiniteScrollTimeout);
+              scrollNs.isLoading = false;
+            }
+
+            function infiniteScroll(scrollTop) {
+              if (scrollNs.isLoading || !scope.model.length) return;
+              var scrollHeight = scrollNs.scrollContInfo.scrollHeight,
+                contHeight = scrollNs.scrollContInfo.height;
+
+              if (scrollTop >= (scrollHeight - contHeight * (1 + options.infiniteScrollDistance / 100))) {
+                scrollNs.isLoading = true;
+                scope.infiniteScroll();
+                scrollNs.infiniteScrollTimeout = setTimeout(reEnableInfiniteScroll, options.infiniteScrollDelay);
+              }
+            }
+            /***** code for infiniteScroll end ******/
+
+            //scroll event on scroll container element to refresh dom depending on scroll positions
+            function scrollHandler() {
+              var scrollTop = this.scrollTop || this.scrollY;
+              if (options.performantScroll) refreshDomElm(scrollTop);
+              if (scope.infiniteScroll) infiniteScroll(scrollTop);
+            }
+
+            setTimeout(function() {
+              scrollNs.scrollContInfo = getScrollContainerInfo();
+              scrollNs.scrollContInfo.$elm.on('scroll', scrollHandler);
+            }, 0);
+
+            //function to get column width and number of columns
+            function getColWidth() {
+
+              var contWidth = domElm.offsetWidth,
+                clone; // a clone to calculate width without transition
+
+              if (options.cssGrid) {
+                clone = $(listElms[0]).clone();
+                clone.css(cloneCss).addClass('ag-no-transition ag-clone');
+
+                element.append(clone);
+
+                var width = clone[0].offsetWidth;
+                clone.remove();
+
+                return {
+                  no: width ? Math.floor((contWidth + 12) / width) : 0,
+                  width: width
+                };
+              }
+
+              var colWidth = options.gridNo == 'auto' ? options.gridWidth : Math.floor(contWidth / options.gridNo) - options.gutterSize,
+                cols = options.gridNo == 'auto' ? Math.floor((contWidth + options.gutterSize) / (colWidth + options.gutterSize)) : options.gridNo,
+                remainingSpace = ((contWidth + options.gutterSize) % (colWidth + options.gutterSize));
+
+              colWidth = colWidth + Math.floor(remainingSpace / cols);
+
+              return {
+                no: cols,
+                width: colWidth
+              };
+            }
+
+            //method check for image loaded inside a container and trigger callback
+            function afterImageLoad(container, options) {
+              var beforeLoad = options.beforeLoad || angular.noop,
+                onLoad = options.onLoad || angular.noop,
+                isLoaded = options.isLoaded || angular.noop,
+                onFullLoad = options.onFullLoad || angular.noop,
+                ignoreCheck = options.ignoreCheck || angular.noop,
+                allImg = container.find('img'),
+                loadedImgPromises = [];
+
+              domToAry(allImg).forEach(function(img) {
+                if(!img.src) return;
+                beforeLoad(img);
+                if (!imageLoaded(img) && !ignoreCheck(img)) {
+                  loadedImgPromises.push($q(function(resolve, reject) {
+                    img.onload = function() {
+                      onLoad(img);
+                      resolve();
+                    };
+                    img.onerror = reject;
+                  }));
+                } else {
+                  isLoaded(img);
+                }
+              });
+
+              if (loadedImgPromises.length) {
+                $q.all(loadedImgPromises).then(onFullLoad, onFullLoad);
+              } else {
+                setTimeout(function() {
+                  onFullLoad();
+                }, 0);
+              }
+            }
+
+
+            //function to reflow grids
+            function reflowGrids() {
+              //return if there are no elements
+              if(!(listElms && listElms.length )) return;
+
+              reflowCount++;
+
+              //claclulate width of all element
+              var colInfo = getColWidth(),
+                colWidth = colInfo.width,
+                cols = colInfo.no,
+                i;
+
+              if (!cols) return;
+
+              //initialize listRowBottom
+              var lastRowBottom = [];
+              for (i = 0; i < cols; i++) {
+                lastRowBottom.push(0);
+              }
+
+              //if image actual width and actual height is defined update image size so that it dosent cause reflow on image load
+              domToAry(listElms).forEach(function(item) {
+                var $item = single(item);
+
+                domToAry($item.find('img')).forEach(function(img) {
+                  var $img = $(img);
+                  //if image is already loaded don't do anything
+                  if ($img.hasClass('img-loaded')) {
+                    $img.css('height', '');
+                    return;
+                  }
+
+                  //set the item width and no transition state so image width can be calculated properly
+                  $item.addClass('ag-no-transition');
+                  $item.css('width', colWidth + 'px');
+
+                  var actualWidth = $img.attr('actual-width') || $img.attr('data-actual-width'),
+                    actualHeight = $img.attr('actual-height') || $img.attr('data-actual-height');
+
+                  if (actualWidth && actualHeight) {
+                    $img.css('height', (actualHeight * img.width / actualWidth) + 'px');
+                  }
+
+                });
+                $item.removeClass('ag-no-transition');
+              });
+
+              //get all list items new height
+              var clones = listElms.clone();
+
+              clones.addClass('ag-no-transition ag-clone');
+
+              var clonesCssObj = angular.extend({}, cloneCss);
+              clonesCssObj.width = colWidth + 'px';
+              clones.css(clonesCssObj);
+              element.append(clones);
+
+              //For cloned element again we have to check if image loaded (IOS only)
+
+              (function(reflowIndx) {
+                afterImageLoad(clones, {
+                  ignoreCheck: function(img) {
+                    return !single(img).hasClass('img-loaded');
+                  },
+                  onFullLoad: function() {
+                    //if its older reflow don't do any thing
+                    if (reflowIndx < reflowCount) {
+                      clones.remove();
+                      return;
+                    }
+
+                    var listElmHeights = [],
+                      listElmPosInfo = [],
+                      item, i, ln;
+
+
+
+                    //find height with clones
+                    for (i = 0, ln = clones.length; i < ln; i++) {
+                      listElmHeights.push(clones[i].offsetHeight);
+                    }
+
+                    //set new positions
+                    for (i = 0, ln = listElms.length; i < ln; i++) {
+                      item = single(listElms[i]);
+                      var height = listElmHeights[i],
+                        top = Math.min.apply(Math, lastRowBottom),
+                        col = lastRowBottom.indexOf(top);
+
+                      //update lastRowBottom value
+                      lastRowBottom[col] = top + height + options.gutterSize;
+
+                      //set top and left of list items
+                      var posX = col * (colWidth + options.gutterSize);
+
+                      var cssObj = {
+                        position: 'absolute',
+                        top: top + 'px'
+                      };
+
+                      if (options.direction == 'rtol') {
+                        cssObj.right = posX + 'px';
+                      } else {
+                        cssObj.left = posX + 'px';
+                      }
+
+                      cssObj.width = colWidth + 'px';
+
+                      //add position info of each grids
+                      listElmPosInfo.push({
+                        top: top,
+                        bottom: top + height
+                      });
+
+                      item.css(cssObj).addClass('angular-grid-item');
+                    }
+
+                    //set the height of container
+                    var contHeight = Math.max.apply(Math, lastRowBottom);
+                    element.css('height', contHeight + 'px');
+
+                    clones.remove();
+
+                    //update the scroll container info
+                    if (options.performantScroll || scope.infiniteScroll) {
+                      scrollNs.scrollContInfo = getScrollContainerInfo();
+                    }
+
+                    //if performantScroll is enabled calculate the page info, and reflect dom elements to reflect visible pages
+                    if (options.performantScroll) {
+                      scrollNs.lastPage = null;
+                      calculatePageInfo(listElmPosInfo, contHeight, cols);
+                      scrollNs.isBusy = false;
+                      refreshDomElm(scrollNs.lastScrollPosition || 0);
+                    }
+
+                    //re enable infiniteScroll
+                    reEnableInfiniteScroll();
+                  }
+                });
+              }(reflowCount));
+
+            }
+
+
+            //function to handle asynchronous image loading
+            function handleImage() {
+              var reflowPending = false;
+              domToAry(listElms).forEach(function(listItem) {
+                var $listItem = $(listItem),
+                  allImg = $listItem.find('img');
+
+                if (!allImg.length) {
+                  return;
+                }
+
+                //add image loading class on list item
+                $listItem.addClass('img-loading');
+
+                afterImageLoad($listItem, {
+                  beforeLoad: function(img) {
+                    single(img).addClass('img-loading');
+                  },
+                  isLoaded: function(img) {
+                    single(img).removeClass('img-loading').addClass('img-loaded');
+                  },
+                  onLoad: function(img) {
+                    if (!reflowPending && options.refreshOnImgLoad) {
+                      reflowPending = true;
+                      $timeout(function() {
+                        reflowGrids();
+                        reflowPending = false;
+                      }, 100);
+                    }
+                    single(img).removeClass('img-loading').addClass('img-loaded');
+                  },
+                  onFullLoad: function() {
+                    $listItem.removeClass('img-loading').addClass('img-loaded');
+                  }
+                });
+              });
+
+            }
+
+            //function to get list elements excluding clones
+            function getListElms() {
+              return $(domToAry(element.children()).filter(function(elm) {
+                return !single(elm).hasClass('ag-clone');
+              }));
+            }
+
+            //function to check for ng animation
+            function ngCheckAnim() {
+              var leavingElm = domToAry(listElms).filter(function(elm) {
+                return single(elm).hasClass('ng-leave');
+              });
+              return $q(function(resolve) {
+                if (!leavingElm.length) {
+                  resolve();
+                } else {
+                  single(leavingElm[0]).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() {
+                    $timeout(function() {
+                      listElms = getListElms();
+                      resolve();
+                    });
+                  });
+                }
+              });
+            }
+
+            //watch on modal key
+
+            function watch() {
+              scrollNs.isBusy = true;
+              $timeout(function() {
+                listElms = getListElms();
+                ngCheckAnim().then(function() {
+                  //handle images
+                  handleImage();
+                  $timeout(function() {
+                    //to handle scroll appearance
+                    reflowGrids();
+                  });
+                });
+              });
+            }
+
+            scope.$watch('model', watch, true);
+
+
+            //watch option for changes
+            function watchOptions() {
+              getOptions();
+              if (listElms) reflowGrids();
+            }
+
+            scope.$watch('options', watchOptions, true);
+
+            Object.keys(defaults).forEach(function(key) {
+              if (scope[key] !== undefined) scope.$watch(key, watchOptions);
+            });
+
+            //listen window resize event and reflow grids after a timeout
+            var lastDomWidth = domElm.offsetWidth;
+
+            function windowResizeCallback() {
+              scrollNs.isBusy = true;
+              var contWidth = domElm.offsetWidth;
+              if (lastDomWidth == contWidth) return;
+              lastDomWidth = contWidth;
+
+
+              if (timeoutPromise) {
+                $timeout.cancel(timeoutPromise);
+              }
+
+              timeoutPromise = $timeout(function() {
+                //caclulate container info
+                if (options.performantScroll) {
+                  element.children().detach();
+                  element.append(listElms);
+                }
+
+                reflowGrids();
+              }, 100);
+            }
+            win.on('resize', windowResizeCallback);
+
+            //add instance to factory if id is assigned
+            if (agId) {
+              angularGridInstance[agId] = {
+                refresh: function() {
+                  watch();
+                },
+                handleScroll: function(scrollTop) {
+                  if (options.performantScroll) refreshDomElm(scrollTop);
+                  if (scope.infiniteScroll) infiniteScroll(scrollTop);
+                }
+              };
+            }
+
+            //destroy on refrences and events on scope destroy
+            scope.$on('$destroy', function() {
+              if (agId) delete angularGridInstance[agId];
+              win.off('resize', windowResizeCallback);
+              clearTimeout(scrollNs.infiniteScrollTimeout);
+              if (scrollNs.scrollContInfo) scrollNs.scrollContInfo.$elm.off('scroll', scrollHandler);
+            });
+          }
+        };
+      }
+    ])
+    //a factory to store angulargrid instances which can be injected to controllers or directive
+    .factory('angularGridInstance', function() {
+
+      var angularGridInstance = {};
+
+      return angularGridInstance;
+
+    })
+    .name;
+
+}));
diff --git a/styles/siteStyle.css b/styles/siteStyle.css
index 4af44580..e9ce3cb1 100644
--- a/styles/siteStyle.css
+++ b/styles/siteStyle.css
@@ -929,7 +929,7 @@ table.table span.sort-icon{
 	max-height:100%;
 	vertical-align:middle;
 }
-.media-container .files-set .file-holder span.icon{
+.media-container .files-set .file-holder span.icon, .media-container .masonry-container span.icon{
 	position:absolute;
 	top:5px;
 	right:5px;
@@ -939,7 +939,7 @@ table.table span.sort-icon{
 	right:inherit;
 	left:5px;
 }
-.media-container .files-set .file-holder span.file-label{
+.media-container .files-set .file-holder span.file-label, .media-container .masonry-container span.file-label{
 	color:#fff;
 	background:rgba(50,55,58,0.8);
 	font-size:11px;
@@ -954,9 +954,61 @@ table.table span.sort-icon{
 	opacity:0;
 }
 .media-container .files-set .file-holder:hover > span.icon,
-.media-container .files-set .file-holder a:hover > span.file-label{
+.media-container .files-set .file-holder a:hover > span.file-label,
+.media-container .masonry-container .masonry-grid:hover span.icon,
+.media-container .masonry-container .masonry-grid a:hover span.file-label{
 	opacity:1;
 }
+/* Masonry Grid */
+
+.masonry-container-hasImgs{
+	min-height: 500px;
+}
+.masonry-container-noImgs{
+	min-height: 70px;
+	overflow-y: hidden !important;
+}
+.masonry-container .masonry-dynamic-grid{
+	position: relative;
+	display: none;
+}
+.masonry-container .masonry-dynamic-grid.angular-grid{
+	display: block;
+}
+.masonry-container .masonry-grid {
+	position: absolute;
+	list-style: none;
+	background: #ffffff;
+	box-sizing: border-box;
+	-moz-box-sizing : border-box;
+	-webkit-transition: all 0.6s ease-out;
+	transition: all 0.6s ease-out;
+	overflow: hidden;
+}
+.masonry-container .masonry-grid img {
+	width: 100%;
+	vertical-align: middle;
+	-webkit-transition: opacity 0.6s ease-out;
+	transition: opacity 0.6s ease-out;
+	background-color: #fff;
+	opacity: 0;
+	visibility: hidden;
+}
+.masonry-container .masonry-grid img.img-loaded{
+	visibility: visible;
+	opacity: 1;
+}
+.masonry-container .masonry-grid span.btn-edit-icon{
+	top:10px;
+	right: 35px;
+}
+.masonry-container .masonry-grid span.btn-delete-icon{
+	top:10px;
+	right:5px;
+}
+.masonry-container .masonry-grid.selected{
+	box-shadow: 0 0 0 2px #09a3ee;
+}
 
 /* Modal */
 .modal-dialog .header{