diff --git a/src/stories/components-group/ContentQuote.stories.js b/src/stories/components-group/ContentQuote.stories.js
index 2043f078..9fc37aa3 100644
--- a/src/stories/components-group/ContentQuote.stories.js
+++ b/src/stories/components-group/ContentQuote.stories.js
@@ -6,22 +6,56 @@ export default {
   tags: ['autodocs'],
 }
 
-const data = Array(4).fill({
-  text: `”A Azion acelera a entrega de conteúdo para a maior empresa de entretenimento do Brasil.”` ,
-  imageLight: "https://www.azion.com/assets/pages/products/images/light/edge-application/omelete-co-logo-black.png",
-  imageDark: "https://www.azion.com/assets/pages/products/images/dark/edge-application/omelete-co-logo-white.png",
-  label: "",
-})
-
-export const Default = {
-  args: {
-    data
+const data = [
+  {
+    quote: {
+      text: `A Azion protege o Agibank, banco omnichannel brasileiro com 1M+ de clientes, de ataques que ameaçam suas aplicações.` ,
+      imageLight: "https://www.azion.com/assets/pages/products/images/light/edge-application/omelete-co-logo-black.png",
+      imageDark: "https://www.azion.com/assets/pages/products/images/dark/edge-application/omelete-co-logo-white.png",
+      author: "Luis Igreja",
+      button: {
+        link: "/en/",
+        label: "See success case"
+      }
+    },
+  button: {
+    image: "https://www.azion.com/assets/pages/products/images/dark/edge-application/omelete-co-logo-white.png"
   }
-}
+},
+{
+  quote: {
+    text: `A Azion protege o Agibank, banco omnichannel brasileiro com 1M+ de clientes, de ataques que ameaçam suas aplicações.` ,
+    imageLight: "https://www.azion.com/assets/pages/products/images/dark/edge-functions/renner-logo.svg?ims=x40",
+    imageDark: "https://www.azion.com/assets/pages/products/images/dark/edge-functions/renner-logo.svg?ims=x40",
+      author: "Luis Igreja",
+    button: {
+      link: "/en/",
+      label: "See success case"
+    }
+  },
+  button: {
+    image: "https://www.azion.com/assets/pages/products/images/dark/edge-functions/renner-logo.svg?ims=x40"
+  }
+},
+{
+  quote: {
+    text: `A Azion protege o Agibank, banco omnichannel brasileiro com 1M+ de clientes, de ataques que ameaçam suas aplicações.` ,
+    imageLight: "https://www.azion.com/assets/pages/products/images/light/edge-application/omelete-co-logo-black.png",
+    imageDark: "https://www.azion.com/assets/pages/products/images/dark/edge-application/omelete-co-logo-white.png",
+    author: "Luis Igreja",
+    button: {
+      link: "/en/",
+      label: "See success case"
+    }
+  },
+  button: {
+    image: "https://www.azion.com/assets/pages/products/images/dark/edge-application/omelete-co-logo-white.png"
+  }
+},
+]
 
-export const isCarousel = {
+export const Default = {
   args: {
-    isCarousel: true,
     data
   }
 }
diff --git a/src/stories/components/Quote.stories.js b/src/stories/components/Quote.stories.js
index 2ea3b1dd..4704cfa7 100644
--- a/src/stories/components/Quote.stories.js
+++ b/src/stories/components/Quote.stories.js
@@ -5,11 +5,6 @@ export default {
   component: Quote,
   tags: ['autodocs'],
   argTypes: {
-    direction: {
-      description: "Component orientation",
-      options: ['row', 'column'],
-      control: { type: 'select'}
-    },
     alt: {
       description: "Image alt text"
     }
@@ -17,28 +12,18 @@ export default {
 }
 
 const data = {
-  text: `”A Azion acelera a entrega de conteúdo para a maior empresa de entretenimento do Brasil.”` ,
-  imageLight: "https://www.azion.com/assets/pages/products/images/light/edge-application/omelete-co-logo-black.png",
-  imageDark: "https://www.azion.com/assets/pages/products/images/dark/edge-application/omelete-co-logo-white.png",
-}
+    text: `A Azion protege o Agibank, banco omnichannel brasileiro com 1M+ de clientes, de ataques que ameaçam suas aplicações.` ,
+    imageLight: "https://www.azion.com/assets/pages/products/images/light/edge-application/omelete-co-logo-black.png",
+    imageDark: "https://www.azion.com/assets/pages/products/images/dark/edge-application/omelete-co-logo-white.png",
+    author: "Luis Igreja",
+    button: {
+      link: "/en/",
+      label: "See success case"
+    }
+  }
 
 export const Default = {
   args: {
     ...data
   }
 }
-
-export const withLabel = {
-  args: {
-    ...data,
-    label: "Lorem Ipsum"
-  }
-}
-
-export const column = {
-  args: {
-    ...data,
-    label: "Lorem Ipsum",
-    direction: "column"
-  }
-}
diff --git a/src/templates/contentquote/ContentQuote.vue b/src/templates/contentquote/ContentQuote.vue
index f1246075..d4eb6d79 100644
--- a/src/templates/contentquote/ContentQuote.vue
+++ b/src/templates/contentquote/ContentQuote.vue
@@ -1,50 +1,56 @@
 <template>
-  <div v-if="isCarousel">
+  <div class="flex flex-col gap-10">
     <Carousel
-      :value="data"
+      :value="carouselData"
+      :showNavigators="false"
       :numVisible="1"
-      :numScroll="1"
-      :circular="true"
-      :autoplayInterval="3000"
+      :page="pageProp"
       :pt="{
-        item: { class: 'flex justify-center '}
+        item: { class: 'flex justify-center '},
+        root: { class: 'border surface-border rounded surface-50'}
       }">
 
       <template #item="slotProps">
-        <Quote
-          :text="slotProps.data.text"
-          :imageLight="slotProps.data.imageLight"
-          :imageDark="slotProps.data.imageDark"
-          :label="slotProps.data.label" />
+        <Quote v-bind="slotProps.data.quote" :border="false" />
       </template>
     </Carousel>
-  </div>
-  <div v-else>
-    <div class="px-container flex flex-col gap-12 items-center">
-      <template v-for="({text, imageLight, imageDark, label}, i) in data" :key="i">
-        <Quote
-          :text="text"
-          :imageLight="imageLight"
-          :imageDark="imageDark"
-          :label="label" />
-      </template>
+    <div class="hidden md:flex items-center justify-center gap-x-32">
+      <div :key="index" v-for="(item, index) in carouselData" class="flex justify-center max-h-10">
+        <button @click="handleCarouselEvent(index)">
+          <img class="max-h-10 invert-btn" :class="{'opacity-25': pageProp !== index}" width="auto" height="40" :src="item.button.image" />
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import Quote from '../quote/Quote.vue';
 import Carousel from 'primevue/carousel'
 
-defineProps({
-  isCarousel: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
+const props = defineProps({
   data: {
     type: Array,
     required: true
   }
 })
+
+const carouselData = props.data.slice(0, 3)
+const pageProp = ref(0)
+const handleCarouselEvent = (value) => pageProp.value = value
+
+setInterval(() => {
+  const newIndex = pageProp.value > 1 ? 0 : pageProp.value + 1
+
+  handleCarouselEvent(newIndex)
+}, 5000);
 </script>
+
+<style>
+.azion-light .invert-btn {
+  filter: invert(100%);
+}
+
+
+</style>
diff --git a/src/templates/quote/Quote.vue b/src/templates/quote/Quote.vue
index 4552ca4a..832c0f12 100644
--- a/src/templates/quote/Quote.vue
+++ b/src/templates/quote/Quote.vue
@@ -1,12 +1,18 @@
 
 <template>
-  <div class="flex flex-col text-center lg:text-start lg:gap-x-16 gap-y-6 items-center justify-center"
-      :class="[{'lg:flex-row' : direction === 'row'}, {'lg:flex-col' : direction === 'column'}]"
-  >
-    <p class="max-w-md text-xl font-medium leading-normal" :class="[{'text-center': direction === 'column' }]">
-      {{ text }}
-    </p>
-    <div class="flex flex-col gap-3 lg:items-start min-w-[180px] mt-4 lg:mt-0" :class="[{'lg:items-center' : direction === 'column'}]">
+  <div class="surface-50 rounded px-10 md:px-20 pt-2 md:pt-10 pb-5 flex flex-col md:flex-row w-full items-center" :class="[{ 'border surface-border' : border }]">
+    <div class="max-w-md w-full flex flex-col gap-4 py-8">
+      <p class="text-xl leading-normal">
+        {{ text }}
+      </p>
+      <p class="text-sm text-color-secondary text-medium">
+        {{ author }}
+      </p>
+      <div class="mt-3">
+        <LinkButton v-bind="button" outlined />
+      </div>
+    </div>
+    <div class="flex items-center justify-center w-full">
       <ImageSwitcher>
         <template #lightImage>
           <img
@@ -21,40 +27,39 @@
             width="160" height="40" :alt="alt" />
         </template>
       </ImageSwitcher>
-      <template v-if="label">
-        <p class="text-xs text-color-secondary leading-normal" :class="[{'text-center' : direction === 'column'}]">
-          {{ label }}
-        </p>
-      </template>
     </div>
   </div>
 </template>
 
 <script setup>
 import ImageSwitcher from "../themeawareimageswitcher/ImageSwitcher.vue";
+import LinkButton from "../linkbutton"
 
 defineProps({
   text: {
     type: String,
     required: true,
   },
-  imageLight: {
+  border: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+  author: {
     type: String,
     required: true,
   },
-  imageDark: {
+  imageLight: {
     type: String,
     required: true,
   },
-  label: {
+  imageDark: {
     type: String,
-    required: false,
+    required: true,
   },
-  direction: {
-    type: String,
+  button: {
+    type: Object,
     required: false,
-    default: 'row',
-    options: ["row", 'column']
   },
   alt: {
     type: String,