diff --git a/README.md b/README.md
index 8e1b310..03dc2c3 100644
--- a/README.md
+++ b/README.md
@@ -112,40 +112,95 @@ const { toast } = useToast()
 <Button onPress={() => toast({ bg: 'myBgColor', color: 'myTextColor' })} />
 ```
 
+## Fully Customizable Styling
+
+You are now able to fully customize both the style of the Toast component itself, as well as the close button - all while respecting your theme contstraints. This can be achieved through the `toastStyles` and `closeButtonStyles` objects respectively. You can also hide the accent view. These options need to be passed to the internal toast config:
+
+<br />
+
+```
+toast({
+  message: "My First Toast!",
+  toastStyles: {
+    bg: "lightblue",
+    borderRadius: 16,
+  },
+  color: "white",
+  iconColor: "white",
+  iconFamily: "Entypo",
+  iconName: "info",
+  closeButtonStyles: {
+    px: 4,
+    bg: "darkgrey",
+    borderRadius: 16,
+  },
+  closeIconColor: "white",
+  hideAccent: true,
+});
+```
+
+Above is an example of a fully customized toast which renders the following:
+<br />
+
+<p>
+  <img alt="react-native-styled-toast gif" src="https://i.imgur.com/aQvzU2F.png" width="350">
+</p>
+
+## Max Toasts
+
+Along with the new styling updates, you are now also able to limit the number of toasts which a user can see. To do so, simply pass the `maxToasts` prop to the `ToastProvider` component:
+
+```
+<ToastProvider maxToasts={2} offset={16} position="BOTTOM">
+  <Container />
+</ToastProvider>
+```
+
+<p>
+  <img alt="react-native-styled-toast gif" src="https://i.imgur.com/4LCdpjP.gif" width="350">
+</p>
+
+<br />
+
 ## Dark Mode Compatible 🌗
 
 Because of the theming capability of `react-native-styled-toast`, it has out of the box support for dark mode. All you need to do is ensure the color keys you're using for your different modes are the same
 
+<br />
+
 ## Props
 
 ### `ToastProvider`
 
-| Prop           | Type   | Required | Description                                    | Default                   |
-| -------------- | ------ | -------- | ---------------------------------------------- | ------------------------- |
-| **`position`** | enum   | no       | Sets the position of the toasts                | TOP                       |
-| **`offset`**   | number | no       | Increases default offset from the top / bottom | Constants.statusBarHeight |
+| Prop            | Type   | Required | Description                                    | Default                   |
+| --------------- | ------ | -------- | ---------------------------------------------- | ------------------------- |
+| **`maxToasts`** | number | no       | Sets max number of toasts to show              | Constants.statusBarHeight |
+| **`offset`**    | number | no       | Increases default offset from the top / bottom | Constants.statusBarHeight |
+| **`position`**  | enum   | no       | Sets the position of the toasts                | TOP                       |
 
 ### `ToastConfig`
 
-| Prop                        | Type    | Required | Description                                                            | Default        |
-| --------------------------- | ------- | -------- | ---------------------------------------------------------------------- | -------------- |
-| **`accentColor`**           | string  | no       | Sets the background color of the accent on the left                    | undefined      |
-| **`bg`**                    | string  | no       | Sets the background color of the toast                                 | background     |
-| **`borderColor`**           | string  | no       | Sets border color of toast                                             | border         |
-| **`closeButtonBgColor`**    | string  | no       | Sets bg color of the close button                                      | muted          |
-| **`closeIconBorderRadius`** | number  | no       | Sets the border radius of the close icon container                     | 4              |
-| **`closeIconColor`**        | string  | no       | Sets the color of the close icon                                       | text           |
-| **`color`**                 | string  | no       | Sets the text color of the toast                                       | text           |
-| **`duration`**              | number  | no       | ms duration of toast before auto closing. 0 = infinite.                | 3000           |
-| **`hideIcon`**              | boolean | no       | Toggles whether to show / hide icon                                    | false          |
-| **`iconColor`**             | string  | no       | Customize icon color using key from theme                              | undefined      |
-| **`iconFamily`**            | string  | no       | Allow referencing of custom icon family from react-native-vector-icons | Feather        |
-| **`iconName`**              | string  | no       | Allow referencing of custom icon name from specified icon family       | undefined      |
-| **`intent`**                | enum    | no       | Updates icon and accent color based on intent.                         | SUCCESS        |
-| **`message`**               | string  | yes      | Text message that gets rendered                                        | Toast Message! |
-| **`onPress`**               | func    | no       | Function that gets exectuted onPress of toast                          | () => false    |
-| **`shouldVibrate`**         | boolean | no       | Toggles whether phone vibrates on notification                         | false          |
-| **`subMessage`**            | string  | no       | Sub message that gets rendered below message                           | undefined      |
+| Prop                    | Type    | Required | Description                                                            | Default        |
+| ----------------------- | ------- | -------- | ---------------------------------------------------------------------- | -------------- |
+| **`accentColor`**       | string  | no       | Sets the background color of the accent on the left                    | undefined      |
+| **`closeButtonStyles`** | object  | no       | Allows custom styling of the close button, values pull from theme      | N/A            |
+| **`closeIconColor`**    | string  | no       | Sets the color of the close icon                                       | text           |
+| **`closeIconFamily`**   | string  | no       | Sets the family of the close icon                                      | Feather        |
+| **`closeIconName`**     | string  | no       | Sets the name of the close icon                                        | 'x'            |
+| **`closeIconSize`**     | string  | no       | Sets the size of the close icon                                        | 20             |
+| **`color`**             | string  | no       | Sets the text color of the toast                                       | text           |
+| **`duration`**          | number  | no       | ms duration of toast before auto closing. 0 = infinite.                | 3000           |
+| **`hideAccent`**        | boolean | no       | Shows / hides accent                                                   | undefined      |
+| **`hideIcon`**          | boolean | no       | Toggles whether to show / hide icon                                    | false          |
+| **`iconColor`**         | string  | no       | Customize icon color using key from theme                              | undefined      |
+| **`iconFamily`**        | string  | no       | Allow referencing of custom icon family from react-native-vector-icons | Feather        |
+| **`iconName`**          | string  | no       | Allow referencing of custom icon name from specified icon family       | undefined      |
+| **`intent`**            | enum    | no       | Updates icon and accent color based on intent.                         | SUCCESS        |
+| **`message`**           | string  | yes      | Text message that gets rendered                                        | Toast Message! |
+| **`onPress`**           | func    | no       | Function that gets exectuted onPress of toast                          | () => false    |
+| **`shouldVibrate`**     | boolean | no       | Toggles whether phone vibrates on notification                         | false          |
+| **`subMessage`**        | string  | no       | Sub message that gets rendered below message                           | undefined      |
+| **`toastStyles`**       | object  | no       | Allows custom styling of the Toast component. Values pull from theme   | undefined      |
 
 <br />
 <div>Toast icon by <a href="https://www.flaticon.com/authors/ultimatearm" title="ultimatearm">ultimatearm</a> from <a href="https://www.flaticon.com/"             title="Flaticon">www.flaticon.com</a></div>
diff --git a/src/Context/index.tsx b/src/Context/index.tsx
index f629194..6ced9f4 100644
--- a/src/Context/index.tsx
+++ b/src/Context/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { LayoutAnimation, UIManager } from 'react-native'
+import { LayoutAnimation, LayoutAnimationConfig, UIManager } from 'react-native'
 import { getStatusBarHeight } from 'react-native-status-bar-height'
 import Box from '../Box'
 import Toast, { ToastConfig } from '../Toast'
@@ -10,6 +10,7 @@ type ToastContextType = {
   toast: (options: ToastConfig) => void
   position?: 'TOP' | 'BOTTOM'
   offset?: number
+  maxToasts?: number
 }
 
 export const ToastContext = React.createContext<ToastContextType>({
@@ -24,20 +25,47 @@ UIManager && UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLay
 
 export type FullToastConfig = ToastConfig & ToastInternalConfig
 
-const ToastProvider: React.FC<Omit<ToastContextType, 'toast'>> = ({ children, position, offset: offsetProp }) => {
+const CustomLayoutConfig: LayoutAnimationConfig = {
+  duration: 300,
+  create: {
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity
+  },
+  update: {
+    type: LayoutAnimation.Types.easeInEaseOut
+  },
+  delete: {
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity
+  }
+}
+
+const ToastProvider: React.FC<Omit<ToastContextType, 'toast'>> = ({
+  children,
+  position,
+  offset: offsetProp,
+  maxToasts
+}) => {
   const [toasts, setToasts] = React.useState<FullToastConfig[]>([])
 
   const toast = (newToast: ToastConfig) => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-    setToasts((prevToasts) =>
-      position === 'BOTTOM'
-        ? [...prevToasts, { index: prevToasts.length, id: uuid(), ...newToast }]
-        : [{ index: prevToasts.length, id: uuid(), ...newToast }, ...prevToasts]
-    )
+    LayoutAnimation.configureNext(CustomLayoutConfig)
+    setToasts((prevToasts) => {
+      const toasts =
+        position === 'BOTTOM'
+          ? [...prevToasts, { index: prevToasts.length, id: uuid(), ...newToast }]
+          : [{ index: prevToasts.length, id: uuid(), ...newToast }, ...prevToasts]
+      if (maxToasts && prevToasts.length === maxToasts) {
+        position === 'BOTTOM' ? toasts.shift() : toasts.pop()
+        return toasts
+      } else {
+        return toasts
+      }
+    })
   }
 
   const hideToast = (id: string) => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    LayoutAnimation.configureNext(CustomLayoutConfig)
     setToasts((prevToasts) => prevToasts.filter((el) => el.id !== id))
   }
 
diff --git a/src/Icon/index.tsx b/src/Icon/index.tsx
index 90009d7..165a5ca 100644
--- a/src/Icon/index.tsx
+++ b/src/Icon/index.tsx
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import * as React from 'react'
 import Entypo from 'react-native-vector-icons/Entypo'
 import EvilIcons from 'react-native-vector-icons/EvilIcons'
@@ -23,7 +21,7 @@ export type IconProps = SpaceProps &
     size: number
     testID?: string
   }
-const Icon: React.SFC<IconProps> = (props) => {
+const Icon: React.FC<IconProps> = (props) => {
   let Icon
   switch (props.family) {
     case 'Entypo':
@@ -66,7 +64,7 @@ const Icon: React.SFC<IconProps> = (props) => {
     ${color};
     ${space};
   `
-  return <StyledIcon name={props.name} {...props} />
+  return <StyledIcon {...props} />
 }
 
 export default Icon
diff --git a/src/Toast/index.tsx b/src/Toast/index.tsx
index 81c2e08..d0009b2 100644
--- a/src/Toast/index.tsx
+++ b/src/Toast/index.tsx
@@ -1,39 +1,45 @@
 import * as React from 'react'
-import { Animated, Vibration } from 'react-native'
+import { Animated, TouchableOpacity, Vibration } from 'react-native'
 import { getStatusBarHeight } from 'react-native-status-bar-height'
 import Box from '../Box'
+import { BoxProps } from '../Box/index'
 import Icon from '../Icon'
-import { Accent, CloseButtonCont, Heading, IconCont, StyledToast, SubText } from './styles'
+import { Accent, Heading, IconCont, StyledToast, StyledToastProps, SubText } from './styles'
+
+type IconFamilies =
+  | 'Entypo'
+  | 'EvilIcons'
+  | 'Feather'
+  | 'FontAwesome'
+  | 'Foundation'
+  | 'Ionicons'
+  | 'MaterialCommunityIcons'
+  | 'MaterialIcons'
+  | 'Octicons'
+  | 'SimpleLineIcons'
+  | 'Zocial'
 
 export type ToastConfig = {
   accentColor?: string
   bg?: string
-  borderColor?: string
-  closeButtonBgColor?: string
-  closeButtonBorderRadius?: number
+  closeButtonStyles?: BoxProps
   closeIconColor?: string
+  closeIconFamily?: IconFamilies
+  closeIconName?: string
+  closeIconSize?: number
   color?: string
   duration?: number
+  hideAccent?: boolean
   hideIcon?: boolean
+  iconColor?: string
+  iconFamily?: IconFamilies
+  iconName?: string
   intent?: 'SUCCESS' | 'ERROR' | 'INFO'
   message: string
   onPress?: () => void
   shouldVibrate?: boolean
   subMessage?: string
-  iconFamily?:
-    | 'Entypo'
-    | 'EvilIcons'
-    | 'Feather'
-    | 'FontAwesome'
-    | 'Foundation'
-    | 'Ionicons'
-    | 'MaterialCommunityIcons'
-    | 'MaterialIcons'
-    | 'Octicons'
-    | 'SimpleLineIcons'
-    | 'Zocial'
-  iconName?: string
-  iconColor?: string
+  toastStyles?: StyledToastProps
 }
 
 const statusBarHeight = getStatusBarHeight()
@@ -58,16 +64,39 @@ const shadow = {
   elevation: 1
 }
 
+const DEFAULT_PROPS: ToastConfig = {
+  duration: 3000,
+  intent: 'SUCCESS',
+  onPress: () => false,
+  shouldVibrate: false,
+  closeIconColor: 'text',
+  message: 'Toast message!',
+  hideIcon: false,
+  toastStyles: {
+    borderColor: 'border',
+    bg: 'background'
+  },
+  closeButtonStyles: {
+    p: 2,
+    mx: 2,
+    bg: 'muted',
+    borderRadius: 4,
+    alignItems: 'center'
+  }
+}
+
 export const Toast: React.FC<ToastConfig & ToastInternalConfig> = ({
   accentColor,
-  bg,
-  borderColor,
-  closeButtonBgColor,
-  closeButtonBorderRadius,
   closeIconColor,
+  closeIconFamily,
+  closeIconName,
+  closeIconSize,
   color,
   duration,
   hideIcon,
+  iconColor,
+  iconFamily,
+  iconName,
   id,
   index,
   intent,
@@ -77,9 +106,9 @@ export const Toast: React.FC<ToastConfig & ToastInternalConfig> = ({
   position,
   shouldVibrate,
   subMessage,
-  iconFamily,
-  iconName,
-  iconColor
+  toastStyles,
+  hideAccent,
+  closeButtonStyles
 }) => {
   const isSuccess = intent === 'SUCCESS'
   const isInfo = intent === 'INFO'
@@ -120,18 +149,21 @@ export const Toast: React.FC<ToastConfig & ToastInternalConfig> = ({
 
   return (
     <StyledToast
-      mb={4}
-      py={2}
-      bg={bg}
-      onPress={onPress}
-      pr={!!subMessage ? 2 : 0}
-      borderColor={borderColor}
+      onPress={() => {
+        onPress && onPress()
+        onClose && id && onClose(id)
+      }}
       style={{ transform: [{ translateY }, { scale }], ...shadow }}
+      {...toastStyles}
+      pr={!!subMessage ? 2 : 0}
     >
-      <Accent
-        testID="toast-accent"
-        bg={!!accentColor ? accentColor : isSuccess ? 'success' : isInfo ? 'info' : 'error'}
-      />
+      {!hideAccent && (
+        <Accent
+          testID="toast-accent"
+          bg={!!accentColor ? accentColor : isSuccess ? 'success' : isInfo ? 'info' : 'error'}
+        />
+      )}
+
       {!hideIcon && (
         <IconCont px={4}>
           <Icon
@@ -142,7 +174,7 @@ export const Toast: React.FC<ToastConfig & ToastInternalConfig> = ({
           />
         </IconCont>
       )}
-      <Box py={2} pr={!!subMessage ? 2 : 0} flex={1} pl={hideIcon ? 4 : 0} alignItems="flex-start">
+      <Box alignItems="flex-start" flex={1} pl={hideIcon ? 4 : 0} pr={!!subMessage ? 2 : 0} py={2}>
         <Box flexDirection="row" flexWrap="wrap" flex={1}>
           <Heading color={color}>{message}</Heading>
         </Box>
@@ -152,26 +184,22 @@ export const Toast: React.FC<ToastConfig & ToastInternalConfig> = ({
           </SubText>
         )}
       </Box>
-      <CloseButtonCont onPress={() => onClose && id && onClose(id)}>
-        <Box p={2} mx={2} alignItems="center" bg={closeButtonBgColor} borderRadius={closeButtonBorderRadius}>
-          <Icon size={20} family="Feather" name="x" color={closeIconColor} />
-        </Box>
-      </CloseButtonCont>
+      <Box
+        as={TouchableOpacity}
+        onPress={() => onClose && id && onClose(id)}
+        {...Object.assign({}, DEFAULT_PROPS.closeButtonStyles, closeButtonStyles)}
+      >
+        <Icon
+          size={closeIconSize || 20}
+          family={closeIconFamily || 'Feather'}
+          name={closeIconName || 'x'}
+          color={closeIconColor}
+        />
+      </Box>
     </StyledToast>
   )
 }
 
 export default React.memo(Toast)
 
-Toast.defaultProps = {
-  duration: 3000,
-  intent: 'SUCCESS',
-  onPress: () => false,
-  shouldVibrate: false,
-  closeIconColor: 'text',
-  message: 'Toast message!',
-  closeButtonBgColor: 'muted',
-  closeButtonBorderRadius: 4,
-  borderColor: 'border',
-  hideIcon: false
-}
+Toast.defaultProps = DEFAULT_PROPS
diff --git a/src/Toast/styles.tsx b/src/Toast/styles.tsx
index c4bf5af..cc4a180 100644
--- a/src/Toast/styles.tsx
+++ b/src/Toast/styles.tsx
@@ -1,47 +1,70 @@
 import { Animated, TouchableOpacity } from 'react-native'
 import styled from 'styled-components/native'
 import {
-  borderColor,
-  BorderColorProps,
+  background,
+  BackgroundProps,
+  border,
+  BorderProps,
   color,
   ColorProps,
+  compose,
+  flexbox,
+  FlexboxProps,
   fontSize,
   FontSizeProps,
+  layout,
+  LayoutProps,
+  position,
+  PositionProps,
+  shadow,
+  ShadowProps,
   space,
   SpaceProps,
   textAlign,
-  TextAlignProps,
-  top,
-  TopProps
+  TextAlignProps
 } from 'styled-system'
 
-type StyledToastProps = SpaceProps &
+export const systemProps = compose(
+  space,
+  layout,
+  color,
+  flexbox,
+  background,
+  border,
+  position,
+  shadow
+)
+
+export type StyledToastProps = SpaceProps &
   ColorProps &
-  TopProps &
-  BorderColorProps & {
+  LayoutProps &
+  FlexboxProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps & {
+    elevation?: number
     accentColor?: string
   }
 
 const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity)
 
-export const StyledToast = styled(AnimatedTouchable)<StyledToastProps>`
-  ${top};
-  ${color};
-  ${space};
-  ${borderColor};
-  flex: 1;
-  width: 100%;
-  z-index: 1000;
-  border-width: 1px;
-  border-radius: 4px;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-`
+export const StyledToast = styled(AnimatedTouchable)<StyledToastProps>(systemProps)
 
 StyledToast.defaultProps = {
+  py: 2,
+  mb: 4,
+  flex: 1,
+  zIndex: 1000,
+  width: '100%',
   bg: 'background',
-  accentColor: 'success'
+  borderWidth: '1px',
+  borderRadius: '4px',
+  alignItems: 'center',
+  flexDirection: 'row',
+  accentColor: 'success',
+  justifyContent: 'center',
+  borderColor: 'border'
 }
 
 export const Accent = styled.View<ColorProps>`