diff --git a/css/style.css b/css/style.css
index 724201e..3f16587 100644
--- a/css/style.css
+++ b/css/style.css
@@ -80,10 +80,10 @@ a, a:visited {
 
 ul {
     list-style: none;
-    text-align: left;
     margin-left: 0;
     padding-left: 1em;
     text-indent: -1em;
+    text-shadow: 0 2px 1px #fff;
 }
 
 ul li:before {
@@ -96,24 +96,38 @@ ul li:before {
 
 /** coding  block */
 blockquote {
-    color: white;
     text-align: left;
     margin: 10px auto;
     background: #131420;
     border-bottom: 2px solid #30334F;
     border-right: 2px solid #30334F;
-    border-radius: 7px;
-    padding: 5px 30px;
-    font-size: 0.8em;
+    border-radius: 10px;
+    padding: 5px 20px;
+
 }
 
 code {
     font-style: normal;
     padding-left: 5px;
+    border-radius: 10px;
+    color: white;
+    padding: 5px 15px;
+    font-family: menlo, monospace;
+    background: #131420;
+    text-shadow: none;
+    font-size: 0.8em;
 }
 
 /*----------------------------------------  Images */
 
+div#git-repo {
+    background: url("../img/git-repo.png") no-repeat scroll center center transparent;
+    height: 275px;
+    width: 257px;
+    position: relative;
+    z-index: 99;
+}
+
 div#init-img {
     background: url("../img/init.png") no-repeat scroll center center transparent;
     height: 122px;
@@ -171,6 +185,10 @@ div#violet-line-img {
     margin-left: 30px;
 }
 
+/*.col-2:after {
+    clear: both;
+}*/
+
 #main {
     margin: 0 auto;
     position: relative;
@@ -211,9 +229,9 @@ div#violet-line-img {
     opacity: .8;
 }
 
-
 #title {
-    margin: 80px auto 0;
+    margin: auto;
+    padding-top: 40px;
     width: 1150px;
     position: relative;
     z-index: 99;
@@ -243,6 +261,11 @@ div#violet-line-img {
     width: 100%;
 }
 
+#head-img {
+    position: relative;
+    top: 200px;
+}
+
 #download {
     position: absolute;
     top: 380px;
@@ -282,6 +305,8 @@ div#violet-line-img {
     font-style: italic;
 }
 
+
+#disqus_thread { width: 800px; text-align: left; margin-left: auto; margin-right: auto; }
 /*----------------------------------------  Banner */
 #banner {
     height: 149px;
diff --git a/img/download.png b/img/download.png
new file mode 100644
index 0000000..46dff5c
Binary files /dev/null and b/img/download.png differ
diff --git a/img/git-flow.png b/img/git-flow.png
new file mode 100644
index 0000000..37c983d
Binary files /dev/null and b/img/git-flow.png differ
diff --git a/index.html b/index.html
index 8a96eb9..8c6ce75 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -59,159 +59,304 @@
                 as pdf</a>
             <span class="accent">&bigstar;</span>
         </p>-->
+        <img id="head-img" src="/img/git-flow.png" alt="git flow"/>
     </div>
 </header>
 
-
 <div id="main">
 
-    <div class="scrollblock">
-        <h2>About</h2>
+<div class="scrollblock">
+    <h2 id="animate1">About</h2>
 
-        <p>
-            git-flow are a set of git extensions to provide high-level repository operations for Vincent
-            Driessen's branching model.
-            <small><a href="http://nvie.com/posts/a-successful-git-branching-model/">more</a></small>
-        </p>
-        <p class="divider">&#9733; &#9733; &#9733;</p>
+    <p>
+        git-flow are a set of git extensions to provide high-level repository operations for Vincent
+        Driessen's branching model.
+        <small><a href="http://nvie.com/posts/a-successful-git-branching-model/">more</a></small>
+    </p>
+    <p class="divider">&#9733; &#9733; &#9733;</p>
 
-        <p>This cheatsheet shows the basic usage and effect of git-flow operations</p>
-
-        <p class="divider">&#9733; &#9733; &#9733;</p>
-    </div>
-
-    <div class="scrollblock">
-            <h2>Basic tips</h2>
-            <ul>
-                <li>git flow provides excellent command line help and output. Read it carefully to see what's happening...</li>
-            </ul>
-
-            <p class="divider">&#9733; &#9733; &#9733;</p>
-        </div>
-
-    <div class="scrollblock">
-        <h2>Initialize</h2>
-
-        <div class="col-1">
-            <h3>git flow init</h3>
-
-            <p>Start using git-flow by initializing it inside a git repository</p>
-            <blockquote>
-                <code>
-                    git flow init
-                </code>
-            </blockquote>
-            <p>
-                You'll have to answer a few questions regarding the naming conventions for your branches.<br/>
-                I strongly recommend using the default values.
-            </p>
-
-        </div>
-        <div class="col-2">
-            <div id="init-img"></div>
-            <div id="blue-line-img"></div>
-        </div>
-    </div>
-
-    <div class="scrollblock">
-        <h2>Features</h2>
-
-        <div class="col-1">
-            <h3>Start a new feature</h3>
-
-            <p>
-                Development of new features starting from the develop branch.
-            </p>
-
-            <p>Start developing a new feature with</p>
-            <blockquote>
-                <code>
-                    git-flow feature start MYFEATURE
-                </code>
-            </blockquote>
-        </div>
-        <div class="col-2">
-            <div id="feature-start-img"></div>
-            <div id="violet-line-img"></div>
-        </div>
-    </div>
-
-    <div class="scrollblock">
-        <div class="col-1">
-            <h3>Finish up a feature</h3>
-
-            <p>
-                Finish the development of a feature.
-                This action performs the following
-            </p>
-            <ul>
-                <li>Merged MYFEATURE into develop</li>
-                <li>Removes the feature branch</li>
-                <li>Switches back to develop branch</li>
-            </ul>
-
-            <blockquote>
-                <code>
-                    git-flow feature finish MYFEATURE
-                </code>
-            </blockquote>
-        </div>
-        <div class="col-2">
-            <div id="feature-finish-img"></div>
-        </div>
-    </div>
-
-    <div class="scrollblock">
-        <div class="col-1">
-            <h3>Publish a feature</h3>
-
-            <p>
-                Publish a feature to the remote server so it can be used by other users.
-            </p>
-
-            <blockquote>
-                <code>
-                    git-flow feature publish MYFEATURE
-                </code>
-            </blockquote>
-        </div>
-        <div class="col-2">
-            <div id="feature-publish-img"></div>
-        </div>
-    </div>
-
-    <div class="scrollblock">
-            <div class="col-1">
-                <h3>Getting a published feature</h3>
-
-                <p>
-                    Getting a published feature from the remote server and tracking remote changes.
-                </p>
-
-                <blockquote>
-                    <code>
-                        git-flow feature pull MYFEATURE
-                    </code>
-                </blockquote>
-            </div>
-            <div class="col-2">
-                <div id="feature-publish-img"></div>
-            </div>
-        </div>
-
-
-    <div class="scrollblock">
-        <h2>git-flow release</h2>
-    </div>
-    <div class="scrollblock">
-        <h2>git-flow hotfix</h2>
-    </div>
+    <p>This cheatsheet shows the basic usage and effect of git-flow operations</p>
 
+    <p class="divider">&#9733; &#9733; &#9733;</p>
 </div>
 
-<script>
+<div class="scrollblock">
+    <h2 id="animate2">Basic tips</h2>
+    <ul>
+        <li>Git flow provides excellent command line help and output. Read it carefully to see what's happening...</li>
+        <li>The OSX Client <a href="http://www.sourcetreeapp.com/">Sourcetree</a> is an excellent git gui and provides
+            git-flow support
+        </li>
+    </ul>
+    <p class="divider">&#9733; &#9733; &#9733;</p>
+</div>
+
+
+<div class="scrollblock" style="height: 800px;">
+    <h2>Setup</h2>
+
+    <div class="col-1">
+        <h3>OSX</h3>
+        <blockquote>
+            <code>$ brew install git-flow</code>
+        </blockquote>
+        <h3>Linux</h3>
+        <blockquote>
+            <code>$ apt-get install git-flow</code>
+        </blockquote>
+        <h3>Windows (Cygwin)</h3>
+        <blockquote>
+            <code>
+                $ wget -q -O - --no-check-certificate
+                https://github.com/nvie/gitflow/raw/develop/contrib/gitflow-installer.sh | bash
+            </code>
+        </blockquote>
+    </div>
+    <div class="col-2">
+        <p>
+            You need a working git installation as prerequirement.<br/>
+            For detailed instructions please visit the <a href="https://github.com/nvie/gitflow/wiki/Windows">git flow
+            wiki</a>.
+        </p>
+        <img src="img/download.png" alt="install git-flow"/>
+    </div>
+</div>
+
+<div class="scrollblock">
+    <h2 id="animate3">Getting started</h2>
+
+    <div class="col-1">
+        <h3>Initialize</h3>
+
+        <p>Start using git-flow by initializing it inside an existing git repository:</p>
+        <blockquote>
+            <code>
+                git flow init
+            </code>
+        </blockquote>
+        <p>
+            You'll have to answer a few questions regarding the naming conventions for your branches.<br/>
+            It's recommended to use the default values.
+        </p>
+
+    </div>
+    <div class="col-2">
+        <!--<div id="init-img"></div>
+        <div id="blue-line-img"></div>-->
+    </div>
+</div>
+
+<div class="scrollblock" style="height: 900px;">
+    <h2 id="animate4">Features</h2>
+    <ul class="narrow">
+        <li>Develop new features for upcoming releases</li>
+        <li>Typically exist in developers repos only</li>
+    </ul>
+
+    <div class="col-1">
+        <h3>Start a new feature</h3>
+
+        <p>Development of new features starting from the 'develop' branch.</p>
+
+        <p>Start developing a new feature with</p>
+        <blockquote>
+            <code>
+                git-flow feature start MYFEATURE
+            </code>
+        </blockquote>
+        <p>This action creates a new feature branch based on 'develop' and switches to it</p>
+    </div>
+    <div class="col-2">
+        <div id="feature-start-img"></div>
+        <div id="violet-line-img"></div>
+    </div>
+</div>
+
+<div class="scrollblock">
+    <div class="col-1">
+        <h3>Finish up a feature</h3>
+
+        <p>
+            Finish the development of a feature.
+            This action performs the following
+        </p>
+        <ul>
+            <li>Merged MYFEATURE into 'develop'</li>
+            <li>Removes the feature branch</li>
+            <li>Switches back to 'develop' branch</li>
+        </ul>
+
+        <blockquote>
+            <code>
+                git-flow feature finish MYFEATURE
+            </code>
+        </blockquote>
+    </div>
+    <div class="col-2">
+        <div id="feature-finish-img"></div>
+    </div>
+</div>
+
+<div class="scrollblock">
+    <div class="col-1">
+        <h3>Publish a feature</h3>
+
+        <p>
+            Are you developing a feature in collaboration? <br/>
+            Publish a feature to the remote server so it can be used by other users.
+        </p>
+
+        <blockquote>
+            <code>
+                git-flow feature publish MYFEATURE
+            </code>
+        </blockquote>
+    </div>
+    <div class="col-2">
+        <div id="feature-publish-img"></div>
+    </div>
+</div>
+
+<div class="scrollblock">
+    <div class="col-1">
+        <h3>Getting a published feature</h3>
+
+        <p>
+            Get a feature published by another user and track remote changes.
+        </p>
+
+        <blockquote>
+            <code>
+                git-flow feature pull MYFEATURE
+            </code>
+        </blockquote>
+    </div>
+    <div class="col-2">
+        <div id="feature-publish-img"></div>
+    </div>
+</div>
+
+
+<div class="scrollblock" style="height: 900px;">
+    <h2 id="animate5">Make a release</h2>
+
+    <ul>
+        <li>Support preparation of a new production release</li>
+        <li>Allow for minor bug fixes and preparing meta-data for a release</li>
+    </ul>
+
+    <div class="col-1">
+        <h3>Start a release</h3>
+
+        <p>To start a release, use the git flow release command. It</p>
+        creates a release branch created from the 'develop' branch.
+        </p>
+        <blockquote>
+            <code>
+                git flow release start RELEASE [BASE]
+            </code>
+        </blockquote>
+        <p>You can optionally supply a <code>[BASE]</code> commit sha-1 hash to start the release from. The commit must
+            be on the
+            'develop' branch.</p>
+    </div>
+    <div class="col-2">
+        <div id="release-start-img"></div>
+    </div>
+</div>
+
+<div class="scrollblock" style="height: 900px;">
+    <div class="col-1">
+        <h3>Finish up a release</h3>
+
+        <p>Finishing a release is one of the big steps in git branching. It performs several actions:</p>
+        <ul>
+            <li>Merges the release branch back into 'master'</li>
+            <li>Tags the release with it's name</li>
+            <li>Back-merges the release into 'develop'</li>
+            <li>Removes the release branch</li>
+        </ul>
+        <blockquote>
+            <code>
+                git flow release finish RELEASE
+            </code>
+        </blockquote>
+
+        <p>It's wise to publish a finished release after finishing it. Do it similar to feature publishing with the
+            command:</p>
+        <blockquote>
+            <code>
+                git flow release publish RELEASE
+            </code>
+        </blockquote>
+    </div>
+    <div class="col-2">
+        <div id="release-finish-img"></div>
+        <p>(You can track a remote release with the <code>git flow release track RELEASE</code> command)</p>
+    </div>
+</div>
+
+<div class="scrollblock" style="height: 800px;">
+    <h2 id="animate6">Hotfixes</h2>
+
+    <ul>
+        <li>Hotfixes arise from the necessity to act immediately upon an undesired state of a live production version
+        </li>
+        <li>May be branched off from the corresponding tag on the master branch that marks the production version.</li>
+    </ul>
+
+    <div class="col-1">
+        <h3>git flow hotfix start</h3>
+
+        <p>Like the other git flow commands, a hotfix is started with</p>
+        <blockquote>
+            <code>
+                git flow hotfix start RELEASE
+            </code>
+        </blockquote>
+        <p>The release argument hereby marks the faulty production release</p>
+    </div>
+    <div class="col-2">
+        <div id="hotfix-start-img"></div>
+    </div>
+</div>
+
+<div class="scrollblock">
+    <div class="col-1">
+        <h3>Finish a hotfix</h3>
+
+        <p>TODO</p>
+    </div>
+    <div class="col-2">
+        <div id="hotfix-finish-img"></div>
+    </div>
+</div>
+
+
+<div class="scrollblock">
+    <h2>Backlog</h2>
+    <ul>
+        <li>Not all available commands are covered here, only the most important ones</li>
+        <li>You can still use git and all its commands normally as you know them, git flow is only a tooling
+            collection
+        </li>
+        <li>The 'support' feature is still beta, using it is not advised</li>
+    </ul>
+</div>
+</div>
+
+<div class="scrollblock">
+    <h2>Comments</h2>
+
+    <div id="disqus_thread"></div>
+</div>
+
+<script type="text/javascript">
     $(document).ready(function () {
-        var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
+        var scrollorama = $.scrollorama({
+            blocks:'.scrollblock',
+            enablePin:false
+        });
 
         var colorClassMatcher = function (index, classname) {
             var matches = classname.match(/color\d+/g) || [];
@@ -227,9 +372,18 @@
         });
 
         /*
+         var animationOptions = { delay:300, duration:250, property:'left', start:-1400, end:0 };
+         scrollorama.animate('#animate1', animationOptions);
+         scrollorama.animate('#animate2', animationOptions);
+         scrollorama.animate('#animate3', animationOptions);
+         scrollorama.animate('#animate4', animationOptions);
+         scrollorama.animate('#animate5', animationOptions);
+         scrollorama.animate('#animate6', animationOptions);
+
+
          /*
          scrollorama.animate('.fly-in', { delay:300, duration:200, property:'left', start:-1400, end:0 });
-         scrollorama.animate('#zoom-in', { delay:200, duration:600, property:'zoom', start:0 });
+         scrollorama.animate('#animate', { delay:200, duration:600, property:'zoom', start:0 });
          // animate some examples
          scrollorama.animate('#unpin', { duration:500, property:'padding-top', start:400, pin:true });
          scrollorama.animate('#fade-in', { delay:400, duration:300, property:'opacity', start:0 });
@@ -244,7 +398,23 @@
          scrollorama.animate('#parallax3', { delay:200, duration:1200, property:'top', start:500, end:-500 });*/
 
     });
+
+
+    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+    var disqus_shortname = 'gitflowcheatsheet'; // required: replace example with your forum shortname
+
+    /* * * DON'T EDIT BELOW THIS LINE * * */
+    (function () {
+        var dsq = document.createElement('script');
+        dsq.type = 'text/javascript';
+        dsq.async = true;
+        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
 </script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+</noscript>
+<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
 
 
 </body>
