diff --git a/app/packages/app/src/pages/datasets/DatasetPage.tsx b/app/packages/app/src/pages/datasets/DatasetPage.tsx
index 0632e90948..15bcdd5cd7 100644
--- a/app/packages/app/src/pages/datasets/DatasetPage.tsx
+++ b/app/packages/app/src/pages/datasets/DatasetPage.tsx
@@ -1,4 +1,4 @@
-import { Dataset, Snackbar, Starter } from "@fiftyone/core";
+import { Dataset, Snackbar, Starter, QueryPerformanceToast } from "@fiftyone/core";
 import "@fiftyone/embeddings";
 import "@fiftyone/map";
 import { OperatorCore } from "@fiftyone/operators";
@@ -10,7 +10,6 @@ import { usePreloadedQuery } from "react-relay";
 import { useRecoilValue } from "recoil";
 import { graphql } from "relay-runtime";
 import Nav from "../../components/Nav";
-import QueryPerformanceToast from "../../components/QueryPerformanceToast";
 import type { Route } from "../../routing";
 import style from "../index.module.css";
 import type { DatasetPageQuery } from "./__generated__/DatasetPageQuery.graphql";
diff --git a/app/packages/app/src/components/QueryPerformanceToast.tsx b/app/packages/core/src/components/QueryPerformanceToast.tsx
similarity index 83%
rename from app/packages/app/src/components/QueryPerformanceToast.tsx
rename to app/packages/core/src/components/QueryPerformanceToast.tsx
index 089756e2da..f7c7ec0a03 100644
--- a/app/packages/app/src/components/QueryPerformanceToast.tsx
+++ b/app/packages/core/src/components/QueryPerformanceToast.tsx
@@ -44,7 +44,12 @@ const QueryPerformanceToast = () => {
   return createPortal(
     <Toast
       duration={SHOWN_FOR}
-      layout={{ bottom: '100px', vertical: "bottom", horizontal: "center", backgroundColor: theme.custom.toastBackgroundColor}}
+      layout={{
+        bottom: "100px",
+        vertical: "bottom",
+        horizontal: "center",
+        backgroundColor: theme.custom.toastBackgroundColor,
+      }}
       primary={(setOpen) => {
         return (
           <Button
@@ -54,7 +59,12 @@ const QueryPerformanceToast = () => {
               open(QP_MODE, "_blank")?.focus();
               setOpen(false);
             }}
-            sx={{ marginLeft: "auto", backgroundColor: theme.primary.main, color: "#FFFFFF", boxShadow: 0 }} // Right align the button
+            sx={{
+              marginLeft: "auto",
+              backgroundColor: theme.primary.main,
+              color: theme.text.primary,
+              boxShadow: 0,
+            }} // Right align the button
           >
             View Documentation
           </Button>
@@ -64,6 +74,7 @@ const QueryPerformanceToast = () => {
         return (
           <div>
             <Button
+              data-cy="btn-dismiss-query-performance-toast"
               variant="text"
               color="secondary"
               size="small"
@@ -84,7 +95,11 @@ const QueryPerformanceToast = () => {
             <Bolt sx={{ color: theme.custom.lightning, marginRight: "8px" }} />
             <Typography
               variant="subtitle1"
-              sx={{ fontWeight: 500, marginRight: "8px", color: theme.text.primary }}
+              sx={{
+                fontWeight: 500,
+                marginRight: "8px",
+                color: theme.text.primary,
+              }}
             >
               Query Performance is Available!
             </Typography>
diff --git a/app/packages/core/src/components/index.ts b/app/packages/core/src/components/index.ts
index 8fa3f57525..d2d2d914e8 100644
--- a/app/packages/core/src/components/index.ts
+++ b/app/packages/core/src/components/index.ts
@@ -9,3 +9,4 @@ export * from "./Sidebar";
 export { default as Snackbar } from "./Snackbar";
 export { default as ViewBar, rollbackViewBar } from "./ViewBar/ViewBar";
 export * from "./Starter";
+export { default as QueryPerformanceToast } from "./QueryPerformanceToast";