diff --git a/src/components/kpi-modal/index.js b/src/components/kpi-modal/index.js
index b2548d39..7e0dd407 100644
--- a/src/components/kpi-modal/index.js
+++ b/src/components/kpi-modal/index.js
@@ -7,13 +7,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  BlockText,
-  Button,
-  HeadingText,
-  Modal,
-  PlatformStateContext,
-} from 'nr1';
+import { Button, HeadingText, Modal, PlatformStateContext } from 'nr1';
 
 import {
   EditInPlace,
@@ -53,7 +47,6 @@ const KpiModal = ({
 
   const nameRef = useRef('name');
   const aliasRef = useRef('alias');
-  const nrqlQueryRef = useRef();
 
   useEffect(() => {
     setAccountId(kpi.accountIds?.length ? kpi.accountIds[0] : '');
@@ -110,15 +103,15 @@ const KpiModal = ({
                       value={name}
                       setValue={setName}
                       ref={nameRef}
-                      placeholder="Enter KPI name"
+                      placeholder="Untitled KPI"
                     />
                   </div>
-                  <div className="modal-component-kpi-name">
+                  <div className="modal-component-kpi-alias">
                     <EditInPlace
                       value={alias}
                       setValue={setAlias}
                       ref={aliasRef}
-                      placeholder="Enter KPI alias"
+                      placeholder="Alias (optional)"
                     />
                   </div>
                 </div>
@@ -128,13 +121,10 @@ const KpiModal = ({
                 >
                   <NrqlEditor
                     id={'nrqlEditor'}
-                    ref={nrqlQueryRef}
                     query={
-                      nrqlQuery
-                        ? nrqlQuery
-                        : kpi.nrqlQuery
-                        ? kpi.nrqlQuery
-                        : UI_CONTENT.KPI_MODAL.QUERY_PROMPT
+                      nrqlQuery ||
+                      kpi.nrqlQuery ||
+                      UI_CONTENT.KPI_MODAL.QUERY_PROMPT
                     }
                     accountId={accountId}
                     saveButtonText="Preview"
@@ -144,55 +134,33 @@ const KpiModal = ({
                         setNrqlQuery(res.query);
                     }}
                   />
-                  <div>
-                    <BlockText
-                      className="modal-component-nrql-editor-help"
-                      type={BlockText.TYPE.NORMAL}
-                    >
-                      <p>{UI_CONTENT.KPI_MODAL.NRQL_EDITOR_DESCRIPTION}</p>
-                      <br />
-                      <strong className="exmple-title">
-                        {UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_TITLE}
-                      </strong>
-                      <br />
-                      <Button
-                        type={Button.TYPE.PLAIN}
-                        sizeType={Button.SIZE_TYPE.SMALL}
-                        onClick={() =>
-                          handleClick(
-                            UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_1
-                          )
-                        }
-                      >
-                        {UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_1}
-                      </Button>
-                      <Button
-                        type={Button.TYPE.PLAIN}
-                        sizeType={Button.SIZE_TYPE.SMALL}
-                        onClick={() =>
-                          handleClick(
-                            UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_2
-                          )
-                        }
-                      >
-                        {UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_2}
-                      </Button>
-                      <Button
-                        type={Button.TYPE.PLAIN}
-                        sizeType={Button.SIZE_TYPE.SMALL}
-                        onClick={() =>
-                          handleClick(
-                            UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_3
-                          )
-                        }
-                      >
-                        {UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE_3}
-                      </Button>
-                    </BlockText>
+                  <div className="modal-component-nrql-editor-help">
+                    <details>
+                      <summary>
+                        {` ${UI_CONTENT.KPI_MODAL.NRQL_EDITOR_INSTRUCTIONS_HEADING}`}
+                      </summary>
+                      <p>{UI_CONTENT.KPI_MODAL.NRQL_EDITOR_INSTRUCTIONS}</p>
+                    </details>
+                    <details>
+                      <summary>
+                        {` ${UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_TITLE}`}
+                      </summary>
+                      {UI_CONTENT.KPI_MODAL.BILLBOARD_HELP_QUERY_EXAMPLE.map(
+                        (query, index) => (
+                          <div
+                            key={`query_${index}index`}
+                            className="query-example"
+                            onClick={() => handleClick(query)}
+                          >
+                            {query}
+                          </div>
+                        )
+                      )}
+                    </details>
                   </div>
                 </div>
                 <div className="modal-component-preview-heading">
-                  <HeadingText type={HeadingText.TYPE.HEADING_1}>
+                  <HeadingText type={HeadingText.TYPE.HEADING_3}>
                     Preview:
                   </HeadingText>
                 </div>
diff --git a/src/components/kpi-modal/styles.scss b/src/components/kpi-modal/styles.scss
index dc4c6616..6d85bc7f 100644
--- a/src/components/kpi-modal/styles.scss
+++ b/src/components/kpi-modal/styles.scss
@@ -49,33 +49,70 @@
 }
 
 .modal-component-edit-in-place {
-  margin: 1.25rem 0;
+  margin-top: 1.25rem;
   font-size: 1.5rem;
   gap: 0.625rem;
 }
 
 .modal-component-kpi-name {
+  font-size: 1.5rem;
   font-weight: 600;
-  margin-bottom: 0.625rem;
+  line-height: 2rem;
+}
+
+.modal-component-kpi-alias {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  margin-bottom: 0.5rem;
 }
 
 .modal-component-nrql-editor {
-  margin: 1.875rem 0;
+  margin-bottom: 1.875rem;
   overflow: hidden;
 }
 
 .modal-component-nrql-editor-help {
-  font-size: 9px;
-
-  .exmple-title {
+  details {
     margin: 0.75rem 0;
+    color: #535E65;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+  }
+
+  summary {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
   }
 
-  Button {
-    font-size: 9px;
-    padding: 0px;
-    margin: 0px;
-    min-height: 16px;
+  summary::before {
+    display: inline-block;
+    content: '> ';
+    transition: 0.2s;
+  }
+
+  details[open] summary::before {
+    transform: rotate(90deg);
+  }
+
+  p {
+    margin-left: 0.75rem;
+    color: #535E65;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+  }
+
+  .query-example {
+    width: 352px;
+    margin: 0 0 0.5rem 0.75rem;
+
+    &:hover {
+      background: #f3f4f4;
+      cursor: pointer;
+    }
   }
 }
 
@@ -103,4 +140,4 @@
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 2rem;
-}
\ No newline at end of file
+}
diff --git a/src/constants/ui-content.js b/src/constants/ui-content.js
index 144e4dd6..48a9fb0d 100644
--- a/src/constants/ui-content.js
+++ b/src/constants/ui-content.js
@@ -38,14 +38,15 @@ export const UI_CONTENT = {
     // billboard related messages
     BILLBOARD_DOC_LINK:
       'https://docs.newrelic.com/docs/query-your-data/explore-query-data/use-charts/chart-types/#widget-billboard',
-    NRQL_EDITOR_DESCRIPTION: `Enter a query which returns a single number. You could use queries that return Apdex values, or compare a single value across states and show the up/down trend. For instance, use 'COMPARE WITH' clause in a query to compare the same attribute across two different time frames.`,
-    BILLBOARD_HELP_TITLE: 'Example Queries: ',
-    BILLBOARD_HELP_QUERY_EXAMPLE_1:
+    NRQL_EDITOR_INSTRUCTIONS_HEADING: 'Instructions',
+    NRQL_EDITOR_INSTRUCTIONS:
+      'Enter a query which returns a single number. You could use queries that return Apdex values, or compare a single value across states to show the upward/downward trend.',
+    BILLBOARD_HELP_TITLE: 'Sample Queries: ',
+    BILLBOARD_HELP_QUERY_EXAMPLE: [
       'SELECT count(*) FROM Transaction since 1 hour ago',
-    BILLBOARD_HELP_QUERY_EXAMPLE_2:
       'SELECT count(*) FROM Pageview since 3 hours ago COMPARE WITH 2 days ago',
-    BILLBOARD_HELP_QUERY_EXAMPLE_3:
       'SELECT count(session) FROM Pageview since 1 hour ago COMPARE WITH 1 day ago',
+    ],
     QUERY_PROMPT: 'Enter query here',
   },
   GET_STARTED: {