diff --git a/components/hero-section/index.js b/components/hero-section/index.js
index 6a8fad169..b56d8b756 100644
--- a/components/hero-section/index.js
+++ b/components/hero-section/index.js
@@ -2,12 +2,12 @@ import './style.scss';
 
 const HeroSection = () => (
   <div className='hero-section'>
-    <h1>Roadmaps for Developers</h1>
+    <h1>Developer Roadmaps</h1>
     <p>Community driven, roadmaps, articles and resources for developers</p>
 
-    <div className="register-form d-flex">
-      <input type="text" />
-      <a href="#" className="btn btn-primary">Register</a>
+    <div className="register-form">
+      <input type="text" className='email-input' placeholder='Enter Email Address' />
+      <a href="#" className="btn btn-dark">Register</a>
 
     </div>
   </div>
diff --git a/components/hero-section/style.scss b/components/hero-section/style.scss
index 56ca6c3d9..dae1950d1 100644
--- a/components/hero-section/style.scss
+++ b/components/hero-section/style.scss
@@ -10,5 +10,32 @@
 
   p {
     color: #333;
+    margin-bottom: 25px;
+  }
+
+  .register-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 42px;
+
+    .email-input {
+      border: 3px solid #000000;
+      border-radius: 3px;
+      outline: none;
+      padding: 5px 13px;
+      min-width: 300px;
+    }
+
+    input, .btn {
+      height: 100%;
+    }
+
+    .btn {
+      display: flex;
+      align-items: center;
+      margin-left: 15px;
+      padding: 5px 15px;
+    }
   }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 77b7faafe..29cc849f9 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.10.2",
     "@zeit/next-css": "latest",
     "@zeit/next-sass": "^1.0.1",
     "autoprefixer": "^9.6.1",
diff --git a/pages/global.scss b/pages/global.scss
index ca9dc9498..637877d53 100644
--- a/pages/global.scss
+++ b/pages/global.scss
@@ -1,4 +1,5 @@
 body {
+  border-top: 5px solid #000000;
   color: #000;
 }
 
diff --git a/yarn.lock b/yarn.lock
index f67518605..449784fc3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -797,6 +797,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-free@^5.10.2":
+  version "5.10.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.10.2.tgz#27e02da1e34b50c9869179d364fb46627b521130"
+  integrity sha512-9pw+Nsnunl9unstGEHQ+u41wBEQue6XPBsILXtJF/4fNN1L3avJcMF/gGF86rIjeTAgfLjTY9ndm68/X4f4idQ==
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"