diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c523dda
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+public
\ No newline at end of file
diff --git a/README.md b/README.md
index 1ed5d05..cb5dea9 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,48 @@
-# svelte-multistep-form
+# svelte multistep form
+
+Multi Step Form help to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way.
+
+### Demo
+<p align="center">
+  <img width="570" src ="./screen/form-demo.gif">
+</p>
+
+## Get started
+
+Download into your project
+
+```bash
+git clone https://github.com/edenriquez/svelte-multistep-form
+cd svelte-multistep-form 
+npm i
+```
+
+then import into your code
+
+```javascript
+  import { Form, Step } from "<path>/<to>/MultiStepForm";
+```
+## Usage
+
+Firs you need to set up the form steps and initial config
+
+```javascript
+let multiStepOptions = {
+    formTitle: "New Title ✍️",
+    formSubtitle: "Subtitle should be here",
+    stepsDescription: [
+      { title: "STEP 1", subtitle: "All the details to perform on this step" },
+      { title: "STEP 2", subtitle: "All the details to perform on this step" }
+    ]
+  };
+```
+
+after that you only need to call `Form` and `Step` componente in the following way
+
+```javascript
+<Form {multiStepOptions}>
+  <Step>
+   // Here should be your form
+  </Step>
+</Form>
+```
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..90d3db8
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,598 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
+      "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.8.3"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz",
+      "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==",
+      "dev": true
+    },
+    "@babel/highlight": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
+      "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.9.0",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@polka/url": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
+      "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
+    },
+    "@rollup/plugin-commonjs": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.2.tgz",
+      "integrity": "sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.0",
+        "estree-walker": "^1.0.1",
+        "is-reference": "^1.1.2",
+        "magic-string": "^0.25.2",
+        "resolve": "^1.11.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
+      "integrity": "sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8",
+        "@types/resolve": "0.0.8",
+        "builtin-modules": "^3.1.0",
+        "is-module": "^1.0.0",
+        "resolve": "^1.14.2"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.10.tgz",
+      "integrity": "sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "13.13.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.5.tgz",
+      "integrity": "sha512-3ySmiBYJPqgjiHA7oEaIo2Rzz0HrOZ7yrNO5HWyaE5q0lQ3BppDZ3N53Miz8bw2I7gh1/zir2MGVZBvpb1zq9g==",
+      "dev": true
+    },
+    "@types/resolve": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
+      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "acorn": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+      "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+      "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+      "dev": true
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
+    "builtin-modules": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
+      "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
+      "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.1.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.4.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "console-clear": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+      "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ=="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fsevents": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+      "dev": true,
+      "optional": true
+    },
+    "get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
+    },
+    "glob-parent": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-reference": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.4.tgz",
+      "integrity": "sha512-uJA/CDPO3Tao3GTrxYn6AwkM4nUPJiGGYu5+cB8qbC7WGFlrKZbiRo7SFKxUAEpFUfiHofWCXBUNhvYJMh+6zw==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39"
+      }
+    },
+    "jest-worker": {
+      "version": "24.9.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
+      "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
+      "dev": true,
+      "requires": {
+        "merge-stream": "^2.0.0",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
+    },
+    "livereload": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz",
+      "integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.3.0",
+        "livereload-js": "^3.1.0",
+        "opts": ">= 1.2.0",
+        "ws": "^6.2.1"
+      }
+    },
+    "livereload-js": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.2.2.tgz",
+      "integrity": "sha512-xhScbNeC687ZINjEf/bD+BMiPx4s4q0mehcLb3zCc8+mykOtmaBR4vqzyIV9rIGdG9JjHaT0LiFdscvivCjX1Q==",
+      "dev": true
+    },
+    "local-access": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.0.1.tgz",
+      "integrity": "sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA=="
+    },
+    "magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "mime": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.5.tgz",
+      "integrity": "sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w=="
+    },
+    "mri": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.5.tgz",
+      "integrity": "sha512-d2RKzMD4JNyHMbnbWnznPaa8vbdlq/4pNZ3IgdaGrVbBhebBsGUUE/6qorTMYNS6TwuH3ilfOlD2bf4Igh8CKg=="
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "opts": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/opts/-/opts-1.2.7.tgz",
+      "integrity": "sha512-hwZhzGGG/GQ7igxAVFOEun2N4fWul31qE9nfBdCnZGQCB5+L7tN9xZ+94B4aUpLOJx/of3zZs5XsuubayQYQjA==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "dev": true
+    },
+    "readdirp": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
+      "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "require-relative": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
+      "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+      "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+      "dev": true,
+      "requires": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "rollup": {
+      "version": "1.32.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz",
+      "integrity": "sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*",
+        "@types/node": "*",
+        "acorn": "^7.1.0"
+      }
+    },
+    "rollup-plugin-livereload": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz",
+      "integrity": "sha512-abyqXaB21+nFHo+vJULBqfzNx6zXABC19UyvqgDfdoxR/8pFAd041GO+GIUe8ZYC2DbuMUmioh1Lvbk14YLZgw==",
+      "dev": true,
+      "requires": {
+        "livereload": "^0.9.1"
+      }
+    },
+    "rollup-plugin-svelte": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.1.tgz",
+      "integrity": "sha512-wc93cN66sRpX6uFljVFqvWT6NU3V5ab/uLXKt2UiARuexFU/ctolzkmdXM7WM5iKdTX9scToS9sabJTJV4DUMA==",
+      "dev": true,
+      "requires": {
+        "require-relative": "^0.8.7",
+        "rollup-pluginutils": "^2.8.2",
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "rollup-plugin-terser": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz",
+      "integrity": "sha512-XGMJihTIO3eIBsVGq7jiNYOdDMb3pVxuzY0uhOE/FM4x/u9nQgr3+McsjzqBn3QfHIpNSZmFnpoKAwHBEcsT7g==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.5.5",
+        "jest-worker": "^24.9.0",
+        "rollup-pluginutils": "^2.8.2",
+        "serialize-javascript": "^2.1.2",
+        "terser": "^4.6.2"
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^0.6.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        }
+      }
+    },
+    "sade": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.3.tgz",
+      "integrity": "sha512-m4BctppMvJ60W1dXnHq7jMmFe3hPJZDAH85kQ3ACTo7XZNVUuTItCQ+2HfyaMeV5cKrbw7l4vD/6We3GBxvdJw==",
+      "requires": {
+        "mri": "^1.1.0"
+      }
+    },
+    "serialize-javascript": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+      "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
+      "dev": true
+    },
+    "sirv": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-0.4.2.tgz",
+      "integrity": "sha512-dQbZnsMaIiTQPZmbGmktz+c74zt/hyrJEB4tdp2Jj0RNv9J6B/OWR5RyrZEvIn9fyh9Zlg2OlE2XzKz6wMKGAw==",
+      "requires": {
+        "@polka/url": "^0.5.0",
+        "mime": "^2.3.1"
+      }
+    },
+    "sirv-cli": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.5.tgz",
+      "integrity": "sha512-Fl6icSm0EwPrXSGid2xphMp//WNTSX2yENRAGnJuuZNmdc8LvE/BtdZD3MPn28ifAfDqTMwbB3dpcZojAIOiBg==",
+      "requires": {
+        "console-clear": "^1.1.0",
+        "get-port": "^3.2.0",
+        "kleur": "^3.0.0",
+        "local-access": "^1.0.1",
+        "sade": "^1.4.0",
+        "sirv": "^0.4.2",
+        "tinydate": "^1.0.0"
+      }
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
+    "source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "svelte": {
+      "version": "3.22.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.22.2.tgz",
+      "integrity": "sha512-DxumO0+vvHA6NSc2jtVty08I8lFI43q8P2zX6JxZL8J1kqK5NVjad6TRM/twhnWXC+QScnwkZ15O6X1aTsEKTA==",
+      "dev": true
+    },
+    "terser": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.13.tgz",
+      "integrity": "sha512-wMvqukYgVpQlymbnNbabVZbtM6PN63AzqexpwJL8tbh/mRT9LE5o+ruVduAGL7D6Fpjl+Q+06U5I9Ul82odAhw==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.12"
+      }
+    },
+    "tinydate": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.2.0.tgz",
+      "integrity": "sha512-3GwPk8VhDFnUZ2TrgkhXJs6hcMAIIw4x/xkz+ayK6dGoQmp2nUwKzBXK0WnMsqkh6vfUhpqQicQF3rbshfyJkg=="
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "ws": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+      "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+      "dev": true,
+      "requires": {
+        "async-limiter": "~1.0.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2aac799
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "svelte-multistep-forms",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "run-examples": "sirv public/examples",
+    "start": "sirv public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "11.0.2",
+    "@rollup/plugin-node-resolve": "^7.0.0",
+    "rollup": "^1.20.0",
+    "rollup-plugin-livereload": "^1.0.0",
+    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-terser": "^5.1.2",
+    "svelte": "^3.0.0"
+  },
+  "dependencies": {
+    "sirv-cli": "^0.4.4"
+  }
+}
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..ce3c9eb
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,71 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/build/bundle.js'
+	},
+	plugins: [
+		svelte({
+			// enable run-time checks when not in production
+			dev: !production,
+			// we'll extract any component CSS out into
+			// a separate file - better for performance
+			css: css => {
+				css.write('public/build/bundle.css');
+			}
+		}),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte']
+		}),
+		commonjs(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};
+
+function serve() {
+	let started = false;
+
+	return {
+		writeBundle() {
+			if (!started) {
+				started = true;
+
+				require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+					stdio: ['ignore', 'inherit', 'inherit'],
+					shell: true
+				});
+			}
+		}
+	};
+}
diff --git a/screen/form-demo.gif b/screen/form-demo.gif
new file mode 100644
index 0000000..6c82a86
Binary files /dev/null and b/screen/form-demo.gif differ
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..56dddaf
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,115 @@
+<script>
+  import { Form, Step } from "./MultiStepForm";
+  let resetSteps = false;
+  let githubHandle, repoUrl, technology;
+  let multiStepOptions = {
+    formTitle: "New Title ✍️",
+    formSubtitle: "Subtitle should be here",
+    stepsDescription: [
+      { title: "STEP 1", subtitle: "All the details to perform on this step" },
+      { title: "STEP 2", subtitle: "All the details to perform on this step" }
+    ]
+  };
+  let selected = {
+    name: "",
+    text: ""
+  };
+  const categories = [
+    { name: "🍕", text: "🍕 Pizza" },
+    { name: "🌮", text: "🌮 Tacos al pastos" },
+    { name: "🥙", text: "🥙 Otro taco" }
+  ];
+
+  const handleTyping = event => {
+    repoUrl = `http://github.com/${event.target.value}/`;
+  };
+</script>
+
+<style>
+  .wide {
+    width: 100%;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 10px;
+  }
+  .input-label {
+    margin-bottom: 10px;
+  }
+  input {
+    outline: none;
+  }
+  .select-categories {
+    height: 40px;
+    border: 0px;
+    background: #fa0;
+  }
+  .result {
+    color: #848383;
+  }
+  .result h1 {
+    text-align: center;
+  }
+  .blue {
+    color: rgb(89, 86, 221);
+  }
+  .red {
+    color: rgb(218, 39, 39);
+  }
+  .orange {
+    columns: rgb(243, 65, 42);
+  }
+</style>
+
+<main>
+  <Form {multiStepOptions} bind:resetSteps>
+    <Step>
+      <div>
+        <label class="input-label" for="form-url-field">
+          🤖 Github handle :
+        </label>
+        <input
+          class="wide"
+          id="form-input-field"
+          data-multistep-error-message="name couldn't be empty"
+          placeholder="githuber martinez"
+          on:keyup={handleTyping}
+          bind:value={githubHandle} />
+      </div>
+      <div>
+        <label class="input-label" for="form-url-field">🦄 Repo url:</label>
+        <input
+          class="wide"
+          id="form-url-field"
+          type="url"
+          required
+          data-multistep-error-message="url format is wrong"
+          placeholder="http://github.com/handler/repo"
+          bind:value={repoUrl} />
+      </div>
+    </Step>
+    <Step>
+      <div>
+        <label class="input-label" for="form-category-field">Food:</label>
+        <select
+          class="select-categories wide"
+          data-multistep-error-message="Select a profile"
+          bind:value={selected}>
+          {#each categories as category}
+            <option value={category}>{category.text}</option>
+          {/each}
+        </select>
+      </div>
+    </Step>
+  </Form>
+
+  <div class="result">
+    <h1>
+      <span class="red">{githubHandle || ''}</span>
+      <span class="blue">{repoUrl ? `has a repo ${repoUrl}` : ''}</span>
+      <span class="orange">
+        {selected.text ? `and likes ${selected.text}` : ''}
+      </span>
+    </h1>
+  </div>
+</main>
diff --git a/src/MultiStepForm/MasterForm.svelte b/src/MultiStepForm/MasterForm.svelte
new file mode 100644
index 0000000..8e1ae43
--- /dev/null
+++ b/src/MultiStepForm/MasterForm.svelte
@@ -0,0 +1,291 @@
+<script>
+  export let multiStepOptions;
+  export let resetSteps;
+  let currentStep = 0;
+
+  import { onMount, afterUpdate } from "svelte";
+  // TODO: think about it if this is nedeed or useless
+  const uuidv4 = () => {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+      var r = (Math.random() * 16) | 0,
+        v = c == "x" ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  };
+
+  const setPrevButtonOpacity = () => {
+    let prev = document.querySelector("#multistep-prev");
+    prev.style.opacity = 1;
+    if (currentStep == 0) {
+      prev.style.opacity = 0.5;
+    }
+  };
+
+  const setNextButtonOpacity = itemsLenght => {
+    let next = document.querySelector("#multistep-next");
+    next.style.opacity = 1;
+    if (currentStep == itemsLenght - 1) {
+      next.style.opacity = 0.5;
+    }
+  };
+
+  onMount(async () => {
+    let steps = document.querySelectorAll(".step");
+    steps.forEach((step, index) => {
+      step.setAttribute("id", uuidv4());
+      step.dataset.stepNumber = index;
+      if (currentStep === index) {
+        step.classList.remove("step-not-active");
+        step.classList.add("step-is-active");
+      }
+    });
+    setPrevButtonOpacity();
+    setNextButtonOpacity(steps.length);
+  });
+
+  afterUpdate(async () => {
+    if (resetSteps) {
+      let steps = document.querySelectorAll(".step");
+      steps[currentStep].classList.remove("step-is-active");
+      steps[currentStep].classList.add("step-not-active");
+      currentStep = 0;
+      steps[currentStep].classList.remove("step-not-active");
+      steps[currentStep].classList.add("step-is-active");
+      setPrevButtonOpacity();
+      setNextButtonOpacity(steps.length);
+      resetSteps = false;
+    }
+  });
+
+  const formHasError = step => {
+    const requiredFields = step.querySelectorAll("[required]");
+    let hasError = false;
+    let errorMessages = [];
+    requiredFields.forEach(el => {
+      if (!el.checkValidity()) {
+        hasError = true;
+        errorMessages.push(el.dataset.multistepErrorMessage);
+      }
+    });
+    if (hasError) {
+      showError(errorMessages);
+    }
+    return hasError;
+  };
+  const deleteChildNodes = el => {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+  };
+
+  const showError = errorMessages => {
+    let errorField = document.querySelector("#multistep-error-messages");
+    deleteChildNodes(errorField);
+    errorField.style.visibility = "visible";
+    errorField.style.opacity = 1;
+    errorMessages.forEach(message => {
+      let p = document.createElement("p");
+      p.innerText = message;
+      errorField.appendChild(p);
+    });
+    setTimeout(() => {
+      errorField.style.visibility = "hidden";
+      errorField.style.opacity = 0;
+    }, 3000);
+  };
+
+  const previousStep = () => {
+    let steps = document.querySelectorAll(".step");
+    if (currentStep - 1 > -1) {
+      steps[currentStep].classList.add("step-not-active");
+      currentStep -= 1;
+      steps[currentStep].classList.remove("step-not-active");
+      steps[currentStep].classList.add("step-is-active");
+    }
+    setPrevButtonOpacity();
+    setNextButtonOpacity(steps.length);
+  };
+
+  const nextStep = () => {
+    let steps = document.querySelectorAll(".step");
+    if (formHasError(steps[currentStep])) {
+      return;
+    }
+    if (currentStep + 1 <= steps.length - 1) {
+      steps[currentStep].classList.remove("step-is-active");
+      steps[currentStep].classList.add("step-not-active");
+      currentStep += 1;
+      steps[currentStep].classList.remove("step-not-active");
+      steps[currentStep].classList.add("step-is-active");
+    }
+    setPrevButtonOpacity();
+    setNextButtonOpacity(steps.length);
+  };
+</script>
+
+<style>
+  .name {
+    color: #848383;
+  }
+  .subtitle {
+    color: rgb(223, 219, 219);
+    display: block;
+  }
+  .multistep-form {
+    display: flex;
+  }
+  .separator,
+  .multistep-left-sidebar {
+    flex: 1;
+  }
+  .multistep-right-sidebar {
+    flex: 3;
+    text-align: left;
+  }
+  .multistep-continue-button {
+    float: right;
+  }
+  .separator-check {
+    width: 15px;
+    height: 20px;
+    margin: 0 auto;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px #48db71;
+    padding: 11px 10px 2px;
+    z-index: 10;
+  }
+  .separator-check-pending {
+    width: 15px;
+    height: 20px;
+    margin: 0 auto;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px #48db71;
+    padding: 11px 10px 2px;
+    z-index: 10;
+  }
+  .separator-check-current {
+    width: 15px;
+    height: 20px;
+    margin: 0 auto;
+    border-radius: 50%;
+    background: #5e40db;
+    padding: 11px 10px 2px;
+    z-index: 10;
+    box-shadow: 0px 1px 8px #5e40db;
+  }
+  .separator-check-number {
+    color: white;
+    text-align: center;
+    margin-top: -3px;
+  }
+  .separator-check-number-blank {
+    text-align: center;
+    margin-top: -3px;
+  }
+  .separator-line {
+    border-right: 2px solid #ccc;
+    margin: 0 auto;
+    position: relative;
+    height: 40px; /* placeholder, should be displayed dynamically*/
+    width: 1px;
+    margin-bottom: 2px;
+    margin-top: 2px;
+  }
+  .multistep-master-form {
+    padding: 30px;
+    height: 100%;
+  }
+  #multistep-prev {
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  #multistep-next {
+    cursor: pointer;
+    margin-left: 20px;
+  }
+  .dot {
+    height: 8px;
+    width: 8px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    margin-left: -2px;
+    margin-top: 18px;
+  }
+  .multistep-title-side {
+    margin-top: 40px;
+    text-align: right;
+  }
+  .multistep-form-title {
+    text-align: left;
+    color: #636262;
+    font-weight: bold;
+  }
+  .multistep-form-subtitle {
+    text-align: left;
+    color: rgb(223, 219, 219);
+    margin-bottom: 30px;
+    font-weight: lighter;
+  }
+  #multistep-error-messages {
+    position: absolute;
+    right: 0;
+    height: auto;
+    width: auto;
+    border-left: 10px solid red;
+    text-align: left;
+    padding-left: 10px;
+    background: #fff;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s, opacity 0.2s linear;
+  }
+</style>
+
+<div class="multistep-master-form">
+  <div id="multistep-error-messages" />
+  <h1 class="multistep-form-title">{multiStepOptions.formTitle}</h1>
+  <h5 class="multistep-form-subtitle">{multiStepOptions.formSubtitle}</h5>
+  <form class="multistep-form">
+    <div class="multistep-left-sidebar">
+      {#each multiStepOptions.stepsDescription as step}
+        <div class="multistep-title-side">
+          <span class="name">{step.title}</span>
+          <span class="subtitle">{step.subtitle}</span>
+        </div>
+      {/each}
+    </div>
+    <div class="separator">
+      {#each multiStepOptions.stepsDescription as step, index}
+        <div class="separator-line">
+          <span class="dot" />
+        </div>
+        {#if currentStep === index}
+          <div class="separator-check-current">
+            <div class="separator-check-number">{index + 1}</div>
+          </div>
+        {:else if currentStep > index}
+          <div class="separator-check">
+            <svg viewBox="0 0 32 32" style="fill:#48DB71">
+              <path d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z" />
+            </svg>
+          </div>
+        {:else if currentStep < index}
+          <div class="separator-check-pending">
+            <div class="separator-check-number-blank">{index + 1}</div>
+          </div>
+        {/if}
+      {/each}
+    </div>
+    <!-- This slot represents StepForm  -->
+    <div class="multistep-right-sidebar">
+      <slot />
+    </div>
+    <!-- end of  StepForm  -->
+  </form>
+  <div class="multistep-continue-button">
+    <span on:click={previousStep} id="multistep-prev">prev</span>
+    |
+    <span on:click={nextStep} id="multistep-next">next</span>
+  </div>
+</div>
diff --git a/src/MultiStepForm/StepForm.svelte b/src/MultiStepForm/StepForm.svelte
new file mode 100644
index 0000000..2ba3795
--- /dev/null
+++ b/src/MultiStepForm/StepForm.svelte
@@ -0,0 +1,12 @@
+<style>
+  .step-is-active {
+    display: block;
+  }
+  .step-not-active {
+    display: none;
+  }
+</style>
+
+<div class="step step-not-active">
+  <slot />
+</div>
diff --git a/src/MultiStepForm/index.js b/src/MultiStepForm/index.js
new file mode 100644
index 0000000..1cdd792
--- /dev/null
+++ b/src/MultiStepForm/index.js
@@ -0,0 +1,8 @@
+export {
+  default as Step
+}
+from "./StepForm.svelte";
+export {
+  default as Form
+}
+from "./MasterForm.svelte";
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..d80e9a3
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+});
+
+export default app;
\ No newline at end of file