diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 3a8d51ee80..463d0f9b5a 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -28,14 +28,14 @@ jobs:
         uses: actions/configure-pages@v2
 
       - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2 
+        uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: 'latest'
           extended: true
-          
+
       - name: Build
         run: make build-prod
-        
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
@@ -52,7 +52,7 @@ jobs:
         id: deployment
         uses: actions/deploy-pages@v1
 
-  generate-index:
+  generate-index-and-tutorials-collection:
     needs: build
     if: github.repository_owner == 'viamrobotics'
     runs-on: [self-hosted, x64]
@@ -74,5 +74,13 @@ jobs:
           echo TYPESENSE_PORT=443 >> typesense.env
           echo TYPESENSE_PROTOCOL=https >> typesense.env
 
+      - name: Upload tutorials documents
+        run: |
+          jq -c '.[]' ./public/tutorials/typesense.json > documents.jsonl
+          curl -H "X-TYPESENSE-API-KEY: ${TYPESENSE_API_KEY}" \
+          -X POST \
+          -T documents.jsonl \
+          "https://cgnvrk0xwyj9576lp-1.a1.typesense.net/collections/tutorials/documents/import?action=upsert"
+
       - name: Index
         run:  docker run --env-file=typesense.env -e "CONFIG=$(cat docsearch.json)" typesense/docsearch-scraper
diff --git a/.htmltest.yml b/.htmltest.yml
index b4915f8c6c..d5c7a7d820 100644
--- a/.htmltest.yml
+++ b/.htmltest.yml
@@ -22,6 +22,7 @@ IgnoreURLs:
 - "slamtec.com"
 - "softroboticsinc.com"
 - "universal-robots.com"
+- "digikey.com"
 - "ufactory.cc"
 IgnoreDirs:
 - "lib"
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 40e701aae7..73ea5db6b7 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -562,10 +562,12 @@ END MARKETING CSS
 .hover-card.tutorial {
   background-color: white;
   padding: 10px;
+  margin: 1rem 0.8rem 1rem 0.2rem;
 }
 
 .hover-card.tutorial > a {
   width: 100%;
+  text-decoration: none;
 }
 
 // Text is black
@@ -644,6 +646,11 @@ END MARKETING CSS
  font-weight: 400 !important;
 }
 
+.hover-card.tutorial * .pills > .pill.pill-highlight {
+  background-color: #000;
+  color: white;
+}
+
 .hover-card.tutorial * .pill.pill-lang {
   border-color: #00e8e8;
 }
@@ -1130,3 +1137,158 @@ ul.sectionlist > li:hover {
   padding: 0;
   font-size: 30px;
 }
+
+.td-sidebar__toggle {
+  float: right;
+}
+
+// Tutorials page start
+
+.search-panel__results.card-container {
+  max-width: 100%;
+}
+
+#tutorial-menu {
+  display: flex;
+  flex-direction: column;
+  max-width: 600px;
+}
+
+#tutorial-filters, #tutorial-filter-items {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#tutorial-filters > .filter {
+  text-decoration: none;
+  color: black;
+  padding: 0.2rem 1rem;
+  margin: 0.2rem;
+  border: 1px solid black;
+}
+
+.ais-Hits-item {
+  display: flex;
+}
+
+#hits .ais-Hits-list {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.search-panel__filters {
+  display: flex;
+}
+
+.search-facets {
+  width: 100%;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.search-facets > ul {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.2rem;
+  padding: 0;
+}
+
+.search-facets * li {
+  list-style: none;
+  margin: 0.2rem
+}
+
+.search-facets * label {
+  margin: 0;
+}
+
+.search-facets * input {
+  padding: 0.1rem 0.25rem;
+  border: 1px solid black;
+  margin: 0.1rem;
+  font-size: 0.833rem !important;
+  font-weight: 400 !important;
+  line-height: 1.4375em;
+  background-color: whitesmoke;
+}
+
+.search-facets * input.refined {
+  background-color: #000;
+  color: white;
+}
+
+#components-list * input,
+#services-list * input {
+  border-color: #a51aff;
+}
+
+#languages-list * input {
+  border-color: #00e8e8;
+}
+
+.ais-Hits-list {
+  padding: 0;
+}
+
+// Pagination CSS start
+
+#pagination {
+  margin: 2rem auto;
+}
+
+.ais-Pagination-item {
+  display: inline-block;
+}
+
+span.ais-Pagination-link {
+  background-color: #e7e5e4;
+}
+
+.ais-Pagination-item.ais-Pagination-item--selected > a.ais-Pagination-link {
+  background-color: #000;
+  color: white;
+}
+
+.ais-Pagination-link {
+  text-decoration: none;
+  color: black;
+  padding: 0.2rem 1rem;
+  margin: 0 0.2rem;
+  border: 1px solid black;
+}
+
+a.ais-Pagination-link:hover {
+  color: black;
+  background-color: #e7e5e4;
+}
+
+.ais-Pagination-list {
+  text-align: center;
+  padding: 0;
+}
+// Pagination CSS end
+
+// Tutorials page end
+
+// Search-autocomplete start
+
+.algolia-autocomplete {
+  flex-grow: 1;
+}
+
+// Search-autocomplete end
+
+// Make videos work without js
+
+.no-js * .lozad {
+  display: none;
+}
+
+// ensure tutorials page is 100% of height
+
+.row.flex-xl-nowrap {
+  min-height: 100%;
+}
\ No newline at end of file
diff --git a/config.toml b/config.toml
index ef69a73780..a16002c01b 100644
--- a/config.toml
+++ b/config.toml
@@ -48,7 +48,13 @@ weight = 1
     codeFences = true
 
 [outputs]
-section = ["HTML"]
+section = ["HTML", "Typesense"]
+
+[outputFormats.Typesense]
+baseName = "typesense"
+isPlainText = true
+mediaType = "application/json"
+notAlternative = true
 
 [params]
 copyright = "Viam, Inc. - Documentation is licensed under Creative Commons ShareAlike License. "
diff --git a/docs/tutorials/_index.md b/docs/tutorials/_index.md
index 858dc3b38f..b210af441d 100644
--- a/docs/tutorials/_index.md
+++ b/docs/tutorials/_index.md
@@ -3,6 +3,7 @@ title: "Tutorials"
 linkTitle: "Tutorials"
 weight: 65
 type: docs
+layout: "tutorials"
 webmSrc: "/tutorials/videos/scuttle-gamepad-preview.webm"
 mp4Src: "/tutorials/videos/scuttle-gamepad-preview.mp4"
 videoAlt: "Drive a Scuttle robot with a Bluetooth gamepad."
@@ -13,75 +14,4 @@ sitemap:
   priority: 1.0
 aliases:
     - "/build/"
----
-
-{{< alert title="Tip" color="tip" >}}
-While following a tutorial may require specific hardware, the hardware only affects the part of a project where you configure your components.
-If you are using different hardware your configuration will be different but you can still use the **same tutorial code**.
-
-For this reason, we list tutorials based on features you may be looking for.
-{{< /alert >}}
-
-## Your first robots
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/get-started/try-viam-sdk" %}}
-    {{% tutorialcard link="/tutorials/get-started/blink-an-led/" %}}
-    {{% tutorialcard link="/tutorials/get-started/servo-mousemover/" %}}
-    {{% tutorialcard link="/tutorials/get-started/confetti-bot/" %}}
-    {{% tutorialcard link="/tutorials/get-started/lazy-susan/" %}}
-{{< /cards >}}
-
-## Configuration and Testing
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/configure/build-a-mock-robot/" %}}
-    {{% tutorialcard link="/tutorials/configure/scuttlebot/" %}}
-{{< /cards >}}
-
-## Controlling
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/control/scuttle-gamepad/" %}}
-    {{% tutorialcard link="/tutorials/control/yahboom-rover/" %}}
-{{< /cards >}}
-
-## Services
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/services/accessing-and-moving-robot-arm/" %}}
-    {{% tutorialcard link="/tutorials/services/plan-motion-with-arm-gripper/" %}}
-    {{% tutorialcard link="/tutorials/services/constrain-motion/" %}}
-    {{% tutorialcard link="/tutorials/services/data-management-tutorial/" %}}
-    {{% tutorialcard link="/tutorials/services/try-viam-color-detection" %}}
-    {{% tutorialcard link="/tutorials/services/color-detection-scuttle/" %}}
-    {{% tutorialcard link="/tutorials/services/webcam-line-follower-robot/" %}}
-{{< /cards >}}
-
-## Custom Resources
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/custom/custom-base-dog/" %}}
-    {{% tutorialcard link="/tutorials/custom/controlling-an-intermode-rover-canbus/" %}}
-{{< /cards >}}
-
-## Projects
-
-{{< cards >}}
-    {{% tutorialcard link="/tutorials/projects/make-a-plant-watering-robot/" %}}
-    {{% tutorialcard link="/tutorials/projects/foam-dart-launcher/" %}}
-    {{% tutorialcard link="/tutorials/projects/light-up/" %}}
-    {{% tutorialcard link="/tutorials/projects/send-security-photo/" %}}
-    {{% tutorialcard link="/tutorials/projects/guardian/" %}}
-    {{% tutorialcard link="/tutorials/projects/integrating-viam-with-openai/" %}}
-    {{% tutorialcard link="/tutorials/projects/modernize-retro-robot/" %}}
-    {{% tutorialcard link="/tutorials/projects/build-an-outdoor-rover/" %}}
-    {{% tutorialcard link="/tutorials/projects/pet-treat-dispenser/" %}}
-    {{% tutorialcard link="/tutorials/projects/tipsy/" %}}
-    {{% tutorialcard link="/tutorials/projects/claw-game/" %}}
-    {{% tutorialcard link="/tutorials/projects/bedtime-songs-bot/" %}}
-{{< /cards >}}
-
-<br>
-
-Have questions, or want to meet other people working on robots? Join our [Community Discord](https://discord.gg/viam).
+---
\ No newline at end of file
diff --git a/docs/tutorials/configure/build-a-mock-robot.md b/docs/tutorials/configure/build-a-mock-robot.md
index 31e00d3f4b..893eda72c0 100644
--- a/docs/tutorials/configure/build-a-mock-robot.md
+++ b/docs/tutorials/configure/build-a-mock-robot.md
@@ -1,7 +1,6 @@
 ---
 title: "Build a Mock Robot"
 linkTitle: "Mock Robot"
-weight: 41
 type: "docs"
 description: "Create a mock robot using just your personal computer to try using Viam without any robotic hardware."
 webmSrc: "/tutorials/build-a-mock-robot/mock-robot.webm"
@@ -15,8 +14,9 @@ tags: ["mock", "simulation"]
 authors: []
 languages: [ "python", "go" ]
 viamresources: [ "board", "arm", "motor" ]
-level: "Beginner"
-date: "11 October 2022"
+level: "Intermediate"
+date: "2022-10-11"
+# updated: ""
 cost: "0"
 ---
 
@@ -521,4 +521,4 @@ When you run this code, you will see your mock sub motor toggling between runnin
 
 In this tutorial, we showed you how to set up a mock robot with a sub-part so that you can learn more about using fake components, setting up a local development environment, and writing code using a Viam SDK.
 
-If you're ready to get started with building robots with real hardware components, pick up a [board](/components/board/) and try building one of Viam's [introductory robots](/tutorials/#your-first-robots).
+If you're ready to get started with building robots with real hardware components, pick up a [board](/components/board/) and try following another [tutorial](/tutorials/).
diff --git a/docs/tutorials/configure/scuttlebot.md b/docs/tutorials/configure/scuttlebot.md
index 2cb07ea44c..84668c4ca8 100644
--- a/docs/tutorials/configure/scuttlebot.md
+++ b/docs/tutorials/configure/scuttlebot.md
@@ -1,7 +1,6 @@
 ---
 title: "Configure a SCUTTLE Robot"
 linkTitle: "Configure a SCUTTLE Robot"
-weight: 15
 type: "docs"
 description: "Configure a SCUTTLE robot on the Viam platform."
 image: "/tutorials/scuttlebot/createcomponent.png"
@@ -15,8 +14,8 @@ authors: []
 languages: [ "python", "go" ]
 viamresources: [ "board", "motor", "camera" ]
 level: "Beginner"
-date: "2 August 2022"
-updated: "15 August 2023"
+date: "2022-08-02"
+updated: "2023-08-05"
 cost: 540
 ---
 
diff --git a/docs/tutorials/control/scuttle-gamepad.md b/docs/tutorials/control/scuttle-gamepad.md
index 6ea93cbd35..ce54d8cf14 100644
--- a/docs/tutorials/control/scuttle-gamepad.md
+++ b/docs/tutorials/control/scuttle-gamepad.md
@@ -1,7 +1,6 @@
 ---
 title: "Drive a Rover (like SCUTTLE) Using a Gamepad with a Dongle"
 linkTitle: "Drive a Rover with a Dongle Gamepad"
-weight: 20
 type: "docs"
 description: "Drive a wheeled rover with a Bluetooth gamepad that has a dongle."
 webmSrc: "/tutorials/videos/scuttle-gamepad-preview.webm"
@@ -15,8 +14,9 @@ tags: ["base", "scuttle", "gamepad"]
 authors: []
 languages: []
 viamresources: [ "base", "input_controller" ]
-level: "Beginner"
-date: "10 August 2022"
+level: "Intermediate"
+date: "2022-08-10"
+# updated: ""
 cost: 575
 ---
 
diff --git a/docs/tutorials/control/yahboom-rover.md b/docs/tutorials/control/yahboom-rover.md
index e22a53b72b..ca5bf7e237 100644
--- a/docs/tutorials/control/yahboom-rover.md
+++ b/docs/tutorials/control/yahboom-rover.md
@@ -1,7 +1,6 @@
 ---
 title: "Drive a Yahboom Rover with a Gamepad"
 linkTitle: "Drive a Yahboom Rover with a Gamepad"
-weight: 50
 type: "docs"
 description: "Drive a Yahboom 4WD Rover with a bluetooth gamepad from the Viam app."
 image: "/tutorials/yahboom-rover/bluetoothpair-connect.png"
@@ -13,8 +12,9 @@ tags: ["base", "gamepad", "yahboom", "app", "rover"]
 authors: [ "Hazal Mestci" ]
 languages: [ ]
 viamresources: [ "base", "input_controller", "motor" ]
-level: "Beginner"
-date: "10 August 2022"
+level: "Intermediate"
+date: "2022-08-10"
+# updated: ""
 cost: 260
 ---
 
diff --git a/docs/tutorials/custom/controlling-an-intermode-rover-canbus.md b/docs/tutorials/custom/controlling-an-intermode-rover-canbus.md
index 369e911bcc..e9e4ef31ce 100644
--- a/docs/tutorials/custom/controlling-an-intermode-rover-canbus.md
+++ b/docs/tutorials/custom/controlling-an-intermode-rover-canbus.md
@@ -1,7 +1,6 @@
 ---
 title: "Control an Intermode Rover with CAN Bus and Viam"
 linkTitle: "Control an Intermode Rover with Viam"
-weight: 60
 type: "docs"
 tags: ["modular resources", "extending viam", "components", "rover", "base", "CAN bus", "Intermode"]
 description: "Integrate an Intermode rover as a modular-resource-based component with CAN bus."
@@ -12,7 +11,8 @@ authors: [ "Matt Vella" ]
 languages: [ "go" ]
 viamresources: [ "base", "custom" ]
 level: "Intermediate"
-date: "22 January 2023"
+date: "2023-01-22"
+# updated: ""
 cost: 1500
 no_list: true
 # SME: Matt Vella, Matt Dannenberg, James Otting
diff --git a/docs/tutorials/custom/custom-base-dog.md b/docs/tutorials/custom/custom-base-dog.md
index 83c74319b4..1567f3328a 100644
--- a/docs/tutorials/custom/custom-base-dog.md
+++ b/docs/tutorials/custom/custom-base-dog.md
@@ -1,7 +1,6 @@
 ---
 title: "Control a Robot Dog with a Custom Viam Base Component"
 linkTitle: "Custom Quadruped Base"
-weight: 55
 type: "docs"
 tags: ["sdk", "extending viam", "components", "base", "python", "modular resources"]
 description: "Integrate a custom base component with the Viam Python SDK."
@@ -14,8 +13,9 @@ aliases:
 authors: [ "Jessamy Taylor" ]
 languages: [ "python" ]
 viamresources: [ "base", "camera", "custom" ]
-level: "Beginner"
-date: "15 May 2023"
+level: "Intermediate"
+date: "2023-05-15"
+# updated: ""
 cost: 190
 # SMEs: James Otting, Eric Daniels
 ---
diff --git a/docs/tutorials/get-started/blink-an-led.md b/docs/tutorials/get-started/blink-an-led.md
index ea300d1a44..8843ad51b3 100644
--- a/docs/tutorials/get-started/blink-an-led.md
+++ b/docs/tutorials/get-started/blink-an-led.md
@@ -1,7 +1,6 @@
 ---
 title: "Make an LED Blink With Buttons And With Code"
 linkTitle: "Blink an LED"
-weight: 30
 type: "docs"
 description: "Use the Viam app and the SDKs to make an LED turn on and off with a Raspberry Pi."
 webmSrc: "/tutorials/blink-an-led/blink.webm"
@@ -18,9 +17,11 @@ authors: []
 languages: [ "python", "go" ]
 viamresources: [ "board" ]
 level: "Beginner"
-date: "4 October 2022"
+date: "2022-10-04"
+# updated: ""
 cost: 70
 no_list: true
+weight: 1
 ---
 
 This tutorial will show you how to use Viam to make an LED blink with a Raspberry Pi.
diff --git a/docs/tutorials/get-started/confetti-bot.md b/docs/tutorials/get-started/confetti-bot.md
index 652339feb7..b98e5d2eaa 100644
--- a/docs/tutorials/get-started/confetti-bot.md
+++ b/docs/tutorials/get-started/confetti-bot.md
@@ -1,7 +1,6 @@
 ---
 title: "Build a Confetti Bot with a Raspberry Pi"
 linkTitle: "Confetti Bot"
-weight: 50
 type: "docs"
 description: "Use a red button to activate a GPIO pin on the board and make a confetti popper go off."
 tags: ["raspberry pi", "python", "app", "board", "motor"]
@@ -13,7 +12,8 @@ authors: [ "Hazal Mestci" ]
 languages: [ "python" ]
 viamresources: [ "board", "motor" ]
 level: "Beginner"
-date: "29 May 2023"
+date: "2023-05-29"
+# updated: ""
 cost: 145
 ---
 
diff --git a/docs/tutorials/get-started/lazy-susan.md b/docs/tutorials/get-started/lazy-susan.md
index a8b34f2838..880937a5a1 100644
--- a/docs/tutorials/get-started/lazy-susan.md
+++ b/docs/tutorials/get-started/lazy-susan.md
@@ -1,7 +1,6 @@
 ---
 title: "Create a Lazy Susan Using a DC Motor"
 linkTitle: "Lazy Susan"
-weight: 50
 type: "docs"
 description: "Wire a DC motor to a board, attach a plate on top, and control the motor to rotate the plate."
 webmSrc: "/tutorials/lazy-susan/preview.webm"
@@ -14,7 +13,8 @@ authors: [ "Arielle Mella" ]
 languages: [ "python" ]
 viamresources: [ "board", "motor" ]
 level: "Beginner"
-date: "29 May 2023"
+date: "2023-05-29"
+# updated: ""
 cost: 114
 ---
 
@@ -37,7 +37,7 @@ This project requires the following hardware:
 * [Raspberry Pi](https://a.co/d/bxEdcAT)
 * [microSD card](https://a.co/d/j4fp6aA)
 * microSD card reader
-* DC motor (for example [this motor](https://www.digikey.com/en/products/detail/seeed-technology-co.,-ltd/114090046/10385097))
+* DC motor (for example [this motor](https://www.digikey.com/en/products/detail/seeed-technology-co.-ltd/114090046/10385097))
 * Motor driver (for example [this driver](https://www.amazon.com/Qunqi-Controller-Module-Stepper-Arduino/dp/B014KMHSW6))
 * Appropriate flange coupler for your motor (for example [6mm flange coupler](https://a.co/d/fRFsu90))
 * M3 Screws to fit the flange coupler to the board
diff --git a/docs/tutorials/get-started/servo-mousemover.md b/docs/tutorials/get-started/servo-mousemover.md
index da6665571d..e531bf2313 100644
--- a/docs/tutorials/get-started/servo-mousemover.md
+++ b/docs/tutorials/get-started/servo-mousemover.md
@@ -1,7 +1,6 @@
 ---
 title: "How to Create a Mouse Mover Using a Servo"
 linkTitle: "Mouse Mover"
-weight: 40
 type: "docs"
 description: "Use the Python SDK to move a continuous servo to keep a computer screen from sleeping."
 webmSrc: "/tutorials/single-component-tutorials-servo-mousemover/pi-hole.webm"
@@ -13,7 +12,8 @@ authors: [ "Kacey Meier-Smith" ]
 languages: [ "python" ]
 viamresources: [ "board", "servo" ]
 level: "Beginner"
-date: "30 March 2023"
+date: "2023-03-30"
+# updated: ""
 cost: 80
 no_list: true
 ---
diff --git a/docs/tutorials/get-started/try-viam-sdk.md b/docs/tutorials/get-started/try-viam-sdk.md
index f917499633..1c4b772f11 100644
--- a/docs/tutorials/get-started/try-viam-sdk.md
+++ b/docs/tutorials/get-started/try-viam-sdk.md
@@ -1,7 +1,7 @@
 ---
 title: "Drive a Rover with the Viam SDK"
 linkTitle: "Drive with the SDK"
-weight: 40
+weight: 2
 type: "docs"
 description: "Use a Viam SDK to program a rover to move in a square."
 webmSrc: "/tutorials/try-viam-sdk/image1.webm"
@@ -15,7 +15,8 @@ authors: []
 languages: [ "python", "go", "typescript" ]
 viamresources: [ "base" ]
 level: "Beginner"
-date: "8 December 2022"
+date: "2022-12-08"
+# updated: ""
 cost: "0"
 ---
 
diff --git a/docs/tutorials/projects/bedtime-songs-bot.md b/docs/tutorials/projects/bedtime-songs-bot.md
index 53d2be731b..62b4ff81d1 100644
--- a/docs/tutorials/projects/bedtime-songs-bot.md
+++ b/docs/tutorials/projects/bedtime-songs-bot.md
@@ -1,7 +1,6 @@
 ---
 title: "Build a bedtime songs bot with a custom ML model"
 linkTitle: "Bedtime Songs Bot"
-weight: 60
 type: "docs"
 tags: ["mac", "app", "board", "webcam", "camera", "ml", "machine learning", "babysitter"]
 description: "Create a robot babysitter with a webcam and machine learning."
@@ -12,8 +11,9 @@ videoAlt: "A demonstration of the bedtime songs bot is taking place in an office
 authors: [ "Tess Avitabile", "Sierra Guequierre" ]
 languages: [ "python" ]
 viamresources: [ "camera", "sensor", "mlmodel", "vision" ]
-level: "Beginner"
-date: "21 April 2023"
+level: "Intermediate"
+date: "2023-08-18"
+# updated: ""
 cost: "0"
 ---
 
@@ -499,7 +499,7 @@ func play(label string, logger golog.Logger) {
    <-done
 }
 
-// Code Sample Connect() Code 
+// Code Sample Connect() Code
 func main() {
  logger := golog.NewDevelopmentLogger("client")
  robot, err := client.New(
@@ -517,8 +517,8 @@ func main() {
 
 
  defer robot.Close(context.Background())
-  
-// Get the shape classifier from the robot 
+
+// Get the shape classifier from the robot
  visService, err := vision.FromRobot(robot, "shape-classifier")
  if err != nil {
    logger.Error(err)
diff --git a/docs/tutorials/projects/build-an-outdoor-rover.md b/docs/tutorials/projects/build-an-outdoor-rover.md
index 15b05d7f2e..d947390bc9 100644
--- a/docs/tutorials/projects/build-an-outdoor-rover.md
+++ b/docs/tutorials/projects/build-an-outdoor-rover.md
@@ -1,7 +1,6 @@
 ---
 title: "Build an outdoor rover: simple, useful and affordable"
 linkTitle: "Outdoor Rover"
-weight: 60
 type: "docs"
 tags: ["base", "outdoor", "solar", "rover"]
 description: "Build and control an affordable, functional outdoor rover (choose 3)."
@@ -13,8 +12,9 @@ imageAlt: "Rover with mounted solar panel."
 authors: [ "Matt Vella" ]
 languages: []
 viamresources: [ "board", "motor", "base", "camera" ]
-level: "Beginner"
-date: "29 March 2023"
+level: "Intermediate"
+date: "2023-03-29"
+# updated: ""
 cost: 420
 no_list: true
 ---
diff --git a/docs/tutorials/projects/claw-game.md b/docs/tutorials/projects/claw-game.md
index 29cecf8645..8d5659b9a4 100644
--- a/docs/tutorials/projects/claw-game.md
+++ b/docs/tutorials/projects/claw-game.md
@@ -1,7 +1,6 @@
 ---
 title: "Build a robotic claw game with a Raspberry Pi"
 linkTitle: "Claw Game"
-weight: 50
 type: "docs"
 description: "Create your own version of the famous arcade claw machine using a robotic arm and a claw grabber."
 tags: ["app", "board", "motor", "gripper"]
@@ -13,8 +12,10 @@ authors: [ "Arielle Mella", "Hazal Mestci", "Matt Vella" ]
 languages: [ "python", "typescript" ]
 viamresources: [ "board", "arm", "gripper", "motion" ]
 level: "Advanced"
-date: "29 May 2023"
+date: "2023-05-29"
+# updated: ""
 cost: 8910
+weight: 8
 ---
 
 {{<gif webm_src="/tutorials/claw-game/claw-game.webm" mp4_src="/tutorials/claw-game/claw-game.mp4" alt="claw game in action at a party" class="alignright" max-width="250px">}}
diff --git a/docs/tutorials/projects/foam-dart-launcher.md b/docs/tutorials/projects/foam-dart-launcher.md
index e98d84cbb5..afb9c01048 100644
--- a/docs/tutorials/projects/foam-dart-launcher.md
+++ b/docs/tutorials/projects/foam-dart-launcher.md
@@ -1,7 +1,6 @@
 ---
 title: "Foam Dart Launcher Robot Tutorial"
 linkTitle: "Dart Launcher Robot"
-weight: 160
 type: "docs"
 description: "Build a foam dart launcher with a wheeled rover and a Raspberry Pi."
 webmSrc: "/tutorials/videos/foam-dart.webm"
@@ -15,8 +14,9 @@ tags: ["base", "motor", "camera", "raspberry pi"]
 authors: [ "Hazal Mestci" ]
 languages: [ "python" ]
 viamresources: [ "base", "camera", "motor", "board" ]
-level: "Beginner"
-date: "29 November 2022"
+level: "Intermediate"
+date: "2022-11-29"
+# updated: ""
 cost: "145"
 no_list: true
 ---
diff --git a/docs/tutorials/projects/guardian.md b/docs/tutorials/projects/guardian.md
index cc4a5c1245..62701cdaa9 100644
--- a/docs/tutorials/projects/guardian.md
+++ b/docs/tutorials/projects/guardian.md
@@ -1,7 +1,7 @@
 ---
 title: "A Guardian that Tracks Pets using a Pi, Camera, and Servo"
 linkTitle: "Pet Guardian"
-weight: 50
+weight: 6
 type: "docs"
 description: "Make a functional guardian with a servo motor, some LEDs, a camera, and the ML Model and vision service to detect people and pets."
 webmSrc: "/tutorials/guardian/preview.webm"
@@ -13,8 +13,9 @@ no_list: true
 authors: [ "Naomi Pentrel" ]
 languages: [ "python" ]
 viamresources: [ "camera", "vision", "servo", "mlmodel" ]
-level: "Beginner"
-date: "15 May 2023"
+level: "Intermediate"
+date: "2023-05-15"
+# updated: ""
 cost: 90
 ---
 
diff --git a/docs/tutorials/projects/integrating-viam-with-openai.md b/docs/tutorials/projects/integrating-viam-with-openai.md
index f80fa9e412..f3e6f4e2a8 100644
--- a/docs/tutorials/projects/integrating-viam-with-openai.md
+++ b/docs/tutorials/projects/integrating-viam-with-openai.md
@@ -1,7 +1,7 @@
 ---
 title: "Integrate Viam with ChatGPT to create a companion robot"
 linkTitle: "AI Companion Robot"
-weight: 60
+weight: 5
 type: "docs"
 tags: ["base", "AI", "OpenAI", "ChatGPT", "ElevenLabs", "servo", "vision", "computer vision", "camera", "viam rover", "python"]
 description: "Harness AI and use ChatGPT to add life to your Viam rover and turn it into a companion robot."
@@ -13,8 +13,9 @@ imageAlt: "An AI powered companion robot called Rosey."
 authors: [ "Matt Vella" ]
 languages: [ "python" ]
 viamresources: [ "custom", "servo", "board", "ml model", "vision",  ]
-level: "Beginner"
-date: "15 February 2023"
+level: "Intermediate"
+date: "2023-02-15"
+# updated: ""
 cost: 200
 no_list: true
 ---
diff --git a/docs/tutorials/projects/light-up.md b/docs/tutorials/projects/light-up.md
index 08d3dce61a..a4f47070a7 100644
--- a/docs/tutorials/projects/light-up.md
+++ b/docs/tutorials/projects/light-up.md
@@ -1,7 +1,6 @@
 ---
 title: "Use Object Detection to Turn Your Lights On"
 linkTitle: "Turn on Lights with Object Detection"
-weight: 49
 type: "docs"
 description: "How to turn a light on when your webcam sees a person."
 webmSrc: "/tutorials/light-up/light-up.webm"
@@ -12,8 +11,9 @@ tags: ["camera", "vision", "detector", "python"]
 authors: [ "Hazal Mestci" ]
 languages: [ "python" ]
 viamresources: [ "camera", "mlmodel", "vision" ]
-level: "Beginner"
-date: "30 March 2023"
+level: "Intermediate"
+date: "2023-03-30"
+# updated: ""
 cost: 20
 no_list: true
 ---
diff --git a/docs/tutorials/projects/make-a-plant-watering-robot.md b/docs/tutorials/projects/make-a-plant-watering-robot.md
index 8389dcb75a..3edd82b13c 100644
--- a/docs/tutorials/projects/make-a-plant-watering-robot.md
+++ b/docs/tutorials/projects/make-a-plant-watering-robot.md
@@ -1,7 +1,7 @@
 ---
 title: "Plant Watering Robot with a Raspberry Pi"
 linkTitle: "Plant Watering Robot"
-weight: 50
+weight: 7
 type: "docs"
 description: "Create a plant watering robot with a Raspberry Pi."
 tags: ["raspberry pi", "app", "board", "motor"]
@@ -11,8 +11,9 @@ images: ["/tutorials/plant-watering-pi/preview.png"]
 authors: [ "Sierra Guequierre" ]
 languages: [ "python" ]
 viamresources: [ "board", "motor", "sensor" ]
-level: "Beginner"
-date: "29 March 2023"
+level: "Intermediate"
+date: "2023-03-29"
+# updated: ""
 cost: 150
 no_list: true
 # SMES: Olivia Miller
diff --git a/docs/tutorials/projects/modernize-retro-robot.md b/docs/tutorials/projects/modernize-retro-robot.md
index 841c239403..e59d04d9ef 100644
--- a/docs/tutorials/projects/modernize-retro-robot.md
+++ b/docs/tutorials/projects/modernize-retro-robot.md
@@ -1,7 +1,6 @@
 ---
 title: "Modernize a 1980s robot"
 linkTitle: "Modernize a 1980s Robot"
-weight: 60
 type: "docs"
 webmSrc: "/tutorials/maiv/maiv_front.webm"
 mp4Src: "/tutorials/maiv/maiv_front.mp4"
@@ -13,8 +12,9 @@ imageAlt: "The front of the Ombibot 2000 robot"
 authors: [ "Matt Vella" ]
 languages: []
 viamresources: [ "board", "motor", "base", "camera" ]
-level: "Beginner"
-date: "4 May 2023"
+level: "Intermediate"
+date: "2023-05-04"
+# updated: ""
 cost: 580
 ---
 
diff --git a/docs/tutorials/projects/pet-treat-dispenser.md b/docs/tutorials/projects/pet-treat-dispenser.md
index bbe42c1e95..ece1a1980f 100644
--- a/docs/tutorials/projects/pet-treat-dispenser.md
+++ b/docs/tutorials/projects/pet-treat-dispenser.md
@@ -1,7 +1,6 @@
 ---
 title: "Build a Smart Pet Feeder with Machine Learning"
 linkTitle: "Smart Pet Treat Dispenser"
-weight: 50
 type: "docs"
 description: "Use a Raspberry Pi, a motor, and machine learning to build a smart pet feeder."
 tags: ["raspberry pi", "app", "board", "motor"]
@@ -11,8 +10,9 @@ images: ["/tutorials/pet-treat-dispenser/preview.png"]
 authors: [ "Arielle Mella", "Jessamy Taylor", "Hazal Mestci" ]
 languages: [ "python" ]
 viamresources: [ "board", "camera", "motor", "mlmodel", "vision" ]
-level: "Beginner"
-date: "30 March 2023"
+level: "Intermediate"
+date: "2023-03-30"
+# updated: ""
 cost: 143
 ---
 
diff --git a/docs/tutorials/projects/send-security-photo.md b/docs/tutorials/projects/send-security-photo.md
index 9cb750f94a..dff9bcf930 100644
--- a/docs/tutorials/projects/send-security-photo.md
+++ b/docs/tutorials/projects/send-security-photo.md
@@ -1,7 +1,6 @@
 ---
 title: "A Person Detection Security Robot That Sends You Photos"
 linkTitle: "Detect a Person and Send a Photo"
-weight: 50
 type: "docs"
 description: "Use the vision service and the Python SDK to send yourself a text message when your webcam detects a person."
 image: "/tutorials/send-security-photo/text-message.png"
@@ -11,8 +10,9 @@ tags: ["camera", "vision", "detector", "python"]
 authors: [ "Hazal Mestci" ]
 languages: [ "python" ]
 viamresources: [ "camera", "mlmodel", "vision" ]
-level: "Beginner"
-date: "30 March 2023"
+level: "Intermediate"
+date: "2023-03-30"
+# updated: ""
 cost: "0"
 no_list: true
 ---
diff --git a/docs/tutorials/projects/tipsy.md b/docs/tutorials/projects/tipsy.md
index 2fd6ae8ed8..caece880b1 100644
--- a/docs/tutorials/projects/tipsy.md
+++ b/docs/tutorials/projects/tipsy.md
@@ -1,7 +1,6 @@
 ---
 title: "Tipsy: Create an Autonomous Drink Carrying Robot"
 linkTitle: "Drink Serving Robot"
-weight: 60
 type: "docs"
 tags: ["raspberry pi", "app", "board", "motor", "camera"]
 description: "Create an autonomous drink carrying robot with motion sensing and machine learning."
@@ -12,8 +11,9 @@ mp4Src: "/tutorials/tipsy/tipsy-preview.mp4"
 authors: [ "Hazal Mestci" ]
 languages: [ "python" ]
 viamresources: [ "board", "motor", "base", "camera", "sensor", "mlmodel", "vision" ]
-level: "Beginner"
-date: "29 May 2023"
+level: "Intermediate"
+date: "2023-05-29"
+# updated: ""
 cost: 770
 ---
 
diff --git a/docs/tutorials/services/accessing-and-moving-robot-arm.md b/docs/tutorials/services/accessing-and-moving-robot-arm.md
index c3fd9fff41..2227ae01e2 100644
--- a/docs/tutorials/services/accessing-and-moving-robot-arm.md
+++ b/docs/tutorials/services/accessing-and-moving-robot-arm.md
@@ -14,8 +14,9 @@ aliases:
 authors: []
 languages: [ "python", "go" ]
 viamresources: [ "arm" ]
-level: "Beginner"
-date: "7 March 2023"
+level: "Intermediate"
+date: "2023-03-07"
+# updated: ""
 cost: 8400
 no_list: true
 ---
diff --git a/docs/tutorials/services/color-detection-scuttle.md b/docs/tutorials/services/color-detection-scuttle.md
index 27eee1128a..16345d38f8 100644
--- a/docs/tutorials/services/color-detection-scuttle.md
+++ b/docs/tutorials/services/color-detection-scuttle.md
@@ -1,7 +1,6 @@
 ---
 title: "Follow a Colored Object with a Rover (like SCUTTLE)"
 linkTitle: "Colored Object Follower"
-weight: 30
 type: "docs"
 description: "Instructions for detecting and following a colored object with a rover, like a SCUTTLE robot."
 webmSrc: "/tutorials/videos/scuttle-colordetection-preview.webm"
@@ -15,9 +14,9 @@ tags: ["vision", "detector", "base", "scuttle", "services"]
 authors: [ "Hazal Mestci" ]
 languages: [ "python" ]
 viamresources: [ "base", "vision", "camera" ]
-level: "Beginner"
-date: "18 August 2022"
-updated: "11 August 2023"
+level: "Intermediate"
+date: "2022-08-18"
+updated: "2023-08-11"
 cost: 540
 no_list: true
 ---
diff --git a/docs/tutorials/services/constrain-motion.md b/docs/tutorials/services/constrain-motion.md
index d0c8aecdca..6e1dd2d5a2 100644
--- a/docs/tutorials/services/constrain-motion.md
+++ b/docs/tutorials/services/constrain-motion.md
@@ -1,7 +1,6 @@
 ---
 title: "Add Constraints and Transforms to a Motion Plan"
 linkTitle: "Add Motion Constraints"
-weight: 25
 type: "docs"
 description: "Use constraints and transforms with the motion service."
 webmSrc: "/tutorials/videos/motion_constraints.webm"
@@ -12,8 +11,9 @@ tags: ["arm", "gripper", "motion", "services"]
 authors: [ "Jessamy Taylor" ]
 languages: [ "python" ]
 viamresources: [ "data_manager", "camera" ]
-level: "Beginner"
-date: "3 July 2023"
+level: "Intermediate"
+date: "2023-07-03"
+# updated: ""
 cost: 8400
 ---
 
diff --git a/docs/tutorials/services/data-management-tutorial.md b/docs/tutorials/services/data-management-tutorial.md
index 86998bb67f..3476440135 100644
--- a/docs/tutorials/services/data-management-tutorial.md
+++ b/docs/tutorials/services/data-management-tutorial.md
@@ -1,7 +1,6 @@
 ---
 title: "Introduction to the Data Management Service"
 linkTitle: "Intro to Data Management"
-weight: 60
 type: "docs"
 description: "Configure data capture and cloud sync, filter and view captured data, and export your data."
 image: "/tutorials/data-management/image1.png"
@@ -15,10 +14,12 @@ tags: ["data management", "data", "services", "try viam"]
 authors: []
 languages: []
 viamresources: [ "data_manager", "camera" ]
-level: "Beginner"
-date: "8 February 2023"
+level: "Intermediate"
+date: "2023-02-08"
+# updated: ""
 cost: "0"
 no_list: true
+weight: 4
 # SMEs: Alexa Greenberg, Natalia Jacobowitz
 ---
 
diff --git a/docs/tutorials/services/plan-motion-with-arm-gripper.md b/docs/tutorials/services/plan-motion-with-arm-gripper.md
index 5ec8193553..9d5d9b9742 100644
--- a/docs/tutorials/services/plan-motion-with-arm-gripper.md
+++ b/docs/tutorials/services/plan-motion-with-arm-gripper.md
@@ -1,7 +1,6 @@
 ---
 title: "Plan Motion with an Arm and a Gripper"
 linkTitle: "Plan Motion with an Arm"
-weight: 20
 type: "docs"
 description: "Use the motion service to move robot arms and other components."
 webmSrc: "/tutorials/videos/motion_armmoving.webm"
@@ -12,7 +11,8 @@ authors: []
 languages: [ "python", "go" ]
 viamresources: [ "arm", "gripper", "motion" ]
 level: "Intermediate"
-date: "7 March 2023"
+date: "2023-03-07"
+# updated: ""
 cost: 8400
 no_list: true
 ---
diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index 059be56ed5..f5c1c5c27d 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -1,7 +1,6 @@
 ---
 title: "Detect color with a Viam Rover"
 linkTitle: "Detect Color"
-weight: 41
 type: "docs"
 description: "Use the vision service in the Viam app to detect a color with the Viam Rover."
 image: "/tutorials/try-viam-color-detection/detectioncam-comp-stream.png"
@@ -15,9 +14,11 @@ authors: [ "Hazal Mestci" ]
 languages: []
 viamresources: [ "vision", "camera" ]
 level: "Beginner"
-date: "16 December 2022"
+date: "2022-12-16"
+# updated: ""
 cost: "0"
 no_list: true
+weight: 3
 # SMEs: Hazal
 ---
 
diff --git a/docs/tutorials/services/webcam-line-follower-robot.md b/docs/tutorials/services/webcam-line-follower-robot.md
index 9544676089..016b8e5681 100644
--- a/docs/tutorials/services/webcam-line-follower-robot.md
+++ b/docs/tutorials/services/webcam-line-follower-robot.md
@@ -1,7 +1,6 @@
 ---
 title: "Build a Line Follower with a Rover and a Webcam"
 linkTitle: "RGB Line Follower"
-weight: 50
 type: "docs"
 description: "Build a line-following robot that relies on a webcam and color detection."
 tags: ["base", "vision", "detector", "camera", "services", "python"]
@@ -13,9 +12,9 @@ aliases:
 authors: [ "Jessamy Taylor" ]
 languages: [ "python" ]
 viamresources: [ "vision", "camera" ]
-level: "Beginner"
-date: "26 August 2022"
-updated: "4 August 2023"
+level: "Intermediate"
+date: "2022-08-26"
+updated: "2023-08-04"
 cost: 570
 no_list: true
 ---
diff --git a/docs/tutorials/template.md b/docs/tutorials/template.md
index 9634710cda..301ccb5a97 100644
--- a/docs/tutorials/template.md
+++ b/docs/tutorials/template.md
@@ -14,14 +14,18 @@ description: "Short description of your tutorial (1 sentence)."
 tags: ["tutorial"]
 draft: true # Change this when you're ready
 authors: [] # Your Name
+weight: # A positive integer that determines the position of the tutorial on the tutorials page. New content is automatically featured. Only use this to highlight content that should permanently be near the top.
 languages: [] # Viam SDK programming languages used, if any
-viamresources: [] # Specific components or services used in this tutorial
+viamresources: [
+  "arm", "base", "board", "camera", "encoder", "gantry", "gripper", "input_controller", "motor", "movement_sensor", "sensor", "servo",
+  "data", "motion", "frame_system", "mlmodel", "navigation", "base_rc", "sensors", "slam", "vision"
+] # Specific components or services used in this tutorial
 level: "" # Beginner, Intermediate, Advanced
 # Beginner means: high level of explanation and guidance
 # Intermediate means: commands/concepts you can assume the reader knows do not need to be explained, instead link.
 # Advanced means: intricate tutorial that may require the reader to have knowledge to adapt
-date: "1 Jan 2023" # When the tutorial was created or last entirely checked
-updated: ""  # When the tutorial was last entirely checked
+date: "2023-01-01" # When the tutorial was created or last entirely checked
+# updated: ""  # When the tutorial was last entirely checked
 cost: 0 # Aproximate cost in USD - Only specify number
 ---
 
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 39bc8e4dfb..eac518bfc2 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -11,7 +11,7 @@
     {{ $image_ext := index $image_type_arr 1 }}
 
     {{ if eq $image_ext "svg" }}
-        {{ warnf "Please use the imgproc shortcode for SVC images: %s" $image.RelPermalink }}
+        {{ warnf "Please use the imgproc shortcode for SVG images: %s" $image.RelPermalink }}
     {{ else }}
         {{ $webpsmall := $image.Resize "480x webp" }}
         {{ $webpmedium := $image.Resize "768x webp" }}
diff --git a/layouts/_default/list.typesense.json b/layouts/_default/list.typesense.json
new file mode 100644
index 0000000000..f39cae9175
--- /dev/null
+++ b/layouts/_default/list.typesense.json
@@ -0,0 +1,54 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- $section := $.Site.GetPage "section" .Section }}
+      {{- range .Site.AllPages -}}
+            {{- if or (and (.IsDescendant $section) (and (not .Draft) (and (not .Params.private) (not .Params.empty_node)))) $section.IsHome -}}
+
+            {{ if eq .Section "tutorials" }}
+                  {{ $.Scratch.Set "latestDate" .Date.UTC.Unix}}
+                  {{- if .Params.updated -}}
+                        {{ $.Scratch.Set "latestDate" ((time .Params.updated).UTC.Unix) -}}
+                  {{ end }}
+                  {{- if not (.Params.cost) -}}
+                        {{ errorf "No cost on tutorial: %s" .Title }}
+                  {{- end -}}
+
+                  {{- if .Weight -}}
+                        {{ $.Scratch.Set "featured" .Weight }}
+                  {{- else -}}
+                        {{ $.Scratch.Set "featured" 9999 }}
+                  {{- end -}}
+
+                  {{- $.Scratch.Add "index"
+                    (dict
+                        "id" .File.UniqueID
+                        "date" ($.Scratch.Get "latestDate")
+                        "description" .Description
+                        "fuzzywordcount" .FuzzyWordCount
+                        "lastmod" .Lastmod.UTC.Unix
+                        "permalink" .Permalink
+                        "publishdate" .PublishDate
+                        "readingtime" .ReadingTime
+                        "relpermalink" .RelPermalink
+                        "title" .Title
+                        "linktitle" .LinkTitle
+                        "wordcount" .WordCount
+                        "section" .Section
+                        "tags" .Params.Tags
+                        "authors" .Params.Authors
+                        "images" .Params.images
+                        "webm" .Params.webmSrc
+                        "mp4" .Params.mp4Src
+                        "image" .Params.image
+                        "imageAlt" .Params.imageAlt
+                        "videoAlt" .Params.videoAlt
+                        "languages" .Params.languages
+                        "viamservices" (intersect (.Params.viamresources) (slice "data" "motion" "frame_system" "mlmodel" "navigation" "base_rc" "sensors" "slam" "vision"))
+                        "viamcomponents" (intersect (.Params.viamresources) (slice "arm" "base" "board" "camera" "encoder" "gantry" "gripper" "input_controller" "motor" "movement_sensor" "sensor" "servo"))
+                        "level" .Params.level
+                        "cost" (int (.Params.cost))
+                        "featured" ($.Scratch.Get "featured")
+                    )}}
+                  {{- end -}}
+            {{- end -}}
+      {{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}
\ No newline at end of file
diff --git a/layouts/docs/tutorials.html b/layouts/docs/tutorials.html
new file mode 100644
index 0000000000..510d360579
--- /dev/null
+++ b/layouts/docs/tutorials.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
+    <header>
+      {{ partial "navbar.html" . }}
+    </header>
+    <div class="container-fluid td-outer">
+      <div class="td-main">
+        <div class="row flex-xl-nowrap">
+            <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+                {{ partial "sidebar.html" . }}
+            </aside>
+            <main class="col-12 col-md-9 col-xl-10 pl-md-5" role="main">
+                <div class="td-content">
+                    <h1>{{ .Title }}</h1>
+                        <div id="tutorial-menu" class="lozad">
+                            <div id="tutorial-filters">
+                                <div class="filter" id="filter-languages" aria-expanded="false" data-toggle="collapse" data-target="#languages-list">Languages</div>
+                                <div class="filter" id="filter-components" aria-expanded="false" data-toggle="collapse" data-target="#components-list">Components</div>
+                                <div class="filter" id="filter-services" aria-expanded="false" data-toggle="collapse" data-target="#services-list">Services</div>
+                                <div class="filter" id="filter-level" aria-expanded="false" data-toggle="collapse" data-target="#level-list">Level</div>
+                            </div>
+                            <div class="accordion-group search-panel__filters show-on-wide lozad" id="tutorial-filter-items">
+                                <div id="languages-list" class="search-facets collapse" data-parent="#tutorial-menu"></div>
+                                <div id="components-list" class="search-facets collapse" data-parent="#tutorial-menu"></div>
+                                <div id="services-list" class="search-facets collapse" data-parent="#tutorial-menu"></div>
+                                <div id="level-list" class="search-facets collapse" data-parent="#tutorial-menu"></div>
+                            </div>
+                        </div>
+
+                    {{ if not hugo.IsProduction }}
+                    <div class="alert alert-caution" role="alert">
+                        <h4 class="alert-heading">Missing a tutorial?</h4>
+                        <p>This page relies on data from Typesense which is only generated on publish.
+                            Access your tutorial with its url or by using the sidebar navigation which is visible on any page but this one.
+                            (This message is only visible on staging.)
+                        </p>
+                    </div>
+                    {{ end }}
+
+                    <div class="search-panel__results card-container lozad">
+                        <div id="hits" class="row-no-margin"></div>
+                        <div id="pagination"></div>
+                    </div>
+                    <!-- if no javscript show the tutorials -->
+                    <noscript>
+                        <div class="alert alert-caution" role="alert">
+                            <h4 class="alert-heading">Javascript</h4>
+                            <p>Please enable javascript to see all tutorials.</p>
+                        </div>
+                        <div class="card-container">
+                            <div class="row-no-margin">
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/get-started/blink-an-led/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/get-started/try-viam-sdk/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/get-started/servo-mousemover/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/get-started/confetti-bot/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/get-started/lazy-susan/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/configure/build-a-mock-robot/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/services/accessing-and-moving-robot-arm/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/services/plan-motion-with-arm-gripper/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/services/constrain-motion/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/services/color-detection-scuttle/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/services/webcam-line-follower-robot/") }}
+                                {{ partial "tutorialcard-no-js.html" (dict "link" "/tutorials/services/data-management-tutorial/") }}
+                            </div>
+                        </div>
+                    </noscript>
+                </div>
+            </main>
+        </div>
+      </div>
+      {{ partial "footer.html" . }}
+    </div>
+
+    {{ partial "scripts.html" . }}
+
+    <script src="https://cdn.jsdelivr.net/npm/typesense-instantsearch-adapter@2/dist/typesense-instantsearch-adapter.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.46.0"></script>
+    <script src="../js/tutorials.js"></script>
+
+  </body>
+</html>
diff --git a/layouts/partials/card.html b/layouts/partials/card.html
index ffa6ce9b4f..8ea597ab0b 100644
--- a/layouts/partials/card.html
+++ b/layouts/partials/card.html
@@ -12,7 +12,7 @@
       <a href="{{.RelPermalink}}">
         {{ if .Params.webmSrc }}
         <div class="hover-card-video">
-					{{ partial "gif.html" (dict "webm_src" .Params.webmSrc "mp4_src" .Params.mp4Src "alt" .Params.videoAlt "maxWidth" "100%" "class" "lozad" ) }}
+					{{ partial "gif.html" (dict "webm_src" .Params.webmSrc "mp4_src" .Params.mp4Src "alt" .Params.videoAlt "maxWidth" "100%" "class" "" ) }}
         </div>
         {{ end }}
         {{ if .Params.image }}
diff --git a/layouts/partials/gif.html b/layouts/partials/gif.html
index 3513010ca9..cae0d39c4f 100644
--- a/layouts/partials/gif.html
+++ b/layouts/partials/gif.html
@@ -24,4 +24,11 @@
     <source data-src="{{relURL (substr (.mp4_src) 1) }}" type="video/mp4">
     There should have been a video here but your browser does not seem to support it.
   </video>
+  <noscript>
+    <video autoplay loop muted playsinline alt="{{ .alt }}" width="100%" style="max-width: {{ .maxWidth }}" class="{{- if .class -}}{{ .class}}{{- end }}">
+      <source src="{{relURL (substr (.webm_src) 1) }}" type="video/webm">
+      <source src="{{relURL (substr (.mp4_src) 1) }}" type="video/mp4">
+      There should have been a video here but your browser does not seem to support it.
+    </video>
+  </noscript>
 </div>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index dbcd10076c..540cad1683 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -28,6 +28,7 @@
     {{ end }}
     {{ end -}}
 </title>
+<script>document.documentElement.classList.remove("no-js")</script>
 <link rel="canonical" href="{{ .Permalink }}" />
 <meta name="description" content="{{ template "partials/page-description.html" .
 }}"> {{ template "_internal/opengraph.html" . -}} {{ template
diff --git a/layouts/partials/imgproc.html b/layouts/partials/imgproc.html
index 93ee96e1d9..46ec0ec53a 100644
--- a/layouts/partials/imgproc.html
+++ b/layouts/partials/imgproc.html
@@ -14,10 +14,10 @@
   {{ $imgbackup := $img.Resize .resize }}
   {{if .declaredimensions}}
 <source srcset="{{ $imgwebp.RelPermalink }}" type="image/webp" width="{{ $imgwebp.Width }}" height="{{ $imgwebp.Height }}">
-<img src="{{ $imgbackup.RelPermalink }}" width="{{ $imgwebp.Width }}" height="{{ $imgwebp.Height }}" alt="{{ .alt }}" class="{{ .class }}" style="{{ .style }}" loading="lazy">
+<img src="{{ $img.RelPermalink }}" width="{{ $imgwebp.Width }}" height="{{ $imgwebp.Height }}" alt="{{ .alt }}" class="{{ .class }}" style="{{ .style }}" loading="lazy">
   {{ else }}
 <source srcset="{{ $imgwebp.RelPermalink }}" type="image/webp">
-<img src="{{ $imgbackup.RelPermalink }}" alt="{{ .alt }}" class="{{ .class }}" style="{{ .style }}" loading="lazy">
+<img src="{{ $img.RelPermalink }}" alt="{{ .alt }}" class="{{ .class }}" style="{{ .style }}" loading="lazy">
   {{ end }}
 {{ else }}
   {{if .declaredimensions}}
diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
index 9bb2430210..47af39d08a 100644
--- a/layouts/partials/sidebar-tree.html
+++ b/layouts/partials/sidebar-tree.html
@@ -66,12 +66,12 @@
         <a href="{{ $manualLink }}"{{ if ne $s.LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with $s.Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="{{ if $active}} active{{ end }}{{ if $treeRoot }} tree-root{{ end }}">{{ $s.LinkTitle }}
         </a>
       {{- end }}
-      {{- if (and $withChild (not $treeRoot) ) }}
+      {{- if (and (and $withChild (not $treeRoot) (ne  .section.File.Path "tutorials/_index.md" ) ) ) }}
       <span class="menu-toggle">
         {{ if (or $activePath $active) }}
-          <i class="fas fa-chevron-down"></i>
+          <i class="fas fa-chevron-down lozad"></i>
         {{ else }}
-          <i class="fas fa-chevron-right"></i>
+          <i class="fas fa-chevron-right lozad"></i>
         {{- end }}
       {{- end }}
     </span>
@@ -80,7 +80,7 @@
       </a>
   {{ end }}
   {{- end }}
-  {{- if $withChild }}
+  {{- if (and $withChild (ne .section.File.Path "tutorials/_index.md" ) ) }}
   {{- $ulNr := add $ulNr 1 }}
   <ul class="ul-{{ $ulNr }}">
     {{ range $pages -}}
diff --git a/layouts/partials/tutorialcard-no-js.html b/layouts/partials/tutorialcard-no-js.html
new file mode 100644
index 0000000000..d5b644f292
--- /dev/null
+++ b/layouts/partials/tutorialcard-no-js.html
@@ -0,0 +1,59 @@
+{{ $size := (.size) }}
+{{ $customTitle := (.custom) }}
+{{ $link := (path.Clean (.link)) }}
+{{ $baseurl := .Site.BaseURL }}
+{{ if (eq (substr .Site.BaseURL -1 1) "/" ) }}
+  {{ $baseurl := (substr .Site.BaseURL 0 -1) }}
+{{ end }}
+<div class="col tutorial hover-card">
+  {{ if site.GetPage ($link | string) }}
+    {{ with site.GetPage ($link | string) }}
+      <a href="{{.RelPermalink}}">
+          {{ if .Params.webmSrc }}
+          <div class="hover-card-video">
+            <video autoplay loop muted playsinline alt="{{ .Params.videoAlt }}" width="100%" style="max-width: 100% " class="">
+              <source src="{{relURL (substr (.Params.webmSrc) 1) }}" type="video/webm">
+              <source src="{{relURL (substr (.Params.mp4Src) 1) }}" type="video/mp4">
+              There should have been a video here but your browser does not seem to support it.
+            </video>
+          </div>
+          {{ end }}
+          {{ if .Params.image }}
+          <div class="hover-card-img">
+            {{ partial "imgproc.html" (dict "src" .Params.image "resize" "300x" "alt" .Params.imageAlt "style" "" "class" "" "declaredimensions" false ) }}
+          </div>
+          {{ end }}
+          {{ if .Params.icon }}
+          <div class="hover-card-icon">
+            {{ partial "imgproc.html" (dict "src" .Params.icon "resize" "300x" "alt" .Params.linkTitle "style" "" "class" (.class) "declaredimensions" false ) }}
+          </div>
+          {{ end }}
+          <div {{ if .Params.image }}class="small-hover-card-div"{{ end }}{{ if .Params.webmSrc }}class="small-hover-card-div"{{ end }}>
+            <div>
+            {{ if $customTitle }}<span>{{ $customTitle }}</span>{{ else }}<span>{{ .LinkTitle }}</span>{{ end }}
+            <div class="pills">
+            {{if .Params.languages}}
+            {{ range sort .Params.languages }}
+              <div class="pill pill-lang">{{ . }}</div>
+            {{ end }}
+            {{ end }}
+            {{if .Params.viamresources}}
+            {{ range sort .Params.viamresources }}
+              <div class="pill pill-component">{{ . }}</div>
+            {{ end }}
+            {{ end }}
+            </div>
+          </div>
+          {{if .Params.cost}}
+            <div class="robot-cost">
+              <div class="key">Materials: </div>
+              <div class="value">~${{ .Params.cost }}</div>
+            </div>
+          {{ end }}
+        </div>
+      </a>
+      {{ end }}
+  {{ else }}
+  {{ warnf "?Tutorial card has a bad link: %s" $link }}
+  {{ end }}
+</div>
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
index feb63b02d7..8bd2f8421f 100644
--- a/layouts/shortcodes/video.html
+++ b/layouts/shortcodes/video.html
@@ -27,6 +27,14 @@
   There should have been a video here but your browser does not seem
   to support it.
 </video>
+<noscript>
+  <video class="video-shortcode" preload="none" controls alt="{{ .Get "alt" }}" style="max-width: {{ .Get "max-width" }}" poster="{{ $img.RelPermalink }}">
+    <source src="{{ relURL (substr (.Get "webm_src") 1) }}" type="video/webm">
+    <source src="{{ relURL (substr (.Get "mp4_src") 1) }}" type="video/mp4">
+    There should have been a video here but your browser does not seem
+    to support it.
+  </video>
+</noscript>
   {{ else }}
     {{ errorf "Couldn't get image %s" (.Get "poster") }}
   {{ end }}
diff --git a/static/js/tutorials.js b/static/js/tutorials.js
new file mode 100644
index 0000000000..1981eba0eb
--- /dev/null
+++ b/static/js/tutorials.js
@@ -0,0 +1,215 @@
+const { TypesenseInstantSearchAdapter, instantsearch } = window;
+const observer = lozad();
+
+const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
+  server: {
+    apiKey: "oRW875O3vjeV3qX4ENl1iIA0u2IRDbTQ", // Be sure to use an API key that only allows search operations
+    nodes: [
+      {
+        host: "cgnvrk0xwyj9576lp-1.a1.typesense.net",
+        port: "443",
+        protocol: "https",
+      },
+    ],
+    cacheSearchResultsForSeconds: 2 * 60, // Cache search results from server. Defaults to 2 minutes. Set to 0 to disable caching.
+  },
+  // The following parameters are directly passed to Typesense's search API endpoint.
+  //  So you can pass any parameters supported by the search endpoint below.
+  //  query_by is required.
+  additionalSearchParameters: {
+    query_by: "title,description",
+    sort_by: "featured:asc,date:desc"
+  },
+});
+const searchClient = typesenseInstantsearchAdapter.searchClient;
+
+const search = instantsearch({
+  indexName: 'tutorials',
+  searchClient,
+});
+
+
+const customRefinementList = instantsearch.connectors.connectRefinementList(
+  ({ items, refine, widgetParams }, isFirstRender) => {
+    const container = document.getElementById(widgetParams.container);
+
+    if (isFirstRender) {
+      container.addEventListener('click', ({target}) => {
+        const input = target.closest('input');
+
+        if (input) {
+          refine(input.value.split(" ")[0]);
+        }
+      });
+
+      return;
+    }
+
+    const list = widgetParams.items.map(({label: staticLabel}) => {
+      const elem = items.find(
+        ({label}) => label === staticLabel
+      );
+      let count = 0
+      let isRefined = false;
+      if (elem) {
+        count = elem.count;
+        isRefined = elem.isRefined;
+      }
+
+      return `
+        <li>
+          <label>
+            <input
+              type="button"
+              value="${staticLabel} (${count})"
+              class="${isRefined ? 'refined' : ''}"
+              ${count ? '' : 'disabled'}
+            />
+          </label>
+        </li>
+      `;
+    });
+
+    container.innerHTML = `
+      <ul>
+        ${list.join('')}
+      </ul>
+    `;
+  }
+);
+
+
+search.addWidgets([
+  instantsearch.widgets.hits({
+    container: '#hits',
+    templates: {
+      item: `
+<div class="col tutorial hover-card">
+    <a href="{{permalink}}">
+    {{#webm}}
+        <div class="hover-card-video">
+            <div>
+            <video autoplay loop muted playsinline alt="{{videoAlt}}" width="100%" style="max-width: {{ .maxWidth }}" class="{{- if .class -}}{{ .class}}{{- end }} lozad">
+                <source data-src="..{{webm}}" type="video/webm">
+                <source data-src="..{{mp4}}" type="video/mp4">
+                There should have been a video here but your browser does not seem to support it.
+            </video>
+            </div>
+        </div>
+    {{/webm}}
+    {{#image}}
+        <div class="hover-card-img">
+        <picture>
+            <img src="../{{image}}" alt="{{imageAlt}}" loading="lazy">
+        </picture>
+        </div>
+    {{/image}}
+    <div class="small-hover-card-div">
+        <div>
+            <span>{{title}}</span>
+            <div class="pills">
+                {{#languages}}<div class="pill pill-lang">{{.}}</div>{{/languages}}
+                {{#viamcomponents}}<div class="pill pill-component">{{.}}</div>{{/viamcomponents}}
+                {{#viamservices}}<div class="pill pill-component">{{.}}</div>{{/viamservices}}
+            </div>
+        </div>
+    </div>
+    </a>
+</div>
+`,
+    },
+  }),
+  instantsearch.widgets.configure({
+    hitsPerPage: 12,
+  }),
+  customRefinementList({
+    container: 'languages-list',
+    attribute: 'languages',
+    operator: 'or',
+    sortBy: ['name:asc'],
+    items: [
+      {label: "go" },
+      {label: "python" },
+      {label: "typescript"},
+    ],
+  }),
+  customRefinementList({
+    container: 'components-list',
+    attribute: 'viamcomponents',
+    operator: 'and',
+    sortBy: ['name:asc'],
+    items: [
+      {label: "arm"},
+      {label: "base"},
+      {label: "board"},
+      {label: "camera"},
+      {label: "gripper"},
+      {label: "input_controller"},
+      {label: "motor"},
+      {label: "sensor"},
+      {label: "servo"},
+    ],
+  }),
+  customRefinementList({
+    container: 'services-list',
+    attribute: 'viamservices',
+    operator: 'and',
+    sortBy: ['name:asc'],
+    items: [
+      {label: "data"},
+      {label: "motion"},
+      {label: "frame_system"},
+      {label: "mlmodel"},
+      {label: "navigation"},
+      {label: "base_rc"},
+      {label: "sensors"},
+      {label: "slam"},
+      {label: "vision"},
+    ],
+  }),
+  customRefinementList({
+    container: 'level-list',
+    attribute: 'level',
+    operator: 'or',
+    sortBy: ['name:asc'],
+    items: [
+      {label: "Beginner"},
+      {label: "Intermediate"},
+      {label: "Advanced"},
+    ],
+  }),
+  instantsearch.widgets.pagination({
+    container: '#pagination',
+  }),
+]);
+
+
+search.start();
+search.on('render', function() {
+  if (search.helper.state.disjunctiveFacetsRefinements.languages && search.helper.state.disjunctiveFacetsRefinements.languages.length) {
+    document.getElementById("filter-languages").textContent = "Languages (" + search.helper.state.disjunctiveFacetsRefinements.languages.length + ")";
+  } else {
+    document.getElementById("filter-languages").textContent = "Languages";
+  }
+  if (search.helper.state.facetsRefinements.viamcomponents && search.helper.state.facetsRefinements.viamcomponents.length) {
+    document.getElementById("filter-components").textContent = "Components (" + search.helper.state.facetsRefinements.viamcomponents.length + ")";
+  } else {
+    document.getElementById("filter-components").textContent = "Components";
+  }
+  if (search.helper.state.facetsRefinements.viamservices && search.helper.state.facetsRefinements.viamservices.length) {
+    document.getElementById("filter-services").textContent = "Services (" + search.helper.state.facetsRefinements.viamservices.length + ")";
+  } else {
+    document.getElementById("filter-services").textContent = "Services";
+  }
+  if (search.helper.state.disjunctiveFacetsRefinements.level && search.helper.state.disjunctiveFacetsRefinements.level.length) {
+    document.getElementById("filter-level").textContent = "Level (" + search.helper.state.disjunctiveFacetsRefinements.level.length + ")";
+  } else {
+    document.getElementById("filter-level").textContent = "Level";
+  }
+  if (search.helper.state.facetsRefinements && search.helper.state.disjunctiveFacetsRefinements.languages && search.helper.state.facetsRefinements.viamcomponents) {
+    document.querySelectorAll('.pill-lang').forEach(e => search.helper.state.disjunctiveFacetsRefinements.languages.includes(e.textContent) ? e.classList.add('pill-highlight') : e.classList.remove('pill-highlight'));
+    document.querySelectorAll('.pill-component').forEach(e => (search.helper.state.facetsRefinements.viamcomponents.includes(e.textContent) || search.helper.state.facetsRefinements.viamservices.includes(e.textContent)) ? e.classList.add('pill-highlight') : e.classList.remove('pill-highlight'));
+  }
+
+  observer.observe()
+});