diff --git a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
index 34b8a20d9..504804edb 100644
--- a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
+++ b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
@@ -3,6 +3,9 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import {
+  getTheme,
+  IStyle,
+  ITheme,
   Label,
   MessageBar,
   MessageBarType,
@@ -20,6 +23,9 @@ class GraphToolkit extends Component<any> {
     super(props);
   }
 
+  currentTheme: ITheme = getTheme();
+  textStyle = queryResponseStyles(this.currentTheme).toolkitText.root as IStyle
+
   public render() {
     const { sampleQuery } = this.props;
     const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
@@ -45,7 +51,7 @@ class GraphToolkit extends Component<any> {
     }
 
     return (
-      <Label className={classes.emptyStateLabel}>
+      <Label styles={{root: this.textStyle}}>
         <FormattedMessage id='We did not find a Graph toolkit for this query' />
         &nbsp;
         <a
@@ -58,6 +64,7 @@ class GraphToolkit extends Component<any> {
           <FormattedMessage id='Learn more about the Microsoft Graph Toolkit' />
           .
         </a>
+
       </Label>
     );
   }
diff --git a/src/app/views/query-response/queryResponse.styles.ts b/src/app/views/query-response/queryResponse.styles.ts
index 704d66534..7e81c6d3d 100644
--- a/src/app/views/query-response/queryResponse.styles.ts
+++ b/src/app/views/query-response/queryResponse.styles.ts
@@ -27,6 +27,18 @@ export const queryResponseStyles = (theme: ITheme) => {
     copyIcon: {
       float: 'right',
       zIndex: 1
+    },
+    toolkitText: {
+      root: {
+        padding: '20px',
+        width: '100%',
+        margin: 'auto',
+        display: 'inline-block',
+        position: 'relative',
+        top: '160px',
+        lineHeight: '1.5',
+        textAlign: 'justify'
+      }
     }
   };
 };