diff --git a/README.md b/README.md
index 339c129..b96eec6 100644
--- a/README.md
+++ b/README.md
@@ -136,6 +136,16 @@ Props that can be passed to the component are listed below:
       </td>
       <td><code>undefined</code></td>
     </tr>
+    <tr>
+      <td><code><b>completedNodeStyle?:</b> object</code></td>
+      <td>Custom styles for completed nodes</td>
+      <td><code>undefined</code></td>
+    </tr>
+    <tr>
+      <td><code><b>currentNodeStyle?:</b> object</code></td>
+      <td>Custom styles for current nodes</td>
+      <td><code>undefined</code></td>
+    </tr>
   </tbody>
 </table>
 
@@ -159,7 +169,8 @@ function App() {
     }),
     CompletedNode: () => ({
       backgroundColor: "#028A0F",
-  };
+   })
+ };
 
   return (
     <Stepper
diff --git a/src/node/node.tsx b/src/node/node.tsx
index 5549132..538394b 100644
--- a/src/node/node.tsx
+++ b/src/node/node.tsx
@@ -19,24 +19,22 @@ const Node: FC<INodeProps> = (props) => {
     currentStepIndex,
     handleStepClick,
     showCursor,
-    getStyles
+    getStyles,
+    nodeStyle
   } = props;
 
+  const isCompleted = step.completed;
+  const isActive = index === currentStepIndex;
+
   return (
     <div
       className={`${styles.eachNode}
       ${showCursor && styles.cursorPointer}
-      ${index === currentStepIndex && styles.activeStepNode}
-      ${!step.completed && currentStepIndex !== index && styles.inactiveStepNode}
-      ${step.completed && currentStepIndex !== index && styles.completedStepNode}
+      ${isActive && styles.activeStepNode}
+      ${!isCompleted && !isActive && styles.inactiveStepNode}
+      ${isCompleted && !isActive && styles.completedStepNode}
       `}
-      style={{
-        ...((getStyles(Elements.Node)) || {}),
-        ...((index === currentStepIndex && getStyles(Elements.ActiveNode)) || {}),
-        ...((step.completed && getStyles(Elements.CompletedNode)) || {}),
-        ...((!step.completed && currentStepIndex !== index
-            && getStyles(Elements.InActiveNode)) || {})
-      }}
+      style={nodeStyle}
       onClick={(): void | null => handleStepClick && handleStepClick()}
       role="presentation"
       id="stepper-node"
@@ -44,13 +42,15 @@ const Node: FC<INodeProps> = (props) => {
       {(renderNode && renderNode(step, index))
     || (
       <>
-        {step?.completed && (
+        {isCompleted ? (
           <img
             src={whiteTick}
             className={styles.whiteTickImg}
             alt=""
-          />)
-        || index + 1}
+          />
+        ) : (
+          index + 1
+        )}
       </>
     )}
     </div>
diff --git a/src/node/types.d.ts b/src/node/types.d.ts
index 9ac608b..ac7aba7 100644
--- a/src/node/types.d.ts
+++ b/src/node/types.d.ts
@@ -1,13 +1,14 @@
-import { ReactElement } from "react";
-import { IStep } from "../stepper/types";
+import { ReactElement, CSSProperties } from "react";
 import { Elements } from "../constants";
+import type { IStep } from "../stepper/types";
 
-export type INodeProps = {
+export interface INodeProps {
   step: IStep;
-  renderNode?(step: IStep, index: number): ReactElement;
   index: number;
-  currentStepIndex?: number;
-  handleStepClick(): void;
+  currentStepIndex: number;
+  handleStepClick?: () => void;
   showCursor: boolean;
-  getStyles(element: Elements): object;
-};
+  renderNode?: (step: IStep, stepIndex: number) => ReactElement;
+  getStyles: (element: Elements) => object;
+  nodeStyle?: CSSProperties;
+}
diff --git a/src/stepper/step.tsx b/src/stepper/step.tsx
index 5fb13c5..3cadd66 100644
--- a/src/stepper/step.tsx
+++ b/src/stepper/step.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import "./styles.scss";
-import type { IStepProps } from "../stepper/types";
+import type { IStepProps } from "./types";
 import { LABEL_POSITION, ORIENTATION } from "../constants";
 import StepContent from "./stepContent";
 import StepInfo from "./stepInfo";
@@ -26,7 +26,9 @@ const Step: (props: IStepProps) => JSX.Element = ({
     showDescriptionsForAllSteps = false,
     stepContent,
     onStepClick,
-    renderNode
+    renderNode,
+    completedNodeStyle,
+    currentNodeStyle
   } = stepperProps;
   const [nodeWidth, setNodeWidth] = useState(0);
 
@@ -68,51 +70,39 @@ const Step: (props: IStepProps) => JSX.Element = ({
     currentStepIndex > index ? "activeConnector" : ""
   } ${index === steps.length - 1 ? "hiddenConnector" : ""}`;
 
+  const stepInfoProps = {
+    orientation,
+    labelPosition,
+    isVertical,
+    isInlineLabelsAndSteps,
+    index,
+    currentStepIndex,
+    step,
+    showDescriptionsForAllSteps,
+    onStepClick,
+    renderNode,
+    styles,
+    nodeRef,
+    prevConnectorClassName,
+    nextConnectorClassName,
+    steps,
+    completedNodeStyle,
+    currentNodeStyle
+  };
+
   return orientation !== ORIENTATION.VERTICAL &&
     labelPosition === LABEL_POSITION.TOP ? (
-      <StepInfo
-        orientation={orientation}
-        labelPosition={labelPosition}
-        isVertical={isVertical}
-        isInlineLabelsAndSteps={isInlineLabelsAndSteps}
-        index={index}
-        currentStepIndex={currentStepIndex}
-        step={step}
-        showDescriptionsForAllSteps={showDescriptionsForAllSteps}
-        onStepClick={onStepClick}
-        renderNode={renderNode}
-        styles={styles}
-        nodeRef={nodeRef}
-        prevConnectorClassName={prevConnectorClassName}
-        nextConnectorClassName={nextConnectorClassName}
-        steps={steps}
-      />
+      <StepInfo {...stepInfoProps} />
     ) : (
       <div
         className={
           orientation === ORIENTATION.VERTICAL &&
-        labelPosition === LABEL_POSITION.LEFT
+          labelPosition === LABEL_POSITION.LEFT
             ? "verticalTextLeftContainer"
             : ""
         }
       >
-        <StepInfo
-          orientation={orientation}
-          labelPosition={labelPosition}
-          isVertical={isVertical}
-          isInlineLabelsAndSteps={isInlineLabelsAndSteps}
-          index={index}
-          currentStepIndex={currentStepIndex}
-          step={step}
-          showDescriptionsForAllSteps={showDescriptionsForAllSteps}
-          onStepClick={onStepClick}
-          renderNode={renderNode}
-          styles={styles}
-          nodeRef={nodeRef}
-          prevConnectorClassName={prevConnectorClassName}
-          nextConnectorClassName={nextConnectorClassName}
-          steps={steps}
-        />
+        <StepInfo {...stepInfoProps} />
         <StepContent
           labelPosition={labelPosition}
           isVertical={isVertical}
diff --git a/src/stepper/stepInfo.tsx b/src/stepper/stepInfo.tsx
index 401f01d..a18da54 100644
--- a/src/stepper/stepInfo.tsx
+++ b/src/stepper/stepInfo.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties }  from "react";
 import "./styles.scss";
 import type { IStepInfoProps } from "./types";
 import Node from "../node";
@@ -6,6 +6,11 @@ import { LABEL_POSITION, Elements, ORIENTATION } from "../constants";
 import getStyles from "../utils/getStyles";
 import getLabelStyle from "../utils/getLabelStyle";
 
+interface NodeStyles {
+  elementStyle: Elements;
+  customStyle: CSSProperties | undefined;
+}
+
 /**
  * To handle step display (inline or not)
  * Can handle description display and label
@@ -27,118 +32,157 @@ const StepInfo: (props: IStepInfoProps) => JSX.Element = ({
   nodeRef,
   prevConnectorClassName,
   nextConnectorClassName,
-  steps
-}: IStepInfoProps) => (
-  <div
-    id="stepper-step"
-    className={
-      isVertical
-        ? `verticalStepperWrapper ${
-          labelPosition === LABEL_POSITION.LEFT ? "labelLeft" : ""
-        }`
-        : "horizontalStepperWrapper"
-    }
-  >
-    {!isInlineLabelsAndSteps && (
-      <div className={getLabelStyle(orientation, labelPosition)} onClick={(): void => onStepClick && onStepClick(step, index)}>
-        <div
-          className="label"
-          id={`step-label-${index}`}
-          style={{
-            ...(getStyles(styles, Elements.LabelTitle, step, index) || {}),
-            ...(index === currentStepIndex &&
-              (getStyles(styles, Elements.ActiveLabelTitle, step, index) ||
-                {}))
-          }}
-        >
-          {step.stepLabel}
-        </div>
-        {step.stepDescription && (showDescriptionsForAllSteps || index === currentStepIndex) &&
-          orientation !== ORIENTATION.VERTICAL &&
-          labelPosition === LABEL_POSITION.TOP && (
+  steps,
+  completedNodeStyle,
+  currentNodeStyle
+}: IStepInfoProps) => {
+  const getNodeStyle = (): CSSProperties => {
+    const defaultStyles = getStyles(styles, Elements.Node, step, index) as CSSProperties;
+    const isCompleted = step.completed;
+    const isActive = index === currentStepIndex;
+
+    const getNodeStyles = (): NodeStyles => {
+      switch (true) {
+      case isCompleted:
+        return {
+          elementStyle: Elements.CompletedNode,
+          customStyle: completedNodeStyle
+        };
+      case isActive:
+        return {
+          elementStyle: Elements.ActiveNode,
+          customStyle: currentNodeStyle
+        };
+      default:
+        return {
+          elementStyle: Elements.InActiveNode,
+          customStyle: undefined
+        };
+      }
+    };
+
+    const { elementStyle, customStyle } = getNodeStyles();
+
+    return {
+      ...defaultStyles,
+      ...(getStyles(styles, elementStyle, step, index) as CSSProperties),
+      ...(customStyle || {})
+    };
+  };
+
+  return (
+    <div
+      id="stepper-step"
+      className={
+        isVertical
+          ? `verticalStepperWrapper ${
+            labelPosition === LABEL_POSITION.LEFT ? "labelLeft" : ""
+          }`
+          : "horizontalStepperWrapper"
+      }
+    >
+      {!isInlineLabelsAndSteps && (
+        <div className={getLabelStyle(orientation, labelPosition)} onClick={(): void => onStepClick && onStepClick(step, index)}>
           <div
-            className="description"
-            id={`step-horizontal-top-description-${index}`}
+            className="label"
+            id={`step-label-${index}`}
             style={{
-              ...(currentStepIndex === index
-                ? getStyles(
-                  styles,
-                  Elements.ActiveLabelDescription,
-                  step,
-                  index
-                ) || {}
-                : getStyles(styles, Elements.LabelDescription, step, index) ||
-                    {})
+              ...(getStyles(styles, Elements.LabelTitle, step, index) || {}),
+              ...(index === currentStepIndex &&
+                (getStyles(styles, Elements.ActiveLabelTitle, step, index) ||
+                  {}))
             }}
           >
-            {step.stepDescription}
+            {step.stepLabel}
           </div>
-        )}
-      </div>
-    )}
-    <div className="stepContainer" id={`${index}-node`} ref={nodeRef}>
-      <div
-        className={prevConnectorClassName}
-        style={{
-          ...(steps[index - 1]?.completed
-            ? getStyles(styles, Elements.LineSeparator, step, index) || {}
-            : getStyles(styles, Elements.InactiveLineSeparator, step, index) ||
-              {})
-        }}
-      />
-      <div
-        className={`node ${
-          [LABEL_POSITION.TOP, LABEL_POSITION.LEFT].includes(labelPosition)
-            ? "reversedNode"
-            : ""
-        }`}
-      >
-        <Node
-          step={step}
-          index={index}
-          currentStepIndex={currentStepIndex}
-          handleStepClick={(): void => onStepClick && onStepClick(step, index)}
-          showCursor={!!onStepClick}
-          renderNode={renderNode}
-          getStyles={(element: Elements): object =>
-            getStyles(styles, element, step, index)
-          }
+          {step.stepDescription && (showDescriptionsForAllSteps || index === currentStepIndex) &&
+            orientation !== ORIENTATION.VERTICAL &&
+            labelPosition === LABEL_POSITION.TOP && (
+            <div
+              className="description"
+              id={`step-horizontal-top-description-${index}`}
+              style={{
+                ...(currentStepIndex === index
+                  ? getStyles(
+                    styles,
+                    Elements.ActiveLabelDescription,
+                    step,
+                    index
+                  ) || {}
+                  : getStyles(styles, Elements.LabelDescription, step, index) ||
+                      {})
+              }}
+            >
+              {step.stepDescription}
+            </div>
+          )}
+        </div>
+      )}
+      <div className="stepContainer" id={`${index}-node`} ref={nodeRef}>
+        <div
+          className={prevConnectorClassName}
+          style={{
+            ...(steps[index - 1]?.completed
+              ? getStyles(styles, Elements.LineSeparator, step, index) || {}
+              : getStyles(styles, Elements.InactiveLineSeparator, step, index) ||
+                {})
+          }}
         />
-      </div>
-      {isInlineLabelsAndSteps && (
         <div
-          className={`labelContainer ${
+          className={`node ${
             [LABEL_POSITION.TOP, LABEL_POSITION.LEFT].includes(labelPosition)
-              ? "reversedLabelContainer"
+              ? "reversedNode"
               : ""
           }`}
         >
+          <Node
+            step={step}
+            index={index}
+            currentStepIndex={currentStepIndex}
+            handleStepClick={(): void => onStepClick && onStepClick(step, index)}
+            showCursor={!!onStepClick}
+            renderNode={renderNode}
+            getStyles={(element: Elements): object =>
+              getStyles(styles, element, step, index)
+            }
+            nodeStyle={getNodeStyle()}
+          />
+        </div>
+        {isInlineLabelsAndSteps && (
           <div
-            className={`label ${isVertical && "verticalStepperInlineLabel"}`}
-            id={`step-inline-label-${index}`}
-            style={{
-              ...(getStyles(styles, Elements.LabelTitle, step, index) || {}),
-              ...(index === currentStepIndex &&
-                (getStyles(styles, Elements.ActiveLabelTitle, step, index) ||
-                  {}))
-            }}
-            onClick={(): void => onStepClick && onStepClick(step, index)}
+            className={`labelContainer ${
+              [LABEL_POSITION.TOP, LABEL_POSITION.LEFT].includes(labelPosition)
+                ? "reversedLabelContainer"
+                : ""
+            }`}
           >
-            {step.stepLabel}
+            <div
+              className={`label ${isVertical && "verticalStepperInlineLabel"}`}
+              id={`step-inline-label-${index}`}
+              style={{
+                ...(getStyles(styles, Elements.LabelTitle, step, index) || {}),
+                ...(index === currentStepIndex &&
+                  (getStyles(styles, Elements.ActiveLabelTitle, step, index) ||
+                    {}))
+              }}
+              onClick={(): void => onStepClick && onStepClick(step, index)}
+            >
+              {step.stepLabel}
+            </div>
           </div>
-        </div>
-      )}
-      <div
-        className={nextConnectorClassName}
-        style={{
-          ...(step.completed
-            ? getStyles(styles, Elements.LineSeparator, step, index) || {}
-            : getStyles(styles, Elements.InactiveLineSeparator, step, index) ||
-              {})
-        }}
-      />
+        )}
+        <div
+          className={nextConnectorClassName}
+          style={{
+            ...(step.completed
+              ? getStyles(styles, Elements.LineSeparator, step, index) || {}
+              : getStyles(styles, Elements.InactiveLineSeparator, step, index) ||
+                {})
+          }}
+        />
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default StepInfo;
diff --git a/src/stepper/types.d.ts b/src/stepper/types.d.ts
index dd62f3b..fb7ccd1 100644
--- a/src/stepper/types.d.ts
+++ b/src/stepper/types.d.ts
@@ -1,4 +1,4 @@
-import { LegacyRef, ReactElement } from "react";
+import { LegacyRef, ReactElement, CSSProperties } from "react";
 import { LABEL_POSITION, ORIENTATION } from "../constants";
 import { Elements } from "../constants";
 
@@ -18,6 +18,8 @@ export type IStepperProps = {
   stepContent?(step: IStep, stepIndex: number): ReactElement; 
   onStepClick?(step: IStep, stepIndex: number): void;
   renderNode?(step: IStep, stepIndex: number): ReactElement;
+  completedNodeStyle?: CSSProperties;
+  currentNodeStyle?: CSSProperties;
 };
 
 export type IStyleFunction = (step: IStep, stepIndex: number) => object;
@@ -44,6 +46,8 @@ export type IStepInfoProps = {
   prevConnectorClassName: string;
   nextConnectorClassName: string;
   steps: IStep[];
+  completedNodeStyle?: CSSProperties;
+  currentNodeStyle?: CSSProperties;
 }
 
 export type IStepContentProps = {