diff --git a/eslint.config.js b/eslint.config.js
index 18540a3..b4041d7 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,5 +1,5 @@
-import { FlatCompat } from "@eslint/eslintrc";
-import tseslint from "typescript-eslint";
+import { FlatCompat } from '@eslint/eslintrc';
+import tseslint from 'typescript-eslint';
 
 const compat = new FlatCompat({
   baseDirectory: import.meta.dirname,
@@ -7,30 +7,30 @@ const compat = new FlatCompat({
 
 export default tseslint.config(
   {
-    ignores: [".next"],
+    ignores: ['.next'],
   },
-  ...compat.extends("next/core-web-vitals"),
+  ...compat.extends('next/core-web-vitals'),
   {
-    files: ["**/*.ts", "**/*.tsx"],
+    files: ['**/*.ts', '**/*.tsx'],
     extends: [
       ...tseslint.configs.recommended,
       ...tseslint.configs.recommendedTypeChecked,
       ...tseslint.configs.stylisticTypeChecked,
     ],
     rules: {
-      "@typescript-eslint/array-type": "off",
-      "@typescript-eslint/consistent-type-definitions": "off",
-      "@typescript-eslint/consistent-type-imports": [
-        "warn",
-        { prefer: "type-imports", fixStyle: "inline-type-imports" },
+      '@typescript-eslint/array-type': 'off',
+      '@typescript-eslint/consistent-type-definitions': 'off',
+      '@typescript-eslint/consistent-type-imports': [
+        'warn',
+        { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
       ],
-      "@typescript-eslint/no-unused-vars": [
-        "warn",
-        { argsIgnorePattern: "^_" },
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_' },
       ],
-      "@typescript-eslint/require-await": "off",
-      "@typescript-eslint/no-misused-promises": [
-        "error",
+      '@typescript-eslint/require-await': 'off',
+      '@typescript-eslint/no-misused-promises': [
+        'error',
         { checksVoidReturn: { attributes: false } },
       ],
     },
diff --git a/next.config.js b/next.config.js
index 121c4f4..829fd3c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,7 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-import "./src/env.js";
+import './src/env.js';
 
 /** @type {import("next").NextConfig} */
 const config = {};
diff --git a/postcss.config.js b/postcss.config.js
index c2ddf74..a34a3d5 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,5 @@
 export default {
   plugins: {
-    "@tailwindcss/postcss": {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/prettier.config.js b/prettier.config.js
index da332bd..09f0482 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,4 +1,4 @@
 /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
 export default {
-  plugins: ["prettier-plugin-tailwindcss"],
+  plugins: ['prettier-plugin-tailwindcss'],
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5843c4b..a992615 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,18 +1,16 @@
-import { type Metadata } from "next";
-import "@/styles/globals.css";
-import { Geist } from "next/font/google";
-import { cn } from "@/lib/utils";
-import { ThemeProvider } from '@/components/context/theme'
-
+import { type Metadata } from 'next';
+import '@/styles/globals.css';
+import { Geist } from 'next/font/google';
+import { cn } from '@/lib/utils';
+import { ThemeProvider } from '@/components/context/theme';
 
 export const metadata: Metadata = {
-  title: "T3 Template with Supabase",
-  description:
-    "Generated by create-t3-app",
+  title: 'T3 Template with Supabase',
+  description: 'Generated by create-t3-app',
   icons: [
     {
-      rel: "icon",
-      url: "/images/favicon.ico",
+      rel: 'icon',
+      url: '/images/favicon.ico',
     },
     {
       rel: 'icon',
@@ -22,29 +20,21 @@ export const metadata: Metadata = {
     },
     {
       rel: 'apple-touch-icon',
-      url: '/images/appicon.png'
+      url: '/images/appicon.png',
     },
   ],
 };
 
 const geist = Geist({
-  subsets: ["latin"],
-  variable: "--font-geist-sans",
+  subsets: ['latin'],
+  variable: '--font-geist-sans',
 });
 
-const RootLayout = ({
-  children,
-}: Readonly<{ children: React.ReactNode }>) => {
+const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
-    <html
-      lang="en"
-      className={`${geist.variable}`}
-      suppressHydrationWarning
-    >
+    <html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
       <body
-        className={cn(
-          'bg-background text-foreground font-sans antialiased'
-        )}
+        className={cn('bg-background text-foreground font-sans antialiased')}
       >
         <ThemeProvider
           attribute='class'
@@ -54,14 +44,12 @@ const RootLayout = ({
         >
           <main className='min-h-screen flex flex-col items-center'>
             <div className='flex-1 w-full flex flex-col gap-20 items-center'>
-              <nav className=''>
-                {children}
-              </nav>
+              <nav className=''>{children}</nav>
             </div>
           </main>
         </ThemeProvider>
       </body>
     </html>
   );
-}
+};
 export default RootLayout;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 773fef1..f2b8d37 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,31 +1,31 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 export default function HomePage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
-          Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
+    <main className='flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white'>
+      <div className='container flex flex-col items-center justify-center gap-12 px-4 py-16'>
+        <h1 className='text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]'>
+          Create <span className='text-[hsl(280,100%,70%)]'>T3</span> App
         </h1>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
+        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8'>
           <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-            href="https://create.t3.gg/en/usage/first-steps"
-            target="_blank"
+            className='flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20'
+            href='https://create.t3.gg/en/usage/first-steps'
+            target='_blank'
           >
-            <h3 className="text-2xl font-bold">First Steps →</h3>
-            <div className="text-lg">
+            <h3 className='text-2xl font-bold'>First Steps →</h3>
+            <div className='text-lg'>
               Just the basics - Everything you need to know to set up your
               database and authentication.
             </div>
           </Link>
           <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-            href="https://create.t3.gg/en/introduction"
-            target="_blank"
+            className='flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20'
+            href='https://create.t3.gg/en/introduction'
+            target='_blank'
           >
-            <h3 className="text-2xl font-bold">Documentation →</h3>
-            <div className="text-lg">
+            <h3 className='text-2xl font-bold'>Documentation →</h3>
+            <div className='text-lg'>
               Learn more about Create T3 App, the libraries it uses, and how to
               deploy it.
             </div>
diff --git a/src/components/context/theme.tsx b/src/components/context/theme.tsx
index d86f907..eecc9dd 100644
--- a/src/components/context/theme.tsx
+++ b/src/components/context/theme.tsx
@@ -43,10 +43,12 @@ export const ThemeToggle = () => {
 
   return (
     <Button variant='outline' size='icon' onClick={toggleTheme}>
-      <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100
+      <Sun
+        className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100
         transition-all dark:-rotate-90 dark:scale-0'
       />
-      <Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90
+      <Moon
+        className='absolute h-[1.2rem] w-[1.2rem] rotate-90
         scale-0 transition-all dark:rotate-0 dark:scale-100'
       />
       <span className='sr-only'>Toggle theme</span>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index a2df8dc..657477e 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 gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -10,30 +10,30 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -41,19 +41,19 @@ function Button({
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
-      data-slot="button"
+      data-slot='button'
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/env.js b/src/env.js
index fc98d4c..bca9294 100644
--- a/src/env.js
+++ b/src/env.js
@@ -1,5 +1,5 @@
-import { createEnv } from "@t3-oss/env-nextjs";
-import { z } from "zod";
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
 
 export const env = createEnv({
   /**
@@ -7,7 +7,7 @@ export const env = createEnv({
    * This way you can ensure the app isn't built with invalid env vars.
    */
   server: {
-    NODE_ENV: z.enum(["development", "test", "production"]),
+    NODE_ENV: z.enum(['development', 'test', 'production']),
   },
 
   /**
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index bd0c391..2819a83 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/src/middleware.ts b/src/middleware.ts
index 7b7cb4f..321b60a 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,9 +1,9 @@
-import { type NextRequest } from "next/server";
-import { updateSession } from "@/utils/supabase/middleware";
+import { type NextRequest } from 'next/server';
+import { updateSession } from '@/utils/supabase/middleware';
 
 export const middleware = async (request: NextRequest) => {
   return await updateSession(request);
-}
+};
 
 export const config = {
   matcher: [
@@ -15,6 +15,6 @@ export const config = {
      * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
      * Feel free to modify this pattern to include more paths.
      */
-    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
   ],
 };
diff --git a/src/utils/supabase/client.ts b/src/utils/supabase/client.ts
index e2660d0..f93c354 100644
--- a/src/utils/supabase/client.ts
+++ b/src/utils/supabase/client.ts
@@ -1,4 +1,4 @@
-import { createBrowserClient } from "@supabase/ssr";
+import { createBrowserClient } from '@supabase/ssr';
 
 export const createClient = () =>
   createBrowserClient(
diff --git a/src/utils/supabase/middleware.ts b/src/utils/supabase/middleware.ts
index 8619ec0..8db2b27 100644
--- a/src/utils/supabase/middleware.ts
+++ b/src/utils/supabase/middleware.ts
@@ -1,5 +1,5 @@
-import { createServerClient } from "@supabase/ssr";
-import { type NextRequest, NextResponse } from "next/server";
+import { createServerClient } from '@supabase/ssr';
+import { type NextRequest, NextResponse } from 'next/server';
 
 export const updateSession = async (request: NextRequest) => {
   // This `try/catch` block is only here for the interactive tutorial.
@@ -40,12 +40,12 @@ export const updateSession = async (request: NextRequest) => {
     const user = await supabase.auth.getUser();
 
     // protected routes
-    if (request.nextUrl.pathname.startsWith("/protected") && user.error) {
-      return NextResponse.redirect(new URL("/sign-in", request.url));
+    if (request.nextUrl.pathname.startsWith('/protected') && user.error) {
+      return NextResponse.redirect(new URL('/sign-in', request.url));
     }
 
-    if (request.nextUrl.pathname === "/" && !user.error) {
-      return NextResponse.redirect(new URL("/protected", request.url));
+    if (request.nextUrl.pathname === '/' && !user.error) {
+      return NextResponse.redirect(new URL('/protected', request.url));
     }
 
     return response;
diff --git a/src/utils/supabase/server.ts b/src/utils/supabase/server.ts
index 2c00bbc..59d91b7 100644
--- a/src/utils/supabase/server.ts
+++ b/src/utils/supabase/server.ts
@@ -1,5 +1,5 @@
-import { createServerClient } from "@supabase/ssr";
-import { cookies } from "next/headers";
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
 
 export const createClient = async () => {
   const cookieStore = await cookies();
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index c9fbbe8..d573047 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,4 +1,4 @@
-import { redirect } from "next/navigation";
+import { redirect } from 'next/navigation';
 
 /**
  * Redirects to a specified path with an encoded message as a query parameter.
@@ -8,7 +8,7 @@ import { redirect } from "next/navigation";
  * @returns {never} This function doesn't return as it triggers a redirect.
  */
 export function encodedRedirect(
-  type: "error" | "success",
+  type: 'error' | 'success',
   path: string,
   message: string,
 ) {