diff --git a/src/components/mod.rs b/src/components/mod.rs
index 2ed3946..4c2ed38 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -14,3 +14,4 @@ pub mod nav_bar;
 pub mod new_widget;
 pub mod project_card;
 pub mod textfield;
+pub mod single_media_picker;
\ No newline at end of file
diff --git a/src/components/single_media_picker.rs b/src/components/single_media_picker.rs
new file mode 100644
index 0000000..4ccda47
--- /dev/null
+++ b/src/components/single_media_picker.rs
@@ -0,0 +1,108 @@
+use js_sys::Uint8Array;
+use wasm_bindgen_futures::JsFuture;
+use yew::prelude::*;
+
+use crate::{
+    api,
+    components::textfield::{get_files_from_input_event},
+};
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct SingleMediaPickerProps {
+    pub value: UseStateHandle<String>,
+    pub onchange: Option<Callback<String>>,
+    #[prop_or_default]
+    pub required: bool,
+    pub item: jl_types::dto::item::Item,
+}
+
+#[function_component(SingleMediaPicker)]
+pub fn single_media_picker(props: &SingleMediaPickerProps) -> Html {
+    let picked_handle = use_state(|| false);
+
+    let onphoto_upload = {
+        let value_handle = props.value.clone();
+        let onchange_cb = props.onchange.clone();
+        let item = props.item.clone();
+        let picked_handle = picked_handle.clone();
+        Callback::from(move |e: InputEvent| {
+            match onchange_cb.clone() {
+                Some(cb) => cb.emit(String::new()),
+                None => {}
+            };
+            let files_opt = get_files_from_input_event(e);
+            match files_opt {
+                Some(filelist) => {
+                    match filelist.get(0) {
+                        Some(file) => {
+                            let value_handle = value_handle.clone();
+                            let picked_handle = picked_handle.clone();
+                            let item = item.clone();
+                            wasm_bindgen_futures::spawn_local(async move {
+                                let array_buf = JsFuture::from(file.array_buffer()).await;
+                                let array = Uint8Array::new(&array_buf.unwrap());
+                                let bytes: Vec<u8> = array.to_vec();
+                                // Upload to backend and retrieve url
+                                match api::backend::upload_image(item, bytes).await {
+                                    Ok(url) => {
+                                        value_handle.set(url);
+                                        picked_handle.set(true);
+                                    }
+                                    Err(error) => {
+                                        log::error!("Error uploading image to backend: {error}")
+                                    }
+                                };
+                            });
+                        }
+                        None => {
+                            log::error!("No files in first element of filelist...")
+                        }
+                    };
+                }
+                None => {
+                    log::error!("Something weird happened. No files after selecting files")
+                }
+            }
+        })
+    };
+
+    html! {
+        <>
+            <div class={{"textfield-label-required"}} style={"width: 100%; text-align: left;"}>{"Media del proyecto"}</div>
+            <div class={"mediapicker-container"}>
+                {
+                    if *picked_handle {
+                        html! {
+                            <div class={"mediapicker-media"}>
+                                <img class={"mediapicker-media"} src={(*props.value).clone()} />
+                                <div class={"mediapicker-delete"} onclick={
+                                    let onchange_cb = props.onchange.clone();
+                                    let picked_handle = picked_handle.clone();
+                                    Callback::from(move |_| {
+                                        match onchange_cb.clone() {
+                                            Some(cb) => cb.emit(String::new()),
+                                            None => {}
+                                        };
+                                        picked_handle.set(false);
+                                    })
+                                }>
+                                    <i class="fa-solid fa-trash-can"></i>
+                                </div>
+                            </div>
+                        }
+                    } else {
+                        html! {
+                            <div class={"mediapicker-new"}>
+                                <div class={"mediapicker-new-photo-section"}>
+                                    <input type={"file"} accept={"image/*"} oninput={onphoto_upload}/>
+                                </div>
+                            </div>
+                        }
+                    }
+                }
+                
+            </div>
+        </>
+    }
+}
+
diff --git a/src/pages/admin/fields/agent.rs b/src/pages/admin/fields/agent.rs
index 1cb8dd0..acf34b9 100644
--- a/src/pages/admin/fields/agent.rs
+++ b/src/pages/admin/fields/agent.rs
@@ -1,9 +1,8 @@
-use jl_types::domain::agent::Agent;
-use uuid::Uuid;
+use jl_types::domain::{agent::Agent, credential::CredentialType};
 use yew::prelude::*;
 use yew_router::prelude::use_navigator;
 
-use crate::pages::admin::edit::EditType;
+use crate::{pages::admin::edit::{EditType}, components::{textfield::TextField, media_picker::MediaPicker, dropdown::DropDown, single_media_picker::SingleMediaPicker}, };
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct AgentFieldsProps {
@@ -15,8 +14,27 @@ pub struct AgentFieldsProps {
 pub fn agent_fields(props: &AgentFieldsProps) -> Html {
     let navigator = use_navigator().unwrap();
     let user_typed = use_state(|| false);
+    let agent_opt = props.agent.clone();
 
+    let ontype_cb = {
+        let user_typed = user_typed.clone();
+        Callback::from(move |_| {
+            user_typed.set(true);
+        })
+    };
+
+    // Fields
+    let agent_name_handle = use_state(|| String::new());
+    let agent_shortcode_handle = use_state(|| String::new());
+    let profile_picture_url_handle = use_state(|| String::new());
+    let credential = use_state(|| String::new());
+    let credential_type = use_state(|| CredentialType::PhoneNumber);
     html! {
-
+        <>
+            <TextField label={"Nombre Completo"} value={agent_name_handle} required={true} onchange={ontype_cb.clone()}/>
+            //<TextField label={"Distrito"} value={location_district} required={true} onchange={ontype_cb.clone()} />
+            <SingleMediaPicker value={profile_picture_url_handle} onchange={ontype_cb.clone()} item={jl_types::dto::item::Item::Agent}/>
+            //<DropDown<CredentialType>/>
+        </>
     }
 }
\ No newline at end of file