diff --git a/components/README.md b/components/README.md
index ba350eb..b8b2b0d 100644
--- a/components/README.md
+++ b/components/README.md
@@ -1,3 +1,4 @@
 # COMPONENTS
 
 The components directory contains your Vue.js Components.
+test
\ No newline at end of file
diff --git a/components/banner.vue b/components/banner.vue
index 87090bc..d1ffad7 100644
--- a/components/banner.vue
+++ b/components/banner.vue
@@ -19,11 +19,11 @@
         {{ custom }}
       </template>
       <template v-else>
-        Staffing Innovation Worldwide <br />
+        Staffing Innovation Worldwide <br>
         with Latin America Software Talent.
       </template>
     </c-text>
-    <a
+    <!-- <a
       href="https://calendly.com/fiore-0pe/introductory-meeting-with-stack-it"
       target="_blank"
     >
@@ -39,18 +39,18 @@
       >
         Let's talk
       </c-button>
-    </a>
+    </a> -->
+    <lets-talk-button />
   </c-flex>
 </template>
 <!--  -->
 <script>
-import { CFlex, CText, CButton } from "@chakra-ui/vue";
+import { CFlex, CText } from '@chakra-ui/vue'
 
 export default {
   components: {
     CFlex,
-    CText,
-    CButton
+    CText
   },
   props: {
     custom: {
@@ -62,7 +62,7 @@ export default {
       default: false
     }
   }
-};
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/components/custom-sofware/custom-banner.vue b/components/custom-sofware/custom-banner.vue
index d365dc0..0f5ecd0 100644
--- a/components/custom-sofware/custom-banner.vue
+++ b/components/custom-sofware/custom-banner.vue
@@ -19,39 +19,21 @@
         {{ custom }}
       </template>
       <template v-else>
-        Custom-built software. <br />
+        Custom-built software. <br>
         Empowering your Success.
       </template>
     </c-text>
-    <a
-      href="https://calendly.com/fiore-0pe/introductory-meeting-with-stack-it"
-      target="_blank"
-    >
-      <c-button
-        v-if="displayAction"
-        class="btn-main"
-        :mt="['12']"
-        right-icon="arrow-forward"
-        rounded="full"
-        size="lg"
-        font-size="xl"
-        font-weight="600"
-      >
-        <!-- @click="$emit('action')" -->
-        Let's Talk
-      </c-button>
-    </a>
+    <lets-talk-button class="btn-main" />
   </c-flex>
 </template>
 
 <script>
-import { CFlex, CText, CButton } from "@chakra-ui/vue";
+import { CFlex, CText } from '@chakra-ui/vue'
 
 export default {
   components: {
     CFlex,
-    CText,
-    CButton
+    CText
   },
   props: {
     custom: {
@@ -63,7 +45,7 @@ export default {
       default: false
     }
   }
-};
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/components/custom-sofware/custom-lets-talk.vue b/components/custom-sofware/custom-lets-talk.vue
index cf01143..f90ec71 100644
--- a/components/custom-sofware/custom-lets-talk.vue
+++ b/components/custom-sofware/custom-lets-talk.vue
@@ -21,7 +21,7 @@
     >
       The result? A solid custom software solution for your business.
     </c-text>
-    <a
+    <!-- <a
       href="https://calendly.com/fiore-0pe/introductory-meeting-with-stack-it"
       target="_blank"
     >
@@ -35,23 +35,22 @@
         font-weight="600"
         :border-bottom="['4px solid transparent']"
       >
-        <!-- @click="$emit('action')" -->
+
         Let's Talk
       </c-button>
-    </a>
+    </a> -->
+    <lets-talk-button class="btn-main" />
   </c-flex>
 </template>
 
 <script>
-import { CFlex, CHeading, CButton } from "@chakra-ui/vue";
+import { CFlex } from '@chakra-ui/vue'
 
 export default {
   components: {
-    CFlex,
-    CHeading,
-    CButton
+    CFlex
   }
-};
+}
 </script>
 
 <style>
diff --git a/components/lets-talk-button.vue b/components/lets-talk-button.vue
new file mode 100644
index 0000000..c2b0ba0
--- /dev/null
+++ b/components/lets-talk-button.vue
@@ -0,0 +1,62 @@
+<template>
+  <div ref="buttonContainer" />
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      script: [
+        {
+          src: 'https://calendar.google.com/calendar/scheduling-button-script.js',
+          async: true,
+        },
+      ],
+      link: [
+        {
+          rel: 'stylesheet',
+          href: 'https://calendar.google.com/calendar/scheduling-button-script.css',
+        },
+      ],
+    }
+  },
+  mounted() {
+    const target = this.$refs.buttonContainer
+
+    // Ensure the script has loaded before trying to use it
+    if (window.calendar && window.calendar.schedulingButton) {
+      this.loadSchedulingButton(target)
+    } else {
+      // Polling mechanism to wait for the script to load
+      const interval = setInterval(() => {
+        if (window.calendar && window.calendar.schedulingButton) {
+          clearInterval(interval)
+          this.loadSchedulingButton(target)
+        }
+      }, 100)
+    }
+  },
+  methods: {
+    loadSchedulingButton(target) {
+      // @TODO: Change this URL when changing the account
+      window.calendar.schedulingButton.load({
+        url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ1aae0zdRTd-lEcOTIb2Nzzm3ews0vtXPOwD6P6TuU8WkNQOwN_dS9liDCEYLsId3ql3pixtUCK?gv=true',
+        color: '#016fce',
+        label: "Let's Talk",
+        target,
+      })
+
+      this.$nextTick(() => {
+        const button = target.querySelector('.gcb-scheduling-button')
+        if (button) {
+          button.classList.add('btn-main')
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style>
+@import '../styles/global.scss';
+</style>
diff --git a/components/lets-talk.vue b/components/lets-talk.vue
index 1aa2ca6..97f3be3 100644
--- a/components/lets-talk.vue
+++ b/components/lets-talk.vue
@@ -22,7 +22,7 @@
       The result? Top-tier professionals with the skillset to build you nothing
       but the best software.
     </c-text>
-    <a
+    <!-- <a
       href="https://calendly.com/fiore-0pe/introductory-meeting-with-stack-it"
       target="_blank"
     >
@@ -38,23 +38,22 @@
         :mx="['auto', 'auto', 'auto', 0]"
         max-w="203px"
       >
-        <!-- @click="$emit('action')" -->
+
         Let's Talk
       </c-button>
-    </a>
+    </a> -->
+    <lets-talk-button class="btn-main" />
   </c-flex>
 </template>
 
 <script>
-import { CFlex, CHeading, CButton } from "@chakra-ui/vue";
+import { CFlex } from '@chakra-ui/vue'
 
 export default {
   components: {
     CFlex,
-    CHeading,
-    CButton
   }
-};
+}
 </script>
 
 <style>
diff --git a/components/navbar.vue b/components/navbar.vue
index 58bf6cf..ab40f85 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -30,7 +30,7 @@
         <router-link to="/custom-software">
           Custom Software
         </router-link>
-        <a
+        <!-- <a
           href="https://calendly.com/fiore-0pe/introductory-meeting-with-stack-it"
           target="_blank"
         >
@@ -44,23 +44,23 @@
             font-weight="600"
             :border-bottom="['4px solid transparent']"
           >
-            <!-- @click="$emit('action')" -->
+
             Let's Talk
           </c-button>
-        </a>
+        </a> -->
+        <lets-talk-button class="btn-main" />
       </c-flex>
     </c-flex>
   </c-box>
 </template>
 
 <script>
-import { CBox, CFlex, CHeading, CImage } from "@chakra-ui/vue";
+import { CBox, CFlex, CImage } from '@chakra-ui/vue'
 
 export default {
   components: {
     CBox,
     CFlex,
-    CHeading,
     CImage
   },
   props: {
@@ -72,20 +72,20 @@ export default {
   data() {
     return {
       active: false
-    };
+    }
   },
   mounted() {
     window.document.onscroll = () => {
-      const navBar = document.getElementById("nav");
-      this.active = window.scrollY > navBar.offsetTop;
-    };
+      const navBar = document.getElementById('nav')
+      this.active = window.scrollY > navBar.offsetTop
+    }
   },
   methods: {
     toggleNavClass() {
-      return "nav";
+      return 'nav'
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/index.vue b/pages/index.vue
index 340f1bc..fc60a0f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -37,7 +37,6 @@ import Banner from '~/components/banner'
 import Services from '~/components/services'
 import ContactDialog from '~/components/contact-dialog'
 import WeAreDifferent from '~/components/we-are-different'
-import CaseStudy from '~/components/case-study'
 import Clients from '~/components/clients'
 import Process from '~/components/process'
 
@@ -46,7 +45,6 @@ export default {
   components: {
     Process,
     Clients,
-    CaseStudy,
     WeAreDifferent,
     ContactDialog,
     LetsTalk,
diff --git a/styles/global.scss b/styles/global.scss
index f829078..427648b 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,4 +1,5 @@
-@import "./variables";
+@import "./variables.scss";
+
 @font-face {
   font-family: "sui_generis";
   src: url("/fonts/sui_generis.ttf") format("truetype");
@@ -46,9 +47,6 @@ html {
     background-color: #257ecc !important;
   }
 }
-.lets-talk {
-  background-color: var(--sti-color-lets-talk);
-}
 
 .confirm-image {
   margin-top: 2rem;
@@ -83,3 +81,13 @@ html {
 ::-webkit-scrollbar-thumb:hover {
   background: var(--sti-color-button-hover);
 }
+
+.qxCTlb{
+  border-radius: 50px !important;
+  font-weight: 400 !important;
+  font-family:'Open Sans', sans-serif !important;
+  transition: ease-in-out 0.3s;
+}
+.qxCTlb:hover{
+  background-color:black !important;
+}