diff --git a/src/plugins/pictureInPicture/index.tsx b/src/plugins/pictureInPicture/index.tsx
index d10d42fff..bb6aee18f 100644
--- a/src/plugins/pictureInPicture/index.tsx
+++ b/src/plugins/pictureInPicture/index.tsx
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./styles.css";
+
 import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
@@ -41,6 +43,7 @@ export default definePlugin({
                 {tooltipProps => (
                     <div
                         {...tooltipProps}
+                        className="vc-pip-button"
                         role="button"
                         style={{
                             cursor: "pointer",
@@ -71,7 +74,7 @@ export default definePlugin({
                     >
                         <svg width="24px" height="24px" viewBox="0 0 24 24">
                             <path
-                                fill="var(--interactive-normal)"
+                                fill="currentColor"
                                 d="M21 3a1 1 0 0 1 1 1v7h-2V5H4v14h6v2H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zm0 10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h8zm-1 2h-6v4h6v-4z"
                             />
                         </svg>
diff --git a/src/plugins/pictureInPicture/styles.css b/src/plugins/pictureInPicture/styles.css
new file mode 100644
index 000000000..d0a81ca57
--- /dev/null
+++ b/src/plugins/pictureInPicture/styles.css
@@ -0,0 +1,8 @@
+.vc-pip-button {
+    color: var(--interactive-normal);
+}
+
+.vc-pip-button:hover {
+    background-color: var(--background-modifier-hover);
+    color: var(--interactive-hover);
+}