diff --git a/css/components/page/search.css b/css/components/page/search.css
index ce3db9d..1544542 100644
--- a/css/components/page/search.css
+++ b/css/components/page/search.css
@@ -26,7 +26,7 @@
     align-items: end;
 
     width: 100%;
-    margin-left: 20px;
+    margin-left: 15px;
     margin-bottom: -5px;
 
     gap: 2.5px;
@@ -38,13 +38,13 @@
     line-height: 14px;
     text-align: center;
 }
-.search-bar-arrangement-type-picker {
+.search-bar-arrangement-type-picker-selected {
     display: flex;
     justify-content: center;
     align-items: center;
 
-    width: 45px;
-    height: 30px;
+    width: 55px;
+    height: 35px;
 
     color: black;
     background-color: white;
@@ -52,13 +52,13 @@
     border: 0.4px solid #26306B;
     border-radius: 5px;
 }
-.search-bar-arrangement-type-picker-selected {
+.search-bar-arrangement-type-picker {
     display: flex;
     justify-content: center;
     align-items: center;
 
-    width: 45px;
-    height: 30px;
+    width: 55px;
+    height: 35px;
 
     color: white;
     background-color: #26306B;
@@ -66,6 +66,7 @@
     border: 0.4px solid #26306B;
     border-radius: 5px;
 }
+.search-bar-arrangement-type-picker:hover { cursor: pointer; }
 .search-bar-area-container {
     display: flex;
     flex-direction: row;
diff --git a/src/components/page/search.rs b/src/components/page/search.rs
index f3c6fe5..e594641 100644
--- a/src/components/page/search.rs
+++ b/src/components/page/search.rs
@@ -1,16 +1,38 @@
+use realtor_lp_types::domain::arrangement::ArrangementType;
 use yew::prelude::*;
 
 #[function_component(SearchSection)]
 pub fn search_section() -> Html {
+    let arrangement_type_handle = use_state_eq(|| ArrangementType::Sale);
+    let onclick_arrangement_type_rent = {
+        let arrangement_type_handle = arrangement_type_handle.clone();
+        Callback::from(move |_: MouseEvent| {
+            arrangement_type_handle.set(ArrangementType::Rent);
+        })
+    };
+    let onclick_arrangement_type_sale = {
+        let arrangement_type_handle = arrangement_type_handle.clone();
+        Callback::from(move |_: MouseEvent| {
+            arrangement_type_handle.set(ArrangementType::Sale);
+        })
+    };
     html! {
         <div class={"search-container"} style={"background-image: url('images/search-background.png');"}>
             <div class={"search-bar-container"}>
                 <div class={"search-bar-arrangement-type-picker-container"}>
-                    <div class={"search-bar-arrangement-type-picker-selected"}>
-                        {"Buy"}
+                    <div onclick={onclick_arrangement_type_sale} class={if (*arrangement_type_handle).clone() == ArrangementType::Sale {
+                        "search-bar-arrangement-type-picker-selected"
+                    } else {
+                        "search-bar-arrangement-type-picker"
+                    }}>
+                        {"Comprar"}
                     </div>
-                    <div class={"search-bar-arrangement-type-picker"}>
-                        {"Rent"}
+                    <div onclick={onclick_arrangement_type_rent} class={if (*arrangement_type_handle).clone() == ArrangementType::Rent {
+                        "search-bar-arrangement-type-picker-selected"
+                    } else {
+                        "search-bar-arrangement-type-picker"
+                    }}>
+                        {"Alquilar"}
                     </div>
                 </div>
                 <div class={"search-bar-area-container"}>