diff --git a/app/views/articles/_article_item.html.erb b/app/views/articles/_article_item.html.erb
index 4872466..a7c4a00 100644
--- a/app/views/articles/_article_item.html.erb
+++ b/app/views/articles/_article_item.html.erb
@@ -34,7 +34,7 @@
     </p>
   </div>
 
-  <div class="flex items-center mt-3 space-x-3 text-gray-500 dark:text-gray-400">
+  <div class="flex items-center mt-3 space-x-3 border-subtle">
     <%= link_to user_path(post.user.username),  class: "flex items-center gap-3" do %>
       <div class="relative flex-shrink-0 w-5 h-5">
         <span style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;">
@@ -48,4 +48,4 @@
       <%= l( post.created_at, format: :long_with_day )%>
     </time>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/articles/mine.html.erb b/app/views/articles/mine.html.erb
index fc57466..9be4665 100644
--- a/app/views/articles/mine.html.erb
+++ b/app/views/articles/mine.html.erb
@@ -5,7 +5,7 @@
 <div class="px-4 sm:px-6 lg:px-8">
   <div class="mb-6 my-4">
     <div class="">
-      <div class="border-b--- border-gray-200 dark:border-gray-700">
+      <div class="border-b--- border-subtle dark:border-gray-700">
         <nav class="-mb-px flex space-x-8 text-2xl" aria-label="Tabs">
           <%= link_to t("articles.my_articles"), mine_articles_path(tab: "all"), class: @tab == "all" ? 'tab-active' : 'tab-default' %>
           <%= link_to t("articles.drafts"), mine_articles_path(tab: "draft"), class: @tab == "draft" ? 'tab-active' : 'tab-default' %>
@@ -17,7 +17,7 @@
 
   <div class="sm:flex sm:items-center">
     <div class="sm:flex-auto">
-      <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
+      <h1 class="text-xl font-semibold text-default ">
         <%= @tab.capitalize %> Articles
       </h1>
       <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
@@ -25,9 +25,9 @@
       </p>
     </div>
     <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
-      <%= link_to t('new_article'), 
-        new_article_path, 
-        class: 'inline-flex items-center justify-center rounded-md border border-transparent bg-brand-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 sm:w-auto' 
+      <%= link_to t('new_article'),
+        new_article_path,
+        class: 'inline-flex items-center justify-center rounded-md border border-transparent bg-brand-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 sm:w-auto'
       %>
     </div>
   </div>
@@ -36,13 +36,13 @@
     <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
       <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
         <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-          <table class="min-w-full divide-y divide-gray-300 dark:text-gray-700">
-            <thead class="bg-gray-50">
+          <table class="min-w-full divide-y divide-muted">
+            <thead class="bg-muted">
               <tr>
-                <th scope="col" class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-200 dark:bg-gray-900">Title</th>
-                <th scope="col" class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-200 dark:bg-gray-900">Author</th>
-                <th scope="col" class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-200 dark:bg-gray-900">Status</th>
-                <th scope="col" class="relative py-3 pl-3 pr-4 sm:pr-6 dark:text-gray-200 dark:bg-gray-900 ">
+                <th scope="col" class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-muted  ">Title</th>
+                <th scope="col" class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-muted  ">Author</th>
+                <th scope="col" class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-muted  ">Status</th>
+                <th scope="col" class="relative py-3 pl-3 pr-4 sm:pr-6   ">
                   <span class="sr-only">Edit</span>
                 </th>
               </tr>
@@ -50,21 +50,21 @@
             <tbody class="divide-y divide-gray-200 dark:divide-gray-800 bg-default">
               <% @posts.each do |post| %>
                 <tr>
-                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 dark:bg-gray-900 sm:pl-6">
+                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-default   sm:pl-6">
                     <div class="w-56 truncate">
                       <%= post.title || "-- untitled" %>
                     </div>
                   </td>
 
-                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-200 dark:bg-gray-900">
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-muted  ">
                     <%= post.user.username %>
                   </td>
-                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-200 dark:bg-gray-900">
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-muted  ">
                     <%= post.state %>
                   </td>
-                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 dark:text-gray-200 dark:bg-gray-900 divide-x space-x-2">
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6   divide-x space-x-2">
                     <%= link_to t('Edit'), edit_article_path(post), class: 'text-brand-600 hover:text-brand-900' %>
-                    
+
                     <%= link_to t('Preview'), preview_article_path(post.signed_id), class: 'text-brand-600 hover:text-brand-900 pl-2' %>
 
                     <% if post.slug %>
diff --git a/app/views/comments/_comment_item.erb b/app/views/comments/_comment_item.erb
index d55cfac..c485fd7 100644
--- a/app/views/comments/_comment_item.erb
+++ b/app/views/comments/_comment_item.erb
@@ -38,7 +38,7 @@
               <%= comment.user.username %>
             <% end %>
           </div>
-          <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+          <p class="mt-0.5 text-sm border-subtle">
             Commented <%= l comment.created_at, format: :short %>
           </p>
         </div>
@@ -50,4 +50,4 @@
       </div>
     </div>
   </div>
-</li>
\ No newline at end of file
+</li>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 2dabea2..46716a9 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -13,9 +13,9 @@
   </div>
 
   <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-    <div class="bg-white dark:bg-gray-900 py-8 px-4 shadow sm:rounded-lg sm:px-10">
-      
-      <%= form_for(resource, as: resource_name, 
+    <div class="bg-default py-8 px-4 shadow sm:rounded-lg sm:px-10">
+
+      <%= form_for(resource, as: resource_name,
         url: session_path(resource_name), html: { class: "space-y-2 flex flex-col" }) do |f| %>
         <div>
           <div class="mt-1">
@@ -29,7 +29,7 @@
         </div>
 
         <div>
-  
+
           <div class="mt-1">
             <%= f.password_field :password,
               required: true,
@@ -67,4 +67,4 @@
 
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/devise/shared/_links.html.erb b/app/views/devise/shared/_links.html.erb
index f2a9aa8..46e10f5 100644
--- a/app/views/devise/shared/_links.html.erb
+++ b/app/views/devise/shared/_links.html.erb
@@ -19,7 +19,7 @@
 
         <div>
           <%= button_to omniauth_authorize_path(resource_name, provider), data: { turbo: false },
-            class: "w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-800 rounded-md shadow-sm bg-default text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900" do %>
+            class: "w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-800 rounded-md shadow-sm bg-default text-sm font-medium border-subtle hover:bg-gray-50 dark:hover:bg-gray-900" do %>
             <span class="sr-only"><%= gettext("Sign in with #{OmniAuth::Utils.camelize(provider)}") %></span>
             <%= raw icon_for(provider) %>
           <% end %>
@@ -53,6 +53,3 @@
     <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
   <% end %>
 </div>
-
-
-
diff --git a/app/views/event_hosts/_event_host.erb b/app/views/event_hosts/_event_host.erb
index 3e3779a..ec324ec 100644
--- a/app/views/event_hosts/_event_host.erb
+++ b/app/views/event_hosts/_event_host.erb
@@ -1,5 +1,5 @@
-<li id="<%= "event-hosts-item-#{event_host.id}" %>" 
-  class="col-span-1 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg bg-white dark:bg-gray-900 shadow">
+<li id="<%= "event-hosts-item-#{event_host.id}" %>"
+  class="col-span-1 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg bg-default shadow">
   <div class="flex w-full items-center justify-between space-x-6 p-6">
     <div class="flex-1 truncate">
       <div class="flex flex-col items-start space-x-3 justify-center">
@@ -15,7 +15,7 @@
                 <li><%= event_host.user.username %></li>
               </ul>
             <% end %>
-          
+
           <div class="flex space-x-2">
             <div class="flex space-x-2">
               <% if event_host.listed_on_page %>
@@ -34,15 +34,15 @@
         </div>
 
         <div class="sm:col-span-6">
-          <%= link_to edit_event_event_host_path(event_host.event, event_host), 
-            class: "mt-2 inline-flex justify-center items-center text-white-600 block text-xs", 
+          <%= link_to edit_event_event_host_path(event_host.event, event_host),
+            class: "mt-2 inline-flex justify-center items-center text-white-600 block text-xs",
             data: { turbo_frame: 'modal' } do %>
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"></path>
             </svg>
           <% end %>
 
-          <%= link_to event_event_host_path(event_host.event, event_host), 
+          <%= link_to event_event_host_path(event_host.event, event_host),
             class: "mt-2 inline-flex justify-center items-center text-white-600 block text-xs",
             data: {confirm: "??", turbo_method: :delete, turbo_confirm: "Are you sure?"} do %>
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -52,12 +52,12 @@
         </div>
       </div>
 
-      <p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
+      <p class="mt-1 truncate text-sm border-subtle">
         <%= event_host.description %>
       </p>
     </div>
 
     <%= image_tag event_host.user.avatar_url(:small), class: "h-10 w-10 flex-shrink-0 rounded-full bg-gray-300 dark:bg-gray-700" %>
-  
+
   </div>
-</li>
\ No newline at end of file
+</li>
diff --git a/app/views/event_purchases/_form.html.erb b/app/views/event_purchases/_form.html.erb
index e27aacc..6e9fee6 100644
--- a/app/views/event_purchases/_form.html.erb
+++ b/app/views/event_purchases/_form.html.erb
@@ -1,7 +1,7 @@
 <% if purchase.new_record? %>
     <%= form_for [@event, purchase], url: event_event_purchases_path(@event) do |form|%>
-      
-      
+
+
       <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
         <thead class="bg-gray-50-- dark:bg-gray-900--">
           <tr class="hidden sm:table-row">
@@ -27,27 +27,27 @@
                     <div class="font-medium text-gray-900 dark:text-gray-100">
                       <%= ticket.title %>
                     </div>
-                    <div class="text-gray-500 dark:text-gray-400">
+                    <div class="border-subtle">
                       <%= ticket.short_description %>
                     </div>
                   </div>
                 </div>
               </td>
 
-              <td class="hidden sm:table-cell whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+              <td class="hidden sm:table-cell whitespace-nowrap px-3 py-4 text-sm border-subtle">
                 <div class="text-gray-900 dark:text-gray-100 text-2xl">
                   <%= number_to_currency(ticket.price, unit: "$#{ticket.event.ticket_currency} " ) %>
                 </div>
               </td>
 
-              <td class="whitespace-nowrap-- px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+              <td class="whitespace-nowrap-- px-3 py-4 text-sm border-subtle">
                 <div class="flex flex-col space-y-2 sm:space-y-0">
                   <div class="flex items-center sm:hidden">
                     <div class="">
                       <div class="font-medium text-gray-900 dark:text-gray-100">
                         <%= ticket.title %>
                       </div>
-                      <div class="text-gray-500 dark:text-gray-400 break-all">
+                      <div class="border-subtle break-all">
                         <span class="overflow-wrap">
                           <%= ticket.short_description %>
                         </span>
@@ -55,7 +55,7 @@
                     </div>
                   </div>
                   <div class="flex sm:justify-center items-center space-x-3">
-                    
+
                     <% if ticket.free? %>
                       <div class="flex items-center space-x-2">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
@@ -70,10 +70,10 @@
                     <%= form.fields_for :virtual_purchased, purchase.virtual_purchased do |ff| %>
                       <%= ff.hidden_field :ticket_id, value: ticket.id %>
                       <%= ff.number_field :quantity,
-                       min: 0, 
-                       maddx: ticket.qty, 
-                       step: 1, 
-                       label: false 
+                       min: 0,
+                       maddx: ticket.qty,
+                       step: 1,
+                       label: false
                       %>
                     <% end %>
                   </div>
@@ -82,11 +82,11 @@
 
             </tr>
           <% end %>
-        
+
         </tbody>
       </table>
 
-      
+
       <div class="flex justify-items-end">
         <%= form.submit "Place Order" %>
       </div>
@@ -99,4 +99,4 @@
     serás redirigido a esta pagina de pago:
     <%= link_to @payment_url, @payment_url, target: "_blank" %>
   </div>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/event_recordings/_event_recording.erb b/app/views/event_recordings/_event_recording.erb
index 76d047e..3374cbe 100644
--- a/app/views/event_recordings/_event_recording.erb
+++ b/app/views/event_recordings/_event_recording.erb
@@ -1,4 +1,4 @@
-<li id="<%= "event-recording-item-#{event_recording.id}" %>"class="relative col-span-1 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg bg-white dark:bg-gray-900 shadow">
+<li id="<%= "event-recording-item-#{event_recording.id}" %>"class="relative col-span-1 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg bg-default shadow">
   <iframe
     src="<%= event_recording.iframe %>"
     frameborder="0"
@@ -10,15 +10,15 @@
   </iframe>
   <div class="flex justify-center space-x-2">
 
-    <%= link_to edit_event_event_recording_path(event_recording.event, event_recording), 
-      class: "mt-2 inline-flex justify-center items-center text-white-600 block text-xs", 
+    <%= link_to edit_event_event_recording_path(event_recording.event, event_recording),
+      class: "mt-2 inline-flex justify-center items-center text-white-600 block text-xs",
       data: { turbo_frame: 'modal' } do %>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"></path>
       </svg>
     <% end %>
 
-    <%= link_to event_event_recording_path(event_recording.event, event_recording), 
+    <%= link_to event_event_recording_path(event_recording.event, event_recording),
       class: "mt-2 inline-flex justify-center items-center text-white-600 block text-xs",
       data: {confirm: "??", turbo_method: :delete, turbo_confirm: "Are you sure?"} do %>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -27,7 +27,3 @@
     <% end %>
   </div>
 </li>
-  
-  
-  
-
diff --git a/app/views/event_tickets/_qr_view.erb b/app/views/event_tickets/_qr_view.erb
index bad3753..8374d99 100644
--- a/app/views/event_tickets/_qr_view.erb
+++ b/app/views/event_tickets/_qr_view.erb
@@ -1,6 +1,6 @@
 <div>
   <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-    <div class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-900 dark:border-2 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6">
+    <div class="relative transform overflow-hidden rounded-lg bg-default dark:border-2 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6">
       <div class="flex flex-col">
         <div class="flex items-center space-x-2">
           <div class="flex self-auto items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
@@ -62,4 +62,4 @@
     </div>
   </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/events/_attendees_form.html.erb b/app/views/events/_attendees_form.html.erb
index d5f17aa..8f009b1 100644
--- a/app/views/events/_attendees_form.html.erb
+++ b/app/views/events/_attendees_form.html.erb
@@ -1,7 +1,7 @@
     <div class="px-4 sm:px-6 lg:px-8 w-full">
       <div class="sm:flex sm:items-center">
         <div class="sm:flex-auto">
-          <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          <h1 class="text-xl font-semibold text-default ">
             <%= gettext("Users") %>
           </h1>
           <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
@@ -21,41 +21,41 @@
       </div>
       <div class="-mx-4 mt-8 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg">
         <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
-          <thead class="bg-gray-50 dark:bg-gray-800">
+          <thead class="bg-muted dark:bg-gray-800">
             <tr>
               <th
                 scope="col"
-                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-6"
+                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-default  sm:pl-6"
               >
                 Name
               </th>
               <th
                 scope="col"
-                class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 lg:table-cell"
+                class="hidden px-3 py-3.5 text-left text-sm font-semibold text-default  lg:table-cell"
               >
                 Price
               </th>
               <th
                 scope="col"
-                class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:table-cell"
+                class="hidden px-3 py-3.5 text-left text-sm font-semibold text-default  sm:table-cell"
               >
                 Email
               </th>
               <th
                 scope="col"
-                class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 lg:table-cell"
+                class="hidden px-3 py-3.5 text-left text-sm font-semibold text-default  lg:table-cell"
               >
                 Ticket
               </th>
               <th
                 scope="col"
-                class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-default "
               >
                 Status
               </th>
               <th
                 scope="col"
-                class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-default "
               >
                 Checked in
               </th>
@@ -64,11 +64,11 @@
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-200 dark:divide-gray-800 bg-white dark:bg-gray-900">
+          <tbody class="divide-y divide-gray-200 dark:divide-gray-800 bg-white ">
             <% @event.paid_purchased_items.each do |pi| %>
               <% ticket = pi.purchase %>
               <tr>
-                <td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:w-auto sm:max-w-none sm:pl-6">
+                <td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-default  sm:w-auto sm:max-w-none sm:pl-6">
                   <%= ticket.user.username %>
                   <dl class="font-normal lg:hidden">
                     <dt class="sr-only">Status</dt>
@@ -76,23 +76,23 @@
                       <%= ticket.state %>
                     </dd>
                     <dt class="sr-only sm:hidden">Email</dt>
-                    <dd class="mt-1 truncate text-gray-500 sm:hidden"><%= ticket.user.email %></dd>
+                    <dd class="mt-1 truncate text-muted sm:hidden"><%= ticket.user.email %></dd>
                   </dl>
                 </td>
-                <td class="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-300 lg:table-cell">
+                <td class="hidden px-3 py-4 text-sm text-muted lg:table-cell">
                   <%= Number.Currency.number_to_currency(ticket.event_ticket.price) %>
                   <% # = ticket.event_ticket.currency %>
                 </td>
-                <td class="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-300 sm:table-cell">
+                <td class="hidden px-3 py-4 text-sm text-muted sm:table-cell">
                   <%= ticket.user.email %>
                 </td>
-                <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
+                <td class="px-3 py-4 text-sm text-muted">
                   <%= ticket.event_ticket.title %>
                 </td>
-                <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
+                <td class="px-3 py-4 text-sm text-muted">
                   <%= ticket.state %>
                 </td>
-                <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
+                <td class="px-3 py-4 text-sm text-muted">
                   <%= ticket.checked_in_at %>
                 </td>
                 <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
diff --git a/app/views/events/_schedule_fields.html.erb b/app/views/events/_schedule_fields.html.erb
index 2505ea0..9a9a3d6 100644
--- a/app/views/events/_schedule_fields.html.erb
+++ b/app/views/events/_schedule_fields.html.erb
@@ -1,5 +1,5 @@
 
-<div class="nested-fields border mt-6 p-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 dark:bg-black rounded-md"
+<div class="nested-fields border border-subtle bg-default mt-6 p-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 rounded-md"
 	data-new-record="<%= form.object.new_record? %>">
 
   <%= form.hidden_field :_destroy %>
@@ -7,7 +7,7 @@
   <div class="sm:col-span-6">
     <%= form.text_field :name, wrapper_class: "sm:col-span-6" %>
   </div>
-  
+
   <div class="sm:col-span-2">
     <%= form.datetime_field :start_date,
       id: "wrap-id",
@@ -50,15 +50,15 @@
     </div>
 
     <div class="my-3" data-nested-form-target="links">
-      <%= link_to "Add new schedule", "#", 
-      class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500", 
+      <%= link_to "Add new schedule", "#",
+      class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500",
       data: { action: "click->nested-form#add_association" } %>
     </div>
 
     <div class="my-3" data-nested-form-target="links">
-      <%= link_to "Remove", "#", 
-      class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500", 
+      <%= link_to "Remove", "#",
+      class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500",
       data: { action: "click->nested-form#remove_association" } %>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/events/_scheduling_fields.html.erb b/app/views/events/_scheduling_fields.html.erb
index a280d45..bab03d3 100644
--- a/app/views/events/_scheduling_fields.html.erb
+++ b/app/views/events/_scheduling_fields.html.erb
@@ -1,5 +1,5 @@
 
-<div class="nested-fields sm:col-span-6 mt-6 p-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 dark:bg-gray-700 rounded-md border-2 border-white"
+<div class="nested-fields sm:col-span-6 mt-6 p-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 bg-subtle rounded-md border-2 border-subtle"
 	data-new-record="<%= form.object.new_record? %>">
 
   <%= form.hidden_field :_destroy %>
diff --git a/app/views/events/_ticket_fields.html.erb b/app/views/events/_ticket_fields.html.erb
index 0429d68..b47e5ed 100644
--- a/app/views/events/_ticket_fields.html.erb
+++ b/app/views/events/_ticket_fields.html.erb
@@ -1,4 +1,4 @@
-<div class="nested-fields border-2 rounded-md p-4 my-4 col-span-6"
+<div class="nested-fields border border-subtle bg-default rounded-md p-4 my-4 col-span-6"
 	data-new-record="<%= form.object.new_record? %>">
 
   <%= form.hidden_field :_destroy %>
@@ -7,7 +7,7 @@
   <div class="flex space-x-3">
     <div class=" flex items-center space-x-3">
       <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
-        
+
         <div class="sm:col-span-3">
           <%= form.text_field :title,
             hint: gettext("Ticket Type. For Example: General Admission, VIP Admission ...")
@@ -52,21 +52,21 @@
               )
           %>
         </div>
-  
-        <%= form.check_box :show_sell_until, 
-          hint: gettext("Show the Sell Until date on the event page.") 
+
+        <%= form.check_box :show_sell_until,
+          hint: gettext("Show the Sell Until date on the event page.")
         %>
 
-        <%= form.check_box :show_after_sold_out, 
+        <%= form.check_box :show_after_sold_out,
           hint: gettext("Display with a \"Sold out\" message after ticket quantity runs out.")
         %>
 
         <div class="sm:col-span-3">
-          <%= form.check_box :hidden, 
+          <%= form.check_box :hidden,
           label: "Hide Ticket?",
             hint: gettext(
                 "Check to hide this ticket on your Event page and make it available via a direct link only."
-              ) 
+              )
           %>
         </div>
 
@@ -105,7 +105,7 @@
 
         <div class="sm:col-span-6">
           <button type="button"
-            data-action="click->nested-form#remove_association" 
+            data-action="click->nested-form#remove_association"
             class="mt-2 inline-flex justify-center items-center border-2 border-red-600 rounded-lg py-2 px-2 dark:bg-black text-red-600 block text-sm">
             <%= gettext("Delete Ticket") %>
           </button>
@@ -115,4 +115,4 @@
 
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/events/edit.html.erb b/app/views/events/edit.html.erb
index 751b857..0c5d0ba 100644
--- a/app/views/events/edit.html.erb
+++ b/app/views/events/edit.html.erb
@@ -84,8 +84,8 @@
     </div>
     <div class="flex-1 min-h-0 overflow-y-auto">
       <% menu_items.each do |item| %>
-        <%= link_to "#{item[:to]}", 
-          class: "#{item[:namespace].to_s == @section ? 'dark:bg-black' : 'dark:bg-gray-900'} dark:text-gray-100 bg-gray-50 bg-opacity-50 flex p-6 border-b border-gray-gray-200 dark:border-gray-800" do %>
+        <%= link_to "#{item[:to]}",
+          class: "#{item[:namespace].to_s == @section ? 'bg-black' : 'bg-empasis'} text-default bg-opacity-50 flex p-6 border-b border-subtle" do %>
             <%= icon_for(item[:namespace]).html_safe %>
             <div class="ml-3 text-sm hidden xl:block">
               <p class="font-medium text-gray-900 dark:text-gray-100"><%= item[:title] %></p>
@@ -106,4 +106,4 @@
       <% end %>
     <% end %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/events/mine.html.erb b/app/views/events/mine.html.erb
index 70dd9d4..94bed59 100644
--- a/app/views/events/mine.html.erb
+++ b/app/views/events/mine.html.erb
@@ -1,7 +1,7 @@
 <div class="px-4 sm:px-6 lg:px-8">
   <div class="mb-6 my-4">
     <div class="">
-      <div class="border-b--- border-gray-200 dark:border-gray-700">
+      <div class="border-b--- border-subtle dark:border-gray-700">
         <nav class="-mb-px flex space-x-8 text-2xl " aria-label="Tabs">
           <%= link_to t("events.my_events"), mine_events_path(tab: "all"), class: tab_class(@tab == "all") %>
           <%= link_to t("events.drafts"), mine_events_path(tab: "drafts"), class: tab_class(@tab == "drafts") %>
@@ -14,7 +14,7 @@
 
   <div class="sm:flex sm:items-center">
     <div class="sm:flex-auto">
-      <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
+      <h1 class="text-xl font-semibold text-default ">
         <%= @tab.capitalize %> Events
       </h1>
       <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
@@ -29,30 +29,30 @@
     <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
       <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
         <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-          <table class="min-w-full divide-y divide-gray-300 dark:text-gray-700">
-            <thead class="bg-gray-50">
+          <table class="min-w-full divide-y divide-muted">
+            <thead class="bg-muted">
               <tr>
                 <th
                   scope="col"
-                  class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-200 dark:bg-gray-900"
+                  class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-muted  "
                 >
                   Title
                 </th>
                 <th
                   scope="col"
-                  class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-200 dark:bg-gray-900"
+                  class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-muted  "
                 >
                   Author
                 </th>
                 <th
                   scope="col"
-                  class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-200 dark:bg-gray-900"
+                  class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-muted  "
                 >
                   Status
                 </th>
                 <th
                   scope="col"
-                  class="relative py-3 pl-3 pr-4 sm:pr-6 dark:text-gray-200 dark:bg-gray-900 "
+                  class="relative py-3 pl-3 pr-4 sm:pr-6   "
                 >
                   <span class="sr-only"><%= gettext("Edit") %></span>
                 </th>
@@ -61,17 +61,17 @@
             <tbody class="divide-y divide-gray-200 dark:divide-gray-800 bg-default">
               <% @events.each do |event| %>
                 <tr>
-                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 dark:bg-gray-900 sm:pl-6">
+                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-default   sm:pl-6">
                     <%= event.title || "-- untitled --Access" %>
                   </td>
 
-                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-200 dark:bg-gray-900">
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-muted  ">
                     <%= event.user.username %>
                   </td>
-                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-200 dark:bg-gray-900">
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-muted  ">
                     <%= event.state %>
                   </td>
-                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 dark:text-gray-200 dark:bg-gray-900">
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6  ">
                     <%= link_to t("edit"), edit_event_path(event), class: "link" %>
                   </td>
                 </tr>
@@ -82,4 +82,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/playlist_purchases/_form.html.erb b/app/views/playlist_purchases/_form.html.erb
index 353e422..2b4df89 100644
--- a/app/views/playlist_purchases/_form.html.erb
+++ b/app/views/playlist_purchases/_form.html.erb
@@ -17,12 +17,12 @@
 
         <% if @playlist.name_your_price && @playlist.name_your_price != "0" %>
           <div class="mt-1 flex rounded-md shadow-sm">
-            <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-900 dark:border-gray-800 bg-gray-50 px-3 text-sm text-gray-500 dark:text-white">
+            <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300   bg-muted px-3 text-sm text-muted dark:text-white">
               $
             </span>
             <%= form.text_field( :price,
               label: false,
-              class: "block w-64 flex-1- rounded-none rounded-r-md border-gray-300 dark:border-gray-800 dark:bg-gray-800 focus:border-brand-500 focus:ring-brand-500 sm:text-sm",
+              class: "block w-64 flex-1- rounded-none rounded-r-md border-gray-300  dark:bg-gray-800 focus:border-brand-500 focus:ring-brand-500 sm:text-sm",
               placeholder: t("payments.name_your_price", num: number_to_currency(@playlist.price, precision: 2) )
             ) %>
           </div>
@@ -42,14 +42,14 @@
         <% if form.object.include_message %>
           <div class="mt-1">
             <%= form.text_area(:optional_message,
-              class: "mt-1 block w-full rounded-md border-gray-300 dark:text-gray-100 dark:bg-gray-800 text-gray-900 shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm",
+              class: "mt-1 block w-full rounded-md border-gray-300  dark:bg-gray-800 text-default shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm",
               placeholder: t("payments.optional_message"),
               rows: 3
             ) %>
           </div>
         <% end %>
 
-        <p class="mt-2 text-sm text-gray-500">
+        <p class="mt-2 text-sm text-muted">
           <label class="hover:underline space-x-2 flex items-center">
             <%= form.check_box(:include_message) %>
             <span>
diff --git a/app/views/playlists/_playlist_item.html.erb b/app/views/playlists/_playlist_item.html.erb
index 056e9a2..1ecc5ff 100644
--- a/app/views/playlists/_playlist_item.html.erb
+++ b/app/views/playlists/_playlist_item.html.erb
@@ -1,5 +1,5 @@
     <div
-      class="my-2 p-2 border-- rounded-md shadow-xs mx-3 dark:bg-gray-900"
+      class="my-2 p-2 border-- rounded-md shadow-xs mx-3 "
     >
 
 
@@ -15,7 +15,7 @@
             <div class="space-y-2 flex flex-col">
 
               <div class="flex justify-between">
-                <h3 class="flex items-center space-x-2 mt-3- text-xl font-extrabold tracking-tight text-slate-900 dark:text-gray-100">
+                <h3 class="flex items-center space-x-2 mt-3- text-xl font-extrabold tracking-tight text-slate-900 ">
                   <%= link_to playlist.title, playlist_path(playlist), "data-turbo-frame": "_top" %>
 
                   <% if playlist.album? && playlist.release_date.present? %>
@@ -66,10 +66,10 @@
                         ) %>
                       </div>
                       <div class="flex-1 min-w-0">
-                        <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                        <p class="text-sm font-medium text-default  truncate">
                           <%= tp.track.title %>
                         </p>
-                        <p class="text-sm text-gray-500 dark:text-gray-300 truncate">
+                        <p class="text-sm text-muted truncate">
                           <%= tp.track.user.username %>
                         </p>
                       </div>
@@ -77,7 +77,7 @@
                         <div>
                           <a href="#" phx-click="remove-track"
                             target-nono={@myself}
-                            class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50">
+                            class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-muted">
                             remove
                           </a>
                         </div>
diff --git a/app/views/playlists/show.html.erb b/app/views/playlists/show.html.erb
index 236cef0..ef775b9 100644
--- a/app/views/playlists/show.html.erb
+++ b/app/views/playlists/show.html.erb
@@ -2,7 +2,7 @@
   <nav class="flex items-start px-4 py-3 sm:px-6 lg:px-8 xl:hidden" aria-label="Breadcrumb">
     <%= link_to user_path(@playlist.user.username),
       "data-turbo-frame": "_top",
-      class: "inline-flex items-center space-x-3 text-sm font-medium text-gray-900 dark:text-gray-100" do %>
+      class: "inline-flex items-center space-x-3 text-sm font-medium text-default " do %>
       <svg
         class="-ml-2 h-5 w-5 text-gray-400 dark:text-gray-600"
         x-description="Heroicon name: solid/chevron-left"
@@ -26,12 +26,12 @@
   <article>
     <!-- Profile header -->
     <div>
- 
+
       <div class="flex flex-col sm:flex-row mb-6">
-        
+
         <!--
         <% if @track.present? %>
-          <div 
+          <div
             data-audio-id="<%= @track.id %>"
             data-audio-target="player"
             data-audio-height-value="250"
@@ -84,7 +84,7 @@
                   type="button"
                   data-action="audio#pause"
                   data-audio-target="pause"
-                  class="hidden -ml-px relative inline-flex-- items-center px-2 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-default text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-900 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+                  class="hidden -ml-px relative inline-flex-- items-center px-2 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-default text-sm font-medium text-muted hover:bg-muted dark:hover:bg-gray-900 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
                 >
                   <span class="sr-only"><%= gettext("Next") %></span>
 
@@ -104,7 +104,7 @@
               <div class="ml-2 pl-6 pt-6">
                 <h4 class="text-lg font-bold flex items-center space-x-2">
                   <%= link_to @playlist.title, playlist_path(@playlist.slug) %>
-                  
+
                   <% if @playlist.album? && @playlist.release_date.present? %>
                     <span class="text-xs dark:text-gray-400 font-thin">
                       <%= t("Album") %> <%= l(@playlist.release_date, format: :short) %>
@@ -122,9 +122,9 @@
           </div>
         <% end %>
         -->
-      
+
         <div class="w-1/4 hidden sm:block">
-        
+
           <div class=" m-4 rounded-lg group relative aspect-w-1 aspect-h-1 rounded-md- bg-gray-100 overflow-hidden">
             <%= image_tag( @playlist.cover_url(:large),
               class: "object-center object-cover group-hover:opacity-75")
@@ -132,7 +132,7 @@
 
             <div class="hidden flex- flex-col justify-end">
               <div class="p-4 bg-default bg-opacity-60 text-sm">
-                <a href="#" class="font-medium text-gray-900">
+                <a href="#" class="font-medium text-default">
                   <span class="absolute inset-0" aria-hidden="true"></span>
                   <%= t("Upload image") %>
                 </a>
@@ -149,7 +149,7 @@
           <div class="ml-2 pl-6 pt-6">
             <h4 class="text-lg font-bold flex items-center space-x-2">
               <%= link_to @playlist.title, playlist_path(@playlist.slug) %>
-              
+
               <% if @playlist.album? && @playlist.release_date.present? %>
                 <span class="text-xs dark:text-gray-400 font-thin">
                   <%= t("Album") %> <%= l(@playlist.release_date, format: :short) %>
@@ -163,20 +163,20 @@
               </h5>
             <% end %>
           </div>
-          
-          <div class="mt-4 my-2 border dark:border-gray-800 shadow-xs mx-3 dark:bg-gray-900 rounded-md">
-          
+
+          <div class="mt-4 my-2 border border-subtle shadow-xs mx-3 rounded-md">
+
             <div class="flex space-x-3">
               <div class="flex-grow">
                 <div class="flex flex-col">
                   <div class="space-y-2">
                     <ul role="list" class="divide-y divide-subtle">
-                      
+
                       <% @playlist.ordered_tracks.each do |track| %>
                         <li>
-                          <a 
+                          <a
                             href="<%= player_path(id: track, t: true) %>"
-                            data-track-id="<%= track.id %>" 
+                            data-track-id="<%= track.id %>"
                             data-track-detector-target="track"
                             class="block p-2 bg-muted hover:bg-default w-full text-left text-default">
                             <div class="flex items-center space-x-4">
@@ -212,7 +212,7 @@
 
           <div class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
             <div class="sm:hidden 2xl:block mt-6 min-w-0 flex-1">
-              <h1 class="text-2xl font-bold text-gray-900  dark:text-gray-100 truncate">
+              <h1 class="text-2xl font-bold text-default   truncate">
 
                 <%= link_to user_path(@playlist.user.username) do %>
                   <%= @playlist.user.username %>
@@ -221,7 +221,7 @@
               </h1>
             </div>
             <div class="mt-6 flex items-center justify-stretch sm:flex-row space-y-0 sm:space-x-4">
-      
+
               <%= render "sharer/share_button", resource: @playlist %>
 
               <%= render "likes/like_button", resource: @playlist, button_class: liked?(@playlist) ? "button-active" : "button" %>
@@ -234,11 +234,11 @@
                   </svg>
                   <span><%= t("playlists.edit") %></span>
                 <% end %>
-              
+
                 <div data-turbo="true">
                   <%= turbo_frame_tag "playlist-#{@playlist.id}-delete" do %>
-                    <%= button_to playlist_path(@playlist), 
-                      method: :delete, 
+                    <%= button_to playlist_path(@playlist),
+                      method: :delete,
                       data: {confirm: t("delete.confirm"), turbo_method: :delete, turbo_confirm: t("delete.confirm")},
                       class: "button" do %>
                       <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
@@ -268,11 +268,11 @@
         <div class="sm:text-xl text-sm container mx-auto px-4 my-4 flex flex-col space-y-4">
           <div class="flex justify-end items-center space-x-2">
             <% if @playlist.buy_link.present? %>
-              <%= link_to @playlist.buy_link_title || "Payment Link", 
-                @playlist.buy_link, 
-                target: :blank, 
+              <%= link_to @playlist.buy_link_title || "Payment Link",
+                @playlist.buy_link,
+                target: :blank,
                 class: "underline dark:border-white hover:bg-white hover:text-black border-black rounded-sm border-4 px-3 py-3" %>
-              
+
             <% end %>
 
             <% if @playlist.price %>
@@ -280,13 +280,13 @@
             <% end %>
           </div>
         </div>
-      
+
 
 
 
       <!--
       <div class="sm:text-xl text-sm container mx-auto px-4 my-4 flex flex-col space-y-4">
-        
+
         <div id="xx-5">
           <div class="text-2xl font-bold">
             <button class="underline dark:border-white border-black rounded-sm border-4 px-3" target="blank" phx-click="open-modal" phx-target="2"> Comprar álbum digital </button>
@@ -301,11 +301,11 @@
           <div class="-space-x-4">
             <a href="/xxxx" data-phx-link="redirect" data-phx-link-state="push">
               <img class="relative z-30 inline object-cover w-10 h-10 border-2 border-white rounded-full" src="/active_storage/representations/redirect/SFMyNTY.eyJleHBpcmVzX2luIjpudWxsLCJtZXNzYWdlIjoiNTgxIiwicHVycG9zZSI6bnVsbH0.lSA7cpcMmQhKxah4FF8lgkeoOUcKYIRR8IwJs7Dbxhc/SFMyNTY.eyJleHBpcmVzX2luIjpudWxsLCJtZXNzYWdlIjoie1wiZm9ybWF0XCI6XCJqcGdcIixcInJlc2l6ZV90b19maWxsXCI6XCIyMDB4MjAwXCJ9IiwicHVycG9zZSI6bnVsbH0.6eK0-2F79Tbc3XOJhTLe4owI_7qgf-ay0_FT3Jn-tg0/Foto-Mika-Martini-destacada[1].jpg">
-              <h3 class="hidden mt-6 text-gray-900 dark:text-gray-100 text-sm font-medium"> xxxx </h3>
+              <h3 class="hidden mt-6 text-default  text-sm font-medium"> xxxx </h3>
             </a>
           </div>
         </div>
-        
+
         <div class="flex flex-col space-y-2">
           <span>
             <span class="font-bold">Fecha de lanzamiento del álbum:</span> 15 de marzo de 2023 </span>
@@ -317,7 +317,7 @@
       <div class="mx-auto w-3/4">
         <%= render "products" %>
       </div>
-      
+
       <div class="whitespace-pre-line sm:text-xl text-sm container mx-auto px-4 my-4 prose dark:prose-invert prose-lg ">
         <!--<.tag_list_for playlist={@playlist} />-->
         <%= auto_link sanitize(@playlist.description, auto_link: true) %>
@@ -340,7 +340,7 @@
             <div class="divide-y divide-gray-200 dark:divide-gray-800">
 
               <div class="pb-4">
-                <h2 id="activity-title" class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                <h2 id="activity-title" class="text-lg font-medium text-default ">
                   <%= t("profile.comments") %>
                 </h2>
               </div>
diff --git a/app/views/product_purchases/index.html.erb b/app/views/product_purchases/index.html.erb
index 85fddbb..c1b2f1b 100644
--- a/app/views/product_purchases/index.html.erb
+++ b/app/views/product_purchases/index.html.erb
@@ -66,7 +66,7 @@
                 <dl class="grid grid-cols-2 gap-x-6 text-sm">
                   <div>
                     <dt class="font-medium text-default">Delivery address</dt>
-                    <dd class="mt-3 text-gray-500">
+                    <dd class="mt-3 text-muted">
 
                       <span class="block"><%= purchase.line1 %></span>
                       <span class="block"><%= purchase.line2 %> <%= purchase.postal_code %></span>
@@ -80,7 +80,7 @@
 
                   <!--<div>
                     <dt class="font-medium text-default">Shipping updates</dt>
-                    <dd class="mt-3 space-y-3 text-gray-500">
+                    <dd class="mt-3 space-y-3 text-muted">
                       <p>f•••@example.com</p>
                       <p>1•••••••••40</p>
                       <button type="button" class="font-medium text-indigo-600 hover:text-indigo-500">Edit</button>
diff --git a/app/views/purchases/_track.erb b/app/views/purchases/_track.erb
index 6182d6d..f879597 100644
--- a/app/views/purchases/_track.erb
+++ b/app/views/purchases/_track.erb
@@ -22,7 +22,7 @@
         <% when "paid" %>
           <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Paid</span>
         <% when "pending" %>
-          <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">Pending</span>
+          <span class="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">Pending</span>
         <% end %>
 
         <% if purchase.is_downloadable?  %>
diff --git a/app/views/purchases/music.html.erb b/app/views/purchases/music.html.erb
index 6225302..7ce91ed 100644
--- a/app/views/purchases/music.html.erb
+++ b/app/views/purchases/music.html.erb
@@ -1,13 +1,13 @@
 <div>
   <div class="min-h-full">
-    <header class="bg-gray-50 dark:bg-gray-900 py-8">
+    <header class="bg-muted  py-8">
       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 xl:flex xl:items-center xl:justify-between">
         <div class="min-w-0 flex-1">
           <nav class="flex" aria-label="Breadcrumb">
             <ol role="list" class="flex items-center space-x-4">
               <li>
                 <div>
-                  <%= link_to "/purchases", class: "text-sm font-medium text-gray-500 dark:text-gray-300 hover:text-gray-700 hover:text-gray-300" do %>
+                  <%= link_to "/purchases", class: "text-sm font-medium text-muted hover:text-gray-700 hover:text-gray-300" do %>
                     <%= gettext("Purchases") %>
                   <% end %>
                 </div>
@@ -25,7 +25,7 @@
                       clip-rule="evenodd"
                     />
                   </svg>
-                  <%= link_to "#", class: "ml-4 text-sm font-medium text-gray-500 dark:text-gray-300 hover:text-gray-700 hover:text-gray-300" do %>
+                  <%= link_to "#", class: "ml-4 text-sm font-medium text-muted hover:text-gray-700 hover:text-gray-300" do %>
                     <%= t("purchases.music") %>
                   <% end %>
                 </div>
@@ -33,7 +33,7 @@
             </ol>
           </nav>
 
-          <h1 class="mt-2 text-2xl font-bold leading-7 text-gray-900 dark:text-gray-100 dark:text-gray-100 sm:truncate sm:text-3xl sm:tracking-tight">
+          <h1 class="mt-2 text-2xl font-bold leading-7 text-default   sm:truncate sm:text-3xl sm:tracking-tight">
             <%= t("purchases.my_music") %>
           </h1>
         </div>
@@ -43,29 +43,29 @@
     <main class="pt-8 pb-16">
       <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
         <div class="px-4 sm:px-0 py-2">
-          <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+          <h2 class="text-lg font-medium text-default ">
             <%= t("purchases.my_music", section: @section) %>
           </h2>
 
           <div class="sm:block">
-            <div class="border-b border-gray-200">
+            <div class="border-b border-subtle">
               <nav class="mt-2 -mb-px flex space-x-8" aria-label="Tabs">
                 <%= link_to music_purchases_path(tab: "albums"), 
-                  class: "border-transparent text-gray-500 dark:text-gray-200 hover:text-gray-700 hover:text-gray-300 hover:border-gray-200 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" do %>
+                  class: "border-transparent text-muted  hover:text-gray-700 hover:text-gray-300 hover:border-subtle whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" do %>
                   <%= t("purchases.purchased_albums") %>
-                  <!--<span class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 text-gray-900 dark:text-gray-100 hidden ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block">2</span>-->
+                  <!--<span class="bg-gray-100  text-default  text-default  hidden ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block">2</span>-->
                 <% end %>
                 <!--<%= link_to "#", phx_click: "section-change", phx_value_section: "pending_orders",
-                  class: "border-transparent text-gray-500 dark:text-gray-200 hover:text-gray-700 hover:text-gray-300 hover:border-gray-200 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" do %>
+                  class: "border-transparent text-muted  hover:text-gray-700 hover:text-gray-300 hover:border-subtle whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" do %>
                   <%= gettext("Pending orders") %>
-                  <span class="hidden bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 text-gray-900 dark:text-gray-100 hidden ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block">4</span>
+                  <span class="hidden bg-gray-100  text-default  text-default  hidden ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block">4</span>
                 <% end %> -->
                 <%= link_to music_purchases_path(tab: "tracks"), 
                   phx_click: "section-change", 
                   phx_value_section: "all_tracks",
-                  class: "border-transparent text-gray-500 dark:text-gray-200 hover:text-gray-700 hover:text-gray-300 hover:border-gray-200 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" do %>
+                  class: "border-transparent text-muted  hover:text-gray-700 hover:text-gray-300 hover:border-subtle whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" do %>
                   <%= t("purchases.purchased_tracks") %>
-                  <!--<span class="hidden bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 text-gray-900 dark:text-gray-100 hidden ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block">4</span>-->
+                  <!--<span class="hidden bg-gray-100  text-default  text-default  hidden ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block">4</span>-->
                 <% end %>
               </nav>
             </div>
@@ -77,16 +77,16 @@
           <%= link_to type, music_purchases_path(type: type), class: "btn" %>
         <% end %>-->
 
-        <ul role="list" class="mt-5 divide-y divide-gray-200 dark:divide-gray-800 border-t border-gray-200 dark:border-gray-800 sm:mt-0 sm:border-t-0">
+        <ul role="list" class="mt-5 divide-y divide-gray-200 dark:divide-gray-800 border-t border-subtle  sm:mt-0 sm:border-t-0">
           <% @collection.each do |purchase| %>
             <%= render "track", purchase: purchase %>
           <% end %>
         </ul>
         <!-- Pagination -->
           <!--
-          <nav class="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0" aria-label="Pagination">
+          <nav class="flex items-center justify-between border-t border-subtle px-4 sm:px-0" aria-label="Pagination">
             <div class="-mt-px flex w-0 flex-1">
-              <a href="#" class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">
+              <a href="#" class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-muted hover:border-subtle hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">
                 <svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                   <path fill-rule="evenodd" d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z" clip-rule="evenodd" />
                 </svg>
@@ -94,16 +94,16 @@
               </a>
             </div>
             <div class="hidden md:-mt-px md:flex">
-              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">1</a>
+              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-muted hover:border-subtle hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">1</a>
               <a href="#" class="inline-flex items-center border-t-2 border-brand-500 px-4 pt-4 text-sm font-medium text-brand-600" aria-current="page">2</a>
-              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">3</a>
-              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">3</a>
-              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">4</a>
-              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">5</a>
-              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">6</a>
+              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-muted hover:border-subtle hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">3</a>
+              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-muted hover:border-subtle hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">3</a>
+              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-muted hover:border-subtle hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">4</a>
+              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-muted hover:border-subtle hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">5</a>
+              <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-muted hover:border-subtle hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">6</a>
             </div>
             <div class="-mt-px flex w-0 flex-1 justify-end">
-              <a href="#" class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">
+              <a href="#" class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-muted hover:border-subtle hover:text-gray-700 hover:text-gray-300 dark:text-gray-300">
                 Next
                 <svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                   <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 01-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
diff --git a/app/views/shared/_music_purchase.html.erb b/app/views/shared/_music_purchase.html.erb
index 7316585..27875fb 100644
--- a/app/views/shared/_music_purchase.html.erb
+++ b/app/views/shared/_music_purchase.html.erb
@@ -46,7 +46,7 @@
       <% @supporters.each do |supporter| %>
         <%= link_to user_path(supporter.username) do %>
           <%= image_tag supporter.cover_url(:small), class: "relative z-30 inline object-cover w-10 h-10 border-2 border-white rounded-full" %>
-          <h3 class="hidden mt-6 text-gray-900 dark:text-gray-100 text-sm font-medium"> 
+          <h3 class="hidden mt-6 text-default  text-sm font-medium"> 
             <%= supporter.username %> 
           </h3>
         <% end %>
diff --git a/app/views/shared/_user_menu.html.erb b/app/views/shared/_user_menu.html.erb
index 191d5bc..1124631 100644
--- a/app/views/shared/_user_menu.html.erb
+++ b/app/views/shared/_user_menu.html.erb
@@ -71,7 +71,7 @@
             <input
               id="search"
               name="search"
-              class="block w-full bg-muted border-transparent py-2 pl-10 pr-3 text-base leading-5 placeholder-default focus:outline-none focus:bg-default focus:ring-0 focus:border-default focus:text-gray-900 focus:placeholder-gray-400 sm:text-sm rounded-md"
+              class="block w-full bg-muted border-transparent py-2 pl-10 pr-3 text-base leading-5 placeholder-default focus:outline-none focus:bg-default focus:ring-0 focus:border-default focus:text-default focus:placeholder-gray-400 sm:text-sm rounded-md"
               placeholder="Search"
               type="search"
             />
@@ -336,7 +336,7 @@
           </div>
           <button
             type="button"
-            class="ml-auto flex-shrink-0 bg-gray-500 rounded-full p-1 text-gray-200 hover:text-default focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-500 focus:ring-default"
+            class="ml-auto flex-shrink-0 bg-muted0 rounded-full p-1 text-gray-200 hover:text-default focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-500 focus:ring-default"
           >
             <span class="sr-only"><%= gettext("View notifications") %></span>
             <svg
diff --git a/app/views/user_settings/index.html.erb b/app/views/user_settings/index.html.erb
index e83ef40..fec6072 100644
--- a/app/views/user_settings/index.html.erb
+++ b/app/views/user_settings/index.html.erb
@@ -61,17 +61,17 @@
   <!-- Secondary sidebar -->
   <nav aria-label="Sections" 
     class="h-[calc(100vh-132px)] overflow-auto hidden- w-20 flex-shrink-0 xl:w-96 border-r-gray-500 border-blue-gray-600 xl:flex xl:flex-col">
-    <div class="hidden xl:flex flex-shrink-0 h-16 px-6 border-b- border-gray-200 dark:border-gray-800 flex items-center">
-      <p class="text-lg font-medium text-gray-900 dark:text-gray-100">Settings</p>
+    <div class="hidden xl:flex flex-shrink-0 h-16 px-6 border-b- border-subtle  flex items-center">
+      <p class="text-lg font-medium text-default ">Settings</p>
     </div>
     <div class="flex-1 min-h-0 overflow-y-auto">
       <% menu_items.each do |item| %>
         <%= link_to "/#{current_user.username}/#{item[:to]}", 
-          class: "#{item[:namespace].to_s == @section ? 'dark:bg-black' : 'dark:bg-gray-900'} dark:text-gray-100 bg-gray-50 bg-opacity-50 flex p-6 border-b border-gray-gray-200 dark:border-gray-800" do %>
+          class: "#{item[:namespace].to_s == @section ? 'dark:bg-black' : ''}  bg-muted bg-opacity-50 flex p-6 border-b border-muted " do %>
             <%= icon_for(item[:namespace]).html_safe %>
             <div class="ml-3 text-sm hidden xl:block">
-              <p class="font-medium text-gray-900 dark:text-gray-100"><%= item[:title] %></p>
-              <p class="mt-1 text-gray-500 dark:text-gray-300"><%= item[:sub] %></p>
+              <p class="font-medium text-default "><%= item[:title] %></p>
+              <p class="mt-1 text-muted"><%= item[:sub] %></p>
             </div>
         <% end %>
       <% end %>