diff --git a/README.md b/README.md
index c200a0c..dea07f3 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,603 @@
-[](https://raw.githubusercontent.com/christabor/css-progress-wizard/master/LICENSE)
-
-
-## A pure css progress indicator!
-* Pure CSS (lightweight, easy to implement)
-* Flexbox - easy to update and add more items
-* Resizeable/responsive (text-resize, etc... try it!)
-* Easy to customize design (sass mixins/variables, etc...)
-* Written with SASS
+[](https://raw.githubusercontent.com/christabor/css-progress-wizard/master/LICENSE)
+
+
+
+GITHUB https://github.com/christabor/css-progress-wizard
+
+DEMO http://christabor.github.io/css-progress-wizard/
+
+# A pure css progress indicator!
+
+- Pure CSS (lightweight, easy to implement)
+
+- Flexbox - easy to update and add more items
+
+- Resizeable/responsive (text-resize, etc... try it!)
+
+- Easy to customize design (sass mixins/variables, etc...)
+
+- Written with SASS
+
+
+## Table of contents
+
+* [Bar and Progress Format](#bar-and-progress-format-)
+ * [Bar](#bar-)
+ * [Horizontal Bar](#horizontal-bar-)
+ * [Bubble](#bubble-)
+ * [Bar](#bar-)
+ * [Vertical Bar](#vertical-bar-)
+ * [Text and Subdued Text](#text-and-subdued-text-)
+ * [Bar Format Class](#bar-format-class-)
+ * [Progress Format Class](#progress-format-class-)
+
+* [Color](#color-)
+ * [Bubble](#bubble--)
+ * [Bar](#bar--)
+ * [Vertical Bar](#vertical-bar--)
+ * [Color Class](#color-class-)
+
+* [Time Line](#time-line-)
+
+ * [Time and sub-info](#time-and-sub-info-)
+
+* [No Center Align](#no-center-align-)
+
+* [Icons](#icons-)
+
+
+## Bar and Progress Format [↟](#table-of-contents)
+
+### Bar [↟](#table-of-contents)
+
+#### Horizontal Bar [↟](#table-of-contents)
+
+##### Bubble [↟](#table-of-contents)
+
+
+
+Show this example code
+
+```html
+
+
+
+
+ Step 1.
+
+
+
+
+ Step 2.
+
+
+
+
+ Step 3.
+
+
+
+
+ Step 4.
+
+
+
+ Step 5.
+
+
+```
+
+
+
+* How to use:
+ ```html
+
+
+
(...)
+
+ ```
+
+##### Bar [↟](#table-of-contents)
+
+
+
+Show this example code
+
+```html
+
+
+
+
+ Step 1.
+
+
+
+
+ Step 2.
+
+
+
+ Step 3.
+
+
+
+ Step 4.
+
+
+
+ Step 5.
+
+
+```
+
+
+
+* How to use:
+ ```html
+
+
+
(...)
+
+ ```
+
+#### Vertical Bar [↟](#table-of-contents)
+
+
+
+Show this example code
+
+```html
+
+
+
+
+
+ June 3rd, 2014
+ / Added a thing. Pssst... I'm a link!
+
+
+
+
+
+
+ May 21st, 2014
+ / Some stuff happened. It was amazing.
+
+
+
+
+
+
+
+
+
+ June 3rd, 2014
+ / Added a thing. Pssst... I'm a link!
+
+
+
+
+
+ May 21st, 2014
+ / Some stuff happened. It was amazing.
+
+
+
+```
+
+
+
+* How to use:
+ ```html
+
+
+
(...)
+
+ ```
+
+##### Text and Subdued Text [↟](#table-of-contents)
+
+
+
+Show this example code
+
+```html
+
+
+
+
+ I'm stacked-text
+ /I'm a subdued text 1
+
+
+
+
+
+ I'm stacked-text 2
+
+
+ I'm a subdued text with line break
+
+
+
+```
+
+
+* How to use:
+ ```html
+
+
+
+ I'm stacked-text 1
+
+
+ /I'm a subdued text 1
+
+
+
+ ```
+
+### Bar Format Class [↟](#table-of-contents)
+
+| format | class |
+| :--------: | :--------: |
+| horizontal | (no class) |
+| vertical | stacked |
+
+```html
+
+
+
(...)
+
+```
+
+### Progress Format Class [↟](#table-of-contents)
+
+| format | class |
+| :----: | :-------------------------------: |
+| bubble | progress-indicator |
+| bar | progress-indicator custom-complex |
+
+```html
+
+
+
+
+```
+
+## Color [↟](#table-of-contents)
+
+### Bubble [↟](#table-of-contents)
+
+
+
+Show this example code
+
+```html
+
+
+
+ green
+ (completed)
+
+
+
+ blue
+ (active)
+
+
+
+ purple
+ (info)
+
+
+
+ yellow
+ (warning)
+
+
+
+ red
+ (danger)
+
+
+
+ gray
+ no class
+
+
+```
+
+
+### Bar [↟](#table-of-contents)
+
+
+
+Show vertical bar example code
+
+```html
+
+
+
+
+ green
+ (completed)
+
+
+
+
+ blue
+ (active)
+
+
+
+
+ purple
+ (info)
+
+
+
+
+ yellow
+ (warning)
+
+
+
+
+ red
+ (danger)
+
+
+
+
+ gray
+ no class
+
+
+```
+
+
+
+### Vertical Bar [↟](#table-of-contents)
+
+
+
+Show this example code
+
+```html
+
+
+
+
+
+
+ green
+ (completed)
+
+
+
+
+
+
+ blue
+ (active)
+
+
+
+
+
+
+ purple
+ (info)
+
+
+
+
+
+
+
+
+
+ yellow
+ (warning)
+
+
+
+
+
+ red
+ (danger)
+
+
+
+
+
+
+ (gray)
+ no classe
+
+
+
+```
+
+
+### Color Class [↟](#table-of-contents)
+
+| progress | text & icon color | class |
+| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
+|  green |  green | `completed` |
+|  blue |  blue | `active` |
+|  purple |  gray | `info` |
+|  yellow |  gray | `warning` |
+|  red |  gray | `danger` |
+|  gray |  gray | no class |
+
+```html
+
+
+
+
+ (...)
+
+
+```
+
+## Time Line [↟](#table-of-contents)
+
+
+
+Show this example code
+
+```html
+
+
+ 1:30 - 2:30
+
+
+ Some really cool title
+ By a special speaker
+
+
+
+
+```
+
+
+
+* How to use:
+ ```html
+
+ (...)
+
+ ```
+
+### Time and sub-info [↟](#table-of-contents)
+
+```html
+
(...)
+
+ (time)
+
+
+
+
I'm sub-info
+
Second sub-info
+
Last sub-info
+
+ (...)
+
+
+```
+
+## No Center Align [↟](#table-of-contents)
+
+
+
+Show this example code
+
+```html
+
+
+
+
+ NO CENTER
+
+
+
+ NO CENTER
+
+
+
+ NO CENTER
+
+
+```
+
+
+
+* How to use:
+ ```html
+
+ (...)
+
+ ```
+
+## Icons [↟](#table-of-contents)
+
+Font Awesome Icons.
+
+
+
+Show this example code
+
+```html
+