diff --git a/src/index.ts b/src/index.ts
index 1a75fa24..4a4c8cd0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,7 @@ export { BtnPrimary } from './molecules/Buttons/BtnPrimary'
 export { BtnSecondary } from './molecules/Buttons/BtnSecondary'
 export { BtnTertiary } from './molecules/Buttons/BtnTertiary'
 export { BtnLink } from './molecules/Buttons/BtnLink'
+export { NavBarButton } from './molecules/NavBarButtons/NavBarButton'
 export { NewTooltip } from './molecules/Tooltip/NewTooltip'
 export { UserWay } from './molecules/UserWay/UserWay'
 export { UserWayCookie } from './molecules/UserWay/UserWayCookie'
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Icons/CalendarButtonIcon.tsx b/src/molecules/NavBarButtons/Icons/CalendarButtonIcon.tsx
similarity index 100%
rename from src/organisms/Calendar/Dropdown/CalendarDropdown/Icons/CalendarButtonIcon.tsx
rename to src/molecules/NavBarButtons/Icons/CalendarButtonIcon.tsx
diff --git a/src/molecules/NavBarButtons/Icons/HelpIcon.tsx b/src/molecules/NavBarButtons/Icons/HelpIcon.tsx
new file mode 100644
index 00000000..6ee4f755
--- /dev/null
+++ b/src/molecules/NavBarButtons/Icons/HelpIcon.tsx
@@ -0,0 +1,10 @@
+export const HelpIcon = (): JSX.Element => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 13C7.448 13 7 12.552 7 12C7 11.448 7.448 11 8 11C8.552 11 9 11.448 9 12C9 12.552 8.552 13 8 13ZM9.623 8.092C9.126 8.519 9 8.663 9 9C9 9.553 8.552 10 8 10C7.448 10 7 9.553 7 9C7 7.706 7.795 7.024 8.322 6.573C8.819 6.148 8.945 6.003 8.945 5.667C8.945 5.484 8.945 5 8.001 5C7.565 5.024 7.1 5.224 6.743 5.561C6.342 5.939 5.708 5.92 5.329 5.52C4.95 5.118 4.968 4.485 5.37 4.106C6.072 3.445 6.987 3.052 7.949 3.002H7.952C9.764 3.002 10.945 4.073 10.945 5.668C10.945 6.961 10.15 7.643 9.624 8.093L9.623 8.092Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
diff --git a/src/molecules/NavBarButtons/NavBarButton.tsx b/src/molecules/NavBarButtons/NavBarButton.tsx
new file mode 100644
index 00000000..839c8ea6
--- /dev/null
+++ b/src/molecules/NavBarButtons/NavBarButton.tsx
@@ -0,0 +1,100 @@
+import { Box } from '@chakra-ui/react'
+
+import { vars } from '@theme'
+import { HelpIcon } from '@/molecules/NavBarButtons/Icons/HelpIcon'
+import { CalendarButtonIcon } from './Icons/CalendarButtonIcon'
+import { Accessibility } from '@/atoms/Icons/Accessibility'
+
+export interface ButtonProps {
+  buttonName?: string
+  onlyLink?: boolean
+  onClick: () => void
+  type: 'calendar' | 'help' | 'accessibility'
+}
+
+export const NavBarButton = ({ buttonName, onlyLink, onClick, type }: ButtonProps): JSX.Element => {
+  const buttonType = {
+    accessibility: {
+      icon: <Accessibility />,
+      text: buttonName ?? 'ACCESIBILIDAD',
+    },
+    calendar: {
+      icon: <CalendarButtonIcon />,
+      text: buttonName ?? 'CALENDARIO',
+    },
+    help: {
+      icon: <HelpIcon />,
+      text: buttonName ?? 'AYUDA',
+    },
+  }
+
+  const triggerWidget = (): void => {
+    const buttonB = document.getElementById('userWayTrigger')
+    if (buttonB?.click) {
+      buttonB.click() // Hace clic en el botón del archivo index.html
+    }
+  }
+
+  const activeBg = vars('colors-main-deepSkyBlue') ?? '#0189FF'
+  const hoverBg = 'rgba(96, 121, 142, 0.8)'
+  const isAccessibility = type === 'accessibility'
+
+  return (
+    <Box
+      as="button"
+      id={isAccessibility ? 'UserWayButton' : ''}
+      onClick={isAccessibility ? triggerWidget : onClick}
+      sx={{
+        display: 'flex',
+        gap: '8px',
+        h: '30px',
+        maxH: '30px',
+
+        _hover: {
+          '.icon': {
+            bg: hoverBg,
+          },
+          '.text': {
+            color: vars('colors-neutral-white'),
+          },
+        },
+
+        _active: {
+          '.icon': {
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            bg: onlyLink || isAccessibility ? hoverBg : activeBg,
+          },
+          '.text': {
+            color: vars('colors-neutral-white'),
+          },
+        },
+
+        '.icon': {
+          alignItems: 'center',
+          bg: vars('colors-main-blueGrey'),
+          borderRadius: '100%',
+          border: '1px solid transparent',
+          display: 'flex',
+          height: '30px',
+          justifyContent: 'center',
+          type: 'button',
+          role: 'button',
+          width: '30px',
+        },
+
+        '.text': {
+          alignContent: 'center',
+          fontSize: '12px',
+          fontWeight: '500',
+          forntFamily: 'Roboto',
+          color: vars('colors-neutral-silverSand'),
+        },
+      }}
+    >
+      <Box className="icon">{buttonType[type].icon}</Box>
+      <Box as="span" className="text">
+        {buttonType[type].text}
+      </Box>
+    </Box>
+  )
+}
diff --git a/src/molecules/index.ts b/src/molecules/index.ts
index 41fed3f2..3d36d9a8 100644
--- a/src/molecules/index.ts
+++ b/src/molecules/index.ts
@@ -3,6 +3,7 @@ export { BtnPrimary } from './Buttons/BtnPrimary'
 export { BtnSecondary } from './Buttons/BtnSecondary'
 export { BtnTertiary } from './Buttons/BtnTertiary'
 export { BtnLink } from './Buttons/BtnLink'
+export { NavBarButton } from './NavBarButtons/NavBarButton'
 export { NewTooltip } from './Tooltip/NewTooltip'
 export { UserWay } from './UserWay/UserWay'
 export { UserWayCookie } from './UserWay/UserWayCookie'
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx
index 1ab2f42c..46f3b557 100644
--- a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx
+++ b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx
@@ -1,7 +1,7 @@
 import { MenuButton } from '@chakra-ui/react'
 import { vars } from '@theme'
 
-import { CalendarButtonIcon } from '../Icons/CalendarButtonIcon'
+import { CalendarButtonIcon } from '../../../../../molecules/NavBarButtons/Icons/CalendarButtonIcon'
 import { NewTooltip } from '@/molecules'
 
 interface IGoToCalendar {