diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ApplicationStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ApplicationStatisticsContainer.vue
new file mode 100644
index 000000000..f3430432d
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ApplicationStatisticsContainer.vue
@@ -0,0 +1,213 @@
+<template>
+    <div>
+        <b-card header="Experiments count grouped by applications within the selected period">
+            <div class="row" v-if="items.length > 0">
+                <div class="col">
+                    <b-card>
+                        <b-table :fields="fields" :items="items">
+                            <template slot="cell(applicationName)" slot-scope="data">
+                                {{ data.value }}
+                            </template>
+                            <template slot="cell(allExperimentCount)" slot-scope="data">
+                                {{ data.value }}
+                            </template>
+                            <template slot="cell(runningExperimentCount)" slot-scope="data">
+                                {{ data.value }}
+                            </template>
+                            <template slot="cell(completedExperimentCount)" slot-scope="data">
+                                {{ data.value }}
+                            </template>
+                            <template slot="cell(cancelledExperimentCount)" slot-scope="data">
+                                {{ data.value }}
+                            </template>
+                            <template slot="cell(failedExperimentCount)" slot-scope="data">
+                                {{ data.value }}
+                            </template>
+                            <template slot="cell(createdExperimentCount)" slot-scope="data">
+                                {{ data.value }}
+                            </template>
+                        </b-table>
+                    </b-card>
+                </div>
+            </div>
+        </b-card>
+        <b-card header="CPU hours used by application within the selected period">
+            <div class="w-50">
+                <BarChart :chart-data="cpuHoursConsumedByApplication" />
+            </div>
+        </b-card>
+    </div>
+</template>
+
+<script>
+import { services } from "django-airavata-api";
+import { components } from "django-airavata-common-ui";
+
+export default {
+    name: 'application-statistics-container',
+    props: {
+        fromTime: {
+            type: Date,
+            required: true,
+        },
+        toTime: {
+            type: Date,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            items: [],
+            appInterfaces: null,
+            cpuUsages: null,
+        };
+    },
+    components: {
+        BarChart: components.BarChart,
+    },
+    created() {
+        this.loadAppInterfaces();
+        this.loadCpuUsages();
+        this.loadStatistics();
+    },
+    computed: {
+        fields() {
+            return [
+                {
+                    key: "applicationName",
+                    label: "Application",
+                },
+                {
+                    key: "allExperimentCount",
+                    label: "All Experiment",
+                },
+                {
+                    key: "runningExperimentCount",
+                    label: "Running Experiment",
+                },
+                {
+                    key: "completedExperimentCount",
+                    label: "Completed Experiment",
+                },
+                {
+                    key: "cancelledExperimentCount",
+                    label: "Cancelled Experiment",
+                },
+                {
+                    key: "failedExperimentCount",
+                    label: "Failed Experiment",
+                },
+                {
+                    key: "createdExperimentCount",
+                    label: "Created Experiment",
+                },
+            ];
+        },
+        cpuHoursConsumedByApplication() {
+            let cpuUsageMap = new Map();
+            if(this.appInterfaces) this.appInterfaces.forEach(({applicationInterfaceId}) => cpuUsageMap.set(applicationInterfaceId, 0));
+            if(this.cpuUsages){
+                this.cpuUsages.forEach(({executionId, cpuHours}) => {
+                    cpuUsageMap.set(executionId, cpuHours + (cpuUsageMap.has(executionId) ? cpuUsageMap.get(executionId) : 0));
+                });
+            }
+
+            let cpuUsageSortedList = Array.from(cpuUsageMap.keys()).map((applicationInterfaceId) => {
+                return {
+                    applicationInterfaceId,
+                    cpuHours: cpuUsageMap.get(applicationInterfaceId),
+                };
+            }).sort((a, b) => b.cpuHours - a.cpuHours);
+
+            if(cpuUsageSortedList.length > 11){
+                const firstTenApplications = cpuUsageSortedList.slice(0, 10);
+                const remainingApplications = cpuUsageSortedList.slice(10, cpuUsageSortedList.length);
+                const average = arr => arr.reduce( ( p, c ) => p + c, 0 ) / arr.length;
+                const remainingAvgUsage = Math.floor(average(remainingApplications.map(({cpuHours}) => cpuHours)));
+                cpuUsageSortedList = [...firstTenApplications, {applicationInterfaceId: "Avg of other " + remainingApplications.length + " applications", cpuHours: remainingAvgUsage}]
+            }
+            let appInterfaceNameMap = new Map();
+            if (this.appInterfaces)
+                this.appInterfaces.forEach(({applicationInterfaceId, applicationName}) => appInterfaceNameMap.set(applicationInterfaceId, applicationName));
+            const keys = cpuUsageSortedList.map(({applicationInterfaceId}) => appInterfaceNameMap.get(applicationInterfaceId) ? appInterfaceNameMap.get(applicationInterfaceId) : applicationInterfaceId);
+            const values = cpuUsageSortedList.map(({cpuHours}) => cpuHours);
+            return this.mapToBarChartData(keys, values);
+        },
+    },
+    watch: {
+        fromTime() {
+            this.reloadAfterPropsChange();
+        },
+        toTime() {
+            this.reloadAfterPropsChange();
+        }
+    },
+    methods: {
+        reloadAfterPropsChange() {
+            if (this.fromTime && this.toTime) {
+                this.loadCpuUsages();
+                this.loadStatistics();
+            }
+        },
+        loadAppInterfaces() {
+            services.ApplicationInterfaceService.list().then(
+                (appInterfaces) => {
+                    this.appInterfaces = appInterfaces;
+                }
+            );
+        },
+        loadStatistics() {
+            const requestData = {
+                fromTime: this.fromTime.toJSON(),
+                toTime: this.toTime.toJSON(),
+            };
+            return services.ExperimentStatisticsService.get(requestData).then(
+                (stats) => {
+                    let results = stats ? stats.results : {};
+                    const allExperiments = "allExperiments" in results ? results["allExperiments"] : [];
+                    const runningExperiments = "runningExperiments" in results ? results["runningExperiments"] : [];
+                    const completedExperiments = "completedExperiments" in results ? results["completedExperiments"] : [];
+                    const failedExperiments = "failedExperiments" in results ? results["failedExperiments"] : [];
+                    const cancelledExperiments = "cancelledExperiments" in results ? results["cancelledExperiments"] : [];
+                    const createdExperiments = "createdExperiments" in results ? results["createdExperiments"] : [];
+                    this.items = this.appInterfaces ? this.appInterfaces.map(({ applicationInterfaceId, applicationName }) => {
+                        return {
+                            applicationName,
+                            allExperimentCount: allExperiments.filter(({ executionId }) => executionId === applicationInterfaceId).length,
+                            runningExperimentCount: runningExperiments.filter(({ executionId }) => executionId === applicationInterfaceId).length,
+                            completedExperimentCount: completedExperiments.filter(({ executionId }) => executionId === applicationInterfaceId).length,
+                            failedExperimentCount: failedExperiments.filter(({ executionId }) => executionId === applicationInterfaceId).length,
+                            cancelledExperimentCount: cancelledExperiments.filter(({ executionId }) => executionId === applicationInterfaceId).length,
+                            createdExperimentCount: createdExperiments.filter(({ executionId }) => executionId === applicationInterfaceId).length,
+                        }
+                    }) : [];
+
+                }
+            );
+        },
+        loadCpuUsages() {
+            const requestData = {
+                fromTime: this.fromTime.toJSON(),
+                toTime: this.toTime.toJSON(),
+            };
+            services.CpuUsageService.get(requestData).then(
+                (cpuUsages) => {
+                    this.cpuUsages = cpuUsages;
+                }
+            );
+        },
+        mapToBarChartData(keys, values) {
+            return {
+                labels: keys,
+                datasets: [
+                    {
+                        label: 'CPU Hours',
+                        data: values,
+                        backgroundColor: '#FFC0CB'
+                    }
+                ]
+            };
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ComputeResourceStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ComputeResourceStatisticsContainer.vue
new file mode 100644
index 000000000..c5c15e7e5
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ComputeResourceStatisticsContainer.vue
@@ -0,0 +1,104 @@
+<template>
+    <b-card header="Compute Resource with Atleast one Job Submitted within the selected period">
+        <div class="row" v-if="items.length > 0">
+            <div class="col">
+                <b-card>
+                    <b-table :fields="fields" :items="items">
+                        <template slot="cell(resourceHostId)" slot-scope="data">
+                            <compute-resource-name :compute-resource-id="data.value" />
+                        </template>
+                        <template slot="cell(numberOfJobs)" slot-scope="data">
+                            {{ data.value }}
+                        </template>
+                    </b-table>
+                </b-card>
+            </div>
+        </div>
+    </b-card>
+</template>
+
+<script>
+import { services } from "django-airavata-api";
+import { components } from "django-airavata-common-ui";
+
+export default {
+    name: 'compute-resource-statistics-container',
+    props: {
+        fromTime: {
+            type: Date,
+            required: true,
+        },
+        toTime: {
+            type: Date,
+            required: true,
+        }
+    },
+    watch: {
+        fromTime() {
+            this.reloadAfterPropsChange();
+        },
+        toTime() {
+            this.reloadAfterPropsChange();
+        }
+    },
+    data() {
+        return {
+            items: [],
+            dateConfig: {
+                mode: "range",
+                wrap: true,
+                dateFormat: "Y-m-d",
+                maxDate: new Date().fp_incr(1),
+            },
+        };
+    },
+    created() {
+        this.loadStatistics();
+    },
+    components: {
+        "compute-resource-name": components.ComputeResourceName,
+    },
+    computed: {
+        fields() {
+            return [
+                {
+                    key: "resourceHostId",
+                    label: "Resource",
+                },
+                {
+                    key: "numberOfJobs",
+                    label: "NumberOfJobs",
+                },
+            ];
+        }
+    },
+    methods: {
+        reloadAfterPropsChange() {
+            if(this.fromTime && this.toTime) {
+                this.loadStatistics();
+            }
+        },
+        loadStatistics() {
+            const requestData = {
+                fromTime: this.fromTime.toJSON(),
+                toTime: this.toTime.toJSON(),
+            };
+            return services.ExperimentStatisticsService.get(requestData).then(
+                (stats) => {
+                    let results = stats ? stats.results : {};
+                    const allExperiments = "allExperiments" in results ? results["allExperiments"] : [];
+                    const allresourceHostIds = allExperiments.map(item => item.resourceHostId);
+                    const cnt = new Map();
+                    allresourceHostIds.forEach(resourceHostId => {
+                        cnt.set(resourceHostId, cnt.has(resourceHostId) ? cnt.get(resourceHostId) + 1 : 1);
+                    });
+                    this.items = [];
+                    cnt.forEach((numberOfJobs, resourceHostId) => {
+                        this.items.push({ numberOfJobs, resourceHostId });
+                    });
+                }
+            );
+        },
+    }
+};
+</script>
\ No newline at end of file
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
index db4628e8a..d9d8f07fc 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
@@ -11,20 +11,12 @@
           <b-card-text>
             <b-form-group>
               <b-input-group>
-                <b-form-input
-                  v-model.trim="experimentId"
-                  placeholder="Experiment ID"
-                  @keydown.native.enter="
-                    experimentId && showExperimentDetails(experimentId)
-                  "
-                />
+                <b-form-input v-model.trim="experimentId" placeholder="Experiment ID" @keydown.native.enter="
+                  experimentId && showExperimentDetails(experimentId)
+                  " />
                 <b-input-group-append>
-                  <b-button
-                    :disabled="!experimentId"
-                    @click="showExperimentDetails(experimentId)"
-                    variant="primary"
-                    >Load</b-button
-                  >
+                  <b-button :disabled="!experimentId" @click="showExperimentDetails(experimentId)"
+                    variant="primary">Load</b-button>
                 </b-input-group-append>
               </b-input-group>
             </b-form-group>
@@ -34,20 +26,12 @@
           <b-card-text>
             <b-form-group>
               <b-input-group>
-                <b-form-input
-                  v-model.trim="jobId"
-                  placeholder="Job ID"
-                  @keydown.native.enter="
-                    jobId && showExperimentDetailsForJobId(jobId)
-                  "
-                />
+                <b-form-input v-model.trim="jobId" placeholder="Job ID" @keydown.native.enter="
+                  jobId && showExperimentDetailsForJobId(jobId)
+                  " />
                 <b-input-group-append>
-                  <b-button
-                    :disabled="!jobId"
-                    @click="showExperimentDetailsForJobId(jobId)"
-                    variant="primary"
-                    >Load</b-button
-                  >
+                  <b-button :disabled="!jobId" @click="showExperimentDetailsForJobId(jobId)"
+                    variant="primary">Load</b-button>
                 </b-input-group-append>
               </b-input-group>
             </b-form-group>
@@ -55,249 +39,179 @@
         </b-tab>
       </b-tabs>
     </b-card>
-    <b-card no-body>
-      <b-tabs card v-model="activeTabIndex" ref="tabs">
-        <b-tab :title="selectedExperimentsTabTitle">
-          <div class="row">
-            <div class="col">
-              <b-card header="Filter Options">
-                <b-input-group class="w-100 mb-2">
-                  <b-input-group-prepend is-text>
-                    <i class="fa fa-calendar-week" aria-hidden="true"></i>
-                  </b-input-group-prepend>
-                  <flat-pickr
-                    :value="dateRange"
-                    :config="dateConfig"
-                    @on-change="dateRangeChanged"
-                    class="form-control"
-                  />
-                  <b-input-group-append>
-                    <b-button
-                      @click="getPast24Hours"
-                      variant="outline-secondary"
-                      >Past 24 Hours</b-button
-                    >
-                    <b-button @click="getPastWeek" variant="outline-secondary"
-                      >Past Week</b-button
-                    >
-                  </b-input-group-append>
-                </b-input-group>
-                <b-dropdown text="Add Filters" class="mb-2">
-                  <b-dropdown-item
-                    v-if="!usernameFilterEnabled"
-                    @click="usernameFilterEnabled = true"
-                    >Username</b-dropdown-item
-                  >
-                  <b-dropdown-item
-                    v-if="!applicationNameFilterEnabled"
-                    @click="applicationNameFilterEnabled = true"
-                    >Application Name</b-dropdown-item
-                  >
-                  <b-dropdown-item
-                    v-if="!hostnameFilterEnabled"
-                    @click="hostnameFilterEnabled = true"
-                    >Hostname</b-dropdown-item
-                  >
-                </b-dropdown>
-                <b-input-group v-if="usernameFilterEnabled" class="mb-2">
-                  <b-form-input
-                    v-model="usernameFilter"
-                    placeholder="Username"
-                    @keydown.native.enter="loadStatistics"
-                  />
-                  <b-input-group-append>
-                    <b-button @click="removeUsernameFilter">
-                      <i class="fa fa-times"></i>
-                      <span class="sr-only">Remove username filter</span>
-                    </b-button>
-                  </b-input-group-append>
-                </b-input-group>
-                <b-input-group v-if="applicationNameFilterEnabled" class="mb-2">
-                  <b-form-select
-                    v-model="applicationNameFilter"
-                    :options="applicationNameOptions"
-                    @input="loadStatistics"
-                  >
-                    <template slot="first">
-                      <option :value="null" disabled>
-                        Select an application to filter on
-                      </option>
-                    </template>
-                  </b-form-select>
-                  <b-input-group-append>
-                    <b-button @click="removeApplicationNameFilter">
-                      <i class="fa fa-times"></i>
-                      <span class="sr-only"
-                        >Remove application name filter</span
-                      >
-                    </b-button>
-                  </b-input-group-append>
-                </b-input-group>
-                <b-input-group v-if="hostnameFilterEnabled" class="mb-2">
-                  <b-form-select
-                    v-model="hostnameFilter"
-                    :options="hostnameOptions"
-                    @input="loadStatistics"
-                  >
-                    <template slot="first">
-                      <option :value="null" disabled>
-                        Select compute resource to filter on
-                      </option>
-                    </template>
-                  </b-form-select>
-                  <b-input-group-append>
-                    <b-button @click="removeHostnameFilter">
-                      <i class="fa fa-times"></i>
-                      <span class="sr-only">Remove hostname filter</span>
-                    </b-button>
-                  </b-input-group-append>
-                </b-input-group>
-                <template slot="footer">
-                  <div class="d-flex justify-content-end">
-                    <b-button
-                      @click="loadStatistics"
-                      class="ml-auto"
-                      variant="primary"
-                      >Get Statistics</b-button
-                    >
-                  </div>
-                </template>
-              </b-card>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col">
-              <h2 class="h5 mb-4">
-                Experiment Statistics from {{ fromTimeDisplay }} to
-                {{ toTimeDisplay }}
-              </h2>
-            </div>
+    <b-card>
+      <b-card header="Select Date Range">
+        <b-input-group class="w-100 mb-2">
+          <b-input-group-prepend is-text>
+            <i class="fa fa-calendar-week" aria-hidden="true"></i>
+          </b-input-group-prepend>
+          <flat-pickr :value="dateRange" :config="dateConfig" @on-change="dateRangeChanged" class="form-control" />
+          <b-input-group-append>
+            <b-button @click="getPast24Hours" variant="outline-secondary">Past 24 Hours</b-button>
+            <b-button @click="getPastWeek" variant="outline-secondary">Past Week</b-button>
+          </b-input-group-append>
+        </b-input-group>
+        <template slot="footer">
+          <div class="d-flex justify-content-end">
+            <b-button @click="loadStatistics" class="ml-auto" variant="primary">Get Statistics</b-button>
           </div>
-          <div class="row">
-            <div class="col-xl-2 col-md-4">
-              <experiment-statistics-card
-                bg-variant="primary"
-                header-text-variant="white"
-                :count="experimentStatistics.allExperimentCount || 0"
-                title="Total Experiments"
-                @click="selectExperiments('allExperiments')"
-              >
-                <span slot="link-text">All</span>
-              </experiment-statistics-card>
+        </template>
+      </b-card>
+      <b-card no-body>
+        <b-tabs card v-model="activeTabIndex" ref="tabs">
+          <b-tab :title="selectedExperimentsTabTitle">
+            <div class="row">
+              <div class="col">
+                <b-card header="Additional Filter Options">
+                  <b-dropdown text="Add Filters" class="mb-2">
+                    <b-dropdown-item v-if="!usernameFilterEnabled"
+                      @click="usernameFilterEnabled = true">Username</b-dropdown-item>
+                    <b-dropdown-item v-if="!applicationNameFilterEnabled"
+                      @click="applicationNameFilterEnabled = true">Application Name</b-dropdown-item>
+                    <b-dropdown-item v-if="!hostnameFilterEnabled"
+                      @click="hostnameFilterEnabled = true">Hostname</b-dropdown-item>
+                  </b-dropdown>
+                  <b-input-group v-if="usernameFilterEnabled" class="mb-2">
+                    <b-form-input v-model="usernameFilter" placeholder="Username"
+                      @keydown.native.enter="loadStatistics" />
+                    <b-input-group-append>
+                      <b-button @click="removeUsernameFilter">
+                        <i class="fa fa-times"></i>
+                        <span class="sr-only">Remove username filter</span>
+                      </b-button>
+                    </b-input-group-append>
+                  </b-input-group>
+                  <b-input-group v-if="applicationNameFilterEnabled" class="mb-2">
+                    <b-form-select v-model="applicationNameFilter" :options="applicationNameOptions"
+                      @input="loadStatistics">
+                      <template slot="first">
+                        <option :value="null" disabled>
+                          Select an application to filter on
+                        </option>
+                      </template>
+                    </b-form-select>
+                    <b-input-group-append>
+                      <b-button @click="removeApplicationNameFilter">
+                        <i class="fa fa-times"></i>
+                        <span class="sr-only">Remove application name filter</span>
+                      </b-button>
+                    </b-input-group-append>
+                  </b-input-group>
+                  <b-input-group v-if="hostnameFilterEnabled" class="mb-2">
+                    <b-form-select v-model="hostnameFilter" :options="hostnameOptions" @input="loadStatistics">
+                      <template slot="first">
+                        <option :value="null" disabled>
+                          Select compute resource to filter on
+                        </option>
+                      </template>
+                    </b-form-select>
+                    <b-input-group-append>
+                      <b-button @click="removeHostnameFilter">
+                        <i class="fa fa-times"></i>
+                        <span class="sr-only">Remove hostname filter</span>
+                      </b-button>
+                    </b-input-group-append>
+                  </b-input-group>
+                </b-card>
+              </div>
             </div>
-            <div class="col-xl-2 col-md-4">
-              <experiment-statistics-card
-                bg-variant="light"
-                :count="experimentStatistics.createdExperimentCount || 0"
-                :states="createdStates"
-                title="Created Experiments"
-                @click="selectExperiments('createdExperiments')"
-              >
-              </experiment-statistics-card>
+            <div class="row">
+              <div class="col">
+                <h2 class="h5 mb-4">
+                  Experiment Statistics from {{ fromTimeDisplay }} to
+                  {{ toTimeDisplay }}
+                </h2>
+              </div>
             </div>
-            <div class="col-xl-2 col-md-4">
-              <experiment-statistics-card
-                bg-variant="light"
-                header-text-variant="success"
-                :count="experimentStatistics.runningExperimentCount || 0"
-                :states="runningStates"
-                title="Running Experiments"
-                @click="selectExperiments('runningExperiments')"
-              >
-              </experiment-statistics-card>
+            <div class="row">
+              <div class="col-xl-2 col-md-4">
+                <experiment-statistics-card bg-variant="primary" header-text-variant="white"
+                  :count="experimentStatistics.allExperimentCount || 0" title="Total Experiments"
+                  @click="selectExperiments('allExperiments')">
+                  <span slot="link-text">All</span>
+                </experiment-statistics-card>
+              </div>
+              <div class="col-xl-2 col-md-4">
+                <experiment-statistics-card bg-variant="light" :count="experimentStatistics.createdExperimentCount || 0"
+                  :states="createdStates" title="Created Experiments" @click="selectExperiments('createdExperiments')">
+                </experiment-statistics-card>
+              </div>
+              <div class="col-xl-2 col-md-4">
+                <experiment-statistics-card bg-variant="light" header-text-variant="success"
+                  :count="experimentStatistics.runningExperimentCount || 0" :states="runningStates"
+                  title="Running Experiments" @click="selectExperiments('runningExperiments')">
+                </experiment-statistics-card>
+              </div>
+              <div class="col-xl-2 col-md-4">
+                <experiment-statistics-card bg-variant="success" header-text-variant="white" link-variant="success"
+                  :count="experimentStatistics.completedExperimentCount || 0" :states="completedStates"
+                  title="Completed Experiments" @click="selectExperiments('completedExperiments')">
+                </experiment-statistics-card>
+              </div>
+              <div class="col-xl-2 col-md-4">
+                <experiment-statistics-card bg-variant="warning" header-text-variant="white" link-variant="warning"
+                  :count="experimentStatistics.cancelledExperimentCount || 0" :states="canceledStates"
+                  title="Cancelled Experiments" @click="selectExperiments('cancelledExperiments')">
+                </experiment-statistics-card>
+              </div>
+              <div class="col-xl-2 col-md-4">
+                <experiment-statistics-card bg-variant="danger" header-text-variant="white" link-variant="danger"
+                  :count="experimentStatistics.failedExperimentCount || 0" :states="failedStates"
+                  title="Failed Experiments" @click="selectExperiments('failedExperiments')">
+                </experiment-statistics-card>
+              </div>
             </div>
-            <div class="col-xl-2 col-md-4">
-              <experiment-statistics-card
-                bg-variant="success"
-                header-text-variant="white"
-                link-variant="success"
-                :count="experimentStatistics.completedExperimentCount || 0"
-                :states="completedStates"
-                title="Completed Experiments"
-                @click="selectExperiments('completedExperiments')"
-              >
-              </experiment-statistics-card>
-            </div>
-            <div class="col-xl-2 col-md-4">
-              <experiment-statistics-card
-                bg-variant="warning"
-                header-text-variant="white"
-                link-variant="warning"
-                :count="experimentStatistics.cancelledExperimentCount || 0"
-                :states="canceledStates"
-                title="Cancelled Experiments"
-                @click="selectExperiments('cancelledExperiments')"
-              >
-              </experiment-statistics-card>
-            </div>
-            <div class="col-xl-2 col-md-4">
-              <experiment-statistics-card
-                bg-variant="danger"
-                header-text-variant="white"
-                link-variant="danger"
-                :count="experimentStatistics.failedExperimentCount || 0"
-                :states="failedStates"
-                title="Failed Experiments"
-                @click="selectExperiments('failedExperiments')"
-              >
-              </experiment-statistics-card>
-            </div>
-          </div>
-          <div class="row" v-if="items.length > 0">
-            <div class="col">
-              <b-card>
-                <b-table :fields="fields" :items="items">
-                  <template slot="cell(executionId)" slot-scope="data">
-                    <application-name :application-interface-id="data.value" />
-                  </template>
-                  <template slot="cell(resourceHostId)" slot-scope="data">
-                    <compute-resource-name :compute-resource-id="data.value" />
-                  </template>
-                  <template slot="cell(creationTime)" slot-scope="data">
-                    <human-date :date="data.value" />
-                  </template>
-                  <template slot="cell(experimentStatus)" slot-scope="data">
-                    <experiment-status-badge :status-name="data.value.name" />
-                  </template>
-                  <template slot="cell(actions)" slot-scope="data">
-                    <b-link
-                      @click="showExperimentDetails(data.item.experimentId)"
-                    >
-                      View Details
-                      <i class="far fa-chart-bar" aria-hidden="true"></i>
-                    </b-link>
-                  </template>
-                </b-table>
-              </b-card>
-              <pager
-                v-if="experimentStatistics.allExperimentCount > 0"
-                :paginator="experimentStatisticsPaginator"
-                @next="experimentStatisticsPaginator.next()"
-                @previous="experimentStatisticsPaginator.previous()"
-              ></pager>
+            <div class="row" v-if="items.length > 0">
+              <div class="col">
+                <b-card>
+                  <b-table :fields="fields" :items="items">
+                    <template slot="cell(executionId)" slot-scope="data">
+                      <application-name :application-interface-id="data.value" />
+                    </template>
+                    <template slot="cell(resourceHostId)" slot-scope="data">
+                      <compute-resource-name :compute-resource-id="data.value" />
+                    </template>
+                    <template slot="cell(creationTime)" slot-scope="data">
+                      <human-date :date="data.value" />
+                    </template>
+                    <template slot="cell(experimentStatus)" slot-scope="data">
+                      <experiment-status-badge :status-name="data.value.name" />
+                    </template>
+                    <template slot="cell(actions)" slot-scope="data">
+                      <b-link @click="showExperimentDetails(data.item.experimentId)">
+                        View Details
+                        <i class="far fa-chart-bar" aria-hidden="true"></i>
+                      </b-link>
+                    </template>
+                  </b-table>
+                </b-card>
+                <pager v-if="experimentStatistics.allExperimentCount > 0" :paginator="experimentStatisticsPaginator"
+                  @next="experimentStatisticsPaginator.next()" @previous="experimentStatisticsPaginator.previous()">
+                </pager>
+              </div>
             </div>
-          </div>
-        </b-tab>
-        <b-tab
-          v-for="experimentTab in experimentDetailTabs"
-          :key="experimentTab.experiment.experimentId"
-        >
-          <template slot="title">
-            {{ experimentTab.tabTitle }}
-            <b-link
-              @click="
+          </b-tab>
+          <b-tab v-for="experimentTab in experimentDetailTabs" :key="experimentTab.experiment.experimentId">
+            <template slot="title">
+              {{ experimentTab.tabTitle }}
+              <b-link @click="
                 removeExperimentDetailTab(experimentTab.experiment.experimentId)
-              "
-              class="text-secondary"
-            >
-              <i class="fas fa-times"></i>
-              <span class="sr-only">Close experiment tab</span>
-            </b-link>
-          </template>
-          <experiment-details-view :experiment="experimentTab.experiment" />
-        </b-tab>
-      </b-tabs>
+                " class="text-secondary">
+                <i class="fas fa-times"></i>
+                <span class="sr-only">Close experiment tab</span>
+              </b-link>
+            </template>
+            <experiment-details-view :experiment="experimentTab.experiment" />
+          </b-tab>
+        </b-tabs>
+      </b-card>
+      <compute-resource-statistics-container :from-time="fromTime" :to-time="toTime" />
+      <application-statistics-container :from-time="fromTime" :to-time="toTime" />
+      <user-statistics-container :from-time="fromTime" :to-time="toTime" />
+      <user-group-statistics-container :from-time="fromTime" :to-time="toTime" />
+
     </b-card>
+
   </div>
 </template>
 <script>
@@ -305,6 +219,10 @@ import { errors, models, services, utils } from "django-airavata-api";
 import { components, notifications } from "django-airavata-common-ui";
 import ExperimentStatisticsCard from "./ExperimentStatisticsCard";
 import ExperimentDetailsView from "./ExperimentDetailsView";
+import ComputeResourceStatisticsContainer from "./ComputeResourceStatisticsContainer";
+import ApplicationStatisticsContainer from "./ApplicationStatisticsContainer.vue";
+import UserStatisticsContainer from "./UserStatisticsContainer.vue";
+import UserGroupStatisticsContainer from "./UserGroupStatisticsContainer.vue";
 
 import moment from "moment";
 
@@ -351,6 +269,10 @@ export default {
   components: {
     ExperimentDetailsView,
     ExperimentStatisticsCard,
+    ComputeResourceStatisticsContainer,
+    ApplicationStatisticsContainer,
+    UserStatisticsContainer,
+    UserGroupStatisticsContainer,
     "application-name": components.ApplicationName,
     "compute-resource-name": components.ComputeResourceName,
     "human-date": components.HumanDate,
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/UserGroupStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/UserGroupStatisticsContainer.vue
new file mode 100644
index 000000000..613ee285a
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/UserGroupStatisticsContainer.vue
@@ -0,0 +1,261 @@
+<template>
+    <b-card header="User groups created within selected period">
+        <div class="row" v-if="items.length > 0">
+            <div class="col">
+                <b-card>
+                    <b-table :fields="fields" :items="items">
+                        <template slot="cell(userGroupName)" slot-scope="data">
+                            {{ data.value }}
+                        </template>
+                        <template slot="cell(noOfUsers)" slot-scope="data">
+                            {{ data.value }}
+                        </template>
+                        <template slot="cell(actions)" slot-scope="data">
+                            <b-link @click="showUserGroupDetails(data.item.id)">
+                                View Details
+                                <i class="far fa-chart-bar" aria-hidden="true"></i>
+                            </b-link>
+                        </template>
+                    </b-table>
+                </b-card>
+            </div>
+        </div>
+        <div class="row" v-if="selectedUserGroupId">
+            <div class="col">
+                <b-card>
+                    <b-table :fields="fieldsForGroupDetails" :items="itemsForGroupDetails">
+                        <template slot="cell(userName)" slot-scope="data">
+                            {{ data.value }}
+                        </template>
+                        <template slot="cell(permissions)" slot-scope="data">
+                            <b-badge class="mr-2" :variant="'success'" v-if="data.item.isMember">MEMBER</b-badge>
+                            <b-badge class="mr-2" :variant="'warning'" v-if="data.item.isAdmin">ADMIN</b-badge>
+                            <b-badge class="mr-2" :variant="'danger'" v-if="data.item.isOwner">OWNER</b-badge>
+                        </template>
+                        <template slot="cell(noOfJobs)" slot-scope="data">
+                            {{ data.value }}
+                        </template>
+                    </b-table>
+                </b-card>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <b-card header="User Emails Filtered By UserGroup">
+                    <b-input-group class="mb-2">
+                        <b-form-select v-model="userGroupFilter" :options="userGroupOptions">
+                            <template slot="first">
+                                <option :value="null" disabled>
+                                    Select Group to filter on
+                                </option>
+                            </template>
+                        </b-form-select>
+                    </b-input-group>
+                    <b-link @click="downloadUsersInActiveGroupEmailCsv">
+                        <i class="fas fa-download"></i>
+                        Download emails.csv
+                    </b-link>
+                </b-card>
+            </div>
+        </div>
+    </b-card>
+</template>
+
+<script>
+import { services } from "django-airavata-api";
+
+export default {
+    name: 'user-group-statistics-container',
+    props: {
+        fromTime: {
+            type: Date,
+            required: true,
+        },
+        toTime: {
+            type: Date,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            userGroups: [],
+            selectedUserGroupId: null,
+            userGroupsDetails: null, //group Id to details
+            allUserEmails: null, //userId to email
+            userGroupFilter: null
+        };
+    },
+    created() {
+        this.loadGroups();
+        this.loadAllUserEmails();
+    },
+    computed: {
+        fields() {
+            return [
+                {
+                    key: "userGroupName",
+                    label: "UserGroupName",
+                },
+                {
+                    key: "noOfUsers",
+                    label: "No. of Users",
+                },
+                {
+                    key: "actions",
+                    label: "Actions"
+                }
+            ];
+        },
+        items() {
+            if (this.userGroups && this.userGroupsDetails) {
+                return this.userGroups.map(({ name, id }) => {
+                    const noOfUsers = this.userGroupsDetails.has(id) ? this.userGroupsDetails.get(id).length : "N/A";
+                    return {
+                        userGroupName: name,
+                        noOfUsers,
+                        id,
+                    }
+                });
+            } else {
+                return [];
+            }
+        },
+        fieldsForGroupDetails() {
+            return [
+                {
+                    key: "userId",
+                    label: "UserName",
+                },
+                {
+                    key: "permissions",
+                    label: "Permissions",
+                },
+                {
+                    key: "noOfJobs",
+                    label: "No. Of Jobs Submitted in last week",
+                },
+            ];
+        },
+        itemsForGroupDetails() {
+            if (this.selectedUserGroupId && this.userGroupsDetails.has(this.selectedUserGroupId)) {
+                return this.userGroupsDetails.get(this.selectedUserGroupId);
+            } else {
+                return [];
+            }
+        },
+        userGroupOptions() {
+            if (this.userGroups) {
+                return this.userGroups.map(({ id, name }) => {
+                    return {
+                        value: id,
+                        text: name,
+                    }
+                })
+            } else {
+                return [];
+            }
+        },
+    },
+    watch: {
+        fromTime() {
+            this.reloadAfterPropsChange();
+        },
+        toTime() {
+            this.reloadAfterPropsChange();
+        }
+    },
+    methods: {
+        reloadAfterPropsChange() {
+            if (this.fromTime && this.toTime) {
+                this.loadGroups();
+            }
+        },
+        loadGroups() {
+            let requestData = {
+                fromTime: this.fromTime.toJSON(),
+                toTime: this.toTime.toJSON(),
+            };
+            services.GroupService.getGroupsFilteredByCreationDate(requestData).then(
+                (userGroups) => {
+                    this.userGroups = userGroups;
+
+                    if (this.userGroups) {
+                        this.userGroups = this.userGroups.map((userGroup) => {
+                            userGroup.ownerId = this.removeAtDefault(userGroup.ownerId);
+                            userGroup.admins = userGroup.admins.map((id) => this.removeAtDefault(id));
+                            userGroup.members = userGroup.members.map((id) => this.removeAtDefault(id));
+                            return userGroup;
+                        });
+                    }
+                }
+            );
+
+            //jobs submitted during last week
+            requestData = {
+                fromTime: new Date().fp_incr(-7).toJSON(),
+                toTime: new Date().fp_incr(1).toJSON(),
+            }
+            services.ExperimentStatisticsService.get(requestData).then(
+                (stats) => {
+                    const results = stats ? stats.results : {};
+                    let allExperiments = "allExperiments" in results ? results["allExperiments"] : [];
+                    this.userGroupsDetails = new Map();
+                    this.userGroups.forEach(({ id, members, ownerId, admins }) => {
+                        if (id) {
+                            this.userGroupsDetails.set(id, members.map((userId) => {
+                                return {
+                                    userId,
+                                    isOwner: (ownerId === userId ? true : false),
+                                    isMember: true,
+                                    isAdmin: ((admins && admins.includes(userId)) ? true : false),
+                                    noOfJobs: allExperiments.filter(({ userName }) => userName === userId).length,
+                                };
+                            }));
+                        }
+                    });
+                }
+            );
+        },
+        loadAllUserEmails() {
+            services.UserProfileService.list().then((userProfiles) => {
+                this.allUserEmails = new Map();
+                userProfiles.forEach(({ userId, email }) => {
+                    if (userId && email) this.allUserEmails.set(userId, email);
+                });
+            });
+        },
+        showUserGroupDetails(groupId) {
+            this.selectedUserGroupId = groupId;
+        },
+        downloadUsersInActiveGroupEmailCsv() {
+            let groupId = this.userGroupFilter;
+            let activeUserGroupUserEmails = [];
+            if (this.userGroupsDetails.has(groupId)) {
+                this.userGroupsDetails.get(groupId).forEach(({ userId }) => {
+                    if (this.allUserEmails && this.allUserEmails.has(userId))
+                        activeUserGroupUserEmails.push(this.allUserEmails.get(userId));
+                });
+            }
+            this.downloadEmailCsv(activeUserGroupUserEmails);
+        },
+        downloadEmailCsv(emailList) {
+            const csvContent = "data:text/csv;charset=utf-8,"
+                + emailList.join("\n");
+            const encodedUri = encodeURI(csvContent);
+            const link = document.createElement("a");
+            link.setAttribute("href", encodedUri);
+            link.setAttribute("download", "emails.csv");
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        },
+        removeAtDefault(id) {
+            const lastAtIndex = id.lastIndexOf("@");
+            if (lastAtIndex > 0) {
+                return id.substring(0, lastAtIndex);
+            }
+            return id;
+        },
+    },
+}
+</script>
\ No newline at end of file
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/UserStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/UserStatisticsContainer.vue
new file mode 100644
index 000000000..bbc34cce0
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/UserStatisticsContainer.vue
@@ -0,0 +1,291 @@
+<template>
+    <div>
+        <b-card header="Users who submitted at least a single job within the selected period">
+            <div class="row">
+                <div class="col">
+                    <b-card>
+                        <b-card-text>
+                            Number of users who submitted at least a single job within the selected period: {{ countOfUsersWithAtLeastSingleJob }}
+                        </b-card-text>
+                        <b-link @click="downloadUsersWithAtLeastSingleJobEmailCsv">
+                            <i class="fas fa-download"></i>
+                            Download emails.csv
+                        </b-link>
+                    </b-card>
+                </div>
+            </div>
+        </b-card>
+        <b-card header="All Users">
+            <div class="row">
+                <div class="col">
+                    <b-card>
+                        <b-card-text>Total number of unique users: {{ countOfAllUsers }}</b-card-text>
+                        <b-link @click="downloadAllUserEmailCsv">
+                            <i class="fas fa-download"></i>
+                            Download emails.csv
+                        </b-link>
+                    </b-card>
+                </div>
+            </div>
+        </b-card>
+        <b-card header="User Registration Trends">
+            <div class="row">
+                <div class="col-md-5">
+                    <b-card header="Monthwise User Registration Trend">
+                        <PieChart :chart-data="userGroupedByCreationMonth" />
+                    </b-card>
+                </div>
+                <div class="col-md-2"></div>
+                <div class="col-md-5">
+                    <b-card header="Yearwise User Registration Trend">
+                        <b-card-text>Only years with atleast 1 registration are shown</b-card-text>
+                        <BarChart :chart-data="userGroupedByCreaionYear" />
+                    </b-card>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-5">
+                    <b-card header="Organizationwise User Registration Trend">
+                        <b-card-text>Only organizations with atleast 1 registration are shown</b-card-text>
+                        <BarChart :chart-data="userGroupedByHomeOrg" />
+                    </b-card>
+                </div>
+                <div class="col-md-2"></div>
+                <div class="col-md-5">
+                    <b-card header="Countrywise User Registration Trend">
+                        <b-card-text>Only countries with atleast 1 registration are shown</b-card-text>
+                        <BarChart :chart-data="userGroupedByCountry" />
+                    </b-card>
+                </div>
+            </div>
+        </b-card>
+        <b-card header="CPU hours used by user within the selected period">
+            <div class="w-50">
+                <BarChart :chart-data="cpuHoursConsumedByUser" />
+            </div>
+        </b-card>
+    </div>
+</template>
+
+<script>
+import { services } from "django-airavata-api";
+import { components } from "django-airavata-common-ui";
+
+export default {
+    name: 'user-statistics-container',
+    props: {
+        fromTime: {
+            type: Date,
+            required: true,
+        },
+        toTime: {
+            type: Date,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            countOfUsersWithAtLeastSingleJob: null,
+            userWithAtLeastSingleJobEmailList: [],
+            userProfiles: [],
+            countOfAllUsers: null,
+            allUserEmailList: [],
+            cpuUsages: null,
+        };
+    },
+    components: {
+        PieChart: components.PieChart,
+        BarChart: components.BarChart,
+    },
+    computed: {
+        userGroupedByCreationMonth() {
+            let countOfUserCreatedEachMonth = new Array(12).fill(0);
+            if (this.userProfiles) {
+                this.userProfiles.forEach(({ creationTime }) => {
+                    const idx = (new Date(creationTime)).getMonth();
+                    if (idx) countOfUserCreatedEachMonth[idx]++;
+                });
+            }
+            return {
+                labels: this.getMonthNameList(),
+                datasets: [
+                    {
+                        data: countOfUserCreatedEachMonth,
+                        backgroundColor: this.getBackgroundColorListForMonths(),
+                    }
+                ],
+            };
+        },
+        userGroupedByCreaionYear() {
+            let userCountMap = new Map();
+            if (this.userProfiles) {
+                this.userProfiles.forEach(({ creationTime }) => {
+                    const year = (new Date(creationTime)).getFullYear();
+                    if (year) {
+                        userCountMap.set(year, 1 +
+                            (userCountMap.has(year) ? userCountMap.get(year) : 0));
+                    }
+                });
+            }
+            const keys = Array.from(userCountMap.keys()).sort();
+            const values = keys.map((key) => userCountMap.get(key))
+            return this.mapToBarChartData(keys, values, 'No. of Users');
+        },
+        userGroupedByCountry() {
+            let userCountMap = new Map();
+            if (this.userProfiles) {
+                this.userProfiles.forEach(({ country }) => {
+                    if (country) {
+                        userCountMap.set(country, 1 +
+                            (userCountMap.has(country) ? userCountMap.get(country) : 0));
+                    }
+                });
+            }
+            const keys = Array.from(userCountMap.keys());
+            const values = keys.map((key) => userCountMap.get(key))
+            return this.mapToBarChartData(keys, values, 'No. of Users');
+        },
+        userGroupedByHomeOrg() {
+            let userCountMap = new Map();
+            if (this.userProfiles) {
+                this.userProfiles.forEach(({ homeOrganization }) => {
+                    if (homeOrganization) {
+                        userCountMap.set(homeOrganization, 1 +
+                            (userCountMap.has(homeOrganization) ? userCountMap.get(homeOrganization) : 0));
+                    }
+                });
+            }
+            const keys = Array.from(userCountMap.keys());
+            const values = keys.map((key) => userCountMap.get(key))
+            return this.mapToBarChartData(keys, values, 'No. of Users');
+        },
+        cpuHoursConsumedByUser() {
+            let cpuUsageMap = new Map();
+            if (this.userProfiles) this.userProfiles.forEach(({ userId }) => cpuUsageMap.set(userId, 0));
+            if (this.cpuUsages) {
+                this.cpuUsages.forEach(({ userName, cpuHours }) => {
+                    cpuUsageMap.set(userName, cpuHours + (cpuUsageMap.has(userName) ? cpuUsageMap.get(userName) : 0));
+                });
+            }
+
+            let cpuUsageSortedList = Array.from(cpuUsageMap.keys()).map((userId) => {
+                return {
+                    userId,
+                    cpuHours: cpuUsageMap.get(userId),
+                };
+            }).sort((a, b) => b.cpuHours - a.cpuHours);
+
+            if (cpuUsageSortedList.length > 11) {
+                const firstTenUsers = cpuUsageSortedList.slice(0, 10);
+                const remainingUsers = cpuUsageSortedList.slice(10, cpuUsageSortedList.length);
+                const average = arr => arr.reduce((p, c) => p + c, 0) / arr.length;
+                const remainingAvgUsage = Math.floor(average(remainingUsers.map(({ cpuHours }) => cpuHours)));
+                cpuUsageSortedList = [...firstTenUsers, { userId: "Avg of other " + remainingUsers.length + " users", cpuHours: remainingAvgUsage }]
+            }
+
+            const keys = cpuUsageSortedList.map(({ userId }) => userId);
+            const values = cpuUsageSortedList.map(({ cpuHours }) => cpuHours);
+            return this.mapToBarChartData(keys, values, "CPU hours");
+        },
+    },
+    watch: {
+        fromTime() {
+            this.reloadAfterPropsChange();
+        },
+        toTime() {
+            this.reloadAfterPropsChange();
+        }
+    },
+    created() {
+        this.loadAllUserProfiles();
+        this.loadCpuUsages();
+        this.loadStatistics();
+    },
+    methods: {
+        reloadAfterPropsChange() {
+            if(this.fromTime && this.toTime){
+                this.loadCpuUsages();
+                this.loadStatistics();
+            } 
+        },
+        loadAllUserProfiles() {
+            services.UserProfileService.list().then((userProfiles) => {
+                this.userProfiles = userProfiles;
+                this.countOfAllUsers = this.userProfiles.length;
+                this.userProfiles.forEach(({ email }) => {
+                    if (email) this.allUserEmailList.push(email);
+                });
+            });
+        },
+        loadStatistics() {
+            const requestData = {
+                fromTime: this.fromTime.toJSON(),
+                toTime: this.toTime.toJSON(),
+            };
+            return services.ExperimentStatisticsService.get(requestData).then(
+                (stats) => {
+                    let results = stats ? stats.results : {};
+                    const allExperiments = "allExperiments" in results ? results["allExperiments"] : [];
+                    const userWithAtLeastSingleJobSet = new Set();
+                    allExperiments.forEach(({ userName }) => {
+                        const userEmail = this.userProfiles.find(({ userId }) => userId === userName)?.email;
+                        if (userEmail) userWithAtLeastSingleJobSet.add(userEmail);
+                    });
+
+                    this.userWithAtleastSingleJobEmailList = Array.from(userWithAtLeastSingleJobSet);
+                    this.countOfUsersWithAtLeastSingleJob = this.userWithAtleastSingleJobEmailList.length;
+                }
+            );
+        },
+        loadCpuUsages() {
+            const requestData = {
+                fromTime: this.fromTime.toJSON(),
+                toTime: this.toTime.toJSON(),
+            };
+            services.CpuUsageService.get(requestData).then(
+                (cpuUsages) => {
+                    this.cpuUsages = cpuUsages;
+                }
+            );
+        },
+        downloadUsersWithAtLeastSingleJobEmailCsv() {
+            this.downloadEmailCsv(this.userWithAtLeastSingleJobEmailList);
+        },
+        downloadAllUserEmailCsv() {
+            this.downloadEmailCsv(this.allUserEmailList);
+        },
+        downloadEmailCsv(emailList) {
+            const csvContent = "data:text/csv;charset=utf-8,"
+                + emailList.join("\n");
+            const encodedUri = encodeURI(csvContent);
+            const link = document.createElement("a");
+            link.setAttribute("href", encodedUri);
+            link.setAttribute("download", "emails.csv");
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        },
+        getMonthNameList() {
+            return ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+            ];
+        },
+        getBackgroundColorListForMonths() {
+            return ['#FF0000', '#FFA500', '#FFFF00', '#008000', '#0000FF', '#4B0082',
+                '#EE82EE', '#FFC0CB', '#800000', '#808080', '#FFFFFF', '#000000'];
+        },
+        mapToBarChartData(keys, values, label) {
+            return {
+                labels: keys,
+                datasets: [
+                    {
+                        label,
+                        data: values,
+                        backgroundColor: '#FFC0CB'
+                    }
+                ]
+            };
+        },
+    }
+};
+</script>
\ No newline at end of file
diff --git a/django_airavata/apps/admin/yarn.lock b/django_airavata/apps/admin/yarn.lock
index 7e2dbc880..4def71183 100644
--- a/django_airavata/apps/admin/yarn.lock
+++ b/django_airavata/apps/admin/yarn.lock
@@ -3723,6 +3723,11 @@ char-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
   integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
 
+chart.js@^3.7.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
+  integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
+
 chokidar@^2.0.2:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -11154,6 +11159,11 @@ vue-async-computed@^3.9.0:
   resolved "https://registry.yarnpkg.com/vue-async-computed/-/vue-async-computed-3.9.0.tgz#af3181c25168bfe9d86d8ffbc7033bf9e484fe84"
   integrity sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==
 
+vue-chartjs@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-4.1.2.tgz#f899ba14f3b80660f8d2c610a015341806dfc437"
+  integrity sha512-QSggYjeFv/L4jFSBQpX8NzrAvX0B+Ha6nDgxkTG8tEXxYOOTwKI4phRLe+B4f+REnkmg7hgPY24R0cixZJyXBg==
+
 vue-datetime@^1.0.0-beta.10:
   version "1.0.0-beta.11"
   resolved "https://registry.yarnpkg.com/vue-datetime/-/vue-datetime-1.0.0-beta.11.tgz#283b5182dabe0ab372e375e9c47acb3b41524ffa"
diff --git a/django_airavata/apps/api/serializers.py b/django_airavata/apps/api/serializers.py
index 1f5f97ae3..4617a93ad 100644
--- a/django_airavata/apps/api/serializers.py
+++ b/django_airavata/apps/api/serializers.py
@@ -44,6 +44,7 @@
     DataReplicaLocationModel
 )
 from airavata.model.experiment.ttypes import (
+    CpuUsage,
     ExperimentModel,
     ExperimentStatistics,
     ExperimentSummaryModel
@@ -1202,6 +1203,9 @@ class ExperimentStatisticsSerializer(
     createdExperiments = BaseExperimentSummarySerializer(many=True)
     runningExperiments = BaseExperimentSummarySerializer(many=True)
 
+class CpuUsageSerializer(thrift_utils.create_serializer_class(CpuUsage)):
+    pass
+
 
 class UnverifiedEmailUserProfile(serializers.Serializer):
     userId = serializers.CharField()
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/index.js b/django_airavata/apps/api/static/django_airavata_api/js/index.js
index 9cb8a6550..4da4019a5 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/index.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/index.js
@@ -118,6 +118,7 @@ const services = {
   ApplicationModuleService: ServiceFactory.service("ApplicationModules"),
   CloudJobSubmissionService,
   ComputeResourceService: ServiceFactory.service("ComputeResources"),
+  CpuUsageService: ServiceFactory.service("CpuUsages"),
   CredentialSummaryService: ServiceFactory.service("CredentialSummaries"),
   DataProductService: ServiceFactory.service("DataProducts"),
   ExperimentArchiveService: ServiceFactory.service("ExperimentArchive"),
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/CpuUsage.js b/django_airavata/apps/api/static/django_airavata_api/js/models/CpuUsage.js
new file mode 100644
index 000000000..83663c943
--- /dev/null
+++ b/django_airavata/apps/api/static/django_airavata_api/js/models/CpuUsage.js
@@ -0,0 +1,14 @@
+import BaseModel from "./BaseModel";
+
+const FIELDS = [
+    "experimentId",
+    "executionId",
+    "userName",
+    "cpuHours",
+];
+
+export default class CpuUsage extends BaseModel {
+    constructor(data = {}) {
+      super(FIELDS, data);
+    }
+  }
\ No newline at end of file
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/service_config.js b/django_airavata/apps/api/static/django_airavata_api/js/service_config.js
index 73d134f5f..3809ea5e4 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/service_config.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/service_config.js
@@ -3,6 +3,7 @@ import ApplicationInterfaceDefinition from "./models/ApplicationInterfaceDefinit
 import ApplicationModule from "./models/ApplicationModule";
 import BatchQueue from "./models/BatchQueue";
 import ComputeResourceDescription from "./models/ComputeResourceDescription";
+import CpuUsage from "./models/CpuUsage";
 import CredentialSummary from "./models/CredentialSummary";
 import DataProduct from "./models/DataProduct";
 import Experiment from "./models/Experiment";
@@ -128,6 +129,23 @@ export default {
     },
     modelClass: ComputeResourceDescription,
   },
+  CpuUsages: {
+    url: "/api/cpu-usages",
+    methods: {
+      get: {
+        url: "/api/cpu-usages",
+        requestType: "get",
+        queryParams: [
+          "fromTime",
+          "toTime",
+          "limit",
+          "offset",
+        ],
+        pagination: true,
+        modelClass: CpuUsage,
+      },
+    },
+  },
   CredentialSummaries: {
     url: "/api/credential-summaries/",
     viewSet: ["list", "retrieve", "delete"],
@@ -317,6 +335,20 @@ export default {
     pagination: true,
     queryParams: ["limit", "offset"],
     modelClass: Group,
+    methods: {
+      getGroupsFilteredByCreationDate: {
+        url: "/api/groups/groups_filtered_by_creation_date",
+        requestType: "get",
+        queryParams: [
+          "fromTime",
+          "toTime",
+          "limit",
+          "offset",
+        ],
+        pagination: true,
+        modelClass: Group
+      },
+    },
   },
   IAMUserProfiles: {
     url: "/api/iam-user-profiles",
diff --git a/django_airavata/apps/api/urls.py b/django_airavata/apps/api/urls.py
index 474ebca1c..0b0ecc0b8 100644
--- a/django_airavata/apps/api/urls.py
+++ b/django_airavata/apps/api/urls.py
@@ -90,6 +90,9 @@
     re_path(r'^experiment-statistics',
             views.ExperimentStatisticsView.as_view(),
             name="experiment-statistics"),
+    re_path(r'^cpu-usages',
+            views.CpuUsageView.as_view(),
+            name="cpu-usage"),
     re_path(r'ack-notifications/<slug:id>/',
             views.AckNotificationViewSet.as_view(), name="ack-notifications"),
     re_path(r'ack-notifications/', views.AckNotificationViewSet.as_view(),
diff --git a/django_airavata/apps/api/views.py b/django_airavata/apps/api/views.py
index b5cc24e5d..aecb93e8c 100644
--- a/django_airavata/apps/api/views.py
+++ b/django_airavata/apps/api/views.py
@@ -139,6 +139,31 @@ def _send_users_added_to_group(self, internal_user_ids, group):
                 user=user_profile,
                 groups=[group],
                 request=self.request)
+     
+    @action(detail=False)
+    def groups_filtered_by_creation_date(self, request):
+        view = self
+        
+        if 'fromTime' in request.GET:
+            from_time = view_utils.convert_utc_iso8601_to_date(
+                request.GET['fromTime']).timestamp() * 1000
+        else:
+            from_time = (datetime.utcnow() -
+                        timedelta(days=7)).timestamp() * 1000
+        from_time = int(from_time)
+        if 'toTime' in request.GET:
+            to_time = view_utils.convert_utc_iso8601_to_date(
+                request.GET['toTime']).timestamp() * 1000
+        else:
+            to_time = datetime.utcnow().timestamp() * 1000
+        to_time = int(to_time)
+        limit = int(request.GET.get('limit', '-1'))
+        offset = int(request.GET.get('offset', '0'))
+        group_manager = view.request.profile_service['group_manager']
+        groups = group_manager.getGroupsFilteredByCreationDate(view.authz_token, from_time, to_time)
+        end = offset + limit if limit > 0 else len(groups)
+        groups = groups[offset:end] if groups else []
+        return Response(groups)
 
 
 class ProjectViewSet(APIBackedViewSet):
@@ -1731,6 +1756,32 @@ def get(self, request, format=None):
         response.data['offset'] = offset
         return response
 
+class CpuUsageView(APIView):
+    serializer_class = serializers.CpuUsageSerializer
+    permission_classes = (IsAuthenticated, IsInAdminsGroupPermission,)
+
+    def get(self, request, format=None):
+        if 'fromTime' in request.GET:
+            from_time = view_utils.convert_utc_iso8601_to_date(
+                request.GET['fromTime']).timestamp() * 1000
+        else:
+            from_time = (datetime.utcnow() -
+                         timedelta(days=7)).timestamp() * 1000
+        from_time = int(from_time)
+        if 'toTime' in request.GET:
+            to_time = view_utils.convert_utc_iso8601_to_date(
+                request.GET['toTime']).timestamp() * 1000
+        else:
+            to_time = datetime.utcnow().timestamp() * 1000
+        to_time = int(to_time)
+        limit = int(request.GET.get('limit', '-1'))
+        offset = int(request.GET.get('offset', '0'))
+        cpu_usages = request.airavata_client.getCpuUsages(
+            request.authz_token, settings.GATEWAY_ID, from_time, to_time)
+        end = offset + limit if limit > 0 else len(cpu_usages)
+        cpu_usages = cpu_usages[offset:end] if cpu_usages else []
+        return Response(cpu_usages)
+
 
 class UnverifiedEmailUserViewSet(mixins.ListModelMixin,
                                  mixins.RetrieveModelMixin,
diff --git a/django_airavata/static/common/js/components/BarChart.vue b/django_airavata/static/common/js/components/BarChart.vue
new file mode 100644
index 000000000..ccd2f310e
--- /dev/null
+++ b/django_airavata/static/common/js/components/BarChart.vue
@@ -0,0 +1,33 @@
+<template>
+    <Bar :chart-data="chartData" />
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs/legacy';
+import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    BarElement, CategoryScale, LinearScale
+} from 'chart.js';
+
+ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    BarElement,
+    CategoryScale,
+    LinearScale
+);
+
+export default {
+    name: 'BarChart',
+    props: {
+        chartData: {
+            required: true,
+        },
+    },
+    components: { Bar },
+}
+</script>
\ No newline at end of file
diff --git a/django_airavata/static/common/js/components/LineChart.vue b/django_airavata/static/common/js/components/LineChart.vue
new file mode 100644
index 000000000..d7880fc17
--- /dev/null
+++ b/django_airavata/static/common/js/components/LineChart.vue
@@ -0,0 +1,38 @@
+<template>
+    <Line :chart-data="chartData" />
+</template>
+
+<script>
+import { Line } from 'vue-chartjs/legacy';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  CategoryScale,
+  PointElement
+} from 'chart.js';
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  CategoryScale,
+  PointElement
+);
+
+export default {
+    name: 'LineChart',
+    props: {
+        chartData: {
+            required: true,
+        },
+    },
+    components: { Line },
+}
+
+</script>
\ No newline at end of file
diff --git a/django_airavata/static/common/js/components/PieChart.vue b/django_airavata/static/common/js/components/PieChart.vue
new file mode 100644
index 000000000..c5b0b7e77
--- /dev/null
+++ b/django_airavata/static/common/js/components/PieChart.vue
@@ -0,0 +1,33 @@
+<template>
+    <Pie :chart-data="chartData" />
+</template>
+
+<script>
+import { Pie } from 'vue-chartjs/legacy';
+import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    CategoryScale
+} from 'chart.js';
+
+ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    CategoryScale
+);
+
+export default {
+    name: 'PieChart',
+    props: {
+        chartData: {
+            required: true,
+        },
+    },
+    components: { Pie },
+}
+</script>
\ No newline at end of file
diff --git a/django_airavata/static/common/js/index.js b/django_airavata/static/common/js/index.js
index 68c9719dd..02d16a1c7 100644
--- a/django_airavata/static/common/js/index.js
+++ b/django_airavata/static/common/js/index.js
@@ -1,6 +1,7 @@
 import ApplicationCard from "./components/ApplicationCard.vue";
 import ApplicationName from "./components/ApplicationName";
 import AutocompleteTextInput from "./components/AutocompleteTextInput.vue";
+import BarChart from "./components/BarChart.vue";
 import ClipboardCopyButton from "./components/ClipboardCopyButton.vue";
 import ClipboardCopyLink from "./components/ClipboardCopyLink.vue";
 import ComputeResourceName from "./components/ComputeResourceName";
@@ -14,8 +15,10 @@ import FavoriteToggle from "./components/FavoriteToggle";
 import GatewayGroupsBadge from "./components/GatewayGroupsBadge";
 import HumanDate from "./components/HumanDate.vue";
 import Linkify from "./components/Linkify.vue";
+import LineChart from "./components/LineChart.vue";
 import MainLayout from "./components/MainLayout.vue";
 import Pager from "./components/Pager.vue";
+import PieChart from "./components/PieChart.vue";
 import ShareButton from "./components/ShareButton.vue";
 import Sidebar from "./components/Sidebar.vue";
 import SidebarFeed from "./components/SidebarFeed.vue";
@@ -46,6 +49,7 @@ const components = {
   ApplicationCard,
   ApplicationName,
   AutocompleteTextInput,
+  BarChart,
   ClipboardCopyButton,
   ClipboardCopyLink,
   ComputeResourceName,
@@ -59,7 +63,9 @@ const components = {
   GatewayGroupsBadge,
   HumanDate,
   Linkify,
+  LineChart,
   MainLayout,
+  PieChart,
   ShareButton,
   Sidebar,
   SidebarFeed,
diff --git a/django_airavata/static/common/package.json b/django_airavata/static/common/package.json
index f6a8925da..952c05e69 100644
--- a/django_airavata/static/common/package.json
+++ b/django_airavata/static/common/package.json
@@ -25,6 +25,7 @@
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.21.2",
     "browserslist": "^4.16.7",
+    "chart.js": "^3.7.0",
     "clipboard": "^2.0.4",
     "core-js": "^3.8.3",
     "django-airavata-api": "link:../../apps/api",
@@ -34,7 +35,8 @@
     "popper.js": "^1.14.6",
     "terser": "^4.1.2",
     "vue": "^2.5.22",
-    "vue-async-computed": "^3.9.0"
+    "vue-async-computed": "^3.9.0",
+    "vue-chartjs": "^4.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
diff --git a/django_airavata/static/common/yarn.lock b/django_airavata/static/common/yarn.lock
index ecc4c4f12..ed41eaa28 100644
--- a/django_airavata/static/common/yarn.lock
+++ b/django_airavata/static/common/yarn.lock
@@ -2553,6 +2553,11 @@ chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chart.js@^3.7.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
+  integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -7983,6 +7988,11 @@ vue-async-computed@^3.9.0:
   resolved "https://registry.yarnpkg.com/vue-async-computed/-/vue-async-computed-3.9.0.tgz#af3181c25168bfe9d86d8ffbc7033bf9e484fe84"
   integrity sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==
 
+vue-chartjs@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-4.1.2.tgz#f899ba14f3b80660f8d2c610a015341806dfc437"
+  integrity sha512-QSggYjeFv/L4jFSBQpX8NzrAvX0B+Ha6nDgxkTG8tEXxYOOTwKI4phRLe+B4f+REnkmg7hgPY24R0cixZJyXBg==
+
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"