diff --git a/app/global-translations/locale-en.json b/app/global-translations/locale-en.json
index ce5b3c10..20fb22d0 100644
--- a/app/global-translations/locale-en.json
+++ b/app/global-translations/locale-en.json
@@ -786,5 +786,16 @@
   "label.roles":"Roles",
   "label.view.makerchecker.settings":"View Maker Checker Settings",
   "label.makerchecker.tasks":"Maker Checker Configurations",
-  "label.edit.makerchecker":"Edit Maker Checker Settings"
+  "label.edit.makerchecker":"Edit Maker Checker Settings",
+
+  "#Productmix":"....",
+  "label.product.productmix":"Product Mix",
+  "label.list.productname":"Product Name",
+  "label.allowedproducts":"Allowed Products",
+  "label.restrictedproducts":"Restricted Products",
+  "label.restrict":"Restrict",
+  "label.allow":"Allow",
+  "label.editproductmix":"Edit ProductMix",
+  "label.addproductmix":"Add ProductMix",
+  "label.selectproduct":"Select Product"
 }
\ No newline at end of file
diff --git a/app/scripts/controllers/product/productmix/AddProductMixController.js b/app/scripts/controllers/product/productmix/AddProductMixController.js
new file mode 100644
index 00000000..62c094b0
--- /dev/null
+++ b/app/scripts/controllers/product/productmix/AddProductMixController.js
@@ -0,0 +1,70 @@
+(function(module) {
+    mifosX.controllers = _.extend(module, {
+        AddProductMixController: function(scope,resourceFactory,routeParams,location) {
+            scope.allowed = [];
+            scope.restricted = [];
+            scope.products = [];
+            resourceFactory.loanProductTemplateResource.get({isProductMixTemplate:'true'} , function(data) {
+                scope.products = data.productOptions;
+            });
+            scope.productInfo = function(id){
+                resourceFactory.loanProductResource.getProductmix({loanProductId:id,resourceType:'productmix',template:'true'},function(data) {
+                    scope.productmix = data;
+                    scope.allowedProducts = data.allowedProducts;
+                    scope.restrictedProducts = data.restrictedProducts;
+                });
+            };
+            scope.restrict = function(){
+                for(var i in this.allowed)
+                {
+                    for(var j in scope.allowedProducts){
+                        if(scope.allowedProducts[j].id == this.allowed[i])
+                        {
+                            var temp = {};
+                            temp.id = this.allowed[i];
+                            temp.name = scope.allowedProducts[j].name;
+                            temp.includeInBorrowerCycle = scope.allowedProducts[j].includeInBorrowerCycle;
+                            scope.restrictedProducts.push(temp);
+                            scope.allowedProducts.splice(j,1);
+                        }
+                    }
+                }
+            };
+            scope.allow = function(){
+                for(var i in this.restricted)
+                {
+                    for(var j in scope.restrictedProducts){
+                        if(scope.restrictedProducts[j].id == this.restricted[i])
+                        {
+                            var temp = {};
+                            temp.id = this.restricted[i];
+                            temp.name = scope.restrictedProducts[j].name;
+                            temp.includeInBorrowerCycle = scope.restrictedProducts[j].includeInBorrowerCycle;
+                            scope.allowedProducts.push(temp);
+                            scope.restrictedProducts.splice(j,1);
+                        }
+                    }
+                }
+            };
+            scope.submit = function (){
+                var productId = this.formData.productId;
+                var temp = [];
+                var final = {};
+                for(var i in scope.restrictedProducts){
+                    temp[i] = scope.restrictedProducts[i].id;
+                }
+                final.restrictedProducts = temp;
+                resourceFactory.loanProductResource.save({loanProductId: productId,resourceType:'productmix'},final,function(data) {
+                    location.path('/viewproductmix/'+data.productId);
+                });
+            };
+
+
+        }
+
+    });
+    mifosX.ng.application.controller('AddProductMixController', ['$scope','ResourceFactory','$routeParams','$location', mifosX.controllers.AddProductMixController]).run(function($log) {
+        $log.info("AddProductMixController initialized");
+    });
+}(mifosX.controllers || {}));
+
diff --git a/app/scripts/controllers/product/productmix/ProductMixController.js b/app/scripts/controllers/product/productmix/ProductMixController.js
new file mode 100644
index 00000000..8f522533
--- /dev/null
+++ b/app/scripts/controllers/product/productmix/ProductMixController.js
@@ -0,0 +1,13 @@
+(function(module) {
+    mifosX.controllers = _.extend(module, {
+        ProductMixController: function(scope, resourceFactory) {
+            scope.productmixes = [];
+            resourceFactory.loanProductResource.getAllLoanProducts({associations:'productMixes'},function(data) {
+                scope.productmixes = data;
+            });
+        }
+    });
+    mifosX.ng.application.controller('ProductMixController', ['$scope', 'ResourceFactory', mifosX.controllers.ProductMixController]).run(function($log) {
+        $log.info("ProductMixController initialized");
+    });
+}(mifosX.controllers || {}));
diff --git a/app/scripts/controllers/product/productmix/ViewProductMixController.js b/app/scripts/controllers/product/productmix/ViewProductMixController.js
new file mode 100644
index 00000000..41b4b3c0
--- /dev/null
+++ b/app/scripts/controllers/product/productmix/ViewProductMixController.js
@@ -0,0 +1,75 @@
+(function(module) {
+    mifosX.controllers = _.extend(module, {
+        ViewProductMixController: function(scope, resourceFactory,routeParams,location) {
+            scope.productmix = [];
+            scope.choice = 0;
+            scope.allowed = [];
+            scope.restricted = [];
+            resourceFactory.loanProductResource.getProductmix({loanProductId:routeParams.id,resourceType:'productmix'},function(data) {
+                scope.productmix = data;
+                scope.allowedProducts = data.allowedProducts;
+                scope.restrictedProducts = data.restrictedProducts;
+            });
+
+            scope.deleteproductmixpop = function(){
+               scope.choice = 1;
+            };
+            scope.cancelDelete = function() {
+                scope.choice = 0;
+            };
+            scope.delete = function(){
+                resourceFactory.loanProductResource.delete({loanProductId:routeParams.id,resourceType:'productmix'},{},function(data) {
+                    location.path('/productmix');
+                });
+            };
+            scope.restrict = function(){
+                for(var i in this.allowed)
+                {
+                    for(var j in scope.allowedProducts){
+                        if(scope.allowedProducts[j].id == this.allowed[i])
+                        {
+                            var temp = {};
+                            temp.id = this.allowed[i];
+                            temp.name = scope.allowedProducts[j].name;
+                            temp.includeInBorrowerCycle = scope.allowedProducts[j].includeInBorrowerCycle;
+                            scope.restrictedProducts.push(temp);
+                            scope.allowedProducts.splice(j,1);
+                        }
+                    }
+                }
+            };
+            scope.allow = function(){
+                for(var i in this.restricted)
+                {
+                    for(var j in scope.restrictedProducts){
+                        if(scope.restrictedProducts[j].id == this.restricted[i])
+                        {
+                            var temp = {};
+                            temp.id = this.restricted[i];
+                            temp.name = scope.restrictedProducts[j].name;
+                            temp.includeInBorrowerCycle = scope.restrictedProducts[j].includeInBorrowerCycle;
+                            scope.allowedProducts.push(temp);
+                            scope.restrictedProducts.splice(j,1);
+                        }
+                    }
+                }
+            };
+            scope.submit = function() {
+                var temp = [];
+                var final = {};
+                for(var i in scope.restrictedProducts){
+                temp[i] = scope.restrictedProducts[i].id;
+                }
+                final.restrictedProducts = temp;
+                resourceFactory.loanProductResource.put({loanProductId:routeParams.id,resourceType:'productmix'},final,function(data) {
+                     location.path('/viewproductmix/'+routeParams.id);
+                });
+            };
+
+
+        }
+    });
+    mifosX.ng.application.controller('ViewProductMixController', ['$scope', 'ResourceFactory','$routeParams','$location', mifosX.controllers.ViewProductMixController]).run(function($log) {
+        $log.info("ViewProductMixController initialized");
+    });
+}(mifosX.controllers || {}));
diff --git a/app/scripts/mifosXComponents.js b/app/scripts/mifosXComponents.js
index 30cf3a5b..5f813853 100644
--- a/app/scripts/mifosXComponents.js
+++ b/app/scripts/mifosXComponents.js
@@ -124,7 +124,10 @@ define(['underscore', 'mifosX'], function() {
       'centers/CenterAttendanceController',
       'product/CreateChargeController',
       'product/EditChargeController',
-      'configurations/GlobalConfigurationController'
+      'configurations/GlobalConfigurationController',
+      'product/productmix/ProductMixController',
+      'product/productmix/ViewProductMixController',
+      'product/productmix/AddProductMixController'
     ],
     filters: [
       'StatusLookup'
diff --git a/app/scripts/routes.js b/app/scripts/routes.js
index ac8e6030..116308e7 100644
--- a/app/scripts/routes.js
+++ b/app/scripts/routes.js
@@ -360,6 +360,18 @@
       })
       .when('/global', {
         templateUrl: 'views/administration/global.html'
+      })
+      .when('/productmix', {
+        templateUrl: 'views/products/productmix/productmix.html'
+      })
+      .when('/viewproductmix/:id', {
+        templateUrl: 'views/products/productmix/viewproductmix.html'
+      })
+      .when('/editproductmix/:id', {
+        templateUrl: 'views/products/productmix/editproductmix.html'
+      })
+      .when('/addproductmix', {
+        templateUrl: 'views/products/productmix/addproductmix.html'
       });
     $locationProvider.html5Mode(false);
   };
diff --git a/app/scripts/services/ResourceFactoryProvider.js b/app/scripts/services/ResourceFactoryProvider.js
index d5ed71a7..f2fa2fbb 100644
--- a/app/scripts/services/ResourceFactoryProvider.js
+++ b/app/scripts/services/ResourceFactoryProvider.js
@@ -80,6 +80,7 @@
           }),
           loanProductResource: defineResource(apiVer + "/loanproducts/:loanProductId/:resourceType", {resourceType:'@resourceType', loanProductId:'@loanProductId'}, {
             getAllLoanProducts: {method: 'GET', params: {}, isArray:true},
+            getProductmix: {method: 'GET', params: {}},
             put: {method: 'PUT', params: {}}
           }),
           chargeResource: defineResource(apiVer + "/charges/:chargeId", {chargeId:'@chargeId'}, {
@@ -217,9 +218,11 @@
           cacheResource:defineResource(apiVer + "/caches",{}, {
             get: {method: 'GET', params: {}, isArray:true},
             update: {method: 'PUT', params: {}}
+          }),
+          loanProductTemplateResource: defineResource(apiVer + "/loanproducts/template", {}, {
+           get: {method: 'GET', params: {}}
           })
 
-
         };
       }];
     }
diff --git a/app/styles/app.css b/app/styles/app.css
index c425d158..4a72566a 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -35,10 +35,18 @@ body, html {
     padding-left: 20px;
 }
 
+.paddedleft0 {
+    padding-left: 15px;
+}
+
 .paddedtop {
 padding-top: 10px;
 }
 
+.paddedtop10 {
+    padding-top: 40px;
+}
+
 .paddedbottom {
 padding-bottom: 40px;
 }
@@ -375,7 +383,7 @@ input.marginbottom0px, textarea.marginbottom0px  {
     font-weight:bolder;
 }
 
-
 .input-mini-small {
   width: 25px;
-}
\ No newline at end of file
+}
+
diff --git a/app/views/clients/clients.html b/app/views/clients/clients.html
index 57bf8ca4..90eaf5a0 100644
--- a/app/views/clients/clients.html
+++ b/app/views/clients/clients.html
@@ -6,7 +6,6 @@
         <a href="#/createclient" class="btn btn-primary"><i class="icon-plus icon-white"></i> Create Client</a>
     </div>
 </div>
-
 <div class="row-fluid" ng-controller="ClientController">
     <input ng-model="filterText" type="text" class="span marginbottom0px" placeholder="Filter by name/acct#/staff/office">
 	<table class="table">
diff --git a/app/views/products/productmix/addproductmix.html b/app/views/products/productmix/addproductmix.html
new file mode 100644
index 00000000..f1842dda
--- /dev/null
+++ b/app/views/products/productmix/addproductmix.html
@@ -0,0 +1,39 @@
+<form class="form-horizontal well" ng-controller="AddProductMixController" ng-submit="submit()">
+    <fieldset>
+        <legend>{{'label.addproductmix' | translate}}</legend>
+        <div class="control-group">
+            <label class="control-label">{{ 'label.selectproduct' | translate }}</label>
+            <div class="controls">
+                <select ng-model="formData.productId">
+                    <option ng-repeat="product in products" data-ng-click="productInfo(product.id)" value="{{product.id}}">{{product.name}}</option>
+                </select>
+            </div>
+        </div>
+        <div class="control-group">
+            <div class="row-fluid" data-ng-show="formData.productId">
+                <div class="span3">
+                    <label class="control-label">{{ 'label.allowedproducts' | translate }}</label>
+                    <select multiple ng-model="allowed">
+                        <option ng-repeat="allowedProduct in allowedProducts" value="{{allowedProduct.id}}">{{allowedProduct.name}}</option>
+                    </select>
+                </div>
+                <div class="paddedtop10 span1 paddedleft0">
+                    <button type="button" class="btn btn-primary" data-ng-click="restrict()"><i class="icon-double-angle-right"></i></button><br/>
+                    <button type="button" class="btn btn-primary" data-ng-click="allow()"><i class="icon-double-angle-left"></i></button>
+                </div>
+                <div class="span3">
+                    <label class="control-label">{{ 'label.restrictedproducts' | translate }}</label>
+                    <select multiple ng-model="restricted">
+                        <option ng-repeat="restrictedProduct in restrictedProducts" value="{{restrictedProduct.id}}">{{restrictedProduct.name}}</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div class="offset2 paddedleft120">
+            <a href="#/productmix" class="btn">{{ 'label.cancel' | translate }}</a>
+            <button type="submit" class="btn btn-primary">{{ 'label.save' | translate }}</button>
+        </div>
+    </fieldset>
+</form>
+
+
diff --git a/app/views/products/productmix/editproductmix.html b/app/views/products/productmix/editproductmix.html
new file mode 100644
index 00000000..5f1742e8
--- /dev/null
+++ b/app/views/products/productmix/editproductmix.html
@@ -0,0 +1,28 @@
+<form data-ng-controller="ViewProductMixController" ng-submit="submit()">
+    <div class="paddedleft">
+        <h3>{{ 'label.editproductmix' | translate }}</h3>
+        <div class="row-fluid">
+            <div class="span3">
+                <label class="control-label">{{ 'label.allowedproducts' | translate }}</label>
+                <select multiple ng-model="allowed">
+                    <option ng-repeat="allowedProduct in allowedProducts" value="{{allowedProduct.id}}">{{allowedProduct.name}}</option>
+                </select>
+            </div>
+            <div class="paddedtop10 span1 paddedleft0">
+                <button type="button" class="btn btn-primary" data-ng-click="restrict()"><i class="icon-double-angle-right"></i></button><br/>
+                <button type="button" class="btn btn-primary" data-ng-click="allow()"><i class="icon-double-angle-left"></i></button>
+            </div>
+            <div class="span3">
+                <label class="control-label">{{ 'label.restrictedproducts' | translate }}</label>
+                <select multiple ng-model="restricted">
+                    <option ng-repeat="restrictedProduct in restrictedProducts" value="{{restrictedProduct.id}}">{{restrictedProduct.name}}</option>
+                </select>
+            </div>
+        </div>
+        <br/><hr/>
+        <div>
+            <a href="#/viewproductmix/{{productmix.productId}}" class="btn">{{ 'label.cancel' | translate }}</a>
+            <button type="submit" class="btn btn-primary">{{ 'label.save' | translate }}</button>
+        </div>
+    </div>
+</form>
diff --git a/app/views/products/productmix/productmix.html b/app/views/products/productmix/productmix.html
new file mode 100644
index 00000000..9a3988bc
--- /dev/null
+++ b/app/views/products/productmix/productmix.html
@@ -0,0 +1,27 @@
+<div>
+    <ul class="breadcrumb">
+        <li class="active">{{'label.product.productmix' | translate}}</li>
+    </ul>
+    <div class="pull-right">
+        <a href="#/addproductmix" class="btn btn-primary"><i class="icon-plus icon-white"></i>{{'label.add' | translate}}</a>
+    </div>
+</div>
+<div class="row-fluid" ng-controller="ProductMixController">
+    <input ng-model="filterText" type="text" class="span marginbottom0px" placeholder="{{'label.filterbyname' | translate}}">
+    <table class="table">
+        <thead>
+            <tr class="graybg">
+                <th>{{'label.list.productname' | translate}}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr ng-repeat="productmix in productmixes  | filter:filterText">
+                <td><a href="#/viewproductmix/{{productmix.productId}}">{{productmix.productName}}</a></td>
+            </tr>
+        </tbody>
+    </table>
+    <ul class="pager">
+        <li class="previous"><a ng-click="groups.previous()" data-ng-hide="!groups.hasPrevious()">&larr; {{'label.prev' | translate}}</a></li>
+        <li class="next" ><a ng-click="groups.next()" data-ng-hide="!groups.hasNext()">{{'label.next' | translate}} &rarr;</a></li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/app/views/products/productmix/viewproductmix.html b/app/views/products/productmix/viewproductmix.html
new file mode 100644
index 00000000..07e7300e
--- /dev/null
+++ b/app/views/products/productmix/viewproductmix.html
@@ -0,0 +1,63 @@
+<div ng-controller="ViewProductMixController">
+    <div>
+        <ul class="breadcrumb">
+            <li>
+                <h3>
+                    &nbsp;
+                    {{productmix.productName}}
+                </h3>
+            </li>
+            <li><span class="divider">|</span>
+                <i class="icon-barcode"></i>
+                <small>{{ 'label.uniquelyidentifiedwithid' | translate }} {{productmix.productId}}&nbsp;</small>
+            </li>
+        </ul>
+    </div>
+    <div>
+        <div class="row-fluid">
+            <div class="row-fluid primarydiv">
+                <div class="btn-group pull-right" data-ng-hide="center.status.value == 'Closed'">
+                    <a href="#/editproductmix/{{productmix.productId}}" class="btn btn-primary"><i class="icon-edit icon-white"></i>{{ 'label.edit' | translate }}</a>
+                    <button class="btn btn-primary" data-ng-click="deleteproductmixpop()"><i class="icon-trash icon-white"></i>{{ 'label.delete' | translate }}</button>
+                </div>
+            </div>
+            <br/>
+            <div data-ng-switch on="choice">
+                <form data-ng-switch-when="1">
+                    <div class="offset3 paddedleft120">
+                        <button type="button" class="btn" data-ng-click="cancelDelete()">{{ 'label.cancel' | translate }}</button>
+                        <button type="button" class="btn btn-primary paddedleft" data-ng-click="delete(center.id)">{{ 'label.confirmdelete' | translate }}</button>
+                    </div>
+                    <hr/>
+                </form>
+            </div>
+            <div class="row-fluid">
+                <div class="span6">
+                    <table class="table table-striped" width="100%" >
+                        <thead>
+                        <tr class="graybg">
+                            <th colspan="2">{{ 'label.allowedproducts' | translate }}</th>
+                        </tr>
+                        </thead>
+                        <tr data-ng-repeat="allowed in productmix.allowedProducts">
+                            <td width="40%">{{allowed.name}}</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="span6">
+                    <table class="table table-striped" width="100%" >
+                        <thead>
+                        <tr class="graybg">
+                            <th colspan="2">{{ 'label.restrictedproducts' | translate }}</th>
+                        </tr>
+                        </thead>
+                        <tr data-ng-repeat="restricted in productmix.restrictedProducts">
+                            <td width="40%">{{restricted.name}}</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/app/views/products/products.html b/app/views/products/products.html
index a359ae72..9644e018 100644
--- a/app/views/products/products.html
+++ b/app/views/products/products.html
@@ -17,7 +17,7 @@
 	      <h4 class="list-group-item-heading"><i class="icon-large icon-briefcase"></i>&nbsp;&nbsp;{{ 'link.products.savingproducts' | translate }}</h4>
 	      <p class="list-group-item-text">Add new saving prodcut or modify or inactivate saving prodcut.</p>
 	    </a>
-	    <a class="list-group-item" href="#">
+	    <a class="list-group-item" href="#/productmix">
 	      <h4 class="list-group-item-heading"><i class="icon-large icon-random"></i>&nbsp;&nbsp;{{ 'link.products.productsmix' | translate }}</h4>
 	      <p class="list-group-item-text">Defines rules for taking multiple rules</p>
 	    </a>