diff --git a/Readme.md b/Readme.md
index c767205..644aad9 100644
--- a/Readme.md
+++ b/Readme.md
@@ -23,4 +23,5 @@
 - [x] Make the navbar logo bigger
 - [x] Finish agents screen
 - [ ] Finish Contact us screen
-- [ ] Link agent info with details screen, remove hardcoded pic and details
\ No newline at end of file
+- [ ] Link agent info with details screen, remove hardcoded pic and details
+- [ ] Whatsapp button should direct to agent's phone number wa.me link
\ No newline at end of file
diff --git a/css/components/floating_widget.css b/css/components/floating_widget.css
index 0fc6a3e..c77cc58 100644
--- a/css/components/floating_widget.css
+++ b/css/components/floating_widget.css
@@ -10,6 +10,7 @@
     background-color: #25D366;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     font-size: 45px;
+    text-decoration: none;
 }
 
 .floating-widget-container:hover {
diff --git a/src/components/floating_widget.rs b/src/components/floating_widget.rs
index 42de77d..8332eaf 100644
--- a/src/components/floating_widget.rs
+++ b/src/components/floating_widget.rs
@@ -1,18 +1,23 @@
+use uuid::Uuid;
 use yew::prelude::*;
 
 //TODO: Finish, add whatsapp link or email link?
 #[function_component(FloatingWidget)]
-pub fn floating_widget(_props: &FloatingWidgetProps) -> Html {
+pub fn floating_widget(props: &FloatingWidgetProps) -> Html {
+    let message = format!("Buenas, me interesa conocer mas sobre esta propiedad: %0A https://proyectosenconstruccion.com/details/{}", props.project_id);
+    let number = format!("1{}", props.phone_number);
+    let wa_me_url = format!("https://wa.me/{number}/?text={message}");
     html! {
-        <div class={"floating-widget-container"}>
+        <a class={"floating-widget-container"} href={wa_me_url}>
             <div class={"floating-widget-logo"}>
                 <i class="fa-brands fa-whatsapp"></i>
             </div>
-        </div>
+        </a>
     }
 }
 
 #[derive(Properties, PartialEq)]
 pub struct FloatingWidgetProps {
-    
+    pub project_id: Uuid,
+    pub phone_number: String,
 }
\ No newline at end of file
diff --git a/src/pages/details.rs b/src/pages/details.rs
index 2cafd3e..60b8a88 100644
--- a/src/pages/details.rs
+++ b/src/pages/details.rs
@@ -54,7 +54,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
     html!{
         <>
             <NavigationBar/>
-            <FloatingWidget/>
+            <FloatingWidget phone_number={listing.agent.credential.clone()} project_id={listing.project.id}/>
             <div class={"page-container"}>
                 {
                     if *finished_loading {
@@ -67,11 +67,13 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
                                     // Agent
                                     <div class={"details-head-agent-container"}>
                                             // Profile pic
-                                        <img class={"details-head-agent-profile-picture"} src={"https://a0.muscache.com/im/pictures/user/b3bc8258-30a6-4e62-b971-3abaeb37159b.jpg"} alt={"agent_pfp"}/>
+                                        <img class={"details-head-agent-profile-picture"} src={listing.agent.profile_picture_url} alt={"agent_pfp"}/>
                                         
                                         <div class={"details-head-agent-text-container"}>
-                                            <div class={"details-head-agent-heading"}>{"Vendido por Luis Jose"}</div>
-                                            <div class={"details-head-agent-subheading"}>{"(809)-123-4567"}</div>
+                                            <div class={"details-head-agent-heading"}>{listing.agent.full_name}</div>
+                                            <div class={"details-head-agent-subheading"}>{
+                                                format_phone_number(&listing.agent.credential)
+                                            }</div>
                                         </div>
                                     </div>
                                     
@@ -221,6 +223,15 @@ pub struct DetailsPageProps {
     pub project_id: Uuid
 }
 
+pub fn format_phone_number<'a>(phone_number: &'a String) -> String {
+    if phone_number.len() <= 11 && phone_number.len() >= 10 {
+        let (first_part, after_first) = phone_number.split_at(3);
+        let (second_part, last_part) = after_first.split_at(3);
+        format!("({})-{}-{}", first_part, second_part, last_part)
+    } else {
+        phone_number.clone()
+    }
+}
 
 pub fn create_unit_selection_menu(units: &Vec<&Unit>, selected_unit_handle: UseStateHandle<usize>) -> Html {