diff --git a/src/main/webapp/css/my.css b/src/main/webapp/css/my.css
index e69de29b..ff98f716 100644
--- a/src/main/webapp/css/my.css
+++ b/src/main/webapp/css/my.css
@@ -0,0 +1,106 @@
+
+#fon_header {
+    text-align: left;
+    margin-top: -8px;
+    font-family: "Arial Black";
+    font-weight: bold;
+}
+
+#create_style {
+    font-family: "Arial Black";
+    font-weight: bold;
+    height: 10px;
+}
+
+#playerTable {
+    width: 100%;
+    border-collapse: collapse;
+    background-color: #ffffff;
+
+}
+
+#count_1{
+    margin-bottom: 5px;
+    font-size: 12px;
+    border: 3px solid #2a2a2a;
+    font-family: "Arial Black";
+    font-weight: bold;
+    width: 80px;
+}
+
+#count_style{
+    font-size: 16px;
+    font-family: "Arial Black";
+    width: auto;
+}
+
+#paging_buttons {
+    font-size: 16px;
+    font-family: "Arial Black";
+    font-weight: bold;
+}
+
+.pgn-bnt-styled {
+    margin: 10px 3px;
+    padding: 8px 4px;
+    font-size: 17px;
+    font-family: "Arial Black";
+    background-color: #696969;
+    border-radius: 5px;
+    border: 0px;
+    color: aliceblue;
+    min-width: 40px;
+}
+
+.pgn-bnt-styled:focus {
+    outline: none;
+    border: 0px;
+    color: aliceblue;
+}
+
+.btn_style{
+    font-size: 20px;
+    width: 80px;
+    padding: 6px 6px 8px 8px;
+    font-family: "Arial Black";
+    border: 0px;
+    color: white;
+    background-color: #696969;
+    border-radius: 5px;
+}
+
+.btn_style:active{
+    color: #34a9fa;
+}
+
+body {
+    background-color: #34a9fa;
+}
+th, td {
+    border: 3px solid #2a2a2a;
+    text-align: center;
+    padding: 10px;
+    font-weight: bold;
+    border-radius: 20px;
+}
+
+label {
+    display: inline-block;
+    width: 100px; /* Ширина метки */
+    text-align: right; /* Выравнивание текста метки по правому краю */
+    margin-right: 10px; /* Отступ между меткой и полем ввода */
+    margin-top: 20px;
+    font-size: 16px;
+    font-family: "Arial Black";
+}
+
+input[type="text"],
+input[type="number"],
+input[type="date"],
+select {
+    width: 210px; /* Ширина поля ввода */
+    padding: 5px; /* Отступы внутри поля ввода */
+    border-radius: 5px; /* Скругление углов поля ввода */
+    border: 1px solid #ccc; /* Граница поля ввода */
+}
+
diff --git a/src/main/webapp/html/my.html b/src/main/webapp/html/my.html
index eb66ac55..62bfcf0f 100644
--- a/src/main/webapp/html/my.html
+++ b/src/main/webapp/html/my.html
@@ -1,11 +1,346 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
     <title>RPG</title>
-    <script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <link href="/css/my.css" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/13d829f7a0.js"></script>
 </head>
-<body>
-<h1>RPG admin panel</h1>
+<body onload="show_list()">
+<div id="fon_header">
+    <h1>RPG admin panel</h1>
+    <h2>Accounts list:</h2>
+</div>
 
+<label id="count_style" for="count_1">Count per page: </label>
+
+<select id="count_1" onchange="show_list(0)">
+    <option value="3">3</option>
+    <option value="5">5</option>
+    <option value="10">10</option>
+    <option value="20">20</option>
+</select>
+
+<table id="playerTable">
+    <tr>
+        <th>#</th>
+        <th>Name</th>
+        <th>Title</th>
+        <th>Race</th>
+        <th>Profession</th>
+        <th>Level</th>
+        <th>Birthday</th>
+        <th>Banned</th>
+        <th>Edit</th>
+        <th>Delete</th>
+    </tr>
+</table>
+
+<div id="paging_buttons">Pages: </div>
+
+<hr>
+<h2 id="create_style">Create new account:</h2>
+<label for="input_name_new">Name:</label>
+<input type="text" id ="input_name_new" name="name" required size="12" maxlength="12">
+<br>
+
+<label for="input_title_new">Title:</label>
+<input type="text" id ="input_title_new" name="title" required size="30" maxlength="30">
+<br>
+
+<label for="input_race_new">Race:</label>
+<select id="input_race_new" name='race'>
+    <option value='HUMAN'>HUMAN</option>
+    <option value='DWARF'>DWARF</option>
+    <option value='ELF'>ELF</option>
+    <option value='GIANT'>GIANT</option>
+    <option value='ORC'>ORC</option>
+    <option value='TROLL'>TROLL</option>
+    <option value='HOBBIT'>HOBBIT</option>
+    </select>
+<br>
+
+<label for="input_profession_new">Race:</label>
+<select id="input_profession_new" name='profession'>
+    <option value='WARRIOR'>WARRIOR</option>
+    <option value='ROGUE'>ROGUE</option>
+    <option value='SORCERER'>SORCERER</option>
+    <option value='CLERIC'>CLERIC</option>
+    <option value='PALADIN'>PALADIN</option>
+    <option value='NAZGUL'>NAZGUL</option>
+    <option value='WARLOCK'>WARLOCK</option>
+    <option value='DRUID'>DRUID</option>
+</select>
+<br>
+
+<label for="input_level_new">Level:</label>
+<input type="number" id ="input_level_new" name="level" min="0" max="100">
+<br>
+
+<label for="input_birthday_new">Date:</label>
+<input type="date" id ="input_birthday_new" name="birthday" min="2000-01-01" max="3000-12-31" >
+<br>
+
+<label for="input_banned_new">Banned:</label>
+<select id="input_banned_new" name='banned'>
+    <option value='false'>false</option>
+    <option value='true'>true</option>
+</select>
+<br><br>
+
+
+<span>
+    <button class="btn_style" type="submit" onclick="createAcc()">Save</button>
+</span>
+
+<script>
+    function show_list(page_number) {
+        $("tr:has(td)").remove();
+
+        let url = "/rest/players?";
+
+        let totalCount = getTotalCount();
+        let countPerPage = $("#count_1").val();
+
+        if (countPerPage == null) {
+            countPerPage = 3;
+        }
+
+        url = url.concat("pageSize=").concat(countPerPage);
+
+        if (page_number == null) {
+            page_number = 0;
+        }
+        url = url.concat("&pageNumber=").concat(page_number);
+
+        console.log("url:" + url)
+
+        $.get(url, function (response) {
+            $.each(response, function (i, item) {
+                $('#playerTable').append("<tr><td>"
+                    + item.id + "</td><td>"
+                    + item.name + "</td><td>"
+                    + item.title + "</td><td>"
+                    + item.race + "</td><td>"
+                    + item.profession + "</td><td>"
+                    + item.level + "</td><td>"
+                    + new Date(item.birthday).toLocaleDateString() + "</td><td>"
+                    + item.banned + "</td><td>"
+                    + "<button id = 'button_edit_" + item.id + "' onclick='editAcc(" + item.id + ")'>"
+                    + "<img scr='/img/edit.png'>Edit"
+                    + "</button>" + "</td><td>"
+                    + "<button id = 'button_delete_" + item.id + "' onclick='deleteAcc(" + item.id + ")'>"
+                    + "<img scr='/img/delete.png'>Delete"
+                    + "</button>" + "</td></tr>>"
+                );
+            });
+        });
+
+
+        let pagesCount = Math.ceil(totalCount / countPerPage);
+
+        console.log("pages = " + pagesCount);
+
+        $('button.pgn-bnt-styled').remove();
+
+
+        for (let i = 0; i < pagesCount; i++) {
+            let button_tag = "<button>" + (i + 1) + "</button>";
+            let btn = $(button_tag)
+                .attr('id', "paging_button_" + i)
+                .attr('onclick', "show_list(" + i + ")")
+                .addClass('pgn-bnt-styled');
+            $('#paging_buttons').append(btn)
+        }
+
+        let identificator = "#paging_button_" + page_number;
+
+        $(identificator).css('color', "rgb(11,134,250)");
+    }
+
+    function getTotalCount() {
+        let url = "/rest/players/count";
+        let res = 0;
+        $.ajax({
+            url: url,
+            async: false,
+            success: function (result) {
+                res = parseInt(result);
+            }
+        })
+        console.log(res);
+        return res;
+    }
+
+    function editAcc(id) {
+        let identificator_edit = "#button_edit_" + id;
+        let identificator_delete = "#button_delete_" + id;
+
+        $(identificator_delete).remove();
+
+        let save_image_tag = "<img scr='/img/save.png'>Save";
+        $(identificator_edit).html(save_image_tag);
+
+
+        let current_tr_element = $(identificator_edit).parent().parent();
+        let children = current_tr_element.children();
+
+        let td_name = children[1];
+        td_name.innerHTML = "<input id ='input_name_" + id + "' type = 'text' value ='" + td_name.innerHTML + "'>";
+
+        let td_title = children[2];
+        td_title.innerHTML = "<input id ='input_title_" + id + "' type = 'text' value ='" + td_title.innerHTML + "'>";
+
+        let td_race = children[3];
+        let race_id = "#select_race_" + id;
+        let race_current_value = td_race.innerHTML;
+        td_race.innerHTML = getDropdownRaceHtml(id);
+        $(race_id).val(race_current_value).change();
+
+
+        let td_profession = children[4];
+        let profession_id = "#select_profession_" + id;
+        let profession_current_value = td_profession.innerHTML;
+        td_profession.innerHTML = getDropdownProfessionHtml(id);
+        $(profession_id).val(profession_current_value).change();
+
+
+        let td_banned = children[7];
+        let banned_id = "#select_banned_" + id;
+        let banned_current_value = td_banned.innerHTML;
+        td_banned.innerHTML = getDropdownBannedHtml(id);
+        $(banned_id).val(banned_current_value).change();
+
+         let property_save_tag = "saveAcct(" + id + ")";
+         $(identificator_edit).attr('onclick', property_save_tag)
+    }
+
+
+    function createAcc() {
+        let value_name = $("#input_name_new").val();
+        let value_title = $("#input_title_new").val();
+        let value_race = $("#input_race_new").val();
+        let value_profession = $("#input_profession_new").val();
+        let value_level = $("#input_level_new").val();
+        let value_birthDay = $("#input_birthday_new").val();
+        let value_banned = $("#input_banned_new").val();
+
+        let url = "/rest/players/";
+        $.ajax({
+            url: url,
+            type: 'POST',
+            dataType: 'json',
+            contentType: 'application/json;charset=UTF-8',
+            async: false,
+            data: JSON.stringify({
+                "name": value_name,
+                "title": value_title,
+                "race": value_race,
+                "profession": value_profession,
+                "level": value_level,
+                "birthday": new Date(value_birthDay).getTime(),
+                "banned": value_banned
+            }),
+            success: function () {
+                $("#input_name_new").val("");
+                $("#input_title_new").val("");
+                $("#input_race_new").val("");
+                $("#input_profession_new").val("");
+                $("#input_level_new").val("");
+                $("#input_birthday_new").val("");
+                $("#input_banned_new").val("");
+                show_list(getCurrentPage(""));
+            }
+        });
+    }
+
+    function saveAcct(id) {
+        let value_name = $("#input_name_" + id).val();
+        let value_title = $("#input_title_" + id).val();
+        let value_race = $("#select_race_" + id).val();
+        let value_profession = $("#select_profession_" + id).val();
+        let value_banned = $("#select_banned_" + id).val();
+
+        let url = "/rest/players/" + id ;
+        $.ajax({
+            url: url,
+            type: 'POST',
+            dataType: 'json',
+            contentType: 'application/json;charset=UTF-8',
+            async: false,
+            data: JSON.stringify({
+                "name": value_name,
+                "title": value_title,
+                "race": value_race,
+                "profession": value_profession,
+                "banned": value_banned,
+
+            }),
+            success: function () {
+                show_list(getCurrentPage());
+            }
+        });
+    }
+
+    function getDropdownRaceHtml (id) {
+        let race_id = "select_race_" + id;
+        return "<label for='race'></label>"
+        + "<select id="+ race_id + " name='race'>"
+        + "<option value='HUMAN'>HUMAN</option>"
+        + "<option value='DWARF'>DWARF</option>"
+        + "<option value='ELF'>ELF</option>"
+        + "<option value='GIANT'>GIANT</option>"
+        + "<option value='ORC'>ORC</option>"
+        + "<option value='TROLL'>TROLL</option>"
+        + "<option value='HOBBIT'>HOBBIT</option>"
+        + "</select>"
+    }
+
+    function getDropdownProfessionHtml (id) {
+        let profession_id = "select_profession_" + id;
+        return "<label for='race'></label>"
+            + "<select id="+ profession_id + " name='profession'>"
+            + "<option value='WARRIOR'>WARRIOR</option>"
+            + "<option value='ROGUE'>ROGUE</option>"
+            + "<option value='SORCERER'>SORCERER</option>"
+            + "<option value='CLERIC'>CLERIC</option>"
+            + "<option value='PALADIN'>PALADIN</option>"
+            + "<option value='NAZGUL'>NAZGUL</option>"
+            + "<option value='WARLOCK'>WARLOCK</option>"
+            + "<option value='DRUID'>DRUID</option>"
+            + "</select>"
+    }
+
+    function getDropdownBannedHtml (id) {
+        let banned_id = "select_banned_" + id;
+        return "<label for='race'></label>"
+            + "<select id="+ banned_id + " name='banned'>"
+            + "<option value='false'>false</option>"
+            + "<option value='true'>true</option>"
+            + "</select>"
+    }
+
+    function deleteAcc(id) {
+        let url = "/rest/players/" + id;
+        $.ajax({
+            url: url,
+            type: 'DELETE',
+            success: function () {
+                show_list(getCurrentPage());
+            }
+        });
+    }
+
+    function getCurrentPage() {
+        let current_page = 1;
+        $('buton:parent(div)').each(function () {
+            if ($(this.css('color') === 'rgb(11,134,250)')) {
+                current_page = $(this).text();
+            }
+        });
+        return parseInt(current_page) - 1;
+    }
+</script>
 </body>
-</html>
\ No newline at end of file
+</html>
