From dc73aaac5c8b9c90a3009c3b71bc49668ee4dd48 Mon Sep 17 00:00:00 2001
From: Jose Lezama <me@joseglego.io>
Date: Sun, 29 Sep 2024 22:55:46 -0300
Subject: [PATCH] Lego/feat/more accurate figma (#54)

# Summary
- UI looks closer to Figma design (or less different, as you wish to
take it!)
---
 app/components/Footer/index.tsx               |   4 +-
 app/components/Login/Login.tsx                |   2 +-
 app/components/MyEvent/MyEvent.tsx            | 223 ++++++++-------
 .../MyEvent/MyEventLoadingSkeleton.tsx        |  28 +-
 app/components/MyEvents/MyTicketsList.tsx     |  87 +++---
 .../MyEvents/MyTicketsLoadingSkeleton.tsx     |  11 +-
 .../MyPurchaseOrders/MyPurchaseOrders.tsx     |  32 ++-
 .../MyPurchaseOrdersLoadingSkeleton.tsx       |  34 ++-
 app/components/PurchaseOrder/Callback.tsx     | 265 +++++++++---------
 .../PurchaseOrder/CallbackLoadingSkeleton.tsx |  20 +-
 .../TicketsSaleFlow/ConfirmationTab.tsx       |  44 +--
 .../TicketsSaleFlow/TicketSelectionTab.tsx    |  72 ++---
 .../TicketsSaleFlowSkeleton.tsx               |  20 +-
 app/components/TicketsSaleFlow/index.tsx      |  19 +-
 app/components/TicketsSaleFlow/inputs.tsx     |   2 +-
 .../TicketsSaleFlow/ticketSaleFlow.tsx        |  29 +-
 app/root.tsx                                  |   7 +-
 .../_authenticated/my-events._index/index.tsx |   2 +-
 app/routes/_authenticated/profile/index.tsx   |   2 +-
 app/utils/date.ts                             |  19 +-
 app/utils/ticket.ts                           |  20 +-
 package-lock.json                             |  10 +-
 package.json                                  |   2 +-
 tailwind.config.js                            |   2 +-
 24 files changed, 507 insertions(+), 449 deletions(-)

diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
index b22df29..1f6b81c 100644
--- a/app/components/Footer/index.tsx
+++ b/app/components/Footer/index.tsx
@@ -34,9 +34,9 @@ export const Footer = () => {
   return (
     <footer className="border-t bg-background/95 text-sm text-primary">
       <div className="container flex flex-col justify-between gap-4 py-8 md:flex-row">
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-4">
           <div>© {year} Proudly Powered by CommunityOS</div>
-          <div className="flex gap-2">
+          <div className="flex gap-3">
             {socials.map(({ icon, name, url }) => (
               <a
                 key={name}
diff --git a/app/components/Login/Login.tsx b/app/components/Login/Login.tsx
index e6bf8a6..8bc6ff9 100644
--- a/app/components/Login/Login.tsx
+++ b/app/components/Login/Login.tsx
@@ -17,7 +17,7 @@ export const Login = () => {
   return (
     <div className="flex w-full max-w-lg shrink-0 flex-col gap-4 rounded-2xl border bg-background p-10 shadow-xl">
       <div>
-        <h1 className="text-left font-cal text-2xl">Regístrate.</h1>
+        <h1 className="text-left text-2xl font-semibold">Regístrate.</h1>
         <p className="text-left text-sm text-muted-foreground">
           Mantente al tanto de las novedades de JavaScript Chile.
         </p>
diff --git a/app/components/MyEvent/MyEvent.tsx b/app/components/MyEvent/MyEvent.tsx
index cb2dd24..e93c9c7 100644
--- a/app/components/MyEvent/MyEvent.tsx
+++ b/app/components/MyEvent/MyEvent.tsx
@@ -8,15 +8,15 @@ import {
   Mail,
   EyeIcon,
   EyeOffIcon,
+  Sparkles,
 } from "lucide-react";
 import { useState } from "react";
 import QRCode from "react-qr-code";
 
-import { Badge } from "~/components/ui/badge";
 import { Button, buttonVariants } from "~/components/ui/button";
 import { Card, CardContent, CardTitle } from "~/components/ui/card";
 import { Separator } from "~/components/ui/separator";
-import { formatDate, formatTime } from "~/utils/date";
+import { formatCalendarDate, formatDate, formatTime } from "~/utils/date";
 import {
   redemptionStatusLabel,
   redemptionStatusColor,
@@ -45,93 +45,114 @@ const Ticket = ({
     : undefined;
 
   return (
-    <Card className="h-full bg-white p-6 text-black">
-      <div className="relative mx-auto mt-4 w-full max-w-[90%] text-center">
-        <div className={cn(showQR ? "" : "blur-lg")}>
-          <QRCode className="mx-auto max-w-[90%]" value={ticket.id} />
+    <Card className="flex h-full flex-col justify-between gap-6 bg-white p-6 text-black">
+      <div className="flex w-full flex-col gap-6">
+        <div className="relative mx-auto mt-4 w-full max-w-[90%] text-center">
+          <div
+            className={cn(
+              "mx-auto max-w-[90%] overflow-hidden",
+              showQR ? "" : " max-w-[80%] overflow-hidden",
+            )}
+          >
+            <QRCode
+              className={cn("aspect-square w-full", showQR ? "" : "blur-md")}
+              value={ticket.id}
+            />
+          </div>
         </div>
+        <CardTitle className="text-center font-bold">
+          ID Ref: {ticketIdReference(ticket.id)}
+        </CardTitle>
+        <CardContent className="p-0 text-sm">
+          <div className="grid gap-3">
+            <ul className="grid gap-3">
+              <li className="flex items-center justify-between text-base">
+                <span className="shrink-0 font-bold">Evento</span>
+                <span className="text-right">{event.name}</span>
+              </li>
+            </ul>
+            <Separator className="my-2 bg-[#e7e5e4]" />
+            <ul className="grid gap-3">
+              <li className="flex items-center justify-between">
+                <span className="shrink-0 font-bold">Fecha de inicio</span>
+                <span className="text-right">
+                  {formatDate(event.startDateTime as string)}
+                </span>
+              </li>
+              {event.endDateTime ? (
+                <li className="flex items-center justify-between">
+                  <span className="shrink-0 font-bold">Fecha de fin</span>
+                  <span className="text-right">
+                    {formatDate(event.endDateTime as string)}
+                  </span>
+                </li>
+              ) : null}
+            </ul>
+            <Separator className="my-2 bg-[#e7e5e4]" />
+            <ul className="grid gap-3">
+              <li className="flex items-center justify-between">
+                <span className="shrink-0 font-bold">Tipo de Ticket</span>
+                <span className="text-right">{ticket.ticketTemplate.name}</span>
+              </li>
+              <li className="flex items-center justify-between">
+                <span className="shrink-0 font-bold">Estado</span>
+                <span className="text-right">
+                  <span className="flex flex-row items-center gap-2">
+                    <span
+                      className={cn(
+                        "flex h-2 w-2 rounded-full",
+                        redemptionStatusColor(ticket.redemptionStatus),
+                      )}
+                    />
+                    {redemptionStatusLabel(ticket.redemptionStatus)}
+                  </span>
+                </span>
+              </li>
+              <li className="flex items-center justify-between">
+                <span className="shrink-0 font-bold">Fecha de Compra</span>
+                <span className="text-right">
+                  {formatCalendarDate(ticket.createdAt as string)}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </CardContent>
+      </div>
+      <div className="flex flex-col gap-2 p-0 md:flex-row">
         <Button
-          className="mt-8"
+          className={cn(
+            buttonVariants({ variant: "outline" }),
+            "flex grow flex-row gap-2 bg-white text-black",
+          )}
           onClick={() => {
             setShowQR((show) => !show);
           }}
         >
           {showQR ? (
             <>
-              <EyeIcon className="size-4" /> Ocultar QR
+              <EyeOffIcon className="size-4" /> Ocultar QR
             </>
           ) : (
             <>
-              <EyeOffIcon className="size-4" /> Ver QR
+              <EyeIcon className="size-4" /> Ver QR
             </>
           )}
         </Button>
-      </div>
-      <CardTitle className="my-6 text-center">
-        ID Ref: {ticketIdReference(ticket.id)}
-      </CardTitle>
-      <CardContent className="text-sm">
-        <div className="grid gap-3">
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="font-semibold">Evento</span>
-              <span>{event.name}</span>
-            </li>
-          </ul>
-          <Separator className="my-2" />
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="font-semibold">Fecha de inicio</span>
-              <span>{formatDate(event.startDateTime as string)}</span>
-            </li>
-            {event.endDateTime ? (
-              <li className="flex items-center justify-between">
-                <span className="font-semibold">Fecha de fin</span>
-                <span>{formatDate(event.endDateTime as string)}</span>
-              </li>
-            ) : null}
-          </ul>
-          <Separator className="my-2" />
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="font-semibold">Tipo de Ticket</span>
-              <span>{ticket.ticketTemplate.name}</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="font-semibold">Estado</span>
-              <span>
-                <Badge className="gap-2 text-black" variant="outline">
-                  <span
-                    className={cn(
-                      "flex h-2 w-2 rounded-full",
-                      redemptionStatusColor(ticket.redemptionStatus),
-                    )}
-                  />
-                  {redemptionStatusLabel(ticket.redemptionStatus)}
-                </Badge>
-              </span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="font-semibold">Fecha de Compra</span>
-              <span>{formatDate(ticket.createdAt as string)}</span>
-            </li>
-          </ul>
-        </div>
-        <div className="mt-4 flex flex-col gap-2 md:flex-row">
-          {publicUrl ? (
-            <a
-              href={publicUrl}
-              target="_blank"
-              rel="noreferrer noopener"
-              className={cn(
-                buttonVariants({ variant: "outline" }),
-                "flex grow flex-row gap-2 bg-white text-black",
-              )}
-            >
-              Ver y Compartir <ExternalLink className="size-4" />
-            </a>
-          ) : null}
-          {/* 
+        {publicUrl ? (
+          <a
+            href={publicUrl}
+            target="_blank"
+            rel="noreferrer noopener"
+            className={cn(
+              buttonVariants({ variant: "outline" }),
+              "flex grow flex-row gap-2 bg-white text-black",
+            )}
+          >
+            <Sparkles className="size-4" />
+            Compartir
+          </a>
+        ) : null}
+        {/*
           <Button
             className="flex grow flex-row gap-2 bg-white text-black"
             variant="outline"
@@ -147,8 +168,7 @@ const Ticket = ({
             <Mail className="size-4" /> Enviar por email
           </Button>
            */}
-        </div>
-      </CardContent>
+      </div>
     </Card>
   );
 };
@@ -184,8 +204,8 @@ export const MyEvent = ({ id }: { id: string }) => {
       ) : null}
 
       {event ? (
-        <div className="flex w-full flex-col gap-4">
-          <div className="flex basis-4/12 flex-col gap-2">
+        <div className="flex w-full flex-col gap-6">
+          <div className="flex basis-4/12 flex-col gap-6">
             <div
               className={cn(
                 "mx-auto h-20 w-full rounded-md bg-primary/10 lg:h-40",
@@ -197,29 +217,32 @@ export const MyEvent = ({ id }: { id: string }) => {
                   : {}
               }
             />
-            <h2 className="font-cal text-2xl">{event.name}</h2>
-            <p className="text-sm text-muted-foreground">{event.description}</p>
-            <div className="flex flex-row items-center gap-1 text-sm">
-              <Calendar className="size-4" />
-              {[formattedDate, formattedTime].filter(Boolean).join(" - ")}
+            <h2 className="text-2xl font-semibold">{event.name}</h2>
+            <p className="text-base text-muted-foreground">
+              {event.description}
+            </p>
+            <div className="flex flex-col gap-3 font-medium">
+              {formatedAddress ? (
+                <a
+                  href={encodeURI(
+                    `https://www.google.com/maps/search/${formatedAddress}?source=opensearch`,
+                  )}
+                  target="_blank"
+                  className="flex flex-row items-center gap-2.5 text-sm"
+                  rel="noreferrer"
+                >
+                  <MapPin className="size-6" />
+                  {formatedAddress}
+                  <ExternalLink className="size-6" />
+                  <span className="sr-only">Ver en Google Maps</span>
+                </a>
+              ) : null}
+              <div className="flex flex-row items-center gap-2.5 text-sm">
+                <Calendar className="size-6" />
+                {[formattedDate, formattedTime].filter(Boolean).join(" - ")}
+              </div>
             </div>
-            {formatedAddress ? (
-              <a
-                href={encodeURI(
-                  `https://www.google.com/maps/search/${formatedAddress}?source=opensearch`,
-                )}
-                target="_blank"
-                className="flex flex-row items-center gap-1 text-sm"
-                rel="noreferrer"
-              >
-                <MapPin className="size-4" />
-                {formatedAddress}
-                <ExternalLink className="size-4" />
-                <span className="sr-only">Ver en Google Maps</span>
-              </a>
-            ) : null}
           </div>
-          <Separator className="my-2" />
           <div className="mx-auto grid w-full grid-cols-1 gap-4 md:grid-cols-3">
             {tickets.map((ticket) => (
               <Ticket key={ticket.id} event={event} ticket={ticket} />
diff --git a/app/components/MyEvent/MyEventLoadingSkeleton.tsx b/app/components/MyEvent/MyEventLoadingSkeleton.tsx
index 2b79b08..a42dce1 100644
--- a/app/components/MyEvent/MyEventLoadingSkeleton.tsx
+++ b/app/components/MyEvent/MyEventLoadingSkeleton.tsx
@@ -4,24 +4,25 @@ import { Skeleton } from "~/components/ui/skeleton";
 
 const LoadingCard = () => {
   return (
-    <Card className="h-full p-6">
+    <Card className="flex h-full flex-col gap-2 p-6">
       <Skeleton className="mx-auto size-60 rounded-md" />
-      <Skeleton className="mx-auto my-6 h-6 w-40" />
-      <Skeleton className="h-6 w-full" />
+      <Skeleton className="mx-auto h-8 w-40" />
+      <Skeleton className="h-8 w-full" />
       <Separator className="my-2" />
-      <span className="flex flex-col gap-2">
+      <span className="flex flex-col gap-3">
         <Skeleton className="h-6 w-full" />
         <Skeleton className="h-6 w-full" />
       </span>
       <Separator className="my-2" />
-      <span className="flex flex-col gap-2">
+      <span className="flex flex-col gap-3">
         <Skeleton className="h-6 w-full" />
         <Skeleton className="h-6 w-full" />
         <Skeleton className="h-6 w-full" />
       </span>
-      <div className="mt-4 flex items-end justify-between">
-        <Skeleton className="h-8 w-24" />
-        <Skeleton className="h-8 w-24" />
+      <Separator className="my-2" />
+      <div className="flex flex-col items-end justify-between gap-3 md:flex-row">
+        <Skeleton className="h-8 w-full md:w-1/2" />
+        <Skeleton className="h-8 w-full md:w-1/2" />
       </div>
     </Card>
   );
@@ -29,15 +30,16 @@ const LoadingCard = () => {
 
 export const MyEventLoadingSkeleton = () => {
   return (
-    <div className="flex w-full flex-col gap-4">
-      <div className="flex basis-4/12 flex-col gap-2">
+    <div className="flex w-full flex-col gap-6">
+      <div className="flex basis-4/12 flex-col gap-6">
         <Skeleton className="h-20 w-full rounded-md bg-primary/10 lg:h-40" />
         <Skeleton className="h-12 w-36" />
         <Skeleton className="h-6 w-80" />
-        <Skeleton className="h-6 w-40" />
-        <Skeleton className="h-6 w-40" />
+        <div className="flex basis-4/12 flex-col gap-3">
+          <Skeleton className="h-6 w-40" />
+          <Skeleton className="h-6 w-40" />
+        </div>
       </div>
-      <Separator className="my-2" />
       <div className="mx-auto grid w-full grid-cols-1 gap-4 md:grid-cols-3">
         <div className="basis-full md:basis-1/3">
           <LoadingCard />
diff --git a/app/components/MyEvents/MyTicketsList.tsx b/app/components/MyEvents/MyTicketsList.tsx
index 2613ec9..e14a677 100644
--- a/app/components/MyEvents/MyTicketsList.tsx
+++ b/app/components/MyEvents/MyTicketsList.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@remix-run/react";
-import { ArrowRight, Calendar, MapPin } from "lucide-react";
+import { Calendar, MapPin } from "lucide-react";
 import { useMemo } from "react";
 
 import {
@@ -7,7 +7,6 @@ import {
   useMyEventsSuspenseQuery,
 } from "~/components/MyEvents/graphql/myEvents.generated";
 import { Badge } from "~/components/ui/badge";
-import { Button } from "~/components/ui/button";
 import { Card, CardDescription, CardTitle } from "~/components/ui/card";
 import { formatDate, formatTime } from "~/utils/date";
 import { pluralize } from "~/utils/string";
@@ -25,53 +24,45 @@ const EventCard = ({
   const imageUrl = event?.previewImage?.url;
 
   return (
-    <Card className="flex h-full flex-col justify-between p-6">
-      <div>
-        {imageUrl ? (
-          <img
-            className="mx-auto size-60 rounded-md"
-            src={imageUrl}
-            alt="Imagen representativa del evento"
-          />
-        ) : (
-          <>
-            <div className="mx-auto size-60 rounded-md bg-primary/10 " />
-            <span className="sr-only">Imagen del evento</span>
-          </>
-        )}
-        <CardTitle className="my-6 text-center font-cal text-2xl">
-          {event.name}
-        </CardTitle>
-        {formatedAddress ? (
-          <CardDescription className="flex flex-row items-center gap-2">
-            <MapPin className="size-6 shrink-0" />
-            {formatedAddress}
+    <Card className="flex h-full flex-col justify-between gap-6 p-6">
+      <div className="flex flex-col gap-6">
+        <Link
+          className="flex cursor-pointer flex-col gap-6"
+          to={urls.myEvents.details(event.id)}
+        >
+          {imageUrl ? (
+            <img
+              className="mx-auto size-60 rounded-md"
+              src={imageUrl}
+              alt="Imagen representativa del evento"
+            />
+          ) : (
+            <>
+              <div className="mx-auto size-60 rounded-md bg-primary/10 " />
+              <span className="sr-only">Imagen del evento</span>
+            </>
+          )}
+          <div className="text-center">
+            <Badge className="rounded-full text-sm capitalize">
+              {event.usersTickets.length}{" "}
+              {pluralize(event.usersTickets.length, "ticket", "tickets")}
+            </Badge>
+          </div>
+          <CardTitle className="text-center text-2xl font-bold">
+            {event.name}
+          </CardTitle>
+        </Link>
+        <div className="flex flex-col gap-4">
+          {formatedAddress ? (
+            <CardDescription className="flex flex-row items-center gap-2 font-medium text-primary">
+              <MapPin className="size-6 shrink-0" />
+              {formatedAddress}
+            </CardDescription>
+          ) : null}
+          <CardDescription className="flex flex-row items-center gap-2 font-medium text-primary">
+            <Calendar className="size-6 shrink-0" />
+            {[formattedDate, formattedTime].filter(Boolean).join(" - ")}
           </CardDescription>
-        ) : null}
-        <CardDescription className="flex flex-row items-center gap-2">
-          <Calendar className="size-6 shrink-0" />
-          {[formattedDate, formattedTime].filter(Boolean).join(" - ")}
-        </CardDescription>
-      </div>
-      <div className="mt-4 flex items-end justify-between">
-        <div>
-          <Button asChild variant="secondary">
-            <Link
-              to={urls.myEvents.details(event.id)}
-              className="flex items-center gap-2"
-            >
-              <span className="capitalize">
-                {event.usersTickets.length}{" "}
-                {pluralize(event.usersTickets.length, "ticket", "tickets")}
-              </span>
-              <ArrowRight size={16} />
-            </Link>
-          </Button>
-        </div>
-        <div>
-          <Badge variant="outline" className="text-sm">
-            {event.community?.name}
-          </Badge>
         </div>
       </div>
     </Card>
diff --git a/app/components/MyEvents/MyTicketsLoadingSkeleton.tsx b/app/components/MyEvents/MyTicketsLoadingSkeleton.tsx
index 96c8d1a..0446ad9 100644
--- a/app/components/MyEvents/MyTicketsLoadingSkeleton.tsx
+++ b/app/components/MyEvents/MyTicketsLoadingSkeleton.tsx
@@ -3,17 +3,14 @@ import { Skeleton } from "~/components/ui/skeleton";
 
 const LoadingCard = () => {
   return (
-    <Card className="h-full p-6">
+    <Card className="flex h-full flex-col gap-6 p-6">
       <Skeleton className="mx-auto size-60 rounded-md" />
-      <Skeleton className="mx-auto my-6 h-8 w-40" />
-      <span className="flex flex-col gap-2">
+      <Skeleton className="mx-auto h-4 w-24" />
+      <Skeleton className="mx-auto h-8 w-40" />
+      <span className="flex flex-col gap-4">
         <Skeleton className="h-6 w-full" />
         <Skeleton className="h-6 w-full" />
       </span>
-      <div className="mt-4 flex items-end justify-between">
-        <Skeleton className="h-8 w-24" />
-        <Skeleton className="h-8 w-24" />
-      </div>
     </Card>
   );
 };
diff --git a/app/components/MyPurchaseOrders/MyPurchaseOrders.tsx b/app/components/MyPurchaseOrders/MyPurchaseOrders.tsx
index 02cfce8..ef40852 100644
--- a/app/components/MyPurchaseOrders/MyPurchaseOrders.tsx
+++ b/app/components/MyPurchaseOrders/MyPurchaseOrders.tsx
@@ -12,7 +12,7 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { formatDate } from "~/utils/date";
+import { formatCalendarDate } from "~/utils/date";
 import { formatCurrency } from "~/utils/numbers";
 import { groupedTickets } from "~/utils/purchase-order";
 import { urls } from "~/utils/urls";
@@ -41,7 +41,7 @@ export const MyPurchaseOrders = () => {
   return (
     <div className="flex flex-col gap-10">
       <div className="flex w-full items-center justify-between">
-        <h1 className="font-cal text-3xl">Ordenes de Compra</h1>
+        <h1 className="text-3xl font-semibold">Ordenes de Compra</h1>
       </div>
       {!showedPurchasedOrders?.length && (
         <div className="text-center text-gray-400">
@@ -53,15 +53,22 @@ export const MyPurchaseOrders = () => {
           <CardContent>
             <Table>
               <TableHeader>
-                <TableRow>
-                  <TableHead>Id</TableHead>
-                  <TableHead>Evento</TableHead>
-                  <TableHead className="md:table-cell">Descripción</TableHead>
-                  <TableHead className="hidden md:table-cell">
-                    Método de Pago
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Id
+                  </TableHead>
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Evento
+                  </TableHead>
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Descripción
+                  </TableHead>
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Fecha
+                  </TableHead>
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Precio
                   </TableHead>
-                  <TableHead className="hidden sm:table-cell">Fecha</TableHead>
-                  <TableHead className="text-right">Precio</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -118,11 +125,8 @@ export const MyPurchaseOrders = () => {
                           </div>
                         </Link>
                       </TableCell>
-                      <TableCell className="hidden sm:table-cell">
-                        {purchaseOrder.paymentPlatform}
-                      </TableCell>
                       <TableCell className="hidden md:table-cell">
-                        {formatDate(purchaseOrder.createdAt as string)}
+                        {formatCalendarDate(purchaseOrder.createdAt as string)}
                       </TableCell>
                       <TableCell className="text-right">
                         {purchaseOrder.finalPrice
diff --git a/app/components/MyPurchaseOrders/MyPurchaseOrdersLoadingSkeleton.tsx b/app/components/MyPurchaseOrders/MyPurchaseOrdersLoadingSkeleton.tsx
index bc3ce28..5b030ef 100644
--- a/app/components/MyPurchaseOrders/MyPurchaseOrdersLoadingSkeleton.tsx
+++ b/app/components/MyPurchaseOrders/MyPurchaseOrdersLoadingSkeleton.tsx
@@ -15,21 +15,28 @@ export const MyPurchaseOrdersLoadingSkeleton = () => {
   return (
     <div className="flex flex-col gap-10">
       <div className="flex w-full items-center justify-between">
-        <h1 className="font-cal text-3xl">Ordenes de Compra</h1>
+        <h1 className="text-3xl font-semibold">Ordenes de Compra</h1>
       </div>
       <Card>
         <CardContent>
           <Table>
             <TableHeader>
-              <TableRow>
-                <TableHead>Id</TableHead>
-                <TableHead>Evento</TableHead>
-                <TableHead className="md:table-cell">Descripción</TableHead>
-                <TableHead className="hidden md:table-cell">
-                  Método de Pago
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Id
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Evento
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Descripción
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Fecha
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Precio
                 </TableHead>
-                <TableHead className="hidden sm:table-cell">Fecha</TableHead>
-                <TableHead className="text-right">Precio</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -41,16 +48,13 @@ export const MyPurchaseOrdersLoadingSkeleton = () => {
                   <TableCell>
                     <Skeleton className="h-4 w-48" />
                   </TableCell>
-                  <TableCell className="sm:table-cell">
+                  <TableCell>
                     <Skeleton className="h-4 w-64" />
                   </TableCell>
-                  <TableCell className="hidden sm:table-cell">
-                    <Skeleton className="h-4 w-24" />
-                  </TableCell>
-                  <TableCell className="hidden md:table-cell">
+                  <TableCell>
                     <Skeleton className="h-4 w-24" />
                   </TableCell>
-                  <TableCell className="flex items-center justify-end">
+                  <TableCell>
                     <Skeleton className="h-4 w-24" />
                   </TableCell>
                 </TableRow>
diff --git a/app/components/PurchaseOrder/Callback.tsx b/app/components/PurchaseOrder/Callback.tsx
index 9399b01..6c4d0c1 100644
--- a/app/components/PurchaseOrder/Callback.tsx
+++ b/app/components/PurchaseOrder/Callback.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@remix-run/react";
-import { CircleCheck } from "lucide-react";
+import { CircleCheck, CircleX } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import { toast } from "sonner";
 
@@ -71,14 +71,15 @@ const PurchaseStatusAlert = ({
 }) => {
   const alerts = {
     [PurchaseOrderStatusEnum.Open]: {
-      icon: <CircleCheck className="size-4" />,
+      icon: <CircleX className="size-6" />,
       variant: "destructive",
       classNames: "",
       title: "Pago pendiente",
-      description: "Tu pago está pendiente",
+      description:
+        "Tu compra está pendiente de pago. Si pagaste espera unos segundos y refresca la página. Si el error persiste comunica con el equipo.",
     },
     [PurchaseOrderStatusEnum.Complete]: {
-      icon: <CircleCheck className="size-4" />,
+      icon: <CircleCheck className="size-6" />,
       variant: "default",
       classNames:
         "border-green-800/50 text-green-800 dark:border-green-400/50 dark:text-green-400  [&>svg]:text-green-800 dark:[&>svg]:text-green-400",
@@ -87,11 +88,11 @@ const PurchaseStatusAlert = ({
         "YA ESTAS LIST@! 🎉. Cuéntale al mundo, Compártelo tus redes!",
     },
     [PurchaseOrderStatusEnum.Expired]: {
-      icon: <CircleCheck className="size-4" />,
+      icon: <CircleX className="size-6" />,
       variant: "destructive",
       classNames: "",
-      title: "Pago fallido",
-      description: "Tu pago ha fallado",
+      title: "Error en el proceso de pago",
+      description: "Hubo un problema con el pago, por favor intente nuevamente",
     },
   };
 
@@ -103,7 +104,10 @@ const PurchaseStatusAlert = ({
   ) as "destructive" | "default";
 
   return (
-    <Alert variant={alertVariant} className={cn(alertInfo.classNames)}>
+    <Alert
+      variant={alertVariant}
+      className={cn(alertInfo.classNames, "[&>svg~*]:pl-11")}
+    >
       {alertInfo.icon}
       <AlertTitle>{alertInfo.title}</AlertTitle>
       <AlertDescription>{alertInfo.description}</AlertDescription>
@@ -178,140 +182,139 @@ export const PurchaseCallback = ({
   }
 
   return (
-    <>
+    <div className="mx-auto flex max-w-[856px] flex-col gap-9">
       <img
         className="mx-auto w-60"
         src={event.logoImage?.url}
         alt={event.name}
       />
       <PurchaseStatusAlert status={purchaseOrder.status} />
-      <div>
-        <Card className="mx-auto">
-          <CardContent>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[200px] text-center font-cal text-lg ">
-                    Tipo de Ticket
-                  </TableHead>
-                  <TableHead className="text-center font-cal text-lg">
-                    Descripción
-                  </TableHead>
-                  <TableHead className="w-[200px] text-center font-cal text-lg">
-                    Cantidad
-                  </TableHead>
-                  <TableHead className="w-[150px] text-center font-cal text-lg">
-                    Precio
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {tickets.map(({ count, ticket }, index) => (
-                  <TableRow key={index}>
-                    <TableCell className="p-4 text-center font-cal">
-                      {ticket.name}
-                    </TableCell>
-                    <TableCell className="text-center">
-                      {ticket.description}
-                    </TableCell>
-                    <TableCell className="text-center font-cal">
-                      {count}
-                    </TableCell>
-                    <TableCell className="text-center font-cal">
-                      {ticket.isFree && selectedCurrency
-                        ? "Gratis"
-                        : getFormmatedTicketPrice(
-                            ticket,
-                            selectedCurrency as Currency,
-                          )}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-              <TableFooter>
-                <TableRow className="bg-background">
-                  <TableCell
-                    className="text-right font-cal text-lg"
-                    colSpan={4}
-                  >
-                    {purchaseOrder.finalPrice
-                      ? formatCurrency(
-                          purchaseOrder.finalPrice,
-                          selectedCurrency?.currency as string,
-                        )
-                      : "Gratis"}
+      <Card className="mx-auto">
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow className="border-t hover:bg-transparent">
+                <TableHead className="h-[52px] w-[200px] text-center text-base font-bold text-white">
+                  Tipo de Ticket
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Descripción
+                </TableHead>
+                <TableHead className="h-[52px] w-[100px] grow-0 text-center text-base font-bold text-white">
+                  Cantidad
+                </TableHead>
+                <TableHead className="h-[52px] w-[150px] text-center text-base font-bold text-white">
+                  Precio
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {tickets.map(({ count, ticket }, index) => (
+                <TableRow key={index}>
+                  <TableCell className="p-4 py-6 text-center font-bold">
+                    {ticket.name}
+                  </TableCell>
+                  <TableCell className="py-6 text-center text-muted-foreground">
+                    {ticket.description}
+                  </TableCell>
+                  <TableCell className="py-6 text-center">{count}</TableCell>
+                  <TableCell className="py-6 text-center font-bold">
+                    {ticket.isFree && selectedCurrency
+                      ? "Gratis"
+                      : getFormmatedTicketPrice(
+                          ticket,
+                          selectedCurrency as Currency,
+                        )}
                   </TableCell>
                 </TableRow>
-              </TableFooter>
-            </Table>
-          </CardContent>
-        </Card>
-        {purchaseOrder.status === PurchaseOrderStatusEnum.Expired && (
-          <div className="mt-2 flex justify-end gap-2">
-            <Link
-              to={urls.events.root}
-              className={buttonVariants({ variant: "secondary" })}
-            >
-              Eventos
-            </Link>
-            <Link
-              to={urls.events.tickets(event.id)}
+              ))}
+            </TableBody>
+            <TableFooter>
+              <TableRow className="bg-background hover:bg-background">
+                <TableCell
+                  className="pt-9 text-right text-lg font-bold uppercase"
+                  colSpan={3}
+                >
+                  {purchaseOrder.status !== PurchaseOrderStatusEnum.Complete
+                    ? "Total a Pagar"
+                    : null}
+                </TableCell>
+                <TableCell className="pt-9 text-right text-lg font-bold md:pr-11">
+                  {purchaseOrder.finalPrice
+                    ? formatCurrency(
+                        purchaseOrder.finalPrice,
+                        selectedCurrency?.currency as string,
+                      )
+                    : "Gratis"}
+                </TableCell>
+              </TableRow>
+            </TableFooter>
+          </Table>
+        </CardContent>
+      </Card>
+      {purchaseOrder.status === PurchaseOrderStatusEnum.Expired && (
+        <div className="mt-2 flex justify-end gap-2">
+          <Link
+            to={urls.events.root}
+            className={buttonVariants({ variant: "secondary" })}
+          >
+            Eventos
+          </Link>
+          <Link
+            to={urls.events.tickets(event.id)}
+            className={buttonVariants({ variant: "default" })}
+          >
+            Volver al Evento
+          </Link>
+        </div>
+      )}
+      {purchaseOrder.status === PurchaseOrderStatusEnum.Open && (
+        <div className="mt-2 flex justify-end gap-2">
+          <Link
+            to={urls.events.tickets(event.id)}
+            className={buttonVariants({ variant: "secondary" })}
+          >
+            Atras
+          </Link>
+
+          {paymentLink ? (
+            <a
+              href={paymentLink}
+              onClick={(e) => {
+                e.preventDefault();
+
+                if (purchaseOrder.paymentLink) {
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                  window.location.href = paymentLink;
+                }
+              }}
               className={buttonVariants({ variant: "default" })}
             >
-              Volver al Evento
-            </Link>
-          </div>
-        )}
-        {purchaseOrder.status === PurchaseOrderStatusEnum.Open && (
-          <div className="mt-2 flex justify-end gap-2">
-            <Link
-              to={urls.events.tickets(event.id)}
+              Pagar
+            </a>
+          ) : null}
+        </div>
+      )}
+      {purchaseOrder.status === PurchaseOrderStatusEnum.Complete ? (
+        <div className="mt-2 flex flex-col justify-end gap-2 md:flex-row">
+          {publicURL ? (
+            <a
+              href={publicURL}
+              target="_blank"
+              rel="noreferrer noopener"
               className={buttonVariants({ variant: "secondary" })}
             >
-              Atras
-            </Link>
-
-            {paymentLink ? (
-              <a
-                href={paymentLink}
-                onClick={(e) => {
-                  e.preventDefault();
-
-                  if (purchaseOrder.paymentLink) {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                    window.location.href = paymentLink;
-                  }
-                }}
-                className={buttonVariants({ variant: "default" })}
-              >
-                Pagar
-              </a>
-            ) : null}
-          </div>
-        )}
-        {purchaseOrder.status === PurchaseOrderStatusEnum.Complete ? (
-          <div className="mt-2 flex flex-col justify-end gap-2 md:flex-row">
-            <Link
-              to={urls.myEvents.details(event.id)}
-              className={buttonVariants({
-                variant: publicURL ? "secondary" : "default",
-              })}
-            >
-              Ver en mis Eventos
-            </Link>
-            {publicURL ? (
-              <a
-                href={publicURL}
-                target="_blank"
-                rel="noreferrer noopener"
-                className={buttonVariants({ variant: "default" })}
-              >
-                Ver ticket y compartir
-              </a>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-    </>
+              Compartir
+            </a>
+          ) : null}
+          <Link
+            to={urls.myEvents.details(event.id)}
+            className={buttonVariants({ variant: "default" })}
+          >
+            Ver en mis Eventos
+          </Link>
+        </div>
+      ) : null}
+    </div>
   );
 };
diff --git a/app/components/PurchaseOrder/CallbackLoadingSkeleton.tsx b/app/components/PurchaseOrder/CallbackLoadingSkeleton.tsx
index 6b267ed..9e59b04 100644
--- a/app/components/PurchaseOrder/CallbackLoadingSkeleton.tsx
+++ b/app/components/PurchaseOrder/CallbackLoadingSkeleton.tsx
@@ -13,7 +13,7 @@ export const CallbackLoadingSkeleton = () => {
   const tickets = Array.from({ length: 5 }).map((_, index) => index);
 
   return (
-    <div className="flex w-full flex-col gap-4">
+    <div className="mx-auto flex max-w-[856px] flex-col gap-9">
       <div className="flex basis-4/12 flex-col gap-4">
         <Skeleton className="mx-auto h-40 w-60 rounded-md" />
         <Skeleton className="mx-auto h-16 w-full rounded-md" />
@@ -21,17 +21,17 @@ export const CallbackLoadingSkeleton = () => {
           <CardContent>
             <Table>
               <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[200px] text-center font-cal text-lg ">
+                <TableRow className="border-t hover:bg-transparent">
+                  <TableHead className="h-[52px] w-[200px] text-center text-base font-bold text-white">
                     Tipo de Ticket
                   </TableHead>
-                  <TableHead className="text-center font-cal text-lg">
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
                     Descripción
                   </TableHead>
-                  <TableHead className="w-[200px] text-center font-cal text-lg">
+                  <TableHead className="h-[52px] w-[100px] grow-0 text-center text-base font-bold text-white">
                     Cantidad
                   </TableHead>
-                  <TableHead className="w-[150px] text-center font-cal text-lg">
+                  <TableHead className="h-[52px] w-[150px] text-center text-base font-bold text-white">
                     Precio
                   </TableHead>
                 </TableRow>
@@ -39,16 +39,16 @@ export const CallbackLoadingSkeleton = () => {
               <TableBody>
                 {tickets.map((ticket: number) => (
                   <TableRow key={ticket}>
-                    <TableCell className="p-4 text-center">
+                    <TableCell className="p-4 py-6 text-center font-bold">
                       <Skeleton className="mx-auto h-4 w-24" />
                     </TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className="py-6 text-center text-muted-foreground">
                       <Skeleton className="mx-auto h-4 w-96" />
                     </TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className="py-6 text-center">
                       <Skeleton className="mx-auto h-4 w-12" />
                     </TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className="py-6 text-center font-bold">
                       <Skeleton className="mx-auto h-4 w-24" />
                     </TableCell>
                   </TableRow>
diff --git a/app/components/TicketsSaleFlow/ConfirmationTab.tsx b/app/components/TicketsSaleFlow/ConfirmationTab.tsx
index c4bed13..7be8d10 100644
--- a/app/components/TicketsSaleFlow/ConfirmationTab.tsx
+++ b/app/components/TicketsSaleFlow/ConfirmationTab.tsx
@@ -91,20 +91,23 @@ export const ConfirmationTab = ({
   return (
     <div className="flex flex-col gap-4">
       <Card>
-        <CardContent>
+        <CardContent className="pb-2">
+          <h2 className="mt-4	text-2xl font-bold leading-[52px]">
+            Entrada General
+          </h2>
           <Table>
             <TableHeader>
-              <TableRow>
-                <TableHead className="w-[200px] text-center font-cal text-lg ">
+              <TableRow className="border-t hover:bg-transparent">
+                <TableHead className="h-[52px] w-[200px] text-center text-base font-bold text-white">
                   Tipo de Ticket
                 </TableHead>
-                <TableHead className="text-center font-cal text-lg">
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
                   Descripción
                 </TableHead>
-                <TableHead className="w-[200px] text-center font-cal text-lg">
+                <TableHead className="h-[52px] w-[100px] grow-0 text-center text-base font-bold text-white">
                   Cantidad
                 </TableHead>
-                <TableHead className="w-[150px] text-center font-cal text-lg">
+                <TableHead className="h-[52px] w-[150px] text-center text-base font-bold text-white">
                   Precio
                 </TableHead>
               </TableRow>
@@ -114,16 +117,16 @@ export const ConfirmationTab = ({
                 .filter((ticket) => selectedTickets[ticket.id])
                 .map((ticket) => (
                   <TableRow key={ticket.id}>
-                    <TableCell className="p-4 text-center font-cal">
+                    <TableCell className="p-4 py-6 text-center font-bold">
                       {ticket.name}
                     </TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className="py-6 text-center text-muted-foreground">
                       {ticket.description}
                     </TableCell>
-                    <TableCell className="text-center font-cal">
+                    <TableCell className="py-6 text-center">
                       {selectedTickets[ticket.id]}
                     </TableCell>
-                    <TableCell className="text-center font-cal">
+                    <TableCell className="py-6 text-center font-bold">
                       {" "}
                       {ticket.isFree
                         ? "Gratis"
@@ -133,16 +136,17 @@ export const ConfirmationTab = ({
                 ))}
             </TableBody>
             <TableFooter>
-              <TableRow className="bg-background">
-                <TableCell className="text-right font-cal text-lg" colSpan={4}>
-                  {formattedTotal ? (
-                    <span className="flex flex-row justify-end gap-4">
-                      <span className="w-full grow">Total a Pagar</span>
-                      <span>{formattedTotal}</span>
-                    </span>
-                  ) : (
-                    "Gratis"
-                  )}
+              <TableRow className="bg-background hover:bg-background">
+                <TableCell
+                  className="pt-9 text-right text-lg font-bold uppercase"
+                  colSpan={3}
+                >
+                  Total a Pagar
+                </TableCell>
+                <TableCell className="pt-9 text-right text-lg font-bold md:pr-11">
+                  {!numberOfTickets || formattedTotal
+                    ? formattedTotal
+                    : "Gratis"}
                 </TableCell>
               </TableRow>
             </TableFooter>
diff --git a/app/components/TicketsSaleFlow/TicketSelectionTab.tsx b/app/components/TicketsSaleFlow/TicketSelectionTab.tsx
index f213ff5..d6dc99b 100644
--- a/app/components/TicketsSaleFlow/TicketSelectionTab.tsx
+++ b/app/components/TicketsSaleFlow/TicketSelectionTab.tsx
@@ -2,11 +2,6 @@ import { Minus, Plus } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
 import { Card, CardContent } from "~/components/ui/card";
-
-import { EventTicketFragmentFragment } from "./graphql/EventTicketFragment.generated";
-import { TicketAmountInput } from "./inputs";
-import { FirstStepFooter } from "./Stepper";
-import { Step, TicketsState } from "./types";
 import {
   Table,
   TableBody,
@@ -15,7 +10,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "../ui/table";
+} from "~/components/ui/table";
+
+import { EventTicketFragmentFragment } from "./graphql/EventTicketFragment.generated";
+import { TicketAmountInput } from "./inputs";
+import { FirstStepFooter } from "./Stepper";
+import { Step, TicketsState } from "./types";
 
 export const TicketSelectionTab = ({
   getFormmatedTicketPrice,
@@ -50,22 +50,25 @@ export const TicketSelectionTab = ({
   ) => string | null;
 }) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-9">
       <Card>
-        <CardContent id="card-content">
+        <CardContent className="pb-2">
+          <h2 className="mt-4	text-2xl font-bold leading-[52px]">
+            Entrada General
+          </h2>
           <Table>
             <TableHeader>
-              <TableRow>
-                <TableHead className="w-[200px] text-center font-cal text-lg ">
+              <TableRow className="border-t hover:bg-transparent">
+                <TableHead className="h-[52px] w-[200px] text-center text-base font-bold text-white">
                   Tipo de Ticket
                 </TableHead>
-                <TableHead className="text-center font-cal text-lg">
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
                   Descripción
                 </TableHead>
-                <TableHead className="w-[150px] text-center font-cal text-lg">
+                <TableHead className="h-[52px] w-[100px] grow-0 text-center text-base font-bold text-white">
                   Cantidad
                 </TableHead>
-                <TableHead className="w-[150px] text-center font-cal text-lg">
+                <TableHead className="h-[52px] w-[150px] text-center text-base font-bold text-white">
                   Precio
                 </TableHead>
               </TableRow>
@@ -73,20 +76,20 @@ export const TicketSelectionTab = ({
             <TableBody>
               {tickets.map((ticket) => (
                 <TableRow key={ticket.id}>
-                  <TableCell className="p-4 text-center font-cal">
+                  <TableCell className="p-4 py-6 text-center font-bold">
                     {ticket.name}
                   </TableCell>
-                  <TableCell className="text-center">
+                  <TableCell className="py-6 text-center text-muted-foreground">
                     {ticket.description}
                   </TableCell>
-                  <TableCell className="text-center font-cal">
-                    <div className="flex flex-row items-center justify-between gap-3 font-medium">
+                  <TableCell className="py-6 text-center">
+                    <div className="flex w-[100px] flex-row items-center justify-between gap-2 font-medium">
                       <Button
-                        className="size-6 shrink-0 rounded-full p-0"
+                        className="size-[20px] shrink-0 rounded-full p-0 "
                         disabled={!selectedTickets[ticket.id]}
                         onClick={() => onMinusButtonClick(ticket.id)}
                       >
-                        <Minus size={16} />
+                        <Minus size={14} />
                         <span className="sr-only">Remover Entradar</span>
                       </Button>
                       <div className="w-16">
@@ -102,16 +105,16 @@ export const TicketSelectionTab = ({
                         />
                       </div>
                       <Button
-                        className="size-6 shrink-0 rounded-full p-0"
+                        className="size-[20px] shrink-0 rounded-full p-0"
                         size="sm"
                         onClick={() => onPlusButtonClick(ticket.id)}
                       >
-                        <Plus size={16} />
+                        <Plus size={14} />
                         <span className="sr-only">Agregar Entradar</span>
                       </Button>
                     </div>
                   </TableCell>
-                  <TableCell className="text-center font-cal">
+                  <TableCell className="py-6 text-center font-bold">
                     {" "}
                     {ticket.isFree || !ticket.prices?.length
                       ? "Gratis"
@@ -121,20 +124,17 @@ export const TicketSelectionTab = ({
               ))}
             </TableBody>
             <TableFooter>
-              <TableRow className="bg-background">
-                <TableCell className="text-right font-cal text-lg" colSpan={4}>
-                  {numberOfTickets ? (
-                    formattedTotal ? (
-                      <span className="flex flex-row justify-end gap-4">
-                        <span>Total a Pagar</span>
-                        <span>{formattedTotal}</span>
-                      </span>
-                    ) : (
-                      "Gratis"
-                    )
-                  ) : (
-                    " "
-                  )}
+              <TableRow className="bg-background hover:bg-background">
+                <TableCell
+                  className="pt-9 text-right text-lg font-bold uppercase"
+                  colSpan={3}
+                >
+                  Total a Pagar
+                </TableCell>
+                <TableCell className="pt-9 text-right text-lg font-bold md:pr-11">
+                  {!numberOfTickets || formattedTotal
+                    ? formattedTotal
+                    : "Gratis"}
                 </TableCell>
               </TableRow>
             </TableFooter>
diff --git a/app/components/TicketsSaleFlow/TicketsSaleFlowSkeleton.tsx b/app/components/TicketsSaleFlow/TicketsSaleFlowSkeleton.tsx
index 850bf19..b98510c 100644
--- a/app/components/TicketsSaleFlow/TicketsSaleFlowSkeleton.tsx
+++ b/app/components/TicketsSaleFlow/TicketsSaleFlowSkeleton.tsx
@@ -13,27 +13,31 @@ export const TicketsSaleFlowSkeleton = () => {
   const tickets = Array.from({ length: 5 }).map((_, index) => index);
 
   return (
-    <div className="flex w-full flex-col gap-4">
-      <div className="flex basis-4/12 flex-col gap-2">
+    <div className="mx-auto flex w-full max-w-[1076px] flex-col gap-9">
+      <div className="flex flex-col gap-9">
         <Skeleton className="mx-auto h-20 w-full rounded-md md:h-40" />
-        <div className="flex w-full justify-end">
+        <div className="flex w-full items-center justify-between">
+          <div className="flex flex-col gap-4">
+            <Skeleton className="h-16 w-48" />
+            <Skeleton className="h-8 w-96" />
+          </div>
           <Skeleton className="h-8 w-24" />
         </div>
         <Card>
           <CardContent>
             <Table>
               <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[200px] text-center font-cal text-lg ">
+                <TableRow className="border-t hover:bg-transparent">
+                  <TableHead className="h-[52px] w-[200px] text-center text-base font-bold text-white">
                     Tipo de Ticket
                   </TableHead>
-                  <TableHead className="text-center font-cal text-lg">
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
                     Descripción
                   </TableHead>
-                  <TableHead className="w-[200px] text-center font-cal text-lg">
+                  <TableHead className="h-[52px] w-[100px] grow-0 text-center text-base font-bold text-white">
                     Cantidad
                   </TableHead>
-                  <TableHead className="w-[150px] text-center font-cal text-lg">
+                  <TableHead className="h-[52px] w-[150px] text-center text-base font-bold text-white">
                     Precio
                   </TableHead>
                 </TableRow>
diff --git a/app/components/TicketsSaleFlow/index.tsx b/app/components/TicketsSaleFlow/index.tsx
index 0bbaa89..e26cf08 100644
--- a/app/components/TicketsSaleFlow/index.tsx
+++ b/app/components/TicketsSaleFlow/index.tsx
@@ -1,4 +1,3 @@
-import { AnimatePresence, motion } from "framer-motion";
 import { Suspense } from "react";
 
 import { EventStatus } from "~/api/gql/graphql";
@@ -73,19 +72,11 @@ const LoadTickets = ({ id }: { id: string | null }) => {
 export default function EventPage({ id }: { id: string }) {
   return (
     <main className="mx-auto flex w-full max-w-[1360px] px-6 py-12">
-      <AnimatePresence mode="popLayout">
-        <Suspense fallback={<TicketsSaleFlowSkeleton />}>
-          <motion.div
-            className="flex w-full flex-col gap-10"
-            key="lazyComponent"
-            initial={{ opacity: 0, y: 50 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -50 }}
-          >
-            <LoadTickets id={id} />
-          </motion.div>
-        </Suspense>
-      </AnimatePresence>
+      <Suspense fallback={<TicketsSaleFlowSkeleton />}>
+        <div className="flex w-full flex-col gap-10">
+          <LoadTickets id={id} />
+        </div>
+      </Suspense>
     </main>
   );
 }
diff --git a/app/components/TicketsSaleFlow/inputs.tsx b/app/components/TicketsSaleFlow/inputs.tsx
index 5c65b77..cf5dcba 100644
--- a/app/components/TicketsSaleFlow/inputs.tsx
+++ b/app/components/TicketsSaleFlow/inputs.tsx
@@ -12,7 +12,7 @@ export const TicketAmountInput = ({
   return (
     <Input
       type="number"
-      className="appearance-none"
+      className="border-0 p-0 text-center text-xl [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
       value={value}
       min={0}
       max={100}
diff --git a/app/components/TicketsSaleFlow/ticketSaleFlow.tsx b/app/components/TicketsSaleFlow/ticketSaleFlow.tsx
index 067a377..c37a578 100644
--- a/app/components/TicketsSaleFlow/ticketSaleFlow.tsx
+++ b/app/components/TicketsSaleFlow/ticketSaleFlow.tsx
@@ -207,7 +207,10 @@ export default function Tickets({
       value={steps[step].slug}
       onValueChange={customStep}
     >
-      <TabsContent value={steps[0].slug} className="flex flex-col gap-4">
+      <TabsContent
+        value={steps[0].slug}
+        className="mx-auto flex max-w-[1076px] flex-col gap-9"
+      >
         <div
           className={cn(
             "mx-auto h-20 w-full rounded-md bg-primary/10 lg:h-40",
@@ -219,10 +222,17 @@ export default function Tickets({
               : {}
           }
         />
-        <div className="flex items-center">
-          <div className="ml-auto flex items-center gap-2">
+        <div className="flex flex-col items-center gap-4 md:flex-row">
+          <div className="flex w-full flex-col gap-4">
+            <h2 className="text-3xl font-semibold">Compra de tickets</h2>
+            <p className="text-muted-foreground">
+              Selecciona la cantidad de tickets que quieres comprar
+            </p>
+          </div>
+          <div className="ml-auto flex w-full gap-4">
             {Object.values(currencies).length > 1 ? (
-              <div className="flex justify-end">
+              <div className="flex w-full flex-col items-start justify-start gap-4 md:flex-row md:items-center md:justify-end">
+                <span className="text-muted-foreground">Tipo de Moneda</span>
                 <Select
                   onValueChange={handleChangeCurrency}
                   defaultValue={selectedCurrencyId}
@@ -261,12 +271,21 @@ export default function Tickets({
           hasFinished={hasFinished}
         />
       </TabsContent>
-      <TabsContent value={steps[1].slug} className="flex flex-col gap-4">
+      <TabsContent
+        value={steps[1].slug}
+        className="mx-auto flex max-w-[856px] flex-col gap-9"
+      >
         <img
           className="mx-auto w-60"
           src={event.logoImage?.url}
           alt={event.name}
         />
+        <div className="flex flex-col items-center gap-4">
+          <h2 className="text-3xl font-semibold">Confirmación</h2>
+          <p className="text-center text-muted-foreground">
+            Revisa los detalles del evento y tus tickets antes de continuar
+          </p>
+        </div>
         <ConfirmationTab
           step={step}
           steps={steps}
diff --git a/app/root.tsx b/app/root.tsx
index 3526d61..de67298 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -12,8 +12,7 @@ import "./tailwind.css";
 import { AnimatePresence, motion } from "framer-motion";
 
 import "cal-sans";
-import "@fontsource/poppins/300.css";
-import "@fontsource/poppins/400.css";
+import "@fontsource-variable/inter";
 
 import { ApolloWrapper } from "~/api/ApolloWrapper";
 import { Footer } from "~/components/Footer";
@@ -28,7 +27,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html
       lang="en"
-      className={`h-dvh bg-slate-100 font-poppins dark:bg-slate-950`}
+      className={`h-dvh bg-slate-100 font-inter dark:bg-slate-950`}
     >
       <head>
         <meta charSet="utf-8" />
@@ -64,7 +63,7 @@ export default function App() {
             animate="animate"
             exit="exit"
             transition={transition}
-            className="flex min-h-[calc(100dvh-20rem)] flex-row md:min-h-[calc(100dvh-10.5rem)]"
+            className="flex min-h-[calc(100dvh-20rem)] flex-row md:min-h-[calc(100dvh-11rem)]"
           >
             <Outlet />
           </motion.div>
diff --git a/app/routes/_authenticated/my-events._index/index.tsx b/app/routes/_authenticated/my-events._index/index.tsx
index d01f0a6..7afaf12 100644
--- a/app/routes/_authenticated/my-events._index/index.tsx
+++ b/app/routes/_authenticated/my-events._index/index.tsx
@@ -13,7 +13,7 @@ export default function Layout() {
   return (
     <div className={cx(sharedLayoutStyle, "flex flex-col gap-10")}>
       <div className="flex w-full items-center justify-between">
-        <h1 className="font-cal text-3xl">Mis Eventos</h1>
+        <h1 className="text-3xl font-semibold">Mis Eventos</h1>
         <div>
           <Tabs
             defaultValue="future"
diff --git a/app/routes/_authenticated/profile/index.tsx b/app/routes/_authenticated/profile/index.tsx
index fac0314..ee33d66 100644
--- a/app/routes/_authenticated/profile/index.tsx
+++ b/app/routes/_authenticated/profile/index.tsx
@@ -9,7 +9,7 @@ export default function Layout() {
   return (
     <div className={cx(sharedLayoutStyle, "flex flex-col gap-10")}>
       <div className="flex w-full items-center justify-between">
-        <h1 className="font-cal text-3xl">Tu Perfil</h1>
+        <h1 className="text-3xl font-semibold">Tu Perfil</h1>
       </div>
       <Suspense fallback={<MyProfileLoadingSkeleton />}>
         <MyProfile />
diff --git a/app/utils/date.ts b/app/utils/date.ts
index fcb5658..e1d4a5a 100644
--- a/app/utils/date.ts
+++ b/app/utils/date.ts
@@ -1,5 +1,8 @@
 import { formatDistanceToNow, subDays, format } from "date-fns";
 
+const capitalizeFirstLetter = (string: string): string =>
+  string.charAt(0).toUpperCase() + string.slice(1);
+
 export const formatDate = (date: string | Date | null | undefined): string => {
   if (date == null) {
     return "";
@@ -10,11 +13,25 @@ export const formatDate = (date: string | Date | null | undefined): string => {
   const relativeDate = formatDistanceToNow(parsedDate, {
     addSuffix: true,
   });
-  const formattedDate = format(parsedDate, "cccc - d 'de' MMMM, yyyy");
+  const formattedDate = capitalizeFirstLetter(
+    format(parsedDate, "EEEE d 'de' MMMM, yyyy"),
+  );
 
   return isOverAWeekFromNow ? formattedDate : relativeDate;
 };
 
+export const formatCalendarDate = (
+  date: string | Date | null | undefined,
+): string => {
+  if (date == null) {
+    return "";
+  }
+
+  const parsedDate = date instanceof Date ? date : new Date(date);
+
+  return format(parsedDate, "dd/MM/yyyy");
+};
+
 export const formatTime = (date: string | Date | null | undefined): string => {
   if (date == null) {
     return "";
diff --git a/app/utils/ticket.ts b/app/utils/ticket.ts
index 191d8b2..b6f54e6 100644
--- a/app/utils/ticket.ts
+++ b/app/utils/ticket.ts
@@ -4,24 +4,24 @@ export const idReference = (id: string) => id.split("-")[4];
 
 export const approvalStatusLabel = (status: string) =>
   ({
-    approved: "aprobado",
-    cancelled: "cancelado",
-    not_required: "no requerido",
-    pending: "pendiente",
-    rejected: "rechazado",
+    approved: "Aprobado",
+    cancelled: "Cancelado",
+    not_required: "No requerido",
+    pending: "Pendiente",
+    rejected: "Rechazado",
   })[status] ?? "";
 
 export const paymentStatusLabel = (status: string) =>
   ({
-    not_required: "no requerido",
-    paid: "pagado",
-    unpaid: "no pagado",
+    not_required: "No requerido",
+    paid: "Pagado",
+    unpaid: "No pagado",
   })[status] ?? "";
 
 export const redemptionStatusLabel = (status: string) =>
   ({
-    pending: "por reclamar",
-    redeemed: "reclamado",
+    pending: "Por utilizar",
+    redeemed: "Utilizado",
   })[status] ?? "";
 
 export const approvalStatusColor = (status: string) =>
diff --git a/package-lock.json b/package-lock.json
index 2478bb0..988b8de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
       "name": "tickets-remix",
       "dependencies": {
         "@apollo/client": "^3.10.8",
-        "@fontsource/poppins": "^5.0.15",
+        "@fontsource-variable/inter": "^5.1.0",
         "@icons-pack/react-simple-icons": "^10.0.0",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-avatar": "^1.1.0",
@@ -2084,10 +2084,10 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
       "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA=="
     },
-    "node_modules/@fontsource/poppins": {
-      "version": "5.0.15",
-      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.0.15.tgz",
-      "integrity": "sha512-hN8jhlb01v0f8F3X5h8XUiqz/dMYg/RrhyHmU1o4gZIgk+Yj2SeqmRLBj88Lh+pEjdVTmbDXSHGCVlbyPaSm8A=="
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.1.0.tgz",
+      "integrity": "sha512-Wj2dUGP0vUpxRGQTXQTCNJO+aLcFcQm+gUPXfj/aS877bQkEPBPv9JvZJpwdm2vzelt8NTZ+ausKlBCJjh2XIg=="
     },
     "node_modules/@graphiql/react": {
       "version": "0.22.3",
diff --git a/package.json b/package.json
index 0165f2d..30ec65e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.10.8",
-    "@fontsource/poppins": "^5.0.15",
+    "@fontsource-variable/inter": "^5.1.0",
     "@icons-pack/react-simple-icons": "^10.0.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
diff --git a/tailwind.config.js b/tailwind.config.js
index 0a1a165..233daf3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,7 +28,7 @@ module.exports = {
     extend: {
       fontFamily: {
         "cal": ["Cal Sans", "sans-serif"],
-        "poppins": ["Poppins", "sans-serif"],
+        "inter": ["Inter Variable", "sans-serif"],
       },
       colors: {
         border: "hsl(var(--border))",