diff --git a/src/components/Header/Selectors.tsx b/src/components/Header/Selectors.tsx
deleted file mode 100644
index 849bbde..0000000
--- a/src/components/Header/Selectors.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { memo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { useCalendarContext } from '../../calendar-context';
-import MonthButton from './month-button';
-import YearButton from './year-button';
-import { TimeButton } from './time-button';
-import { NavigationPosition } from '../../types';
-
-type Props = {
-  position: NavigationPosition;
-};
-
-const Selectors = ({ position }: Props) => {
-  const { mode, calendarView, timePicker } = useCalendarContext();
-
-  return (
-    <View
-      style={[
-        defaultStyles.container,
-        position === 'around'
-          ? { justifyContent: 'space-evenly' }
-          : {
-              justifyContent: 'space-between',
-              flexDirection: position === 'left' ? 'row-reverse' : 'row',
-            },
-      ]}
-    >
-      <View style={defaultStyles.monthAndYear}>
-        {calendarView !== 'year' ? <MonthButton /> : null}
-        <YearButton />
-      </View>
-      {timePicker && mode === 'single' && calendarView !== 'year' ? (
-        <TimeButton />
-      ) : null}
-    </View>
-  );
-};
-
-export default memo(Selectors);
-
-const defaultStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  monthAndYear: {
-    gap: 5,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
deleted file mode 100644
index 105dcb1..0000000
--- a/src/components/Header/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { memo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import type { HeaderProps } from './types';
-import PrevButton from './prev-button';
-import NextButton from './next-button';
-import Selectors from './selectors';
-import { isEqual } from 'lodash';
-
-const Header = ({
-  navigationPosition,
-  styles = {},
-  classNames = {},
-}: HeaderProps) => {
-  return (
-    <View
-      style={[defaultStyles.headerContainer, styles?.header]}
-      className={classNames.header}
-      accessibilityRole="header"
-    >
-      {navigationPosition === 'left' ? (
-        <View style={defaultStyles.container}>
-          <View style={defaultStyles.navigation}>
-            <PrevButton
-              style={styles.button_prev}
-              className={classNames.button_prev}
-            />
-            <NextButton
-              style={styles.button_next}
-              className={classNames.button_next}
-            />
-          </View>
-          <Selectors position="left" />
-        </View>
-      ) : navigationPosition === 'right' ? (
-        <View style={defaultStyles.container}>
-          <Selectors position="right" />
-          <View style={defaultStyles.navigation}>
-            <PrevButton
-              style={styles.button_prev}
-              className={classNames.button_prev}
-            />
-            <NextButton
-              style={styles.button_next}
-              className={classNames.button_next}
-            />
-          </View>
-        </View>
-      ) : (
-        <View style={defaultStyles.container}>
-          <PrevButton
-            style={styles.button_prev}
-            className={classNames.button_prev}
-          />
-          <Selectors position="around" />
-          <NextButton
-            style={styles.button_next}
-            className={classNames.button_next}
-          />
-        </View>
-      )}
-    </View>
-  );
-};
-
-const defaultStyles = StyleSheet.create({
-  headerContainer: {
-    paddingVertical: 3,
-  },
-  container: {
-    padding: 5,
-    gap: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  navigation: {
-    flexDirection: 'row',
-  },
-});
-
-const customComparator = (
-  prev: Readonly<HeaderProps>,
-  next: Readonly<HeaderProps>
-) => {
-  const areEqual =
-    prev.PrevIcon === next.PrevIcon &&
-    prev.NextIcon === next.NextIcon &&
-    prev.navigationPosition === next.navigationPosition &&
-    isEqual(prev.styles, next.styles) &&
-    isEqual(prev.classNames, next.classNames);
-
-  return areEqual;
-};
-
-export default memo(Header, customComparator);
diff --git a/src/components/Header/month-button.tsx b/src/components/Header/month-button.tsx
deleted file mode 100644
index dd9873d..0000000
--- a/src/components/Header/month-button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { memo } from 'react';
-import dayjs from 'dayjs';
-import { Pressable, Text, View } from 'react-native';
-import { useCalendarContext } from '../../calendar-context';
-
-const MonthButton = () => {
-  const {
-    currentDate,
-    calendarView,
-    setCalendarView,
-    locale,
-    styles,
-    classNames,
-    disableMonthPicker,
-    monthCaptionFormat,
-  } = useCalendarContext();
-
-  const currentMonthText = dayjs(currentDate)
-    .locale(locale)
-    .format(monthCaptionFormat === 'full' ? 'MMMM' : 'MMM');
-
-  return (
-    <Pressable
-      disabled={disableMonthPicker}
-      onPress={() =>
-        setCalendarView(calendarView === 'month' ? 'day' : 'month')
-      }
-      testID="btn-month"
-      accessibilityRole="button"
-      accessibilityLabel={currentMonthText}
-    >
-      <View
-        style={styles?.month_selector}
-        className={classNames?.month_selector}
-      >
-        <Text
-          style={styles?.month_selector_label}
-          className={classNames?.month_selector_label}
-        >
-          {currentMonthText}
-        </Text>
-      </View>
-    </Pressable>
-  );
-};
-
-export default memo(MonthButton);
diff --git a/src/components/Header/next-button.tsx b/src/components/Header/next-button.tsx
deleted file mode 100644
index 6be939f..0000000
--- a/src/components/Header/next-button.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import {
-  Image,
-  Pressable,
-  StyleSheet,
-  useColorScheme,
-  View,
-} from 'react-native';
-import { useCalendarContext } from '../../calendar-context';
-import { YEAR_PAGE_SIZE } from '../../utils';
-import { ClassNames, Styles } from '../../types';
-import { UI } from '../../ui';
-import { isEqual } from 'lodash';
-import { COLORS } from '../../theme';
-
-const arrow_right = require('../../assets/images/arrow_right.png');
-
-type NextButtonProps = {
-  style?: Styles[UI.button_next];
-  className?: ClassNames[UI.button_next];
-};
-
-const NextButton = ({ style, className }: NextButtonProps) => {
-  const {
-    currentYear,
-    onChangeMonth,
-    onChangeYear,
-    calendarView,
-    components = {},
-  } = useCalendarContext();
-
-  const colorScheme = useColorScheme();
-  const theme = colorScheme ?? 'light';
-
-  const onPress = useCallback(() => {
-    switch (calendarView) {
-      case 'day':
-        return onChangeMonth(1);
-      case 'month':
-        return onChangeYear(currentYear + 1);
-      case 'year':
-        return onChangeYear(currentYear + YEAR_PAGE_SIZE);
-      default:
-        return {};
-    }
-  }, [calendarView, currentYear, onChangeMonth, onChangeYear]);
-
-  return (
-    <Pressable
-      disabled={calendarView === 'time'}
-      onPress={onPress}
-      testID="btn-next"
-      accessibilityRole="button"
-      accessibilityLabel="Next"
-    >
-      <View
-        style={[defaultStyles.iconContainer, defaultStyles.next, style]}
-        className={className}
-      >
-        {components.IconNext || (
-          <Image
-            source={arrow_right}
-            tintColor={COLORS[theme].foreground}
-            style={{
-              width: 14,
-              height: 14,
-            }}
-          />
-        )}
-      </View>
-    </Pressable>
-  );
-};
-
-const customComparator = (
-  prev: Readonly<NextButtonProps>,
-  next: Readonly<NextButtonProps>
-) => {
-  const areEqual =
-    prev.className === next.className && isEqual(prev.style, next.style);
-
-  return areEqual;
-};
-
-export default memo(NextButton, customComparator);
-
-const defaultStyles = StyleSheet.create({
-  iconContainer: {
-    padding: 4,
-  },
-  next: {
-    marginLeft: 3,
-  },
-});
diff --git a/src/components/Header/prev-button.tsx b/src/components/Header/prev-button.tsx
deleted file mode 100644
index 6f584e3..0000000
--- a/src/components/Header/prev-button.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import {
-  Image,
-  Pressable,
-  StyleSheet,
-  useColorScheme,
-  View,
-} from 'react-native';
-import { useCalendarContext } from '../../calendar-context';
-import { YEAR_PAGE_SIZE } from '../../utils';
-import { ClassNames, Styles } from '../../types';
-import { UI } from '../../ui';
-import { isEqual } from 'lodash';
-import { COLORS } from '../../theme';
-
-const arrow_left = require('../../assets/images/arrow_left.png');
-
-type PrevButtonProps = {
-  style?: Styles[UI.button_prev];
-  className?: ClassNames[UI.button_prev];
-};
-
-const PrevButton = ({ style, className }: PrevButtonProps) => {
-  const {
-    currentYear,
-    calendarView,
-    onChangeMonth,
-    onChangeYear,
-    components = {},
-  } = useCalendarContext();
-
-  const colorScheme = useColorScheme();
-  const theme = colorScheme ?? 'light';
-
-  const onPress = useCallback(() => {
-    switch (calendarView) {
-      case 'day':
-        return onChangeMonth(-1);
-      case 'month':
-        return onChangeYear(currentYear - 1);
-      case 'year':
-        return onChangeYear(currentYear - YEAR_PAGE_SIZE);
-      default:
-        return {};
-    }
-  }, [calendarView, currentYear, onChangeMonth, onChangeYear]);
-
-  return (
-    <Pressable
-      disabled={calendarView === 'time'}
-      onPress={onPress}
-      testID="btn-prev"
-      accessibilityRole="button"
-      accessibilityLabel="Prev"
-    >
-      <View
-        style={[defaultStyles.iconContainer, defaultStyles.prev, style]}
-        className={className}
-      >
-        {components.IconPrev || (
-          <Image
-            source={arrow_left}
-            tintColor={COLORS[theme].foreground}
-            style={{
-              width: 14,
-              height: 14,
-            }}
-          />
-        )}
-      </View>
-    </Pressable>
-  );
-};
-
-const customComparator = (
-  prev: Readonly<PrevButtonProps>,
-  next: Readonly<PrevButtonProps>
-) => {
-  const areEqual =
-    prev.className === next.className && isEqual(prev.style, next.style);
-
-  return areEqual;
-};
-
-export default memo(PrevButton, customComparator);
-
-const defaultStyles = StyleSheet.create({
-  iconContainer: {
-    padding: 4,
-  },
-  prev: {
-    marginRight: 3,
-  },
-});
diff --git a/src/components/Header/time-button.tsx b/src/components/Header/time-button.tsx
deleted file mode 100644
index 891e543..0000000
--- a/src/components/Header/time-button.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import dayjs from 'dayjs';
-import { useMemo } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { useCalendarContext } from '../../calendar-context';
-import { formatNumber, getParsedDate } from '../../utils';
-
-export const TimeButton = () => {
-  const {
-    currentDate,
-    date,
-    calendarView,
-    setCalendarView,
-    styles,
-    classNames,
-    numerals = 'latn',
-  } = useCalendarContext();
-
-  const { hour, minute } = useMemo(
-    () => getParsedDate(date || currentDate),
-    [date, currentDate]
-  );
-
-  const labelText = useMemo(() => {
-    const hourLabel =
-      hour < 10
-        ? `${formatNumber(0, numerals)}${formatNumber(hour, numerals)}`
-        : `${formatNumber(hour, numerals)}`;
-
-    const minuteLabel =
-      minute < 10
-        ? `${formatNumber(0, numerals)}${formatNumber(minute, numerals)}`
-        : `${formatNumber(minute, numerals)}`;
-
-    return `${hourLabel}:${minuteLabel}`;
-  }, [numerals, formatNumber, hour, minute]);
-
-  return (
-    <Pressable
-      onPress={() => setCalendarView(calendarView === 'time' ? 'day' : 'time')}
-      accessibilityRole="button"
-      accessibilityLabel={dayjs(date || currentDate).format('HH:mm')}
-    >
-      <View style={styles?.time_selector} className={classNames?.time_selector}>
-        <Text
-          style={styles?.time_selector_label}
-          className={classNames?.time_selector_label}
-        >
-          {labelText}
-        </Text>
-      </View>
-    </Pressable>
-  );
-};
diff --git a/src/components/Header/types.ts b/src/components/Header/types.ts
deleted file mode 100644
index 273416b..0000000
--- a/src/components/Header/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { ClassNames, Styles, NavigationPosition } from '../../types';
-
-export type HeaderProps = {
-  PrevIcon?: React.ReactNode;
-  NextIcon?: React.ReactNode;
-  navigationPosition?: NavigationPosition;
-  styles?: Styles;
-  classNames?: ClassNames;
-};
diff --git a/src/components/Header/year-button.tsx b/src/components/Header/year-button.tsx
deleted file mode 100644
index b8d9ff5..0000000
--- a/src/components/Header/year-button.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { memo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { useCalendarContext } from '../../calendar-context';
-import { formatNumber, getDateYear, getYearRange } from '../../utils';
-import dayjs from 'dayjs';
-
-const YearButton = () => {
-  const {
-    currentDate,
-    calendarView,
-    setCalendarView,
-    currentYear,
-    onChangeYear,
-    styles,
-    classNames,
-    disableYearPicker,
-    numerals = 'latn',
-  } = useCalendarContext();
-
-  const years = getYearRange(currentYear);
-  return (
-    <Pressable
-      disabled={disableYearPicker}
-      onPress={() => {
-        setCalendarView(calendarView === 'year' ? 'day' : 'year');
-        onChangeYear(getDateYear(currentDate));
-      }}
-      testID="btn-year"
-      accessibilityRole="button"
-      accessibilityLabel={dayjs(currentDate).format('YYYY')}
-    >
-      <View
-        style={[defaultStyles.container, styles?.year_selector]}
-        className={classNames?.year_selector}
-      >
-        <Text
-          style={styles?.year_selector_label}
-          className={classNames?.year_selector_label}
-        >
-          {calendarView === 'year'
-            ? `${formatNumber(years[0] || 0, numerals)} - ${formatNumber(years[years.length - 1] || 0, numerals)}`
-            : formatNumber(
-                parseInt(dayjs(currentDate).format('YYYY')),
-                numerals
-              )}
-        </Text>
-      </View>
-    </Pressable>
-  );
-};
-
-export default memo(YearButton);
-
-const defaultStyles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});