diff --git a/apps/expo/src/app/(auth)/Loader.tsx b/apps/expo/src/app/(auth)/Loader.tsx
new file mode 100644
index 00000000..98c16d4a
--- /dev/null
+++ b/apps/expo/src/app/(auth)/Loader.tsx
@@ -0,0 +1,22 @@
+import { ActivityIndicator } from 'react-native';
+
+interface Status {
+  loading: boolean;
+  // TODO(@zkirby)
+  // isError: boolean;
+  // isSuccess: boolean;
+}
+
+const Loader = ({
+  status,
+  className,
+  children,
+}: React.PropsWithChildren<{
+  status: Status;
+  className?: string;
+}>) => {
+  if (status.loading) return <ActivityIndicator className={className} />;
+  return children;
+};
+
+export default Loader;
diff --git a/apps/expo/src/app/(auth)/UserLoader.tsx b/apps/expo/src/app/(auth)/UserLoader.tsx
new file mode 100644
index 00000000..740a1ae0
--- /dev/null
+++ b/apps/expo/src/app/(auth)/UserLoader.tsx
@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { api } from '../../utils/api';
+import Loader from './Loader';
+
+/**
+ * This component is responsible for ensuring that the user *in our DB*
+ * is created. This is different from (but 1:1 with) the Clerk user.
+ *
+ * It's important that this mounts high in the component tree and
+ * prevents any children that might make API calls from rendering
+ * since almost every API call relies on the User being created
+ * in our DB.
+ *
+ * TODO(@zkirby): Think up a better solution here. We're essentially blocking
+ * the entire app from rendering for no reason (other than when the user is first created).
+ * Likely, we're not using Clerk correctly or under utilizing some functionality.
+ */
+const UserLoader = ({ children }: React.PropsWithChildren) => {
+  const ensureUserIsCreated = api.user.create.useMutation();
+
+  useEffect(() => {
+    ensureUserIsCreated.mutate();
+  }, []);
+
+  return (
+    // NOTE(@zkirby): Keep spinning until we're sure the user is created,
+    // if we use 'isFetching' here, we'll render sub-tree once until the
+    // api calls kicks off.
+    <Loader status={{ loading: !ensureUserIsCreated.isSuccess }}>
+      {children}
+    </Loader>
+  );
+};
+
+export default UserLoader;
diff --git a/apps/expo/src/app/(tabs)/(alerts)/_components/AlertListItem.tsx b/apps/expo/src/app/(tabs)/(alerts)/_components/AlertListItem.tsx
index 3ceca376..f3e01f7e 100644
--- a/apps/expo/src/app/(tabs)/(alerts)/_components/AlertListItem.tsx
+++ b/apps/expo/src/app/(tabs)/(alerts)/_components/AlertListItem.tsx
@@ -20,7 +20,7 @@ const AlertListItem = ({
   onSelfAssign,
 }: {
   alert: Alert;
-  user: User;
+  user?: User;
   onAck: () => void;
   onClose: () => void;
   onReopen: () => void;
@@ -28,7 +28,7 @@ const AlertListItem = ({
 }) => {
   const { status, title, createdAt, summary } = alert;
   const initials =
-    (user.firstName?.slice(0, 1) ?? '') + (user.lastName?.slice(0, 1) ?? '');
+    (user?.firstName?.slice(0, 1) ?? '') + (user?.lastName?.slice(0, 1) ?? '');
 
   const StatusColors = StatusToColor[status as keyof typeof StatusToColor];
   const { LeftSwipe, RightSwipe, action } = createSwipeAnimations(status, {
diff --git a/apps/expo/src/app/(tabs)/(alerts)/index.tsx b/apps/expo/src/app/(tabs)/(alerts)/index.tsx
index 7efe16f3..2519b607 100644
--- a/apps/expo/src/app/(tabs)/(alerts)/index.tsx
+++ b/apps/expo/src/app/(tabs)/(alerts)/index.tsx
@@ -11,7 +11,6 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { Stack } from 'expo-router';
 import { api } from '~/utils/api';
-import { useUser } from '../../hooks/useUser';
 import AlertListItem from './_components/AlertListItem';
 import type { Alert } from './alerts.types';
 import { useSearch } from './hooks/useSearch';
@@ -33,7 +32,7 @@ const AlertListPage = () => {
       },
     ],
   });
-  const user = useUser();
+  const user = api.user.me.useQuery();
   const updateAlert = api.alert.update.useMutation();
 
   const update = useCallback(async (id: string, alert: Partial<Alert>) => {
@@ -42,8 +41,8 @@ const AlertListPage = () => {
   }, []);
 
   const isLoading = useMemo(
-    () => updateAlert.isPending || alerts.isFetching,
-    [alerts.isFetching, updateAlert.isPending],
+    () => updateAlert.isPending || alerts.isFetching || user.isFetching,
+    [alerts.isFetching, updateAlert.isPending, user.isFetching],
   );
 
   return (
@@ -68,7 +67,7 @@ const AlertListPage = () => {
           ALERTS
         </Text>
         <View className="bg-white h-screen">
-          {isLoading || !user ? (
+          {isLoading ? (
             <ActivityIndicator />
           ) : (
             <FlatList
@@ -77,12 +76,12 @@ const AlertListPage = () => {
               renderItem={({ item }) => (
                 <AlertListItem
                   alert={item}
-                  user={user}
+                  user={user.data?.user}
                   onAck={() => update(item.id, { status: 'ACKED' })}
                   onReopen={() => update(item.id, { status: 'OPEN' })}
                   onClose={() => update(item.id, { status: 'CLOSED' })}
                   onSelfAssign={() =>
-                    update(item.id, { assignedToId: user.id })
+                    update(item.id, { assignedToId: user.data?.user?.id })
                   }
                 />
               )}
diff --git a/apps/expo/src/app/(tabs)/(profile)/index.tsx b/apps/expo/src/app/(tabs)/(profile)/index.tsx
index 0dab4632..c20dc7a9 100644
--- a/apps/expo/src/app/(tabs)/(profile)/index.tsx
+++ b/apps/expo/src/app/(tabs)/(profile)/index.tsx
@@ -2,7 +2,8 @@ import { useAuth } from '@clerk/clerk-expo';
 import { Stack } from 'expo-router';
 import { Button, Text, View } from 'react-native';
 
-import { useUser } from '../../hooks/useUser';
+import { useMemo } from 'react';
+import { api } from '../../../utils/api';
 
 const SignOut = () => {
   const { isLoaded, signOut } = useAuth();
@@ -23,7 +24,11 @@ const SignOut = () => {
 };
 
 const ProfilePage = () => {
-  const user = useUser();
+  const apiUser = api.user.me.useQuery();
+
+  const user = useMemo(() => {
+    return apiUser.data?.user;
+  }, [apiUser.data]);
 
   return (
     <View className="relative h-full bg-white">
diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx
index 4c9ee506..97320fc1 100644
--- a/apps/expo/src/app/(tabs)/_layout.tsx
+++ b/apps/expo/src/app/(tabs)/_layout.tsx
@@ -2,8 +2,8 @@ import FeatherIcons from '@expo/vector-icons/Feather';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Text, View } from 'react-native';
 
+import { api } from '../../utils/api';
 import { useNotification } from '../hooks/useNotification';
-import { useUser } from '../hooks/useUser';
 import AlertListPage from './(alerts)';
 import ProfilePage from './(profile)';
 
@@ -11,7 +11,7 @@ const Tab = createBottomTabNavigator();
 
 const TabsLayout = () => {
   useNotification();
-  const user = useUser();
+  const user = api.user.me.useQuery();
 
   return (
     <Tab.Navigator
@@ -43,8 +43,8 @@ const TabsLayout = () => {
         options={{
           tabBarIcon: ({ size }) => {
             const initials =
-              (user?.firstName?.charAt(0) ?? '') +
-              (user?.lastName?.charAt(0) ?? '');
+              (user.data?.user?.firstName?.charAt(0) ?? '') +
+              (user.data?.user?.lastName?.charAt(0) ?? '');
             return (
               <View
                 style={{ height: size, width: size, borderRadius: 100 }}
diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
index c928e410..383251ea 100644
--- a/apps/expo/src/app/_layout.tsx
+++ b/apps/expo/src/app/_layout.tsx
@@ -12,6 +12,7 @@ import { SignedIn, SignedOut } from '@clerk/clerk-react';
 import Constants from 'expo-constants';
 
 import SignInWithOAuth from './(auth)/SignInWithOAuth';
+import UserLoader from './(auth)/UserLoader';
 
 const tokenCache = {
   async getToken(key: string) {
@@ -38,10 +39,12 @@ const RootLayout = () => {
     >
       <SignedIn>
         <TRPCProvider>
-          <Stack>
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          </Stack>
-          <StatusBar />
+          <UserLoader>
+            <Stack>
+              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            </Stack>
+            <StatusBar />
+          </UserLoader>
         </TRPCProvider>
       </SignedIn>
       <SignedOut>
diff --git a/apps/expo/src/app/hooks/useUser.ts b/apps/expo/src/app/hooks/useUser.ts
deleted file mode 100644
index 70142b05..00000000
--- a/apps/expo/src/app/hooks/useUser.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { RouterOutputs } from '~/utils/api';
-import { api } from '~/utils/api';
-
-/**
- * Hook for retrieving or creating the user
- */
-export function useUser() {
-  const [user, setUser] = useState<RouterOutputs['user']['me']['user']>();
-
-  const createOrGetUser = api.user.me.useMutation({
-    onSuccess: (result) => result?.user && setUser(result.user),
-  });
-
-  useEffect(() => {
-    createOrGetUser.mutate();
-  }, []);
-
-  return user;
-}
diff --git a/apps/nextjs/src/app/_components/Button.tsx b/apps/nextjs/src/app/_components/Button.tsx
index debfe458..eb6ea2c1 100644
--- a/apps/nextjs/src/app/_components/Button.tsx
+++ b/apps/nextjs/src/app/_components/Button.tsx
@@ -14,13 +14,12 @@ const Button = ({
   onClick,
   disabled,
   children,
-}: {
+}: React.PropsWithChildren<{
   type?: ButtonType;
   className?: string;
   onClick?: () => void | Promise<void>;
   disabled?: boolean;
-  children: React.ReactNode | React.ReactNode[];
-}) => (
+}>) => (
   <button
     disabled={disabled}
     onClick={onClick}
diff --git a/apps/nextjs/src/app/_components/Calendar/Weekly/WeeklyCalendar.tsx b/apps/nextjs/src/app/_components/Calendar/Weekly/WeeklyCalendar.tsx
index 85d5eed8..e6ff0f08 100644
--- a/apps/nextjs/src/app/_components/Calendar/Weekly/WeeklyCalendar.tsx
+++ b/apps/nextjs/src/app/_components/Calendar/Weekly/WeeklyCalendar.tsx
@@ -8,10 +8,9 @@ const Styles = {
 export const WeeklyEvent = ({
   days: cols,
   children,
-}: {
+}: React.PropsWithChildren<{
   days: number;
-  children: React.ReactNode[] | React.ReactNode;
-}) => {
+}>) => {
   return (
     <div className={classNames(`col-span-${cols} h-[90px]`, Styles.rowBg)}>
       {children}
@@ -28,7 +27,7 @@ export const WeeklyCalendar = ({
   totalDays,
   daysBeforeToday = 0,
   children,
-}: {
+}: React.PropsWithChildren<{
   /**
    * The total number of days to show in the calendar
    */
@@ -39,8 +38,7 @@ export const WeeklyCalendar = ({
    * then the cal would be | today - 3 | today - 2 | today - 1 | today | today + 1 | ...
    */
   daysBeforeToday?: number;
-  children: React.ReactNode[] | React.ReactNode;
-}) => {
+}>) => {
   const today = new Date();
   const days = Array.from({ length: totalDays }, (_, i) => {
     const date = addDays(today, i - daysBeforeToday);
diff --git a/apps/nextjs/src/app/_components/Dropdown.tsx b/apps/nextjs/src/app/_components/Dropdown.tsx
index a05ca7d0..69fdb899 100644
--- a/apps/nextjs/src/app/_components/Dropdown.tsx
+++ b/apps/nextjs/src/app/_components/Dropdown.tsx
@@ -1,6 +1,6 @@
 import { Menu, Transition } from '@headlessui/react';
 import classNames from 'classnames';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import React, { Fragment } from 'react';
 
 const Dropdown = ({
@@ -10,14 +10,13 @@ const Dropdown = ({
   position = 'left',
   size = 'md',
   noHighlight = false,
-}: {
-  children: ReactElement | ReactNode[];
+}: React.PropsWithChildren<{
   OpenButton: ReactElement;
   openButtonClass?: string;
   position?: 'left' | 'right';
   size?: 'sm' | 'md' | 'lg';
   noHighlight?: boolean;
-}) => {
+}>) => {
   return (
     <Menu as="div" className="relative inline-block">
       <Menu.Button className={openButtonClass}>{OpenButton}</Menu.Button>
diff --git a/apps/nextjs/src/app/_components/Loader.tsx b/apps/nextjs/src/app/_components/Loader.tsx
index 6fa1e525..17e95a0d 100644
--- a/apps/nextjs/src/app/_components/Loader.tsx
+++ b/apps/nextjs/src/app/_components/Loader.tsx
@@ -31,11 +31,10 @@ const Loader = ({
   status,
   className,
   children,
-}: {
+}: React.PropsWithChildren<{
   status: Status;
   className?: string;
-  children: React.ReactNode | React.ReactNode[];
-}) => {
+}>) => {
   if (status.loading) return <Spinner className={className} />;
   return children;
 };
diff --git a/apps/nextjs/src/app/_components/Modal.tsx b/apps/nextjs/src/app/_components/Modal.tsx
index be67ae70..42cb8d8a 100644
--- a/apps/nextjs/src/app/_components/Modal.tsx
+++ b/apps/nextjs/src/app/_components/Modal.tsx
@@ -6,12 +6,11 @@ const Modal = ({
   onClose,
   title,
   children,
-}: {
+}: React.PropsWithChildren<{
   open: boolean;
   onClose: () => void;
   title: string;
-  children: React.ReactElement | React.ReactElement[];
-}) => {
+}>) => {
   return (
     <Transition appear show={open} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={onClose}>
diff --git a/apps/nextjs/src/app/_components/Pill.tsx b/apps/nextjs/src/app/_components/Pill.tsx
index 0338e064..79eb013f 100644
--- a/apps/nextjs/src/app/_components/Pill.tsx
+++ b/apps/nextjs/src/app/_components/Pill.tsx
@@ -1,7 +1,6 @@
-import type { ReactNode } from 'react';
 import React from 'react';
 
-const Pill = ({ children }: { children: ReactNode }) => {
+const Pill = ({ children }: React.PropsWithChildren) => {
   const childArray = React.Children.toArray(children);
   const tLength = childArray.length - 1;
 
diff --git a/apps/nextjs/src/app/_components/SideNav.tsx b/apps/nextjs/src/app/_components/SideNav.tsx
index 7d7ce25a..a1598921 100644
--- a/apps/nextjs/src/app/_components/SideNav.tsx
+++ b/apps/nextjs/src/app/_components/SideNav.tsx
@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import type { ReactNode } from 'react';
 import { FaGithub, FaSlack } from 'react-icons/fa';
 import { HiOutlineMail } from 'react-icons/hi';
 import {
@@ -15,7 +14,7 @@ import {
   TbUsersGroup,
 } from 'react-icons/tb';
 
-import { useUser } from '../../hooks/useUser';
+import { api } from '../../utils/api';
 import Dropdown from './Dropdown';
 import UserIcon from './UserIcon';
 
@@ -47,9 +46,9 @@ const NavItem = ({
 /**
  * Sidebar navigation
  */
-const SideNav = ({ children }: { children: ReactNode }) => {
+const SideNav = ({ children }: React.PropsWithChildren) => {
   const pathname = usePathname();
-  const user = useUser();
+  const user = api.user.me.useQuery();
 
   return (
     <div className="flex">
@@ -68,7 +67,7 @@ const SideNav = ({ children }: { children: ReactNode }) => {
             </div>
             <Dropdown
               position="right"
-              OpenButton={<UserIcon {...user} />}
+              OpenButton={<UserIcon {...(user.data?.user ?? {})} />}
               openButtonClass="flex"
             >
               {/* TODO(@zkirby): Enable dark mode */}
diff --git a/apps/nextjs/src/app/_components/UserLoader.tsx b/apps/nextjs/src/app/_components/UserLoader.tsx
new file mode 100644
index 00000000..ccda5693
--- /dev/null
+++ b/apps/nextjs/src/app/_components/UserLoader.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect } from 'react';
+import { api } from '../../utils/api';
+import Loader from './Loader';
+
+/**
+ * This component is responsible for ensuring that the user *in our DB*
+ * is created. This is different from (but 1:1 with) the Clerk user.
+ *
+ * It's important that this mounts high in the component tree and
+ * prevents any children that might make API calls from rendering
+ * since almost every API call relies on the User being created
+ * in our DB.
+ *
+ * TODO(@zkirby): Think up a better solution here. We're essentially blocking
+ * the entire app from rendering for no reason (other than when the user is first created).
+ * Likely, we're not using Clerk correctly or under utilizing some functionality.
+ */
+const UserLoader = ({ children }: React.PropsWithChildren) => {
+  const ensureUserIsCreated = api.user.create.useMutation();
+
+  useEffect(() => {
+    ensureUserIsCreated.mutate();
+  }, []);
+
+  return (
+    // NOTE(@zkirby): Keep spinning until we're sure the user is created,
+    // if we use 'isFetching' here, we'll render sub-tree once until the
+    // api calls kicks off.
+    <Loader
+      status={{ loading: !ensureUserIsCreated.isSuccess }}
+      className="ml-5 mt-5"
+    >
+      {children}
+    </Loader>
+  );
+};
+
+export default UserLoader;
diff --git a/apps/nextjs/src/app/alerts/AlertsList.tsx b/apps/nextjs/src/app/alerts/AlertsList.tsx
index d396963d..23c82ef6 100644
--- a/apps/nextjs/src/app/alerts/AlertsList.tsx
+++ b/apps/nextjs/src/app/alerts/AlertsList.tsx
@@ -6,7 +6,6 @@ import { RxAvatar } from 'react-icons/rx';
 import { TbClock, TbLetterCase, TbMinus, TbPlus } from 'react-icons/tb';
 
 import { api } from '~/utils/api';
-import { useUser } from '../../hooks/useUser';
 import Loader from '../_components/Loader';
 import Search from '../_components/Search';
 import AlertsListItem from './AlertListItem';
@@ -117,7 +116,7 @@ const AlertsList = () => {
   });
   const updateAlert = api.alert.update.useMutation();
   const users = api.user.list.useQuery();
-  const currentUser = useUser();
+  const currentUser = api.user.me.useQuery();
 
   const update = useCallback(async (id: string, alert: Partial<Alert>) => {
     await updateAlert.mutateAsync({ id, alert });
@@ -259,7 +258,7 @@ const AlertsList = () => {
                   onAck={() => update(a.id, { status: 'ACKED' })}
                   onClose={() => update(a.id, { status: 'CLOSED' })}
                   onSelfAssign={() =>
-                    update(a.id, { assignedToId: currentUser?.id })
+                    update(a.id, { assignedToId: currentUser.data?.user?.id })
                   }
                   onReopen={() => update(a.id, { status: 'OPEN' })}
                 />
diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
index c1c40a2e..fc0ecfdc 100644
--- a/apps/nextjs/src/app/layout.tsx
+++ b/apps/nextjs/src/app/layout.tsx
@@ -8,6 +8,7 @@ import { headers } from 'next/headers';
 
 import React from 'react';
 import SideNav from './_components/SideNav';
+import UserLoader from './_components/UserLoader';
 import { TRPCReactProvider } from './providers';
 
 const fontSans = Inter({
@@ -38,7 +39,7 @@ export const dynamic = 'force-dynamic';
 //     creator: '@jullerino',
 //   },
 // };
-export default function Layout(props: { children: React.ReactNode }) {
+export default function Layout({ children }: React.PropsWithChildren) {
   return (
     <ClerkProvider>
       <html lang="en">
@@ -49,7 +50,9 @@ export default function Layout(props: { children: React.ReactNode }) {
           )}
         >
           <TRPCReactProvider headers={headers()}>
-            <SideNav>{props.children}</SideNav>
+            <UserLoader>
+              <SideNav>{children}</SideNav>
+            </UserLoader>
           </TRPCReactProvider>
         </body>
       </html>
diff --git a/apps/nextjs/src/app/route.ts b/apps/nextjs/src/app/route.ts
index abdd0863..5adc3f5b 100644
--- a/apps/nextjs/src/app/route.ts
+++ b/apps/nextjs/src/app/route.ts
@@ -3,6 +3,6 @@ import { redirect } from 'next/navigation';
 /**
  * For now, we'll have the list alerts view be the 'home' page.
  */
-export async function GET(request: Request) {
+export function GET(_request: Request) {
   redirect('/alerts');
 }
diff --git a/apps/nextjs/src/app/teams/TeamsList.tsx b/apps/nextjs/src/app/teams/TeamsList.tsx
index 4d351f54..00afcbcb 100644
--- a/apps/nextjs/src/app/teams/TeamsList.tsx
+++ b/apps/nextjs/src/app/teams/TeamsList.tsx
@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
 import { TbCheck, TbPlus } from 'react-icons/tb';
 import type { RouterOutputs } from '~/utils/api';
 import { api } from '~/utils/api';
-import { useUser } from '../../hooks/useUser';
 import Button from '../_components/Button';
 import Loader from '../_components/Loader';
 import Modal from '../_components/Modal';
@@ -15,10 +14,10 @@ const TeamItem = ({
   user,
 }: {
   team: RouterOutputs['team']['list']['teams']['0'];
-  user: RouterOutputs['user']['me']['user'];
+  user?: RouterOutputs['user']['me']['user'];
 }) => {
   const userHasJoined = useMemo(
-    () => team.users.some((u) => u.id === user.id),
+    () => team.users.some((u) => u.id === user?.id),
     [team.users, user],
   );
 
@@ -45,7 +44,7 @@ const TeamItem = ({
 const TeamsList = () => {
   const listTeams = api.team.list.useQuery();
   const createTeam = api.team.create.useMutation();
-  const user = useUser();
+  const user = api.user.me.useQuery();
 
   // NOTE(@zkirby): We might want to consider making this an
   // API query param, but for now we'll assume there are few enough
@@ -104,10 +103,10 @@ const TeamsList = () => {
       {/* Teams List */}
       <Loader
         className={'px-10 mt-5'}
-        status={{ loading: listTeams.isFetching || !user }}
+        status={{ loading: listTeams.isFetching || user.isFetching }}
       >
         {teams.map((team) => (
-          <TeamItem key={team.id} team={team} user={user!} />
+          <TeamItem key={team.id} team={team} user={user.data?.user} />
         ))}
       </Loader>
     </div>
diff --git a/apps/nextjs/src/hooks/useUser.ts b/apps/nextjs/src/hooks/useUser.ts
deleted file mode 100644
index 70142b05..00000000
--- a/apps/nextjs/src/hooks/useUser.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { RouterOutputs } from '~/utils/api';
-import { api } from '~/utils/api';
-
-/**
- * Hook for retrieving or creating the user
- */
-export function useUser() {
-  const [user, setUser] = useState<RouterOutputs['user']['me']['user']>();
-
-  const createOrGetUser = api.user.me.useMutation({
-    onSuccess: (result) => result?.user && setUser(result.user),
-  });
-
-  useEffect(() => {
-    createOrGetUser.mutate();
-  }, []);
-
-  return user;
-}
diff --git a/packages/api/src/router/user/create.ts b/packages/api/src/router/user/create.ts
new file mode 100644
index 00000000..4d4ea553
--- /dev/null
+++ b/packages/api/src/router/user/create.ts
@@ -0,0 +1,74 @@
+import { TRPCError } from '@trpc/server';
+
+import type { Db } from '@vessel/db';
+import { db } from '@vessel/db';
+
+import { retry } from 'radash';
+import { useServicesHook } from '../../middlewares/trpc/use-services-hook';
+import type { UserManager } from '../../services/user-manager';
+import { makeUserManager } from '../../services/user-manager';
+import { procedure } from '../../trpc';
+
+interface Context {
+  db: Db;
+  userManager: UserManager;
+}
+
+export const userCreate = procedure
+  .use(
+    useServicesHook<Context>({
+      db: () => db,
+      userManager: makeUserManager,
+    }),
+  )
+  .mutation(async ({ ctx }) => {
+    if (!ctx.auth.claims) {
+      throw new TRPCError({
+        code: 'UNAUTHORIZED',
+        message: 'Claims not found',
+      });
+    }
+
+    const claims = ctx.auth.claims;
+
+    const foundUser = await ctx.db.user.findByEmail(claims.email);
+
+    if (foundUser)
+      return { user: await ctx.userManager.profilePic.addToUser(foundUser) };
+
+    try {
+      const user = await db.user.newSignUp({
+        email: claims.email,
+        firstName: claims.first_name,
+        lastName: claims.last_name,
+        externalId: claims.id,
+      });
+
+      const uploadProfilePic = async () => {
+        if (!claims.image_url) return;
+        const { key } = await ctx.userManager.profilePic.put({
+          id: user.id,
+          url: claims.image_url,
+        });
+        return key;
+      };
+      const imageS3Key = await uploadProfilePic();
+
+      const updatedUser = await ctx.db.user.update(user.id, {
+        imageS3Key,
+      });
+      return { user: await ctx.userManager.profilePic.addToUser(updatedUser) };
+    } catch (err) {
+      const user = await retry({ times: 2, delay: 1000 }, async () => {
+        const user = await ctx.db.user.findByEmail(claims.email);
+        if (!user) {
+          throw new TRPCError({
+            code: 'INTERNAL_SERVER_ERROR',
+            message: 'User not found',
+          });
+        }
+        return user;
+      });
+      return { user: await ctx.userManager.profilePic.addToUser(user) };
+    }
+  });
diff --git a/packages/api/src/router/user/index.ts b/packages/api/src/router/user/index.ts
index 287ecd62..9dcc8cf4 100644
--- a/packages/api/src/router/user/index.ts
+++ b/packages/api/src/router/user/index.ts
@@ -1,4 +1,5 @@
 import { createTRPCRouter } from '../../trpc';
+import { userCreate } from './create';
 import { userList } from './list';
 import { userMe } from './me';
 import { userUpdate } from './update';
@@ -7,6 +8,7 @@ import { userUpdateExpoPushToken } from './update-expo-push-token';
 export const userRouter = createTRPCRouter({
   list: userList,
   me: userMe,
+  create: userCreate,
   update: userUpdate,
   updateExpoPushToken: userUpdateExpoPushToken,
 });
diff --git a/packages/api/src/router/user/me.ts b/packages/api/src/router/user/me.ts
index 8cd5c4dc..b34d0245 100644
--- a/packages/api/src/router/user/me.ts
+++ b/packages/api/src/router/user/me.ts
@@ -3,7 +3,6 @@ import { TRPCError } from '@trpc/server';
 import type { Db } from '@vessel/db';
 import { db } from '@vessel/db';
 
-import { retry } from 'radash';
 import { useServicesHook } from '../../middlewares/trpc/use-services-hook';
 import type { UserManager } from '../../services/user-manager';
 import { makeUserManager } from '../../services/user-manager';
@@ -21,7 +20,7 @@ export const userMe = procedure
       userManager: makeUserManager,
     }),
   )
-  .mutation(async ({ ctx }) => {
+  .query(async ({ ctx }) => {
     if (!ctx.auth.claims) {
       throw new TRPCError({
         code: 'UNAUTHORIZED',
@@ -35,40 +34,5 @@ export const userMe = procedure
 
     if (foundUser)
       return { user: await ctx.userManager.profilePic.addToUser(foundUser) };
-
-    try {
-      const user = await db.user.newSignUp({
-        email: claims.email,
-        firstName: claims.first_name,
-        lastName: claims.last_name,
-        externalId: claims.id,
-      });
-
-      const uploadProfilePic = async () => {
-        if (!claims.image_url) return;
-        const { key } = await ctx.userManager.profilePic.put({
-          id: user.id,
-          url: claims.image_url,
-        });
-        return key;
-      };
-      const imageS3Key = await uploadProfilePic();
-
-      const updatedUser = await ctx.db.user.update(user.id, {
-        imageS3Key,
-      });
-      return { user: await ctx.userManager.profilePic.addToUser(updatedUser) };
-    } catch (err) {
-      const user = await retry({ times: 2, delay: 1000 }, async () => {
-        const user = await ctx.db.user.findByEmail(claims.email);
-        if (!user) {
-          throw new TRPCError({
-            code: 'INTERNAL_SERVER_ERROR',
-            message: 'User not found',
-          });
-        }
-        return user;
-      });
-      return { user: await ctx.userManager.profilePic.addToUser(user) };
-    }
+    return { user: null };
   });