diff --git a/contact-us/contact-us.component.html b/contact-us/contact-us.component.html
index 4ab42840..077c61fc 100644
--- a/contact-us/contact-us.component.html
+++ b/contact-us/contact-us.component.html
@@ -1,9 +1,8 @@
 <h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1>
 <ng-content select="[page-title]"></ng-content>
 <ng-content select="[page-description]"></ng-content>
-<div class="uk-child-width-1-1 uk-grid" [class.uk-grid-medium]="smallForm"
-     [class.uk-grid-margin-large]="!smallForm" [class.uk-child-width-1-2@s]="!smallForm"
-     [formGroup]="contactForm" uk-grid>
+<div class="uk-child-width-1-2@s uk-child-width-1-1 uk-grid uk-grid-margin-large" [attr.uk-scrollspy-class]="scrollspy?'':null"
+     [class.uk-grid-column-small]="smallForm" [formGroup]="contactForm" uk-grid>
   <div *ngIf="contactForm.get('name')">
     <input class="uk-input" type="text" placeholder="Name *" formControlName="name"
            [class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
@@ -48,22 +47,26 @@
                   [class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched">
         </textarea>
   </div>
-  <div *ngIf="contactForm.get('description')" class="uk-width-1-1">
+  <div *ngIf="contactForm.get('description')">
         <textarea rows="4" class="uk-textarea" placeholder="Description *" formControlName="description"
                   [class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched">
         </textarea>
   </div>
-  <div *ngIf="contactForm.get('recaptcha')" class="uk-width-1-1">
-    <re-captcha class="uk-flex " [ngClass]="'uk-flex-' + alignButton" (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
+  <div *ngIf="contactForm.get('recaptcha')" class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-last@s]="!smallForm">
+    <re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
     </re-captcha>
   </div>
-  <div class="uk-width-1-1 uk-flex" [ngClass]="'uk-flex-' + alignButton">
-    <button class="uk-button uk-text-uppercase uk-flex uk-flex-middle"
-            [class.uk-disabled]="contactForm.invalid || sending"
-            [class.uk-button-primary]="!buttonClass && contactForm.valid" [ngClass]="(contactForm.valid?buttonClass:'')"
-            (click)="send()">
+  <div class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-column]="!smallForm">
+    <div class="uk-flex uk-flex-center" [class.uk-flex-left@s]="!smallForm">
+        <button class="uk-button uk-text-uppercase uk-flex uk-flex-middle"
+                [class.uk-disabled]="contactForm.invalid || sending"
+                [class.uk-button-primary]="!buttonClass && contactForm.valid"
+                [ngClass]="(contactForm.valid?buttonClass:'')"
+                (click)="send()">
           {{sendButton}}
-          <span *ngIf="sending" class="uk-icon uk-margin-small-left"><loading [top_margin]="false" [size]="'small'" [color]="null"></loading></span>
-    </button>
-  </div>
+          <span *ngIf="sending" class="uk-icon uk-margin-small-left"><loading [top_margin]="false" [size]="'small'"
+                                                                              [color]="null"></loading></span>
+        </button>
+      </div>
+    </div>
 </div>
diff --git a/contact-us/contact-us.component.ts b/contact-us/contact-us.component.ts
index 04e05047..19c1a9dc 100644
--- a/contact-us/contact-us.component.ts
+++ b/contact-us/contact-us.component.ts
@@ -13,9 +13,9 @@ export class ContactUsComponent {
   @Input() public formTitle: string;
   @Input() public organizationTypes: string[];
   @Input() public buttonClass: string;
-  @Input() public alignButton: "left" | "right" | "center" = "left";
   @Input() public sendButton: string = "Send";
   @Input() public smallForm: boolean = false;
+  @Input() public scrollspy: boolean = false;
   @Input() public sending: boolean = false;
   @Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
   public properties: EnvProperties = properties;
diff --git a/monitor/how/how.component.ts b/monitor/how/how.component.ts
index 0bd51283..01f6bb69 100644
--- a/monitor/how/how.component.ts
+++ b/monitor/how/how.component.ts
@@ -3,9 +3,9 @@ import {Component} from "@angular/core";
 @Component({
   selector: 'how',
   template: `
-    <div class="how">
+    <div class="how" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 200">
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s first">
+        <div class="uk-width-1-3@s first" uk-scrollspy-class>
           <div>
             <img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
           </div>
@@ -13,12 +13,12 @@ import {Component} from "@angular/core";
             <span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
           </div>
         </div>
-        <div class="uk-width-1-3@s second">
+        <div class="uk-width-1-3@s second" uk-scrollspy-class>
           <div>
             <img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
           </div>
         </div>
-        <div class="uk-width-1-3@s third">
+        <div class="uk-width-1-3@s third" uk-scrollspy-class>
           <div>
             <img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
           </div>
@@ -28,7 +28,7 @@ import {Component} from "@angular/core";
         </div>
       </div>
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s fourth uk-flex-last@s">
+        <div class="uk-width-1-3@s fourth uk-flex-last@s" uk-scrollspy-class>
           <div>
             <img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
           </div>
@@ -37,7 +37,7 @@ import {Component} from "@angular/core";
             <span class="uk-text-primary">Open Science Indicators</span>
           </div>
         </div>
-        <div class="uk-width-1-3@s fifth">
+        <div class="uk-width-1-3@s fifth" uk-scrollspy-class>
           <div>
             <img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
           </div>
@@ -46,7 +46,7 @@ import {Component} from "@angular/core";
             <span class="uk-text-primary">Collaboration Indicators</span>
           </div>
         </div>
-        <div class="uk-width-1-3@s sixth uk-flex-first@s">
+        <div class="uk-width-1-3@s sixth uk-flex-first@s" uk-scrollspy-class>
           <div>
             <img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
           </div>
@@ -58,7 +58,7 @@ import {Component} from "@angular/core";
           </div>
         </div>
       </div>
-      <div class="final">
+      <div class="final" uk-scrollspy-class>
         <div>
           <img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
         </div>
diff --git a/sharedComponents/quick-contact/quick-contact.component.css b/sharedComponents/quick-contact/quick-contact.component.css
index 11492c4d..5834bbe3 100644
--- a/sharedComponents/quick-contact/quick-contact.component.css
+++ b/sharedComponents/quick-contact/quick-contact.component.css
@@ -9,7 +9,10 @@
 }
 
 .uk-drop {
-	width: 380px;
+	max-height: 650px;
+	height: calc(80vh - 100px);
+	width: 500px;
+	max-width: 80vw;
 }
 
 .avatars > img {
@@ -22,14 +25,3 @@
 .avatars > img:nth-child(n+1) {
 	margin-left: -5px;
 }
-
-/* hide scrollbar but allow scrolling */
-.uk-overflow-auto {
-	-ms-overflow-style: none; /* for Internet Explorer, Edge */
-	scrollbar-width: none; /* for Firefox */
-	overflow-y: scroll;
-}
-
-.uk-overflow-auto::-webkit-scrollbar {
-	display: none; /* for Chrome, Safari, and Opera */
-}
diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html
index 7f133589..f4427ac7 100644
--- a/sharedComponents/quick-contact/quick-contact.component.html
+++ b/sharedComponents/quick-contact/quick-contact.component.html
@@ -4,7 +4,7 @@
 		<icon *ngIf="showForm" name="close" [flex]="true"></icon>
 		<span class="uk-margin-small-left">Contact</span>
 	</a>
-	<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
+	<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
 		<div class="uk-background-secondary uk-padding-small uk-text-center">
 			<div class="uk-text-small">
 				Send a message
@@ -22,10 +22,10 @@
 				We usually respond in a few hours.
 			</div>
 		</div>
-		<div class="uk-height-medium uk-card-body uk-overflow-auto">
+		<div class="uk-card-body">
 			<loading *ngIf="sending" class="uk-margin-xlarge-top"></loading>
 			<contact-us *ngIf="contactForm && !sending" [organizationTypes]="organizationTypes" (sendEmitter)="send($event)"
-									[smallForm]="true" alignButton="center" sendButton="Send Message" [contactForm]="contactForm"></contact-us>
+									[smallForm]="true" sendButton="Send Message" [contactForm]="contactForm"></contact-us>
 		</div>
 	</div>
 </div>
diff --git a/utils/section-scroll/section-scroll.component.css b/utils/section-scroll/section-scroll.component.css
index 06f037e9..7fe0c763 100644
--- a/utils/section-scroll/section-scroll.component.css
+++ b/utils/section-scroll/section-scroll.component.css
@@ -3,7 +3,6 @@
     position: sticky;
     top: 0;
     height: 100vh;
-    /*border: 1px solid red;*/
 }
 
 [left] .imgContainer {
@@ -12,26 +11,6 @@
     left: 0;
     width: 100%;
     height: 70%;
-    /*border: 1px solid greenyellow;*/
-}
-
-@media (max-width: 960px) {
-    [left] {
-        height: 50vh;
-    }
-
-    [left] .imgContainer {
-        top: 5%;
-        height: 80%;
-    }
-
-    [left] > * {
-        align-items: flex-start;
-    }
-
-    [scroll] > * {
-        align-items: flex-end;
-    }
 }
 
 [left] img {
@@ -48,5 +27,23 @@
 
 [scroll] > * {
     height: 60vh;
-    /*    border: 1px solid darkorange;*/
+}
+
+@media (max-width: 960px) {
+    [left] {
+        height: 50vh;
+    }
+
+    [left] .imgContainer {
+        top: 5%;
+        height: 100%;
+    }
+
+    [left] > * {
+        align-items: flex-start;
+    }
+
+    [scroll] > * {
+        height: 50vh;
+    }
 }
diff --git a/utils/section-scroll/section-scroll.component.ts b/utils/section-scroll/section-scroll.component.ts
index 85e6a2f4..f80b1041 100644
--- a/utils/section-scroll/section-scroll.component.ts
+++ b/utils/section-scroll/section-scroll.component.ts
@@ -77,11 +77,14 @@ export class SectionScrollComponent implements AfterViewInit {
       entries.forEach((entry) => {
         entry.target['style'].opacity = String(entry.intersectionRatio);
         let id = this.map.get(entry.target.id);
-        if (this.left.has(id) && this.lastElementId !== id) {
+        if (this.left.has(id)) {
+          let element = this.left.get(id).parentElement;
+          if(this.lastElementId !== id || Number.parseFloat(element.style.opacity) < 1) {
+            this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
+          }
           if(entry.isIntersecting) {
             this.lastElementId = id;
           }
-          this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
         }
       });
     }, options);