2 files changed, 6 insertions, 2 deletions
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index d70a3d70..c4f22211 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -14,7 +14,11 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
     <HeaderButton
       style={{ padding: "3px" }}
       onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
+      onMouseLeave={() => {
+        setTimeout(() => {
+          setHover(false);
+        }, 100);
+      }}
       onClick={props.onClick}
     >
       <span hidden={!hover}>{props.text}</span>
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 525989af..d99b4d96 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -48,7 +48,7 @@ export const Pre = styled.pre`
   max-height: 150px;
   overflow-y: scroll;
   margin: 0;
-  background-color: ${secondaryDark};
+  background-color: ${vscBackground};
   border: none;
 
   /* text wrapping */