diff --git a/src/main/resources/public/css/tasks.css b/src/main/resources/public/css/tasks.css
index 3b6f671..2f42db5 100644
--- a/src/main/resources/public/css/tasks.css
+++ b/src/main/resources/public/css/tasks.css
@@ -21,4 +21,4 @@
 .bootstrap-tagsinput .label-info{
 
        background-color: orange;
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/public/js/tasks.js b/src/main/resources/public/js/tasks.js
index e69de29..6bf160c 100644
--- a/src/main/resources/public/js/tasks.js
+++ b/src/main/resources/public/js/tasks.js
@@ -0,0 +1,43 @@
+/*<![CDATA[*/
+$(document).ready(function () {
+    $(".task-row").mouseenter(function (event) {
+        var taskRow = $(event.target).closest(".task-row");
+        $(taskRow).css("background-color", "#f8f9fa");
+        $(taskRow).find(".remove-task").removeClass("d-none");
+
+    });
+    $(".task-row").mouseleave(function (event) {
+        var taskRow = $(event.target).closest(".task-row");
+        $(taskRow).css("background-color", "white");
+        $(taskRow).closest(".task-row").find(".remove-task").addClass("d-none");
+    });
+
+    $('a[data-confirm]').click(function(ev) {
+        var href = $(this).attr('href');
+        if (!$('#dataConfirmModal').length) {
+            $('#modalDelete').append('<div class="modal fade" id="dataConfirmModal"  tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"\n' +
+                '             >\n' +
+                '            <div class="modal-dialog modal-sm">\n' +
+                '                <div class="modal-content">\n' +
+                '                    <div class="modal-header">\n' +
+                '                        <h8 class="modal-title" id="myModalLabel">Удалить статью?</h8>\n' +
+                '                        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span\n' +
+                '                                aria-hidden="true">&times;</span></button>\n' +
+                '                    </div>\n' +
+
+                '                    <div class="modal-footer">\n' +
+                '                       <a class="btn btn-primary" id="dataConfirmOK">Да</a>'+
+                '                       <button class="btn primary" data-dismiss="modal" aria-hidden="true">Нет</button>'+
+                '                    </div>\n' +
+                '                </div>\n' +
+                '            </div>\n' +
+                '        </div>');
+        }
+        $('#dataConfirmModal').find('#myModalLabel').text($(this).attr('data-confirm'));
+        $('#dataConfirmOK').attr('href', href);
+        $('#dataConfirmModal').modal({show:true});
+        return false;
+    });
+
+});
+/*]]>*/
\ No newline at end of file
diff --git a/src/main/resources/templates/students/fragments/taskLineFragment.html b/src/main/resources/templates/students/fragments/taskLineFragment.html
new file mode 100644
index 0000000..79ad5d7
--- /dev/null
+++ b/src/main/resources/templates/students/fragments/taskLineFragment.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:fragment="headerfiles">
+    <meta charset="UTF-8"/>
+</head>
+<body>
+<div class="row text-left task-row" style="background-color: white;">
+    <div class="col">
+        <span th:replace="students/fragments/taskStatusFragment"/>
+        <a  th:href="@{'task?id='+ 1}">
+            <span class="h6" >Первая хадач</span>
+            <span class="text-muted">Курсовая работа</span>
+        </a>
+        <input class="id-class" type="hidden" th:value="1" />
+        <a class="remove-task pull-right d-none" th:href="@{'/students/delete/'+1}"
+           data-confirm="Удалить задачу?">
+            <i class="fa fa-trash" aria-hidden="true"></i>
+        </a>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/students/fragments/taskStatusFragment.html b/src/main/resources/templates/students/fragments/taskStatusFragment.html
new file mode 100644
index 0000000..9af7d50
--- /dev/null
+++ b/src/main/resources/templates/students/fragments/taskStatusFragment.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:fragment="headerfiles">
+    <meta charset="UTF-8"/>
+</head>
+<body>
+<span th:fragment="taskStatus (taskStatus)" class="fa-stack fa-1x">
+    <th:block th:switch="'ON_PREPARATION'">
+        <div th:case="'ATTENTION'">
+            <i class="fa fa-circle fa-stack-2x text-warning"></i>
+        </div>
+        <div th:case="'DRAFT'">
+            <i class="fa fa-circle fa-stack-2x text-draft"></i>
+        </div>
+        <div th:case="'ON_PREPARATION'">
+            <i class="fa fa-circle fa-stack-2x text-primary"></i>
+        </div>
+        <div th:case="'ON_REVIEW'">
+            <i class="fa fa-circle fa-stack-2x text-review"></i>
+        </div>
+        <div th:case="'COMPLETED'">
+            <i class="fa fa-circle fa-stack-2x text-success"></i>
+        </div>
+        <div th:case="'FAILED'">
+            <i class="fa fa-circle fa-stack-2x text-failed"></i>
+        </div>
+        <div th:case="'ACCEPTED'">
+            <i class="fa fa-circle fa-stack-2x text-accepted"></i>
+        </div>
+        <div th:case="'NOT_ACCEPTED'">
+            <i class="fa fa-circle fa-stack-2x text-not-accepted"></i>
+        </div>
+        </th:block>
+    <i class="fa fa-check fa-stack-1x fa-inverse"></i>
+</span>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/students/task.html b/src/main/resources/templates/students/task.html
index b348078..533c8f6 100644
--- a/src/main/resources/templates/students/task.html
+++ b/src/main/resources/templates/students/task.html
@@ -18,11 +18,12 @@
                     <div th:replace="students/fragments/taskNavigationFragment"/>
                 </div>
             </div>
+            <hr/>
             <div class="row">
                 <div class="col-lg-12">
                     <form id="task-form" method="post">
                         <div class="row">
-                            <div class="col-md-6 col-sm-12">
+                            <div class="col-md-7 col-sm-12">
                                 <input type="hidden" name="id"/>
                                 <div class="form-group">
                                     <label for="title">Название:</label>
@@ -45,8 +46,6 @@
                                     <label for="tags">Теги:</label>
                                     <input class="form-control" data-role="tagsinput" placeholder="Теги задачи" id="tags"/>
                                 </div>
-
-
                                 <div class="form-group">
                                     <label>Дедлайны задачи:</label>
                                     <div class="row">
@@ -68,17 +67,45 @@
                                     <input type="submit" id="addDeadline" name="addDeadline" class="btn btn-primary" value="Добавить
                                     дедлайн"/>
                                 </div>
-
                             <div class="clearfix"></div>
                                 <div class="form-group">
                                     <button id="sendMessageButton" name="save" class="btn btn-success text-uppercase"
                                             type="submit">
                                         Сохранить
                                     </button>
-                                    <button id="cancelButton" class="btn btn-default text-uppercase" href="/students/tasks">Отмена
+                                    <button id="cancelButton" class="btn btn-default text-uppercase" href="/students/tasks">
+                                        Отмена
                                     </button>
                                 </div>
                             </div>
+                            <div class="col-md-4 offset-md-1 col-sm-12 offset-sm-0">
+                                <div class="form-group">
+                                    <div class="row">
+                                        <div class="col">
+                                            <h6 class="my-0">Дата создания:</h6>
+                                        </div>
+                                        <div class="col">
+                                            <small class="text-muted">
+                                                <!--th:text="${taskDto.createDate == null ? '' : #dates.format(taskDto.createDate, 'dd.MM.yyyy HH:mm')}">-->
+                                                text
+                                            </small>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <div class="row">
+                                        <div class="col">
+                                            <h6 class="my-0">Дата изменения:</h6>
+                                        </div>
+                                        <div class="col">
+                                            <small class="text-muted">
+                                                <!--th:text="${paperDto.updateDate == null ? '' : #dates.format(paperDto.updateDate, 'dd.MM.yyyy HH:mm')}">-->
+                                                text
+                                            </small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </form>
                 </div>
diff --git a/src/main/resources/templates/students/tasks.html b/src/main/resources/templates/students/tasks.html
index 5f370a0..076f7ba 100644
--- a/src/main/resources/templates/students/tasks.html
+++ b/src/main/resources/templates/students/tasks.html
@@ -2,6 +2,7 @@
 <html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
       layout:decorator="default" xmlns:th="">
 <head>
+    <link rel="stylesheet" href="../css/tasks.css"/>
 </head>
 
 <body>
@@ -16,13 +17,42 @@
                         <div th:replace="students/fragments/taskNavigationFragment"/>
                     </div>
                 </div>
+                <hr/>
                 <div class="row">
                     <div class="col-md-9 col-sm-12">
-                        <!--<th:block th:each="task : ${tasks}">-->
-                            <!--<div th:replace="tasks/fragments/grantLineFragment :: taskLine(task=${task})"/>-->
-                        <!--</th:block>-->
+                        <th:block>
+                            <div th:replace="students/fragments/taskLineFragment"/>
+                        </th:block>
                     </div>
                     <div class="col-md-3 col-sm-12">
+                        <div class="filter">
+                            <h5>Фильтр:</h5>
+                            <select class="form-control"   id="status"
+                                    onchange="this.form.submit();">
+                                <option value="">Все статусы</option>
+                                <!--<option th:each="author: ${allAuthors}" th:value="${author.id}"-->
+                                        <!--th:text="${author.lastName}">lastName-->
+                                <!--</option>-->
+                            </select>
+                                <select class="form-control" id="tags"
+                                        onchange="this.form.submit();">
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <option value="">Все типы</option>
+                                    <!--<option th:each="year: ${allYears}" th:value="${year}"-->
+                                            <!--th:text="${year}">year-->
+                                    <!--</option>-->
+                                </select>
+
+                        </div>
                     </div>
                 </div>
             </div>
