diff --git a/community/lms/widgets/CourseTeaser.html b/community/lms/widgets/CourseTeaser.html
index df2b4e22..290a8aed 100644
--- a/community/lms/widgets/CourseTeaser.html
+++ b/community/lms/widgets/CourseTeaser.html
@@ -1,7 +1,9 @@
-<div class="course-preview">
-  <h3 class="course-title"><a href="/courses/{{ course.slug }}">{{ course.title }}</a></h3>
-  <div class="course-intro">
-    {{ course.short_introduction or "" }}
+<div class="course-teaser">
+  <div class="course-body">
+    <h3 class="course-title"><a href="/courses/{{ course.slug }}">{{ course.title }}</a></h3>
+    <div class="course-intro">
+      {{ course.short_introduction or "" }}
+    </div>
   </div>
   <div class="course-footer">
     <div class="course-author">
diff --git a/community/lms/widgets/SketchTeaser.html b/community/lms/widgets/SketchTeaser.html
index b827b59c..6c8ec431 100644
--- a/community/lms/widgets/SketchTeaser.html
+++ b/community/lms/widgets/SketchTeaser.html
@@ -1,4 +1,4 @@
-<div class="sketch-preview">
+<div class="sketch-teaser">
   <div class="sketch-image">
     <a href="/sketches/{{sketch.sketch_id}}">
       {{ sketch.to_svg() }}
diff --git a/community/public/css/style.css b/community/public/css/style.css
index 971e2db0..850f7038 100644
--- a/community/public/css/style.css
+++ b/community/public/css/style.css
@@ -25,12 +25,14 @@
   --cta-color: var(--c4);
   --send-message: var(--c7);
   --received-message: var(--c8);
+
+  --primary-color: #08B74F;
 }
 
 body {
   padding: 0px;
   margin: 0px;
-  background: var(--bg);
+  background: white;
 }
 
 .course-header {
@@ -200,10 +202,6 @@ img.profile-photo {
 
 /* override style of base */
 
-nav.navbar {
-  background: var(--c1) !important;
-}
-
 .message {
   border: 1px dashed var(--text-color);
   padding: 20px;
@@ -293,24 +291,69 @@ nav.navbar {
   display: inline-block;
 }
 
-.sketch-preview {
+.sketch-teaser {
   background: white;
   border-radius: 10px;
   border: 1px solid #ddd;
   width: 220px;
 }
 
-.sketch-preview svg {
+.sketch-teaser svg {
   width: 200px;
   height: 200px;
 }
 
 .sketch-image {
-  background: white;
   padding: 10px;
 }
 
 .sketch-footer {
   padding: 10px;
   background: #eee;
+  border-radius: 0px 0px 10px 10px;
+}
+
+.course-teaser {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  color: #444;
+}
+
+.course-teaser h3, .course-teaser h4 {
+  color: black;
+  font-weight: bold;;
+}
+
+.course-teaser .course-body, .course-teaser .course-footer {
+  padding: 20px;
+}
+
+.course-body {
+  min-height: 8em;
+}
+
+.course-footer {
+  border-top: 1px solid #ddd;
+}
+
+.course-teaser a, .course-teaser a:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+section {
+  padding: 60px 0px;
+}
+
+section h2 {
+  margin-bottom: 40px;
+}
+
+section.lightgray {
+  background: #f8f8f8;
+}
+
+#hero .jumbotron {
+  background: inherit;
 }
diff --git a/community/www/home/index.html b/community/www/home/index.html
index a36f5506..c087d76e 100644
--- a/community/www/home/index.html
+++ b/community/www/home/index.html
@@ -1,39 +1,51 @@
 {% extends "templates/base.html" %}
 
 {% block content %}
-<div class="container">
   {{ HeroSection() }}
   {{ ExploreCourses(courses) }}
   {{ RecentSketches(recent_sketches) }}
-</div>
 {% endblock %}
 
 {% macro HeroSection() %}
-<div>TODO: Hero
-</div>
+<section id="hero">
+  <div class="container">
+    <div class="jumbotron">
+      <h1 class="display-4">Guided online courses, with a mentor at your back.</h1>
+      <p class="lead">Hands-on online courses designed by experts, delivered by passionate mentors.</p>
+      <p class="lead">
+        <a class="btn btn-primary btn-lg" href="#" role="button">Request Invite</a>
+      </p>
+    </div>
+  </div>
+</section>
 {% endmacro %}
 
 {% macro ExploreCourses(courses) %}
-<div id="explore-courses">
-  <h2>Explore Courses</h2>
-  <div class="row">
-    {% for course in courses %}
-      <div class="col-md-6">
-        {{ widgets.CoursePreview(course=course) }}
-      </div>
-    {% endfor %}
-</div>
+<section id="explore-courses" class="lightgray">
+  <div class="container lightgray">
+    <h2>Explore Courses</h2>
+    <div class="row">
+      {% for course in courses %}
+        <div class="col-md-6">
+          {{ widgets.CourseTeaser(course=course) }}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
 {% endmacro %}
 
 {% macro RecentSketches(sketches) %}
-<div id="recet-sketches">
-  <h2>Recent Sketches</h2>
-  <div class="row">
-    {% for sketch in sketches %}
-    <div class="col-md-3">
-      {{ widgets.SketchPreview(sketch=sketch) }}
+<section id="recet-sketches">
+  <div class="container">
+    <h2>Recent Sketches</h2>
+    <div class="row">
+      {% for sketch in sketches %}
+      <div class="col-md-3">
+        {{ widgets.SketchTeaser(sketch=sketch) }}
+      </div>
+      {% endfor %}
     </div>
-    {% endfor %}
   </div>
-</div>
+</section>
 {% endmacro %}