diff --git a/next/components/atoms/Toggle.js b/next/components/atoms/Toggle.js
new file mode 100644
index 00000000..4807ebff
--- /dev/null
+++ b/next/components/atoms/Toggle.js
@@ -0,0 +1,12 @@
+import { Switch } from "@chakra-ui/react";
+import styles from "../../styles/toggle.module.css";
+
+export default function Toggle({ value, onChange }) {
+  return (
+    <Switch
+      className={styles.toggle}
+      value={value}
+      onChange={onChange}
+    />
+  )
+}
\ No newline at end of file
diff --git a/next/components/molecules/uiUserPage.js b/next/components/molecules/uiUserPage.js
index 3d094c04..782f758f 100644
--- a/next/components/molecules/uiUserPage.js
+++ b/next/components/molecules/uiUserPage.js
@@ -76,11 +76,18 @@ export function ModalGeneral ({
   isOpen,
   onClose,
   isCentered = true,
+  propsModal,
   propsModalContent,
   classNameBody
 }) {
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered={isCentered} margin="24px !important">
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      isCentered={isCentered}
+      margin="24px !important"
+      {...propsModal}
+    >
       <ModalOverlay/>
       <ModalContent
         margin="24px"
diff --git a/next/pages/api/stripe/removeSubscription.js b/next/pages/api/stripe/removeSubscription.js
index c1c50740..9721691d 100644
--- a/next/pages/api/stripe/removeSubscription.js
+++ b/next/pages/api/stripe/removeSubscription.js
@@ -36,8 +36,8 @@ export default async function handler(req, res) {
   const result = await removeSubscription(atob(req.query.p), token)
 
   if(result.errors) return res.status(500).json({error: result.errors})
-  if(result?.data?.deleteStripeSubscription.errors.length > 0) return res.status(500).json({error: result.data.deleteStripeSubscription.errors, success: false })
+  if(result?.data?.deleteStripeSubscription?.errors.length > 0) return res.status(500).json({error: result.data.deleteStripeSubscription.errors, success: false })
   if(result === "err") return res.status(500).json({error: "err"})
 
-  res.status(200).json(result?.data?.deleteStripeSubscription.subscription)
+  if(result?.data?.deleteStripeSubscription === null) return res.status(200).json({success: true})
 }
diff --git a/next/pages/precos.js b/next/pages/precos.js
index fdbef727..9169c436 100644
--- a/next/pages/precos.js
+++ b/next/pages/precos.js
@@ -5,7 +5,6 @@ import {
   Link,
   Tooltip,
   Badge,
-  Button,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import Head from "next/head";
@@ -13,11 +12,11 @@ import Display from "../components/atoms/Display";
 import BigTitle from "../components/atoms/BigTitle"
 import BodyText from "../components/atoms/BodyText";
 import RoundedButton from "../components/atoms/RoundedButton";
+import Toggle from "../components/atoms/Toggle";
 import { MainPageTemplate } from "../components/templates/main";
 import { isMobileMod } from "../hooks/useCheckMobile.hook";
 
 import CheckIcon from "../public/img/icons/checkIcon";
-import CrossIcon from "../public/img/icons/crossIcon";
 import InfoIcon from '../public/img/icons/infoIcon';
 
 export async function getServerSideProps(context) {
@@ -49,27 +48,12 @@ export const CardPrice = ({
   title,
   badge,
   subTitle,
-  personConfig,
+  price,
+  anualPlan = false,
   textResource,
   resources = [],
   button,
 }) => {
-  const [nubmerOfPerson, setNubmerOfPerson] = useState(personConfig.person)
-  const [priceValue, setPriceValue] = useState(personConfig.price)
-
-  const addRemovePersonPrice = (action) => {
-    if(action === "add") {
-      const personAdd = nubmerOfPerson + 1
-      setNubmerOfPerson(personAdd)
-      setPriceValue(150 + 50 * personAdd)
-    }
-    if(action === "remove") {
-      const personRemove = nubmerOfPerson - 1
-      setNubmerOfPerson(personRemove)
-      setPriceValue(150 + 50 * personRemove)
-    }
-  }
-
   return (
     <Box
       display="flex"
@@ -113,96 +97,46 @@ export const CardPrice = ({
         <Box
           justifyContent="center"
           display="flex"
-          flexDirection="row"
-          height="50px"
+          flexDirection="column"
           alignItems="center"
           marginBottom="40px"
         >
-          <Text
-            color="#252A32"
-            fontSize="50px"
-            fontWeight="500"
-            lineHeight="54px"
-            letterSpacing="-0.8px"
-            fontFamily="Ubuntu"
-          >R$ {priceValue}</Text>
-          <Text
-            position="relative"
-            top="16px"
-            right="-4px"
-            color="#252A32"
-            fontSize="18px"
-            fontWeight="700"
-            lineHeight="22px"
-            letterSpacing="0.3px"
-            fontFamily="Ubuntu"
-          >/mês</Text>
-        </Box>
-        
-        <Box
-          display={isMobileMod() && !personConfig.text ? "none" :"flex"}
-          flexDirection="row"
-          justifyContent="space-between"
-        >
-          {personConfig.text &&
-          <>
+          <Box
+            display="flex"
+            flexDirection="row"
+            height="50px"
+            alignItems="center"
+          >
             <Text
               color="#252A32"
-              fontFamily="ubuntu"
-              fontSize="14px"
-              fontStyle="normal"
-              fontWeight="400"
-              lineHeight="20px"
+              fontSize="50px"
+              fontWeight="500"
+              lineHeight="54px"
+              letterSpacing="-0.8px"
+              fontFamily="Ubuntu"
+            >R$ {price}</Text>
+            <Text
+              position="relative"
+              top="16px"
+              right="-4px"
+              color="#252A32"
+              fontSize="18px"
+              fontWeight="700"
+              lineHeight="22px"
               letterSpacing="0.3px"
-              textAlign="initial"
-            >
-              {personConfig.text}
-            </Text>
+              fontFamily="Ubuntu"
+            >/mês</Text>
+          </Box>
 
-            <Box
-              display="flex"
-              flexDirection="row"
-              border="1px solid #DEDFE0"
-              overflow="hidden"
-              borderRadius="12px"
-              height="40px"
-            >
-              <Button
-                width="40px"
-                height="100%"
-                backgroundColor="#FFF"
-                borderRadius="0"
-                borderRight="1px solid #DEDFE0"
-                _hover={{backgroundColor: "#FFF", opacity: "0.6", color: "#42B0FF"}}
-                fontFamily="Ubuntu"
-                onClick={() => addRemovePersonPrice("remove")}
-                isDisabled={nubmerOfPerson === 2}
-                >–</Button>
-              <Text
-                width="50px"
-                height="100%"
-                color="#252A32"
-                fontFamily="Lato"
-                fontSize="16px"
-                fontStyle="normal"
-                fontWeight="400"
-                lineHeight="24px"
-                letterSpacing="0.5px"
-                padding="7px 20px 9px"
-              >{nubmerOfPerson - personConfig.person}</Text>
-              <Button
-                width="40px"
-                height="100%"
-                backgroundColor="#FFF"
-                borderRadius="0"
-                borderLeft="1px solid #DEDFE0"
-                _hover={{backgroundColor: "#FFF", opacity: "0.6", fill:"#42B0FF"}}
-                fontFamily="Ubuntu"
-                onClick={() => addRemovePersonPrice("add")}
-                isDisabled={nubmerOfPerson === 5}
-                ><CrossIcon height="14px" width="14px" transform="rotate(45deg)"/></Button>
-            </Box>
-          </>
+          {anualPlan && 
+            <Text
+              fontFamily="Ubuntu"
+              fontWeight="400"
+              fontSize="14px"
+              lineHeight="27px"
+              color="#71757A"
+              marginTop="24px"
+            >{(price*12).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 0 })} cobrado uma vez no ano</Text>
           }
         </Box>
       </Box>
@@ -342,6 +276,20 @@ export const CardPrice = ({
 }
 
 export default function Price({ username ,isBDPro, isBDEmp }) {
+  const [toggleAnual, setToggleAnual] = useState(false)
+  const [priceBDPro, setPriceBDPro] = useState("47")
+  const [priceBDEmp, setPriceBDEmp] = useState("350")
+
+  useEffect(() => {
+    if(toggleAnual === true) {
+      setPriceBDPro("37")
+      setPriceBDEmp("280")
+    } else {
+      setPriceBDPro("47")
+      setPriceBDEmp("350")
+    }
+  }, [toggleAnual])
+
   return (
     <MainPageTemplate paddingX="24px">
       <Head>
@@ -359,7 +307,7 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
       </Head>
 
       <Stack
-        gridGap={{base:"40px", lg: "64px"}}
+        gridGap="40px"
         paddingTop="90px"
         width="100%"
         maxWidth="1264px"
@@ -377,6 +325,34 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
           Compare os planos
         </Display>
 
+        <Box
+          display="none"
+          width="100%"
+          flexDirection="row"
+          justifyContent="center"
+          alignitems="center"
+          gap="8px"
+        >
+          <Toggle
+            value={toggleAnual}
+            onChange={() => setToggleAnual(!toggleAnual)}
+          />
+          <Text
+            gap="8px"
+            fontFamily="Ubuntu"
+            fontWeight="400"
+            fontSize="18px"
+            lineHeight="24px"
+            display="flex"
+            alignItems="center"
+            textAlign="center"
+            letterSpacing="0.1px"
+            color="#252A32"
+          >
+            Desconto anual <Text color="#2B8C4D">Economize 20%</Text>
+          </Text>
+        </Box>
+
         <Stack
           display={isMobileMod() ? "flex" : "grid"}
           gridTemplateColumns="repeat(3, 320px)"
@@ -390,9 +366,7 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
           <CardPrice
             title="BD Grátis"
             subTitle={<BodyText>Para você descobrir o potencial da plataforma de dados</BodyText>}
-            personConfig={{
-              price: "0"
-            }}
+            price={"0"}
             textResource="Recursos:"
             resources={[
               {name: "Tabelas tratadas"},
@@ -413,9 +387,8 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
           <CardPrice
             title="BD Pro"
             subTitle={<BodyText>Para você ter acesso aos<br/> dados mais atualizados</BodyText>}
-            personConfig={{
-              price: "47"
-            }}
+            price={priceBDPro}
+            anualPlan={toggleAnual}
             textResource="Todos os recursos da BD Grátis, mais:"
             resources={[
               {name: "Dezenas de bases de alta frequência atualizadas"},
@@ -430,9 +403,8 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
           <CardPrice
             title="BD Empresas"
             subTitle={<BodyText>Para sua empresa ganhar tempo<br/> e qualidade em decisões</BodyText>}
-            personConfig={{
-              price: "350"
-            }}
+            price={priceBDEmp}
+            anualPlan={toggleAnual}
             textResource="Todos os recursos da BD Pro, mais:"
             resources={[
               {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"}
diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js
index 1edb18b7..63e51b4b 100644
--- a/next/pages/user/[username].js
+++ b/next/pages/user/[username].js
@@ -40,6 +40,7 @@ import ButtonSimple from "../../components/atoms/SimpleButton";
 import InputForm from "../../components/atoms/SimpleInput";
 import Link from "../../components/atoms/Link";
 import BodyText from "../../components/atoms/BodyText";
+import Toggle from "../../components/atoms/Toggle";
 import { CardPrice } from "../precos";
 import PaymentSystem from "../../components/organisms/PaymentSystem";
 import ImageCrop from "../../components/molecules/ImgCrop";
@@ -1441,6 +1442,9 @@ const PlansAndPayment = ({ userData }) => {
   const [isLoading, setIsLoading] = useState(false)
   const [isLoadingH, setIsLoadingH] = useState(false)
   const [isLoadingCanSub, setIsLoadingCanSub] = useState(false)
+  const [toggleAnual, setToggleAnual] = useState(false)
+  const [priceBDPro, setPriceBDPro] = useState("47")
+  const [priceBDEmp, setPriceBDEmp] = useState("350")
 
   useEffect(() => {
     if(query.q === "pro") {
@@ -1455,6 +1459,16 @@ const PlansAndPayment = ({ userData }) => {
     }
   }, [query])
 
+  useEffect(() => {
+    if(toggleAnual === true) {
+      setPriceBDPro("37")
+      setPriceBDEmp("280")
+    } else {
+      setPriceBDPro("47")
+      setPriceBDEmp("350")
+    }
+  }, [toggleAnual])
+
   const resources={
     "BD Gratis" : {
       title: "BD Grátis",
@@ -1567,6 +1581,7 @@ const PlansAndPayment = ({ userData }) => {
 
     const subs = await fetch(`/api/stripe/getSubscriptionActive?p=${btoa(id)}`, {method: "GET"})
       .then(res => res.json())
+
     const result = await fetch(`/api/stripe/removeSubscription?p=${btoa(subs[0]?.node._id)}`, {method: "GET"})
       .then(res => res.json())
 
@@ -1835,11 +1850,18 @@ const PlansAndPayment = ({ userData }) => {
       <ModalGeneral
         isOpen={PlansModal.isOpen}
         onClose={PlansModal.onClose}
-        propsModalContent={{maxWidth: "fit-content"}}
+        propsModal={{
+          scrollBehavior: isMobileMod() ? "outside" : "inside",
+        }}
+        propsModalContent={{
+          maxWidth: "fit-content",
+          margin: isMobileMod() ? "0" : "24px",
+          borderRadius: isMobileMod() ? "0" : "20px",
+        }}
         isCentered={isMobileMod() ? false : true}
       >
         <Stack spacing={0} marginBottom="16px">
-          <SectionTitle lineHeight="40px" height="40px">
+          <SectionTitle lineHeight="40px" height="40px" textAlign={isMobileMod() ? "start" :"center"}>
             Compare os planos
           </SectionTitle>
           <ModalCloseButton
@@ -1848,23 +1870,52 @@ const PlansAndPayment = ({ userData }) => {
             right="26px"
             _hover={{backgroundColor: "transparent", color:"#42B0FF"}}
           />
+
+          <Box
+            display="none"
+            width="100%"
+            flexDirection="row"
+            justifyContent="center"
+            alignitems="center"
+            gap="8px"
+            margin="20px 0 24px !important"
+          >
+            <Toggle
+              value={toggleAnual}
+              onChange={() => setToggleAnual(!toggleAnual)}
+            />
+            <Text
+              gap="8px"
+              fontFamily="Ubuntu"
+              fontWeight="400"
+              fontSize={isMobileMod() ? "16px" : "18px"}
+              lineHeight="24px"
+              display="flex"
+              alignItems="center"
+              textAlign="center"
+              letterSpacing="0.1px"
+              color="#252A32"
+            >
+              Desconto anual <Text color="#2B8C4D">Economize 20%</Text>
+            </Text>
+          </Box>
         </Stack>
 
         <Stack
-          display={isMobileMod() ? "flex" : "grid"}
+          display={isMobileMod() ? "flex" : {base: "flex", lg: "grid"}}
           gridTemplateColumns="repeat(3, 320px)"
           gridTemplateRows="1fr"
+          alignItems={isMobileMod() ? "center" : {base: "center", lg: "inherit"}}
           justifyContent="center"
           justifyItems="center"
           gap="20px"
+          padding="10px"
           spacing={0}
         >
           <CardPrice
             title="BD Grátis"
             subTitle={<BodyText>Para você descobrir o potencial da plataforma de dados</BodyText>}
-            personConfig={{
-              price: "0"
-            }}
+            price={"0"}
             textResource="Recursos:"
             resources={[
               {name: "Tabelas tratadas"},
@@ -1886,9 +1937,8 @@ const PlansAndPayment = ({ userData }) => {
           <CardPrice
             title="BD Pro"
             subTitle={<BodyText>Para você ter acesso aos<br/> dados mais atualizados</BodyText>}
-            personConfig={{
-              price: "47"
-            }}
+            price={priceBDPro}
+            anualPlan={toggleAnual}
             textResource="Todos os recursos da BD Grátis, mais:"
             resources={[
               {name: "Dezenas de bases de alta frequência atualizadas"},
@@ -1907,9 +1957,8 @@ const PlansAndPayment = ({ userData }) => {
           <CardPrice
             title="BD Empresas"
             subTitle={<BodyText>Para sua empresa ganhar tempo<br/> e qualidade em decisões</BodyText>}
-            personConfig={{
-              price: "350"
-            }}
+            price={priceBDEmp}
+            anualPlan={toggleAnual}
             textResource="Todos os recursos da BD Pro, mais:"
             resources={[
               {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"}
@@ -2034,9 +2083,9 @@ const PlansAndPayment = ({ userData }) => {
 
       <Stack spacing="40px">
         <Stack
+          width="100%"
           spacing={0}
           flexDirection={isMobileMod() ? "column" : "row"}
-          width="100%"
           justifyContent="space-between"
         >
           <Stack spacing="8px" marginBottom={isMobileMod() ? "16px" : "0"}>
@@ -2082,7 +2131,7 @@ const PlansAndPayment = ({ userData }) => {
         <Stack
           spacing={0}
           gap="64px"
-          flexDirection={isMobileMod() ? "column" : "row"}
+          flexDirection={isMobileMod() ? "column" : {base: "column", lg: "row"}}
         >
           <Stack minWidth="350px" spacing="8px">
             <Text
@@ -2397,6 +2446,7 @@ export default function UserPage({ getUser }) {
           <Stack
             flex={1}
             maxWidth="800px"
+            width="100%"
             spacing={0}
           >
             <SectionTitle marginBottom="8px">{choices[sectionSelected].title}</SectionTitle>
diff --git a/next/styles/toggle.module.css b/next/styles/toggle.module.css
new file mode 100644
index 00000000..a032c938
--- /dev/null
+++ b/next/styles/toggle.module.css
@@ -0,0 +1,38 @@
+.toggle {
+  --switch-track-diff: 17px !important;
+  --switch-thumb-x: 17px !important;
+  --switch-track-width: 0 !important;
+  --switch-track-height: 0 !important;
+  border-color: transparent !important;
+}
+
+.toggle span{
+  background-color: #878A8E;
+  width: 42px;
+  height: 24px;
+}
+
+.toggle span[data-checked]{
+  background-color: #2B8C4D;
+  width: 42px;
+  height: 24px;
+}
+
+.toggle span[data-focus]{
+  box-shadow: none;
+}
+
+.toggle span span{
+  background-color: #FFF;
+  position: relative;
+  top: 1px;
+  left: 2px;
+  width: 21px;
+  height: 21px;
+}
+
+.toggle span span[data-checked]{
+  background-color: #FFF;
+  width: 21px;
+  height: 21px;
+}