diff --git a/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.js b/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.js
index 65da7d9362..4875504037 100644
--- a/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.js
+++ b/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.js
@@ -9,7 +9,7 @@ import React, { useState } from 'react';
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { ChevronUp16 } from '@carbon/icons-react';
+import { ChevronDown16 } from '@carbon/icons-react';
 
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
@@ -50,7 +50,7 @@ export let NonLinearReading = React.forwardRef(
     return (
       <span
         {...rest}
-        className={cx(blockClass, className)}
+        className={cx(blockClass, `${blockClass}__${theme}`, className)}
         ref={ref}
         role="main"
         {...getDevtoolsProps(componentName)}
@@ -59,19 +59,17 @@ export let NonLinearReading = React.forwardRef(
         <button
           type="button"
           aria-expanded={isOpen}
-          className={cx(`${blockClass}__term-${theme}`, [
+          className={cx(`${blockClass}__keyword`, [
             isOpen
-              ? [`${blockClass}__term-${theme}--open`]
-              : [`${blockClass}__term-${theme}--closed`],
+              ? [`${blockClass}__keyword-open`]
+              : [`${blockClass}__keyword-closed`],
           ])}
           onClick={handleToggle}
         >
           {children}
-          {isOpen && <ChevronUp16 />}
+          <ChevronDown16 />
         </button>{' '}
-        {isOpen && (
-          <span className={`${blockClass}--body-${theme}`}>{definition}</span>
-        )}{' '}
+        {isOpen && <span className={`${blockClass}__body`}>{definition}</span>}{' '}
       </span>
     );
   }
@@ -86,7 +84,7 @@ NonLinearReading.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 NonLinearReading.propTypes = {
   /**
-   * The term of the component appears as a pill.
+   * The keyword of the component appears as a pill.
    */
   children: PropTypes.node.isRequired,
 
@@ -96,7 +94,7 @@ NonLinearReading.propTypes = {
   className: PropTypes.string,
 
   /**
-   * The content that appears when the term is toggled open.
+   * The content that appears when the keyword is toggled open.
    */
   definition: PropTypes.node.isRequired,
 
diff --git a/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.stories.js b/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.stories.js
index 1f8d54352d..bcbda14d0e 100644
--- a/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.stories.js
+++ b/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.stories.js
@@ -8,6 +8,7 @@
 import React from 'react';
 
 import {
+  getSelectedCarbonTheme,
   getStoryTitle,
   prepareStory,
 } from '../../global/js/utils/story-helper';
@@ -17,40 +18,156 @@ import mdx from './NonLinearReading.mdx';
 
 import styles from './_storybook-styles.scss';
 
+const storyClass = 'non-linear-reading-stories';
+
 export default {
   title: getStoryTitle(NonLinearReading.displayName),
   component: NonLinearReading,
   parameters: {
     styles,
+    layout: 'padded',
     docs: {
       page: mdx,
     },
   },
+  argTypes: {
+    definition: {
+      table: {
+        disable: true,
+      },
+    },
+    theme: {
+      control: { type: null },
+    },
+  },
 };
 
 const defaultProps = {
+  definition: (
+    <>
+      This is a technical component that uses a set of rules to process alerts
+      from your{' '}
+      <a href="https://www.ibm.com/" target="_blank" rel="noreferrer">
+        sources
+      </a>
+      , and streamline threat analysis.
+    </>
+  ),
   theme: 'light',
 };
 
 // As a standalone component, the "story" is meaningless:
-// just a pill for a term, expanding to show its definition.
+// just a pill for a keyword, expanding to show its definition.
 // Should always be shown in context with surrounding text.
-const Template = (args) => {
+
+const TemplateSingleLevel = (args) => {
+  const theme = getSelectedCarbonTheme();
+
   return (
-    <>
+    <div className={`${storyClass}__viewport`}>
       XDR Connect’s correlation
-      <NonLinearReading {...args} />
+      <NonLinearReading {...args} theme={theme} />
       creates a case by processing data from alerts across multiple security
       tools.
-    </>
+    </div>
+  );
+};
+
+const TemplateMultipleLevel = (args) => {
+  const theme = getSelectedCarbonTheme();
+
+  return (
+    <div className={`${storyClass}__viewport`}>
+      Findings are created by the alerts{' '}
+      <NonLinearReading
+        {...args}
+        definition={
+          <>
+            We examine the alerts from each source, and{' '}
+            <NonLinearReading
+              {...args}
+              definition="Correlation allows us to identify connections between common
+                  observables, tactics, and techniques, and to remove any
+                  duplicate data, thereby streamlining the investigation for
+                  you."
+              theme={theme}
+            >
+              correlate
+            </NonLinearReading>{' '}
+            them together with{' '}
+            <a href="https://www.ibm.com/" target="_blank" rel="noreferrer">
+              rules
+            </a>
+            . While a case can contain multiple alerts, a single finding can
+            only be created from a single alert. So, when you select a finding,
+            you can drill right down to the raw data behind it: the payload. We
+            also use our
+            <NonLinearReading
+              {...args}
+              definition="
+                  Our threat intelligence service contains an enrichment
+                  capability. During the enrichment process, we add context that
+                  is used to establish the severity of artifacts associated with
+                  a finding. This is what determines the severity of the finding
+                  itself. Bear in mind that each case can have multiple
+                  findings, and every finding will have its own severity.
+                "
+              theme={theme}
+            >
+              threat intelligence service
+            </NonLinearReading>
+            to establish the severity of the artifacts.
+          </>
+        }
+        theme={theme}
+      >
+        ingested
+      </NonLinearReading>{' '}
+      from your own security systems. The findings here are confirmed findings
+      that have been created from alerts ingested from your own sources, before
+      being enriched to create cases.
+    </div>
   );
 };
 
-export const Default = prepareStory(Template, {
+const TemplateWithGradientBackground = (args) => {
+  return (
+    <div className={`${storyClass}__viewport`}>
+      <div className="gradient-bg">
+        XDR Connect’s correlation
+        <NonLinearReading {...args} theme="dark" />
+        creates a case by processing data from alerts across multiple security
+        tools.
+      </div>
+      <br />
+      Some other Novice to pro components use a gradient background as shown
+      above.
+      <br />
+      If using NonLinearReading inside one of these components, always use{' '}
+      <code>theme=&quot;dark&quot;</code>.
+    </div>
+  );
+};
+
+export const SingleLevel = prepareStory(TemplateSingleLevel, {
   args: {
     ...defaultProps,
     children: 'engine,',
-    definition:
-      'This is a technical component that uses a set of rules to process alerts from your sources, and streamline threat analysis.',
   },
 });
+
+export const MultipleLevel = prepareStory(TemplateMultipleLevel, {
+  args: {
+    ...defaultProps,
+  },
+});
+
+export const WithGradientBackground = prepareStory(
+  TemplateWithGradientBackground,
+  {
+    args: {
+      ...defaultProps,
+      children: 'engine,',
+    },
+  }
+);
diff --git a/packages/cloud-cognitive/src/components/NonLinearReading/_non-linear-reading.scss b/packages/cloud-cognitive/src/components/NonLinearReading/_non-linear-reading.scss
index 72a45a643d..192a2358ac 100644
--- a/packages/cloud-cognitive/src/components/NonLinearReading/_non-linear-reading.scss
+++ b/packages/cloud-cognitive/src/components/NonLinearReading/_non-linear-reading.scss
@@ -8,31 +8,35 @@
 // Standard imports.
 @import '../../global/styles/project-settings';
 
-@mixin term-closed-defaults {
+@mixin keyword-closed-defaults {
+  height: rem(20px);
+  padding-top: 0;
   // stylelint-disable-next-line carbon/layout-token-use
-  padding: rem(1px) $spacing-03 rem(1px) $spacing-03;
-  border: none;
+  padding-right: rem(3px);
+  border-width: rem(1px);
+  border-style: solid;
   border-radius: $spacing-04;
-  background-color: $interactive-02;
   white-space: nowrap;
 
   &:hover {
-    background-color: $hover-secondary;
     cursor: pointer;
   }
-}
-@mixin term-open-defaults {
-  @include term-closed-defaults();
-
-  padding-right: 0;
 
+  // The "up" chevron
   svg {
     // stylelint-disable-next-line carbon/layout-token-use
-    padding-top: rem(1px);
-    margin: 0 $spacing-02 0 $spacing-01;
+    margin: rem(1px) 0 0 0;
     vertical-align: text-top;
   }
 }
+@mixin keyword-open-defaults {
+  @include keyword-closed-defaults();
+
+  // The "up" chevron, flipped
+  svg {
+    transform: rotate(180deg);
+  }
+}
 @mixin body-defaults {
   @include carbon--type-style('body-long-01');
 
@@ -48,10 +52,13 @@
 
 // Other Carbon settings.
 // TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
 // NonLinearReading uses the following Carbon components:
 // TODO: @import(s) of Carbon component styles used by NonLinearReading
+
 // NonLinearReading uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by NonLinearReading
+
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin non-linear-reading {
@@ -72,86 +79,88 @@
     }
   }
 
-  .#{$block-class} {
-    &__term {
-      &-light {
-        &--closed {
-          @include term-closed-defaults();
+  .#{$block-class}__light {
+    .#{$block-class}__keyword {
+      &-closed {
+        @include keyword-closed-defaults();
 
-          background-color: $interactive-02;
-          color: $inverse-01;
+        border-color: $interactive-03;
+        background-color: transparent;
+        color: $interactive-03;
 
-          &:hover {
-            background-color: $hover-secondary;
-          }
+        &:hover {
+          background-color: $interactive-03;
+          color: $inverse-01;
         }
+      }
 
-        &--open {
-          @include term-open-defaults();
+      &-open {
+        @include keyword-open-defaults();
 
-          // Novice to pro does not always use Carbon defaults/tokens
-          // stylelint-disable-next-line carbon/theme-token-use
-          background-color: $purple-20;
-          color: $text-01;
+        border-color: $interactive-03;
+        background-color: $interactive-03;
+        color: $inverse-01;
 
-          &:hover {
-            // stylelint-disable-next-line carbon/theme-token-use
-            background-color: #dcc7ff;
-          }
+        &:hover {
+          background-color: transparent;
+          color: $interactive-03;
         }
       }
+    }
 
-      &-dark {
-        &--closed {
-          @include carbon--theme($carbon--theme--g100, true);
-          @include term-closed-defaults();
+    .#{$block-class}__body {
+      @include body-defaults();
 
-          background-color: $interactive-02;
-          color: $text-04;
+      border-left-color: $text-01;
+    }
+  }
+
+  .#{$block-class}__dark {
+    .#{$block-class}__keyword {
+      &-closed {
+        @include carbon--theme($carbon--theme--g100, true);
+        @include keyword-closed-defaults();
 
-          &:hover {
-            background-color: $hover-secondary;
-          }
+        border-color: $icon-03;
+        background-color: transparent;
+        color: $text-01;
+
+        &:hover {
+          background-color: $icon-03;
+          color: $inverse-01;
         }
+      }
 
-        &--open {
-          @include carbon--theme($carbon--theme--g100, true);
-          @include term-open-defaults();
+      &-open {
+        @include carbon--theme($carbon--theme--g100, true);
+        @include keyword-open-defaults();
 
-          // stylelint-disable-next-line carbon/theme-token-use
-          background-color: #491d8b;
-          color: $text-04;
+        border-color: $icon-03;
+        background-color: $icon-03;
+        color: $inverse-01;
 
-          &:hover {
-            // stylelint-disable-next-line carbon/theme-token-use
-            background-color: #7f3ae7;
-          }
+        &:hover {
+          background-color: transparent;
+          color: $text-01;
         }
       }
     }
 
-    &--body {
-      &-light {
-        @include body-defaults();
-
-        // stylelint-disable-next-line carbon/theme-token-use
-        border-left-color: #6929c4;
-        // stylelint-disable-next-line carbon/theme-token-use
-        color: #6929c4;
-      }
+    .#{$block-class}__body {
+      @include carbon--theme($carbon--theme--g100, true);
+      @include body-defaults();
 
-      &-dark {
-        @include carbon--theme($carbon--theme--g100, true);
-        @include body-defaults();
+      border-left-color: $text-01;
+      color: $text-01;
 
-        // stylelint-disable-next-line carbon/theme-token-use
-        border-left-color: #d4bbff;
-        // stylelint-disable-next-line carbon/theme-token-use
-        color: #d4bbff;
+      // override default link color to compensate for a gradient background.
+      a {
+        color: $link-01;
       }
     }
   }
 }
+
 @include exports('non-linear-reading') {
   @include non-linear-reading;
 }
diff --git a/packages/cloud-cognitive/src/components/NonLinearReading/_storybook-styles.scss b/packages/cloud-cognitive/src/components/NonLinearReading/_storybook-styles.scss
index 082233e87d..618b934554 100644
--- a/packages/cloud-cognitive/src/components/NonLinearReading/_storybook-styles.scss
+++ b/packages/cloud-cognitive/src/components/NonLinearReading/_storybook-styles.scss
@@ -11,3 +11,19 @@
 #root {
   @include carbon--type-style('body-long-01');
 }
+
+// The layout has been changed from middle/center to top/left, because
+// the component can expand, and it looks weird when expanding vertically
+// from the middle of the page instead of "dropping down" from above.
+// Margin provides spacing from the edge of the viewport.
+.non-linear-reading-stories__viewport {
+  margin: $spacing-10; // 64px
+}
+
+.gradient-bg {
+  @include carbon--theme($carbon--theme--g100, true);
+
+  padding: $spacing-05;
+  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+  color: $text-01;
+}