diff --git a/app/views/absence_requests/_index_detail.html.erb b/app/views/absence_requests/_index_detail.html.erb
index cd7ed7e0..7dcb6425 100644
--- a/app/views/absence_requests/_index_detail.html.erb
+++ b/app/views/absence_requests/_index_detail.html.erb
@@ -7,7 +7,7 @@
     ><<%= absence_request.absence_type_icon %> /></lux-icon-base>
   </card-media>
   <card-header>
-    <lux-heading level="h2" size="h3"><hyperlink href="<%= absence_request_path(absence_request.to_model)%>"><%= absence_request.event_title_brief %></hyperlink></lux-heading>
+    <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= absence_request_path(absence_request.to_model)%>"><%= absence_request.event_title_brief %></lux-hyperlink></lux-heading>
     <lux-text-style><%= absence_request.formatted_full_start_date %> to <%= absence_request.formatted_full_end_date %></lux-text-style>
   </card-header>
   <card-content class="right-align">
diff --git a/app/views/absence_requests/_review_detail.html.erb b/app/views/absence_requests/_review_detail.html.erb
index f84dc631..7f8d64ac 100644
--- a/app/views/absence_requests/_review_detail.html.erb
+++ b/app/views/absence_requests/_review_detail.html.erb
@@ -7,7 +7,7 @@
     ><<%= absence_request.absence_type_icon %> /></lux-icon-base>
   </card-media>
   <card-header>
-    <lux-heading level="h2" size="h3"><hyperlink href="<%= review_absence_request_path(absence_request.to_model)%>"><%= absence_request.creator %> - <%= absence_request.event_title_brief %></hyperlink></lux-heading>
+    <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= review_absence_request_path(absence_request.to_model)%>"><%= absence_request.creator %> - <%= absence_request.event_title_brief %></lux-hyperlink></lux-heading>
     <lux-text-style><%= absence_request.formatted_full_start_date %> to <%= absence_request.formatted_full_end_date %></lux-text-style>
   </card-header>
   <card-content>
diff --git a/app/views/absence_requests/show.html.erb b/app/views/absence_requests/show.html.erb
index c1657b35..9b3a7e68 100644
--- a/app/views/absence_requests/show.html.erb
+++ b/app/views/absence_requests/show.html.erb
@@ -2,7 +2,7 @@
   <grid-container>
     <% if @request.approved? && @request.request.can_cancel?(agent: current_staff_profile) %>
     <grid-item columns="lg-12 sm-12">
-      <alert status="success" class="tip-card"><strong>Your <%= @request.title.downcase %> request has been approved.</strong> Please proceed with recording your absence in the <hyperlink href="http://www.princeton.edu/hr/progserv/sds/applications/selfservice.html" target="_blank">HR Self Service system</hyperlink> as soon as possible. Your supervisor will be confirming that you have reported this information at the end of the month.</alert>
+      <alert status="success" class="tip-card"><strong>Your <%= @request.title.downcase %> request has been approved.</strong> Please proceed with recording your absence in the <lux-hyperlink href="http://www.princeton.edu/hr/progserv/sds/applications/selfservice.html" target="_blank">HR Self Service system</lux-hyperlink> as soon as possible. Your supervisor will be confirming that you have reported this information at the end of the month.</alert>
     </grid-item>
     <% end %>
       
diff --git a/app/views/delegates/_assume_detail.html.erb b/app/views/delegates/_assume_detail.html.erb
index b669fbfa..ae3caa3f 100644
--- a/app/views/delegates/_assume_detail.html.erb
+++ b/app/views/delegates/_assume_detail.html.erb
@@ -7,7 +7,7 @@
     ><lux-icon-person></lux-icon-person></lux-icon-base>
   </card-media>
   <card-header>
-    <lux-heading level="h2" size="h3"><hyperlink href="<%= assume_delegate_path(delegator) %>"><%= delegator.delegator %></hyperlink></lux-heading>
+    <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= assume_delegate_path(delegator) %>"><%= delegator.delegator %></lux-hyperlink></lux-heading>
     <lux-text-style><%= delegator.delegator.uid %></lux-text-style>
   </card-header>
 </card>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 114772a8..8d99ff52 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -2,7 +2,7 @@
   <grid-container class="stretch-height">
     <grid-item >
       <lux-text-style variation="default">You must login to view the requested resource.</lux-text-style>
-      <hyperlink href="/users/auth/cas" variation="button solid" data-method="post" size="large">LOGIN with NetID</hyperlink>
+      <lux-hyperlink href="/users/auth/cas" variation="button solid" data-method="post" size="large">LOGIN with NetID</lux-hyperlink>
     </grid-item>
   </grid-container>
 </wrapper>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 89795b4a..5ddfe6fa 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -44,10 +44,10 @@
             height="24"
             icon-color="rgb(65, 70, 78)"
           ><lux-icon-person></lux-icon-person></lux-icon-base> You are acting on behalf of <%= current_delegate.delegator %>. 
-          <hyperlink href="<%= cancel_delegates_path %>" variation="button outline" id="cancel_delegation"><lux-icon-base width="16" height="16" icon-name="Remove Delegate">
+          <lux-hyperlink href="<%= cancel_delegates_path %>" variation="button outline" id="cancel_delegation"><lux-icon-base width="16" height="16" icon-name="Remove Delegate">
             <lux-icon-denied></lux-icon-denied>
           </lux-icon-base> Stop acting on 
-          <%= current_delegate.delegator.given_name%>'s behalf.</hyperlink>
+          <%= current_delegate.delegator.given_name%>'s behalf.</lux-hyperlink>
           <p>Please use this feature with care as it allows other people whom you designate to act on your behalf. Delegation must never be used for approving any type of request, with the exception of sick time, which departmental assistants may record on behalf of employees who call in sick without notice.</p>
         </alert>
       </div>
diff --git a/app/views/requests/my_requests.html.erb b/app/views/requests/my_requests.html.erb
index 344fd398..f9538928 100644
--- a/app/views/requests/my_requests.html.erb
+++ b/app/views/requests/my_requests.html.erb
@@ -5,9 +5,9 @@
     </grid-item>
     <grid-item columns="md-7 sm-12 auto" :offset=true>
       <% if Rails.configuration.show_absence_button %>
-      <hyperlink href="<%= new_absence_request_path %>" variation="button solid">New absence request</hyperlink>
+      <lux-hyperlink href="<%= new_absence_request_path %>" variation="button solid">New absence request</lux-hyperlink>
       <% end %>
-      <hyperlink href="<%= new_travel_request_path %>" variation="button solid">New travel request</hyperlink>
+      <lux-hyperlink href="<%= new_travel_request_path %>" variation="button solid">New travel request</lux-hyperlink>
     </grid-item>
   </grid-container>
 </wrapper>
diff --git a/app/views/shared/_comment_button.html.erb b/app/views/shared/_comment_button.html.erb
index 90b16506..eb0393e4 100644
--- a/app/views/shared/_comment_button.html.erb
+++ b/app/views/shared/_comment_button.html.erb
@@ -1,3 +1,3 @@
 <% if request.only_creator_or_supervisor?(agent: current_staff_profile) %>
-  <hyperlink href="<%= path %>" variation="button solid">Comment</hyperlink>
+  <lux-hyperlink href="<%= path %>" variation="button solid">Comment</lux-hyperlink>
 <% end %>
diff --git a/app/views/shared/_edit_button.html.erb b/app/views/shared/_edit_button.html.erb
index 7da3a9f2..4bfbe844 100644
--- a/app/views/shared/_edit_button.html.erb
+++ b/app/views/shared/_edit_button.html.erb
@@ -1,3 +1,3 @@
 <% if request.can_edit?(agent: current_staff_profile) %>
-  <hyperlink href="<%= path %>" variation="button solid">Edit</hyperlink>
+  <lux-hyperlink href="<%= path %>" variation="button solid">Edit</lux-hyperlink>
 <% end %>
diff --git a/app/views/travel_requests/_form.html.erb b/app/views/travel_requests/_form.html.erb
index a3d63d2b..ae44c1f6 100644
--- a/app/views/travel_requests/_form.html.erb
+++ b/app/views/travel_requests/_form.html.erb
@@ -5,7 +5,7 @@
 <% end %>
 <grid-container>
   <grid-item columns="lg-12 sm-12">
-    <alert status="info" class="tip-card">Please make sure your request complies with <hyperlink href="https://library.princeton.edu/staff/ofa/finance-and-budget/travel" target="_blank">the official Princeton University Library Travel Policy</hyperlink> before submitting this form.</alert>
+    <alert status="info" class="tip-card">Please make sure your request complies with <lux-hyperlink href="https://library.princeton.edu/staff/ofa/finance-and-budget/travel" target="_blank">the official Princeton University Library Travel Policy</lux-hyperlink> before submitting this form.</alert>
   </grid-item>
   <grid-item columns="lg-3 md-6 sm-12">
     <%# # TODO This should really be creating fields like: params[:travel_request][:event_requests]{:id, :recurring_event_id, :start_date, :end_date, :location, :url}
diff --git a/app/views/travel_requests/_index_detail.html.erb b/app/views/travel_requests/_index_detail.html.erb
index 7de7d7e5..c8fef388 100644
--- a/app/views/travel_requests/_index_detail.html.erb
+++ b/app/views/travel_requests/_index_detail.html.erb
@@ -7,7 +7,7 @@
       ><<%= travel_request.travel_category_icon %> /></lux-icon-base>
     </card-media>
     <card-header>
-      <lux-heading level="h2" size="h3"><hyperlink href="<%= travel_request_path(travel_request.to_model)%>" class="event-title"><%= travel_request.event_title %></hyperlink></lux-heading>
+      <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= travel_request_path(travel_request.to_model)%>" class="event-title"><%= travel_request.event_title %></lux-hyperlink></lux-heading>
       <lux-text-style class="event-dates"><%= travel_request.formatted_full_start_date %> to <%= travel_request.formatted_full_end_date %></lux-text-style>
     </card-header>
     <card-content class="right-align">
diff --git a/app/views/travel_requests/_report_detail.html.erb b/app/views/travel_requests/_report_detail.html.erb
index dc3b43e7..e8998638 100644
--- a/app/views/travel_requests/_report_detail.html.erb
+++ b/app/views/travel_requests/_report_detail.html.erb
@@ -7,7 +7,7 @@
       ><<%= travel_request.travel_category_icon %> /></lux-icon-base>
     </card-media>
     <card-header>
-      <lux-heading level="h2" size="h3"><hyperlink href="<%= review_travel_request_path(travel_request.to_model)%>"><%= travel_request.creator %> - <%= travel_request.event_title_brief %></hyperlink></lux-heading>
+      <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= review_travel_request_path(travel_request.to_model)%>"><%= travel_request.creator %> - <%= travel_request.event_title_brief %></lux-hyperlink></lux-heading>
       <lux-text-style><%= travel_request.formatted_full_start_date %> to <%= travel_request.formatted_full_end_date %></lux-text-style>
     </card-header>
     <card-content>
diff --git a/app/views/travel_requests/_review_detail.html.erb b/app/views/travel_requests/_review_detail.html.erb
index a4a1af59..5b5382b1 100644
--- a/app/views/travel_requests/_review_detail.html.erb
+++ b/app/views/travel_requests/_review_detail.html.erb
@@ -7,7 +7,7 @@
       ><<%= travel_request.travel_category_icon %> /></lux-icon-base>
     </card-media>
     <card-header>
-      <lux-heading level="h2" size="h3"><hyperlink href="<%= review_travel_request_path(travel_request.to_model)%>"><%= travel_request.creator %> - <span class="event-title"><%= travel_request.event_title %></span></hyperlink></lux-heading>
+      <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= review_travel_request_path(travel_request.to_model)%>"><%= travel_request.creator %> - <span class="event-title"><%= travel_request.event_title %></span></lux-hyperlink></lux-heading>
       <lux-text-style class="event-dates"><%= travel_request.formatted_full_start_date %> to <%= travel_request.formatted_full_end_date %></lux-text-style>
     </card-header>
     <card-content>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 329c0b26..2752f762 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -4,9 +4,9 @@
       <lux-heading level="h1">Absence and Travel Requests</lux-heading>
       <lux-text-style variation="default">An Absence and Travel request workflow application for the Princeton University Library staff. Use this site to request vacation and other absence types from your supervisor, and to submit travel requests with cost estimates. Receive notifications as your request progresses through the required steps. Browse your upcoming and prior requests as needed.</lux-text-style>
       <% if current_user.blank? %>
-        <hyperlink href="/users/auth/cas" variation="button solid" data-method="post" size="large">LOGIN with NetID</hyperlink>
+        <lux-hyperlink href="/users/auth/cas" variation="button solid" data-method="post" size="large">LOGIN with NetID</lux-hyperlink>
       <% else %>
-        <hyperlink href="/sign_out" variation="button solid" size="large">LOGOUT</hyperlink>
+        <lux-hyperlink href="/sign_out" variation="button solid" size="large">LOGOUT</lux-hyperlink>
       <% end %>
     </grid-item>
   </grid-container>
diff --git a/yarn.lock b/yarn.lock
index 9102a562..4f5d4a25 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1001,6 +1001,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.3.3":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1856,6 +1863,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.14.165":
+  version "4.14.202"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+
 "@types/node@*":
   version "20.9.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.3.tgz#e089e1634436f676ff299596c9531bd2b59fffc6"
@@ -1868,6 +1880,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
+"@types/resize-observer-browser@^0.1.7":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz#d3c98d788489d8376b7beac23863b1eebdd3c13c"
+  integrity sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==
+
 "@types/semver@^7.3.12":
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
@@ -2686,6 +2703,18 @@ csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+date-fns-tz@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-2.0.0.tgz#1b14c386cb8bc16fc56fe333d4fc34ae1d1099d5"
+  integrity sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==
+
+date-fns@^2.16.1:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -4241,7 +4270,7 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.21:
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -4266,10 +4295,11 @@ lru-cache@^6.0.0:
   integrity sha512-B7gr+F6MkqB3uzINHXNctGieGsRTMwIBgxkp0yq/5BwcuDzD4A8wQpHQW6vDAm1uKSLQghmRdD9sKqf2vJ1cEg==
 
 "lux-design-system@file:.yalc/lux-design-system":
-  version "5.0.0-alpha.10"
+  version "5.0.0-alpha.11"
   dependencies:
     core-js "^3.8.3"
     register-service-worker "^1.7.2"
+    v-calendar "^3.1.2"
     vue-draggable-plus "^0.3.5"
     vuex "^4.0.0"
 
@@ -5642,6 +5672,18 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+v-calendar@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/v-calendar/-/v-calendar-3.1.2.tgz#fb47320a5469973454f030d850134eebcd2307eb"
+  integrity sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==
+  dependencies:
+    "@types/lodash" "^4.14.165"
+    "@types/resize-observer-browser" "^0.1.7"
+    date-fns "^2.16.1"
+    date-fns-tz "^2.0.0"
+    lodash "^4.17.20"
+    vue-screen-utils "^1.0.0-beta.13"
+
 v8-to-istanbul@^9.0.1:
   version "9.1.3"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.1.3.tgz#ea456604101cd18005ac2cae3cdd1aa058a6306b"
@@ -5706,6 +5748,11 @@ vue-eslint-parser@^9.4.0:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-screen-utils@^1.0.0-beta.13:
+  version "1.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz#0c739e19f6ffbffab63184aba7b6d710b6a63681"
+  integrity sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==
+
 vue@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.0.tgz#0671a2607265c16ab56041174744b6bed8ac2baa"