diff --git a/app/components/help-modal.hbs b/app/components/help-modal.hbs
new file mode 100644
index 0000000..3407a33
--- /dev/null
+++ b/app/components/help-modal.hbs
@@ -0,0 +1,19 @@
+<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="HelpScreen" aria-hidden="true">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="HelpScreen">How To Use This Site</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+		<div class="desktop-img"></div>
+		<div class="mobile-img"></div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 8a81591..267a253 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -24,10 +24,16 @@
         <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>
   </div>
 </nav>
 
 <ScriptureNavBar/>
+
+<a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-mobile" title="Get Help">?</div></a>
+
+<HelpModal/>
+
 {{outlet}}
 
 <footer class="card-fluid bg-dark mt-5">