--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -1,15 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Animation-inspector specific theme variables */
 
 :root {
+  --animation-item-hover-color: var(--grey-30-a40);
+  --animation-item-selected-color: var(--grey-30-a90);
   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
   --cssanimation-color: var(--purple-50);
   --csstransition-color: var(--theme-highlight-blue);
   --devtools-toolbar-height: 24px;
   --fast-track-image: url("images/animation-fast-track.svg");
   --graph-height: 30px;
   --graph-right-offset: 10px;
   --keyframe-marker-shadow-color: #c4c4c4;
@@ -19,16 +21,18 @@
   --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
   --scriptanimation-color: var(--green-60);
   --scrubber-color: var(--theme-highlight-red);
   --sidebar-width: 200px;
   --tick-line-style: 0.5px solid var(--theme-splitter-color);
 }
 
 :root.theme-dark {
+  --animation-item-hover-color: var(--grey-60-a50);
+  --animation-item-selected-color: var(--grey-60);
   --csstransition-color: var(--blue-50);
   --keyframe-marker-shadow-color: #818181;
   --progress-bar-color: var(--grey-50);
   --scrubber-color: var(--magenta-50);
 }
 
 /* Root element of animation inspector */
 #animation-container {
@@ -140,18 +144,22 @@ select.playback-rate-selector.devtools-b
   --graph-opacity: 0.8;
 }
 
 .animation-item.scriptanimation {
   --graph-color: var(--scriptanimation-color);
   --graph-opacity: 0.5;
 }
 
+.animation-item:hover {
+  background-color: var(--animation-item-hover-color);
+}
+
 .animation-item.selected {
-  background-color: var(--theme-selection-background-hover);
+  background-color: var(--animation-item-selected-color);
 }
 
 /* Animation Target */
 .animation-target {
   align-items: center;
   display: flex;
   grid-column: 1 / 2;
   height: var(--graph-height);
@@ -180,17 +188,18 @@ select.playback-rate-selector.devtools-b
   background-color: var(--theme-highlight-blue);
 }
 
 /* Summary Graph */
 .animation-summary-graph {
   cursor: pointer;
   grid-column: 2 / 3;
   height: var(--graph-height);
-  padding-top: 5px;
+  padding-bottom: 3px;
+  padding-top: 3px;
   position: relative;
 }
 
 .animation-summary-graph.compositor::after {
   background-image: var(--fast-track-image);
   background-repeat: no-repeat;
   content: "";
   display: block;
@@ -240,17 +249,17 @@ select.playback-rate-selector.devtools-b
   vector-effect: non-scaling-stroke;
 }
 
 .animation-delay-sign,
 .animation-end-delay-sign {
   background-color: var(--theme-graphs-grey);
   height: 3px;
   position: absolute;
-  top: calc(100% - 1.5px);
+  bottom: 2px;
 }
 
 .animation-delay-sign::before,
 .animation-end-delay-sign::before {
   background-color: inherit;
   border-radius: 50%;
   content: "";
   height: 6px;

--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -237,17 +237,20 @@
 
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;
   --yellow-80: #715100;
 
   --grey-10: #f9f9fa;
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
+  --grey-30-a40: rgba(215, 215, 219, 0.4);
+  --grey-30-a90: rgba(215, 215, 219, 0.9);
   --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
+  --grey-60-a50: rgba(74, 74, 79, 0.5);
   --grey-70: #38383d;
   --grey-80: #2a2a2e;
   --grey-90: #0c0c0d;
   --grey-90-a10: rgba(12, 12, 13, 0.1);
   --grey-90-a80: rgba(12, 12, 13, 0.8);
 }