diff --git a/src/main/webapp/css/my.css b/src/main/webapp/css/my.css
index e69de29b..72365cf0 100644
--- a/src/main/webapp/css/my.css
+++ b/src/main/webapp/css/my.css
@@ -0,0 +1,100 @@
+body {
+    background-image: url("/img/background.png");
+    background-repeat: repeat;
+    background-size: 100%;
+
+
+}
+
+label {
+
+    color: white;
+    text-align: center;
+
+
+}
+
+#RPG_admin, h2 {
+    color: #ffffff;
+    text-align: center;
+}
+
+table {
+    border: 1px solid rgba(223, 236, 241, 0.02);
+    width: 100%;
+    color: #ffffff;
+    align-items: center;
+    flex-direction: column;
+
+}
+
+th, td {
+    height: 50px;
+    vertical-align: bottom;
+    border: 1px solid rgba(183, 189, 239, 0.05);
+    padding: 15px;
+    text-align: left;
+    text-emphasis-color: white;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+th {
+    background-color: rgba(183, 189, 239, 0.02);
+}
+
+tr:hover {
+    color: #e3cb31;
+}
+.signup-form {
+
+    max-width: 600px;
+    border-radius: 10px;
+    border: 1px solid #e3cb31;
+    background-color: rgba(255, 255, 255, 0.11);
+align-items: center;
+}
+
+.form-header {
+    padding: 15px 0;
+    border-radius: 10px;
+    border-bottom: 1px solid #1f2020;
+}
+
+.form-header h1 {
+    font-size: 28px;
+    text-align: center;
+    color: #ffffff;
+}
+
+.row {
+    display: flex;
+    flex-direction: column;
+}
+.input-group{
+    flex:1;
+    display:flex;
+    flex-direction:column;
+    margin: 10px 5px;
+}
+label {
+    font-size: 17px;
+    font-weight: 500;
+}
+
+input[type="text"]
+{
+    font-size: 18px;
+    height: 34px;
+    padding-left: 10px;
+    padding-right: 10px;
+    color: #ffffff;
+    border: 1px solid #3199e3;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0);
+    outline: none;
+}
+.form-body {
+    background: rgba(255, 255, 255, 0.07);
+    padding:5px 10px;
+}
+
diff --git a/src/main/webapp/html/my.html b/src/main/webapp/html/my.html
index eb66ac55..97d77df4 100644
--- a/src/main/webapp/html/my.html
+++ b/src/main/webapp/html/my.html
@@ -1,11 +1,312 @@
-<html>
+<html xmlns="http://www.w3.org/1999/html">
 <head>
     <title>RPG</title>
     <script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link href="/css/my.css" rel="stylesheet">
+
 </head>
-<body>
-<h1>RPG admin panel</h1>
 
+<body >
+<h1 id="RPG_admin">RPG admin panel</h1>
+<h2>Accounts list:</h2>
+<label for="count_1">Count per page:</label>
+<select id="count_1" onchange="print_table(0)">
+    <option>3</option>
+    <option>5</option>
+    <option>10</option>
+    <option>20</option>
+</select>
+
+<table id="tbl">
+    <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="pgn_buttons">Pages:</div>
+
+<form class="signup-form">
+    <div class="form-header">
+        <h1>Create new account:</h1>
+    </div>
+    <div class="form-body">
+<div class="row">
+    <div class="input-group">
+<label for="input_name_new">Name:</label>
+<input type="text" id ="input_name_new" >
+    </div>
+
+<br>
+<br>
+    <div class="input-group">
+
+<label for="input_title_new">Title:</label>
+<input type="text" id ="input_title_new" >
+    </div>
+</div>
+<br>
+<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>
+<br>
+<label for="input_profession_new">Profession:</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>
+<br>
+<label for="input_level_new">Level:</label>
+<input type="number" id ="input_level_new" name="level" min="0" max="100">
+<br>
+<br>
+<label for="input_birthday_new">Birthday:</label>
+<input type="date" id ="input_birthday_new" name="birthday" min="2000-01-01" max="3000-12-31">
+<br>
+<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 type="submit" onclick="createAcc()">Save</button>
+</span>
+    </div>
+</form>
+<script>
+    function print_table(page_number){
+        $("tr:has(td)").remove();
+        let url = "/rest/players?";
+        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);
+        $.get(url, function (response){
+            $.each(response, function (i, item){
+                $('<tr>').html("<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().replaceAll(".", "/") + "</td><td>"
+                    + item.banned + "</td><td>"
+                    + "<button id='button_edit" + item.id + "' onclick='editAcc("+ item.id + ")'>"
+                    + "<i class=\"material-icons\">edit</i>"
+                    + "</button>" + "</td><td>"
+                    + "<button id='button_dlt" + item.id + "' onclick='deleteAcc("+ item.id + ")'>"
+                    + "<i class=\"material-icons\">delete</i>"
+                    + "</button>" + "</td>"
+                ).appendTo("#tbl");
+            })
+        })
+        let totalCount = getCountAccount();
+        let pagesCount = Math.ceil(totalCount / countPerPage);
+        console.log("pagesCount: " + pagesCount);
+        $("button.pgn-btn-styled").remove();
+        for (let i = 0; i < pagesCount; i++){
+            let button_tag = "<button>" + (i + 1) + "</button>";
+            let btn = $(button_tag)
+                .attr('id', "paging_btn" + i)
+                .attr('onclick', 'print_table(' + i + ')')
+                .addClass('pgn-btn-styled');
+            $("#pgn_buttons").append(btn);
+        }
+        let identifier = "#paging_btn" + page_number;
+        $(identifier).css('color', 'red');
+    }
+    function getCountAccount(){
+        let url = "/rest/players/count";
+        let res = 0;
+        $.ajax({
+            url: url,
+            async: false,
+            success: function (response){
+                res = parseInt(response);
+            }
+        })
+        console.log("Players count: " + res);
+        return res;
+    }
+    function editAcc(id){
+        let identifier_edit = "#button_edit" + id;
+        let identifier_dlt = "#button_dlt" + id;
+        $(identifier_dlt).remove();
+        let save_img_tag ="<i class=\"material-icons\">save</i>";
+        $(identifier_edit).html(save_img_tag);
+        let current_tr = $(identifier_edit).parent().parent();
+        let child = current_tr.children();
+        let td_name = child[1];
+        td_name.innerHTML = "<input id='input_name" + id + "' type='text' value='" + td_name.innerHTML + "'>";
+        let td_title = child[2];
+        td_title.innerHTML = "<input id='input_title" + id + "' type='text' value='" + td_title.innerHTML + "'>";
+        let td_race = child[3];
+        let race_id = '#select_race' + id;
+        let race_current_val = td_race.innerHTML;
+        td_race.innerHTML = getDropDownRaceHtml(id);
+        $(race_id).val(race_current_val).change();
+        let td_profession = child[4];
+        let profession_id = '#select_profession' + id;
+        let profession_current_val = td_profession.innerHTML;
+        td_profession.innerHTML = getDropDownProfessionHtml(id);
+        $(profession_id).val(profession_current_val).change();
+        let td_banned = child[7];
+        let banned_id = '#select_banned' + id;
+        let banned_current_val = td_banned.innerHTML;
+        td_banned.innerHTML = getDropDownBannedHtml(id);
+        $(banned_id).val(banned_current_val).change();
+        let property_save_tg = "saveAcc(" + id + ")";
+        $(identifier_edit).attr('onclick', property_save_tg);
+    }
+    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("");
+                $("#select_race_new").val("");
+                $("#select_profession_new").val("");
+                $("#select_level_new").val("");
+                $("#select_birthday_new").val("");
+                $("#select_banned_new").val("");
+                print_table(getCurrentPage(""));
+            }
+        })
+    }
+    function saveAcc(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 (){
+                print_table(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='profession'></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='banned'></label>"
+            + "<select id =" + banned_id + " name='banned'>"
+            + "<option value='true'>true</option>"
+            + "<option value='false'>false</option>"
+            + "</select>"
+    }
+    function deleteAcc(id){
+        let url = "/rest/players/" + id;
+        $.ajax({
+            url: url,
+            type: 'DELETE',
+            async: false,
+            success: function (){
+                print_table(getCurrentPage())
+            }
+        })
+    }
+    function getCurrentPage(){
+        let current_page = 1;
+        $('button:parent(div)').each(function (){
+            if ($(this).css('color') === 'rgb(255, 0, 0)'){
+                current_page = $(this).text();
+            }
+        })
+        return parseInt(current_page) - 1;
+    }
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/img/background.png b/src/main/webapp/img/background.png
new file mode 100644
index 00000000..ba2eb5e4
Binary files /dev/null and b/src/main/webapp/img/background.png differ
diff --git a/src/main/webapp/img/delete.png b/src/main/webapp/img/delete.png
deleted file mode 100644
index 6409c366..00000000
Binary files a/src/main/webapp/img/delete.png and /dev/null differ
diff --git a/src/main/webapp/img/edit.png b/src/main/webapp/img/edit.png
deleted file mode 100644
index 9561e1d5..00000000
Binary files a/src/main/webapp/img/edit.png and /dev/null differ
diff --git a/src/main/webapp/img/save.png b/src/main/webapp/img/save.png
deleted file mode 100644
index f3e56af2..00000000
Binary files a/src/main/webapp/img/save.png and /dev/null differ
