diff --git a/lib/ex_finance_web/live/public/currency_live/index.html.heex b/lib/ex_finance_web/live/public/currency_live/index.html.heex
index 719a7cc..0b8fc02 100644
--- a/lib/ex_finance_web/live/public/currency_live/index.html.heex
+++ b/lib/ex_finance_web/live/public/currency_live/index.html.heex
@@ -7,73 +7,93 @@
     <div
       :for={{dom_id, currency} <- @streams.currencies}
       id={dom_id}
-      class="p-4 md:w-1/2 xl:w-1/3 w-full duration-500 cursor-default group"
+      class="p-4 w-full sm:w-full md:w-1/2 xl:w-1/3 2xl:w-1/4 duration-500 cursor-default group"
     >
       <div
-        class="
+        class={"
           flex items-center justify-between
-          p-4 rounded-lg
-          card-bg shadow-zinc-400 dark:shadow-zinc-600 transition duration-300 shadow-md active:shadow-sm focus:shadow-sm
-          border-zinc-300 dark:border-zinc-700 border-[1px]
-        "
+          rounded-xl
+          transition duration-300 shadow-inner-xs
+          active:shadow-inner
+          focus:shadow-sm          
+          shadow-zinc-400 dark:shadow-zinc-900
+          border-zinc-200 dark:border-zinc-700 border-[1px]
+          cursor-pointer
+
+          bg-gradient-to-br
+          from-#{get_color_by_price_direction(currency)}-100/75 to-#{get_color_by_price_direction(currency)}-200/75
+          dark:!from-#{get_color_by_price_direction(currency)}-900/75 dark:!to-#{get_color_by_price_direction(currency)}-500/75
+        "}
         id={"currencies-#{currency.id}-card"}
         phx-click={JS.navigate(~p"/currencies/#{currency.id}")}
       >
-        <div class="text-left">
-          <h2 class={"text-gray-900 dark:text-gray-100 text-lg font-bold border-b border-#{get_color_by_currency_type(currency)}-500"}>
+        <div class="
+          text-left card-bg p-4 rounded-lg rounded-br-xl rounded-tr-xl border-zinc-300 dark:border-zinc-700 border-r-[1px] w-4/6
+          transition duration-700
+        ">
+          <h2 class={"text-zinc-700 dark:text-zinc-100 text-lg font-medium border-b border-#{get_color_by_currency_type(currency)}-500"}>
             <%= currency.name %>
           </h2>
-          <%= if currency.info_type == :reference do %>
-            <h3 class={"mt-2 text-xl font-bold text-#{get_color_by_currency_type(currency)}-500 text-left cursor-text"}>
-              <%= render_price(currency.variation_price) %>
-            </h3>
-          <% end %>
-          <%= if currency.info_type == :market do %>
-            <h3 class={"mt-2 text-xl font-bold text-#{get_color_by_currency_type(currency)}-500 text-left cursor-text"}>
-              <%= render_price(currency.buy_price) %> - <%= render_price(
-                currency.sell_price
-              ) %>
-            </h3>
-            <p class="text-sm font-semibold text-gray-400 dark:text-gray-400 text-left">
-              Spread:
-              <span class={"text-#{get_color_by_currency_type(currency)}-500"}>
-                <%= render_spread(currency) %>
-              </span>
+          <div class={"
+            p-4 my-2 shadow-inner-md shadow-zinc-400/50 dark:shadow-zinc-800/90 rounded-md
+            bg-gradient-to-br
+            from-#{get_color_by_currency_type(currency)}-300/20 to-#{get_color_by_currency_type(currency)}-900/20
+            dark:!from-#{get_color_by_currency_type(currency)}-900/20 dark:!to-#{get_color_by_currency_type(currency)}-300/20
+          "}>
+            <%= if currency.info_type == :reference do %>
+              <h3 class={"mt-2 text-lg font-bold text-#{get_color_by_currency_type(currency)}-500 text-left cursor-text"}>
+                <%= render_price(currency.variation_price) %>
+              </h3>
+            <% end %>
+            <%= if currency.info_type == :market do %>
+              <h3 class={"mt-2 text-lg font-bold text-#{get_color_by_currency_type(currency)}-500 text-left cursor-text"}>
+                <%= render_price(currency.buy_price) %> - <%= render_price(
+                  currency.sell_price
+                ) %>
+              </h3>
+              <p class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 text-left">
+                <%= gettext("Spread") %>:
+                <span class={"text-#{get_color_by_currency_type(currency)}-500"}>
+                  <%= render_spread(currency) %>
+                </span>
+              </p>
+            <% end %>
+            <p class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 text-left">
+              <%= render_update_time(currency) %>
             </p>
-          <% end %>
-          <p class="text-sm font-semibold text-gray-400 dark:text-gray-400 text-left">
-            <%= render_update_time(currency) %>
-          </p>
-          <button class={"
+            <button class={"
               cursor-default
-              text-white dark:text-black text-sm mt-6 px-4 py-2
+              text-zinc-600 dark:text-zinc-800 text-xs mt-6 px-2 py-1
               bg-#{get_color_by_currency_type(currency)}-400
               dark:bg-#{get_color_by_currency_type(currency)}-600
               rounded-lg tracking-wider
               outline-none
             "}>
-            <%= render_info_type(currency) %>
-          </button>
-        </div>
-        <div class="w-32 h-32 flex justify-center items-center">
-          <div class="relative">
-            <div class={"
-              bg-gradient-to-tr
-              from-#{get_color_by_price_direction(currency)}-400/75 to-#{get_color_by_price_direction(currency)}-300/75
-              dark:from-#{get_color_by_price_direction(currency)}-400 dark:to-#{get_color_by_price_direction(currency)}-300
-              w-32 h-32
-              rounded-full
-              shadow-2xl shadow-#{get_color_by_price_direction(currency)}-400/50
-              group-hover:shadow-lg
-              border-#{get_color_by_price_direction(currency)}-400 border-dashed border-2
-              justify-center items-center
-              group-hover:-rotate-180 duration-1000 group-hover:border-dotted group-hover:border-[1px]
-            "} />
+              <%= render_info_type(currency) %>
+            </button>
           </div>
-          <div class="absolute">
-            <h1 class="text-white dark:text-white text-2xl group-hover:text-3xl duration-200">
-              <%= render_variation_percent(currency) %>
-            </h1>
+        </div>
+        <div class="w-[30%]">
+          <div class="w-[6.5rem] h-[6.5rem] flex justify-center items-center overflow-hidden">
+            <div class="relative">
+              <div class={"
+                bg-gradient-to-tr
+                from-#{get_color_by_price_direction(currency)}-400/75 to-#{get_color_by_price_direction(currency)}-300/75
+                dark:from-#{get_color_by_price_direction(currency)}-400/75 dark:to-#{get_color_by_price_direction(currency)}-300/75
+                w-[6.5rem] h-[6.5rem]
+                rounded-full
+                shadow-none group-hover:shadow-inner-xs
+                group-hover:shadow-#{get_color_by_price_direction(currency)}-500
+                border-#{get_color_by_price_direction(currency)}-400 border-dashed border-2
+                justify-center items-center
+                group-hover:-rotate-180 duration-1000 group-hover:border-dotted group-hover:border-[1px]
+              "} />
+            </div>
+            <div class="absolute w-[inherit] overflow-hidden">
+              <h1 class="text-white dark:text-white text-xl group-hover:text-2xl duration-200 px-1">
+                <%= render_variation_percent(currency) %>
+              </h1>
+            </div>
           </div>
         </div>
       </div>