diff --git a/css/details.css b/css/details.css
index 9fe5e74..ca15194 100644
--- a/css/details.css
+++ b/css/details.css
@@ -141,4 +141,55 @@ Divide the Details page into 3 main sections:
     font-size: 14px;
     font-weight: 400;
     color: rgb(113, 113, 113);
+}
+
+.details-body-units {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    gap: 30px;
+
+    width: 100%;
+}
+
+.details-body-units-title {
+    font-size: 24px;
+    font-family: Inter;
+    font-weight: bold;
+}
+
+.details-body-units-selection-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 30px;
+    width: 100%;
+}
+
+.details-body-units-selection-container:hover {
+    cursor: pointer;
+}
+
+.details-body-units-selection-item-selected {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    font-family: Inter;
+    font-size: 15px;
+    padding-bottom: 6px;
+    border-bottom: 3px solid #04B2D9;
+}
+
+.details-body-units-selection-item-unselected {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    font-family: Inter;
+    font-size: 15px;
+    
 }
\ No newline at end of file
diff --git a/src/pages/details.rs b/src/pages/details.rs
index 360f54a..7e6135a 100644
--- a/src/pages/details.rs
+++ b/src/pages/details.rs
@@ -1,4 +1,4 @@
-use jl_types::dto::listing::Listing;
+use jl_types::{dto::listing::Listing, domain::unit_type::UnitType};
 use log::{error, info};
 use uuid::Uuid;
 use yew::prelude::*;
@@ -10,6 +10,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
     //TODO: query backend
     let finished_loading = use_state(|| false);
     let listing_handle: UseStateHandle<Listing> = use_state(|| Listing::default());
+    let selected_unit_handle = use_state(|| 0);
     use_state(|| {
         let finished_loading = finished_loading.clone();
         let listing_handle = listing_handle.clone();
@@ -39,9 +40,8 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
         "(Listo)"
     } else {""});
     let project_floors = &listing.project.floors.to_string();
-    
-
 
+    let cloned_selected_unit_handle = selected_unit_handle.clone();
     //TODO: Floating whatsapp button on this page
     html!{
         <>
@@ -85,6 +85,10 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
 
                                     <div class={"details-body-divider"}></div>
 
+                                    //
+                                    //  Features Part
+                                    //
+
                                     <div class={"details-body-features"}>
                                         <div class={"details-body-feature-item"}>
                                             <div class={"details-body-feature-item-icon-container"}>
@@ -146,6 +150,52 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
                                     </div>
                                     
                                     <div class={"details-body-divider"}></div>
+
+                                    // 
+                                    // Units part
+                                    //
+
+                                    <div class={"details-body-units"}>
+                                        <div class={"details-body-units-title"}>{"Unidades"}</div>
+                                        <div class={"details-body-units-selection-container"}>
+                                            
+                                            {// Maps all the units to generate the unit selection menu
+                                                listing.units.iter().enumerate().map(|(index, unit)| {
+                                                    let cloned_selected_unit_handle = cloned_selected_unit_handle.clone();
+                                                    let select_unit_onclick_cb = {
+                                                        let cloned_selected_unit_handle = cloned_selected_unit_handle.clone();
+                                                        Callback::from(move |_| cloned_selected_unit_handle.set(index))
+                                                    };
+                                                    html! {
+                                                        <div class={
+                                                            if *cloned_selected_unit_handle == index 
+                                                            {"details-body-units-selection-item-selected"} 
+                                                            else 
+                                                            {"details-body-units-selection-item-unselected"}
+                                                            } onclick={select_unit_onclick_cb}>
+                                                            {
+                                                                match unit.unit_type {
+                                                                    UnitType::ForSale => html! {
+                                                                        <>
+                                                                            <i class="fa-solid fa-house-circle-check"></i>
+                                                                            <div>{format!("Unidad {}", index + 1)}</div>
+                                                                        </>
+                                                                    },
+                                                                    UnitType::NotForSale => html! {
+                                                                        <>
+                                                                            <i class="fa-solid fa-people-group"></i>
+                                                                            <div>{"Área común"}</div>
+                                                                        </>
+                                                                    }
+                                                                }
+                                                            }
+                                                            
+                                                        </div>
+                                                    }
+                                                }).collect::<Html>()
+                                            }
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         }