diff --git a/angular/projects/public-nrpti/src/app/records/records-list/records-list.component.html b/angular/projects/public-nrpti/src/app/records/records-list/records-list.component.html
index 682b6c16b..6aa4fb174 100644
--- a/angular/projects/public-nrpti/src/app/records/records-list/records-list.component.html
+++ b/angular/projects/public-nrpti/src/app/records/records-list/records-list.component.html
@@ -1,119 +1,105 @@
 <main class="container-fluid-padding">
   <div *ngIf="!loading">
-    <div class="row">
-      <div class="col-xl-3 col-lg-4 order-lg-1 order-2 mb-3">
-        <div class="search-filter__header">
-          <div>
-            <h5 class="d-inline-block">Keyword Search</h5>
-            <i
-              class="keyword-help material-icons grey-subtext_no-italics d-inline-block align-text-bottom ml-2"
-              matTooltip="Summary, description, location, outcome, and issued to name fields"
-              aria-label="Icon that displays a tooltip when focused or hovered over">
-              help_outline
-            </i>
-          </div>
-          <div class="keyword-search mb-3">
-            <input
-              class="keyword-search__input py-0 px-2 border-0"
-              (keyup.enter)="keywordSearch()"
-              placeholder="Type keyword search words..."
-              [(ngModel)]="keywordSearchWords" />
-            <button (click)="keywordSearch()" class="keyword-search__button border-0">
-              <i class="material-icons align-middle">search</i>
-            </button>
-          </div>
-          <button
-            [hidden]="showAdvancedFilters"
-            class="open-advanced-filters btn btn-primary float-right"
-            (click)="openAdvancedFilters()">
-            Open Advanced Filters
-          </button>
-        </div>
-      </div>
 
-      <div class="col-xl-9 col-lg-8 order-lg-2 order-1 mt-0">
-        <h1>
-          Natural Resources Compliance and Enforcement Database
-        </h1>
+    <div class="row mt-0 px-4 justify-content-center">
+      <h1>
+        Natural Resources Compliance and Enforcement Database
+      </h1>
 
-        <p>
-          This site can be used to search for compliance and enforcement actions issued by the natural resource
-          agencies. Where available, view Inspections, Orders, and other reports. Types of actions include
-          administrative penalties, orders, court convictions, violation tickets, and restorative justice. Filter your
-          results by name or company, dates, laws, and availability of documents.
-        </p>
+      <p>
+        This site can be used to search for compliance and enforcement actions taken by natural resource agencies
+        including inspections, orders, violation tickets, administrative penalties, court convictions, and more. Use the
+        keyword search bar or filter your resultes for more specific records.
+      </p>
 
-        <p>
-          Although new compliance and enforcement activities from natural resource agencies are being added
-          regularly, some data from some agencies are not published here at this time. Additional compliance
-          and enforcement data sources can be found <a [routerLink]="['', 'moreInfo']">here</a>.
-        </p>
-      </div>
     </div>
 
-    <div class="row">
-      <div class="mb-lg-0 mb-3" [ngClass]="{ 'col-xl-3 col-lg-4 show-advanced-filters': showAdvancedFilters }">
-        <div class="px-3 search-filter__content" [hidden]="!showAdvancedFilters">
-          <app-search-filters
-            [formGroup]="searchFiltersForm"
-            (closeButton)="closeAdvancedFilters()"></app-search-filters>
-        </div>
-      </div>
+      <div class="d-flex row">
+        <div class="mb-3 col fixed-search">
+          <div class="sticky-search d-flex flex-column">
+            <div class="search-filter__header pt-3 order-2 order-lg-1 col">
+              <div>
+                <h5 class="d-inline-block">Keyword Search</h5>
+                <i class="keyword-help material-icons grey-subtext_no-italics d-inline-block align-text-bottom ml-2"
+                  matTooltip="Summary, description, location, outcome, and issued to name fields"
+                  aria-label="Icon that displays a tooltip when focused or hovered over">
+                  help_outline
+                </i>
+              </div>
+              <div class="keyword-search mb-3">
+                <input class="keyword-search__input py-0 px-2 border-0" (keyup.enter)="keywordSearch()"
+                  placeholder="Type keyword search words..." [(ngModel)]="keywordSearchWords" />
+                <button (click)="keywordSearch()" class="keyword-search__button border-0">
+                  <i class="material-icons align-middle">search</i>
+                </button>
+              </div>
+              <button [hidden]="showAdvancedFilters" class="open-advanced-filters btn btn-primary float-right"
+                (click)="openAdvancedFilters()">
+                Open Advanced Filters
+              </button>
+            </div>
 
-      <div [ngClass]="showAdvancedFilters ? 'col-xl-9 col-lg-8' : 'col-xl col-lg'">
-        <div class="row mb-3">
-          <div class="col text-left">
-            <span class="mr-2 align-middle font-weight-bold">
-              Click on a row in the list below to view more details about the item.
-            </span>
+            <div class="order-1 order-lg-2" [ngClass]="{ 'col show-advanced-filters': showAdvancedFilters }">
+              <div class="search-filter__content" [hidden]="!showAdvancedFilters">
+                <app-search-filters [formGroup]="searchFiltersForm" (closeButton)="closeAdvancedFilters()">
+                </app-search-filters>
+              </div>
+            </div>
           </div>
+        </div>
 
-          <div class="col text-right">
-            <app-export-csv [queryParams]="queryParams" [totalRecords]="tableData.totalListItems"></app-export-csv>
-            <div ngbDropdown class="d-inline-block">
-              <button class="btn btn-primary sort-button ml-1" ngbDropdownToggle>
-                Sort List By: {{ sortingDisplay[tableData.sortBy] }}
-              </button>
-              <div ngbDropdownMenu>
-                <button ngbDropdownItem (click)="changeSort('-dateIssued')">
-                  {{ sortingDisplay['-dateIssued'] }}
-                  <i *ngIf="tableData.sortBy === '-dateIssued'" class="align-middle material-icons">
-                    check_circle
-                  </i>
-                </button>
-                <button ngbDropdownItem (click)="changeSort('+recordType')">
-                  {{ sortingDisplay['+recordType'] }}
-                  <i *ngIf="tableData.sortBy === '+recordType'" class="align-middle material-icons">
-                    check_circle
-                  </i>
-                </button>
-                <button ngbDropdownItem (click)="changeSort('+issuedTo.fullName')">
-                  {{ sortingDisplay['+issuedTo.fullName'] }}
-                  <i *ngIf="tableData.sortBy === '+issuedTo.fullName'" class="align-middle material-icons">
-                    check_circle
-                  </i>
-                </button>
-                <button ngbDropdownItem (click)="changeSort('+location')">
-                  {{ sortingDisplay['+location'] }}
-                  <i *ngIf="tableData.sortBy === '+location'" class="align-middle material-icons">
-                    check_circle
-                  </i>
+        <div class="col">
+          <div class="row mb-3">
+            <div class="col text-left">
+              <span class="mr-2 align-middle font-weight-bold">
+                Click on a row in the list below to view more details about the item.
+              </span>
+            </div>
+
+            <div class="col text-right">
+              <app-export-csv [queryParams]="queryParams" [totalRecords]="tableData.totalListItems"></app-export-csv>
+              <div ngbDropdown class="d-inline-block">
+                <button class="btn btn-primary sort-button ml-1" ngbDropdownToggle>
+                  Sort List By: {{ sortingDisplay[tableData.sortBy] }}
                 </button>
+                <div ngbDropdownMenu>
+                  <button ngbDropdownItem (click)="changeSort('-dateIssued')">
+                    {{ sortingDisplay['-dateIssued'] }}
+                    <i *ngIf="tableData.sortBy === '-dateIssued'" class="align-middle material-icons">
+                      check_circle
+                    </i>
+                  </button>
+                  <button ngbDropdownItem (click)="changeSort('+recordType')">
+                    {{ sortingDisplay['+recordType'] }}
+                    <i *ngIf="tableData.sortBy === '+recordType'" class="align-middle material-icons">
+                      check_circle
+                    </i>
+                  </button>
+                  <button ngbDropdownItem (click)="changeSort('+issuedTo.fullName')">
+                    {{ sortingDisplay['+issuedTo.fullName'] }}
+                    <i *ngIf="tableData.sortBy === '+issuedTo.fullName'" class="align-middle material-icons">
+                      check_circle
+                    </i>
+                  </button>
+                  <button ngbDropdownItem (click)="changeSort('+location')">
+                    {{ sortingDisplay['+location'] }}
+                    <i *ngIf="tableData.sortBy === '+location'" class="align-middle material-icons">
+                      check_circle
+                    </i>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div *ngIf="!loading && tableData.totalListItems <= 0">
-          No Records found.
+          <div *ngIf="!loading && tableData.totalListItems <= 0">
+            No Records found.
+          </div>
+          <div class="list-scrollable">
+            <lib-table-template *ngIf="!loading && tableData.totalListItems > 0" [data]="tableData"
+              [messageIn]="messageIn" (messageOut)="onMessageOut($event)"></lib-table-template>
+          </div>
         </div>
-
-        <lib-table-template
-          *ngIf="!loading && tableData.totalListItems > 0"
-          [data]="tableData"
-          [messageIn]="messageIn"
-          (messageOut)="onMessageOut($event)"></lib-table-template>
       </div>
     </div>
-  </div>
-</main>
+</main>
\ No newline at end of file
diff --git a/angular/projects/public-nrpti/src/app/records/records-list/records-list.component.scss b/angular/projects/public-nrpti/src/app/records/records-list/records-list.component.scss
index 78ba6a72b..6a099593d 100644
--- a/angular/projects/public-nrpti/src/app/records/records-list/records-list.component.scss
+++ b/angular/projects/public-nrpti/src/app/records/records-list/records-list.component.scss
@@ -2,6 +2,7 @@
 @import "assets/styles/components/add-edit.scss";
 
 .search-filter {
+
   &__header {
     .keyword-help {
       font-size: 1.25rem;
@@ -55,3 +56,23 @@
   color: $gray6;
   font-size: 15px;
 }
+
+.fixed-search{
+  flex: 0 0 600px;
+  padding: 0px !important;
+}
+
+.sticky-search{
+  position: sticky;
+  top: 0;
+}
+
+@media screen and (max-width: 1239px){
+  .sticky-search {
+    position: relative;
+  }
+
+  .fixed-search{
+    flex: 0 0 auto;
+  }
+}
diff --git a/angular/projects/public-nrpti/src/app/records/records-list/search-filters/search-filters.component.html b/angular/projects/public-nrpti/src/app/records/records-list/search-filters/search-filters.component.html
index 2321ee473..78700f402 100644
--- a/angular/projects/public-nrpti/src/app/records/records-list/search-filters/search-filters.component.html
+++ b/angular/projects/public-nrpti/src/app/records/records-list/search-filters/search-filters.component.html
@@ -1,39 +1,29 @@
-<div class="my-3">
-  <section>
-    <div class="filter-header justify-content-between">
-      <h3>Filter</h3>
-      <button class="filter-header__button btn btn-primary align-self-start ml-3" (click)="closeButton.emit()">
-        Minimize Advanced Filters
-      </button>
-    </div>
-    <div>
-      <p>
-        The results list below will update instantly as you select criteria to filter. The URL will also update with
-        your unique criteria. If you want to return to your exact criteria, you can bookmark this page after you have
-        filtered (note that results may not be identical as content is updated).
-      </p>
-    </div>
-  </section>
-  <section>
+<div>
+  <div class=" filter-header justify-content-center text-center p-3 ">
+    <p class="mb-0">
+      Filter your results by name or company, dates, laws, and availablilty of documents.
+    </p>
+  </div>
+</div>
+
+<div>
+  <div class="p-3">
+    <p>
+      The results list below will update instantly as you select criteria to filter. The URL will also update with
+      your unique criteria.
+    </p>
+
     <form *ngIf="!loading" [formGroup]="formGroup" novalidate>
       <div class="flex-container">
         <div class="label-pair">
           <label for="dateIssuedStartFilter dateIssuedEndFilter">Issued Date</label>
           <span class="grey-subtext ml-2">(YYYY-MM-DD)</span>
           <div class="date-container">
-            <lib-date-picker
-              id="dateIssuedStartFilter"
-              [control]="formGroup.get('dateIssuedStart')"
-              [reset]="resetControls"
-              [minDate]="datepickerMinDate"
-            ></lib-date-picker>
+            <lib-date-picker id="dateIssuedStartFilter" [control]="formGroup.get('dateIssuedStart')"
+              [reset]="resetControls" [minDate]="datepickerMinDate"></lib-date-picker>
             <span class="date-separator align-self-center">To</span>
-            <lib-date-picker
-              id="dateIssuedEndFilter"
-              [control]="formGroup.get('dateIssuedEnd')"
-              [reset]="resetControls"
-              [minDate]="datepickerMinDate"
-            ></lib-date-picker>
+            <lib-date-picker id="dateIssuedEndFilter" [control]="formGroup.get('dateIssuedEnd')" [reset]="resetControls"
+              [minDate]="datepickerMinDate"></lib-date-picker>
           </div>
         </div>
       </div>
@@ -52,16 +42,11 @@ <h3>Filter</h3>
       </div>
       <div class="flex-container">
         <div class="label-pair">
-          <label for="activityTypeFilter">Type (Activity or Record)</label>
+          <label for="activityTypeFilter">Type</label>
           <span *ngIf="activityTypeCount" class="grey-subtext ml-2">({{ activityTypeCount }} selected)</span>
-          <app-autocomplete-multi-select
-            id="activityTypeFilter"
-            [control]="formGroup.get('activityType')"
-            [options]="activityTypeOptions"
-            [reset]="resetControls"
-            [placeholderText]="'Pick one or more'"
-            (numSelected)="activityTypeCount = $event"
-          ></app-autocomplete-multi-select>
+          <app-autocomplete-multi-select id="activityTypeFilter" [control]="formGroup.get('activityType')"
+            [options]="activityTypeOptions" [reset]="resetControls" [placeholderText]="'Pick one or more'"
+            (numSelected)="activityTypeCount = $event"></app-autocomplete-multi-select>
         </div>
       </div>
       <!-- temporarily hidden as per https://bcmines.atlassian.net/browse/PTI-513 -->
@@ -69,52 +54,42 @@ <h3>Filter</h3>
         <div class="label-pair">
           <label for="agencyFilter">Responsible Agency</label>
           <span *ngIf="agencyCount" class="grey-subtext ml-2">({{ agencyCount }} selected)</span>
-          <app-autocomplete-multi-select
-            id="agencyFilter"
-            [control]="formGroup.get('agency')"
-            [options]="agencyOptions"
-            [reset]="resetControls"
-            [placeholderText]="'Pick one or more'"
-            (numSelected)="agencyCount = $event"
-          ></app-autocomplete-multi-select>
+          <app-autocomplete-multi-select id="agencyFilter" [control]="formGroup.get('agency')" [options]="agencyOptions"
+            [reset]="resetControls" [placeholderText]="'Pick one or more'" (numSelected)="agencyCount = $event">
+          </app-autocomplete-multi-select>
         </div>
       </div>
       <div>
         <div class="label-pair">
           <label for="actFilter">Issued under which Act</label>
           <span *ngIf="actCount" class="grey-subtext ml-2">({{ actCount }} selected)</span>
-          <app-autocomplete-multi-select
-            id="actFilter"
-            [control]="formGroup.get('act')"
-            [options]="actOptions"
-            [reset]="resetControls"
-            [placeholderText]="'Pick one or more'"
-            (numSelected)="actCount = $event"
-          ></app-autocomplete-multi-select>
+          <app-autocomplete-multi-select id="actFilter" [control]="formGroup.get('act')" [options]="actOptions"
+            [reset]="resetControls" [placeholderText]="'Pick one or more'" (numSelected)="actCount = $event">
+          </app-autocomplete-multi-select>
         </div>
       </div>
       <div>
         <div class="label-pair">
           <label for="regulationFilter">Issued under which Regulation</label>
           <span *ngIf="regulationCount" class="grey-subtext ml-2">({{ regulationCount }} selected)</span>
-          <app-autocomplete-multi-select
-            id="regulationFilter"
-            [control]="formGroup.get('regulation')"
-            [options]="regulationOptions"
-            [reset]="resetControls"
-            [placeholderText]="'Pick one or more'"
-            (numSelected)="regulationCount = $event"
-          ></app-autocomplete-multi-select>
+          <app-autocomplete-multi-select id="regulationFilter" [control]="formGroup.get('regulation')"
+            [options]="regulationOptions" [reset]="resetControls" [placeholderText]="'Pick one or more'"
+            (numSelected)="regulationCount = $event"></app-autocomplete-multi-select>
         </div>
       </div>
     </form>
     <div class="filter-footer">
-      <button class="filter-footer__button btn btn-secondary align-self-end" (click)="clearSearchFilters()">
-        Clear Filters
-      </button>
-      <div class="align-self-end mr-1">
-        <app-share-record-button buttonText="Share Filtered Results"></app-share-record-button>
+      <div class="row px-3">
+        <button class="filter-footer__button m-1 btn btn-primary" (click)="closeButton.emit()">
+          Minimize Advanced Filters
+        </button>
+        <div class="align-self-end m-1 ">
+          <app-share-record-button buttonText="Share Filtered Results"></app-share-record-button>
+        </div>
+        <button class="filter-footer__button btn btn-secondary align-self-end m-1" (click)="clearSearchFilters()">
+          Clear Filters
+        </button>
       </div>
     </div>
-  </section>
-</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/angular/projects/public-nrpti/src/app/records/records-list/search-filters/search-filters.component.scss b/angular/projects/public-nrpti/src/app/records/records-list/search-filters/search-filters.component.scss
index 00574f271..396b68d4c 100644
--- a/angular/projects/public-nrpti/src/app/records/records-list/search-filters/search-filters.component.scss
+++ b/angular/projects/public-nrpti/src/app/records/records-list/search-filters/search-filters.component.scss
@@ -2,8 +2,10 @@
 @import "assets/styles/components/add-edit.scss";
 
 .filter-header {
-  @include flex-box();
-  @include flex-direction(row);
+  background-color: #003366;
+  color: #ffffff;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 
   &__button {
     background-color: $primary;