diff --git a/_content/css/styles.css b/_content/css/styles.css
index 23f7f8f..b532ec8 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -2171,14 +2171,6 @@
 .Security-hero {
   background-color: var(--color-background-accented);
   color: var(--color-text);
-  background-image: radial-gradient(
-    60.0625rem 60.0625rem,
-    #bfeaf4 50%,
-    transparent 50%
-  );
-  background-position: top -50rem left -9rem;
-  background-repeat: no-repeat;
-  background-size: 75rem 75rem;
   padding: 0 2.25rem 0;
 }
 [data-theme='dark'] .Learn-hero .BreadcrumbNav-li:not(:last-child):after,
@@ -2200,7 +2192,6 @@
     background: url('/images/icons/arrow-forward.svg') no-repeat;
   }
 }
-.Learn-hero .Container,
 .Security-hero .Container {
   max-width: 68.125rem;
   position: relative;
@@ -2212,17 +2203,20 @@
   display: flex;
   flex-direction: column-reverse;
 }
+.Learn-heroInner {
+  padding-bottom: 3.25rem;
+}
 
 .Learn-heroGopher,
 .Security-heroGopher {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   padding-top: 1.25rem;
 }
 
 .Learn-heroGopher img,
 .Security-heroGopher img {
-  height: 13.5625rem;
+  height: 8.25rem;
   width: auto;
 }
 
@@ -2247,6 +2241,9 @@
   color: var(--color-text);
   font-size: 0.875rem;
   max-width: 27.1875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
 }
 
 .Learn-heroAction,
@@ -2282,37 +2279,104 @@
 .LearnGo-gridContainer,
 .Security-gridContainer {
   display: flex;
-  justify-content: center;
   padding: 0rem 0rem 1rem;
 }
 
 .Learn-cardList,
 .Security-cardList {
-  column-gap: 3.313rem;
+  column-gap: 2.813rem;
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   justify-content: space-between;
   list-style: none;
   padding-left: 0;
-  row-gap: 2rem;
+  row-gap: 2.813rem;
+}
+
+.Learn-columns {
+  display: flex;
+  max-width: 78.25rem;
+  margin: auto;
+  padding: 0 1.25rem;
+}
+
+.Learn-columns .Learn-sidebar {
+  display: none;
+  margin-top: 3.75rem;
+  width: 25%;
+  height: 100vh;
+  min-height: 12.5rem;
+  overflow: auto;
+  position: sticky;
+  top: 5%;
+}
+
+.Learn-columns .LearnNav {
+  display: flex;
+  flex-direction: column;
+}
+
+.Learn-columns .LearnNav a {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.875rem;
+  text-decoration: none;
+}
+
+.Learn-columns .LearnNav a span {
+  margin-left: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--color-text-subtle);
+}
+
+.Learn-columns .LearnNav a svg {
+  visibility: hidden;
+}
+
+.Learn-columns .LearnNav a.active svg {
+  visibility: visible;
+}
+
+.Learn-columns .LearnNav a.active span,
+.Learn-columns .LearnNav a span:hover {
+  color: var(--color-text);
+  font-weight: 500;
 }
 
 .Learn-card,
 .Security-card {
-  height: 23.375rem;
-  max-width: 40rem;
+  min-height: 13.25rem;
 }
 
 @media only screen and (min-width: 48rem) {
   .Learn-cardList,
   .Security-cardList {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .Learn-card {
+    max-width: 15.875rem;
+  }
+  .Learn-heroGopher img,
+  .Security-heroGopher img {
+    height: 13.25rem;
   }
 }
 @media only screen and (min-width: 72.75rem) {
+  .Learn-columns .Learn-sidebar {
+    display: block;
+  }
   .Learn-cardList,
   .Security-cardList {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .Learn-heroGopher,
+  .Security-heroGopher {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 3.25rem;
   }
 }
 
@@ -2372,30 +2436,35 @@
   .Learn-heroGopher,
   .Security-heroGopher {
     flex: 1;
-    justify-content: center;
-    padding-top: 2.625rem;
+    justify-content: flex-end;
+    align-items: center;
   }
 
-  .Learn-heroGopher img,
   .Security-heroGopher img {
     height: 21.0625rem;
   }
 
   .Learn-heroAction,
   .Security-heroAction {
-    height: 4rem;
-    width: 16.5625rem;
+    height: 2.5rem;
+    width: 10.25rem;
   }
 
-  .Learn-heroAction a,
-  .Learn-heroAction a:hover,
-  .Learn-heroAction a:visited,
   .Security-heroAction a,
   .Security-heroAction a:hover,
   .Security-heroAction a:visited {
     font-size: 1.5rem;
   }
 
+  .Learn-heroAction a,
+  .Learn-heroAction a:hover,
+  .Learn-heroAction a:visited {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1rem;
+  }
+
   .Learn-heroAction span,
   .Security-heroAction span {
     font-size: 1rem;
@@ -2414,7 +2483,8 @@
 .Learn-selfPaced,
 .Learn-books,
 .Learn-inPersonTraining,
-.Learn-meetups {
+.Learn-meetups,
+.Learn-tutorials {
   margin-top: 3.75rem;
   padding: 0 1.5rem;
 }
@@ -2443,7 +2513,9 @@
 .Security-sectionHeader {
   color: var(--color-text);
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
 }
 
 .Learn-subHeader h2 {
@@ -2452,10 +2524,19 @@
 
 .Learn-learningResourcesHeader h3 {
   font-size: 1.5rem;
-  font-weight: bold;
+  font-style: normal;
+  font-weight: 400;
   line-height: 2.25rem;
 }
 
+.Learn-learningResourcesHeader p {
+  color: var(--color-text-subtle);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.375rem;
+}
+
 .Learn-selfPaced .Learn-card .Card-content {
   justify-content: space-between;
 }
@@ -2467,16 +2548,7 @@
   height: 7.5625rem;
 }
 
-.Learn-selfPaced .Learn-card {
-  height: 20.3125rem;
-}
-
 @media only screen and (min-width: 48rem) {
-  .Learn-learningResourcesHeader {
-    display: flex;
-    justify-content: flex-start;
-  }
-
   .Learn-learningResourcesHeader h2,
   .Security-sectionHeader h2 {
     font-size: 2.25rem;
@@ -2487,63 +2559,39 @@
 .Learn-cardList.Learn-bookList {
   grid-template-columns: repeat(1, 1fr);
   width: 100%;
+  grid-gap: 0;
 }
 
 .Learn-card.Learn-book {
   height: auto;
+  max-width: 26.5rem;
 }
 
 @media only screen and (min-width: 48rem) {
   .Learn-cardList.Learn-bookList {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .Learn-card.Learn-book {
-    max-width: 13.125rem;
-  }
-}
-
-@media only screen and (min-width: 57.7rem) {
-  .Learn-cardList.Learn-bookList {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-@media only screen and (min-width: 72.75rem) {
-  .Learn-cardList.Learn-bookList {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 .Learn-inPersonList {
-  display: flex;
-  flex: 1 0 100%;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
   list-style: none;
-  margin: 1.875rem 0 1.875rem -1rem; /* Offset gutters for the leftmost and top cells in the grid. */
   padding-left: 0;
+  grid-template-columns: repeat(1, 1fr);
 }
 
 .Learn-inPerson {
-  border-bottom: var(--border);
   flex: 1 1 31.25rem;
-  margin: 0 0 0 1rem; /* Gutter between grid cells. */
-  max-width: 31rem;
+  max-width: 36.5rem;
   padding-bottom: 1.25rem;
 }
 
-.Learn-inPerson:nth-child(1),
-.Learn-inPerson:nth-child(2) {
-  border-top: var(--border);
-}
 .Learn-inPersonTitle {
   font-size: 1.25rem;
 }
 .Learn-inPersonBlurb {
   color: var(--color-text);
-  margin: 0;
+  line-height: 1.75rem;
 }
 
 .Learn-events {
@@ -2705,6 +2753,9 @@
   .Learn-tileList {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .Learn-inPersonBlurb {
+    margin-right: 10rem;
+  }
 }
 @media only screen and (min-width: 48rem) {
   .Learn-tileList {
@@ -2713,6 +2764,9 @@
   .Learn-tileList {
     column-gap: 3rem;
   }
+  .Learn-inPersonList {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 .Learn-tile {
   display: flex;
@@ -3874,14 +3928,21 @@
 
 .Card-contentBody {
   color: var(--color-text-subtle);
-  flex: auto;
   font-size: 0.875rem;
   margin-top: 1rem;
 }
 
+.Card-lineClamp {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+
 .Card-contentCta {
   align-items: center;
   display: flex;
+  margin-top: auto;
 }
 
 .Card-contentCta span {
@@ -3916,9 +3977,8 @@
 }
 
 .Book-inner {
-  align-items: flex-start;
   display: flex;
-  justify-content: space-between;
+  align-items: flex-start;
 }
 
 .Book-thumbnail {
@@ -3926,18 +3986,31 @@
 }
 
 .Book-thumbnail img {
-  width: 100%;
+  width: 6.25rem;
+  height: 7.875rem;
+  border-radius: 0.625rem;
+  filter: drop-shadow(0 0.125rem 0.125rem rgba(200, 200, 200, 0.29458));
 }
 
 .Book-content {
-  flex: 1;
-  margin-left: 1.6875rem;
+  margin-left: 2rem;
+}
+
+.Book-eyebrow {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.688rem;
+  letter-spacing: 0.063rem;
+  text-transform: uppercase;
+  color: var(--color-text-subtle);
+  margin-top: 0;
 }
 
 .Book-title {
   color: var(--color-text);
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
   margin: 0 0 0.5rem;
 }
 
@@ -3954,20 +4027,11 @@
 
 .Book-cta span {
   margin-right: 0.6875rem;
-}
-
-@media only screen and (min-width: 48rem) {
-  .Book-inner {
-    flex-direction: column;
-  }
-
-  .Book-thumbnail {
-    width: 100%;
-  }
-
-  .Book-content {
-    margin: 1rem 0 0;
-  }
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  letter-spacing: 0.016rem;
 }
 
 #blog h1.small {
diff --git a/_content/js/jumplinks.js b/_content/js/jumplinks.js
new file mode 100644
index 0000000..df4c618
--- /dev/null
+++ b/_content/js/jumplinks.js
@@ -0,0 +1,69 @@
+/**
+ * This is a basic version of the jump links.
+ * New version will follow with parity to package site.
+ */
+(function() {
+    'use-strict'
+    async function resetNav() {
+        return new Promise((resolve, reject) => {
+            const nav = document.querySelector('.LearnNav');
+            if (!nav) {
+                reject(new Error('.LearnNav element not found.'));
+            }
+            for (let a of Array.from(nav?.children ?? [])) {
+                a.classList.remove('active');
+            }
+            resolve();
+        });
+    }
+    async function setNav() {
+        return new Promise((resolve, reject) => {
+            const nav = document.querySelector('.LearnNav');
+            if (!nav) {
+                reject(new Error('.LearnNav element not found.'));
+            }
+            for (let a of Array.from(nav?.children ?? [])) {
+                if (a.href === location.href) {
+                    a.classList.add('active');
+                    document.getElementById(location.hash.substring(1))?.scrollIntoView();
+                    break;
+                }
+            }
+            resolve();
+        });
+    }
+    function observeSections() {
+        const learnContent = document.querySelector('.Learn-body');
+        if (learnContent && learnContent.children) {
+            const callback = async (payload) => {
+                if (payload && payload.length > 0) {
+                    for (p of payload) {
+                        if (p.isIntersecting) {
+                            const {id} = p.target;
+                            const link = document.querySelector(`[href='#${id}']`);
+                            await resetNav();
+                            link.classList.add('active');
+                            break;
+                        }
+                    }
+                }
+            }
+            // rootMargin is important when multiple sections are in the observable area **on page load**.
+            // they will still be highlighted on scroll because of the root margin.
+            const ob = new IntersectionObserver(callback, {
+                threshold: 0,
+                rootMargin: '0px 0px -50% 0px',
+            });
+            for (section of learnContent.children) {
+                ob.observe(section);
+            }
+        }
+    }
+
+    setNav()
+        .then(observeSections)
+        .catch((error) => {
+            console.error(error);
+        });
+   
+})();
diff --git a/_content/js/site.js b/_content/js/site.js
index 52d04a2..0b78891 100644
--- a/_content/js/site.js
+++ b/_content/js/site.js
@@ -372,8 +372,19 @@
   }
 
   /**
-   * toggleTheme switches the preferred color scheme between auto, light, and
-   * dark.
+   * setVersionSpan sets the latest version in any span that has this selector.
+   */
+  async function setVersionSpans() {
+    const spans = document.querySelectorAll('.GoVersionSpan');
+    if (!spans) return;
+    const version = await getLatestVersion();
+    Array.from(spans).forEach(span => {
+      span.textContent = `Download (${version.replace('go', '')})`
+    });
+  }
+
+  /**
+   * toggleTheme switches the preferred color scheme between auto, light, and dark.
    */
   function toggleTheme() {
     let nextTheme = 'dark';
@@ -399,5 +410,6 @@
     registerSolutionsTabs();
     setDownloadLinks();
     setThemeButtons();
+    setVersionSpans();
   });
 })();
diff --git a/_content/learn/books.yaml b/_content/learn/books.yaml
index c46a374..981a59c 100644
--- a/_content/learn/books.yaml
+++ b/_content/learn/books.yaml
@@ -1,25 +1,25 @@
   - title: The Go Programming Language
     description: Alan A. A. Donovan, Brian W. Kernighan
-    cta: View
+    eyebrow: PDF
     url: https://www.gopl.io/
     thumbnail: /images/learn/go-programming-language-book.png
   - title: Get Programming with Go
     description: Nathan Youngman, Roger Peppé
-    cta: Manning.com
+    eyebrow: Manning.com
     url: https://www.manning.com/books/get-programming-with-go
     thumbnail: /images/learn/get-programming-with-go.jpeg
   - title: Go Programming Blueprints
     description: This is the official source code repository for the book.
-    cta: View on GitHub
+    eyebrow: GitHub
     url: https://github.com/matryer/goblueprints
     thumbnail: /images/learn/go-programming-blueprints.png
   - title: Introducing Go
     description: Caleb Doxsey
-    cta: View on O’Reilly.com
+    eyebrow: O'Reilly.com
     url: http://shop.oreilly.com/product/0636920046516.do
     thumbnail: /images/learn/introducing-go-book.png
   - title: Concurrency in Go
     description: Katherine Cox-Buday
-    cta: View on O’Reilly.com
+    eyebrow: O'Reilly.com
     url: https://www.oreilly.com/library/view/concurrency-in-go/9781491941294/
     thumbnail: /images/learn/concurrency-in-go.png
diff --git a/_content/learn/cloud.yaml b/_content/learn/cloud.yaml
index 81491ce..3bbf12b 100644
--- a/_content/learn/cloud.yaml
+++ b/_content/learn/cloud.yaml
@@ -1,25 +1,21 @@
 
   - title: Deploy Go Apps on Google Cloud Serverless Platforms
     url: https://google.qwiklabs.com/focuses/10532?parent=catalog
-    thumbnail: /images/learn/qwiklabs.png
     length: 1h 10m
     credits: 5
     rating: 4.25
   - title: Use Go Code to Work with Google Cloud Data Sources
     url: https://google.qwiklabs.com/focuses/10531?parent=catalog
-    thumbnail: /images/learn/qwiklabs.png
     length: 1h 10m
     credits: 5
     rating: 4.25
   - title: Getting Started with Go on App Engine
     url: https://google.qwiklabs.com/focuses/2754?catalog_rank=%7B%22rank%22%3A1%2C%22num_filters%22%3A0%2C%22has_search%22%3Atrue%7D&parent=catalog&search_id=5407947
-    thumbnail: /images/learn/qwiklabs.png
     length:  20m
     credits: 1
     rating: 4.15
   - title: HTTP Google Cloud Functions in Go
     url: https://google.qwiklabs.com/focuses/5171?catalog_rank=%7B%22rank%22%3A1%2C%22num_filters%22%3A0%2C%22has_search%22%3Atrue%7D&parent=catalog&search_id=5407953
-    thumbnail: /images/learn/qwiklabs.png
     length: 40m
     credits: 5
     rating: 4.5
diff --git a/_content/learn/guided.yaml b/_content/learn/guided.yaml
index 7af9c2b..b52c9d7 100644
--- a/_content/learn/guided.yaml
+++ b/_content/learn/guided.yaml
@@ -2,24 +2,14 @@
     content: Go Web Examples provides easy to understand code snippets on
       how to use Go for web development.
     url: https://gowebexamples.com
-    thumbnail: /images/learn/web-dev.png
     cta: Learn more
   - title: CLIs
     content: This workshop will walk you through building a CLI app with Go,
       introducing you to basic Go principles and CLI frameworks along the way.
     url: https://spf13.com/presentation/building-an-awesome-cli-app-in-go-oscon/
-    thumbnail: /images/learn/clis.png
     cta: Learn more
   - title: New to coding?
     content: Get started with this introductory course covering basic
       programming principles and Go fundamentals.
     url: https://www.youtube.com/watch?v=Q0sKAMal4WQ
-    thumbnail: /images/learn/edureka.png
-    cta: Learn more
-  - title: Go by example
-    content: <i>Go by Example</i> is a hands-on introduction to Go using annotated
-      example programs. It’s a great starting point to use when tackling any Go
-      project.
-    url: https://gobyexample.com/
-    thumbnail: /images/learn/gobyexample.png
     cta: Learn more
diff --git a/_content/learn/index.md b/_content/learn/index.md
index 8717bcb..b4b1c01 100644
--- a/_content/learn/index.md
+++ b/_content/learn/index.md
@@ -27,143 +27,163 @@
               target="_blank"
               rel="noopener"
             >
-              Download
+              <span class="GoVersionSpan">Download</span>
             </a>
           </div>
         </div>
-        <p>
-          Download packages for
-          <a class="js-downloadWin">Windows 64-bit</a>,
-          <a class="js-downloadMac">macOS</a>,
-          <a class="js-downloadLinux">Linux</a>, and
-          <a href="/dl/">more</a>.
-        </p>
       </div>
       <div class="Learn-heroGopher">
         <img src="/images/gophers/motorcycle.svg" alt="Go Gopher riding a motorcycle">
       </div>
     </div>
-    <div class="LearnGo-gridContainer">
-      <ul class="Learn-quickstarts Learn-cardList">
+  </div>
+</section>
+
+<div class="Learn-columns">
+  <aside class="Learn-sidebar">
+    <nav class="LearnNav">
+      <a class="active" href="#selected-tutorials">
+        <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+        <span>Selected tutorials</span>
+      </a>
+      <a href="#guided-learning-journeys">
+      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+      <span>Guided journeys</span>
+      </a>
+      <a href="#self-paced-labs">
+      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+      <span>Qwiklabs</span>
+      </a>
+      <a href="#tutorials">
+      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+      <span>Tutorials</span>
+      </a>
+      <a href="#training">
+      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+      <span>Training</span>
+      </a>
+      <a href="#featured-books">
+      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+      <span>Books</span>
+      </a>
+    </nav>
+  </aside>
+  <div class="Learn-body">
+  <section id="selected-tutorials" class="Learn-tutorials">
+    <div class="Container">
+      <div class="Learn-learningResourcesHeader">
+          <h3>Selected tutorials</h3>
+          <p>New to Go and don't know where to start?</p>
+      </div>
+      <div class="LearnGo-gridContainer">
+        <ul class="Learn-cardList">
         {{- range first 3 (data "quickstart.yaml")}}
-          <li class="Learn-quickstart Learn-card">
-            {{- template "learn-card" .}}
-          </li>
+            <li class="Learn-card">
+            {{- template "learn-card" . }}
+            </li>
         {{- end}}
-      </ul>
+        </ul>
+      </div>
     </div>
-  </div>
-</section>
+  </section>
 
-<section class="Learn-learningResources">
-  <h2>Learning Resources</h2>
-</section>
-
-<section id="guided-learning-journeys" class="Learn-guided">
-  <div class="Container">
-    <div class="Learn-learningResourcesHeader">
-      <h3>Guided learning journeys</h3>
+  <section id="guided-learning-journeys" class="Learn-guided">
+    <div class="Container">
+      <div class="Learn-learningResourcesHeader">
+        <h3>Guided learning journeys</h3>
+        <p>Got the basics and want to learn more?</p>
+      </div>
+      <div class="LearnGo-gridContainer">
+        <ul class="Learn-cardList">
+          {{- range first 4 (data "guided.yaml")}}
+            <li class="Learn-card">
+              {{- template "learn-card" .}}
+            </li>
+          {{- end}}
+        </ul>
+      </div>
     </div>
-    <div class="LearnGo-gridContainer">
-      <ul class="Learn-cardList">
-        {{- range first 4 (data "guided.yaml")}}
+  </section>
+
+  <section id="self-paced-labs" class="Learn-selfPaced">
+    <div class="Container">
+      <div class="Learn-learningResourcesHeader">
+        <h3>Qwiklabs</h3>
+        <p>Guided tours of Go programs</p>
+      </div>
+      <div class="LearnGo-gridContainer">
+        <ul class="Learn-cardList">
+          {{- range first 3 (data "cloud.yaml")}}
           <li class="Learn-card">
-            {{- template "learn-card" .}}
+            {{- template "learn-self-paced-card" .}}
           </li>
-        {{- end}}
-      </ul>
-    </div>
-  </div>
-</section>
-
-<section id="online-learning" class="Learn-online">
-  <div class="Container">
-    <div class="Learn-learningResourcesHeader">
-      <h3>Online learning</h3>
-    </div>
-    <div class="LearnGo-gridContainer">
-      <ul class="Learn-cardList">
-        {{- range first 4 (data "courses.yaml") }}
-          <li class="Learn-card">
-            {{- template "learn-card" .}}
           </li>
-        {{- end}}
-      </ul>
+          {{- end}}
+        </ul>
+      </div>
     </div>
-  </div>
-</section>
+  </section>
 
-<section id="self-paced-labs" class="Learn-selfPaced">
-  <div class="Container">
-    <div class="Learn-learningResourcesHeader">
-      <h3>Google Cloud Self-Paced Labs</h3>
+  <section id="tutorials" class="Learn-tutorials">
+    <div class="Container">
+      <div class="Learn-learningResourcesHeader">
+        <h3>Tutorials</h3>
+        <p></p>
+      </div>
+      <div class="LearnGo-gridContainer">
+        <ul class="Learn-cardList">
+          {{- range first 3 (data "tutorials.yaml") }}
+            <li class="Learn-card">
+              {{- template "learn-card" .}}
+            </li>
+          {{- end}}
+        </ul>
+      </div>
     </div>
-    <div class="LearnGo-gridContainer">
-      <ul class="Learn-cardList">
-        {{- range first 4 (data "cloud.yaml")}}
-        <li class="Learn-card">
-          {{- template "learn-self-paced-card" .}}
-        </li>
-        </li>
-        {{- end}}
-      </ul>
-    </div>
-  </div>
-</section>
+  </section>
 
-<section id="tutorials" class="Learn-tutorials">
-  <div class="Container">
-    <div class="Learn-learningResourcesHeader">
-      <h3>Tutorials</h3>
-    </div>
-    <div class="LearnGo-gridContainer">
-      <ul class="Learn-cardList">
-        {{- range first 4 (data "tutorials.yaml") }}
-          <li class="Learn-card">
-            {{- template "learn-card" .}}
+  <section id="training" class="Learn-inPersonTraining">
+    <div class="Container">
+      <div class="Learn-learningResourcesHeader">
+        <h3>Training</h3>
+        <p>Guided tours of Go programs</p>
+      </div>
+      <div class="LearnGo-gridContainer">
+        <ul class="Learn-inPersonList">
+          {{- range first 4 (data "training.yaml")}}
+          <li class="Learn-inPerson">
+            <p class="Learn-inPersonTitle">
+              <a href="{{.url}}">{{.title}} </a>
+            </p>
+            <p class="Learn-inPersonBlurb">{{.blurb}}</p>
           </li>
-        {{- end}}
-      </ul>
+          {{- end}}
+        </ul>
+      </div>
     </div>
-  </div>
-</section>
+  </section>
 
-<section id="featured-books" class="Learn-books">
-  <div class="Container">
-    <div class="Learn-learningResourcesHeader">
-      <h3>Featured books</h3>
+  <section id="featured-books" class="Learn-books">
+    <div class="Container">
+      <div class="Learn-learningResourcesHeader">
+        <h3>Books</h3>
+        <p></p>
+      </div>
+      <div class="LearnGo-gridContainer">
+        <ul class="Learn-cardList Learn-bookList">
+          {{- range first 5 (data "books.yaml")}}
+            <li class="Learn-card Learn-book">
+              {{template "learn-book" .}}
+            </li>
+          {{- end}}
+        </ul>
+      </div>
     </div>
-    <div class="LearnGo-gridContainer">
-      <ul class="Learn-cardList Learn-bookList">
-        {{- range first 5 (data "books.yaml")}}
-          <li class="Learn-card Learn-book">
-            {{template "learn-book" .}}
-          </li>
-        {{- end}}
-      </ul>
-    </div>
+  </section>
   </div>
-</section>
+</div>
 
-<section class="Learn-inPersonTraining">
-  <div class="Container">
-    <div class="Learn-learningResourcesHeader">
-      <h3>In-person training</h3>
-    </div>
-    <div class="LearnGo-gridContainer">
-      <ul class="Learn-inPersonList">
-        {{- range first 4 (data "training.yaml")}}
-        <li class="Learn-inPerson">
-          <p class="Learn-inPersonTitle">
-            <a href="{{.url}}">{{.title}} </a>
-          </p>
-          <p class="Learn-inPersonBlurb">{{.blurb}}</p>
-        </li>
-        {{- end}}
-      </ul>
-    </div>
-  </div>
-</section>
+<script async src="/js/jumplinks.js"></script>
 
 {{define "learn-card"}}
 <div class="Card">
@@ -187,24 +207,10 @@
     {{- end}}
     <div class="Card-content">
       <div class="Card-contentTitle">{{.title}}</div>
-      <p class="Card-contentBody">{{raw .content}}</p>
+      <p class="Card-contentBody Card-lineClamp">{{raw .content}}</p>
       <div class="Card-contentCta">
         <a href="{{.url}}" target="_blank">
           <span>{{.cta}}</span>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="#007D9C"
-              fill-rule="evenodd"
-              d="M5 5v14h14v-7h2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5c0-1.1.9-2 2-2h7v2H5zm9 0V3h7v7h-2V6.4l-9.8 9.8-1.4-1.4L17.6 5H14z"
-              clip-rule="evenodd"
-            />
-          </svg>
         </a>
       </div>
     </div>
@@ -249,24 +255,11 @@
       </div>
       {{- end}}
       <div class="Book-content">
+        <p class="Book-eyebrow">{{.eyebrow}}</p>
         <p class="Book-title">{{.title}}</p>
         <p class="Book-description">{{.description}}</p>
         <div class="Book-cta">
-          <span>{{.cta}}</span>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="#007D9C"
-              fill-rule="evenodd"
-              d="M5 5v14h14v-7h2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5c0-1.1.9-2 2-2h7v2H5zm9 0V3h7v7h-2V6.4l-9.8 9.8-1.4-1.4L17.6 5H14z"
-              clip-rule="evenodd"
-            />
-          </svg>
+          <span>view book</span>
         </div>
       </div>
     </div>
diff --git a/_content/learn/quickstart.yaml b/_content/learn/quickstart.yaml
index 928be0b..dd5c3f2 100644
--- a/_content/learn/quickstart.yaml
+++ b/_content/learn/quickstart.yaml
@@ -8,8 +8,9 @@
       concludes with a few exercises so you can practice what you've learned.
     cta: Take a tour
     url: /tour/
-  - title: Playground
-    content: The Playground allows anyone with a web browser to write Go code
-      that we immediately compile, link, and run on our servers.
-    cta: Go to playground
-    url: /play
+  - title: Go by example
+    content: <i>Go by Example</i> is a hands-on introduction to Go using annotated
+      example programs. It’s a great starting point to use when tackling any Go
+      project.
+    url: https://gobyexample.com/
+    cta: View examples