diff --git a/models/cloudbrain.go b/models/cloudbrain.go
index 1124e3470..da6baa169 100755
--- a/models/cloudbrain.go
+++ b/models/cloudbrain.go
@@ -34,6 +34,7 @@ type Cloudbrain struct {
 	ContainerIp string
 	CreatedUnix timeutil.TimeStamp `xorm:"INDEX created"`
 	UpdatedUnix timeutil.TimeStamp `xorm:"INDEX updated"`
+	DeletedAt 	time.Time 		   `xorm:"deleted"`
 	CanDebug	bool			   `xorm:"-"`
 
 	User *User       `xorm:"-"`
@@ -359,3 +360,12 @@ func updateJob(e Engine, job *Cloudbrain) error {
 	_, err := sess.Cols("status", "container_id", "container_ip").Update(job)
 	return err
 }
+
+func DeleteJob(job *Cloudbrain) error {
+	return deleteJob(x, job)
+}
+
+func deleteJob(e Engine, job *Cloudbrain) error {
+	_, err := e.ID(job.ID).Delete(job)
+	return err
+}
diff --git a/routers/repo/cloudbrain.go b/routers/repo/cloudbrain.go
index 14160ec94..0d7937c5d 100755
--- a/routers/repo/cloudbrain.go
+++ b/routers/repo/cloudbrain.go
@@ -253,6 +253,29 @@ func CloudBrainStop(ctx *context.Context) {
 	ctx.Redirect(setting.AppSubURL + ctx.Repo.RepoLink + "/cloudbrain")
 }
 
+func CloudBrainDel(ctx *context.Context) {
+	var jobID = ctx.Params(":jobid")
+	task, err := models.GetCloudbrainByJobID(jobID)
+	if err != nil {
+		ctx.ServerError("GetCloudbrainByJobID failed", err)
+		return
+	}
+
+	if task.Status != string(models.JobStopped) {
+		log.Error("the job(%s) has not been stopped", task.JobName)
+		ctx.ServerError("the job has not been stopped", errors.New("the job has not been stopped"))
+		return
+	}
+
+	err = models.DeleteJob(task)
+	if err != nil {
+		ctx.ServerError("DeleteJob failed", err)
+		return
+	}
+
+	ctx.Redirect(setting.AppSubURL + ctx.Repo.RepoLink + "/cloudbrain")
+}
+
 func downloadCode(repo *models.Repository, codePath string) error {
 	if err := git.Clone(repo.RepoPath(), codePath, git.CloneRepoOptions{}); err != nil {
 		log.Error("Failed to clone repository: %s (%v)", repo.FullName(), err)
diff --git a/routers/routes/routes.go b/routers/routes/routes.go
index 814af1fd9..c7f969e76 100755
--- a/routers/routes/routes.go
+++ b/routers/routes/routes.go
@@ -899,6 +899,7 @@ func RegisterRoutes(m *macaron.Macaron) {
 				m.Get("/debug", reqRepoCloudBrainReader, repo.CloudBrainDebug)
 				m.Post("/commit_image", reqRepoCloudBrainWriter, bindIgnErr(auth.CommitImageCloudBrainForm{}), repo.CloudBrainCommitImage)
 				m.Post("/stop", reqRepoCloudBrainWriter, repo.CloudBrainStop)
+				m.Post("/del", reqRepoCloudBrainWriter, repo.CloudBrainDel)
 			})
 			m.Get("/create", reqRepoCloudBrainWriter, repo.CloudBrainNew)
 			m.Post("/create", reqRepoCloudBrainWriter, bindIgnErr(auth.CreateCloudBrainForm{}), repo.CloudBrainCreate)
diff --git a/templates/repo/cloudbrain/index.tmpl b/templates/repo/cloudbrain/index.tmpl
index 5361db7dd..18c5053e2 100755
--- a/templates/repo/cloudbrain/index.tmpl
+++ b/templates/repo/cloudbrain/index.tmpl
@@ -1,4 +1,176 @@
+<!-- 头部导航栏 -->
 {{template "base/head" .}}
+
+<style>
+    #deletemodel {
+        width: 100%;
+        height: 100%;
+    }
+    /* 弹窗 */
+    
+    #mask {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        filter: alpha(opacity=60);
+        background-color: #777;
+        z-index: 1000;
+        display: none;
+        opacity: 0.8;
+        -moz-opacity: 0.5;
+        padding-top: 100px;
+        color: #000000
+    }
+    
+    #loadingPage {
+        margin: 200px auto;
+        width: 50px;
+        height: 40px;
+        text-align: center;
+        font-size: 10px;
+        display: block;
+    }
+    
+    #loadingPage>div {
+        background-color: green;
+        height: 100%;
+        width: 6px;
+        display: inline-block;
+        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+        animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    }
+    
+    #loadingPage .rect2 {
+        -webkit-animation-delay: -1.1s;
+        animation-delay: -1.1s;
+    }
+    
+    #loadingPage .rect3 {
+        -webkit-animation-delay: -1.0s;
+        animation-delay: -1.0s;
+    }
+    
+    #loadingPage .rect4 {
+        -webkit-animation-delay: -0.9s;
+        animation-delay: -0.9s;
+    }
+    
+    #loadingPage .rect5 {
+        -webkit-animation-delay: -0.8s;
+        animation-delay: -0.8s;
+    }
+    
+    @-webkit-keyframes sk-stretchdelay {
+        0%,
+        40%,
+        100% {
+            -webkit-transform: scaleY(0.4)
+        }
+        20% {
+            -webkit-transform: scaleY(1.0)
+        }
+    }
+    
+    @keyframes sk-stretchdelay {
+        0%,
+        40%,
+        100% {
+            transform: scaleY(0.4);
+            -webkit-transform: scaleY(0.4);
+        }
+        20% {
+            transform: scaleY(1.0);
+            -webkit-transform: scaleY(1.0);
+        }
+    }
+    /* 消息框 */
+    
+    .alert {
+        display: none;
+        position: fixed;
+        width: 100%;
+        z-index: 1001;
+        padding: 15px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        text-align: center;
+        font-weight: bold;
+    }
+    
+    .alert-success {
+        color: #3c763d;
+        background-color: #dff0d8;
+        border-color: #d6e9c6;
+    }
+    
+    .alert-info {
+        color: #31708f;
+        background-color: #d9edf7;
+        border-color: #bce8f1;
+    }
+    
+    .alert-warning {
+        color: #8a6d3b;
+        background-color: #fcf8e3;
+        border-color: #faebcc;
+    }
+    
+    .alert-danger {
+        color: #a94442;
+        background-color: #f2dede;
+        border-color: #ebccd1;
+    }
+    
+    .pusher {
+        width: calc(100% - 260px);
+        box-sizing: border-box;
+    }
+    /* 弹窗 (background)  */
+    
+    #imageModal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+    /* 弹窗内容 */
+    
+    .modal-content {
+        background-color: #fefefe;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 30%;
+    }
+    /* 关闭按钮 */
+    
+    .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+    }
+    
+    .close:hover,
+    .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }
+    
+    .dis {
+        margin-bottom: 20px;
+    }
+</style>
+
 <!-- 弹窗 -->
 <div id="mask">
     <div id="loadingPage">
@@ -15,22 +187,33 @@
 
 <div class="repository release dataset-list view">
     {{template "repo/header" .}}
+    <!-- 列表容器 -->
     <div class="ui container">
-        <div class="ui three column stackable grid">
+
+        <!-- 中间云脑和新建任务按钮 -->
+        <div class="ui three column stack able grid">
             <div class="column">
                 <h2>{{.i18n.Tr "repo.cloudbrain"}}</h2>
             </div>
+
             <div class="column">
             </div>
+
             <div class="column right aligned">
                 {{if .Permission.CanWrite $.UnitTypeCloudBrain}}
                 <a class="ui green button" href="{{.RepoLink}}/cloudbrain/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}}
             </div>
         </div>
+
+        <!-- 中间分割线 -->
         <div class="ui divider"></div>
+
+        <!-- 中下列表展示区 -->
         <div class="ui grid">
             <div class="row">
                 <div class="ui sixteen wide column">
+
+                    <!-- 排序区 -->
                     <div class="ui sixteen wide column">
                         <div class="ui two column stackable grid">
                             <div class="column">
@@ -38,70 +221,96 @@
                             <div class="column right aligned">
                                 <div class="ui right dropdown type jump item">
                                     <span class="text">
-										{{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
-									</span>
+                                                    {{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
+                                                </span>
                                 </div>
                             </div>
                         </div>
                     </div>
+
+                    <!-- 任务展示 -->
                     <div class="dataset list">
                         {{range .Tasks}}
                         <div class="ui grid item">
                             <div class="row">
+
+                                <!-- 任务名 -->
                                 <div class="five wide column">
                                     <a class="title" href="{{$.Link}}/{{.JobID}}">
                                         <span class="fitted">{{svg "octicon-tasklist" 16}}</span>
                                         <span class="fitted">{{.JobName}}</span>
                                     </a>
                                 </div>
+
+                                <!--任务状态 -->
                                 <div class="three wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
                                     {{.Status}}
                                 </div>
+
+                                <!-- 任务创建时间 -->
                                 <div class="three wide column">
                                     <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
                                 </div>
+
+                                <!-- 查看 -->
                                 <div class="one wide column">
                                     <span class="ui text center clipboard">
-											<a class="title" href="{{$.Link}}/{{.JobID}}">
-												<span class="fitted">查看</span>
+                                                    <a class="title" href="{{$.Link}}/{{.JobID}}">
+                                                        <span class="fitted">查看</span>
                                     </a>
                                     </span>
                                 </div>
+
+                                <!-- 删除镜像 -->
+                                <div class="one wide column">
+                                    <span class="ui text center clipboard">
+                                                    <form id="delForm-{{.JobID}}" action="{{if ne .Status "STOPPED"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
+                                                        {{$.CsrfTokenHtml}}
+                                                        <!-- <a class="fitted" onclick="document.getElementById('delForm-{{.JobID}}').submit();" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a> -->
+                                                        <a class="fitted" onclick="assertDelete(this)" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a>
+                                                    </form>
+                                                </span>
+                                </div>
+
+                                <!-- 调试 -->
                                 <div class="one wide column">
                                     <span class="ui text center clipboard">
-											<a class="title" href="{{if not .CanDebug}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/debug{{end}}" style="{{if not .CanDebug}}color:#CCCCCC{{end}}">
-												<span class="fitted">调试</span>
+                                                    <a class="title" href="{{if not .CanDebug}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/debug{{end}}" style="{{if not .CanDebug}}color:#CCCCCC{{end}}">
+                                                        <span class="fitted">调试</span>
                                     </a>
                                     </span>
                                 </div>
+
+                                <!-- 停止 -->
                                 <div class="one wide column">
                                     <span class="ui text center clipboard">
-											<form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
-												{{$.CsrfTokenHtml}}
-												<a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
-											</form>
-										</span>
+                                                    <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
+                                                        {{$.CsrfTokenHtml}}
+                                                        <a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
+                                                    </form>
+                                                </span>
                                 </div>
 
                                 <!-- 接收结果 -->
                                 <iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
-
-                                <!-- 打开弹窗按钮 -->
                                 <a class="imageBtn" style="{{if not .CanDebug}}color:#CCCCCC;cursor:pointer;pointer-events:none;{{end}}; font-size:16px; font-weight:bold" value="{{.CanDebug}}">提交镜像</a>
-                                <!-- 弹窗 -->
-                                <div id="imageModal" class="modal">
-                                    <!-- 弹窗内容 -->
+
+                                <!-- 镜像列表弹窗 -->
+                                <div id="imageModal" class="modal" style="display: none;">
                                     <div class="modal-content">
                                         <span class="close">&times;</span>
-                                        <!-- target="_parent" -->
+
+                                        <!-- 表格 -->
                                         <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post" target="iframeContent">
                                             {{$.CsrfTokenHtml}}
                                             <p>提交任务镜像</p>
                                             <div class="ui divider"></div>
+
                                             <div class="inline required field dis">
                                                 <label>镜像标签：</label>
                                                 <input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="255" style="width:75%">
                                             </div>
+
                                             <div class="inline required field" style="position:relative;height:180px;">
                                                 <div style="height:20px;width:75px;">
                                                     <label>镜像描述：</label>
@@ -110,28 +319,87 @@
                                                     <textarea name="description" rows="10" style="width:100%"></textarea>
                                                 </div>
                                             </div>
+
                                             <div class="ui divider"></div>
+
                                             <div class="inline field">
                                                 <label></label>
                                                 <button class="ui green button" onclick="showmask()">
-                                                    {{$.i18n.Tr "repo.cloudbrain.commit_image"}}
-                                                </button>
+                                                                {{$.i18n.Tr "repo.cloudbrain.commit_image"}}
+                                                            </button>
                                             </div>
                                         </form>
                                     </div>
                                 </div>
+
                             </div>
                         </div>
                         {{end}} {{template "base/paginate" .}}
                     </div>
+
                 </div>
             </div>
         </div>
+
+    </div>
+
+</div>
+</div>
+
+</div>
+
+<!-- 确认模态框 -->
+<div id="deletemodel">
+    <div class="ui basic modal">
+        <div class="ui icon header">
+            <i class="trash icon"></i> 删除任务
+        </div>
+
+        <div class="content">
+            <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
+        </div>
+        <div class="actions">
+            <div class="ui red basic inverted cancel button">
+                <i class="remove icon"></i> 取消操作
+            </div>
+            <div class="ui green basic inverted ok button">
+                <i class="checkmark icon"></i> 确定操作
+            </div>
+        </div>
     </div>
 </div>
+
+</div>
 {{template "base/footer" .}}
 
 <script>
+    // 删除时用户确认
+    function assertDelete(obj) {
+        if (obj.style.color == "rgb(204, 204, 204)") {
+            return
+        } else {
+            var delId = obj.parentNode.id
+            flag = 1;
+            $('.ui.basic.modal')
+                .modal({
+                    onDeny: function() {
+                        flag = false
+                    },
+                    onApprove: function() {
+                        document.getElementById(delId).submit()
+                        flag = true
+                    },
+                    onHidden: function() {
+                        if (flag == false) {
+                            $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
+                        }
+                    }
+                })
+                .modal('show')
+        }
+    }
+
+    // 加载任务状态
     $(document).ready(function() {
         $(".job-status").each((index, job) => {
             const jobID = job.dataset.jobid;
@@ -139,6 +407,7 @@
             if (job.textContent.trim() == 'STOPPED') {
                 return
             }
+
             $.get(`/api/v1/repos/${repoPath}/cloudbrain/${jobID}`, (data) => {
                 const jobID = data.JobID
                 const status = data.JobStatus
@@ -173,6 +442,13 @@
         }
     }
 
+    // 在用户点击其他地方时，关闭弹窗
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+
     // 显示弹窗，弹出相应的信息
     function showmask() {
         $('#imageModal').css('display', 'none')
@@ -191,167 +467,4 @@
             }
         })
     }
-</script>
-
-<style>
-    /* 弹窗 */
-    
-    #mask {
-        position: fixed;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        filter: alpha(opacity=60);
-        background-color: #777;
-        z-index: 1000;
-        display: none;
-        opacity: 0.8;
-        -moz-opacity: 0.5;
-        padding-top: 100px;
-        color: #000000
-    }
-    
-    #loadingPage {
-        margin: 200px auto;
-        width: 50px;
-        height: 40px;
-        text-align: center;
-        font-size: 10px;
-        display: block;
-    }
-    
-    #loadingPage>div {
-        background-color: green;
-        height: 100%;
-        width: 6px;
-        display: inline-block;
-        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
-        animation: sk-stretchdelay 1.2s infinite ease-in-out;
-    }
-    
-    #loadingPage .rect2 {
-        -webkit-animation-delay: -1.1s;
-        animation-delay: -1.1s;
-    }
-    
-    #loadingPage .rect3 {
-        -webkit-animation-delay: -1.0s;
-        animation-delay: -1.0s;
-    }
-    
-    #loadingPage .rect4 {
-        -webkit-animation-delay: -0.9s;
-        animation-delay: -0.9s;
-    }
-    
-    #loadingPage .rect5 {
-        -webkit-animation-delay: -0.8s;
-        animation-delay: -0.8s;
-    }
-    
-    @-webkit-keyframes sk-stretchdelay {
-        0%,
-        40%,
-        100% {
-            -webkit-transform: scaleY(0.4)
-        }
-        20% {
-            -webkit-transform: scaleY(1.0)
-        }
-    }
-    
-    @keyframes sk-stretchdelay {
-        0%,
-        40%,
-        100% {
-            transform: scaleY(0.4);
-            -webkit-transform: scaleY(0.4);
-        }
-        20% {
-            transform: scaleY(1.0);
-            -webkit-transform: scaleY(1.0);
-        }
-    }
-    /* 消息框 */
-    
-    .alert {
-        display: none;
-        position: fixed;
-        width: 100%;
-        z-index: 1001;
-        padding: 15px;
-        border: 1px solid transparent;
-        border-radius: 4px;
-        text-align: center;
-        font-weight: bold;
-    }
-    
-    .alert-success {
-        color: #3c763d;
-        background-color: #dff0d8;
-        border-color: #d6e9c6;
-    }
-    
-    .alert-info {
-        color: #31708f;
-        background-color: #d9edf7;
-        border-color: #bce8f1;
-    }
-    
-    .alert-warning {
-        color: #8a6d3b;
-        background-color: #fcf8e3;
-        border-color: #faebcc;
-    }
-    
-    .alert-danger {
-        color: #a94442;
-        background-color: #f2dede;
-        border-color: #ebccd1;
-    }
-    
-    .modal {
-        display: none;
-        /* 默认隐藏 */
-        position: fixed;
-        /* 固定定位 */
-        z-index: 1;
-        /* 设置在顶层 */
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        background-color: rgb(0, 0, 0);
-        background-color: rgba(0, 0, 0, 0.4);
-    }
-    /* 弹窗内容 */
-    
-    .modal-content {
-        background-color: #fefefe;
-        margin: 15% auto;
-        padding: 20px;
-        border: 1px solid #888;
-        width: 25%;
-    }
-    /* 关闭按钮 */
-    
-    .close {
-        color: #aaa;
-        float: right;
-        font-size: 28px;
-        font-weight: bold;
-    }
-    
-    .close:hover,
-    .close:focus {
-        color: black;
-        text-decoration: none;
-        cursor: pointer;
-    }
-    
-    .dis {
-        margin-bottom: 20px;
-    }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/templates/repo/cloudbrain/new.tmpl b/templates/repo/cloudbrain/new.tmpl
index a94bf1fe2..dff4ca646 100755
--- a/templates/repo/cloudbrain/new.tmpl
+++ b/templates/repo/cloudbrain/new.tmpl
@@ -81,19 +81,7 @@
         }
     }
 </style>
-<script>
-    // 点击按钮后遮罩层显示
-    function showmask() {
-        document.getElementById("mask").style.display = "block"
-    }
 
-    // 页面加载完毕后遮罩层隐藏
-    document.onreadystatechange = function() {
-        if (document.readyState === "complete") {
-            document.getElementById("mask").style.display = "none"
-        }
-    }
-</script>
 <div id="mask">
     <div id="loadingPage">
         <div class="rect1"></div>
@@ -122,7 +110,7 @@
                     <br>
                     <div class="inline required field">
                         <label>镜像</label>
-                        <select id="cloudbrain_image" placeholder="选择镜像" style='width:385px' name="image">
+                        <select class="ui search dropdown" id="cloudbrain_image" placeholder="选择镜像" style='width:385px' name="image">
               {{range .images}}
                 <option name="image" value="{{.Place}}">{{.PlaceView}}</option>
               {{end}}
@@ -130,7 +118,7 @@
                     </div>
                     <div class="inline required field">
                         <label>数据集(只有zip格式的数据集才能发起云脑任务)</label>
-                        <select id="cloudbrain_dataset" placeholder="选择数据集" style='width:385px' name="attachment">
+                        <select id="cloudbrain_dataset" class="ui search dropdown" placeholder="选择数据集" style='width:385px' name="attachment">
               {{range .attachments}}
                 <option name="attachment" value="{{.UUID}}">{{.Attachment.Name}}</option>
               {{end}}
@@ -169,3 +157,17 @@
     </div>
 </div>
 {{template "base/footer" .}}
+
+<script>
+    // 点击按钮后遮罩层显示
+    function showmask() {
+        document.getElementById("mask").style.display = "block"
+    }
+
+    // 页面加载完毕后遮罩层隐藏
+    document.onreadystatechange = function() {
+        if (document.readyState === "complete") {
+            document.getElementById("mask").style.display = "none"
+        }
+    }
+</script>
\ No newline at end of file