diff --git a/Cargo.lock b/Cargo.lock
index 9e974ce..9c3f9b7 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -103,6 +103,7 @@ dependencies = [
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "wasm-logger",
+ "web-sys",
  "yew",
  "yew-router",
  "yew-utils",
diff --git a/Cargo.toml b/Cargo.toml
index 03df489..aac364f 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -16,6 +16,7 @@ yew-utils = { path = "../../libs/yew-utils" }
 wasm-logger = "0.2"
 wasm-bindgen = "0.2.84"
 wasm-bindgen-futures = "0.4.34"
+web-sys = "0.3.61"
 stdweb = "0.4.20"
 js-sys = "0.3"
 
diff --git a/css/call_to_action.css b/css/call_to_action.css
index e69de29..ce94f10 100644
--- a/css/call_to_action.css
+++ b/css/call_to_action.css
@@ -0,0 +1,71 @@
+.contact-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    margin-left: calc(-1 * clamp(35px, 10%, 10vw));
+    margin-right: calc(-1 * clamp(35px, 10%, 10vw));
+
+    background-color: #4C40F7;
+
+    padding-top: 40px;
+    padding-bottom: 20px;
+}
+.contact-title {
+    font-family: Poppins;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: center;
+
+    color: white
+}
+
+.contact-subtitle {
+    margin-top: 20px;
+
+    font-family: Poppins;
+    font-size: 28px;
+    font-weight: 600;
+    text-align: center;
+    letter-spacing: 1px;
+
+    color: white
+}
+
+.contact-textfield-container {
+    margin-top: 30px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+
+    width: 500px;
+}
+.contact-form-button {
+    margin-top: 25px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #00113B;
+
+    color: white;
+    font-size: 14px;
+    
+    width: 150px;
+    height: 50px;
+    border-radius: 4px;
+}
+.contact-form-button {
+    cursor: pointer;
+    user-select: none;
+}
+@media only screen and (min-width: 1000px) {
+    .contact-container {
+        margin-left: calc(-1 * clamp(35px, 25%, 10vw));
+        margin-right: calc(-1 * clamp(35px, 25%, 10vw))
+    }
+}
\ No newline at end of file
diff --git a/css/components/textfield.css b/css/components/textfield.css
new file mode 100644
index 0000000..5d68cd0
--- /dev/null
+++ b/css/components/textfield.css
@@ -0,0 +1,54 @@
+.textfield-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    gap: 4px;
+
+    width: 100%;
+}
+.textfield {
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    height: 50px;
+    background-color: white;
+    border: solid 0.5px #d8d8d8;
+    
+    width: 100%;
+    text-indent: 10px;
+
+    font-family: Poppins;
+    font-weight: 200;
+    font-size: 14px;
+    line-height: 32px;
+
+    color: #ABAFC7;
+}
+.textarea {
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    height: 150px;
+    background-color: white;
+    border: solid 0.5px #d8d8d8;
+    
+    width: 100%;
+    padding: 10px;
+
+    font-family: Poppins;
+    font-weight: 200;
+    font-size: 13px;
+    line-height: 20px;
+
+    color: #ABAFC7;
+}
+
+::placeholder {
+    color: #ABAFC7;
+    font-family: Poppins;
+    font-size: 13px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index c3826ec..5ca3e3d 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,8 @@
         <link data-trunk type="text/css" href="css/language-picker.css" rel="css" />
         <link data-trunk type="text/css" href="css/about.css" rel="css" />
 
+        <link data-trunk type="text/css" href="css/components/textfield.css" rel="css" />
+
         <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
         <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
 
diff --git a/locales/en.yml b/locales/en.yml
index 7cacd07..dea9cde 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -56,4 +56,10 @@ footer:
 
     +62 (0) 000 0000 00
   copyright-text: © 2023 Blanco Lorenzo - All rights reserved
-
+contact:
+  title: Contact Us
+  subtitle: Leave us a message
+  contact.form-name-label: Name
+  contact.form-email-label: Email
+  contact.form-message-label: Start typing...
+  contact.form-button-label: Send
\ No newline at end of file
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 7f09b44..a850732 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -2,3 +2,4 @@ pub mod footer;
 pub mod language_picker;
 pub mod nav_bar;
 pub mod service_card;
+pub mod textfield;
\ No newline at end of file
diff --git a/src/components/textfield.rs b/src/components/textfield.rs
new file mode 100644
index 0000000..ad30d6d
--- /dev/null
+++ b/src/components/textfield.rs
@@ -0,0 +1,86 @@
+// COMPONENTFORLIB
+use wasm_bindgen::{JsCast, UnwrapThrowExt};
+use web_sys::{HtmlInputElement, HtmlTextAreaElement};
+use yew::prelude::*;
+
+/// This component is a text
+#[function_component(TextField)]
+pub fn textfield(props: &TextFieldProps) -> Html {
+    let on_input_changed = {
+        let handle = props.value.clone();
+        let fieldtype = props.fieldtype.clone();
+        let onchange = props.onchange.clone();
+        Callback::from(move |e: InputEvent| match fieldtype {
+            TextFieldType::Input => {
+                let value = get_value_from_input_event(e);
+                match onchange.clone() {
+                    Some(onchange) => {
+                        onchange.emit(value.clone());
+                    }
+                    None => {}
+                };
+                handle.set(value);
+            }
+            TextFieldType::TextArea => {
+                let value = get_value_from_textarea_event(e);
+                match onchange.clone() {
+                    Some(onchange) => {
+                        onchange.emit(value.clone());
+                    }
+                    None => {}
+                };
+                handle.set(value);
+            }
+        })
+    };
+    html! {
+        <div class={"textfield-container"}>
+            {
+                if props.fieldtype == TextFieldType::Input {
+                    html! { <input class={"textfield"} oninput={on_input_changed} value={(*props.value).clone()} placeholder={props.label.clone()}/> }
+                } else {
+                    html! { <textarea class={"textarea"} oninput={on_input_changed} value={(*props.value).clone()} placeholder={props.label.clone()}/> }
+                }
+            }
+
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct TextFieldProps {
+    pub label: String,
+    pub value: UseStateHandle<String>,
+    #[prop_or_default]
+    pub fieldtype: TextFieldType,
+    #[prop_or_default]
+    pub required: bool,
+    pub onchange: Option<Callback<String>>,
+}
+
+#[derive(PartialEq, Clone, Default)]
+pub enum TextFieldType {
+    TextArea,
+    #[default]
+    Input,
+}
+
+pub fn get_value_from_input_event(e: InputEvent) -> String {
+    let event: Event = e.dyn_into().unwrap_throw();
+    let event_target = event.target().unwrap_throw();
+    let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
+    target.value()
+}
+
+pub fn get_value_from_textarea_event(e: InputEvent) -> String {
+    let event: Event = e.dyn_into().unwrap_throw();
+    let event_target = event.target().unwrap_throw();
+    let target: HtmlTextAreaElement = event_target.dyn_into().unwrap_throw();
+    target.value()
+}
+pub fn get_files_from_input_event(e: InputEvent) -> Option<web_sys::FileList> {
+    let event: Event = e.dyn_into().unwrap_throw();
+    let event_target = event.target().unwrap_throw();
+    let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
+    target.files()
+}
diff --git a/src/pages/call_to_action.rs b/src/pages/call_to_action.rs
index 3876bec..3b4008f 100644
--- a/src/pages/call_to_action.rs
+++ b/src/pages/call_to_action.rs
@@ -1,6 +1,35 @@
+use rust_i18n::t;
 use yew::prelude::*;
 
-#[function_component(CallToActionPage)]
-pub fn call_to_action_page() -> Html {
-    html! {}
+use crate::components::{language_picker::Language, textfield::{TextField, TextFieldType}};
+
+#[derive(Properties, PartialEq)]
+pub struct CallToActionPageProps {
+    pub language: Language
+}
+
+#[function_component(CallToActionPage)]
+pub fn call_to_action_page(props: &CallToActionPageProps) -> Html {
+    let language = props.language.clone();
+    let name_handle = use_state(|| String::new());
+    let email_handle = use_state(|| String::new());
+    let message_handle = use_state(|| String::new());
+    html! {
+        <div class={"contact-container"}>
+            <div class={"contact-title"}>
+                {t!("contact.title", locale = language.locale())}
+            </div>
+            <div class={"contact-subtitle"}>
+                {t!("contact.subtitle", locale = language.locale())}
+            </div>
+            <div class={"contact-textfield-container"}>
+                <TextField label={t!("contact.form-name-label", locale = language.locale())} value={name_handle} />
+                <TextField label={t!("contact.form-email-label", locale = language.locale())} value={email_handle} />
+                <TextField label={t!("contact.form-message-label", locale = language.locale())} value={message_handle} fieldtype={TextFieldType::TextArea} />
+            </div>
+            <div class={"contact-form-button"}>
+                {t!("contact.form-button-label", locale = language.locale())}
+            </div>
+        </div>
+    }
 }
diff --git a/src/pages/main_page.rs b/src/pages/main_page.rs
index da76a0c..a7d82ee 100644
--- a/src/pages/main_page.rs
+++ b/src/pages/main_page.rs
@@ -36,7 +36,7 @@ pub fn main_page() -> Html {
                 <StartPage language={(*language).clone()}/>
                 <ServicesPage language={(*language).clone()}/>
                 <AboutPage language={(*language).clone()}/>
-                <CallToActionPage/>
+                <CallToActionPage language={(*language).clone()}/>
             </div>
             <PageFooter language={(*language).clone()}/>
         </>