diff --git a/app/components/Navbar/index.tsx b/app/components/Navbar/index.tsx
index 3956a3b..ee993ca 100644
--- a/app/components/Navbar/index.tsx
+++ b/app/components/Navbar/index.tsx
@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link, useNavigate } from "@remix-run/react";
 import { LogOut, Tickets, UserIcon, VenetianMaskIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 
@@ -18,6 +18,7 @@ import { ThemeSwitcher } from "./ThemeSwitcher";
 import type { NavbarMenuItem } from "./types";
 
 export const Navbar = () => {
+  const navigate = useNavigate();
   const isLogged = useIsLoggedIn();
   const isAuthReady = useIsAuthReady();
   const myProfile = useMyProfileQuery({
@@ -87,6 +88,7 @@ export const Navbar = () => {
               icon: <LogOut className="mr-2 size-4" />,
               onClick: () => {
                 logout().catch(console.error);
+                navigate(urls.home);
               },
             },
           ],
@@ -104,6 +106,7 @@ export const Navbar = () => {
       isLogged,
       myProfile?.data?.me?.isSuperAdmin,
       setImpersonation,
+      navigate,
     ],
   );
 
diff --git a/app/root.tsx b/app/root.tsx
index de67298..5c253e2 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,3 +1,4 @@
+import { LinksFunction, MetaFunction } from "@remix-run/cloudflare";
 import {
   Links,
   Meta,
@@ -8,7 +9,6 @@ import {
 } from "@remix-run/react";
 import { setDefaultOptions } from "date-fns";
 import { es } from "date-fns/locale";
-import "./tailwind.css";
 import { AnimatePresence, motion } from "framer-motion";
 
 import "cal-sans";
@@ -21,6 +21,8 @@ import { Toaster } from "~/components/ui/sonner";
 import { getDefaultThemeKey } from "~/rootHelpers";
 import { AuthProvider } from "~/utils/supabase/AuthProvider";
 
+import "./tailwind.css";
+
 setDefaultOptions({ locale: es });
 
 export function Layout({ children }: { children: React.ReactNode }) {
@@ -50,6 +52,41 @@ const variants = {
   exit: { opacity: 0, scale: 0.99 },
 };
 const transition = { duration: 0.3 };
+
+export const links: LinksFunction = () => {
+  return [
+    {
+      rel: "icon",
+      href: "light-mode-favicon.ico",
+      media: "(prefers-color-scheme: light)",
+    },
+    {
+      rel: "icon",
+      href: "dark-mode-favicon.ico",
+      media: "(prefers-color-scheme: dark)",
+    },
+  ];
+};
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "Tickets - Plataforma de Entradas Open-Source para Eventos." },
+    {
+      property: "og:title",
+      content: "Tickets - Plataforma de Entradas Open-Source para Eventos.",
+    },
+    {
+      name: "description",
+      content:
+        "Tickets - Descubre y compra entradas para eventos emocionantes, la solución open-source para la gestión de eventos. Ya sea que asistas o organices, nuestra plataforma te ayuda a descubrir, gestionar y vender entradas, todo impulsado por una comunidad colaborativa.",
+    },
+    {
+      property: "og:image",
+      content: "/og.jpg",
+    },
+  ];
+};
+
 export default function App() {
   return (
     <AuthProvider>
diff --git a/app/routes/_authenticated/my-events._index/index.tsx b/app/routes/_authenticated/my-events._index/index.tsx
index 7afaf12..0521cfd 100644
--- a/app/routes/_authenticated/my-events._index/index.tsx
+++ b/app/routes/_authenticated/my-events._index/index.tsx
@@ -1,3 +1,4 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { cx } from "class-variance-authority";
 import { Suspense, useMemo, useState } from "react";
 
@@ -6,6 +7,10 @@ import { MyTicketsLoadingSkeleton } from "~/components/MyEvents/MyTicketsLoading
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Mi Eventos | Tickets" }];
+};
+
 export default function Layout() {
   const [tab, setTab] = useState<"future" | "past">("future");
   const now = useMemo(() => new Date().toISOString(), []);
diff --git a/app/routes/_authenticated/my-orders._index/index.tsx b/app/routes/_authenticated/my-orders._index/index.tsx
index e700cf2..f3326d8 100644
--- a/app/routes/_authenticated/my-orders._index/index.tsx
+++ b/app/routes/_authenticated/my-orders._index/index.tsx
@@ -1,3 +1,4 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
 
@@ -5,6 +6,10 @@ import { MyPurchaseOrders } from "~/components/MyPurchaseOrders/MyPurchaseOrders
 import { MyPurchaseOrdersLoadingSkeleton } from "~/components/MyPurchaseOrders/MyPurchaseOrdersLoadingSkeleton";
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Mis Ordenes de Compra | Tickets" }];
+};
+
 export default function Layout() {
   return (
     <div className={cx(sharedLayoutStyle, "flex flex-col gap-10")}>
diff --git a/app/routes/_authenticated/my-orders/callback/index.tsx b/app/routes/_authenticated/my-orders/callback/index.tsx
index ca043da..11fec1d 100644
--- a/app/routes/_authenticated/my-orders/callback/index.tsx
+++ b/app/routes/_authenticated/my-orders/callback/index.tsx
@@ -1,3 +1,4 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { useSearchParams } from "@remix-run/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Suspense } from "react";
@@ -5,6 +6,10 @@ import { toast } from "sonner";
 
 import { PurchaseCallback } from "~/components/PurchaseOrder/Callback";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Mi Orden de Compra | Tickets" }];
+};
+
 export default function Index() {
   const [params] = useSearchParams();
   const purchaseOrderId = params.get("purchaseOrderId");
diff --git a/app/routes/_authenticated/profile._index/index.tsx b/app/routes/_authenticated/profile._index/index.tsx
index ee33d66..54d2d08 100644
--- a/app/routes/_authenticated/profile._index/index.tsx
+++ b/app/routes/_authenticated/profile._index/index.tsx
@@ -1,3 +1,4 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
 
@@ -5,11 +6,15 @@ import { MyProfile } from "~/components/Profile/MyProfile";
 import { MyProfileLoadingSkeleton } from "~/components/Profile/MyProfileLoadingSkeleton";
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Perfil | Tickets" }];
+};
+
 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="text-3xl font-semibold">Tu Perfil</h1>
+        <h1 className="text-3xl font-semibold">Perfil</h1>
       </div>
       <Suspense fallback={<MyProfileLoadingSkeleton />}>
         <MyProfile />
diff --git a/app/routes/_authenticated/profile/info/index.tsx b/app/routes/_authenticated/profile/info/index.tsx
index 5e561a7..b765699 100644
--- a/app/routes/_authenticated/profile/info/index.tsx
+++ b/app/routes/_authenticated/profile/info/index.tsx
@@ -1,3 +1,4 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
 
@@ -5,11 +6,15 @@ import { MyProfileInfo } from "~/components/Profile/Info/MyProfileInfo";
 import { MyProfileInfoLoadingSkeleton } from "~/components/Profile/Info/MyProfileInfoLoadingSkeleton";
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 
+export const meta: MetaFunction = () => {
+  return [{ title: "Editar Perfil | Tickets" }];
+};
+
 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="text-3xl font-semibold">Tu Perfil</h1>
+        <h1 className="text-3xl font-semibold">Perfil</h1>
       </div>
       <Suspense fallback={<MyProfileInfoLoadingSkeleton />}>
         <MyProfileInfo />
diff --git a/app/routes/login/index.tsx b/app/routes/login/index.tsx
index 647411e..7802134 100644
--- a/app/routes/login/index.tsx
+++ b/app/routes/login/index.tsx
@@ -1,3 +1,4 @@
+import { MetaFunction } from "@remix-run/cloudflare";
 import { useNavigate } from "@remix-run/react";
 import { useEffect } from "react";
 
@@ -5,6 +6,21 @@ import { Login } from "~/components/Login/Login";
 import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
 import { urls } from "~/utils/urls";
 
+export const meta: MetaFunction = () => {
+  return [
+    { title: "Tickets - Entrar a mi cuenta" },
+    {
+      property: "og:title",
+      content: "Tickets - Entrar a mi cuenta",
+    },
+    {
+      name: "description",
+      content:
+        "Tickets - Entrar a mi cuenta de Tickets para asistir a eventos, o gestionarlos.",
+    },
+  ];
+};
+
 const Redirecting = () => {
   const navigate = useNavigate();
 
diff --git a/public/dark-mode-favicon.ico b/public/dark-mode-favicon.ico
new file mode 100644
index 0000000..52a15ea
Binary files /dev/null and b/public/dark-mode-favicon.ico differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 8830cf6..52a15ea 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/light-mode-favicon.ico b/public/light-mode-favicon.ico
new file mode 100644
index 0000000..3274eff
Binary files /dev/null and b/public/light-mode-favicon.ico differ
diff --git a/public/og.jpg b/public/og.jpg
new file mode 100644
index 0000000..d015f75
Binary files /dev/null and b/public/og.jpg differ