diff --git a/client/htmls/private/ajax/Settings/Dashboard.html b/client/htmls/private/ajax/Settings/Dashboard.html
index 1b2172738..ce51aaae5 100755
--- a/client/htmls/private/ajax/Settings/Dashboard.html
+++ b/client/htmls/private/ajax/Settings/Dashboard.html
@@ -1,302 +1,162 @@
-<style type="text/css">
-
-/* -- Circle Tiles */
-
-.circle-tile {
-    margin-bottom: 15px;
+<style>
+.container {
+    width:1166px;
+    height:130px;
+}
+.btn-circle {
+    width: 49px;
+    height: 49px;
     text-align: center;
+    padding: 5px 0;
+    font-size: 20px;
+    line-height: 2.00;
+    border-radius: 30px;
+    margin: 0 25px;
 }
 
-.circle-tile-heading {
-    position: relative;
-    width: 80px;
-    height: 80px;
-    margin: 0 auto -40px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    color: #fff;
-    transition: all ease-in-out .3s;
-}
-
-.circle-tile-heading .fa {
-    line-height: 80px;
-}
-
-.circle-tile-content {
-    padding-top: 50px;
-}
-
-.circle-tile-number {
-    padding: 5px 0 15px;
-    font-size: 26px;
-    font-weight: 700;
-    line-height: 1;
+.btn-text {
+    font-size: 12px;
+    vertical-align: middle
 }
 
-.circle-tile-description {
-    text-transform: uppercase;
+.btn:hover {
+    font-weight: bold;
+    color: #fff;
 }
 
-.circle-tile-footer {
-    display: block;
-    padding: 5px;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.1);
+.active-btn {
+    background-color: #286090;
+    color:#fff;
+    box-shadow: 0 0 5px #286090;
 }
-
-.circle-tile-footer:hover {
-    text-decoration: none;
+.process-btn {
+    background-color: #7d7676;
     color: #fff;
-    background-color: rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 5px #888888;
 }
 
-.circle-tile-heading.dark-blue:hover {
-    background-color: #2c3e50;
+.end-btn {
+    background-color: #40BAF1;
+    color: #fff;
+    box-shadow: 0 0 5px #40BAF1;
 }
 
-.circle-tile-heading.green:hover {
-    background-color: #2a4747;
+ul li {
+    text-decoration: none;
+    display: inline;
 }
 
-.circle-tile-heading.orange:hover {
-    background-color: #901515;
+.li-margin {
+    margin:0 20px;
+    width: 30px;
 }
 
-.circle-tile-heading.blue:hover {
-    background-color: #54677a;
+.btn-cls {
+    margin: 10px auto;
+    width: 90%;
+    background: hsla(0, 0%, 0%, 0) url("../../private/img/dot.jpg") no-repeat scroll -27px 25px;
+    height: 45px;
 }
 
-.circle-tile-heading.red:hover {
-    background-color: #cf4435;
+.btn-1 {
+    float: left;
+    width: 126px;
+    text-align: center;
+    
+    padding: 0 15px;
 }
 
-.circle-tile-heading.purple:hover {
-    background-color: #7f3d9b;
+.lable-name {
+    padding-top: 10px;
+    color: #7d7676;
 }
 
-.circle-tile-heading.grey:hover {
-    background-color: #517398;
-}
-/* Circle Tile Ends*/
+/*.content {
+    margin:0 auto;
+    width: 80%;
+    border: 1px solid #757575;
+    padding: 10px;
+}*/
 </style>
-<div id="page-wrapper">
-  <div class="row">
-    <div class="col-lg-3 col-md-6">
-      <div class="circle-tile" >
-        <a href="#ajax/Settings/OrgList.html">
-          <div class="circle-tile-heading light-blue">
-            <i class="fa fa-building fa-fw fa-3x"></i>
-          </div></a>
-
-          <div class="circle-tile-content light-blue" onclick="$(this).closest('a').trigger('click')">
-            <div class="circle-tile-description text-faded"><a href = "#ajax/Settings/OrgList.html" style="color:white;"> ORGANIZATIONS </a></div>
-            <div class="circle-tile-number text-faded organizationcount" itemid="1">
-
-            </div>
-
-          </div>
-        </div> <!--heading dark-blue ends-->
-
+<div class="row">
+   <h3 style="color:#286090; font-weight:bold;margin-top:5px;">
+      <center>Setup &amp; Configuration Wizard</center>
+   </h3>
+   <div class="container">
+      <div class="btn-cls">
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle active-btn btn-text" style="line-height:3">Start</a><br />
+            <p class="lable-name">Introduction</p>
+         </div>
+         <div class="btn-1" id="orgConfiguration">
+            <a type="button" href="ajax/Settings/settingsWizard.html" class="btn btn-circle process-btn">1</a><br />
+            <p class="lable-name">Org Configuration</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">2</a><br />
+            <p class="lable-name">Chef Configuration</p>
+         </div>
+         <div class="btn-1" id="providerConfiguration">
+            <a type="button" href="" class="btn btn-circle process-btn">3</a><br />
+            <p class="lable-name">Provider Configuration</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">4</a><br />
+            <p class="lable-name">Repositories</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">5</a><br />
+            <p class="lable-name">Security Access Control</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">6</a><br />
+            <p class="lable-name">Telemetry</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">7</a><br />
+            <p class="lable-name">CMDB Configuration</p>
+         </div>
       </div>
-      <!--col-lg-3 ends-->
-
-
-
-
-
-      <div class="col-lg-3 col-md-6">
-        <div class="circle-tile">
-          <a href="#ajax/Settings/ProductGroupList.html">
-           <div class="circle-tile-heading light-black">
-             <i class="fa fa-group fa-fw fa-3x"></i>
-           </div></a>
-           <div class="circle-tile-content light-black">
-
-            <div class="circle-tile-description text-faded"><a href = "#ajax/Settings/ProductGroupList.html" style="color:white;">BUSINESS GROUPS</a></div>
-            <div class="circle-tile-number text-faded productgroupcount"  itemid="2">
-
-            </div>
-
-          </div>
-        </div>
-      </div>     
-
-
-      <!--heading orange ends-->
-      <!--Circle-tile ends--> 
-      <!-- col-lg-3 ends-->
-
-      <div class="col-lg-3 col-md-6">
-        <div class="circle-tile">
-          <a href="#ajax/Settings/EnvironmentConceptList.html">
-           <div class="circle-tile-heading light-blue">
-             <i class="fa fa-desktop fa-fw fa-3x"></i>
-           </div></a>
-           <div class="circle-tile-content light-blue">
-            <div class="circle-tile-description text-faded"><a href="#ajax/Settings/EnvironmentConceptList.html" style="color:white;">ENVIRONMENTS</a></div>
-            <div class="circle-tile-number text-faded envCount"  itemid="3">
-
-            </div>
-
-          </div>
-        </div>    
-      </div>
-
-
-      <div class="col-lg-3 col-md-6">
-        <div class="circle-tile">
-          <a href="#ajax/Settings/ProjectList.html">
-           <div class="circle-tile-heading light-black">
-             <i class="fa fa-tasks fa-fw fa-3x"></i>
-           </div>
-         </a>
-         <div class="circle-tile-content light-black">
-          <div class="circle-tile-description text-faded"><a href="#ajax/Settings/ProjectList.html" style="color:white;">Projects</a>
-          </div>
-          <div class="circle-tile-number text-faded projectCount"  itemid="4">
-
-          </div>
-
-
-        </div>
-      </div>
-    </div>    
-
-
-
-  </div> <!--row ends-->
+   </div>
+   <hr/>
+   <div class="contentSetting">
+   </div>
+</div>
 
 
-</div>
 
 <script type="text/javascript">
 //added for v3.0 - when navigating from v2.0 workzone to settings-
 $(document).ready(function() {
-	if(isAngularIntegration){
-	    $('#workZoneNew').attr('href','#');
-	    $('#workZoneNew').removeClass('active');
-	    $('#Workspace1').addClass('hidden');
-		$('#Settings_nav').show();
-		$('#settingsNew').addClass('active');
-		$("#ribbon ol.breadcrumb").empty();
-		$("#ribbon ol.breadcrumb").append($("<li>Settings</li>"));
-	}
+  $("#content").attr('style', 'height: 100%!important')
+    if(isAngularIntegration){
+        $('#workZoneNew').attr('href','#');
+        $('#workZoneNew').removeClass('active');
+        $('#Workspace1').addClass('hidden');
+        $('#Settings_nav').show();
+        $('#settingsNew').addClass('active');
+        $("#ribbon ol.breadcrumb").empty();
+        $("#ribbon ol.breadcrumb").append($("<li>Settings</li>"));
+    }
 });
- var serviceURL = "/d4dMasters/";
- window.selectedOrgName = 'Settings'; 
-
-				// $('[itemid]').each(function(){
-				//     var count = getCount($(this).attr('itemid'));    
-				//     $(this).html(count);
-				// });
-function setcountontile(){
-  $.get('/d4dMasters/readmasterjsoncounts',function(data){
-    var mastcount = JSON.parse(JSON.stringify(data));
-    $.each(mastcount,function(k,v){
-      var ky = Object.keys(v);
-         //alert(k +' ' + ky +' ' + v[ky]);
-         $('[itemid="' + ky + '"]').html(v[ky]);
-       });
-  });
-}
-setcountontile();
-
-
-
-
-
-
-
+var serviceURL = "/d4dMasters/";
+window.selectedOrgName = 'Settings'; 
 
 drawBreadCrumb1();
 
-$(function(){
-  $('.circle-tile').find('a').click(function(){
-    var href=$(this).attr('href'),setting_tree=$('#setting_tree'),
-    nodeList=setting_tree.find('li');
-
-    if(href && href.indexOf('OrgList.html')>-1){
-
-      if(setting_tree.find('li').eq(0).hasClass('active')){
-
-       setTimeout(function(){
-        setting_tree.find('li').find('[nodetype="OrgList"]').trigger('click');          
-      },100);
-
-
-     }else{
-
-      setting_tree.find('li').eq(0).find('.expand-collapse').trigger('click');
-      setTimeout(function(){
-        setting_tree.find('li').find('[nodetype="OrgList"]').trigger('click');          
-      },100);
-    }
-
-
-  }
-
-  else if(href && href.indexOf('ProductGroupList.html')>-1){
-
-
-    if(setting_tree.find('li').eq(0).hasClass('active')){
-     setTimeout(function(){
-      setting_tree.find('li').find('[nodetype="ProductGroupList"]').trigger('click');          
-    },100);
-     
-
-   }else{
-
-    setting_tree.find('li').eq(0).find('.expand-collapse').trigger('click');
-    setTimeout(function(){
-      setting_tree.find('li').find('[nodetype="ProductGroupList"]').trigger('click');          
-    },100);
-  }
-
-}
-
-
-else if(href && href.indexOf('EnvironmentConceptList.html')>-1){
-//debugger;
-  if(setting_tree.find('li').find('[nodetype="devops"]').hasClass('active')){
-   setTimeout(function(){
-    setting_tree.find('li').find('[nodetype="EnvironmentConceptList"]').trigger('click');          
-  },100);
-
- }else{
-
-  setting_tree.find('li').find('[nodetype="devops"]').parent().find('.expand-collapse').trigger('click');
-  setTimeout(function(){
-    setting_tree.find('li').find('[nodetype="EnvironmentConceptList"]').trigger('click');          
-  },100);
-}
-
-}
-
-else if(href && href.indexOf('ProjectList.html')>-1){
-
-  if(setting_tree.find('li').eq(0).hasClass('active')){
-
-   setTimeout(function(){
-    setting_tree.find('li').find('[nodetype="ProjectList"]').trigger('click');          
-  },100);
-
-
- }else{
-
-  setting_tree.find('li').eq(0).find('.expand-collapse').trigger('click');
-  setTimeout(function(){
-    setting_tree.find('li').find('[nodetype="ProjectList"]').trigger('click');          
-  },100);
-}
-
-}
-
+$('#orgConfiguration a').click(function(e){
+  $('a.btn').addClass('active-btn');
+  $(this).removeClass('process-btn');    
+  e.preventDefault();
+  $('.contentSetting').load(this.getAttribute('href'));    
 });
 
-});
-
-</script>
-
+$('#orgConfiguration a').trigger('click');
 
-
-<!-- end scripts -->
+$('#providerConfiguration a').click(function(e){
+  $('a.btn').addClass('active-btn');
+  $(this).removeClass('process-btn');    
+  e.preventDefault();
+  $('.contentSetting').load('ajax/Settings/CreateProviders.html?new');
+});
+</script>
\ No newline at end of file
diff --git a/client/htmls/private/ajax/Settings/settingsWizard.html b/client/htmls/private/ajax/Settings/settingsWizard.html
new file mode 100644
index 000000000..99979d0ed
--- /dev/null
+++ b/client/htmls/private/ajax/Settings/settingsWizard.html
@@ -0,0 +1,348 @@
+<style>
+/*custom font*/
+@import url(http://fonts.googleapis.com/css?family=Montserrat);
+
+/*form styles*/
+#msform {
+    margin: 10px auto;
+    position: relative;
+}
+
+/*Hide all except first fieldset*/
+#msform fieldset:not(:first-of-type) {
+    display: none;
+}
+
+/*buttons*/
+#msform .action-button {
+    width: 100px;
+    background: #27AE60;
+    font-weight: bold;
+    color: white;
+    border: 0 none;
+    border-radius: 1px;
+    cursor: pointer;
+    padding: 10px 5px;
+    margin: 10px 5px;
+}
+#msform .action-button:hover, #msform .action-button:focus {
+    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+}
+/*headings*/
+.fs-title {
+    font-size: 15px;
+    text-transform: uppercase;
+    color: #2C3E50;
+    margin-bottom: 10px;
+}
+.fs-subtitle {
+    font-weight: normal;
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 20px;
+}
+/*progressbar*/
+#progressbar {
+    overflow: hidden;
+    text-align: center;
+    /*CSS counters to number the steps*/
+    counter-reset: step;
+}
+#progressbar li {
+    list-style-type: none;
+    font-size: 15px;
+    width: 33.33%;
+    float: left;
+    position: relative;
+}
+#progressbar li:before {
+    content: counter(step);
+    counter-increment: step;
+    width: 20px;
+    line-height: 20px;
+    display: block;
+    font-size: 10px;
+    color: #fff;
+    background: #7d7676;
+    border-radius: 3px;
+    margin: 0 auto 5px auto;
+}
+/*progressbar connectors*/
+#progressbar li:after {
+    content: '';
+    width: 100%;
+    height: 2px;
+    background: #7d7676;
+    position: absolute;
+    left: -50%;
+    top: 9px;
+    z-index: -1; /*put it behind the numbers*/
+}
+#progressbar li:first-child:after {
+    /*connector not needed before the first step*/
+    content: none; 
+}
+/*marking active/completed steps green*/
+/*The number of the step and the connector before it = green*/
+#progressbar li.active:before,  #progressbar li.active:after{
+    background: #27AE60;
+    color: white;
+}
+
+.content {
+    margin:0 auto;
+    padding: 10px;
+}
+a, a:hover {
+    color:#7d7676;
+    text-decoration: none;
+}
+</style>
+<!-- multistep form -->
+<form id="msform">
+   <!-- progressbar -->
+   <ul id="progressbar">
+      <li class="orgCreate active">Create Organisation</a></li>
+      <li>Create BG</a></li>
+      <li>Create Project</a></li>
+      <!-- <li>Create Env</a></li> -->
+   </ul>
+   <!-- fieldsets -->
+   <fieldset class="content">
+      <div class="widget-box">
+         <div class="widget-header">
+            <h4 class="widget-margin" style="color:black;">Create Organization</h4>
+         </div>
+         <div class="widget-body">
+            <div class="widget-main" style="min-height:200px">
+               <div class="jarviswidget" id="wid-id-3" data-widget-editbutton="false" data-widget-custombutton="false">
+                  <div>
+                     <div class="widget-body no-padding">
+                        <div class="col-lg-6 col-md-6">
+                           <label for="name">Name:
+                           <span class="control-label redSpan">&nbsp;*</span></label>
+                           <input autofocus name="ctl00$MainContent$orgname" value="" id="orgname" unique="true"  uniqueconditionedby="orgname" class="form-control" cdata="catalyst" type="text" cat-validation="required,nospecial,max15,nospace">
+                        </div>
+                        <div class="col-lg-6 col-md-6">
+                           <label for="name">Domain Name:</label>
+                           <input name="Domain Name" value="" id="domainname" class="form-control" type="text" maxlength="35">
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+      <input type="button" name="next" class="next action-button" value="Next" />
+   </fieldset>
+   <!-- <input type="button" name="next" class="next action-button" value="Next" /> -->
+   <fieldset class="content">
+      <div class="widget-box">
+         <div class="widget-header">
+            <h4 class="widget-margin" style="color:black;">Create Business Group</h4>
+         </div>
+         <div class="widget-body">
+            <div class="widget-main" style="min-height:200px">
+               <div class="jarviswidget" id="wid-id-3" data-widget-editbutton="false" data-widget-custombutton="false">
+                  <div>
+                     <div class="col-lg-6 col-md-6">
+                      <label for="name">Business Group Name <span class="control-label redSpan">&nbsp;*</span></label>
+                      <input autofocus name="productgroupname" value="" id="productgroupname" class="form-control" type="text"  cdata="catalyst" cat-validation="required,nospecial,max15,nospace" unique="true" uniqueconditionedby="productgroupname,orgname">
+                   </div>
+                   <div class="col-lg-6 col-md-6">
+                      <label for="">Organization<span class="control-label redSpan">&nbsp;*</span></label>
+                      <select id="orgname" class="chooseOrganization form-control width-100" sourcepath="1" datapath="masterjson.rows.row" valuelinkfield="costcode" style="vertical-align:central"  cdata="catalyst" cat-validation="required">
+                         <option value="">Select an Organization</option>
+                      </select>
+                   </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+      <input type="button" name="previous" class="previous action-button" value="Previous" />
+      <input type="button" name="next" class="next action-button" value="Next" />
+   </fieldset>
+   <fieldset class="content">
+      <div class="widget-box">
+         <div class="widget-header">
+            <h4 class="widget-margin" style="color:black;">Create Project</h4>
+         </div>
+         <div class="widget-body">
+            <div class="widget-main" style="min-height:200px">
+               <div class="jarviswidget" id="wid-id-3" data-widget-editbutton="false" data-widget-custombutton="false">
+                  <div>
+                                 <!-- widget content -->
+                                 
+                                    
+                                       <div class="col-lg-6 col-md-6">
+                                          <label for="name">Name:<span class="control-label redSpan">&nbsp;*</span></label>
+                                          <label id="msgOrgName" style="display:none;color:red;float:right;">Required</label>
+                                          <br>
+                                          <input autofocus name="ctl00$MainContent$orgname" value="" id="projectname" class="form-control" type="text"  cdata="catalyst" cat-validation="required,nospecial,max15,nospace"  unique="true"  uniqueconditionedby="projectname,orgname,productgroupname">
+                                       </div>
+                                       <div class="col-lg-6 col-md-6">
+                                          <label for="">Organization:<span class="control-label redSpan">&nbsp;*</span></label>
+                                          <select id="orgname" class="form-control chooseOrganization width-100" sourcepath="1" datapath="masterjson.rows.row" linkedfields="['productgroupname','environmentname','teamname']"  cdata="catalyst" cat-validation="required">
+                                             <option value="">Select Organization</option>
+                                          </select>
+                                       </div>
+                                       <div class="col-lg-6 col-md-6" style="margin-top:15px;">
+                                          <label for="">Business Group:<span class="control-label redSpan">&nbsp;*</span></label>
+                                          <select id="productgroupname" class="form-control chooseBG width-100" sourcepath="2" datapath="masterjson.rows.row" linkedto="orgname"  cdata="catalyst" cat-validation="required">
+                                             <option value="">Select Business Group</option>
+                                          </select>
+                                       </div>
+                                        
+                                        <div class="col-lg-6 col-md-6" >
+                                          <a style="cursor:pointer;" data-toggle="modal" data-backdrop="false" id="repoanchorDetails" href="#repodetailsModal"> <img title="Add Repository Details" data-placement="top" rel="tooltip" class="addrepoDetails" style="float:right;margin-top:20px;" src="img/add.png"></a>
+                                          <label style="float:left;margin-top:20px;">Repositories Details :</label>
+                                          <div class="table-responsive table-div">
+                                            <table id="tablerepositoryDetails" class="table table-striped table-bordered table-hover dataTable" style="border:1px solid #eeeeee !important; text-align:center;font-size:12px;margin-top:45px;" width="100%" cellpadding="5px">
+                                                <thead>
+                                                    <tr class="rowCustomStyle" style="font-weight:bold;">
+                                                        <td style="color:#fff;background-color: #2c3742; width:35%">Repository</td>
+                                                        <td style="color:#fff;background-color: #2c3742;">Name</td>
+                                                        <td style="color:#fff;background-color: #2c3742; width:10%">Action</td>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="repoDeployTbody">
+                                                </tbody>
+                                            </table>
+                                          </div>
+                                        </div>
+                                        <!-- <div class="col-lg-6 col-md-6" style="margin-top:25px; display:none">
+                                          <label for="name">Repository Details:</label>
+                                          <input autofocus name="ctl00$MainContent$orgname" value="" id="repositories" class="form-control" type="text"  cdata="catalyst">
+                                       </div> -->
+                                        
+                                 
+                              </div>
+               </div>
+            </div>
+         </div>
+      </div>
+      <input type="button" name="previous" class="previous action-button" value="Previous" />
+      <input type="button" name="next" class="next action-button" value="Next" />
+   </fieldset>
+   <!-- <fieldset>
+      <h2 class="fs-title">Social Profiles</h2>
+      <h3 class="fs-subtitle">Your presence on the social network</h3>
+      <input type="text" name="twitter" placeholder="Twitter" />
+      <input type="text" name="facebook" placeholder="Facebook" />
+      <input type="text" name="gplus" placeholder="Google Plus" />
+      <input type="button" name="previous" class="previous action-button" value="Previous" />
+      <input type="button" name="next" class="next action-button" value="Next" />
+   </fieldset> -->
+</form>
+
+<script>
+//jQuery time
+var current_fs, next_fs, previous_fs; //fieldsets
+var left, opacity, scale; //fieldset properties which we will animate
+var animating; //flag to prevent quick multi-click glitches
+
+/*$('#progressbar .orgCreate a').click(function(e){
+    $('.content').removeClass('hidden');
+    e.preventDefault();
+    $('#orgCreation .content').load(this.getAttribute('href'));    
+});
+
+$('#progressbar .orgCreate a').trigger('click');
+
+$('#progressbar .bgCreate a').click(function(e){
+    $('.content').removeClass('hidden');
+    e.preventDefault();
+    $('#bgCreation .content').load(this.getAttribute('href'));
+});
+
+$('#progressbar .projectCreate a').click(function(e){
+    $('.content').removeClass('hidden');
+    e.preventDefault();
+    $('#projectCreation .content').load(this.getAttribute('href'));
+});
+
+$('#progressbar .envCreate a').click(function(e){
+    $('.content').removeClass('hidden');
+    e.preventDefault();
+    $('#envCreation .content').load(this.getAttribute('href'));
+});*/
+
+$(".next").click(function(){
+    /*$('#progressbar .bgCreate a').trigger('click');
+    $('.projectCreate a').trigger('click');
+    $('.envCreate a').trigger('click');*/
+    if(animating) return false;
+    animating = true;
+    
+    current_fs = $(this).parent();
+    next_fs = $(this).parent().next();
+    
+    //activate next step on progressbar using the index of next_fs
+    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
+    
+    //show the next fieldset
+    next_fs.show(); 
+    //hide the current fieldset with style
+    current_fs.animate({opacity: 0}, {
+        step: function(now, mx) {
+            //as the opacity of current_fs reduces to 0 - stored in "now"
+            //1. scale current_fs down to 80%
+            scale = 1 - (1 - now) * 0.2;
+            //2. bring next_fs from the right(50%)
+            left = (now * 50)+"%";
+            //3. increase opacity of next_fs to 1 as it moves in
+            opacity = 1 - now;
+            current_fs.css({'transform': 'scale('+scale+')'});
+            next_fs.css({'left': left, 'opacity': opacity});
+        }, 
+        duration: 800, 
+        complete: function(){
+            current_fs.hide();
+            animating = false;
+        }, 
+        //this comes from the custom easing plugin
+        easing: 'easeInOutBack'
+    });
+});
+
+$(".previous").click(function(){
+    if(animating) return false;
+    animating = true;
+    
+    current_fs = $(this).parent();
+    previous_fs = $(this).parent().prev();
+    
+    //de-activate current step on progressbar
+    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
+    
+    //show the previous fieldset
+    previous_fs.show(); 
+    //hide the current fieldset with style
+    current_fs.animate({opacity: 0}, {
+        step: function(now, mx) {
+            //as the opacity of current_fs reduces to 0 - stored in "now"
+            //1. scale previous_fs from 80% to 100%
+            scale = 0.8 + (1 - now) * 0.2;
+            //2. take current_fs to the right(50%) - from 0%
+            left = ((1-now) * 50)+"%";
+            //3. increase opacity of previous_fs to 1 as it moves in
+            opacity = 1 - now;
+            current_fs.css({'left': left});
+            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
+        }, 
+        duration: 800, 
+        complete: function(){
+            current_fs.hide();
+            animating = false;
+        }, 
+        //this comes from the custom easing plugin
+        easing: 'easeInOutBack'
+    });
+});
+
+$(".submit").click(function(){
+    return false;
+})
+
+</script>
\ No newline at end of file
diff --git a/client/htmls/private/img/dot.jpg b/client/htmls/private/img/dot.jpg
new file mode 100644
index 000000000..94ef23f6c
Binary files /dev/null and b/client/htmls/private/img/dot.jpg differ