diff --git a/src/app/controllers/pro/datasourcesCtrl.js b/src/app/controllers/pro/datasourcesCtrl.js
index d836b945e5a..2086cb2a0a3 100644
--- a/src/app/controllers/pro/datasourcesCtrl.js
+++ b/src/app/controllers/pro/datasourcesCtrl.js
@@ -9,13 +9,29 @@ function (angular) {
 
   module.controller('DataSourcesCtrl', function($scope, $http, backendSrv) {
 
-    $scope.init = function() {
+    var defaults = {
+      name: '',
+      type: 'graphite',
+      url: '',
+      access: 'proxy'
     };
 
-    $scope.getAccount = function() {
-      backendSrv.get('/api/account/').then(function(account) {
-        $scope.account = account;
-        $scope.collaborators = account.collaborators;
+    $scope.init = function() {
+      $scope.current = angular.copy(defaults);
+    };
+
+    $scope.addDatasource = function() {
+      if (!$scope.editForm.$valid) {
+        return;
+      }
+
+      backendSrv.request({
+        method: 'POST',
+        url: '/api/admin/datasource/add',
+        data: $scope.current,
+        desc: 'Add data source'
+      }).then(function(result) {
+        console.log('add datasource result', result);
       });
     };
 
diff --git a/src/app/partials/pro/datasources.html b/src/app/partials/pro/datasources.html
index fa2acfa6554..71aa1c536d3 100644
--- a/src/app/partials/pro/datasources.html
+++ b/src/app/partials/pro/datasources.html
@@ -1,2 +1,49 @@
-
 <div ng-include="'app/partials/pro/navbar.html'" ng-init="pageTitle='Data sources'"></div>
+
+<div class="dashboard-edit-view" style="min-height: 500px">
+	<div class="editor-row">
+		<div class="section">
+
+			<div class="dashboard-editor-header">
+				<div class="dashboard-editor-title">
+					<i class="icon icon-sitemap"></i>
+					Add data source
+				</div>
+			</div>
+
+			<form name="editForm">
+
+				<div class="dashboard-editor-body">
+
+					<div class="editor-row">
+						<div class="editor-option">
+							<label class="small">Data source name</label>
+							<input type="text" class="input-large" required ng-model='current.name' placeholder="name" required></input>
+						</div>
+						<div class="editor-option">
+							<label class="small">Type</label>
+							<select class="input-medium" ng-model="current.type" ng-options="f for f in ['graphite', 'influxdb', 'opentsdb']" ng-change="typeChanged()"></select>
+						</div>
+					</div>
+
+					<div class="editor-row">
+						<div class="editor-option">
+							<label class="small">Url</label>
+							<input type="text" class="input-xxlarge" required ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
+						</div>
+						<div class="editor-option">
+							<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
+							<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
+						</div>
+					</div>
+
+				</div>
+
+				<div class="dashboard-editor-footer">
+					<button type="submit" class="btn btn-success" ng-click="addDatasource()">Add</button>
+				</div>
+
+			</form>
+		</div>
+	</div>
+</div>
diff --git a/src/app/services/pro/backendSrv.js b/src/app/services/pro/backendSrv.js
index 9b8607c6127..02762a80104 100644
--- a/src/app/services/pro/backendSrv.js
+++ b/src/app/services/pro/backendSrv.js
@@ -13,6 +13,10 @@ function (angular, _) {
       return this.request({ method: 'GET', url: url });
     };
 
+    this.post = function(url, data) {
+      return this.request({ method: 'POST', url: url, data: data });
+    };
+
     this.request = function(options) {
       var httpOptions = {
         url: options.url,