diff --git a/app/components/search_bar/component.html.erb b/app/components/search_bar/component.html.erb
index c81dbd83c..d92944323 100644
--- a/app/components/search_bar/component.html.erb
+++ b/app/components/search_bar/component.html.erb
@@ -1,9 +1,8 @@
-<div id="search-bar" class="sticky inset-x-0 z-20 flex items-center justify-center px-6 py-4 
-bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:gap-5">
+<div id="search-bar" class="flex sticky inset-x-0 top-20 z-20 justify-center items-center px-6 py-4 bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 md:top-22.75 md:gap-5">
   <%# Keyword input %>
-  <div class="relative flex items-center w-full max-w-xl divide-x">
+  <div class="flex relative items-center w-full max-w-xl divide-x">
     <div class="flex items-center w-full">
-      <span class="absolute flex items-center ml-2 pointer-events-none">
+      <span class="flex absolute items-center ml-2 pointer-events-none">
         <%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
       </span>
       <%= @form.search_field(
@@ -18,23 +17,23 @@ bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:
         }
       ) %>
     </div>
-    <div class="flex m-0 font-medium bg-white cursor-pointer h-46px w-52 rounded-r-md"
+    <div class="flex m-0 w-52 font-medium bg-white rounded-r-md cursor-pointer h-46px"
       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 type="button" class="flex items-center pl-2 border-l-gray w-52" data-action="dropdown#toggle:stop">
+      <button type="button" class="flex items-center pl-2 border-l-gray" data-action="dropdown#toggle:stop">
         <%= inline_svg_tag "location-dot.svg", size:"9*9", class:"h-7 mr-2 fill-current" %>
         <p data-geolocation-target="currentLocation">
           <%= @current_location[:city] %>
         </p>
       </button>
-      <div data-dropdown-target="menu" class="absolute right-0 flex bg-white z-110 w-52 top-11">
-        <ul class="w-full overflow-hidden text-sm bg-white border rounded shadow-lg">
+      <div data-dropdown-target="menu" class="flex absolute right-0 top-11 w-52 bg-white sm:w-1/3 z-110">
+        <ul class="overflow-hidden w-full text-sm bg-white rounded border shadow-lg">
           <% @locations.each do |location| %>
             <li class="block px-4 py-2 text-gray-3 hover:bg-seafoam" data-action="click->geolocation#updateLocation">
               <%= location %>
             </li>
           <% end %>
-          <li class="flex items-center block px-4 py-1 font-medium text-gray-3 border-gray-5 hover:bg-seafoam focus:bg-seafoam" data-action="click->geolocation#getCurrentPosition">
+          <li class="block flex items-center px-4 py-1 font-medium text-gray-3 border-gray-5 hover:bg-seafoam focus:bg-seafoam" data-action="click->geolocation#getCurrentPosition">
             <%= inline_svg_tag "my-location.svg", size:"12*12", class:"h-7 mr-2 fill-current text-gray-3" %>
             Search near me
           </li>
diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
index c65036f54..7b91e23ed 100644
--- a/app/views/home/index.html.slim
+++ b/app/views/home/index.html.slim
@@ -1,16 +1,16 @@
 main
-  section class="relative hidden bg-electric-teal" data-controller="banner" data-banner-target="banner"
-    div class="flex max-w-3xl mx-auto py-7 md:py-8"
+  section class="hidden relative bg-electric-teal" data-controller="banner" data-banner-target="banner"
+    div class="flex py-7 mx-auto max-w-3xl md:py-8"
       div class="hidden md:block md:pl-4 lg:pl-0"
         = inline_svg_tag 'megaphone.svg', size: '65*70'
-      div class="pl-8 pr-10 md:px-0 md:ml-8 text-gray-1 "
-        div class="text-sm md:text-base mb-1.5 font-bold"
+      div class="pr-10 pl-8 md:px-0 md:ml-8 text-gray-1"
+        div class="mb-1.5 text-sm font-bold md:text-base"
           | We officially launched in Nashville!
         div class="text-xs leading-5 md:leading-6 md:text-sm md:pr-2"
           | We currently only have nonprofit listings in Nashville, TN.
           br
           | We will enable searching by City, State, and Zip Code once we expand to other cities.
-      div class="absolute inset-y-0 right-0 flex items-start pt-1 pr-1 sm:pt-1.5 sm:pr-5 sm:items-start"
+      div class="flex absolute inset-y-0 right-0 items-start pt-1 pr-1 sm:pt-1.5 sm:pr-5 sm:items-start"
         button class="flex p-2 rounded-md hover:bg-gray" type="button" data-action="banner#closeBanner"
           span.sr-only Dismiss
           = inline_svg_tag 'x-icon.svg', size: '14*14'
@@ -22,21 +22,21 @@ main
       | Search for listings of nonprofit organizations based on your needs.
     = form_with model: @search, url: search_path, method: :get do |f|
       .c-form class="py-0 mx-auto sm:px-3 sm:flex-col sm:justify-center sm:max-w-4xl"
-        div class="relative flex w-full p-0 divide-x rounded-md c-input sm:max-w-xl mb-7 sm:mb-0"
-          div class="relative flex w-full"
+        div class="flex relative p-0 mb-7 w-full rounded-md divide-x c-input sm:max-w-xl sm:mb-0"
+          div class="flex relative w-full"
             = f.text_field :keyword, autocomplete: "search", class:"border-none rounded-l-md pl-10 m-0 w-full", placeholder: "Try \"Mental Health Nonprofits\"", data: { test_id: "home_search_input"  }
             = inline_svg_tag 'search-icon.svg', class:"absolute top-1/3 left-4"
-          div class="flex m-0 font-medium bg-white cursor-pointer w-52 rounded-r-md" 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 type="button" class="flex items-center pl-2 w-52 border-l-gray" data-action="dropdown#toggle:stop"
+          div class="flex m-0 w-52 font-medium bg-white rounded-r-md cursor-pointer" 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 type="button" class="flex items-center pl-2 md:w-52 border-l-gray" data-action="dropdown#toggle:stop"
               = inline_svg_tag "location-dot.svg", size:"9*9", class:"h-7 mr-2 fill-current"
               p data-geolocation-target="currentLocation"
                 = @current_location[:city]
-            div data-dropdown-target="menu" class="absolute right-0 z-10 flex w-52 top-11"
-              ul class="w-full overflow-hidden text-sm bg-white border rounded shadow-lg"
+            div data-dropdown-target="menu" class="flex absolute right-0 top-11 z-10 w-52"
+              ul class="overflow-hidden w-full text-sm bg-white rounded border shadow-lg"
                 - @locations.each do |location|
                   li  class="block px-4 py-2 text-gray-3 hover:bg-seafoam" data-action="click->geolocation#updateLocation"
                     = location
-                li class="flex items-center block px-4 py-1 font-medium text-gray-3 border-gray-5 hover:bg-seafoam focus:bg-seafoam" data-action="click->geolocation#getCurrentPosition"
+                li class="block flex items-center px-4 py-1 font-medium text-gray-3 border-gray-5 hover:bg-seafoam focus:bg-seafoam" data-action="click->geolocation#getCurrentPosition"
                   = inline_svg_tag "my-location.svg", size:"12*12", class:"h-7 mr-2 fill-current text-gray-3"
                   | Search near me
         div
@@ -47,8 +47,8 @@ main
   section class="pt-6 text-gray-2 sm:pt-10"
     h2 class="pb-8 text-2xl font-bold text-center uppercase sm:pb-5"
       | How it works
-    div class="flex flex-col mx-auto max-w-7xl lg:flex-row justify-evenly xl:px-16"
-      div class="max-w-xs mx-auto text-center mb-9 lg:mb-0"
+    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="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"
@@ -62,15 +62,15 @@ main
           | 2. Connect with organizations
         p.px-8
           | Browse through nonprofit profiles to find the one that matches your needs.
-      div class="max-w-xs mx-auto text-center"
+      div class="mx-auto max-w-xs text-center"
         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"
           | 3. Receive help
         p class="px-5"
           | Found a nonprofit that meets your needs criteria? Reach out through the contact information provided on their individual profiles.
-  section class="flex flex-col items-center px-6 overflow-hidden"
-    div class="relative max-w-xl pt-32 mb-14"
+  section class="flex overflow-hidden flex-col items-center px-6"
+    div class="relative pt-32 mb-14 max-w-xl"
       h2 class="mb-6 text-2xl font-bold text-center uppercase text-gray-2 dark:text-white"
         | Browse by causes
       p class="text-center"
@@ -79,7 +79,7 @@ main
         | Scroll through listings to browse for nonprofits meeting your needs.
       = inline_svg_tag "browse-causes-green-blur.svg", class: "absolute -left-1/4 top-0 -z-1 w-full", aria_hidden: true
       = inline_svg_tag "browse-causes-purple-blur.svg", class: "absolute -right-1/4 top-0 -z-1 w-full", aria_hidden: true
-    nav class="w-full max-w-5xl mb-9"
+    nav class="mb-9 w-full max-w-5xl"
       = render CausesList::Component.new(causes: Cause.top(limit: 9), \
         icon_svg_options: {class: "w-1/2", aria_hidden: true}, \
         list_options: { class: "grid grid-cols-auto-fill-6.75 justify-items-center gap-y-6"}, \
@@ -87,32 +87,32 @@ main
         icon_wrapper_options: { class: "thick-icon w-20 h-20 transition-colors group-hover:bg-blue-medium", aria_hidden: true})
 
     = link_to "see more", discover_path << "/#causes-section", class: "px-10 py-4 rounded-md mb-32 text-white leading-5 uppercase tracking-wider font-bold bg-blue-dark transition-colors hover:bg-blue-medium"
-  section class="flex flex-col mx-auto md:flex-row max-w-7xl justify-evenly sm:mb-1 525px:pb-20 md:px-8"
-    div class="relative flex flex-col justify-center mb-16 text-center md:mx-0 md:mb-0"
-      div class="max-w-sm py-4 mx-auto"
+  section class="flex flex-col justify-evenly mx-auto max-w-7xl md:flex-row sm:mb-1 525px:pb-20 md:px-8"
+    div class="flex relative flex-col justify-center mb-16 text-center md:mx-0 md:mb-0"
+      div class="py-4 mx-auto max-w-sm"
         h2 class="px-10 pb-4 text-2xl font-bold text-center text-gray-2"
           | 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'
-      div class="hidden sm:block sm:absolute -top-20 -left-32 -z-1"
+      div class="hidden -top-20 -left-32 sm:block sm:absolute -z-1"
         = inline_svg_tag 'lw-desk-blur-left.svg'
-      div class="right-0 hidden overflow-hidden sm:block sm:absolute -top-40 xl:-right-28 -z-1"
+      div class="hidden overflow-hidden right-0 -top-40 sm:block sm:absolute xl:-right-28 -z-1"
         = inline_svg_tag 'lw-desk-blur-right.svg'
       div class="absolute -left-6 -z-1 sm:hidden"
         = inline_svg_tag 'lw-mob-blur-left.svg', size:'320*428'
-      div class="absolute right-0 overflow-visible -top-40 -z-1 sm:hidden"
+      div class="overflow-visible absolute right-0 -top-40 -z-1 sm:hidden"
         = inline_svg_tag 'lw-mob-blur-right.svg'
     div class="flex justify-center px-0"
       = image_tag 'board-members.png', class:"525px:rounded-xl object-cover h-350px sm:h-full"
   section class="relative bg-seafoam"
-    div class="relative max-w-md pb-20 mx-auto text-center"
-      h2 class="px-5 pt-20 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark pb-11"
+    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'
-    div class="top-0 left-0 hidden -z-1 sm:block sm:absolute"
+    div class="hidden top-0 left-0 -z-1 sm:block sm:absolute"
       = inline_svg_tag 'lc-desk-blur-left.svg'
-    div class="top-0 right-0 hidden -z-1 sm:block sm:absolute"
+    div class="hidden top-0 right-0 -z-1 sm:block sm:absolute"
       = inline_svg_tag 'lc-desk-blur-right.svg'
-    div class="absolute bottom-0 right-0 -z-1 sm:hidden"
+    div class="absolute right-0 bottom-0 -z-1 sm:hidden"
       = inline_svg_tag 'lc-mob-blur-right.svg'