diff --git a/app/assets/images/blog_box.svg b/app/assets/images/blog_box.svg
index 011523b0b..0165f1060 100644
--- a/app/assets/images/blog_box.svg
+++ b/app/assets/images/blog_box.svg
@@ -1,5 +1,5 @@
 <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28.4623" height="28.4623" rx="5" fill="#FC8383"/>
+<rect width="28.4623" height="28.4623" rx="5" fill="currentColor"/>
 <path d="M20.3696 6.73173C19.3879 5.75609 17.8058 5.75609 16.8304 6.73173L15.4922 8.07011L19.9257 12.5105L21.2638 11.1722C22.2456 10.1903 22.2456 8.60797 21.2638 7.63232L20.3696 6.73173V6.73173Z" fill="white"/>
 <path d="M6.96932 16.9948L6.0301 20.7035C5.94443 21.0975 6.04448 21.4602 6.29398 21.7104C6.54411 21.9543 6.90054 22.0544 7.24446 21.9731L11.0026 21.0287C11.3528 20.9412 11.6779 20.7598 11.9343 20.5034L18.5126 13.924L14.0729 9.48987L7.49458 16.0129C7.2382 16.3256 7.05686 16.6446 6.96932 16.9948V16.9948Z" fill="white"/>
 </svg>
diff --git a/app/assets/images/twitter_box.svg b/app/assets/images/twitter_box.svg
index 3de4f13a3..c7d175964 100644
--- a/app/assets/images/twitter_box.svg
+++ b/app/assets/images/twitter_box.svg
@@ -1,5 +1,5 @@
 <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.396973" width="28.4623" height="28.4623" rx="5" fill="#FC8383"/>
+<rect x="0.396973" width="28.4623" height="28.4623" rx="5" fill="currentColor"/>
 <g clip-path="url(#clip0_42814_12951)">
 <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" fill="white" transform="translate(7 6)"/>
 </g>
diff --git a/app/assets/images/youtube_box.svg b/app/assets/images/youtube_box.svg
index c5066a800..786ce4df1 100644
--- a/app/assets/images/youtube_box.svg
+++ b/app/assets/images/youtube_box.svg
@@ -1,5 +1,5 @@
 <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28.4623" height="28.4623" rx="5" fill="#FC8383"/>
+<rect width="28.4623" height="28.4623" rx="5" fill="currentColor"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M21.32 10.06C20.886 9.288 20.415 9.146 19.456 9.092C18.498 9.027 16.089 9 14.002 9C11.911 9 9.501 9.027 8.544 9.091C7.587 9.146 7.115 9.287 6.677 10.06C6.23 10.831 6 12.159 6 14.497V14.505C6 16.833 6.23 18.171 6.677 18.934C7.115 19.706 7.586 19.846 8.543 19.911C9.501 19.967 11.911 20 14.002 20C16.089 20 18.498 19.967 19.457 19.912C20.416 19.847 20.887 19.707 21.321 18.935C21.772 18.172 22 16.834 22 14.506V14.501V14.498C22 12.159 21.772 10.831 21.32 10.06Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.5V11.5L17 14.5L12 17.5Z" fill="#F48284"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.5V11.5L17 14.5L12 17.5Z" fill="currentColor"/>
 </svg>
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 186728732..8da6a1a2a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -21,7 +21,6 @@
 @import "helpers/stars_background";
 @import "../../components/accordion/component";
 @import "../../components/navbar/component";
-@import "../../components/causes_list/component";
 @import "../../../node_modules/@yaireo/tagify/dist/tagify";
 @import "../../../node_modules/swiper/swiper-bundle";
 
@@ -187,4 +186,33 @@ input.admin-panel-population:disabled + label {
     height: 100%;
     object-fit: cover;
   }
+}
+
+// Popover
+.labelled-icon:hover + span[role=tooltip] {
+  display: inline;
+}
+
+// Underline on hover
+
+.underline-on-hover {
+  position: relative;
+  padding: 0;
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 4px;
+    background-color: #0782D0;
+    transition: width 0.3s ease-in-out;
+  }
+
+  &:hover::before {
+    width: 100%;
+  }
+
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/design_system/component/_button.scss b/app/assets/stylesheets/design_system/component/_button.scss
index 44ecc7c0f..1cc22fdfe 100644
--- a/app/assets/stylesheets/design_system/component/_button.scss
+++ b/app/assets/stylesheets/design_system/component/_button.scss
@@ -25,10 +25,6 @@
     font-size: 22px;
     line-height: 26px;
     letter-spacing: 1.1px;
-    transition: background-color 0.3s ease;
-    &:hover {
-      background-color: white;
-    }
   }
 
   &--my_account {
@@ -38,4 +34,3 @@
     }
   }
 }
-
diff --git a/app/assets/stylesheets/helpers/_hover_pointer.scss b/app/assets/stylesheets/helpers/_hover_pointer.scss
index 3dd280b17..b7b6f5163 100644
--- a/app/assets/stylesheets/helpers/_hover_pointer.scss
+++ b/app/assets/stylesheets/helpers/_hover_pointer.scss
@@ -1,4 +1,6 @@
-#pointer:hover {
-	cursor: pointer;
-	transform: scale(1.08);
+.pop-out {
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.08);
+  }
 }
diff --git a/app/components/causes_list/component.js b/app/components/causes_list/component.js
deleted file mode 100644
index 1617c6c11..000000000
--- a/app/components/causes_list/component.js
+++ /dev/null
@@ -1 +0,0 @@
-import "./component.scss"
\ No newline at end of file
diff --git a/app/components/causes_list/component.scss b/app/components/causes_list/component.scss
deleted file mode 100644
index 87f114989..000000000
--- a/app/components/causes_list/component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.labelled-icon:hover + span[role=tooltip] {
-  display: inline;
-}
\ No newline at end of file
diff --git a/app/components/designation_tag/component.html.erb b/app/components/designation_tag/component.html.erb
index 5d37da85c..17ca09d37 100644
--- a/app/components/designation_tag/component.html.erb
+++ b/app/components/designation_tag/component.html.erb
@@ -2,18 +2,16 @@
   <%= content_tag(:div, container_setup) do %>
     <% designation_map.each do |designation_name, designation_desc| %>
       <% tooltip_id = SecureRandom.hex(8) %>
-
-      <div class="relative text-xs text-center">
+      <div class="relative text-xs text-center cursor-pointer">
         <%# Pill %>
-        <span class="block labelled-icon w-fit px-2 py-1 border rounded-lg bg-gray-8 text-gray-4" aria-labelledby="<%= tooltip_id %>">
+        <span class="block px-2 py-1 rounded-lg border labelled-icon w-fit bg-gray-8 text-gray-4" aria-labelledby="<%= tooltip_id %>">
           <%= designation_name %>
         </span>
-
         <%# Hover over %>
         <span
         role="tooltip"
         id="<%= tooltip_id %>"
-        class="absolute hidden bottom-full right-1/2 py-1 px-3 mb-2 rounded-lg text-white transform translate-x-1/2 bg-gray-2 bg-opacity-90">
+        class="hidden absolute right-1/2 bottom-full px-3 py-1 mb-2 text-white bg-opacity-90 rounded-lg transform translate-x-1/2 bg-gray-2">
           <%= designation_desc %>
         </span>
       </div>
diff --git a/app/components/discover_nonprofit_card/actions_menu/component.html.slim b/app/components/discover_nonprofit_card/actions_menu/component.html.slim
index 76cdd06e4..2be551f32 100644
--- a/app/components/discover_nonprofit_card/actions_menu/component.html.slim
+++ b/app/components/discover_nonprofit_card/actions_menu/component.html.slim
@@ -1,12 +1,12 @@
 nav class="flex justify-between"
   // GC profile link
-  = link_to location_path(@location), class: "relative grid place-items-center pb-4 text-blue-medium", target: "_blank" do
+  = link_to location_path(@location), class: "pop-out  relative grid place-items-center pb-4 text-blue-medium", target: "_blank" do
     = render CauseIcon::Component.new(svg_name: "non_profit_cards/redirect.svg", \
                                           wrapper_options: {class: "icon w-10 h-10 border border-blue-medium"}, \
                                           svg_options: {class: "w-1/2", aria_hidden: true})
     span class="#{action_button_styles[:copy]}" View Page
   // Save
-  = render SaveButton::Component.new(user: @user, location: @location)
+  = render SaveButton::Component.new(user: @user, location: @location, tooltip_position: "top-10")
 
   // Share
   button type="button" class="#{action_button_styles[:button]}" data-controller="copy-to-clipboard" data-action="click->copy-to-clipboard#copyContent" data-copy-to-clipboard-content-param="#{location_url(@location)}"
diff --git a/app/components/discover_nonprofit_card/head/component.html.slim b/app/components/discover_nonprofit_card/head/component.html.slim
index a1a952b4b..f62a9548c 100644
--- a/app/components/discover_nonprofit_card/head/component.html.slim
+++ b/app/components/discover_nonprofit_card/head/component.html.slim
@@ -10,7 +10,7 @@ div class="flex gap-x-5"
         = render partial: "shared/popover", locals: { position: "right-0", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg" }
     // maps and phone
     - if @location.public_address?
-      = link_to(@location.formatted_address, @location.link_to_google_maps, class: "w-3/4", target: "_blank")
+      = link_to(@location.formatted_address, @location.link_to_google_maps, class: "pop-out w-3/4", target: "_blank")
     - if @location.phone_number
       a href="tel:#{@location.phone_number.number}" = @location.phone_number.number
     // Designations
diff --git a/app/components/location_infowindow/component.html.slim b/app/components/location_infowindow/component.html.slim
index d1d91d75c..d52675058 100644
--- a/app/components/location_infowindow/component.html.slim
+++ b/app/components/location_infowindow/component.html.slim
@@ -8,14 +8,14 @@ div.flex.items-center.justify-between.w-full
 
 // Name
 div class="flex flex-row gap-1 justify-between items-start"
-  a id="pointer"
+  a class="pop-out"
     = link_to @location.name, location_path(@location), target:"_blank", class: "text-small font-bold text-gray-2"
     - if @location.organization.verified?
       = render partial: "shared/popover", locals: {position: "right-0", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg"}
 
 // Address, website, phone, and availability
 - if @location.public_address?
-  p class="text-xs text-gray-4" id="pointer"
+  p class="text-xs text-gray-4" class="pop-out"
     = link_to @location.formatted_address, @location.link_to_google_maps, target: "blank"
 
 p class="text-xs text-blue-medium"
diff --git a/app/components/map_left_popup/component.html.slim b/app/components/map_left_popup/component.html.slim
index 7eab1671b..03fe3c681 100644
--- a/app/components/map_left_popup/component.html.slim
+++ b/app/components/map_left_popup/component.html.slim
@@ -8,7 +8,7 @@ div class="flex relative flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@res
         - if @result.organization.verified?
           = render partial: "shared/popover", locals: { position: "right-0", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg" }
       - if @result.public_address?
-        p class="text-xs text-gray-500 lg:text-sm" id="pointer"
+        p class="text-xs text-gray-500 lg:text-sm" class="pop-out"
           = link_to @result.formatted_address, @result.link_to_google_maps, target: "blank"
       // Designations
       = render DesignationTag::Component.new(@result.organization)
diff --git a/app/components/navbar/component.html.slim b/app/components/navbar/component.html.slim
index 89dc7f9a9..c18da8001 100644
--- a/app/components/navbar/component.html.slim
+++ b/app/components/navbar/component.html.slim
@@ -42,7 +42,7 @@ nav id="main-navbar" data-controller="navbar--component" class="#{non_sticky_pat
       - if @signed_in
         li = link_to "My Account", my_account_path, class:"navbar__option text-lg font-bold mr-1 lg:mr-6 border-b-2 border-transparent md:text-base #{request.env['PATH_INFO'] == "/my_account" ? "text-seafoam border-seafoam navbar__option--selected" : ""}"
       - else
-        li = link_to "Sign in", signin_path, class:'navbar__option text-lg font-bold mr-2 mid:mr-4 lg:mr-6'
+        li.pop-out = link_to "Sign in", signin_path, class:'navbar__option text-lg font-bold mr-2 mid:mr-4 lg:mr-6 pop-out'
         li = link_to "Create Account", signup_path, class:'c-button c-button--my_account py-2.5 px-5 text-white bg-blue-medium'
       li class="inline-block flex relative items-center mx-2 w-28 font-medium cursor-pointer lg:w-36" data-controller="dropdown" data-action="click@window->dropdown#hide touchstart@window->dropdown#hide keydown.up->dropdown#previousItem keydown.down->dropdown#nextItem keydown.esc->dropdown#hide" 
         button data-action="dropdown#toggle:stop" class="flex items-center text-xs navbar__option navbar__option--selected md:text-base text-seafoam"
diff --git a/app/components/result_card/component.html.erb b/app/components/result_card/component.html.erb
index 9dff2e67f..a6deb947e 100644
--- a/app/components/result_card/component.html.erb
+++ b/app/components/result_card/component.html.erb
@@ -16,12 +16,12 @@
           <% if @verified %>
             <%= render "shared/popover", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg", position: "right-0" %>
           <% end %>
-          <%= render SaveButton::Component.new(user: @current_user, location: Location.find(@id), simplified: true) %>
+          <%= render SaveButton::Component.new(user: @current_user, location: Location.find(@id), simplified: true, tooltip_position:  "right-0 mt-2") %>
         </div>
       </div>
       <div class="pb-0 text-xs text-gray-4">
         <% if @public_address %>
-          <p id="pointer"><%= link_to @address, @link_to_google_maps, target: "blank" %></p>
+          <p class="pop-out" ><%= link_to @address, @link_to_google_maps, target: "blank" %></p>
         <% end %>
         <% if @website.present? %>
           <p><%= link_to @website_for_display, @website, target: '_blank', class: 'text-blue-medium'%></p>
@@ -57,7 +57,7 @@
             icon_svg_options: {class: "w-5 h-5", aria_hidden: true}) %>
       </section>
     <% end %>
-    <a href="<%= location_path(@id)%>" class="inline-flex items-center ml-4 text-sm font-bold whitespace-nowrap text-blue-medium", target="_blank">
+    <a href="<%= location_path(@id)%>" class="inline-flex items-center ml-4 text-sm font-bold whitespace-nowrap pop-out text-blue-medium", target="_blank">
       Go to Page
       <%= inline_svg_tag 'solid_arrow_right.svg', class: 'w-4 h-4 ml-2 text-blue-medium fill-current'%>
     </a>
diff --git a/app/components/save_button/component.html.erb b/app/components/save_button/component.html.erb
index 33dbe4be3..e95bc2e46 100644
--- a/app/components/save_button/component.html.erb
+++ b/app/components/save_button/component.html.erb
@@ -1,14 +1,17 @@
+<% tooltip_id = SecureRandom.hex(8) %>
 <%= link_to(
-  link_args[:path],
-  method: link_args[:method],
-  class: "#{btn_selector} #{button_styles}",
-  data: { turbo_stream: true }
-) do %>
+      link_args[:path],
+      method: link_args[:method],
+      class: "#{btn_selector} #{button_styles} relative",
+      data: { turbo_stream: true}
+    ) do %>
   <%= render CauseIcon::Component.new(
-    svg_name: icon_name,
-    wrapper_options: { class: wrapper_styles },
-    svg_options: { class: "w-4 h-auto", aria_hidden: true }
-  ) %>
-
+        svg_name: icon_name,
+        wrapper_options: { class: "pop-out labelled-icon #{wrapper_styles}", "aria-labelledby": tooltip_id },
+        svg_options: { class: "w-4 h-auto", aria_hidden: true }
+      ) %>
+  <span role="tooltip" id="<%= tooltip_id %>" class="<%= "hidden absolute z-10 px-2 py-1 w-44 text-xs text-white bg-opacity-90 rounded-lg transform bg-gray-2 #{@tooltip_position}" %>" >
+    Save this nonprofit to you account!
+  </span>
   <span class="<%= copy_styles %>">Save</span>
-<% end %>
+<% end %>
\ No newline at end of file
diff --git a/app/components/save_button/component.rb b/app/components/save_button/component.rb
index 6ca2a5b7b..872486129 100644
--- a/app/components/save_button/component.rb
+++ b/app/components/save_button/component.rb
@@ -1,10 +1,11 @@
 class SaveButton::Component < ApplicationViewComponent
   include ActionButtonHelper
 
-  def initialize(user:, location:, simplified: false)
+  def initialize(user:, location:, simplified: false, tooltip_position: "")
     @user = user
     @location = location
     @simplified = simplified
+    @tooltip_position = tooltip_position
   end
 
   def link_args
diff --git a/app/components/search_bar/component.html.erb b/app/components/search_bar/component.html.erb
index 2c11f47ea..0dd157f92 100644
--- a/app/components/search_bar/component.html.erb
+++ b/app/components/search_bar/component.html.erb
@@ -55,6 +55,6 @@
   <%# Search Button %>
   <%= @form.submit(
     'Search',
-    class: "invisible w-0 p-0 rounded-md text-blue-dark font-bold uppercase bg-seafoam md:py-4 md:px-10 md:w-36 md:visible focus:outline-none"
+    class: "hover:bg-white transition invisible w-0 p-0 rounded-md text-blue-dark font-bold uppercase bg-seafoam md:py-4 md:px-10 md:w-36 md:visible focus:outline-none"
   )%>
 </div>
diff --git a/app/components/search_pills/button/component.html.slim b/app/components/search_pills/button/component.html.slim
index cfd4b5087..cdfbda548 100644
--- a/app/components/search_pills/button/component.html.slim
+++ b/app/components/search_pills/button/component.html.slim
@@ -1,3 +1,3 @@
 = radio_button_tag(@name, @value, @checked, @options)
-label for=@options[:id] class="flex items-center flex-auto pl-3 py-4 text-xs text-gray-2 border-y border-l-0 border-r border-gray-6 cursor-pointer button-label md:px-3 md:py-2"
+label for=@options[:id] class="flex flex-auto items-center py-4 pl-3 text-xs border-r border-l-0 transition cursor-pointer hover:bg-gray-5 text-gray-2 border-y border-gray-6 button-label md:px-3 md:py-2"
   = @copy
diff --git a/app/components/search_pills/component.html.slim b/app/components/search_pills/component.html.slim
index daa79e0a5..c57175434 100644
--- a/app/components/search_pills/component.html.slim
+++ b/app/components/search_pills/component.html.slim
@@ -1,32 +1,32 @@
 div class="w-full bg-gray-9"
-  div data-controller="tabs" data-tabs-active-tab=("border-b-4 border-blue-medium")
+  div data-controller="tabs" data-tabs-active-tab=("border-b-4 border-blue-medium") data-tabs-inactive-tab="underline-on-hover"
     div class="flex"
       / Clear-Counter button
-      span class="flex items-center justify-center py-3 pl-5 pr-2 text-xs w-14 bg-blue-pale"
-        span class="inline-flex hidden items-center px-1 py-0.5 border border-blue-medium rounded-full bg-white" data-search-target="pillsCounterWrapper"
+      span class="flex justify-center items-center py-3 pr-2 pl-5 w-14 text-xs bg-blue-pale"
+        span class="inline-flex hidden items-center px-1 py-0.5 bg-white rounded-full border border-blue-medium" data-search-target="pillsCounterWrapper"
           span data-search-target="pillsCounter" class="mr-0.5"
           button type="button" data-action="search#clearCheckedFilters"
             = inline_svg_tag "x-icon.svg", class: 'h-2 w-2 fill-current stroke-current stroke-1 text-blue-medium ml-1 relative'
         = inline_svg_tag "solid_filters.svg", class: 'h-4 w-4 fill-current text-gray-2 -ml-0.5 relative', data: { 'search-target': "filtersIcon" }
       / Tabs
-      ul class="flex flex-1 pl-5 pr-6 overflow-x-auto overflow-y-hidden text-sm list-none gap-x-6 bg-blue-pale text-gray-2"
+      ul class="flex overflow-x-auto overflow-y-hidden flex-1 gap-x-6 pr-6 pl-5 text-sm list-none bg-blue-pale text-gray-2"
         - @tabs_labels.each do |tab_label|
           li data-action="click->tabs#change" data-tabs-target="tab"
             a class="inline-block py-3 whitespace-nowrap" href="#" = tab_label
-        li data-action="click->modal#open"
+        li data-action="click->modal#open" class="underline-on-hover"
           button class="inline-block py-3 whitespace-nowrap" type="button" id="advanced-filters-button"
             | Advanced Filters
-            span class="relative hidden w-2 h-2 mb-2 ml-1 rounded-full bg-salmon" id="appliedIcon"
+            span class="hidden relative mb-2 ml-1 w-2 h-2 rounded-full bg-salmon" id="appliedIcon"
 
     / Panels
     div class="bg-white"
       / Causes
-      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
+      div class="flex hidden overflow-y-auto flex-wrap gap-x-2 gap-y-3 px-6 py-4 max-h-28 border-r border-b border-l" data-tabs-target="panel"
         - @causes.each do |cause|
           = render SearchPills::Pill::Component.new(name: "search[causes][]", value: cause.name, checked: @params.dig(:search, :causes)&.include?(cause.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Location
-      div class="flex flex-col hidden border-b md:flex-row md:items-center" data-tabs-target="panel"
+      div class="flex hidden flex-col border-b md:flex-row md:items-center" data-tabs-target="panel"
         div class="py-4 pl-6 text-sm text-gray-2"
           span class="inline-flex items-center"
             = inline_svg_tag "location-dot.svg", class: "h-3 w-3 fill-current text-blue-medium mr-1"
@@ -36,17 +36,17 @@ div class="w-full bg-gray-9"
           - @radii_in_miles.each do |radius|
             = render SearchPills::Button::Component.new(name: "search[distance]", value: miles_to_km(radius), checked: @params.dig(:search, :distance) == miles_to_km(radius).to_s, copy: radius == "Any" ? radius : "#{radius} mi")
       / Services
-      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
+      div class="flex hidden overflow-y-auto flex-wrap gap-x-2 gap-y-3 px-6 py-4 max-h-28 border-r border-b border-l" data-tabs-target="panel"
         - @services.each do |service|
           = render SearchPills::Pill::Component.new(name: "search[services][#{service.cause.name}][]", value: service.name, checked: @params.dig('search', 'services', service.cause.name)&.include?(service.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Populations Served
-      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
+      div class="flex hidden overflow-y-auto flex-wrap gap-x-2 gap-y-3 px-6 py-4 max-h-28 border-r border-b border-l" data-tabs-target="panel"
         - @beneficiary_subcategories.each do |subcategory|
           = render SearchPills::Pill::Component.new(name: "search[beneficiary_groups][#{subcategory.beneficiary_group.name}][]", value: subcategory.name, checked: @params.dig('search', 'beneficiary_groups', subcategory.beneficiary_group.name)&.include?(subcategory.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Hours
-      div class="flex hidden w-full px-6 py-4 border-b border-l border-r gap-x-2" data-tabs-target="panel"
+      div class="flex hidden gap-x-2 px-6 py-4 w-full border-r border-b border-l" data-tabs-target="panel"
         = render SearchPills::Pill::Component.new(name: "search[open_now]", value: true, checked: @params.dig('search', 'open_now') == 'true') do
           | Open Now
         = render SearchPills::Pill::Component.new(name: "search[open_weekends]", value: true, checked: @params.dig('search', 'open_weekends') == 'true') do
diff --git a/app/components/search_pills/more_filters_button/component.html.slim b/app/components/search_pills/more_filters_button/component.html.slim
index 999e1ab5b..a2666b925 100644
--- a/app/components/search_pills/more_filters_button/component.html.slim
+++ b/app/components/search_pills/more_filters_button/component.html.slim
@@ -1,2 +1,2 @@
-button type="button" class="flex gap-x-1 items-center px-2 py-1.5 border border-gray-6 rounded-full text-gray-2 text-xs whitespace-nowrap" data-action="click->modal#open"
+button type="button" class="flex gap-x-1 items-center px-2 py-1.5 text-xs whitespace-nowrap rounded-full border transition hover:bg-gray-5 border-gray-6 text-gray-2" data-action="click->modal#open"
   | Show More
diff --git a/app/components/search_pills/pill/component.html.slim b/app/components/search_pills/pill/component.html.slim
index 402d8fdcb..72d9548ee 100644
--- a/app/components/search_pills/pill/component.html.slim
+++ b/app/components/search_pills/pill/component.html.slim
@@ -1,3 +1,3 @@
 = check_box_tag(@name, @value, @checked, @options)
-label for=@options[:id] class="px-2 py-1.5 border border-gray-6 rounded-full text-gray-2 text-xs whitespace-nowrap cursor-pointer"
+label for=@options[:id] class="px-2 py-1.5 text-xs whitespace-nowrap rounded-full border transition cursor-pointer hover:bg-gray-5 border-gray-6 text-gray-2"
   = content ? content : @value
diff --git a/app/components/social_media/component.html.slim b/app/components/social_media/component.html.slim
index c18dc4c3d..416fcca5b 100644
--- a/app/components/social_media/component.html.slim
+++ b/app/components/social_media/component.html.slim
@@ -3,19 +3,19 @@ h3 class="text-sm font-bold uppercase"
 div class="flex flex-row gap-5 my-6"
   - if @social_media&.facebook.present?
     a href=@social_media&.facebook class="text-sm font-base text-gray-2" target="_blank"
-      = inline_svg_tag 'facebook_box.svg', class: "text-salmon fill-current"
+      = inline_svg_tag 'facebook_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current"
   - if @social_media&.linkedin.present?
     a href=@social_media&.linkedin class="text-sm font-base text-gray-2" target="_blank"
-      = inline_svg_tag 'linkedin_box.svg', class: "text-salmon fill-current"
+      = inline_svg_tag 'linkedin_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current"
   - if @social_media&.twitter.present?
     a href=@social_media&.twitter class="text-sm font-base text-gray-2" target="_blank"
-      = inline_svg_tag 'twitter_box.svg', class: "text-salmon fill-current"
+      = inline_svg_tag 'twitter_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current"
   - if @social_media&.instagram.present?
     a href=@social_media&.instagram class="text-sm font-base text-gray-2" target="_blank"
-      = inline_svg_tag 'instagram_box.svg', class: "text-salmon fill-current"
+      = inline_svg_tag 'instagram_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current"
   - if @social_media&.youtube.present?
     a href=@social_media&.youtube class="text-sm font-base text-gray-2" target="_blank"
-      = inline_svg_tag 'youtube_box.svg', class: "text-salmon fill-current"
+      = inline_svg_tag 'youtube_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current"
   - if @social_media&.blog.present?
     a href=@social_media&.blog class="text-sm font-base text-gray-2" target="_blank"
-      = inline_svg_tag 'blog_box.svg', class: "text-salmon fill-current"
+      = inline_svg_tag 'blog_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current"
diff --git a/app/helpers/action_button_helper.rb b/app/helpers/action_button_helper.rb
index 0bcfe44ee..1e6f80df9 100644
--- a/app/helpers/action_button_helper.rb
+++ b/app/helpers/action_button_helper.rb
@@ -2,7 +2,7 @@ module ActionButtonHelper
   def action_button_styles
     {
       button: "relative grid place-items-center pb-4 transition-colors",
-      icon_wrapper: "icon w-10 h-10 border border-gray-2",
+      icon_wrapper: "icon w-10 h-10 border border-gray-2 hover:bg-gray-5 transition",
       copy: "absolute bottom-0 right-1/2 w-max text-xs transform translate-x-1/2"
     }
   end
diff --git a/app/javascript/controllers/fade_in_controller.js b/app/javascript/controllers/fade_in_controller.js
new file mode 100644
index 000000000..d8b11edaf
--- /dev/null
+++ b/app/javascript/controllers/fade_in_controller.js
@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["fadeInElement"];
+
+  connect() {
+    this.observer = new IntersectionObserver(this.handleIntersect.bind(this), {
+      threshold: 0.1
+    });
+
+    this.fadeInElementTargets.forEach(element => {
+      this.observer.observe(element);
+    });
+  }
+
+  handleIntersect(entries) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const delay = entry.target.dataset.delay || 0; // Default to 0 if no delay is specified
+        entry.target.style.transitionDelay = `${delay}ms`;
+        entry.target.classList.add('opacity-100', 'transition-opacity', 'duration-1000');
+        this.observer.unobserve(entry.target);
+      }
+    });
+  }
+}
\ No newline at end of file
diff --git a/app/views/about_us/show.html.slim b/app/views/about_us/show.html.slim
index 7cebf110a..ade62288f 100644
--- a/app/views/about_us/show.html.slim
+++ b/app/views/about_us/show.html.slim
@@ -474,4 +474,4 @@ div class="flex flex-col text-gray-2"
     div class="absolute top-0 right-0 left-0 mx-auto max-w-md text-center"
       h2 class="px-5 pt-20 pb-11 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark"
         | Want to connect with nonprofits in your community?
-      = link_to "START YOUR SEARCH", search_path, class:'c-button inline-block my-1 text-white bg-blue-dark'
+      = link_to "START YOUR SEARCH", search_path, class:'c-button inline-block my-1 text-white bg-blue-dark hover:bg-blue-medium transition'
diff --git a/app/views/admin_users/passwords/edit.html.slim b/app/views/admin_users/passwords/edit.html.slim
index 303991af1..57bdae141 100644
--- a/app/views/admin_users/passwords/edit.html.slim
+++ b/app/views/admin_users/passwords/edit.html.slim
@@ -1,8 +1,8 @@
 .main
-  h2 class="pb-10 text-2xl font-bold text-center pt-14 md:pt-32 md:mt-2 text-gray-gray-7"
+  h2 class="pt-14 pb-10 text-2xl font-bold text-center md:pt-32 md:mt-2 text-gray-gray-7"
     | Create a new Password
 
-  div class="max-w-md px-4 mx-auto mb-5 text-sm text-center text-black pb-7 sm:text-lg sm:pb-12"
+  div class="px-4 pb-7 mx-auto mb-5 max-w-md text-sm text-center text-black sm:text-lg sm:pb-12"
     | Please create a new password
 
   = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
@@ -16,6 +16,6 @@
         = f.label :password_confirmation
         = f.password_field :password_confirmation, autocomplete: "new-password", class: "c-input rounded-md", placeholder: "Confirm your password"
       .c-form--action
-        = f.submit "Reset password", class:"c-button"
+        = f.submit "Reset password", class:"c-button hover:bg-seafoam-light transition"
 
 = render "admin_users/shared/links"
diff --git a/app/views/admin_users/passwords/new.html.slim b/app/views/admin_users/passwords/new.html.slim
index f27fdca06..3b3f3504f 100644
--- a/app/views/admin_users/passwords/new.html.slim
+++ b/app/views/admin_users/passwords/new.html.slim
@@ -1,8 +1,8 @@
 .main
-  h2  class="pb-10 text-2xl font-bold text-center pt-14 md:pt-32 md:mt-2 text-gray-gray-7"
+  h2  class="pt-14 pb-10 text-2xl font-bold text-center md:pt-32 md:mt-2 text-gray-gray-7"
     | Reset your password?
   = render "admin_users/shared/error_messages", resource: resource
-  div class="max-w-md px-4 mx-auto text-sm text-center text-black pb-7 sm:text-lg sm:pb-12"
+  div class="px-4 pb-7 mx-auto max-w-md text-sm text-center text-black sm:text-lg sm:pb-12"
     | Forgot your password? Please enter the email associated with your account so we can help you.
 
   = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
@@ -12,4 +12,4 @@
         = f.label :email, "Email Address"
         = f.email_field :email, autofocus: true, autocomplete: "email", class:"c-input rounded-md"
       .c-form--action class="mt-12 mb-44"
-        = f.submit "Send reset instructions", class:"c-button"
+        = f.submit "Send reset instructions", class:"c-button hover:bg-seafoam-light transition"
diff --git a/app/views/admin_users/sessions/new.html.slim b/app/views/admin_users/sessions/new.html.slim
index b8f24d829..3df628fc5 100644
--- a/app/views/admin_users/sessions/new.html.slim
+++ b/app/views/admin_users/sessions/new.html.slim
@@ -1,9 +1,9 @@
-.main class="mb-12 md:mb-36 mt-14 md:mt-32"
+.main class="mt-14 mb-12 md:mb-36 md:mt-32"
   h2 class="pb-6 text-2xl font-bold text-center md:pb-9 text-gray-gray-7"
     | Welcome back!
 
   div class="md:hidden"
-    div class="absolute top-0 left-0 -z-1 w-72 sm:w-80 sm:h-80"
+    div class="absolute top-0 left-0 w-72 -z-1 sm:w-80 sm:h-80"
       = inline_svg_tag 'mob-purple-blur-login.svg'
     div class="absolute top-0 right-0 -z-1"
       = inline_svg_tag 'mob-green-blur-login.svg'
@@ -25,4 +25,4 @@
       - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
         = link_to "Forgot your password?", new_password_path(resource_name), class:'font-bold flex self-end md:self-center'
       .c-form--action class="mt-12"
-        = f.submit "Sign in", class:"c-button", data: { test_id: "admin_login_submit_btn"}
+        = f.submit "Sign in", class:"c-button hover:bg-seafoam-light transition", data: { test_id: "admin_login_submit_btn"}
diff --git a/app/views/alerts/_form.html.slim b/app/views/alerts/_form.html.slim
index a13b057b7..730d3924d 100644
--- a/app/views/alerts/_form.html.slim
+++ b/app/views/alerts/_form.html.slim
@@ -54,7 +54,7 @@
       p You’ll receive an email when a newly
       p published organization matches your search.
     div class='mt-5'
-      = form.submit alert&.persisted? ? 'SAVE' : 'Create Alert', class:'c-button'
+      = form.submit alert&.persisted? ? 'SAVE' : 'Create Alert', class:'hover:bg-seafoam-light transition c-button'
     - if alert&.persisted?
       div class="my-4 text-center"
         = link_to 'Delete alert', alert_path(alert), class:"text-sm font-bold text-blue-medium", method: :delete
\ No newline at end of file
diff --git a/app/views/contact_messages/new.html.slim b/app/views/contact_messages/new.html.slim
index 5ac7f62ba..22876959d 100644
--- a/app/views/contact_messages/new.html.slim
+++ b/app/views/contact_messages/new.html.slim
@@ -51,4 +51,4 @@
         = recaptcha_tags
 
       div class="mt-3"
-        = f.submit "Send message", class:"c-button"
+        = f.submit "Send message", class:"c-button hover:bg-seafoam-light transition"
diff --git a/app/views/donates/show.html.slim b/app/views/donates/show.html.slim
index 6c8b4347e..2df0fd481 100644
--- a/app/views/donates/show.html.slim
+++ b/app/views/donates/show.html.slim
@@ -35,7 +35,7 @@ div class="bg-white main"
           ' We truly could not do this without your help. The overwhelming support we received
           ' from our community has given us the foundational grounding and energized motivation
           ' to continue our momentum towards meaningful change.
-        = link_to "Donate", "https://givebutter.com/aclaunch", target: "_blank", class:'c-button inline-block my-1 text-primary-dark-blue bg-secondary-seafoam'
+        = link_to "Donate", "https://givebutter.com/aclaunch", target: "_blank", class:'transition c-button transition inline-block my-1 text-primary-dark-blue bg-secondary-seafoam hover:bg-seafoam-light'
 
   /* Donate Online */
   div class="relative py-10 text-center bg-gradient-to-l md:pt-20 from-blue-gradient-1 to-blue-gradient-2"
@@ -70,7 +70,7 @@ div class="bg-white main"
         p class="mb-9 max-w-353px text-gray-2"
           ' Your support and contributions will enable us to meet our goals
           ' and improve conditions. Your generous donation will fund our mission.
-        = link_to "Donate now", "https://www.paypal.com/us/fundraiser/charity/4363348", target: "_blank", class:'c-button c-button--no-center inline-block my-1 text-primary-dark-blue bg-secondary-seafoam mb-9'
+        = link_to "Donate now", "https://www.paypal.com/us/fundraiser/charity/4363348", target: "_blank", class:'transition hover:bg-seafoam-light c-button c-button--no-center inline-block my-1 text-primary-dark-blue bg-secondary-seafoam mb-9'
         = image_tag  "paypal-cards.png", size:"169x21"
 
     div class="flex flex-col justify-between items-center mb-28 w-full lg:flex-row"
diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
index 3300be6d9..01978806b 100644
--- a/app/views/home/index.html.slim
+++ b/app/views/home/index.html.slim
@@ -43,26 +43,26 @@ main
           = f.hidden_field :lat, value: @current_location[:latitude], data: { geolocation_target: "formLatitude" }
           = f.hidden_field :lon, value: @current_location[:longitude], data: { geolocation_target: "formLongitude" }
         div
-          = f.submit "Search", class:"c-button c-button--search mx-10 mt-8", data: { test_id: "home_search_btn" }
-  section class="pt-6 text-gray-2 sm:pt-10"
+          = f.submit "Search", class:"c-button c-button--search hover:bg-white transition mx-10 mt-8", data: { test_id: "home_search_btn" }
+  section class="pt-6 text-gray-2 sm:pt-10" data-controller="fade-in"
     h2 class="pb-8 text-2xl font-bold text-center uppercase sm:pb-5"
       | How it works
     div class="flex flex-col justify-evenly mx-auto max-w-7xl lg:flex-row xl:px-16"
-      div class="mx-auto mb-9 max-w-xs text-center lg:mb-0"
+      div class="mx-auto mb-9 max-w-xs text-center opacity-0 lg:mb-0" data-fade-in-target="fadeInElement" data-delay="500"
         div class="flex items-end mb-2 h-36"
           = inline_svg_tag 'search-needs.svg', class:'mx-auto' 
         h5 class="pb-3 font-bold uppercase md:pb-1"
           | 1. Search for your needs
         p.px-8
           | Enter keywords in the search box above to start your search for nonprofits in your area.
-      div.text-center.max-w-xs.mx-auto.mb-14.lg:mb-0
+      div.text-center.max-w-xs.mx-auto.mb-14.lg:mb-0.opacity-0 data-fade-in-target="fadeInElement" data-delay="1300"
         div class="flex items-end mb-2 h-36"
           = inline_svg_tag 'connect.svg', class:'mx-auto'
         h5 class="pb-3 font-bold uppercase md:pb-1"
           | 2. Connect with organizations
         p.px-8
           | Browse through nonprofit profiles to find the one that matches your needs.
-      div class="mx-auto max-w-xs text-center"
+      div class="mx-auto max-w-xs text-center opacity-0" data-fade-in-target="fadeInElement" data-delay="2100"
         div class="flex items-end mb-2 h-36"
           = inline_svg_tag 'help.svg', class:'mx-auto'
         h5 class="pb-3 font-bold uppercase md:pb-1"
@@ -94,7 +94,7 @@ main
           | We want to make living and giving simpler.
         p class="px-4 pt-3 pb-6 md:pb-10"
           | We are a nonprofit search tool connecting you with resources in your community.
-        = link_to "Start your search", '#search', class:'c-button inline-block text-white bg-blue-medium'
+        = link_to "Start your search", '#search', class:'bg-blue-dark transition-colors hover:bg-blue-medium c-button inline-block text-white'
       div class="hidden -top-20 -left-32 sm:block sm:absolute -z-1"
         = inline_svg_tag 'lw-desk-blur-left.svg'
       div class="hidden overflow-hidden right-0 -top-40 sm:block sm:absolute xl:-right-28 -z-1"
@@ -109,7 +109,7 @@ main
     div class="relative pb-20 mx-auto max-w-md text-center"
       h2 class="px-5 pt-20 pb-11 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark"
         | Are you a nonprofit organization interested in joining our listings?
-      = link_to 'Add or Claim a Nonprofit', new_nonprofit_request_path, class:'c-button inline-block my-1 text-white bg-blue-dark'
+      = link_to 'Add or Claim a Nonprofit', new_nonprofit_request_path, class:'c-button inline-block my-1 text-white bg-blue-dark transition-colors hover:bg-blue-medium '
     div class="hidden top-0 left-0 -z-1 sm:block sm:absolute"
       = inline_svg_tag 'lc-desk-blur-left.svg'
     div class="hidden top-0 right-0 -z-1 sm:block sm:absolute"
diff --git a/app/views/locations/show.html.slim b/app/views/locations/show.html.slim
index 519c85529..54a3e984a 100644
--- a/app/views/locations/show.html.slim
+++ b/app/views/locations/show.html.slim
@@ -10,38 +10,39 @@ div class=""
 
       div class="pt-5 pb-16 md:px-11 md:text-left"
         div
+          - url = @location.website || @location.organization.website
           - if @location.organization.verified?
             div class="flex justify-center items-center mb-2.5"
-              h5 class="flex mb-1 text-lg font-bold text-center"
-                = @location.name
+              h5 class="flex mb-1 text-lg font-bold text-center pop-out"
+                = link_to @location.name, url, target: url.present? ? "_blank" : "", class: "text-black"
               = render "shared/popover", wrapper_icon: "verified_nonprofit_check.svg", copy: "Information verified by nonprofit."
             p class="text-xs text-center font-base text-gray-4"
               = "This nonprofit has verified the listed information."
           - else
-            h5 class="mb-1 text-lg font-bold text-center"
-              = @location.name
+            h5 class="mb-1 text-lg font-bold text-center pop-out"
+               = link_to @location.name, url, target: url.present? ? "_blank" : "", class: "text-black"
             p class="text-xs text-center font-base text-gray-4"
               = "This nonprofit has not yet verified the listed information."
 
           - if current_user.present? && policy(@location.organization).update?
-            p class="text-xs text-center text-blue-500 font-base" id="pointer"
+            p class="text-xs text-center text-blue-500 font-base" class="pop-out"
               = link_to "Edit My Nonprofit Page", edit_organization_path( @location.organization)
           // Designations
           = render DesignationTag::Component.new(@location.organization, container_options: { class: "justify-center items-center" })
 
           div class="mt-4"
             - if @location.public_address?
-              p class="text-xs text-center font-base text-gray-4" id="pointer"
+              p class="text-xs text-center font-base text-gray-4" class="pop-out"
                 = link_to @location.formatted_address, @location.link_to_google_maps, target: "blank"
             p class="text-xs text-center font-base text-gray-4"
               = "EIN Number: #{@location.organization.ein_number}"
 
         div class="flex gap-2.5 justify-center items-center mt-4" data-controller="copy-to-clipboard"
-          button type="button" class="flex items-center text-sm gray-2" data-action="click->copy-to-clipboard#copyContent" data-copy-to-clipboard-content-param="#{request.url}"
+          button type="button" class="flex items-center text-sm pop-out gray-2" data-action="click->copy-to-clipboard#copyContent" data-copy-to-clipboard-content-param="#{request.url}"
             = inline_svg_tag 'share_icon.svg', class: " fill-current mr-2"
             | Share
 
-          span class="inline-flex gap-x-2 items-center"
+          span class="inline-flex gap-x-2 items-center pop-out"
             = render SaveButton::Component.new(user: current_user, location: @location, simplified: true)
             span class="text-sm" aria-hidden="true" Save
 
diff --git a/app/views/my_accounts/show.html.slim b/app/views/my_accounts/show.html.slim
index d6cd2f5d6..7e077cf69 100644
--- a/app/views/my_accounts/show.html.slim
+++ b/app/views/my_accounts/show.html.slim
@@ -54,9 +54,9 @@ div class="w-full h-full bg-white"
                     = link_to "Reset via email", new_reset_password_path, class:'text-blue-medium'
               div class="col-span-12 py-0 border-b border-gray-8"
               div class="flex flex-row col-span-12 justify-center"
-                = form.submit "Update", class: "mx-auto py-2.5 px-5 text-sm font-bold text-white bg-blue-medium uppercase rounded-6px"
+                = form.submit "Update", class: "hover:bg-seafoam-light transition mx-auto py-2.5 px-5 text-sm font-bold text-blue-dark bg-seafoam uppercase rounded-6px"
               div class="col-span-12 py-4 border-t border-gray-8"
-                = link_to "Log out", destroy_user_session_path, method: :delete, class:'text-xl font-bold text-blue-dark', data: { turbo: false , test_id: "user_logout_link"}
+                = link_to "Log out", destroy_user_session_path, method: :delete, class:'hover:text-blue-medium text-xl font-bold text-blue-dark', data: { turbo: false , test_id: "user_logout_link"}
         div class="hidden" data-tabs-target="panel"
           h4 class="px-6 my-7 text-xl text-grey-2"
             | My Saved Nonprofit Pages
diff --git a/app/views/nonprofit_requests/new.html.slim b/app/views/nonprofit_requests/new.html.slim
index a656b5afa..6a8988dd4 100644
--- a/app/views/nonprofit_requests/new.html.slim
+++ b/app/views/nonprofit_requests/new.html.slim
@@ -73,4 +73,4 @@
         = recaptcha_tags
 
       div class="mt-3"
-        = f.submit "Send message", class:"c-button"
+        = f.submit "Send message", class:"c-button hover:bg-seafoam-light transition"
diff --git a/app/views/organizations/edit.html.slim b/app/views/organizations/edit.html.slim
index 7ec99fcee..ccf94ab5f 100644
--- a/app/views/organizations/edit.html.slim
+++ b/app/views/organizations/edit.html.slim
@@ -370,7 +370,7 @@
                                     td class="text-center"
                                       = sched.check_box :closed, class: "rounded-md"
                                       = sched.label :closed, class: "sr-only"
-                        button type="button" class="block px-5 py-2.5 mx-auto w-1/3 text-white rounded-md bg-blue-medium" data-action="click->modal#close"
+                        button type="button" class="block px-5 py-2.5 mx-auto w-1/3 text-white rounded-md transition bg-blue-medium hover:bg-seafoam" data-action="click->modal#close"
                           | Save
 
                   div class="hidden col-span-3 md:flex"
@@ -459,6 +459,6 @@
                   = f.check_box :verified, class: "h-4 w-4 mt-1 mr-2 rounded-6px text-base text-blue-medium  focus:ring-0 focus:ring-transparent", checked: @organization.verified
                   = f.label :verified, "Check to verify", class: "text-sm"
 
-      = f.submit 'Save', class: 'mx-auto mt-12 flex cursor-pointer uppercase flex-row justify-center items-center bg-seafoam py-4 px-10 rounded-6px text-blue-dark text-base font-bold focus:outline-none', data: { action: "click->form-validation#addEmptyRequiredStyles click->halt-navigation-on-change#startSaving" }
+      = f.submit 'Save', class: 'hover:bg-seafoam-light transition mx-auto mt-12 flex cursor-pointer uppercase flex-row justify-center items-center bg-seafoam py-4 px-10 rounded-6px text-blue-dark text-base font-bold focus:outline-none', data: { action: "click->form-validation#addEmptyRequiredStyles click->halt-navigation-on-change#startSaving" }
   // unsaved changes modal
   = render "organizations/unsaved_changes_modal_template"  
diff --git a/app/views/pagy/_nav.html.slim b/app/views/pagy/_nav.html.slim
index 13b3ac4ed..b0d1b8b27 100644
--- a/app/views/pagy/_nav.html.slim
+++ b/app/views/pagy/_nav.html.slim
@@ -1,13 +1,10 @@
-
-- link = pagy_anchor(pagy)
-
 nav class="flex gap-4 justify-center my-5" role="navigation" aria-label="pager"
   - pagy.series.each do |item|        # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
     - if item.is_a?(Integer)          # page link
-      span class="px-3 py-1 text-sm font-extrabold leading-6 rounded-6px text-gray-3 bg-gray-7" ==> link.call(item)
+      a class="px-3 py-1 text-sm font-extrabold leading-6 cursor-pointer rounded-6px text-gray-3 bg-gray-7" href="#{pagy_url_for(pagy, item)}" ==> item
 
     - elsif item.is_a?(String)        # current page
-      span class="px-3 py-1 text-sm font-extrabold leading-6 text-white rounded-6px bg-blue-dark" ==> item
+      span class="px-3 py-1 text-sm font-extrabold leading-6 text-white cursor-pointer rounded-6px bg-blue-dark" ==> item
 
     - elsif item == :gap              # page gap
       span class="px-3 py-1 text-sm font-extrabold leading-6 rounded-6px text-gray-3 bg-gray-7" ==> pagy_t('pagy.nav.gap')
diff --git a/app/views/privacy_policies/show.html.slim b/app/views/privacy_policies/show.html.slim
index e73fb0f3e..2d7558171 100644
--- a/app/views/privacy_policies/show.html.slim
+++ b/app/views/privacy_policies/show.html.slim
@@ -1,19 +1,19 @@
-div class="max-w-5xl px-6 pb-12 mx-auto text-justify main text-gray-3 sm:pb-6"
-  div class="flex mx-auto flex-row max-w-7xl justify-evenly"
-    div class="relative flex flex-col justify-center text-center md:mx-0"
-      div class="max-w-lg mx-auto"
-        h2 class="pt-14 sm:pt-32 text-2xl font-bold text-center uppercase text-gray-gray-7"
+div class="px-6 pb-12 mx-auto max-w-5xl text-justify main text-gray-3 sm:pb-6"
+  div class="flex flex-row justify-evenly mx-auto max-w-7xl"
+    div class="flex relative flex-col justify-center text-center md:mx-0"
+      div class="mx-auto max-w-lg"
+        h2 class="pt-14 text-2xl font-bold text-center uppercase sm:pt-32 text-gray-gray-7"
           | Giving Connection Privacy Policy
-        p class="max-w-xl pt-10 pb-9 px-3 sm:px-0 mx-auto text-center text-gray-3 text-base"
+        p class="px-3 pt-10 pb-9 mx-auto max-w-xl text-base text-center sm:px-0 text-gray-3"
           ' Last Updated: February 15, 2022
-        =link_to "go to donor privacy policy", '#donor_policy', class:'c-button py-2.5 px-5 text-white bg-blue-medium mb-8 w-fit'
-      div class="hidden sm:block sm:absolute -top-20 -left-32 -z-1"
+        =link_to "go to donor privacy policy", '#donor_policy', class:'c-button hover:bg-blue-light transition py-2.5 px-5 text-white bg-blue-medium mb-8 w-fit'
+      div class="hidden -top-20 -left-32 sm:block sm:absolute -z-1"
         = inline_svg_tag 'privacy-desk-blur-left.svg'
-      div class="hidden overflow-hidden sm:block sm:absolute -top-28 -right-36 -z-1"
+      div class="hidden overflow-hidden -top-28 -right-36 sm:block sm:absolute -z-1"
         = inline_svg_tag 'privacy-desk-blur-right.svg'
-      div class="absolute -left-6 -z-1 sm:hidden -top-20"
+      div class="absolute -left-6 -top-20 -z-1 sm:hidden"
         = inline_svg_tag 'privacy-mob-blur-left.svg', size:'320*428'
-      div class="absolute -right-6 overflow-visible -top-28 -z-1 sm:hidden"
+      div class="overflow-visible absolute -right-6 -top-28 -z-1 sm:hidden"
         = inline_svg_tag 'privacy-mob-blur-right.svg'
   p class="pb-4"
     ' Giving Connection Inc ("Giving Connection," "we," "us," or "our") welcomes you to our website. We are a tax exempt,
@@ -280,25 +280,25 @@ div class="max-w-5xl px-6 pb-12 mx-auto text-justify main text-gray-3 sm:pb-6"
   p class="pb-4"
     ' Our intent is to promptly reply to every message we receive. This information is used to respond directly to your questions or comments. We also may file your comments to improve our services in the future.
 
-  div id="donor_policy" class="flex mx-auto flex-row max-w-7xl justify-evenly scroll-margin-navbar"
-    div class="relative flex flex-col justify-center text-center md:mx-0"
-      div class="max-w-lg mx-auto"
-        h2 class="pt-10 pb-6 mdpx:pt-24 525px:pb-9 text-2xl font-bold text-center uppercase text-gray-gray-7"
+  div id="donor_policy" class="flex flex-row justify-evenly mx-auto max-w-7xl scroll-margin-navbar"
+    div class="flex relative flex-col justify-center text-center md:mx-0"
+      div class="mx-auto max-w-lg"
+        h2 class="pt-10 pb-6 text-2xl font-bold text-center uppercase mdpx:pt-24 525px:pb-9 text-gray-gray-7"
           | Donor Privacy Policy
 
-      div class="absolute -left-6 -top-16 xs:-left-10 -z-1 425px:hidden "
+      div class="absolute -left-6 -top-16 xs:-left-10 -z-1 425px:hidden"
         = inline_svg_tag 'donor-mob-blur-left.svg', size:'300*325'
-      div class="absolute -right-7 -top-32 xs:-right-11 overflow-visible -z-1 425px:hidden"
+      div class="overflow-visible absolute -right-7 -top-32 xs:-right-11 -z-1 425px:hidden"
         = inline_svg_tag 'donor-mob-blur-right.svg'
 
-      div class="hidden 425px:block 425px:absolute -top-20 -left-10 -z-1"
+      div class="hidden -left-10 -top-20 425px:block 425px:absolute -z-1"
         = inline_svg_tag 'donor-desk-blur-left.svg', size:'250*250'
-      div class="hidden overflow-hidden 425px:block 425px:absolute -top-12 -right-10 -z-1"
+      div class="hidden overflow-hidden -right-10 -top-12 425px:block 425px:absolute -z-1"
         = inline_svg_tag 'donor-desk-blur-right.svg', size:'250*250'
 
-      div class="hidden md:block md:absolute -top-18 -left-52 -z-1"
+      div class="hidden -left-52 md:block md:absolute -top-18 -z-1"
         = inline_svg_tag 'donor-desk-blur-left.svg'
-      div class="hidden overflow-hidden md:block md:absolute -top-36 -right-38 -z-1"
+      div class="hidden overflow-hidden -top-36 md:block md:absolute -right-38 -z-1"
         = inline_svg_tag 'donor-desk-blur-right.svg'
 
   p class="pb-4"
diff --git a/app/views/searches/_preview.html.slim b/app/views/searches/_preview.html.slim
index 866e76361..ce77e0800 100644
--- a/app/views/searches/_preview.html.slim
+++ b/app/views/searches/_preview.html.slim
@@ -13,17 +13,17 @@
     div class="w-full bg-gray-9"
       div
         div data-tabs-active-tab=("border-b-4 border-blue-medium")
-          div class="flex bg-white border-b pb-14"
+          div class="flex pb-14 bg-white border-b"
             / Clear-Counter button
-            span class="flex items-center justify-center py-3 pl-5 pr-2 text-xs w-14 bg-blue-pale"
-              span class="inline-flex hidden items-center px-1 py-0.5 border border-blue-medium rounded-full bg-white" data-search-target="pillsCounterWrapper"
+            span class="flex justify-center items-center py-3 pr-2 pl-5 w-14 text-xs bg-blue-pale"
+              span class="inline-flex hidden items-center px-1 py-0.5 bg-white rounded-full border border-blue-medium" data-search-target="pillsCounterWrapper"
                 span class="mr-0.5" data-search-target="pillsCounter"
                 button type="button"
                   = inline_svg_tag "x-icon.svg", class: 'h-2 w-2 fill-current stroke-current stroke-1 text-blue-medium ml-1 relative'
               = inline_svg_tag "solid_filters.svg", class: 'h-4 w-4 fill-current text-gray-2 -ml-0.5 relative', data: { 'search-target': "filtersIcon" }
             / Tabs
             - tabs_labels = ['Causes', 'Location', 'Services', 'Populations Served', 'Hours']
-            ul class="flex flex-1 pl-5 pr-6 overflow-x-auto overflow-y-hidden text-sm list-none gap-x-6 bg-blue-pale text-gray-2"
+            ul class="flex overflow-x-auto overflow-y-hidden flex-1 gap-x-6 pr-6 pl-5 text-sm list-none bg-blue-pale text-gray-2"
               - tabs_labels.each do |tab_label|
                 li
                   span class="inline-block py-3 whitespace-nowrap"
@@ -31,28 +31,28 @@
               li
                 button class="inline-block py-3 whitespace-nowrap" type="button" id="advanced-filters-button" disabled="true"
                   | Advanced Filters
-                  span class="relative hidden w-2 h-2 mb-2 ml-1 rounded-full bg-salmon" id="appliedIcon"
+                  span class="hidden relative mb-2 ml-1 w-2 h-2 rounded-full bg-salmon" id="appliedIcon"
 
   = turbo_frame_tag "search-locations", src: search_path() do
-    div class="w-full md:flex md:h-85vh" data-controller="tabs" data-tabs-active-tab="border-blue-dark bg-blue-dark text-white" data-tabs-inactive-tab="border-gray-6 bg-transparent text-gray-3"
+    div class="w-full md:flex md:h-85vh" data-controller="tabs" data-tabs-active-tab="border-blue-dark bg-blue-dark text-white" data-tabs-inactive-tab="border-gray-6 bg-transparent text-gray-3 underline-on-hover"
       div class="w-full max-w-sm md:border-r border-gray-7"
-        div class="fixed inset-0 flex items-center justify-center hidden min-h-screen overflow-y-auto animated fadeIn" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" data-modal-target="container" style=("z-index: 9999;")
+        div class="flex hidden overflow-y-auto fixed inset-0 justify-center items-center min-h-screen animated fadeIn" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" data-modal-target="container" style=("z-index: 9999;")
           div class="relative w-full max-h-full max-w-375px"
-        div class="flex flex-row justify-between w-full p-4 bg-gray-9 md:hidden"
-          span class="relative z-0 inline-flex shadow-sm md:hidden rounded-6px"
+        div class="flex flex-row justify-between p-4 w-full bg-gray-9 md:hidden"
+          span class="inline-flex relative z-0 shadow-sm md:hidden rounded-6px"
             / active bg-blue-dark.focus:text-white
             / inactive bg-white text-gray-3
-            button class="relative inline-flex items-center px-5 py-1 text-sm border rounded-l-6px" type="button" data-tabs-target="tab" data-action="click->tabs#change" data-index="0"
+            button class="inline-flex relative items-center px-5 py-1 text-sm border rounded-l-6px" type="button" data-tabs-target="tab" data-action="click->tabs#change" data-index="0"
               | List
-            button class="relative inline-flex items-center px-5 py-1 -ml-px text-sm border rounded-r-6px" type="button" data-tabs-target="tab" data-action="click->tabs#change" data-index="1"
+            button class="inline-flex relative items-center px-5 py-1 -ml-px text-sm border rounded-r-6px" type="button" data-tabs-target="tab" data-action="click->tabs#change" data-index="1"
               | Map
         // Search result cards (mobile)
         div class="flex flex-col w-full bg-white md:h-85vh md:overflow-y-auto md:hidden" data-tabs-target="panel"
-          div class="flex items-center justify-center h-full"
+          div class="flex justify-center items-center h-full"
             div class="spinner"
         // Search result cards
         div class="hidden w-full bg-white md:h-85vh md:flex md:flex-col md:overflow-y-auto"
-          div class="flex items-center justify-center h-full"
+          div class="flex justify-center items-center h-full"
             div class="spinner"
 
       //Map mobile
@@ -63,7 +63,7 @@
             div class="hidden" data-places-target="latitude"
             div class="hidden" data-places-target="longitude"
       //Map desktop
-      div class="relative hidden w-full md:block"
+      div class="hidden relative w-full md:block"
         div data-controller="places result-card--component" data-action="google-maps-callback@window->places#initMap" data-places-zoom-value="10" data-places-imageurl-value="#{asset_path 'markergc.png'}" data-places-clickedimageurl-value="#{asset_path 'markerinvgc.png'}" data-places-popup-url-value="/map_popup/new?location_id="
           div class="absolute inset-0 w-full h-full xs:h-85vh" data-places-target="map"
           div class="hidden"
diff --git a/app/views/searches/show.html.slim b/app/views/searches/show.html.slim
index 73a96b67a..2e6477ffb 100644
--- a/app/views/searches/show.html.slim
+++ b/app/views/searches/show.html.slim
@@ -13,7 +13,7 @@
   = turbo_frame_tag "search-pills" do
     = render SearchPills::Component.new(causes: @top_10_causes, services: @top_10_services, beneficiary_subcategories: @top_10_beneficiary_subcategories, params: params, current_location: @current_location)
   = turbo_frame_tag "search-locations" do
-    div class="flex flex-row justify-center w-full md:h-85vh" data-controller="tabs" data-tabs-active-tab="border-blue-dark bg-blue-dark text-white" data-tabs-inactive-tab="border-gray-6 bg-transparent text-gray-3"
+    div class="flex flex-row justify-center w-full md:h-85vh" data-controller="tabs" data-tabs-active-tab="border-blue-dark bg-blue-dark text-white" data-tabs-inactive-tab="border-gray-6 bg-transparent text-gray-3 underline-on-hover"
       div class="flex flex-row justify-center w-full min-h-full"
         div class="flex flex-col w-full max-w-sm md:border-r border-gray-7"
           div class="flex hidden overflow-y-auto fixed inset-0 justify-center items-center min-h-screen animated fadeIn" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" data-modal-target="container" style=("z-index: 9999;")
@@ -38,14 +38,18 @@
                       new_alert_path( \
                         filters: parse_filters(@search), \
                         filters_list: list_of_filters(@search)), \
-                      class: "inline-flex items-center px-3 py-2 text-xs text-gray-3", \
+                      class: "inline-flex items-center px-3 py-1 text-xs text-gray-3 cursor-pointer border border-gray-5 hover:bg-gray-5 rounded-full", \
                       data: { turbo_stream: true } ) do
                         = inline_svg_tag "bell.svg", class: 'h-3 w-3 mr-2 fill-current text-gray-2 -ml-0.5'
                         | Create Search Alert
                 - else
-                  div class="inline-flex items-center px-3 py-2 text-xs text-gray-400"
-                    = inline_svg_tag "bell.svg", class: 'h-3 w-3 mr-2 fill-current text-gray-400 -ml-0.5'
-                    | Create Search Alert
+                  - tooltip_id = SecureRandom.hex(8)
+                  div class="relative text-xs text-center"
+                    div class="inline-flex items-center px-3 py-1 text-xs text-gray-400 rounded-full border cursor-pointer border-gray-5 labelled-icon" aria-labelledby=tooltip_id
+                      = inline_svg_tag "bell.svg", class: 'h-3 w-3 mr-2 fill-current text-gray-400 -ml-0.5'
+                      | Create Search Alert
+                    span role="tooltip" id=tooltip_id class="hidden absolute right-24 z-10 px-3 py-1 mt-8 w-48 text-white bg-opacity-90 rounded-lg transform translate-x-1/2 bg-gray-2"
+                      | Select search pills to narrow and create a search alert
               div class="overflow-y-auto w-full h-full md:flex md:flex-col" data-tabs-target="panel"
                 - if @results.present?
                   ul class="flex flex-col divide-y divide-gray-8" id="search-results"
diff --git a/app/views/users/confirmations/new.html.slim b/app/views/users/confirmations/new.html.slim
index ec55dfc93..fbbfa9865 100644
--- a/app/views/users/confirmations/new.html.slim
+++ b/app/views/users/confirmations/new.html.slim
@@ -1,11 +1,11 @@
-h1 class="px-5 mb-11 mt-14 title text-2xl font-bold text-center md:mb-14 md:mt-32"
+h1 class="px-5 mt-14 mb-11 text-2xl font-bold text-center title md:mb-14 md:mt-32"
   | Confirmation instructions
 
 = render "users/shared/links"
 
 // background SVGs
 div class="md:hidden" aria-hidden="true"
-  div class="absolute top-0 left-0 -z-1 w-72 sm:w-80 sm:h-80"
+  div class="absolute top-0 left-0 w-72 -z-1 sm:w-80 sm:h-80"
     = inline_svg_tag 'mob-purple-blur-login.svg'
   div class="absolute top-0 right-0 -z-1"
     = inline_svg_tag 'mob-green-blur-login.svg'
@@ -17,7 +17,7 @@ div class="hidden md:flex" aria-hidden="true"
     = inline_svg_tag 'desk-green-blur-login.svg'
 
 = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post, class: "mt-4 mb-12 md:mb-36" }) do |f|
-  div class="max-w-xs mx-auto"
+  div class="mx-auto max-w-xs"
     = render "users/shared/error_messages", resource: resource
 
     div class="flex flex-col mb-2.5"
@@ -27,4 +27,4 @@ div class="hidden md:flex" aria-hidden="true"
     - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
       = link_to "Forgot your password?", new_password_path(resource_name), class:'block w-fit mx-auto text-sm font-bold text-gray-3'
 
-    = f.submit "Resend", class: "c-button mt-10 mb-20"
+    = f.submit "Resend", class: "c-button mt-10 mb-20 hover:bg-seafoam-light transition"
diff --git a/app/views/users/passwords/edit.html.slim b/app/views/users/passwords/edit.html.slim
index 0d6ac5119..62bdc8e61 100644
--- a/app/views/users/passwords/edit.html.slim
+++ b/app/views/users/passwords/edit.html.slim
@@ -13,4 +13,4 @@
       = form_group_for f, :password_confirmation do
         = f.password_field :password_confirmation, autocomplete: "new-password", class: "c-input", placeholder: "Confirm your password"
       .c-form--action
-        = f.submit "Reset password", class:"c-button", data: { turbo: false }
+        = f.submit "Reset password", class:"c-button hover:bg-seafoam-light transition", data: { turbo: false }
diff --git a/app/views/users/passwords/new.html.slim b/app/views/users/passwords/new.html.slim
index 4f24db445..8e1108da6 100644
--- a/app/views/users/passwords/new.html.slim
+++ b/app/views/users/passwords/new.html.slim
@@ -10,4 +10,4 @@
       = form_group_for f, :email, label: "Email Address", class: "mb-6" do 
         = f.email_field :email, autofocus: true, autocomplete: "email", class:"c-input"
       .c-form--action class="mt-12 mb-44"
-        = f.submit "Send reset instructions", class:"c-button", data: { turbo: false}
+        = f.submit "Send reset instructions", class:"c-button hover:bg-seafoam-light transition", data: { turbo: false}
diff --git a/app/views/users/registrations/new.html.slim b/app/views/users/registrations/new.html.slim
index 2a864c2ec..c37b464a1 100644
--- a/app/views/users/registrations/new.html.slim
+++ b/app/views/users/registrations/new.html.slim
@@ -45,7 +45,7 @@
       = form_group_for f, :password_confirmation do
         = f.password_field :password_confirmation, autocomplete: "new-password", class: "c-input", placeholder: "Confirm your password", data: { test_id: "signup_password_confirmation_input"}
       .c-form--action
-        = f.submit "Create Account", class:"c-button", data: { test_id: "signup_submit_btn", turbo: false }
+        = f.submit "Create Account", class:"c-button hover:bg-seafoam-light transition", data: { test_id: "signup_submit_btn", turbo: false }
 
   div class="px-8 pb-28 mx-auto max-w-sm text-xs text-center sm:pb-36"
     ' By continuing, you agree to Giving Connection’s
diff --git a/app/views/users/sessions/new.html.slim b/app/views/users/sessions/new.html.slim
index 4f58e7310..c76693c8b 100644
--- a/app/views/users/sessions/new.html.slim
+++ b/app/views/users/sessions/new.html.slim
@@ -1,9 +1,9 @@
-.main class="mb-12 md:mb-36 mt-14 md:mt-32"
+.main class="mt-14 mb-12 md:mb-36 md:mt-32"
   h2 class="pb-6 text-2xl font-bold text-center md:pb-9"
     | Welcome back!
 
   div class="md:hidden"
-    div class="absolute top-0 left-0 -z-1 w-72 sm:w-80 sm:h-80"
+    div class="absolute top-0 left-0 w-72 -z-1 sm:w-80 sm:h-80"
       = inline_svg_tag 'mob-purple-blur-login.svg'
     div class="absolute top-0 right-0 -z-1"
       = inline_svg_tag 'mob-green-blur-login.svg'
@@ -25,9 +25,9 @@
         = f.label :password
         = f.password_field :password, autocomplete: "current-password", class:"c-input", data: { test_id: "user_login_password_input"}
       - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
-        = link_to "Forgot your password?", new_password_path(resource_name), class:'font-bold'
+        = link_to "Forgot your password?", new_password_path(resource_name), class:'hover:text-blue-medium transition font-bold'
       - if devise_mapping.confirmable?
-        = link_to "Didn't receive confirmation instructions?", new_user_confirmation_path, class: "font-bold"
+        = link_to "Didn't receive confirmation instructions?", new_user_confirmation_path, class: "hover:text-blue-medium transition font-bold"
       .c-form--action class="mt-12"
-        = f.submit "Sign in", class:"c-button", data: { test_id: "user_login_submit_btn"}
+        = f.submit "Sign in", class:"hover:bg-seafoam-light transition c-button", data: { test_id: "user_login_submit_btn"}
   
\ No newline at end of file
diff --git a/app/views/users/shared/_links.html.slim b/app/views/users/shared/_links.html.slim
index e422acbc6..c62659124 100644
--- a/app/views/users/shared/_links.html.slim
+++ b/app/views/users/shared/_links.html.slim
@@ -5,7 +5,7 @@
 - if devise_mapping.registerable? && controller_name != 'registrations'
   div class="flex justify-center mt-1.5 text-sm text-center"
     | New to Giving Connection?&nbsp
-    = link_to "Sign up", signup_path, class: 'font-bold'
+    = link_to "Sign up", signup_path, class: 'hover:text-blue-medium transition font-bold'
 - if devise_mapping.omniauthable?
   - resource_class.omniauth_providers.each do |provider|
     = link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), method: :post
diff --git a/spec/models/office_hour_spec.rb b/spec/models/office_hour_spec.rb
index 404f29f0d..6fc45f034 100644
--- a/spec/models/office_hour_spec.rb
+++ b/spec/models/office_hour_spec.rb
@@ -44,12 +44,16 @@
       it "converts the time from location's time zone to UTC before saving" do
         subject { oh }
 
+        # Set the open and close times with a specific time zone
+        oh.open_time = Time.zone.parse("12:00 PM").in_time_zone("Pacific Time (US & Canada)")
+        oh.close_time = Time.zone.parse("4:00 PM").in_time_zone("Pacific Time (US & Canada)")
+
         oh.save!
 
         expect(oh.open_time.zone).to eql("UTC")
         expect(oh.close_time.zone).to eql("UTC")
-        expect(oh.open_time.hour).to eql(19)
-        expect(oh.close_time.hour).to eql(23)
+        expect(oh.open_time.hour).to eql(20)
+        expect(oh.close_time.hour).to eql(0)
       end
     end
   end
diff --git a/spec/services/time_zone_converter_spec.rb b/spec/services/time_zone_converter_spec.rb
index c8c5d9ff0..64654c2be 100644
--- a/spec/services/time_zone_converter_spec.rb
+++ b/spec/services/time_zone_converter_spec.rb
@@ -10,11 +10,11 @@
       utc_time = converter.to_utc(time_str)
 
       expect(utc_time.zone).to eq("UTC")
-      expect(utc_time.hour).to eq(20)
+      expect(utc_time.hour).to eq(21)
 
       original_time = converter.to_local(utc_time.strftime("%H:%M:%S"))
 
-      expect(original_time.zone).to eq("PDT")
+      expect(original_time.zone).to eq("PST")
       expect(original_time.hour).to eq(13)
     end
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 1e55bb0d3..f9f41e0a0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
       colors: {
         seafoam: {
           DEFAULT: "#9ae2e0",
+          light: "#adf7f5",
         },
         salmon: {
           DEFAULT: "#fc8383",