diff --git a/app/helpers/volume_helper.rb b/app/helpers/volume_helper.rb
index 23af334..bd50689 100644
--- a/app/helpers/volume_helper.rb
+++ b/app/helpers/volume_helper.rb
@@ -13,7 +13,7 @@ module VolumeHelper
         html << "<div class='x_panel'>"
         html << "<div class='x_title'>"
         # left title
-        html << "<h2>Infomation <small>#{volume['Volume Name']}</small></h2>"
+        html << "<h2 value = '#{volume['Volume name'].delete(' ')}'>Infomation <small>#{volume['Volume Name']}</small></h2>"
         # right title
         html << "<ul class='nav navbar-right panel_toolbox'>"
         html << "<li><a class='collapse-link'>"
@@ -48,7 +48,7 @@ module VolumeHelper
         html << "</div>"
         # buttons
         if volume["Mount State"] == "mounted"
-            html << "<a class='btn btn-app' href='/volume/unmount/#{volume['Volume Name'].delete(' ')}'><i class='fa fa-upload'></i> Unmount</a>"
+            html << "<button class='btn_mount btn btn-app' value='#{index}'><i class='fa fa-upload'></i> Unmount</button>"
         elsif volume["Status"] == " Started"
             html << "<a class='btn btn-app' href='/volume/stop/#{volume['Volume Name'].delete(' ')}'>"
             html << "<i class='fa fa-pause' style='color:#d9534f;'></i>"
diff --git a/app/views/volume/index.html.erb b/app/views/volume/index.html.erb
index 9b89811..c52836a 100644
--- a/app/views/volume/index.html.erb
+++ b/app/views/volume/index.html.erb
@@ -241,3 +241,94 @@ $(document).on("click", "#mount_table_div .chupper", function(){
 })
 </script>
 <!-- /File manager functions -->
+
+<script>
+$(document).on("click", ".btn_mount", function(){
+    var index = $(this).val();
+    var volume_name = $(this).parents('h2').val();//.eq(index).val();
+    
+    console.log("read volume name for mount");
+
+    $.ajax({
+        method: "POST",
+        url: "/volume/mount",
+        data: { volume_name : volume_name, index : index },
+        success  : function(result){
+            $(".btn_mount").empty();
+            $(".btn_mount").append(result.volume_info);
+            
+            console.log("mount success");
+        }
+    })
+})
+</script>
+<!-- /Mount click functions -->
+
+<script>
+$(document).on("click", ".btn_unmount", function(){
+    var index = $(this).val();
+    var volume_name = $(this).parents('h2').val();//.eq(index).val();
+    
+    console.log("read volume name for unmount");
+
+    $.ajax({
+        method: "POST",
+        url: "/volume/unmount",
+        data: { volume_name : volume_name, index : index },
+        success  : function(result){
+            $(".btn_unmount").empty();
+            $(".btn_unmount").append(result.volume_info);
+            
+            console.log("unmount success");
+
+        }
+    })
+})
+</script>
+<!-- /UnMount click functions -->
+
+<script>
+$(document).on("click", ".btn_stop", function(){
+    var index = $(this).val();
+    var volume_name = $(this).parents('h2').val();//.eq(index).val();
+    
+    console.log("read volume name for stop");
+
+    $.ajax({
+        method: "POST",
+        url: "/volume/stop",
+        data: { volume_name : volume_name, index : index },
+        success  : function(result){
+            $(".btn_stop").empty();
+            $(".btn_stop").append(result.volume_info);
+            
+            console.log("stop success");
+
+        }
+    })
+})
+</script>
+<!-- /stop click functions -->
+
+<script>
+$(document).on("click", ".btn_start", function(){
+    var index = $(this).val();
+    var volume_name = $(this).parents('h2').val();//.eq(index).val();
+    
+    console.log("read volume name for start");
+
+    $.ajax({
+        method: "POST",
+        url: "/volume/start",
+        data: { volume_name : volume_name, index : index },
+        success  : function(result){
+            $(".btn_start").empty();
+            $(".btn_start").append(result.volume_info);
+            
+            console.log("start success");
+
+        }
+    })
+})
+</script>
+<!-- /start click functions -->
\ No newline at end of file