diff --git a/src/components/Base/RoutineFormActionsProvider/routine-form-actions-provider.tsx b/src/components/Base/RoutineFormActionsProvider/routine-form-actions-provider.tsx
index c906bdc73..af7cac7c1 100644
--- a/src/components/Base/RoutineFormActionsProvider/routine-form-actions-provider.tsx
+++ b/src/components/Base/RoutineFormActionsProvider/routine-form-actions-provider.tsx
@@ -1,7 +1,7 @@
 import React, { createContext, ReactElement, useContext } from 'react'
 import { useRecoilState } from 'recoil'
 
-import { useRoutineFormAnswers } from 'src/components/Routine/hooks/setRoutineFormAnswers/set-routine-form-answers'
+import { useRoutineFormAnswers } from 'src/components/Routine/hooks/new/use-routine-form-answer'
 import { currentRoutinePropertiesAtom } from 'src/state/recoil/routine/current-routine-properties'
 import { retrospectiveRoutineIndexQuestionAtom } from 'src/state/recoil/routine/retrospective-showed-question'
 
diff --git a/src/components/Page/Team/Highlights/highlights.tsx b/src/components/Page/Team/Highlights/highlights.tsx
index 438a2657b..7b9cfd40c 100644
--- a/src/components/Page/Team/Highlights/highlights.tsx
+++ b/src/components/Page/Team/Highlights/highlights.tsx
@@ -49,9 +49,7 @@ export const Highlights = ({ teamId, isLoading }: HighlightsProperties) => {
   useEffect(() => {
     const getRoutinesHighlights = async (id: Team['id']) => {
       const { routines } = await servicesPromise
-      const { data: flags } = await routines.get<HighlightCard[] | undefined>(
-        `/answers/flags/${id}`,
-      )
+      const flags = await routines.getFlags(id)
       setRoutineFlags(flags)
     }
 
diff --git a/src/components/Page/Team/team.tsx b/src/components/Page/Team/team.tsx
index c86f8ed4b..89721a630 100644
--- a/src/components/Page/Team/team.tsx
+++ b/src/components/Page/Team/team.tsx
@@ -81,6 +81,10 @@ const ExploreTeamPage = ({ teamId }: ExploreTeamPageProperties) => {
     if (tabs.has(routerTab) && routerTab !== activeTab) {
       setActiveTab(routerTab)
     }
+
+    if (!routerTab) {
+      setActiveTab('okrs')
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router])
 
diff --git a/src/components/Routine/Drawer/Base/TeamRedirectPage/team-redirect-page.tsx b/src/components/Routine/Drawer/Base/TeamRedirectPage/team-redirect-page.tsx
index ffe3c13d7..0c1c32790 100644
--- a/src/components/Routine/Drawer/Base/TeamRedirectPage/team-redirect-page.tsx
+++ b/src/components/Routine/Drawer/Base/TeamRedirectPage/team-redirect-page.tsx
@@ -1,4 +1,5 @@
 import { Box, Button, Flex, Text } from '@chakra-ui/react'
+import { useQueryClient } from '@tanstack/react-query'
 import React from 'react'
 import { useIntl } from 'react-intl'
 import { useRecoilState, useRecoilValue } from 'recoil'
@@ -18,6 +19,12 @@ const TeamRedirectPage = () => {
   const userTeams = useRecoilValue(routineAnswersReturnedData)
   const intl = useIntl()
   const routineTabName = useRoutineTab()
+  const queryClient = useQueryClient()
+
+  const redirectToTeam = (teamId: string) => {
+    setIsOpen(false)
+    queryClient.invalidateQueries({ queryKey: [`routines:getAnswer:${teamId}`] })
+  }
 
   return (
     <RoutineDrawer isOpen={isOpen} formSize={1} onClose={() => setIsOpen(false)}>
@@ -49,7 +56,7 @@ const TeamRedirectPage = () => {
                     desc={intl.formatMessage(messages.title)}
                   />
                 }
-                onClick={() => setIsOpen(false)}
+                onClick={() => redirectToTeam(team.id)}
               >
                 {team.name}
               </Button>
diff --git a/src/components/Routine/NotificationSettings/index.ts b/src/components/Routine/NotificationSettings/index.ts
deleted file mode 100644
index 3849ba71f..000000000
--- a/src/components/Routine/NotificationSettings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { NotificationSettingsModal } from './notification-settings'
diff --git a/src/components/Routine/NotificationSettings/notification-settings.tsx b/src/components/Routine/NotificationSettings/index.tsx
similarity index 100%
rename from src/components/Routine/NotificationSettings/notification-settings.tsx
rename to src/components/Routine/NotificationSettings/index.tsx
diff --git a/src/components/Routine/Retrospective/wrapper.tsx b/src/components/Routine/Retrospective/wrapper.tsx
index a04204ff9..f37d0a1e0 100644
--- a/src/components/Routine/Retrospective/wrapper.tsx
+++ b/src/components/Routine/Retrospective/wrapper.tsx
@@ -8,7 +8,7 @@ import { retrospectiveRoutineIndexQuestionAtom } from 'src/state/recoil/routine/
 import RoutineDrawer from '../Drawer/Base/drawer'
 import RoutineFormQuestion from '../Drawer/Questions'
 import { FormQuestion } from '../Drawer/Questions/types'
-import { useRoutineFormQuestions } from '../hooks/getRoutineForm/get-routine-form'
+import { useRoutineFormQuestions } from '../hooks/new/use-get-routine-form'
 
 const updateDependQuestions = (questionId: string, value: string) => (question: FormQuestion) => {
   if (question.conditional?.dependsOn !== questionId) {
diff --git a/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/LongTextAnswerCard/long-text.tsx b/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/LongTextAnswerCard/long-text.tsx
index d397f391e..eb1fb7e97 100644
--- a/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/LongTextAnswerCard/long-text.tsx
+++ b/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/LongTextAnswerCard/long-text.tsx
@@ -2,10 +2,8 @@ import { Box, Skeleton, Text } from '@chakra-ui/react'
 import styled from '@emotion/styled'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useIntl } from 'react-intl'
-import { useRecoilValue } from 'recoil'
 
 import { StarIcon, TargetIcon, WriteIcon } from 'src/components/Icon'
-import { answerDetailedAtom } from 'src/state/recoil/routine/answer'
 
 import { routineAnswer } from '../../../types'
 import { themeColor } from '../../../utils/contants'
@@ -24,44 +22,41 @@ const StyledListItem = styled.span`
 `
 
 const LongTextAnswerCard = ({ answerData, isLoaded }: LongTextAnswerCardProperties) => {
-  const reference = useRef<HTMLDivElement>(null)
-  const [width, setWidth] = useState(0)
-  const answerDetailed = useRecoilValue(answerDetailedAtom)
   const intl = useIntl()
 
-  const isDependentThat = answerDetailed.answers.find(
-    (answer) => answer.id === answerData.conditional?.dependsOn,
-  )
+  const reference = useRef<HTMLDivElement>(null)
+
+  const [width, setWidth] = useState(0)
 
   useEffect(() => {
     if (reference.current) setWidth(reference.current?.offsetWidth)
-  }, [answerDetailed])
+  }, [])
 
   const answerValueThatDepends = useMemo(() => {
-    if (isDependentThat?.values) {
-      if (isDependentThat.type === 'value_range') {
-        const lastValue = isDependentThat.values[isDependentThat.values.length - 1]
+    if (answerData.dependsThat?.values) {
+      if (answerData.dependsThat?.type === 'value_range') {
+        const lastValue = answerData.dependsThat?.values[answerData.dependsThat?.values.length - 1]
         return Number(lastValue?.value) <= 3
       }
 
-      if (isDependentThat.type === 'road_block') {
-        const lastValue = isDependentThat.values[isDependentThat.values.length - 2]
+      if (answerData.dependsThat?.type === 'road_block') {
+        const lastValue = answerData.dependsThat?.values[answerData.dependsThat?.values.length - 2]
         return lastValue?.value === 'y'
       }
     }
-  }, [isDependentThat])
+  }, [answerData.dependsThat])
 
   const justifyContent = useMemo(() => {
     if (answerValueThatDepends === false) return 'flex-start'
-    if (answerValueThatDepends === true || isDependentThat?.type === 'emoji_scale')
+    if (answerValueThatDepends === true || answerData.dependsThat?.type === 'emoji_scale')
       return 'flex-end'
-    if (isDependentThat?.type === 'emoji_scale' && width > 780) return 'flex-end'
-  }, [answerValueThatDepends, isDependentThat?.type, width])
+    if (answerData.dependsThat?.type === 'emoji_scale' && width > 780) return 'flex-end'
+  }, [answerValueThatDepends, answerData.dependsThat?.type, width])
 
   const paddingRight = useMemo(() => {
-    if (isDependentThat?.type === 'emoji_scale' && width > 756) return 0
+    if (answerData.dependsThat?.type === 'emoji_scale' && width > 756) return 0
     return 0
-  }, [isDependentThat?.type, width])
+  }, [answerData.dependsThat?.type, width])
 
   const icons: Record<string, JSX.Element> = {
     '95b84e67-d5b6-4fcf-938a-b4c9897596cb': (
@@ -75,7 +70,7 @@ const LongTextAnswerCard = ({ answerData, isLoaded }: LongTextAnswerCardProperti
     ),
   }
 
-  const theme = themeColor(isDependentThat?.type ?? '')
+  const theme = themeColor(answerData.dependsThat?.type ?? '')
 
   return answerData.value ? (
     <Box ref={reference}>
diff --git a/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/UserAnswer/user-answer.tsx b/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/UserAnswer/user-answer.tsx
index 66e74ac27..d4dc9a505 100644
--- a/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/UserAnswer/user-answer.tsx
+++ b/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/UserAnswer/user-answer.tsx
@@ -20,9 +20,10 @@ import messages from './messages'
 
 interface UserAnswerProperties {
   user: Partial<User>
+  isLoaded: boolean
 }
 
-export const UserAnswer = ({ user }: UserAnswerProperties) => {
+export const UserAnswer = ({ user, isLoaded }: UserAnswerProperties) => {
   const [newGray600] = useToken('colors', ['new-gray.600'])
   const router = useRouter()
   const intl = useIntl()
@@ -73,13 +74,13 @@ export const UserAnswer = ({ user }: UserAnswerProperties) => {
       </Box>
 
       <Flex ml={6}>
-        <SkeletonCircle isLoaded={Boolean(user?.firstName)} w={50} h={50}>
+        <SkeletonCircle isLoaded={isLoaded} w={50} h={50}>
           <Avatar name={userFullName} src={user?.picture} w={50} h={50} />
         </SkeletonCircle>
 
         <Flex ml={4} flexDirection="column">
           <Skeleton
-            isLoaded={Boolean(user.firstName)}
+            isLoaded={isLoaded}
             display="inline-block"
             minWidth="400px"
             height="24px"
@@ -90,7 +91,7 @@ export const UserAnswer = ({ user }: UserAnswerProperties) => {
             </Heading>
           </Skeleton>
           <Skeleton
-            isLoaded={Boolean(user.role)}
+            isLoaded={isLoaded}
             display="inline-block"
             minWidth="100px"
             maxWidth={`${user.role ? user.role.length * 10 : 300}px`}
diff --git a/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/index.tsx b/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/index.tsx
index 827d2ac7a..5a5080fd2 100644
--- a/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/index.tsx
+++ b/src/components/Routine/RetrospectiveTab/Answers/AnswerContent/index.tsx
@@ -1,54 +1,92 @@
 import { Box, Divider, VStack } from '@chakra-ui/react'
-import React, { useEffect } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 
 import CustomMenuOptions, { Option } from 'src/components/Base/MenuOptions'
-import { useDeleteRoutineAnswer } from 'src/components/Routine/hooks/deleteAnswer/delete-routine-answer'
+import { useDeleteAnswerMutation } from 'src/components/Routine/hooks/new/use-delete-answer'
 import { commentsAtom } from 'src/state/recoil/comments/comments'
-import { answerDetailedAtom } from 'src/state/recoil/routine/answer'
 import meAtom from 'src/state/recoil/user/me'
 
-import { AnswerType } from '../../retrospective-tab-content'
+import { AnswerDetails, AnswerType } from '../../types'
 import messages from '../messages'
 
 import RoutineAnswerCard from './AnswerCards'
 import HistoryAnswers from './AnswerCards/HistoryAnswersCard/history-answers'
 
 type AnswerContent = {
+  teamId: string
   answerId: AnswerType['id']
+  answerDetailed: AnswerDetails
   isLoaded?: boolean
 }
 
-const AnswerContent = ({ answerId, isLoaded }: AnswerContent) => {
-  const answerDetailed = useRecoilValue(answerDetailedAtom)
-  const setComments = useSetRecoilState(commentsAtom)
-
+const AnswerContent = ({ teamId, answerId, answerDetailed, isLoaded }: AnswerContent) => {
   const intl = useIntl()
+  const router = useRouter()
+  const queryClient = useQueryClient()
+
+  const [answerDetailedFormatted, setAnswerDetailedFormatted] = useState<
+    AnswerDetails | undefined
+  >()
+
+  useEffect(() => {
+    setAnswerDetailedFormatted({
+      ...answerDetailed,
+      answers: answerDetailed.answers.map((answer) => {
+        const dependsThat = answerDetailed.answers.find(
+          (answerDepend) => answerDepend.id === answer.conditional?.dependsOn,
+        )
+
+        return {
+          ...answer,
+          dependsThat,
+        }
+      }),
+    })
+  }, [answerDetailed])
 
   const userID = useRecoilValue(meAtom)
+  const setComments = useSetRecoilState(commentsAtom)
 
-  const { deleteRoutineAnswer } = useDeleteRoutineAnswer()
+  const { mutate: deleteAnswer } = useDeleteAnswerMutation()
 
   const hasPermission = userID === answerDetailed.user.id
 
   useEffect(() => {
     setComments([])
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [answerId])
 
   const menuOptions: Option[] = [
     {
       value: intl.formatMessage(messages.firstMenuOption),
-      onSelect: async () => deleteRoutineAnswer(answerId),
+      onSelect: async () => {
+        deleteAnswer(answerId)
+        setTimeout(
+          async () => queryClient.invalidateQueries({ queryKey: [`routines:getAnswer:${teamId}`] }),
+          5000,
+        )
+        router.push(
+          {
+            query: {
+              ...router.query,
+              answerId: undefined,
+            },
+          },
+          undefined,
+          { shallow: true },
+        )
+      },
     },
   ]
 
   return (
     <>
       <VStack align="flex-start" px={4} py={10}>
-        {answerDetailed.history.length > 0 && (
+        {answerDetailedFormatted && answerDetailedFormatted.history.length > 0 && (
           <Box position="relative">
             {hasPermission && (
               <CustomMenuOptions
@@ -59,13 +97,13 @@ const AnswerContent = ({ answerId, isLoaded }: AnswerContent) => {
                 gap={1}
               />
             )}
-            <HistoryAnswers isLoaded={isLoaded} answers={answerDetailed.history} />
-            {answerDetailed.answers.map((answer) => {
+            <HistoryAnswers isLoaded={isLoaded} answers={answerDetailedFormatted.history} />
+            {answerDetailedFormatted.answers.map((answer) => {
               return (
                 <RoutineAnswerCard
                   key={answer.id}
                   answerData={answer}
-                  userThatAnswered={answerDetailed.user}
+                  userThatAnswered={answerDetailedFormatted.user}
                   isLoaded={isLoaded}
                 />
               )
diff --git a/src/components/Routine/RetrospectiveTab/Answers/answer-row.tsx b/src/components/Routine/RetrospectiveTab/Answers/AnswerRow/index.tsx
similarity index 97%
rename from src/components/Routine/RetrospectiveTab/Answers/answer-row.tsx
rename to src/components/Routine/RetrospectiveTab/Answers/AnswerRow/index.tsx
index a3bcc134f..9aa61071e 100644
--- a/src/components/Routine/RetrospectiveTab/Answers/answer-row.tsx
+++ b/src/components/Routine/RetrospectiveTab/Answers/AnswerRow/index.tsx
@@ -11,9 +11,8 @@ import { EventType } from 'src/state/hooks/useEvent/event-type'
 import { useEvent } from 'src/state/hooks/useEvent/hook'
 import useRelativeDate from 'src/state/hooks/useRelativeDate'
 
-import { AnswerSummary } from '../retrospective-tab-content'
-
-import messages from './messages'
+import { AnswerSummary } from '../../types'
+import messages from '../messages'
 
 interface AnswerRowComponentProperties {
   answer: AnswerSummary
@@ -21,8 +20,10 @@ interface AnswerRowComponentProperties {
 
 const AnswerRowComponent = ({ answer }: AnswerRowComponentProperties) => {
   const intl = useIntl()
-  const { dispatch } = useEvent(EventType.ROUTINE_ANSWER_ROW_CLICK)
   const router = useRouter()
+
+  const { dispatch } = useEvent(EventType.ROUTINE_ANSWER_ROW_CLICK)
+
   const [formattedRelativeDate] = useRelativeDate(new Date(answer.timestamp ?? ''))
 
   const isTheDateToday = answer.timestamp ? isToday(new Date(answer.timestamp)) : undefined
diff --git a/src/components/Routine/RetrospectiveTab/Answers/AnswerView/index.tsx b/src/components/Routine/RetrospectiveTab/Answers/AnswerView/index.tsx
new file mode 100644
index 000000000..79f42dc99
--- /dev/null
+++ b/src/components/Routine/RetrospectiveTab/Answers/AnswerView/index.tsx
@@ -0,0 +1,89 @@
+import { Divider, Flex, Stack } from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import { useIntl } from 'react-intl'
+
+import { getScrollableItem } from 'src/components/Base/ScrollableItem'
+import { Team } from 'src/components/Team/types'
+
+import RoutineComments from '../../Comments'
+import RoutineCommentsInput from '../../Comments/CommentInput/wrapper'
+import RoutinesOverview, { RoutinesOverviewProperties } from '../../RoutinesOverview'
+import AnswerContent from '../AnswerContent'
+import { UserAnswer } from '../AnswerContent/AnswerCards/UserAnswer'
+
+import { useLogic } from './use-logic'
+
+interface AnswerContentProperties {
+  teamId: Team['id']
+  after: RoutinesOverviewProperties['after']
+  before: RoutinesOverviewProperties['before']
+  week: RoutinesOverviewProperties['week']
+  isLoaded?: boolean
+}
+
+const ScrollableItem = getScrollableItem()
+
+const AnswerViewContent = ({ after, before, week, teamId, isLoaded }: AnswerContentProperties) => {
+  const router = useRouter()
+  const intl = useIntl()
+
+  const { answerId, answerDetailed, isUserDetailedLoaded, comments } = useLogic({
+    router,
+    intl,
+  })
+
+  const element = document.querySelector('#comments-list')
+  const scrollToShowLastComment = () => {
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'end' })
+    }
+  }
+
+  useEffect(() => {
+    if (!isUserDetailedLoaded && element) {
+      element.scrollIntoView({ block: 'start', behavior: 'smooth' })
+    }
+  }, [element, isUserDetailedLoaded])
+
+  return (
+    <Stack>
+      {answerId && answerDetailed && answerDetailed.answers.length > 0 && (
+        <>
+          <UserAnswer user={answerDetailed.user} isLoaded={!isUserDetailedLoaded} />
+          <Flex w="100%" alignItems="center" justifyContent="center">
+            <Divider textAlign="center" width="96%" borderColor="new-gray.400" />
+          </Flex>
+        </>
+      )}
+      <ScrollableItem maxH="750px" p="0 12px">
+        {answerDetailed && answerId && answerDetailed.answers.length > 0 ? (
+          <div id="comments-list">
+            <AnswerContent
+              teamId={teamId}
+              answerId={answerId}
+              answerDetailed={answerDetailed}
+              isLoaded={!isUserDetailedLoaded}
+            />
+            <RoutineComments comments={comments} answerOwner={answerDetailed.user.firstName} />
+            <RoutineCommentsInput
+              showLastComment={scrollToShowLastComment}
+              routineUser={answerDetailed.user.firstName}
+              domainEntityId={answerId}
+            />
+          </div>
+        ) : (
+          <RoutinesOverview
+            after={after}
+            before={before}
+            week={week}
+            teamId={teamId}
+            isLoaded={isLoaded}
+          />
+        )}
+      </ScrollableItem>
+    </Stack>
+  )
+}
+
+export default AnswerViewContent
diff --git a/src/components/Routine/RetrospectiveTab/Answers/AnswerView/use-logic.tsx b/src/components/Routine/RetrospectiveTab/Answers/AnswerView/use-logic.tsx
new file mode 100644
index 000000000..608db4749
--- /dev/null
+++ b/src/components/Routine/RetrospectiveTab/Answers/AnswerView/use-logic.tsx
@@ -0,0 +1,89 @@
+/* eslint-disable import/order */
+import { NextRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { IntlShape } from 'react-intl'
+import { useSetRecoilState } from 'recoil'
+
+import { hasCallToActionOnAnswerDetails } from 'src/state/recoil/routine/has-call-to-action'
+
+import { useGetCommentsByEntityMutation } from '../../../hooks/getCommentsByEntity'
+import { useGetAnswersDetailedMutation } from '../../../hooks/new/use-get-answer-detailed'
+import { AnswerDetails } from '../types'
+
+import { COMMENT_DOMAIN } from '../utils/constants'
+
+interface useLogicProperties {
+  router: NextRouter
+  intl: IntlShape
+}
+
+export const useLogic = ({ router, intl }: useLogicProperties) => {
+  // Local state
+  const [answerId, setAnswerId] = useState<string | undefined>()
+  const [entity, setEntity] = useState<string | undefined>()
+  const [answerDetailed, setAnswerDetailed] = useState<AnswerDetails | undefined>()
+
+  // Global state
+  const setHasCallToAction = useSetRecoilState(hasCallToActionOnAnswerDetails)
+
+  // Hooks
+  const { data: comments } = useGetCommentsByEntityMutation({
+    entity,
+  })
+
+  const { data: dataAnswerDetailed, isFetching: isUserDetailedLoaded } =
+    useGetAnswersDetailedMutation({
+      answerId,
+      locale: intl.locale,
+    })
+
+  useEffect(() => {
+    const answerQuery = router?.query?.answerId
+    const answerId = Array.isArray(answerQuery) ? answerQuery[0] : answerQuery
+    setAnswerId(answerId)
+    setEntity(`${COMMENT_DOMAIN.routine}:${answerId ?? ''}`)
+  }, [router.query])
+
+  useEffect(() => {
+    if (dataAnswerDetailed && entity) {
+      setHasCallToAction(needCallToAction)
+    }
+
+    if (dataAnswerDetailed) {
+      setAnswerDetailed(dataAnswerDetailed)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [answerId, dataAnswerDetailed])
+
+  // Utils
+  const needCallToAction = () => {
+    if (!dataAnswerDetailed) return false
+    return dataAnswerDetailed.answers.some((answer) => {
+      if (answer.values) {
+        if (
+          answer.type === 'value_range' &&
+          Number(answer.values[answer.values.length - 1].value) <= 3
+        )
+          return true
+
+        if (
+          answer.type === 'emoji_scale' &&
+          Number(answer.values[answer.values.length - 1].value) <= 2
+        )
+          return true
+
+        if (answer.type === 'road_block' && answer.values[answer.values.length - 2].value === 'y')
+          return true
+      }
+
+      return false
+    })
+  }
+
+  return {
+    answerId,
+    answerDetailed,
+    isUserDetailedLoaded,
+    comments,
+  }
+}
diff --git a/src/components/Routine/RetrospectiveTab/Answers/index.tsx b/src/components/Routine/RetrospectiveTab/Answers/index.tsx
index 50ece5ec1..79a4efb85 100644
--- a/src/components/Routine/RetrospectiveTab/Answers/index.tsx
+++ b/src/components/Routine/RetrospectiveTab/Answers/index.tsx
@@ -1,292 +1,189 @@
 import { Flex, Text, IconButton, GridItem, Divider, Box, Spinner } from '@chakra-ui/react'
-import { format, add, sub, isBefore } from 'date-fns'
+import { format, add, sub } from 'date-fns'
 import pt from 'date-fns/locale/pt'
-import debounce from 'lodash/debounce'
 import { useRouter } from 'next/router'
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import React from 'react'
 import { useIntl } from 'react-intl'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 
 import { Button } from 'src/components/Base/Button'
 import { getScrollableItem } from 'src/components/Base/ScrollableItem'
 import { SearchBar } from 'src/components/Base/SearchBar/wrapper'
 import { ArrowRight } from 'src/components/Icon'
 import BrilliantBellIcon from 'src/components/Icon/BrilliantBell'
-import { useConnectionEdges } from 'src/state/hooks/useConnectionEdges/hook'
-import { EventType } from 'src/state/hooks/useEvent/event-type'
-import { useEvent } from 'src/state/hooks/useEvent/hook'
-import { answerSummaryAtom } from 'src/state/recoil/routine/answer-summary'
-import { isAnswerSummaryLoad } from 'src/state/recoil/routine/is-answers-summary-load'
-import { routineDrawerOpened } from 'src/state/recoil/routine/opened-routine-drawer'
-import {
-  getRoutineDateRangeDateFormat,
-  isNextWeekDisabled,
-  routineDatesRangeAtom,
-} from 'src/state/recoil/routine/routine-dates-range'
-import { answerSummaryLoadStateAtom } from 'src/state/recoil/routine/users-summary-load-state'
-import { filteredUsersCompany } from 'src/state/recoil/team/users-company'
-import meAtom from 'src/state/recoil/user/me'
-import selectUser from 'src/state/recoil/user/selector'
 
-import { useAnswerSummaryPagination } from '../../hooks/useAnswerSummaryPagination'
-import { useFetchSummaryData } from '../../hooks/useFetchSummaryData'
+import { AnswerSummary } from '../types'
 
-import AnswerRowComponent from './answer-row'
+import AnswerRowComponent from './AnswerRow'
 import messages from './messages'
+import { useLogic } from './use-logic'
 
 interface AnswersComponentProperties {
   teamId: string
-  onGetNoCurrentAnswers: (after: Date, before: Date) => Promise<void>
   after: Date
   before: Date
   week: number
+  dataAnswers: AnswerSummary[] | undefined
+  loadingAnswers: boolean
+  loadMore: boolean
+  usersSelected: string[]
+  setNewDate: (newDate: Date) => Promise<void>
   handleViewMore?: () => void
+  setUsersSelected: React.Dispatch<React.SetStateAction<string[]>>
 }
 
 const ScrollableItem = getScrollableItem()
 
-const SEARCH_CHARACTERS_LIMIT = 3
-
-const AnswersComponent = memo(
-  ({
+const AnswersComponent = ({
+  teamId,
+  after,
+  before,
+  week,
+  dataAnswers,
+  loadingAnswers,
+  loadMore,
+  usersSelected,
+  setNewDate,
+  handleViewMore,
+  setUsersSelected,
+}: AnswersComponentProperties) => {
+  const intl = useIntl()
+  const router = useRouter()
+
+  const {
+    search,
+    SEARCH_CHARACTERS_LIMIT,
+    showAnswerNowButton,
+    filteredAnswers,
+    loadingSearch,
+    dispatchChangeTimePeriod,
+    isNextWeekDisabled,
+    handleSearch,
+    setIsRoutineDrawerOpen,
+    dispatchAnswerNowFormClick,
+  } = useLogic({
     teamId,
-    after,
     before,
-    week,
-    onGetNoCurrentAnswers,
-    handleViewMore,
-  }: AnswersComponentProperties) => {
-    const { dispatch: dispatchAnswerNowFormClick } = useEvent(EventType.ANSWER_NOW_FORM_CLICK)
-    const { dispatch: dispatchChangeTimePeriod } = useEvent(EventType.CHANGE_TIME_PERIOD_CLICK)
-    const [isAnswerSummaryLoading, setIsAnswerSummaryLoading] = useRecoilState(
-      answerSummaryLoadStateAtom,
-    )
-
-    const { fetchAnswers } = useFetchSummaryData()
-    const { limitedTeamUsers } = useAnswerSummaryPagination(teamId)
-    const teamUsers = useRecoilValue(filteredUsersCompany(teamId))
-    const [answersSummary, setAnswersSummary] = useRecoilState(answerSummaryAtom)
-    const [search, setSearch] = useState('')
-
-    const filteredAnswers = useMemo(() => {
-      const uniqueIds = new Set()
-      return answersSummary.filter((answer) => {
-        if (
-          answer.name.toLowerCase().includes(search.toLocaleLowerCase()) &&
-          !uniqueIds.has(answer.userId)
-        ) {
-          uniqueIds.add(answer.userId)
-          return true
-        }
-
-        return false
-      })
-    }, [answersSummary, search])
-
-    const intl = useIntl()
-    const router = useRouter()
-
-    const userID = useRecoilValue(meAtom)
-    const [date, setDate] = useRecoilState(routineDatesRangeAtom)
-    const setIsAnswerSummaryLoaded = useSetRecoilState(isAnswerSummaryLoad)
-    const setIsRoutineDrawerOpen = useSetRecoilState(routineDrawerOpened)
-    const user = useRecoilValue(selectUser(userID))
-    const [userTeams, updateTeams] = useConnectionEdges(user?.teams?.edges)
-    const [userCompanies, updateUserCompanies] = useConnectionEdges(user?.companies?.edges)
-    const userTeamIds = userTeams.map((team) => team.id)
-    const userCompanie = userCompanies[0]?.id
-    const isUserFromTheTeam = [...userTeamIds, userCompanie].includes(teamId)
-
-    const haveUserAnswered = answersSummary.find(
-      (answer) => answer.userId === userID && answer.timestamp,
-    )
-    const isActiveRoutine = isBefore(new Date(), before)
-
-    const showAnswerNowButton = Boolean(
-      isUserFromTheTeam && isActiveRoutine && !haveUserAnswered && answersSummary.length > 0,
-    )
-
-    const setNewDate = useCallback(
-      async (newDate: Date) => {
-        const dateRange = getRoutineDateRangeDateFormat(newDate)
-        setDate(dateRange)
-
-        router.push(
-          {
-            query: {
-              ...(router?.query ?? {}),
-              before: format(dateRange.before, 'dd/MM/yyyy'),
-              after: format(dateRange.after, 'dd/MM/yyyy'),
-            },
-          },
-          undefined,
-          { shallow: true },
-        )
-
-        await onGetNoCurrentAnswers(dateRange.after, dateRange.before)
-      },
-      [onGetNoCurrentAnswers, router, setDate],
-    )
-
-    const performDebounced = useCallback(
-      async (searchTerm: string) => {
-        const usersSearched = teamUsers.filter((user) =>
-          user.fullName.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase()),
-        )
-
-        const teamUsersIds = usersSearched.map((user) => user.id)
-
-        const usersAreBeingRequestedForTheFirstTime = !teamUsersIds.some((userId) => {
-          return answersSummary.some((user) => user.userId === userId)
-        })
-
-        if (usersAreBeingRequestedForTheFirstTime && teamUsersIds.length > 0) {
-          const searchDataFormatted = await fetchAnswers({ teamId, after, before, teamUsersIds })
-
-          if (searchDataFormatted)
-            setAnswersSummary((previousAnswers) => [...previousAnswers, ...searchDataFormatted])
-        }
-
-        setIsAnswerSummaryLoading(false)
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [after, before, teamUsers],
-    )
-
-    const debouncedSearch = debounce(performDebounced, 2500)
-
-    const handleSearch = useCallback(
-      async (value: string) => {
-        if (value.length >= SEARCH_CHARACTERS_LIMIT) {
-          setSearch(value)
-          setIsAnswerSummaryLoading(true)
-          await debouncedSearch(value)
-        } else {
-          setIsAnswerSummaryLoading(false)
-          setSearch('')
-        }
-      },
-      [debouncedSearch, setIsAnswerSummaryLoading],
-    )
-
-    useEffect(() => {
-      updateTeams(user?.teams?.edges)
-      updateUserCompanies(user?.companies?.edges)
-    }, [updateTeams, updateUserCompanies, user?.companies?.edges, user?.teams])
-
-    return (
-      <GridItem padding="25px 25px 30px 20px" display="flex" flexDirection="column">
-        <Flex width="100%" height="38px" marginBottom="25px" marginTop="6px">
-          <IconButton
-            background="new-gray.200"
-            aria-label={intl.formatMessage(messages.arrowLeftIconDescription)}
-            borderRadius="10px 0px 0px 10px"
-            height="38px"
-            icon={
-              <ArrowRight
-                transform="rotate(180deg)"
-                desc={intl.formatMessage(messages.arrowLeftIconDescription)}
-                fill="new-gray.700"
-              />
-            }
-            onClick={() => {
-              setIsAnswerSummaryLoaded(false)
-              setNewDate(sub(date.after, { weeks: 1 }))
-              dispatchChangeTimePeriod({})
-            }}
-          />
-          <Text
-            color="new-gray.800"
+    after,
+    router,
+    dataAnswers,
+    loadingAnswers,
+    usersSelected,
+    setUsersSelected,
+  })
+
+  return (
+    <GridItem padding="25px 25px 30px 20px" display="flex" flexDirection="column">
+      {/* Seletor de semana */}
+      <Flex width="100%" height="38px" marginBottom="25px" marginTop="6px">
+        <IconButton
+          background="new-gray.200"
+          aria-label={intl.formatMessage(messages.arrowLeftIconDescription)}
+          borderRadius="10px 0px 0px 10px"
+          height="38px"
+          icon={
+            <ArrowRight
+              transform="rotate(180deg)"
+              desc={intl.formatMessage(messages.arrowLeftIconDescription)}
+              fill="new-gray.700"
+            />
+          }
+          onClick={() => {
+            setNewDate(sub(after, { weeks: 1 }))
+            dispatchChangeTimePeriod({})
+          }}
+        />
+        <Text
+          color="new-gray.800"
+          width="100%"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          background="new-gray.100"
+          marginX="3px"
+        >
+          {intl.formatMessage(messages.weekText)} {week} (
+          {format(new Date(after), 'dd/MMM', { locale: pt })} a{' '}
+          {format(new Date(before), 'dd/MMM', { locale: pt })})
+        </Text>
+        <IconButton
+          borderRadius="0px 10px 10px 0px"
+          background="new-gray.200"
+          aria-label={intl.formatMessage(messages.arrowRightIconDescription)}
+          height="38px"
+          isDisabled={isNextWeekDisabled(before)}
+          icon={
+            <ArrowRight
+              desc={intl.formatMessage(messages.arrowRightIconDescription)}
+              fill="new-gray.700"
+            />
+          }
+          onClick={() => {
+            setNewDate(add(after, { weeks: 1 }))
+            dispatchChangeTimePeriod({})
+          }}
+        />
+      </Flex>
+
+      <Divider borderColor="new-gray.400" />
+
+      {/* Pesquisa de usuário */}
+      <Flex gap="5px" marginTop="20px" marginBottom="30px">
+        <SearchBar placeholder="Buscar" borderRadius="10px" height="38px" onSearch={handleSearch} />
+      </Flex>
+
+      {/* Lista de respostas por usuários */}
+      <ScrollableItem id="scrollable-list-users" maxH="700px" p="0 12px">
+        {filteredAnswers.map((answer) => (
+          <AnswerRowComponent key={answer.id} answer={answer} />
+        ))}
+        {(loadingAnswers || loadingSearch) && (
+          <Flex justify="center" py={4}>
+            <Spinner size="lg" />
+          </Flex>
+        )}
+        {!loadingAnswers && loadMore && (
+          <Button
             width="100%"
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            background="new-gray.100"
-            marginX="3px"
-          >
-            {intl.formatMessage(messages.weekText)} {week} (
-            {format(new Date(after), 'dd/MMM', { locale: pt })} a{' '}
-            {format(new Date(before), 'dd/MMM', { locale: pt })})
+            marginTop="20px"
+            marginBottom="20px"
+            label="Ver mais"
+            onClick={handleViewMore}
+          />
+        )}
+        <Box
+          id="list-bottom"
+          display={search.length >= SEARCH_CHARACTERS_LIMIT ? 'none' : 'block'}
+        />
+      </ScrollableItem>
+
+      {/* Botão de resposta */}
+      {showAnswerNowButton && (
+        <Box textAlign="center" marginTop="auto">
+          <Divider borderColor="new-gray.400" />
+          <Text color="red.500" fontWeight="500" fontSize="14px" marginY="10px">
+            <BrilliantBellIcon
+              desc={intl.formatMessage(messages.redBellIconDescription)}
+              marginRight={2}
+              marginBottom={1.5}
+            />
+            {intl.formatMessage(messages.notAnsweredText)}
           </Text>
-          <IconButton
-            borderRadius="0px 10px 10px 0px"
-            background="new-gray.200"
-            aria-label={intl.formatMessage(messages.arrowRightIconDescription)}
-            height="38px"
-            isDisabled={isNextWeekDisabled(before)}
-            icon={
-              <ArrowRight
-                desc={intl.formatMessage(messages.arrowRightIconDescription)}
-                fill="new-gray.700"
-              />
-            }
+          <Button
+            width="100%"
+            label={intl.formatMessage(messages.answerNowButton)}
+            color="white"
+            backgroundColor="brand.500"
+            padding="13px 0px"
+            _hover={{ background: 'brand.400', color: 'black.50' }}
             onClick={() => {
-              setIsAnswerSummaryLoaded(false)
-              setNewDate(add(date.after, { weeks: 1 }))
-              dispatchChangeTimePeriod({})
+              setIsRoutineDrawerOpen(true)
+              dispatchAnswerNowFormClick({})
             }}
           />
-        </Flex>
-        <Divider borderColor="new-gray.400" />
-        <Flex gap="5px" marginTop="20px" marginBottom="30px">
-          <SearchBar
-            placeholder="Buscar"
-            borderRadius="10px"
-            height="38px"
-            onSearch={handleSearch}
-          />
-        </Flex>
-        <ScrollableItem id="scrollable-list-users" maxH="700px" p="0 12px">
-          {filteredAnswers.map((answer) => (
-            <AnswerRowComponent key={answer.id} answer={answer} />
-          ))}
-          {isAnswerSummaryLoading && (
-            <Flex justify="center" py={4}>
-              <Spinner size="lg" />
-            </Flex>
-          )}
-          {!isAnswerSummaryLoading && limitedTeamUsers.length > 0 && (
-            <Button
-              width="100%"
-              marginTop="20px"
-              marginBottom="20px"
-              label="Ver mais"
-              onClick={handleViewMore}
-            />
-          )}
-          <Box
-            id="list-bottom"
-            display={search.length >= SEARCH_CHARACTERS_LIMIT ? 'none' : 'block'}
-          />
-        </ScrollableItem>
-        {showAnswerNowButton && (
-          <Box textAlign="center" marginTop="auto">
-            <Divider borderColor="new-gray.400" />
-            <Text color="red.500" fontWeight="500" fontSize="14px" marginY="10px">
-              <BrilliantBellIcon
-                desc={intl.formatMessage(messages.redBellIconDescription)}
-                marginRight={2}
-                marginBottom={1.5}
-              />
-              {intl.formatMessage(messages.notAnsweredText)}
-            </Text>
-            <Button
-              width="100%"
-              label={intl.formatMessage(messages.answerNowButton)}
-              color="white"
-              backgroundColor="brand.500"
-              padding="13px 0px"
-              _hover={{ background: 'brand.400', color: 'black.50' }}
-              onClick={() => {
-                setIsRoutineDrawerOpen(true)
-                dispatchAnswerNowFormClick({})
-              }}
-            />
-          </Box>
-        )}
-      </GridItem>
-    )
-  },
-)
+        </Box>
+      )}
+    </GridItem>
+  )
+}
 
 export default AnswersComponent
diff --git a/src/components/Routine/RetrospectiveTab/Answers/types.ts b/src/components/Routine/RetrospectiveTab/Answers/types.ts
index 415438616..90ea472b8 100644
--- a/src/components/Routine/RetrospectiveTab/Answers/types.ts
+++ b/src/components/Routine/RetrospectiveTab/Answers/types.ts
@@ -21,6 +21,7 @@ export type routineAnswer = {
   conditional?: {
     dependsOn: string
   }
+  dependsThat?: routineAnswer
   userThatAnswered: User
 }
 
diff --git a/src/components/Routine/RetrospectiveTab/Answers/use-logic.ts b/src/components/Routine/RetrospectiveTab/Answers/use-logic.ts
new file mode 100644
index 000000000..c2b18d0c9
--- /dev/null
+++ b/src/components/Routine/RetrospectiveTab/Answers/use-logic.ts
@@ -0,0 +1,153 @@
+import { isBefore } from 'date-fns'
+import { NextRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+
+import { EventType } from 'src/state/hooks/useEvent/event-type'
+import { useEvent } from 'src/state/hooks/useEvent/hook'
+import { routineDrawerOpened } from 'src/state/recoil/routine/opened-routine-drawer'
+import { isNextWeekDisabled } from 'src/state/recoil/routine/routine-dates-range'
+import { filteredUsersCompany } from 'src/state/recoil/team/users-company'
+import meAtom from 'src/state/recoil/user/me'
+import selectUser from 'src/state/recoil/user/selector'
+
+import { AnswerSummary } from '../types'
+
+const SEARCH_CHARACTERS_LIMIT = 3
+
+interface useLogicProperties {
+  teamId: string
+  before: Date
+  after: Date
+  router: NextRouter
+  dataAnswers: AnswerSummary[] | undefined
+  loadingAnswers: boolean
+  usersSelected: string[]
+  setUsersSelected: React.Dispatch<React.SetStateAction<string[]>>
+}
+
+export function useLogic({
+  teamId,
+  before,
+  dataAnswers,
+  loadingAnswers,
+  usersSelected,
+  setUsersSelected,
+}: useLogicProperties) {
+  // Events - ok
+  const { dispatch: dispatchAnswerNowFormClick } = useEvent(EventType.ANSWER_NOW_FORM_CLICK)
+  const { dispatch: dispatchChangeTimePeriod } = useEvent(EventType.CHANGE_TIME_PERIOD_CLICK)
+
+  // Local States
+  const [search, setSearch] = useState('')
+  const [showAnswerNowButton, setShowAnswerNowButton] = useState<boolean>(false)
+  const [filteredAnswers, setFilteredAnswers] = useState<AnswerSummary[]>([])
+  const [loadingSearch, setLoadingSearch] = useState<boolean>(false)
+
+  // Global States
+  const userID = useRecoilValue(meAtom)
+  const user = useRecoilValue(selectUser(userID))
+  const teamUsers = useRecoilValue(filteredUsersCompany(teamId))
+  const setIsRoutineDrawerOpen = useSetRecoilState(routineDrawerOpened)
+
+  const formattedAnswerSummary = (answers: AnswerSummary[], usersSearched?: string[]) => {
+    const answersFormatted = usersSelected.map((userId) => {
+      const user = teamUsers.find((user) => user.id === userId)
+      const { id, latestStatusReply, timestamp, commentCount } =
+        answers.find((answer) => answer.userId === userId) ?? {}
+
+      return {
+        id,
+        userId,
+        name: user ? user.fullName : '',
+        picture: user ? user.picture : '',
+        latestStatusReply,
+        timestamp,
+        commentCount,
+      }
+    })
+    if (usersSearched) {
+      return answersFormatted.filter((answer) => usersSearched.includes(answer.userId))
+    }
+
+    return answersFormatted
+  }
+
+  const performDebounced = async (searchTerm: string) => {
+    // Search users and create an array of ids
+    const usersSearched = teamUsers.filter((user) =>
+      user.fullName.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase()),
+    )
+
+    const teamUsersIds = usersSearched.map((user) => user.id)
+
+    setUsersSelected((previousState) => {
+      const newUsers = teamUsersIds.filter((item) => !previousState.includes(item))
+      return [...previousState, ...newUsers]
+    })
+
+    if (dataAnswers)
+      setFilteredAnswers(
+        reorderAnswers(
+          dataAnswers.filter((item) => teamUsersIds.includes(item.userId)),
+          teamUsersIds,
+        ),
+      )
+  }
+
+  const handleSearch = async (value: string) => {
+    setLoadingSearch(true)
+    if (value.length >= SEARCH_CHARACTERS_LIMIT) {
+      setSearch(value)
+      await performDebounced(value)
+    } else {
+      setSearch('')
+      if (dataAnswers) setFilteredAnswers(reorderAnswers(dataAnswers))
+    }
+
+    setLoadingSearch(false)
+  }
+
+  const reorderAnswers = (answers: AnswerSummary[], isSearch?: string[]) => {
+    const answersFormatted = formattedAnswerSummary(answers, isSearch)
+    const answersReordered = answersFormatted.sort((a, b) => {
+      if (a.name && b.name) return a.name.localeCompare(b.name)
+      return 0
+    })
+    const currentUserAnswer = answersReordered.find((answer) => answer.userId === userID)
+    const othersAnswers = answersReordered.filter((answer) => answer.userId !== userID)
+    return currentUserAnswer ? [currentUserAnswer, ...othersAnswers] : othersAnswers
+  }
+
+  useEffect(() => {
+    if (loadingAnswers) return
+    if (!dataAnswers) return
+    if (!teamUsers) return
+
+    const isUserFromTeam = user?.id && teamUsers.some(({ id }) => id === user.id)
+    const isActiveRoutine = isBefore(new Date(), before.setHours(23, 59, 59))
+    const haveUserAnswered = dataAnswers?.find(
+      (answer) => answer.userId === userID && answer.timestamp,
+    )
+
+    setShowAnswerNowButton(
+      Boolean(isUserFromTeam && isActiveRoutine && !haveUserAnswered && dataAnswers?.length > 0),
+    )
+    setFilteredAnswers(reorderAnswers(dataAnswers))
+    handleSearch(search)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataAnswers, loadingAnswers, teamUsers, before])
+
+  return {
+    search,
+    SEARCH_CHARACTERS_LIMIT,
+    showAnswerNowButton,
+    filteredAnswers,
+    loadingSearch,
+    dispatchChangeTimePeriod,
+    dispatchAnswerNowFormClick,
+    isNextWeekDisabled,
+    handleSearch,
+    setIsRoutineDrawerOpen,
+  }
+}
diff --git a/src/components/Routine/RetrospectiveTab/Answers/utils/answer-summary-formatter.tsx b/src/components/Routine/RetrospectiveTab/Answers/utils/answer-summary-formatter.tsx
index 09ef463ec..366717005 100644
--- a/src/components/Routine/RetrospectiveTab/Answers/utils/answer-summary-formatter.tsx
+++ b/src/components/Routine/RetrospectiveTab/Answers/utils/answer-summary-formatter.tsx
@@ -4,7 +4,7 @@ import { useRecoilValue } from 'recoil'
 import { User } from 'src/components/User/types'
 import { usersCompany } from 'src/state/recoil/team/users-company'
 
-import { AnswerSummary } from '../../retrospective-tab-content'
+import { AnswerSummary } from '../../types'
 
 type AnswerSummaryFormmaterData = {
   requestedUsersIDs: Array<User['id']>
diff --git a/src/components/Routine/RetrospectiveTab/Answers/answers-row-skeleton.tsx b/src/components/Routine/RetrospectiveTab/Answers/utils/answers-row-skeleton.tsx
similarity index 100%
rename from src/components/Routine/RetrospectiveTab/Answers/answers-row-skeleton.tsx
rename to src/components/Routine/RetrospectiveTab/Answers/utils/answers-row-skeleton.tsx
diff --git a/src/components/Routine/RetrospectiveTab/Comments/CommentCard/index.tsx b/src/components/Routine/RetrospectiveTab/Comments/CommentCard/index.tsx
index 6fbeea989..5f0fa3f70 100644
--- a/src/components/Routine/RetrospectiveTab/Comments/CommentCard/index.tsx
+++ b/src/components/Routine/RetrospectiveTab/Comments/CommentCard/index.tsx
@@ -1,5 +1,6 @@
 import { Flex, Text, VStack, Avatar, Button, HStack } from '@chakra-ui/react'
 import styled from '@emotion/styled'
+import { useQueryClient } from '@tanstack/react-query'
 import React, { useMemo, useContext, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
@@ -8,21 +9,17 @@ import regexifyString from 'regexify-string'
 import { ConfirmationDialog } from 'src/components/Base/Dialogs/Confirmation/Base/wrapper'
 import LastUpdateText from 'src/components/Base/LastUpdateText'
 import { ServicesContext } from 'src/components/Base/ServicesProvider/services-provider'
-import { useGetCommentsByEntity } from 'src/components/Routine/hooks/getCommentsByEntity'
 import { useGetUserDetails } from 'src/components/User/hooks'
 import { User } from 'src/components/User/types'
 import { commentInputInitialValue } from 'src/state/recoil/comments/input'
 import { commentEntityToReply } from 'src/state/recoil/comments/reply-comment'
 import meAtom from 'src/state/recoil/user/me'
 
-import { COMMENT_DOMAIN } from '../../Answers/utils/constants'
-import { AnswerType } from '../../retrospective-tab-content'
 import { Comment } from '../types'
 
 import messages from './messages'
 
 interface CommentCard {
-  answerId: AnswerType['id']
   userId: User['id']
   id: Comment['id']
   timestamp: Date
@@ -54,26 +51,16 @@ export const insertMentionInString = (comment: string) => {
   })
 }
 
-const CommentCard = ({
-  answerId,
-  id,
-  userId,
-  timestamp,
-  comment,
-  entity,
-  isDeleted,
-}: CommentCard) => {
+const CommentCard = ({ id, userId, timestamp, comment, entity, isDeleted }: CommentCard) => {
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false)
   const { servicesPromise } = useContext(ServicesContext)
-
-  const origin_entity = `${COMMENT_DOMAIN.routine}:${answerId}`
+  const queryClient = useQueryClient()
 
   const logged_user = useRecoilValue(meAtom)
 
   const { data: user } = useGetUserDetails(userId)
   const setCommentInputValue = useSetRecoilState(commentInputInitialValue)
   const setCommentEntityToReply = useSetRecoilState(commentEntityToReply)
-  const { refatch } = useGetCommentsByEntity()
 
   const intl = useIntl()
 
@@ -99,7 +86,7 @@ const CommentCard = ({
       console.error(error)
       return { data: undefined }
     })
-    refatch({ entity: origin_entity })
+    queryClient.invalidateQueries({ queryKey: [`routines:getCommentsByEntity`] })
   }
 
   const handleReplyComment = () => {
diff --git a/src/components/Routine/RetrospectiveTab/Comments/CommentInput/wrapper.tsx b/src/components/Routine/RetrospectiveTab/Comments/CommentInput/wrapper.tsx
index 9baa3b9f7..f0a0a1fbb 100644
--- a/src/components/Routine/RetrospectiveTab/Comments/CommentInput/wrapper.tsx
+++ b/src/components/Routine/RetrospectiveTab/Comments/CommentInput/wrapper.tsx
@@ -1,4 +1,5 @@
 import { useToast } from '@chakra-ui/react'
+import { useQueryClient } from '@tanstack/react-query'
 import { Form, Formik, FormikHelpers } from 'formik'
 import React from 'react'
 import { useRecoilState } from 'recoil'
@@ -30,6 +31,7 @@ const RoutineCommentsInput = ({
   routineUser,
   showLastComment,
 }: RoutineCommentInputProperties) => {
+  const queryClient = useQueryClient()
   const { handleCreateComment } = useCreateComment()
   const [inputInitialValues, setInputInitialValues] = useRecoilState(commentInputInitialValue)
   const [commentEntity, setCommentEntity] = useRecoilState(commentEntityToReply)
@@ -60,6 +62,7 @@ const RoutineCommentsInput = ({
       showLastComment()
       actions.setSubmitting(false)
       actions.resetForm()
+      queryClient.invalidateQueries({ queryKey: [`routines:getCommentsByEntity`] })
     } else {
       toast({
         title: 'Escreva algo para comentar!',
diff --git a/src/components/Routine/RetrospectiveTab/Comments/empty-state.tsx b/src/components/Routine/RetrospectiveTab/Comments/empty-state.tsx
index 3a2c2d31e..ae40b0d1f 100644
--- a/src/components/Routine/RetrospectiveTab/Comments/empty-state.tsx
+++ b/src/components/Routine/RetrospectiveTab/Comments/empty-state.tsx
@@ -2,7 +2,7 @@ import { Box, Image, Text, VStack } from '@chakra-ui/react'
 import React from 'react'
 import { useIntl } from 'react-intl'
 
-import { AnswerType } from '../retrospective-tab-content'
+import { AnswerType } from '../types'
 
 import messages from './messages'
 
diff --git a/src/components/Routine/RetrospectiveTab/Comments/index.tsx b/src/components/Routine/RetrospectiveTab/Comments/index.tsx
index b0332d95b..3bc5b2c45 100644
--- a/src/components/Routine/RetrospectiveTab/Comments/index.tsx
+++ b/src/components/Routine/RetrospectiveTab/Comments/index.tsx
@@ -4,20 +4,17 @@ import { useIntl } from 'react-intl'
 
 import { User } from 'src/components/User/types'
 
-import { AnswerType } from '../retrospective-tab-content'
-
 import CommentCard from './CommentCard'
 import RoutineCommentsEmptyState from './empty-state'
 import messages from './messages'
 import { Comment } from './types'
 
 type RoutineCommentsProperties = {
-  answerId: AnswerType['id']
   answerOwner?: User['firstName']
-  comments: Comment[]
+  comments?: Comment[]
 }
 
-const RoutineComments = ({ answerId, answerOwner, comments }: RoutineCommentsProperties) => {
+const RoutineComments = ({ answerOwner, comments }: RoutineCommentsProperties) => {
   const intl = useIntl()
 
   return (
@@ -30,7 +27,6 @@ const RoutineComments = ({ answerId, answerOwner, comments }: RoutineCommentsPro
           comments.map(({ id, userId, content, createdAt, entity, isDeleted }) => (
             <CommentCard
               key={id}
-              answerId={answerId}
               id={id}
               userId={userId}
               comment={content}
diff --git a/src/components/Routine/RetrospectiveTab/RoutinesOverview/index.tsx b/src/components/Routine/RetrospectiveTab/RoutinesOverview/index.tsx
index 406422d4c..dcc895eab 100644
--- a/src/components/Routine/RetrospectiveTab/RoutinesOverview/index.tsx
+++ b/src/components/Routine/RetrospectiveTab/RoutinesOverview/index.tsx
@@ -60,12 +60,7 @@ const RoutinesOverview = ({
 
   const getAnswersOverview = useCallback(async () => {
     const { routines } = await servicesPromise
-    const { data: answersOverview } = await routines.get<OverviewData>(
-      `/answers/overview/${teamId}`,
-      {
-        params: { includeSubteams: false },
-      },
-    )
+    const answersOverview = await routines.getAnswerOverview(teamId)
 
     if (answersOverview) {
       setAnswersOverview(answersOverview)
diff --git a/src/components/Routine/RetrospectiveTab/retrospective-tab-content-view.tsx b/src/components/Routine/RetrospectiveTab/retrospective-tab-content-view.tsx
deleted file mode 100644
index 78eada831..000000000
--- a/src/components/Routine/RetrospectiveTab/retrospective-tab-content-view.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Divider, Flex, Stack } from '@chakra-ui/react'
-import { useRouter } from 'next/router'
-import React, { useEffect, useMemo } from 'react'
-import { useIntl } from 'react-intl'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
-
-import { getScrollableItem } from 'src/components/Base/ScrollableItem'
-import { Team } from 'src/components/Team/types'
-import { answerDetailedAtom } from 'src/state/recoil/routine/answer'
-import { hasCallToActionOnAnswerDetails } from 'src/state/recoil/routine/has-call-to-action'
-
-import useAnswerDetailed from '../hooks/getAnswerDetailed'
-import { useGetCommentsByEntity } from '../hooks/getCommentsByEntity'
-
-import AnswerContent from './Answers/AnswerContent'
-import { UserAnswer } from './Answers/AnswerContent/AnswerCards/UserAnswer'
-import { COMMENT_DOMAIN } from './Answers/utils/constants'
-import RoutineComments from './Comments'
-import RoutineCommentsInput from './Comments/CommentInput/wrapper'
-import RoutinesOverview, { RoutinesOverviewProperties } from './RoutinesOverview'
-
-interface AnswerContentProperties {
-  teamId: Team['id']
-  after: RoutinesOverviewProperties['after']
-  before: RoutinesOverviewProperties['before']
-  week: RoutinesOverviewProperties['week']
-  isLoaded?: boolean
-}
-
-const ScrollableItem = getScrollableItem()
-
-const RetrospectiveTabContentView = ({
-  after,
-  before,
-  week,
-  teamId,
-  isLoaded,
-}: AnswerContentProperties) => {
-  const router = useRouter()
-  const intl = useIntl()
-
-  const { getAnswerDetailed, isUserDetailedLoaded } = useAnswerDetailed()
-  const { getCommentsByEntity, comments } = useGetCommentsByEntity()
-  const setHasCallToAction = useSetRecoilState(hasCallToActionOnAnswerDetails)
-  const answerDetailed = useRecoilValue(answerDetailedAtom)
-  const answerQuery = router?.query?.answerId
-  const answerId = Array.isArray(answerQuery) ? answerQuery[0] : answerQuery
-
-  const entity = `${COMMENT_DOMAIN.routine}:${answerId ?? ''}`
-
-  const element = document.querySelector('#comments-list')
-
-  const scrollToShowLastComment = () => {
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth', block: 'end' })
-    }
-  }
-
-  const needCallToAction = useMemo(() => {
-    return answerDetailed.answers.some((answer) => {
-      if (answer.values) {
-        if (
-          answer.type === 'value_range' &&
-          Number(answer.values[answer.values.length - 1].value) <= 3
-        )
-          return true
-
-        if (
-          answer.type === 'emoji_scale' &&
-          Number(answer.values[answer.values.length - 1].value) <= 2
-        )
-          return true
-
-        if (answer.type === 'road_block' && answer.values[answer.values.length - 2].value === 'y')
-          return true
-      }
-
-      return false
-    })
-  }, [answerDetailed.answers])
-
-  useEffect(() => {
-    if (answerId && isLoaded) {
-      getCommentsByEntity({ entity })
-      setHasCallToAction(needCallToAction)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [answerId, answerDetailed, isLoaded])
-
-  useEffect(() => {
-    if (isLoaded) {
-      if (answerId) {
-        getAnswerDetailed(answerId, intl.locale)
-      }
-
-      if (element) {
-        element.scrollIntoView({ block: 'start', behavior: 'smooth' })
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [answerId, element, entity, isLoaded])
-
-  return (
-    <Stack>
-      {answerId && answerDetailed.answers.length > 0 && (
-        <>
-          <UserAnswer user={answerDetailed.user} />
-          <Flex w="100%" alignItems="center" justifyContent="center">
-            <Divider textAlign="center" width="96%" borderColor="new-gray.400" />
-          </Flex>
-        </>
-      )}
-      <ScrollableItem maxH="750px" p="0 12px">
-        {answerId && answerDetailed.answers.length > 0 ? (
-          <div id="comments-list">
-            <AnswerContent answerId={answerId} isLoaded={isLoaded && isUserDetailedLoaded} />
-            <RoutineComments
-              answerId={answerId}
-              comments={comments}
-              answerOwner={answerDetailed.user.firstName}
-            />
-            <RoutineCommentsInput
-              showLastComment={scrollToShowLastComment}
-              routineUser={answerDetailed.user.firstName}
-              domainEntityId={answerId}
-            />
-          </div>
-        ) : (
-          <RoutinesOverview
-            after={after}
-            before={before}
-            week={week}
-            teamId={teamId}
-            isLoaded={isLoaded}
-          />
-        )}
-      </ScrollableItem>
-    </Stack>
-  )
-}
-
-export default RetrospectiveTabContentView
diff --git a/src/components/Routine/RetrospectiveTab/retrospective-tab-content.tsx b/src/components/Routine/RetrospectiveTab/retrospective-tab-content.tsx
index 90dc43a94..14fc01c07 100644
--- a/src/components/Routine/RetrospectiveTab/retrospective-tab-content.tsx
+++ b/src/components/Routine/RetrospectiveTab/retrospective-tab-content.tsx
@@ -10,11 +10,9 @@ import {
   useDisclosure,
   Link,
 } from '@chakra-ui/react'
-import { format, parse, differenceInDays } from 'date-fns'
 import { useRouter } from 'next/router'
-import React, { memo, useCallback, useEffect, useState } from 'react'
+import React from 'react'
 import { useIntl } from 'react-intl'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 
 import { CircleArrowRight } from 'src/components/Icon'
 import CircleIcon from 'src/components/Icon/Circle'
@@ -22,192 +20,36 @@ import GearIcon from 'src/components/Icon/Gear'
 import messages from 'src/components/Page/Team/Tabs/content/messages'
 import { NotificationSettingsModal } from 'src/components/Routine/NotificationSettings'
 import { Team } from 'src/components/Team/types'
-import { GraphQLEffect } from 'src/components/types'
-import { answerSummaryAtom } from 'src/state/recoil/routine/answer-summary'
-import { answerSummaryPaginationAtom } from 'src/state/recoil/routine/cursor-answer-summary-pagination'
-import {
-  getRoutineDateRangeDateFormat,
-  routineDatesRangeAtom,
-} from 'src/state/recoil/routine/routine-dates-range'
-import { answerSummaryLoadStateAtom } from 'src/state/recoil/routine/users-summary-load-state'
-import { teamAtomFamily } from 'src/state/recoil/team'
-import { usersCompany } from 'src/state/recoil/team/users-company'
-
-import { useRoutineNotificationSettings } from '../hooks/getRoutineNotificationSettings'
-import { useAnswerSummaryPagination } from '../hooks/useAnswerSummaryPagination'
-import { useFetchSummaryData } from '../hooks/useFetchSummaryData'
 
 import AnswersComponent from './Answers'
-import RetrospectiveTabContentView from './retrospective-tab-content-view'
-
-export type AnswerType = {
-  id: string
-  user: string
-  feeling: number
-  createdAt: string
-  comments: number
-}
-
-interface RetrospectiveTabContent {
-  teamId: Team['id']
-  answerQuery: string
-}
+import AnswerViewContent from './Answers/AnswerView'
+import { useLogic } from './use-logic'
 
 interface RetrospectiveTabContentProperties {
   teamId: Team['id']
   isLoading?: boolean
 }
 
-export interface AnswerSummary {
-  id?: string
-  userId: string
-  name: string
-  picture?: string
-  latestStatusReply?: string
-  timestamp?: Date
-  commentCount?: number
-}
-
-export const formatUUIDArray = (uuids: string[]) => {
-  return "['" + uuids.join("', '") + "']"
-}
-
-const RetrospectiveTabContent = memo(({ teamId, isLoading }: RetrospectiveTabContentProperties) => {
+const RetrospectiveTabContent = ({ teamId, isLoading }: RetrospectiveTabContentProperties) => {
   const intl = useIntl()
   const router = useRouter()
-
-  const [isAnswerSummaryLoading, setIsAnswerSummaryLoading] = useRecoilState(
-    answerSummaryLoadStateAtom,
-  )
-  const [isFirstTime, setIsFirstTime] = useState(false)
-
-  const { limitedTeamUsers } = useAnswerSummaryPagination(teamId)
-  const { fetchAnswers } = useFetchSummaryData()
-
-  const [answersSummary, setAnswersSummary] = useRecoilState(answerSummaryAtom)
-  const team = useRecoilValue(teamAtomFamily(teamId))
-  const canEditTeam = team?.policy?.update === GraphQLEffect.ALLOW
-  const { teamOptedOut, toggleDisabledTeam } = useRoutineNotificationSettings(teamId)
   const { isOpen, onOpen, onClose } = useDisclosure()
 
-  const toggleNotifcation = () => {
-    toggleDisabledTeam(teamId)
-  }
-
-  const [{ after, before, week }, setRoutineDatesRange] = useRecoilState(routineDatesRangeAtom)
-  const { after: afterQuery, before: beforeQuery } = router.query
-  const afterQueryData = Array.isArray(afterQuery) ? afterQuery[0] : afterQuery
-  const beforeQueryData = Array.isArray(beforeQuery) ? beforeQuery[0] : beforeQuery
-  const setAnswerSummaryPaginationData = useSetRecoilState(answerSummaryPaginationAtom)
-  const setUsersCompany = useSetRecoilState(usersCompany)
-
-  const handleGetNoCurrentAnswers = useCallback(
-    async (after: Date, before: Date) => {
-      setIsAnswerSummaryLoading(true)
-      const showedUsersIds = answersSummary.map((answer) => answer.userId)
-      setAnswersSummary([])
-
-      const newFormattedData = await fetchAnswers({
-        teamId,
-        after,
-        before,
-        teamUsersIds: showedUsersIds,
-      })
-      if (newFormattedData) setAnswersSummary(newFormattedData)
-      setIsAnswerSummaryLoading(false)
-    },
-    [answersSummary, fetchAnswers, setAnswersSummary, setIsAnswerSummaryLoading, teamId],
-  )
-
-  const fetchAnswerSummaryData = useCallback(async () => {
-    const teamUsersIds = limitedTeamUsers.map((user) => user.id)
-
-    const usersAreBeingRequestedForTheFirstTime = !teamUsersIds.some((userId) => {
-      return answersSummary.some((user) => user.userId === userId)
-    })
-
-    if (usersAreBeingRequestedForTheFirstTime && teamUsersIds.length > 0) {
-      setIsAnswerSummaryLoading(true)
-      setAnswerSummaryPaginationData({
-        lastLoadedUserId: teamUsersIds[teamUsersIds.length - 1],
-        teamId,
-      })
-      const newFormattedData = await fetchAnswers({ teamId, after, before, teamUsersIds })
-      if (newFormattedData)
-        setAnswersSummary((previousAnswers) => [...previousAnswers, ...newFormattedData])
-      setIsAnswerSummaryLoading(false)
-    }
-  }, [
+  const {
+    loadingAnswers,
     limitedTeamUsers,
-    answersSummary,
-    setIsAnswerSummaryLoading,
-    setAnswerSummaryPaginationData,
-    teamId,
-    fetchAnswers,
+    dataAnswers,
+    canEditTeam,
+    teamOptedOut,
+    usersSelected,
     after,
     before,
-    setAnswersSummary,
-  ])
-
-  useEffect(() => {
-    if (after && before) {
-      router.push(
-        {
-          query: {
-            ...(router?.query ?? {}),
-            after: format(after, 'dd/MM/yyyy'),
-            before: format(before, 'dd/MM/yyyy'),
-          },
-        },
-        undefined,
-        { shallow: true },
-      )
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [after, before])
-
-  useEffect(() => {
-    if (afterQueryData && beforeQueryData) {
-      const parsedAfter = parse(afterQueryData, 'dd/MM/yyyy', new Date())
-      const parsedBefore = parse(beforeQueryData, 'dd/MM/yyyy', new Date())
-      const { week } = getRoutineDateRangeDateFormat(parsedAfter)
-
-      const diffAfter = parsedAfter ? differenceInDays(after, parsedAfter) : 0
-      const diffBefore = parsedBefore ? differenceInDays(before, parsedBefore) : 0
-
-      if (diffAfter || diffBefore) {
-        setRoutineDatesRange({
-          after: diffAfter ? parsedAfter : after,
-          before: diffBefore ? parsedBefore : before,
-          week,
-        })
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    if (isAnswerSummaryLoading) return
-    if (limitedTeamUsers.length === 0) return
-    if (!isFirstTime) return
-    setIsFirstTime(false)
-    fetchAnswerSummaryData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [limitedTeamUsers])
-
-  const handleViewMore = useCallback(() => {
-    if (isAnswerSummaryLoading) return
-
-    if (limitedTeamUsers.length === 0) return
-    fetchAnswerSummaryData()
-  }, [fetchAnswerSummaryData, isAnswerSummaryLoading, limitedTeamUsers.length])
-
-  useEffect(() => {
-    setAnswersSummary([])
-    setUsersCompany([])
-    setIsFirstTime(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [teamId])
+    week,
+    toggleNotifcation,
+    setNewDate,
+    handleViewMore,
+    setUsersSelected,
+  } = useLogic(teamId, router)
 
   return (
     <Stack spacing={10}>
@@ -290,12 +132,17 @@ const RetrospectiveTabContent = memo(({ teamId, isLoading }: RetrospectiveTabCon
           before={before}
           week={week}
           teamId={teamId}
+          dataAnswers={dataAnswers}
+          loadMore={limitedTeamUsers.length > 0}
+          usersSelected={usersSelected}
+          setNewDate={setNewDate}
+          loadingAnswers={loadingAnswers}
           handleViewMore={handleViewMore}
-          onGetNoCurrentAnswers={handleGetNoCurrentAnswers}
+          setUsersSelected={setUsersSelected}
         />
 
         <Divider orientation="vertical" borderColor="new-gray.400" />
-        <RetrospectiveTabContentView
+        <AnswerViewContent
           after={after}
           before={before}
           week={week}
@@ -312,6 +159,6 @@ const RetrospectiveTabContent = memo(({ teamId, isLoading }: RetrospectiveTabCon
       />
     </Stack>
   )
-})
+}
 
 export default RetrospectiveTabContent
diff --git a/src/components/Routine/RetrospectiveTab/types.ts b/src/components/Routine/RetrospectiveTab/types.ts
new file mode 100644
index 000000000..aeb41ff8e
--- /dev/null
+++ b/src/components/Routine/RetrospectiveTab/types.ts
@@ -0,0 +1,70 @@
+import { Team } from 'src/components/Team/types'
+import { User } from 'src/components/User/types'
+
+export type AnswerType = {
+  id: string
+  user: string
+  feeling: number
+  createdAt: string
+  comments: number
+}
+
+export type answerHistory = {
+  id?: string
+  startDate: string
+  finishDate: string
+}
+
+type answerValue = {
+  value: string
+  timestamp: string
+}
+
+export type routineAnswer = {
+  length: number
+  id: string
+  heading: string
+  type: string
+  value?: string
+  values?: answerValue[]
+  conditional?: {
+    dependsOn: string
+  }
+  dependsThat?: routineAnswer
+  userThatAnswered: User
+}
+
+export interface AnswerDetails {
+  user: Partial<User>
+  history: answerHistory[]
+  answers: routineAnswer[]
+}
+
+export interface RetrospectiveTabContent {
+  teamId: Team['id']
+  answerQuery: string
+}
+
+export interface AnswerSummary {
+  id?: string
+  userId: string
+  name: string
+  picture?: string
+  latestStatusReply?: string
+  timestamp?: Date
+  commentCount?: number
+}
+
+export interface AverageData {
+  timestamp: string
+  average: number
+  total?: number
+}
+
+export interface OverviewData {
+  overview?: {
+    feeling: AverageData[]
+    productivity: AverageData[]
+    roadblock: AverageData[]
+  }
+}
diff --git a/src/components/Routine/RetrospectiveTab/use-logic.ts b/src/components/Routine/RetrospectiveTab/use-logic.ts
new file mode 100644
index 000000000..06561b727
--- /dev/null
+++ b/src/components/Routine/RetrospectiveTab/use-logic.ts
@@ -0,0 +1,160 @@
+/* eslint-disable import/order */
+import { useEffect, useState } from 'react'
+import { format, parse, differenceInDays } from 'date-fns'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+import { GraphQLEffect } from 'src/components/types'
+
+import { teamAtomFamily } from 'src/state/recoil/team'
+import {
+  getRoutineDateRangeDateFormat,
+  routineDatesRangeAtom,
+} from 'src/state/recoil/routine/routine-dates-range'
+
+import { useAnswerSummaryPagination } from '../hooks/useAnswerSummaryPagination'
+import { useGetAnswersMutation } from '../hooks/new/use-get-answers'
+import { NextRouter } from 'next/router'
+import { useNotificationSettings } from '../hooks/new/use-get-notifications-settings'
+import { filteredUsersCompany, selectUserFromCompany } from 'src/state/recoil/team/users-company'
+import meAtom from 'src/state/recoil/user/me'
+
+export const formatUUIDArray = (uuids: string[]) => {
+  return "['" + uuids.join("', '") + "']"
+}
+
+export const useLogic = (teamId: string, router: NextRouter) => {
+  // Local const
+  const REQUEST_LIMIT = 10
+
+  // Local states
+  const [usersSelected, setUsersSelected] = useState<string[]>([])
+
+  // Global states
+  const [{ after, before, week }, setRoutineDatesRange] = useRecoilState(routineDatesRangeAtom)
+  const team = useRecoilValue(teamAtomFamily(teamId))
+  const teamUsers = useRecoilValue(filteredUsersCompany(teamId))
+  const userID = useRecoilValue(meAtom)
+  const me = useRecoilValue(selectUserFromCompany(userID))
+
+  // Permission
+  const canEditTeam = team?.policy?.update === GraphQLEffect.ALLOW
+
+  // Hooks
+  const { teamOptedOut, toggleDisabledTeam } = useNotificationSettings(teamId)
+  const { limitedTeamUsers } = useAnswerSummaryPagination(teamId, usersSelected)
+
+  const {
+    data: dataAnswers,
+    isLoading: loadingAnswers,
+    refetch: refetchAnswers,
+  } = useGetAnswersMutation({
+    teamId,
+    after,
+    before,
+    teamUsersIds: usersSelected,
+  })
+
+  const toggleNotifcation = () => {
+    toggleDisabledTeam(teamId)
+  }
+
+  const updateUsers = () => {
+    const isUserFromTeam = me?.id && teamUsers.some(({ id }) => id === me.id)
+    const companyUsersWithMe = isUserFromTeam
+      ? [me, ...teamUsers.filter(({ id }) => id !== me?.id)]
+      : teamUsers
+    const filteredTeamUsers = companyUsersWithMe.filter((user) => !usersSelected.includes(user.id))
+    const limitedTeamUsers = filteredTeamUsers.slice(0, REQUEST_LIMIT)
+    return limitedTeamUsers.map((item) => item.id)
+  }
+
+  const handleViewMore = () => {
+    const teamUsersIds = updateUsers()
+    setUsersSelected((previousAnswers) => [
+      ...previousAnswers,
+      ...teamUsersIds.filter((item) => !previousAnswers.includes(item)),
+    ])
+  }
+
+  const setNewDate = async (newDate: Date) => {
+    const dateRange = getRoutineDateRangeDateFormat(newDate)
+
+    router.push(
+      {
+        query: {
+          ...(router?.query ?? {}),
+          before: format(dateRange.before, 'dd/MM/yyyy'),
+          after: format(dateRange.after, 'dd/MM/yyyy'),
+        },
+      },
+      undefined,
+      { shallow: true },
+    )
+
+    await refetchAnswers()
+  }
+
+  useEffect(() => {
+    if (!me) return
+    handleViewMore()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [teamUsers, me])
+
+  // Re-render parts
+  useEffect(() => {
+    if (after && before) {
+      router.push(
+        {
+          query: {
+            ...(router?.query ?? {}),
+            after: format(after, 'dd/MM/yyyy'),
+            before: format(before, 'dd/MM/yyyy'),
+          },
+        },
+        undefined,
+        { shallow: true },
+      )
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [after, before])
+
+  useEffect(() => {
+    const { after: afterQuery, before: beforeQuery } = router.query
+    const afterQueryData = Array.isArray(afterQuery) ? afterQuery[0] : afterQuery
+    const beforeQueryData = Array.isArray(beforeQuery) ? beforeQuery[0] : beforeQuery
+
+    if (afterQueryData && beforeQueryData) {
+      const parsedAfter = parse(afterQueryData, 'dd/MM/yyyy', new Date())
+      const parsedBefore = parse(beforeQueryData, 'dd/MM/yyyy', new Date())
+      const { week } = getRoutineDateRangeDateFormat(parsedAfter)
+
+      const diffAfter = parsedAfter ? differenceInDays(after, parsedAfter) : 0
+      const diffBefore = parsedBefore ? differenceInDays(before, parsedBefore) : 0
+
+      if (diffAfter || diffBefore) {
+        setRoutineDatesRange({
+          after: diffAfter ? parsedAfter : after,
+          before: diffBefore ? parsedBefore : before,
+          week,
+        })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.query])
+
+  return {
+    loadingAnswers,
+    limitedTeamUsers,
+    dataAnswers,
+    canEditTeam,
+    teamOptedOut,
+    after,
+    before,
+    week,
+    usersSelected,
+    toggleNotifcation,
+    setNewDate,
+    handleViewMore,
+    setUsersSelected,
+  }
+}
diff --git a/src/components/Routine/hooks/getAnswerDetailed/index.ts b/src/components/Routine/hooks/getAnswerDetailed/index.ts
deleted file mode 100644
index c1182e247..000000000
--- a/src/components/Routine/hooks/getAnswerDetailed/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { useAnswerDetailed } from './get-answer-detailed'
-
-export default useAnswerDetailed
diff --git a/src/components/Routine/hooks/getCommentsByEntity/get-comments-by-entity.tsx b/src/components/Routine/hooks/getCommentsByEntity/get-comments-by-entity.tsx
index 0f8c370fe..333df9c21 100644
--- a/src/components/Routine/hooks/getCommentsByEntity/get-comments-by-entity.tsx
+++ b/src/components/Routine/hooks/getCommentsByEntity/get-comments-by-entity.tsx
@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query'
 import { useContext } from 'react'
 import { useRecoilState } from 'recoil'
 
@@ -26,3 +27,20 @@ export const useGetCommentsByEntity = () => {
 
   return { getCommentsByEntity, comments, refatch }
 }
+
+export const useGetCommentsByEntityMutation = ({ entity }: { entity?: Comment['entity'] }) => {
+  const { servicesPromise } = useContext(ServicesContext)
+
+  const query = useQuery({
+    queryKey: [`routines:getCommentsByEntity`, entity],
+    queryFn: async () => {
+      if (!entity) return
+      const { comments } = await servicesPromise
+
+      const { data } = await comments.get<Comment[]>(`/comments/${entity}`)
+      return data
+    },
+  })
+
+  return query
+}
diff --git a/src/components/Routine/hooks/getCommentsByEntity/index.ts b/src/components/Routine/hooks/getCommentsByEntity/index.ts
index 447664bbb..970d1a011 100644
--- a/src/components/Routine/hooks/getCommentsByEntity/index.ts
+++ b/src/components/Routine/hooks/getCommentsByEntity/index.ts
@@ -1 +1 @@
-export { useGetCommentsByEntity } from './get-comments-by-entity'
+export { useGetCommentsByEntity, useGetCommentsByEntityMutation } from './get-comments-by-entity'
diff --git a/src/components/Routine/hooks/getPendingRoutine/index.ts b/src/components/Routine/hooks/getPendingRoutine/index.ts
deleted file mode 100644
index 9fec2adf4..000000000
--- a/src/components/Routine/hooks/getPendingRoutine/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { usePendingRoutines } from './get-pending-routines'
diff --git a/src/components/Routine/hooks/getRoutineForm/index.ts b/src/components/Routine/hooks/getRoutineForm/index.ts
deleted file mode 100644
index f83d7b718..000000000
--- a/src/components/Routine/hooks/getRoutineForm/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useRoutineFormQuestions } from './get-routine-form'
diff --git a/src/components/Routine/hooks/getRoutineNotificationSettings/index.ts b/src/components/Routine/hooks/getRoutineNotificationSettings/index.ts
deleted file mode 100644
index 4f27264e2..000000000
--- a/src/components/Routine/hooks/getRoutineNotificationSettings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useRoutineNotificationSettings } from './get-routine-notification-settings'
diff --git a/src/components/Routine/hooks/index.ts b/src/components/Routine/hooks/index.ts
index bb3d84764..79ce795ea 100644
--- a/src/components/Routine/hooks/index.ts
+++ b/src/components/Routine/hooks/index.ts
@@ -1,3 +1,3 @@
 export { default as useGetEmoji } from './getEmoji'
-export { useRoutineFormQuestions } from './getRoutineForm'
-export { usePendingRoutines } from './getPendingRoutine'
+export { useRoutineFormQuestions } from './new/use-get-routine-form'
+export { usePendingRoutines } from './new/use-get-pending-routines'
diff --git a/src/components/Routine/hooks/deleteAnswer/messages.ts b/src/components/Routine/hooks/messages.ts
similarity index 61%
rename from src/components/Routine/hooks/deleteAnswer/messages.ts
rename to src/components/Routine/hooks/messages.ts
index cd1ffebc9..0a2b948d2 100644
--- a/src/components/Routine/hooks/deleteAnswer/messages.ts
+++ b/src/components/Routine/hooks/messages.ts
@@ -1,6 +1,9 @@
 import { defineMessages } from 'react-intl'
 
-type deleteRoutineAnswerMessages = 'successDeleteToastMessage' | 'warningDeleteToastMessage'
+type deleteRoutineAnswerMessages =
+  | 'successDeleteToastMessage'
+  | 'warningDeleteToastMessage'
+  | 'aRequiredQuestionHasNotBeenAnswered'
 
 export default defineMessages<deleteRoutineAnswerMessages>({
   successDeleteToastMessage: {
@@ -15,4 +18,9 @@ export default defineMessages<deleteRoutineAnswerMessages>({
     description:
       'This message appears in a toast indicating that it was not possible to delete a routines response.',
   },
+  aRequiredQuestionHasNotBeenAnswered: {
+    defaultMessage: 'Essa pergunta é obrigatória!',
+    id: '1lccXL',
+    description: 'This message appears to indicate that a required question has not been answered.',
+  },
 })
diff --git a/src/components/Routine/hooks/deleteAnswer/delete-routine-answer.tsx b/src/components/Routine/hooks/new/use-delete-answer.ts
similarity index 63%
rename from src/components/Routine/hooks/deleteAnswer/delete-routine-answer.tsx
rename to src/components/Routine/hooks/new/use-delete-answer.ts
index 35ec62bab..9d6b57f56 100644
--- a/src/components/Routine/hooks/deleteAnswer/delete-routine-answer.tsx
+++ b/src/components/Routine/hooks/new/use-delete-answer.ts
@@ -1,4 +1,5 @@
 import { useToast } from '@chakra-ui/react'
+import { useMutation } from '@tanstack/react-query'
 import { useRouter } from 'next/router'
 import { useContext } from 'react'
 import { useIntl } from 'react-intl'
@@ -9,28 +10,27 @@ import { useRoutineTab } from 'src/components/Routine/hooks/getRoutineTab/'
 import { answerSummaryAtom } from 'src/state/recoil/routine/answer-summary'
 import { overviewDataAtom } from 'src/state/recoil/routine/overview-data'
 
-import { OverviewData } from '../../RetrospectiveTab/RoutinesOverview'
-import { AnswerType } from '../../RetrospectiveTab/retrospective-tab-content'
-import { usePendingRoutines } from '../getPendingRoutine'
+import { AnswerType } from '../../RetrospectiveTab/types'
+import messages from '../messages'
+import { usePendingRoutines } from '../new/use-get-pending-routines'
 
-import messages from './messages'
-
-export const useDeleteRoutineAnswer = () => {
+export const useDeleteAnswer = () => {
   const { servicesPromise } = useContext(ServicesContext)
   const { getPendingRoutines } = usePendingRoutines()
-  const intl = useIntl()
 
+  const intl = useIntl()
   const toaster = useToast()
   const router = useRouter()
 
   const queryPath = router.query?.id
   const [id] = Array.isArray(queryPath) ? queryPath : [queryPath]
+
   const [answerSummary, setAnswerSummary] = useRecoilState(answerSummaryAtom)
   const setRoutineOverviewData = useSetRecoilState(overviewDataAtom)
 
   const routineTabName = useRoutineTab()
 
-  const deleteRoutineAnswer = async (answerId: AnswerType['id']) => {
+  const deleteAnswer = async (answerId: AnswerType['id']) => {
     const { routines } = await servicesPromise
 
     const refetchRoutineData = async () => {
@@ -45,18 +45,13 @@ export const useDeleteRoutineAnswer = () => {
       )
       setAnswerSummary(answerSummaryFiltered)
 
-      const { data: answersOverview } = await routines.get<OverviewData>(
-        `/answers/overview/${id ?? ''}`,
-        {
-          params: { includeSubteams: false },
-        },
-      )
+      const answersOverview = await routines.getAnswerOverview(id)
       if (answersOverview) setRoutineOverviewData(answersOverview)
       await getPendingRoutines()
     }
 
     try {
-      await routines.delete(`/answer/${answerId}`)
+      await routines.deleteAnswer(id)
 
       await refetchRoutineData()
       toaster({
@@ -73,5 +68,31 @@ export const useDeleteRoutineAnswer = () => {
     }
   }
 
-  return { deleteRoutineAnswer }
+  return { deleteAnswer }
+}
+
+export const useDeleteAnswerMutation = () => {
+  const intl = useIntl()
+  const toaster = useToast()
+  const { servicesPromise } = useContext(ServicesContext)
+
+  return useMutation({
+    mutationFn: async (answerId: string) => {
+      const { routines } = await servicesPromise
+      return routines.deleteAnswer(answerId)
+    },
+    onSuccess: () => {
+      toaster({
+        title: intl.formatMessage(messages.successDeleteToastMessage),
+        status: 'success',
+      })
+    },
+    onError: (error) => {
+      console.error(error)
+      toaster({
+        title: intl.formatMessage(messages.warningDeleteToastMessage),
+        status: 'error',
+      })
+    },
+  })
 }
diff --git a/src/components/Routine/hooks/getAnswerDetailed/get-answer-detailed.tsx b/src/components/Routine/hooks/new/use-get-answer-detailed.ts
similarity index 57%
rename from src/components/Routine/hooks/getAnswerDetailed/get-answer-detailed.tsx
rename to src/components/Routine/hooks/new/use-get-answer-detailed.ts
index 5d8b2cf86..ae7ff5414 100644
--- a/src/components/Routine/hooks/getAnswerDetailed/get-answer-detailed.tsx
+++ b/src/components/Routine/hooks/new/use-get-answer-detailed.ts
@@ -1,11 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
 import { useContext, useState } from 'react'
 import { useSetRecoilState } from 'recoil'
 
 import { ServicesContext } from 'src/components/Base/ServicesProvider/services-provider'
 import { answerDetailedAtom } from 'src/state/recoil/routine/answer'
 
-import { AnswerDetails } from '../../RetrospectiveTab/Answers/types'
-import { AnswerType } from '../../RetrospectiveTab/retrospective-tab-content'
+import { AnswerType } from '../../RetrospectiveTab/types'
 
 interface useAnswerDetailedProperties {
   isUserDetailedLoaded: boolean
@@ -21,12 +21,7 @@ export const useAnswerDetailed = (): useAnswerDetailedProperties => {
     const useLocaleFormated = locale === 'en-US' ? 'en' : locale.toLocaleLowerCase()
     setIsUserDetailedLoaded(false)
     const { routines } = await servicesPromise
-    const { data } = await routines
-      .get<AnswerDetails>(`answer/${answerId}?locale=${useLocaleFormated}`)
-      .catch((error) => {
-        console.error(error)
-        return { data: undefined }
-      })
+    const data = await routines.getAnswerDetailed(answerId, useLocaleFormated)
 
     if (data) {
       setAnswerDetailed(data)
@@ -36,3 +31,26 @@ export const useAnswerDetailed = (): useAnswerDetailedProperties => {
 
   return { getAnswerDetailed, isUserDetailedLoaded }
 }
+
+export const useGetAnswersDetailedMutation = ({
+  answerId,
+  locale = 'en',
+}: {
+  answerId?: AnswerType['id']
+  locale: string
+}) => {
+  const { servicesPromise } = useContext(ServicesContext)
+
+  const query = useQuery({
+    queryKey: [`routines:getAnswers:${answerId ?? ''}`, answerId],
+    queryFn: async () => {
+      if (!answerId) return
+      const { routines } = await servicesPromise
+      const useLocaleFormated = locale === 'en-US' ? 'en' : locale.toLocaleLowerCase()
+      const data = await routines.getAnswerDetailed(answerId, useLocaleFormated)
+      return data
+    },
+  })
+
+  return query
+}
diff --git a/src/components/Routine/hooks/new/use-get-answers.ts b/src/components/Routine/hooks/new/use-get-answers.ts
new file mode 100644
index 000000000..d79de6f63
--- /dev/null
+++ b/src/components/Routine/hooks/new/use-get-answers.ts
@@ -0,0 +1,91 @@
+import { useQuery } from '@tanstack/react-query'
+import { useContext } from 'react'
+
+import { ServicesContext } from 'src/components/Base/ServicesProvider/services-provider'
+import useAnswerSummaryFormatter from 'src/components/Routine/RetrospectiveTab/Answers/utils/answer-summary-formatter'
+import { AnswerSummary } from 'src/components/Routine/RetrospectiveTab/types'
+import { formatUUIDArray } from 'src/components/Routine/RetrospectiveTab/use-logic'
+import { Team } from 'src/components/Team/types'
+
+type getAnswersProperties = {
+  teamId: Team['id']
+  teamUsersIds: string[]
+  after: Date
+  before: Date
+}
+
+type useGetAnswersProperties = {
+  getAnswers: ({
+    after,
+    before,
+    teamUsersIds,
+  }: getAnswersProperties) => Promise<AnswerSummary[] | undefined>
+}
+
+const useGetAnswers = (): useGetAnswersProperties => {
+  const { servicesPromise } = useContext(ServicesContext)
+  const { formattedAnswerSummary } = useAnswerSummaryFormatter()
+
+  const getAnswers = async ({
+    teamId,
+    after,
+    before,
+    teamUsersIds,
+  }: getAnswersProperties): Promise<AnswerSummary[] | undefined> => {
+    try {
+      const { routines } = await servicesPromise
+
+      const parsetToQueryTeamUsersIDS = encodeURIComponent(formatUUIDArray(teamUsersIds))
+
+      const answersSummaryData = await routines.getAnswers(
+        teamId,
+        parsetToQueryTeamUsersIDS,
+        after,
+        before,
+      )
+
+      const formattedData = formattedAnswerSummary({
+        requestedUsersIDs: teamUsersIds,
+        answerSummary: answersSummaryData,
+      })
+
+      return formattedData
+    } catch (error: unknown) {
+      console.error('Error in useFetchSummaryData:', error)
+    }
+  }
+
+  return { getAnswers }
+}
+
+/**
+ * [useGetAnswersMutation - mutation that fetch answers to retrospective]
+ * @param  {[string]} teamId [Selected team ID]
+ * @param  {[Date]} after [Selected min date range to answers]
+ * @param  {[Date]} before [Selected max date range to answers]
+ * @param  {[string[]]} teamUsersIds [Filter users to get answers]
+ * @return {[AnswerSummary[]]} [Summarized answers]
+ */
+export function useGetAnswersMutation({
+  teamId,
+  after,
+  before,
+  teamUsersIds,
+}: getAnswersProperties) {
+  const { servicesPromise } = useContext(ServicesContext)
+
+  const query = useQuery({
+    queryKey: [`routines:getAnswer:${teamId}`, [teamId, after, before, ...teamUsersIds]],
+    queryFn: async () => {
+      const { routines } = await servicesPromise
+      if (teamUsersIds.length === 0) return []
+      const queryTeamUsersIds = encodeURIComponent(formatUUIDArray(teamUsersIds))
+      const data = await routines.getAnswers(teamId, queryTeamUsersIds, after, before)
+      return data
+    },
+  })
+
+  return query
+}
+
+export default useGetAnswers
diff --git a/src/components/Routine/hooks/getRoutineNotificationSettings/get-routine-notification-settings.tsx b/src/components/Routine/hooks/new/use-get-notifications-settings.ts
similarity index 81%
rename from src/components/Routine/hooks/getRoutineNotificationSettings/get-routine-notification-settings.tsx
rename to src/components/Routine/hooks/new/use-get-notifications-settings.ts
index 7e6620e83..769490c8d 100644
--- a/src/components/Routine/hooks/getRoutineNotificationSettings/get-routine-notification-settings.tsx
+++ b/src/components/Routine/hooks/new/use-get-notifications-settings.ts
@@ -2,25 +2,19 @@ import { useContext, useEffect, useState } from 'react'
 
 import { ServicesContext } from 'src/components/Base/ServicesProvider/services-provider'
 import { Team } from 'src/components/Team/types'
-
-interface RoutineSettings {
-  id: string
-  companyId: string
-  disabledTeams: string[]
-  cron: string
-}
+import { RoutineSettings } from 'src/services/routines/types'
 
 const hasTeamOptedOut = (disabledTeamsIds: string[], teamId: string) => {
   return disabledTeamsIds.includes(teamId)
 }
 
-export const useRoutineNotificationSettings = (teamId: string) => {
+export const useNotificationSettings = (teamId: string) => {
   const { servicesPromise } = useContext(ServicesContext)
   const [companySettings, setCompanySettings] = useState<RoutineSettings>()
 
   const getRoutineNotificationSettings = async () => {
     const { routines } = await servicesPromise
-    const { data } = await routines.get<RoutineSettings>('settings')
+    const data = await routines.getSettings()
 
     if (data) {
       setCompanySettings(data)
@@ -31,7 +25,7 @@ export const useRoutineNotificationSettings = (teamId: string) => {
     disabledTeams: RoutineSettings['disabledTeams'],
   ) => {
     const { routines } = await servicesPromise
-    const { data } = await routines.patch<RoutineSettings>('settings', { disabledTeams })
+    const data = await routines.updateDisabledTeams(disabledTeams)
 
     if (data) {
       setCompanySettings(data)
diff --git a/src/components/Routine/hooks/getPendingRoutine/get-pending-routines.tsx b/src/components/Routine/hooks/new/use-get-pending-routines.ts
similarity index 91%
rename from src/components/Routine/hooks/getPendingRoutine/get-pending-routines.tsx
rename to src/components/Routine/hooks/new/use-get-pending-routines.ts
index 976225bbe..d19091518 100644
--- a/src/components/Routine/hooks/getPendingRoutine/get-pending-routines.tsx
+++ b/src/components/Routine/hooks/new/use-get-pending-routines.ts
@@ -10,7 +10,7 @@ export const usePendingRoutines = () => {
 
   const getPendingRoutines = async () => {
     const { routines } = await servicesPromise
-    const { data: pendingRoutines } = await routines.get('/pending')
+    const pendingRoutines = await routines.getPendingRoutines()
     if (pendingRoutines) setPendingRoutines(pendingRoutines)
   }
 
diff --git a/src/components/Routine/hooks/getRoutineForm/get-routine-form.tsx b/src/components/Routine/hooks/new/use-get-routine-form.ts
similarity index 83%
rename from src/components/Routine/hooks/getRoutineForm/get-routine-form.tsx
rename to src/components/Routine/hooks/new/use-get-routine-form.ts
index 90eec4177..8ba29ebdb 100644
--- a/src/components/Routine/hooks/getRoutineForm/get-routine-form.tsx
+++ b/src/components/Routine/hooks/new/use-get-routine-form.ts
@@ -3,7 +3,6 @@ import { useIntl } from 'react-intl'
 import { useSetRecoilState, useRecoilValue } from 'recoil'
 
 import { ServicesContext } from 'src/components/Base/ServicesProvider/services-provider'
-import { FormQuestion } from 'src/components/Routine/Drawer/Questions/types'
 import {
   routineFormQuestions,
   retrospectiveRoutineSelector,
@@ -16,11 +15,10 @@ export const useRoutineFormQuestions = () => {
   const intl = useIntl()
 
   const useLocaleFormated = intl.locale === 'en-US' ? 'en' : intl.locale.toLocaleLowerCase()
-  const requestFormQuestionsPath = `bud-form?intl=${useLocaleFormated}`
 
   const getRoutineQuestions = async () => {
     const { routines } = await servicesPromise
-    const { data } = await routines.get<{ questions: FormQuestion[] }>(requestFormQuestionsPath)
+    const data = await routines.getRoutineForm(useLocaleFormated)
 
     if (data?.questions) {
       const mappedQuestions = data.questions.map((question) => ({
diff --git a/src/components/Routine/hooks/setRoutineFormAnswers/set-routine-form-answers.tsx b/src/components/Routine/hooks/new/use-routine-form-answer.ts
similarity index 90%
rename from src/components/Routine/hooks/setRoutineFormAnswers/set-routine-form-answers.tsx
rename to src/components/Routine/hooks/new/use-routine-form-answer.ts
index 215cffc81..dd19871eb 100644
--- a/src/components/Routine/hooks/setRoutineFormAnswers/set-routine-form-answers.tsx
+++ b/src/components/Routine/hooks/new/use-routine-form-answer.ts
@@ -24,11 +24,9 @@ import {
 import { routineAnswersReturnedData } from 'src/state/recoil/routine/user-teams'
 import { answerSummaryLoadStateAtom } from 'src/state/recoil/routine/users-summary-load-state'
 
-import { OverviewData } from '../../RetrospectiveTab/RoutinesOverview'
-import { usePendingRoutines } from '../getPendingRoutine'
-import { useFetchSummaryData } from '../useFetchSummaryData'
-
-import submitAnswersMessages from './messages'
+import submitAnswersMessages from '../messages'
+import useGetAnswers from '../new/use-get-answers'
+import { usePendingRoutines } from '../new/use-get-pending-routines'
 
 export const useRoutineFormAnswers = () => {
   const setUserTeams = useSetRecoilState(routineAnswersReturnedData)
@@ -56,7 +54,7 @@ export const useRoutineFormAnswers = () => {
   const [answersSummary, setAnswerSummary] = useRecoilState(answerSummaryAtom)
   const { after, before } = useRecoilValue(routineDatesRangeAtom)
   const setRoutineOverviewData = useSetRecoilState(overviewDataAtom)
-  const { fetchAnswers } = useFetchSummaryData()
+  const { getAnswers } = useGetAnswers()
 
   const refetchRoutineData = async (teamId: Team['id']) => {
     setIsAnswerSummaryLoading(true)
@@ -65,7 +63,7 @@ export const useRoutineFormAnswers = () => {
     setAnswerSummary([])
     const { routines } = await servicesPromise
 
-    const formattedData = await fetchAnswers({
+    const formattedData = await getAnswers({
       teamId,
       after,
       before,
@@ -75,12 +73,7 @@ export const useRoutineFormAnswers = () => {
     if (formattedData) setAnswerSummary(formattedData)
     setIsAnswerSummaryLoading(false)
 
-    const { data: answersOverview } = await routines.get<OverviewData>(
-      `/answers/overview/${teamId}`,
-      {
-        params: { includeSubteams: false },
-      },
-    )
+    const answersOverview = await routines.getAnswerOverview(teamId)
     if (answersOverview) setRoutineOverviewData(answersOverview)
     await getPendingRoutines()
   }
@@ -130,7 +123,7 @@ export const useRoutineFormAnswers = () => {
       if (hiddenElement) answersThatShouldBeHidden.push(answer)
     }
 
-    const { data: userTeams } = await routines.post<Team[]>('/answer', [
+    const userTeams = await routines.createAnswer([
       ...answers.filter((answer) => !answersThatShouldBeHidden.includes(answer)),
       ...mappedHiddenAnswers,
     ])
diff --git a/src/components/Routine/hooks/setRoutineFormAnswers/messages.ts b/src/components/Routine/hooks/setRoutineFormAnswers/messages.ts
deleted file mode 100644
index 3b54d5a1a..000000000
--- a/src/components/Routine/hooks/setRoutineFormAnswers/messages.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { defineMessages } from 'react-intl'
-
-type setFormAnswersMessages = 'aRequiredQuestionHasNotBeenAnswered'
-
-export default defineMessages<setFormAnswersMessages>({
-  aRequiredQuestionHasNotBeenAnswered: {
-    defaultMessage: 'Essa pergunta é obrigatória!',
-    id: '1lccXL',
-    description: 'This message appears to indicate that a required question has not been answered.',
-  },
-})
diff --git a/src/components/Routine/hooks/useAnswerSummaryPagination/use-answer-summary-pagination.tsx b/src/components/Routine/hooks/useAnswerSummaryPagination/use-answer-summary-pagination.tsx
index 55252cf53..c016878a7 100644
--- a/src/components/Routine/hooks/useAnswerSummaryPagination/use-answer-summary-pagination.tsx
+++ b/src/components/Routine/hooks/useAnswerSummaryPagination/use-answer-summary-pagination.tsx
@@ -2,7 +2,6 @@ import { useRecoilValue } from 'recoil'
 
 import { Team } from 'src/components/Team/types'
 import { User } from 'src/components/User/types'
-import { answerSummaryAtom } from 'src/state/recoil/routine/answer-summary'
 import { filteredUsersCompany, selectUserFromCompany } from 'src/state/recoil/team/users-company'
 import meAtom from 'src/state/recoil/user/me'
 
@@ -12,27 +11,22 @@ type AnswerSummaryPaginationProperties = {
 
 const REQUEST_LIMIT = 10
 
-const useAnswerSummaryPagination = (teamId: Team['id']): AnswerSummaryPaginationProperties => {
+export const useCheckIfCurrentUserIsFromTeam = (teamId: Team['id']): User[] => {
   const teamUsers = useRecoilValue(filteredUsersCompany(teamId))
-
   const userID = useRecoilValue(meAtom)
-
   const me = useRecoilValue(selectUserFromCompany(userID))
 
   const isUserFromTeam = me?.id && teamUsers.some(({ id }) => id === me.id)
+  return isUserFromTeam ? [me, ...teamUsers.filter(({ id }) => id !== me?.id)] : teamUsers
+}
 
-  const companyUsers = isUserFromTeam
-    ? [me, ...teamUsers.filter(({ id }) => id !== me?.id)]
-    : teamUsers
-
-  const answersSummary = useRecoilValue(answerSummaryAtom)
-
-  const filteredTeamUsers = companyUsers.filter(
-    (user) => !answersSummary.some(({ userId }) => userId === user.id),
-  )
-
+const useAnswerSummaryPagination = (
+  teamId: Team['id'],
+  users: string[],
+): AnswerSummaryPaginationProperties => {
+  const companyUsers = useCheckIfCurrentUserIsFromTeam(teamId)
+  const filteredTeamUsers = companyUsers.filter((user) => !users.includes(user.id))
   const limitedTeamUsers = filteredTeamUsers.slice(0, REQUEST_LIMIT)
-
   return { limitedTeamUsers }
 }
 
diff --git a/src/components/Routine/hooks/useFetchSummaryData/index.ts b/src/components/Routine/hooks/useFetchSummaryData/index.ts
deleted file mode 100644
index d0ab4c423..000000000
--- a/src/components/Routine/hooks/useFetchSummaryData/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as useFetchSummaryData } from './use-fetch-summary-data'
diff --git a/src/components/Routine/hooks/useFetchSummaryData/use-fetch-summary-data.tsx b/src/components/Routine/hooks/useFetchSummaryData/use-fetch-summary-data.tsx
deleted file mode 100644
index c90a25cb4..000000000
--- a/src/components/Routine/hooks/useFetchSummaryData/use-fetch-summary-data.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useCallback, useContext } from 'react'
-
-import { ServicesContext } from 'src/components/Base/ServicesProvider/services-provider'
-import { Team } from 'src/components/Team/types'
-
-import useAnswerSummaryFormatter from '../../RetrospectiveTab/Answers/utils/answer-summary-formatter'
-import { AnswerSummary, formatUUIDArray } from '../../RetrospectiveTab/retrospective-tab-content'
-
-type fetchAnswersProperties = {
-  teamId: Team['id']
-  teamUsersIds: string[]
-  after: Date
-  before: Date
-}
-
-type AnswerSummaryPaginationProperties = {
-  fetchAnswers: ({
-    after,
-    before,
-    teamUsersIds,
-  }: fetchAnswersProperties) => Promise<AnswerSummary[] | undefined>
-}
-
-const useFetchSummaryData = (): AnswerSummaryPaginationProperties => {
-  const { servicesPromise } = useContext(ServicesContext)
-  const { formattedAnswerSummary } = useAnswerSummaryFormatter()
-
-  const fetchAnswers = useCallback(
-    async ({
-      teamId,
-      after,
-      before,
-      teamUsersIds,
-    }: fetchAnswersProperties): Promise<AnswerSummary[] | undefined> => {
-      try {
-        const { routines } = await servicesPromise
-
-        const parsetToQueryTeamUsersIDS = encodeURIComponent(formatUUIDArray(teamUsersIds))
-
-        const { data: answersSummaryData } = await routines.get<AnswerSummary[]>(
-          `/answers/summary/${teamId}`,
-          {
-            params: {
-              before,
-              after,
-              includeSubteams: false,
-              teamUsersIds: parsetToQueryTeamUsersIDS,
-            },
-          },
-        )
-
-        const formattedData = formattedAnswerSummary({
-          requestedUsersIDs: teamUsersIds,
-          answerSummary: answersSummaryData,
-        })
-
-        return formattedData
-      } catch (error: unknown) {
-        console.error('Error in useFetchSummaryData:', error)
-      }
-    },
-    [formattedAnswerSummary, servicesPromise],
-  )
-
-  return { fetchAnswers }
-}
-
-export default useFetchSummaryData
diff --git a/src/components/Team/RoutineHighlightsTable/hooks/getTeamRoutineHighlightsData/get-team-routine-highlights-data.ts b/src/components/Team/RoutineHighlightsTable/hooks/getTeamRoutineHighlightsData/get-team-routine-highlights-data.ts
index 82ac64046..0a7bea7ca 100644
--- a/src/components/Team/RoutineHighlightsTable/hooks/getTeamRoutineHighlightsData/get-team-routine-highlights-data.ts
+++ b/src/components/Team/RoutineHighlightsTable/hooks/getTeamRoutineHighlightsData/get-team-routine-highlights-data.ts
@@ -30,9 +30,7 @@ export const useGetRoutineHighlightsData = (
     try {
       const results: RequestReturnMapped[] = []
       for await (const userId of usersIds) {
-        const { data: routineData } = await routines.get<UserRoutineDataProperties>(
-          `/answers/overview/user/${userId}`,
-        )
+        const routineData = await routines.getAnswerOverviewFromUser(userId)
         results.push({ data: routineData ?? [], userId })
         await delay(350)
       }
diff --git a/src/components/User/LastRetrospectiveAnswerOverview/hooks/use-get-last-retrospective-answer-overview.ts b/src/components/User/LastRetrospectiveAnswerOverview/hooks/use-get-last-retrospective-answer-overview.ts
index e3329e80d..c6651858d 100644
--- a/src/components/User/LastRetrospectiveAnswerOverview/hooks/use-get-last-retrospective-answer-overview.ts
+++ b/src/components/User/LastRetrospectiveAnswerOverview/hooks/use-get-last-retrospective-answer-overview.ts
@@ -24,10 +24,7 @@ export const useGetUserLastRetrospectiveAnswerOverview = (userId: User['id']) =>
       const { routines } = await servicesPromise
       try {
         setIsLoaded(false)
-        const { data: routineData } =
-          await routines.get<UserRetrospectiveAnswerOverviewDataProperties>(
-            `/answers/overview/user/${userId}`,
-          )
+        const routineData = await routines.getAnswerOverviewFromUser(userId)
 
         if (routineData) setUserRoutineData({ ...routineData, userId })
       } catch (error: unknown) {
diff --git a/src/services/index.ts b/src/services/index.ts
index 5c1ea67ab..a17cf2211 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -13,11 +13,12 @@ import { CycleService } from './okr/cycle/cycle.service'
 import { getKeyResultInstance } from './okr/key-result/key-result-instance'
 import { KeyResultService } from './okr/key-result/key-result.service'
 import { getRoutinesInstance } from './routines'
+import { RoutinesService } from './routines/routines.service'
 import { getTaskManagementInstance } from './task-management'
 import { TaskManagementService } from './task-management/task-management.service'
 
 export interface Services {
-  routines: AxiosInstance
+  routines: RoutinesService
   comments: AxiosInstance
   llm: LlmService
   taskManagement: TaskManagementService
@@ -40,7 +41,7 @@ export const getServices = async (
   const authToken = await getAuthToken()
 
   return {
-    routines: configureInstance(getRoutinesInstance(config), authToken),
+    routines: new RoutinesService(configureInstance(getRoutinesInstance(config), authToken)),
     comments: configureInstance(getCommentsInstance(config), authToken),
     llm: new LlmService(configureInstance(getLLMInstance(config), authToken)),
     taskManagement: new TaskManagementService(
diff --git a/src/services/routines/index.ts b/src/services/routines/index.ts
index 4e735c8e3..22ea3a7df 100644
--- a/src/services/routines/index.ts
+++ b/src/services/routines/index.ts
@@ -1 +1 @@
-export { getRoutinesInstance } from './routines-instance'
+export { getRoutinesInstance } from './routines.instance'
diff --git a/src/services/routines/routines-instance.ts b/src/services/routines/routines.instance.ts
similarity index 100%
rename from src/services/routines/routines-instance.ts
rename to src/services/routines/routines.instance.ts
diff --git a/src/services/routines/routines.service.ts b/src/services/routines/routines.service.ts
new file mode 100644
index 000000000..cd91f6a7a
--- /dev/null
+++ b/src/services/routines/routines.service.ts
@@ -0,0 +1,115 @@
+import { AxiosInstance } from 'axios'
+
+import { HighlightCard } from 'src/components/Page/Team/Highlights/highlight-section'
+import { FormQuestion } from 'src/components/Routine/Drawer/Questions/types'
+import {
+  AnswerDetails,
+  AnswerSummary,
+  OverviewData,
+} from 'src/components/Routine/RetrospectiveTab/types'
+import { UserRoutineDataProperties } from 'src/components/Team/RoutineHighlightsTable/types'
+import { Team } from 'src/components/Team/types'
+import { User } from 'src/components/User/types'
+import { RetrospectiveAnswer } from 'src/state/recoil/routine/retrospective-routine-answers'
+
+import { RoutineSettings } from './types'
+
+export class RoutinesService {
+  constructor(private readonly client: AxiosInstance) {}
+
+  async getSettings() {
+    const { data: response } = await this.client.get<RoutineSettings>('settings')
+    return response
+  }
+
+  async updateDisabledTeams(disabledTeams: RoutineSettings['disabledTeams']) {
+    const { data: response } = await this.client.patch<RoutineSettings>('settings', {
+      disabledTeams,
+    })
+    return response
+  }
+
+  async getAnswers(
+    teamId: Team['id'],
+    parsetToQueryTeamUsersIDS: string,
+    after: Date,
+    before: Date,
+  ) {
+    const { data: response } = await this.client.get<AnswerSummary[]>(
+      `/answers/summary/${teamId}`,
+      {
+        params: {
+          before,
+          after,
+          includeSubteams: false,
+          teamUsersIds: parsetToQueryTeamUsersIDS,
+        },
+      },
+    )
+    return response
+  }
+
+  async deleteAnswer(answerId: AnswerSummary['id']) {
+    if (answerId) {
+      await this.client.delete(`/answer/${answerId}`)
+    }
+  }
+
+  async getAnswerOverview(answerId: AnswerSummary['id'], before?: Date, after?: Date) {
+    const parameters = {
+      includeSubteams: false,
+      before,
+      after,
+    }
+    const { data: response } = await this.client.get<OverviewData>(
+      `/answers/overview/${answerId ?? ''}`,
+      { params: parameters },
+    )
+    return response
+  }
+
+  async getAnswerDetailed(answerId: AnswerSummary['id'], useLocaleFormated: string) {
+    if (answerId) {
+      const { data: response } = await this.client.get<AnswerDetails>(
+        `answer/${answerId}?locale=${useLocaleFormated}`,
+      )
+      return response
+    }
+  }
+
+  async getPendingRoutines() {
+    const { data: response } = await this.client.get('/pending')
+    return response
+  }
+
+  async getRoutineForm(useLocaleFormated: string) {
+    const requestFormQuestionsPath = `bud-form?intl=${useLocaleFormated}`
+    const { data: response } = await this.client.get<{ questions: FormQuestion[] }>(
+      requestFormQuestionsPath,
+    )
+    return response
+  }
+
+  async createAnswer(answers: RetrospectiveAnswer[]) {
+    const { data: response } = await this.client.post<Team[]>('/answer', answers)
+    return response
+  }
+
+  async getFlags(id: Team['id']) {
+    const { data: response } = await this.client.get<HighlightCard[] | undefined>(
+      `/answers/flags/${id}`,
+    )
+    return response
+  }
+
+  async getAnswerOverviewFromUser(userId: User['id']) {
+    const { data: response } = await this.client.get<UserRoutineDataProperties>(
+      `/answers/overview/user/${userId}`,
+    )
+    return response
+  }
+
+  async createCompanySettings(companyId: Team['id']) {
+    await this.client.post(`/settings/${companyId}`, {})
+  }
+}
diff --git a/src/services/routines/types.ts b/src/services/routines/types.ts
new file mode 100644
index 000000000..7ae9960c8
--- /dev/null
+++ b/src/services/routines/types.ts
@@ -0,0 +1,6 @@
+export interface RoutineSettings {
+  id: string
+  companyId: string
+  disabledTeams: string[]
+  cron: string
+}
diff --git a/src/state/recoil/routine/answer-summary.ts b/src/state/recoil/routine/answer-summary.ts
index 011b53e52..330e445d8 100644
--- a/src/state/recoil/routine/answer-summary.ts
+++ b/src/state/recoil/routine/answer-summary.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil'
 
-import { AnswerSummary } from 'src/components/Routine/RetrospectiveTab/retrospective-tab-content'
+import { AnswerSummary } from 'src/components/Routine/RetrospectiveTab/types'
 
 import { PREFIX } from './constants'
 
diff --git a/src/state/recoil/routine/get-team-metrics.ts b/src/state/recoil/routine/get-team-metrics.ts
index 9ab02f280..ee2479408 100644
--- a/src/state/recoil/routine/get-team-metrics.ts
+++ b/src/state/recoil/routine/get-team-metrics.ts
@@ -23,15 +23,9 @@ export const getTeamMetrics = (teamId: Team['id'] | undefined) => {
     const { routines } = await servicesPromise
 
     if (teamId) {
-      const { data: answersOverview } = await routines.get<OverviewData>(
-        `/answers/overview/${teamId}`,
-        {
-          params: { includeSubteams: false, after, before },
-        },
-      )
+      const answersOverview = await routines.getAnswerOverview(teamId, before, after)
       if (answersOverview) setAnswersOverview(answersOverview)
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [teamId, servicesPromise])
 
diff --git a/src/state/recoil/routine/post-create-team-settings.ts b/src/state/recoil/routine/post-create-team-settings.ts
index 92dcb59a4..dfb7c1447 100644
--- a/src/state/recoil/routine/post-create-team-settings.ts
+++ b/src/state/recoil/routine/post-create-team-settings.ts
@@ -10,6 +10,6 @@ export const postCreateTeamSettings = () => {
   return async (companyId: Team['id']) => {
     const { routines } = await servicesPromise
 
-    await routines.post(`/settings/${companyId}`, {})
+    await routines.createCompanySettings(companyId)
   }
 }
diff --git a/src/state/recoil/team/users-company.ts b/src/state/recoil/team/users-company.ts
index 91824d3ca..a02ce8c84 100644
--- a/src/state/recoil/team/users-company.ts
+++ b/src/state/recoil/team/users-company.ts
@@ -10,7 +10,7 @@ export const usersCompany = atom<User[]>({
 
 export const filteredUsersCompany = (teamId: Team['id']) => {
   return selector<User[]>({
-    key: 'filteredUsersCompany',
+    key: `filteredUsersCompany/${teamId}`,
     get: ({ get }) => {
       const users = get(usersCompany)