diff --git a/conf.py b/conf.py
index e83de6a92..4ab699f14 100644
--- a/conf.py
+++ b/conf.py
@@ -32,7 +32,7 @@
 # coming with Sphinx (named 'sphinx.ext.*') or your custom ones.
 extensions = [
     "sphinx.ext.mathjax",
-    "recommonmark",
+    "myst_parser",
     "sphinx.ext.intersphinx",
 ] + runestone_extensions()
 
@@ -322,7 +322,7 @@
 # It True, sets js files from Sphinx & Runestone to be loaded with defer attr
 # substantially speeding up page rendering. May cause issues with books that
 # have custom directives or raw html that assume jquery or another library
-# is loaded before body is parsed. 
+# is loaded before body is parsed.
 html_defer_js = True
 
 # Output file base name for HTML help builder.
diff --git a/requirements-dev.in b/requirements-dev.in
index 5fbff74d1..b45b5c7f1 100644
--- a/requirements-dev.in
+++ b/requirements-dev.in
@@ -8,4 +8,5 @@ selenium>=2.53.6
 pyvirtualdisplay
 pytest
 pylint
-readme-renderer>24
\ No newline at end of file
+readme-renderer>24
+myst_parser
\ No newline at end of file
diff --git a/requirements-dev.txt b/requirements-dev.txt
index 5af0695d5..c17709826 100644
--- a/requirements-dev.txt
+++ b/requirements-dev.txt
@@ -8,8 +8,12 @@ alabaster==0.7.12
     # via sphinx
 astroid==2.5.6
     # via pylint
-attrs==20.3.0
+atomicwrites==1.4.0
     # via pytest
+attrs==21.2.0
+    # via
+    #   markdown-it-py
+    #   pytest
 babel==2.9.1
     # via sphinx
 bleach==3.3.0
@@ -27,10 +31,16 @@ codechat==1.8.6
 cogapp==3.0.0
     # via -r requirements.in
 colorama==0.4.4
-    # via twine
+    # via
+    #   pylint
+    #   pytest
+    #   sphinx
+    #   tqdm
+    #   twine
 docutils==0.16
     # via
     #   codechat
+    #   myst-parser
     #   readme-renderer
     #   sphinx
 easyprocess==0.3
@@ -49,19 +59,29 @@ iniconfig==1.1.1
     # via pytest
 isort==5.8.0
     # via pylint
-jinja2==2.11.3
-    # via sphinx
+jinja2==3.0.1
+    # via
+    #   myst-parser
+    #   sphinx
 keyring==23.0.1
     # via twine
 lazy-object-proxy==1.6.0
     # via astroid
 lxml==4.6.3
     # via codechat
-markupsafe==1.1.1
+markdown-it-py==1.1.0
+    # via
+    #   mdit-py-plugins
+    #   myst-parser
+markupsafe==2.0.1
     # via jinja2
 mccabe==0.6.1
     # via pylint
-packaging==20.9
+mdit-py-plugins==0.2.8
+    # via myst-parser
+myst-parser==0.15.1
+    # via -r requirements-dev.in
+packaging==21.0
     # via
     #   bleach
     #   pytest
@@ -95,18 +115,22 @@ pytz==2021.1
     # via babel
 pyvirtualdisplay==2.1
     # via -r requirements-dev.in
+pywin32-ctypes==0.2.0
+    # via keyring
+pyyaml==5.4.1
+    # via myst-parser
 readme-renderer==29.0
     # via
     #   -r requirements-dev.in
     #   twine
 requests-toolbelt==0.9.1
     # via twine
-requests==2.25.1
+requests==2.26.0
     # via
     #   requests-toolbelt
     #   sphinx
     #   twine
-rfc3986==1.4.0
+rfc3986==1.5.0
     # via twine
 selenium==3.141.0
     # via -r requirements-dev.in
@@ -121,6 +145,7 @@ snowballstemmer==2.1.0
 sphinx==3.5.4
     # via
     #   -r requirements.in
+    #   myst-parser
     #   sphinxcontrib-paverutils
 sphinxcontrib-applehelp==1.0.2
     # via sphinx
diff --git a/requirements.in b/requirements.in
index 8ca7d0194..0e81dff23 100644
--- a/requirements.in
+++ b/requirements.in
@@ -1,7 +1,7 @@
 # *********
 # |docname|
 # *********
-click
+click<8.0
 Paver>=1.2.4
 six>1.12
 Sphinx>=2.0.0
diff --git a/requirements.txt b/requirements.txt
index 3b74ff702..580d26530 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -12,7 +12,7 @@ certifi==2020.12.5
     # via requests
 chardet==4.0.0
     # via requests
-click==7.1.2
+click<8.0
     # via -r requirements.in
 codechat==1.8.6
     # via -r requirements.in
diff --git a/runestone/common/css/runestone-custom-sphinx-bootstrap.css b/runestone/common/css/runestone-custom-sphinx-bootstrap.css
index a5b65f95f..ec0637600 100644
--- a/runestone/common/css/runestone-custom-sphinx-bootstrap.css
+++ b/runestone/common/css/runestone-custom-sphinx-bootstrap.css
@@ -661,6 +661,20 @@ div.flash {
     position: fixed;
 }
 
+.navLink:hover {
+    opacity: 1;
+}
+
+.navLink a {
+    display: inline-block;
+    background-color: white; 
+    border-style:solid; 
+    border-color:lightgrey; 
+    border-width:2px; 
+    width:100px; 
+    height:50px
+}
+
 #relations-next {
     right: 35px;
 }
@@ -669,28 +683,22 @@ div.flash {
     left: 35px;
 }
 
-@media (max-width: 600px) {
+.nextprev-list {
+    margin: 10px;
+    padding-left: 0;
+    height: 50px;
+}
 
-    /* Styling definitions for chevron function in bookfuncs.js */
+@media (max-width: 600px) {
+    
     .navLink {
         z-index: 2;
         display: inline;
         position: static;
     }
 
-    ul#top-relations-console,
-    ul#bottom-relations-console {
-        list-style: none;
-        text-align: center;
-        width: 100%;
-        margin: 0 auto;
-        padding: 40px 0 20px 0;
-    }
-
-    #top-relations-next,
-    #top-relations-prev,
-    #bottom-relations-next,
-    #bottom-relations-prev {
+    #relations-next,
+    #relations-prev {
         width: 25%;
         padding: 0 20px;
         display: inline;
diff --git a/runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/layout.html b/runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/layout.html
index 4987aee78..82e4dd689 100644
--- a/runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/layout.html
+++ b/runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/layout.html
@@ -289,6 +289,7 @@
 <div class="container" id="continue-reading"></div>
 
 <div class="container" id="main-content" role="main">
+  
 <!-- Ad Serving for Runestone Campaign -->
 {% if dynamic_pages == 'True' %}
     {% raw %}
@@ -310,9 +311,9 @@
   <div id=scprogresscontainer>
     You have attempted <span id=scprogresstotal></span> of <span id=scprogressposs></span> activities on this page <div id="subchapterprogress"></div>
   </div>
-  {% block nextprevious %}
-      {% include "subchapter.html" %}
-  {% endblock %}
+
+  {% include "subchapter.html" %}
+  
 </div>
 {%- endblock %}
 
diff --git a/runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/subchapter.html b/runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/subchapter.html
index f555e75fd..c0dbab353 100644
--- a/runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/subchapter.html
+++ b/runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/subchapter.html
@@ -1,23 +1,16 @@
+<ul role="navigation" class="nextprev-list nextprev-list" aria-label="Change page">
 {%- if prev %}
-<ul>
-  <li id="relations-prev" style="opacity:0.4" onmouseover="mouseOverPrev()" onmouseout="mouseOutPrev()"class="navLink" title='Previous Section - {{ prev.title|extractText|extractTextII }}' data-toggle="tooltip">
-    <a href="{{ prev.link|e }}" aria-label="{{ prev.title|extractText|extractTextII }}">
-        <div style="background-color: white; border-style:solid; border-color:lightgrey; border-width:2px; width:100px; height:50px">
-            <i class='prevNav glyphicon glyphicon-chevron-left'  style="top:50%; transform:translateY(-50%)translateX(-50%); left: 50%; color:black;"></i>
-        </div>
-    </a>
-  </li>
-</ul>
-
-  {% endif %}
+<li id="relations-prev" class="navLink" title='Previous Section - {{ prev.title|extractText|extractTextII }}' data-toggle="tooltip">
+  <a href="{{ prev.link|e }}" aria-label="Previous - {{ prev.title|extractText|extractTextII }}">
+    <i class='prevNav glyphicon glyphicon-chevron-left'  style="top:50%; transform:translateY(-50%)translateX(-50%); left: 50%; color:black;"></i>
+  </a>
+</li>
+{% endif %}
 
 {%- if next %}
-<ul>
-  <li id="relations-next" style="opacity:0.4" onmouseover="mouseOverNext()" onmouseout="mouseOutNext()" class="navLink" title='Next Section - {{ next.title|extractText|extractTextII }}' data-toggle="tooltip" >
-    <a href="{{ next.link|e }}" aria-label="{{ next.title|extractText|extractTextII }}">
-      <div style="background-color: white; border-style:solid; border-color:lightgrey; border-width:2px; width:100px; height:50px">
-          <i id="relationsNextIcon" class='nextNav glyphicon glyphicon-chevron-right' style="top:50%; transform:translateY(-50%)translateX(-50%); left: 50%; color:black; "></i>
-      </div>
+  <li id="relations-next" class="navLink" title='Next Section - {{ next.title|extractText|extractTextII }}' data-toggle="tooltip" >
+    <a href="{{ next.link|e }}" aria-label="Next - {{ next.title|extractText|extractTextII }}">
+      <i id="relationsNextIcon" class='nextNav glyphicon glyphicon-chevron-right' style="top:50%; transform:translateY(-50%)translateX(-50%); left: 50%; color:black; "></i>
     </a>
   </li>
 </ul>
@@ -25,9 +18,9 @@
 {%- endif %}
 
 <script>
-document.addEventListener('load', (event) => {
-  $('#relations-prev').tooltip({'placement':'right', 'selector': '', 'delay': { show: 100, hide: 50}});
-  $('#relations-next').tooltip({'placement':'left', 'selector': '', 'delay': { show: 100, hide: 50}});
+window.addEventListener('load', (event) => {
+  $('#relations-prev').tooltip({'placement': 'right', 'delay': { show: 100, hide: 50}});
+  $('#relations-next').tooltip({'placement': 'left', 'delay': { show: 100, hide: 50}});
 });
 </script>