diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index c4a5734bc9b..2da0d2923aa 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -5910,7 +5910,7 @@ label.error {
 
 .multi-wizard.instance-wizard .section.custom-size {
   position: relative;
-  background: #FFFFFF;
+  background: #F4F4F4;
   padding: 7px;
   border-radius: 4px;
 }
@@ -5932,6 +5932,37 @@ label.error {
   font-size: 10px;
 }
 
+/*** Compute offering*/
+.instance-wizard .step.service-offering {
+}
+
+.instance-wizard .step.service-offering.custom-size .select-container {
+  height: 235px;
+}
+
+.instance-wizard .step.service-offering .custom-size {
+  display: none;
+}
+
+.instance-wizard .step.service-offering.custom-size .custom-size {
+  display: block;
+}
+
+.instance-wizard .step.service-offering .custom-size .field {
+  width: 30%;
+  float: left;
+  margin-bottom: 13px;
+}
+
+.instance-wizard .step.service-offering .custom-size .field label {
+  text-indent: 20px;
+}
+
+.instance-wizard .step.service-offering .custom-size .field input {
+  width: 88%;
+  margin-left: 26px;
+}
+
 /*** Network*/
 .multi-wizard.instance-wizard .no-network {
   background: #FFFFFF;
diff --git a/ui/index.jsp b/ui/index.jsp
index 7a1cfaac660..eb8ad954cb6 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -1,3 +1,4 @@
+
 <%--
      Licensed to the Apache Software Foundation (ASF) under one
      or more contributor license agreements.  See the NOTICE file
@@ -210,6 +211,21 @@
                             <div class="content">
                                 <div class="select-container">
                                 </div>
+                                <!-- Custom size slider -->
+                                <div class="section custom-size">
+                                    <div class="field">
+                                        <label><fmt:message key="label.num.cpu.cores"/></label>
+                                        <input type="text" name="compute-cpu-cores" />
+                                    </div>
+                                    <div class="field">
+                                        <label><fmt:message key="label.cpu.mhz"/></label>
+                                        <input type="text" name="compute-cpu" />
+                                    </div>
+                                    <div class="field">
+                                        <label><fmt:message key="label.memory.mb"/></label>
+                                        <input type="text" name="compute-memory" />
+                                    </div>
+                                </div>
                             </div>
                         </div>
 
diff --git a/ui/scripts/instanceWizard.js b/ui/scripts/instanceWizard.js
index 40832aedf3c..484b18cceda 100644
--- a/ui/scripts/instanceWizard.js
+++ b/ui/scripts/instanceWizard.js
@@ -290,6 +290,7 @@
                     success: function(json) {
                         serviceOfferingObjs = json.listserviceofferingsresponse.serviceoffering;
                         args.response.success({
+                            customFlag: 'iscustomized',
                             data: {
                                 serviceOfferings: serviceOfferingObjs
                             }
diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js
index a246051c173..4368ec47ac3 100644
--- a/ui/scripts/ui-custom/instanceWizard.js
+++ b/ui/scripts/ui-custom/instanceWizard.js
@@ -424,7 +424,27 @@
                                         }, {
                                             'wizard-field': 'service-offering'
                                         })
-                                    );
+                                    );                                    
+
+                                    $step.find('input[type=radio]').bind('change', function() {
+                                        var $target = $(this);
+                                        var val = $target.val();
+                                        var item = $.grep(args.data.serviceOfferings, function(elem) {
+                                            return elem.id == val;
+                                        })[0];
+
+                                        if (!item) return true;
+
+                                        var custom = item[args.customFlag];
+
+                                        if (custom) {
+                                            $step.addClass('custom-size');
+                                        } else {
+                                            $step.removeClass('custom-size');
+                                        }
+
+                                        return true;
+                                    });
 
                                     originalValues(formData);
                                 }