diff --git a/bower.json b/bower.json
index 4b104b6..b04a9da 100755
--- a/bower.json
+++ b/bower.json
@@ -25,7 +25,8 @@
     "hawtio-core": "2.0.9",
     "hawtio-core-navigation": "2.0.17",
     "hawtio-utilities": "2.0.16",
-    "hawkular-charts": "~0.1.13"
+    "hawkular-charts": "~0.1.13",
+    "hawkular-ui-services": "~0.1.3"
   },
   "devDependencies": {
     "bootstrap": "3.3.2",
diff --git a/dist/hawkular-metrics.js b/dist/hawkular-metrics.js
index c4aca87..e7d0ad2 100644
--- a/dist/hawkular-metrics.js
+++ b/dist/hawkular-metrics.js
@@ -12,7 +12,7 @@ var HawkularMetrics;
     HawkularMetrics._module = angular.module(HawkularMetrics.pluginName, ['hawkularCharts']);
     var metricsTab;
     HawkularMetrics._module.config(['$locationProvider', '$routeProvider', 'HawtioNavBuilderProvider', function ($locationProvider, $routeProvider, navBuilder) {
-        metricsTab = navBuilder.create().id(HawkularMetrics.pluginName).title(function () { return "Metrics"; }).href(function () { return "/metrics"; }).subPath("Graphs", "graphs", navBuilder.join(HawkularMetrics.templatePath, 'graphs.html')).subPath("Advanced", "advanced", navBuilder.join(HawkularMetrics.templatePath, 'advanced.html')).subPath("Config", "config", navBuilder.join(HawkularMetrics.templatePath, 'config.html')).build();
+        metricsTab = navBuilder.create().id(HawkularMetrics.pluginName).title(function () { return "Metrics"; }).href(function () { return "/metrics"; }).subPath("Add Url", "addUrl", navBuilder.join(HawkularMetrics.templatePath, 'add-url.html')).subPath("Metrics Selection", "metricsSelection", navBuilder.join(HawkularMetrics.templatePath, 'metrics-selection.html')).subPath("Overview", "overview", navBuilder.join(HawkularMetrics.templatePath, 'overview.html')).subPath("Metrics View", "metricsView", navBuilder.join(HawkularMetrics.templatePath, 'metrics-view.html')).build();
         navBuilder.configureRouting($routeProvider, metricsTab);
         $locationProvider.html5Mode(true);
     }]);
@@ -25,22 +25,88 @@ var HawkularMetrics;
 
 var HawkularMetrics;
 (function (HawkularMetrics) {
-    HawkularMetrics.AdvancedController = HawkularMetrics._module.controller("HawkularMetrics.AdvancedController", ['$scope', function ($scope) {
-        $scope.advancedName = "Advanced Stuff";
-    }]);
+    var AddUrlController = (function () {
+        function AddUrlController($scope, $log, resourceUrl) {
+            var _this = this;
+            this.$scope = $scope;
+            this.$log = $log;
+            this.resourceUrl = resourceUrl;
+            $scope.vm = this;
+            this.resourceUrl = '';
+            $scope.$watch('vm.resourceUrl', function (newValue) {
+                if (angular.isDefined(newValue)) {
+                    _this.$log.debug("Add New Resource Url: " + newValue);
+                }
+            });
+        }
+        AddUrlController.prototype.addUrl = function (url) {
+            this.$log.debug("Adding Url to backend: " + url);
+        };
+        AddUrlController.$inject = ['$scope', '$log'];
+        return AddUrlController;
+    })();
+    HawkularMetrics.AddUrlController = AddUrlController;
+    HawkularMetrics._module.controller('HawkularMetrics.AddUrlController', AddUrlController);
 })(HawkularMetrics || (HawkularMetrics = {}));
 
 var HawkularMetrics;
 (function (HawkularMetrics) {
-    HawkularMetrics.ConfigController = HawkularMetrics._module.controller("HawkularMetrics.ConfigController", ['$scope', function ($scope) {
-        $scope.configName = "My Configuration";
-    }]);
+    var MetricDataService = (function () {
+        function MetricDataService($q, $rootScope, $http, $log) {
+            this.$q = $q;
+            this.$rootScope = $rootScope;
+            this.$http = $http;
+            this.$log = $log;
+        }
+        MetricDataService.prototype.getBaseUrl = function () {
+            return 'http://127.0.0.1:8080/rhq-metrics/test/metrics';
+        };
+        MetricDataService.prototype.getAllMetrics = function () {
+            this.$log.info('-- Retrieving all metrics');
+            var base = this.getBaseUrl() + '/?type=num', deferred = this.$q.defer();
+            this.$http.get(base).success(function (data) {
+                deferred.resolve(data);
+            }).error(function (reason, status) {
+                console.error('Error Retrieving all metrics :' + status + ", " + reason);
+                toastr.warning('No Metrics retrieved.');
+                deferred.reject(status + " - " + reason);
+            });
+            return deferred.promise;
+        };
+        MetricDataService.prototype.getMetricsForTimeRange = function (id, startDate, endDate, buckets) {
+            var _this = this;
+            this.$log.info('-- Retrieving metrics data for id: ' + id);
+            this.$log.info('-- Date Range: ' + startDate + ' - ' + endDate);
+            var numBuckets = buckets || 60, deferred = this.$q.defer(), searchParams = {
+                params: {
+                    start: startDate.getTime(),
+                    end: endDate.getTime(),
+                    buckets: numBuckets
+                }
+            };
+            if (startDate >= endDate) {
+                this.$log.warn("Start date was after end date");
+                deferred.reject("Start date was after end date");
+            }
+            this.$http.get(this.getBaseUrl() + '/numeric/' + id + '/data', searchParams).success(function (data) {
+                deferred.resolve(data);
+            }).error(function (reason, status) {
+                _this.$log.error('Error Loading Chart Data:' + status + ", " + reason);
+                deferred.reject(status + " - " + reason);
+            });
+            return deferred.promise;
+        };
+        MetricDataService.$inject = ['$q', '$rootScope', '$http', '$log'];
+        return MetricDataService;
+    })();
+    HawkularMetrics.MetricDataService = MetricDataService;
+    HawkularMetrics._module.service('metricDataService', MetricDataService);
 })(HawkularMetrics || (HawkularMetrics = {}));
 
 var HawkularMetrics;
 (function (HawkularMetrics) {
-    var ChartController = (function () {
-        function ChartController($scope, $rootScope, $interval, $log, metricDataService, startTimeStamp, endTimeStamp, dateRange) {
+    var MetricsViewController = (function () {
+        function MetricsViewController($scope, $rootScope, $interval, $log, metricDataService, startTimeStamp, endTimeStamp, dateRange) {
             var _this = this;
             this.$scope = $scope;
             this.$rootScope = $rootScope;
@@ -68,53 +134,53 @@ var HawkularMetrics;
                 $scope.vm.startTimeStamp = timeRange[0];
                 $scope.vm.endTimeStamp = timeRange[1];
                 $scope.vm.dateRange = moment(timeRange[0]).from(moment(timeRange[1]));
-                $scope.vm.refreshHistoricalChartDataForTimestamp(startTimeStamp, endTimeStamp);
+                $scope.vm.refreshHistoricalChartDataForTimestamp(startTimeStamp.getTime(), endTimeStamp.getTime());
             });
         }
-        ChartController.prototype.noDataFoundForId = function (id) {
+        MetricsViewController.prototype.noDataFoundForId = function (id) {
             this.$log.warn('No Data found for id: ' + id);
             toastr.warning('No Data found for id: ' + id);
         };
-        ChartController.prototype.calculatePreviousTimeRange = function (startDate, endDate) {
+        MetricsViewController.calculatePreviousTimeRange = function (startDate, endDate) {
             var previousTimeRange = [];
             var intervalInMillis = endDate.getTime() - startDate.getTime();
             previousTimeRange.push(new Date(startDate.getTime() - intervalInMillis));
             previousTimeRange.push(startDate);
             return previousTimeRange;
         };
-        ChartController.prototype.showPreviousTimeRange = function () {
-            var previousTimeRange = this.calculatePreviousTimeRange(this.startTimeStamp, this.endTimeStamp);
+        MetricsViewController.prototype.showPreviousTimeRange = function () {
+            var previousTimeRange = MetricsViewController.calculatePreviousTimeRange(this.startTimeStamp, this.endTimeStamp);
             this.startTimeStamp = previousTimeRange[0];
             this.endTimeStamp = previousTimeRange[1];
             this.refreshHistoricalChartData(this.startTimeStamp, this.endTimeStamp);
         };
-        ChartController.prototype.calculateNextTimeRange = function (startDate, endDate) {
+        MetricsViewController.calculateNextTimeRange = function (startDate, endDate) {
             var nextTimeRange = [];
             var intervalInMillis = endDate.getTime() - startDate.getTime();
             nextTimeRange.push(endDate);
             nextTimeRange.push(new Date(endDate.getTime() + intervalInMillis));
             return nextTimeRange;
         };
-        ChartController.prototype.showNextTimeRange = function () {
-            var nextTimeRange = this.calculateNextTimeRange(this.startTimeStamp, this.endTimeStamp);
+        MetricsViewController.prototype.showNextTimeRange = function () {
+            var nextTimeRange = MetricsViewController.calculateNextTimeRange(this.startTimeStamp, this.endTimeStamp);
             this.startTimeStamp = nextTimeRange[0];
             this.endTimeStamp = nextTimeRange[1];
             this.refreshHistoricalChartData(this.startTimeStamp, this.endTimeStamp);
         };
-        ChartController.prototype.hasNext = function () {
-            var nextTimeRange = this.calculateNextTimeRange(this.startTimeStamp, this.endTimeStamp);
-            return nextTimeRange[1].getTime() < _.now();
+        MetricsViewController.prototype.hasNext = function () {
+            var nextTimeRange = MetricsViewController.calculateNextTimeRange(this.startTimeStamp, this.endTimeStamp);
+            return nextTimeRange[1].getTime() < new Date().getTime();
         };
-        ChartController.prototype.refreshChartDataNow = function (startTime) {
+        MetricsViewController.prototype.refreshChartDataNow = function (startTime) {
             var adjStartTimeStamp = moment().subtract('hours', 72).toDate();
             this.$rootScope.$broadcast('MultiChartOverlayDataChanged');
             this.endTimeStamp = new Date();
             this.refreshHistoricalChartData(angular.isUndefined(startTime) ? adjStartTimeStamp : startTime, this.endTimeStamp);
         };
-        ChartController.prototype.refreshHistoricalChartData = function (startDate, endDate) {
+        MetricsViewController.prototype.refreshHistoricalChartData = function (startDate, endDate) {
             this.refreshHistoricalChartDataForTimestamp(startDate.getTime(), endDate.getTime());
         };
-        ChartController.prototype.refreshHistoricalChartDataForTimestamp = function (startTime, endTime) {
+        MetricsViewController.prototype.refreshHistoricalChartDataForTimestamp = function (startTime, endTime) {
             var _this = this;
             if (angular.isUndefined(endTime)) {
                 endTime = this.endTimeStamp.getTime();
@@ -145,7 +211,7 @@ var HawkularMetrics;
                 });
             }
         };
-        ChartController.prototype.formatBucketedChartOutput = function (response) {
+        MetricsViewController.prototype.formatBucketedChartOutput = function (response) {
             return _.map(response.data, function (point) {
                 return {
                     timestamp: point.timestamp,
@@ -158,7 +224,7 @@ var HawkularMetrics;
                 };
             });
         };
-        ChartController.prototype.togglePreviousRangeDataOverlay = function () {
+        MetricsViewController.prototype.togglePreviousRangeDataOverlay = function () {
             if (this.showPreviousRangeDataOverlay) {
                 this.chartData.prevDataPoints = [];
             }
@@ -166,9 +232,9 @@ var HawkularMetrics;
                 this.overlayPreviousRangeData();
             }
         };
-        ChartController.prototype.overlayPreviousRangeData = function () {
+        MetricsViewController.prototype.overlayPreviousRangeData = function () {
             var _this = this;
-            var previousTimeRange = this.calculatePreviousTimeRange(this.startTimeStamp, this.endTimeStamp);
+            var previousTimeRange = MetricsViewController.calculatePreviousTimeRange(this.startTimeStamp, this.endTimeStamp);
             if (this.searchId !== '') {
                 this.metricDataService.getMetricsForTimeRange(this.searchId, previousTimeRange[0], previousTimeRange[1]).then(function (response) {
                     var prevTimeRangeBucketedDataPoints = _this.formatPreviousBucketedOutput(response);
@@ -191,7 +257,7 @@ var HawkularMetrics;
                 });
             }
         };
-        ChartController.prototype.formatPreviousBucketedOutput = function (response) {
+        MetricsViewController.prototype.formatPreviousBucketedOutput = function (response) {
             var _this = this;
             var mappedNew = _.map(response, function (point, i) {
                 return {
@@ -206,7 +272,7 @@ var HawkularMetrics;
             });
             return mappedNew;
         };
-        ChartController.prototype.toggleContextZoom = function () {
+        MetricsViewController.prototype.toggleContextZoom = function () {
             if (this.showContextZoom) {
                 this.chartData.contextDataPoints = [];
             }
@@ -214,9 +280,9 @@ var HawkularMetrics;
                 this.refreshContextChart();
             }
         };
-        ChartController.prototype.refreshContextChart = function () {
+        MetricsViewController.prototype.refreshContextChart = function () {
             var _this = this;
-            var endTime = _.now(), startTime = moment().subtract('months', 24).valueOf();
+            var endTime = moment().valueOf(), startTime = moment().subtract('months', 24).valueOf();
             this.$log.debug('refreshChartContext');
             if (this.searchId !== '') {
                 if (startTime >= endTime) {
@@ -233,7 +299,7 @@ var HawkularMetrics;
                 });
             }
         };
-        ChartController.prototype.formatContextOutput = function (response) {
+        MetricsViewController.prototype.formatContextOutput = function (response) {
             return _.map(response, function (point) {
                 return {
                     timestamp: point.timestamp,
@@ -243,67 +309,21 @@ var HawkularMetrics;
                 };
             });
         };
-        ChartController.$inject = ['$scope', '$rootScope', '$interval', '$log', 'metricDataService'];
-        return ChartController;
+        MetricsViewController.$inject = ['$scope', '$rootScope', '$interval', '$log', 'metricDataService'];
+        return MetricsViewController;
     })();
-    HawkularMetrics.ChartController = ChartController;
-    HawkularMetrics._module.controller('ChartController', ChartController);
+    HawkularMetrics.MetricsViewController = MetricsViewController;
+    HawkularMetrics._module.controller('MetricsViewController', MetricsViewController);
 })(HawkularMetrics || (HawkularMetrics = {}));
 
 var HawkularMetrics;
 (function (HawkularMetrics) {
-    var MetricDataService = (function () {
-        function MetricDataService($q, $rootScope, $http, $log) {
-            this.$q = $q;
-            this.$rootScope = $rootScope;
-            this.$http = $http;
-            this.$log = $log;
-        }
-        MetricDataService.prototype.getBaseUrl = function () {
-            return 'http://127.0.0.1:8080/rhq-metrics/test/metrics';
-        };
-        MetricDataService.prototype.getAllMetrics = function () {
-            this.$log.info('-- Retrieving all metrics');
-            var base = this.getBaseUrl() + '/?type=num', deferred = this.$q.defer();
-            this.$http.get(base).success(function (data) {
-                deferred.resolve(data);
-            }).error(function (reason, status) {
-                console.error('Error Retrieving all metrics :' + status + ", " + reason);
-                toastr.warning('No Metrics retrieved.');
-                deferred.reject(status + " - " + reason);
-            });
-            return deferred.promise;
-        };
-        MetricDataService.prototype.getMetricsForTimeRange = function (id, startDate, endDate, buckets) {
-            var _this = this;
-            this.$log.info('-- Retrieving metrics data for id: ' + id);
-            this.$log.info('-- Date Range: ' + startDate + ' - ' + endDate);
-            var numBuckets = buckets || 60, deferred = this.$q.defer(), searchParams = {
-                params: {
-                    start: startDate.getTime(),
-                    end: endDate.getTime(),
-                    buckets: numBuckets
-                }
-            };
-            if (startDate >= endDate) {
-                this.$log.warn("Start date was after end date");
-                deferred.reject("Start date was after end date");
-            }
-            this.$http.get(this.getBaseUrl() + '/numeric/' + id + '/data', searchParams).success(function (data) {
-                deferred.resolve(data);
-            }).error(function (reason, status) {
-                _this.$log.error('Error Loading Chart Data:' + status + ", " + reason);
-                deferred.reject(status + " - " + reason);
-            });
-            return deferred.promise;
-        };
-        MetricDataService.$inject = ['$q', '$rootScope', '$http', '$log'];
-        return MetricDataService;
-    })();
-    HawkularMetrics.MetricDataService = MetricDataService;
-    HawkularMetrics._module.service('metricDataService', MetricDataService);
+    HawkularMetrics.OverviewController = HawkularMetrics._module.controller("HawkularMetrics.OverviewController", ['$scope', function ($scope) {
+        $scope.overview = "Over View";
+    }]);
 })(HawkularMetrics || (HawkularMetrics = {}));
 
-angular.module("hawkular-metrics-templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("plugins/metrics/html/advanced.html","<div class=\"row\" ng-controller=\"HawkularMetrics.AdvancedController\">\n    <div class=\"col-md-12\">\n        <h1>Advanced Settings: {{advancedName}}</h1>\n       TBD\n    </div>\n</div>\n");
-$templateCache.put("plugins/metrics/html/config.html","<div class=\"row\" ng-controller=\"HawkularMetrics.ConfigController\">\n    <div class=\"col-md-12\">\n        <h1>Metrics Graph Config</h1>\n        <h3>{{configName}}</h3>\n       TBD\n    </div>\n</div>\n");
-$templateCache.put("plugins/metrics/html/graphs.html","<div class=\"panel panel-default\" style=\"width:880px\" ng-controller=\"ChartController as vm\">\n    <div class=\"panel-body\">\n        <div class=\"well\">\n            <small style=\"margin-left: 15px\" class=\"graphDateTimeRangeLabel\"></small>\n\n            <form class=\"form-horizontal\" name=\"chartForm\" role=\"form\" novalidate>\n\n                <div class=\"form-group\">\n                    <label class=\"col-sm-2 control-label\">Metric ID:</label>\n\n                    <div class=\"col-sm-5\">\n                        <input type=\"text\" class=\"form-control\" name=\"searchId\" ng-model=\"vm.searchId\"\n                               ng-model-options=\"{ updateOn: \'default blur\', debounce: { \'default\': 700, \'blur\': 0 } }\"\n                               ng-enter=\"vm.refreshChartDataNow();\"\n                               placeholder=\"Enter Id...\" required ng-minlength=\"1\">\n                        <span class=\"error-message\"\n                              ng-show=\"chartForm.searchId.$dirty && chartForm.searchId.$error.required\"> * Required.</span>\n                        <span class=\"help-block\">Example: 100, apache3.cpu1  </span>\n                    </div>\n                </div>\n\n                <!--<div class=\"row\">-->\n                <!--<div class=\"col-md-12\">-->\n                <!--<relative-time-range-button-bar style=\"margin-left: 140px;\"-->\n                <!--start-time-stamp=\"vm.startTimestamp\"-->\n                <!--end-time-stamp=\"vm..endTimeStamp\">-->\n                <!--</relative-time-range-button-bar>-->\n\n                <!--<input type=\"text\" style=\"margin-left: 20px;text-align: center;\" ng-model=\"vm.dateRange\" readonly disbabled/>-->\n                <!--<p></p>-->\n                <!--</div>-->\n                <!--</div>-->\n\n                <!--<div class=\"form-group\">-->\n                <!--<label class=\"col-sm-2 control-label\">Start</label>-->\n\n                <!--<div class=\"col-sm-6\">-->\n                <!--<div class=\"dropdown\">-->\n                <!--<a class=\"dropdown-toggle\" id=\"dropdownStart\" role=\"button\" data-toggle=\"dropdown\"-->\n                <!--data-target=\"#\" href=\"#\">-->\n                <!--<div class=\"input-group\">-->\n                <!--<input type=\"text\" class=\"form-control\"-->\n                <!--data-ng-model=\"vm.startTimeStamp\">-->\n                <!--<span class=\"input-group-addon\"><i class=\"glyphicon glyphicon-calendar\"></i></span>-->\n                <!--</div>-->\n                <!--</a>-->\n                <!--<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">-->\n                <!--<datetimepicker data-ng-model=\"vm.startTimeStamp\"-->\n                <!--data-datetimepicker-config=\"{ dropdownSelector: \'#dropdownStart\' }\"/>-->\n                <!--</ul>-->\n                <!--</div>-->\n                <!--</div>-->\n                <!--</div>-->\n\n\n                <!--<div class=\"form-group\">-->\n                <!--<label class=\"col-sm-2 control-label\">End</label>-->\n\n                <!--<div class=\"col-sm-6\">-->\n\n                <!--<div class=\"dropdown\">-->\n                <!--<a class=\"dropdown-toggle\" id=\"dropdownEnd\" role=\"button\" data-toggle=\"dropdown\"-->\n                <!--data-target=\"#\" href=\"#\">-->\n                <!--<div class=\"input-group\">-->\n                <!--<input type=\"text\" class=\"form-control\"-->\n                <!--data-ng-model=\"vm.endTimeStamp\">-->\n                <!--<span class=\"input-group-addon\"><i-->\n                <!--class=\"glyphicon glyphicon-calendar\"></i></span>-->\n                <!--</div>-->\n                <!--</a>-->\n                <!--<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">-->\n                <!--<datetimepicker data-ng-model=\"vm.endTimeStamp\"-->\n                <!--data-datetimepicker-config=\"{ dropdownSelector: \'#dropdownEnd\' }\"/>-->\n                <!--</ul>-->\n                <!--</div>-->\n                <!--</div>-->\n                <!--</div>-->\n\n                <div class=\"form-group\">\n                    <div class=\"col-sm-offset-2 col-sm-10\">\n                        <button type=\"button\" class=\"btn btn-primary\"\n                                ng-disabled=\"!chartForm.$valid\"\n                                ng-click=\"vm.refreshChartDataNow()\">Refresh\n                        </button>\n                    </div>\n                </div>\n        </div>\n        </form>\n    </div>\n\n\n    <div ng-show=\"vm.chartData.dataPoints.length > 1\">\n        <div id=\"stackedBarChart\" style=\"height:270px\">\n            <!-- HINT: colors for the chart can be changed in the d3-chart.css -->\n            <hawkular-chart\n                    data=\"{{vm.chartData.dataPoints}}\"\n                    chart-type=\"bar\"\n                    show-avg-line=\"{{vm.showAvgLine}}\"\n                    hide-high-low-values=\"{{vm.hideHighLowValues}}\"\n                    chart-title=\"{{\'Metrics Id: \'+vm.searchId}}\"\n                    chart-height=\"250\"></hawkular-chart>\n        </div>\n\n        <div style=\"margin-top: 30px;\">\n            <button class=\"btn btn-sm\" ng-click=\"vm.showPreviousTimeRange()\" style=\"margin-left:90px;\"\n                    ng-show=\"vm.chartData.dataPoints.length > 2\">&lt;&lt; Prev.\n            </button>\n            <button class=\"btn btn-sm\" style=\"float:right;margin-right: 90px;\" ng-click=\"vm.showNextTimeRange()\"\n                    ng-show=\"vm.chartData.dataPoints.length > 2\" ng-disabled=\"!vm.hasNext();\">Next &gt;&gt;</button>\n        </div>\n        <br/>\n\n    </div>\n</div>\n</div>\n");}]); hawtioPluginLoader.addModule("hawkular-metrics-templates");
\ No newline at end of file
+angular.module("hawkular-metrics-templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("plugins/metrics/html/add-url.html","<div class=\"row\" ng-controller=\"HawkularMetrics.AddUrlController\" style=\"margin-left: 10px;\">\n    <h1>Welcome Brian!</h1>\n\n    <h2>Collect metrics from a website that you want to monitor.</h2>\n\n    <form class=\"form-horizontal\" name=\"addUrlForm\" role=\"form\" novalidate>\n        <div class=\"form-group input\">\n            <div class=\"col-lg-6 col-sm-8 col-xs-12 align-center\">\n                <div class=\"input-group\">\n                    <input type=\"url\" class=\"form-control input-lg\" name=\"resourceUrl\" ng-model=\"vm.resourceUrl\"\n                           ng-model-options=\"{ updateOn: \'default blur\'}\"\n                           placeholder=\"Enter a website URL\" required >\n                      <span class=\"error-message\"\n                            ng-show=\"addUrlForm.resourceUrl.$dirty && addUrlForm.resourceUrl.$error.required\">The URL you entered is not valid. Please enter a valid URL.</span>\n\n              <span class=\"input-group-btn\">\n                <button class=\"btn btn-primary btn-lg\" type=\"button\" ng-disabled=\"!addUrlForm.$valid\"\n                        ng-click=\"vm.addUrl(vm.resourceUrl)\">Get Metrics\n                </button>\n              </span>\n                </div>\n            </div>\n        </div>\n    </form>\n</div>\n");
+$templateCache.put("plugins/metrics/html/metrics-selection.html","<div class=\"row\" ng-controller=\"HawkularMetrics.MetricsSelectionController\">\n    <div class=\"col-md-12\">\n        <h1>Metrics Selection: TBD</h1>\n       TBD\n    </div>\n</div>\n");
+$templateCache.put("plugins/metrics/html/metrics-view.html","<div class=\"panel panel-default\" style=\"width:880px\" ng-controller=\"MetricsViewController as vm\">\n    <div class=\"panel-body\">\n        <div class=\"well\">\n            <small style=\"margin-left: 15px\" class=\"graphDateTimeRangeLabel\"></small>\n\n            <form class=\"form-horizontal\" name=\"chartForm\" role=\"form\" novalidate>\n\n                <div class=\"form-group\">\n                    <label class=\"col-sm-2 control-label\">Metric ID:</label>\n\n                    <div class=\"col-sm-5\">\n                        <input type=\"text\" class=\"form-control\" name=\"searchId\" ng-model=\"vm.searchId\"\n                               ng-model-options=\"{ updateOn: \'default blur\', debounce: { \'default\': 700, \'blur\': 0 } }\"\n                               placeholder=\"Enter Id...\" required ng-minlength=\"1\">\n                        <span class=\"error-message\"\n                              ng-show=\"chartForm.searchId.$dirty && chartForm.searchId.$error.required\"> * Required.</span>\n                        <span class=\"help-block\">Example: 100, apache3.cpu1  </span>\n                    </div>\n                </div>\n\n                <!--<div class=\"row\">-->\n                <!--<div class=\"col-md-12\">-->\n                <!--<relative-time-range-button-bar style=\"margin-left: 140px;\"-->\n                <!--start-time-stamp=\"vm.startTimestamp\"-->\n                <!--end-time-stamp=\"vm..endTimeStamp\">-->\n                <!--</relative-time-range-button-bar>-->\n\n                <!--<input type=\"text\" style=\"margin-left: 20px;text-align: center;\" ng-model=\"vm.dateRange\" readonly disbabled/>-->\n                <!--<p></p>-->\n                <!--</div>-->\n                <!--</div>-->\n\n                <!--<div class=\"form-group\">-->\n                <!--<label class=\"col-sm-2 control-label\">Start</label>-->\n\n                <!--<div class=\"col-sm-6\">-->\n                <!--<div class=\"dropdown\">-->\n                <!--<a class=\"dropdown-toggle\" id=\"dropdownStart\" role=\"button\" data-toggle=\"dropdown\"-->\n                <!--data-target=\"#\" href=\"#\">-->\n                <!--<div class=\"input-group\">-->\n                <!--<input type=\"text\" class=\"form-control\"-->\n                <!--data-ng-model=\"vm.startTimeStamp\">-->\n                <!--<span class=\"input-group-addon\"><i class=\"glyphicon glyphicon-calendar\"></i></span>-->\n                <!--</div>-->\n                <!--</a>-->\n                <!--<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">-->\n                <!--<datetimepicker data-ng-model=\"vm.startTimeStamp\"-->\n                <!--data-datetimepicker-config=\"{ dropdownSelector: \'#dropdownStart\' }\"/>-->\n                <!--</ul>-->\n                <!--</div>-->\n                <!--</div>-->\n                <!--</div>-->\n\n\n                <!--<div class=\"form-group\">-->\n                <!--<label class=\"col-sm-2 control-label\">End</label>-->\n\n                <!--<div class=\"col-sm-6\">-->\n\n                <!--<div class=\"dropdown\">-->\n                <!--<a class=\"dropdown-toggle\" id=\"dropdownEnd\" role=\"button\" data-toggle=\"dropdown\"-->\n                <!--data-target=\"#\" href=\"#\">-->\n                <!--<div class=\"input-group\">-->\n                <!--<input type=\"text\" class=\"form-control\"-->\n                <!--data-ng-model=\"vm.endTimeStamp\">-->\n                <!--<span class=\"input-group-addon\"><i-->\n                <!--class=\"glyphicon glyphicon-calendar\"></i></span>-->\n                <!--</div>-->\n                <!--</a>-->\n                <!--<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">-->\n                <!--<datetimepicker data-ng-model=\"vm.endTimeStamp\"-->\n                <!--data-datetimepicker-config=\"{ dropdownSelector: \'#dropdownEnd\' }\"/>-->\n                <!--</ul>-->\n                <!--</div>-->\n                <!--</div>-->\n                <!--</div>-->\n\n                <div class=\"form-group\">\n                    <div class=\"col-sm-offset-2 col-sm-10\">\n                        <button type=\"button\" class=\"btn btn-primary\"\n                                ng-disabled=\"!chartForm.$valid\"\n                                ng-click=\"vm.refreshChartDataNow()\">Refresh\n                        </button>\n                    </div>\n                </div>\n        </div>\n        </form>\n    </div>\n\n\n    <div ng-show=\"vm.chartData.dataPoints.length > 1\">\n        <div id=\"stackedBarChart\" style=\"height:270px\">\n            <!-- HINT: colors for the chart can be changed in the d3-chart.css -->\n            <hawkular-chart\n                    data=\"{{vm.chartData.dataPoints}}\"\n                    chart-type=\"bar\"\n                    show-avg-line=\"{{vm.showAvgLine}}\"\n                    hide-high-low-values=\"{{vm.hideHighLowValues}}\"\n                    chart-title=\"{{\'Metrics Id: \'+vm.searchId}}\"\n                    chart-height=\"250\"></hawkular-chart>\n        </div>\n\n        <div style=\"margin-top: 30px;\">\n            <button class=\"btn btn-sm\" ng-click=\"vm.showPreviousTimeRange()\" style=\"margin-left:90px;\"\n                    ng-show=\"vm.chartData.dataPoints.length > 2\">&lt;&lt; Prev.\n            </button>\n            <button class=\"btn btn-sm\" style=\"float:right;margin-right: 90px;\" ng-click=\"vm.showNextTimeRange()\"\n                    ng-show=\"vm.chartData.dataPoints.length > 2\" ng-disabled=\"!vm.hasNext();\">Next &gt;&gt;</button>\n        </div>\n        <br/>\n\n    </div>\n</div>\n</div>\n");
+$templateCache.put("plugins/metrics/html/overview.html","<div class=\"row\" ng-controller=\"HawkularMetrics.OverviewController\">\n    <div class=\"col-md-12\">\n        <h1>Overview: TBD</h1>\n       TBD\n    </div>\n</div>\n");}]); hawtioPluginLoader.addModule("hawkular-metrics-templates");
\ No newline at end of file
diff --git a/plugins/metrics/bower.json b/plugins/metrics/bower.json
index a5058c8..422988c 100755
--- a/plugins/metrics/bower.json
+++ b/plugins/metrics/bower.json
@@ -21,9 +21,8 @@
     "angular-bootstrap": "0.11.0",
     "toastr": "2.1.0",
     "lodash": "2.4.1",
-    "d3": "3.4.8",
-    "d3-tip": "0.6.4",
-    "hawkular-charts": "~0.1.13"
+    "hawkular-charts": "~0.1.13",
+    "hawkular-ui-services": "~0.1.3"
   },
   "devDependencies": {
     "bootstrap": "3.3.2",
diff --git a/plugins/metrics/d.ts/includes.d.ts b/plugins/metrics/d.ts/includes.d.ts
index b1377b5..1145b38 100755
--- a/plugins/metrics/d.ts/includes.d.ts
+++ b/plugins/metrics/d.ts/includes.d.ts
@@ -1 +1,3 @@
 /// <reference path="../libs/hawtio-utilities/defs.d.ts" />
+/// <reference path="../libs/hawtio-core-dts/defs.d.ts" />
+/// <reference path="../vendor/moment/moment.d.ts" />
diff --git a/plugins/metrics/defs.d.ts b/plugins/metrics/defs.d.ts
new file mode 100644
index 0000000..17b4b75
--- /dev/null
+++ b/plugins/metrics/defs.d.ts
@@ -0,0 +1,7 @@
+/// <reference path="d.ts/includes.d.ts"/>
+/// <reference path="d.ts/metrics/ts/metricsGlobals.d.ts"/>
+/// <reference path="d.ts/metrics/ts/metricsPlugin.d.ts"/>
+/// <reference path="d.ts/metrics/ts/addUrl.d.ts"/>
+/// <reference path="d.ts/metrics/ts/metricDataService.d.ts"/>
+/// <reference path="d.ts/metrics/ts/metricsView.d.ts"/>
+/// <reference path="d.ts/metrics/ts/overview.d.ts"/>
diff --git a/plugins/metrics/index.html b/plugins/metrics/index.html
index f8e126c..2a03688 100755
--- a/plugins/metrics/index.html
+++ b/plugins/metrics/index.html
@@ -50,6 +50,8 @@
     <script src="libs/d3-tip/index.js"></script>
     <script src="libs/numeral/numeral.js"></script>
     <script src="libs/hawkular-charts/hawkular-charts.js"></script>
+    <script src="libs/angular-resource/angular-resource.js"></script>
+    <script src="libs/hawkular-ui-services/dist/hawkular-ui-service.js"></script>
     <!-- endbower -->
 
     <script src="libs/bootstrap/dist/js/bootstrap.js"></script>
@@ -58,7 +60,7 @@
 
 </head>
 
-<body>
+<body data-ng-strict-di>
 <nav class="navbar navbar-default navbar-pf" role="navigation">
     <ul class="nav navbar-nav navbar-primary" hawtio-main-nav></ul>
     <ul class="nav navbar-nav" hawtio-sub-tabs></ul>
diff --git a/plugins/metrics/plugins/metrics/html/add-url.html b/plugins/metrics/plugins/metrics/html/add-url.html
new file mode 100755
index 0000000..41d0507
--- /dev/null
+++ b/plugins/metrics/plugins/metrics/html/add-url.html
@@ -0,0 +1,25 @@
+<div class="row" ng-controller="HawkularMetrics.AddUrlController" style="margin-left: 10px;">
+    <h1>Welcome Brian!</h1>
+
+    <h2>Collect metrics from a website that you want to monitor.</h2>
+
+    <form class="form-horizontal" name="addUrlForm" role="form" novalidate>
+        <div class="form-group input">
+            <div class="col-lg-6 col-sm-8 col-xs-12 align-center">
+                <div class="input-group">
+                    <input type="url" class="form-control input-lg" name="resourceUrl" ng-model="vm.resourceUrl"
+                           ng-model-options="{ updateOn: 'default blur'}"
+                           placeholder="Enter a website URL" required >
+                      <span class="error-message"
+                            ng-show="addUrlForm.resourceUrl.$dirty && addUrlForm.resourceUrl.$error.required">The URL you entered is not valid. Please enter a valid URL.</span>
+
+              <span class="input-group-btn">
+                <button class="btn btn-primary btn-lg" type="button" ng-disabled="!addUrlForm.$valid"
+                        ng-click="vm.addUrl(vm.resourceUrl)">Get Metrics
+                </button>
+              </span>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
diff --git a/plugins/metrics/plugins/metrics/html/advanced.html b/plugins/metrics/plugins/metrics/html/advanced.html
deleted file mode 100755
index 2547183..0000000
--- a/plugins/metrics/plugins/metrics/html/advanced.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="row" ng-controller="HawkularMetrics.AdvancedController">
-    <div class="col-md-12">
-        <h1>Advanced Settings: {{advancedName}}</h1>
-       TBD
-    </div>
-</div>
diff --git a/plugins/metrics/plugins/metrics/html/config.html b/plugins/metrics/plugins/metrics/html/config.html
deleted file mode 100755
index 368e13e..0000000
--- a/plugins/metrics/plugins/metrics/html/config.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="row" ng-controller="HawkularMetrics.ConfigController">
-    <div class="col-md-12">
-        <h1>Metrics Graph Config</h1>
-        <h3>{{configName}}</h3>
-       TBD
-    </div>
-</div>
diff --git a/plugins/metrics/plugins/metrics/html/metrics-selection.html b/plugins/metrics/plugins/metrics/html/metrics-selection.html
new file mode 100755
index 0000000..d6efa33
--- /dev/null
+++ b/plugins/metrics/plugins/metrics/html/metrics-selection.html
@@ -0,0 +1,6 @@
+<div class="row" ng-controller="HawkularMetrics.MetricsSelectionController">
+    <div class="col-md-12">
+        <h1>Metrics Selection: TBD</h1>
+       TBD
+    </div>
+</div>
diff --git a/plugins/metrics/plugins/metrics/html/graphs.html b/plugins/metrics/plugins/metrics/html/metrics-view.html
similarity index 98%
rename from plugins/metrics/plugins/metrics/html/graphs.html
rename to plugins/metrics/plugins/metrics/html/metrics-view.html
index eda8808..d64cd65 100755
--- a/plugins/metrics/plugins/metrics/html/graphs.html
+++ b/plugins/metrics/plugins/metrics/html/metrics-view.html
@@ -1,4 +1,4 @@
-<div class="panel panel-default" style="width:880px" ng-controller="ChartController as vm">
+<div class="panel panel-default" style="width:880px" ng-controller="MetricsViewController as vm">
     <div class="panel-body">
         <div class="well">
             <small style="margin-left: 15px" class="graphDateTimeRangeLabel"></small>
@@ -11,7 +11,6 @@
                     <div class="col-sm-5">
                         <input type="text" class="form-control" name="searchId" ng-model="vm.searchId"
                                ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 700, 'blur': 0 } }"
-                               ng-enter="vm.refreshChartDataNow();"
                                placeholder="Enter Id..." required ng-minlength="1">
                         <span class="error-message"
                               ng-show="chartForm.searchId.$dirty && chartForm.searchId.$error.required"> * Required.</span>
diff --git a/plugins/metrics/plugins/metrics/html/overview.html b/plugins/metrics/plugins/metrics/html/overview.html
new file mode 100755
index 0000000..c932a1b
--- /dev/null
+++ b/plugins/metrics/plugins/metrics/html/overview.html
@@ -0,0 +1,6 @@
+<div class="row" ng-controller="HawkularMetrics.OverviewController">
+    <div class="col-md-12">
+        <h1>Overview: TBD</h1>
+       TBD
+    </div>
+</div>
diff --git a/plugins/metrics/plugins/metrics/ts/advanced.ts b/plugins/metrics/plugins/metrics/ts/addUrl.ts
similarity index 51%
rename from plugins/metrics/plugins/metrics/ts/advanced.ts
rename to plugins/metrics/plugins/metrics/ts/addUrl.ts
index eb515b7..1641d57 100755
--- a/plugins/metrics/plugins/metrics/ts/advanced.ts
+++ b/plugins/metrics/plugins/metrics/ts/addUrl.ts
@@ -17,10 +17,29 @@
 
 module HawkularMetrics {
 
+    export class AddUrlController {
+        public static  $inject = ['$scope', '$log'];
 
-  export var AdvancedController = _module.controller("HawkularMetrics.AdvancedController", ['$scope', ($scope) => {
-    $scope.advancedName = "Advanced Stuff";
+        constructor(private $scope:any,
+                    private $log:ng.ILogService,
+                    public resourceUrl:string) {
+            $scope.vm = this;
+            this.resourceUrl = '';
 
-  }]);
+            $scope.$watch('vm.resourceUrl', (newValue)  => {
+                if(angular.isDefined(newValue)){
+                    this.$log.debug("Add New Resource Url: " + newValue);
+                }
+            });
+
+        }
+
+        addUrl(url:string):void {
+            this.$log.debug("Adding Url to backend: "+ url);
+        }
+
+    }
+
+    _module.controller('HawkularMetrics.AddUrlController', AddUrlController);
 
 }
diff --git a/plugins/metrics/plugins/metrics/ts/metricsPlugin.ts b/plugins/metrics/plugins/metrics/ts/metricsPlugin.ts
index 8edf2ce..f098c42 100755
--- a/plugins/metrics/plugins/metrics/ts/metricsPlugin.ts
+++ b/plugins/metrics/plugins/metrics/ts/metricsPlugin.ts
@@ -28,9 +28,10 @@ module HawkularMetrics {
             .id(HawkularMetrics.pluginName)
             .title(() => "Metrics")
             .href(() => "/metrics")
-            .subPath("Graphs", "graphs", navBuilder.join(HawkularMetrics.templatePath, 'graphs.html'))
-            .subPath("Advanced", "advanced", navBuilder.join(HawkularMetrics.templatePath, 'advanced.html'))
-            .subPath("Config", "config", navBuilder.join(HawkularMetrics.templatePath, 'config.html'))
+            .subPath("Add Url", "addUrl", navBuilder.join(HawkularMetrics.templatePath, 'add-url.html'))
+            .subPath("Metrics Selection", "metricsSelection", navBuilder.join(HawkularMetrics.templatePath, 'metrics-selection.html'))
+            .subPath("Overview", "overview", navBuilder.join(HawkularMetrics.templatePath, 'overview.html'))
+            .subPath("Metrics View", "metricsView", navBuilder.join(HawkularMetrics.templatePath, 'metrics-view.html'))
             .build();
 
         navBuilder.configureRouting($routeProvider, metricsTab);
diff --git a/plugins/metrics/plugins/metrics/ts/graphs.ts b/plugins/metrics/plugins/metrics/ts/metricsView.ts
similarity index 94%
rename from plugins/metrics/plugins/metrics/ts/graphs.ts
rename to plugins/metrics/plugins/metrics/ts/metricsView.ts
index b03d94b..47fa44b 100755
--- a/plugins/metrics/plugins/metrics/ts/graphs.ts
+++ b/plugins/metrics/plugins/metrics/ts/metricsView.ts
@@ -47,7 +47,7 @@ module HawkularMetrics {
 ///        chartTypes: string[];
 ///
 ///    }
-    export interface IChartController {
+    export interface IMetricsViewController {
         searchId: string;
         startTimeStamp: Date;
         endTimeStamp: Date;
@@ -80,7 +80,7 @@ module HawkularMetrics {
      * @param $log
      * @param metricDataService
      */
-    export class ChartController implements IChartController {
+    export class MetricsViewController implements IMetricsViewController {
         public static  $inject = ['$scope', '$rootScope', '$interval', '$log', 'metricDataService'];
 
         searchId = '';
@@ -143,7 +143,7 @@ module HawkularMetrics {
         }
 
         showPreviousTimeRange():void {
-            var previousTimeRange = ChartController.calculatePreviousTimeRange(this.startTimeStamp, this.endTimeStamp);
+            var previousTimeRange = MetricsViewController.calculatePreviousTimeRange(this.startTimeStamp, this.endTimeStamp);
 
             this.startTimeStamp = previousTimeRange[0];
             this.endTimeStamp = previousTimeRange[1];
@@ -163,7 +163,7 @@ module HawkularMetrics {
 
 
         showNextTimeRange():void {
-            var nextTimeRange = ChartController.calculateNextTimeRange(this.startTimeStamp, this.endTimeStamp);
+            var nextTimeRange = MetricsViewController.calculateNextTimeRange(this.startTimeStamp, this.endTimeStamp);
 
             this.startTimeStamp = nextTimeRange[0];
             this.endTimeStamp = nextTimeRange[1];
@@ -173,11 +173,11 @@ module HawkularMetrics {
 
 
         hasNext():boolean {
-            var nextTimeRange = ChartController.calculateNextTimeRange(this.startTimeStamp, this.endTimeStamp);
+            var nextTimeRange = MetricsViewController.calculateNextTimeRange(this.startTimeStamp, this.endTimeStamp);
             // unsophisticated test to see if there is a next; without actually querying.
 
             //@fixme: pay the price, do the query!
-            return nextTimeRange[1].getTime() < _.now();
+            return nextTimeRange[1].getTime() < new Date().getTime();
         }
 
 
@@ -265,7 +265,7 @@ module HawkularMetrics {
 
 
         overlayPreviousRangeData():void {
-            var previousTimeRange = ChartController.calculatePreviousTimeRange(this.startTimeStamp, this.endTimeStamp);
+            var previousTimeRange = MetricsViewController.calculatePreviousTimeRange(this.startTimeStamp, this.endTimeStamp);
 
             if (this.searchId !== '') {
                 this.metricDataService.getMetricsForTimeRange(this.searchId, previousTimeRange[0], previousTimeRange[1])
@@ -324,7 +324,7 @@ module HawkularMetrics {
         refreshContextChart():void {
             // unsophisticated default time range to avoid DB checking right now
             // @fixme: add a real service to determine unbounded range
-            var endTime = _.now(),
+            var endTime = moment().valueOf(),
                 startTime = moment().subtract('months', 24).valueOf();
 
             this.$log.debug('refreshChartContext');
@@ -362,6 +362,6 @@ module HawkularMetrics {
         }
     }
 
-    _module.controller('ChartController', ChartController);
+    _module.controller('MetricsViewController', MetricsViewController);
 
 }
diff --git a/plugins/metrics/plugins/metrics/ts/config.ts b/plugins/metrics/plugins/metrics/ts/overview.ts
similarity index 83%
rename from plugins/metrics/plugins/metrics/ts/config.ts
rename to plugins/metrics/plugins/metrics/ts/overview.ts
index 31726dd..e2795ab 100755
--- a/plugins/metrics/plugins/metrics/ts/config.ts
+++ b/plugins/metrics/plugins/metrics/ts/overview.ts
@@ -18,8 +18,8 @@
 module HawkularMetrics {
 
 
-  export var ConfigController = _module.controller("HawkularMetrics.ConfigController", ['$scope', ($scope) => {
-    $scope.configName = "My Configuration";
+  export var OverviewController = _module.controller("HawkularMetrics.OverviewController", ['$scope', ($scope) => {
+    $scope.overview = "Over View";
 
   }]);