diff --git a/js/filter-tutorial-tags.js b/js/filter-tutorial-tags.js
new file mode 100644
index 00000000..99331dc6
--- /dev/null
+++ b/js/filter-tutorial-tags.js
@@ -0,0 +1,61 @@
+window.filterTags = {
+  bind: function() {
+    var options = {
+      valueNames: [{ data: ["tags"] }],
+      page: "18"
+    };
+
+    var tutorialList = new List("tutorial-cards", options);
+
+    function filterSelectedTags(cardTags, selectedTags) {
+      return cardTags.some(function(tag) {
+        return selectedTags.some(function(selectedTag) {
+          return selectedTag == tag;
+        });
+      });
+    }
+
+    function updateList() {
+      var selectedTags = [];
+
+      $(".selected").each(function() {
+        selectedTags.push($(this).data("tag"));
+      });
+
+      tutorialList.filter(function(item) {
+        var cardTags;
+
+        if (item.values().tags == null) {
+          cardTags = [""];
+        } else {
+          cardTags = item.values().tags.split(",");
+        }
+
+        if (selectedTags.length == 0) {
+          return true;
+        } else {
+          return filterSelectedTags(cardTags, selectedTags);
+        }
+      });
+      $("[data-tags='null']").remove();
+    }
+
+    $(".filter-btn").on("click", function() {
+      if ($(this).data("tag") == "all") {
+        $(this).addClass("all-tag-selected");
+        $(".filter").removeClass("selected");
+      } else {
+        $(this).toggleClass("selected");
+        $("[data-tag='all']").removeClass("all-tag-selected");
+      }
+
+      // If no tags are selected then highlight the 'All' tag
+
+      if (!$(".selected")[0]) {
+        $("[data-tag='all']").addClass("all-tag-selected");
+      }
+
+      updateList();
+    });
+  }
+};
diff --git a/js/theme.js b/js/theme.js
index 123d0e7c..ed7d0479 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -286,3 +286,52 @@ if ($("p.caption:first").text() == "Notes") {
         $("p.caption:first").next("ul").toggle();
     }
 }
+
+// Get the card link from the card's link attribute
+
+$(".tutorials-card").on("click", function() {
+    window.location = $(this).attr("link");
+});
+
+// Build an array from each tag that's present
+
+var tagList = $(".tutorials-card-container").map(function() {
+    return $(this).data("tags").split(",").map(function(item) {
+        return item.trim();
+      });
+}).get();
+
+function unique(value, index, self) {
+      return self.indexOf(value) == index && value != ""
+    }
+
+// Only return unique tags
+
+var tags = tagList.filter(unique);
+
+// Add filter buttons to the top of the page for each tag
+
+function createTagMenu() {
+    tags.forEach(function(item){
+    $(".tutorial-filter-menu").append(" <div class='tutorial-filter filter-btn filter' data-tag='" + item + "'>" + item + "</div>")
+  })
+};
+
+createTagMenu();
+
+// Remove hyphens if they are present in the filter buttons
+
+$(".tags").each(function(){
+    var tags = $(this).text().split(",");
+    tags.forEach(function(tag, i ) {
+       tags[i] = tags[i].replace(/-/, ' ')
+    })
+    $(this).html(tags.join(", "));
+});
+
+// Remove hyphens if they are present in the card body
+
+$(".tutorial-filter").each(function(){
+    var tag = $(this).text();
+    $(this).html(tag.replace(/-/, ' '))
+})
diff --git a/pytorch_sphinx_theme/layout.html b/pytorch_sphinx_theme/layout.html
index d60f2bf6..5145115f 100644
--- a/pytorch_sphinx_theme/layout.html
+++ b/pytorch_sphinx_theme/layout.html
@@ -315,6 +315,7 @@
 
   <script type="text/javascript" src="{{ pathto('_static/js/vendor/popper.min.js', 1) }}"></script>
   <script type="text/javascript" src="{{ pathto('_static/js/vendor/bootstrap.min.js', 1) }}"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
   <script type="text/javascript" src="{{ pathto('_static/js/theme.js', 1) }}"></script>
 
   <script type="text/javascript">
@@ -502,6 +503,10 @@ <h2>Resources</h2>
       scrollToAnchor.bind();
       highlightNavigation.bind();
       mainMenuDropdown.bind();
+      filterTags.bind();
+
+      // Remove any empty p tags that Sphinx adds
+      $("[data-tags='null']").remove();
 
       // Add class to links that have code blocks, since we cannot create links in code blocks
       $("article.pytorch-article a span.pre").each(function(e) {
diff --git a/pytorch_sphinx_theme/static/css/theme.css b/pytorch_sphinx_theme/static/css/theme.css
index 3cef647c..59a11955 100644
--- a/pytorch_sphinx_theme/static/css/theme.css
+++ b/pytorch_sphinx_theme/static/css/theme.css
@@ -11214,6 +11214,233 @@ a:hover {
   color: #e44c2c;
 }
 
+#tutorial-cards-container #tutorial-cards {
+  width: 100%;
+}
+#tutorial-cards-container .tutorials-nav {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+#tutorial-cards-container .tutorials-hr {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+#tutorial-cards-container .card.tutorials-card {
+  border-radius: 0;
+  border-color: #f3f4f7;
+  height: 110px;
+  margin-bottom: 1.25rem;
+  margin-bottom: 1.875rem;
+  overflow: scroll;
+  background-color: #f3f4f7;
+  cursor: pointer;
+}
+@media screen and (min-width: 1240px) {
+  #tutorial-cards-container .card.tutorials-card {
+    height: 200px;
+    overflow: inherit;
+  }
+}
+@media (min-width: 768px) and (max-width: 1239px) {
+  #tutorial-cards-container .card.tutorials-card {
+    height: 200px;
+    overflow: inherit;
+  }
+}
+#tutorial-cards-container .card.tutorials-card .tutorials-image {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  height: 100%;
+  width: 25%;
+  opacity: 0.5;
+}
+#tutorial-cards-container .card.tutorials-card .tutorials-image img {
+  height: 100%;
+  width: 100%;
+}
+#tutorial-cards-container .card.tutorials-card .tutorials-image:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  background: #000000;
+  opacity: .075;
+}
+#tutorial-cards-container .card.tutorials-card .card-title-container {
+  width: 75%;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+#tutorial-cards-container .card.tutorials-card .card-title-container h4 {
+  margin-bottom: 1.125rem;
+  margin-top: 0;
+  font-size: 1.5rem;
+}
+#tutorial-cards-container .card.tutorials-card p.card-summary, #tutorial-cards-container .card.tutorials-card p.tags {
+  font-size: 0.9375rem;
+  line-height: 1.5rem;
+  margin-bottom: 0;
+  color: #6c6c6d;
+  font-weight: 400;
+  width: 75%;
+}
+#tutorial-cards-container .card.tutorials-card p.tags {
+  margin-top: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#tutorial-cards-container .card.tutorials-card h4 {
+  color: #262626;
+  margin-bottom: 1.125rem;
+}
+#tutorial-cards-container .card.tutorials-card a {
+  height: 100%;
+}
+@media screen and (min-width: 768px) {
+  #tutorial-cards-container .card.tutorials-card a {
+    min-height: 190px;
+  }
+}
+@media (min-width: 768px) and (max-width: 1239px) {
+  #tutorial-cards-container .card.tutorials-card a {
+    min-height: 234px;
+  }
+}
+@media screen and (min-width: 768px) {
+  #tutorial-cards-container .card.tutorials-card:after {
+    content: "";
+    display: block;
+    width: 0;
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: #e44c2c;
+    -webkit-transition: width .250s ease-in-out;
+    transition: width .250s ease-in-out;
+  }
+  #tutorial-cards-container .card.tutorials-card:hover:after {
+    width: 100%;
+  }
+}
+#tutorial-cards-container .card.tutorials-card:hover {
+  background-color: #ffffff;
+  border: 1px solid #e2e2e2;
+  border-bottom: none;
+}
+#tutorial-cards-container .card.tutorials-card:hover p.card-summary {
+  color: #262626;
+}
+#tutorial-cards-container .card.tutorials-card:hover .tutorials-image {
+  opacity: unset;
+}
+#tutorial-cards-container .tutorial-tags-container {
+  width: 75%;
+}
+#tutorial-cards-container .tutorial-tags-container.active {
+  width: 0;
+}
+#tutorial-cards-container .tutorial-filter-menu ul {
+  list-style-type: none;
+  padding-left: 1.25rem;
+}
+#tutorial-cards-container .tutorial-filter-menu ul li {
+  padding-right: 1.25rem;
+  word-break: break-all;
+}
+#tutorial-cards-container .tutorial-filter-menu ul li a {
+  color: #979797;
+}
+#tutorial-cards-container .tutorial-filter-menu ul li a:hover {
+  color: #e44c2c;
+}
+#tutorial-cards-container .tutorial-filter {
+  cursor: pointer;
+}
+#tutorial-cards-container .filter-btn {
+  color: #979797;
+  border: 1px solid #979797;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-bottom: 5px;
+}
+#tutorial-cards-container .filter-btn:hover {
+  border: 1px solid #e44c2c;
+  color: #e44c2c;
+}
+#tutorial-cards-container .filter-btn.selected {
+  background-color: #e44c2c;
+  border: 1px solid #e44c2c;
+  color: #ffffff;
+}
+#tutorial-cards-container .all-tag-selected {
+  background-color: #979797;
+  color: #ffffff;
+}
+#tutorial-cards-container .all-tag-selected:hover {
+  border-color: #979797;
+  color: #ffffff;
+}
+
+article.pytorch-article .tutorials-callout-container {
+  padding-bottom: 50px;
+}
+article.pytorch-article .tutorials-callout-container .col-md-6 {
+  padding-bottom: 10px;
+}
+article.pytorch-article .tutorials-callout-container .text-container {
+  padding: 10px 0px 30px 0px;
+  padding-bottom: 10px;
+}
+article.pytorch-article .tutorials-callout-container .text-container .body-paragraph {
+  color: #666666;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.875rem;
+}
+article.pytorch-article .tutorials-callout-container .btn.callout-button {
+  font-size: 1.125rem;
+  border-radius: 0;
+  border: none;
+  background-color: #f3f4f7;
+  color: #6c6c6d;
+  font-weight: 400;
+  position: relative;
+  letter-spacing: 0.25px;
+}
+@media screen and (min-width: 768px) {
+  article.pytorch-article .tutorials-callout-container .btn.callout-button:after {
+    content: "";
+    display: block;
+    width: 0;
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: #e44c2c;
+    -webkit-transition: width .250s ease-in-out;
+    transition: width .250s ease-in-out;
+  }
+  article.pytorch-article .tutorials-callout-container .btn.callout-button:hover:after {
+    width: 100%;
+  }
+}
+article.pytorch-article .tutorials-callout-container .btn.callout-button a {
+  color: inherit;
+}
+
 .pytorch-container {
   margin: 0 auto;
   padding: 0 1.875rem;
diff --git a/pytorch_sphinx_theme/static/js/theme.js b/pytorch_sphinx_theme/static/js/theme.js
index 40571d84..fc578522 100644
--- a/pytorch_sphinx_theme/static/js/theme.js
+++ b/pytorch_sphinx_theme/static/js/theme.js
@@ -147,6 +147,69 @@ $(function() {
 });
 
 },{}],3:[function(require,module,exports){
+window.filterTags = {
+  bind: function() {
+    var options = {
+      valueNames: [{ data: ["tags"] }],
+      page: "18"
+    };
+
+    var tutorialList = new List("tutorial-cards", options);
+
+    function filterSelectedTags(cardTags, selectedTags) {
+      return cardTags.some(function(tag) {
+        return selectedTags.some(function(selectedTag) {
+          return selectedTag == tag;
+        });
+      });
+    }
+
+    function updateList() {
+      var selectedTags = [];
+
+      $(".selected").each(function() {
+        selectedTags.push($(this).data("tag"));
+      });
+
+      tutorialList.filter(function(item) {
+        var cardTags;
+
+        if (item.values().tags == null) {
+          cardTags = [""];
+        } else {
+          cardTags = item.values().tags.split(",");
+        }
+
+        if (selectedTags.length == 0) {
+          return true;
+        } else {
+          return filterSelectedTags(cardTags, selectedTags);
+        }
+      });
+      $("[data-tags='null']").remove();
+    }
+
+    $(".filter-btn").on("click", function() {
+      if ($(this).data("tag") == "all") {
+        $(this).addClass("all-tag-selected");
+        $(".filter").removeClass("selected");
+      } else {
+        $(this).toggleClass("selected");
+        $("[data-tag='all']").removeClass("all-tag-selected");
+      }
+
+      // If no tags are selected then highlight the 'All' tag
+
+      if (!$(".selected")[0]) {
+        $("[data-tag='all']").addClass("all-tag-selected");
+      }
+
+      updateList();
+    });
+  }
+};
+
+},{}],4:[function(require,module,exports){
 // Modified from https://stackoverflow.com/a/32396543
 window.highlightNavigation = {
   navigationListItems: document.querySelectorAll("#pytorch-right-menu li"),
@@ -219,7 +282,7 @@ window.highlightNavigation = {
   }
 };
 
-},{}],4:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
 window.mainMenuDropdown = {
   bind: function() {
     $("[data-toggle='ecosystem-dropdown']").on("click", function() {
@@ -246,7 +309,7 @@ window.mainMenuDropdown = {
   }
 };
 
-},{}],5:[function(require,module,exports){
+},{}],6:[function(require,module,exports){
 window.mobileMenu = {
   bind: function() {
     $("[data-behavior='open-mobile-menu']").on('click', function(e) {
@@ -278,7 +341,7 @@ window.mobileMenu = {
   }
 };
 
-},{}],6:[function(require,module,exports){
+},{}],7:[function(require,module,exports){
 window.mobileTOC = {
   bind: function() {
     $("[data-behavior='toggle-table-of-contents']").on("click", function(e) {
@@ -299,7 +362,7 @@ window.mobileTOC = {
   }
 }
 
-},{}],7:[function(require,module,exports){
+},{}],8:[function(require,module,exports){
 window.pytorchAnchors = {
   bind: function() {
     // Replace Sphinx-generated anchors with anchorjs ones
@@ -319,7 +382,7 @@ window.pytorchAnchors = {
   }
 };
 
-},{}],8:[function(require,module,exports){
+},{}],9:[function(require,module,exports){
 // Modified from https://stackoverflow.com/a/13067009
 // Going for a JS solution to scrolling to an anchor so we can benefit from
 // less hacky css and smooth scrolling.
@@ -420,7 +483,7 @@ window.scrollToAnchor = {
   }
 };
 
-},{}],9:[function(require,module,exports){
+},{}],10:[function(require,module,exports){
 window.sideMenus = {
   rightMenuIsOnScreen: function() {
     return document.getElementById("pytorch-content-right").offsetParent !== null;
@@ -919,4 +982,53 @@ if ($("p.caption:first").text() == "Notes") {
     }
 }
 
-},{"jquery":"jquery"}]},{},[1,2,3,4,5,6,7,8,9,"pytorch-sphinx-theme"]);
+// Get the card link from the card's link attribute
+
+$(".tutorials-card").on("click", function() {
+    window.location = $(this).attr("link");
+});
+
+// Build an array from each tag that's present
+
+var tagList = $(".tutorials-card-container").map(function() {
+    return $(this).data("tags").split(",").map(function(item) {
+        return item.trim();
+      });
+}).get();
+
+function unique(value, index, self) {
+      return self.indexOf(value) == index && value != ""
+    }
+
+// Only return unique tags
+
+var tags = tagList.filter(unique);
+
+// Add filter buttons to the top of the page for each tag
+
+function createTagMenu() {
+    tags.forEach(function(item){
+    $(".tutorial-filter-menu").append(" <div class='tutorial-filter filter-btn filter' data-tag='" + item + "'>" + item + "</div>")
+  })
+};
+
+createTagMenu();
+
+// Remove hyphens if they are present in the filter buttons
+
+$(".tags").each(function(){
+    var tags = $(this).text().split(",");
+    tags.forEach(function(tag, i ) {
+       tags[i] = tags[i].replace(/-/, ' ')
+    })
+    $(this).html(tags.join(", "));
+});
+
+// Remove hyphens if they are present in the card body
+
+$(".tutorial-filter").each(function(){
+    var tag = $(this).text();
+    $(this).html(tag.replace(/-/, ' '))
+})
+
+},{"jquery":"jquery"}]},{},[1,2,3,4,5,6,7,8,9,10,"pytorch-sphinx-theme"]);
diff --git a/scss/_sphinx_base.scss b/scss/_sphinx_base.scss
index 32919056..08116a0e 100644
--- a/scss/_sphinx_base.scss
+++ b/scss/_sphinx_base.scss
@@ -949,3 +949,222 @@ a:hover {
     }
   }
 }
+
+#tutorial-cards-container {
+
+  #tutorial-cards {
+    width: 100%;
+  }
+
+  .tutorials-nav {
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+
+  .tutorials-hr {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .card.tutorials-card {
+    border-radius: 0;
+    border-color: $light_grey;
+    height: 110px;
+    margin-bottom: rem(20px);
+    margin-bottom: rem(30px);
+    overflow: scroll;
+    background-color: $light_grey;
+    cursor: pointer;
+
+    @include max-width-desktop {
+      height: 200px;
+      overflow: inherit;
+    }
+
+    @include small-desktop {
+      height: 200px;
+      overflow: inherit;
+    }
+
+    .tutorials-image {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      height: 100%;
+      width: 25%;
+      opacity: 0.5;
+      img {
+        height: 100%;
+        width: 100%;
+      }
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 1;
+        background: #000000;
+        opacity: .075;
+      }
+    }
+
+    .card-title-container {
+      width: 75%;
+      display: inline-flex;
+      h4 {
+        margin-bottom: 1.125rem;
+        margin-top: 0;
+        font-size: 1.5rem;
+      }
+    }
+
+    p.card-summary, p.tags {
+      font-size: rem(15px);
+      line-height: rem(24px);
+      margin-bottom: 0;
+      color: $dark_grey;
+      font-weight: 400;
+      width: 75%;
+    }
+
+    p.tags {
+      margin-top: 30px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    h4 {
+      color: $slate;
+      margin-bottom: rem(18px);
+    }
+
+    a {
+      height: 100%;
+
+      @include desktop {
+        min-height: 190px;
+      }
+
+      @include small-desktop {
+        min-height: 234px;
+      }
+    }
+
+    @include animated_border_hover_state;
+    &:hover {
+      background-color: $white;
+      border: 1px solid #e2e2e2;
+      border-bottom: none;
+
+      p.card-summary {
+        color: $not_quite_black;
+      }
+
+      .tutorials-image {
+        opacity: unset;
+      }
+    }
+  }
+
+  .tutorial-tags-container {
+    width: 75%;
+
+    &.active {
+      width: 0;
+    }
+  }
+
+  .tutorial-filter-menu {
+    ul {
+      list-style-type: none;
+      padding-left: rem(20px);
+      li {
+        padding-right: rem(20px);
+        word-break: break-all;
+
+        a {
+        color: #979797;
+        &:hover {
+          color: $orange;
+          }
+        }
+      }
+    }
+  }
+
+  .tutorial-filter {
+    cursor: pointer;
+  }
+
+  .filter-btn {
+    color: #979797;
+    border: 1px solid #979797;
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-bottom: 5px;
+    &:hover {
+      border: 1px solid $orange;
+      color: $orange;
+    }
+    &.selected {
+      background-color: $orange;
+      border: 1px solid $orange;
+      color: $white;
+    }
+  }
+
+  .all-tag-selected {
+    background-color: #979797;
+    color: $white;
+    &:hover {
+      border-color: #979797;
+      color: $white;
+    }
+  }
+}
+
+article.pytorch-article {
+  .tutorials-callout-container {
+    padding-bottom: 50px;
+
+    .col-md-6 {
+      padding-bottom: 10px;
+    }
+
+    .text-container {
+      padding: 10px 0px 30px 0px;
+      padding-bottom: 10px;
+
+      .body-paragraph {
+        color: #666666;
+        font-weight: 300;
+        font-size: rem(18px);
+        line-height: rem(30px);
+      }
+    }
+
+    .btn.callout-button {
+      font-size: rem(18px);
+      border-radius: 0;
+      border: none;
+      background-color: $light_grey;
+      color: $quick_start_grey;
+      font-weight: 400;
+      position: relative;
+      letter-spacing: 0.25px;
+      @include animated_border_hover_state;
+      a {
+        color: inherit;
+      }
+    }
+  }
+}