diff --git a/app/assets/javascripts/cancer_predict.js b/app/assets/javascripts/cancer_predict.js
index f9af71b..882cb45 100644
--- a/app/assets/javascripts/cancer_predict.js
+++ b/app/assets/javascripts/cancer_predict.js
@@ -71,54 +71,84 @@ $(document).ready(function(){
 			};
 		};
 	});
-	$('.cancer_table_btn').click(function(){
+	$('.cancer_table_btn').off('click').on('click',function(){
 		var index = $(this).index()/2;
-		$(this).parent().find('>input').attr('value',0);
-		$(this).parent().find('>input').eq(index).attr('value',1);
-		$(this).parent().find('>button').removeClass('active');
+		try{
+			$(this).parent().find('>input').attr('value',0);
+			$(this).parent().find('>input').eq(index).attr('value',1);
+			$(this).parent().find('>button').removeClass('active');
+			$(this).parent().removeClass('cancertable_empty');
+		}catch{};
 		$(this).addClass('active');
-		$(this).parent().removeClass('cancertable_empty');
 	});
 	$('#cancer_table_reset').click(function(){
 		$('.cancer_table_btn').removeClass('active');
 		$('.cancer-btn-group input').attr('value',0);
 		$('.num_only').val('');
-		$('.cancer_form_field').removeClass('cancertable_empty');
+		$('#cancer_table .cancer_form_field').removeClass('cancertable_empty');
 	});
 	$('#cancer_table_submit').click(function(){
 		var flag;
 		flag = 1;
-		for(var i = 0;i < $('.cancer_form_field').length;i++){
-			if($('.cancer_form_field').eq(i).hasClass('num_only')){
-				if($('.cancer_form_field').eq(i).val()==""){
+		for(var i = 0;i < $('#cancer_table .cancer_form_field').length;i++){
+			if($('#cancer_table .cancer_form_field').eq(i).hasClass('num_only')){
+				if($('#cancer_table .cancer_form_field').eq(i).val()==""){
 					flag = 0;
-					$('.cancer_form_field').eq(i).addClass('cancertable_empty');
+					$('#cancer_table .cancer_form_field').eq(i).addClass('cancertable_empty');
 				}else{
-					$('.cancer_form_field').eq(i).removeClass('cancertable_empty');
+					$('#cancer_table .cancer_form_field').eq(i).removeClass('cancertable_empty');
 				};
 			}else{
-				if($('.cancer_form_field').eq(i).find('[value="1"]').length == 0){
+				if($('#cancer_table .cancer_form_field').eq(i).find('[value="1"]').length == 0){
 					flag = 0;
-					$('.cancer_form_field').eq(i).addClass('cancertable_empty');
+					$('#cancer_table .cancer_form_field').eq(i).addClass('cancertable_empty');
 				}else{
-					$('.cancer_form_field').eq(i).removeClass('cancertable_empty');
+					$('#cancer_table .cancer_form_field').eq(i).removeClass('cancertable_empty');
 				}
 			};
 		}
 		if(flag == 1){
 			var post_json= {};
-			for(var i = 0;i < $('.cancer_form_field').length;i++){
-				var name = $('.cancer_form_field').eq(i).attr('id')
-				if($('.cancer_form_field').eq(i).hasClass('num_only'))
-					post_json[name] = $('.cancer_form_field').eq(i).val();
+			for(var i = 0;i < $('#cancer_table .cancer_form_field').length;i++){
+				var name = $('#cancer_table .cancer_form_field').eq(i).attr('id')
+				if($('#cancer_table .cancer_form_field').eq(i).hasClass('num_only'))
+					post_json[name] = $('#cancer_table .cancer_form_field').eq(i).val();
 				else{
-					var index = ($('.cancer_form_field').eq(i).find('[value="1"]').index()+1)/2;
+					var index = ($('#cancer_table .cancer_form_field').eq(i).find('[value="1"]').index()+1)/2;
 					post_json[name] = index;
 				};
 			};
 			var result = $.post("/cancerpredictResult",{"data":post_json});
 			result.done(function(){
-				$('#result_table_content').html(result.responseJSON.table);
+				var load_heml = $('#result_table_content').html(result.responseJSON.table);
+				load_heml.ready(function(){
+					$('#result_table_content .cancer_years').eq(0).addClass('active');
+					$('.cancer_table_btn').off('click').on('click',function(){
+						var index = $(this).index()/2;
+						try{
+							$(this).parent().find('>input').attr('value',0);
+							$(this).parent().find('>input').eq(index).attr('value',1);
+							$(this).parent().find('>button').removeClass('active');
+							$(this).parent().removeClass('cancertable_empty');
+						}catch{};
+						$(this).addClass('active');
+					});
+				});
+				load_heml = $('#result_text_content').html(result.responseJSON.texts);
+				load_heml.ready(function(){
+					$('#result_text_content .cancer_years').eq(0).addClass('active');
+					$('.cancer_table_btn').off('click').on('click',function(){
+						var index = $(this).index()/2;
+						try{
+							$(this).parent().find('>input').attr('value',0);
+							$(this).parent().find('>input').eq(index).attr('value',1);
+							$(this).parent().find('>button').removeClass('active');
+							$(this).parent().removeClass('cancertable_empty');
+						}catch{};
+						$(this).addClass('active');
+						$('.surgery_year').html($(this).html());
+					});
+				});
 			})
 		}
 	});
@@ -130,10 +160,19 @@ $(document).ready(function(){
 	};
 	$('.result_tab').click(function(){
 		var index = $(this).attr('index');
+		$('.result_tab').removeClass('active');
+		$(this).addClass('active');
 		$('.result_content').css('display','none');
 		$('.result_content[index="'+index+'"]').css('display','block');
 	})
-	$('.num_only').focus
+	$('.num_only').keypress(function(event){
+		console.log(event.keyCode)
+		return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false);
+	});
+	/*$('.num_only').attr("onpaste","{console.log(clipboardData.getData('text'));return !event.clipboardData.getData('text').match(/\D/)}");*/
+	/*$('.num_only').keyup(function(){
+		$(this).val($(this).val().replace(/\D/g,''));
+	});*/
 	for(var i=0;i<$('.num_only').length;i++)
 		$('.num_only').eq(i).data('range')
 });
diff --git a/app/controllers/cancerpredicts_controller.rb b/app/controllers/cancerpredicts_controller.rb
index d38125e..60ea65e 100644
--- a/app/controllers/cancerpredicts_controller.rb
+++ b/app/controllers/cancerpredicts_controller.rb
@@ -9,7 +9,7 @@ class CancerpredictsController < ApplicationController
     uid = OrbitHelper.params[:uid] rescue ""
 	tags = OrbitHelper.widget_tags
 	categories = OrbitHelper.widget_categories || []
-	locale = OrbitHelper.get_site_locale.to_s
+	create_first_field
 	result = {:result=>"123"}
 	result['age1'] = -(params['data']['age'].to_f/100)**(-0.5)
 	result['age2'] = -(params['data']['age'].to_f/100)**(-0.5)*Math.log(params['data']['age'].to_f/100,10)
@@ -58,8 +58,37 @@ class CancerpredictsController < ApplicationController
 	result['lpv'] = ((result['age1']-0.7276655)*(-10.87)+(result['age2']-0.4540707)*8.968+(result['size1']-0.643632)*0.7678+(result['nposit']-1.346932)*0.5339+
 					result['grade_2']*0.4795+result['grade_3']*0.818+result['subtype_HER2']*0.1806+result['subtype_triple']*0.6457+result['pstage_2']*0.5311+
 					result['pstage_3']*1.134+result['pstage_4']*2.172+result['lvi_yes']*0.3321-0.04 rescue 'error')
-	result['table'] = '<a id="cancer_table_texts">此分析微針對已接受手術後病人，下表為此病人分別在第1年、3及5年下，根據選定的術後治療所估計的存活率</a>'
-	#result['table'] += 
+	result['table'] = '<p id="cancer_table_texts">此分析微針對已接受手術後病人，下表為此病人分別在第1年、3及5年下，根據選定的術後治療所估計的存活率</p>'
+	result['table'] += '<a>第</a>'
+	@years = ['1','3','5']
+	result['years'] = @years
+	@years.each{|year| result['table'] += ('<button class="cancer_years cancer_table_btn  btn btn-default btn-sm">'+year+'</button>')}
+	result['table'] += '<a>年</a>'
+	@table_head = (I18n.locale.to_s == "zh_tw") ? ['治療','額外治療效益','總生存率(%)'] :['Treatment','Additional Benefit','Overall Survival(%)']
+	@therapy_choices = (I18n.locale.to_s == "zh_tw") ? ['純手術'] :['Treatment']
+	@form_to_show.form_show_in_result.values.each{|choice| @therapy_choices.push choice["name"][I18n.locale.to_s]}
+	@therapy_names = ['Treatment']
+	@form_to_show.form_show_in_result.values.each{|choice| @therapy_names.push choice["variable"]}
+	result['table'] += '<table><thead><tr>'
+	@table_head.each_with_index{|head,index| result['table'] += ('<th class="cancer_th">' + head + '</th>')}
+	result['table'] += '</tr></thead><tbody>'
+	@therapy_choices.each_with_index do |choice,i|
+		result['table'] += '<tr>'
+		@table_head.each_with_index do |head,index|
+			if index == 0
+				result['table'] += ('<td class="cancer_td '+@therapy_names[i].to_s+'">' + choice + '</td>')
+			else
+				result['table'] += ('<td class="cancer_td">' + '-' + '</td>')
+			end
+		end
+		result['table'] += '</tr>'
+	end
+	result['texts'] = '<a>此研究分析來自已接受根除性手術後之婦女所得之結果，根據您所輸入的資訊以及治療方式，</a>'+'<div style="clear:both;"></div>'+'<a>在術後第</a>'
+	@years.each{|year| result['texts'] += ('<button class="cancer_years cancer_table_btn  btn btn-default btn-sm">'+year+'</button>')}
+	result['texts'] += '<a>年</a>，'
+	@servive_ratio = Math.exp(-0.001476145)**(Math.exp((result['lpv'])))
+	result['texts'] += ('<a>100 位只接受根除性手術的婦女中，有 '+ '<a class="survive_person">'+@servive_ratio.round.to_s+'</a>'+'<a> 位婦女，術後 </a>'+'<a class="surgery_year">'+@years[0].to_s+'</a>'+'<a>年仍為存活</a>')
+	result['texts'] += '<div class="extra-text" style="display:none;"><a>'+'，此外'+'<a></div>'
 	result = result.merge(params)
 	render :json=> result
   end
@@ -67,7 +96,6 @@ class CancerpredictsController < ApplicationController
 	uid = OrbitHelper.params[:uid] rescue ""
 	tags = OrbitHelper.widget_tags
 	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_str_left = '<div id="cancer_table_left">'
 	@table_str_right = '<div id="cancer_table_right">'
@@ -96,7 +124,7 @@ 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 cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"></input><button class="btn-sub"></button><button class="btn-add"></button>'
+				@table_str_left += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'" onkeyup="value=value.replace(/[^\d]/g,\'\') "onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\d]/g,\'\'))"></input><button class="btn-sub"></button><button class="btn-add"></button>'
 			else
 				@table_str_left += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
 				@field_property["choice_fields"].each do |create_choice|
@@ -122,7 +150,7 @@ 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 cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"></input><button class="btn-sub"></button><button class="btn-add"></button>'
+				@table_str_right += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'" onkeyup="value=value.replace(/[^\d]/g,\'\') "onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\d]/g,\'\'))"></input><button class="btn-sub"></button><button class="btn-add"></button>'
 			else
 				@table_str_right += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
 				@field_property["choice_fields"].each do |create_choice|
@@ -132,7 +160,7 @@ class CancerpredictsController < ApplicationController
 				@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>'
+				@table_str_right +='<div class="hint-texts">'+@field_property["hint"]+'</div>'
 			end
 			@table_str_right += '</div><div style="clear:both;"></div>'
 		end
@@ -141,17 +169,17 @@ class CancerpredictsController < ApplicationController
 	@table_str_right += '</div>'
 	@table_str += (@table_str_left+@table_str_right)
 	@table_str +='<div style="clear:both;"></div>'
-	@table_result_str = '<div id="cancer_predict_result" style="display:block;"><span class="result_title">'+t("cancerpredict.table.result").to_s+'</span><div style="clear:both;"></div>'
-	@tab_name = ['table','curve','text']
+	@table_result_str = '<div id="cancer_predict_result_block" style="display:block;"><div id="cancer_predict_result"><span class="result_title">'+t("cancerpredict.table.result").to_s+'</span><div style="clear:both;"></div>'
+	@tab_name = ['table','text']
 	@table_result_str += '<div id="result_contents"><div class="result_tab_group">'
-	@tab_name.each{|name| @table_result_str += '<div id="result_'+name+'_tab" class="result_tab"><a>'+t("cancerpredict.table."+name).to_s+'</a></div><div style="clear:both;"></div>'}
+	@tab_name.each_with_index{|name,index| @table_result_str += ('<div id="result_'+name+'_tab" class="result_tab'+((index != 0) ? "" : " active")+'"><a>'+t("cancerpredict.table."+name).to_s+'</a></div><div style="clear:both;"></div>')}
 	@table_result_str += '</div><div class="result_content_group">'
 	@tab_name.each{|name| @table_result_str += '<div id="result_'+name+'_content" class="result_content"><a>'+'no content'+'</a></div>'}
 	@table_result_str += '</div></div></div>'
 	@table_button = '<div id="cancer_table_button_group">'
 	@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_button += (@submit_btn_str+@reset_btn_str+'<div style="clear:both;"></div></div>')
+	@table_button += (@submit_btn_str+@reset_btn_str+'<div style="clear:both;"></div></div></div>')
 	@table_result_choice_fileds = '<div id="cancer_table_right_result">' if @form_to_show.form_result_is_right == 1
 	@table_result_choice_fileds = '<div id="cancer_table_left_result">' if @form_to_show.form_result_is_right == 0
 	@table_result_choice_fileds += '<span class="result_title">'+t('cancerpredict.table.Therapy_choice').to_s+'</span><div style="clear:both;"></div>'
@@ -189,12 +217,12 @@ class CancerpredictsController < ApplicationController
 			@table_result_choice_fileds += '</div>'
 		end
 		if @field_property["hint"].to_s != ""
-			@table_result_choice_fileds +='<div style="color: rgb(104, 104, 104);font-size:0.75em;clear:both;">'+@field_property["hint"]+'</div>'
+			@table_result_choice_fileds +='<div class="hint-texts">'+@field_property["hint"]+'</div>'
 		end
 		@table_result_choice_fileds += '</div><div style="clear:both;"></div>'
 	end
-	@table_result_choice_fileds += '</div></div>'
-	@table_str += (@table_button+@table_result_str+@table_result_choice_fileds+'<div style="clear:both;"></div></div>')
+	@table_result_choice_fileds += '</div></div></div>'
+	@table_str += (@table_button+@table_result_str+@table_result_choice_fileds+'<div style="clear:both;"></div>')
 	{
       "cancerpredict" => [],
 	  "extras"=>{"table"=> @table_str}
@@ -204,7 +232,6 @@ class CancerpredictsController < ApplicationController
 	uid = OrbitHelper.params[:uid] rescue ""
 	tags = OrbitHelper.widget_tags
 	categories = OrbitHelper.widget_categories || []
-	locale = OrbitHelper.get_site_locale.to_s
   end
   def create_first_field
 	if Cancerpredictfields.where("title"=>(@app_title + "_back")).take_while{true}.count == 0
diff --git a/modules/cancerpredict/cancer_predict_index.html.erb b/modules/cancerpredict/cancer_predict_index.html.erb
index ee561c0..263b22e 100644
--- a/modules/cancerpredict/cancer_predict_index.html.erb
+++ b/modules/cancerpredict/cancer_predict_index.html.erb
@@ -18,7 +18,7 @@
 		border-color: #5d7ca2;
 		font-weight: 600;
 	}
-	.cancer_table_btn:last-child{
+	.cancer_table_btn::last-of-type{
 		margin-right:auto;
 	}
 	#cancer_table{
@@ -116,7 +116,7 @@
 		padding-top: 2em;
 	}
 	#choice_fields{
-		padding: 2em 0 0 1em;
+		padding: 2em 0 0 calc(20% - 1.625em);
 	}
 	.result_tab:hover{
 		background: #d16801;
@@ -124,6 +124,12 @@
 		padding: 0.8em 0.125em 0.5em 1em;
 		margin-left: -0.5em;
 	}
+	.result_tab.active{
+		background: #d16801;
+		background: linear-gradient(135deg, transparent 0.3em, #d16801 0);
+		padding: 0.8em 0.125em 0.5em 1em;
+		margin-left: -0.5em;
+	}
 	.result_tab > a{
 		writing-mode: vertical-lr;
 		-webkit-writing-mode: vertical-lr;
@@ -157,10 +163,61 @@
 		border: 0.125em solid #c0cbdd;
 		padding: 0.5em;
 	}
-	.result_content:first-child{
+	.result_content:first-of-type{
 		display: block;
 	}
 	.result_content  a{
 		color: #5d7ca2;
 	}
+	.result_content  p{
+		color: #5d7ca2;
+	}
+	.cancer_years{
+		float:left;
+		color: #5d7ca2;
+		background-color: #fff;
+		border-color: #5d7ca2;
+		border-width: 0.125em;
+		margin: 0em;
+	}
+	.cancer_years:first-of-type{
+		margin-left: 1em;
+	}
+	.cancer_years:last-of-type{
+		margin-right: 1em;
+	}
+	.cancer_form_field{
+		margin-left: 1em;
+	}
+	#result_table_content a{
+		float:left;
+	}
+	.hint-texts{
+		color: rgb(104, 104, 104);
+		font-size: 0.75em;
+		clear: both;
+		padding: 0.5em 0;
+	}
+	#result_text_content a{
+		float:left;
+	}
+	#result_table_content table{
+		clear: both;
+		width:100%;
+	}
+	.cancer_th{
+		color: white;
+		background-color: #003d79;
+		border-right: 0.375em solid white;
+		border-top: 0.375em solid white;
+	}
+	.cancer_td {
+		background-color: #e9eaf5;
+		border-right: 0.375em solid white;
+		border-top: 0.375em solid white;
+	}
+	#cancer_predict_result_block{
+		display:block;
+		font-size: 0.825em;
+	}
 </style>
\ No newline at end of file