diff --git a/src/main/webapp/css/my.css b/src/main/webapp/css/my.css
index e69de29b..a4e40323 100644
--- a/src/main/webapp/css/my.css
+++ b/src/main/webapp/css/my.css
@@ -0,0 +1,43 @@
+th, td {
+    border: 1px solid black;
+    padding: 3px;
+}
+
+#charactersTable {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    background-color: #e8f5e9;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+#charactersTable th {
+    background-color: #fff9c4;
+    color: #5d4037;
+    text-align: left;
+    padding: 12px 15px;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 0.9em;
+    border-bottom: 2px solid #c5e1a5;
+}
+
+#charactersTable td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #c5e1a5;
+}
+
+#charactersTable tbody tr {
+    background-color: #e8f5e9;
+}
+
+#charactersTable tbody tr:hover {
+    background-color: #c8e6c9;
+}
+
+#charactersTable tbody tr:nth-child(even) {
+    background-color: #d7edd8;
+}
+
diff --git a/src/main/webapp/html/my.html b/src/main/webapp/html/my.html
index eb66ac55..dfbbd5c2 100644
--- a/src/main/webapp/html/my.html
+++ b/src/main/webapp/html/my.html
@@ -4,8 +4,374 @@
     <script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
     <link href="/css/my.css" rel="stylesheet">
 </head>
-<body>
+<body onload="show_list(0)">
 <h1>RPG admin panel</h1>
 
+<label 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 = "charactersTable">
+    <thead>
+    <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>
+    </thead>
+    <tbody>
+
+    </tbody>
+
+</table>
+
+<div id ="paging_buttons"> Pages: </div>
+
+<hr>
+<h2>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="12" 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">Profession:</label>
+<select id="input_profession_new" name= 'profession'>"
+    <option value='WARRIOR'>WARRIOR</option>
+    <option value='ROGUE'>ROGUE </option>
+    <option value='SORCEREER'>SORCEREER  </option>
+    <option value='CLERIC'>GCCLERIC</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">Birthday:</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 type="submit" onclick="createAcc()">Save</button>
+</span>
+
+
+<script>
+     function show_list(page_number){
+
+         $("#charactersTable tbody tr").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);
+
+         console.log("url"  + url);
+
+         $.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() + "</td><td>"
+                     + item.banned + "</td><td>"
+                     + "<button id='button_edit_" + item.id + "' onclick='editAcc(" + item.id + ")'>"
+                     + "<img src='/img/edit.png' alt='Edit'>"
+                     + "</button>" + "</td><td>"
+                     + "<button id='button_delete_" + item.id + "' onclick='deleteAccount(" + item.id + ")'>"
+                     + "<img src='/img/delete.png' alt='Delete'>"
+                     +"</button>" + "</td>"
+                 ).appendTo("#charactersTable tbody");
+             });
+         });
+
+
+         let totalCount = getTotalCount();
+         console.log("Total count: " + totalCount);
+
+         let pagesCount = Math.ceil(totalCount/countPerPage);
+         console.log("Pages count: " + pagesCount);
+
+
+         $('#paging_buttons').html("Pages: ");
+
+
+         if (pagesCount > 1) {
+             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-btn-styled');
+
+
+
+                     if (i == page_number){
+                         btn.css('color', 'red');
+                     }
+
+
+
+                 $('#paging_buttons').append(btn);
+             }
+         }
+     }
+    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 deleteAccount(id){
+         let url = "/rest/players/" + id;
+         $.ajax({
+             url: url,
+             type: 'DELETE',
+             success: function (){
+                 show_list(getCurrentPage);
+             }
+         });
+    }
+
+    function editAcc(id){
+         let identifier_edit = "#button_edit_" + id;
+         let identifier_delete= "#button_delete_" + id;
+
+         $(identifier_delete).remove();
+         let save_image_tag = "<img src ='/img/save.png'>";
+         $(identifier_edit).html(save_image_tag);
+
+         let current_tr_element = $(identifier_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 = "saveAcc(" + id + ")";
+        $(identifier_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,
+                "banned": value_banned,
+                "level":value_level,
+                "birthday": new Date(value_birthday).getTime()
+
+            }),
+            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("");
+                show_list(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 () {
+                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= 'profession'></label>"
+             + "<select id="+ profession_id + "name= 'profession'>"
+             + "<option value='WARRIOR'>WARRIOR</option>"
+             + "<option value='ROGUE'>ROGUE </option>"
+             + "<option value='SORCEREER'>SORCEREER  </option>"
+             + "<option value='CLERIC'>GCCLERIC</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='false'>false</option>"
+             + "<option value='true'>true </option>"
+             + "</select>";
+     }
+
+
+
+     function getCurrentPage(){
+         let current_page = 0;
+         $('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
