diff --git a/server/apps/main/templates/main/home.html b/server/apps/main/templates/main/home.html
index 8314a775..5adf7c80 100644
--- a/server/apps/main/templates/main/home.html
+++ b/server/apps/main/templates/main/home.html
@@ -6,6 +6,8 @@
 
   {% block content %}
 
+<script type="module" src="{% static 'js/tour.js' %}"></script>
+
 <!--Navigation-->
 <section id="title">
 <!--  Navigation-->
diff --git a/server/apps/main/templates/main/partials/jquery.html b/server/apps/main/templates/main/partials/jquery.html
index bd0b150b..6eb2c85d 100644
--- a/server/apps/main/templates/main/partials/jquery.html
+++ b/server/apps/main/templates/main/partials/jquery.html
@@ -1,3 +1,5 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/shepherd.js@11.1.1/dist/js/shepherd.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@11.1.1/dist/css/shepherd.css"/>
diff --git a/server/apps/main/templates/main/partials/navigation.html b/server/apps/main/templates/main/partials/navigation.html
index 80fbacdc..a067d572 100644
--- a/server/apps/main/templates/main/partials/navigation.html
+++ b/server/apps/main/templates/main/partials/navigation.html
@@ -11,50 +11,50 @@
       <div class="collapse navbar-collapse" id="navbarText">
         <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:what_autism_is' %}">What is Autism</a>
+            <a class="nav-content nav-item nav-link" id="nav-what-is-autism" href="{% url 'main:what_autism_is' %}">What is Autism</a>
           </li>
           {% if user.is_authenticated %}
-          <li class="nav-item dropdown nav-nopadding">
+          <li class="nav-item dropdown nav-nopadding" id="nav-experiences">
             <a class="nav-link dropdown-toggle nav-content" href="#" id="experienceDropdownMenuLink" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Experiences
             </a>
             <div class="dropdown-menu" aria-labelledby="experienceDropdownMenuLink">
-              <a class="dropdown-item" href="{% url 'main:public_experiences' %}">View Stories</a>
-              <a class="dropdown-item" href="{% url 'main:share_exp' %}">Share Stories</a>
+              <a class="dropdown-item" id="nav-experiences-view" href="{% url 'main:public_experiences' %}">View Stories</a>
+              <a class="dropdown-item" id="nav-experiences-share" href="{% url 'main:share_exp' %}">Share Stories</a>
             </div>
           </li>
           {% is_moderator user as moderator %}
           {% if moderator %}
           <li class="nav-item dropdown nav-nopadding">
-            <a class="nav-link dropdown-toggle nav-content" href="#" id="navbarDropdownMenuLink" role="button"
+            <a class="nav-link dropdown-toggle nav-content" id="nav-moderation" href="#" id="navbarDropdownMenuLink" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Moderation
             </a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-              <a class="dropdown-item" href="{% url 'main:moderation_list' %}?status=pending">Pending</a>
-              <a class="dropdown-item" href="{% url 'main:moderation_list' %}?status=approved">Approved</a>
-              <a class="dropdown-item" href="{% url 'main:moderation_list' %}?status=rejected">Rejected</a>
+              <a class="dropdown-item" id="nav-moderation-pending" href="{% url 'main:moderation_list' %}?status=pending">Pending</a>
+              <a class="dropdown-item" id="nav-moderation-approved" href="{% url 'main:moderation_list' %}?status=approved">Approved</a>
+              <a class="dropdown-item" id="nav-moderation-rejected" href="{% url 'main:moderation_list' %}?status=rejected">Rejected</a>
             </div>
           </li>
 
           {% endif %}
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:my_stories' %}">My Stories</a>
+            <a class="nav-content nav-item nav-link" id="nav-my-stories" href="{% url 'main:my_stories' %}">My Stories</a>
           </li>
           {% else %}
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:public_experiences' %}">View Stories</a>
+            <a class="nav-content nav-item nav-link" id="nav-public-experiences" href="{% url 'main:public_experiences' %}">View Stories</a>
           </li>
           {% endif %}
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:about_us' %}">About Us</a>
+            <a class="nav-content nav-item nav-link" id="nav-about" href="{% url 'main:about_us' %}">About Us</a>
           </li>
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:code_of_conduct' %}">Code of Conduct</a>
+            <a class="nav-content nav-item nav-link" id="nav-coc" href="{% url 'main:code_of_conduct' %}">Code of Conduct</a>
           </li>
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:help' %}">Help</a>
+            <a class="nav-content nav-item nav-link" id="nav-help" href="{% url 'main:help' %}">Help</a>
           </li>
         </ul>
 
@@ -62,14 +62,14 @@
 
         {% if user.is_authenticated %}
         <ul class="navbar-nav nav-right">
-          <li class="nav-item dropdown nav-nopadding">
+          <li class="nav-item dropdown nav-nopadding" id="nav-account">
             <a class="nav-link dropdown-toggle nav-content nav-account" href="#" id="accountDropdownMenuLink" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Account
             </a>
             <div class="dropdown-menu" aria-labelledby="accountDropdownMenuLink">
-              <a class="dropdown-item" href="{% url 'users:profile' %}">Profile</a>
-              <form class="form-inline nav-nomargin" action="{% url 'main:logout' %}" method="post">
+              <a class="dropdown-item" id="nav-account-profile" href="{% url 'users:profile' %}">Profile</a>
+              <form class="form-inline nav-nomargin" id="nav-account-logout" action="{% url 'main:logout' %}" method="post">
                 {% csrf_token %}
                 <button class="dropdown-item" type="submit">Log out</button>
               </form>
diff --git a/static/js/tour.js b/static/js/tour.js
new file mode 100644
index 00000000..a84252cf
--- /dev/null
+++ b/static/js/tour.js
@@ -0,0 +1,237 @@
+import {offset} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.0/+esm';
+
+$(function () {
+  // Set a few things up
+  $('.dropdown').on('hide.bs.dropdown', function(e) {
+    return !!$(this).data('closable');
+  }).data('closable', true);
+
+  function setClosable(selector, closable) {
+    return $(selector).data('closable', closable);
+  }
+
+  function openDropdown(selector) {
+    let element = $(selector)
+    if (!element.hasClass("show")) {
+      element.find('.dropdown-toggle').dropdown('toggle');
+    }
+    return element;
+  }
+
+  // Initialise the tour
+  const tour = new Shepherd.Tour({
+    useModalOverlay: true,
+    defaultStepOptions: {
+      scrollTo: {
+        behavior: 'smooth',
+        block: 'center'
+      },
+      modalOverlayOpeningPadding: 2,
+      modalOverlayOpeningRadius: 16,
+      floatingUIOptions: { middleware: [offset({ mainAxis: 20, crossAxis: 0 })] }
+    }
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'welcome',
+    text: 'Welcome ot the AutSPACEs platform!<br/></br>Would you like to take a tour?',
+    buttons: [
+      {
+        text: 'No thank you',
+        action: tour.complete
+      },
+      {
+        text: 'Yes, let\'s go!',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'explanation',
+    text: 'AutSPACEs is all about providing a platform for autistic people to share stories.',
+    attachTo: {
+      element: '.title-text',
+      on: 'bottom'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'code-of-conduct',
+    text: 'Before submitting a story, please make sure you read our Code of Conduct carefully. It will only take a few minutes. Once you\'ve read it, press your browser\'s \`back\` button to return to this tour.',
+    attachTo: {
+      element: '#nav-coc',
+      on: 'bottom'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'experiences',
+    text: 'A good place to start is by reading others\'s stories to get an idea of what\'s already here. Select the \'Experiences\' item now to open the experiences submienu.',
+    attachTo: {
+      element: '#nav-experiences',
+      on: 'right-start'
+    },
+    advanceOn: {
+      selector: '#experienceDropdownMenuLink',
+      event: 'click'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'view',
+    text: 'A good place to start is by reading others\'s stories to get an idea of what\'s already here. Select the \'View Stories\' option under the \'Experiences\' item to check them out.',
+    attachTo: {
+      element: '#nav-experiences-view',
+      on: 'right-start',
+    },
+    when: {
+      "before-show": function() {
+        setClosable('#nav-experiences', false);
+        openDropdown('#nav-experiences');
+      },
+      "before-hide": function() {
+        setClosable('#nav-experiences', true);
+      }
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'account',
+    text: 'Before you submit your first experience, please take the time to fill out your details in the user profile. To open your profile select the Account menu.',
+    attachTo: {
+      element: '#nav-account',
+      on: 'left-start'
+    },
+    advanceOn: {
+      selector: '#accountDropdownMenuLink',
+      event: 'click'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'profile',
+    text: 'Select the profile menu entry to view and edit your profile.',
+    attachTo: {
+      element: '#nav-account-profile',
+      on: 'left-start',
+    },
+    when: {
+      "before-show": function() {
+        setClosable('#nav-account', false);
+        openDropdown('#nav-account');
+      },
+      "before-hide": function() {
+        setClosable('#nav-account', true);
+      }
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'get-involved',
+    text: 'AutSPACEs is co-developed with our community. We\'d love for you to be involved too. Whatever your skills we can use them, from research to design to documentation to development to discussion. Find out more here.',
+    attachTo: {
+      element: '#cta',
+      on: 'top'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'finish',
+    text: 'That\s it! We hope you find the AutSPACEs platform useful and we look forward to helping share your experiences.',
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Finish',
+        action: tour.complete
+      }
+    ]
+  });
+
+  // Start the fans please!
+  tour.start();
+});
+
+