diff --git a/resources/assets/styles/common/_functions.scss b/resources/assets/styles/common/_functions.scss
index 871aa09..debb3e0 100644
--- a/resources/assets/styles/common/_functions.scss
+++ b/resources/assets/styles/common/_functions.scss
@@ -1,3 +1,3 @@
-@function em($pixels, $context: $base-font-size) {
-  @return #{$pixels / $context}em;
+@function rem($pixels, $context: $base-font-size) {
+  @return #{$pixels / $context}rem;
 }
diff --git a/resources/assets/styles/common/_global.scss b/resources/assets/styles/common/_global.scss
index acfe4b4..f43a451 100644
--- a/resources/assets/styles/common/_global.scss
+++ b/resources/assets/styles/common/_global.scss
@@ -5,7 +5,7 @@
 body {
   margin: 0;
   font-family: $font-family-serif;
-  font-size: #{$base-font-size}px;
+  font-size: rem(18);
 }
 
 h1,
@@ -18,15 +18,15 @@ h6 {
 }
 
 h1 {
-  font-size: em(30);
+  font-size: rem(30);
   font-weight: 600;
-  letter-spacing: em(2);
+  letter-spacing: rem(2);
   line-height: (36/30);
   margin: 0;
 }
 
 h2 {
-  font-size: em(16);
+  font-size: rem(16);
   font-weight: normal;
   line-height: (30/16);
   margin: 0;
diff --git a/resources/assets/styles/common/_variables.scss b/resources/assets/styles/common/_variables.scss
index ffba8b0..e1094b4 100644
--- a/resources/assets/styles/common/_variables.scss
+++ b/resources/assets/styles/common/_variables.scss
@@ -17,4 +17,4 @@ $extra-large: 1650px;
 /** Fonts */
 $font-family-sans-serif: 'Karla', sans-serif;
 $font-family-serif: 'Spectral', serif;
-$base-font-size: 18;
+$base-font-size: 16;
diff --git a/resources/assets/styles/components/_buttons.scss b/resources/assets/styles/components/_buttons.scss
index 685b98e..a252da1 100644
--- a/resources/assets/styles/components/_buttons.scss
+++ b/resources/assets/styles/components/_buttons.scss
@@ -1,9 +1,9 @@
 .button {
   display: inline-block;
-  width: 15.625rem;
-  height: 3.75rem;
+  width: rem(250);
+  height: rem(65);
   margin-top: 2em;
-  padding: 1.2rem;
+  padding: rem(20);
   border: 2px solid $black;
   border-radius: 3px;
   background: $black;
@@ -12,7 +12,7 @@
   font-weight: 600;
   color: $white;
   line-height: normal;
-  letter-spacing: 2px;
+  letter-spacing: rem(2);
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
@@ -26,9 +26,9 @@
   }
 
   &.button-small {
-    width: (150/16) * 1rem;
-    height: (40/16) * 1rem;
-    padding: 0.5em;
+    width: rem(150);
+    height: rem(40);
+    padding: rem(6.5);
   }
 
   &.button-wide {
diff --git a/resources/assets/styles/layouts/_footer.scss b/resources/assets/styles/layouts/_footer.scss
index 66156ed..411e0a7 100644
--- a/resources/assets/styles/layouts/_footer.scss
+++ b/resources/assets/styles/layouts/_footer.scss
@@ -3,7 +3,7 @@
     margin-bottom: 0;
     padding: 60px 42.5px 40px;
     font-family: $font-family-sans-serif;
-    font-size: em(16);
+    font-size: rem(16);
     color: $white;
 
     ul {
@@ -75,7 +75,7 @@
     margin-top: 1em;
 
     a {
-      font-size: em(32);
+      font-size: rem(32);
       margin: 0 0.25em;
       transition: all 0.4s;
     }
@@ -102,7 +102,7 @@
     }
 
     h1 {
-      font-size: em(16);
+      font-size: rem(16);
       font-weight: normal;
       margin-bottom: 0;
 
@@ -124,7 +124,7 @@
     ul {
       display: none;
       margin: 0;
-      font-size: em(14);
+      font-size: rem(14);
     }
 
     .pressbooks-icon {
@@ -174,7 +174,7 @@
 
     .social-media {
       a {
-        font-size: em(24);
+        font-size: rem(24);
         margin: 0 0.5em 0 0;
       }
     }
diff --git a/resources/assets/styles/layouts/_header.scss b/resources/assets/styles/layouts/_header.scss
index 1d54560..6797906 100644
--- a/resources/assets/styles/layouts/_header.scss
+++ b/resources/assets/styles/layouts/_header.scss
@@ -71,7 +71,7 @@
     a {
       display: none;
       font-family: $font-family-sans-serif;
-      font-size: em(24);
+      font-size: rem(24);
       line-height: (80/24);
       color: $white;
       letter-spacing: 0;
@@ -133,7 +133,7 @@
 
       a {
         display: inline-block;
-        font-size: em(18);
+        font-size: rem(18);
         color: $black;
         line-height: normal;
 
@@ -161,17 +161,17 @@
       height: 576px;
 
       p {
-        font-size: em(30);
+        font-size: rem(30);
         letter-spacing: 0.75px;
         line-height: (40/30);
       }
     }
 
     h1 {
-      margin-bottom: 0.5em;
-      font-size: em(72);
+      margin-bottom: rem(32);
+      font-size: rem(72);
       line-height: (40/72);
-      letter-spacing: 1.8px;
+      letter-spacing: rem(1.8);
     }
   }
 }
diff --git a/resources/assets/styles/layouts/_pages.scss b/resources/assets/styles/layouts/_pages.scss
index 377ca90..58dae0f 100644
--- a/resources/assets/styles/layouts/_pages.scss
+++ b/resources/assets/styles/layouts/_pages.scss
@@ -12,7 +12,7 @@
     text-align: center;
 
     p {
-      font-size: em(16);
+      font-size: rem(18);
       line-height: (32/16);
     }
   }
@@ -64,7 +64,7 @@
   .block,
   .latest-books {
     h3 {
-      font-size: em(30);
+      font-size: rem(30);
       font-weight: 600;
       color: var(--brand-primary, $brand-primary);
       letter-spacing: 2px;
@@ -96,6 +96,7 @@
       margin-left: auto;
       margin-right: auto;
       padding: 0 0.46875rem;
+      position: relative;
     }
 
     .books {
@@ -120,18 +121,18 @@
 
       .subject {
         height: 4.625rem;
-        font-size: em(24);
+        font-size: rem(24);
       }
 
       .title {
         height: 13rem;
-        font-size: em(30);
+        font-size: rem(30);
         font-weight: 500;
         line-height: (40/30);
       }
 
       .read-more {
-        font-size: em(18);
+        font-size: rem(18);
       }
     }
 
@@ -166,7 +167,7 @@
       }
 
       h3 {
-        font-size: em(48);
+        font-size: rem(48);
         line-height: (56/48);
 
         &::before {
@@ -175,7 +176,7 @@
       }
 
       p {
-        font-size: em(18);
+        font-size: rem(18);
         line-height: (32/18);
       }
     }
@@ -206,7 +207,8 @@
 
       .next,
       .previous {
-        flex: 0 0 2.4375rem;
+        position: absolute;
+        top: rem(165.5);
 
         svg {
           width: 2.4375rem;
@@ -215,13 +217,13 @@
       }
 
       .next {
-        margin-left: 2.625rem;
         margin-right: 0.9375rem;
+        right: 0;
       }
 
       .previous {
         margin-left: 0.9375rem;
-        margin-right: 2.625rem;
+        left: 0;
       }
 
       .books {
diff --git a/resources/views/partials/front-page-catalog.blade.php b/resources/views/partials/front-page-catalog.blade.php
index 327496e..c728beb 100644
--- a/resources/views/partials/front-page-catalog.blade.php
+++ b/resources/views/partials/front-page-catalog.blade.php
@@ -1,7 +1,7 @@
-<div class="latest-books w-100">
+<div id="latest-titles" class="latest-books w-100">
   <h3 class="tc ttu">{{ $latest_books_title }}</h3>
   <div class="track flex flex-row flex-wrap justify-center items-center">
-    <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l @if($current_page === 1){{ 'ml-auto' }}@elseif(!$next_page){{ 'mr-auto' }}@endif" data-total-pages="{{ $total_pages }}" data-next-page="2">
+    <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ $total_pages }}" data-next-page="2">
       @foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
         <div class="book flex flex-column justify-end w-100 bg-secondary b--secondary">
           @if(isset($book['metadata']['keywords']))
@@ -18,8 +18,8 @@
         </div>
       @endforeach
     </div>
-    @if($previous_page)<a class="secondary previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
-    @if($next_page)<a class="secondary next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
+    @if($previous_page)<a class="secondary previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
+    @if($next_page)<a class="secondary next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
   </div>
   <div class="catalog-link tc">
     <a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>