diff --git a/app.py b/app.py
index c92a630..0bbe469 100644
--- a/app.py
+++ b/app.py
@@ -95,7 +95,12 @@ def create_app(config=Config):
                     'typeofpin': request.form['typeofpin'],
                     'added_by': current_user.id,
                     'description': request.form['description'],
-                    'address': str(geolocator.reverse(str(request.form['lat'])+ ", "+request.form['lng']))
+                    'address': str(geolocator.reverse(str(request.form['lat'])+ ", "+request.form['lng'])),
+                    'reviewed': True,
+                    'fixed': False,
+                    'last_mod': datetime.now(),
+                    'votes': -1,
+                    'removal_reason': None,
                 }
                 print(geolocator.reverse(str(request.form['lat'])+ ", "+request.form['lng']))
                 mongo.db.pins.insert_one(pin)
@@ -227,7 +232,8 @@ def create_app(config=Config):
                 {"$set": {
                     "typeofpin": typeofpin,
                     "description": description,
-                    "address": address
+                    "address": address,
+                    "last_mod": datetime.now()
                 }}
             )
             flash('Pin actualizado exitosamente')
diff --git a/static/styles.css b/static/styles.css
index 10fa1f5..5ed4c2e 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -22,8 +22,10 @@ body, html {
     /* height: 100%; */
     width: 100%;
     color: var(--text-color);
+    height: 100%;
 }
 
+
 ::selection {
     background-color: var(--accent-color);
     color: white;
@@ -64,20 +66,7 @@ main {
     width: 100vw;
     z-index: 5;
 }
-nav li [role=button],
-nav li [type=button],
-nav li button {
-    background-color: rgba(255, 136, 0, 0.8);
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-li a {
-    background-color: rgba(255, 136, 0, 0.8);
-}
+
 
 footer {
     position: fixed;
@@ -139,7 +128,6 @@ nav {
     /* padding: var(--spacing-sm); */
     z-index: 1000;
     font-size: 100%;
-    overflow: hidden;
     box-shadow: 0 2px 10px var(--shadow-color);
     backdrop-filter: blur(5px);
 }
@@ -156,6 +144,72 @@ nav ul li {
     flex: 1 1 auto;
     list-style: none;
 }
+nav li [role=button],
+nav li [type=button],
+nav li button {
+    background-color: rgba(36, 82, 1, 0.9);
+    backdrop-filter: blur(2px) contrast(1.2);
+    color: rgba(255, 255, 255, 0.9);
+    border-color: rgba(255, 255, 255, 0.5);
+    border-width: .2rem;
+    padding: 0.1rem 1rem;
+    /* border-radius: 4px; */
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+li a {
+    background-color: rgba(255, 136, 0, 0.8);
+}
+.mobile-menu ul li {
+    display: block;
+    text-align: center;
+    padding: 0.2rem 0;
+    border-radius: 100rem;
+    width: auto;
+    /* backdrop-filter: hue-rotate(180deg); */
+    /* background-color: rgba(255, 255, 255, 0.7); */
+    color: rgba(172, 255, 47, 0.9);
+    padding: 0;
+}
+
+.mobile-menu ul li a:hover {
+    backdrop-filter: blur(2px) saturate(150%) brightness(1.5) hue-rotate(180deg);
+    animation: pulse 1s normal ease-in-out;
+    /* box-shadow: 0 0 -2px rgba(192, 157, 117, 0.8); */
+    transition: all 0.2s ease-in-out;
+    /* transform: scale(1.2); */
+    color: black;
+    color: rgba(255, 136, 0, 1);
+    z-index: 1800;
+    /* padding: 0; */
+}
+/* .mobile-menu ul li a i:hover {
+
+} */
+/* .mobile-menu ul li a i {
+
+} */
+
+.mobile-menu ul li a {
+    display: block;
+    text-align: center;
+    padding: 0.5rem 0;
+    border-radius: 2rem;
+    backdrop-filter: invert(100%);
+}
+
+.mobile-menu ul li a i{
+    margin-left:0px;
+    padding: .1rem;
+}
+
+.desktop-menu {
+    display: block;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+}
 
 .desktop-menu li a {
     display: flex;
@@ -164,9 +218,9 @@ nav ul li {
 }
 
 .desktop-menu li a:hover {
-    background-color: rgb(74, 133, 34);
+    background-color: rgb(45, 60, 35);
     animation: pulse 1.5s infinite ease-in-out;
-    box-shadow: 0 0 -10px rgba(172, 255, 47, 0.7);
+    box-shadow: 0 0 -3px rgba(255, 167, 14, 0.7);
     transition: all 0.2s ease;
     transform: scale(1.02);
 }
@@ -202,11 +256,11 @@ button:hover::after {
     opacity: 1;
 }
 
-#pinner-top {
-    background-color: var(--secondary-color);
+/* #pinner-top {
+    background-color: rgba(0, 0, 0, 0.2);
     color: white;
     border-radius: 4px;
-}
+} */
 
 button a {
     color: white;
@@ -302,18 +356,33 @@ section#pinner-modal::-webkit-scrollbar-thumb {
 .eaflet-popup-content {
     width: 100%;
 }
+.fa, .far, .fas {
+    font-size: 1.5rem;
+    /* filter: drop-shadow(0 0 0.2rem var(--accent-color)); */
+}
 .control-button {
     position: fixed;
     bottom: 30px;
-    left: 50%;
-    transform: translateX(-50%);
+    /* right: 20%; */
+    width: 15vw;
+    height: 15vw;
+    /* transform: translateX(-50%); */
     padding: 15px 30px;
-    background-color: rgba(255, 255, 255, 0.7);
-    border-radius: 50px;
-    border: none;
-    font-size: 18px;
+    background-color: rgba(60, 245, 9, 0.8);
+    border-radius: 100%;
+    border: 4px solid rgba(255, 255, 255, 0.5);
+    /* font-size: 4rem; */
+    font-weight: bolder;
     z-index: 100;
-    color: black;
+    color: white;
+    animation: pulsePing 1s ease-in-out 0s 1 normal none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.control-button .fas.fa-camera {
+    font-size: 3rem; /* Increased size specifically for camera icon */
 }
 .marker-cluster {
     background-color: rgb(249, 170, 61) !important;
@@ -322,15 +391,7 @@ section#pinner-modal::-webkit-scrollbar-thumb {
     /* Animation removed as it was causing visibility issues */
 }
 
-.fa, .far, .fas {
-    color: black;
-    text-shadow: -1px 0 var(--accent-color), 0 1px var(--accent-color), 
-                             1px 0 var(--accent-color), 0 -1px var(--accent-color);
-    margin-left: -10px;
-    margin-top: -10px;
-    font-size: 1.5rem;
-    filter: drop-shadow(0 0 0.2rem var(--accent-color));
-}
+
 
 /* Notifications */
 .flashes {
@@ -371,6 +432,23 @@ ul.flashes li {
     50% { box-shadow: 0 0 15px rgba(172, 255, 47, 0.9); }
     100% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
 }
+
+@keyframes pulsePing {
+    0% {
+        transform: scale(1);
+      }
+    
+      50% {
+        transform: scale(1.4);
+      }
+    
+      100% {
+        transform: scale(1);
+      }
+    }
+
+
+
 /* Media queries for responsiveness */
 @media (max-width: 768px) {
     section#pinner-modal {
@@ -383,6 +461,7 @@ ul.flashes li {
     }
     nav {
         height: 10vh;
+        overflow: visible;
     }
     
     nav ul {
diff --git a/static/stylesbs.css b/static/stylesbs.css
new file mode 100644
index 0000000..d9ec911
--- /dev/null
+++ b/static/stylesbs.css
@@ -0,0 +1,379 @@
+:root {
+    /* Color palette */
+    --primary-color: rgba(202, 216, 3, 0.9);
+    --secondary-color: green;
+    --accent-color: rgb(255, 136, 0);
+    --background-color: rgb(205, 243, 148);
+    --text-color: #333;
+    --shadow-color: rgba(0, 0, 0, 0.2);
+    
+    /* Spacing */
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+}
+
+/* Base styles */
+body, html {
+    font-family: 'Poppins', 'Montserrat', 'Segoe UI', Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    width: 100%;
+    color: var(--text-color);
+}
+
+::selection {
+    background-color: var(--accent-color);
+    color: white;
+}
+
+h1 {
+    text-align: center;
+    position: relative;
+}
+
+h1::after {
+    content: '';
+    display: block;
+    width: 50px;
+    height: 3px;
+    background-color: var(--accent-color);
+    margin: 8px auto;
+    border-radius: 2px;
+}
+
+/* Layout */
+#map {
+    width: 100%;
+    height: 100vh;
+    position: static !important;
+}
+
+main {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 10vh;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    z-index: 5;
+}
+
+/* Custom button styling */
+.custom-btn {
+    background-color: rgba(255, 136, 0, 0.8);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.custom-btn:hover {
+    background-color: rgb(74, 133, 34);
+    animation: pulse 1.5s infinite ease-in-out;
+    box-shadow: 0 0 10px rgba(172, 255, 47, 0.7);
+    transition: all 0.2s ease;
+    transform: scale(1.02);
+}
+
+.custom-link {
+    background-color: rgba(255, 136, 0, 0.8);
+    color: white;
+    text-decoration: none;
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+.custom-link:hover {
+    background-color: rgb(74, 133, 34);
+    color: white;
+    text-decoration: none;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    max-height: 10vh;
+    text-align: left;
+    font-size: 0.8rem;
+    background-color: rgba(202, 216, 3, 0.7);
+    width: 100%; 
+    border-top: 1px solid greenyellow; 
+    padding-left: 15%; 
+    padding-right: 15%;
+    z-index: 15;
+}
+
+/* Table styling */
+.custom-table thead th {
+    background-color: rgba(202, 216, 3, 0.7);
+    color: black;
+}
+
+.custom-table tbody td {
+    background-color: rgba(202, 216, 3, 0.7);
+    color: black;
+}
+
+article {
+    position: fixed;
+    top: 12%;
+    bottom: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    z-index: 10;
+    max-height: calc(100vh - 90px);
+    overflow-y: auto;
+    width: 80%;
+    display: block;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.info {
+    padding: var(--spacing-md);
+    padding-bottom: 6rem;
+    background-color: rgba(255, 255, 255, 0.85);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+/* Navigation */
+.custom-navbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding-left: 10vw;
+    background-color: rgba(189, 216, 3, 0.24);
+    z-index: 1000;
+    font-size: 100%;
+    overflow: hidden;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    backdrop-filter: blur(5px);
+}
+
+.custom-navbar .navbar-nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-sm);
+    padding: 0 var(--spacing-sm);
+}
+
+.custom-navbar .nav-item {
+    padding: 0;
+    flex: 1 1 auto;
+    list-style: none;
+}
+
+/* Form elements */
+.custom-form-control {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 8px;
+    transition: border 0.3s ease;
+    width: 100%;
+}
+
+.custom-form-control:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(255, 136, 0, 0.2);
+}
+
+.submit-btn {
+    background-color: var(--secondary-color);
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 10px;
+}
+
+.submit-btn:hover {
+    background-color: #008800;
+    transform: translateY(-2px);
+}
+
+.coordinate-display {
+    font-size: 0.8rem;
+    background-color: grey;
+    color: white;
+    border-radius: 3px;
+    padding: 4px 8px;
+}
+
+/* Modal */
+.custom-modal {
+    position: absolute;
+    top: 10vh;
+    left: 10%;
+    color: var(--text-color);
+    padding: var(--spacing-md);
+    text-align: left;
+    animation: fadeIn 0.5s forwards;
+    box-shadow: 0 4px 20px var(--shadow-color);
+    z-index: 999;
+    display: flex;
+    flex-shrink: 1;
+    border-radius: 8px;
+    max-height: 80vh;
+    overflow-y: auto;
+    background-color: rgba(189, 216, 3, 0.24);
+    backdrop-filter: blur(5px);
+}
+
+.custom-modal form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: var(--spacing-md);
+    border-radius: 8px;
+    background-color: var(--primary-color);
+    font-size: 100%;
+}
+
+.custom-modal::-webkit-scrollbar {
+    width: 8px;
+}
+
+.custom-modal::-webkit-scrollbar-thumb {
+    background-color: var(--accent-color);
+    border-radius: 10px;
+}
+
+/* Map elements */
+.leaflet-marker-icon {
+    background-color: transparent !important;
+    border: none;
+    padding: 0;
+    margin: 0;
+    transition: transform 0.3s ease;
+}
+
+.leaflet-marker-icon:hover {
+    transform: scale(1.2);
+}
+
+.leaflet-popup-content {
+    width: 100%;
+}
+
+.control-button {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 15px 30px;
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 50px;
+    border: none;
+    font-size: 18px;
+    z-index: 100;
+    color: black;
+}
+
+.marker-cluster {
+    background-color: rgb(249, 170, 61) !important;
+    border-radius: 100px;
+    box-shadow: 0 0 10px rgba(85, 38, 5, 0.7);
+}
+
+.fa, .far, .fas {
+    color: black;
+    text-shadow: -1px 0 var(--accent-color), 0 1px var(--accent-color), 
+                 1px 0 var(--accent-color), 0 -1px var(--accent-color);
+    margin-left: -10px;
+    margin-top: -10px;
+    font-size: 1.5rem;
+    filter: drop-shadow(0 0 0.2rem var(--accent-color));
+}
+
+/* Notifications */
+.alert-custom {
+    position: absolute;
+    display: flex;
+    width: max-content;
+    z-index: 1001;
+    border-radius: 20px;
+    background-color: rgba(189, 216, 3, 0.6);
+    top: 12vh;
+    left: 10vw;
+    padding: var(--spacing-md);
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 15px var(--shadow-color);
+    animation: fadeOut 15s forwards;
+}
+
+.alert-custom li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 1.2rem;
+    color: black;
+}
+
+/* Carousel styles */
+.carousel-control {
+    z-index: 2;
+}
+
+.carousel-control:hover {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.carousel-items {
+    scroll-behavior: smooth;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.carousel-items::-webkit-scrollbar {
+    display: none;
+}
+
+/* Animations */
+@keyframes fadeOut {
+    0%   { opacity: 1; transform: translateY(0); }
+    90%  { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-20px); }
+}
+
+@keyframes fadeIn {
+    0%   { opacity: 0; transform: translateY(0); }
+    90%  { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
+    50% { box-shadow: 0 0 15px rgba(172, 255, 47, 0.9); }
+    100% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+    .custom-modal {
+        width: 90%;
+        left: 5%;
+        right: 5%;
+    }
+    
+    img#logo {
+        max-height: 5vh;
+    }
+    
+    .custom-navbar {
+        height: 10vh;
+    }
+    
+    .custom-navbar .navbar-nav {
+        justify-content: center;
+    }
+}
diff --git a/templates/base.html b/templates/base.html
index f0600fe..5fa0c91 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -23,10 +23,35 @@
     <link href="{{ url_for('static', filename='MarkerCluster.Default.css')}}">
     <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
 
-    <meta name="description" content="Bachemapa es una plataforma dedicada a documentar y reportar problemas con el desarrollo urbano en Querétaro, México. Encuentra y aporta información actualizada sobre baches, deficiencias en infraestructura y más.">
-
-    <!-- Palabras clave para SEO -->
-    <meta name="keywords" content="Querétaro, problemas urbanos, baches, infraestructura, desarrollo urbano, reporte de baches, comunidad, ciudadanía, urbanización, planificación, deficiencias urbanas">
+    <!-- Primary Meta Tags -->
+    <meta name="description" content="Bachemapa: plataforma colaborativa para documentar y visualizar el estado de la infraestructura urbana en Querétaro, México. Información actualizada sobre mantenimiento vial e infraestructura pública.">
+    <meta name="keywords" content="Querétaro, infraestructura urbana, mantenimiento vial, desarrollo urbano, mapeo colaborativo, documentación urbana, participación ciudadana, urbanización, planificación urbana, vialidades, reporte de baches">
+    
+    <!-- Schema.org markup for Google -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebApplication",
+      "name": "Bachemapa",
+      "description": "Plataforma para documentar y visualizar el estado de la infraestructura urbana en Querétaro",
+      "url": "https://baches.qro.mx",
+      "applicationCategory": "MapApplication",
+      "operatingSystem": "All",
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "MXN"
+      }
+    }
+    </script>
+    
+    <!-- Robots meta tag -->
+    <meta name="robots" content="index, follow">
+    
+    <!-- Language and geo tags -->
+    <meta name="language" content="es">
+    <meta name="geo.region" content="MX-QUE">
+    <meta name="geo.placename" content="Querétaro">
 
     <!-- Autor de la página -->
     <meta name="author" content="Kernel Panic Room">
diff --git a/templates/camera.html b/templates/camera.html
index bb273af..7667165 100644
--- a/templates/camera.html
+++ b/templates/camera.html
@@ -51,10 +51,10 @@
 </div>
 
 <div style="position: absolute; bottom: 0; width: 100%; display: flex; flex-direction: column; padding: 10px; box-sizing: border-box;">
-    <button id="capture-btn" class="control-button" style="margin: 10px;">Tomar foto</button>
+    <button id="capture-btn" class="control-button" style="margin: 10px; right:20%"><i class="fa fas fa-camera"></i></button>
     <div style="display: flex; justify-content: space-between; width: 100%; box-sizing: border-box;">
-        <button id="retake-btn" class="control-button" style="display: none; margin: 10px 5px 10px 10px; flex: 1; left:20%; background-color: rgba(180,0,0,0.6);">Nueva foto</button>
-        <button id="send-btn" class="control-button" style="display: none; margin: 10px 10px 10px 5px; flex: 1;">Enviar foto</button>
+        <button id="retake-btn" class="control-button" style="display: none; margin: 10px 5px 10px 10px; flex: 1; left:20%; background-color: rgba(231, 9, 9, 0.671);color:white; left:20%"><i class="fas fa-redo"></i></button>
+        <button id="send-btn" class="control-button" style="display: none; margin: 10px 10px 10px 5px; flex: 1; background-color: rgba(49, 182, 28, 0.6);color:white; right: 20%;"><i class="fas fa-paper-plane"></i></button>
     </div>
 </div>
 
@@ -66,9 +66,9 @@
     
     <!-- Fallback file input for unsupported browsers -->
     <div id="file-fallback">
-        <label for="photo">Take/Choose a Photo:</label>
+        <label for="photo">Toma o selecciona una foto:</label>
         <input type="file" name="photo" id="photo" accept="image/*" capture="environment" required>
-        <button type="submit">Upload</button>
+        <button type="submit">Subir</button>
     </div>
 </form>
 
@@ -148,7 +148,13 @@
             canvas.toBlob(function(blob) {
                 const formData = new FormData(form);
                 formData.delete('photo'); // Remove any file input value
-                formData.append('photo', blob, 'camera-capture.jpg');
+                // Generate a filename with timestamp and random element
+                const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+                const randomId = Math.floor(Math.random() * 10000);
+                const filename = `photo-${timestamp}-${randomId}.jpg`;
+                
+                // Add the photo blob with the dynamic filename
+                formData.append('photo', blob, filename);
                 
                 // Submit form data via fetch
                 fetch(form.action, {
@@ -157,7 +163,7 @@
                 }).then(response => {
                     if (response.redirected) {
                         window.location.href = response.url;
-                    } else (response.ok) {
+                    } else if(response.ok) {
                         console.log('Success:', response);
                         window.location.href = '{{ url_for('dashboard') }}';
                     }
diff --git a/templates/dashboard.html b/templates/dashboard.html
index ead8c1f..e24bb45 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,4 +1,4 @@
-{% extends 'secondbase.html' %}
+{% extends 'base.html' %}
 {% block content %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
 
@@ -31,45 +31,22 @@
 {% if pins %}
     {% for pin in pins %}
 
-    <table border="1" cellpadding="5" cellspacing="0">
-      <tbody>
-        <tr>
-        <td><b>Agregado el</b></td>
-        <td>{{ pin.time }}</td>
-        </tr>
-        <tr>
-        <td><b>Tipo de Mejora Urbana:</b></td>
-        <td>{{ pin.typeofpin }}</td>
-        </tr>
-        <tr>
-        <td><b>Descripción</b></td>
-        <td>{{ pin.description }}</td>
-        </tr>
-        <tr>
-        <td><b>Dirección</b></td>
-        <td>{{ pin.address }}</td>
-        </tr>
-        <tr>
-        <td><b>Foto</b></td>
-        <td><img style="max-height: 66px;" src="{{ pin.photo }}"></td>
-        </tr>
-        <tr>
-        <td><b>Latitud:</b></td>
-        <td>{{ pin.lat }}</td>
-        </tr>
-        <tr>
-        <td><b>Longitud:</b></td>
-        <td>{{ pin.lng }}</td>
-        </tr>
-        <tr>
-        <td><b>Acciones:</b></td>
-        <td>
-          <a href="/remove_pin/{{pin._id}}"><button type="button">Eliminar</button></a>
-          <button type="button" onclick="openEditModal('{{pin._id}}')">Editar</button>
-        </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="pin-card" style="margin-bottom: 2rem; background-color: #f8f9fa; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-wrap: wrap;">
+      <div class="pin-image" style="flex: 0 0 250px; padding: 15px; display: flex; align-items: center; justify-content: center;">
+      <img style="max-width: 100%; max-height: 200px; object-fit: cover; border-radius: 4px;" src="{{ pin.photo }}" alt="Foto de mejora urbana">
+      </div>
+      <div class="pin-data" style="flex: 1; padding: 15px;">
+      <h4 style="margin-top: 0; color: #333;">{{ pin.typeofpin }}</h4>
+      <p><strong>Agregado el:</strong> {{ pin.time }}</p>
+      <p><strong>Descripción:</strong> {{ pin.description }}</p>
+      <p><strong>Dirección:</strong> {{ pin.address }}</p>
+      <p><small>Coordenadas: {{ pin.lat }}, {{ pin.lng }}</small></p>
+      <div class="pin-actions" style="margin-top: 15px;">
+        <button type="button" onclick="openEditModal('{{pin._id}}')" style="background-color: #007bff; color: white; border: none; padding: 6px 12px; border-radius: 4px; margin-right: 8px; cursor: pointer;">Editar</button>
+        <a href="/remove_pin/{{pin._id}}"><button type="button" style="background-color: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;">Eliminar</button></a>
+      </div>
+      </div>
+    </div>
 
     <!-- Modal para editar pin -->
     <div id="editModal{{pin._id}}" class="modal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);">
@@ -79,7 +56,9 @@
       <form action="/edit_pin/{{pin._id}}" method="post">
         <div style="margin-bottom:15px;">
         <label for="typeofpin{{pin._id}}"><b>Tipo de Mejora Urbana:</b></label>
-        <input type="text" id="typeofpin{{pin._id}}" name="typeofpin" value="{{pin.typeofpin}}" style="width:100%; padding:8px;">
+        <select id="typeofpin{{pin._id}}" name="typeofpin" style="width:100%; padding:8px;">
+
+        </select>
         </div>
         <div style="margin-bottom:15px;">
         <label for="description{{pin._id}}"><b>Descripción:</b></label>
@@ -95,6 +74,18 @@
     </div>
 
     <script type="text/javascript">
+      
+      var iconTypes2 = {
+       'bache': '⚠️',
+       'coladera': '⭕',
+       'obra sin terminar': '🔧',
+       'escombro': '🗑️',
+       'robo-asalto': '💀',
+       'biciestacionamiento': '🏁',
+       'mala iluminación': '💡',
+       'bici blanca': '🚲',
+      'zapato blanco': '👟',
+         };
       function openEditModal(id) {
       document.getElementById('editModal'+id).style.display = 'block';
       }
@@ -102,9 +93,20 @@
       function closeEditModal(id) {
       document.getElementById('editModal'+id).style.display = 'none';
       }
-    </script></div>
+    </script>
 
     {% endfor %}
 {% endif %}
 </div>
+<script>
+  window.onload = function() {
+    const typeofpins = document.getElementsByName('typeofpin');
+    for (let i = 0; i < typeofpins.length; i++) {
+      for (const iconType in iconTypes2) {
+        const capitalizedIconType = iconType.charAt(0).toUpperCase() + iconType.slice(1);
+        typeofpins[i].innerHTML += '<option value="'+iconType+'">'+iconTypes2[iconType]+' '+capitalizedIconType+'</option>';
+      }
+    }
+  }
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/error.html b/templates/error.html
index d10917e..b5374a2 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -1,4 +1,4 @@
-{% extends 'secondbase.html' %} 
+{% extends 'base.html' %} 
 {% block content %}
     <section>
     {% if message %}
diff --git a/templates/index.html b/templates/index.html
index e67f00d..c7051cf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -106,7 +106,7 @@
 
         {% if current_user.is_authenticated %}
         <div style="position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 999;">
-            <button class="control-button"><a href="/camera" class="btn btn-primary">Tomar foto</a></button>
+            <button class="control-button" onclick="window.location.href='/camera'"><i class="fas fa-camera"></i></button>
         </div>
         {% endif %}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/leaderboard.html b/templates/leaderboard.html
index cda20b9..fc7885b 100644
--- a/templates/leaderboard.html
+++ b/templates/leaderboard.html
@@ -1,4 +1,4 @@
-{% extends 'secondbase.html' %}
+{% extends 'base.html' %}
 {% block content %}
 <div class="container" style="background-color: rgba(255,255,255,0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(15px); padding:2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
     <!-- Header -->
diff --git a/templates/login.html b/templates/login.html
index dbbe0ef..5c609b5 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,4 +1,4 @@
-{% extends 'secondbase.html' %}
+{% extends 'base.html' %}
 {% block content %}
 <div class="container" style="display: flex; justify-content: center; align-items: center; min-width: 40vw; flex-direction: column;">
 
diff --git a/templates/nav.html b/templates/nav.html
index 1114912..313a915 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -1,4 +1,4 @@
-<nav style="height: auto;">
+<nav style="height: auto; align-items: center;">
     <ul>
         <a href="/">
             <li style="display: flex; align-items: center;">
@@ -11,21 +11,22 @@
     <ul>
         <!-- Mobile menu toggle -->
         <!-- Mobile menu toggle (only appears on screens less than 600px wide) -->
-        <details role="list" dir="rtl" class="mobile-menu">
-            <summary aria-haspopup="listbox" role="link" class="secondary">
-                <i class="fas fa-bars"></i>
+        <details role="list" dir="rtl" class="mobile-menu" style="margin:0; margin-right:5rem; position: relative;">
+            <summary aria-haspopup="listbox" role="link" class="secondary" style="transition: transform 0.3s ease;">
+            <i style="color:white" class="fas fa-bars"></i>
             </summary>
-            <ul role="listbox">
-                {% if current_user.is_authenticated %}
-                <li><a id="pinner-top" href="#" role="button">Agregar</a></li>
-                <li><a href="/logout" role="button" class="secondary">Cerrar Sesión</a></li>
-                <li><a href="/dashboard" role="button">Perfil</a></li>
+            <ul role="listbox" style="position: absolute; right: 0; top: 100%; transition: transform 0.3s ease; transform: translateX(0);">
+            {% if current_user.is_authenticated %}
+                <li><a id="pinner-top" href="#" role="button"><i class="fas fa-plus"></i></a></li>
+                <li><a href="/dashboard" role="button"><i class="fas fa-user"></i></a></li>
+                <li><a href="/leaderboard" role="button"><i class="fas fa-trophy"></i></a></li>
+                <li><a href="/quienes" role="button" class="secondary"><i class="fas fa-info-circle"></i></a></li>
+                <li><a href="/logout" role="button" class="secondary"><i class="fas fa-sign-out-alt"></i></a></li>
                 {% else %}
-                <li><a href="/thelogin" role="button">Iniciar Sesión</a></li>
+                <li><a href="/thelogin" role="button"><i class="fas fa-sign-in-alt"></i></a></li>
+                <li><a href="/leaderboard" role="button"><i class="fas fa-trophy"></i></a></li>
+                <li><a href="/quienes" role="button" class="secondary"><i class="fas fa-info-circle"></i></a></li>
                 {% endif %}
-                <li><a href="/quienes" role="button" class="secondary">Somos</a></li>
-                <li><a href="/leaderboard" role="button">Bachistas ★</a></li>
-                <li><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
             </ul>
         </details>
 
@@ -40,12 +41,11 @@
             {% endif %}
             <li><a href="/quienes" role="button" class="secondary">Somos</a></li>
             <li><a href="/leaderboard" role="button">Bachistas ★</a></li>
-            <li><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
         </ul>
     </ul>
 
     <style>
-        @media (max-width: 715px) {
+        @media (max-width: 810px) {
             .desktop-menu {
                 display: none;
             }
@@ -54,7 +54,7 @@
             }
         }
         
-        @media (min-width: 716px) {
+        @media (min-width: 811px) {
             .mobile-menu {
                 display: none;
             }
@@ -62,7 +62,14 @@
                 display: block;
             }
         }
+        body {
+            background-image: url("{{ url_for('static', filename='images/bg-trees.jpg') }}");
+            background-size: cover;
+        }
     </style>
 
 
-</nav>
\ No newline at end of file
+</nav>
+
+<!-- FAQ button is absolutely positioned -->
+<li style="display: block; position: absolute; right: 2rem;bottom:2rem; z-index:1200"><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
\ No newline at end of file
diff --git a/templates/quienes.html b/templates/quienes.html
index 1d164d1..0802a24 100644
--- a/templates/quienes.html
+++ b/templates/quienes.html
@@ -1,4 +1,4 @@
-{% extends 'secondbase.html' %}
+{% extends 'base.html' %}
 {% block content %}
 <div class="container" style="max-width: 80vw; max-height: 80vh; margin: 2rem auto; overflow-y: auto; padding: 1rem;">
     <div class="info" style="margin-bottom: 2rem;">
diff --git a/templates/register.html b/templates/register.html
index 863dea7..3e87d6d 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -1,4 +1,4 @@
-{% extends 'secondbase.html' %}
+{% extends 'base.html' %}
 
 {% block content %}
 <h1>Registro de nuevo usuario</h1>