diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index d40b4c3f675..731641ddab7 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -310,8 +310,9 @@ body.login {
 
 .install-wizard .header {
   text-align: center;
-  background: #0D6CAA;
+  background: url(../images/bg-install-wizard-header.png);
   color: #FFFFFF;
+  height: 365px;
   padding: 32px 0 89px;
   /*+text-shadow:0px 2px 2px #4B4B4B;*/
   -moz-text-shadow: 0px 2px 2px #4B4B4B;
@@ -321,6 +322,10 @@ body.login {
   z-index: 9;
 }
 
+.install-wizard .header h3 {
+  font-size: 20px;
+}
+
 .install-wizard .step {
   max-width: 691px;
   margin: auto;
@@ -364,20 +369,15 @@ body.login {
 }
 
 .install-wizard .body {
-  width: 987px;
+  width: 1012px;
   height: 626px;
-  margin: -52px auto auto;
+  margin: -352px auto auto;
   z-index: 10;
-  /*+box-shadow:0px 3px 15px #696767;*/
-  -moz-box-shadow: 0px 3px 15px #696767;
-  -webkit-box-shadow: 0px 3px 15px #696767;
-  -o-box-shadow: 0px 3px 15px #696767;
-  box-shadow: 0px 3px 15px #696767;
-  background: #FFFFFF;
+  background: #FFFFFF -114px -141px;
 }
 
 .install-wizard h2 {
-  font-size: 24px;
+  font-size: 28px;
   margin: 0 0 19px;
 }
 
@@ -437,6 +437,123 @@ body.login {
   float: left;
 }
 
+.install-wizard .step {
+  z-index: 11;
+  position: relative;
+}
+
+.install-wizard .step .tooltip-info {
+  /*+placement:shift 547px 50px;*/
+  position: relative;
+  left: 547px;
+  top: 50px;
+  position: absolute;
+}
+
+/*** Diagram*/
+.install-wizard .diagram {
+  width: 910px;
+  height: 385px;
+  /*+placement:shift 65px 397px;*/
+  position: relative;
+  left: 65px;
+  top: 397px;
+  position: absolute;
+  z-index: 10;
+}
+
+.install-wizard .diagram .part {
+  background: url(../images/install-wizard-parts.png) no-repeat;
+  display: none;
+}
+
+.install-wizard .diagram .part.zone {
+  width: 742px;
+  height: 135px;
+  background-position: -267px -580px;
+  /*+placement:shift 77px 222px;*/
+  position: relative;
+  left: 77px;
+  top: 222px;
+  position: absolute;
+}
+
+.install-wizard .diagram .part.loading {
+  width: 742px;
+  height: 432px;
+  background-position: -1264px -487px;
+  /*+placement:shift 105px -67px;*/
+  position: relative;
+  left: 105px;
+  top: -67px;
+  position: absolute;
+}
+
+.install-wizard .diagram .part.loading .icon {
+  width: 61px;
+  height: 76px;
+  background: url(../images/ajax-loader.gif) no-repeat;
+  /*+placement:shift 322px 130px;*/
+  position: relative;
+  left: 322px;
+  top: 130px;
+}
+
+.install-wizard .diagram .part.pod {
+  width: 266px;
+  height: 396px;
+  background-position: -47px -3px;
+  /*+placement:shift 313px -76px;*/
+  position: relative;
+  left: 313px;
+  top: -76px;
+  position: absolute;
+}
+
+.install-wizard .diagram .part.cluster {
+  width: 266px;
+  height: 396px;
+  background-position: -364px 1px;
+  /*+placement:shift 313px -76px;*/
+  position: relative;
+  left: 313px;
+  top: -76px;
+  position: absolute;
+}
+
+.install-wizard .diagram .part.host {
+  width: 266px;
+  height: 396px;
+  background-position: -688px 1px;
+  /*+placement:shift 313px -76px;*/
+  position: relative;
+  left: 313px;
+  top: -76px;
+  position: absolute;
+}
+
+.install-wizard .diagram .part.primaryStorage {
+  width: 275px;
+  height: 396px;
+  background-position: -1046px 1px;
+  /*+placement:shift 306px -76px;*/
+  position: relative;
+  left: 306px;
+  top: -76px;
+  position: absolute;
+}
+
+.install-wizard .diagram .part.secondaryStorage {
+  width: 385px;
+  height: 396px;
+  background-position: -1469px 1px;
+  /*+placement:shift 306px -76px;*/
+  position: relative;
+  left: 306px;
+  top: -76px;
+  position: absolute;
+}
+
 /*** Setup form*/
 .install-wizard .step .setup-form {
   display: inline-block;
diff --git a/ui/images/bg-install-wizard-header.jpg b/ui/images/bg-install-wizard-header.jpg
new file mode 100644
index 00000000000..79275de95c1
Binary files /dev/null and b/ui/images/bg-install-wizard-header.jpg differ
diff --git a/ui/images/bg-install-wizard-header.png b/ui/images/bg-install-wizard-header.png
new file mode 100644
index 00000000000..1de7709ba17
Binary files /dev/null and b/ui/images/bg-install-wizard-header.png differ
diff --git a/ui/images/install-wizard-parts.png b/ui/images/install-wizard-parts.png
new file mode 100644
index 00000000000..68b07ee267a
Binary files /dev/null and b/ui/images/install-wizard-parts.png differ
diff --git a/ui/scripts/installWizard.js b/ui/scripts/installWizard.js
index c42d7f4501f..8ec00086a65 100644
--- a/ui/scripts/installWizard.js
+++ b/ui/scripts/installWizard.js
@@ -82,7 +82,7 @@
 
     action: function(args) {
       var complete = args.response.success;
-      var data = args.data
+      var data = args.data;
 
       /**
        * Step 1: add zone
diff --git a/ui/scripts/ui-custom/installWizard.js b/ui/scripts/ui-custom/installWizard.js
index 5b8724fbe3b..5c32a06157c 100644
--- a/ui/scripts/ui-custom/installWizard.js
+++ b/ui/scripts/ui-custom/installWizard.js
@@ -54,6 +54,13 @@
      * Generic page elements
      */
     var elems = {
+      tooltip: function(title, content) {
+        return $('<div>').addClass('tooltip-info').append(
+          $('<div>').addClass('arrow'),
+          $('<div>').addClass('title').html(title),
+          $('<div>').addClass('content').append($('<p>').html(content))
+        );
+      },
       header: function() {
         return $('<div></div>').addClass('header')
           .append(
@@ -72,9 +79,45 @@
           $('<input>').attr({ type: 'submit' }).addClass('button goTo').val(label);
 
         return $button;
+      },
+
+      diagramParts: function() {
+        return $('<div>').addClass('diagram').append(
+          $('<div>').addClass('part zone'),
+          $('<div>').addClass('part pod'),
+          $('<div>').addClass('part cluster'),
+          $('<div>').addClass('part host'),
+          $('<div>').addClass('part primaryStorage'),
+          $('<div>').addClass('part secondaryStorage'),
+          $('<div>').addClass('part loading').append($('<div>').addClass('icon'))
+        );
       }
     };
 
+    var $diagramParts = elems.diagramParts();
+
+    var showDiagram = function(parts) {
+      $diagramParts.children().hide();
+      $diagramParts.find(parts).show();
+    };
+
+    /**
+     * Show tooltip for focused form elements
+     */
+    var showTooltip = function($formContainer) {
+      var $tooltip = elems.tooltip('Hints', 'Help content goes here.');
+      $formContainer.find('input').focus(function() {
+        $tooltip.appendTo($formContainer);
+        $tooltip.css({
+          top: $(this).position().top - 20
+        });
+      });
+
+      $formContainer.find('input').blur(function() {
+        $tooltip.remove();
+      });
+    };
+
     /**
      * Layout/behavior for each step in wizard
      */
@@ -170,6 +213,8 @@
           return false;
         });
 
+        showDiagram('.part.zone');
+
         return $intro.append(
           $title, $subtitle,
           $copy,
@@ -203,6 +248,9 @@
         $addZoneForm.find('.main-desc, .conditional').remove();
         $addZoneForm.find('.field:last').remove();
 
+        showDiagram('.part.zone');
+        showTooltip($addZoneForm);
+
         return $addZone.append(
           $addZoneForm
             .prepend($title)
@@ -232,6 +280,9 @@
           return false;
         });
 
+        showDiagram('.part.zone');
+        showTooltip($addIPRangeForm);
+
         // Remove unneeded fields
         $addIPRangeForm.find('.main-desc, .conditional').remove();
 
@@ -261,6 +312,8 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.pod');
+
         return $intro.append(
           $title, $subtitle,
           $copy,
@@ -293,6 +346,9 @@
         // Remove unneeded fields
         $addPodForm.find('.main-desc, .conditional').remove();
 
+        showDiagram('.part.zone, .part.pod');
+        showTooltip($addPodForm);
+
         return $addPod.append(
           $addPodForm
             .prepend($title)
@@ -319,6 +375,8 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.cluster');
+
         return $intro.append(
           $title, $subtitle,
           $copy,
@@ -357,6 +415,9 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.cluster');
+        showTooltip($addClusterForm);
+
         // Cleanup
         $addClusterForm.find('.message').remove();
         $addClusterForm.find('.form-item').addClass('field').find('label.error').hide();
@@ -387,6 +448,8 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.host');
+
         return $intro.append(
           $title, $subtitle,
           $copy,
@@ -446,6 +509,9 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.host');
+        showTooltip($addHostForm);
+
         // Cleanup
         $addHostForm.find('.message').remove();
         $addHostForm.find('.form-item').addClass('field').find('label.error').hide();
@@ -476,6 +542,8 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.primaryStorage');
+
         return $intro.append(
           $title, $subtitle,
           $copy,
@@ -532,6 +600,9 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.primaryStorage');
+        showTooltip($addPrimaryStorageForm);
+
         // Cleanup
         $addPrimaryStorageForm.find('.message').remove();
         $addPrimaryStorageForm.find('.form-item').addClass('field').find('label.error').hide();
@@ -562,6 +633,8 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.secondaryStorage');
+
         return $intro.append(
           $title, $subtitle,
           $copy,
@@ -607,6 +680,9 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.secondaryStorage');
+        showTooltip($addSecondaryStorageForm);
+
         // Cleanup
         $addSecondaryStorageForm.find('.message').remove();
         $addSecondaryStorageForm.find('.form-item').addClass('field').find('label.error').hide();
@@ -635,6 +711,8 @@
           return false;
         });
 
+        showDiagram('.part.zone, .part.secondaryStorage');
+
         return $intro.append(
           $title, $subtitle,
           $copy,
@@ -648,8 +726,7 @@
       launch: function(args) {
         var $intro = $('<div></div>').addClass('intro');
         var $title = $('<div></div>').addClass('title')
-              .html('Now building your cloud...')
-              .append($('<img>').attr({ src: 'images/ajax-loader.gif' }));
+              .html('Now building your cloud...');
         var $subtitle = $('<div></div>').addClass('subtitle')
               .html('You may want to get a cup of coffee right now.');
 
@@ -662,6 +739,8 @@
           }
         });
 
+        showDiagram('.part.loading');
+
         return $intro.append(
           $title, $subtitle
         );
@@ -671,10 +750,9 @@
     var initialStep = steps.changeUser().addClass('step');
 
     $installWizard.append(
-      $.merge(
-        elems.header(),
-        elems.body().append(initialStep)
-      )
+      elems.header(),
+      elems.body().append(initialStep),
+      $diagramParts
     ).appendTo($container);
   };