diff --git a/cms/djangoapps/contentstore/tests/test_contentstore.py b/cms/djangoapps/contentstore/tests/test_contentstore.py
index 4c9fcf7f81..d94b57ebd3 100644
--- a/cms/djangoapps/contentstore/tests/test_contentstore.py
+++ b/cms/djangoapps/contentstore/tests/test_contentstore.py
@@ -1141,7 +1141,7 @@ class ContentStoreTest(ModuleStoreTestCase):
         resp = self.client.get(reverse('index'))
         self.assertContains(
             resp,
-            '<span class="class-name">Robot Super Educational Course</span>',
+            '<h3 class="course-title">Robot Super Educational Course</h3>',
             status_code=200,
             html=True
         )
diff --git a/cms/djangoapps/contentstore/views/user.py b/cms/djangoapps/contentstore/views/user.py
index 5b38d47452..40076f825b 100644
--- a/cms/djangoapps/contentstore/views/user.py
+++ b/cms/djangoapps/contentstore/views/user.py
@@ -54,6 +54,9 @@ def index(request):
                 course.location,
                 course_id=course.location.course_id,
             ),
+            course.display_org_with_default,
+            course.display_number_with_default,
+            course.location.name
         )
 
     return render_to_response('index.html', {
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index ab3ad6f810..817fc726c0 100644
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -291,7 +291,7 @@ body.dashboard {
 
 	// ====================
 
-	// course listings
+  // ELEM: course listings
 	.courses {
 	  margin: $baseline 0;
 	}
@@ -304,61 +304,110 @@ body.dashboard {
 		box-shadow: 0 1px 2px $shadow-l1;
 
 		.course-item {
+      @include box-sizing(border-box);
+      width: flex-grid(9, 9);
 			position: relative;
 			border-bottom: 1px solid $gray-l1;
+      padding: $baseline;
 
-			&:last-child {
-				border-bottom: none;
-			}
+      // STATE: hover/focus
+      &:hover {
+        background: $paleYellow;
 
-			.class-link {
-				z-index: 100;
-				display: block;
-				padding: 20px 25px;
-				line-height: 1.3;
+        .course-actions .view-live-button {
+          opacity: 1.0;
+          pointer-events: auto;
+        }
 
-				&:hover {
-					background: $paleYellow;
+        .course-title {
+          color: $orange-d1;
+        }
 
-					+ .view-live-button {
-						opacity: 1.0;
-						pointer-events: auto;
-					}
-				}
-			}
-		}
+        .course-metadata {
+          opacity: 1.0;
+        }
+      }
 
-		.class-name {
-			display: block;
-			font-size: 19px;
-			font-weight: 300;
-		}
+      .course-link, .course-actions {
+        @include box-sizing(border-box);
+        display: inline-block;
+        vertical-align: middle;
+      }
 
-		.detail {
-			font-size: 14px;
-			font-weight: 400;
-			margin-right: 20px;
-			color: #3c3c3c;
-		}
+      // encompassing course link
+      .course-link {
+        @extend .ui-depth2;
+        width: flex-grid(7, 9);
+        margin-right: flex-gutter();
+      }
 
-		// view live button
-		.view-live-button {
-			z-index: 10000;
-			position: absolute;
-			top: ($baseline*0.75);
-			right: $baseline;
-			padding: ($baseline/4) ($baseline/2);
-			opacity: 0.0;
-			pointer-events: none;
+      // course title
+      .course-title {
+        @extend .t-title4;
+        margin: 0 ($baseline*2) ($baseline/4) 0;
+        font-weight: 300;
+      }
 
-			&:hover {
-				opacity: 1.0;
-				pointer-events: auto;
-			}
+      // course metadata
+      .course-metadata {
+        @extend .t-copy-sub1;
+        @include transition(opacity $tmg-f1 ease-in-out 0);
+        color: $gray;
+        opacity: 0.75;
+
+        .metadata-item {
+          display: inline-block;
+
+          &:after {
+            content: "/";
+            margin-left: ($baseline/10);
+            margin-right: ($baseline/10);
+            color: $gray-l4;
+          }
+
+          &:last-child {
+
+            &:after {
+              content: "";
+              margin-left: 0;
+              margin-right: 0;
+            }
+          }
+
+          .label {
+            @extend .cont-text-sr;
+          }
+        }
+      }
+
+      .course-actions {
+        @extend .ui-depth3;
+        position: static;
+        width: flex-grid(2, 9);
+        text-align: right;
+
+        // view live button
+        .view-live-button {
+          @extend .ui-depth3;
+          @include transition(opacity $tmg-f2 ease-in-out 0);
+          @include box-sizing(border-box);
+          padding: ($baseline/2);
+          opacity: 0.0;
+          pointer-events: none;
+
+          &:hover {
+            opacity: 1.0;
+            pointer-events: auto;
+          }
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
 		}
 	}
 
-
   // ELEM: new user form
   .wrapper-create-course {
 
diff --git a/cms/templates/index.html b/cms/templates/index.html
index 9c845ccb5a..9702eedada 100644
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -133,12 +133,30 @@
       %if len(courses) > 0:
       <div class="courses">
         <ul class="list-courses">
-          %for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
+          %for course, url, lms_link, org, num, run in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
           <li class="course-item">
-            <a class="class-link" href="${url}" class="class-name">
-              <span class="class-name">${course}</span>
+            <a class="course-link" href="${url}">
+              <h3 class="course-title">${course}</h3>
+
+              <div class="course-metadata">
+                <span class="course-org metadata-item">
+                  <span class="label">${_("Organization:")}</span> <span class="value">${org}</span>
+                </span>
+                <span class="course-num metadata-item">
+                  <span class="label">${_("Course Number:")}</span>
+                  <span class="value">${num}</span>
+                </span>
+                <span class="course-run metadata-item">
+                  <span class="label">${_("Course Run:")}</span> <span class="value">${run}</span>
+                </span>
+              </div>
             </a>
-            <a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
+
+            <ul  class="item-actions course-actions">
+              <li class="action">
+                <a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
+              </li>
+            </ul>
           </li>
           %endfor
         </ul>