diff --git a/lib/css/article.css b/lib/css/article.css
index 10e82fc..cf66349 100644
--- a/lib/css/article.css
+++ b/lib/css/article.css
@@ -136,6 +136,19 @@ nav {
 .dropdown-item {
   color: white;
 }
+
+/* roadmap styling */
+#accordion a {
+  display: block;
+  background-color: rgb(3, 76, 105);
+}
+
+#accordion a:hover {
+  color: #25d9e0;
+}
+/* /roadmap styling */
+
+*/
 /* /Special Branded Color Classes*/
 /* hr Style for heading*/
 
diff --git a/roadmap/index.html b/roadmap/index.html
index eaa1968..89491af 100644
--- a/roadmap/index.html
+++ b/roadmap/index.html
@@ -82,15 +82,17 @@
         <div class="row">
           <!--main-column-->
           <div class="col-lg-10 col-xl-8 offset-sm-0 offset-md-0 offset-lg-1 offset-xl-2">  
-
+            <!--roadmap-accordion-->
             <div id="accordion">
+
+              <!--already-completed-->
               <div class="lbry-dark">
                 <div class="card-header" id="headingOne">
-                  <h5 class="mb-0">
-                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                  <h2 class="mb-0">
+                    <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                       Already Completed
-                    </button>
-                  </h5>
+                    </a>
+                  </h2>
                 </div>
             
                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
@@ -156,13 +158,16 @@
                   </div>
                 </div>
               </div>
+              <!--/already-completed-->
+
+              <!--adminstrative-challenges-->
               <div class="lbry-dark">
                 <div class="card-header" id="headingTwo">
-                  <h5 class="mb-0">
-                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                  <h2 class="mb-0">
+                    <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                       Administrative Challenges
-                    </button>
-                  </h5>
+                    </a>
+                  </h2>
                 </div>
                 <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                   <div class="card-body">
@@ -176,13 +181,16 @@
                   </div>
                 </div>
               </div>
+              <!--/adminstrative-challenges-->
+
+              <!--technical-challenges-->
               <div class="lbry-dark">
                 <div class="card-header" id="headingThree">
-                  <h5 class="mb-0">
-                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                  <h2 class="mb-0">
+                    <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                       Technical Challenges
-                    </button>
-                  </h5>
+                    </a>
+                  </h2>
                 </div>
                 <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                   <div class="card-body">
@@ -193,13 +201,16 @@
                   </div>
                 </div>
               </div>
+              <!--/technical-challenges-->
+
+              <!--marketing-challenges-->
               <div class="lbry-dark">
                 <div class="card-header" id="headingFour">
-                  <h5 class="mb-0">
-                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                  <h2 class="mb-0">
+                    <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                       Marketing and Outreach Challenges
-                    </button>
-                  </h5>
+                    </a>
+                  </h2>
                 </div>
                 <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
                   <div class="card-body">
@@ -221,11 +232,11 @@
                   </div>
                 </div>
               </div>
+              <!--/marketing-challenges-->
             </div>
+            <!--/roadmap-accordion-->
           </div>
-          <!--main-column-->
-
-          
+          <!--/main-column-->
         </div>
         <!--/main-row-->    
       </div>