diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 22f68ba..4e2fb29 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,7 +22,7 @@ jobs:
     - uses: actions/upload-artifact@v4
       with:
         name: dist
-        path: dist/${{ github.event.repository.name }}
+        path: dist/${{ github.event.repository.name }}/browser
 
   deploy:
     needs: build
diff --git a/src/app/components/usage/actions/actions.component.html b/src/app/components/usage/actions/actions.component.html
index e5373ac..d852053 100644
--- a/src/app/components/usage/actions/actions.component.html
+++ b/src/app/components/usage/actions/actions.component.html
@@ -1,4 +1,4 @@
-<app-table-workflow-usage [data]="data" [currency]="currency"></app-table-workflow-usage>
+<app-table-workflow-usage [groupBy]="groupBy" [data]="data" [currency]="currency"></app-table-workflow-usage>
 <app-chart-line-usage-daily [data]="data" [currency]="currency"></app-chart-line-usage-daily>
 <!-- <app-chart-line-usage-time [data]="data" [currency]="currency"></app-chart-line-usage-time> -->
 <div style="display: flex; flex: 1 1 0px; flex-wrap: wrap; align-items: center; justify-content: center;">
diff --git a/src/app/components/usage/actions/actions.component.ts b/src/app/components/usage/actions/actions.component.ts
index 1ae1579..6857edf 100644
--- a/src/app/components/usage/actions/actions.component.ts
+++ b/src/app/components/usage/actions/actions.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { GroupBy, UsageReportItem, UsageReportService } from 'src/app/usage-report.service';
+
 
 @Component({
     selector: 'app-actions',
@@ -8,8 +9,9 @@ import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.
     standalone: false
 })
 export class ActionsComponent implements OnInit {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
+  @Input() groupBy!: GroupBy;
   totalMinutes: number = 0;
   totalCost: number = 0;
 
diff --git a/src/app/components/usage/actions/charts/chart-bar-top-time/chart-bar-top-time.component.ts b/src/app/components/usage/actions/charts/chart-bar-top-time/chart-bar-top-time.component.ts
index e78f1e1..f9fc44d 100644
--- a/src/app/components/usage/actions/charts/chart-bar-top-time/chart-bar-top-time.component.ts
+++ b/src/app/components/usage/actions/charts/chart-bar-top-time/chart-bar-top-time.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import * as Highcharts from 'highcharts';
 import { ThemingService } from 'src/app/theme.service';
-import { CustomUsageReportLine } from 'src/app/usage-report.service';
+import { UsageReportItem } from 'src/app/usage-report.service';
 
 @Component({
     selector: 'app-chart-bar-top-time',
@@ -10,7 +10,7 @@ import { CustomUsageReportLine } from 'src/app/usage-report.service';
     standalone: false
 })
 export class ChartBarTopTimeComponent implements OnChanges {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
   Highcharts: typeof Highcharts = Highcharts;
   options: Highcharts.Options = {
@@ -70,7 +70,7 @@ export class ChartBarTopTimeComponent implements OnChanges {
           acc.push({ name: line.repositoryName, y: line.value });
         }
         return acc;
-      }, [] as { name: string, y: number }[]).sort((a, b) => b.y - a.y).slice(0, 10)
+      }, [] as { name: string, y: number }[]).sort((a: { name: string, y: number }, b: { name: string, y: number }) => b.y - a.y).slice(0, 10)
     }];
     this.options.xAxis = {
       ...this.options.xAxis,
diff --git a/src/app/components/usage/actions/charts/chart-line-usage-daily/chart-line-usage-daily.component.ts b/src/app/components/usage/actions/charts/chart-line-usage-daily/chart-line-usage-daily.component.ts
index 3cc354b..46ab18e 100644
--- a/src/app/components/usage/actions/charts/chart-line-usage-daily/chart-line-usage-daily.component.ts
+++ b/src/app/components/usage/actions/charts/chart-line-usage-daily/chart-line-usage-daily.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges, ViewChild } from '@angular/core';
 import * as Highcharts from 'highcharts';
 import { ThemingService } from 'src/app/theme.service';
-import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { UsageReportItem, UsageReportService } from 'src/app/usage-report.service';
 
 @Component({
     selector: 'app-chart-line-usage-daily',
@@ -10,7 +10,7 @@ import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.
     standalone: false
 })
 export class ChartLineUsageDailyComponent implements OnChanges {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
   @ViewChild('chart') chartRef!: any;
   Highcharts: typeof Highcharts = Highcharts;
@@ -124,16 +124,16 @@ export class ChartLineUsageDailyComponent implements OnChanges {
     ).sort((a: any, b: any) => {
       return b.total - a.total;
     }).slice(0, 50);
-    (this.options.series as { name: string; data: [number, number][] }[]) = seriesDays.map((series) => {
+    (this.options.series as { name: string; data: [number, number][] }[]) = seriesDays.map((series: { name: string; data: { [key: string]: [number, number][] }, total: number }) => {
       let data: [number, number][] = [];
       if (this.timeType === 'total') {
         data = series.data['total'];
       } else if (this.timeType.startsWith('rolling')) {
         const perDay = Object.keys(series.data).reduce((acc, timeKey) => {
-          acc.push({
-            total: series.data[timeKey].reduce((acc, curr) => acc + curr[1], 0),
+            acc.push({
+            total: series.data[timeKey].reduce((acc: number, curr: [number, number]) => acc + curr[1], 0),
             date: new Date(timeKey)
-          });
+            });
           return acc;
         }, [] as {
           total: number;
@@ -151,7 +151,7 @@ export class ChartLineUsageDailyComponent implements OnChanges {
         data = Object.keys(series.data).reduce((acc, timeKey) => {
           acc.push([
             new Date(series.data[timeKey][0][0]).getTime(),
-            series.data[timeKey].reduce((acc, curr) => acc + curr[1], 0)
+            series.data[timeKey].reduce((acc: number, curr: [number, number]) => acc + curr[1], 0)
           ]);
           return acc;
         }, [] as [number, number][]);
diff --git a/src/app/components/usage/actions/charts/chart-pie-sku/chart-pie-sku.component.ts b/src/app/components/usage/actions/charts/chart-pie-sku/chart-pie-sku.component.ts
index 99587aa..827c265 100644
--- a/src/app/components/usage/actions/charts/chart-pie-sku/chart-pie-sku.component.ts
+++ b/src/app/components/usage/actions/charts/chart-pie-sku/chart-pie-sku.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import * as Highcharts from 'highcharts';
 import { ThemingService } from 'src/app/theme.service';
-import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { UsageReportItem, UsageReportService } from 'src/app/usage-report.service';
 
 @Component({
     selector: 'app-chart-pie-sku',
@@ -10,7 +10,7 @@ import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.
     standalone: false
 })
 export class ChartPieSkuComponent implements OnChanges {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
   Highcharts: typeof Highcharts = Highcharts;
   options: Highcharts.Options = {
@@ -52,14 +52,14 @@ export class ChartPieSkuComponent implements OnChanges {
       name: 'Usage',
       data: this.data.reduce((acc, line) => {
         const formattedSku = this.usageReportService.formatSku(line.sku);
-        const index = acc.findIndex((item) => item[0] === formattedSku);
+        const index = acc.findIndex((item: [string, number]) => item[0] === formattedSku);
         if (index === -1) {
           acc.push([formattedSku, line.value]);
         } else {
           acc[index][1] += line.value;
         }
         return acc;
-      }, [] as [string, number][]).sort((a, b) => b[1] - a[1])
+      }, [] as [string, number][]).sort((a: [string, number], b: [string, number]) => b[1] - a[1])
     }];
     this.options.title = {
       text: `${this.currency === 'minutes' ? 'Usage' : 'Cost'} by runner type`
diff --git a/src/app/components/usage/actions/charts/chart-pie-user/chart-pie-user.component.ts b/src/app/components/usage/actions/charts/chart-pie-user/chart-pie-user.component.ts
index 57c3c04..f1dbb18 100644
--- a/src/app/components/usage/actions/charts/chart-pie-user/chart-pie-user.component.ts
+++ b/src/app/components/usage/actions/charts/chart-pie-user/chart-pie-user.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import * as Highcharts from 'highcharts';
 import { ThemingService } from 'src/app/theme.service';
-import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { UsageReportItem, UsageReportService } from 'src/app/usage-report.service';
 
 @Component({
     selector: 'app-chart-pie-user',
@@ -10,7 +10,7 @@ import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.
     standalone: false
 })
 export class ChartPieUserComponent implements OnChanges {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
   Highcharts: typeof Highcharts = Highcharts;
   options: Highcharts.Options = {
diff --git a/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.html b/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.html
index 7f7130d..aa60c8a 100644
--- a/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.html
+++ b/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.html
@@ -2,11 +2,14 @@
   <div class="table-control">
     <mat-form-field>
       <mat-label>Grouping</mat-label>
-      <mat-select  [(value)]="tableType" (selectionChange)="tableType = $event.value; ngOnChanges()">
+      <mat-select  [(value)]="groupBy" (selectionChange)="groupBy = $event.value; ngOnChanges()">
         <mat-option value="sku">Runner</mat-option>
         <mat-option value="repo">Repo</mat-option>
         <mat-option value="workflow">Workflow</mat-option>
         <mat-option value="user">User</mat-option>
+        <mat-option value="costCenter">Cost Center</mat-option>
+        <mat-option value="organization">Organization</mat-option>
+        <mat-option value="date">Date</mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -34,7 +37,12 @@
           {{column.header}}
         </th>
         <td mat-cell *matCellDef="let row">
-          {{column.cell(row)}}
+          <ng-container *ngIf="column.link; else noLink">
+            <a [href]="column.link(row)">{{column.cell(row)}}</a>
+          </ng-container>
+          <ng-template #noLink>
+            {{column.cell(row)}}
+          </ng-template>
           <!-- <ng-container *ngIf="column.icon">
             <mat-icon [matTooltip]="column.tooltip ? column.tooltip(row) : ''" inline="true">{{ column.icon(row)
               }}</mat-icon>
diff --git a/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.ts b/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.ts
index 62ad84c..5048b1a 100644
--- a/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.ts
+++ b/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.ts
@@ -2,25 +2,29 @@ import { AfterViewInit, Component, Input, OnChanges, ViewChild } from '@angular/
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
-import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { GroupBy, UsageReportItem, UsageReportService } from 'src/app/usage-report.service';
 
-interface WorkflowUsageItem {
-  workflow: string;
+export interface WorkflowUsageItem {
+  workflowName: string;
+  workflowPath: string;
   avgTime: number;
   avgCost: number;
   runs: number;
-  repo: string;
+  repositoryName: string;
   total: number;
   cost: number;
   pricePerUnit: number;
   sku: string;
   username: string;
+  organization: string;
+  costCenterName: string;
+  date?: Date;
 }
 
 interface RepoUsageItem {
   avgTime: number;
   avgCost: number;
-  repo: string;
+  repositoryName: string;
   runs: number;
   total: number;
   cost: number;
@@ -41,6 +45,7 @@ interface UsageColumn {
   columnDef: string;
   header: string;
   cell: (element: any) => any;
+  link?: (element: any) => string;
   footer?: () => any;
   tooltip?: (element: any) => any;
   icon?: (element: any) => string;
@@ -57,32 +62,43 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
   columns = [] as UsageColumn[];
   monthColumns = [] as UsageColumn[];
   displayedColumns = this.columns.map(c => c.columnDef);
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
+  @Input() groupBy!: GroupBy;
   dataSource: MatTableDataSource<WorkflowUsageItem | RepoUsageItem | SkuUsageItem> = new MatTableDataSource<any>(); // Initialize the dataSource property
-  tableType: 'workflow' | 'repo' | 'sku' | 'user' = 'sku';
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
 
   constructor(
     private usageReportService: UsageReportService,
-  ) { }
+  ) {
+    this.usageReportService.groupBy
+  }
 
   ngOnChanges() {
+    this.groupBy = this.usageReportService.groupBy;
     this.initializeColumns();
     let usage: WorkflowUsageItem[] | RepoUsageItem[] | SkuUsageItem[] = [];
     let usageItems: WorkflowUsageItem[] = (usage as WorkflowUsageItem[]);
+    console.log('Data received:', this.data);
+    if (!this.data) return;
     usageItems = this.data.reduce((acc, line) => {
       const item = acc.find(a => {
-        if (this.tableType === 'workflow') {
-          return a.workflow === line.workflowName
-        } else if (this.tableType === 'repo') {
-          return a.repo === line.repositoryName;
-        } else if (this.tableType === 'sku') {
+        if (this.groupBy === 'workflowName') {
+          return a.workflowName === line.workflowName
+        } else if (this.groupBy === 'repositoryName') {
+          return a.repositoryName === line.repositoryName;
+        } else if (this.groupBy === 'sku') {
           return a.sku === this.usageReportService.formatSku(line.sku);
-        } else if (this.tableType === 'user') {
+        } else if (this.groupBy === 'username') {
           return a.username === line.username;
+        } else if (this.groupBy === 'costCenterName') {
+          return a.costCenterName === line.costCenterName;
+        } else if (this.groupBy === 'organization') {
+          return a.organization === line.organization;
+        } else if (this.groupBy === 'date') {
+          return a.date?.toDateString() === line.date.toDateString();
         }
         return false
       });
@@ -110,16 +126,6 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
             column.tooltip = (workflowItem: WorkflowUsageItem) => {
               return (workflowItem as any)[month + 'PercentChange']?.toFixed(2) + '%';
             };
-            column.icon = (workflowItem: WorkflowUsageItem) => {
-              const percentageChanged = (workflowItem as any)[month + 'PercentChange'];
-              if (percentageChanged > 0) {
-                return 'trending_up';
-              } else if (percentageChanged < 0) {
-                return 'trending_down';
-              } else {
-                return 'trending_flat';
-              }
-            };
           }
           this.columns.push(column);
           this.monthColumns.push(column);
@@ -129,8 +135,12 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
         item.runs++;
       } else {
         acc.push({
-          workflow: line.workflowName,
-          repo: line.repositoryName,
+          workflowName: line.workflowName,
+          workflowPath: line.workflowPath,
+          username: line.username,
+          organization: line.organization,
+          costCenterName: line.costCenterName,
+          repositoryName: line.repositoryName,
           total: line.quantity,
           cost: line.quantity * line.pricePerUnit,
           runs: 1,
@@ -139,13 +149,13 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
           avgTime: line.value,
           [month]: line.value,
           sku: this.usageReportService.formatSku(line.sku),
-          username: line.username,
+          date: line.date,
         });
       }
       return acc;
     }, [] as WorkflowUsageItem[]);
 
-    usageItems.forEach((item) => {
+    this.data.forEach((item) => {
       this.monthColumns.forEach((column: UsageColumn) => {
         const month = column.columnDef;
         if (!(item as any)[month]) {
@@ -156,9 +166,6 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
         const percentageChanged = this.calculatePercentageChange(lastMonthValue, (item as any)[month]);
         (item as any)[month + 'PercentChange'] = percentageChanged;
       });
-
-      item.avgTime = item.total / item.runs;
-      item.avgCost = item.cost / item.runs;
     });
     usage = usageItems;
     this.columns = this.columns.sort((a, b) => (!a.date || !b.date) ? 0 : a.date.getTime() - b.date.getTime()); 
@@ -173,7 +180,7 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
     this.dataSource.sortData = (data: (WorkflowUsageItem | RepoUsageItem | SkuUsageItem)[], sort: MatSort) => {
       switch (sort.active) {
         case 'sku':
-          return data.sort((a, b) => {          
+          return data.sort((a, b) => {
             const orderA = this.usageReportService.skuOrder.indexOf(a.sku);
             const orderB = this.usageReportService.skuOrder.indexOf(b.sku);
             return sort.direction === 'asc' ? orderA - orderB : orderB - orderA;
@@ -195,18 +202,21 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
 
   initializeColumns() {
     let columns: UsageColumn[] = [];
-    if (this.tableType === 'workflow') {
+    console.log('Initializing columns with groupBy:', this.groupBy);
+    if (this.groupBy === 'workflowName') {
       columns = [
         {
-          columnDef: 'workflow',
+          columnDef: 'workflowName',
           header: 'Workflow',
-          cell: (workflowItem: WorkflowUsageItem) => `${workflowItem.workflow}`,
+          cell: (workflowItem: WorkflowUsageItem) => `${workflowItem.workflowName}`,
+          link: (workflowItem: WorkflowUsageItem) => `https://github.com/${workflowItem.organization}/${workflowItem.repositoryName}/actions/workflows/${workflowItem.workflowPath}`,
           sticky: true,
         },
         {
-          columnDef: 'repo',
+          columnDef: 'repositoryName',
           header: 'Repository',
-          cell: (workflowItem: WorkflowUsageItem) => `${workflowItem.repo}`,
+          cell: (workflowItem: WorkflowUsageItem) => `${workflowItem.repositoryName}`,
+          link: (workflowItem: WorkflowUsageItem) => `https://github.com/${workflowItem.organization}/${workflowItem.repositoryName}`,
         },
         {
           columnDef: 'runner',
@@ -214,16 +224,17 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
           cell: (workflowItem: WorkflowUsageItem) => `${workflowItem.sku}`,
         },
       ];
-    } else if (this.tableType === 'repo') {
+    } else if (this.groupBy === 'repositoryName') {
       columns = [
         {
-          columnDef: 'repo',
+          columnDef: 'repositoryName',
           header: 'Source repository',
-          cell: (workflowItem: WorkflowUsageItem) => `${workflowItem.repo}`,
+          cell: (workflowItem: WorkflowUsageItem) => `${workflowItem.repositoryName}`,
+          link: (workflowItem: WorkflowUsageItem) => `https://github.com/${workflowItem.organization}/${workflowItem.repositoryName}`,
           sticky: true,
         },
       ];
-    } else if (this.tableType === 'sku') {
+    } else if (this.groupBy === 'sku') {
       columns = [
         {
           columnDef: 'sku',
@@ -232,16 +243,47 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
           sticky: true,
         },
       ];
-    } else if (this.tableType === 'user') {
+    } else if (this.groupBy === 'username') {
       columns = [
         {
           columnDef: 'username',
           header: 'User',
           cell: (workflowItem: WorkflowUsageItem) => workflowItem.username,
+          link: (workflowItem: WorkflowUsageItem) => `https://github.com/${workflowItem.username}`,
+          sticky: true,
+        },
+      ];
+    } else if (this.groupBy === 'costCenterName') {
+      columns = [
+        {
+          columnDef: 'costCenterName',
+          header: 'Cost Center',
+          cell: (workflowItem: WorkflowUsageItem) => workflowItem.costCenterName,
           sticky: true,
         },
       ];
+    } else if (this.groupBy === 'organization') {
+      columns = [
+        {
+          columnDef: 'organization',
+          header: 'Organization',
+          cell: (workflowItem: WorkflowUsageItem) => workflowItem.organization,
+          link: (workflowItem: WorkflowUsageItem) => `https://github.com/${workflowItem.organization}`,
+          sticky: true,
+        },
+      ];
+    } else if (this.groupBy === 'date') {
+      columns = [
+        {
+          columnDef: 'date',
+          header: 'Date',
+          cell: (workflowItem: WorkflowUsageItem) => workflowItem.date ? workflowItem.date.toLocaleDateString() : '',
+          sticky: true,
+          date: new Date(),
+        },
+      ];
     }
+
     columns.push({
       columnDef: 'runs',
       header: 'Runs',
diff --git a/src/app/components/usage/codespaces/codespaces.component.ts b/src/app/components/usage/codespaces/codespaces.component.ts
index 583b24e..7ab47e7 100644
--- a/src/app/components/usage/codespaces/codespaces.component.ts
+++ b/src/app/components/usage/codespaces/codespaces.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { CustomUsageReportLine } from 'src/app/usage-report.service';
+import { UsageReportItem } from 'src/app/usage-report.service';
 
 @Component({
     selector: 'app-codespaces',
@@ -8,6 +8,6 @@ import { CustomUsageReportLine } from 'src/app/usage-report.service';
     standalone: false
 })
 export class CodespacesComponent {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
 }
diff --git a/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.html b/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.html
index ea41fad..b2296c0 100644
--- a/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.html
+++ b/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.html
@@ -22,7 +22,12 @@
           {{column.header}}
         </th>
         <td mat-cell *matCellDef="let row">
-          {{column.cell(row)}}
+          <ng-container *ngIf="column.link; else noLink">
+            <a [href]="column.link(row)">{{column.cell(row)}}</a>
+          </ng-container>
+          <ng-template #noLink>
+            {{column.cell(row)}}
+          </ng-template>
         </td>
         <td mat-footer-cell *matFooterCellDef> <b>{{ column.footer ? column.footer() : '' }}</b> </td>
       </ng-container>
diff --git a/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.ts b/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.ts
index df43cf1..f69b054 100644
--- a/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.ts
+++ b/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.ts
@@ -2,12 +2,13 @@ import { AfterViewInit, Component, Input, OnChanges, ViewChild } from '@angular/
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
-import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { UsageReportItem, UsageReportService } from 'src/app/usage-report.service';
 
 interface UsageColumn {
   columnDef: string;
   header: string;
   cell: (element: any) => any;
+  link?: (element: any) => string;
   footer?: () => any;
   sticky?: boolean;
 }
@@ -34,7 +35,7 @@ interface CodespacesUsageItem {
 export class TableCodespacesUsageComponent implements OnChanges, AfterViewInit {
   columns = [] as UsageColumn[];
   displayedColumns = this.columns.map(c => c.columnDef);
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
   dataSource: MatTableDataSource<CodespacesUsageItem> = new MatTableDataSource<any>(); // Initialize the dataSource property
   tableType: 'sku' | 'repo' | 'user' = 'sku';
@@ -51,7 +52,7 @@ export class TableCodespacesUsageComponent implements OnChanges, AfterViewInit {
     let usage: CodespacesUsageItem[] = [];
     let usageItems: CodespacesUsageItem[] = (usage as CodespacesUsageItem[]);
     usageItems = this.data.reduce((acc, line) => {
-      const item = acc.find(a => {
+      const item = acc.find((a: any) => {
         if (this.tableType === 'sku') {
           return a.sku === line.sku;
         } else if (this.tableType === 'repo') {
diff --git a/src/app/components/usage/copilot/copilot.component.ts b/src/app/components/usage/copilot/copilot.component.ts
index bec29b5..5d5f774 100644
--- a/src/app/components/usage/copilot/copilot.component.ts
+++ b/src/app/components/usage/copilot/copilot.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { CustomUsageReportLine } from 'src/app/usage-report.service';
+import { UsageReportItem } from 'src/app/usage-report.service';
 
 @Component({
     selector: 'app-copilot',
@@ -8,6 +8,6 @@ import { CustomUsageReportLine } from 'src/app/usage-report.service';
     standalone: false
 })
 export class CopilotComponent {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
 }
diff --git a/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.html b/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.html
index 535df22..cc60415 100644
--- a/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.html
+++ b/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.html
@@ -1,5 +1,13 @@
 <div class="table-responsive">
   <div class="table-control">
+    <mat-form-field>
+      <mat-label>Grouping</mat-label>
+      <mat-select  [(value)]="tableType" (selectionChange)="tableType = $event.value; ngOnChanges()">
+        <mat-option value="username">User</mat-option>
+        <mat-option value="costCenter">Cost Center</mat-option>
+        <mat-option value="organization">Organization</mat-option>
+      </mat-select>
+    </mat-form-field>
     <mat-form-field [class.hide]="dataSource.data.length <= 1">
       <mat-label>Filter</mat-label>
       <input matInput (keyup)="applyFilter($event)" placeholder="Ex. .github/workflows/build.yml	" #input>
@@ -14,7 +22,12 @@
           {{column.header}}
         </th>
         <td mat-cell *matCellDef="let row">
-          {{column.cell(row)}}
+          <ng-container *ngIf="column.link; else noLink">
+            <a [href]="column.link(row)">{{column.cell(row)}}</a>
+          </ng-container>
+          <ng-template #noLink>
+            {{column.cell(row)}}
+          </ng-template>
         </td>
         <td mat-footer-cell *matFooterCellDef> <b>{{ column.footer ? column.footer() : '' }}</b> </td>
       </ng-container>
diff --git a/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.ts b/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.ts
index 8427377..bb39174 100644
--- a/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.ts
+++ b/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.ts
@@ -2,12 +2,13 @@ import { AfterViewInit, Component, Input, OnChanges, ViewChild, ChangeDetectorRe
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
-import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { UsageReportItem, UsageReportService } from 'src/app/usage-report.service';
 
 interface UsageColumn {
   columnDef: string;
   header: string;
   cell: (element: any) => any;
+  link?: (element: any) => string;
   footer?: () => any;
   sticky?: boolean;
 }
@@ -17,23 +18,26 @@ interface CopilotUsageItem {
   total: number;
   cost: number;
   pricePerUnit: number;
-  owner: string;
+  costCenter?: string;
+  organization?: string;
+  username?: string;
   sticky?: boolean;
 }
 
 @Component({
-    selector: 'app-table-copilot-usage',
-    templateUrl: './table-copilot-usage.component.html',
-    styleUrl: './table-copilot-usage.component.scss',
-    standalone: false
+  selector: 'app-table-copilot-usage',
+  templateUrl: './table-copilot-usage.component.html',
+  styleUrl: './table-copilot-usage.component.scss',
+  standalone: false
 })
 export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
   columns = [] as UsageColumn[];
   displayedColumns: string[] = [];
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
+  @Input() groupBy!: 'costCenter' | 'organization' | 'username' | 'workflow' | 'repo' | 'sku' | 'user' | 'date';
   dataSource: MatTableDataSource<CopilotUsageItem> = new MatTableDataSource<any>(); // Initialize the dataSource property
-  tableType = 'owner';
+  tableType: 'organization' | 'costCenter' | 'username' = 'organization';
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
@@ -41,7 +45,7 @@ export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
   constructor(
     private usageReportService: UsageReportService,
     private cdr: ChangeDetectorRef
-  ) { 
+  ) {
     this.initializeColumns();
   }
 
@@ -49,14 +53,18 @@ export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
     if (!this.data) {
       return; // Avoid processing if data is not available yet
     }
-    
+
     this.initializeColumns();
     let usage: CopilotUsageItem[] = [];
     let usageItems: CopilotUsageItem[] = (usage as CopilotUsageItem[]);
     usageItems = this.data.reduce((acc, line) => {
-      const item = acc.find(a => {
-        if (this.tableType === 'owner') {
-          return a.owner === line.organization;
+      const item = acc.find((a: any) => {
+        if (this.groupBy === 'username') {
+          return a.username === line.username;
+        } else if (this.groupBy === 'costCenter') {
+          return a.costCenter === line.costCenterName;
+        } else if (this.groupBy === 'organization') {
+          return a.organization === line.organization;
         }
         return false;
       });
@@ -85,7 +93,9 @@ export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
         item.runs++;
       } else {
         acc.push({
-          owner: line.organization,
+          username: line.username,
+          organization: line.organization,
+          costCenter: line.costCenterName,
           total: line.quantity,
           cost: line.quantity * line.pricePerUnit,
           runs: 1,
@@ -104,13 +114,13 @@ export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
       });
     });
     usage = usageItems;
-    
+
     // Update displayedColumns first
     this.displayedColumns = this.columns.map(c => c.columnDef);
-    
+
     // Then update the data source
     this.dataSource = new MatTableDataSource<CopilotUsageItem>(usage);
-    
+
     // Apply sort and pagination immediately, without setTimeout
     if (this.sort) {
       this.dataSource.sort = this.sort;
@@ -118,7 +128,7 @@ export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
     if (this.paginator) {
       this.dataSource.paginator = this.paginator;
     }
-    
+
     // Mark for check to ensure proper change detection
     this.cdr.markForCheck();
   }
@@ -144,44 +154,63 @@ export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
 
   initializeColumns() {
     let columns: UsageColumn[] = [];
-    if (this.tableType === 'owner') {
+    if (this.tableType === 'organization') {
       columns = [
         {
-          columnDef: 'owner',
-          header: 'Owner',
-          cell: (workflowItem: CopilotUsageItem) => `${workflowItem.owner}`,
+          columnDef: 'organization',
+          header: 'Organization',
+          cell: (workflowItem: CopilotUsageItem) => `${workflowItem.organization}`,
+          sticky: true
+        }
+      ];
+    } else if (this.tableType === 'costCenter') {
+      columns = [
+        {
+          columnDef: 'costCenter',
+          header: 'Cost Center',
+          cell: (workflowItem: CopilotUsageItem) => `${workflowItem.costCenter}`,
+          sticky: true
+        }
+      ];
+    } else if (this.tableType === 'username') {
+      columns = [
+        {
+          columnDef: 'username',
+          header: 'Username',
+          cell: (workflowItem: CopilotUsageItem) => `${workflowItem.username}`,
+          link: (workflowItem: CopilotUsageItem) => `https://github.com/${workflowItem.username}`,
           sticky: true
         }
       ];
-      if (this.currency === 'minutes') {
-        columns.push({
-          columnDef: 'total',
-          header: 'Total seats',
-          cell: (workflowItem: CopilotUsageItem) => decimalPipe.transform(Math.floor(workflowItem.total)),
-          footer: () => {
-            if (!this.data) return '';
-            return decimalPipe.transform(this.data.reduce((acc, line) => acc += line.value, 0));
-          }
-        });
-      } else if (this.currency === 'cost') {
-        columns.push({
-          columnDef: 'cost',
-          header: 'Total cost',
-          cell: (workflowItem: CopilotUsageItem) => currencyPipe.transform(workflowItem.cost),
-          footer: () => {
-            if (!this.data) return '';
-            return currencyPipe.transform(this.data.reduce((acc, line) => acc += line.value, 0));
-          }
-        });
-      }
     }
-    
+    if (this.currency === 'minutes') {
+      columns.push({
+        columnDef: 'total',
+        header: 'Total seats',
+        cell: (workflowItem: CopilotUsageItem) => decimalPipe.transform(Math.floor(workflowItem.total)),
+        footer: () => {
+          if (!this.data) return '';
+          return decimalPipe.transform(this.data.reduce((acc, line) => acc += line.value, 0));
+        }
+      });
+    } else if (this.currency === 'cost') {
+      columns.push({
+        columnDef: 'cost',
+        header: 'Total cost',
+        cell: (workflowItem: CopilotUsageItem) => currencyPipe.transform(workflowItem.cost),
+        footer: () => {
+          if (!this.data) return '';
+          return currencyPipe.transform(this.data.reduce((acc, line) => acc += line.value, 0));
+        }
+      });
+    }
+
     // Important: Clear columns before setting new ones
     this.columns = [];
-    
+
     // Set new columns
     this.columns = columns;
-    
+
     // Update displayedColumns immediately after updating columns
     this.displayedColumns = this.columns.map(c => c.columnDef);
   }
@@ -191,8 +220,8 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { CurrencyPipe, DecimalPipe } from '@angular/common';
 
 @Pipe({
-    name: 'duration',
-    standalone: false
+  name: 'duration',
+  standalone: false
 })
 export class DurationPipe implements PipeTransform {
   transform(minutes: number): string {
diff --git a/src/app/components/usage/shared-storage/charts/line-usage-time/line-usage-time.component.ts b/src/app/components/usage/shared-storage/charts/line-usage-time/line-usage-time.component.ts
index 57fd56b..50a5e2f 100644
--- a/src/app/components/usage/shared-storage/charts/line-usage-time/line-usage-time.component.ts
+++ b/src/app/components/usage/shared-storage/charts/line-usage-time/line-usage-time.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges, ViewChild } from '@angular/core';
 import * as Highcharts from 'highcharts';
 import { ThemingService } from 'src/app/theme.service';
-import { CustomUsageReportLine } from 'src/app/usage-report.service';
+import { UsageReportItem } from 'src/app/usage-report.service';
 
 @Component({
     selector: 'app-line-usage-time',
@@ -10,7 +10,7 @@ import { CustomUsageReportLine } from 'src/app/usage-report.service';
     standalone: false
 })
 export class LineUsageTimeComponent implements OnChanges {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
   Highcharts: typeof Highcharts = Highcharts;
   @ViewChild('chart') chartRef!: any;
@@ -80,8 +80,8 @@ export class LineUsageTimeComponent implements OnChanges {
       (this.options.series as any) = this.data.reduce(
         (acc, line) => {
           gbs += line.value;
-          if (acc.find(a => a.name === line.repositoryName)) {
-            const existing = acc.find(a => a.name === line.repositoryName);
+          if (acc.find((a: any) => a.name === line.repositoryName)) {
+            const existing = acc.find((a: any) => a.name === line.repositoryName);
             if (existing && line.value !== 0) {
               existing.data.push([line.date.getTime(), line.value]);
             }
diff --git a/src/app/components/usage/shared-storage/shared-storage.component.ts b/src/app/components/usage/shared-storage/shared-storage.component.ts
index efea970..558053a 100644
--- a/src/app/components/usage/shared-storage/shared-storage.component.ts
+++ b/src/app/components/usage/shared-storage/shared-storage.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { CustomUsageReportLine } from 'src/app/usage-report.service';
+import { UsageReportItem } from 'src/app/usage-report.service';
 
 @Component({
     selector: 'app-shared-storage',
@@ -8,6 +8,6 @@ import { CustomUsageReportLine } from 'src/app/usage-report.service';
     standalone: false
 })
 export class SharedStorageComponent {
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
 }
diff --git a/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.html b/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.html
index 9cb3f8f..647635f 100644
--- a/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.html
+++ b/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.html
@@ -11,7 +11,12 @@
           {{column.header}}
         </th>
         <td mat-cell *matCellDef="let row">
-          {{column.cell(row)}}
+          <ng-container *ngIf="column.link; else noLink">
+            <a [href]="column.link(row)">{{column.cell(row)}}</a>
+          </ng-container>
+          <ng-template #noLink>
+            {{column.cell(row)}}
+          </ng-template>
         </td>
         <td mat-footer-cell *matFooterCellDef> <b>{{ column.footer ? column.footer() : '' }}</b> </td>
       </ng-container>
diff --git a/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.ts b/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.ts
index c0422e2..75cd380 100644
--- a/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.ts
+++ b/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, Pipe, PipeTransform, ViewChild, OnChanges, AfterViewI
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
-import { CustomUsageReportLine } from 'src/app/usage-report.service';
 import { CurrencyPipe } from '@angular/common';
+import { UsageReportItem } from 'src/app/usage-report.service';
 
 type SharedStorageUsageItem = {
   repo: string;
@@ -27,11 +27,12 @@ export class TableSharedStorageComponent implements OnChanges, AfterViewInit {
     columnDef: string;
     header: string;
     cell: (element: SharedStorageUsageItem) => any;
+    link?: (element: SharedStorageUsageItem) => string;
     footer?: () => any;
     sticky?: boolean;
   }[] = [];
   displayedColumns: string[] = [];
-  @Input() data!: CustomUsageReportLine[];
+  @Input() data!: UsageReportItem[];
   @Input() currency!: string;
   dataSource: MatTableDataSource<SharedStorageUsageItem> = new MatTableDataSource<any>();
 
@@ -50,7 +51,7 @@ export class TableSharedStorageComponent implements OnChanges, AfterViewInit {
     this.initializeColumns();
     
     const workflowUsage = this.data.reduce((acc, line) => {
-      const workflowEntry = acc.find(a => a.repo === line.repositoryName);
+      const workflowEntry = acc.find((a: any) => a.repo === line.repositoryName);
       const date = line.date;
       const month: string = date.toLocaleString('default', { month: 'short' });
       const cost = line.quantity * line.pricePerUnit;
@@ -135,6 +136,7 @@ export class TableSharedStorageComponent implements OnChanges, AfterViewInit {
       columnDef: string,
       header: string,
       cell: (sharedStorageItem: SharedStorageUsageItem) => any,
+      link?: (sharedStorageItem: SharedStorageUsageItem) => string,
       footer?: () => any,
       sticky?: boolean
     }[] = [
@@ -142,6 +144,7 @@ export class TableSharedStorageComponent implements OnChanges, AfterViewInit {
           columnDef: 'repo',
           header: 'Repository',
           cell: (sharedStorageItem: any) => sharedStorageItem.repo,
+          link: (sharedStorageItem: any) => `https://github.com/${sharedStorageItem.organization}/${sharedStorageItem.repo}`,
           footer: () => 'Total',
           sticky: true
         },
diff --git a/src/app/components/usage/usage.component.html b/src/app/components/usage/usage.component.html
index 009222b..54c401b 100644
--- a/src/app/components/usage/usage.component.html
+++ b/src/app/components/usage/usage.component.html
@@ -15,6 +15,24 @@ <h1 class="mat-headline-2" style="user-select: none; font-weight: 800; text-alig
 
 <div id="usage-report" *ngIf="usage">
   <form class="mat-app-background">
+    <mat-form-field>
+      <mat-label>Grouping</mat-label>
+      <mat-select [formControl]="groupByControl">
+        <mat-option value="organization">Organization</mat-option>
+        <mat-option value="username">User</mat-option>
+        <mat-option value="costCenter">Cost Center</mat-option>
+        <ng-container *ngIf="tabSelected === 'shared-storage'">
+          <mat-option value="repo">Repo</mat-option>
+          <mat-option value="date">Date</mat-option>
+        </ng-container>
+        <ng-container *ngIf="tabSelected === 'actions'">
+          <mat-option value="sku">Runner</mat-option>
+          <mat-option value="repo">Repo</mat-option>
+          <mat-option value="workflow">Workflow</mat-option>
+          <mat-option value="date">Date</mat-option>
+        </ng-container>
+      </mat-select>
+    </mat-form-field>
     <mat-form-field appearance="fill">
       <mat-label>Choose a date range</mat-label>
       <mat-date-range-input [rangePicker]="picker" [formGroup]="range" [min]="minDate" [max]="maxDate">
@@ -58,17 +76,17 @@ <h1 class="mat-headline-2" style="user-select: none; font-weight: 800; text-alig
     </button>
   </form>
   <mat-tab-group (selectedTabChange)="tabChanged($event)">
-    <mat-tab *ngIf="this.usageLines.actions.length > 0">
+    <mat-tab *ngIf="(this.usageItems?.actions?.length || 0) > 0">
       <ng-template mat-tab-label>
         <mat-icon class="tab-icon">commit</mat-icon>
         Actions
       </ng-template>
       <ng-template matTabContent>
         <div style="margin-top: 25px;"></div>
-        <app-actions [data]="this.usageLines.actions" [currency]="currency"></app-actions>
+        <app-actions [data]="this.usageItems.actions" [currency]="currency"></app-actions>
       </ng-template>
     </mat-tab>
-    <mat-tab *ngIf="this.usageLines.sharedStorage.length > 0">
+    <!-- <mat-tab *ngIf="this.usageLines.sharedStorage.length > 0">
       <ng-template mat-tab-label>
         <mat-icon class="tab-icon">backup</mat-icon>
         Shared Storage
@@ -97,7 +115,7 @@ <h1 class="mat-headline-2" style="user-select: none; font-weight: 800; text-alig
         <div style="margin-top: 25px;"></div>
         <app-copilot [data]="this.usageLines.copilot" [currency]="currency"></app-copilot>
       </ng-template>
-    </mat-tab>
+    </mat-tab> -->
   </mat-tab-group>
 </div>
 
@@ -125,4 +143,4 @@ <h1 class="mat-headline-2" style="user-select: none; font-weight: 800; text-alig
       </button>
     </a>
   </div>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/components/usage/usage.component.ts b/src/app/components/usage/usage.component.ts
index 8c85a14..951af06 100644
--- a/src/app/components/usage/usage.component.ts
+++ b/src/app/components/usage/usage.component.ts
@@ -2,7 +2,8 @@ import { OnInit, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { UsageReport } from 'github-usage-report/src/types';
 import { Observable, Subscription, debounceTime, map, startWith } from 'rxjs';
-import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { UsageReportItem, UsageReportService } from 'src/app/usage-report.service';
+import { UsageReportLine } from 'github-usage-report';
 import { DialogBillingNavigateComponent } from './dialog-billing-navigate';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -15,15 +16,22 @@ import { MatDialog } from '@angular/material/dialog';
 export class UsageComponent implements OnInit, OnDestroy {
   usage!: UsageReport;
   usageLines = {} as {
-    sharedStorage: CustomUsageReportLine[],
-    codespaces: CustomUsageReportLine[],
-    copilot: CustomUsageReportLine[],
-    actions: CustomUsageReportLine[],
+    sharedStorage: UsageReportLine[],
+    codespaces: UsageReportLine[],
+    copilot: UsageReportLine[],
+    actions: UsageReportLine[],
+  };
+  usageItems = {} as {
+    sharedStorage: UsageReportItem[],
+    codespaces: UsageReportItem[],
+    copilot: UsageReportItem[],
+    actions: UsageReportItem[],
   };
   range = new FormGroup({
     start: new FormControl(),
     end: new FormControl()
   });
+  groupByControl = new FormControl('groupBy');
   minDate!: Date;
   maxDate!: Date;
   workflows: string[] = [];
@@ -53,6 +61,9 @@ export class UsageComponent implements OnInit, OnDestroy {
             endDate: value.end,
           });
         }
+      }),
+      this.groupByControl.valueChanges.subscribe(value => {
+        this.usageReportService.setGroupBy(value as keyof UsageReportLine);
       })
     );
 
@@ -69,6 +80,12 @@ export class UsageComponent implements OnInit, OnDestroy {
       map(value => this._filterWorkflows(value || '')),
     );
 
+    this.subscriptions.push(
+      this.usageReportService.getUsageItemsFilteredByProduct('actions').subscribe((items) => {
+        this.usageItems.actions = items;
+      }),
+    )
+
     this.subscriptions.push(
       this.usageReportService.getUsageFilteredByProduct('actions').subscribe((usageLines) => {
         this.usageLines.actions = usageLines;
diff --git a/src/app/usage-report.service.ts b/src/app/usage-report.service.ts
index 77eefe8..fb17a46 100644
--- a/src/app/usage-report.service.ts
+++ b/src/app/usage-report.service.ts
@@ -1,7 +1,7 @@
 import { TitleCasePipe } from '@angular/common';
 import { Injectable } from '@angular/core';
 import { readGithubUsageReport, UsageReport, UsageReportLine } from 'github-usage-report';
-import { BehaviorSubject, Observable, map } from 'rxjs';
+import { BehaviorSubject, Observable, combineLatest, distinctUntilChanged, map, shareReplay, tap } from 'rxjs';
 
 interface Filter {
   startDate: Date;
@@ -12,12 +12,17 @@ interface Filter {
 
 type Product = 'git_lfs' | 'packages' | 'copilot' | 'actions' | 'codespaces';
 
-export interface CustomUsageReportLine extends UsageReportLine {
-  value: number;
-}
+export type GroupBy = keyof UsageReportLine;
 
-export interface CustomUsageReport extends UsageReport {
-  lines: CustomUsageReportLine[];
+export type UsageReportItem = UsageReportLine & {
+  line: UsageReportLine;
+  workflow: UsageReportLine & {
+    avgTime: number;
+    avgCost: number;
+    totalRuns: number;
+    totalCost: number;
+  };
+  value: number; // This can be minutes or cost based on the valueType
 }
 
 @Injectable({
@@ -25,15 +30,16 @@ export interface CustomUsageReport extends UsageReport {
 })
 export class UsageReportService {
   usageReportData!: string;
-  usageReport!: CustomUsageReport;
-  usageReportFiltered: BehaviorSubject<CustomUsageReportLine[]> = new BehaviorSubject<CustomUsageReportLine[]>([]);
-  usageReportFilteredProduct: { [key: string]: Observable<CustomUsageReportLine[]> } = {};
+  usageReport!: UsageReport;
+  usageReportFiltered: BehaviorSubject<UsageReportLine[]> = new BehaviorSubject<UsageReportLine[]>([]);
+  usageItemsFiltered: BehaviorSubject<UsageReportItem[]> = new BehaviorSubject<UsageReportItem[]>([]);
   filters: Filter = {
     startDate: new Date(),
     endDate: new Date(),
     workflow: '',
     sku: '',
   } as Filter;
+  groupBy: GroupBy = 'organization';
   days = 0;
   owners: string[] = [];
   repositories: string[] = [];
@@ -130,20 +136,14 @@ export class UsageReportService {
   }
 
   setValueType(value: 'minutes' | 'cost') {
-    this.usageReport.lines.forEach(line => {
-      if (value === 'minutes') {
-        line.value = (line.quantity) || 0;
-      } else {
-        line.value = (line.quantity * line.pricePerUnit) || 0;
-      }
-    });
     this.usageReportFiltered.next(this.usageReport.lines);
+    this.usageItemsFiltered.next(this.calculateCopilotUsageItems(this.usageReport.lines));
     this.valueType.next(value);
   }
 
-  async setUsageReportData(usageReportData: string, cb?: (usageReport: CustomUsageReport, percent: number) => void): Promise<CustomUsageReport> {
+  async setUsageReportData(usageReportData: string, cb?: (usageReport: UsageReport, percent: number) => void): Promise<UsageReport> {
     this.usageReportData = usageReportData;
-    this.usageReport = await readGithubUsageReport(this.usageReportData) as CustomUsageReport;
+    this.usageReport = await readGithubUsageReport(this.usageReportData) as UsageReport;
     cb?.(this.usageReport, 100);
     this.filters.startDate = this.usageReport.startDate;
     this.filters.endDate = this.usageReport.endDate;
@@ -174,7 +174,6 @@ export class UsageReportService {
       }
     });
     this.setValueType(this.valueType.value);
-    console.log('Usage Report Loaded:', this.usageReport);
     return this.usageReport;
   }
 
@@ -184,6 +183,7 @@ export class UsageReportService {
     workflow?: string,
     sku?: string,
   }): void {
+    console.log()
     Object.assign(this.filters, filter);
     let filtered = this.usageReport.lines;
     if (this.filters.sku) {
@@ -198,19 +198,42 @@ export class UsageReportService {
       });
     }
     this.usageReportFiltered.next(filtered);
+    this.usageItemsFiltered.next(this.calculateCopilotUsageItems(filtered));
   }
 
-  getUsageReportFiltered(): Observable<CustomUsageReportLine[]> {
+  setGroupBy(groupBy: GroupBy): void {
+    this.groupBy = groupBy;
+    this.usageReportFiltered.next(this.usageReport.lines);
+    this.usageItemsFiltered.next(this.calculateCopilotUsageItems(this.usageReport.lines));
+  }
+
+  private getUsageReportFiltered(): Observable<UsageReportLine[]> {
     return this.usageReportFiltered.asObservable();
   }
 
-  getUsageFilteredByProduct(product: Product | Product[]): Observable<CustomUsageReportLine[]> {
+  getUsageFilteredByProduct(product: Product | Product[]): Observable<UsageReportLine[]> {
     const _products = Array.isArray(product) ? product : [product];
     return this.getUsageReportFiltered().pipe(
       map(lines => lines.filter(line => _products.some(p => line.product.includes(p)))),
     );
   }
 
+  private getUsageItemsFiltered(): Observable<UsageReportItem[]> {
+    return this.usageItemsFiltered.asObservable();
+  }
+
+  getUsageItemsFilteredByProduct(product: Product | Product[]): Observable<UsageReportItem[]> {
+    const _products = Array.isArray(product) ? product : [product];
+    const groupBy = this.groupBy; // Default grouping
+    return this.usageItemsFiltered.pipe(
+      map(lines => lines.filter(line => _products.some(p => line.product.includes(p)))),
+    ).pipe(
+      tap(() => {
+        console.log('Getting Usage Items Filtered by Product:', product, 'Group By:', groupBy);
+      })
+    )
+  }
+
   getWorkflowsFiltered(): Observable<string[]> {
     return this.getUsageFilteredByProduct('actions').pipe(
       map(lines => lines.map(line => line.workflowName).filter((workflow, index, self) => self.indexOf(workflow) === index)),
@@ -247,6 +270,55 @@ export class UsageReportService {
     }
     return formatted;
   }
+
+  calculateCopilotUsageItems(usage: UsageReportLine[]): UsageReportItem[] {
+    const groupBy = this.groupBy;
+    return usage.reduce((acc, line) => {
+        const item = acc.find(a => {
+          if (groupBy === 'workflowName') {
+            return a.workflowName === line.workflowName;
+          } else if (groupBy === 'repositoryName') {
+            return a.repositoryName === line.repositoryName;
+          } else if (groupBy === 'sku') {
+            return a.sku === this.formatSku(line.sku);
+          } else if (groupBy === 'username') {
+            return a.username === line.username;
+          } else if (groupBy === 'costCenterName') {
+            return a.costCenterName === line.costCenterName;
+          } else if (groupBy === 'organization') {
+            return a.organization === line.organization;
+          } else if (groupBy === 'date') {
+            return a.date?.toDateString() === line.date.toDateString();
+          }
+          return false;
+        });
+        if (item) {
+          item.value += this.valueType.value === 'minutes' ? line.quantity : line.quantity * line.pricePerUnit;
+          item.line = line;
+          item.workflow = {
+            ...line,
+            avgTime: 0, // Placeholder, can be calculated later
+            avgCost: 0, // Placeholder, can be calculated later
+            totalRuns: (item.workflow.totalRuns || 1) + 1,
+            totalCost: (item.workflow.totalCost || 0) + (this.valueType.value === 'minutes' ? line.quantity : line.quantity * line.pricePerUnit),
+          };
+        } else {
+          acc.push({
+            ...line,
+            value: this.valueType.value === 'minutes' ? line.quantity : line.quantity * line.pricePerUnit,
+            line: line,
+            workflow: {
+              ...line,
+              avgTime: 0, // Placeholder, can be calculated later
+              avgCost: 0, // Placeholder, can be calculated later
+              totalRuns: 1, // First run
+              totalCost: this.valueType.value === 'minutes' ? line.quantity : line.quantity * line.pricePerUnit,
+            }
+          });
+        }
+        return acc;
+      }, [] as UsageReportItem[]);
+    }
 }
 
 const titlecasePipe = new TitleCasePipe();
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index d6d2927..2cb474a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,6 +29,25 @@ html {
   );
 }
 
+body {
+  --mat-sys-background: #0d1117;
+  --mat-table-header-headline-color: #9198a1;
+  .mat-mdc-header-row {
+    background-color: #151b23;
+  }
+  .mat-mdc-table {
+    border: 1px solid rgb(61, 68, 77);
+    box-sizing: border-box;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  background: var(--mat-sys-background);
+
+  a {
+    text-decoration: none;
+  }
+}
+
 html,
 body {
   height: 100%;