diff --git a/lms/djangoapps/learner_dashboard/api/v0/views.py b/lms/djangoapps/learner_dashboard/api/v0/views.py
index 87ebf1d592..f63d1ea125 100644
--- a/lms/djangoapps/learner_dashboard/api/v0/views.py
+++ b/lms/djangoapps/learner_dashboard/api/v0/views.py
@@ -373,8 +373,17 @@ class CourseRecommendationApiView(APIView):
             return Response(status=400)
 
         recommended_courses = []
+        user_enrolled_course_keys = set()
         fields = ['title', 'owners', 'marketing_url']
-        for course_id in course_keys:
+
+        course_enrollments = CourseEnrollment.enrollments_for_user(request.user)
+        for course_enrollment in course_enrollments:
+            course_key = f'{course_enrollment.course_id.org}+{course_enrollment.course_id.course}'
+            user_enrolled_course_keys.add(course_key)
+
+        # Pick 5 course keys, excluding the user's already enrolled course(s).
+        enrollable_course_keys = list(set(course_keys).difference(user_enrolled_course_keys))[:5]
+        for course_id in enrollable_course_keys:
             course_data = get_course_data(course_id, fields)
             if course_data:
                 recommended_courses.append({
@@ -384,4 +393,5 @@ class CourseRecommendationApiView(APIView):
                     'marketing_url': course_data.get('marketing_url')
                 })
 
+        segment.track(user_id, 'edx.bi.user.recommendations.count', {'count': len(recommended_courses)})
         return Response({'courses': recommended_courses, 'is_personalized_recommendation': not is_control}, status=200)
diff --git a/lms/static/js/learner_dashboard/RecommendationsPanel.jsx b/lms/static/js/learner_dashboard/RecommendationsPanel.jsx
index bfeb174ff5..d4a7bc9ec1 100644
--- a/lms/static/js/learner_dashboard/RecommendationsPanel.jsx
+++ b/lms/static/js/learner_dashboard/RecommendationsPanel.jsx
@@ -10,6 +10,7 @@ class RecommendationsPanel extends React.Component {
     this.onCourseSelect = this.onCourseSelect.bind(this);
     this.getCourseList = this.getCourseList.bind(this);
     this.state = {
+      isLoading: true,
       isPersonalizedRecommendation: false,
       coursesList: [],
     };
@@ -51,6 +52,7 @@ class RecommendationsPanel extends React.Component {
       });
 
     this.setState({
+      isLoading: false,
       coursesList: coursesRecommendationData.courses,
       isPersonalizedRecommendation: coursesRecommendationData.is_personalized_recommendation
     });
@@ -60,44 +62,57 @@ class RecommendationsPanel extends React.Component {
     this.getCourseList();
   };
 
-
   render() {
     return (
       <div className="p-4 panel-background">
-        <div className="recommend-heading mb-4">{gettext('Recommendations for you')}</div>
-        <div className={this.state.coursesList.length ? '' : 'spinner-container'}>
-          {this.state.coursesList.length ? this.state.coursesList.map(course => (
-            <a href={course.marketing_url} className="course-link"
-               onClick={() => this.onCourseSelect(course.course_key)}>
-              <div className="course-card box-shadow-down-1 bg-white mb-3">
-                <div className="box-shadow-down-1 image-box">
-                  <img
-                    className="panel-course-img"
-                    src={course.logo_image_url}
-                    alt="course image"
-                  />
-                </div>
-                <div className="course-title pl-3">
-                  {course.title}
-                </div>
-              </div>
-            </a>
-          )) : (
-            <div className="d-flex justify-content-center align-items-center">
+        {this.state.isLoading ? (
+          <div>
+            <div className="recommend-heading mb-4">{gettext('Recommendations for you')}</div>
+            <div className="d-flex justify-content-center align-items-center spinner-container">
               <div role="status" className="spinner">
                 <span className="sr-only">{gettext('loading')}</span>
               </div>
             </div>
-          )}
-        </div>
-
+          </div>
+        ) : (
+          <div>
+            {this.state.coursesList.length ? (
+              <div>
+                <div className="recommend-heading mb-4">{gettext('Recommendations for you')}</div>
+                <div>
+                  {this.state.coursesList.map(course => (
+                    <a href={course.marketing_url} className="course-link"
+                      onClick={() => this.onCourseSelect(course.course_key)}>
+                      <div className="course-card box-shadow-down-1 bg-white mb-3">
+                        <div className="box-shadow-down-1 image-box">
+                          <img
+                            className="panel-course-img"
+                            src={course.logo_image_url}
+                            alt="course image"
+                          />
+                        </div>
+                        <div className="course-title pl-3">
+                          {course.title}
+                        </div>
+                      </div>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        )}
         {this.props.exploreCoursesUrl ? (
-          <div className="d-flex justify-content-center">
-            <a href={this.props.exploreCoursesUrl}
-               className="panel-explore-courses justify-content-center align-items-center">
-              {gettext('Explore courses')}
-              <span className="icon fa fa-search search-icon" aria-hidden="true"/>
-            </a>
+          <div>
+            {!(this.state.coursesList.length || this.state.isLoading) &&
+              <div className="recommend-heading mb-2 ml-2 mr-2">{gettext('Browse recently launched courses and see what\'s new in your favorite subjects.')}</div>}
+            <div className="d-flex justify-content-center">
+              <a href={this.props.exploreCoursesUrl}
+                className="panel-explore-courses justify-content-center align-items-center">
+                {gettext('Explore courses')}
+                <span className="icon fa fa-search search-icon" aria-hidden="true"/>
+              </a>
+            </div>
           </div>
         ) : null}
       </div>