diff --git a/docs/app/views/examples/components/form_select/_preview.html.erb b/docs/app/views/examples/components/form_select/_preview.html.erb
index 6398663ad2..d1d1165a89 100644
--- a/docs/app/views/examples/components/form_select/_preview.html.erb
+++ b/docs/app/views/examples/components/form_select/_preview.html.erb
@@ -59,6 +59,46 @@
 
 <%= sage_component SageDivider, {} %>
 
+<h3>Select with Message and Help Content</h3>
+<p>The Select component can display the "Help content" area to provide inline context alongside the label. This area allows text or other components, and may be useful when the Message area is occupied.</p>
+
+<% sample_help_content = sage_component SageLink, {
+    url: "https://help.kajabi.com",
+    label: "What are payouts?",
+    external: true,
+    launch: true,
+    help_link: false,
+    show_label: true,
+    style: "secondary",
+  } %>
+
+<%= sage_component SageFormSelect, {
+  label: "Payout currency",
+  name: "payout_currency",
+  select_options: [
+    {
+      text: "USD - United States Dollar",
+      value: "USD",
+    },
+    {
+      text: "CAD - Canadian Dollar",
+      value: "CAD",
+    },
+    {
+      text: "AUD - Australian Dollar",
+      value: "AUD",
+    },
+    {
+      text: "GBP - British Pound",
+      value: "GBP",
+    },
+  ],
+  message: "The payout currency determines the currency used when depositing funds to your bank account",
+  help_content: sample_help_content,
+} %>
+
+<%= sage_component SageDivider, {} %>
+
 <h3>Error State</h3>
 <p>The Select component can indicate an error state.</p>
 
diff --git a/docs/app/views/examples/components/form_select/_props.html.erb b/docs/app/views/examples/components/form_select/_props.html.erb
index 04c7d21794..238fd73aed 100644
--- a/docs/app/views/examples/components/form_select/_props.html.erb
+++ b/docs/app/views/examples/components/form_select/_props.html.erb
@@ -10,6 +10,12 @@
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
+<tr>
+  <td><%= md('`help_content`') %></td>
+  <td><%= md('Sets the content for the "help content" area adjacent to the select\'s label') %></td>
+  <td><%= md('String') %></td>
+  <td><%= md('`nil`') %></td>
+</tr>
 <tr>
   <td><%= md('`message`') %></td>
   <td><%= md('Displays the message text for the component.') %></td>
diff --git a/docs/lib/sage_rails/app/sage_components/sage_form_select.rb b/docs/lib/sage_rails/app/sage_components/sage_form_select.rb
index a7ebef08bb..f526ecb0dd 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_form_select.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_form_select.rb
@@ -2,6 +2,7 @@ class SageFormSelect < SageComponent
   set_attribute_schema({
     disabled: [:optional, NilClass, TrueClass],
     has_error: [:optional, NilClass, TrueClass],
+    help_content: [:optional, NilClass, String],
     id: [:optional, NilClass, String],
     label: [:optional, NilClass, String],
     message: [:optional, NilClass, String],
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb
index ffb87636dc..fd321c5ffc 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb
@@ -7,6 +7,7 @@
 <div class="
   sage-select
   <%= "sage-form-field--error" if component.has_error %>
+  <%= "sage-select--help-content" if component.help_content %>
   <%= component.generated_css_classes %>"
   data-js-select="true"
   <%= component.generated_html_attributes.html_safe %>
@@ -48,6 +49,11 @@
     <% end %>
   </select>
   <label class="sage-select__label" for="<%= select_id %>"><%= label %></label>
+  <% if component.help_content.present? %>
+    <div class="sage-select__help-content <%= SageClassnames::SPACERS::XS_LEFT %> <%= SageClassnames::SPACERS::XS_BOTTOM %>">
+      <%= component.help_content %>
+    </div>
+  <% end %>
   <pds-icon
     aria-hidden="true"
     class="sage-select__arrow"
diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
index 40723bf411..b05b1bb0fd 100644
--- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -36,6 +36,14 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   grid-template-rows: min-content min-content min-content; /* needed to resolve Safari 14 layout issue */
 }
 
+.sage-select--help-content {
+  grid-template-areas:
+    "label helpcontent helpcontent"
+    "field field field"
+    "message message message";
+  grid-template-columns: 1fr auto minmax(sage-spacing(lg), min-content);
+}
+
 .sage-select__label {
   @include sage-form-field-label;
 
@@ -64,6 +72,11 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   transition: 0.2s color ease;
 }
 
+.sage-select__help-content {
+  display: inline-flex;
+  grid-area: helpcontent;
+}
+
 .sage-select__field {
   @include sage-form-field();
   @include sage-focus-ring;
diff --git a/packages/sage-react/lib/Select/Select.jsx b/packages/sage-react/lib/Select/Select.jsx
index 57ce236f5d..c65a0b6b22 100644
--- a/packages/sage-react/lib/Select/Select.jsx
+++ b/packages/sage-react/lib/Select/Select.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { SageTokens } from '../configs';
+import { SageClassnames, SageTokens } from '../configs';
 
 export const Select = ({
   className,
@@ -10,6 +10,7 @@ export const Select = ({
   id,
   includeLabelInOptions,
   label,
+  helpContent,
   message,
   onChange,
   options,
@@ -24,6 +25,7 @@ export const Select = ({
     {
       'sage-form-field--error': hasError,
       'sage-select--value-selected': value,
+      'sage-select--help-content': helpContent,
     }
   );
 
@@ -88,6 +90,11 @@ export const Select = ({
       {label && (
         <label htmlFor={id} className="sage-select__label">{label}</label>
       )}
+      {helpContent && (
+        <div className={`sage-select__help-content ${SageClassnames.SPACERS.XS_LEFT} ${SageClassnames.SPACERS.XS_BOTTOM}`}>
+          {helpContent}
+        </div>
+      )}
       {message && (
         <div className="sage-select__info">
           <div className="sage-select__message">{message}</div>
@@ -101,6 +108,7 @@ Select.defaultProps = {
   className: null,
   disabled: false,
   hasError: false,
+  helpContent: null,
   includeLabelInOptions: false,
   label: null,
   message: null,
@@ -115,6 +123,7 @@ Select.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   hasError: PropTypes.bool,
+  helpContent: PropTypes.node,
   id: PropTypes.string.isRequired,
   includeLabelInOptions: PropTypes.bool,
   label: PropTypes.string,
diff --git a/packages/sage-react/lib/Select/Select.story.jsx b/packages/sage-react/lib/Select/Select.story.jsx
index 9f293e7c23..2f117cdd60 100644
--- a/packages/sage-react/lib/Select/Select.story.jsx
+++ b/packages/sage-react/lib/Select/Select.story.jsx
@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { Select } from './Select';
+import { Link } from '../Link';
+import { Popover } from '../Popover';
+import { SageClassnames } from '../configs';
 
 export default {
   title: 'Sage/Select',
@@ -12,7 +15,7 @@ export default {
       },
     },
   },
-  decorators: [(Story) => <div style={{ width: 300, marginLeft: 'auto', marginRight: 'auto' }}>{Story()}</div>],
+  decorators: [(Story) => <div style={{ width: 400, margin: '0 auto' }}>{Story()}</div>],
   args: {
     label: 'Select',
     id: 'field-1',
@@ -98,6 +101,71 @@ SelectWithOptionDisabled.args = {
   placeholder: 'Pick an option:'
 };
 
+export const SelectWithHelpContentLink = (args) => {
+  const [value, updateValue] = useState(args.value);
+  return (
+    <Select
+      {...args}
+      value={value}
+      onChange={(evt) => updateValue(evt.target.value)}
+    />
+  );
+};
+
+SelectWithHelpContentLink.args = {
+  id: 'field-5',
+  label: 'Choose an option:',
+  options: [
+    'First option',
+    'Second option',
+    'Third option',
+  ],
+  helpContent: (
+    <Link href="https://help.kajabi.com" target="_blank" style={Link.COLORS.SECONDARY}>
+      What&rsquo;s this?
+    </Link>
+  ),
+  placeholder: 'Choose an option:'
+};
+
+export const SelectWithHelpContentPopover = (args) => {
+  const [value, updateValue] = useState(args.value);
+  return (
+    <Select
+      {...args}
+      value={value}
+      onChange={(evt) => updateValue(evt.target.value)}
+    />
+  );
+};
+
+SelectWithHelpContentPopover.args = {
+  id: 'field-6',
+  label: 'Select fruit:',
+  options: [
+    'Apple',
+    'Banana',
+    'Orange',
+    'Peach',
+    'Pineapple',
+  ],
+  helpContent: (
+    <Popover
+      active={false}
+      iconOnly={false}
+      label="Fruit allergies?"
+      moreLinkText="Harvest schedule"
+      moreLinkURL="https://help.kajabi.com"
+      position={Popover.POSITIONS.LEFT}
+    >
+      <p className={SageClassnames.TYPE.BODY}>
+        Incredibly helpful text goes here
+      </p>
+    </Popover>
+  ),
+  placeholder: 'Select fruit:'
+};
+
 export const SelectWithOptgroups = (args) => {
   const [value, updateValue] = useState(args.value);
   return (
@@ -110,7 +178,7 @@ export const SelectWithOptgroups = (args) => {
 };
 
 SelectWithOptgroups.args = {
-  id: 'field-3',
+  id: 'field-7',
   label: 'Choose a sport...',
   value: 'nascar',
   options: [