diff --git a/public/style.css b/public/style.css
index 6d16a2e..1f6c2a1 100644
--- a/public/style.css
+++ b/public/style.css
@@ -6543,8 +6543,7 @@ label.panel-block {
 
 .hero-bg {
   background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.6) 0, rgba(192, 235, 250, 0.2) 2em), repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.4) 0, rgba(192, 235, 250, 0.1) 2em), #FFF;
-  background-blend-mode: multiply;
-  background-attachment: fixed; }
+  background-blend-mode: multiply; }
 
 .hero .navbar.darken {
   background: rgba(0, 0, 0, 0.7);
@@ -6564,8 +6563,14 @@ label.panel-block {
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
   /* IE6-9 */ }
 
-.hero .navbar-item {
-  color: #8A4D76; }
+.has-inner-shadow-bottom {
+  box-shadow: inset 0px -10px 15px -11px rgba(0, 0, 0, 0.75); }
+
+.has-inner-shadow-top {
+  box-shadow: inset 0px 10px 15px -11px rgba(0, 0, 0, 0.75); }
+
+.has-shadow-top {
+  box-shadow: 0px 10px 15px -11px rgba(0, 0, 0, 0.75); }
 
 .m-none {
   margin: 0; }
diff --git a/resources/sass/main.scss b/resources/sass/main.scss
index 450e637..b229090 100644
--- a/resources/sass/main.scss
+++ b/resources/sass/main.scss
@@ -14,11 +14,19 @@
     .navbar.darken {
         @include linearGradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
     }
-    .navbar-item{
-      color: $primary;
-    }
+    // .navbar-item{
+    //   color: $primary;
+    // }
+}
+.has-inner-shadow-bottom{
+  box-shadow: inset 0px -10px 15px -11px rgba(0,0,0,0.75);
+}
+.has-inner-shadow-top{
+  box-shadow: inset 0px 10px 15px -11px rgba(0,0,0,0.75);
+}
+.has-shadow-top{
+  box-shadow: 0px 10px 15px -11px rgba(0,0,0,0.75);
 }
-
 $sizeUnit: rem;
 $marginKey: 'm';
 $paddingKey: 'p';
diff --git a/resources/sass/mixins.scss b/resources/sass/mixins.scss
index dc19408..b477c76 100644
--- a/resources/sass/mixins.scss
+++ b/resources/sass/mixins.scss
@@ -43,5 +43,5 @@
     rgba($bg-primary,0.1) 2em
   ), #FFF;
   background-blend-mode: multiply;
-  background-attachment: fixed;
+  // background-attachment: fixed;
 }
diff --git a/resources/views/landing.edge b/resources/views/landing.edge
index 1bd753b..004120a 100644
--- a/resources/views/landing.edge
+++ b/resources/views/landing.edge
@@ -4,8 +4,8 @@
 Seepur | Shared story time
 @endsection
 @section('hero')
-<section class="hero is-medium hero-bg">
-  @!component('components.nav.nav', isLanding = true, auth=auth)
+<section class="hero is-medium hero-bg has-inner-shadow-bottom">
+  @!component('components.nav.nav', isLanding = false, auth=auth)
   <div class="hero-body">
     <div class="container">
       <div class="columns">
@@ -25,7 +25,7 @@ Seepur | Shared story time
           <figure class="image">
             <img src="/images/grand.svg" alt="" srcset="">
           </figure>
-          <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>
+          {{--  <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>  --}}
 
         </div>
       </div>
@@ -52,7 +52,7 @@ With SEEPUR you can simply choose your grandchild/niece/nephew you wish to conne
       <figure class="image is-5by4">
         <img src="/images/be-there.svg" alt="" srcset="">
       </figure>
-      <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>
+      {{--  <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>  --}}
     </div>
     <div class="column has-text-centered">
       <div class="title">Be There</div>
@@ -78,7 +78,7 @@ With SEEPUR you can simply choose your grandchild/niece/nephew you wish to conne
       <figure class="image is-5by4">
         <img src="/images/learning.svg" alt="" srcset="">
       </figure>
-      <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>
+      {{--  <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small>  --}}
     </div>
   </div>
 </section>
diff --git a/resources/views/layouts/landing.edge b/resources/views/layouts/landing.edge
index 444c059..7c9dfb9 100644
--- a/resources/views/layouts/landing.edge
+++ b/resources/views/layouts/landing.edge
@@ -24,7 +24,7 @@
       </div>
 
     </section>
-    <div class="hero hero-bg">
+    <div class="hero hero-bg has-inner-shadow-top">
       <section class="section  has-text-centered">
         <h1 class="title">Join Now</h1>
         <h2 class="subtitle">It takes less then a minute. You could have been done by now, but you are still reading...</h2>