diff --git a/main/html/index.html b/main/html/index.html
index 03af547b..3102d20e 100644
--- a/main/html/index.html
+++ b/main/html/index.html
@@ -36,6 +36,10 @@
         <script src="../js/plots/createHeatmap.js" defer></script>
         <script src="../js/plots/createViolinPlot.js" defer></script>
         <script src="../js/afterSubmit.js" defer></script>
+        <!-- tutorial dependencies -->
+        <link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
+        <script src="https://unpkg.com/intro.js/minified/intro.min.js" defer></script>
+        <script src="../js/tutorial.js" defer></script>
     </head>
 
     <body>
@@ -49,6 +53,7 @@
                         <div class="nav-wrapper">
                             <a href="index.html" style="font-style: italic" class="brand-logo center">WebGen</a>
                             <ul id="nav-mobile" class="right hide-on-med-and-down">
+                                <li><a id="tutorialAnchor" onclick="startTutorial()">Tutorial</a></li>
                                 <li class="active"><a href="about.html">About</a></li>
                             </ul>
                             <!-- <ul id="nav-mobile" class="right hide-on-med-and-down">
@@ -152,7 +157,7 @@ <h5 style="text-align: center; color: lightcoral; font-family: Georgia, 'Times N
                     });
                 </script>
 
-                <div>
+                <div id="tumorSelectorArea">
                     <p style="text-align: center"><b>1) Select tumor type(s)</b></p>
                     <div id="cancerQuerySelectBox">
                         <select
diff --git a/main/js/tutorial.js b/main/js/tutorial.js
new file mode 100644
index 00000000..710a09d3
--- /dev/null
+++ b/main/js/tutorial.js
@@ -0,0 +1,33 @@
+// Tutorial using intro.js
+
+const startTutorial = () => {
+	// See https://introjs.com/docs/intro/options#options
+	const options = {
+		showBullets: false,
+		steps: [{
+			element: document.querySelector("#tutorialAnchor"),
+			title: 'Welcome!',
+			intro: 'We are so happy to see you here! 👋',
+		}, {
+			element: document.querySelector('#tumorSelectorArea'),
+			intro: 'Select one or more tumor types here.',
+			position: 'top',
+		}, {
+			element: document.querySelector("#geneOneQuerySelectBox"),
+			intro: 'Select one or more genes here.'
+		}, {
+			element: document.querySelector('#clinicalQuerySelectBox'),
+			intro: 'Select metadata here.'
+		}, {
+			element: document.querySelector("#geneTwoQuerySelectBox"),
+			intro: 'Select another gene (???)',
+		}, {
+			element: document.querySelector("#pathwaySelectBox"),
+			intro: "Select a pathway here."
+		}, {
+			element: document.querySelector("#submitButton"),
+			intro: "Click submit, and wait a few seconds for your plots!"
+		}]
+	};
+	introJs().setOptions(options).start()
+}
