diff --git a/mojotrollz/page/default_page/default_page.php b/mojotrollz/page/default_page/default_page.php
index a1f6071..cbec83c 100644
--- a/mojotrollz/page/default_page/default_page.php
+++ b/mojotrollz/page/default_page/default_page.php
@@ -13,6 +13,7 @@ class default_page extends SYSTEM\PAGE\Page {
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/js/wizard.js').'"></script>'.
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/js/onlinegraphic.js').'"></script>'.
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'wizard_details/js/wizard_details.js').'"></script>'.
+                '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'wizard_visuals/js/wizard_visuals.js').'"></script>'.
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'wizard_spawn/js/wizard_spawn.js').'"></script>';
     }
       
diff --git a/mojotrollz/page/default_page/js/wizard.js b/mojotrollz/page/default_page/js/wizard.js
index b41e36e..2d20f68 100644
--- a/mojotrollz/page/default_page/js/wizard.js
+++ b/mojotrollz/page/default_page/js/wizard.js
@@ -38,25 +38,32 @@ function SYSTEM(endpoint, group){
     this.group = group;
     this.pagestates = null;
 }
+
+SYSTEM.prototype.handle_call_pagestates = function (data) {
+    if(data['status']){
+        newps = data['result'];
+        console.log('SYSTEM: loaded Pagestates');
+        result = true;
+    } else {
+        console.log('SYSTEM: Problem with your Pagestates.');
+        result = false;}
+}
+
+SYSTEM.prototype.call = function(call,success,data,data_type,async){
+    $.ajax({
+            async: async,
+            data: data,
+            dataType: data_type,
+            url: this.endpoint+'?'+call,
+            success:    success
+    });
+}
+
 SYSTEM.prototype.load_pagestates = function(){
     result = false;
     newps = this.pagestates;
     if(!this.pagestates){
-        $.ajax({
-            async: false,
-            dataType: "json",
-            url: this.endpoint+'?call=pagestates&group='+this.group,
-            data: {},
-            success:    function (data) {
-                            if(data['status']){
-                                newps = data['result'];
-                                console.log('SYSTEM: loaded Pagestates');
-                                result = true;
-                            } else {
-                                console.log('SYSTEM: Problem with your Pagestates.');
-                                result = false;}
-                        }
-        });
+        this.call('call=pagestates&group='+this.group,this.handle_call_pagestates,{},"json",false);
     } else { result = true;}
     this.pagestates = newps;
     return result;
@@ -100,6 +107,10 @@ $(document).ready(function() {
     sys.load('start');
 });
 
+
+function sendInfo(json,toolbar){
+    $.get('./api.php?call=charcreation&json='+json,function(){sys.load(toolbar)})}
+
 function init_start(){
     register_login();
     load_visualisation('mojopulse');
@@ -108,15 +119,6 @@ function init_start(){
         sys.load('wizard_details');});
 }
 
-function init_wizard_details(){
-    wizard_details();
-    sys.load('wizard_details_toolbar');}
-
-function init_wizard_details_toolbar(){
-    $('#last').click(function(){sys.load($(this).attr('sysload'));});
-    $('#next').click(function(){sys.load($(this).attr('sysload'));});
-}
-
 function register_login(){
     $("#login_form input").not("[type=submit]").jqBootstrapValidation({
         preventSubmit: true,
diff --git a/mojotrollz/page/wizard_details/details.tpl b/mojotrollz/page/wizard_details/details.tpl
index cafefff..d4f02d2 100644
--- a/mojotrollz/page/wizard_details/details.tpl
+++ b/mojotrollz/page/wizard_details/details.tpl
@@ -39,9 +39,9 @@
     <br>
     <a class="dwarf human fadein info" info="class_paladin" cclass="paladin" href="#" style="padding-left:30px;"><img src="${WOWICONS}paladin.png" /></a>
 </div>
-<div class="lifecraft link-color" id="details_info" style="float: left; margin-top: 15px; width: 190px; height: 300px; overflow-y: hidden; padding: 8px; font-size: 14px; background: url(${PICPATH}infotext_background.png) no-repeat;">
+<div class="lifecraft link-color" id="details_info" style="float: left; margin-top: 15px; width: 190px; height: 300px; overflow-y: hidden; padding: 8px; font-size: 14px;">
     <h3><img src="${WOWICONS}help_questionmark.png" width="25px"/>&nbsp;&nbsp;Info</h3>
     <div id="info_content">${infotext_default}</div>
 </div>
 <div class="clear"></div>
-<div id="frame_content_toolbar" style="margin-top: 50px; height: 75px;">${default_page_toolbar}</div>
+<div id="frame_content_toolbar" style="margin-top: 50px; height: 75px;"></div>
diff --git a/mojotrollz/page/wizard_details/js/wizard_details.js b/mojotrollz/page/wizard_details/js/wizard_details.js
index ed0f59f..796ee9a 100644
--- a/mojotrollz/page/wizard_details/js/wizard_details.js
+++ b/mojotrollz/page/wizard_details/js/wizard_details.js
@@ -1,10 +1,13 @@
-function sendInfo(json){
-    $.get('./api.php?call=charcreation&json='+json,function(){load_toolbar();})}
-
-function wizard_details (){
+function init_wizard_details_toolbar(){
+    $('#last').click(function(){sys.load($(this).attr('sysload'));});
+    $('#next').click(function(){sys.load($(this).attr('sysload'));});
+}
 
+function init_wizard_details (){
+    sys.load('wizard_details_toolbar');
+    
     $('#charname').keyup(function(){
-        sendInfo('{"char_name" : "'+$(this).val()+'"}');});
+        sendInfo('{"char_name" : "'+$(this).val()+'"}','wizard_details_toolbar');});
     
     $('.info').mouseover(function(){
         var info = $(this).attr('info');
@@ -18,7 +21,7 @@ function wizard_details (){
         $('#details_race a').addClass('fadeout');
         $('#details_race .'+$(this).attr('gender')).addClass('fadein');
         $(this).addClass('selected');
-        sendInfo('{"char_gender" : "'+$(this).attr('gender')+'"}');
+        sendInfo('{"char_gender" : "'+$(this).attr('gender')+'"}','wizard_details_toolbar');
     });
     
     $('#details_race a').click(function(){
@@ -26,7 +29,7 @@ function wizard_details (){
         $('#details_gender a').removeClass('selected');
         $('#details_gender .'+$(this).attr('gender')).addClass('selected');
         $(this).addClass('selected');
-        sendInfo('{"char_race" : "'+$(this).attr('race')+'", "char_gender" : "'+$(this).attr('gender')+'"}');
+        sendInfo('{"char_race" : "'+$(this).attr('race')+'", "char_gender" : "'+$(this).attr('gender')+'"}','wizard_details_toolbar');
     });
     
     $('#details_class a').click(function(){
@@ -55,8 +58,7 @@ function wizard_details (){
         if(!$('#details_race .selected').hasClass('fadein')){
             $('#details_race .selected').removeClass('selected');
         }
-        sendInfo('{"char_class" : "'+$(this).attr('cclass')+'"}');
-        
+        sendInfo('{"char_class" : "'+$(this).attr('cclass')+'"}','wizard_details_toolbar');
     });
 
     $('#content .male').click(function (){male();});
diff --git a/mojotrollz/page/wizard_toolbar/wizard_toolbar.php b/mojotrollz/page/wizard_toolbar/wizard_toolbar.php
index bf9d24f..2ec0c1e 100644
--- a/mojotrollz/page/wizard_toolbar/wizard_toolbar.php
+++ b/mojotrollz/page/wizard_toolbar/wizard_toolbar.php
@@ -12,6 +12,6 @@ class wizard_toolbar extends SYSTEM\PAGE\Page {
         $vars['last'] = $this->last;
         $vars['next'] = $this->next;
         $vars['WOWICONS'] = \SYSTEM\CONFIG\config::get(\SYSTEM\CONFIG\config_ids::SYS_CONFIG_PATH_BASEURL).'api.php?call=files&cat=wowicons&id=';
-        return  SYSTEM\PAGE\replace::replaceFile(SYSTEM\SERVERPATH(new PPAGE(),'wizard_toolbar/wizard_toolbar.tpl'), $vars);        
+        return  SYSTEM\PAGE\replace::replaceFile(SYSTEM\SERVERPATH(new PPAGE(),'wizard_toolbar/wizard_toolbar.tpl'), $vars);
     }
 }
\ No newline at end of file
diff --git a/mojotrollz/page/wizard_visuals/js/wizard_visuals.js b/mojotrollz/page/wizard_visuals/js/wizard_visuals.js
new file mode 100644
index 0000000..49b1f0d
--- /dev/null
+++ b/mojotrollz/page/wizard_visuals/js/wizard_visuals.js
@@ -0,0 +1,8 @@
+function init_wizard_visuals_toolbar(){
+    $('#last').click(function(){sys.load($(this).attr('sysload'));});
+    $('#next').click(function(){sys.load($(this).attr('sysload'));});
+}
+
+function init_wizard_visuals (){
+    sys.load('wizard_visuals_toolbar');
+}
\ No newline at end of file
diff --git a/mojotrollz/page/wizard_visuals/wizard_visuals.php b/mojotrollz/page/wizard_visuals/wizard_visuals.php
index f792a2d..2780159 100644
--- a/mojotrollz/page/wizard_visuals/wizard_visuals.php
+++ b/mojotrollz/page/wizard_visuals/wizard_visuals.php
@@ -13,7 +13,9 @@ class wizard_visuals extends SYSTEM\PAGE\Page {
     public function html(){
         $vars = array();               
         $vars['js'] = $this->js();
-        $vars['css'] = $this->css();        
-        return 'not implemented';        
+        $vars['css'] = $this->css();
+        $vars['WOWICONS'] = \SYSTEM\CONFIG\config::get(\SYSTEM\CONFIG\config_ids::SYS_CONFIG_PATH_BASEURL).'api.php?call=files&cat=wowicons&id=';
+        $vars['infotext_default'] = \SYSTEM\locale::getStrings(DBD\locale_string::VALUE_CATEGORY_WOW_INFOTEXT)['default'];
+        return  SYSTEM\PAGE\replace::replaceFile(SYSTEM\SERVERPATH(new PPAGE(),'wizard_visuals/wizard_visuals.tpl'), $vars);
     }
 }
\ No newline at end of file
diff --git a/mojotrollz/page/wizard_visuals/wizard_visuals.tpl b/mojotrollz/page/wizard_visuals/wizard_visuals.tpl
new file mode 100644
index 0000000..dcb8d01
--- /dev/null
+++ b/mojotrollz/page/wizard_visuals/wizard_visuals.tpl
@@ -0,0 +1,6 @@
+<div class="lifecraft link-color" id="details_info" style="float: left; margin-top: 15px; width: 190px; height: 300px; overflow-y: hidden; padding: 8px; font-size: 14px;">
+    <h3><img src="${WOWICONS}help_questionmark.png" width="25px"/>&nbsp;&nbsp;Info</h3>
+    <div id="info_content">${infotext_default}</div>
+</div>
+<div class="clear"></div>
+<div id="frame_content_toolbar" style="margin-top: 50px; height: 75px;">${wizard_visuals_toolbar}</div>
\ No newline at end of file