     TaskPlanActions.save(@state.id)
 
   renderTopics: (topicId) ->
-    <li>{TocStore.getSectionInfo(topicId).title}</li>
+    topic = TocStore.getSectionInfo(topicId)
+    <li>{topic.number} - {topic.title}</li>
 
   render: ->
     id = @getParams().id

        <label>Select Readings</label>
        <SelectTopics planId={@state.id} selected={topics}/>
      </p>
      <ul>
        {_.map(topics, @renderTopics)}
      </ul>
    </BS.Panel>

module.exports = ReadingPlan

    headerText = if id then 'Edit Reading' else 'Add Reading'
    dueDate = if @state.due_at then @state.due_at else @props.due_at
    topics = TaskPlanStore.getTopics(@state.id)

    selectedReadingList =
      <ul className="selected-reading-list">
        <li><strong>Currently selected sections in this reading</strong></li>
        {_.map(topics, @renderTopics)}
      </ul> if topics.length

    <BS.Panel bsStyle="default" className="create-reading" footer={footer}>
      <h1>{headerText}</h1>
