diff --git a/gestaoRaul/balcao/templates/viewBalcao.html b/gestaoRaul/balcao/templates/viewBalcao.html
index 9f3994e..1e66bbc 100644
--- a/gestaoRaul/balcao/templates/viewBalcao.html
+++ b/gestaoRaul/balcao/templates/viewBalcao.html
@@ -21,12 +21,12 @@
       <input hidden type="text" name="id-comanda-balcao" id="id-comanda-balcao" value="{{comanda.id}}">
       <div>
 
-        <button id="pagarComanda" onclick="modal_payment_comanda()"
+        <button id="pagarComanda" class="btn-secondary" onclick="modal_payment_comanda()"
          {% if total == 0 %} 
          disabled 
          {% endif %}>Receber</button>
 
-        <button class="button" id="imprimirFichas" onclick="imprimirFichas()"
+        <button class="btn-primary" id="imprimirFichas" onclick="imprimirFichas()"
          {% if total == 0 %} 
          disabled 
          {% endif %}
@@ -44,7 +44,7 @@
         <tr>
           <td>{{item.product.name}}</td>
           <td>R$ {{item.product.price}}</td>
-          <td><button onclick="removeProductBalcao({{item.id}})">🗑️ Excluir</button></td>
+          <td><button class="btn-cancel" onclick="removeProductBalcao({{item.id}})">🗑️ Excluir</button></td>
         </tr>
 
         {% endfor %}
@@ -120,12 +120,12 @@
       </div>
 
       <footer>
-        <button class="secondary" hx-get="{% url 'paymentBalcao' comanda.id %} " hx-trigger="click" hx-swap="none"
+        <button class="btn-secondary" hx-get="{% url 'paymentBalcao' comanda.id %} " hx-trigger="click" hx-swap="none"
           onclick="reloadPage()">
           Receber
         </button>
 
-        <button onclick="close_modal_payment_comanda()">Cancelar</button>
+        <button class="btn-cancel" onclick="close_modal_payment_comanda()">Cancelar</button>
       </footer>
     </article>
   </dialog>
diff --git a/gestaoRaul/clients/templates/clients.html b/gestaoRaul/clients/templates/clients.html
index 75ebbb4..8459fca 100644
--- a/gestaoRaul/clients/templates/clients.html
+++ b/gestaoRaul/clients/templates/clients.html
@@ -17,9 +17,8 @@ Clientes
 
 <div class="grid-container">
     <div class="grid-top">
-      <button style="
-      width: 30%; 
-      margin: 5px 10px 20px 10px;"
+      <button class="btn-primary"
+     
        onclick="openModal()" id="openModal">Novo Cliente</button>
     </div>
 
@@ -85,9 +84,9 @@ Clientes
            
           <input type="text" id="clientContact" name="contact"  placeholder="Contato"></input>
           <footer class="grid-buttons">
-            <button id="save" type="submit">Salvar</button>
-            <button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient'  %}" hx-trigger="click"  hx-swap="none" style="width: 100%;">Alterar</button>
-            <button type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button>
+            <button class="btn-primary" id="save" type="submit">Salvar</button>
+            <button class="btn-primary" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient'  %}" hx-trigger="click"  hx-swap="none" style="width: 100%;">Alterar</button>
+            <button class="btn-cancel" type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button>
           </footer>
       </form>
 
diff --git a/gestaoRaul/comandas/templates/comandas.html b/gestaoRaul/comandas/templates/comandas.html
index 56b23cb..27abe8a 100644
--- a/gestaoRaul/comandas/templates/comandas.html
+++ b/gestaoRaul/comandas/templates/comandas.html
@@ -15,7 +15,7 @@ Comandas
 
 <body>
   <div style="justify-self: center;">
-    <button  id="openModal">Abrir Comanda</button>
+    <button class="btn-primary" id="openModal">Abrir Comanda</button>
   </div>
   
     <div class="grid-container ">
@@ -63,8 +63,8 @@ Comandas
 
             </select>
             <div style="display: flex;gap: 10px;">
-              <button type="submit">Abrir</button>
-              <button type="button" onclick="closeModal()" style="background-color:red;border: none;">Cancelar</button>
+              <button class="btn-primary" type="submit">Abrir</button>
+              <button class="btn-cancel" type="button" onclick="closeModal()">Cancelar</button>
             </div>
         </form>
     </article>
diff --git a/gestaoRaul/comandas/templates/viewcomanda.html b/gestaoRaul/comandas/templates/viewcomanda.html
index ddd2e9d..cf001d4 100644
--- a/gestaoRaul/comandas/templates/viewcomanda.html
+++ b/gestaoRaul/comandas/templates/viewcomanda.html
@@ -22,33 +22,33 @@ Detalhes {{comanda.name}}
   <input hidden id="id-temp" type="number">
   <div class="grid-container" >
     <div>
-      <button class="primary" id="openModal" onclick="openModal()"
+      <button class="btn-primary" id="openModal" onclick="openModal()"
       {%  if comanda.status != 'OPEN'%}
        disabled
        {% endif %}
        >Add Produto</button>
 
-      <button  id="pagarComanda" hx-get="{% url 'closeComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="imprimirConta()"
+      <button class="btn-cancel" id="pagarComanda" hx-get="{% url 'closeComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="imprimirConta()"
       {% if comanda.status != 'OPEN' %}
       style="display: none;"
       {% endif %}
       >Fechar Conta</button>
 
       {% if comanda.status == 'PAYING' %}
-      <button  id="pagarComanda" onclick="modal_payment_comanda()">Receber</button>
+      <button class="btn-secondary" id="pagarComanda" onclick="modal_payment_comanda()">Receber</button>
       {% else %}
 
 
       {% endif %}
   
       {%  if comanda.status != 'OPEN'%}
-      <button class="button" id="imprimirFichas" 
+      <button class="btn-primary" id="imprimirFichas" 
       style="display: none;"
       onclick="imprimirFichas()">Fichas</button>
       {% endif %}
       
       {% if user|groupUser:"Gerente" %}
-      <button class="button" id="imprimirFichas" hx-get="{% url 'reopenComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="reloadPage()"
+      <button class="btn-primary" id="imprimirFichas" hx-get="{% url 'reopenComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="reloadPage()"
       {%  if comanda.status == 'OPEN'%}
       style="display: none;"
       {% elif comanda.status == 'CLOSED' %}
@@ -131,7 +131,10 @@ Detalhes {{comanda.name}}
     <dialog id="Modal-add-product" style="display: none;" >
       <article>
         <form id="productForm" >
-            <h2>Adicionar Produto <button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button></h2>
+          <div style="display: flex;justify-content: space-around;">
+            <h2>Adicionar Produto</h2> <button class="btn-cancel" type="button" onclick="closeModal()">Fechar</button>
+          </div>
+          
             <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><br>
               <div id="product-list" class="grid-list-products">
                 {% for product in products %}
@@ -153,8 +156,8 @@ Detalhes {{comanda.name}}
         <textarea placeholder="Ex.: pedido sem cebola. para viagem." name="obs" id="obs"></textarea>
         <div>
           <div style="display: flex;gap: 10px;">
-          <button type="submit" onclick="addOrder()" >OK</button>
-          <button type="button" onclick="closeModalObs()" style="background-color:red;">Cancela</button>
+          <button type="submit" class="btn-primary" onclick="addOrder()" >OK</button>
+          <button type="button" class="btn-cancel" onclick="closeModalObs()">Cancela</button>
         </div>
     </article>
       </dialog>
@@ -172,11 +175,11 @@ Detalhes {{comanda.name}}
     <footer>
       <div style="display: flex;gap: 10px;">
 
-        <button type="submit" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="backPage()">Receber</button>
-        <button type="button" class="secondary"  onclick=" modal_conta_client()">
+        <button type="submit" class="btn-secondary" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none"  onclick="backPage()">Receber</button>
+        <button type="button" class="btn-primary"  onclick=" modal_conta_client()">
           Conta
         </button>
-        <button type="button" onclick="close_modal_payment_comanda()" style="background-color:red;">Cancelar</button>
+        <button type="button" class="btn-cancel" onclick="close_modal_payment_comanda()">Cancelar</button>
       </div>
     </footer>
   </article>
@@ -199,8 +202,8 @@ Detalhes {{comanda.name}}
 
           </select>
           <div style="display: flex;gap: 10px;">
-          <button type="submit">Alterar</button>
-          <button type="button" onclick="closeModalAlter()" style="background-color:red;">Cancelar</button>
+          <button type="submit" class="btn-primary">Alterar</button>
+          <button type="button" class="btn-cancel" onclick="closeModalAlter()">Cancelar</button>
         </div>
         </form>
   </article>
@@ -229,9 +232,8 @@ Detalhes {{comanda.name}}
     </div>
     <footer>
       <div style="display: flex;gap: 10px;">
-        <button type="submit" >
-          Adicionar a conta</button>
-        <button type="button" onclick="close_modal_conta_client()" style="background-color:red;">Cancelar</button>
+        <button type="submit" class="btn-primary"> Adicionar a conta</button>
+        <button type="button" class="btn-cancel" onclick="close_modal_conta_client()">Cancelar</button>
       </div>
     </form>
     </footer>
diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3
index 4bb38d4..b2f2737 100644
Binary files a/gestaoRaul/db.sqlite3 and b/gestaoRaul/db.sqlite3 differ
diff --git a/gestaoRaul/orders/templates/orders.html b/gestaoRaul/orders/templates/orders.html
index dc3aca5..00df152 100644
--- a/gestaoRaul/orders/templates/orders.html
+++ b/gestaoRaul/orders/templates/orders.html
@@ -51,7 +51,7 @@
                         <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
                         <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
                         <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
-                        <button onclick="delayTab('Fila')"
+                        <button class="btn-primary" onclick="delayTab('Fila')"
                         hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas"
                         >Preparar</button>
                     </div>
@@ -75,7 +75,7 @@
                         <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
                         <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
                         <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
-                        <button  onclick="delayTab( 'Preparo')"
+                        <button class="btn-secondary" onclick="delayTab( 'Preparo')"
                         hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas"
                         >Finalizar</button>
                     </div>
@@ -98,7 +98,7 @@
                         <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
                         <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
                         <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
-                        <button onclick="delayTab( 'Finalizado')"
+                        <button class="btn-secondary" onclick="delayTab( 'Finalizado')"
                         hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas"
                         >Entregar</button>
                     </div>
diff --git a/gestaoRaul/products/templates/products.html b/gestaoRaul/products/templates/products.html
index 6fa6646..396e443 100644
--- a/gestaoRaul/products/templates/products.html
+++ b/gestaoRaul/products/templates/products.html
@@ -16,9 +16,7 @@ Produtos
 <body>
     <div class="grid-container">
         <div class="grid-top">
-          <button style="
-          width: 30%; 
-          margin: 5px 10px 20px 10px;"
+          <button class="btn-primary"
            onclick="openModal()" id="openModal">Novo Produto</button>
           <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'searchProduct' %}" hx-trigger="keyup" hx-target="#product-list">
         </div>
@@ -112,9 +110,9 @@ Produtos
               <div style="display: flex;gap: 10px;">
 
                 
-                <button id="save" type="submit">Salvar</button>
-                <button type="submit" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click"  hx-target="#product-list" >Alterar</button>
-                <button type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button>
+                <button class="btn-primary" id="save" type="submit">Salvar</button>
+                <button class="btn-primary" type="submit" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click"  hx-target="#product-list" >Alterar</button>
+                <button class="btn-cancel" type="button" onclick="closeModal()">Cancelar</button>
               </div>
             </footer>
         </form>
@@ -123,8 +121,6 @@ Produtos
     </dialog>
 
 
-
-
 <script src="{% static 'products/js/products.js' %}"></script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/gestaoRaul/templates/htmx_components/htmx_list_products_in_balcao.html b/gestaoRaul/templates/htmx_components/htmx_list_products_in_balcao.html
index 9aabe11..98cd0a9 100644
--- a/gestaoRaul/templates/htmx_components/htmx_list_products_in_balcao.html
+++ b/gestaoRaul/templates/htmx_components/htmx_list_products_in_balcao.html
@@ -8,7 +8,7 @@
 <tr>
   <td>{{item.product.name}}</td>
   <td>R$ {{item.product.price}}</td>
-  <td><button onclick="removeProductBalcao({{item.id}})"
+  <td><button class="btn-cancel" onclick="removeProductBalcao({{item.id}})"
    
     >🗑️ Excluir</button></td>
 </tr>
diff --git a/gestaoRaul/templates/htmx_components/orders/htmx_list_orders_fila.html b/gestaoRaul/templates/htmx_components/orders/htmx_list_orders_fila.html
index 51bce7a..68e17aa 100644
--- a/gestaoRaul/templates/htmx_components/orders/htmx_list_orders_fila.html
+++ b/gestaoRaul/templates/htmx_components/orders/htmx_list_orders_fila.html
@@ -23,7 +23,7 @@
                 <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
                 <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
                 <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
-                <button onclick="delayTab('Fila')"
+                <button class="btn-primary" onclick="delayTab('Fila')"
                 hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas"
                 >Preparar</button>
             </div>
@@ -48,7 +48,7 @@
                 <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
                 <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
                 <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
-                <button onclick="delayTab('Preparo')"
+                <button class="btn-secondary" onclick="delayTab('Preparo')"
                 hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas"
                 >Finalizar</button>
             </div>
@@ -71,7 +71,7 @@
                 <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
                 <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
                 <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
-                <button onclick="delayTab('Finalizado')"
+                <button class="btn-secondary" onclick="delayTab('Finalizado')"
                 hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas"
                 >Entregar</button>
             </div>
diff --git a/gestaoRaul/templates/htmx_components/orders/htmx_list_orders_pronto.html b/gestaoRaul/templates/htmx_components/orders/htmx_list_orders_pronto.html
index 8f986e6..20e09ac 100644
--- a/gestaoRaul/templates/htmx_components/orders/htmx_list_orders_pronto.html
+++ b/gestaoRaul/templates/htmx_components/orders/htmx_list_orders_pronto.html
@@ -23,7 +23,7 @@
         <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
         <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
         <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
-        <button
+        <button class="btn-primary"
         hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#list-orders"
         >Preparar</button>
     </div>
@@ -48,7 +48,7 @@
         <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
         <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
         <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
-        <button
+        <button class="btn-secondary"
         hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#list-orders"
         >Finalizar</button>
     </div>
diff --git a/gestaoRaul/templates/static/base.css b/gestaoRaul/templates/static/base.css
index 44333e8..5d9e19e 100644
--- a/gestaoRaul/templates/static/base.css
+++ b/gestaoRaul/templates/static/base.css
@@ -5,7 +5,6 @@
   }
 
 
-
 body {
     margin: 70px 0px 0px 0px;
 }
@@ -14,6 +13,81 @@ h1{
 text-align: center;
 }
 
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px; 
+}
+
+input, textarea, select {
+    width: 95%;
+    max-width: 95%;
+    max-height: 300px;
+    /* padding: 8px; */
+    margin-top: 5px;
+    border-radius: 8px;
+    border: 1px solid #cccccc52;
+}
+
+
+.btn-primary {
+    align-items: center;
+    background: var(--main-gradient);
+    border-color: rgba(86, 187, 255, 0.192);
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(12, 12, 12, 0.973);
+    text-align: left;
+    line-height: 20px; 
+    padding: 15px 30px 15px 30px;
+    transition: box-shadow 0.4s;
+  }
+  
+  .btn-primary:hover {
+    box-shadow: 0px 0px 15px rgba(86, 187, 255, 0.815);
+    text-align: left;
+    line-height: 20px; 
+    padding: 15px 30px 15px 30px;
+  }
+  
+.btn-secondary {
+    align-items: center;
+    background: var(--main-gradient);
+    border-color: rgba(53, 241, 62, 0.425);
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(12, 12, 12, 0.973);
+    text-align: left;
+    line-height: 20px; 
+    padding: 15px 30px 15px 30px;
+    transition: box-shadow 0.4s;
+  }
+  
+  .btn-secondary:hover {
+    box-shadow: 0px 0px 15px rgb(53, 241, 62);
+    text-align: left;
+    line-height: 20px; 
+    padding: 15px 30px 15px 30px;
+  }
+
+.btn-cancel {
+    align-items: center;
+    background: linear-gradient(145deg,  #dd3d3d8e, #9b4d4dbd);
+    border-color: rgba(250, 62, 62, 0.404);
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(12, 12, 12, 0.973);
+    text-align: left;
+    line-height: 20px; 
+    padding: 15px 30px 15px 30px;
+    transition: box-shadow 0.4s;
+  }
+  
+  .btn-cancel:hover {
+    box-shadow: 0px 0px 15px rgba(255, 86, 86, 0.815);
+    text-align: left;
+    line-height: 20px; 
+    padding: 15px 30px 15px 30px;
+  }
+
 * {
     padding: 0;
     margin: 0;
diff --git a/gestaoRaul/templates/static/clients/css/clients.css b/gestaoRaul/templates/static/clients/css/clients.css
index 7b63355..1caf927 100644
--- a/gestaoRaul/templates/static/clients/css/clients.css
+++ b/gestaoRaul/templates/static/clients/css/clients.css
@@ -1,22 +1,5 @@
 
 
-form {
-    display: flex;
-    flex-direction: column;
-    gap: 10px; 
-}
-
-input, textarea {
-    width: 95%;
-    max-width: 95%;
-    padding: 8px;
-    margin-top: 5px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-}
-
-
-
 .grid-buttons {
   grid-template-columns: 1fr 1fr;
   display: flex;
diff --git a/gestaoRaul/templates/static/comandas/css/comandas.css b/gestaoRaul/templates/static/comandas/css/comandas.css
index d8dd05c..0993d31 100644
--- a/gestaoRaul/templates/static/comandas/css/comandas.css
+++ b/gestaoRaul/templates/static/comandas/css/comandas.css
@@ -35,21 +35,6 @@ p {
     box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
   }
 
-form {
-    display: flex;
-    flex-direction: column;
-    gap: 10px; 
-}
-
-input, textarea {
-    width: 95%;
-    max-width: 95%;
-    padding: 8px;
-    margin-top: 5px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-}
-
 
 @media (max-width: 768px) {
   .grid-container {
diff --git a/gestaoRaul/templates/static/comandas/css/viewbalcao.css b/gestaoRaul/templates/static/comandas/css/viewbalcao.css
index 5070447..9309ee5 100644
--- a/gestaoRaul/templates/static/comandas/css/viewbalcao.css
+++ b/gestaoRaul/templates/static/comandas/css/viewbalcao.css
@@ -30,17 +30,3 @@ table td th {
   text-align: center;
   }
 
-form {
-    display: flex;
-    flex-direction: column;
-    gap: 10px; 
-  }
-
-input, textarea {
-    width: 95%;
-    max-width: 95%;
-    padding: 8px;
-    margin-top: 5px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-  }
diff --git a/gestaoRaul/templates/static/comandas/css/viewcomanda.css b/gestaoRaul/templates/static/comandas/css/viewcomanda.css
index 00ccbd2..3ea904e 100644
--- a/gestaoRaul/templates/static/comandas/css/viewcomanda.css
+++ b/gestaoRaul/templates/static/comandas/css/viewcomanda.css
@@ -13,7 +13,7 @@
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     max-width: 800px;
-    margin: 0 auto; 
+    /* margin: 0 auto;  */
   }
 
   .card-product {
@@ -31,17 +31,3 @@
     text-align: center;
   }
 
-form {
-    display: flex;
-    flex-direction: column;
-    gap: 10px; 
-}
-
-input, textarea {
-    width: 95%;
-    max-width: 95%;
-    padding: 8px;
-    margin-top: 5px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-}
diff --git a/gestaoRaul/templates/static/products/css/products.css b/gestaoRaul/templates/static/products/css/products.css
index aed7391..7605c20 100644
--- a/gestaoRaul/templates/static/products/css/products.css
+++ b/gestaoRaul/templates/static/products/css/products.css
@@ -1,20 +1,5 @@
 
 
-form {
-    display: flex;
-    flex-direction: column;
-    gap: 10px; 
-}
-
-input, textarea {
-    width: 95%;
-    max-width: 95%;
-    padding: 8px;
-    margin-top: 5px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-}
-
 .grid-buttons {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -31,7 +16,15 @@ input, textarea {
   }
 
 .grid-top {
-    display: flex;
+    display: grid;
+    padding: 10px;
+    align-items: center;
+    justify-items: center;
+    justify-self: center;
+    align-content: center;
+    align-self: center;
+    grid-template-columns: 1fr 3fr;
+    gap: 20px;
     width: 100%; 
   }
 
