diff --git a/frontend/app/components/op_profile/op_profile.ng.html b/frontend/app/components/op_profile/op_profile.ng.html
index 4ad127a59..2c642ee1f 100644
--- a/frontend/app/components/op_profile/op_profile.ng.html
+++ b/frontend/app/components/op_profile/op_profile.ng.html
@@ -21,47 +21,50 @@
     </div>
   </div>
   <div class="control-container">
-    <div class="control" [hidden]="!hasTwoProfiles">
-      <div class="control-title">By category</div>
-      <mat-slide-toggle [checked]="isByCategory" (toggleChange)="updateToggle()"></mat-slide-toggle>
+    <div class="control" [hidden]="!hasMultiModules">
+      <div class="control-title">Group by Category</div>
+      <mat-slide-toggle [checked]="isByCategory" (toggleChange)="updateToggle()" matTooltip="Group by xla module by default."></mat-slide-toggle>
     </div>
     <div class="control">
-      <div class="control-title">Exclude Idle</div>
-      <mat-slide-toggle [checked]="excludeIdle" (toggleChange)="updateExcludeIdle()"></mat-slide-toggle>
-    </div>
-    <div class="ops-control">
-      <div class="ops-control-title">
-        Show top&nbsp;
-        <mat-form-field class="children-count-input" appearance="outline">
-          <mat-label>#</mat-label>
-          <input
-                 matInput
-                 type="number"
-                 matTooltip="10 ~ 100 with increment of 10, numbers will be rounded"
-                 [min]="10"
-                 [max]="100"
-                 [step]="10"
-                 [value]="childrenCount"
-                 (change)="updateChildrenCount($event.target.value)" />
-        </mat-form-field>
-        &nbsp;ops
+      <div class="control-title">
+        Order by wasted time
+        <mat-icon
+          class="tooltip-icon"
+          matTooltip="Wasted time is defined by RuntimeFraction *(1 - max(FlopsUtilization, MemoryBandwidthUtilization))."
+          matTooltipPosition="above">
+          info
+        </mat-icon>
       </div>
+      <mat-slide-toggle [checked]="byWasted" (toggleChange)="updateByWasted()" matTooltip="Order by Time% by default."></mat-slide-toggle>
     </div>
     <div class="control">
-      <div class="control-title">Sort by wasted time
+      <div class="control-title">Top 90%
         <mat-icon
-                  class="tooltip-icon"
-                  matTooltip="Wasted time is defined by RuntimeFraction *
-                              (1 - max(FlopsUtilization, MemoryBandwidthUtilization))."
-                  matTooltipPosition="above">
-              info
+          class="tooltip-icon"
+          matTooltip="Ops will be capped by the limit."
+          matTooltipPosition="above">
+          info
         </mat-icon>
       </div>
-      <mat-slide-toggle [checked]="byWasted" (toggleChange)="updateByWasted()"></mat-slide-toggle>
+      <mat-slide-toggle [checked]="showP90" (toggleChange)="updateShowP90()"></mat-slide-toggle>
     </div>
     <div class="control">
-      <div class="control-title">Top 90%</div>
-      <mat-slide-toggle [checked]="showP90" (toggleChange)="updateShowP90()"></mat-slide-toggle>
+      <div class="control-title">Exclude Idle</div>
+      <mat-slide-toggle [checked]="excludeIdle" (toggleChange)="updateExcludeIdle()"></mat-slide-toggle>
+    </div>
+    <div class="control">
+      <mat-form-field class="children-count-input" appearance="outline">
+        <mat-label>Ops Limit</mat-label>
+        <input
+              matInput
+              type="number"
+              [min]="10"
+              [max]="100"
+              [step]="10"
+              [value]="childrenCount"
+              matTooltip="Number of ops to show per layer. 10 ~ 100 with increment of 10."
+              (change)="updateChildrenCount($event.target.value)" />
+      </mat-form-field>
     </div>
   </div>
 </div>
diff --git a/frontend/app/components/op_profile/op_profile_base.ts b/frontend/app/components/op_profile/op_profile_base.ts
index b7b645f29..4c5426139 100644
--- a/frontend/app/components/op_profile/op_profile_base.ts
+++ b/frontend/app/components/op_profile/op_profile_base.ts
@@ -8,18 +8,13 @@ export class OpProfileBase {
   profile: ProfileOrNull = null;
   rootNode?: Node;
   data = new OpProfileData();
-  hasTwoProfiles: boolean = false;
-  isByCategory: boolean = false;
-  excludeIdle: boolean = true;
-  byWasted: boolean = false;
-  showP90: boolean = false;
-  childrenCount: number = 10;
-  deviceType: string = 'TPU';
-
-  private hasMultipleProfiles(): boolean {
-    return !!this.profile && !!this.profile.byCategory &&
-        !!this.profile.byProgram;
-  }
+  hasMultiModules = false;
+  isByCategory = false;
+  excludeIdle = true;
+  byWasted = false;
+  showP90 = false;
+  childrenCount = 10;
+  deviceType = 'TPU';
 
   private updateRoot() {
     if (!this.profile) {
@@ -28,7 +23,7 @@ export class OpProfileBase {
     }
 
     if (this.excludeIdle) {
-      if (!this.hasTwoProfiles) {
+      if (!this.hasMultiModules) {
         this.rootNode = this.profile.byCategoryExcludeIdle ||
             this.profile.byProgramExcludeIdle;
       } else {
@@ -36,7 +31,7 @@ export class OpProfileBase {
                                             this.profile.byProgramExcludeIdle;
       }
     } else {
-      if (!this.hasTwoProfiles) {
+      if (!this.hasMultiModules) {
         this.rootNode = this.profile.byCategory || this.profile.byProgram;
       } else {
         this.rootNode = this.isByCategory ? this.profile.byCategory :
@@ -49,7 +44,8 @@ export class OpProfileBase {
 
   parseData(data: ProfileOrNull) {
     this.profile = data;
-    this.hasTwoProfiles = this.hasMultipleProfiles();
+    this.hasMultiModules =
+        !!this.profile && !!this.profile.byCategory && !!this.profile.byProgram;
     this.isByCategory = false;
     this.childrenCount = 10;
     this.updateRoot();
diff --git a/frontend/app/components/op_profile/op_profile_common.scss b/frontend/app/components/op_profile/op_profile_common.scss
index a7c04bb5a..d18997dbc 100644
--- a/frontend/app/components/op_profile/op_profile_common.scss
+++ b/frontend/app/components/op_profile/op_profile_common.scss
@@ -20,7 +20,7 @@
 }
 
 .control {
-  margin-right: 80px;
+  margin-right: 40px;
 }
 
 .ops-control {
@@ -52,3 +52,81 @@
   vertical-align: bottom;
   cursor: pointer;
 }
+
+.time-header,
+.wasted-header,
+.hbmFraction-header,
+.name-header,
+.provenance-header,
+.utilization-hader,
+.hbmUtilization-header,
+.utilization-header,
+.hbmUtilization-header,
+.time,
+.wasted,
+.hbmFraction,
+.name,
+.provenance,
+.utilization,
+.hbmUtilization,
+.utilization,
+.hbmUtilization {
+  line-height: 20px;
+  width: 6%;
+  min-width: 60px;
+  text-align: center;
+}
+
+.time,
+.wasted,
+.hbmFraction,
+.name,
+.provenance,
+.utilization,
+.hbmUtilization {
+  font-size: smaller;
+}
+
+.name-header,
+.name {
+  display: inline-block;
+  width: 30%;
+  padding-left: 2em;
+  // Set word-break rule to make the arrow stick with text on narrow screen
+  word-break: break-all;
+}
+
+.name {
+  text-align: left;
+}
+
+.provenance-header,
+.provenance {
+  width: 20%;
+}
+
+.utilization-header,
+.utilization,
+.hbmUtilization-header,
+.hbmUtilization {
+  width: 60px;
+}
+
+.utilization-header,
+.hbmUtilization-header {
+  width: 76px; // 60px + circle 16px
+}
+
+.flame-color-circle,
+.hbm-flame-color-circle {
+  margin: 10px 20px 10px 10px;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  text-align: left;
+}
+
+.disclosure {
+  display: inline-block;
+  width: 1em;
+}
diff --git a/frontend/app/components/op_profile/op_table/BUILD b/frontend/app/components/op_profile/op_table/BUILD
index 5dc74e7c4..f4bde958f 100644
--- a/frontend/app/components/op_profile/op_table/BUILD
+++ b/frontend/app/components/op_profile/op_table/BUILD
@@ -17,6 +17,7 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
+        "@org_xprof//frontend/app/common/angular:angular_material_tooltip",
         "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
         "@org_xprof//frontend/app/components/op_profile/op_table_entry",
         "@org_xprof//frontend/app/store",
@@ -27,4 +28,7 @@ sass_binary(
     name = "op_table_css",
     src = "op_table.scss",
     sourcemap = False,
+    deps = [
+        "@org_xprof//frontend/app/components/op_profile:op_profile_common",
+    ],
 )
diff --git a/frontend/app/components/op_profile/op_table/op_table.ng.html b/frontend/app/components/op_profile/op_table/op_table.ng.html
index d77e8e033..0aeef2a62 100644
--- a/frontend/app/components/op_profile/op_table/op_table.ng.html
+++ b/frontend/app/components/op_profile/op_table/op_table.ng.html
@@ -1,13 +1,13 @@
 <div class="header">
-  <span class="time">Time %</span>
-  <span class="wasted">Wasted %</span>
-  <span class="hbmFraction">HBM %</span>
-  <span class="name">Name</span>
-  <span class="provenance">TensorFlow Op</span>
-  <span class="utilization">FLOPS</span>
-  <span class="flame-color-circle"></span>
-  <span class="hbmUtilization">HBM</span>
-  <span class="hbm-flame-color-circle"></span>
+  <span class="time-header" matTooltip="Total percentage of the time spent by all the operations in that xla module or category.">Time %</span>
+  <span class="wasted-header" matTooltip="Wasted time is defined by RuntimeFraction *(1 - max(FlopsUtilization, MemoryBandwidthUtilization)).">Wasted %</span>
+  <span class="hbmFraction-header" matTooltip="HBM fraction is the raw hbm bytes accessed percentage of the xla module or category.">HBM %</span>
+  <span class="name-header" matTooltip="Name of the xla module, op category, or ops.">Name</span>
+  <span class="provenance-header" matTooltip="TensorFlow op name associated with the HLO operation.">TensorFlow Op</span>
+  <span class="utilization-header" matTooltip="FLOPS bandwidth utilization normalized to the xla module or category scale.">FLOPS</span>
+  <span class="flame-color-circle-header"></span>
+  <span class="hbmUtilization-header" matTooltip="HBM memory bandwidth utilization.">HBM</span>
+  <span class="hbm-flame-color-circle-header"></span>
 </div>
 
 <op-table-entry
diff --git a/frontend/app/components/op_profile/op_table/op_table.scss b/frontend/app/components/op_profile/op_table/op_table.scss
index fdb348769..eef266da1 100644
--- a/frontend/app/components/op_profile/op_table/op_table.scss
+++ b/frontend/app/components/op_profile/op_table/op_table.scss
@@ -1,5 +1,7 @@
 /** CSS for an op talbe view component. */
 
+@import 'frontend/app/components/op_profile/op_profile_common';
+
 .header {
   display: flex;
   align-items: center;
@@ -17,31 +19,3 @@
   flex-shrink: 0;
   box-sizing: border-box;
 }
-
-.time {
-  padding-left: 20px !important;
-  width: 80px;
-}
-
-.wasted, .utilization {
-  width: 60px;
-}
-
-.name {
-  display: inline-block;
-  min-width: 40%;
-  padding-left: 2em !important;
-}
-
-.provenance {
-  flex: 1 1 0 !important;
-}
-
-.utilization {
-  text-align: right;
-}
-
-.flame-color-circle {
-  margin: 0 20px 0 10px;
-  width: 16px;
-}
diff --git a/frontend/app/components/op_profile/op_table/op_table_module.ts b/frontend/app/components/op_profile/op_table/op_table_module.ts
index 90b6b0064..1514cf177 100644
--- a/frontend/app/components/op_profile/op_table/op_table_module.ts
+++ b/frontend/app/components/op_profile/op_table/op_table_module.ts
@@ -1,12 +1,13 @@
 import {NgModule} from '@angular/core';
 import {OpTableEntryModule} from 'org_xprof/frontend/app/components/op_profile/op_table_entry/op_table_entry_module';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 import {OpTable} from './op_table';
 
 /** An op table view module. */
 @NgModule({
   declarations: [OpTable],
-  imports: [OpTableEntryModule],
+  imports: [OpTableEntryModule, MatTooltipModule],
   exports: [OpTable]
 })
 export class OpTableModule {
diff --git a/frontend/app/components/op_profile/op_table_entry/BUILD b/frontend/app/components/op_profile/op_table_entry/BUILD
index 680fd1361..bea3a1fff 100644
--- a/frontend/app/components/op_profile/op_table_entry/BUILD
+++ b/frontend/app/components/op_profile/op_table_entry/BUILD
@@ -28,6 +28,6 @@ sass_binary(
     src = "op_table_entry.scss",
     sourcemap = False,
     deps = [
-        "@org_xprof//frontend/app/styles:common",
+        "@org_xprof//frontend/app/components/op_profile:op_profile_common",
     ],
 )
diff --git a/frontend/app/components/op_profile/op_table_entry/op_table_entry.scss b/frontend/app/components/op_profile/op_table_entry/op_table_entry.scss
index 13806ca10..a231b960f 100644
--- a/frontend/app/components/op_profile/op_table_entry/op_table_entry.scss
+++ b/frontend/app/components/op_profile/op_table_entry/op_table_entry.scss
@@ -1,6 +1,6 @@
 /** CSS for an op talbe entry view component. */
 
-@import 'frontend/app/styles/common';
+@import 'frontend/app/components/op_profile/op_profile_common';
 
 :host {
   color: $content-primary-color;
@@ -51,64 +51,6 @@
   padding: 0 !important;
 }
 
-.time,
-.wasted,
-.hbmFraction,
-.utilization {
-  line-height: 20px;
-  font-size: smaller;
-  width: 60px;
-}
-
-.hbmUtilization {
-  line-height: 20px;
-  font-size: smaller;
-  width: 60px;
-}
-
-.time {
-  padding-left: 20px !important;
-  width: 80px;
-}
-
-.name {
-  display: inline-block;
-  min-width: 40%;
-}
-
-.disclosure {
-  display: inline-block;
-  width: 1em;
-}
-
-.provenance {
-  flex: 1 1 0 !important;
-}
-
-.utilization {
-  align-self: stretch;
-  text-align: right;
-}
-
-.flame-color-circle {
-  margin: 10px 20px 10px 10px;
-  width: 16px;
-  height: 16px;
-  border-radius: 8px;
-}
-
-.hbmUtilization {
-  align-self: stretch;
-  text-align: right;
-}
-
-.hbm-flame-color-circle {
-  margin: 10px 20px 10px 10px;
-  width: 16px;
-  height: 16px;
-  border-radius: 8px;
-}
-
 .leftout {
   padding-left: 175px;
   font-style: italic;
diff --git a/frontend/app/components/op_profile/op_table_entry/op_table_entry.ts b/frontend/app/components/op_profile/op_table_entry/op_table_entry.ts
index ffd1d03d0..b0e20ec5d 100644
--- a/frontend/app/components/op_profile/op_table_entry/op_table_entry.ts
+++ b/frontend/app/components/op_profile/op_table_entry/op_table_entry.ts
@@ -12,7 +12,7 @@ import {updateSelectedOpNodeChainAction} from 'org_xprof/frontend/app/store/acti
 })
 export class OpTableEntry implements OnChanges {
   /** The depth of node. */
-  @Input() level: number = 0;
+  @Input() level = 0;
 
   /** The main node. */
   @Input() node?: Node;
@@ -24,35 +24,36 @@ export class OpTableEntry implements OnChanges {
   @Input() selectedNode?: Node;
 
   /** The property to sort by waste time. */
-  @Input() byWasted: boolean = false;
+  @Input() byWasted = false;
 
   /** The property to show top 90%. */
-  @Input() showP90: boolean = false;
+  @Input() showP90 = false;
 
   /** The number of children nodes to be shown. */
-  @Input() childrenCount: number = 10;
+  @Input() childrenCount = 10;
 
   /** The event when the mouse enter or leave. */
-  @Output() hover = new EventEmitter<Node|null>();
+  @Output() readonly hover = new EventEmitter<Node|null>();
 
   /** The event when the selection is changed. */
-  @Output() selected = new EventEmitter<Node>();
+  @Output() readonly selected = new EventEmitter<Node>();
 
+  // TODO: renaming the variable to be more self-explanatory or add docstring
   children: Node[] = [];
-  expanded: boolean = false;
-  barWidth: string = '';
-  flameColor: string = '';
-  hideFlopsUtilization: boolean = false;
-  name: string = '';
-  offset: string = '';
-  percent: string = '';
-  provenance: string = '';
-  timeWasted: string = '';
+  expanded = false;
+  barWidth = '';
+  flameColor = '';
+  hideFlopsUtilization = false;
+  name = '';
+  offset = '';
+  percent = '';
+  provenance = '-';
+  timeWasted = '';
   hbmFraction = '';
-  flopsUtilization: string = '';
-  hbmUtilization: string = '';
-  hbmFlameColor: string = '';
-  numLeftOut: number = 0;
+  flopsUtilization = '';
+  hbmUtilization = '';
+  hbmFlameColor = '';
+  numLeftOut = 0;
 
   constructor(private readonly store: Store<{}>) {}
 
@@ -82,7 +83,7 @@ export class OpTableEntry implements OnChanges {
     this.offset = this.level.toString() + 'em';
     this.provenance = (this.node && this.node.xla && this.node.xla.provenance) ?
         this.node.xla.provenance.replace(/^.*(:|\/)/, '') :
-        '';
+        '-';
     this.timeWasted = utils.percent(utils.timeWasted(this.node, this.rootNode));
     this.flopsUtilization =
         utils.percent(utils.flopsUtilization(this.node, this.rootNode));