diff --git a/theme/static/css/components.css b/theme/static/css/components.css
new file mode 100644
index 0000000..42326ca
--- /dev/null
+++ b/theme/static/css/components.css
@@ -0,0 +1,80 @@
+@layer components {
+    .card {
+        @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800;
+    }
+
+    .link {
+        @apply text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white;
+    }
+
+    .product-grid {
+        @apply mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5;
+    }
+
+    .button-gray {
+        @apply rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
+        hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
+        focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
+        dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer;
+    }
+
+    .page {
+        @apply flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4;
+    }
+
+    .navbar-bg {
+        @apply bg-white dark:bg-gray-800 antialiased;
+    }
+
+    .navbar-content {
+        @apply max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4;
+    }
+
+    .navbar-align {
+        @apply flex items-center justify-between;
+    }
+
+    .navbar-categories {
+        @apply hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center;
+    }
+
+    .navbar-web-title {
+        @apply text-xl font-semibold text-gray-900 dark:text-white;
+    }
+
+    .navbar-title {
+        @apply flex items-center space-x-8;
+    }
+
+    .navbar-category-link {
+        @apply flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500;
+    }
+
+    .navbar-dropdown-menu {
+        @apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3  px-4 mt-4;
+    }
+
+    .navbar-dropdown-menu-list {
+        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
+    }
+
+    .navbar-dropdown-menu-list-items {
+        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
+    }
+
+    .navbar-dropdown-menu-title {
+        @apply hover:text-primary-700 dark:hover:text-primary-500;
+    }
+
+    .icon-button {
+        @apply flex text-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer;
+    }
+
+    .link-button {
+        @apply inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white;
+    }
+
+    .cart-navbar-floating {
+        @apply absolute top-12 z-10 w-75 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4;
+    }
+}
diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 214b9b7..57c523c 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./components.css";
 
 
 @theme {
@@ -7,7 +8,6 @@
 
     --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
     --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */
-
     --color-primary-50: #fff1f2;
     --color-primary-100: #ffe4e6;
     --color-primary-200: #fecdd3;
diff --git a/theme/templates/components/theme-switch.html b/theme/templates/components/theme-switch.html
index 94672dd..d923554 100644
--- a/theme/templates/components/theme-switch.html
+++ b/theme/templates/components/theme-switch.html
@@ -3,7 +3,7 @@
   id="theme-toggle"
   type="button"
   aria-label="switchtheme"
-  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer">
+  class="icon-button">
     {% include 'components/icons/moon.svg' %}
     {% include 'components/icons/sun.svg' %}
 </button>
diff --git a/theme/templates/theme/main.css.template b/theme/templates/theme/main.css.template
index 14164a3..c755acb 100644
--- a/theme/templates/theme/main.css.template
+++ b/theme/templates/theme/main.css.template
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./components.css";
 
 
 @theme {
diff --git a/web/templates/components/cart/cart_navbar.html b/web/templates/components/cart/cart_navbar.html
index dc71804..bfa7ab8 100644
--- a/web/templates/components/cart/cart_navbar.html
+++ b/web/templates/components/cart/cart_navbar.html
@@ -3,7 +3,7 @@
         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-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white cursor-pointer">
+        class="icon-button">
     {% include 'components/icons/cart.svg' %}
     <span class="hidden sm:flex">
     {% translate 'Carrito' %}</span>
@@ -12,8 +12,7 @@
 
 <!-- Cart -->
 <div id="myCartDropdown1"
-     class="absolute top-12 z-10 w-68 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white
-     antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4 hidden"
+     class="cart-navbar-floating hidden"
 >
     <div>
         {% if cart.items.count == 0 %}
diff --git a/web/templates/components/generic/navbar.html b/web/templates/components/generic/navbar.html
index dc93832..1deb3f0 100644
--- a/web/templates/components/generic/navbar.html
+++ b/web/templates/components/generic/navbar.html
@@ -1,31 +1,31 @@
 {% load i18n %}
 {% load static %}
-<nav class="bg-white dark:bg-gray-800 antialiased">
+<nav class="navbar-bg">
   <!-- Left side -->
-  <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4">
-    <div class="flex items-center justify-between">
+  <div class="navbar-content">
+    <div class="navbar-align">
 
       <!-- Title -->
-      <div class="flex items-center space-x-8">
+      <div class="navbar-title">
         <div class="shrink-0">
           <a class="flex flex-row items-center" href="{% url 'web:index' %}">
             <img class="w-8 h-8 mr-2" src="{{ logo }}" alt="{{ web_title }} logo">
-            <h1 class="text-xl font-semibold text-gray-900 dark:text-white">{{ web_title }}</h1>
+            <h1 class="navbar-web-title">{{ web_title }}</h1>
           </a>
         </div>
 
         <!-- Categories -->
-        <ul class="hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center">
+        <ul class="navbar-categories">
           <li>
             <a href="{% url 'web:index' %}" title=""
-               class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
+               class="navbar-category-link">
               {% translate 'Inicio' %}
             </a>
           </li>
           {% for category in navbar_categories %}
             <li class="shrink-0">
               <a href="{% url 'web:category_view' slug=category.slug %}" title=""
-                 class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
+                 class="navbar-category-link">
                 {{ category.name }}
               </a>
             </li>
@@ -48,7 +48,7 @@
             id="userDropdownButton1"
             data-dropdown-toggle="userDropdown1" type="button"
             aria-label="show menu"
-            class="inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white cursor-pointer">
+            class="icon-button">
             {% include 'components/icons/user.svg' %}
             <span class="hidden sm:flex">
               {% translate 'Mi cuenta' %}
@@ -63,8 +63,8 @@
           </div>
         {% else %}
           <a href="{% url 'web:login' %}"
-             class="inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
-            Inicia sesión
+             class="link-button">
+            {% translate 'Inicia sesión' %}
           </a>
         {% endif %}
 
@@ -73,7 +73,7 @@
                 data-collapse-toggle="ecommerce-navbar-menu-1" aria-controls="ecommerce-navbar-menu-1"
                 aria-expanded="false"
                 aria-label="show menu"
-                class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-4 text-gray-900 dark:text-white cursor-pointer">
+                class="icon-button lg:hidden">
           <span class="sr-only">
             {% translate 'Abrir menú' %}
           </span>
@@ -83,17 +83,17 @@
     </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">
+         class="navbar-dropdown-menu hidden">
+      <ul class="navbar-dropdown-menu-list">
         <li>
           <a href="{% url 'web:index' %}"
-             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Inicio' %}</a>
+             class="navbar-dropdown-menu-title">{% translate 'Inicio' %}</a>
         </li>
 
         {% for category in navbar_categories %}
         <li>
           <a href="{% url 'web:category_view' slug=category.slug %}"
-             class="hover:text-primary-700 dark:hover:text-primary-500">{{ category.name }}</a>
+             class="navbar-dropdown-menu-title">{{ category.name }}</a>
         </li>
         {% endfor %}
       </ul>
diff --git a/web/templates/components/product_card.html b/web/templates/components/product_card.html
index 3553b12..47656c7 100644
--- a/web/templates/components/product_card.html
+++ b/web/templates/components/product_card.html
@@ -1,7 +1,7 @@
 {% 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">
+    class="card">
     <div class="h-56 w-full">
       <a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}">
         <img class="mx-auto h-full dark:hidden" src="{{ product.images.all|first }}"
@@ -13,7 +13,7 @@
     <div class="pt-6">
 
       <a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}"
-         class="text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white">{{ product.name }}</a>
+         class="link">{{ product.name }}</a>
 
 <!--      <div class="mt-2 flex items-center gap-2">-->
 <!--        <div class="flex items-center">-->
diff --git a/web/templates/web/list_products.html b/web/templates/web/list_products.html
index 26b62c1..3468688 100644
--- a/web/templates/web/list_products.html
+++ b/web/templates/web/list_products.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 {% load static %}
 
-<ul class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5">
+<ul class="product-grid">
   {% for product in page %}
     <li>
       {% include 'components/product_card.html' %}
@@ -12,10 +12,7 @@
 <div class="flex justify-center items-center">
   {% if has_previous_page %}
     <button type="button"
-            class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
-    hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
-    focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
-    dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer"
+            class="button-gray"
             hx-get="{% url 'web:list_products' %}{% querystring page=page.previous_page_number %}"
             hx-trigger="click"
             hx-target="#products"
@@ -26,10 +23,7 @@
   {% endif %}
   {% if has_next_page %}
     <button type="button"
-            class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
-    hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
-    focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
-    dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer"
+            class="button-gray"
             hx-get="{% url 'web:list_products' %}{% querystring page=page.next_page_number %}"
             hx-trigger="click"
             hx-target="#products"
@@ -40,6 +34,6 @@
   {% endif %}
 
 </div>
-<span class="flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4">
+<span class="page">
   {% blocktranslate %}Página {{ current_page }} de {{ num_pages }}{% endblocktranslate %}
 </span>