diff --git a/App.tsx b/App.tsx
index 1d567ae..490876c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,26 +1,46 @@
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import RokoCalendar from './lib';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { useState } from 'react';
 import { format } from 'date-fns';
+import Animated, { interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 export default function App() {
+  const [isOpen, toggleShow] = useState(false);
+
   const [range, setRange] = useState<{ startDate: Date; endDate?: Date }>({ startDate: new Date(), endDate: new Date() });
+
   const [date, setDate] = useState<Date>(new Date());
 
   const calendarStyle = {
     primary: '#FF5733',
-    onPrimary: '#000000',
-    secondary: '#FFC300',
-    primaryVariant: '#FF5733',
-    onPrimaryVariant: '#FFFFFF',
+    onPrimary: 'white',
+    primaryVariant: '#FFF9C4',
+    onPrimaryVariant: '#9E9E9E',
     background: '#DAF7A6',
     onBackground: '#000000',
   };
+  const animatedValue = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(animatedValue.value, [0, 50 * 7], [0, 1]);
+    const padding = interpolate(animatedValue.value, [0, 50 * 7], [0, 16]);
+    const borderRadius = interpolate(animatedValue.value, [0, 50 * 7], [0, 16]);
+    const display = animatedValue.value < 5 ? 'none' : 'flex';
+    return { height: animatedValue.value, opacity, padding, borderRadius, display };
+  });
+
+  const animate = (value: number) => {
+    animatedValue.value = withTiming(value, { duration: 200 }, (finished) => {
+      if (finished) {
+        runOnJS(toggleShow)(value !== 0);
+      }
+    });
+  };
 
   const RenderTitle = (title: string, startDate: Date, endDate?: Date) => {
     return (
-      <View>
+      <TouchableOpacity activeOpacity={1} style={{ gap: 6 }} onPress={() => animate(isOpen ? 0 : 50 * 7)}>
         <Text style={{ fontSize: 20 }}>{title}</Text>
         <View style={{ flexDirection: 'row', marginBottom: 4 }}>
           <Text>{format(startDate, 'MMM dd, yyyy')}</Text>
@@ -31,22 +51,18 @@ export default function App() {
             </>
           )}
         </View>
-      </View>
+      </TouchableOpacity>
     );
   };
+
   return (
     <SafeAreaProvider>
       <SafeAreaView style={{ flex: 1 }}>
         <View style={styles.container}>
-          <View style={{ flex: 1 }}>
-            {RenderTitle('Multi Date Picker:', range.startDate, range.endDate)}
-            <RokoCalendar theme={{ colors: calendarStyle }} value={range} onChange={setRange} multiple={true} />
-          </View>
-
-          <View style={{ flex: 1 }}>
-            {RenderTitle('Single Date Picker:', date, undefined)}
-            <RokoCalendar value={date} onChange={setDate} />
-          </View>
+          {RenderTitle('Single Date Picker:', range.startDate, range.endDate)}
+          <Animated.View style={[animatedStyle, {}]}>
+            <RokoCalendar multiple={false} theme={{ colors: calendarStyle }} value={date} onChange={setDate} />
+          </Animated.View>
         </View>
       </SafeAreaView>
     </SafeAreaProvider>
@@ -58,6 +74,5 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: 16,
     gap: 16,
-    justifyContent: 'space-around',
   },
 });
diff --git a/babel.config.js b/babel.config.js
index 2900afe..d872de3 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };
diff --git a/lib/components/BetweenDates.tsx b/lib/components/BetweenDates.tsx
index cd76613..b36b7ba 100644
--- a/lib/components/BetweenDates.tsx
+++ b/lib/components/BetweenDates.tsx
@@ -1,34 +1,44 @@
 import { StyleSheet, View } from 'react-native';
-import React, { FC, memo } from 'react';
+import React, { FC, memo, useMemo } from 'react';
 import { useTheme } from '../hooks/ThemeContext';
 import { IStyle } from '../models/props/IStyle';
+import { ITheme } from '../models/ITheme';
 
 interface Props {
   isBetween: boolean;
   firstSelection: boolean;
   secondSelection: boolean;
 }
+
 const BetweenDates: FC<Props> = ({ isBetween, firstSelection, secondSelection }) => {
-  const context = useTheme();
+  // #region HOOKS
+  const theme = useTheme();
+  // #endregion
+  // #region FUNCTIONS
+  const themedStyles = useMemo(() => styles(theme), [theme]);
+  // #endregion
 
-  const style = () => {
-    return styles(context.colors);
-  };
   return (
-    <View style={[style().root, isBetween && style().isBetween, firstSelection && style().isLeftEdge, secondSelection && style().isRightEdge]} />
+    <View
+      style={[
+        themedStyles.root,
+        isBetween && themedStyles.isBetween,
+        firstSelection && themedStyles.isLeftEdge,
+        secondSelection && themedStyles.isRightEdge,
+      ]}
+    />
   );
 };
 
 export default memo(BetweenDates);
 
-const styles = (theme: IStyle) =>
+const styles = (theme: ITheme) =>
   StyleSheet.create({
     root: {
       ...StyleSheet.absoluteFillObject,
-      marginVertical: 0.5,
-      zIndex: 0,
+      marginVertical: 1,
     },
-    isBetween: { backgroundColor: theme.primaryVariant },
+    isBetween: { backgroundColor: theme.colors.primaryVariant },
     isLeftEdge: { marginStart: 30 },
     isRightEdge: { marginEnd: 30 },
   });
diff --git a/lib/components/CalendarHeader.tsx b/lib/components/CalendarHeader.tsx
deleted file mode 100644
index 43dce52..0000000
--- a/lib/components/CalendarHeader.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native';
-import React, { FC } from 'react';
-import IconButton from './IconButton';
-import Constants from '../utils/Constants';
-import { useTheme } from '../hooks/ThemeContext';
-import { IStyle } from '../models/props/IStyle';
-
-interface Props {
-  handlePreviousMonth: () => void;
-  handleNextMonth: () => void;
-  title: string;
-}
-
-const CalendarHeader: FC<Props> = ({ title, handlePreviousMonth, handleNextMonth }) => {
-  const context = useTheme();
-
-  const style = () => {
-    return styles(context.colors);
-  };
-
-  return (
-    <View style={style().root}>
-      <IconButton icon="chevron-left" onPress={handlePreviousMonth} />
-      <Text style={style().title}>{title}</Text>
-      <IconButton icon="chevron-right" onPress={handleNextMonth} />
-    </View>
-  );
-};
-
-export default CalendarHeader;
-
-const styles = (theme: IStyle) =>
-  StyleSheet.create({
-    root: {
-      alignItems: 'center',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingVertical: Constants.spacing.medium,
-    },
-    title: { fontSize: Constants.spacing.regular, color: theme.onBackground },
-  });
diff --git a/lib/components/Cell.tsx b/lib/components/Cell.tsx
deleted file mode 100644
index 4cc8557..0000000
--- a/lib/components/Cell.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native';
-import React, { FC, memo } from 'react';
-import { format } from 'date-fns';
-import TodayIndicator from './TodayIndicator';
-import { useTheme } from '../hooks/ThemeContext';
-import { IStyle } from '../models/props/IStyle';
-
-interface Props {
-  day: Date;
-  selected: boolean;
-  isCurrentMonth: boolean;
-}
-const Cell: FC<Props> = ({ day, selected, isCurrentMonth }) => {
-  const context = useTheme();
-
-  const style = () => {
-    return styles(context.colors);
-  };
-
-  return (
-    <View style={style().root}>
-      <Text numberOfLines={1} adjustsFontSizeToFit style={[style().text, !isCurrentMonth && style().differentMonth, selected && style().selected]}>
-        {format(day, 'dd')}
-      </Text>
-      <TodayIndicator {...{ value: day, selected }} />
-    </View>
-  );
-};
-
-export default memo(Cell);
-
-const styles = (theme: IStyle) =>
-  StyleSheet.create({
-    root: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-    text: { fontSize: 14, color: theme.onBackground },
-    selected: { color: theme.onPrimary },
-    differentMonth: { color: theme.secondary },
-  });
diff --git a/lib/components/Day.tsx b/lib/components/Day.tsx
deleted file mode 100644
index 389e781..0000000
--- a/lib/components/Day.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Pressable, StyleSheet, View } from 'react-native';
-import React, { FC } from 'react';
-import Cell from './Cell';
-import { IStyle } from '../models/props/IStyle';
-import { useTheme } from '../hooks/ThemeContext';
-
-interface Props {
-  day: Date;
-  selected: boolean;
-  isCurrentMonth: boolean;
-  onChange: (value: Date) => void;
-}
-const Day: FC<Props> = ({ day, selected, onChange, isCurrentMonth }) => {
-  // #region HOOKS
-  const context = useTheme();
-  // #endregion
-  // #region FUNCTIONS
-  const handleSelectDate = () => onChange(day);
-
-  const style = () => {
-    return styles(context.colors);
-  };
-  // #endregion
-  return (
-    <Pressable style={style().root} onPress={handleSelectDate}>
-      <View style={style().container}>
-        <View style={[style().dayContainer, selected && style().selectedBackground]}>
-          <Cell {...{ day, selected, isCurrentMonth }} />
-        </View>
-      </View>
-    </Pressable>
-  );
-};
-
-export default Day;
-
-const styles = (theme: IStyle) =>
-  StyleSheet.create({
-    root: {
-      flex: 1,
-    },
-    container: { ...StyleSheet.absoluteFillObject, alignItems: 'center' },
-    dayContainer: { flex: 1, borderRadius: 100, aspectRatio: 1 },
-    selectedBackground: {
-      backgroundColor: theme.primary,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.22,
-      shadowRadius: 2.22,
-      elevation: 3,
-      borderWidth: 3,
-      borderColor: theme.onPrimary,
-    },
-  });
diff --git a/lib/components/DayCell.tsx b/lib/components/DayCell.tsx
new file mode 100644
index 0000000..26b30e8
--- /dev/null
+++ b/lib/components/DayCell.tsx
@@ -0,0 +1,73 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { FC, memo, useMemo } from 'react';
+import { format, isToday } from 'date-fns';
+import { useTheme } from '../hooks/ThemeContext';
+import { ITheme } from '../models/ITheme';
+
+interface Props {
+  item: Date;
+  selected: boolean;
+  isCurrentMonth: boolean;
+  onChange: (value: Date) => void;
+}
+const DayCell: FC<Props> = ({ item, selected, isCurrentMonth, onChange }) => {
+  // #region HOOKS
+  const theme = useTheme();
+  // #endregion
+  // #region FUNCTIONS
+  const themedStyles = useMemo(() => styles(theme), [theme]);
+  // #endregion
+  return (
+    <TouchableOpacity activeOpacity={1} style={[themedStyles.root]} onPress={() => onChange(item)}>
+      <View style={[selected && themedStyles.selectedBackground, themedStyles.container]}>
+        <Text
+          numberOfLines={1}
+          adjustsFontSizeToFit
+          style={[themedStyles.text, selected && themedStyles.selectedText, !isCurrentMonth && !selected && themedStyles.differentMonthText]}
+        >
+          {format(item, 'dd')}
+        </Text>
+
+        {isToday(item) && (
+          <View
+            style={{
+              height: 3,
+              width: 3,
+              borderRadius: 3,
+              backgroundColor: selected ? theme.colors.onPrimary : theme.colors.primary,
+              position: 'absolute',
+              alignSelf: 'center',
+              bottom: 6,
+            }}
+          />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default memo(DayCell);
+
+const styles = (theme: ITheme) =>
+  StyleSheet.create({
+    root: { flex: 1, alignItems: 'center' },
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    selectedBackground: {
+      borderRadius: 100,
+      aspectRatio: 1,
+      backgroundColor: theme.colors.primary,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.22,
+      shadowRadius: 2.22,
+      elevation: 3,
+      borderWidth: 3,
+      borderColor: theme.colors.onPrimary,
+    },
+    selectedText: { color: theme.colors.onPrimary },
+    differentMonthText: { color: theme.colors.onPrimaryVariant },
+    text: { fontSize: 14 },
+  });
diff --git a/lib/components/IconButton.tsx b/lib/components/IconButton.tsx
deleted file mode 100644
index 5bc234f..0000000
--- a/lib/components/IconButton.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { StyleSheet, TouchableOpacity } from 'react-native';
-import React, { FC } from 'react';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
-import { IIconButton } from '../models/IIconButton';
-import { useTheme } from '../hooks/ThemeContext';
-import { IStyle } from '../models/props/IStyle';
-
-const IconButton: FC<IIconButton> = ({ icon, onPress }) => {
-  // #region HOOKS
-  const context = useTheme();
-  // #endregion
-  // #region FUNCTIONS
-  const style = () => {
-    return styles(context.colors);
-  };
-  // #endregion
-  return (
-    <TouchableOpacity style={style().root} onPress={onPress}>
-      <MaterialCommunityIcons name={icon} size={24} color={context.colors.onBackground} />
-    </TouchableOpacity>
-  );
-};
-
-export default IconButton;
-
-const styles = (theme: IStyle) => StyleSheet.create({ root: { padding: 4, borderRadius: 16 } });
diff --git a/lib/components/RokoCalendar.tsx b/lib/components/RokoCalendar.tsx
index 4efd196..06db483 100644
--- a/lib/components/RokoCalendar.tsx
+++ b/lib/components/RokoCalendar.tsx
@@ -1,16 +1,16 @@
 import { StyleSheet, View } from 'react-native';
 import React, { FC, useCallback, useMemo, useState } from 'react';
-import { format, isAfter, isValid } from 'date-fns';
+import { ITheme } from '../models/ITheme';
 import { IMultiSelection } from '../models/props/IMultiSelection';
 import { ISingleSelection } from '../models/props/ISingleSelection';
+import { defaultTheme } from '../models/props/IStyle';
+import CalendarHeader from './headers/CalendarHeader';
+import { format, isAfter, isValid } from 'date-fns';
+import WeekLabels from './headers/WeekLabels';
 import { prepareMonthList } from '../utils/Common';
-import CalendarHeader from './CalendarHeader';
 import WeekContainer from './WeekContainer';
-import WeekIndicator from './WeekIndicator';
 import ErrorView from './ErrorView';
-import { IStyle, defaultTheme } from '../models/props/IStyle';
 import ThemeContext from '../hooks/ThemeContext';
-import { ITheme } from '../models/ITheme';
 
 type SelectionProps = ISingleSelection | IMultiSelection;
 
@@ -31,7 +31,7 @@ const RokoCalendar: FC<RokoCalendarProps> = ({ multiple, value, onChange, theme
   }
   // #endregion
   // #region STATES
-  const [currentDate, setCurrentDate] = useState<Date>(new Date());
+  const [currentDate, setCurrentDate] = useState<Date>(initialSelectedDates[0] ?? new Date());
   const [selectedDates, setSelectedDates] = useState<Date[]>(initialSelectedDates);
   // #endregion
   // #region FUNCTIONS
@@ -69,20 +69,15 @@ const RokoCalendar: FC<RokoCalendarProps> = ({ multiple, value, onChange, theme
     [multiple, selectedDates, onChange]
   );
 
-  const style = () => {
-    return styles(theme.colors);
-  };
   // #endregion
   return (
     <ThemeContext.Provider value={theme}>
-      <View style={style().root}>
-        <CalendarHeader title={format(currentDate, 'MMM dd, yyyy')} {...{ handlePreviousMonth, handleNextMonth }} />
-        <WeekIndicator />
-        <View style={style().container}>
-          {currentDateList.map((week, weekIndex) => (
-            <WeekContainer key={weekIndex} {...{ week, currentDate }} value={selectedDates} onChange={handleSetCurrentDay} />
-          ))}
-        </View>
+      <View style={styles.root}>
+        <CalendarHeader title={format(currentDate, 'MMMM, yyyy')} handleOnPrevClick={handlePreviousMonth} handleOnNextClick={handleNextMonth} />
+        <WeekLabels />
+        {currentDateList.map((week, weekIndex) => (
+          <WeekContainer key={weekIndex} {...{ week, currentDate, value: initialSelectedDates, onChange: (v) => handleSetCurrentDay(v) }} />
+        ))}
       </View>
     </ThemeContext.Provider>
   );
@@ -90,10 +85,4 @@ const RokoCalendar: FC<RokoCalendarProps> = ({ multiple, value, onChange, theme
 
 export default RokoCalendar;
 
-const styles = (theme: IStyle) =>
-  StyleSheet.create({
-    root: {
-      flex: 1,
-    },
-    container: { flex: 1, borderBottomWidth: 1, borderTopWidth: 1, borderColor: theme.primaryVariant },
-  });
+const styles = StyleSheet.create({ root: { flex: 1 } });
diff --git a/lib/components/TodayIndicator.tsx b/lib/components/TodayIndicator.tsx
deleted file mode 100644
index 27c38bc..0000000
--- a/lib/components/TodayIndicator.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import React, { FC } from 'react';
-import { isToday } from 'date-fns';
-import { useTheme } from '../hooks/ThemeContext';
-import { IStyle } from '../models/props/IStyle';
-
-interface Props {
-  value: Date;
-  selected: boolean;
-}
-const TodayIndicator: FC<Props> = ({ value, selected }) => {
-  // #region HOOKS
-  const context = useTheme();
-  // #endregion
-  // #region FUNCTIONS
-  const style = () => {
-    return styles(context.colors);
-  };
-  // #endregion
-
-  if (isToday(value)) {
-    return <View style={[style().root, { backgroundColor: selected ? context.colors.primaryVariant : context.colors.onPrimaryVariant }]} />;
-  } else {
-    return null;
-  }
-};
-
-export default TodayIndicator;
-
-const styles = (theme: IStyle) =>
-  StyleSheet.create({ root: { height: 5, width: 5, borderRadius: 5, position: 'absolute', backgroundColor: 'white', bottom: 5 } });
diff --git a/lib/components/WeekContainer.tsx b/lib/components/WeekContainer.tsx
index d0f3c07..936b6b8 100644
--- a/lib/components/WeekContainer.tsx
+++ b/lib/components/WeekContainer.tsx
@@ -1,38 +1,37 @@
 import { StyleSheet, View } from 'react-native';
-import React, { FC, memo } from 'react';
-import Day from './Day';
-import { isAfter, isBefore, isEqual, isSameDay, isSameMonth } from 'date-fns';
+import React, { FC, memo, useCallback } from 'react';
+import { IWeekProps } from '../models/props/IWeekProps';
+import DayCell from './DayCell';
+import { isAfter, isEqual, isBefore, isSameDay, isSameMonth } from 'date-fns';
 import BetweenDates from './BetweenDates';
-import { IWeekContainer } from '../models/props/IWeekContainer';
-import { useTheme } from '../hooks/ThemeContext';
 
-const WeekContainer: FC<IWeekContainer> = ({ week, value, currentDate, onChange }) => {
-  // #region HOOKS
-  const context = useTheme();
-  // #endregion
+const WeekContainer: FC<IWeekProps> = ({ currentDate, onChange, value, week }) => {
   // #region FUNCTIONS
   function isBetweenDates(targetDate: Date, startDate: Date, endDate: Date) {
     return (isAfter(targetDate, startDate) || isEqual(targetDate, startDate)) && (isBefore(targetDate, endDate) || isEqual(targetDate, endDate));
   }
+
+  const handleOnChange = useCallback(
+    (v: Date) => {
+      onChange(v);
+    },
+    [onChange]
+  );
   // #endregion
+
   return (
-    <View
-      style={[
-        styles.root,
-        { flex: context.spacing && context.spacing.weekHeight ? undefined : 1, height: context.spacing && context.spacing.weekHeight },
-      ]}
-    >
-      {week.map((day, dayIndex) => {
-        const foundIndex = value.findIndex((i) => isSameDay(i, day));
+    <View style={styles.root}>
+      {week.map((item, index) => {
+        const foundIndex = value.findIndex((i) => isSameDay(i, item));
         const selected = foundIndex > -1;
-        const isCurrentMonth = isSameMonth(day, currentDate);
-        const isBetween = isBetweenDates(day, value[0], value[1]);
-        const firstSelection = isSameDay(day, value[0]);
-        const secondSelection = isSameDay(day, value[1]);
+        const isCurrentMonth = isSameMonth(item, currentDate);
+        const isBetween = isBetweenDates(item, value[0], value[1]);
+        const firstSelection = isSameDay(item, value[0]);
+        const secondSelection = isSameDay(item, value[1]);
         return (
-          <View key={dayIndex} style={{ flex: 1 }}>
+          <View key={index} style={{ flex: 1 }}>
             <BetweenDates {...{ isBetween, firstSelection, secondSelection }} />
-            <Day key={dayIndex} {...{ day, selected, isCurrentMonth, onChange }} />
+            <DayCell {...{ item, selected, isCurrentMonth, onChange: handleOnChange }} />
           </View>
         );
       })}
@@ -42,8 +41,4 @@ const WeekContainer: FC<IWeekContainer> = ({ week, value, currentDate, onChange
 
 export default memo(WeekContainer);
 
-const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'row',
-  },
-});
+const styles = StyleSheet.create({ root: { flex: 1, flexDirection: 'row' } });
diff --git a/lib/components/WeekIndicator.tsx b/lib/components/WeekIndicator.tsx
deleted file mode 100644
index 0ebd8d8..0000000
--- a/lib/components/WeekIndicator.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native';
-import React, { FC, useMemo } from 'react';
-import { startOfWeek, addDays, format } from 'date-fns';
-import Constants from '../utils/Constants';
-import { IStyle } from '../models/props/IStyle';
-import { useTheme } from '../hooks/ThemeContext';
-
-interface Props {}
-const WeekIndicator: FC<Props> = ({}) => {
-  // #region HOOKS
-  const context = useTheme();
-  // #endregion
-  // #region FUNCTIONS
-  const style = () => {
-    return styles(context.colors);
-  };
-
-  const weekDays = useMemo(() => {
-    const weekStart = startOfWeek(new Date(), { weekStartsOn: 1 }); // Monday
-    const days = [];
-
-    for (let i = 0; i < 7; i++) {
-      days.push(addDays(weekStart, i));
-    }
-
-    return days;
-  }, []);
-  // #endregion
-
-  return (
-    <View style={style().root}>
-      {weekDays.map((item, index) => (
-        <View style={style().container} key={index}>
-          <Text style={style().text}>{format(item, 'EEE')}</Text>
-        </View>
-      ))}
-    </View>
-  );
-};
-
-export default WeekIndicator;
-
-const styles = (theme: IStyle) =>
-  StyleSheet.create({
-    root: { flexDirection: 'row', alignItems: 'center', paddingVertical: Constants.spacing.regular },
-    container: { alignItems: 'center', justifyContent: 'center', flex: 1 },
-    text: { fontSize: 12, letterSpacing: 1.2, color: theme.onBackground },
-  });
diff --git a/lib/components/buttons/IconButton.tsx b/lib/components/buttons/IconButton.tsx
new file mode 100644
index 0000000..818279d
--- /dev/null
+++ b/lib/components/buttons/IconButton.tsx
@@ -0,0 +1,16 @@
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import React, { FC } from 'react';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { IIconButtonProps } from '../../models/props/IIconButtonProps';
+
+const IconButton: FC<IIconButtonProps> = ({ icon, onPress }) => {
+  return (
+    <TouchableOpacity style={styles.root} onPress={onPress}>
+      <MaterialCommunityIcons name={icon} size={24} color={'red'} />
+    </TouchableOpacity>
+  );
+};
+
+export default IconButton;
+
+const styles = StyleSheet.create({ root: {} });
diff --git a/lib/components/headers/CalendarHeader.tsx b/lib/components/headers/CalendarHeader.tsx
new file mode 100644
index 0000000..1d40096
--- /dev/null
+++ b/lib/components/headers/CalendarHeader.tsx
@@ -0,0 +1,43 @@
+import { StyleSheet, View, Text } from 'react-native';
+import React, { FC, useMemo } from 'react';
+import IconButton from '../buttons/IconButton';
+import { startOfWeek, addDays } from 'date-fns';
+
+interface Props {
+  title: string;
+  handleOnPrevClick: () => void;
+  handleOnNextClick: () => void;
+}
+const CalendarHeader: FC<Props> = ({ title, handleOnPrevClick, handleOnNextClick }) => {
+  const weekDays = useMemo(() => {
+    const weekStart = startOfWeek(new Date(), { weekStartsOn: 1 }); // Monday
+    const days = [];
+
+    for (let i = 0; i < 7; i++) {
+      days.push(addDays(weekStart, i));
+    }
+
+    return days;
+  }, []);
+
+  return (
+    <View style={styles.root}>
+      <IconButton icon={'chevron-left'} onPress={handleOnPrevClick} />
+      <View style={{ flex: 1, alignItems: 'center' }}>
+        <Text style={{ textTransform: 'capitalize' }}>{title}</Text>
+      </View>
+      <IconButton icon={'chevron-right'} onPress={handleOnNextClick} />
+    </View>
+  );
+};
+
+export default CalendarHeader;
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    flex: 1,
+  },
+});
diff --git a/lib/components/headers/WeekLabels.tsx b/lib/components/headers/WeekLabels.tsx
new file mode 100644
index 0000000..d77a8b6
--- /dev/null
+++ b/lib/components/headers/WeekLabels.tsx
@@ -0,0 +1,33 @@
+import { StyleSheet, Text, View } from 'react-native';
+import React, { FC, useMemo } from 'react';
+import { startOfWeek, addDays, format } from 'date-fns';
+
+interface Props {}
+const WeekLabels: FC<Props> = ({}) => {
+  const weekDays = useMemo(() => {
+    const weekStart = startOfWeek(new Date(), { weekStartsOn: 1 }); // Monday
+    const days = [];
+
+    for (let i = 0; i < 7; i++) {
+      days.push(addDays(weekStart, i));
+    }
+
+    return days;
+  }, []);
+  return (
+    <View style={styles.root}>
+      {weekDays.map((item, index) => (
+        <View style={styles.container} key={index}>
+          <Text style={{ fontSize: 12 }}>{format(item, 'EEE')}</Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export default WeekLabels;
+
+const styles = StyleSheet.create({
+  root: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, flex: 1 },
+  container: { alignItems: 'center', justifyContent: 'center', flex: 1 },
+});
diff --git a/lib/models/IIconButton.ts b/lib/models/props/IIconButtonProps.ts
similarity index 85%
rename from lib/models/IIconButton.ts
rename to lib/models/props/IIconButtonProps.ts
index f0fe535..5e0e062 100644
--- a/lib/models/IIconButton.ts
+++ b/lib/models/props/IIconButtonProps.ts
@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 
-export interface IIconButton {
+export interface IIconButtonProps {
   icon: ComponentProps<typeof MaterialCommunityIcons>['name'];
   onPress: () => void;
 }
diff --git a/lib/models/props/IStyle.ts b/lib/models/props/IStyle.ts
index 4136c27..578f74e 100644
--- a/lib/models/props/IStyle.ts
+++ b/lib/models/props/IStyle.ts
@@ -4,7 +4,6 @@ import { ITheme } from '../ITheme';
 type IStyle = {
   primary?: string;
   onPrimary?: string;
-  secondary?: string;
   primaryVariant?: string;
   onPrimaryVariant?: string;
   background?: string;
@@ -15,7 +14,6 @@ const defaultTheme: ITheme = {
   colors: {
     primary: '#757575',
     onPrimary: '#F5F5F5',
-    secondary: '#BDBDBD',
     primaryVariant: '#F5F5F5',
     onPrimaryVariant: '#9E9E9E',
     background: '#FAFAFA',
diff --git a/lib/models/props/IWeekContainer.ts b/lib/models/props/IWeekProps.ts
similarity index 72%
rename from lib/models/props/IWeekContainer.ts
rename to lib/models/props/IWeekProps.ts
index 7786cc9..c796d3f 100644
--- a/lib/models/props/IWeekContainer.ts
+++ b/lib/models/props/IWeekProps.ts
@@ -1,4 +1,4 @@
-export interface IWeekContainer {
+export interface IWeekProps {
   week: Date[];
   value: Date[];
   currentDate: Date;
diff --git a/lib/package.json b/lib/package.json
index 2a7dcbd..4cd4e9d 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "roko-date-picker",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A simple single/renge date picker",
   "main": "index.tsx",
   "scripts": {
diff --git a/package-lock.json b/package-lock.json
index ede96df..29ec789 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "expo-status-bar": "~1.6.0",
         "react": "18.2.0",
         "react-native": "0.72.3",
+        "react-native-reanimated": "~3.3.0",
         "react-native-safe-area-context": "^4.7.1"
       },
       "devDependencies": {
@@ -1358,6 +1359,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-object-assign": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.22.5.tgz",
+      "integrity": "sha512-iDhx9ARkXq4vhZ2CYOSnQXkmxkDgosLi3J8Z17mKz7LyzthtkdVchLD7WZ3aXeCuvJDOW3+1I5TpJmwIbF9MKQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
@@ -11718,6 +11733,32 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-reanimated": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz",
+      "integrity": "sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==",
+      "dependencies": {
+        "@babel/plugin-transform-object-assign": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-proposal-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-reanimated/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.1.tgz",
diff --git a/package.json b/package.json
index 5e74bd1..7c04956 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "clear-watchman": "watchman watch-del '/Users/erjonkelleci/Documents/Projects/roko-date-picker' ; watchman watch-project '/Users/erjonkelleci/Documents/Projects/roko-date-picker'"
   },
   "dependencies": {
     "expo": "~49.0.7",
@@ -14,7 +15,8 @@
     "react": "18.2.0",
     "react-native": "0.72.3",
     "date-fns": "^2.30.0",
-    "react-native-safe-area-context": "^4.7.1"
+    "react-native-safe-area-context": "^4.7.1",
+    "react-native-reanimated": "~3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",