diff --git a/locale/es_ES/LC_MESSAGES/django.po b/locale/es_ES/LC_MESSAGES/django.po
index aa55e4c..cba2abf 100644
--- a/locale/es_ES/LC_MESSAGES/django.po
+++ b/locale/es_ES/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-11-22 21:22+0100\n"
+"POT-Creation-Date: 2024-11-23 13:00+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -21,294 +21,303 @@ msgstr ""
 msgid "No se puede borrar el producto"
 msgstr "No se puede borrar el producto"
 
-#: shop/filters.py:9
+#: shop/filters.py:10
 msgid "Nombre"
 msgstr "Nombre"
 
-#: shop/filters.py:11
+#: shop/filters.py:12
 msgid "Etiquetas"
 msgstr "Etiquetas"
 
-#: shop/models.py:11
+#: shop/models.py:12
 msgid "fecha de creación"
 msgstr "fecha de creación"
 
-#: shop/models.py:14
+#: shop/models.py:15
 msgid "fecha de última modificación"
 msgstr "fecha de última modificación"
 
-#: shop/models.py:28
+#: shop/models.py:29
 msgid "etiqueta"
 msgstr "etiqueta"
 
-#: shop/models.py:29 shop/models.py:65
+#: shop/models.py:30 shop/models.py:66
 msgid "etiquetas"
 msgstr "etiquetas"
 
-#: shop/models.py:39
+#: shop/models.py:40
 msgid "código de referencia"
 msgstr "código de referencia"
 
-#: shop/models.py:45 shop/models.py:185 shop/models.py:212 shop/models.py:239
+#: shop/models.py:46 shop/models.py:188 shop/models.py:215 shop/models.py:242
 msgid "nombre"
 msgstr "nombre"
 
-#: shop/models.py:50
+#: shop/models.py:51
 msgid "descripción"
 msgstr "descripción"
 
-#: shop/models.py:56
+#: shop/models.py:57
 msgid "stock"
 msgstr "stock"
 
-#: shop/models.py:59
+#: shop/models.py:60
 msgid "es un activo digital"
 msgstr "es un activo digital"
 
-#: shop/models.py:61
+#: shop/models.py:62
 msgid "URL de descarga"
 msgstr "URL de descarga"
 
-#: shop/models.py:63
+#: shop/models.py:64
 msgid "imágenes"
 msgstr "imágenes"
 
-#: shop/models.py:71 shop/models.py:243
+#: shop/models.py:72 shop/models.py:246
 msgid "marca"
 msgstr "marca"
 
-#: shop/models.py:73
+#: shop/models.py:75
 msgid "Slug"
 msgstr "Slug"
 
-#: shop/models.py:92 shop/models.py:105 shop/models.py:134 shop/models.py:259
+#: shop/models.py:95 shop/models.py:108 shop/models.py:137 shop/models.py:262
 msgid "producto"
 msgstr "producto"
 
-#: shop/models.py:93
+#: shop/models.py:96
 msgid "productos"
 msgstr "productos"
 
-#: shop/models.py:99 shop/models.py:272
+#: shop/models.py:102 shop/models.py:275
 msgid "precio"
 msgstr "precio"
 
-#: shop/models.py:101
+#: shop/models.py:104
 msgid "fecha"
 msgstr "fecha"
 
-#: shop/models.py:111
+#: shop/models.py:114
 msgid "impuesto aplicable"
 msgstr "impuesto aplicable"
 
-#: shop/models.py:113
+#: shop/models.py:116
 msgid "es el precio actual"
 msgstr "es el precio actual"
 
-#: shop/models.py:124 shop/models.py:125
+#: shop/models.py:127 shop/models.py:128
 msgid "precio de producto"
 msgstr "precio de producto"
 
-#: shop/models.py:131
+#: shop/models.py:134
 msgid "código"
 msgstr "código"
 
-#: shop/models.py:140 shop/models.py:267
+#: shop/models.py:143 shop/models.py:270
 msgid "cantidad"
 msgstr "cantidad"
 
-#: shop/models.py:143
+#: shop/models.py:146
 msgid "fecha de caducidad / consumo preferente"
 msgstr "fecha de caducidad / consumo preferente"
 
-#: shop/models.py:150 shop/models.py:233
+#: shop/models.py:153 shop/models.py:236
 msgid "proveedor"
 msgstr "proveedor"
 
-#: shop/models.py:157
+#: shop/models.py:160
 msgid "remesa de producto"
 msgstr "remesa de producto"
 
-#: shop/models.py:158
+#: shop/models.py:161
 msgid "remesas de productos"
 msgstr "remesas de productos"
 
-#: shop/models.py:163
+#: shop/models.py:166
 msgid "código de impuesto"
 msgstr "código de impuesto"
 
-#: shop/models.py:166
+#: shop/models.py:169
 msgid "valor entero (porcentaje)"
 msgstr "valor entero (porcentaje)"
 
-#: shop/models.py:173
+#: shop/models.py:176
 msgid "impuesto"
 msgstr "impuesto"
 
-#: shop/models.py:174 shop/models.py:292
+#: shop/models.py:177 shop/models.py:295
 msgid "impuestos"
 msgstr "impuestos"
 
-#: shop/models.py:183 shop/models.py:210
+#: shop/models.py:186 shop/models.py:213
 msgid "documento de identidad"
 msgstr "documento de identidad"
 
-#: shop/models.py:187
+#: shop/models.py:190
 msgid "apellidos"
 msgstr "apellidos"
 
-#: shop/models.py:189
+#: shop/models.py:192
 msgid "e-mail"
 msgstr "e-mail"
 
-#: shop/models.py:191 shop/models.py:223 shop/models.py:360
+#: shop/models.py:194 shop/models.py:226 shop/models.py:363
 msgid "dirección"
 msgstr "dirección"
 
-#: shop/models.py:192 shop/models.py:224 shop/models.py:363
+#: shop/models.py:195 shop/models.py:227 shop/models.py:366
 msgid "ciudad"
 msgstr "ciudad"
 
-#: shop/models.py:193 shop/models.py:225 shop/models.py:366
+#: shop/models.py:196 shop/models.py:228 shop/models.py:369
 msgid "región"
 msgstr "región"
 
-#: shop/models.py:194 shop/models.py:226 shop/models.py:369
+#: shop/models.py:197 shop/models.py:229 shop/models.py:372
 msgid "país"
 msgstr "país"
 
-#: shop/models.py:195 shop/models.py:227 shop/models.py:372
+#: shop/models.py:198 shop/models.py:230 shop/models.py:375
 msgid "código postal"
 msgstr "código postal"
 
-#: shop/models.py:201 shop/models.py:338
+#: shop/models.py:204 shop/models.py:341
 msgid "cliente"
 msgstr "cliente"
 
-#: shop/models.py:202
+#: shop/models.py:205
 msgid "clientes"
 msgstr "clientes"
 
-#: shop/models.py:214
+#: shop/models.py:217
 msgid "e-mail de contacto"
 msgstr "e-mail de contacto"
 
-#: shop/models.py:220
+#: shop/models.py:223
 msgid "Teléfono de contacto"
 msgstr "Teléfono de contacto"
 
-#: shop/models.py:234
+#: shop/models.py:237
 msgid "proveedores"
 msgstr "proveedores"
 
-#: shop/models.py:244
+#: shop/models.py:247
 msgid "marcas"
 msgstr "marcas"
 
-#: shop/models.py:252 shop/models.py:389
+#: shop/models.py:255 shop/models.py:392
 msgid "pedido"
 msgstr "pedido"
 
-#: shop/models.py:282
+#: shop/models.py:285
 msgid "total sin impuestos"
 msgstr "total sin impuestos"
 
-#: shop/models.py:287
+#: shop/models.py:290
 msgid "valor de impuestos"
 msgstr "valor de impuestos"
 
-#: shop/models.py:297 shop/models.py:333
+#: shop/models.py:300 shop/models.py:336
 msgid "total"
 msgstr "total"
 
-#: shop/models.py:304
+#: shop/models.py:307
 msgid "línea de pedido"
 msgstr "línea de pedido"
 
-#: shop/models.py:305
+#: shop/models.py:308
 msgid "líneas de pedido"
 msgstr "líneas de pedido"
 
-#: shop/models.py:310
+#: shop/models.py:313
 msgid "pendiente de pago"
 msgstr "pendiente de pago"
 
-#: shop/models.py:311
+#: shop/models.py:314
 msgid "pagado"
 msgstr "pagado"
 
-#: shop/models.py:312
+#: shop/models.py:315
 msgid "preparado"
 msgstr "preparado"
 
-#: shop/models.py:313
+#: shop/models.py:316
 msgid "listo para ser enviado"
-msgstr"listo para ser enviado"
+msgstr "listo para ser enviado"
 
-#: shop/models.py:314
+#: shop/models.py:317
 msgid "enviado"
 msgstr "enviado"
 
-#: shop/models.py:315
+#: shop/models.py:318
 msgid "entregado"
 msgstr "entregado"
 
-#: shop/models.py:316
+#: shop/models.py:319
 msgid "finalizado"
 msgstr "finalizado"
 
-#: shop/models.py:317
+#: shop/models.py:320
 msgid "cancelado"
 msgstr "cancelado"
 
-#: shop/models.py:318
+#: shop/models.py:321
 msgid "devuelto"
 msgstr "devuelto"
 
-#: shop/models.py:320
+#: shop/models.py:323
 msgid "UUID"
 msgstr "UUID"
 
-#: shop/models.py:323
+#: shop/models.py:326
 msgid "estado"
 msgstr "estado"
 
-#: shop/models.py:330
+#: shop/models.py:333
 msgid "base imponible"
 msgstr "base imponible"
 
-#: shop/models.py:343
+#: shop/models.py:346
 msgid "dirección de facturación"
 msgstr "dirección de facturación"
 
-#: shop/models.py:346
+#: shop/models.py:349
 msgid "ciudad de facturación"
 msgstr "ciudad de facturación"
 
-#: shop/models.py:349
+#: shop/models.py:352
 msgid "región de facturación"
 msgstr "región de facturación"
 
-#: shop/models.py:352
+#: shop/models.py:355
 msgid "país de facturación"
 msgstr "país de facturación"
 
-#: shop/models.py:355
+#: shop/models.py:358
 msgid "código postal de facturación"
 msgstr "código postal de facturación"
 
-#: shop/models.py:375
+#: shop/models.py:378
 msgid "teléfono de contacto"
 msgstr "teléfono de contacto"
 
-#: shop/models.py:390
+#: shop/models.py:393
 msgid "pedidos"
 msgstr "pedidos"
 
+#: shop/templates/components/product_card.html:85
+#: shop/templates/shop/product_detail.html:161
+msgid "Añadir al carrito"
+msgstr "Añadir al carrito"
+
 #: shop/templates/shop/index.html:28
 msgid "Mostrar mas"
 msgstr "Mostrar mas"
 
+#: shop/templates/shop/product_detail.html:134
+msgid "Añadir a lista de deseados"
+msgstr "Añadir a lista de deseados"
+
 #: tpv/forms.py:7
 msgid "Introduce tu e-mail"
 msgstr "Introduce tu e-mail"
diff --git a/shop/templates/components/generic/navbar.html b/shop/templates/components/generic/navbar.html
new file mode 100644
index 0000000..8beb443
--- /dev/null
+++ b/shop/templates/components/generic/navbar.html
@@ -0,0 +1,328 @@
+{% load i18n %}
+<nav class="bg-white dark:bg-gray-800 antialiased">
+  <!-- Left side -->
+  <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4">
+    <div class="flex items-center justify-between">
+
+      <!-- Title -->
+      <div class="flex items-center space-x-8">
+        <div class="shrink-0">
+          <a href="{% url 'shop:index' %}">
+            <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Shoppy</h1>
+          </a>
+        </div>
+
+        <!-- Categories -->
+        <ul class="hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center">
+          <li>
+            <a href="#" title=""
+               class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
+              {% translate 'Inicio' %}
+            </a>
+          </li>
+          <li class="shrink-0">
+            <a href="#" title=""
+               class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
+              {% translate 'Más vendidos' %}
+            </a>
+          </li>
+          <li class="shrink-0">
+            <a href="#" title=""
+               class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
+              {% translate 'Ideas de regalo' %}
+            </a>
+          </li>
+          <li class="shrink-0">
+            <a href="#" title=""
+               class="text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
+              {% translate 'Ofertas del día' %}
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Right side -->
+      <div class="relative flex items-center lg:space-x-2">
+
+        <!-- Show/Hide cart -->
+        <button hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
+          id="myCartDropdownButton1"
+                data-dropdown-toggle="myCartDropdown1" type="button"
+                class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
+          <span class="sr-only">
+            {% translate 'Carrito' %}
+          </span>
+          <svg class="w-5 h-5 lg:me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+               fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7H7.312"/>
+          </svg>
+          <span class="hidden sm:flex">{% translate 'Carrito' %}</span>
+          <svg class="hidden sm:flex w-4 h-4 text-gray-900 dark:text-white ms-1" aria-hidden="true"
+               xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="m19 9-7 7-7-7"/>
+          </svg>
+        </button>
+
+        <!-- Cart -->
+        <div id="myCartDropdown1"
+             class="absolute top-10 hidden z-10 mx-auto max-w-sm space-y-4 overflow-hidden rounded-lg bg-white p-4 antialiased shadow-lg dark:bg-gray-800">
+          <div class="grid grid-cols-2">
+            <div>
+              <a href="#"
+                 class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">Apple
+                iPhone 15</a>
+              <p class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">$599</p>
+            </div>
+
+            <div class="flex items-center justify-end gap-6">
+              <p class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">Qty: 1</p>
+
+              <button data-tooltip-target="tooltipRemoveItem1a" type="button"
+                      class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600">
+                <span class="sr-only"> Remove </span>
+                <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                     viewBox="0 0 24 24">
+                  <path fill-rule="evenodd"
+                        d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm7.7-3.7a1 1 0 0 0-1.4 1.4l2.3 2.3-2.3 2.3a1 1 0 1 0 1.4 1.4l2.3-2.3 2.3 2.3a1 1 0 0 0 1.4-1.4L13.4 12l2.3-2.3a1 1 0 0 0-1.4-1.4L12 10.6 9.7 8.3Z"
+                        clip-rule="evenodd"/>
+                </svg>
+              </button>
+              <div id="tooltipRemoveItem1a" role="tooltip"
+                   class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+                Remove item
+                <div class="tooltip-arrow" data-popper-arrow></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2">
+            <div>
+              <a href="#"
+                 class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">Apple
+                iPad Air</a>
+              <p class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">$499</p>
+            </div>
+
+            <div class="flex items-center justify-end gap-6">
+              <p class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">Qty: 1</p>
+
+              <button data-tooltip-target="tooltipRemoveItem2a" type="button"
+                      class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600">
+                <span class="sr-only"> Remove </span>
+                <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                     viewBox="0 0 24 24">
+                  <path fill-rule="evenodd"
+                        d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm7.7-3.7a1 1 0 0 0-1.4 1.4l2.3 2.3-2.3 2.3a1 1 0 1 0 1.4 1.4l2.3-2.3 2.3 2.3a1 1 0 0 0 1.4-1.4L13.4 12l2.3-2.3a1 1 0 0 0-1.4-1.4L12 10.6 9.7 8.3Z"
+                        clip-rule="evenodd"/>
+                </svg>
+              </button>
+              <div id="tooltipRemoveItem2a" role="tooltip"
+                   class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+                Remove item
+                <div class="tooltip-arrow" data-popper-arrow></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2">
+            <div>
+              <a href="#"
+                 class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">Apple
+                Watch SE</a>
+              <p class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">$598</p>
+            </div>
+
+            <div class="flex items-center justify-end gap-6">
+              <p class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">Qty: 2</p>
+
+              <button data-tooltip-target="tooltipRemoveItem3b" type="button"
+                      class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600">
+                <span class="sr-only"> Remove </span>
+                <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                     viewBox="0 0 24 24">
+                  <path fill-rule="evenodd"
+                        d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm7.7-3.7a1 1 0 0 0-1.4 1.4l2.3 2.3-2.3 2.3a1 1 0 1 0 1.4 1.4l2.3-2.3 2.3 2.3a1 1 0 0 0 1.4-1.4L13.4 12l2.3-2.3a1 1 0 0 0-1.4-1.4L12 10.6 9.7 8.3Z"
+                        clip-rule="evenodd"/>
+                </svg>
+              </button>
+              <div id="tooltipRemoveItem3b" role="tooltip"
+                   class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+                Remove item
+                <div class="tooltip-arrow" data-popper-arrow></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2">
+            <div>
+              <a href="#"
+                 class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">Sony
+                Playstation 5</a>
+              <p class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">$799</p>
+            </div>
+
+            <div class="flex items-center justify-end gap-6">
+              <p class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">Qty: 1</p>
+
+              <button data-tooltip-target="tooltipRemoveItem4b" type="button"
+                      class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600">
+                <span class="sr-only"> Remove </span>
+                <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                     viewBox="0 0 24 24">
+                  <path fill-rule="evenodd"
+                        d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm7.7-3.7a1 1 0 0 0-1.4 1.4l2.3 2.3-2.3 2.3a1 1 0 1 0 1.4 1.4l2.3-2.3 2.3 2.3a1 1 0 0 0 1.4-1.4L13.4 12l2.3-2.3a1 1 0 0 0-1.4-1.4L12 10.6 9.7 8.3Z"
+                        clip-rule="evenodd"/>
+                </svg>
+              </button>
+              <div id="tooltipRemoveItem4b" role="tooltip"
+                   class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+                Remove item
+                <div class="tooltip-arrow" data-popper-arrow></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2">
+            <div>
+              <a href="#"
+                 class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">Apple
+                iMac 20"</a>
+              <p class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">$8,997</p>
+            </div>
+
+            <div class="flex items-center justify-end gap-6">
+              <p class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">Qty: 3</p>
+
+              <button data-tooltip-target="tooltipRemoveItem5b" type="button"
+                      class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600">
+                <span class="sr-only"> Remove </span>
+                <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                     viewBox="0 0 24 24">
+                  <path fill-rule="evenodd"
+                        d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm7.7-3.7a1 1 0 0 0-1.4 1.4l2.3 2.3-2.3 2.3a1 1 0 1 0 1.4 1.4l2.3-2.3 2.3 2.3a1 1 0 0 0 1.4-1.4L13.4 12l2.3-2.3a1 1 0 0 0-1.4-1.4L12 10.6 9.7 8.3Z"
+                        clip-rule="evenodd"/>
+                </svg>
+              </button>
+              <div id="tooltipRemoveItem5b" role="tooltip"
+                   class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+                Remove item
+                <div class="tooltip-arrow" data-popper-arrow></div>
+              </div>
+            </div>
+          </div>
+
+          <a href="#" title=""
+             class="mb-2 me-2 inline-flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+             role="button"> Proceed to Checkout </a>
+        </div>
+
+        <!-- Show/Hide user account dropdown -->
+        <button hx-on:click="htmx.toggleClass(htmx.find('#userDropdown1'), 'hidden'); htmx.addClass(htmx.find('#myCartDropdown1'), 'hidden')"
+                id="userDropdownButton1"
+                data-dropdown-toggle="userDropdown1" type="button"
+                class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
+          <svg class="w-5 h-5 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+               fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-width="2"
+                  d="M7 17v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3Zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+          </svg>
+          {% translate 'Mi cuenta' %}
+          <svg class="w-4 h-4 text-gray-900 dark:text-white ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+               width="24" height="24" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="m19 9-7 7-7-7"/>
+          </svg>
+        </button>
+
+        <!-- User account dropdown -->
+        <div id="userDropdown1"
+             class="absolute top-10 hidden z-10 w-56 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700">
+          <ul class="p-2 text-start text-sm font-medium text-gray-900 dark:text-white">
+            <li>
+              <a href="#" title=""
+                 class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
+                My Account
+              </a>
+            </li>
+            <li>
+              <a href="#" title=""
+                 class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
+                My Orders
+              </a>
+            </li>
+            <li>
+              <a href="#" title=""
+                 class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
+                Settings
+              </a>
+            </li>
+            <li>
+              <a href="#" title=""
+                 class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
+                Favourites
+              </a>
+            </li>
+            <li>
+              <a href="#" title=""
+                 class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
+                Delivery Addresses
+              </a>
+            </li>
+            <li>
+              <a href="#" title=""
+                 class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
+                Billing Data
+              </a>
+            </li>
+          </ul>
+
+          <div class="p-2 text-sm font-medium text-gray-900 dark:text-white">
+            <a href="#" title=""
+               class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
+              Sign Out </a>
+          </div>
+        </div>
+
+        <!-- Show/Hide menu items -->
+        <button hx-on:click="htmx.toggleClass(htmx.find('#ecommerce-navbar-menu-1'), 'hidden')" type="button"
+                data-collapse-toggle="ecommerce-navbar-menu-1" aria-controls="ecommerce-navbar-menu-1"
+                aria-expanded="false"
+                class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-2 text-gray-900 dark:text-white">
+          <span class="sr-only">
+            Open Menu
+          </span>
+          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
+               viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 7h14M5 12h14M5 17h14"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div id="ecommerce-navbar-menu-1"
+         class="bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3 hidden px-4 mt-4">
+      <ul class="text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3">
+        <li>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Home</a>
+        </li>
+        <li>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Best Sellers</a>
+        </li>
+        <li>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Gift Ideas</a>
+        </li>
+        <li>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Games</a>
+        </li>
+        <li>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Electronics</a>
+        </li>
+        <li>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Home & Garden</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
diff --git a/shop/templates/components/product_card.html b/shop/templates/components/product_card.html
index d0a605b..93e6d02 100644
--- a/shop/templates/components/product_card.html
+++ b/shop/templates/components/product_card.html
@@ -1,4 +1,5 @@
-<div class="mb-4">
+{% load i18n %}
+<article>
   <div
     class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
     <div class="h-56 w-full">
@@ -50,27 +51,6 @@
         <p class="text-sm font-medium text-gray-900 dark:text-white">5.0</p>
         <p class="text-sm font-medium text-gray-500 dark:text-gray-400">(455)</p>
       </div>
-
-      <ul class="mt-2 flex items-center gap-4">
-        <li class="flex items-center gap-2">
-          <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
-               xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M13 7h6l2 4m-8-4v8m0-8V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9h2m8 0H9m4 0h2m4 0h2v-4m0 0h-5m3.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm-10 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/>
-          </svg>
-          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Fast Delivery</p>
-        </li>
-
-        <li class="flex items-center gap-2">
-          <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
-               xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <path stroke="currentColor" stroke-linecap="round" stroke-width="2"
-                  d="M8 7V6c0-.6.4-1 1-1h11c.6 0 1 .4 1 1v7c0 .6-.4 1-1 1h-1M3 18v-7c0-.6.4-1 1-1h11c.6 0 1 .4 1 1v7c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1Zm8-3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
-          </svg>
-          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Best Price</p>
-        </li>
-      </ul>
-
       <div class="mt-4 flex items-center justify-between gap-4">
         <p
           class="text-2xl font-extrabold leading-tight text-gray-900 dark:text-white">{{ product.price.price_with_tax }}€</p>
@@ -82,9 +62,9 @@
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                   d="M4 4h1.5L8 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm.75-3H7.5M11 7H6.312M17 4v6m-3-3h6"/>
           </svg>
-          Add to cart
+          {% translate 'Añadir al carrito' %}
         </button>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/shop/templates/components/products/list_filters.html b/shop/templates/components/products/list_filters.html
index 4692988..100b100 100644
--- a/shop/templates/components/products/list_filters.html
+++ b/shop/templates/components/products/list_filters.html
@@ -1,3 +1,4 @@
+{% load i18n %}
 <section class="bg-gray-50 dark:bg-gray-900 flex items-center my-4">
   <div class="max-w-screen-xl px-4 mx-auto lg:px-12 w-full">
     <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
@@ -10,7 +11,7 @@
                 hx-swap="innerHTML"
                 hx-push="true"
           >
-            <label for="simple-search" class="sr-only">Buscar</label>
+            <label for="simple-search" class="sr-only">{% translate 'Buscar' %}</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                 <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
@@ -24,7 +25,7 @@
                 type="text"
                 name="name"
                 class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                placeholder="Buscar"
+                placeholder="{% translate 'Buscar' %}"
                 autocomplete="off">
             </div>
           </form>
diff --git a/shop/templates/shop/index.html b/shop/templates/shop/index.html
index 5619c66..a58b7cc 100644
--- a/shop/templates/shop/index.html
+++ b/shop/templates/shop/index.html
@@ -2,6 +2,8 @@
 {% load static i18n %}
 
 {% block main %}
+  {% include 'components/generic/navbar.html' %}
+  {% include 'components/theme-switch.html' %}
   <div>
     {% include 'components/products/list_filters.html' %}
     <section
diff --git a/shop/templates/shop/product_detail.html b/shop/templates/shop/product_detail.html
index 28acae5..ee7768c 100644
--- a/shop/templates/shop/product_detail.html
+++ b/shop/templates/shop/product_detail.html
@@ -1,6 +1,7 @@
 {% extends 'theme/base.html' %}
 
 {% load static %}
+{% load i18n %}
 
 {% block main %}
 
@@ -131,7 +132,7 @@
                   d="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"
                 />
               </svg>
-              Add to favorites
+              {% translate 'Añadir a lista de deseados' %}
             </a>
 
             <a
@@ -158,7 +159,7 @@
                 />
               </svg>
 
-              Add to cart
+              {% translate 'Añadir al carrito' %}
             </a>
           </div>
 
diff --git a/theme/static_src/tailwind.config.js b/theme/static_src/tailwind.config.js
index a76e4be..d066a7b 100644
--- a/theme/static_src/tailwind.config.js
+++ b/theme/static_src/tailwind.config.js
@@ -43,6 +43,7 @@ module.exports = {
      */
     // '../../**/*.py'
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
diff --git a/theme/templates/components/theme-switch.html b/theme/templates/components/theme-switch.html
new file mode 100644
index 0000000..aedc68a
--- /dev/null
+++ b/theme/templates/components/theme-switch.html
@@ -0,0 +1,4 @@
+<button onclick="switchTheme()" id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
+    <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+    <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+</button>
diff --git a/theme/templates/theme/base.html b/theme/templates/theme/base.html
index 6590e27..f466bfb 100644
--- a/theme/templates/theme/base.html
+++ b/theme/templates/theme/base.html
@@ -10,12 +10,26 @@
 
   <script src="https://unpkg.com/htmx.org@2.0.3"></script>
 
+  <script>
+    function switchTheme() {
+      const theme = localStorage.getItem('theme')
+
+      if (theme === 'dark') {
+        document.documentElement.classList.remove('dark')
+        localStorage.setItem('theme', 'light')
+      } else {
+        document.documentElement.classList.add('dark')
+        localStorage.setItem('theme', 'dark')
+      }
+    }
+  </script>
+
   {% tailwind_css %}
   {% block extra_js %}
   {% endblock %}
 </head>
 <body class="bg-gray-50 dark:bg-gray-900">
-<main class="py-8 antialiased md:py-12">
+<main>
   {% block main %}
 
   {% endblock %}