diff --git a/web/app/adapters/application.js b/web/app/adapters/application.js
new file mode 100644
index 000000000..e274ceceb
--- /dev/null
+++ b/web/app/adapters/application.js
@@ -0,0 +1,13 @@
+import DS from 'ember-data';
+import Ember from 'ember';
+
+export default DS.JSONAPIAdapter.extend({
+  namespace: 'rest'
+});
+
+export default DS.RESTAdapter.extend({
+  namespace: 'rest',
+  pathForType: function (type) {
+    return  Ember.String.pluralize(type);
+  }
+});
diff --git a/web/app/app.js b/web/app/app.js
new file mode 100644
index 000000000..831ad6106
--- /dev/null
+++ b/web/app/app.js
@@ -0,0 +1,18 @@
+import Ember from 'ember';
+import Resolver from './resolver';
+import loadInitializers from 'ember-load-initializers';
+import config from './config/environment';
+
+let App;
+
+Ember.MODEL_FACTORY_INJECTIONS = true;
+
+App = Ember.Application.extend({
+  modulePrefix: config.modulePrefix,
+  podModulePrefix: config.podModulePrefix,
+  Resolver
+});
+
+loadInitializers(App, config.modulePrefix);
+
+export default App;
diff --git a/web/app/components/single-tab.js b/web/app/components/single-tab.js
new file mode 100644
index 000000000..926b61300
--- /dev/null
+++ b/web/app/components/single-tab.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});
diff --git a/web/app/components/user-tabs.js b/web/app/components/user-tabs.js
new file mode 100644
index 000000000..f1eee775f
--- /dev/null
+++ b/web/app/components/user-tabs.js
@@ -0,0 +1,22 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  newUser: null,  // this is binded to the text box for adding user
+  showInputBox: false,
+  actions: {
+
+    /**
+     * sets showInputBox to true to show the input box
+     */
+    showInput() {
+      this.set("showInputBox", true);
+    },
+
+    /**
+     * sets showInputBox to false to hide the input box
+     */
+    resetInput() {
+      this.set("showInputBox", false);
+    }
+  }
+});
diff --git a/web/app/controllers/app.js b/web/app/controllers/app.js
new file mode 100644
index 000000000..b0efbf8d1
--- /dev/null
+++ b/web/app/controllers/app.js
@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  queryParams: ['applicationid'],
+  applicationid: null,
+});
diff --git a/web/app/controllers/dashboard.js b/web/app/controllers/dashboard.js
new file mode 100644
index 000000000..e7df4fb5f
--- /dev/null
+++ b/web/app/controllers/dashboard.js
@@ -0,0 +1,34 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  showInputBox: false,
+  actions: {
+
+    /**
+     * This action adds a new tab and clicks on it once the tab is added and rendered
+     * @params user The user to be added as a tab
+     */
+    addTab(user) {
+      this.users.addToUsername(user);
+      this.users.setActiveUser(user);
+      this.set('model.usernames',this.users.getUsernames());
+      Ember.run.scheduleOnce('afterRender', this, function() {
+        Ember.$("#"+user).trigger("click");
+      });
+    },
+
+    /**
+     * This action deletes the tab from the list and clicks on the `all` tab
+     * @params tabname the tab to delete
+     */
+    deleteTab(tabname) {
+      this.users.deleteUsername(tabname);
+      this.set('model.usernames',this.users.getUsernames());
+      if(this.users.getActiveUser()===tabname) {
+        Ember.run.scheduleOnce('afterRender', this, function () {
+          Ember.$("#all a").trigger("click");
+        });
+      }
+    }
+  }
+});
diff --git a/web/app/controllers/dashboard/app.js b/web/app/controllers/dashboard/app.js
new file mode 100644
index 000000000..bb8c37907
--- /dev/null
+++ b/web/app/controllers/dashboard/app.js
@@ -0,0 +1,34 @@
+import users from 'dr-elephant/models/users';
+import Dashboard from 'dr-elephant/controllers/dashboard';
+
+export default Dashboard.extend({
+  users: new users(),
+  loading: false,
+
+  /**
+   * This function returns the list of usernames currently stored
+   * @returns The list of usernames currently stored
+   */
+  usernames() {
+    return this.users.getUsernames();
+  },
+
+  actions: {
+
+    /**
+     * changes the tab to the clicked user
+     * @params The name of the user tab
+     */
+    changeTab(tabname) {
+      this.set("loading", true);
+      this.users.setActiveUser(tabname);
+      var _this = this;
+      _this.store.unloadAll();
+      var newApplications = this.store.query('application-summary', {username: tabname});
+      newApplications.then(function () {
+        _this.set("model.applications", newApplications);
+        _this.set("loading", false);
+      });
+    }
+  }
+});
diff --git a/web/app/controllers/dashboard/job.js b/web/app/controllers/dashboard/job.js
new file mode 100644
index 000000000..c167dbf95
--- /dev/null
+++ b/web/app/controllers/dashboard/job.js
@@ -0,0 +1,33 @@
+import users from 'dr-elephant/models/users';
+import Dashboard from 'dr-elephant/controllers/dashboard';
+
+export default Dashboard.extend({
+  users: new users(),
+  loading: false,
+
+  /**
+   * This function returns the list of usernames currently stored
+   * @returns The list of usernames currently stored
+   */
+  usernames: function () {
+    return this.users.getUsernames();
+  },
+  actions: {
+
+    /**
+     * changes the tab to the clicked user
+     * @params The name of the user tab
+     */
+    changeTab(tabname) {
+      this.set("loading", true);
+      this.users.setActiveUser(tabname);
+      var _this = this;
+      _this.store.unloadAll();
+      var newJobs = this.store.query('job-summary', {username: tabname});
+      newJobs.then(function () {
+        _this.set("model.jobs", newJobs);
+        _this.set("loading", false);
+      });
+    }
+  }
+});
diff --git a/web/app/controllers/dashboard/workflow.js b/web/app/controllers/dashboard/workflow.js
new file mode 100644
index 000000000..c551ef043
--- /dev/null
+++ b/web/app/controllers/dashboard/workflow.js
@@ -0,0 +1,35 @@
+import Ember from 'ember';
+import users from 'dr-elephant/models/users';
+import Dashboard from 'dr-elephant/controllers/dashboard';
+
+export default Dashboard.extend({
+  users: new users(),
+  loading: false,
+  
+  /**
+   * This function returns the list of usernames currently stored
+   * @returns The list of usernames currently stored
+   */
+  usernames: function () {
+    return this.users.getUsernames();
+  },
+  actions: {
+
+    /**
+     * changes the tab to the clicked user
+     * @params The name of the user tab
+     */
+    changeTab(tabname) {
+      this.set("loading", true);
+      this.users.setActiveUser(tabname);
+      var _this = this;
+      _this.store.unloadAll();
+      var newworkflows = this.store.query('workflow-summary', {username: tabname});
+      newworkflows.then(function () {
+        _this.set("model.workflows", newworkflows);
+        _this.set("loading", false);
+      });
+    }
+
+  }
+});
diff --git a/web/app/helpers/eq.js b/web/app/helpers/eq.js
new file mode 100644
index 000000000..8e042fda5
--- /dev/null
+++ b/web/app/helpers/eq.js
@@ -0,0 +1,15 @@
+import Ember from 'ember';
+
+/**
+ * helper takes two parameters and returns true if both are equal else returns false
+ * @param params The parameters for the helper
+ * @returns {boolean}
+ */
+export function eq(params) {
+  if (params[0] === params[1]) {
+    return true;
+  }
+  return false;
+}
+
+export default Ember.Helper.helper(eq);
diff --git a/web/app/helpers/get-bootstrap-severity-code.js b/web/app/helpers/get-bootstrap-severity-code.js
new file mode 100644
index 000000000..271acb8e4
--- /dev/null
+++ b/web/app/helpers/get-bootstrap-severity-code.js
@@ -0,0 +1,25 @@
+import Ember from 'ember';
+
+/** Map to convert serverity to bootstrap class **/
+const SEVERITY_TO_BOOTSTRAP_MAP = {
+  critical: "danger",
+  severe: "severe",
+  moderate: "warning",
+  low: "success",
+  none:"success"
+};
+
+/**
+ * This helper takes the serverity as the parameter value and returns the corresponding bootstrap code
+ * @param params The parameters
+ * @returns  one of {"danger","severe","warning","success"}
+ */
+export function getBootstrapSeverityCode(params) {
+  let [severity] = params;
+  if (severity == null) {
+    return SEVERITY_TO_BOOTSTRAP_MAP.none;
+  }
+  return SEVERITY_TO_BOOTSTRAP_MAP[severity.toLowerCase()];
+}
+
+export default Ember.Helper.helper(getBootstrapSeverityCode);
diff --git a/web/app/helpers/get-color-for-severity.js b/web/app/helpers/get-color-for-severity.js
new file mode 100644
index 000000000..b562aabf4
--- /dev/null
+++ b/web/app/helpers/get-color-for-severity.js
@@ -0,0 +1,26 @@
+import Ember from 'ember';
+
+
+/** Map to convert severity to color **/
+const SEVERITY_TO_COLOR_CODE_MAP = {
+  critical: "#D9534F",
+  severe: "#E4804E",
+  moderate: "#F0AD4E",
+  low: "#5CB85C",
+  none:"#5CB85C"
+};
+
+/**
+ * Returns the color based on the severity
+ * @param params The severity value
+ * @returns The color based on the serverity
+ */
+export function getColorForSeverity(params) {
+  let [severity] = params;
+  if(severity==null) {
+    return SEVERITY_TO_COLOR_CODE_MAP.none;
+  }
+  return SEVERITY_TO_COLOR_CODE_MAP[severity.toLowerCase()];
+}
+
+export default Ember.Helper.helper(getColorForSeverity);
diff --git a/web/app/helpers/get-date.js b/web/app/helpers/get-date.js
new file mode 100644
index 000000000..74ad206ae
--- /dev/null
+++ b/web/app/helpers/get-date.js
@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+/**
+ * Returns the date from milliseconds
+ * @param params The date to convert
+ * @returns The converted date
+ */
+export function getDate(params) {
+  let [date] = params;
+  return new Date(date);
+}
+
+export default Ember.Helper.helper(getDate);
diff --git a/web/app/helpers/get-duration-breakdown.js b/web/app/helpers/get-duration-breakdown.js
new file mode 100644
index 000000000..59125e2fe
--- /dev/null
+++ b/web/app/helpers/get-duration-breakdown.js
@@ -0,0 +1,29 @@
+import Ember from 'ember';
+
+const TIME = {
+  milliseconds_in_seconds: 1000,
+  seconds_in_minutes: 60,
+  minutes_in_hours: 60,
+  hours_in_days: 24
+};
+
+/**
+ * Breaks down milliseconds to HH:MM:SS
+ * @param params time in milliseconds
+ * @returns {*}
+ */
+export function getDurationBreakdown(params) {
+  let [duration] = params;
+  var seconds = parseInt((duration / TIME.milliseconds_in_seconds) % TIME.seconds_in_minutes), minutes = parseInt((duration / (TIME.milliseconds_in_seconds * TIME.seconds_in_minutes)) % TIME.minutes_in_hours), hours = parseInt((duration / (TIME.milliseconds_in_seconds * TIME.seconds_in_minutes * TIME.minutes_in_hours)) % TIME.hours_in_days);
+
+  if(duration<TIME.milliseconds_in_seconds) {
+    return "00:00:00";
+  }
+  hours = (hours < 10) ? "0" + hours : hours;
+  minutes = (minutes < 10) ? "0" + minutes : minutes;
+  seconds = (seconds < 10) ? "0" + seconds : seconds;
+
+  return hours + ":" + minutes + ":" + seconds;
+}
+
+export default Ember.Helper.helper(getDurationBreakdown);
diff --git a/web/app/helpers/get-percentage.js b/web/app/helpers/get-percentage.js
new file mode 100644
index 000000000..fecfdb13f
--- /dev/null
+++ b/web/app/helpers/get-percentage.js
@@ -0,0 +1,19 @@
+import Ember from 'ember';
+
+/**
+ * Calculates the percentage given two params
+ * @param params The arguments for percentage
+ * @returns The percentage in the form PP.PP%
+ */
+export function getPercentage(params) {
+  let [arg1, arg2] = params;
+  if(arg2===0) {
+    return "0%";
+  }
+
+  var percentage = ( arg1 / arg2 ) * 100;
+  var percentString = percentage.toFixed(2).toString()+ "%";
+  return percentString;
+}
+
+export default Ember.Helper.helper(getPercentage);
diff --git a/web/app/helpers/get-resource-in-gbhours.js b/web/app/helpers/get-resource-in-gbhours.js
new file mode 100644
index 000000000..f09c44815
--- /dev/null
+++ b/web/app/helpers/get-resource-in-gbhours.js
@@ -0,0 +1,29 @@
+import Ember from 'ember';
+
+const mbs_in_one_gb = 1024;
+const seconds_in_one_hour = 3600;
+
+/**
+ * Returns the resource after converting to GB Hours
+ * @param params The resource in MB Seconds
+ * @returns Resource in GB Hours
+ */
+export function getResourceInGBHours(params) {
+  let [MBSeconds] = params;
+  if (MBSeconds == 0) {
+    return "0 GB Hours";
+  }
+
+  var GBseconds = MBSeconds/mbs_in_one_gb;
+  var GBHours = GBseconds / seconds_in_one_hour;
+
+  if ((GBHours * 1000).toFixed(0) == 0) {
+    return "0 GB Hours";
+  }
+
+  var GBHoursString = GBHours.toFixed(3).toString();
+  GBHoursString = GBHoursString + " GB Hours";
+  return GBHoursString;
+}
+
+export default Ember.Helper.helper(getResourceInGBHours);
diff --git a/web/app/helpers/not-empty.js b/web/app/helpers/not-empty.js
new file mode 100644
index 000000000..3f34f7664
--- /dev/null
+++ b/web/app/helpers/not-empty.js
@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+/**
+ * Checks if a given string is empty
+ * @param params
+ * @returns {boolean}
+ */
+export function notEmpty(params) {
+  let [id] = params;
+  if(id==="") {
+    return false;
+  }
+  return true;
+}
+
+export default Ember.Helper.helper(notEmpty);
diff --git a/web/app/helpers/url-encode.js b/web/app/helpers/url-encode.js
new file mode 100644
index 000000000..b2905cc74
--- /dev/null
+++ b/web/app/helpers/url-encode.js
@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+/**
+ * Encodes a url
+ * @param params The url to encode
+ * @returns The encoded url
+ */
+export function urlEncode(params) {
+  let [uri] = params;
+  return encodeURIComponent(uri);
+}
+
+export default Ember.Helper.helper(urlEncode);
diff --git a/web/app/index.html b/web/app/index.html
new file mode 100644
index 000000000..c431bf4b4
--- /dev/null
+++ b/web/app/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>DrElephant</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+
+    <link rel="stylesheet" href="assets/vendor.css">
+    <link rel="stylesheet" href="assets/dr-elephant.css">
+
+    {{content-for "head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+
+    <script src="assets/vendor.js"></script>
+    <script src="assets/dr-elephant.js"></script>
+
+    {{content-for "body-footer"}}
+  </body>
+</html>
diff --git a/web/app/initializers/component-router-injector.js b/web/app/initializers/component-router-injector.js
new file mode 100644
index 000000000..ec124afc2
--- /dev/null
+++ b/web/app/initializers/component-router-injector.js
@@ -0,0 +1,9 @@
+export function initialize(application) {
+  // Injects all Ember components with a router object:
+  application.inject('component', 'router', 'router:main');
+}
+
+export default {
+  name: 'component-router-injector',
+  initialize: initialize
+};
diff --git a/web/app/models/application-summary.js b/web/app/models/application-summary.js
new file mode 100644
index 000000000..9f2a5b606
--- /dev/null
+++ b/web/app/models/application-summary.js
@@ -0,0 +1,15 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  username: DS.attr("string"),
+  starttime: DS.attr("date"),
+  finishtime: DS.attr("date"),
+  runtime: DS.attr("string"),
+  waittime: DS.attr("string"),
+  resourceused: DS.attr("string"),
+  resourcewasted: DS.attr("string"),
+  severity: DS.attr("string"),
+  heuristicsummary: DS.attr(),
+  jobname: DS.attr("string")
+});
+
diff --git a/web/app/models/job-summary.js b/web/app/models/job-summary.js
new file mode 100644
index 000000000..621ca2d81
--- /dev/null
+++ b/web/app/models/job-summary.js
@@ -0,0 +1,15 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  jobname: DS.attr("string"),
+  jobtype: DS.attr("string"),
+  username: DS.attr("string"),
+  starttime: DS.attr("date"),
+  finishtime: DS.attr("date"),
+  runtime: DS.attr("string"),
+  waittime: DS.attr("string"),
+  resourceused: DS.attr("string"),
+  resourcewasted: DS.attr("string"),
+  severity: DS.attr("string"),
+  tasksseverity: DS.attr(),
+});
diff --git a/web/app/models/users.js b/web/app/models/users.js
new file mode 100644
index 000000000..f7ed8a90f
--- /dev/null
+++ b/web/app/models/users.js
@@ -0,0 +1,80 @@
+import Ember from 'ember';
+
+/**
+ * Custom model to store usernames in the local html store.
+ */
+export default Ember.Object.extend({
+
+  /**
+   * Sets the active user to user
+   */
+  setActiveUser: function(user) {
+    localStorage.setItem('active-user',user);
+  },
+
+  /**
+   * Returns the current active user from store
+   */
+  getActiveUser: function() {
+    if(localStorage.getItem("active-user")=="null") {
+      return null;
+    }
+    return localStorage.getItem("active-user");
+  },
+
+  /**
+   * Returns all the stored usernames
+   */
+  getUsernames: function () {
+
+    var usernamesString = localStorage.getItem('dr-elephant-users');
+    if(usernamesString == null || usernamesString==="") {
+      return Ember.A([]);
+    }
+    var usernamesArray = Ember.A([]);
+    usernamesArray.pushObjects(usernamesString.split(","));
+    return usernamesArray;
+  },
+
+  /**
+   * Stores the usernames
+   */
+  storeUsernames: function () {
+    var usernamesString = this.usernames.join(",");
+    localStorage.setItem('dr-elephant-users', usernamesString);
+  },
+
+  /**
+   * Adds a new user to the localstore
+   */
+  addToUsername: function (user) {
+    var userNames = this.getUsernames();
+    if(!userNames.contains(user)) {
+      userNames.pushObject(user);
+    }
+    var usernamesString  = userNames.join(",");
+    localStorage.setItem('dr-elephant-users',usernamesString);
+  },
+
+  /**
+   * Deletes a username from the store
+   */
+  deleteUsername: function(user) {
+    var userNames = this.getUsernames();
+    if(userNames.contains(user)) {
+      userNames.removeObject(user);
+    }
+    var usernamesString  = "";
+    if(userNames.length!==0) {
+      usernamesString  = userNames.join(",");
+    }
+    localStorage.setItem('dr-elephant-users',usernamesString);
+  },
+
+  /**
+   * Clears the local storage
+   */
+  clearStorage: function () {
+    localStorage.clear();
+  }
+});
diff --git a/web/app/models/workflow-summary.js b/web/app/models/workflow-summary.js
new file mode 100644
index 000000000..bebb9a91a
--- /dev/null
+++ b/web/app/models/workflow-summary.js
@@ -0,0 +1,14 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  username: DS.attr("string"),
+  starttime: DS.attr("date"),
+  finishtime: DS.attr("date"),
+  runtime: DS.attr("string"),
+  waittime: DS.attr("string"),
+  resourceused: DS.attr("string"),
+  resourcewasted: DS.attr("string"),
+  severity: DS.attr("string"),
+  jobsseverity: DS.attr(),
+  queue: DS.attr("string")
+});
diff --git a/web/app/resolver.js b/web/app/resolver.js
new file mode 100644
index 000000000..2fb563d6c
--- /dev/null
+++ b/web/app/resolver.js
@@ -0,0 +1,3 @@
+import Resolver from 'ember-resolver';
+
+export default Resolver;
diff --git a/web/app/router.js b/web/app/router.js
new file mode 100644
index 000000000..6d58da8c5
--- /dev/null
+++ b/web/app/router.js
@@ -0,0 +1,21 @@
+import Ember from 'ember';
+import config from './config/environment';
+
+const Router = Ember.Router.extend({
+  location: config.locationType
+});
+
+Router.map(function () {
+  this.route('dashboard', function () {
+    this.route('workflow');
+    this.route('job');
+    this.route('app');
+  });
+  this.route('help');
+  this.route('workflow');
+  this.route('job');
+  this.route('app');
+  this.route('search');
+});
+
+export default Router;
diff --git a/web/app/routes/dashboard.js b/web/app/routes/dashboard.js
new file mode 100644
index 000000000..1c674bc79
--- /dev/null
+++ b/web/app/routes/dashboard.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  beforeModel() {
+    this.transitionTo('dashboard.workflow');
+  }
+});
diff --git a/web/app/routes/dashboard/app.js b/web/app/routes/dashboard/app.js
new file mode 100644
index 000000000..54852cd6e
--- /dev/null
+++ b/web/app/routes/dashboard/app.js
@@ -0,0 +1,27 @@
+import Ember from 'ember';
+import Users from 'dr-elephant/models/users';
+
+export default Ember.Route.extend({
+  users: new Users(),
+  beforeModel(){
+    this.usernames = this.users.getUsernames();
+    this.set('usernames',this.users.getUsernames());
+  },
+  model(){
+    /** Do not load applications model here, they will be loaded in afterModel **/
+    return Ember.RSVP.hash({
+      usernames: this.users.getUsernames(),
+      applications: {}
+    });
+  },
+  afterModel() {
+    /** once the page is rendered, click on the current user tab **/
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      if(this.users.getActiveUser()==null) {
+        Ember.$("#all a").trigger("click");
+      } else {
+        Ember.$("#" + this.users.getActiveUser()).trigger("click");
+      }
+    });
+  }
+});
diff --git a/web/app/routes/dashboard/job.js b/web/app/routes/dashboard/job.js
new file mode 100644
index 000000000..2f503cd97
--- /dev/null
+++ b/web/app/routes/dashboard/job.js
@@ -0,0 +1,27 @@
+import Ember from 'ember';
+import Users from 'dr-elephant/models/users';
+
+export default Ember.Route.extend({
+  users: new Users(),
+  beforeModel(){
+    this.usernames = this.users.getUsernames();
+    this.set('usernames',this.users.getUsernames());
+  },
+  model(){
+    /** Do not load jobs here, jobs will be loaded in afterModel **/
+    return Ember.RSVP.hash({
+      usernames: this.users.getUsernames(),
+      jobs: {}
+    });
+  },
+  afterModel() {
+    /** once the page is rendered, click on the current user tab **/
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      if(this.users.getActiveUser()==null) {
+        Ember.$("#all a").trigger("click");
+      } else {
+        Ember.$("#" + this.users.getActiveUser()).trigger("click");
+      }
+    });
+  }
+});
diff --git a/web/app/routes/dashboard/workflow.js b/web/app/routes/dashboard/workflow.js
new file mode 100644
index 000000000..27fc81895
--- /dev/null
+++ b/web/app/routes/dashboard/workflow.js
@@ -0,0 +1,28 @@
+import Ember from 'ember';
+import Users from 'dr-elephant/models/users';
+
+export default Ember.Route.extend({
+
+  users: new Users(),
+  beforeModel(){
+    this.usernames = this.users.getUsernames();
+    this.set('usernames',this.users.getUsernames());
+  },
+  model(){
+    /** do not load workflows here, workflows will be loaded in afterModel **/
+    return Ember.RSVP.hash({
+      usernames: new Users().getUsernames(),
+      workflows: {}
+    });
+  },
+  afterModel() {
+    /** once the page is rendered, click on the active user tab **/
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      if(this.users.getActiveUser()==null) {
+        Ember.$("#all a").trigger("click");
+      } else {
+        Ember.$("#" + this.users.getActiveUser()).trigger("click");
+      }
+    });
+  }
+});
diff --git a/web/app/serializers/app.js b/web/app/serializers/app.js
new file mode 100644
index 000000000..d698ab7a7
--- /dev/null
+++ b/web/app/serializers/app.js
@@ -0,0 +1,4 @@
+import DS from 'ember-data';
+
+export default DS.RESTSerializer.extend({
+});
diff --git a/web/app/serializers/application-summary.js b/web/app/serializers/application-summary.js
new file mode 100644
index 000000000..d698ab7a7
--- /dev/null
+++ b/web/app/serializers/application-summary.js
@@ -0,0 +1,4 @@
+import DS from 'ember-data';
+
+export default DS.RESTSerializer.extend({
+});
diff --git a/web/app/serializers/job-summary.js b/web/app/serializers/job-summary.js
new file mode 100644
index 000000000..d698ab7a7
--- /dev/null
+++ b/web/app/serializers/job-summary.js
@@ -0,0 +1,4 @@
+import DS from 'ember-data';
+
+export default DS.RESTSerializer.extend({
+});
diff --git a/web/app/serializers/workflow-summary.js b/web/app/serializers/workflow-summary.js
new file mode 100644
index 000000000..d698ab7a7
--- /dev/null
+++ b/web/app/serializers/workflow-summary.js
@@ -0,0 +1,4 @@
+import DS from 'ember-data';
+
+export default DS.RESTSerializer.extend({
+});
diff --git a/web/app/styles/app.css b/web/app/styles/app.css
new file mode 100644
index 000000000..4adc7321d
--- /dev/null
+++ b/web/app/styles/app.css
@@ -0,0 +1,149 @@
+@import 'partials/application.css';
+@import 'partials/navbar.css';
+@import 'partials/dashboard-header.css';
+@import 'partials/jobs-severity.css';
+@import 'partials/aggregated-metrics.css';
+@import 'partials/breadcrumbs.css';
+@import 'partials/user-tabs.css';
+@import 'partials/application-menu.css';
+@import 'partials/heuristics-summary.css';
+@import 'partials/search.css';
+@import 'partials/heuristic-detail.css';
+
+.list-group-item {
+  border-radius: 0 !important;
+  padding: 10px 10px 10px 10px;
+  border: 0px;
+}
+
+.shadow {
+  box-shadow: 0 1px 8px -2px rgb(82, 82, 82);
+}
+
+.box {
+  position: relative;
+  border: none;
+}
+
+.borderless td, .borderless th {
+  border: none;
+  border-top: 0px;
+}
+
+.severity-Severe {
+  color: #E4804E !important;
+}
+
+.severity-Critical {
+  color: #D9534F !important;
+}
+
+.severity-Moderate {
+  color: #F0AD4E !important;
+}
+
+.severity-Low {
+  color: #5CB85C !important;
+}
+
+.severity-None {
+  color: #5CB85C !important;
+}
+
+.app-header {
+  color: #5e6365;
+  font-family: 'Shift', sans-serif;
+  margin-left: 10px;
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.horizontal-line {
+  margin: 0px;
+  padding: 0px;
+}
+
+.date-header {
+  color: #797e80;
+  font-family: 'Shift', sans-serif;
+  font-size: 12px;
+  padding-left: 10px;
+}
+
+.app-summary-table {
+  width: 100%;
+}
+
+.severity-side-blob-generic {
+  height: 100%;
+  width: 4px;
+}
+
+.severity-side-blob-success {
+  background: #5CB85C;
+}
+
+.severity-side-blob-warning {
+  background: #F0AD4E;
+}
+
+.severity-side-blob-severe {
+  background: #E4804E;
+}
+
+.severity-side-blob-danger {
+  background: #D9534F;
+}
+
+.user {
+  padding-right: 15px;
+  text-align: right;
+  width: 250px;
+}
+
+.heading {
+  font-size: 16px;
+}
+
+.severity-None {
+  color: #5CB85C;
+}
+
+.details-container {
+  color: #5e6365;
+  font-family: 'Shift', sans-serif;
+  background: white;
+  margin: 10px 0px 10px 0px;
+  padding: 10px 15px 10px 25px;
+}
+
+.info {
+  margin-top: 10px;
+}
+
+.info td, tr {
+  height: 20px;
+  margin: 7px;
+  padding: 7px;
+  max-width: 100%;
+}
+
+.summary-list-container {
+  background: white;
+  margin-top: 30px;
+  padding-top: 3px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
+
+.summary-list-header {
+  margin: 10px 0px 10px 25px;
+  color: #5e6365;
+  font-size: 18px;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+
diff --git a/web/app/styles/partials/aggregated-metrics.css b/web/app/styles/partials/aggregated-metrics.css
new file mode 100644
index 000000000..630a9a079
--- /dev/null
+++ b/web/app/styles/partials/aggregated-metrics.css
@@ -0,0 +1,23 @@
+.aggregated-metrics-block {
+  font-size: 13px;
+  color: #5e6365;
+  font-family: 'Shift', sans-serif;
+  padding-left: 10px;
+}
+
+.usedmemory-td {
+  width: 175px;
+}
+
+.wastedmemory-td {
+  width: 100px
+}
+
+.runtime-td {
+  width: 120px;
+}
+
+.waittime-td {
+  width: 100px;
+}
+
diff --git a/web/app/styles/partials/application-menu.css b/web/app/styles/partials/application-menu.css
new file mode 100644
index 000000000..b91952a53
--- /dev/null
+++ b/web/app/styles/partials/application-menu.css
@@ -0,0 +1,28 @@
+/** Dashboard menu **/
+.menu-workflow {
+  width: 100%;
+}
+
+.wf-button {
+  background-color: white; /* Green */
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 3px;
+  font-size: 14px;
+  font-weight: 500;
+  border: #0084BF 1px solid;
+  color: #0084BF;
+}
+
+.wf-button:hover {
+  background-color: #008cc9;
+  color: white;
+}
+
+.menu-workflow > .active {
+  background-color: #008cc9;
+  color: white;
+  opacity: 0.7;
+  border: 1px #008cc9 solid;
+  box-shadow: none;
+}
diff --git a/web/app/styles/partials/application.css b/web/app/styles/partials/application.css
new file mode 100644
index 000000000..f647baa2a
--- /dev/null
+++ b/web/app/styles/partials/application.css
@@ -0,0 +1,3 @@
+body {
+  background: #E7E9EC !important; /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
+}
diff --git a/web/app/styles/partials/breadcrumbs.css b/web/app/styles/partials/breadcrumbs.css
new file mode 100644
index 000000000..c7f065c82
--- /dev/null
+++ b/web/app/styles/partials/breadcrumbs.css
@@ -0,0 +1,101 @@
+/** breadcrumb **/
+.bread-crumb {
+  display: inline-block;
+  overflow: hidden;
+  background: #0084BF;
+  margin-top: 20px;
+}
+
+.bread-crumb a {
+  text-decoration: none;
+  outline: none;
+  display: block;
+  float: left;
+  font-size: 12px;
+  line-height: 36px;
+  color: white;
+  padding: 0 10px 0 30px;
+  background: #666;
+  background: linear-gradient(#666, #333);
+  position: relative;
+}
+
+/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
+.bread-crumb a:first-child {
+  padding-left: 10px;
+  border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
+}
+
+.bread-crumb a:last-child {
+  border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
+  padding-right: 20px;
+
+}
+
+/*hover/active styles*/
+.bread-crumb a.active, .bread-crumb a:hover {
+  background: #333;
+  background: linear-gradient(#333, #000);
+}
+
+.bread-crumb a.active:after, .bread-crumb a:hover:after {
+  background: #333;
+  background: linear-gradient(135deg, #333, #000);
+}
+
+/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
+.bread-crumb a:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -18px; /*half of square's length*/
+  width: 36px;
+  height: 36px;
+  transform: scale(0.707) rotate(45deg);
+  /*we need to prevent the arrows from getting buried under the next link*/
+  z-index: 1;
+  /*background same as links but the gradient will be rotated to compensate with the transform applied*/
+  background: #666;
+  background: linear-gradient(135deg, #666, #333);
+  /*stylish arrow design using box shadow*/
+  box-shadow: 2px -2px 0 2px rgba(0, 132, 191, 1),
+  3px -3px 0 2px rgba(255, 255, 255, 0.1);
+  /*
+        5px - for rounded arrows and
+        50px - to prevent hover glitches on the border created using shadows*/
+  border-radius: 0 5px 0 50px;
+}
+
+/*we dont need an arrow after the last link*/
+.bread-crumb a:last-child:after {
+  content: none;
+}
+
+/*we will use the :before element to show numbers*/
+.bread-crumb a:before {
+  border-radius: 100%;
+  height: 20px;
+  line-height: 20px;
+  position: absolute;
+  top: 0;
+  background: #444;
+  background: linear-gradient(#444, #222);
+  font-weight: bold;
+}
+
+.flat a, .flat a:after {
+  background: white;
+  color: #5e6365;
+  transition: all 0.5s;
+}
+
+.flat a:before {
+  background: white;
+  box-shadow: 0 0 0 1px #ccc;
+}
+
+.flat a:hover, .flat a.active,
+.flat a:hover:after, .flat a.active:after {
+  background: #0084bf;
+  color: white;
+}
diff --git a/web/app/styles/partials/dashboard-header.css b/web/app/styles/partials/dashboard-header.css
new file mode 100644
index 000000000..5d9be91c8
--- /dev/null
+++ b/web/app/styles/partials/dashboard-header.css
@@ -0,0 +1,57 @@
+/**
+Dashboard header
+*/
+.dashboard-header {
+  color: #707577;
+  font-family: 'Shift', sans-serif;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+/**
+speech bubble
+**/
+.bubble {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  background: #FFFFFF;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  border: #0084BF solid 1px;
+  padding-left: 50px;
+  margin-top: 30px;
+  padding-top: 8px;
+}
+
+.bubble:after {
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-width: 14px 25px 14px 0;
+  border-color: transparent #FFFFFF;
+  display: block;
+  width: 0;
+  z-index: 1;
+  left: -25px;
+  top: 55px;
+}
+
+.bubble:before {
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-width: 14px 25px 14px 0;
+  border-color: transparent #0084BF;
+  display: block;
+  width: 0;
+  z-index: 0;
+  left: -26px;
+  top: 55px;
+}
+
+.logo {
+  width: 50px;
+  padding-left: 30px;
+}
diff --git a/web/app/styles/partials/heuristic-detail.css b/web/app/styles/partials/heuristic-detail.css
new file mode 100644
index 000000000..1106b96d3
--- /dev/null
+++ b/web/app/styles/partials/heuristic-detail.css
@@ -0,0 +1,12 @@
+.heuristic-item:hover {
+  background: grey;
+}
+
+.heuristic-detail-table {
+  width: 100%;
+  margin: 10px 20px 10px 20px;
+}
+
+.heuristic-detail-table td {
+  width: 50%;
+}
diff --git a/web/app/styles/partials/heuristics-summary.css b/web/app/styles/partials/heuristics-summary.css
new file mode 100644
index 000000000..0aca46893
--- /dev/null
+++ b/web/app/styles/partials/heuristics-summary.css
@@ -0,0 +1,41 @@
+.heuristics-block {
+  padding-top: 10px;
+  padding-bottom: 15px;
+  padding-left: 10px;
+}
+
+.heuristics-label-generic {
+  background-color: white;
+  padding-top: 3px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 7px;
+  margin-bottom: 2px;
+  padding-bottom: 3px;
+  text-align: center;
+  display: inline-block;
+  font-size: 11px;
+  float: left;
+  border-radius: 3px;
+  font-family: sans-serif;
+}
+
+.heuristics-label-severe {
+  border: #E4804E 1px solid;
+  color: #E4804E;
+}
+
+.heuristics-label-success {
+  border: #5CB85C 1px solid;
+  color: #5CB85C;
+}
+
+.heuristics-label-warning {
+  border: #F0AD4E 1px solid;
+  color: #F0AD4E;
+}
+
+.heuristics-label-danger {
+  border: #D9534F 1px solid;
+  color: #D9534F;
+}
diff --git a/web/app/styles/partials/jobs-severity.css b/web/app/styles/partials/jobs-severity.css
new file mode 100644
index 000000000..33381af12
--- /dev/null
+++ b/web/app/styles/partials/jobs-severity.css
@@ -0,0 +1,41 @@
+/**
+jobs severity
+**/
+
+.horizontal-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.horizontal-list li {
+  float: left;
+}
+
+.scnd-font-color {
+  color: #9099b7;
+}
+
+/** severity text **/
+
+.severity-horizontal-list li {
+  width: 75px;
+  border: none;
+  text-align: center;
+}
+
+.severity-text {
+  margin: 0;
+  padding: 0px 0 5px;
+  font-size: 12px;
+}
+
+.severity-count {
+  margin: 0;
+  padding: 0 0 0px 0px;
+  font-size: 20px;
+}
+
+.job-severity-block {
+  padding-bottom: 5px;
+}
diff --git a/web/app/styles/partials/navbar.css b/web/app/styles/partials/navbar.css
new file mode 100644
index 000000000..5891b4139
--- /dev/null
+++ b/web/app/styles/partials/navbar.css
@@ -0,0 +1,64 @@
+/** navigation bar **/
+
+.navbar-default {
+  background-color: #ffffff;
+  border-color: #e8e8e8;
+}
+
+.navbar-default .navbar-brand {
+  color: #6a7478;
+}
+
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+  color: #0084bf;
+}
+
+.navbar-default .navbar-text {
+  color: #6a7478;
+}
+
+.navbar-default .navbar-nav > li > a {
+  color: #6a7478;
+}
+
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+  color: #0084bf;
+}
+
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  color: #0084bf;
+  background-color: #e8e8e8;
+}
+
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .open > a:hover,
+.navbar-default .navbar-nav > .open > a:focus {
+  color: #0084bf;
+  background-color: #e8e8e8;
+}
+
+.navbar-default .navbar-toggle {
+  border-color: #e8e8e8;
+}
+
+.navbar-default .navbar-toggle:hover,
+.navbar-default .navbar-toggle:focus {
+  background-color: #e8e8e8;
+}
+
+/** Navigation extension **/
+
+.nav-extension {
+  background-color: #0084BF;
+  height: 120px;
+  border: none;
+  margin-top: -20px;
+  padding: 0px;
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+}
diff --git a/web/app/styles/partials/search.css b/web/app/styles/partials/search.css
new file mode 100644
index 000000000..07eb20dce
--- /dev/null
+++ b/web/app/styles/partials/search.css
@@ -0,0 +1,47 @@
+.dropdown.dropdown-lg .dropdown-menu {
+  margin-top: -1px;
+  padding: 6px 20px;
+}
+
+.input-group-btn .btn-group {
+  display: flex !important;
+}
+
+.form-horizontal .form-group {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.form-group .form-control:last-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+@media screen and (min-width: 300px) {
+  #adv-search {
+    width: 300px;
+    margin: 0 auto;
+  }
+
+  .dropdown.dropdown-lg {
+    position: static !important;
+  }
+
+  .dropdown.dropdown-lg .dropdown-menu {
+    min-width: 300px;
+  }
+}
+
+.search-row {
+  height: 100%;
+}
+
+.search-table {
+  width: 100%;
+}
+
+.search-table td {
+  padding-right: 20px;
+  padding-left: 20px;
+  max-height: 100px;
+}
diff --git a/web/app/styles/partials/user-tabs.css b/web/app/styles/partials/user-tabs.css
new file mode 100644
index 000000000..ed5d80de0
--- /dev/null
+++ b/web/app/styles/partials/user-tabs.css
@@ -0,0 +1,56 @@
+/** input user **/
+
+.input-user-li {
+  height: 40px;
+  height: 100%;
+  border-radius: 3px;
+  margin-left: 5px;
+  border: 1px solid #dfdfdf;
+  background: white;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.input-user {
+  height: 40px;
+  border-top-left-radius: 7px;
+  border-top-right-radius: 7px;
+  border: none;
+  padding-left: 20px;
+  width: 100px;
+}
+
+.input-user-button {
+  height: 38px;
+  border: none;
+  color: #0084BF;
+  width: 30px;
+  margin-right: 5px;
+  margin-left: 5px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  background: white;
+  margin-bottom: 1px;
+}
+
+/**
+ Style for the user tabs
+ **/
+.nav-tab {
+  padding: 16px 16px 8px;
+  margin: 0 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  justify-content: center;
+  position: relative;
+}
+
+.single-tab {
+  height: 40px;
+}
diff --git a/web/app/templates/application.hbs b/web/app/templates/application.hbs
new file mode 100644
index 000000000..3fa5a2d5a
--- /dev/null
+++ b/web/app/templates/application.hbs
@@ -0,0 +1,34 @@
+
+
+<div class="navbar-default navbar-inverse navbar-static-top" role="navigation">
+    <div class="container">
+
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+
+          {{#link-to "dashboard.workflow" class="navbar-brand"}}
+              Dr Elephant
+          {{/link-to}}
+        </div>
+
+        <div class="navbar-collapse collapse" style="float: left">
+            <ul class="nav navbar-nav">
+                <li>{{#link-to "dashboard.workflow" class="active"}}Dashboard{{/link-to}}</li>
+                <li><a href="../newjobhistory">JobHistory</a></li>
+                <li><a href="../newflowhistory">FlowHistory</a></li>
+                <li><a href="../heuristic-help">Help</a></li>
+            </ul>
+        </div>
+
+        <div>
+          {{search-panel}}
+        </div>
+    </div>
+</div>
+
+{{outlet}}
diff --git a/web/app/templates/components/aggregated-metrics.hbs b/web/app/templates/components/aggregated-metrics.hbs
new file mode 100644
index 000000000..7a12b0531
--- /dev/null
+++ b/web/app/templates/components/aggregated-metrics.hbs
@@ -0,0 +1,12 @@
+<div>
+    <p class="list-group-item-heading">
+    <table>
+        <tr>
+            <td class="hasTooltip usedmemory-td"><img src='assets/images/usedmemory.png' class="metrics-icons" alt='used resources'/>  {{getResourceInGBHours application.resourceused}}</td>
+            <td class="hasTooltip wastedmemory-td"><img src='assets/images/wastedmemory.png' class="metrics-icons" alt='wasted resources'/>  {{getPercentage application.resourcewasted application.resourceused}}</td>
+            <td class="hasTooltip runtime-td"><img src='assets/images/runtime.png' class="metrics-icons" alt='total runtime'/>  {{getDurationBreakdown application.runtime}}</td>
+            <td class="hasTooltip waittime-td"><img src='assets/images/waittime.png' class="metrics-icons" alt='total wait time'/>  {{getPercentage application.waittime application.runtime}}</td>
+        </tr>
+    </table>
+    </p>
+</div>
diff --git a/web/app/templates/components/application-list.hbs b/web/app/templates/components/application-list.hbs
new file mode 100644
index 000000000..a7d05edd1
--- /dev/null
+++ b/web/app/templates/components/application-list.hbs
@@ -0,0 +1,3 @@
+{{#each applications as |application|}}
+      {{single-application application=application}}
+{{/each}}
\ No newline at end of file
diff --git a/web/app/templates/components/flow-list.hbs b/web/app/templates/components/flow-list.hbs
new file mode 100644
index 000000000..d9a253740
--- /dev/null
+++ b/web/app/templates/components/flow-list.hbs
@@ -0,0 +1,3 @@
+{{#each workflows as |flow|}}
+      {{single-flow flow=flow}}
+{{/each}}
\ No newline at end of file
diff --git a/web/app/templates/components/heuristics-summary.hbs b/web/app/templates/components/heuristics-summary.hbs
new file mode 100644
index 000000000..101e6082d
--- /dev/null
+++ b/web/app/templates/components/heuristics-summary.hbs
@@ -0,0 +1,3 @@
+  {{#each heuristics as |heuristic|}}
+    <div class="heuristics-label-generic heuristics-label-{{getBootstrapSeverityCode heuristic.severity}}">{{heuristic.name}}</div>
+  {{/each}}
diff --git a/web/app/templates/components/job-list.hbs b/web/app/templates/components/job-list.hbs
new file mode 100644
index 000000000..3bfe9a84a
--- /dev/null
+++ b/web/app/templates/components/job-list.hbs
@@ -0,0 +1,3 @@
+{{#each jobs as |job|}}
+      {{single-job job=job}}
+{{/each}}
\ No newline at end of file
diff --git a/web/app/templates/components/jobs-severity.hbs b/web/app/templates/components/jobs-severity.hbs
new file mode 100644
index 000000000..09e7b6ebd
--- /dev/null
+++ b/web/app/templates/components/jobs-severity.hbs
@@ -0,0 +1,8 @@
+<ul id="job_severities" class="severity-horizontal-list horizontal-list">
+  {{#each jobsseverity as |severity|}}
+      <li>
+          <p class="severity-count">{{severity.count}}</p>
+          <p class="scnd-font-color severity-text severity-{{severity.severity}}">{{severity.severity}}</p>
+      </li>
+  {{/each}}
+</ul>
\ No newline at end of file
diff --git a/web/app/templates/components/single-application.hbs b/web/app/templates/components/single-application.hbs
new file mode 100644
index 000000000..bd4075491
--- /dev/null
+++ b/web/app/templates/components/single-application.hbs
@@ -0,0 +1,45 @@
+<table class="app-summary-table box shadow">
+    <tr>
+        <td class="severity-side-blob-generic severity-side-blob-{{getBootstrapSeverityCode application.severity}}">
+        </td>
+        <td>
+          {{#link-to "app" (query-params applicationid=application.id) class="list-group-item list-group-item-control"}}
+
+              <table class="app-header">
+                  <tr>
+                      <td class="heading" id="app_summary_id">
+                        {{#if (eq application.jobname null)}}
+                          {{application.id}}
+                        {{else}}
+                          {{application.jobname}} <span class="glyphicon glyphicon-chevron-right"></span> {{application.id}}
+                        {{/if}}
+
+                      </td>
+                      <td class="user" id="app_summary_user"><span
+                              class="glyphicon glyphicon-user"></span>  {{application.username}}</td>
+                  </tr>
+              </table>
+
+              <table class="borderless">
+                  <tbody>
+                  <tr>
+                      <td class="date-header" id="app_summary_finishtime">
+                        {{getDate application.finishtime}}
+                      </td>
+                  </tr>
+
+                  <tr>
+                      <td class="heuristics-block"
+                          id="app_summary_heuristics_summary">{{heuristics-summary heuristics=application.heuristicsummary}}</td>
+                  </tr>
+
+                  <tr>
+                      <td class="aggregated-metrics-block"
+                          id="app_summary_aggregated_metrics">{{aggregated-metrics application=application}}</td>
+                  </tr>
+                  </tbody>
+              </table>
+          {{/link-to}}
+        </td>
+    </tr>
+</table>
diff --git a/web/app/templates/components/single-flow.hbs b/web/app/templates/components/single-flow.hbs
new file mode 100644
index 000000000..1cd5cf7b5
--- /dev/null
+++ b/web/app/templates/components/single-flow.hbs
@@ -0,0 +1,38 @@
+<table class="app-summary-table box shadow">
+    <tr>
+        <td class="severity-side-blob-generic severity-side-blob-{{getBootstrapSeverityCode flow.severity}}">
+        </td>
+        <td>
+          {{#link-to "workflow" (query-params workflowid=flow.id) class="list-group-item list-group-item-control"}}
+              <table class="app-header">
+                  <tr>
+                      <td class="heading" id="flow_summary_id">
+                        {{flow.id}}
+                      </td>
+                      <td class="user" id="flow_summary_username"><span class="glyphicon glyphicon-user"></span>  {{flow.username}}</td>
+                  </tr>
+              </table>
+
+              <table class="borderless">
+                  <tbody>
+                  <tr>
+                      <td class="date-header" id="flow_summary_finishtime">
+                        {{getDate flow.finishtime}}
+                      </td>
+                  </tr>
+                  <tr>
+                      <td class="job-severity-block"
+                          id="flow_summary_jobs_severity">{{jobs-severity jobsseverity=flow.jobsseverity}}</td>
+                  </tr>
+                  <tr>
+                      <td class="aggregated-metrics-block"
+                          id="flow_summary_aggregated_metrics">{{aggregated-metrics application=flow}}</td>
+                  </tr>
+                  </tbody>
+              </table>
+          {{/link-to}}
+        </td>
+    </tr>
+</table>
+
+
diff --git a/web/app/templates/components/single-job.hbs b/web/app/templates/components/single-job.hbs
new file mode 100644
index 000000000..561f327ad
--- /dev/null
+++ b/web/app/templates/components/single-job.hbs
@@ -0,0 +1,38 @@
+<table class="app-summary-table box shadow ">
+    <tr>
+        <td class="severity-side-blob-generic severity-side-blob-{{getBootstrapSeverityCode job.severity}}">
+        </td>
+        <td>
+          {{#link-to "job" (query-params jobid=job.id) class="list-group-item"}}
+
+              <table class="app-header">
+                  <tr>
+                      <td id = "job_name" class="heading">
+                        {{job.jobname}}
+                      </td>
+                      <td class="user" id="job_summary_username"><span class="glyphicon glyphicon-user"></span>  {{job.username}}</td>
+                  </tr>
+              </table>
+
+              <table class="borderless">
+                  <tbody>
+                  <tr>
+                      <td class="date-header" id="job_summary_finishtime">
+                        {{getDate job.finishtime}}
+                      </td>
+                  </tr>
+
+                  <tr>
+                      <td class="job-severity-block" id="job_summary_task_severity">{{tasks-severity job=job}}</td>
+                  </tr>
+
+                  <tr>
+                      <td class="aggregated-metrics-block"
+                          id="job_summary_aggregated_metrics">{{aggregated-metrics application=job}}</td>
+                  </tr>
+                  </tbody>
+              </table>
+          {{/link-to}}
+        </td>
+    </tr>
+</table>
diff --git a/web/app/templates/components/single-tab.hbs b/web/app/templates/components/single-tab.hbs
new file mode 100644
index 000000000..fb8d12045
--- /dev/null
+++ b/web/app/templates/components/single-tab.hbs
@@ -0,0 +1 @@
+<label>{{name}} &nbsp;&nbsp;<button type="button"   {{action (action deleteTab name)}}  class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-remove"></span></button></label>
\ No newline at end of file
diff --git a/web/app/templates/components/tasks-severity.hbs b/web/app/templates/components/tasks-severity.hbs
new file mode 100644
index 000000000..fceb2cb02
--- /dev/null
+++ b/web/app/templates/components/tasks-severity.hbs
@@ -0,0 +1,8 @@
+<ul class="severity-horizontal-list horizontal-list">
+  {{#each job.tasksseverity as |severity|}}
+      <li>
+          <p class="severity-count">{{severity.count}}</p>
+          <p class="scnd-font-color severity-text severity-{{severity.severity}}">{{severity.severity}}</p>
+      </li>
+  {{/each}}
+</ul>
\ No newline at end of file
diff --git a/web/app/templates/components/user-tabs.hbs b/web/app/templates/components/user-tabs.hbs
new file mode 100644
index 000000000..1bad709da
--- /dev/null
+++ b/web/app/templates/components/user-tabs.hbs
@@ -0,0 +1,19 @@
+<ul id="myTab" class="nav nav-tabs" role="tablist">
+
+    <li id="all" class="active"><a class="single-tab" role="tab"
+                                   data-toggle="tab" {{action (action setTab null)}}><label>All</label></a></li>
+
+  {{#each usernames as |username|}}
+      <li><a role="tab" class="single-tab" {{action (action setTab username)}}
+             data-toggle="tab" id="{{username}}">{{single-tab name=username deleteTab=(action deleteTab)}}</a></li>
+  {{/each}}
+
+
+    <li class="input-user-li">
+      {{#if showInputBox}}
+        {{input id="user-input" action=addTab action="resetInput" placeholder="Add user" class="input-user" valueBinding="newUser" value=""  autofocus="true"}}
+      {{/if}}
+        <button {{action 'showInput'}} class="glyphicon glyphicon-plus input-user-button"></button>
+    </li>
+
+</ul>
\ No newline at end of file
diff --git a/web/app/templates/dashboard.hbs b/web/app/templates/dashboard.hbs
new file mode 100644
index 000000000..5257629d3
--- /dev/null
+++ b/web/app/templates/dashboard.hbs
@@ -0,0 +1,37 @@
+<div class="nav-extension"></div>
+
+<div class="container" role="main">
+
+    <table class="dashboard-header">
+        <tr>
+
+            <td class="logo">
+                <img src='assets/images/logo.png'>
+
+            </td>
+            <td>
+                <div class="bubble">
+                    <h3>Hello there, I've been busy!</h3>
+
+                    <p>I looked through <span class="bold">150</span> jobs today.<br>
+                        About <span class="bold">70</span> of them could use some tuning.<br>
+                        About <span class="bold">40</span> of them need some serious attention!
+                    </p>
+                </div>
+            </td>
+        </tr>
+    </table>
+
+    <div class="menu-workflow">
+      {{#link-to "dashboard.workflow" class="btn wf-button" role="tab" data-toggle="tab"}}Workflow{{/link-to}}
+      {{#link-to "dashboard.job" class="btn wf-button" role="tab" data-toggle="tab"}} Job{{/link-to}}
+      {{#link-to "dashboard.app" class="btn wf-button" role="tab" data-toggle="tab" }}Application{{/link-to}}
+    </div>
+
+</div>
+<br/>
+
+<div class="container">
+    <!-- Each sub template will go here -->
+  {{outlet defaultUser="defaultUser"}}
+</div>
diff --git a/web/app/templates/dashboard/app.hbs b/web/app/templates/dashboard/app.hbs
new file mode 100644
index 000000000..7d8ab62af
--- /dev/null
+++ b/web/app/templates/dashboard/app.hbs
@@ -0,0 +1,7 @@
+{{!-- The user tabs. Tabs can be added and deleted --}}
+{{user-tabs deleteTab=(action "deleteTab") setTab=(action "changeTab") addTab=(action "addTab") usernames=model.usernames}}
+{{#if loading}}
+  {{loading-panel message="loading applications... "}}
+{{else}}
+  {{application-list applications=model.applications}}
+{{/if}}
diff --git a/web/app/templates/dashboard/job.hbs b/web/app/templates/dashboard/job.hbs
new file mode 100644
index 000000000..5f4f4c3c9
--- /dev/null
+++ b/web/app/templates/dashboard/job.hbs
@@ -0,0 +1,7 @@
+{{!-- The user tabs. Tabs can be added and deleted --}}
+{{user-tabs deleteTab=(action "deleteTab") setTab=(action "changeTab") addTab=(action "addTab") usernames=model.usernames}}
+{{#if loading}}
+  {{loading-panel message="loading jobs..."}}
+{{else}}
+  {{job-list jobs=model.jobs}}
+{{/if}}
\ No newline at end of file
diff --git a/web/app/templates/dashboard/workflow.hbs b/web/app/templates/dashboard/workflow.hbs
new file mode 100644
index 000000000..6c9046398
--- /dev/null
+++ b/web/app/templates/dashboard/workflow.hbs
@@ -0,0 +1,9 @@
+{{!-- The user tabs. Tabs can be added and deleted --}}
+{{user-tabs deleteTab=(action "deleteTab") setTab=(action "changeTab") addTab=(action "addTab") usernames=model.usernames showInputBox=showInputBox}}
+
+{{!-- The list of flows of the user --}}
+{{#if loading}}
+  {{loading-panel message="loading flows..."}}
+{{else}}
+  {{flow-list workflows=model.workflows}}
+{{/if}}
diff --git a/web/bower.json b/web/bower.json
new file mode 100644
index 000000000..a688e8417
--- /dev/null
+++ b/web/bower.json
@@ -0,0 +1,11 @@
+{
+  "name": "dr-elephant",
+  "dependencies": {
+    "ember": "2.6.2",
+    "ember-cli-shims": "0.1.1",
+    "ember-cli-test-loader": "0.2.2",
+    "ember-qunit-notifications": "0.1.0",
+    "bootstrap": "3.3.7",
+    "d3": "4.2.6"
+  }
+}
diff --git a/web/config/environment.js b/web/config/environment.js
new file mode 100644
index 000000000..03f346415
--- /dev/null
+++ b/web/config/environment.js
@@ -0,0 +1,38 @@
+/* jshint node: true */
+
+module.exports = function(environment) {
+  var ENV = {
+    modulePrefix: 'dr-elephant',
+    environment: environment,
+    baseURL: '/',
+    locationType: 'auto',
+    EmberENV: {
+      FEATURES: {}
+    },
+
+    APP: {}
+  };
+
+  if (environment === 'development') {
+     ENV.APP.LOG_RESOLVER = true;
+     ENV.APP.LOG_ACTIVE_GENERATION = true;
+     ENV.APP.LOG_TRANSITIONS = true;
+     ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
+     ENV.APP.LOG_VIEW_LOOKUPS = true;
+  }
+
+  if (environment === 'test') {
+    ENV.rootURL = '/new/';
+    ENV.locationType = 'none';
+    ENV.APP.LOG_ACTIVE_GENERATION = false;
+    ENV.APP.LOG_VIEW_LOOKUPS = false;
+    ENV.APP.rootElement = '#ember-testing';
+  }
+
+  if (environment === 'production') {
+    ENV.rootURL = "/new";
+    ENV.locationType = 'hash';
+  }
+
+  return ENV;
+};
diff --git a/web/ember-cli-build.js b/web/ember-cli-build.js
new file mode 100644
index 000000000..3ec2e8181
--- /dev/null
+++ b/web/ember-cli-build.js
@@ -0,0 +1,30 @@
+var EmberApp = require('ember-cli/lib/broccoli/ember-app');
+
+module.exports = function (defaults) {
+  var app = new EmberApp(defaults, {
+    fingerprint: {
+      enabled: false
+    },
+    outputPaths: {
+      app: {
+        css: {
+          'app': '/assets/dr-elephant.css'
+        },
+        js: '/assets/dr-elephant.js',
+
+      },
+      vendor: {
+        css: '/assets/vendor.css',
+        js: '/assets/vendor.js'
+      }
+    }
+    // Add options here
+  });
+  app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
+  app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
+
+  app.import(app.bowerDirectory + '/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
+    destDir: 'fonts'
+  });
+  return app.toTree();
+};
diff --git a/web/package.json b/web/package.json
new file mode 100644
index 000000000..a28f4306e
--- /dev/null
+++ b/web/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "dr-elephant",
+  "version": "0.0.0",
+  "description": "Dr. Elephant is a performance monitoring and tuning tool for Hadoop and Spark",
+  "private": true,
+  "directories": {
+    "doc": "doc",
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "ember build --prod",
+    "start": "ember server",
+    "test": "ember test"
+  },
+  "repository": "",
+  "engines": {
+    "node": ">= 0.10.0"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "bower": "1.2.6",
+    "broccoli-asset-rev": "2.4.6",
+    "ember-ajax": "2.5.1",
+    "ember-cli": "2.6.3",
+    "ember-cli-app-version": "1.0.1",
+    "ember-cli-babel": "5.1.10",
+    "ember-cli-d3": "1.1.7",
+    "ember-cli-dependency-checker": "1.3.0",
+    "ember-cli-htmlbars": "1.1.0",
+    "ember-cli-htmlbars-inline-precompile": "0.3.5",
+    "ember-cli-inject-live-reload": "1.4.1",
+    "ember-cli-jshint": "1.0.5",
+    "ember-cli-qunit": "1.4.2",
+    "ember-cli-release": "0.2.9",
+    "ember-cli-sri": "2.1.1",
+    "ember-cli-uglify": "1.2.0",
+    "ember-d3": "0.2.0",
+    "ember-data": "2.7.0",
+    "ember-export-application-global": "1.0.5",
+    "ember-load-initializers": "0.5.1",
+    "ember-resolver": "2.0.3",
+    "ember-welcome-page": "1.0.3",
+    "loader.js": "4.0.11"
+  }
+}
diff --git a/web/public/assets/images/ajax-loader.gif b/web/public/assets/images/ajax-loader.gif
new file mode 100644
index 000000000..c6dac7884
Binary files /dev/null and b/web/public/assets/images/ajax-loader.gif differ
diff --git a/web/public/assets/images/logo.png b/web/public/assets/images/logo.png
new file mode 100644
index 000000000..a7f7b9670
Binary files /dev/null and b/web/public/assets/images/logo.png differ
diff --git a/web/public/assets/images/runtime.png b/web/public/assets/images/runtime.png
new file mode 100644
index 000000000..6f98430d9
Binary files /dev/null and b/web/public/assets/images/runtime.png differ
diff --git a/web/public/assets/images/usedmemory.png b/web/public/assets/images/usedmemory.png
new file mode 100644
index 000000000..c55a084a6
Binary files /dev/null and b/web/public/assets/images/usedmemory.png differ
diff --git a/web/public/assets/images/waittime.png b/web/public/assets/images/waittime.png
new file mode 100644
index 000000000..fb862f961
Binary files /dev/null and b/web/public/assets/images/waittime.png differ
diff --git a/web/public/assets/images/wastedmemory.png b/web/public/assets/images/wastedmemory.png
new file mode 100644
index 000000000..627bf8d9c
Binary files /dev/null and b/web/public/assets/images/wastedmemory.png differ
diff --git a/web/testem.js b/web/testem.js
new file mode 100644
index 000000000..26044b2f8
--- /dev/null
+++ b/web/testem.js
@@ -0,0 +1,13 @@
+/*jshint node:true*/
+module.exports = {
+  "framework": "qunit",
+  "test_page": "tests/index.html?hidepassed",
+  "disable_watching": true,
+  "launch_in_ci": [
+    "PhantomJS"
+  ],
+  "launch_in_dev": [
+    "PhantomJS",
+    "Chrome"
+  ]
+};
diff --git a/web/tests/helpers/destroy-app.js b/web/tests/helpers/destroy-app.js
new file mode 100644
index 000000000..c3d4d1abb
--- /dev/null
+++ b/web/tests/helpers/destroy-app.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default function destroyApp(application) {
+  Ember.run(application, 'destroy');
+}
diff --git a/web/tests/helpers/module-for-acceptance.js b/web/tests/helpers/module-for-acceptance.js
new file mode 100644
index 000000000..76996fd04
--- /dev/null
+++ b/web/tests/helpers/module-for-acceptance.js
@@ -0,0 +1,23 @@
+import { module } from 'qunit';
+import Ember from 'ember';
+import startApp from '../helpers/start-app';
+import destroyApp from '../helpers/destroy-app';
+
+const { RSVP: { Promise } } = Ember;
+
+export default function(name, options = {}) {
+  module(name, {
+    beforeEach() {
+      this.application = startApp();
+
+      if (options.beforeEach) {
+        return options.beforeEach.apply(this, arguments);
+      }
+    },
+
+    afterEach() {
+      let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
+      return Promise.resolve(afterEach).then(() => destroyApp(this.application));
+    }
+  });
+}
diff --git a/web/tests/helpers/resolver.js b/web/tests/helpers/resolver.js
new file mode 100644
index 000000000..b208d38d0
--- /dev/null
+++ b/web/tests/helpers/resolver.js
@@ -0,0 +1,11 @@
+import Resolver from '../../resolver';
+import config from '../../config/environment';
+
+const resolver = Resolver.create();
+
+resolver.namespace = {
+  modulePrefix: config.modulePrefix,
+  podModulePrefix: config.podModulePrefix
+};
+
+export default resolver;
diff --git a/web/tests/helpers/start-app.js b/web/tests/helpers/start-app.js
new file mode 100644
index 000000000..e098f1d5b
--- /dev/null
+++ b/web/tests/helpers/start-app.js
@@ -0,0 +1,18 @@
+import Ember from 'ember';
+import Application from '../../app';
+import config from '../../config/environment';
+
+export default function startApp(attrs) {
+  let application;
+
+  let attributes = Ember.merge({}, config.APP);
+  attributes = Ember.merge(attributes, attrs); // use defaults, but you can override;
+
+  Ember.run(() => {
+    application = Application.create(attributes);
+    application.setupForTesting();
+    application.injectTestHelpers();
+  });
+
+  return application;
+}
diff --git a/web/tests/index.html b/web/tests/index.html
new file mode 100644
index 000000000..f14ec7aad
--- /dev/null
+++ b/web/tests/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>DrElephant Tests</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+    {{content-for "test-head"}}
+
+    <link rel="stylesheet" href="assets/vendor.css">
+    <link rel="stylesheet" href="assets/dr-elephant.css">
+    <link rel="stylesheet" href="assets/test-support.css">
+
+    {{content-for "head-footer"}}
+    {{content-for "test-head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+    {{content-for "test-body"}}
+
+    <script src="testem.js" integrity=""></script>
+    <script src="assets/vendor.js"></script>
+    <script src="assets/test-support.js"></script>
+    <script src="assets/dr-elephant.js"></script>
+    <script src="assets/tests.js"></script>
+    <script src="assets/test-loader.js"></script>
+
+    {{content-for "body-footer"}}
+    {{content-for "test-body-footer"}}
+  </body>
+</html>
diff --git a/web/tests/integration/components/aggregated-metrics-test.js b/web/tests/integration/components/aggregated-metrics-test.js
new file mode 100644
index 000000000..0a9e40871
--- /dev/null
+++ b/web/tests/integration/components/aggregated-metrics-test.js
@@ -0,0 +1,19 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('aggregated-metrics', 'Integration | Component | aggregated metrics', {
+  integration: true
+});
+
+test("Test for rendering the aggregated-metrics component", function(assert) {
+
+  this.set('application', { resourceused: 1000000000, resourcewasted: 10000000, runtime: 1000000, waittime: 10000});
+  this.render(hbs`{{aggregated-metrics application=application}}`);
+
+  assert.equal(this.$().text().trim().replace(/ /g,'').split("\n").join(""), '271.267GBHours1.00%00:16:401.00%');
+
+  this.set('application', { resourceused: 2342342342342, resourcewasted: 23423423, runtime:32324320, waittime: 3000});
+  this.render(hbs`{{aggregated-metrics application=application}}`);
+
+  assert.equal(this.$().text().trim().replace(/ /g,'').split("\n").join(""), "635401.026GBHours0.00%08:58:440.01%");
+});
diff --git a/web/tests/integration/components/heuristics-summary-test.js b/web/tests/integration/components/heuristics-summary-test.js
new file mode 100644
index 000000000..c4ef4bfcc
--- /dev/null
+++ b/web/tests/integration/components/heuristics-summary-test.js
@@ -0,0 +1,59 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('heuristics-summary', 'Integration | Component | heuristics summary', {
+  integration: true
+});
+
+test('Tests for the rendering of heuristics-summary component', function (assert) {
+  this.set("heuristics", [
+    {
+      name: "Mapper Data Skew",
+      severity: "None"
+    },
+    {
+      name: "Mapper GC",
+      severity: "None"
+    },
+    {
+      name: "Mapper Time",
+      severity: "Low"
+    },
+    {
+      name: "Mapper Speed",
+      severity: "Low"
+    },
+    {
+      name: "Mapper Spill",
+      severity: "Low"
+    },
+    {
+      name: "Mapper Memory",
+      severity: "None"
+    },
+    {
+      name: "Reducer Data Skew",
+      severity: "None"
+    },
+    {
+      name: "Reducer GC",
+      severity: "Low"
+    },
+    {
+      name: "Reducer Time",
+      severity: "Low"
+    },
+    {
+      name: "Reducer Memory",
+      severity: "None"
+    },
+    {
+      name: "Shuffle & Sort",
+      severity: "Low"
+    }
+  ]);
+  this.render(hbs`{{heuristics-summary heuristics=heuristics}}`);
+
+  assert.equal(this.$().text().trim().split("\n").join("").replace(/ /g, ''), 'MapperDataSkewMapperGCMapperTimeMapperSpeedMapperSpillMapperMemoryReducerDataSkewReducerGCReducerTimeReducerMemoryShuffle&Sort');
+
+});
diff --git a/web/tests/integration/components/jobs-severity-test.js b/web/tests/integration/components/jobs-severity-test.js
new file mode 100644
index 000000000..71551e552
--- /dev/null
+++ b/web/tests/integration/components/jobs-severity-test.js
@@ -0,0 +1,28 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('jobs-severity', 'Integration | Component | jobs severity', {
+  integration: true
+});
+
+test('Tests for the job severity component', function(assert) {
+
+  this.set("jobsseverity", [
+    {
+      severity: "Severe",
+      count: 1
+    },
+    {
+      severity: "Moderate",
+      count: 2
+    },
+    {
+      severity: "Critical",
+      count: 1
+    }
+  ]);
+  this.render(hbs`{{jobs-severity jobsseverity=jobsseverity}}`);
+
+  assert.equal(this.$('#job_severities').text().trim().split("\n").join("").replace(/ /g, ''), '1Severe2Moderate1Critical');
+
+});
diff --git a/web/tests/integration/components/single-application-test.js b/web/tests/integration/components/single-application-test.js
new file mode 100644
index 000000000..50780b20f
--- /dev/null
+++ b/web/tests/integration/components/single-application-test.js
@@ -0,0 +1,105 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('single-application', 'Integration | Component | single application', {
+  integration: true
+});
+
+test('Test for single application component', function(assert) {
+
+  this.set("application",{
+    "id": "application_1",
+    "username": "user1",
+    "jobname": "job1",
+    "jobtype": "HadoopJava",
+    "starttime": 1475501548193,
+    "finishtime": 1475501987103,
+    "runtime": 438910,
+    "waittime": 21976,
+    "resourceused": 252366848,
+    "resourcewasted": 86381426,
+    "queue": "random",
+    "severity": "Severe",
+    "heuristicsummary": [
+      {
+        "name": "Mapper Data Skew",
+        "severity": "None"
+      },
+      {
+        "name": "Mapper GC",
+        "severity": "None"
+      },
+      {
+        "name": "Mapper Time",
+        "severity": "Moderate"
+      },
+      {
+        "name": "Mapper Speed",
+        "severity": "None"
+      },
+      {
+        "name": "Mapper Spill",
+        "severity": "None"
+      },
+      {
+        "name": "Mapper Memory",
+        "severity": "Severe"
+      },
+      {
+        "name": "Reducer Data Skew",
+        "severity": "None"
+      },
+      {
+        "name": "Reducer GC",
+        "severity": "None"
+      },
+      {
+        "name": "Reducer Time",
+        "severity": "None"
+      },
+      {
+        "name": "Reducer Memory",
+        "severity": "None"
+      },
+      {
+        "name": "Shuffle & Sort",
+        "severity": "None"
+      }
+    ]
+  });
+
+  this.render(hbs`{{single-application application=application}}`);
+
+  assert.equal(this.$('#app_summary_user').text().trim(), 'user1');
+  assert.equal(this.$('#app_summary_id').text().trim().replace(/ /g,''), 'job1application_1');
+  assert.equal(this.$('#app_summary_finishtime').text().trim(), 'Mon Oct 03 2016 19:09:47 GMT+0530 (IST)');
+  assert.equal(this.$('#app_summary_aggregated_metrics').text().trim().split("\n").join("").replace(/ /g, ''), '68.459GBHours34.23%00:07:185.01%');
+  assert.equal(this.$('#app_summary_heuristics_summary').text().trim().split("\n").join(""), 'Mapper Data Skew    Mapper GC    Mapper Time    Mapper Speed    Mapper Spill    Mapper Memory    Reducer Data Skew    Reducer GC    Reducer Time    Reducer Memory    Shuffle & Sort');
+
+
+  // set jobtype to null, the id should be only application name
+  this.set("application", {
+    "id": "application_1",
+    "username": "user1",
+    "jobname": null,
+    "jobtype": "HadoopJava",
+    "starttime": 1475501548193,
+    "finishtime": 1475501987103,
+    "runtime": 438910,
+    "waittime": 21976,
+    "resourceused": 252366848,
+    "resourcewasted": 86381426,
+    "queue": "random",
+    "severity": "Severe",
+    "heuristicsummary": [
+      {
+        "name": "Mapper Data Skew",
+        "severity": "None"
+      }
+    ]
+  });
+
+  assert.equal(this.$('#app_summary_id').text().trim().replace(/ /g,''), 'application_1');
+
+});
+
diff --git a/web/tests/integration/components/single-flow-test.js b/web/tests/integration/components/single-flow-test.js
new file mode 100644
index 000000000..921daa8cd
--- /dev/null
+++ b/web/tests/integration/components/single-flow-test.js
@@ -0,0 +1,38 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('single-flow', 'Integration | Component | single flow', {
+  integration: true
+});
+
+test('Test for single-flow component', function(assert) {
+  this.set("flow", {
+    id: "id1",
+    username: "user1",
+    finishtime: 332823048,
+    startime: 332432432,
+    resourceused: 3423423,
+    resourcewasted: 234343,
+    runtime: 1899687,
+    waittime: 1099583,
+    jobsseverity: [
+      {
+        severity: "Severe",
+        count: 1
+      },
+      {
+        severity: "Critical",
+        count: 5
+      }
+    ]
+  });
+
+  this.render(hbs`{{single-flow flow=flow}}`);
+
+  assert.equal(this.$('#flow_summary_username').text().trim(), 'user1');
+  assert.equal(this.$('#flow_summary_finishtime').text().trim(), 'Mon Jan 05 1970 01:57:03 GMT+0530 (IST)');
+  assert.equal(this.$('#flow_summary_aggregated_metrics').text().trim().split("\n").join("").replace(/ /g, ''), '0.929GBHours6.85%00:31:3957.88%');
+  assert.equal(this.$('#flow_summary_jobs_severity').text().trim().split("\n").join("").replace(/ /g, ''), '1Severe5Critical');
+
+});
+
diff --git a/web/tests/integration/components/single-job-test.js b/web/tests/integration/components/single-job-test.js
new file mode 100644
index 000000000..8dfd2f03c
--- /dev/null
+++ b/web/tests/integration/components/single-job-test.js
@@ -0,0 +1,66 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('single-job', 'Integration | Component | single job', {
+  integration: true
+});
+
+test('test for single-job component', function (assert) {
+  this.set("job", {
+    id: "id1",
+    jobname: "sample_job",
+    username: "user1",
+    finishtime: 332823048,
+    startime: 332432432,
+    resourceused: 3423423,
+    resourcewasted: 234343,
+    runtime: 1899687,
+    waittime: 1099583,
+    tasksseverity: [
+      {
+        severity: "Severe",
+        count: 1
+      },
+      {
+        severity: "Critical",
+        count: 5
+      }
+    ]
+  });
+
+  this.render(hbs`{{single-job job=job}}`);
+
+  assert.equal(this.$('#job_name').text().trim(), 'sample_job');
+  assert.equal(this.$('#job_summary_username').text().trim(), 'user1');
+  assert.equal(this.$('#job_summary_finishtime').text().trim(), 'Mon Jan 05 1970 01:57:03 GMT+0530 (IST)');
+  assert.equal(this.$('#job_summary_aggregated_metrics').text().trim().split("\n").join("").replace(/ /g, ''), '0.929GBHours6.85%00:31:3957.88%');
+  assert.equal(this.$('#job_summary_task_severity').text().trim().split("\n").join("").replace(/ /g, ''), '1Severe5Critical');
+
+
+  this.set("job", {
+    id: "id2",
+    jobname: "sample_job_2",
+    username: "user2",
+    finishtime: 3328230,
+    startime: 33243,
+    resourceused: 3423423,
+    resourcewasted: 234343,
+    runtime: 1899687,
+    waittime: 1099583,
+    tasksseverity: [
+      {
+        severity: "Critical",
+        count: 5
+      }
+    ]
+  });
+
+  this.render(hbs`{{single-job job=job}}`);
+  assert.equal(this.$('#job_name').text().trim(), 'sample_job_2');
+  assert.equal(this.$('#job_summary_username').text().trim(), 'user2');
+  assert.equal(this.$('#job_summary_finishtime').text().trim(), "Thu Jan 01 1970 06:25:28 GMT+0530 (IST)");
+  assert.equal(this.$('#job_summary_aggregated_metrics').text().trim().split("\n").join("").replace(/ /g, ''), '0.929GBHours6.85%00:31:3957.88%');
+  assert.equal(this.$('#job_summary_task_severity').text().trim().split("\n").join("").replace(/ /g, ''), '5Critical');
+
+});
+
diff --git a/web/tests/integration/components/single-tab-test.js b/web/tests/integration/components/single-tab-test.js
new file mode 100644
index 000000000..0fae10fc5
--- /dev/null
+++ b/web/tests/integration/components/single-tab-test.js
@@ -0,0 +1,23 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('single-tab', 'Integration | Component | single tab', {
+  integration: true
+});
+
+test('Test for single-tab component', function(assert) {
+
+  this.set("name","user1");
+  this.render(hbs`{{single-tab name=name}}`);
+  assert.equal(this.$().text().trim(), 'user1');
+
+  this.set("name","");
+  this.render(hbs`{{single-tab name=name}}`);
+  assert.equal(this.$().text().trim(), '');
+
+
+  this.set("name","all");
+  this.render(hbs`{{single-tab name=name}}`);
+  assert.equal(this.$().text().trim(), 'all');
+
+});
diff --git a/web/tests/integration/components/tasks-severity-test.js b/web/tests/integration/components/tasks-severity-test.js
new file mode 100644
index 000000000..a48eb635e
--- /dev/null
+++ b/web/tests/integration/components/tasks-severity-test.js
@@ -0,0 +1,32 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('tasks-severity', 'Integration | Component | tasks severity', {
+  integration: true
+});
+
+test('Test for task severity component', function(assert) {
+
+  // set task severities here
+  this.set("job", {
+    tasksseverity: [
+      {
+        severity: "Severe",
+        count: 1
+      },
+      {
+        severity: "Critical",
+        count: 5
+      }
+    ]
+  });
+  this.render(hbs`{{tasks-severity job=job}}`);
+
+  assert.equal(this.$().text().trim().split("\n").join("").replace(/ /g,''), '1Severe5Critical');
+
+  this.set("job",{})
+  this.render(hbs`{{tasks-severity job=job}}`);
+  assert.equal(this.$().text().split("\n").join(""),'');
+
+});
+
diff --git a/web/tests/integration/components/user-tabs-test.js b/web/tests/integration/components/user-tabs-test.js
new file mode 100644
index 000000000..dc8113074
--- /dev/null
+++ b/web/tests/integration/components/user-tabs-test.js
@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+moduleForComponent('user-tabs', 'Integration | Component | user tabs', {
+  integration: true
+});
+
+test('Test for user tabs component', function(assert) {
+
+  // single tab with All text when no data is passed
+  this.render(hbs`{{user-tabs}}`);
+  assert.equal(this.$().text().trim(), 'All');
+
+
+  // multiple tabs with id and tabname as the name of the user
+  var usernamesArray = Ember.A(["user1","user2","user3","user4"]);
+  this.set("users", usernamesArray);
+  this.render(hbs`{{user-tabs usernames=users}}`);
+
+  assert.equal(this.$('#all').text().trim(),'All');
+  assert.equal(this.$('#user1').text().trim(),'user1');
+  assert.equal(this.$('#user2').text().trim(),'user2');
+  assert.equal(this.$('#user3').text().trim(),'user3');
+  assert.equal(this.$('#user4').text().trim(),'user4');
+});
diff --git a/web/tests/test-helper.js b/web/tests/test-helper.js
new file mode 100644
index 000000000..e6cfb70fe
--- /dev/null
+++ b/web/tests/test-helper.js
@@ -0,0 +1,6 @@
+import resolver from './helpers/resolver';
+import {
+  setResolver
+} from 'ember-qunit';
+
+setResolver(resolver);
diff --git a/web/tests/unit/helpers/eq-test.js b/web/tests/unit/helpers/eq-test.js
new file mode 100644
index 000000000..4d6f19a39
--- /dev/null
+++ b/web/tests/unit/helpers/eq-test.js
@@ -0,0 +1,21 @@
+import { eq } from 'dr-elephant/helpers/eq';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | eq');
+
+test('Test for eq helper', function(assert) {
+  let result = eq([100,100]);
+  assert.ok(result);
+  result = eq([10,100]);
+  assert.ok(!result);
+  result = eq(["100","100"]);
+  assert.ok(result);
+  result = eq(["100","10"]);
+  assert.ok(!result);
+  result = eq(["100",100]);
+  assert.ok(!result);
+  result = eq([100.00,100.00]);
+  assert.ok(result);
+  result = eq([100.0,100.1]);
+  assert.ok(!result);
+});
diff --git a/web/tests/unit/helpers/get-bootstrap-severity-code-test.js b/web/tests/unit/helpers/get-bootstrap-severity-code-test.js
new file mode 100644
index 000000000..0ab6569cb
--- /dev/null
+++ b/web/tests/unit/helpers/get-bootstrap-severity-code-test.js
@@ -0,0 +1,17 @@
+import { getBootstrapSeverityCode } from 'dr-elephant/helpers/get-bootstrap-severity-code';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | get bootstrap severity code');
+
+test('Test for getBootstrapSeverityCode helper', function(assert) {
+  let result = getBootstrapSeverityCode(["critical"]);
+  assert.equal("danger",result);
+  result = getBootstrapSeverityCode(["severe"]);
+  assert.equal("severe",result);
+  result = getBootstrapSeverityCode(["moderate"]);
+  assert.equal("warning",result);
+  result = getBootstrapSeverityCode(["low"]);
+  assert.equal("success",result);
+  result = getBootstrapSeverityCode(["none"]);
+  assert.equal("success",result);
+});
diff --git a/web/tests/unit/helpers/get-color-for-severity-test.js b/web/tests/unit/helpers/get-color-for-severity-test.js
new file mode 100644
index 000000000..15c963a03
--- /dev/null
+++ b/web/tests/unit/helpers/get-color-for-severity-test.js
@@ -0,0 +1,18 @@
+import { getColorForSeverity } from 'dr-elephant/helpers/get-color-for-severity';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | get color for severity');
+
+test('Test for getColorForSeverity helper', function(assert) {
+  let result = getColorForSeverity(["critical"]);
+  assert.equal(result,"#D9534F");
+  result = getColorForSeverity(["severe"]);
+  assert.equal(result,"#E4804E");
+  result = getColorForSeverity(["moderate"]);
+  assert.equal(result,"#F0AD4E");
+  result = getColorForSeverity(["low"]);
+  assert.equal(result,"#5CB85C");
+  result = getColorForSeverity(["none"]);
+  assert.equal(result,"#5CB85C");
+});
+
diff --git a/web/tests/unit/helpers/get-date-test.js b/web/tests/unit/helpers/get-date-test.js
new file mode 100644
index 000000000..d728d9f22
--- /dev/null
+++ b/web/tests/unit/helpers/get-date-test.js
@@ -0,0 +1,9 @@
+import { getDate } from 'dr-elephant/helpers/get-date';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | get date');
+
+test('test for getDate helper', function(assert) {
+  let result = getDate([42]);
+  assert.ok(result);
+});
diff --git a/web/tests/unit/helpers/get-duration-breakdown-test.js b/web/tests/unit/helpers/get-duration-breakdown-test.js
new file mode 100644
index 000000000..73c9c38c9
--- /dev/null
+++ b/web/tests/unit/helpers/get-duration-breakdown-test.js
@@ -0,0 +1,19 @@
+import { getDurationBreakdown } from 'dr-elephant/helpers/get-duration-breakdown';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | get duration breakdown');
+
+test('Test for getDurationBreakdown helper', function(assert) {
+  let result = getDurationBreakdown([10000000]);
+  assert.equal(result,"02:46:40");
+  result = getDurationBreakdown([0]);
+  assert.equal(result,"00:00:00");
+  result = getDurationBreakdown([1]);
+  assert.equal(result,"00:00:00");
+  result = getDurationBreakdown([1000]);
+  assert.equal(result,"00:00:01");
+  result = getDurationBreakdown([3600000]);
+  assert.equal(result,"01:00:00");
+  result = getDurationBreakdown([60000]);
+  assert.equal(result,"00:01:00");
+});
diff --git a/web/tests/unit/helpers/get-percentage-test.js b/web/tests/unit/helpers/get-percentage-test.js
new file mode 100644
index 000000000..42a186fa1
--- /dev/null
+++ b/web/tests/unit/helpers/get-percentage-test.js
@@ -0,0 +1,21 @@
+import { getPercentage } from 'dr-elephant/helpers/get-percentage';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | get percentage');
+
+test('Test for getPercentage helper', function(assert) {
+  let result = getPercentage([5,200]);
+  assert.equal(result,"2.50%");
+  result = getPercentage([50,200]);
+  assert.equal(result,"25.00%");
+  result = getPercentage([0,100]);
+  assert.equal(result,"0.00%");
+  result = getPercentage([100,100]);
+  assert.equal(result,"100.00%");
+  result = getPercentage([0,0]);
+  assert.equal(result,"0%");
+  result = getPercentage([1,20]);
+  assert.equal(result,"5.00%");
+  result = getPercentage([100,20]);
+  assert.equal(result,"500.00%");
+});
diff --git a/web/tests/unit/helpers/get-resource-in-gbhours-test.js b/web/tests/unit/helpers/get-resource-in-gbhours-test.js
new file mode 100644
index 000000000..6fa8a4703
--- /dev/null
+++ b/web/tests/unit/helpers/get-resource-in-gbhours-test.js
@@ -0,0 +1,19 @@
+import { getResourceInGBHours } from 'dr-elephant/helpers/get-resource-in-gbhours';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | get resource in gbhours');
+
+test('Test for getResourceInGBHours helper', function(assert) {
+  let result = getResourceInGBHours([100001010]);
+  assert.equal(result,"27.127 GB Hours");
+  result = getResourceInGBHours([0]);
+  assert.equal(result,"0 GB Hours");
+  result = getResourceInGBHours([100]);
+  assert.equal(result,"0 GB Hours");
+  result = getResourceInGBHours([-1]);
+  assert.equal(result,"0 GB Hours");
+  result = getResourceInGBHours([33]);
+  assert.equal(result,"0 GB Hours");
+  result = getResourceInGBHours([3080328048302480]);
+  assert.equal(result,"835592461.020 GB Hours");
+});
diff --git a/web/tests/unit/helpers/not-empty-test.js b/web/tests/unit/helpers/not-empty-test.js
new file mode 100644
index 000000000..8851f530f
--- /dev/null
+++ b/web/tests/unit/helpers/not-empty-test.js
@@ -0,0 +1,11 @@
+import { notEmpty } from 'dr-elephant/helpers/not-empty';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | not empty');
+
+test('Test for notEmpty helper', function(assert) {
+  let result = notEmpty(["this is not empty"]);
+  assert.ok(result);
+  result = notEmpty([""]);
+  assert.ok(!result);
+});
diff --git a/web/tests/unit/helpers/url-encode-test.js b/web/tests/unit/helpers/url-encode-test.js
new file mode 100644
index 000000000..dc52030fd
--- /dev/null
+++ b/web/tests/unit/helpers/url-encode-test.js
@@ -0,0 +1,9 @@
+import { urlEncode } from 'dr-elephant/helpers/url-encode';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | url encode');
+
+test('Test for urlEncode helper', function(assert) {
+  let result = urlEncode(["http://localhost:8090?flowid=abc&page=5&heuristic=Mapper Spill Heuristic"]);
+  assert.equal(result,"http%3A%2F%2Flocalhost%3A8090%3Fflowid%3Dabc%26page%3D5%26heuristic%3DMapper%20Spill%20Heuristic");
+});