diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.css
index 48e6c1c5a3b..3647486ac41 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.css
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.css
@@ -64,7 +64,7 @@
 }
 
 .selected {
-  border: 1px solid #00000050;
+  border: 1px solid #00000050 !important;
 }
 
 .txt-frames {
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts
index 0ea1c4d1540..30d393281ad 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts
@@ -88,6 +88,7 @@ export class TimelineComponent {
     const multiplicationFactor = parseFloat((MAX_HEIGHT / maxValue).toFixed(2));
     this.graphData = timeline.map(d => {
       const height = d.timeSpent * multiplicationFactor;
+      const colorPercentage = Math.round((height / MAX_HEIGHT) * 100);
       let backgroundColor = 'rgb(237, 213, 94)';
       if (height > 33) {
         backgroundColor = 'rgb(240, 117, 117)';
@@ -98,11 +99,12 @@ export class TimelineComponent {
       const style = {
         'margin-left': '1px',
         'margin-right': '1px',
-        'background-color': backgroundColor,
+        background: `-webkit-linear-gradient(bottom, ${backgroundColor} ${colorPercentage}%, #f3f3f3 ${colorPercentage}%)`,
+        border: '1px solid #d0d0d0',
         cursor: 'pointer',
         'min-width': '25px',
         width: '25px',
-        height: `${height}px`,
+        height: '50px',
       };
       const toolTip = `${d.source} TimeSpent: ${d.timeSpent.toFixed(3)}ms`;
       return { ...d, style, toolTip };