diff --git a/_includes/header.html b/_includes/header.html
index 42cf7c235..e3762d579 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,19 +1,20 @@
 <!-- Intro Start -->
 
 <header class="intro">
-  <div class="intro-body">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-md-offset-2">
-          <span class="intro-text">{{ content }}</span>
-          <h5>&nbsp;</h5>
-          <a href="#{{ site.pages_list['About'] }}" class="page-scroll">
-            <img class="img-me" src="{{site.url}}{{ site.me-img }}" alt="" />
-          </a>
-        </div>
-      </div>
-    </div>
+  <div class="wrapper">
+    <span class="intro-text">{{ content }}</span>
   </div>
+  <a href="#{{ site.pages_list['About'] }}" class="page-scroll">
+    {% if site.me-img contains "https://" %}
+    <img class="img-me" src="{{ site.me-img }}" alt="" />
+    {% else %}
+    <img
+      class="img-me"
+      src="{{site.baseurl}}{{ site.me-img }}"
+      alt=""
+    />
+    {% endif %}
+  </a>
 </header>
 
 <!-- Intro End -->
diff --git a/css/grayscale.scss b/css/grayscale.scss
index e1a74b8a1..e72940e0e 100644
--- a/css/grayscale.scss
+++ b/css/grayscale.scss
@@ -159,44 +159,25 @@ a {
 }
 
 .intro {
-  display: table;
+  display: flex;
+  position: relative;
+  flex-direction: column;
   width: 100%;
-  height: auto;
+  height: 100svh;
   text-align: center;
-  padding-top: 20rem;
   color: $font-color;
-  background: url("{{ site.baseurl }}/img/intro-bg.jpg") no-repeat center center;
-  background-size: cover;
+  background-color: $primary-color;
   -webkit-background-size: cover;
   -moz-background-size: cover;
+  background-size: cover;
   -o-background-size: cover;
+  background-attachment: scroll;
+  background-image: url("{{ site.baseurl }}/img/intro-bg.jpg");
+  background-position: center center;
+  background-repeat: none;
 
-  .intro-body {
-    display: table-cell;
-    vertical-align: middle;
-    position: relative;
-    z-index: 2;
-    .brand-heading {
-      font-size: 40px;
-    }
-    .intro-text {
-      font-size: 1.3rem;
-    }
-  }
-
-  @media (min-width: 768px) {
-    height: 100%;
-    .intro-body {
-      .brand-heading {
-        font-size: 100px;
-      }
-      .intro-text {
-        font-size: 1.6rem;
-      }
-    }
-  }
-  @media (min-width: 1200px) {
-    padding-top: 30rem;
+  .intro-text {
+    font-size: 1.6rem;
   }
 }
 
@@ -205,28 +186,28 @@ a {
   position: absolute;
   left: 0px;
   right: 0px;
-  bottom: 23rem;
-  height: 20%;
-  background: linear-gradient(180deg, rgba(35, 42, 46, 0) 0%, #232a2e 100%);
+  height: 50%;
+  bottom: 0px;
+  background: linear-gradient(
+    180deg,
+    rgba(139, 167, 32, 0) 0%,
+    $primary-color 100%
+  );
   pointer-events: none;
-  @media (max-width: 1200px) {
-    bottom: 35rem;
-    height: 50%;
-  }
-  @media (max-width: 768px) {
-    bottom: 18rem;
-    height: 50%;
-  }
-  @media (max-width: 414px) {
-    bottom: 7rem;
-    height: 50%;
-  }
-  @media (max-width: 375px) {
-    bottom: 2rem;
-    height: 50%;
+  @media (min-width: 768px) {
+    height: 20%;
   }
 }
 
+.intro .wrapper {
+  align-content: end;
+  height: 40%;
+}
+
+.intro a {
+  padding-top: 5%;
+}
+
 @-webkit-keyframes pulse {
   from {
     -webkit-transform: scale(1);