diff --git a/README.md b/README.md
index aaff4b0..bad0530 100644
--- a/README.md
+++ b/README.md
@@ -25,8 +25,10 @@ yarn add react-page-progress
 | Props  |  Type  | isRequired | Example                                                                                                                                            |
 | :----- | :----: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------- |
 | color  | string |     No     | `'Default is SkyBlue'`, `'green'` or `'#fb6249'` or ` 'rgb(255, 26, 26)'``// If you want Progress bar Opaque, You can use rgba(...) or hsla(...) ` |
-| height | number |     No     | `'Should be a Number, 4 is default'`                                                                                                               |
-
+| thickness  | number |     No     | `'Should be a Number, default is 5'`                                                                                                                                     |
+| isVertical  | boolean |     No     | `'Should be a Boolean, default is false'`                                                                                                                                 |
+| speed  | number |     No     | `'Should be a Number in miliseconds, default is 200'`                                                                                                                                   |
+| isDirection   | string |     Yes     | `'Accepted values left/right & top/bottom'`                                                                                                                                |
 ### Demo
 
 **Watch Demo [Here](https://nomangul.github.io/react-page-progress)**
diff --git a/src/demo/App.js b/src/demo/App.js
index edbd3b3..881d62b 100644
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -7,7 +7,7 @@ export default class App extends Component {
   render() {
     return (
       <div className="divExample">
-        <PageProgress color={"#08bfd5"} height={5} />
+        <PageProgress color={"#08bfd5"} isVertical={false} speed ={200} isDirection="left" />
         <h1 className="hExample">React Page Progress Here!</h1>
         <p className="scrollIt">Just Scroll It</p>
         <Child />
diff --git a/src/lib/components/PageProgress.js b/src/lib/components/PageProgress.js
index b0b0208..97f8cb6 100644
--- a/src/lib/components/PageProgress.js
+++ b/src/lib/components/PageProgress.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 
-const PageProgress = ({ color, height, ...props }) => {
-  const [width, setWidth] = useState(null);
+const PageProgress = ({ color, thickness, isVertical, speed, isDirection, ...props }) => {
+  const [dimension, setDimension] = useState(null);
 
   const watchScrolling = () => {
     const { scrollHeight, clientHeight, scrollTop } = document.documentElement;
@@ -9,9 +9,9 @@ const PageProgress = ({ color, height, ...props }) => {
     const winHeight = scrollHeight - clientHeight;
     const scrolled = `${(winScroll / winHeight) * 100}%`;
     if (winHeight > 0) {
-      return setWidth(scrolled);
+      return setDimension(scrolled);
     } else {
-      return setWidth(0);
+      return setDimension(0);
     }
   };
 
@@ -20,7 +20,7 @@ const PageProgress = ({ color, height, ...props }) => {
     return () => {
       window.removeEventListener("scroll", watchScrolling);
     };
-  }, [color, height]);
+  }, [color, thickness]);
 
   const styles = {
     progress: {
@@ -28,11 +28,11 @@ const PageProgress = ({ color, height, ...props }) => {
       padding: 0,
       background: color ? color : "skyblue",
       position: "fixed",
-      height: height ? height : 4,
-      width: width,
-      top: 0,
+      height: isVertical ? dimension : thickness || 5,
+      width: !isVertical ? dimension : thickness || 5,
+      [isDirection]: 0,
       zIndex: 99,
-      transition: "width 200ms ease-out"
+      transition: `${isVertical ? 'height' : 'width'} ${speed  || 200}ms ease-out`
     }
   };