diff --git a/gestaoRaul/comandas/templates/comandas.html b/gestaoRaul/comandas/templates/comandas.html
index 7b3e95e..65a2365 100644
--- a/gestaoRaul/comandas/templates/comandas.html
+++ b/gestaoRaul/comandas/templates/comandas.html
@@ -14,7 +14,7 @@ Comandas
 
 <body>
   <button  id="openModal">Abrir Comanda</button>
-    <div class="container ">
+    <div class="grid-container ">
 
     {% for comanda in comandas %}
 
diff --git a/gestaoRaul/comandas/templates/viewcomanda.html b/gestaoRaul/comandas/templates/viewcomanda.html
index 228a0d4..3bb8ae1 100644
--- a/gestaoRaul/comandas/templates/viewcomanda.html
+++ b/gestaoRaul/comandas/templates/viewcomanda.html
@@ -47,7 +47,7 @@ Detalhes {{comanda.name}}
     <tr>
       <td>{{item.product.name}}</td>
       <td>R$ {{item.product.price}}</td>
-      <td><button hx-get="{% url 'removeProductComanda' item.id  %} " hx-trigger="click" hx-target="#list-products-comanda" onclick="open_remove_product_comanda()">🗑️ Apagar</button></td>
+      <td><button hx-get="{% url 'removeProductComanda' item.id  %} " hx-trigger="click" hx-target="#list-products-comanda" onclick="open_remove_product_comanda()">🗑️ Excluir</button></td>
     </tr>
     
 
@@ -64,26 +64,28 @@ Detalhes {{comanda.name}}
   </div>
 
 
-  <div class="modal" id="Modal-add-product">
-    <div class="modal-content">
+
+      <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>
             <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 %}
 
-                 <div class="card" hx-get="{% url 'addProduct' product.id comanda.id %} " hx-trigger="click" hx-target="#list-products-comanda">
+                <article  style="background-color: #293552;" hx-get="{% url 'addProduct' product.id comanda.id %} " hx-trigger="click" hx-target="#list-products-comanda">
                   {{product.name}} <br>
                   R$ {{product.price}}
-                 </div>
+                </article >
                 {% endfor %}
               </div>
 
-             <!-- <input type="number" step="1" id="product-qtd" name="qtd" required placeholder="Quantidade"><br> -->
-            <!-- <button type="submit">Salvar</button> -->
+
         </form>
-    </div>
-</div>
+
+      </article>
+    </dialog>
 
 
 
diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3
index 26fb02c..59fca56 100644
Binary files a/gestaoRaul/db.sqlite3 and b/gestaoRaul/db.sqlite3 differ
diff --git a/gestaoRaul/templates/htmx_components/htmx_list_products.html b/gestaoRaul/templates/htmx_components/htmx_list_products.html
index 062f99b..cb73ea3 100644
--- a/gestaoRaul/templates/htmx_components/htmx_list_products.html
+++ b/gestaoRaul/templates/htmx_components/htmx_list_products.html
@@ -3,10 +3,10 @@
 {% for product in products %}
 {{co}}
 
-    <div class="card" hx-get="{% url 'addProduct' product.id comanda_id %} " hx-trigger="click" hx-target="#list-products-comanda">
+<article  style="background-color: #293552;" hx-get="{% url 'addProduct' product.id comanda_id %} " hx-trigger="click" hx-target="#list-products-comanda">
         {{product.name}} <br>
         R$ {{product.price}}
-       </div>
+       </article>
 
 {% endfor %}
 
diff --git a/gestaoRaul/templates/static/comandas/css/comandas.css b/gestaoRaul/templates/static/comandas/css/comandas.css
index 46735e1..857d154 100644
--- a/gestaoRaul/templates/static/comandas/css/comandas.css
+++ b/gestaoRaul/templates/static/comandas/css/comandas.css
@@ -1,8 +1,8 @@
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(4, 2fr);
+    grid-template-columns: repeat(3, 2fr);
     gap: 20px;
-    max-width: 800px; /* Define a largura máxima do grid */
+    max-width: 90%; /* Define a largura máxima do grid */
     margin: 0 auto; /* Centraliza o grid na página */
   }
 
diff --git a/gestaoRaul/templates/static/pico.css b/gestaoRaul/templates/static/pico.css
index 7cc4daf..c340a09 100644
--- a/gestaoRaul/templates/static/pico.css
+++ b/gestaoRaul/templates/static/pico.css
@@ -1964,7 +1964,9 @@ details[open] > summary::after {
  * Card (<article>)
  */
 article {
-  margin-bottom: var(--pico-block-spacing-vertical);
+  /* margin-bottom: var(--pico-block-spacing-vertical); */
+  margin: 0px;
+  max-width: 95%;
   padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
   border-radius: var(--pico-border-radius);
   background: var(--pico-card-background-color);
