diff --git a/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js b/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js
index d7708dd08..ff939f121 100644
--- a/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js
+++ b/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js
@@ -39,7 +39,7 @@ export const WhiteOnBlue = () => {
         secondaryTokenValue={text('secondaryTokenValue', '200000000000000000')}
         secondaryTokenDecimals={number('secondaryTokenDecimals', 18)}
         secondaryTokenSymbol={text('secondaryTokenSymbol', 'ABC')}
-        className="exchange-rate-display-white"
+        className="exchange-rate-display--white"
         arrowColor="white"
       />
     </div>
diff --git a/ui/app/pages/token/exchange-rate-display/index.scss b/ui/app/pages/token/exchange-rate-display/index.scss
index d5c740453..c416f1f53 100644
--- a/ui/app/pages/token/exchange-rate-display/index.scss
+++ b/ui/app/pages/token/exchange-rate-display/index.scss
@@ -19,8 +19,8 @@
     margin-top: 2px;
     transition: transform 0.5s ease-in-out;
   }
-}
 
-.exchange-rate-display-white {
-  color: $white;
+  &--white {
+    color: $white;
+  }
 }