diff --git a/ui/main/admin.py b/ui/main/admin.py
deleted file mode 100644
index 8c38f3f..0000000
--- a/ui/main/admin.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from django.contrib import admin
-
-# Register your models here.
diff --git a/ui/main/forms.py b/ui/main/forms.py
deleted file mode 100644
index 7a3fea3..0000000
--- a/ui/main/forms.py
+++ /dev/null
@@ -1,21 +0,0 @@
-from django import forms
-
-class Lights(forms.Form):
-    required_css_class = "list-group-item"
-
-    MODES = [
-        ('0', 'Apagar todo'),
-        ('1', 'Encender todo'),
-        ('2', 'Sala'),
-        ('3', 'Pasillo'),
-        ('4', 'Cocina'),
-        ('5', 'Cuarto 1'),
-        ('6', 'Cuarto 2'),
-
-    ]
-    light = forms.ChoiceField(
-        widget=forms.RadioSelect,
-        choices=MODES,
-        label="Select lights to modify"
-    )
-    
\ No newline at end of file
diff --git a/ui/main/models.py b/ui/main/models.py
deleted file mode 100644
index 71a8362..0000000
--- a/ui/main/models.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from django.db import models
-
-# Create your models here.
diff --git a/ui/main/static/1.jpg b/ui/main/static/1.jpg
deleted file mode 100644
index 32de50e..0000000
Binary files a/ui/main/static/1.jpg and /dev/null differ
diff --git a/ui/main/static/2.jpg b/ui/main/static/2.jpg
deleted file mode 100644
index b454832..0000000
Binary files a/ui/main/static/2.jpg and /dev/null differ
diff --git a/ui/main/static/3.jpg b/ui/main/static/3.jpg
deleted file mode 100644
index b5bc07c..0000000
Binary files a/ui/main/static/3.jpg and /dev/null differ
diff --git a/ui/main/templates/base.html b/ui/main/templates/base.html
index 8a19203..541dfdb 100644
--- a/ui/main/templates/base.html
+++ b/ui/main/templates/base.html
@@ -39,18 +39,18 @@
             </button>
           </div>
         {% endif %}
+        
         {% block content %}{% endblock %}
       </div>
     </div>
   </div>
 
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
 <!-- A plugin for password show/hide  -->
-   <script src="https://unpkg.com/bootstrap-show-password@1.2.1/dist/bootstrap-show-password.min.js"></script>
 
 </body>
 </html>
diff --git a/ui/main/templates/home.html b/ui/main/templates/home.html
index 53f031e..f723ba4 100644
--- a/ui/main/templates/home.html
+++ b/ui/main/templates/home.html
@@ -8,20 +8,44 @@
         object-fit: cover;
         }
     </style>
+        <script>
+            function toggle_leds(led) {
+                $.get("/led/"+ led +"/", function (data) {
+                    console.log(data);
+                    if (led < 6 && led > 0) {
+                        $("#but"+led).text(data);
+                    }
+                });
+            }
+
+            function take_photo() {
+                $.get("/photo/", function (data) {
+                    
+                });
+            }
+        </script>
 
     {% if user.is_authenticated %}
-        <div class="jumbotron">
-            <form action="" method="post">
-                {% csrf_token %}
-                <ul class="list-group">
-                    {{ form.as_ul }}
-                </ul>
-                <input class="btn btn-primary btn-lg" type="submit" value="Enable">
-              </form>
+
+        <div class="jumbotron justify-content-center align-items-center">
+            <button id="but6" class="btn btn-primary btn-lg" onclick="toggle_leds(6);">Turn on all</button>
+              <button id="but0" class="btn btn-primary btn-lg" onclick="toggle_leds(0);">Turn off all</button>
+              <button id="but1" class="btn btn-primary btn-lg" onclick="toggle_leds(1);">Turn on 1</button>
+              <button id="but2" class="btn btn-primary btn-lg" onclick="toggle_leds(2);">Turn on 2</button>
+              <button id="but3" class="btn btn-primary btn-lg" onclick="toggle_leds(3);">Turn on 3</button>
+              <button id="but4" class="btn btn-primary btn-lg" onclick="toggle_leds(4);">Turn on 4</button>
+              <button id="but5" class="btn btn-primary btn-lg" onclick="toggle_leds(5);">Turn on 5</button>
         </div>
+        <div class="jumbotron" width="800" height="600">
+            <canvas id="miCanvas" class="mx-auto" width="800" height="600"></canvas>
+            <!-- {% load static %}
+            <img src="{% static '1.jpg' %}" alt="My image"> -->
+        </div>
+
         <div class="jumbotron">
-            {% load static %}
-            <img src="{% static image %}" alt="My image">
+            <button class="btn btn-primary btn-lg btn-block" onclick="take_photo();">Take photo</button>
+            <p></p>
+            <img src="{% static '1.jpg' %}" alt="My image">
         </div>
     {% else %}
     <div class="jumbotron">        
@@ -32,5 +56,49 @@
     </div>
     {% endif %}
 
+    <script>
+        // Obtener el elemento canvas y su contexto
+        var canvas = document.getElementById("miCanvas");
+        var ctx = canvas.getContext("2d");
+
+        // Dibujar la casa (un rectángulo)
+        ctx.fillStyle = "#ffffff"; // Color amarillo
+        ctx.fillRect(0, 0, 800, 600); // (x, y, ancho, alto)
+
+        // // Dibujar las habitaciones (rectángulos dentro de la casa)
+        // ctx.fillStyle = "#ffffff"; // Color blanco
+        // ctx.fillRect(0, 0, 300, 300); // Cuarto 1
+        // ctx.fillRect(500, 300, 300, 300); // Cuarto 2
+        // // ctx.fillRect(70, 190, 260, 110); // Sala y cocina
+
+        // Dibujar las divisiones de las habitaciones
+        ctx.strokeStyle = "#000000"; // Color negro
+        ctx.lineWidth = 10
+        ctx.strokeRect(0, 0, 300, 300); // Cuarto 1
+        ctx.strokeRect(500, 300, 300, 300); // Cuarto 2
+        ctx.strokeRect(5, 5, 790, 590); // Casa
+        // ctx.strokeRect(70, 190, 260, 110); // Sala y cocina
+
+        // Etiquetas de las habitaciones
+        ctx.fillStyle = "#000000"; // Color negro
+        ctx.font = "30px Arial";
+        ctx.fillText("Cuarto 1", 100, 150);
+        ctx.fillText("Cuarto 2", 600, 450);
+        ctx.fillText("Sala", 200, 450);
+        ctx.fillText("Cocina", 600, 150);
+
+
+        var imagen = new Image();
+
+        // Definir la ruta de la imagen que deseas cargar
+        imagen.src = "https://www.freepngimg.com/thumb/light/78155-icons-light-idea-computer-lighting-incandescent-bulb.png"
+
+        // Esperar a que la imagen se cargue antes de dibujarla
+        imagen.onload = function () {
+            // Dibujar la imagen en el canvas
+            ctx.drawImage(imagen, 20, 100, 80, 80); // (imagen, x, y)
+        };
+    </script>
+
 
 {% endblock content %}
\ No newline at end of file
diff --git a/ui/main/tests.py b/ui/main/tests.py
deleted file mode 100644
index 7ce503c..0000000
--- a/ui/main/tests.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.
diff --git a/ui/main/urls.py b/ui/main/urls.py
index 3d14910..6a4ce80 100644
--- a/ui/main/urls.py
+++ b/ui/main/urls.py
@@ -1,7 +1,9 @@
 from django.urls import path
 
-from .views import home
+from .views import home, led, take_photo
 
 urlpatterns = [
-    path('', home, name='home'),
+    path("", home, name="home"),
+    path("led/<int:led>/", led, name="leds"),
+    path("photo/", take_photo),
 ]
diff --git a/ui/main/views.py b/ui/main/views.py
index 81d489e..94722ff 100644
--- a/ui/main/views.py
+++ b/ui/main/views.py
@@ -1,21 +1,45 @@
 from django.shortcuts import render
-from .forms import Lights
+from django.http import HttpResponse
 import ctypes
 
-# Create your views here.
+# pin_control = ctypes.CDLL("@pin_control@/lib/libpin_control.so")
+# print(f"INIT: {pin_control.init_gpio()}")
 
-pin_control = ctypes.CDLL("@pin_control@/lib/libpin_control.so")
+leds_state = {
+    1: False,
+    2: False,
+    3: False,
+    4: False,
+    5: False,
+}
 
 def home(request):
-    if request.method == "POST":
-        form = Lights(request.POST)
-        if form.is_valid():
-            opt = form.cleaned_data.get("light")
-            light_up_all()
-            return render(request, "home.html", {"form": form, "image": f"{opt}.jpg"}) 
-    return render(request, "home.html", {"form": Lights(), "image": "1.jpg"}) 
+    return render(request, "home.html") 
 
 
-def light_up_all():
-    print(f"INIT: {pin_control.init_gpio()}")
-    print(f"ALL_PINS: {pin_control.turn_on_all_pins()}")
\ No newline at end of file
+def take_photo(request):
+    print("PRINTING PHOTO")
+    return HttpResponse("Ok")
+
+
+def led(request, led):
+    if request.method == "GET":
+        if led == 0: return turn_off_all()
+        if led == 6: return turn_on_all()
+        state = leds_state.get(led)
+        if state is not None: return toggle_led(led, state)
+        print("UNKNOWN LED")
+    return HttpResponse("Ok")
+
+def turn_off_all():
+    print("TURN OFF ALL")
+    return HttpResponse("Ok")
+
+def turn_on_all():
+    print("TURN ON ALL")
+    return HttpResponse("Ok")
+
+def toggle_led(led, state) :
+    print(f"NEW_STATE ({led}): {not state}")
+    leds_state[led] = not state
+    return HttpResponse(f"Turn on {led}" if state else f"Turn off {led}")
\ No newline at end of file