diff --git a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
index 28d1c4522..8cee816c7 100644
--- a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
+++ b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
@@ -9,6 +9,7 @@ import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { translateMessage } from '../../../utils/translate-messages';
 import { queryResponseStyles } from '../queryResponse.styles';
 import { useAppSelector } from '../../../../store';
+import { classNames } from '../../classnames';
 
 const GraphToolkit = () => {
   const { sampleQuery } = useAppSelector((state) => state);
@@ -16,6 +17,7 @@ const GraphToolkit = () => {
 
   const currentTheme: ITheme = getTheme();
   const textStyle = queryResponseStyles(currentTheme).queryResponseText.root as IStyle;
+  const linkStyle = queryResponseStyles(currentTheme).link as IStyle
 
   if (toolkitUrl && exampleUrl) {
     return (
@@ -27,6 +29,7 @@ const GraphToolkit = () => {
             onClick={(e) =>
               telemetry.trackLinkClickEvent((e.currentTarget as HTMLAnchorElement).href,
                 componentNames.GRAPH_TOOLKIT_PLAYGROUND_LINK)}
+            styles={{root: linkStyle}}
           >
             <FormattedMessage id='graph toolkit playground' />
           </Link>
@@ -46,6 +49,7 @@ const GraphToolkit = () => {
         href='https://aka.ms/mgt'
         rel='noopener noreferrer'
         target='_blank'
+        styles={{root: linkStyle}}
       >
         <FormattedMessage id='Learn more about the Microsoft Graph Toolkit' />
         .