diff --git a/index.html b/index.html
index d38f4b9..7f9889b 100644
--- a/index.html
+++ b/index.html
@@ -78,6 +78,20 @@
             .del:hover{
                 opacity: 1;
             }
+            .HW{
+                margin-bottom: 15px;
+            }
+            .HW:focus {
+                background-color: #e4f0f5;
+}
+            .save_btn{
+                margin: 15px;
+                padding: 5px;
+                border-radius: 4px;
+            }
+            .save_btn:hover{
+               background-color: yellow;
+            }
         </style>
         
         <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
@@ -87,15 +101,21 @@
 
     </head>
     <body>
+        <input type="number" class="HW" id="H" oninput= "q()" value="20"> 
+        <input type="number" class="HW" id="W" oninput= "q()" value="20">
+        <button class="save_btn ">Сохранить</button>
         <table class="table" id="qq"></table>
         <div  class = "main">
                 
-                <input class = "input" type="color" id="palitra">
+                <input class = "input" type="color" id="palitra"> 
                 
                 <button class="btn" onclick="add_color()" id="btn"><i class="bi bi-plus-circle icon"></i></button>
                 <div class="container" id="container"></div>
+                
         </div>
 
+        <div id="add_div"></div>
+
           
         <script src="main.js"></script>
     </body>
diff --git a/main.js b/main.js
index 137f9df..d033334 100644
--- a/main.js
+++ b/main.js
@@ -3,9 +3,19 @@ let elem = document.getElementById('qq');
 
 let a_click = false
 
+function q(){
+    let H = document.getElementById("H").value
+    let W = document.getElementById("W").value
+
+    createTable (elem, H , W)
+}
+q()
 
 function createTable (parent, cols, rows){  
-
+    console.log(rows,cols)
+while ( parent.firstChild){
+    parent.firstChild.remove()
+}
 document.onmousedown = function(){
     a_click = true
 }
@@ -16,6 +26,7 @@ document.onmouseup = function(){
 let palitra = document.getElementById('palitra');
 
     for ( i=0; i<rows; i++){
+        
       let tr=document.createElement('tr')  
        
 
@@ -38,10 +49,12 @@ let palitra = document.getElementById('palitra');
         }
         parent.append(tr)
     }
+   
     
 }
 
-createTable (elem, 20, 20)
+
+
 
 function add_color(){
 
@@ -105,3 +118,7 @@ function rgbToHex(col)
     }
 }
 
+function picture(){
+    let d = element("div")
+    document.getElementById("add_div").append.d
+}
