diff --git a/src/app/components/customWidget/customWidget.service.js b/src/app/components/customWidget/customWidget.service.js
index 530f63949..e7963a414 100644
--- a/src/app/components/customWidget/customWidget.service.js
+++ b/src/app/components/customWidget/customWidget.service.js
@@ -56,25 +56,35 @@
             angular.extend(modalOptions, defaultModalOptions, customModalOptions);
 
             modal.controller = ['$scope','$uibModalInstance', 'widgetOptions', function ($scope, $uibModalInstance, widgetOptions) {
-                $scope.advancedOptions = false;
+                $scope.enableAdvOptions = false;
                 $scope.toggleAdv = function() {
-                  $scope.advancedOptions = !$scope.advancedOptions;
+                  $scope.enableAdvOptions = !$scope.enableAdvOptions;
+                }
+                $scope.enableUIOptions = false;
+                $scope.toggleUI = function() {
+                  $scope.enableUIOptions = !$scope.enableUIOptions;
                 }
                 $scope.selected = {
                   name: '',
                   'text-oneline':''
                 };
-                $scope.isCumulative = false;
-                $scope.attrs = {
+                $scope.advOptions = {
+                  isCumulative: false,
+                  isConverted: false,
                   forcey: '1',
-                  percentage: true,
-                  area: true
+                  percentage: false,
+                  area: false
                 };
+                $scope.UIOptions = {
+                  width: '50%',
+                  height: '250px',
+                  enableVerticalResize: false
+                }
                 $scope.updateCumulative = function(param) {
                   if (param)
-                    $scope.isCumulative = true;
+                    $scope.advOptions.isCumulative = true;
                   else
-                    $scope.isCumulative = false;
+                    $scope.advOptions.isCumulative = false;
                 }
                 $scope.widgetOptions = {};
                 angular.extend($scope.widgetOptions, widgetOptions);
@@ -83,20 +93,29 @@
                     widgetOptions.name = $scope.selected.name;
                     widgetOptions.title = $scope.selected.name;
                     widgetOptions.dataModelOptions.name = $scope.selected.name;
-                    if($scope.isCumulative) {
+                    if($scope.advOptions.isCumulative) {
                       widgetOptions.dataModelType = 'CumulativeMetricDataModel';
                     }
                     else{
                       widgetOptions.dataModelType = 'MetricDataModel';
                     }
-                    if ($scope.advancedOptions) {
-                      
+                    if ($scope.enableAdvOptions) {
                       widgetOptions.attrs = {
-                        forcey: $scope.attrs.forcey,
-                        integer: !$scope.attrs.percentage,
-                        percentage: $scope.attrs.percentage,
-                        area: $scope.attrs.area
+                        forcey: $scope.advOptions.forcey,
+                        integer: !$scope.advOptions.percentage,
+                        percentage: $scope.advOptions.percentage,
+                        area: $scope.advOptions.area
                       }
+                      if ($scope.advOptions.isConverted) {
+                        widgetOptions.dataModelType = 'ConvertedMetricDataModel';
+                      }
+                    }
+                    if ($scope.enableUIOptions) {
+                      widgetOptions.size = {
+                        width: $scope.UIOptions.width,
+                        height: $scope.UIOptions.height
+                      };
+                      widgetOptions.enableVerticalResize = $scope.UIOptions.enableVerticalResize;
                     }
                     $uibModalInstance.close(result);
                 };
diff --git a/src/app/components/customWidget/customWidgetModal.html b/src/app/components/customWidget/customWidgetModal.html
index d319e7bf1..0668b0c17 100644
--- a/src/app/components/customWidget/customWidgetModal.html
+++ b/src/app/components/customWidget/customWidgetModal.html
@@ -23,7 +23,7 @@ <h4>{{ selected['text-oneline'] }}</h4>
         </div>
         <div class="customwidget-checkbox">
           <label>
-            <input type="checkbox" ng-model="isCumulative">
+            <input type="checkbox" ng-model="advOptions.isCumulative">
             <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
             Cumulative Data Model
           </label>
@@ -55,30 +55,58 @@ <h4>{{ selected['text-oneline'] }}</h4>
         </div>
 -->
         <div class="input-group input-group-lg">
-        <button type="button" class="btn btn-lg btn-default" ng-click="toggleAdv()">Advanced Options &nbsp; <i ng-class="{'fa fa-plus-square-o': !advancedOptions, 'fa fa-minus-square-o': advancedOptions}"></i></button>
-        <button type="button" class="btn btn-lg btn-default">UI Options &nbsp; <i class="fa fa-plus-square-o"></i></button>
+          <button type="button" class="btn pull-right btn-lg btn-default" ng-click="toggleAdv()">Advanced Options &nbsp; <i ng-class="{'fa fa-plus-square-o': !enableAdvOptions, 'fa fa-minus-square-o': enableAdvOptions}"></i></button>
         </div>
-        <div ng-if="advancedOptions">
+        <div ng-if="enableAdvOptions">
           <div class="input-group input-group-lg target">
               <span class="input-group-addon">ForceY</span>
-              <input type="text" class="form-control" name="forcey" data-content="" rel="popover" data-placement="bottom" ng-model="attrs.forcey" required>
+              <input type="text" class="form-control" name="forcey" data-content="" rel="popover" data-placement="bottom" ng-model="advOptions.forcey" required>
           </div>
           <div class="row">
             <div class="customwidget-checkbox col-md-6">
               <label>
-                <input type="checkbox" ng-model="attrs.percentage">
+                <input type="checkbox" ng-model="advOptions.percentage">
                 <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                 Percentage
               </label>
             </div>
             <div class="customwidget-checkbox col-md-6">
               <label>
-                <input type="checkbox" ng-model="attrs.area">
+                <input type="checkbox" ng-model="advOptions.area">
                 <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                 Area
               </label>
             </div>
           </div>
+          <div class="row">
+            <div class="customwidget-checkbox col-md-6">
+              <label>
+                <input type="checkbox" ng-model="advOptions.isConverted">
+                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                Converted Data Model
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="input-group input-group-lg">
+          <button type="button" class="btn pull-right btn-lg btn-default" ng-click="toggleUI()">UI Options &nbsp; <i ng-class="{'fa fa-plus-square-o': !enableUIOptions, 'fa fa-minus-square-o': enableUIOptions}"></i></button>
+        </div>
+        <div ng-if="enableUIOptions">
+          <div class="input-group input-group-lg target">
+              <span class="input-group-addon">Width</span>
+              <input type="text" class="form-control" name="width" data-content="" rel="popover" data-placement="bottom" ng-model="UIOptions.width" required>
+          </div>
+          <div class="input-group input-group-lg target">
+              <span class="input-group-addon">Height</span>
+              <input type="text" class="form-control" name="width" data-content="" rel="popover" data-placement="bottom" ng-model="UIOptions.height" required>
+          </div>
+          <div class="customwidget-checkbox">
+            <label>
+              <input type="checkbox" ng-model="UIOptions.enableVerticalResize">
+              <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+              Enable Vertical Resize
+            </label>
+          </div>
         </div>
     </form>
 </div>
diff --git a/src/app/main/main.controller.js b/src/app/main/main.controller.js
index 6c587fb27..25e4d73fe 100644
--- a/src/app/main/main.controller.js
+++ b/src/app/main/main.controller.js
@@ -245,6 +245,14 @@
                     area: vm.customWidgetOptions.attrs.area
                   }
                 }
+                if (vm.customWidgetOptions.size!=undefined) {
+                  widget.size = {
+                    width: vm.customWidgetOptions.size.width,
+                    height: vm.customWidgetOptions.size.height
+                  }
+                }
+                if (vm.customWidgetOptions.enableVerticalResize!=undefined)
+                  widget.enableVerticalResize = vm.customWidgetOptions.enableVerticalResize;
                 widgetDefinitions.push(widget);
                 widgetsToLoad.push(widget);
                 vm.reload = true;