diff --git a/app/assets/javascripts/cancer_predict.js b/app/assets/javascripts/cancer_predict.js
index d1d3746..24e11a3 100644
--- a/app/assets/javascripts/cancer_predict.js
+++ b/app/assets/javascripts/cancer_predict.js
@@ -15,4 +15,7 @@ $(document).ready(function(){
 			$('#show_help_modal').modal('hide');
 		});
 	});
+	$('.num_only').focus
+	for(var i=0;i<$('.num_only').length;i++)
+		$('.num_only').eq(i).data('range')
 });
diff --git a/app/assets/javascripts/react.js b/app/assets/javascripts/react.js
index a8c3455..06e0fae 100644
--- a/app/assets/javascripts/react.js
+++ b/app/assets/javascripts/react.js
@@ -9,7 +9,6 @@ if (typeof Math.imul == "undefined" || (Math.imul(0xffffffff, 5) == 0)) {
         return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0) | 0);
     }
 }
-
 /**
  * React v15.3.1
  *
@@ -3026,7 +3025,7 @@ if (typeof Math.imul == "undefined" || (Math.imul(0xffffffff, 5) == 0)) {
     QG(function (a) { return Y(IW.c ? IW.c(a) : IW.call(null, a)) }, new R(null, 1, 5, S, [ZG], null), "treatments-received-panel");
     QG(function () { return React.createElement("div", { id: "patient-related-help" }, React.createElement("h1", null, "Patient related factors"), React.createElement("h2", null, "<%=%>"), React.createElement("p", null, "Many risk factors depend on the age of the patient."), React.createElement("h2", null, "Surgery", React.createElement("p", null, "May be breast-conserving surgery or a mastectomy."))) }, new R(null, 1, 5, S, [ZG], null), "patient-related-help");
     var JW = QG(function (a) {
-        var b = function () { var a = new m(null, 1, [nu, jW], null); return null/*nW.c ? nW.c(a) : nW.call(null, a) */}();/*important*/ return gg(React.createElement, "div", M(b) ? EG(b) : null, M(b) ? new R(null, 1, 5, S, [React.createElement("form", { onKeyPress: GW, onSubmit: HW, className: "form-horizontal" }, Y(p(a.c ? a.c(fn) : a.call(null, fn)) ? new R(null, 3, 5, S, [bv, function () { var a = new m(null, 2, [Lx, "Age", hk, fn], null); return LT.c ? LT.c(a) : LT.call(null, a) }(), new R(null, 3, 5, S, [bv, new m(null, 1, [Ru, new m(null, 3, [Bn, "#686868", Aq, "145px", wr, -5], null)],
+        var b = null;/*important*/ return gg(React.createElement, "div", M(b) ? EG(b) : null, M(b) ? new R(null, 1, 5, S, [React.createElement("form", { onKeyPress: GW, onSubmit: HW, className: "form-horizontal" }, Y(p(a.c ? a.c(fn) : a.call(null, fn)) ? new R(null, 3, 5, S, [bv, function () { var a = new m(null, 2, [Lx, "Age", hk, fn], null); return LT.c ? LT.c(a) : LT.call(null, a) }(), new R(null, 3, 5, S, [bv, new m(null, 1, [Ru, new m(null, 3, [Bn, "#686868", Aq, "145px", wr, -5], null)],
             null), "Age must be between 25 and 85"], null)], null) : null), Y(B.h(Bm, bH(KQ(eo))) ? function () { var a = new m(null, 2, [Lx, "Post Menopausal", hk, Zk], null); return LT.c ? LT.c(a) : LT.call(null, a) }() : null))], null) : new R(null, 2, 5, S, [Y(b), React.createElement("form", { onKeyPress: GW, onSubmit: HW, className: "form-horizontal" }, Y(p(a.c ? a.c(fn) : a.call(null, fn)) ? new R(null, 3, 5, S, [bv, function () { var a = new m(null, 2, [Lx, "Age", hk, fn], null); return LT.c ? LT.c(a) : LT.call(null, a) }(), new R(null, 3, 5, S, [bv, new m(null, 1, [Ru, new m(null, 3, [Bn,
                 "#686868", Aq, "145px", wr, -5], null)], null), "Age must be between 25 and 85"], null)], null) : null), Y(B.h(Bm, bH(KQ(eo))) ? function () { var a = new m(null, 2, [Lx, "Post Menopausal", hk, Zk], null); return LT.c ? LT.c(a) : LT.call(null, a) }() : null))], null))
     }, new R(null, 1, 5, S, [aH], null), "patient-related-form"), KW = QG(function (a) { return Y(JW.c ? JW.c(a) : JW.call(null, a)) }, new R(null, 1, 5, S, [ZG], null), "patient-related-panel"), LW = QG(function (a) {
@@ -3044,14 +3043,15 @@ if (typeof Math.imul == "undefined" || (Math.imul(0xffffffff, 5) == 0)) {
             null)], null) : null) , Y(p(a.c ? a.c(Tp) : a.call(null, Tp)) ? function () { var a = new m(null, 2, [Lx, "HER2 status", hk, Tp], null); return LT.c ? LT.c(a) : LT.call(null, a) }() : null), Y(p(a.c ? a.c(Br) : a.call(null, Br)) ? function () { var a = new m(null, 2, [Lx, "Detected by", hk, Br], null); return LT.c ? LT.c(a) : LT.call(null, a) }() : null), Y(B.h(ln, bH(KQ(Br))) ? new R(null, 4, 5, S, [bv, new m(null, 1, [Ru, new m(null, 3, [Bn, "#686868", Aq, "145px", wr, -5], null)], null), "Detected as part of a preventive ", new R(null, 3, 5, S, [eF, new m(null, 2, [CE, "https://www.nhs.uk/conditions/nhs-screening/", $A, "_blank"], null), "screening programme"], null)], null) : null), Y(p(a.c ?
             a.c(Pw) : a.call(null, Pw)) ? new R(null, 6, 5, S, [bv, function () { var a = new m(null, 2, [Lx, "Positive nodes", hk, Pw], null); return LT.c ? LT.c(a) : LT.call(null, a) }(), function () { var a = new m(null, 2, [Lx, "Micrometastases only", hk, tC], null); return LT.c ? LT.c(a) : LT.call(null, a) }(), ig("1", b) ? new R(null, 3, 5, S, [bv, new m(null, 1, [Ru, new m(null, 3, [Bn, "#686868", Aq, "145px", wr, -5], null)], null), "Enabled when positive nodes is 1. "], null) : null, B.h("1", b) ? LW.c ? LW.c("“Yes” means the positive node has micrometastases only") : LW.call(null,
                 "“Yes” means the positive node has micrometastases only") : null, B.h("0", b) ? LW.c ? LW.c("Why can't I enter micrometastases?") : LW.call(null, "Why can't I enter micrometastases?") : null], null) : null))
-    }, new R(null, 2, 5, S, [aH, ZG], null), "tumour-related-form"), NW = QG(function (a) { return Y(MW.c ? MW.c(a) : MW.call(null, a)) }, new R(null, 1, 5, S, [ZG], null), "tumour-related-panel"),reset_btn = QG(function (a) { a = null != a && (a.v & 64 || h === a.J) ? P(Fi, a) : a; a = y.h(a, nu);console.log(a);return React.createElement("button", { onClick: a, className: "btn navbar-btn btn-danger btn-lg screen-only" }, " Reset ") }, new R(null, 1, 5, S, [ZG], null), "clear-all-button"), OW = QG(function (a) {
+    }, new R(null, 2, 5, S, [aH, ZG], null), "tumour-related-form"), NW = QG(function (a) { return Y(MW.c ? MW.c(a) : MW.call(null, a)) }, new R(null, 1, 5, S, [ZG], null), "tumour-related-panel"),submit_btn = QG(function (a) { a = null != a && (a.v & 64 || h === a.J) ? P(Fi, a) : a; a = y.h(a, nu);return React.createElement("button", { onClick: function(){console.log(p(LG))}, className: "submit-btn screen-only",style:{marginLeft:'1em',float:'right',backgroundColor:"#d26900",color:"white",border:"0em",padding:"0.125em 0.5em",borderRadius:"0.5em"} }, " Submit ") }, new R(null, 1, 5, S, [ZG], null), "clear-all-button"),reset_btn = QG(function (a) { a = null != a && (a.v & 64 || h === a.J) ? P(Fi, a) : a; a = y.h(a, nu);return React.createElement("button", { onClick: a, className: "reset-btn screen-only",style:{float:'right',backgroundColor:"#d26900",color:"white",border:"0em",padding:"0.125em 0.5em",borderRadius:"0.5em"} }, " Reset ") }, new R(null, 1, 5, S, [ZG], null), "clear-all-button"), reset_call = QG(function (a) {
+	var b = function () { var a = new m(null, 1, [nu, jW], null); return reset_btn.c ? reset_btn.c(a) : reset_btn.call(null, a)}(),b1 = function () { var a = new m(null, 1, [nu, jW], null); return submit_btn.c ? submit_btn.c(a) : submit_btn.call(null, a)}();/*important*/ return gg(React.createElement, "div", M(b) ? EG(b) : null, [Y(b1),Y(b)])}), OW = QG(function (a) {
         return React.createElement("form", { onKeyPress: GW, onSubmit: HW, className: "form-horizontal" },Y(p(a.c ? a.c(vu) : a.call(null, vu)) ? function () { var a = new m(null, 2, [Lx, "Size", hk, vu], null); return LT.c ? LT.c(a) : LT.call(null, a) }() : null), Y(p(a.c ? a.c(Qw) : a.call(null, Qw)) ? function () {
             var a = new m(null, 2, [Lx, "Grade",
                 hk, Qw], null); return LT.c ? LT.c(a) : LT.call(null, a)
         }() : null))
     }, new R(null, 1, 5, S, [ZG], null), "hormone-form"), PW = QG(function (a) { return Y(OW.c ? OW.c(a) : OW.call(null, a)) }, new R(null, 1, 5, S, [ZG], null), "hormone-panel"), QW = QG(function () {
         var a = FW(); return React.createElement("div", { className: "row" }, React.createElement("div", { style: { paddingRight: 0 }, className: "col-sm-6 screen-only" }, Y(KW.c ? KW.c(a) : KW.call(null, a)), Y(PW.c ? PW.c(a) : PW.call(null, a))), React.createElement("div", { style: { paddingRight: 0 }, className: "col-sm-6 screen-only" }, Y(NW.c ? NW.c(a) : NW.call(null,
-            a))),React.createElement("div",{className: "col-sm-6 screen-only"},React.createElement("div",{},Y(reset_btn.l ? reset_btn.l() : reset_btn.call(null)))))
+            a))))
     }, new R(null, 2, 5, S, [aH, tU], null), "inputs-row"); QG(function () { var a = FW(); return React.createElement("div", { className: "row" }, React.createElement("div", { style: { paddingRight: 0 }, className: "col-sm-12" }, Y(KW.c ? KW.c(a) : KW.call(null, a)), Y(NW.c ? NW.c(a) : NW.call(null, a)), Y(PW.c ? PW.c(a) : PW.call(null, a)))) }, new R(null, 2, 5, S, [aH, tU], null), "inputs-column"); BT(fg(zT, T, new R(null, 2, 5, S, [new R(null, 2, 5, S, ["div", new m(null, 1, [Do, "12px"], null)], null), new R(null, 3, 5, S, [".treatments-header--G__28384", new m(null, 3, [dr, "rgba(255, 140, 0, 1) !important", Bn, "white !important", Do, "0.625em !important"], null), new R(null, 2, 5, S, ["form", new m(null, 1, [eC, "1px solid red"], null)], null)], null)], null)), "predict3.layout.treatments-panel", "treatments-style");
     BT(fg(zT, T, new R(null, 1, 5, S, [new R(null, 2, 5, S, [".closer--G__28387", new m(null, 1, [YD, "0.625em"], null)], null)], null)), "predict3.layout.treatments-panel", "treatment-input-style");
     var RW = QG(function (a, b) {
@@ -3103,8 +3103,8 @@ if (typeof Math.imul == "undefined" || (Math.imul(0xffffffff, 5) == 0)) {
             React.createElement("p", null, "Should ", React.createElement("strong", null, "bisphosphonates"), " be included as a treatment option in this tool? "), Y(OQ(eo)), React.createElement("p", null, "If bisphosphonates are not available as a treatment in your area, you may wish to remove this treatment\n      option from the tool."), React.createElement("hr", null), React.createElement("p", null, "Should the tool cover ", React.createElement("strong", null, "10 or 15 years"), " from diagnosis?"), Y(OQ(lm)), React.createElement("hr",
                 null), React.createElement("p", null, "Which ", React.createElement("strong", null, "result tab"), " should appear first?"), Y(OQ(NB))), React.createElement("div", { className: "modal-footer" }, React.createElement("button", { type: "button", onClick: function () { return $("#settingsModal").modal("hide") }, className: "btn btn-default" }, "Close")))))
     }, new R(null, 1, 5, S, [aH], null), "settings-modal"); var $W = QG(function () { return Y(p(bH(FQ)) ? function () { sU("tool-postamble"); return new R(null, 4, 5, S, [gB, new m(null, 4, [ps, "button", nu, function () { return zQ.ma(null, "print") }, lC, function (a) { return B.h("Enter", a.nativeEvent.code) ? zQ.ma(null, "print") : null }, Ru, ni([Bn, Do, cp, dr, Fr, xt, $t, Gx, jy, xz, Uz], ["#ffffff", 16, 300, "#444466", 70, 10, 10, .5, "0.9375em 5px 0.9375em 5px", -1, "fixed"])], null), function () { var a = new m(null, 1, [Qm, DF], null); return XQ.h ? XQ.h(a, "print") : XQ.call(null, a, "print") }(), " Print"], null) }() : null) }, new R(null,
-        1, 5, S, [aH], null), "results-footer"), aX = QG(function () {
-            var a = bH(FQ); return cc(E(a)) || null == a ? React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-sm-10 col-sm-offset-1 col-xs-12" }, React.createElement("div", { style: { backgroundColor: "#d3e7fd", padding: "0.625em 0.625em 3px 0.625em", marginBottom: 20 } }, React.createElement("div", { style: { color: "#002e5d", fontSize: "1.25em" } }, React.createElement("p", { style: { paddingBottom: 0 } }, Y(function () {
+        1, 5, S, [aH], null), "results-footer"),is_submit={flag: true , submit_func: function(){var a = bH(FQ);return (cc(E(a)) || null == a)}} , aX = QG(function () {
+            var a = bH(FQ); console.log(cc(E(a)) || null == a);return is_submit.flag ? React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-sm-10 col-sm-offset-1 col-xs-12" }, React.createElement("div", { style: { backgroundColor: "#d3e7fd", padding: "0.625em 0.625em 3px 0.625em", marginBottom: 20 } }, React.createElement("div", { style: { color: "#002e5d", fontSize: "1.25em" } }, React.createElement("p", { style: { paddingBottom: 0 } }, Y(function () {
                 var a = new m(null, 2, [Qm, DF, Ru, new m(null, 2, [Do, 35, iu, 8],
                     null)], null); return XQ.h ? XQ.h(a, "info-circle") : XQ.call(null, a, "info-circle")
             }()), " Treatment options and results will appear here when you have filled in all the information needed above."))))) : React.createElement("div", null, React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-md-6 clearfix" }, React.createElement("h3", null, "Treatment Options"), Y(VW.l ? VW.l() : VW.call(null))), function () {
@@ -3117,10 +3117,8 @@ if (typeof Math.imul == "undefined" || (Math.imul(0xffffffff, 5) == 0)) {
                             React.createElement("div", { key: 2, className: "row" }, React.createElement("div", { style: { marginBottom: 20 }, className: "col-xs-12" }, Y(QW.l ? QW.l() : QW.call(null)))))), React.createElement("div", { className: "row screen-only" }, React.createElement("div", { style: { backgroundColor: "#ffffff" }, className: "col-sm-12" }, React.createElement("div", { key: 3, className: "row" }, React.createElement("div", { key: 2, className: "col-sm-10 col-sm-offset-1" }, Y(aX.l ? aX.l() : aX.call(null)))))), Y(uU(0)), function () {
                                 var a = $W.l ? $W.l() : $W.call(null);
                                 return gg(React.createElement, "div", M(a) ? EG(rG(C([new m(null, 1, [Rx, new R(null, 1, 5, S, ["screen-only"], null)], null), a]))) : { className: "screen-only" }, M(a) ? new R(null, 1, 5, S, [null], null) : new R(null, 2, 5, S, [Y(a)], null))
-                            }(), Y(WW.l ? WW.l() : WW.call(null)), Y(ZW.l ? ZW.l() : ZW.call(null)), Y(YW.l ? YW.l() : YW.call(null))], null) : new R(null, 9, 5, S, [Y(b), /*React.createElement("div", { id: "main-content", tabIndex: -1, style: { marginLeft: -30, marginRight: -30 }, className: "row" },
-                                React.createElement("div", { className: "col-xs-12" }, React.createElement("div", { style: { position: "relative", width: "100%", backgroundColor: "#d3e7fd" } }, React.createElement("div", { style: { position: "absolute", width: "100%", top: 0, bottom: "20%", opacity: .25, background: "linear-gradient(rgba(255,255,255,0), #fff)" } }), React.createElement("div",
-                                    { className: "row print-only" }, gg(React.createElement, "div", M(a) ? EG(rG(C([new m(null, 1, [Rx, new R(null, 2, 5, S, ["col-sm-10", "col-sm-offset-1"], null)], null), a]))) : { className: "col-sm-10 col-sm-offset-1" }, M(a) ? null : new R(null, 1, 5, S, [Y(a)], null)))))),*//*important*/ React.createElement("div", { className: "row screen-only" }, React.createElement("div", { className: "col-md-10 col-md-offset-1" }, React.createElement("div", { key: 2, className: "row" }, React.createElement("div", { style: { marginBottom: 20 }, className: "col-xs-12" }, Y(QW.l ? QW.l() :
-                                        QW.call(null)))))),React.createElement("div", { className: "row screen-only" },Y(reset_btn.l ? reset_btn.l() : reset_btn.call(null))), React.createElement("div", { className: "row screen-only" }, React.createElement("div", { style: { backgroundColor: "#ffffff" }, className: "col-sm-12" }, React.createElement("div", { key: 3, className: "row" }, React.createElement("div", { key: 2, className: "col-sm-10 col-sm-offset-1" }, Y(aX.l ? aX.l() : aX.call(null)))))), Y(uU(0)), function () {
+                            }(), Y(WW.l ? WW.l() : WW.call(null)), Y(ZW.l ? ZW.l() : ZW.call(null)), Y(YW.l ? YW.l() : YW.call(null))], null) : new R(null, 9, 5, S, [Y(b), React.createElement("div", { className: "row screen-only" }, React.createElement("div", { className: "col-md-10 col-md-offset-1" }, React.createElement("div", { key: 2, className: "row" }, React.createElement("div", { style: { marginBottom: 20 }, className: "col-xs-12" }, Y(QW.l ? QW.l() :
+                                        QW.call(null)))))),React.createElement("div",{style:{clear:'both'}},reset_call.l ? reset_call.l() : reset_call.call(null))/*important ! here can add items under the form*/, React.createElement("div", { className: "row screen-only" }, React.createElement("div", { style: { backgroundColor: "#ffffff" }, className: "col-sm-12" }, React.createElement("div", { key: 3, className: "row" }, React.createElement("div", { key: 2, className: "col-sm-10 col-sm-offset-1" }, Y(aX.l ? aX.l() : aX.call(null)))))), Y(uU(0)), function () {
                                             var a = $W.l ? $W.l() : $W.call(null); return gg(React.createElement, "div", M(a) ? EG(rG(C([new m(null, 1, [Rx, new R(null, 1, 5, S, ["screen-only"], null)], null), a]))) : { className: "screen-only" },
                                                 M(a) ? null : new R(null, 2, 5, S, [/*print button*/Y(a)], null))
                                         }(), Y(WW.l ? WW.l() : WW.call(null)), Y(ZW.l ? ZW.l() : ZW.call(null)), Y(YW.l ? YW.l() : YW.call(null))], null))
diff --git a/app/controllers/cancerpredicts_controller.rb b/app/controllers/cancerpredicts_controller.rb
index 776baf5..9e3b40c 100644
--- a/app/controllers/cancerpredicts_controller.rb
+++ b/app/controllers/cancerpredicts_controller.rb
@@ -12,8 +12,8 @@ class CancerpredictsController < ApplicationController
 	categories = OrbitHelper.widget_categories || []
 	locale = OrbitHelper.get_site_locale.to_s
 	@table_str = '<div id="cancer_table"><div id="show_help_modal" class="modal fade"></div>'
-	@table_left_str = '<div id="cancer_table_left">'
-	@table_right_str = '<div id="cancer_table_right">'
+	@table_str_left = '<div id="cancer_table_left">'
+	@table_str_right = '<div id="cancer_table_right">'
 	create_first_field
 	@form_to_show.form_show.each do |num,property|
 		@field_property = {}
@@ -39,19 +39,19 @@ class CancerpredictsController < ApplicationController
 				@table_str_left += '<div style="margin-right: 2.125em;"></div>'
 			end
 			if @field_property["is_num"] == 1
-				@table_str_left += '<input class="num_only" id="'+@field_property["variable"]+'" style="float:left;clear:right;"></input>'
+				@table_str_left += '<input class="num_only" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"></input>'
 			else
 				@table_str_left += '<div id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
 				@field_property["choice_fields"].each do |create_choice|
 					@table_str_left += '<button class="cancer_table_btn  btn btn-default btn-sm">'+create_choice+'</button>'
 					@table_str_left += '<input type="hidden" value="0" name="'+create_choice+'"></input>'
 				end
+				@table_str_left += '</div>'
 			end
 			if @field_property["hint"].to_s != ""
 				@table_str_left +='<div style="color: rgb(104, 104, 104);font-size:0.75em;clear:both;">'+@field_property["hint"]+'</div>'
 			end
 			@table_str_left += '</div><div style="clear:both;"></div>'
-			@table_str_left += '</div>'
 		else
 			@table_str_right += '<div data-key='+num.to_s+'>'
 			break if @field_property["name"] == ""
@@ -65,23 +65,28 @@ class CancerpredictsController < ApplicationController
 				@table_str_right += '<div style="margin-right: 2.125em;"></div>'
 			end
 			if @field_property["is_num"] == 1
-				@table_str_right += '<input class="num_only" id="'+@field_property["variable"]+'" style="float:left;clear:right;"></input>'
+				@table_str_right += '<input class="num_only" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"></input>'
 			else
 				@table_str_right += '<div id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
 				@field_property["choice_fields"].each do |create_choice|
 					@table_str_right += '<button class="cancer_table_btn  btn btn-default btn-sm">'+create_choice+'</button>'
 					@table_str_right += '<input type="hidden" value="0" name="'+create_choice+'"></input>'
 				end
+				@table_str_right += '</div>'
 			end
 			if @field_property["hint"].to_s != ""
 				@table_str_right +='<div style="color: rgb(104, 104, 104);font-size:0.75em;clear:both;">'+@field_property["hint"]+'</div>'
 			end
 			@table_str_right += '</div><div style="clear:both;"></div>'
-			@table_str_right += '</div>'
 		end
 	end
-	@table_str+= (@table_str_right+@table_str_right)
-	@table_str+='</div>'
+	@table_str_left += '</div>'
+	@table_str_right += '</div>'
+	@table_str += (@table_str_left+@table_str_right)
+	@table_str +='<div style="clear:both;"></div>'
+	@submit_btn_str='<button id="cancer_table_submit">'+t('cancerpredict.table.Submit').to_s+'</button>'
+	@reset_btn_str='<button id="cancer_table_reset">'+t('cancerpredict.table.Reset').to_s+'</button>'
+	@table_str += (@submit_btn_str+@reset_btn_str+'</div>')
 	{
       "cancerpredict" => [],
 	  "extras"=>{"table"=> @table_str}
diff --git a/modules/cancerpredict/_cancer_predict_widget.html.erb b/modules/cancerpredict/_cancer_predict_widget.html.erb
index dfe4b0a..9de2038 100644
--- a/modules/cancerpredict/_cancer_predict_widget.html.erb
+++ b/modules/cancerpredict/_cancer_predict_widget.html.erb
@@ -1,31 +1,32 @@
-<script type="text/javascript" src="/assets/jquery.smartmenus.min.js"></script>
-<script type="text/javascript" src="/assets/jquery.smartmenus.bootstrap.min.js"></script>
-<script type="text/javascript" src="/assets/cancer_predict.js"></script>
-{{table}}
+<div>
+	<%= javascript_include_tag "react.js"%>
+	<script type="text/javascript" src="/assets/jquery.smartmenus.min.js"></script>
+	<script type="text/javascript" src="/assets/jquery.smartmenus.bootstrap.min.js"></script>
+	<h3 class="w-cancer-tool__widget-title">
+		<span>{{widget-title}}</span>
+	</h3>
+	<div class="w-cancer-tool  widget-cancerpredict-1">
+	  <div class="w-cancer-tool" data-level="0" data-list="cancerpredict">
+		<div class="w-cancer-tool" data-level="1" data-list="cancerpredict">
+			<div id="app">
+				<div class="loader-overlay">
+					<div class="loader" id="loader-1">&nbsp;</div>
+					<div class="loader-text" id="id-loader-text">Loading...</div>
+				</div>
+			</div>
+		</div>
+	  </div>
+	</div>
+</div>
 <style>
-	.cencer_table_name{
-		display: inline-block;
-		vertical-align: middle;
-		width: 6.25em;
+	.form-group.has-error > :nth-child(3) {
+		border: 3px solid pink !important;
+		border-radius: 5px !important;
+		padding: 2px !important;
 	}
-	.cancer_table_btn{
-	    margin-right: 0.5em;
-	}
-	.cancer_table_btn:last-child{
-		margin-right:auto;
-	}
-	#cancer_table{
-		font-size:0.825em;
-	}
-	input.num_only{
-		color: black;
-		border-top: 0.125em solid rgb(221, 221, 221);
-		width: 4.125em;
-		padding: 0em 0em 0.25em;
-		border-left: 0.125em solid rgb(221, 221, 221);
-		text-align: center;
-		font-size: 0.875em;
-		background-color: rgb(255, 255, 255);
-		height: 2.25em;
+	.form-group > :nth-child(3) {
+		border: 3px solid white !important;
+		border-radius: 5px !important;
+		padding: 2px !important;
 	}
 </style>
\ No newline at end of file
diff --git a/modules/cancerpredict/cancer_predict_index.html.erb b/modules/cancerpredict/cancer_predict_index.html.erb
index dfe4b0a..9b5ec5e 100644
--- a/modules/cancerpredict/cancer_predict_index.html.erb
+++ b/modules/cancerpredict/cancer_predict_index.html.erb
@@ -28,4 +28,29 @@
 		background-color: rgb(255, 255, 255);
 		height: 2.25em;
 	}
+	#cancer_table_left{
+		float:left;
+		width:50%;
+	}
+	#cancer_table_right{
+		float:right;
+		width:50%;
+	}
+	#cancer_table_submit{
+	    margin-left: 1em;
+		float: right;
+		background-color: rgb(210, 105, 0);
+		color: white;
+		border: 0em;
+		padding: 0.125em 0.5em;
+		border-radius: 0.5em;
+	}
+	#cancer_table_reset{
+	    float: right;
+		background-color: rgb(210, 105, 0);
+		color: white;
+		border: 0em;
+		padding: 0.125em 0.5em;
+		border-radius: 0.5em;
+	}
 </style>
\ No newline at end of file