diff --git a/src/components/CopilotModal.js b/src/components/CopilotModal.js
index 00a610fa..890ebd46 100644
--- a/src/components/CopilotModal.js
+++ b/src/components/CopilotModal.js
@@ -5,6 +5,7 @@ import Tooltip from './Tooltip';
 import StepNumber from './StepNumber';
 import styles, { MARGIN, ARROW_SIZE, STEP_NUMBER_DIAMETER, STEP_NUMBER_RADIUS } from './style';
 import type { SvgMaskPathFn } from '../types';
+import { Dimensions } from 'react-native';
 
 type Props = {
   stop: () => void,
@@ -20,6 +21,7 @@ type Props = {
   tooltipComponent: ?React$Component,
   tooltipStyle?: Object,
   stepNumberComponent: ?React$Component,
+  stepCountInTooltip: any,
   overlay: 'svg' | 'view',
   animated: boolean,
   androidStatusBarVisible: boolean,
@@ -49,7 +51,9 @@ class CopilotModal extends Component<Props, State> {
     animationDuration: 400,
     tooltipComponent: Tooltip,
     tooltipStyle: {},
+    arrowConfiguration: {},
     stepNumberComponent: StepNumber,
+    stepCountInTooltip: {},
     // If react-native-svg native module was avaialble, use svg as the default overlay component
     overlay: typeof NativeModules.RNSVGSvgViewManager !== 'undefined' ? 'svg' : 'view',
     // If animated was not specified, rely on the default overlay type
@@ -134,30 +138,45 @@ class CopilotModal extends Component<Props, State> {
 
     const verticalPosition = relativeToBottom > relativeToTop ? 'bottom' : 'top';
     const horizontalPosition = relativeToLeft > relativeToRight ? 'left' : 'right';
-
+    const { arrowSize ,color ,position } = this.props.arrowConfiguration;
     const tooltip = {};
     const arrow = {};
-
     if (verticalPosition === 'bottom') {
-      tooltip.top = obj.top + obj.height + MARGIN;
-      arrow.borderBottomColor = this.props.arrowColor;
-      arrow.top = tooltip.top - (ARROW_SIZE * 2);
+      tooltip.top = obj.top + obj.height + (arrowSize === 'large' ? 18 : MARGIN);
+      arrow.borderBottomColor = color || '#fff';
+      arrow.top = tooltip.top - (arrowSize === 'large' ? 28 : ARROW_SIZE * 2);
     } else {
-      tooltip.bottom = layout.height - (obj.top - MARGIN);
-      arrow.borderTopColor = this.props.arrowColor;
-      arrow.bottom = tooltip.bottom - (ARROW_SIZE * 2);
+      tooltip.bottom = layout.height - (obj.top - (arrowSize === 'large' ? 18 : MARGIN));
+      arrow.borderTopColor = color || '#fff';
+      arrow.bottom = tooltip.bottom - (arrowSize === 'large' ? 24 : ARROW_SIZE * 2);
+
     }
 
     if (horizontalPosition === 'left') {
       tooltip.right = Math.max(layout.width - (obj.left + obj.width), 0);
       tooltip.right = tooltip.right === 0 ? tooltip.right + MARGIN : tooltip.right;
       tooltip.maxWidth = layout.width - tooltip.right - MARGIN;
-      arrow.right = tooltip.right + MARGIN;
-    } else {
+      if(Dimensions.get('window').width - tooltip.maxWidth < 40 )
+      {
+        if(position === 'center'){
+          arrow.right =  Math.round( tooltip.maxWidth/2);
+        }
+        else arrow.right = tooltip.right + MARGIN; 
+      }
+      else arrow.right = tooltip.right + MARGIN;
+    } 
+    else {
       tooltip.left = Math.max(obj.left, 0);
       tooltip.left = tooltip.left === 0 ? tooltip.left + MARGIN : tooltip.left;
       tooltip.maxWidth = layout.width - tooltip.left - MARGIN;
-      arrow.left = tooltip.left + MARGIN;
+      if(Dimensions.get('window').width - tooltip.maxWidth < 40 )
+      {
+        if(position === 'center'){
+          arrow.left =  Math.round( tooltip.maxWidth/2);
+        }
+        else arrow.left = tooltip.left + MARGIN
+      }
+      else arrow.left = tooltip.left + MARGIN
     }
 
     const animate = {
@@ -262,10 +281,11 @@ class CopilotModal extends Component<Props, State> {
     const {
       tooltipComponent: TooltipComponent,
       stepNumberComponent: StepNumberComponent,
+      stepCountInTooltip : { enable,marginRight,marginTop }
     } = this.props;
 
     return [
-      <Animated.View
+      !enable && <Animated.View
         key="stepNumber"
         style={[
           styles.stepNumberContainer,
@@ -275,15 +295,33 @@ class CopilotModal extends Component<Props, State> {
           },
         ]}
       >
-        <StepNumberComponent
+       <StepNumberComponent
           isFirstStep={this.props.isFirstStep}
           isLastStep={this.props.isLastStep}
           currentStep={this.props.currentStep}
           currentStepNumber={this.props.currentStepNumber}
         />
       </Animated.View>,
-      <Animated.View key="arrow" style={[styles.arrow, this.state.arrow]} />,
-      <Animated.View key="tooltip" style={[styles.tooltip, this.state.tooltip, this.props.tooltipStyle]}>
+      <Animated.View key="arrow" style={[styles.arrow,this.props.arrowConfiguration.arrowSize && {borderWidth:18}, this.state.arrow]} />,
+      <Animated.View key="tooltip" style={[styles.tooltip, this.props.tooltipStyle, this.state.tooltip]}>
+        {enable && <View 
+         style={[
+          styles.stepNumberContainer,
+          {
+            right:  marginRight || 5,
+            top: marginTop ? marginTop > 0 ? marginTop : 5 : 5,
+            zIndex: Math.pow(10,6)
+          },
+        ]}
+        >
+        <StepNumberComponent
+          isFirstStep={this.props.isFirstStep}
+          isLastStep={this.props.isLastStep}
+          currentStep={this.props.currentStep}
+          currentStepNumber={this.props.currentStepNumber}
+        />
+        </View>}
+       
         <TooltipComponent
           isFirstStep={this.props.isFirstStep}
           isLastStep={this.props.isLastStep}
diff --git a/src/components/style.js b/src/components/style.js
index ce9fdfcd..16607a14 100644
--- a/src/components/style.js
+++ b/src/components/style.js
@@ -1,7 +1,7 @@
 // @flow
 import { StyleSheet } from 'react-native';
 
-export const STEP_NUMBER_RADIUS: number = 14;
+export const STEP_NUMBER_RADIUS: number = 16;
 export const STEP_NUMBER_DIAMETER: number = STEP_NUMBER_RADIUS * 2;
 export const ZINDEX: number = 100;
 export const MARGIN: number = 13;
@@ -47,13 +47,13 @@ export default StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: 2,
+    // borderWidth: 2,
     borderRadius: STEP_NUMBER_RADIUS,
     borderColor: '#FFFFFF',
-    backgroundColor: '#27ae60',
+    backgroundColor: '#19A664',
   },
   stepNumberText: {
-    fontSize: 10,
+    fontSize: 20,
     backgroundColor: 'transparent',
     color: '#FFFFFF',
   },
diff --git a/src/hocs/copilot.js b/src/hocs/copilot.js
index 85d09659..93599630 100644
--- a/src/hocs/copilot.js
+++ b/src/hocs/copilot.js
@@ -41,6 +41,8 @@ const copilot = ({
   backdropColor,
   stopOnOutsideClick = false,
   svgMaskPath,
+  arrowConfiguration,
+  stepCountInTooltip,
   verticalOffset = 0,
   wrapperStyle,
   arrowColor,
@@ -219,7 +221,8 @@ const copilot = ({
               backdropColor={backdropColor}
               svgMaskPath={svgMaskPath}
               stopOnOutsideClick={stopOnOutsideClick}
-              arrowColor={arrowColor}
+              arrowConfiguration={arrowConfiguration}
+              stepCountInTooltip={stepCountInTooltip}
               ref={(modal) => { this.modal = modal; }}
             />
           </View>