diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..5a7019d
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+# # GQL / code-generation
+src/api/gql/**/*
+src/**/*.generated.*
diff --git a/.eslintrc b/.eslintrc
index c3377a4..59d50f1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,12 +9,20 @@
       },
       "extends": [
         "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
         "plugin:tailwindcss/recommended",
-        "plugin:react/recommended",
-        "next/core-web-vitals",
         "plugin:@next/next/recommended"
-      ]
+      ],
+      "settings": {
+        "react": {
+          "version": "detect"
+        }
+      },
+      "rules": {
+        "react/react-in-jsx-scope": "off"
+      }
     },
     {
       "files": ["*.graphql", "*.gql"],
diff --git a/.github/workflows/lint_and_typecheck.yml b/.github/workflows/lint_and_typecheck.yml
new file mode 100644
index 0000000..d7c9a59
--- /dev/null
+++ b/.github/workflows/lint_and_typecheck.yml
@@ -0,0 +1,61 @@
+name: Lint and Typecheck
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  linting-and-typechecking:
+    runs-on: ubuntu-latest
+    name: Linting and Typechecking
+
+    # Considerar Mover clone/setup/caches a un composite action 🙏
+    steps:
+      - name: ⏳ Cloning repo
+        uses: actions/checkout@v3
+
+      - name: ⬢ Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: 📦 Download Cached Package Dependencies
+        uses: actions/cache@v3
+        env:
+          cache-name: NPM
+        with:
+          path: ~/.npm
+          key: CACHE-${{ env.cache-name }}-${{ hashFiles('package-lock.json') }}
+
+      - name: 📦 Download Cached Eslint output
+        uses: actions/cache@v3
+        env:
+          cache-name: ESLINT
+        with:
+          path: .eslintcache
+          key: CACHE-${{ env.cache-name }}-${{ hashFiles('.eslintcache') }}
+
+      - name: 📦 Download Cached Typescript output
+        uses: actions/cache@v3
+        env:
+          cache-name: TYPESCRIPT
+        with:
+          path: tsconfig.tsbuildinfo
+          key: CACHE-${{ env.cache-name }}-${{ hashFiles('tsconfig.tsbuildinfo') }}
+
+      - name: 📥 Install dependencies
+        run: npm ci --prefer-offline --no-audit --legacy-peer-deps --cache ~/.npm
+
+      - name: Run Prettier
+        run: npm run prettier:ci
+
+      - name: Run Linter
+        run: npm run lint
+
+      - name: Run Typecheck
+        run: npm run typecheck
+
+      - name: Run Next Linter
+        run: npx next lint
diff --git a/.gitignore b/.gitignore
index 0d57ee3..9a7f2f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,9 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# eslint
+.eslintcache
+
 # # GQL / code-generation
 # src/api/gql/**/*
 # src/**/*.generated.*
diff --git a/.prettierrc b/.prettierrc
index 9e26dfe..0967ef4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1 +1 @@
-{}
\ No newline at end of file
+{}
diff --git a/app/(transition)/(root)/layout.tsx b/app/(transition)/(root)/layout.tsx
index adf60e3..6e99975 100644
--- a/app/(transition)/(root)/layout.tsx
+++ b/app/(transition)/(root)/layout.tsx
@@ -1,10 +1,7 @@
 import PageTransition from "@/components/PageTransition";
 import { Nav } from "@/components/nav";
-export default async function Template({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+
+export default function Template({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Nav />
diff --git a/app/(transition)/(root)/page.tsx b/app/(transition)/(root)/page.tsx
index b2bf886..fdf6b58 100644
--- a/app/(transition)/(root)/page.tsx
+++ b/app/(transition)/(root)/page.tsx
@@ -13,13 +13,15 @@ export default async function Home() {
   return (
     <main className="flex max-w-5xl flex-col items-center justify-between px-6 pt-36 transition-all md:px-10 md:pt-44 xl:px-0 xl:pt-52">
       <div className="flex flex-col gap-16 pb-4">
-        <h1 className="flex flex-col justify-start gap-7 text-left text-6xl font-extrabold shadow-slate-900 transition-all text-shadow sm:text-7xl xl:text-8xl">
+        <h1 className="flex flex-col justify-start gap-7 text-left text-6xl font-extrabold shadow-slate-900 transition-all sm:text-7xl xl:text-8xl">
           <span>TICKETS</span>
         </h1>
       </div>
       <div className="flex flex-col gap-4">
         <h1>RSC</h1>
-        {variable.data?.events?.map((event) => <div>{event.id}</div>)}
+        {variable.data?.events?.map((event) => (
+          <div key={event.id}>{event.id}</div>
+        ))}
       </div>
       <div className="flex flex-col gap-4">
         <h1>Client fetching</h1>
diff --git a/app/(transition)/graphiql/page.tsx b/app/(transition)/graphiql/page.tsx
index f6700cc..c35c2c6 100644
--- a/app/(transition)/graphiql/page.tsx
+++ b/app/(transition)/graphiql/page.tsx
@@ -149,7 +149,7 @@ export default function Pregunta() {
   }
   return (
     <GraphiQL
-      fetcher={fetcherRef.current!}
+      fetcher={fetcherRef.current}
       defaultEditorToolsVisibility="variables"
       defaultTabs={[
         {
diff --git a/app/globals.css b/app/globals.css
index 4ad0de2..c41b859 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -9,63 +9,63 @@
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: hsl(212.7,26.8%,83.9);
+    --ring: hsl(212.7, 26.8%, 83.9);
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -73,4 +73,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index c55e82c..ce8efdf 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -23,7 +23,7 @@ export const metadata = {
   description: "Generated by create next app",
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
diff --git a/package-lock.json b/package-lock.json
index 4827cde..727c7d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,12 +49,13 @@
         "@graphql-codegen/typescript-operations": "^4.0.1",
         "@graphql-codegen/typescript-react-apollo": "^4.1.0",
         "@graphql-eslint/eslint-plugin": "^3.20.0",
-        "@next/eslint-plugin-next": "^13.4.9",
+        "@next/eslint-plugin-next": "^13.5.6",
         "@typescript-eslint/eslint-plugin": "^5.61.0",
         "@typescript-eslint/parser": "^5.61.0",
         "eslint": "^8.44.0",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-tailwindcss": "^3.13.0",
+        "graphql-config": "^5.0.3",
         "prettier": "^3.0.0",
         "prettier-plugin-tailwindcss": "^0.3.0",
         "ts-node": "^10.9.1",
@@ -3688,9 +3689,9 @@
       "integrity": "sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "13.4.13",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.13.tgz",
-      "integrity": "sha512-RpZeXlPxQ9FLeYN84XHDqRN20XxmVNclYCraLYdifRsmibtcWUWdwE/ANp2C8kgesFRsvwfsw6eOkYNl9sLJ3A==",
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.6.tgz",
+      "integrity": "sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg==",
       "dev": true,
       "dependencies": {
         "glob": "7.1.7"
@@ -7956,9 +7957,9 @@
       }
     },
     "node_modules/graphql-config": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/graphql-config/-/graphql-config-5.0.2.tgz",
-      "integrity": "sha512-7TPxOrlbiG0JplSZYCyxn2XQtqVhXomEjXUmWJVSS5ET1nPhOJSsIb/WTwqWhcYX6G0RlHXSj9PLtGTKmxLNGg==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/graphql-config/-/graphql-config-5.0.3.tgz",
+      "integrity": "sha512-BNGZaoxIBkv9yy6Y7omvsaBUHOzfFcII3UN++tpH8MGOKFPFkCPZuwx09ggANMt8FgyWP1Od8SWPmrUEZca4NQ==",
       "dev": true,
       "dependencies": {
         "@graphql-tools/graphql-file-loader": "^8.0.0",
diff --git a/package.json b/package.json
index dba2ff3..6196f37 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,10 @@
     "generate": "graphql-codegen",
     "prestart": "npm run generate",
     "predev": "npm run generate",
-    "lint": "next lint",
-    "prettier": "prettier ./src --write"
+    "typecheck": "tsc",
+    "lint": "eslint ./src --cache",
+    "prettier:ci": "prettier ./src --cache --check",
+    "prettier:fix": "prettier ./src --cache --write"
   },
   "dependencies": {
     "@apollo/client": "^3.9.0-alpha.4",
@@ -53,12 +55,13 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-react-apollo": "^4.1.0",
     "@graphql-eslint/eslint-plugin": "^3.20.0",
-    "@next/eslint-plugin-next": "^13.4.9",
+    "@next/eslint-plugin-next": "^13.5.6",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "eslint": "^8.44.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-tailwindcss": "^3.13.0",
+    "graphql-config": "^5.0.3",
     "prettier": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "ts-node": "^10.9.1",
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..12a703d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/src/components/Navbar/MainNav.tsx b/src/components/Navbar/MainNav.tsx
index 92c2ce8..cefc9ce 100644
--- a/src/components/Navbar/MainNav.tsx
+++ b/src/components/Navbar/MainNav.tsx
@@ -1,13 +1,48 @@
 import { NavBarProps } from "./types";
 import { NavbarItem } from "./NavbarItem";
+import {
+  SignInButton,
+  SignOutButton,
+  SignedIn,
+  SignedOut,
+} from "@clerk/clerk-react";
+import { Button } from "../ui/button";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export function MainNav({ items }: NavBarProps) {
+  const pathname = usePathname();
+  const [redirectUrl, setRedirectUrl] = useState("");
+  useEffect(() => {
+    setRedirectUrl(window.location.host);
+  }, []);
   return (
-    <nav
-      className={"items-center space-x-4 lg:space-x-6"}>
+    <nav className={"items-center space-x-4 lg:space-x-6"}>
       {items.map((item) => (
         <NavbarItem key={`navbarItem-${item.content}`} item={item} />
       ))}
+      <SignedOut>
+        {process.env.NEXT_PUBLIC_SIGN_IN_URL ? (
+          <Button asChild variant="secondary">
+            <a
+              href={`${process.env.NEXT_PUBLIC_SIGN_IN_URL}?redirect_url=https://${redirectUrl}`}
+            >
+              Ingresar
+            </a>
+          </Button>
+        ) : (
+          <SignInButton mode="modal" redirectUrl={pathname}>
+            <Button variant="secondary">Ingresar</Button>
+          </SignInButton>
+        )}
+      </SignedOut>
+      <SignedIn>
+        <SignOutButton>
+          <Button variant={"link"} className="cursor-pointer">
+            Salir
+          </Button>
+        </SignOutButton>
+      </SignedIn>
     </nav>
   );
 }
diff --git a/src/components/Navbar/MobileLink.tsx b/src/components/Navbar/MobileLink.tsx
index 1c6f736..bd18111 100644
--- a/src/components/Navbar/MobileLink.tsx
+++ b/src/components/Navbar/MobileLink.tsx
@@ -1,4 +1,3 @@
-
 import { useRouter } from "next/navigation";
 import Link, { LinkProps } from "next/link";
 import classNames from "classnames";
diff --git a/src/components/Navbar/MobileNav.tsx b/src/components/Navbar/MobileNav.tsx
index cf2ba41..37aace6 100644
--- a/src/components/Navbar/MobileNav.tsx
+++ b/src/components/Navbar/MobileNav.tsx
@@ -9,9 +9,22 @@ import { NavBarProps } from "./types";
 import { MobileNavbarItem } from "./MobileNavbarItem";
 import { MobileLink } from "./MobileLink";
 import { Menu, PackageOpen } from "lucide-react";
+import {
+  SignInButton,
+  SignOutButton,
+  SignedIn,
+  SignedOut,
+} from "@clerk/clerk-react";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export function MobileNav({ items }: NavBarProps) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const [redirectUrl, setRedirectUrl] = useState("");
+  useEffect(() => {
+    setRedirectUrl(window.location.host);
+  }, []);
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -32,12 +45,47 @@ export function MobileNav({ items }: NavBarProps) {
         >
           <PackageOpen className="h-5 w-5" />
         </MobileLink>
-        <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+        <ScrollArea className="my-4 h-[calc(100vh-8rem)] px-6 pb-10">
           <div className="flex flex-col space-y-2">
             <div className="flex flex-col space-y-3 pt-6">
               {items.map((item) => (
-                <MobileNavbarItem key={`mobile-${item.content}`} item={item} setOpen={setOpen} />
+                <MobileNavbarItem
+                  key={`mobile-${item.content}`}
+                  item={item}
+                  setOpen={setOpen}
+                />
               ))}
+              <SignedOut>
+                {process.env.NEXT_PUBLIC_SIGN_IN_URL ? (
+                  <Button asChild variant="link">
+                    <a
+                      href={`${process.env.NEXT_PUBLIC_SIGN_IN_URL}?redirect_url=https://${redirectUrl}`}
+                    >
+                      Ingresar
+                    </a>
+                  </Button>
+                ) : (
+                  <SignInButton mode="modal" redirectUrl={pathname}>
+                    <Button variant="link" onClick={() => setOpen(false)}>
+                      Ingresar
+                    </Button>
+                  </SignInButton>
+                )}
+              </SignedOut>
+              <SignedIn>
+                <SignOutButton>
+                  <div
+                    className="cursor-pointer text-muted-foreground"
+                    onClick={() => {
+                      setOpen(false);
+                    }}
+                    // item={{ link: "#", content: "Salir" }}
+                    // setOpen={setOpen}
+                  >
+                    Salir
+                  </div>
+                </SignOutButton>
+              </SignedIn>
             </div>
           </div>
         </ScrollArea>
diff --git a/src/components/Navbar/MobileNavbarItem.tsx b/src/components/Navbar/MobileNavbarItem.tsx
index f06d773..6ef0428 100644
--- a/src/components/Navbar/MobileNavbarItem.tsx
+++ b/src/components/Navbar/MobileNavbarItem.tsx
@@ -25,11 +25,20 @@ export const MobileNavbarItem = ({
     }
 
     if (item.onClick) {
-      return <span className="text-muted-foreground cursor-pointer" onClick={item.onClick}>{item.content}</span>
+      return (
+        <span
+          className="cursor-pointer text-muted-foreground"
+          onClick={item.onClick}
+        >
+          {item.content}
+        </span>
+      );
     }
 
-    return <h4 className="font-medium text-muted-foreground">{item.content}</h4>
-  }
+    return (
+      <h4 className="font-medium text-muted-foreground">{item.content}</h4>
+    );
+  };
 
   if (item.children) {
     return (
diff --git a/src/components/Navbar/NavbarItem.tsx b/src/components/Navbar/NavbarItem.tsx
index 899c9dc..b484f3c 100644
--- a/src/components/Navbar/NavbarItem.tsx
+++ b/src/components/Navbar/NavbarItem.tsx
@@ -6,7 +6,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
@@ -16,14 +15,17 @@ export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
   if (item.children) {
     return (
       <DropdownMenu>
-        <DropdownMenuTrigger className="text-sm font-medium text-muted-foreground transition-colors hover:text-primar">
+        <DropdownMenuTrigger className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary">
           {item.content}
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
-          {item.children.map((children) => {
+          {item?.children?.map((children) => {
             if (children.link) {
               return (
-                <DropdownMenuItem key={`dropdown-${item.content}`} className="cursor-pointer">
+                <DropdownMenuItem
+                  key={`dropdown-${item.content}`}
+                  className="cursor-pointer"
+                >
                   <Link href={children.link} className="flex items-center">
                     {children.icon}
                     <span>{children.content}</span>
@@ -36,7 +38,11 @@ export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
               return <DropdownMenuSeparator key={`dropdown-${item.content}`} />;
             }
             return (
-              <DropdownMenuItem key={`dropdown-${item.content}`} onClick={children.onClick} className={classNames(children.onClick && 'cursor-pointer')}>
+              <DropdownMenuItem
+                key={`dropdown-${item.content}`}
+                onClick={children.onClick}
+                className={classNames(children.onClick && "cursor-pointer")}
+              >
                 {children.icon}
                 <span>{children.content}</span>
               </DropdownMenuItem>
@@ -55,10 +61,18 @@ export const NavbarItem = ({ item }: { item: NavbarMenuItem }) => {
       >
         {item.content}
       </Link>
-    )
+    );
   }
 
-  return <span onClick={item.onClick} className={classNames("text-sm font-medium text-muted-foreground transition-colors hover:text-primary", item.onClick && 'cursor-pointer')}>
-    {item.content}
-  </span>
+  return (
+    <span
+      onClick={item.onClick}
+      className={classNames(
+        "text-sm font-medium text-muted-foreground transition-colors hover:text-primary",
+        item.onClick && "cursor-pointer",
+      )}
+    >
+      {item.content}
+    </span>
+  );
 };
diff --git a/src/components/Navbar/ThemeSwitcher.tsx b/src/components/Navbar/ThemeSwitcher.tsx
index e773112..b6ee497 100644
--- a/src/components/Navbar/ThemeSwitcher.tsx
+++ b/src/components/Navbar/ThemeSwitcher.tsx
@@ -1,31 +1,33 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 
 export function ThemeSwitcher() {
-  const { setTheme } = useTheme()
-  const themes = [{
-    name: 'Light',
-    type: 'light'
-  },
-  {
-    name: 'Dark',
-    type: 'dark',
-  },
-  {
-    name: 'System',
-    type: 'system'
-  }];
+  const { setTheme } = useTheme();
+  const themes = [
+    {
+      name: "Light",
+      type: "light",
+    },
+    {
+      name: "Dark",
+      type: "dark",
+    },
+    {
+      name: "System",
+      type: "system",
+    },
+  ];
 
   return (
     <DropdownMenu>
@@ -37,10 +39,16 @@ export function ThemeSwitcher() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        {themes.map(({ name, type }) => <DropdownMenuItem key={name} className="cursor-pointer" onClick={() => setTheme(type)}>
-          {name}
-        </DropdownMenuItem>)}
+        {themes.map(({ name, type }) => (
+          <DropdownMenuItem
+            key={name}
+            className="cursor-pointer"
+            onClick={() => setTheme(type)}
+          >
+            {name}
+          </DropdownMenuItem>
+        ))}
       </DropdownMenuContent>
-    </DropdownMenu >
-  )
-}
\ No newline at end of file
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/Navbar/types.d.ts b/src/components/Navbar/types.d.ts
index 2d17807..87c07bd 100644
--- a/src/components/Navbar/types.d.ts
+++ b/src/components/Navbar/types.d.ts
@@ -1,13 +1,13 @@
+import { DropdownMenuSeparatorProps } from "@radix-ui/react-dropdown-menu";
 
 export type NavbarMenuItem = {
-    content: string;
-    link?: string;
-    icon?: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void; 
-    children?: Array<NavbarMenuItem | DropdownMenuSeparator>;
-}
+  content: string;
+  link?: string;
+  icon?: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  children?: Array<NavbarMenuItem>;
+};
 
 export type NavBarProps = {
-    items: Array<NavbarMenuItem>;
-}
-
+  items: Array<NavbarMenuItem>;
+};
diff --git a/src/components/PageTransition.tsx b/src/components/PageTransition.tsx
index 2105bda..aefa892 100644
--- a/src/components/PageTransition.tsx
+++ b/src/components/PageTransition.tsx
@@ -17,7 +17,7 @@ const transition = {
 
 function PageTransition(
   { children, ...rest }: PageTransitionProps,
-  ref: PageTransitionRef
+  ref: PageTransitionRef,
 ) {
   return (
     <motion.div
@@ -28,7 +28,7 @@ function PageTransition(
       transition={transition}
       className={classNames(
         "flex h-full flex-col items-center overflow-auto",
-        rest.className
+        rest.className,
       )}
     >
       {children}
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index 427325a..61f38bc 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -7,6 +7,7 @@ import { ThemeSwitcher } from "./Navbar/ThemeSwitcher";
 import { LogOut, Settings, User, PackageOpen } from "lucide-react";
 import { useClerk, useUser } from "@clerk/clerk-react";
 import { useMemo } from "react";
+import { NavbarMenuItem } from "./Navbar/types";
 
 export const Nav = () => {
   const { isLoaded, isSignedIn } = useUser();
@@ -14,70 +15,64 @@ export const Nav = () => {
   const { signOut } = useClerk();
 
   const guestItems = useMemo(
-    () => [
-      {
-        content: "Eventos",
-        link: "/",
-      },
-      {
-        content: "Comunidades",
-        link: "/",
-      },
-      {
-        content: "Login",
-        link: "/sign-in",
-      },
-      {
-        content: "Regístrate",
-        link: "/sign-up",
-      },
-    ],
+    () =>
+      [
+        {
+          content: "Eventos",
+          link: "/",
+        },
+        {
+          content: "Comunidades",
+          link: "/",
+        },
+      ] satisfies NavbarMenuItem[],
     [],
   );
 
   const userItems = useMemo(
-    () => [
-      {
-        content: "Eventos",
-        link: "/",
-      },
-      {
-        content: "Comunidades",
-        link: "/",
-      },
-      {
-        content: "Perfil",
-        children: [
-          {
-            content: "Mi Cuenta",
-            icon: <User className="mr-2 h-4 w-4" />,
-            link: "/",
-          },
-          {
-            content: "separator",
-          },
-          {
-            content: "Settings",
-            icon: <Settings className="mr-2 h-4 w-4" />,
-            link: "/",
-          },
-          {
-            content: "separator",
-          },
-          {
-            content: "Salir",
-            icon: <LogOut className="mr-2 h-4 w-4" />,
-            onClick: () => {
-              const key = process.env.NEXT_PUBLIC_TOKEN_STORAGE_KEY;
-              if (key) {
-                window.localStorage.clear();
-              }
-              return signOut();
+    () =>
+      [
+        {
+          content: "Eventos",
+          link: "/",
+        },
+        {
+          content: "Comunidades",
+          link: "/",
+        },
+        {
+          content: "Perfil",
+          children: [
+            {
+              content: "Mi Cuenta",
+              icon: <User className="mr-2 h-4 w-4" />,
+              link: "/",
             },
-          },
-        ],
-      },
-    ],
+            {
+              content: "separator",
+            },
+            {
+              content: "Settings",
+              icon: <Settings className="mr-2 h-4 w-4" />,
+              link: "/",
+            },
+            {
+              content: "separator",
+            },
+            {
+              content: "Salir",
+              icon: <LogOut className="mr-2 h-4 w-4" />,
+              onClick: () => {
+                const key = process.env.NEXT_PUBLIC_TOKEN_STORAGE_KEY;
+                if (key) {
+                  window.localStorage.clear();
+                }
+                signOut().catch((e) => console.error(e));
+              },
+            },
+          ],
+        },
+      ] satisfies NavbarMenuItem[],
     [signOut],
   );
 
@@ -92,7 +87,7 @@ export const Nav = () => {
         </Link>
         <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
           <div className="w-full flex-1 md:w-auto md:flex-none"></div>
-          <nav className="flex items-center space-x-4 hidden md:flex ">
+          <nav className="hidden items-center space-x-4 md:flex ">
             <MainNav items={isLogged ? userItems : guestItems} />
             <ThemeSwitcher />
           </nav>
diff --git a/src/components/providers.tsx b/src/components/providers.tsx
index 12dc89e..b4e8e4f 100644
--- a/src/components/providers.tsx
+++ b/src/components/providers.tsx
@@ -1,13 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { ThemeProviderProps } from "next-themes/dist/types"
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProviderProps } from "next-themes/dist/types";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return (
-    <NextThemesProvider {...props}>
-      {children}
-    </NextThemesProvider>
-  )
-}
\ No newline at end of file
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index ac8e0c9..29123a7 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -30,27 +30,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index f69a0d6..2ba6f48 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,27 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
+    className?: string;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -29,36 +30,41 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    className?: string;
+  }
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    sideOffset?: number;
+    className?: string;
+  }
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
@@ -66,18 +72,19 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
+    className?: string;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -85,22 +92,25 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    checked?: boolean;
+    className?: string;
+  }
 >(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -112,19 +122,21 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    className?: string;
+  }
 >(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -135,13 +147,14 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
+    className?: string;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -149,37 +162,39 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    className?: string;
+  }
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.HTMLAttributes<HTMLSpanElement> & { className?: string }) => {
   return (
     <span
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -197,4 +212,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 54b87cd..c1c8b0a 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,13 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    className?: string;
+  }
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
@@ -20,12 +22,17 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+  React.ComponentPropsWithoutRef<
+    typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+  > & {
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+  }
 >(({ className, orientation = "vertical", ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
@@ -36,13 +43,13 @@ const ScrollBar = React.forwardRef<
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 border-t border-t-transparent p-[1px]",
-      className
+      className,
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 98cdd40..b83e197 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,40 +1,42 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
 const SheetPortal = ({
   className,
   ...props
 }: SheetPrimitive.DialogPortalProps) => (
   <SheetPrimitive.Portal className={cn(className)} {...props} />
-)
-SheetPortal.displayName = SheetPrimitive.Portal.displayName
+);
+SheetPortal.displayName = SheetPrimitive.Portal.displayName;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
+    className?: string;
+  }
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@@ -52,8 +54,8 @@ const sheetVariants = cva(
     defaultVariants: {
       side: "right",
     },
-  }
-)
+  },
+);
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -77,60 +79,68 @@ const SheetContent = React.forwardRef<
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+}) => (
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-SheetHeader.displayName = "SheetHeader"
+);
+SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+}) => (
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
+    className?: string;
+  }
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
+    className?: string;
+  }
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -141,4 +151,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f282c81..1eec7e8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,5 @@
 import classNames from "classnames";
 
-export function cn(...inputs: any) {
-  return classNames(inputs)
+export function cn(...inputs: any[]) {
+  return classNames(inputs);
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 0377ea1..c05b2ff 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,11 +2,11 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   theme: {
     container: {
       center: true,
@@ -73,4 +73,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
\ No newline at end of file
+};