diff --git a/apps/next/src/app/(auth)/sign-in/page.tsx b/apps/next/src/app/(auth)/sign-in/page.tsx
index 05bae8a..6d3917f 100644
--- a/apps/next/src/app/(auth)/sign-in/page.tsx
+++ b/apps/next/src/app/(auth)/sign-in/page.tsx
@@ -252,24 +252,27 @@ const SignIn = () => {
         <Tabs
           defaultValue={flow}
           onValueChange={(value) => setFlow(value as 'signIn' | 'signUp')}
-          className='items-center'
+          className='items-center flex-col'
         >
-          <TabsList className='py-6'>
+          <TabsList>
             <TabsTrigger
               value='signIn'
-              className='cursor-pointer p-6 text-2xl font-bold'
+              className='cursor-pointer py-2 px-6 text-2xl font-bold'
             >
               Sign In
             </TabsTrigger>
             <TabsTrigger
               value='signUp'
-              className='cursor-pointer p-6 text-2xl font-bold'
+              className='cursor-pointer py-2 px-6 text-2xl font-bold'
             >
               Sign Up
             </TabsTrigger>
           </TabsList>
-          <TabsContent value='signIn'>
-            <Card className='bg-card/50 min-w-xs sm:min-w-sm'>
+          <TabsContent
+            value='signIn'
+            className='min-h-[560px] items-center flex flex-row'
+          >
+            <Card className='bg-card/50 min-w-xs sm:min-w-sm py-10'>
               <CardContent>
                 <Form {...signInForm}>
                   <form
diff --git a/apps/next/src/app/layout.tsx b/apps/next/src/app/layout.tsx
index 0bbaeb6..d4c1118 100644
--- a/apps/next/src/app/layout.tsx
+++ b/apps/next/src/app/layout.tsx
@@ -42,7 +42,7 @@ const RootLayout = ({
         domain={env.NEXT_PUBLIC_SITE_URL}
         customDomain={env.NEXT_PUBLIC_PLAUSIBLE_URL}
       >
-        <html lang='en'>
+        <html lang='en' suppressHydrationWarning>
           <body
             className={`${geistSans.variable} ${geistMono.variable} antialiased`}
           >
diff --git a/apps/next/src/components/layout/auth/profile/user-info.tsx b/apps/next/src/components/layout/auth/profile/user-info.tsx
index d70c8ce..41734e2 100644
--- a/apps/next/src/components/layout/auth/profile/user-info.tsx
+++ b/apps/next/src/components/layout/auth/profile/user-info.tsx
@@ -53,7 +53,7 @@ export const UserInfoForm = ({
   const userProvider = usePreloadedQuery(preloadedProvider);
   const providerMap: Record<string, string> = {
     unknown: 'Provider',
-    authentik: 'Gib\'s Auth'
+    authentik: 'Gib\'s Auth',
   };
   const [loading, setLoading] = useState(false);
 
@@ -168,4 +168,3 @@ export const UserInfoForm = ({
     </>
   );
 };
-
diff --git a/apps/next/src/components/layout/header/index.tsx b/apps/next/src/components/layout/header/index.tsx
index 053a00c..0999702 100644
--- a/apps/next/src/components/layout/header/index.tsx
+++ b/apps/next/src/components/layout/header/index.tsx
@@ -28,7 +28,7 @@ export default function Header(headerProps: ComponentProps<'header'>) {
             alt='Convex Monorepo'
             width={50}
             height={50}
-            className='invert dark:invert-0'
+            className='invert dark:invert-0 w-15'
           />
           <span
             className={`mb-3 hidden font-extrabold lg:inline lg:text-5xl ${kanitSans.className}`}
diff --git a/packages/backend/convex/custom/auth/providers/usesend.ts b/packages/backend/convex/custom/auth/providers/usesend.ts
index 2d7cea0..3f95364 100644
--- a/packages/backend/convex/custom/auth/providers/usesend.ts
+++ b/packages/backend/convex/custom/auth/providers/usesend.ts
@@ -8,7 +8,7 @@ export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
     id: 'usesend',
     type: 'email',
     name: 'UseSend',
-    from: 'Study Buddy <admin@techtracker.gbrown.org>',
+    from: 'Convex Monorepo <admin@convexmonorepo.gbrown.org>',
     maxAge: 24 * 60 * 60, // 24 hours
 
     async generateVerificationToken() {
@@ -23,7 +23,7 @@ export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
     async sendVerificationRequest(params) {
       const { identifier: to, provider, url, theme, token } = params;
       //const { host } = new URL(url);
-      const host = 'TechTracker';
+      const host = 'Convex Monorepo';
 
       const useSend = new UseSend(
         process.env.USESEND_API_KEY!,
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
index 984e04d..f1655fa 100644
--- a/packages/ui/src/theme.tsx
+++ b/packages/ui/src/theme.tsx
@@ -1,24 +1,24 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import { useEffect, useState } from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
 
-import { Button, cn } from '@gib/ui';
+import {
+  Button,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@gib/ui';
+
 
 const ThemeProvider = ({
   children,
   ...props
 }: ComponentProps<typeof NextThemesProvider>) => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 };
 
 interface ThemeToggleProps {
@@ -27,44 +27,41 @@ interface ThemeToggleProps {
 }
 
 const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
-  const { setTheme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <Button {...buttonProps}>
-        <span style={{ height: `${size}rem`, width: `${size}rem` }} />
-      </Button>
-    );
-  }
-
-  const toggleTheme = () => {
-    if (resolvedTheme === 'dark') setTheme('light');
-    else setTheme('dark');
-  };
+  const { setTheme } = useTheme();
 
   return (
-    <Button
-      variant='outline'
-      size='icon'
-      {...buttonProps}
-      onClick={toggleTheme}
-      className={cn('cursor-pointer', buttonProps?.className)}
-    >
-      <Sun
-        style={{ height: `${size}rem`, width: `${size}rem` }}
-        className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
-      />
-      <Moon
-        style={{ height: `${size}rem`, width: `${size}rem` }}
-        className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
-      />
-    </Button>
-  );
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          {...buttonProps}
+          className={cn('cursor-pointer', buttonProps?.className)}
+        >
+          <Sun
+            style={{ height: `${size}rem`, width: `${size}rem` }}
+            className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
+          />
+          <Moon
+            style={{ height: `${size}rem`, width: `${size}rem` }}
+            className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
+          />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
 };
 
 export { ThemeProvider, ThemeToggle, type ThemeToggleProps };
