diff --git a/app/jsx/shared/components/SearchItemSelector.js b/app/jsx/shared/components/SearchItemSelector.js
index 188f5075b52..5d378ea6602 100644
--- a/app/jsx/shared/components/SearchItemSelector.js
+++ b/app/jsx/shared/components/SearchItemSelector.js
@@ -29,7 +29,8 @@ SearchItemSelector.propTypes = {
   onItemSelected: func, // expects each item to have the 'name' property
   itemSearchFunction: func,
   renderLabel: string,
-  contextId: string
+  contextId: string,
+  renderOption: func
 }
 
 SearchItemSelector.defaultProps = {
@@ -46,7 +47,8 @@ export default function SearchItemSelector({
   onItemSelected,
   renderLabel,
   itemSearchFunction,
-  contextId = ''
+  contextId = '',
+  renderOption
 }) {
   const [items, setItems] = useState(null)
   const [error, setError] = useState(null)
@@ -100,7 +102,7 @@ export default function SearchItemSelector({
       ? null
       : items.map(item => (
           <CanvasAsyncSelect.Option key={item.id} id={item.id}>
-            {item.name}
+            {renderOption ? renderOption(item) : item.name}
           </CanvasAsyncSelect.Option>
         ))
 
diff --git a/app/jsx/shared/direct_share/CourseAndModulePicker.js b/app/jsx/shared/direct_share/CourseAndModulePicker.js
index d35e802ae80..9e5e0b9b4f2 100644
--- a/app/jsx/shared/direct_share/CourseAndModulePicker.js
+++ b/app/jsx/shared/direct_share/CourseAndModulePicker.js
@@ -21,6 +21,7 @@ import I18n from 'i18n!course_and_module_picker'
 import React from 'react'
 import {func, string, bool} from 'prop-types'
 import {View} from '@instructure/ui-view'
+import {Text} from '@instructure/ui-text'
 
 import useManagedCourseSearchApi from '../effects/useManagedCourseSearchApi'
 import useModuleCourseSearchApi from '../effects/useModuleCourseSearchApi'
@@ -51,6 +52,16 @@ export default function CourseAndModulePicker({
           onItemSelected={setSelectedCourse}
           renderLabel={I18n.t('Select a Course')}
           itemSearchFunction={useManagedCourseSearchApi}
+          renderOption={item => {
+            return (
+              <View>
+                {item.name}
+                <View as="p" margin="none" padding="none">
+                  <Text size="small">{item.course_code}</Text>
+                </View>
+              </View>
+            )
+          }}
         />
       </View>
       <View as="div" padding="0 0 small 0">
@@ -60,6 +71,16 @@ export default function CourseAndModulePicker({
             renderLabel={I18n.t('Select a Module (optional)')}
             itemSearchFunction={useModuleCourseSearchApi}
             contextId={selectedCourseId || null}
+            renderOption={item => {
+              return (
+                <View>
+                  {item.name}
+                  <View as="p" margin="none" padding="none">
+                    <Text size="small">{item.course_code}</Text>
+                  </View>
+                </View>
+              )
+            }}
           />
         )}
       </View>