diff --git a/gestaoRaul/mesas/__pycache__/models.cpython-313.pyc b/gestaoRaul/mesas/__pycache__/models.cpython-313.pyc
index f92f119..f38956d 100644
Binary files a/gestaoRaul/mesas/__pycache__/models.cpython-313.pyc and b/gestaoRaul/mesas/__pycache__/models.cpython-313.pyc differ
diff --git a/gestaoRaul/mesas/__pycache__/views.cpython-313.pyc b/gestaoRaul/mesas/__pycache__/views.cpython-313.pyc
index 01d5fc5..363a857 100644
Binary files a/gestaoRaul/mesas/__pycache__/views.cpython-313.pyc and b/gestaoRaul/mesas/__pycache__/views.cpython-313.pyc differ
diff --git a/gestaoRaul/mesas/models.py b/gestaoRaul/mesas/models.py
index 1326f82..a4c8afd 100644
--- a/gestaoRaul/mesas/models.py
+++ b/gestaoRaul/mesas/models.py
@@ -1,7 +1,6 @@
 from django.db import models
 
-# Create your models here.
-from django.db import models
+
 
 class Mesa(models.Model):
     id = models.AutoField(primary_key=True)
diff --git a/gestaoRaul/mesas/templates/mesas_map.html b/gestaoRaul/mesas/templates/mesas_map.html
index e330ff3..ffcdae0 100644
--- a/gestaoRaul/mesas/templates/mesas_map.html
+++ b/gestaoRaul/mesas/templates/mesas_map.html
@@ -2,7 +2,6 @@
 {% load static %}
 
 
-
 {% block 'head' %}
 <link rel="stylesheet" href="{% static 'mesas/css/mesas.css' %}">
 {% endblock %}
@@ -15,21 +14,76 @@ RRB&C - Mapa de Mesas
 
 
 
-<!-- <div class="card"
-{% if mesa.active == True %}
-style="background-color: indianred;"
-{% endif %}
->{{mesa.name}} 
-</div> -->
+<style>
+  .container {
+    display: flex;
+    justify-content: space-around;
+}
 
+.column {
+    border: 1px solid #ccc;
+    padding: 10px;
+}
+
+.task {
+  width: 50px;
+  height: 50px;
+    background: #f0f0f0;
+    padding: 10px;
+    cursor: move;
+}
+</style>
+
+
+
+<script>
+  function eventEnter(event) {
+    console.log(event)
+  }
+
+  const columns = document.querySelectorAll('.column');
+
+columns.forEach(column => {
+    column.addEventListener('dragover', (e) => {
+        e.preventDefault();
+    });
+
+    column.addEventListener('drop', (e) => {
+        const task = document.querySelector('.dragging');
+        column.appendChild(task);
+    });
+});
+
+document.addEventListener('dragstart', (e) => {
+  e.target.classList.remove('dragging');
+});
+
+document.addEventListener('dragend', (e) => {
+  e.target.classList.add('dragging');
+});
+
+</script>
 <div id="mapa">
+
+  {% for eixo in eixosXY %}
+        <div 
+        id="{{eixo.y}}-{{eixo.y}}" 
+        class="column"
+        ondragenter="eventEnter(event)" 
+        style="background-color: rgba(0, 0, 255, 0.103); 
+        width: 50px; 
+        height: 50px; 
+        left: {{eixo.y}}px; 
+        top: {{eixo.x}}px;position: absolute"></div>
+  {% endfor %}
+
+
   {% for mesa in mesas %}
 
- 
   {% if mesa.active == True %}
-  <div class="m-card" style= " {{ mesa.location }} background-color: indianred;"  >{{mesa.name}}</div>
+  <div class="m-card" ondragend="eventEnter(event)" draggable="true" style="  background-color: indianred;"  >{{mesa.name}}</div>
    {% else %}
-   <div class="m-card" style= " {{ mesa.location }} "  >{{mesa.name}}</div>
+   <div class="m-card" ondragend="eventEnter(event)" draggable="true"  >{{mesa.name}}</div>
    {% endif %}
   
   {% endfor %}
@@ -38,26 +92,4 @@ style="background-color: indianred;"
 
 
 
-<!-- <body>
-  <div class="grid-container">
-    
-    {% for mesa in mesas %}
-    
-    <div class="card" style="right: 20px; bottom: 30px;">Elemento 2</div>
-
-    <div class="card"
-    {% if mesa.active == True %}
-    style="background-color: indianred;"
-    {% endif %}
-    >{{mesa.name}} 
-    
-  </div>
-
-    {% endfor %} 
-
-
-  </div>
-</body> -->
-
-
 {% endblock %}
\ No newline at end of file
diff --git a/gestaoRaul/mesas/views.py b/gestaoRaul/mesas/views.py
index fa0bbb5..9322ec0 100644
--- a/gestaoRaul/mesas/views.py
+++ b/gestaoRaul/mesas/views.py
@@ -10,8 +10,14 @@ def mesas(request):
 
 
 def mapMesas(request):
+    eixosXY = []
+    for i in range(0,25):
+        for j in range(0,15):
+            item = {'x':j*50, 'y':i*50}
+            eixosXY.append(item)
+
     mesas = Mesa.objects.all()
-    return render(request, 'mesas_map.html', {'mesas': mesas})
+    return render(request, 'mesas_map.html', {'mesas': mesas, 'eixosXY': eixosXY})
 
 # def onOffmesa(request):
 #     id = request.POST.get('id-mesa')
diff --git a/gestaoRaul/templates/static/mesas/css/mesas.css b/gestaoRaul/templates/static/mesas/css/mesas.css
index 94a8d0e..fa78942 100644
--- a/gestaoRaul/templates/static/mesas/css/mesas.css
+++ b/gestaoRaul/templates/static/mesas/css/mesas.css
@@ -20,18 +20,19 @@
     transition: transform 0.2s;
   }
 .m-card {
-    width: 80px;
-    height: 80px;
+    width: 50px;
+    height: 50px;
     background-color: #f2f2f2;
     border-radius: 15px;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
     text-align: center;
-    line-height: 80px; /* Centraliza o texto verticalmente */
+    line-height: 50px; /* Centraliza o texto verticalmente */
     font-size: 20px;
     font-weight: bold;
     color: #333;
-    position: absolute;
+    /* position: absolute; */
     transition: transform 0.2s;
+    cursor: move;
   }
 
 .card:hover {
