diff --git a/app/components/ui/select.tsx b/app/components/ui/select.tsx
index 4d4aaffce..27889662c 100644
--- a/app/components/ui/select.tsx
+++ b/app/components/ui/select.tsx
@@ -7,7 +7,6 @@ import { Portal } from '@ark-ui/react/portal';
 import { ChevronDown, X } from 'lucide-react';
 import { ComponentProps, ReactNode, useMemo, useState } from 'react';
 import { isNonNullish, isNullish } from 'remeda';
-import { match } from 'ts-pattern';
 
 import { cn } from '@/lib/tailwind/utils';
 import { getUiState } from '@/lib/ui-state';
@@ -157,15 +156,10 @@ export const Select = <Option extends OptionBase>({
       <Portal>
         <Combobox.Positioner>
           <Combobox.Content className="z-10 rounded-md bg-white p-1 shadow dark:bg-neutral-900">
-            {match(ui.state)
-              .with(
-                ui.with('empty'),
-                () => <div className="p-4">No results found</div> // TODO translate
-              )
-              .with(ui.with('empty-override'), ({ renderEmpty }) =>
-                renderEmpty(search)
-              )
-              .with(ui.with('default'), () => (
+            {ui
+              .match('empty', () => <div className="p-4">No results found</div>)
+              .match('empty-override', ({ renderEmpty }) => renderEmpty(search))
+              .match('default', () => (
                 <Combobox.ItemGroup className="flex flex-col gap-0.5">
                   {collection.items.slice(0, 20).map((item) => (
                     <Combobox.Item
@@ -183,7 +177,7 @@ export const Select = <Option extends OptionBase>({
                   ))}
                 </Combobox.ItemGroup>
               ))
-              .exhaustive()}
+              .render()}
           </Combobox.Content>
         </Combobox.Positioner>
       </Portal>
diff --git a/app/features/repository/app/page-repositories.tsx b/app/features/repository/app/page-repositories.tsx
index e432625a7..31fbd150b 100644
--- a/app/features/repository/app/page-repositories.tsx
+++ b/app/features/repository/app/page-repositories.tsx
@@ -1,6 +1,5 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { getUiState } from '@/lib/ui-state';
@@ -42,11 +41,11 @@ export const PageRepositories = () => {
         <PageLayoutTopBarTitle>Repositories</PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
-        {match(ui.state)
-          .with(ui.with('pending'), () => <>Loading...</>) // TODO Design
-          .with(ui.with('error'), () => <PageError />)
-          .with(ui.with('empty'), () => <>No Repo</>) // TODO Design
-          .with(ui.with('default'), ({ items }) => (
+        {ui
+          .match('pending', () => <>Loading...</>)
+          .match('error', () => <PageError />)
+          .match('empty', () => <>No repo</>)
+          .match('default', ({ items }) => (
             <>
               {items.map((item) => (
                 <Link
@@ -70,7 +69,7 @@ export const PageRepositories = () => {
               )}
             </>
           ))
-          .exhaustive()}
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );
diff --git a/app/features/repository/app/page-repository.tsx b/app/features/repository/app/page-repository.tsx
index fa2708817..5b7129491 100644
--- a/app/features/repository/app/page-repository.tsx
+++ b/app/features/repository/app/page-repository.tsx
@@ -1,7 +1,6 @@
 import { ORPCError } from '@orpc/client';
 import { useQuery } from '@tanstack/react-query';
 import { AlertCircleIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { getUiState } from '@/lib/ui-state';
@@ -55,24 +54,22 @@ export const PageRepository = (props: { params: { id: string } }) => {
         }
       >
         <PageLayoutTopBarTitle>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <Skeleton className="h-4 w-48" />)
-            .with(ui.with('not-found'), ui.with('error'), () => (
+          {ui
+            .match('pending', () => <Skeleton className="h-4 w-48" />)
+            .match(['not-found', 'error'], () => (
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
-            .with(ui.with('default'), ({ repository }) => (
-              <>{repository.name}</>
-            ))
-            .exhaustive()}
+            .match('default', ({ repository }) => <>{repository.name}</>)
+            .render()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
-        {match(ui.state)
-          .with(ui.with('pending'), () => <Spinner full />)
-          .with(ui.with('not-found'), () => <PageError errorCode={404} />)
-          .with(ui.with('error'), () => <PageError />)
-          .with(ui.with('default'), ({ repository }) => <>{repository.name}</>)
-          .exhaustive()}
+        {ui
+          .match('pending', () => <Spinner full />)
+          .match('not-found', () => <PageError errorCode={404} />)
+          .match('error', () => <PageError />)
+          .match('default', ({ repository }) => <>{repository.name}</>)
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );
diff --git a/app/features/repository/manager/page-repositories.tsx b/app/features/repository/manager/page-repositories.tsx
index 8c8d7dc89..7eecda11a 100644
--- a/app/features/repository/manager/page-repositories.tsx
+++ b/app/features/repository/manager/page-repositories.tsx
@@ -1,7 +1,6 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { Link, useRouter } from '@tanstack/react-router';
 import { BookMarkedIcon, PlusIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { getUiState } from '@/lib/ui-state';
@@ -97,16 +96,16 @@ export const PageRepositories = (props: {
       </PageLayoutTopBar>
       <PageLayoutContent className="pb-20">
         <DataList>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <DataListLoadingState />)
-            .with(ui.with('error'), () => (
+          {ui
+            .match('pending', () => <DataListLoadingState />)
+            .match('error', () => (
               <DataListErrorState retry={() => repositoriesQuery.refetch()} />
             ))
-            .with(ui.with('empty'), () => <DataListEmptyState />)
-            .with(ui.with('empty-search'), ({ searchTerm }) => (
+            .match('empty', () => <DataListEmptyState />)
+            .match('empty-search', ({ searchTerm }) => (
               <DataListEmptyState searchTerm={searchTerm} />
             ))
-            .with(ui.with('default'), ({ items, searchTerm, total }) => (
+            .match('default', ({ items, searchTerm, total }) => (
               <>
                 {!!searchTerm && (
                   <DataListRowResults
@@ -168,7 +167,7 @@ export const PageRepositories = (props: {
                 </DataListRow>
               </>
             ))
-            .exhaustive()}
+            .render()}
         </DataList>
       </PageLayoutContent>
     </PageLayout>
diff --git a/app/features/repository/manager/page-repository.tsx b/app/features/repository/manager/page-repository.tsx
index 1540e217f..84a9e75d0 100644
--- a/app/features/repository/manager/page-repository.tsx
+++ b/app/features/repository/manager/page-repository.tsx
@@ -1,7 +1,6 @@
 import { ORPCError } from '@orpc/client';
 import { useQuery } from '@tanstack/react-query';
 import { AlertCircleIcon, PencilLineIcon, Trash2Icon } from 'lucide-react';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { getUiState } from '@/lib/ui-state';
@@ -54,24 +53,22 @@ export const PageRepository = (props: { params: { id: string } }) => {
         }
       >
         <PageLayoutTopBarTitle>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <Skeleton className="h-4 w-48" />)
-            .with(ui.with('not-found'), ui.with('error'), () => (
+          {ui
+            .match('pending', () => <Skeleton className="h-4 w-48" />)
+            .match(['not-found', 'error'], () => (
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
-            .with(ui.with('default'), ({ repository }) => (
-              <>{repository.name}</>
-            ))
-            .exhaustive()}
+            .match('default', ({ repository }) => <>{repository.name}</>)
+            .render()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
-        {match(ui.state)
-          .with(ui.with('pending'), () => <Spinner full />)
-          .with(ui.with('not-found'), () => <PageError errorCode={404} />)
-          .with(ui.with('error'), () => <PageError />)
-          .with(ui.with('default'), ({ repository }) => <>{repository.name}</>)
-          .exhaustive()}
+        {ui
+          .match('pending', () => <Spinner full />)
+          .match('not-found', () => <PageError errorCode={404} />)
+          .match('error', () => <PageError />)
+          .match('default', ({ repository }) => <>{repository.name}</>)
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );
diff --git a/app/features/user/manager/page-user-update.tsx b/app/features/user/manager/page-user-update.tsx
index f1a97288d..56f12ef48 100644
--- a/app/features/user/manager/page-user-update.tsx
+++ b/app/features/user/manager/page-user-update.tsx
@@ -5,7 +5,6 @@ import { useBlocker, useCanGoBack, useRouter } from '@tanstack/react-router';
 import { AlertCircleIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import { match } from 'ts-pattern';
 
 import { authClient } from '@/lib/auth/client';
 import { orpc } from '@/lib/orpc/client';
@@ -133,15 +132,13 @@ export const PageUserUpdate = (props: { params: { id: string } }) => {
           }
         >
           <PageLayoutTopBarTitle>
-            {match(ui.state)
-              .with(ui.with('pending'), () => <Skeleton className="h-4 w-48" />)
-              .with(ui.with('not-found'), ui.with('error'), () => (
+            {ui
+              .match('pending', () => <Skeleton className="h-4 w-48" />)
+              .match(['not-found', 'error'], () => (
                 <AlertCircleIcon className="size-4 text-muted-foreground" />
               ))
-              .with(ui.with('default'), ({ user }) => (
-                <>{user.name || user.email}</>
-              ))
-              .exhaustive()}
+              .match('default', ({ user }) => <>{user.name || user.email}</>)
+              .render()}
           </PageLayoutTopBarTitle>
         </PageLayoutTopBar>
         <PageLayoutContent>
diff --git a/app/features/user/manager/page-user.tsx b/app/features/user/manager/page-user.tsx
index 84d1152cf..6cd416dc4 100644
--- a/app/features/user/manager/page-user.tsx
+++ b/app/features/user/manager/page-user.tsx
@@ -9,7 +9,6 @@ import { Link, useCanGoBack, useRouter } from '@tanstack/react-router';
 import dayjs from 'dayjs';
 import { AlertCircleIcon, PencilLineIcon, Trash2Icon } from 'lucide-react';
 import { toast } from 'sonner';
-import { match } from 'ts-pattern';
 
 import { authClient } from '@/lib/auth/client';
 import { Role } from '@/lib/auth/permissions';
@@ -143,23 +142,21 @@ export const PageUser = (props: { params: { id: string } }) => {
         }
       >
         <PageLayoutTopBarTitle>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <Skeleton className="h-4 w-48" />)
-            .with(ui.with('not-found'), ui.with('error'), () => (
+          {ui
+            .match('pending', () => <Skeleton className="h-4 w-48" />)
+            .match(['not-found', 'error'], () => (
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
-            .with(ui.with('default'), ({ user }) => (
-              <>{user.name || user.email}</>
-            ))
-            .exhaustive()}
+            .match('default', ({ user }) => <>{user.name || user.email}</>)
+            .render()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
-        {match(ui.state)
-          .with(ui.with('pending'), () => <Spinner full />)
-          .with(ui.with('not-found'), () => <PageError errorCode={404} />)
-          .with(ui.with('error'), () => <PageError />)
-          .with(ui.with('default'), ({ user }) => (
+        {ui
+          .match('pending', () => <Spinner full />)
+          .match('not-found', () => <PageError errorCode={404} />)
+          .match('error', () => <PageError />)
+          .match('default', ({ user }) => (
             <div className="flex flex-col gap-4 xl:flex-row xl:items-start">
               <Card className="relative flex-1">
                 <CardHeader>
@@ -222,7 +219,7 @@ export const PageUser = (props: { params: { id: string } }) => {
               </div>
             </div>
           ))
-          .exhaustive()}
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );
@@ -330,18 +327,17 @@ const UserSessions = (props: { userId: string }) => {
             </DataListCell>
           </WithPermission>
         </DataListRow>
-
-        {match(ui.state)
-          .with(ui.with('pending'), () => <DataListLoadingState />)
-          .with(ui.with('error'), () => (
+        {ui
+          .match('pending', () => <DataListLoadingState />)
+          .match('error', () => (
             <DataListErrorState retry={() => sessionsQuery.refetch()} />
           ))
-          .with(ui.with('empty'), () => (
+          .match('empty', () => (
             <DataListEmptyState className="min-h-20">
               No user sessions
             </DataListEmptyState>
           ))
-          .with(ui.with('default'), ({ items }) => (
+          .match('default', ({ items }) => (
             <>
               {items.map((item) => (
                 <DataListRow
@@ -405,7 +401,7 @@ const UserSessions = (props: { userId: string }) => {
               </DataListRow>
             </>
           ))
-          .exhaustive()}
+          .render()}
       </DataList>
     </WithPermission>
   );
diff --git a/app/features/user/manager/page-users.tsx b/app/features/user/manager/page-users.tsx
index 5643fc933..845029aca 100644
--- a/app/features/user/manager/page-users.tsx
+++ b/app/features/user/manager/page-users.tsx
@@ -2,7 +2,6 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import { Link, useRouter } from '@tanstack/react-router';
 import dayjs from 'dayjs';
 import { PlusIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { cn } from '@/lib/tailwind/utils';
@@ -103,16 +102,16 @@ export const PageUsers = (props: { search: { searchTerm?: string } }) => {
       </PageLayoutTopBar>
       <PageLayoutContent className="pb-20">
         <DataList>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <DataListLoadingState />)
-            .with(ui.with('error'), () => (
+          {ui
+            .match('pending', () => <DataListLoadingState />)
+            .match('error', () => (
               <DataListErrorState retry={() => usersQuery.refetch()} />
             ))
-            .with(ui.with('empty'), () => <DataListEmptyState />)
-            .with(ui.with('empty-search'), ({ searchTerm }) => (
+            .match('empty', () => <DataListEmptyState />)
+            .match('empty-search', ({ searchTerm }) => (
               <DataListEmptyState searchTerm={searchTerm} />
             ))
-            .with(ui.with('default'), ({ items, searchTerm, total }) => (
+            .match('default', ({ items, searchTerm, total }) => (
               <>
                 {!!searchTerm && (
                   <DataListRowResults
@@ -195,7 +194,7 @@ export const PageUsers = (props: { search: { searchTerm?: string } }) => {
                 </DataListRow>
               </>
             ))
-            .exhaustive()}
+            .render()}
         </DataList>
       </PageLayoutContent>
     </PageLayout>
diff --git a/app/lib/ui-state.ts b/app/lib/ui-state.ts
index 05f098ce3..a933afb93 100644
--- a/app/lib/ui-state.ts
+++ b/app/lib/ui-state.ts
@@ -7,6 +7,29 @@ type AvailableStatus =
   | 'default'
   | (string & {}); // Allows extra status
 
+type UiState<
+  Status extends AvailableStatus,
+  Data extends Record<string, unknown>,
+> = {
+  is: <S extends Status>(status: S) => boolean;
+  state: {
+    __status: Status;
+  } & Data;
+  match: <S extends Status>(
+    status: S | Array<S>,
+    handler: (
+      data: Omit<
+        Extract<UiState<Status, Data>['state'], { __status: S }>,
+        '__status'
+      >
+    ) => React.ReactNode,
+    __matched?: boolean,
+    render?: () => React.ReactNode
+  ) => Exclude<Status, S> extends never
+    ? { render: () => React.ReactNode }
+    : Pick<UiState<Exclude<Status, S>, Data>, 'match'>;
+};
+
 export const getUiState = <
   Status extends AvailableStatus,
   Data extends Record<string, unknown>,
@@ -17,30 +40,52 @@ export const getUiState = <
       data?: D
     ) => { __status: S } & D
   ) => { __status: Status } & Data
-): {
-  with: <S extends Status>(
-    status: S
-  ) => {
-    __status: S;
-  };
-  is: <S extends Status>(status: S) => boolean;
-  state: {
-    __status: Status;
-  } & Data;
-} => {
+): UiState<Status, Data> => {
   const state = getState((status, data = {} as ExplicitAny) => {
     return {
       __status: status,
       ...data,
     };
   });
-  return {
-    with: (status) => ({
-      __status: status,
-    }),
+
+  const isMatching = <S extends Status>(status: Status): status is S =>
+    status === state.__status;
+
+  const isMatchingArray = <S extends Status>(
+    status: Array<Status>
+  ): status is Array<S> => status.includes(state.__status);
+
+  const uiState: UiState<Status, Data> = {
+    state,
     is: (status) => {
       return state.__status === status;
     },
-    state,
+    match: (status, handler, __matched = false, render = () => null) => {
+      if (
+        !__matched && typeof status === 'string'
+          ? isMatching(status)
+          : isMatchingArray(status as Array<Status>)
+      ) {
+        return {
+          ...(uiState as ExplicitAny),
+          __matched: true,
+          render: () => handler(state as ExplicitAny),
+          match: (status, _handler) =>
+            uiState.match(status, _handler, true, () =>
+              handler(uiState.state as ExplicitAny)
+            ),
+        };
+      }
+
+      return {
+        ...uiState,
+        __matched,
+        render,
+        match: (status, handler) =>
+          uiState.match(status, handler, __matched, render),
+      };
+    },
   };
+
+  return uiState;
 };