working but sheet styling is ugly

src/app/routes/_authed/badges.tsx

@@ -0,0 +1,33 @@
+import BadgeStatsTable from '@/features/badges/components/badge-stats-table';
+import { badgeQueries, useAllBadges } from '@/features/badges/queries';
+import PlayerStatsTableSkeleton from '@/features/players/components/player-stats-table-skeleton';
+import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch';
+import { createFileRoute } from '@tanstack/react-router';
+import { Suspense } from 'react';
+
+export const Route = createFileRoute('/_authed/badges')({
+  component: Badges,
+  beforeLoad: ({ context }) => {
+    const queryClient = context.queryClient;
+    prefetchServerQuery(queryClient, badgeQueries.allBadges());
+  },
+  loader: () => ({
+    withPadding: false,
+    fullWidth: true,
+    header: {
+      title: 'All Badges',
+    },
+    refresh: [badgeQueries.allBadges().queryKey],
+  }),
+});
+
+function Badges() {
+  //TODO: CHANGE FALLBACK
+  return (
+    <Suspense fallback={<PlayerStatsTableSkeleton />}>
+      <div>
+        <BadgeStatsTable />
+      </div>
+    </Suspense>
+  );
+}