     courseId = @props.courseId
     guide = LearningGuide.Student.store.get(courseId)
 
-    sections = for section, i in _.first(LearningGuide.Student.store.getAllSections(courseId), NUM_SECTIONS)
-      <LearningGuideSection key={i}
-        section={section}
-        onPractice={@onPractice}
-        courseId={courseId} />
-
     <div className='progress-guide'>
       <h1 className='panel-title'>Performance Forecast</h1>
       <h2 className='recent'>Recent topics</h2>
       <div className='guide-group'>
         <div className='chapter-panel'>
-        {_.first(sections, 4)}
+        <WeakerSections {...@props}
+          sections={LearningGuide.Student.store.getAllSections(courseId)}
+          weakerEmptyMessage="You haven't worked enough problems for Tutor to predict your weakest topics."
+          onPractice={@onPractice}
+        />
         </div>
       </div>
       <LearningGuideColorKey />

LearningGuideSection = require '../learning-guide/section'
LearningGuideColorKey = require '../learning-guide/color-key'
PracticeButton = require '../learning-guide/practice-button'


# Number of sections to display
NUM_SECTIONS = 4

    </div>

  render: ->
    sections = LearningGuide.Helpers.weakestSections(
      LearningGuide.Student.store.getAllSections(@props.courseId)
    )
    canPractice = LearningGuide.Helpers.canPractice({sections})

    return @renderEmpty() unless canPractice

    <div className='progress-guide'>
      <div className='actions-box'>

        <ProgressGuide courseId={@props.courseId} />

        <PracticeButton title='Practice my weakest topics'
            courseId={@props.courseId} sections={sections} />

        <BS.Button
          onClick={@viewGuide}
