diff --git a/mojotrollz/api/charcreation/charcreation.php b/mojotrollz/api/charcreation/charcreation.php
index c56d1fe..21512cd 100644
--- a/mojotrollz/api/charcreation/charcreation.php
+++ b/mojotrollz/api/charcreation/charcreation.php
@@ -5,6 +5,7 @@ class charcreation {
     const DEFAULT_CHAR_RACE = 'default';
     const DEFAULT_CHAR_CLASS = 'default';
     const MOJO_CC_SESSIONKEY = 'mojo_charcreation';
+    const DEFAULT_CHAR_APPEARANCE = 0;
     public static function data($json = NULL){
         if(!\SYSTEM\SECURITY\Security::load(self::MOJO_CC_SESSIONKEY)){
             \SYSTEM\SECURITY\Security::save(self::MOJO_CC_SESSIONKEY, self::session_default());}
@@ -24,7 +25,11 @@ class charcreation {
                         'char_gender' => self::DEFAULT_CHAR_GENDER,
                         'char_race' => self::DEFAULT_CHAR_RACE,
                         'char_class' => self::DEFAULT_CHAR_CLASS,
-                        'char_appearance' => 0,
+                        'char_skin_color' => self::DEFAULT_CHAR_APPEARANCE,
+                        'char_hair' => self::DEFAULT_CHAR_APPEARANCE,
+                        'char_hair_color' => self::DEFAULT_CHAR_APPEARANCE,
+                        'char_face' => self::DEFAULT_CHAR_APPEARANCE,
+                        'char_facial_hair' => self::DEFAULT_CHAR_APPEARANCE,
                         'char_skill_tree' => 0,
                         'char_equip' => 0,
                         'char_guild' => 0,
diff --git a/mojotrollz/api/charcreation/charcreation_validator.php b/mojotrollz/api/charcreation/charcreation_validator.php
index cddc8e4..6b2bd7c 100644
--- a/mojotrollz/api/charcreation/charcreation_validator.php
+++ b/mojotrollz/api/charcreation/charcreation_validator.php
@@ -29,7 +29,33 @@ class charcreation_validator {
             $data['char_race'] = charcreation::DEFAULT_CHAR_RACE;}
         \SYSTEM\SECURITY\Security::save(charcreation::MOJO_CC_SESSIONKEY,$data);
     }
-    public static function char_appearance($value){}
+    
+    public static function char_skin_color($value){
+        $data = \SYSTEM\SECURITY\Security::load(charcreation::MOJO_CC_SESSIONKEY);
+        $data['char_skin_color'] = $value;
+        \SYSTEM\SECURITY\Security::save(charcreation::MOJO_CC_SESSIONKEY,$data);
+    }
+    public static function char_hair($value){
+        $data = \SYSTEM\SECURITY\Security::load(charcreation::MOJO_CC_SESSIONKEY);
+        $data['char_hair'] = $value;
+        \SYSTEM\SECURITY\Security::save(charcreation::MOJO_CC_SESSIONKEY,$data);
+    }
+    public static function char_hair_color($value){
+        $data = \SYSTEM\SECURITY\Security::load(charcreation::MOJO_CC_SESSIONKEY);
+        $data['char_hair_color'] = $value;
+        \SYSTEM\SECURITY\Security::save(charcreation::MOJO_CC_SESSIONKEY,$data);
+    }
+    public static function char_face($value){
+        $data = \SYSTEM\SECURITY\Security::load(charcreation::MOJO_CC_SESSIONKEY);
+        $data['char_face'] = $value;
+        \SYSTEM\SECURITY\Security::save(charcreation::MOJO_CC_SESSIONKEY,$data);
+    }
+    public static function char_facial_hair($value){
+        $data = \SYSTEM\SECURITY\Security::load(charcreation::MOJO_CC_SESSIONKEY);
+        $data['char_facial_hair'] = $value;
+        \SYSTEM\SECURITY\Security::save(charcreation::MOJO_CC_SESSIONKEY,$data);
+    }
+    
     public static function char_skill_tree($value){}
     public static function char_equip($value){}
     public static function char_guild($value){}
diff --git a/mojotrollz/page/default_page/css/default_page.css b/mojotrollz/page/default_page/css/default_page.css
index 176c183..1940807 100644
--- a/mojotrollz/page/default_page/css/default_page.css
+++ b/mojotrollz/page/default_page/css/default_page.css
@@ -49,7 +49,7 @@ body {
 #frame_main {
     //width: 1000px;
     position: absolute;
-    width: 60%;
+    width: 1000px;
     top: 20%;
     left: 20%;
     //-webkit-box-shadow: 3px 3px 4px 2px rgba(0, 0, 0, 1);
@@ -83,18 +83,18 @@ body {
 #frame_content_left {
     float: left;
     color: black;
-    width: 30%;    
+    width: 300px;    
 }
 
 #frame_content_center {
-    width: 30%;    
+    width: 300px;    
     margin: 1.5%;
-    margin-left: 34.5%;
+    margin-left: 320px;
 }
 
 #frame_content_right {
     float: right;    
-    width: 30%;
+    width: 280px;
     margin-left: 1.5%;
     margin-right: 1.5%;
 }
diff --git a/mojotrollz/page/default_page/default_page.php b/mojotrollz/page/default_page/default_page.php
index cbec83c..179efc0 100644
--- a/mojotrollz/page/default_page/default_page.php
+++ b/mojotrollz/page/default_page/default_page.php
@@ -27,16 +27,9 @@ class default_page extends SYSTEM\PAGE\Page {
         $vars = array();               
         $vars['js'] = $this->js();
         $vars['css'] = $this->css();
-        //$vars['default_page_welcome'] = \SYSTEM\PAGE\replace::replaceFile(SYSTEM\SERVERPATH(new PPAGE(),'default_page/default_page_welcome.tpl'), array());
-        //$vars['default_page_serverinfo'] =  \SYSTEM\PAGE\replace::replaceFile(SYSTEM\SERVERPATH(new PPAGE(),'default_page/default_page_serverinfo.tpl'), array());
-        //$vars['default_page_login'] = \SYSTEM\PAGE\replace::replaceFile(SYSTEM\SERVERPATH(new PPAGE(),'default_page/default_page_login.tpl'), array());
-        //$vars['default_page_toolbar'] = \SYSTEM\PAGE\replace::replaceFile(SYSTEM\SERVERPATH(new PPAGE(),'default_page/default_page_toolbar.tpl'), array());
         $vars['PICPATH'] = \SYSTEM\CONFIG\config::get(\SYSTEM\CONFIG\config_ids::SYS_CONFIG_PATH_BASEURL).'api.php?call=files&cat=default_page&id=';
         $vars['copyright'] = '';
         $vars['inprint'] = '';
-        //$vars['realm_status'] = realm::status();
-        //$vars['world_status'] = world::status();
-        //$vars['player_online'] = database::player_online();
         $vars = array_merge($vars,  \SYSTEM\locale::getStrings(DBD\locale_string::VALUE_CATEGORY_MAINPAGE),
                                     \SYSTEM\locale::getStrings(DBD\locale_string::VALUE_CATEGORY_WOW_SERVERINFO),
                                     \SYSTEM\locale::getStrings(DBD\locale_string::VALUE_CATEGORY_BASIC));
diff --git a/mojotrollz/page/wizard_details/details.tpl b/mojotrollz/page/wizard_details/details.tpl
index d4f02d2..3ca7c98 100644
--- a/mojotrollz/page/wizard_details/details.tpl
+++ b/mojotrollz/page/wizard_details/details.tpl
@@ -44,4 +44,4 @@
     <div id="info_content">${infotext_default}</div>
 </div>
 <div class="clear"></div>
-<div id="frame_content_toolbar" style="margin-top: 50px; height: 75px;"></div>
+<div id="frame_content_toolbar" style="height: 75px;"></div>
diff --git a/mojotrollz/page/wizard_visuals/js/wizard_visuals.js b/mojotrollz/page/wizard_visuals/js/wizard_visuals.js
index 49b1f0d..f39a079 100644
--- a/mojotrollz/page/wizard_visuals/js/wizard_visuals.js
+++ b/mojotrollz/page/wizard_visuals/js/wizard_visuals.js
@@ -5,4 +5,21 @@ function init_wizard_visuals_toolbar(){
 
 function init_wizard_visuals (){
     sys.load('wizard_visuals_toolbar');
+    $('#sel_skin_color').change(function(){
+        sendInfo('{"char_skin_color" : "'+$(this).val()+'"}','wizard_visuals_toolbar');
+        sys.load('wizard_visuals');});
+    $('#sel_hair').change(function(){
+        sendInfo('{"char_hair" : "'+$(this).val()+'"}','wizard_visuals_toolbar');
+        sys.load('wizard_visuals');});
+    $('#sel_hair_color').change(function(){
+        sendInfo('{"char_hair_color" : "'+$(this).val()+'"}','wizard_visuals_toolbar');
+        sys.load('wizard_visuals');});
+    $('#sel_face').change(function(){
+        sendInfo('{"char_face" : "'+$(this).val()+'"}','wizard_visuals_toolbar');
+        sys.load('wizard_visuals');});
+    $('#sel_facial_hair').change(function(){
+        sendInfo('{"char_facial_hair" : "'+$(this).val()+'"}','wizard_visuals_toolbar');
+        sys.load('wizard_visuals');});
+    
+    $('.item').draggable();
 }
\ 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 097824d..2730850 100644
--- a/mojotrollz/page/wizard_visuals/wizard_visuals.php
+++ b/mojotrollz/page/wizard_visuals/wizard_visuals.php
@@ -15,11 +15,6 @@ class wizard_visuals extends SYSTEM\PAGE\Page {
         if($vars['char_race'] == 'undead'){
             $vars['char_race'] = 'scourge';}
         $vars['char_equip'] = '';//'1,110744,3,109807,16,111412,5,111190,9,111188,10,126342,6,110003,7,120793,8,115217,21,125312,14,110641';//
-        $vars['char_skincolor'] = 1;
-        $vars['char_horn'] = 0;
-        $vars['char_face'] = 5;
-        $vars['char_facial_hair'] = 5;
-        $vars['char_horn_color'] = 3;
         $vars['js'] = $this->js();
         $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=';
diff --git a/mojotrollz/page/wizard_visuals/wizard_visuals.tpl b/mojotrollz/page/wizard_visuals/wizard_visuals.tpl
index 97e8c2d..d7484e0 100644
--- a/mojotrollz/page/wizard_visuals/wizard_visuals.tpl
+++ b/mojotrollz/page/wizard_visuals/wizard_visuals.tpl
@@ -41,14 +41,86 @@
     <img src="${WOWICONS}Ui-paperdoll-slot-trinket.png" width="48px" style="padding-bottom: 5px;"/>
 </div>
 <div style="float:left; width: 240px; height: 432px; margin-top: 5px; margin-left: 5px; border: solid back 1px; background: url(${WOWICONS}Ui-paperdoll-slot-empty2.png);">
-    <img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img src="${WOWICONS}help_questionmark.png" width="48px" style=""/>
+    <img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/><img class="item" src="${WOWICONS}help_questionmark.png" width="48px" style=""/>
 </div>
-<div>
-    ${char_skincolor}${char_horn}${char_horn_color}${char_face}${char_facial_hair}
-</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;">
-    <h3><img src="${WOWICONS}help_questionmark.png" width="25px"/>&nbsp;&nbsp;Info</h3>
-    <div id="info_content">${infotext_default}</div>
+<div style="padding: 25px; float: left;">
+    <table>
+        <tr>
+            <td>Skincolor ${char_skin_color}</td>
+            <td><select id="sel_skin_color">
+                <option value="0" selected>0</option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+                <option value="7">7</option>
+                <option value="8">8</option>
+                <option value="9">9</option>
+            </select></td>
+        </tr>
+        <tr>
+            <td>Hair ${char_hair}</td>
+            <td><select id="sel_hair">
+                <option value="0" selected>0</option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+                <option value="7">7</option>
+                <option value="8">8</option>
+                <option value="9">9</option>
+            </select></td>
+        </tr>
+        <tr>
+            <td>Hair Color ${char_hair_color}</td>
+            <td><select id="sel_hair_color">
+                <option value="0" selected>0</option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+                <option value="7">7</option>
+                <option value="8">8</option>
+                <option value="9">9</option>
+            </select></td>
+        </tr>
+        <tr>
+            <td>Face ${char_face}</td>
+            <td><select id="sel_face">
+                <option value="0" selected>0</option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+                <option value="7">7</option>
+                <option value="8">8</option>
+                <option value="9">9</option>
+            </select></td>
+        </tr>
+        <tr>
+            <td>Facial Hair ${char_facial_hair}</td>
+            <td><select id="sel_facial_hair">
+                <option value="0" selected>0</option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+                <option value="7">7</option>
+                <option value="8">8</option>
+                <option value="9">9</option>
+            </select></td>
+        </tr>
+    </table>
 </div>
 <div class="clear"></div>
-<div id="frame_content_toolbar" style="margin-top: 100px; height: 75px;">${wizard_visuals_toolbar}</div>
\ No newline at end of file
+<div id="frame_content_toolbar" style="margin-top: 75px; height: 75px;">${wizard_visuals_toolbar}</div>
\ No newline at end of file