diff --git a/app/javascript/components/CartViewToggle.vue b/app/javascript/components/CartViewToggle.vue
index 196f52b9..fb113b61 100644
--- a/app/javascript/components/CartViewToggle.vue
+++ b/app/javascript/components/CartViewToggle.vue
@@ -39,7 +39,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/utils.scss";
+@import "lux-design-system/dist/style.scss";
 #count {
   font-size: 12px;
   font-family: $font-family-text;
diff --git a/app/javascript/components/FiggyViewer.vue b/app/javascript/components/FiggyViewer.vue
index ebcc8310..b4b6be2b 100644
--- a/app/javascript/components/FiggyViewer.vue
+++ b/app/javascript/components/FiggyViewer.vue
@@ -97,5 +97,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "lux-design-system/dist/style.css";
 </style>
diff --git a/app/javascript/components/PulfaDataTable.vue b/app/javascript/components/PulfaDataTable.vue
index a324cb64..9f10491b 100644
--- a/app/javascript/components/PulfaDataTable.vue
+++ b/app/javascript/components/PulfaDataTable.vue
@@ -280,8 +280,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "lux-design-system/dist/style.css";
-@import "../styles/utils.scss";
+@import "lux-design-system/dist/style.scss";
 .lux-data-table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -310,7 +309,7 @@ export default {
   }
 
   thead tr {
-    background-color: $color-grayscale-light;
+    background-color: $color-grayscale-lighter;
     color: $color-rich-black;
   }
 
@@ -332,7 +331,7 @@ export default {
     border-bottom: none;
     border-left: none;
     border-right: none;
-    border-top: 1px solid darken($color-grayscale-light, 10%);
+    border-top: 1px solid darken($color-grayscale-lighter, 10%);
     @include inset-space($space-base);
     overflow: hidden;
   }
@@ -363,10 +362,10 @@ export default {
     color: $color-grayscale-darker;
 
     &:hover {
-      background: $color-grayscale-light;
+      background: $color-grayscale-warm-lighter;
 
       input {
-        background: $color-grayscale-light;
+        background: $color-grayscale-warm-lighter;
       }
     }
   }
diff --git a/app/javascript/components/RequestCart.vue b/app/javascript/components/RequestCart.vue
index e454f57e..236f6850 100644
--- a/app/javascript/components/RequestCart.vue
+++ b/app/javascript/components/RequestCart.vue
@@ -263,8 +263,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "lux-design-system/dist/style.css";
-@import "../styles/utils.scss";
+@import "lux-design-system/dist/style.scss";
 #request-notes-wrapper {
   width: 100%;
   margin-left: 0.25rem;
diff --git a/app/javascript/styles/media_queries.scss b/app/javascript/styles/media_queries.scss
deleted file mode 100644
index 04d180c1..00000000
--- a/app/javascript/styles/media_queries.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// CSS variables cannot be used in media queries,
-// so we use SASS variables for these
-$media-query-small: "(max-width: 599px)";
-$media-query-medium: "(min-width: 600px)";
-$media-query-medium-max: "(max-width: 899px)";
-$media-query-large: "(min-width: 900px)";
-$media-query-x-large: "(min-width: 1200px)";
-$media-query-xx-large: "(min-width: 1800px)";
-$media-query-xxx-large: "(min-width: 2300px)";
diff --git a/app/javascript/styles/mixins.scss b/app/javascript/styles/mixins.scss
deleted file mode 100644
index 11b792e4..00000000
--- a/app/javascript/styles/mixins.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-/* GLOBAL MIXINS
---------------------------------------------- */
-
-/* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES
-
-  @param {Number}  $responsive  - Viewport-based size
-  @param {Number}  $min         - Minimum font size (px)
-  @param {Number}  $max         - Maximum font size (px) (optional)
-
-  @param {Number}  $fallback    - Fallback for viewport-based units (optional)
-
-  @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:
-
-  @include responsive-font(5vw, 35px, 150px, 50px);
-*/
-@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
-    $responsive-unitless: strip-unit($responsive);
-    $dimension: if(unit($responsive) == "vh", "height", "width");
-    $min-breakpoint: calc($min / $responsive-unitless * 100);
-
-    @media (max-#{$dimension}: #{$min-breakpoint}) {
-      font-size: $min;
-    }
-
-    @if $max {
-      $max-breakpoint: calc($max / $responsive-unitless * 100);
-
-      @media (min-#{$dimension}: #{$max-breakpoint}) {
-        font-size: $max;
-      }
-    }
-
-    @if $fallback {
-      font-size: $fallback;
-    }
-
-    font-size: $responsive;
-  }
-
-  // Reset
-  @mixin reset {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-  }
-
-  // Used to prevent text selection on an element
-  @mixin prevent-user-select {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-
-  /// Used to hide an element visually, but keeping it accessible for
-  /// accessibility tools.
-  @mixin visually-hidden {
-    // Need to make sure we override any existing styles.
-    position: absolute !important;
-    top: 0;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    overflow: hidden !important;
-    height: 1px !important;
-    width: 1px !important;
-    padding: 0 !important;
-    border: 0 !important;
-  }
-
-  /// To be used on flex items. Resolves some common layout issues, such as
-  /// text truncation not respecting padding or breaking out of container.
-  /// https://css-tricks.com/flexbox-truncated-text/
-  @mixin layout-flex-fix {
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  // Box shadow for input elements
-  @mixin box-shadow-inputs {
-    box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 80%);
-  }
-
-  // Hover state of box shadow for input elements
-  @mixin box-shadow-inputs-hover {
-    box-shadow: 0 1px 5px 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 60%);
-  }
diff --git a/app/javascript/styles/spacing.scss b/app/javascript/styles/spacing.scss
deleted file mode 100644
index 9f1c8a49..00000000
--- a/app/javascript/styles/spacing.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-/* VUE DESIGN SYSTEM SPACING HELPERS
---------------------------------------------- */
-
-$spacing-ratio: 1.7;
-
-/*
-  INSET-SPACE: For interface containers.
-  INSET-SQUISH-SPACE: For buttons, form elements, cells.
-  STACK-SPACE: For vertically stacked content.
-  INLINE-SPACE: For things displayed inline.
-*/
-
-// Create inset-space
-//
-// @param  {Number} inset-space to set
-@mixin inset-space($value) {
-  padding: round($value / $spacing-ratio) $value;
-}
-
-// Create inset-squish-space
-//
-// @param  {Number} inset-squish-space to set
-@mixin inset-squish-space($value) {
-  padding: round($value / $spacing-ratio - 1px) $value round($value / $spacing-ratio);
-}
-
-// Create stack-space
-//
-// @param  {Number} stack-space to set
-@mixin stack-space($value) {
-  margin-bottom: $value;
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-// Create inline-space
-//
-// @param  {Number} inline-space to set
-@mixin inline-space($value) {
-  margin-right: $value;
-  &:last-child {
-    margin-right: 0;
-  }
-}
diff --git a/app/javascript/styles/system.scss b/app/javascript/styles/system.scss
deleted file mode 100644
index 1c287976..00000000
--- a/app/javascript/styles/system.scss
+++ /dev/null
@@ -1,289 +0,0 @@
-$color-grayscale-light: rgb(186, 190, 197);
-$color-tan: rgb(188, 139, 82);
-$color-bleu-de-france-dark: rgb(45, 112, 180);
-$color-bleu-de-france-light: rgb(108, 163, 218);
-$color-green: rgb(124, 181, 24);
-$color-princeton-orange-on-white: rgb(231, 117, 0);
-$color-tan-lighter: rgb(219, 193, 163);
-$color-grayscale-dark: rgb(130, 138, 151);
-$color-grayscale: rgb(149, 156, 167);
-$color-white: rgb(255, 255, 255);
-$color-grayscale-lighter: rgb(245, 245, 245);
-$color-yellow: rgb(255, 186, 10);
-$color-bleu-de-france: rgb(44, 110, 175);
-$color-tan-dark: rgb(158, 113, 61);
-$color-bleu-de-france-darker: rgb(35, 87, 139);
-$color-bleu-de-france-lighter: rgb(149, 189, 228);
-$color-red: rgb(201, 40, 19);
-$color-grayscale-darker: rgb(65, 70, 78);
-$color-rich-black: rgb(0, 17, 35);
-$color-tan-light: rgb(202, 163, 119);
-$color-tan-darker: rgb(121, 87, 47);
-$color-princeton-orange-on-black: rgb(245, 128, 37);
-$font-size-large-min: 1.125em;
-$font-size-base-max: 1.125em;
-$font-size-x-large: 36px;
-$font-size-xxx-large: 64px;
-$font-size-xx-large: 48px;
-$font-size-x-large-max: 1.777em;
-$font-size-xxx-large-max: 3.157em;
-$font-size-large: 24px;
-$font-size-xx-large-max: 2.369em;
-$font-size-large-max: 1.333em;
-$font-size-x-small: 11px;
-$font-size-base-min: 1em;
-$font-size-small: 13px;
-$font-size-x-large-min: 1.266em;
-$font-size-xxx-large-min: 1.602em;
-$font-size-xx-large-min: 1.424em;
-$font-size-base: 16px;
-$font-family-heading: "franklin-gothic-urw", Helvetica, Arial, sans-serif;
-$font-family-text: "franklin-gothic-urw", Helvetica, Arial, sans-serif;
-$font-weight-bold: 700;
-$font-weight-semi-bold: 600;
-$font-weight-regular: 400;
-$font-weight-light: 300;
-$opacity-disabled: 0.5;
-$height-header: 55px;
-$height-footer: 64px;
-$tappable-square: 44px;
-$duration-quickly: 0.08s;
-$duration-slowly: 0.5s;
-$z-index-modal: 9999;
-$z-index-sticky: 100;
-$media-query-medium: (min-width: 600px);
-$media-query-large: (min-width: 900px);
-$media-query-x-large: (min-width: 1200px);
-$media-query-xx-large: (min-width: 1800px);
-$media-query-xxx-large: (min-width: 2300px);
-$box-shadow-small: 0 0 0 1px rgba(92, 106, 196, 0.1);
-$box-shadow-small-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
-$box-shadow-selected: 0 0 0 1px #e77500;
-$letter-spacing-x-large: 2px;
-$letter-spacing-large: 1px;
-$letter-spacing-base: 0;
-$letter-spacing-small: -0.5px;
-$letter-spacing-x-small: -1px;
-$border-radius-default: 3px;
-$border-radius-circle: 50%;
-$space-xx-large: 128px;
-$space-x-large: 64px;
-$space-large: 48px;
-$space-base: 24px;
-$space-small: 16px;
-$space-x-small: 8px;
-$space-xx-small: 4px;
-$line-height-base: 1.6;
-$line-height-small: 1.3;
-$line-height-heading: 1;
-
-/* GLOBAL MIXINS
---------------------------------------------- */
-
-/* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES
-
-  @param {Number}  $responsive  - Viewport-based size
-  @param {Number}  $min         - Minimum font size (px)
-  @param {Number}  $max         - Maximum font size (px) (optional)
-
-  @param {Number}  $fallback    - Fallback for viewport-based units (optional)
-
-  @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:
-
-  @include responsive-font(5vw, 35px, 150px, 50px);
-*/
-@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
-  $responsive-unitless: strip-unit($responsive);
-  $dimension: if(unit($responsive) == "vh", "height", "width");
-  $min-breakpoint: calc($min / $responsive-unitless * 100);
-
-  @media (max-#{$dimension}: #{$min-breakpoint}) {
-    font-size: $min;
-  }
-
-  @if $max {
-    $max-breakpoint: calc($max / $responsive-unitless * 100);
-
-    @media (min-#{$dimension}: #{$max-breakpoint}) {
-      font-size: $max;
-    }
-  }
-
-  @if $fallback {
-    font-size: $fallback;
-  }
-
-  font-size: $responsive;
-}
-
-// Reset
-@mixin reset {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-// Used to prevent text selection on an element
-@mixin prevent-user-select {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-/// Used to hide an element visually, but keeping it accessible for
-/// accessibility tools.
-@mixin visually-hidden {
-  // Need to make sure we override any existing styles.
-  position: absolute !important;
-  left: 0;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  overflow: hidden !important;
-  height: 1px !important;
-  width: 1px !important;
-  padding: 0 !important;
-  border: 0 !important;
-}
-
-/// To be used on flex items. Resolves some common layout issues, such as
-/// text truncation not respecting padding or breaking out of container.
-/// https://css-tricks.com/flexbox-truncated-text/
-@mixin layout-flex-fix {
-  min-width: 0;
-  max-width: 100%;
-}
-
-/* GLOBAL FUNCTIONS
---------------------------------------------- */
-
-// Create a tint
-//
-// @param  {Color}  $color to tint
-// @param  {Number} $percentage of `$color` in returned color
-// @return {Color}
-@function tint($color, $percentage) {
-  @return mix(white, $color, $percentage);
-}
-
-// Create a shade
-//
-// @param  {Color}  $color to shade
-// @param  {Number} $percentage of `$color` in returned color
-// @return {Color}
-@function shade($color, $percentage) {
-  @return mix(black, $color, $percentage);
-}
-
-// Calculate color difference
-// See https://www.w3.org/TR/AERT/#color-contrast for algorithm
-//
-// @param  {Color} $color of foreground
-// @param  {Color} $color of background
-// @return {Boolean}
-@function color-difference($foreground, $background) {
-  $r: (max(red($foreground), red($background))) - (min(red($foreground), red($background)));
-  $g: (max(green($foreground), green($background))) - (min(green($foreground), green($background)));
-  $b: (max(blue($foreground), blue($background))) - (min(blue($foreground), blue($background)));
-  $sum-rgb: $r + $g + $b;
-
-  @if $sum-rgb < 350 {
-    @return "false";
-  } @else {
-    @return "true";
-  }
-}
-
-// Set text color based on contrast
-//
-// @param  {Color}  $color to set
-// @param  {Color}  $background color to test
-// @param  {Color}  $fallback color to set in case contrast check fails
-@function set-text-color($color, $background, $fallback: null) {
-  @if $fallback == null {
-    $fallback: #000;
-  }
-  @if (color-difference($color, $background) == "false") {
-    @return $fallback;
-  } @else {
-    @return $color;
-  }
-}
-
-/// Darkens the foreground color by the background color. This is the same as the
-/// “multiply” filter in graphics apps.
-///
-/// @param {Color} $foreground - The color to darken.
-/// @param {Color} $background - The background to base darkening on.
-/// @return {Color} The modified color.
-@function color-multiply($foreground, $background: null) {
-  @if $background == null {
-    $background: #ffffff;
-  }
-
-  @return $foreground * $background / 255;
-}
-
-/// Returns the value in rem for a given pixel value.
-/// @param {Number} $value - The pixel value to be converted.
-/// @return {Number} The converted value in rem.
-@function rem($value) {
-  $unit: unit($value);
-
-  @if $unit == "rem" {
-    @return $value;
-  } @else if $unit == "px" {
-    @return $value / $font-size-base * 1rem;
-  } @else if $unit == "em" {
-    @return $unit / 1em * 1rem;
-  } @else {
-    @error "Value must be in px, em, or rem.";
-  }
-}
-
-/// Returns the value in pixels for a given rem value.
-/// @param {Number} $value - The rem value to be converted.
-/// @return {Number} The converted value in pixels.
-@function px($value) {
-  $unit: unit($value);
-
-  @if $unit == "px" {
-    @return $value;
-  } @else if $unit == "em" {
-    @return ($value / 1em) * $font-size-base;
-  } @else if $unit == "rem" {
-    @return ($value / 1rem) * $font-size-base;
-  } @else {
-    @error "Value must be in rem, em, or px.";
-  }
-}
-
-/// Returns the list of available names in a given map.
-/// @param {Map} $map - The map of data to list the names from.
-/// @param {Number} $map - The level of depth to get names from.
-/// @return {String} The list of names in the map.
-@function available-names($map, $level: 1) {
-  @if type-of($map) != "map" {
-    @return null;
-  }
-
-  $output: "";
-  $newline: "\A ";
-
-  @if $level == 1 {
-    @each $key, $value in $map {
-      $output: $output + "#{$newline}- #{$key} #{available-names($value, $level + 1)}";
-    }
-  } @else {
-    $output: "(";
-    $i: 1;
-
-    @each $key, $value in $map {
-      $sep: if($i < length($map), ", ", "");
-      $output: $output + "#{$key}#{$sep}#{available-names($value, $level + 1)}";
-      $i: $i + 1;
-    }
-
-    $output: $output + ")";
-  }
-
-  @return $output;
-}
diff --git a/app/javascript/styles/utils.scss b/app/javascript/styles/utils.scss
deleted file mode 100644
index 4865c809..00000000
--- a/app/javascript/styles/utils.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "../styles/media_queries";
-@import "../styles/mixins";
-@import "../styles/spacing";
-@import "../styles/system";
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
index 7ada04dc..6bea917f 100644
--- a/app/views/shared/_footer.html.erb
+++ b/app/views/shared/_footer.html.erb
@@ -1,5 +1,5 @@
 <footer role="contentinfo" class="mt-auto">
   <div class="lux">
-    <lux-library-footer></lux-library-footer>
+    <lux-special-collections-footer></lux-special-collections-footer>
   </div>
 </footer>
diff --git a/package.json b/package.json
index c70ff79d..c50ef853 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "dependencies": {
     "core-js": "^3.36.1",
     "jquery": "^3.5.1",
-    "lux-design-system": "5.0.0-beta.7",
+    "lux-design-system": "^5.0.1",
     "postcss-import": "^16.1.0",
     "sass": "^1.74.1",
     "serialize-javascript": "^6.0.2",
diff --git a/yarn.lock b/yarn.lock
index 2705e05a..578898b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -39,14 +39,14 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
   integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.21.0", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.23.2":
+"@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
   integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
@@ -2522,10 +2522,10 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lux-design-system@5.0.0-beta.7:
-  version "5.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/lux-design-system/-/lux-design-system-5.0.0-beta.7.tgz#2992787d9483dc6fc6327f1293e088a1ced3fa2e"
-  integrity sha512-eU861tMaNsqiduqb8Hacjk3uh5MX5hckmCH7SSjYpwOx+9Su7DlpSJa2WVMYEgPblfoz+JBFLSlCCFhuSU+x1g==
+lux-design-system@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/lux-design-system/-/lux-design-system-5.0.1.tgz#07ee25e9957d7dc0a02675158e697e094fe078a5"
+  integrity sha512-BTkG6h/jXlNKSmMSPskFgEQcKeOOW4/35ro6KOalTWLS4K7n2aSxxaKMFSswuyaCoMqbBB/3ygUKX5ENayn+VA==
   dependencies:
     core-js "^3.8.3"
     register-service-worker "^1.7.2"
@@ -3402,6 +3402,7 @@ stop-iteration-iterator@^1.0.0:
     internal-slot "^1.0.4"
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3466,6 +3467,7 @@ string.prototype.trimstart@^1.0.8:
     es-object-atoms "^1.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==