diff --git a/_layouts/roadmap.html b/_layouts/roadmap.html
index 18099ba..2eca2d9 100644
--- a/_layouts/roadmap.html
+++ b/_layouts/roadmap.html
@@ -5,19 +5,6 @@
 
 	<body>
 		{%- include header.html -%}
-		<div class="vertical-line-container">
-			<div class="vertical-line"></div>
-
-			<div class="node"></div>
-			<div class="node"></div>
-			<div class="node"></div>
-			<div class="node"></div>
-			<div class="node"></div>
-			<div class="node"></div>
-			<div class="node"></div>
-			<div class="node"></div>
-			<div class="node"></div>
-		</div>
 
 		<div class="container">
 			<main>
@@ -31,13 +18,13 @@
 				<section class="flex-container capsule-header video-content" style="margin-top: 80px">
 					<div class="flex-container-inner" style="padding-top: 0px">
 						<div class="text-well center">
-							<div class="capsule">roadmap</div>
+							<div class="capsule-teal">roadmap</div>
 							<br>
 							<h1 class="hero-header">verifiable security without single points of failure</h1>
 							<br>
 							<p class="hero-p center">Most systems still rely on single individuals or computers, unverifiable software, and opaque processes. We’re redesigning security for transparency from the ground up.</p>
 							<div class="button-container center">
-								<a href="#roadmap" class="mega button">View roadmap</a>
+								<a href="#roadmap" class="mega-teal button">View roadmap</a>
 							</div>
 						</div>
 					</div>
@@ -307,7 +294,7 @@
 					<h4 class="gradient-text center" style="line-height: 50px; max-width: 600px; margin: auto;">want to help with our vision?</h4>
 					<p class="hero-p center" style="max-width: 600px; margin-top: 10px">If you would like to help us please sponsor our work or get involved as a contributor.</p>
 					<div class="button-container center">
-						<a href="/contact.html" class="mega button">Get in touch</a>
+						<a href="/contact.html" class="mega-teal button">Get in touch</a>
 					</div>
 				</section>
 
diff --git a/_sass/_dark.scss b/_sass/_dark.scss
index 0c13e89..f639986 100644
--- a/_sass/_dark.scss
+++ b/_sass/_dark.scss
@@ -18,7 +18,8 @@
 	--mid-purple: #473C68;
 	--dark-purple: #241846;
 	--light-teal: #6DD4F1;
-	--mid-blue: #02CAF2;
+	--mid-teal: #02CAF2;
+	--dark-teal: #01586A;
 	--pink: #F048B5;
 	--light-grey: #9A9A9A;
 	--mid-grey: #292929;
diff --git a/_sass/base.scss b/_sass/base.scss
index 18d784e..aae488f 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -196,6 +196,13 @@ a:hover {
 	@include capsule;
 }
 
+.capsule-teal {
+	color: var(--light-teal);
+	background: var(--dark-teal);
+	border: 1px solid var(--dark-teal);
+	@include capsule;
+}
+
 .roadmap-header {
 	display: flex;
 	justify-content: space-between;
@@ -277,48 +284,6 @@ a:hover {
   background-color: var(--base-color);
 	color: white !important;
 }
-/* roadmap line starts */
-
-.vertical-line-container {
-	position: absolute;
-	top: 2050px;
-	right: 200px;
-	width: 60px;
-	height: 3550px;
-}
-
-.vertical-line {
-	position: absolute;
-	top: 0;
-	left: 50%;
-	transform: translateX(-50%);
-	width: 10px;
-	height: 100%;
-	background-color: #262626;
-	border-radius: 10px;
-}
-
-.node {
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%);
-	width: 40px;
-	height: 40px;
-	background-color: #262626;
-	border-radius: 50%;
-}
-
-.node:nth-child(2)  { top: 0;      }
-.node:nth-child(3)  { top: 470px;  }
-.node:nth-child(4)  { top: 920px;  }
-.node:nth-child(5)  { top: 1380px;  }
-.node:nth-child(6)  { top: 1830px;  }
-.node:nth-child(7)  { top: 2250px; }
-.node:nth-child(8)  { top: 2680px; }
-.node:nth-child(9)  { top: 3100px; }
-.node:nth-child(10) { top: 3540px; }
-
-/* end roadmap lines styling */
 
 .roadmap .flex-container .flex-container-inner .text-well {
 	border: 1px solid grey;
@@ -760,7 +725,6 @@ hr {
 	color: var(--base-color);
 }
 
-
 .mega.button {
    background-color: var(--dark-purple);
    color: var(--base-color);
@@ -775,6 +739,20 @@ hr {
 	border: 2px solid var(--purple);
 }
 
+.mega-teal.button {
+   background-color: var(--dark-teal);
+   color: var(--base-color);
+   border: 2px solid var(--light-teal);
+	 box-shadow: 0 0 18px rgba(42,106,255,0.6);
+	@include mega;
+}
+
+.mega-teal.button:hover {
+	background: var(--mid-teal);
+	color: var(--base-color);
+	border: 2px solid var(--mid-teal);
+}
+
 .button-container {
    padding: 30px 0px;
 }
