diff --git a/app/styles/app.scss b/app/styles/app.scss
index a2eaf59..793ba03 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -9,4 +9,6 @@
 
 @import "components/help";
 
-@import "components/footer";
\ No newline at end of file
+@import "components/footer";
+
+@import "components/user-guide"
\ No newline at end of file
diff --git a/app/styles/components/user-guide.scss b/app/styles/components/user-guide.scss
new file mode 100644
index 0000000..3af2ac3
--- /dev/null
+++ b/app/styles/components/user-guide.scss
@@ -0,0 +1,11 @@
+.help-video
+{
+  max-width: 90%;
+  height: auto;
+  max-height: 75%;
+  text-align:center;
+}
+
+.help-img {
+    border: 2px solid grey;
+}
\ No newline at end of file
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 66349c3..7eeb05d 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -24,15 +24,13 @@
         <a class="nav-link" href="/contact-us">Contact Us</a>
       </li>
     </ul>
-    <a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-desktop" title="Get Help">?</div></a>
+    <LinkTo @route="user-guide"><div id="help-button-desktop" title="Get Help">?</div></LinkTo>
   </div>
 </nav>
 
 <ScriptureNavBar/>
 
-<a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-mobile" title="Get Help">?</div></a>
-
-<HelpModal/>
+<LinkTo @route="user-guide"><div id="help-button-mobile" title="Get Help">?</div></LinkTo>
 
 {{outlet}}
 
diff --git a/app/templates/user-guide.hbs b/app/templates/user-guide.hbs
index e69de29..7c9d70d 100644
--- a/app/templates/user-guide.hbs
+++ b/app/templates/user-guide.hbs
@@ -0,0 +1,17 @@
+<div class="container-sm mt-3">
+    <div class="alert alert-info" role="alert">
+    This site is still under construction, so don't be surprised if things look a little different from the examples below. 
+    </div>
+  <h2 class="mt-4">How to Use This Site</h2>
+  <p class="mt-4">Here are a few visual aids to help you learn the basics of using this site.</p>
+  <h3>Screenshots</h3>
+  <p>(Click the image to open large in a new tab.)</p>
+  <a href="/assets/images/desk.jpg" target="_blank"><img src="/assets/images/desk.jpg" class="help-img img-fluid"></a>
+
+  <h3 class="mt-4">Video tutorial</h3>
+    <video controls="controls" src="//btr.mrgreekgeek.com/btr_getting_started.mp4" class="help-video" poster="/assets/images/vid-thumb.jpg">
+    Your browser does not support the HTML5 Video element.
+    </video>
+
+
+</div>
\ No newline at end of file
diff --git a/public/assets/images/vid-thumb.jpg b/public/assets/images/vid-thumb.jpg
new file mode 100644
index 0000000..9cb70e8
Binary files /dev/null and b/public/assets/images/vid-thumb.jpg differ