diff --git a/App.tsx b/App.tsx
index 2b64c21..1d567ae 100644
--- a/App.tsx
+++ b/App.tsx
@@ -8,7 +8,7 @@ export default function App() {
   const [range, setRange] = useState<{ startDate: Date; endDate?: Date }>({ startDate: new Date(), endDate: new Date() });
   const [date, setDate] = useState<Date>(new Date());
 
-  const customTheme = {
+  const calendarStyle = {
     primary: '#FF5733',
     onPrimary: '#000000',
     secondary: '#FFC300',
@@ -40,7 +40,7 @@ export default function App() {
         <View style={styles.container}>
           <View style={{ flex: 1 }}>
             {RenderTitle('Multi Date Picker:', range.startDate, range.endDate)}
-            <RokoCalendar theme={customTheme} value={range} onChange={setRange} multiple={true} />
+            <RokoCalendar theme={{ colors: calendarStyle }} value={range} onChange={setRange} multiple={true} />
           </View>
 
           <View style={{ flex: 1 }}>
diff --git a/lib/components/BetweenDates.tsx b/lib/components/BetweenDates.tsx
index e337556..cd76613 100644
--- a/lib/components/BetweenDates.tsx
+++ b/lib/components/BetweenDates.tsx
@@ -1,7 +1,7 @@
 import { StyleSheet, View } from 'react-native';
 import React, { FC, memo } from 'react';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 interface Props {
   isBetween: boolean;
@@ -9,10 +9,10 @@ interface Props {
   secondSelection: boolean;
 }
 const BetweenDates: FC<Props> = ({ isBetween, firstSelection, secondSelection }) => {
-  const theme = useTheme();
+  const context = useTheme();
 
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
   return (
     <View style={[style().root, isBetween && style().isBetween, firstSelection && style().isLeftEdge, secondSelection && style().isRightEdge]} />
@@ -21,7 +21,7 @@ const BetweenDates: FC<Props> = ({ isBetween, firstSelection, secondSelection })
 
 export default memo(BetweenDates);
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: {
       ...StyleSheet.absoluteFillObject,
diff --git a/lib/components/CalendarHeader.tsx b/lib/components/CalendarHeader.tsx
index 0cbf794..43dce52 100644
--- a/lib/components/CalendarHeader.tsx
+++ b/lib/components/CalendarHeader.tsx
@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import IconButton from './IconButton';
 import Constants from '../utils/Constants';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 interface Props {
   handlePreviousMonth: () => void;
@@ -12,10 +12,10 @@ interface Props {
 }
 
 const CalendarHeader: FC<Props> = ({ title, handlePreviousMonth, handleNextMonth }) => {
-  const theme = useTheme();
+  const context = useTheme();
 
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
 
   return (
@@ -29,7 +29,7 @@ const CalendarHeader: FC<Props> = ({ title, handlePreviousMonth, handleNextMonth
 
 export default CalendarHeader;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: {
       alignItems: 'center',
diff --git a/lib/components/Cell.tsx b/lib/components/Cell.tsx
index 14efc33..4cc8557 100644
--- a/lib/components/Cell.tsx
+++ b/lib/components/Cell.tsx
@@ -3,7 +3,7 @@ import React, { FC, memo } from 'react';
 import { format } from 'date-fns';
 import TodayIndicator from './TodayIndicator';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 interface Props {
   day: Date;
@@ -11,10 +11,10 @@ interface Props {
   isCurrentMonth: boolean;
 }
 const Cell: FC<Props> = ({ day, selected, isCurrentMonth }) => {
-  const theme = useTheme();
+  const context = useTheme();
 
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
 
   return (
@@ -29,7 +29,7 @@ const Cell: FC<Props> = ({ day, selected, isCurrentMonth }) => {
 
 export default memo(Cell);
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: { flex: 1, alignItems: 'center', justifyContent: 'center' },
     text: { fontSize: 14, color: theme.onBackground },
diff --git a/lib/components/Day.tsx b/lib/components/Day.tsx
index 1898651..389e781 100644
--- a/lib/components/Day.tsx
+++ b/lib/components/Day.tsx
@@ -1,7 +1,7 @@
 import { Pressable, StyleSheet, View } from 'react-native';
 import React, { FC } from 'react';
 import Cell from './Cell';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 import { useTheme } from '../hooks/ThemeContext';
 
 interface Props {
@@ -12,13 +12,13 @@ interface Props {
 }
 const Day: FC<Props> = ({ day, selected, onChange, isCurrentMonth }) => {
   // #region HOOKS
-  const theme = useTheme();
+  const context = useTheme();
   // #endregion
   // #region FUNCTIONS
   const handleSelectDate = () => onChange(day);
 
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
   // #endregion
   return (
@@ -34,7 +34,7 @@ const Day: FC<Props> = ({ day, selected, onChange, isCurrentMonth }) => {
 
 export default Day;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: {
       flex: 1,
diff --git a/lib/components/IconButton.tsx b/lib/components/IconButton.tsx
index c7f900a..5bc234f 100644
--- a/lib/components/IconButton.tsx
+++ b/lib/components/IconButton.tsx
@@ -3,24 +3,24 @@ import React, { FC } from 'react';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { IIconButton } from '../models/IIconButton';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 const IconButton: FC<IIconButton> = ({ icon, onPress }) => {
   // #region HOOKS
-  const theme = useTheme();
+  const context = useTheme();
   // #endregion
   // #region FUNCTIONS
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
   // #endregion
   return (
     <TouchableOpacity style={style().root} onPress={onPress}>
-      <MaterialCommunityIcons name={icon} size={24} color={theme.onBackground} />
+      <MaterialCommunityIcons name={icon} size={24} color={context.colors.onBackground} />
     </TouchableOpacity>
   );
 };
 
 export default IconButton;
 
-const styles = (theme: ITheme) => StyleSheet.create({ root: { padding: 4, borderRadius: 16 } });
+const styles = (theme: IStyle) => StyleSheet.create({ root: { padding: 4, borderRadius: 16 } });
diff --git a/lib/components/RokoCalendar.tsx b/lib/components/RokoCalendar.tsx
index ad00eb5..4efd196 100644
--- a/lib/components/RokoCalendar.tsx
+++ b/lib/components/RokoCalendar.tsx
@@ -8,8 +8,9 @@ import CalendarHeader from './CalendarHeader';
 import WeekContainer from './WeekContainer';
 import WeekIndicator from './WeekIndicator';
 import ErrorView from './ErrorView';
-import { ITheme, defaultTheme } from '../models/props/ITheme';
+import { IStyle, defaultTheme } from '../models/props/IStyle';
 import ThemeContext from '../hooks/ThemeContext';
+import { ITheme } from '../models/ITheme';
 
 type SelectionProps = ISingleSelection | IMultiSelection;
 
@@ -69,7 +70,7 @@ const RokoCalendar: FC<RokoCalendarProps> = ({ multiple, value, onChange, theme
   );
 
   const style = () => {
-    return styles(theme);
+    return styles(theme.colors);
   };
   // #endregion
   return (
@@ -89,7 +90,7 @@ const RokoCalendar: FC<RokoCalendarProps> = ({ multiple, value, onChange, theme
 
 export default RokoCalendar;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: {
       flex: 1,
diff --git a/lib/components/TodayIndicator.tsx b/lib/components/TodayIndicator.tsx
index 26ef2d5..27c38bc 100644
--- a/lib/components/TodayIndicator.tsx
+++ b/lib/components/TodayIndicator.tsx
@@ -2,7 +2,7 @@ import { StyleSheet, View } from 'react-native';
 import React, { FC } from 'react';
 import { isToday } from 'date-fns';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 interface Props {
   value: Date;
@@ -10,16 +10,16 @@ interface Props {
 }
 const TodayIndicator: FC<Props> = ({ value, selected }) => {
   // #region HOOKS
-  const theme = useTheme();
+  const context = useTheme();
   // #endregion
   // #region FUNCTIONS
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
   // #endregion
 
   if (isToday(value)) {
-    return <View style={[style().root, { backgroundColor: selected ? theme.primaryVariant : theme.onPrimaryVariant }]} />;
+    return <View style={[style().root, { backgroundColor: selected ? context.colors.primaryVariant : context.colors.onPrimaryVariant }]} />;
   } else {
     return null;
   }
@@ -27,5 +27,5 @@ const TodayIndicator: FC<Props> = ({ value, selected }) => {
 
 export default TodayIndicator;
 
-const styles = (theme: ITheme) =>
+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 784df02..d0f3c07 100644
--- a/lib/components/WeekContainer.tsx
+++ b/lib/components/WeekContainer.tsx
@@ -4,15 +4,24 @@ import Day from './Day';
 import { isAfter, isBefore, isEqual, 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
   // #region FUNCTIONS
   function isBetweenDates(targetDate: Date, startDate: Date, endDate: Date) {
     return (isAfter(targetDate, startDate) || isEqual(targetDate, startDate)) && (isBefore(targetDate, endDate) || isEqual(targetDate, endDate));
   }
   // #endregion
   return (
-    <View style={styles.root}>
+    <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));
         const selected = foundIndex > -1;
@@ -35,7 +44,6 @@ export default memo(WeekContainer);
 
 const styles = StyleSheet.create({
   root: {
-    flex: 1,
     flexDirection: 'row',
   },
 });
diff --git a/lib/components/WeekIndicator.tsx b/lib/components/WeekIndicator.tsx
index 15fb7ac..0ebd8d8 100644
--- a/lib/components/WeekIndicator.tsx
+++ b/lib/components/WeekIndicator.tsx
@@ -2,17 +2,17 @@ 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 { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 import { useTheme } from '../hooks/ThemeContext';
 
 interface Props {}
 const WeekIndicator: FC<Props> = ({}) => {
   // #region HOOKS
-  const theme = useTheme();
+  const context = useTheme();
   // #endregion
   // #region FUNCTIONS
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
 
   const weekDays = useMemo(() => {
@@ -40,7 +40,7 @@ const WeekIndicator: FC<Props> = ({}) => {
 
 export default WeekIndicator;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: { flexDirection: 'row', alignItems: 'center', paddingVertical: Constants.spacing.regular },
     container: { alignItems: 'center', justifyContent: 'center', flex: 1 },
diff --git a/lib/hooks/ThemeContext.tsx b/lib/hooks/ThemeContext.tsx
index 91af225..83bf2fe 100644
--- a/lib/hooks/ThemeContext.tsx
+++ b/lib/hooks/ThemeContext.tsx
@@ -1,6 +1,7 @@
 // ThemeContext.tsx
-import React, { createContext, useContext } from 'react';
-import { ITheme, defaultTheme } from '../models/props/ITheme';
+import { createContext, useContext } from 'react';
+import { defaultTheme } from '../models/props/IStyle';
+import { ITheme } from '../models/ITheme';
 
 const ThemeContext = createContext<ITheme>(defaultTheme);
 
diff --git a/lib/models/ITheme.ts b/lib/models/ITheme.ts
new file mode 100644
index 0000000..f6bdd29
--- /dev/null
+++ b/lib/models/ITheme.ts
@@ -0,0 +1,7 @@
+import { ISpaces } from './props/ISpaces';
+import { IStyle } from './props/IStyle';
+
+export interface ITheme {
+  colors: IStyle;
+  spacing?: ISpaces;
+}
diff --git a/lib/models/props/ISpaces.ts b/lib/models/props/ISpaces.ts
new file mode 100644
index 0000000..9c48af1
--- /dev/null
+++ b/lib/models/props/ISpaces.ts
@@ -0,0 +1,3 @@
+export interface ISpaces {
+  weekHeight?: number;
+}
diff --git a/lib/models/props/IStyle.ts b/lib/models/props/IStyle.ts
new file mode 100644
index 0000000..4136c27
--- /dev/null
+++ b/lib/models/props/IStyle.ts
@@ -0,0 +1,30 @@
+import { ITheme } from '../ITheme';
+
+// Theme.ts
+type IStyle = {
+  primary?: string;
+  onPrimary?: string;
+  secondary?: string;
+  primaryVariant?: string;
+  onPrimaryVariant?: string;
+  background?: string;
+  onBackground?: string;
+};
+
+const defaultTheme: ITheme = {
+  colors: {
+    primary: '#757575',
+    onPrimary: '#F5F5F5',
+    secondary: '#BDBDBD',
+    primaryVariant: '#F5F5F5',
+    onPrimaryVariant: '#9E9E9E',
+    background: '#FAFAFA',
+    onBackground: '#212121',
+  },
+  spacing: {
+    weekHeight: undefined,
+  },
+};
+
+export type { IStyle };
+export { defaultTheme };
diff --git a/lib/models/props/ITheme.ts b/lib/models/props/ITheme.ts
deleted file mode 100644
index bf22ef3..0000000
--- a/lib/models/props/ITheme.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Theme.ts
-type ITheme = {
-  primary: string;
-  onPrimary: string;
-  secondary: string;
-  primaryVariant: string;
-  onPrimaryVariant: string;
-  background: string;
-  onBackground: string;
-};
-
-const defaultTheme: ITheme = {
-  primary: '#757575',
-  onPrimary: '#F5F5F5',
-  secondary: '#BDBDBD',
-  primaryVariant: '#F5F5F5',
-  onPrimaryVariant: '#9E9E9E',
-  background: '#FAFAFA',
-  onBackground: '#212121',
-};
-
-export type { ITheme };
-export { defaultTheme };
diff --git a/lib/package-lock.json b/lib/package-lock.json
index 9369634..ac0fda9 100644
--- a/lib/package-lock.json
+++ b/lib/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "roko-date-picker",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "roko-date-picker",
-      "version": "1.0.3",
+      "version": "1.0.5",
       "license": "ISC",
       "peerDependencies": {
         "@expo/vector-icons": "^>=11.0.0 <=13.0.0",
diff --git a/lib/package.json b/lib/package.json
index 93fdf7c..2a7dcbd 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "roko-date-picker",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A simple single/renge date picker",
   "main": "index.tsx",
   "scripts": {