diff --git a/api-schema.graphql b/api-schema.graphql
index adfba83..0a515cb 100644
--- a/api-schema.graphql
+++ b/api-schema.graphql
@@ -158,7 +158,7 @@ type User {
   id: String!
   identities: [Identity!]
   name: String
-  profileUrl: String
+  profileUrl: String!
   role: UserRole
   status: UserStatus
   updatedAt: DateTime
diff --git a/libs/api/user/feature/src/lib/api-user.resolver.ts b/libs/api/user/feature/src/lib/api-user.resolver.ts
index a71e879..24a7ef8 100644
--- a/libs/api/user/feature/src/lib/api-user.resolver.ts
+++ b/libs/api/user/feature/src/lib/api-user.resolver.ts
@@ -9,9 +9,9 @@ export class ApiUserResolver {
     return user.avatarUrl?.length ? user.avatarUrl : null
   }
 
-  @ResolveField(() => String, { nullable: true })
+  @ResolveField(() => String)
   profileUrl(@Parent() user: User) {
-    return ['/profile', user.username].join('/')
+    return ['/u', user.username].join('/')
   }
 
   @ResolveField(() => [Identity], { nullable: true })
diff --git a/libs/sdk/src/generated/graphql-sdk.ts b/libs/sdk/src/generated/graphql-sdk.ts
index 5dc5d1f..9c2c6bf 100644
--- a/libs/sdk/src/generated/graphql-sdk.ts
+++ b/libs/sdk/src/generated/graphql-sdk.ts
@@ -258,7 +258,7 @@ export type User = {
   id: Scalars['String']['output']
   identities?: Maybe<Array<Identity>>
   name?: Maybe<Scalars['String']['output']>
-  profileUrl?: Maybe<Scalars['String']['output']>
+  profileUrl: Scalars['String']['output']
   role?: Maybe<UserRole>
   status?: Maybe<UserStatus>
   updatedAt?: Maybe<Scalars['DateTime']['output']>
@@ -319,7 +319,7 @@ export type LoginMutation = {
     developer?: boolean | null
     id: string
     name?: string | null
-    profileUrl?: string | null
+    profileUrl: string
     role?: UserRole | null
     status?: UserStatus | null
     updatedAt?: Date | null
@@ -344,7 +344,7 @@ export type RegisterMutation = {
     developer?: boolean | null
     id: string
     name?: string | null
-    profileUrl?: string | null
+    profileUrl: string
     role?: UserRole | null
     status?: UserStatus | null
     updatedAt?: Date | null
@@ -363,7 +363,7 @@ export type MeQuery = {
     developer?: boolean | null
     id: string
     name?: string | null
-    profileUrl?: string | null
+    profileUrl: string
     role?: UserRole | null
     status?: UserStatus | null
     updatedAt?: Date | null
@@ -479,7 +479,7 @@ export type AdminFindManyIdentityQuery = {
       developer?: boolean | null
       id: string
       name?: string | null
-      profileUrl?: string | null
+      profileUrl: string
       role?: UserRole | null
       status?: UserStatus | null
       updatedAt?: Date | null
@@ -654,7 +654,7 @@ export type UserDetailsFragment = {
   developer?: boolean | null
   id: string
   name?: string | null
-  profileUrl?: string | null
+  profileUrl: string
   role?: UserRole | null
   status?: UserStatus | null
   updatedAt?: Date | null
@@ -674,7 +674,7 @@ export type AdminCreateUserMutation = {
     developer?: boolean | null
     id: string
     name?: string | null
-    profileUrl?: string | null
+    profileUrl: string
     role?: UserRole | null
     status?: UserStatus | null
     updatedAt?: Date | null
@@ -703,7 +703,7 @@ export type AdminFindManyUserQuery = {
       developer?: boolean | null
       id: string
       name?: string | null
-      profileUrl?: string | null
+      profileUrl: string
       role?: UserRole | null
       status?: UserStatus | null
       updatedAt?: Date | null
@@ -748,7 +748,7 @@ export type AdminFindOneUserQuery = {
     developer?: boolean | null
     id: string
     name?: string | null
-    profileUrl?: string | null
+    profileUrl: string
     role?: UserRole | null
     status?: UserStatus | null
     updatedAt?: Date | null
@@ -770,7 +770,7 @@ export type AdminUpdateUserMutation = {
     developer?: boolean | null
     id: string
     name?: string | null
-    profileUrl?: string | null
+    profileUrl: string
     role?: UserRole | null
     status?: UserStatus | null
     updatedAt?: Date | null
@@ -793,7 +793,7 @@ export type UserFindManyUserQuery = {
       developer?: boolean | null
       id: string
       name?: string | null
-      profileUrl?: string | null
+      profileUrl: string
       role?: UserRole | null
       status?: UserStatus | null
       updatedAt?: Date | null
@@ -825,7 +825,7 @@ export type UserFindOneUserQuery = {
     developer?: boolean | null
     id: string
     name?: string | null
-    profileUrl?: string | null
+    profileUrl: string
     role?: UserRole | null
     status?: UserStatus | null
     updatedAt?: Date | null
@@ -846,7 +846,7 @@ export type UserUpdateUserMutation = {
     developer?: boolean | null
     id: string
     name?: string | null
-    profileUrl?: string | null
+    profileUrl: string
     role?: UserRole | null
     status?: UserStatus | null
     updatedAt?: Date | null
diff --git a/libs/tools/src/generators/web-feature/__snapshots__/web-feature-generator.spec.ts.snap b/libs/tools/src/generators/web-feature/__snapshots__/web-feature-generator.spec.ts.snap
index 38305da..6888fb3 100644
--- a/libs/tools/src/generators/web-feature/__snapshots__/web-feature-generator.spec.ts.snap
+++ b/libs/tools/src/generators/web-feature/__snapshots__/web-feature-generator.spec.ts.snap
@@ -372,7 +372,9 @@ import { Link } from 'react-router-dom';
 
 export function AdminTestListFeature() {
   const { deleteTest, items, pagination, query, setSearch } =
-    useAdminFindManyTest();
+    useAdminFindManyTest({
+      limit: 10,
+    });
 
   return (
     <UiPage
@@ -581,7 +583,7 @@ exports[`web-feature generator should run successfully with crud 20`] = `
 "import { Button, Group } from '@mantine/core';
 import { UiPageLimit, UiSearchField } from '@proj/web-ui-core';
 import { useUserFindManyTest } from '@proj/web-test-data-access';
-import { UserTestUiTable } from '@proj/web-test-ui';
+import { TestUiGrid } from '@proj/web-test-ui';
 import {
   UiBack,
   UiDebugModal,
@@ -593,7 +595,9 @@ import { Link } from 'react-router-dom';
 
 export function UserTestListFeature() {
   const { deleteTest, items, pagination, query, setSearch } =
-    useUserFindManyTest();
+    useUserFindManyTest({
+      limit: 12,
+    });
 
   return (
     <UiPage
@@ -610,26 +614,19 @@ export function UserTestListFeature() {
     >
       <Group>
         <UiSearchField placeholder="Search test" setSearch={setSearch} />
-        <UiPageLimit
-          limit={pagination.limit}
-          setLimit={pagination.setLimit}
-          setPage={pagination.setPage}
-        />
       </Group>
 
       {query.isLoading ? (
         <UiLoader />
       ) : items?.length ? (
-        <UserTestUiTable
-          deleteTest={(test) => {
-            if (!window.confirm('Are you sure?')) return;
-            return deleteTest(test.id);
-          }}
+        <TestUiGrid
           tests={items}
           page={pagination.page}
           totalRecords={pagination.total}
-          recordsPerPage={pagination.limit}
-          onPageChange={(page) => void pagination.setPage(page)}
+          onPageChange={pagination.setPage}
+          limit={pagination.limit}
+          setLimit={pagination.setLimit}
+          setPage={pagination.setPage}
         />
       ) : (
         <UiInfo message="No tests found" />
@@ -663,6 +660,10 @@ exports[`web-feature generator should run successfully with crud 22`] = `
 "export * from './lib/admin-test-ui-create-form';
 export * from './lib/admin-test-ui-table';
 export * from './lib/admin-test-ui-update-form';
+export * from './lib/test-ui-avatar';
+export * from './lib/test-ui-grid';
+export * from './lib/test-ui-grid-item';
+export * from './lib/test-ui-item';
 export * from './lib/user-test-ui-create-form';
 export * from './lib/user-test-ui-table';
 export * from './lib/user-test-ui-update-form';
@@ -818,6 +819,138 @@ export function AdminTestUiUpdateForm({
 `;
 
 exports[`web-feature generator should run successfully with crud 26`] = `
+"import { Test } from '@pubkey-stack/sdk';
+import { UiAvatar, UiAvatarProps } from '@pubkey-stack/web-ui-core';
+
+export type TestUiAvatarProps = UiAvatarProps & {
+  test?: Test;
+};
+
+export function TestUiAvatar({ test, ...props }: TestUiAvatarProps) {
+  return <UiAvatar avatarUrl={undefined} name={test?.name} {...props} />;
+}
+"
+`;
+
+exports[`web-feature generator should run successfully with crud 27`] = `
+"import { Paper } from '@mantine/core';
+import type { Test } from '@pubkey-stack/sdk';
+import { UiDebugModal, UiGroup } from '@pubkey-ui/core';
+import { TestUiItem } from './test-ui-item';
+
+export function TestUiGridItem({ test, to }: { test: Test; to?: string }) {
+  return (
+    <Paper withBorder p="md">
+      <UiGroup>
+        <TestUiItem test={test} to={to} />
+        <UiDebugModal data={test} />
+      </UiGroup>
+    </Paper>
+  );
+}
+"
+`;
+
+exports[`web-feature generator should run successfully with crud 28`] = `
+"import { Group, Pagination, SimpleGrid } from '@mantine/core';
+import type { Test } from '@pubkey-stack/sdk';
+import { gridLimits, UiPageLimit } from '@pubkey-stack/web-ui-core';
+import { UiDebugModal, UiGroup, UiStack } from '@pubkey-ui/core';
+import { DataTableProps } from 'mantine-datatable';
+import { TestUiGridItem } from './test-ui-grid-item';
+
+export function TestUiGrid({
+  tests = [],
+  onPageChange,
+  page,
+  totalRecords,
+  limit,
+  setLimit,
+  setPage,
+}: {
+  tests: Test[];
+  page: DataTableProps['page'];
+  totalRecords: number;
+  onPageChange: (page: number) => void;
+  limit: number;
+  setLimit: (limit: number) => void;
+  setPage: (page: number) => void;
+}) {
+  const totalPages = totalRecords / limit + 1;
+  return (
+    <UiStack>
+      <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="md">
+        {tests.map((test) => (
+          <TestUiGridItem key={test.id} to={test.id} test={test} />
+        ))}
+      </SimpleGrid>
+      <UiGroup>
+        <Pagination
+          disabled={totalPages < 2}
+          total={totalPages}
+          value={page}
+          onChange={onPageChange}
+        />
+        <Group>
+          <UiDebugModal data={tests} />
+          <UiPageLimit
+            data={gridLimits}
+            limit={limit}
+            setLimit={setLimit}
+            setPage={setPage}
+          />
+        </Group>
+      </UiGroup>
+    </UiStack>
+  );
+}
+"
+`;
+
+exports[`web-feature generator should run successfully with crud 29`] = `
+"import {
+  AvatarProps,
+  Group,
+  type GroupProps,
+  Stack,
+  Text,
+} from '@mantine/core';
+import { Test } from '@pubkey-stack/sdk';
+import { UiAnchor, type UiAnchorProps } from '@pubkey-ui/core';
+import { TestUiAvatar } from './test-ui-avatar';
+
+export function TestUiItem({
+  anchorProps,
+  avatarProps,
+  groupProps,
+  test,
+  to,
+}: {
+  anchorProps?: UiAnchorProps;
+  avatarProps?: Omit<AvatarProps, 'src'>;
+  groupProps?: GroupProps;
+  test?: Test;
+  to?: string | null;
+}) {
+  if (!test) return null;
+
+  return (
+    <UiAnchor to={to ?? undefined} underline="never" {...anchorProps}>
+      <Group gap="sm" {...groupProps}>
+        <TestUiAvatar test={test} {...avatarProps} />
+        <Stack gap={1}>
+          <Text size="sm" fw={500}>
+            {test?.name}
+          </Text>
+        </Stack>
+      </Group>
+    </UiAnchor>
+  );
+}
+"
+`;
+
+exports[`web-feature generator should run successfully with crud 30`] = `
 "import { Button, Group } from '@mantine/core';
 import { UserCreateTestInput } from '@proj/sdk';
 import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core';
@@ -850,7 +983,7 @@ export function UserTestUiCreateForm({
 "
 `;
 
-exports[`web-feature generator should run successfully with crud 27`] = `
+exports[`web-feature generator should run successfully with crud 31`] = `
 "import { ActionIcon, Anchor, Group, ScrollArea } from '@mantine/core';
 import { Test } from '@proj/sdk';
 import { IconPencil, IconTrash } from '@tabler/icons-react';
@@ -931,7 +1064,7 @@ export function UserTestUiTable({
 "
 `;
 
-exports[`web-feature generator should run successfully with crud 28`] = `
+exports[`web-feature generator should run successfully with crud 32`] = `
 "import { Button, Group } from '@mantine/core';
 import { UserUpdateTestInput, Test } from '@proj/sdk';
 import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core';
diff --git a/libs/tools/src/generators/web-feature/web-feature-generator.spec.ts b/libs/tools/src/generators/web-feature/web-feature-generator.spec.ts
index 3a4e1b8..bbb2f5c 100644
--- a/libs/tools/src/generators/web-feature/web-feature-generator.spec.ts
+++ b/libs/tools/src/generators/web-feature/web-feature-generator.spec.ts
@@ -96,6 +96,10 @@ describe('web-feature generator', () => {
         "libs/web/test/ui/src/lib/admin-test-ui-create-form.tsx",
         "libs/web/test/ui/src/lib/admin-test-ui-table.tsx",
         "libs/web/test/ui/src/lib/admin-test-ui-update-form.tsx",
+        "libs/web/test/ui/src/lib/test-ui-avatar.tsx",
+        "libs/web/test/ui/src/lib/test-ui-grid-item.tsx",
+        "libs/web/test/ui/src/lib/test-ui-grid.tsx",
+        "libs/web/test/ui/src/lib/test-ui-item.tsx",
         "libs/web/test/ui/src/lib/user-test-ui-create-form.tsx",
         "libs/web/test/ui/src/lib/user-test-ui-table.tsx",
         "libs/web/test/ui/src/lib/user-test-ui-update-form.tsx",
diff --git a/libs/tools/src/lib/web-crud/files/feature/lib/__actorFileName__-__modelFileName__-list.feature.tsx.template b/libs/tools/src/lib/web-crud/files/feature/lib/__actorFileName__-__modelFileName__-list.feature.tsx.template
index e0db7cd..d7ab376 100644
--- a/libs/tools/src/lib/web-crud/files/feature/lib/__actorFileName__-__modelFileName__-list.feature.tsx.template
+++ b/libs/tools/src/lib/web-crud/files/feature/lib/__actorFileName__-__modelFileName__-list.feature.tsx.template
@@ -1,12 +1,14 @@
 import { Button, Group } from '@mantine/core'
 import { UiPageLimit, UiSearchField } from '@<%= npmScope %>/<%= app.fileName %>-ui-core'
 import { use<%= actor.className %>FindMany<%= model.className %> } from '@<%= npmScope %>/<%= app.fileName %>-<%= model.fileName %>-data-access'
-import { <%= actor.className %><%= model.className %>UiTable } from '@<%= npmScope %>/<%= app.fileName %>-<%= model.fileName %>-ui'
+import { <% if(actorAdmin){ %><%= actor.className %><%= model.className %>UiTable<% } else { %><%= model.className %>UiGrid<% } %> } from '@<%= npmScope %>/<%= app.fileName %>-<%= model.fileName %>-ui'
 import { UiBack, UiDebugModal, UiInfo, UiLoader, UiPage } from '@pubkey-ui/core'
 import { Link } from 'react-router-dom'
 
 export function <%= actor.className %><%= model.className %>ListFeature() {
-  const { delete<%= model.className %>, items, pagination, query, setSearch } = use<%= actor.className %>FindMany<%= model.className %>()
+  const { delete<%= model.className %>, items, pagination, query, setSearch } = use<%= actor.className %>FindMany<%= model.className %>({
+    limit: <% if(actorAdmin){ %>10<% } else { %>12<% } %>,
+  })
 
   return (
     <UiPage
@@ -23,24 +25,31 @@ export function <%= actor.className %><%= model.className %>ListFeature() {
     >
       <Group>
         <UiSearchField placeholder="Search <%= model.propertyName %>" setSearch={setSearch} />
-        <UiPageLimit limit={pagination.limit} setLimit={pagination.setLimit} setPage={pagination.setPage} />
+        <% if(actorAdmin){ %><UiPageLimit limit={pagination.limit} setLimit={pagination.setLimit} setPage={pagination.setPage} /><% } %>
       </Group>
 
       {query.isLoading ? (
         <UiLoader />
-      ) : items?.length ? (
-        <<%= actor.className %><%= model.className %>UiTable
-          delete<%= model.className %>={(<%= model.propertyName %>) => {
-            if (!window.confirm('Are you sure?')) return
-            return delete<%= model.className %>(<%= model.propertyName %>.id)
-          }}
-          <%= plural.propertyName %>={items}
-          page={pagination.page}
-          totalRecords={pagination.total}
-          recordsPerPage={pagination.limit}
-          onPageChange={(page) => void pagination.setPage(page)}
-        />
-      ) : (
+      ) : items?.length ? <% if(actorAdmin){ %>
+                            (<<%= actor.className %><%= model.className %>UiTable
+                               delete<%= model.className %>={(<%= model.propertyName %>) => {
+                                 if (!window.confirm('Are you sure?')) return
+                                 return delete<%= model.className %>(<%= model.propertyName %>.id)
+                               }}
+                               <%= plural.propertyName %>={items}
+                               page={pagination.page}
+                               totalRecords={pagination.total}
+                               recordsPerPage={pagination.limit}
+                               onPageChange={(page) => void pagination.setPage(page)}
+                             />)<% } else{ %>(<<%= model.className %>UiGrid
+                                <%= plural.propertyName %>={items}
+                                page={pagination.page}
+                                totalRecords={pagination.total}
+                                onPageChange={pagination.setPage}
+                                limit={pagination.limit}
+                                setLimit={pagination.setLimit}
+                                setPage={pagination.setPage}
+                          />)<% } %> : (
         <UiInfo message="No <%= plural.propertyName %> found" />
       )}
     </UiPage>
diff --git a/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-avatar.tsx.template b/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-avatar.tsx.template
new file mode 100644
index 0000000..9f984db
--- /dev/null
+++ b/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-avatar.tsx.template
@@ -0,0 +1,10 @@
+import { <%= model.className %> } from '@pubkey-stack/sdk'
+import { UiAvatar, UiAvatarProps } from '@pubkey-stack/web-ui-core'
+
+export type <%= model.className %>UiAvatarProps = UiAvatarProps & {
+  <%= model.propertyName %>?: <%= model.className %>
+}
+
+export function <%= model.className %>UiAvatar({ <%= model.propertyName %>, ...props }: <%= model.className %>UiAvatarProps) {
+  return <UiAvatar avatarUrl={undefined} name={<%= model.propertyName %>?.<%= label.propertyName %>} {...props} />
+}
diff --git a/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-grid-item.tsx.template b/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-grid-item.tsx.template
new file mode 100644
index 0000000..85fb2b5
--- /dev/null
+++ b/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-grid-item.tsx.template
@@ -0,0 +1,15 @@
+import { Paper } from '@mantine/core'
+import type { <%= model.className %> } from '@pubkey-stack/sdk'
+import { UiDebugModal, UiGroup } from '@pubkey-ui/core'
+import { <%= model.className %>UiItem } from './<%= model.fileName %>-ui-item'
+
+export function <%= model.className %>UiGridItem({ <%= model.propertyName %>, to }: { <%= model.propertyName %>: <%= model.className %>; to?: string }) {
+  return (
+    <Paper withBorder p="md">
+      <UiGroup>
+        <<%= model.className %>UiItem <%= model.propertyName %>={<%= model.propertyName %>} to={to} />
+        <UiDebugModal data={<%= model.propertyName %>} />
+      </UiGroup>
+    </Paper>
+  )
+}
diff --git a/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-grid.tsx.template b/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-grid.tsx.template
new file mode 100644
index 0000000..80339c5
--- /dev/null
+++ b/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-grid.tsx.template
@@ -0,0 +1,42 @@
+import { Group, Pagination, SimpleGrid } from '@mantine/core'
+import type { <%= model.className %> } from '@pubkey-stack/sdk'
+import { gridLimits, UiPageLimit } from '@pubkey-stack/web-ui-core'
+import { UiDebugModal, UiGroup, UiStack } from '@pubkey-ui/core'
+import { DataTableProps } from 'mantine-datatable'
+import { <%= model.className %>UiGridItem } from './<%= model.propertyName %>-ui-grid-item'
+
+export function <%= model.className %>UiGrid({
+  <%= plural.propertyName %> = [],
+  onPageChange,
+  page,
+  totalRecords,
+  limit,
+  setLimit,
+  setPage,
+}: {
+  <%= plural.propertyName %>: <%= model.className %>[]
+  page: DataTableProps['page']
+  totalRecords: number
+  onPageChange: (page: number) => void
+  limit: number
+  setLimit: (limit: number) => void
+  setPage: (page: number) => void
+}) {
+  const totalPages = totalRecords / limit + 1
+  return (
+    <UiStack>
+      <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="md">
+        {<%= plural.propertyName %>.map((<%= model.propertyName %>) => (
+          <<%= model.className %>UiGridItem key={<%= model.propertyName %>.id} to={<%= model.propertyName %>.id} <%= model.propertyName %>={<%= model.propertyName %>} />
+        ))}
+      </SimpleGrid>
+      <UiGroup>
+        <Pagination disabled={totalPages < 2} total={totalPages} value={page} onChange={onPageChange} />
+        <Group>
+          <UiDebugModal data={<%= plural.propertyName %>} />
+          <UiPageLimit data={gridLimits} limit={limit} setLimit={setLimit} setPage={setPage} />
+        </Group>
+      </UiGroup>
+    </UiStack>
+  )
+}
diff --git a/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-item.tsx.template b/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-item.tsx.template
new file mode 100644
index 0000000..36e1c56
--- /dev/null
+++ b/libs/tools/src/lib/web-crud/files/ui/lib/__modelFileName__-ui-item.tsx.template
@@ -0,0 +1,33 @@
+import { AvatarProps, Group, type GroupProps, Stack, Text } from '@mantine/core'
+import { <%= model.className %> } from '@pubkey-stack/sdk'
+import { UiAnchor, type UiAnchorProps } from '@pubkey-ui/core'
+import { <%= model.className %>UiAvatar } from './<%= model.fileName %>-ui-avatar'
+
+export function <%= model.className %>UiItem({
+  anchorProps,
+  avatarProps,
+  groupProps,
+  <%= model.propertyName %>,
+  to,
+}: {
+  anchorProps?: UiAnchorProps
+  avatarProps?: Omit<AvatarProps, 'src'>
+  groupProps?: GroupProps
+  <%= model.propertyName %>?: <%= model.className %>
+  to?: string | null
+}) {
+  if (!<%= model.propertyName %>) return null
+
+  return (
+    <UiAnchor to={to ?? undefined} underline="never" {...anchorProps}>
+      <Group gap="sm" {...groupProps}>
+        <<%= model.className %>UiAvatar <%= model.propertyName %>={<%= model.propertyName %>} {...avatarProps} />
+        <Stack gap={1}>
+          <Text size="sm" fw={500}>
+            {<%= model.propertyName %>?.<%= label.propertyName %>}
+          </Text>
+        </Stack>
+      </Group>
+    </UiAnchor>
+  )
+}
diff --git a/libs/tools/src/lib/web-crud/generate-web-crud.ts b/libs/tools/src/lib/web-crud/generate-web-crud.ts
index ba2c298..134e29f 100644
--- a/libs/tools/src/lib/web-crud/generate-web-crud.ts
+++ b/libs/tools/src/lib/web-crud/generate-web-crud.ts
@@ -114,5 +114,9 @@ export function generateWebCrud(tree: Tree, options: NormalizedApiCrudSchema) {
     `./lib/${vars.actor.fileName}-${vars.model.fileName}-ui-create-form`,
     `./lib/${vars.actor.fileName}-${vars.model.fileName}-ui-table`,
     `./lib/${vars.actor.fileName}-${vars.model.fileName}-ui-update-form`,
+    `./lib/${vars.model.fileName}-ui-avatar`,
+    `./lib/${vars.model.fileName}-ui-grid`,
+    `./lib/${vars.model.fileName}-ui-grid-item`,
+    `./lib/${vars.model.fileName}-ui-item`,
   ])
 }
diff --git a/libs/web/settings/feature/src/lib/settings-feature.tsx b/libs/web/settings/feature/src/lib/settings-feature.tsx
index 5091fa2..3d3cc35 100644
--- a/libs/web/settings/feature/src/lib/settings-feature.tsx
+++ b/libs/web/settings/feature/src/lib/settings-feature.tsx
@@ -24,7 +24,7 @@ export default function SettingsFeature() {
           <UserUiProfile
             user={user}
             action={
-              <Button size="xs" variant="light" component={Link} to={`/profile`}>
+              <Button size="xs" variant="light" component={Link} to={user.profileUrl}>
                 View profile
               </Button>
             }
diff --git a/libs/web/shell/feature/src/lib/shell-user.routes.tsx b/libs/web/shell/feature/src/lib/shell-user.routes.tsx
index ba10968..cda9bd7 100644
--- a/libs/web/shell/feature/src/lib/shell-user.routes.tsx
+++ b/libs/web/shell/feature/src/lib/shell-user.routes.tsx
@@ -16,9 +16,9 @@ const links: UiDashboardItem[] = [
 const routes: RouteObject[] = [
   // Admin Dashboard Routes are added by the web-crud generator
   { path: '/dashboard', element: <DashboardFeature links={links} /> },
-  { path: '/profile/*', element: <UserFeature /> },
   { path: '/settings/*', element: <SettingsFeature /> },
   { path: '/solana/*', element: <SolanaFeature /> },
+  { path: '/u/*', element: <UserFeature /> },
 ]
 
 export default function ShellUserRoutes() {
diff --git a/libs/web/ui/core/src/lib/ui-header-profile.tsx b/libs/web/ui/core/src/lib/ui-header-profile.tsx
index 1dd1707..26e5add 100644
--- a/libs/web/ui/core/src/lib/ui-header-profile.tsx
+++ b/libs/web/ui/core/src/lib/ui-header-profile.tsx
@@ -12,7 +12,7 @@ export function UiHeaderProfile({ user, logout }: { user?: User | null; logout:
   const isAdmin = user?.role === UserRole.Admin
   const isDeveloper = user?.developer ?? false
 
-  return (
+  return user ? (
     <Menu
       width={260}
       position="bottom-end"
@@ -35,7 +35,7 @@ export function UiHeaderProfile({ user, logout }: { user?: User | null; logout:
         </Button>
       </Menu.Target>
       <Menu.Dropdown>
-        <Menu.Item component={Link} to="/profile" leftSection={<IconUser size="0.9rem" stroke={1.5} />}>
+        <Menu.Item component={Link} to={user.profileUrl} leftSection={<IconUser size="0.9rem" stroke={1.5} />}>
           View profile
         </Menu.Item>
         <Menu.Item component={Link} to="/settings" leftSection={<IconSettings size="0.9rem" stroke={1.5} />}>
@@ -71,5 +71,5 @@ export function UiHeaderProfile({ user, logout }: { user?: User | null; logout:
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>
-  )
+  ) : null
 }
diff --git a/libs/web/ui/core/src/lib/ui-page-limit.tsx b/libs/web/ui/core/src/lib/ui-page-limit.tsx
index 2845606..77b0482 100644
--- a/libs/web/ui/core/src/lib/ui-page-limit.tsx
+++ b/libs/web/ui/core/src/lib/ui-page-limit.tsx
@@ -1,16 +1,7 @@
 import { Select, SelectProps } from '@mantine/core'
 
 export function UiPageLimit({
-  data = [
-    { value: '5', label: '5' },
-    { value: '10', label: '10' },
-    { value: '20', label: '20' },
-    { value: '50', label: '50' },
-    { value: '100', label: '100' },
-    { value: '200', label: '200' },
-    { value: '500', label: '500' },
-    { value: '1000', label: '1000' },
-  ],
+  data = tableLimits,
   setPage,
   setLimit,
   limit,
@@ -32,3 +23,26 @@ export function UiPageLimit({
     />
   )
 }
+
+export const tableLimits = [
+  { value: '5', label: '5' },
+  { value: '10', label: '10' },
+  { value: '20', label: '20' },
+  { value: '50', label: '50' },
+  { value: '100', label: '100' },
+  { value: '200', label: '200' },
+  { value: '500', label: '500' },
+  { value: '1000', label: '1000' },
+]
+export const gridLimits = [
+  { value: '3', label: '3' },
+  { value: '6', label: '6' },
+  { value: '9', label: '9' },
+  { value: '12', label: '12' },
+  { value: '15', label: '15' },
+  { value: '18', label: '18' },
+  { value: '21', label: '21' },
+  { value: '24', label: '24' },
+  { value: '99', label: '99' },
+  { value: '999', label: '999' },
+]
diff --git a/libs/web/user/feature/src/index.ts b/libs/web/user/feature/src/index.ts
index 9118322..1680619 100644
--- a/libs/web/user/feature/src/index.ts
+++ b/libs/web/user/feature/src/index.ts
@@ -1,4 +1,4 @@
 import { lazy } from 'react'
 
-export const AdminUserFeature = lazy(() => import('./lib/admin-user-feature'))
-export const UserFeature = lazy(() => import('./lib/user-feature'))
+export const AdminUserFeature = lazy(() => import('./lib/admin-user.routes'))
+export const UserFeature = lazy(() => import('./lib/user-user.routes'))
diff --git a/libs/web/user/feature/src/lib/admin-user-feature.tsx b/libs/web/user/feature/src/lib/admin-user.routes.tsx
similarity index 91%
rename from libs/web/user/feature/src/lib/admin-user-feature.tsx
rename to libs/web/user/feature/src/lib/admin-user.routes.tsx
index e2703b3..34bcc04 100644
--- a/libs/web/user/feature/src/lib/admin-user-feature.tsx
+++ b/libs/web/user/feature/src/lib/admin-user.routes.tsx
@@ -3,7 +3,7 @@ import { AdminUserCreateFeature } from './admin-user-create-feature'
 import { AdminUserDetailFeature } from './admin-user-detail-feature'
 import { AdminUserListFeature } from './admin-user-list-feature'
 
-export default function AdminUserFeature() {
+export default function AdminUserRoutes() {
   return useRoutes([
     { path: '', element: <AdminUserListFeature /> },
     {
diff --git a/libs/web/user/feature/src/lib/user-feature.tsx b/libs/web/user/feature/src/lib/user-feature.tsx
deleted file mode 100644
index 9ede4f5..0000000
--- a/libs/web/user/feature/src/lib/user-feature.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useAuth } from '@pubkey-stack/web-auth-data-access'
-import { UiWarning } from '@pubkey-ui/core'
-import { Navigate, Route, Routes } from 'react-router-dom'
-import { UserDetailFeature } from './user-detail-feature'
-
-export default function UserFeature() {
-  const { user } = useAuth()
-
-  if (!user?.username) {
-    return <UiWarning message="User not found" />
-  }
-
-  return (
-    <Routes>
-      <Route index element={<Navigate to={user.username} replace />} />
-      <Route path=":username" element={<UserDetailFeature />} />
-    </Routes>
-  )
-}
diff --git a/libs/web/user/feature/src/lib/user-detail-feature.tsx b/libs/web/user/feature/src/lib/user-user-detail-feature.tsx
similarity index 98%
rename from libs/web/user/feature/src/lib/user-detail-feature.tsx
rename to libs/web/user/feature/src/lib/user-user-detail-feature.tsx
index d72c742..c77f3bd 100644
--- a/libs/web/user/feature/src/lib/user-detail-feature.tsx
+++ b/libs/web/user/feature/src/lib/user-user-detail-feature.tsx
@@ -10,7 +10,7 @@ import { UiCard, UiContainer, UiDebugModal, UiGroup, UiLoader, UiStack, UiWarnin
 import { IconMoodSmile } from '@tabler/icons-react'
 import { Link, useParams } from 'react-router-dom'
 
-export function UserDetailFeature() {
+export function UserUserDetailFeature() {
   const { user: authUser } = useAuth()
   const { username } = useParams<{ username: string }>() as { username: string }
   const { user, query } = useUserFineOneUser({ username })
diff --git a/libs/web/user/feature/src/lib/user-user-list-feature.tsx b/libs/web/user/feature/src/lib/user-user-list-feature.tsx
new file mode 100644
index 0000000..f794643
--- /dev/null
+++ b/libs/web/user/feature/src/lib/user-user-list-feature.tsx
@@ -0,0 +1,35 @@
+import { Group } from '@mantine/core'
+import { UiSearchField } from '@pubkey-stack/web-ui-core'
+import { useUserFindManyUser } from '@pubkey-stack/web-user-data-access'
+import { UserUiGrid } from '@pubkey-stack/web-user-ui'
+import { UiInfo, UiLoader, UiPage } from '@pubkey-ui/core'
+import { IconUserSearch } from '@tabler/icons-react'
+
+export function UserUserListFeature() {
+  const { items, pagination, query, setSearch } = useUserFindManyUser({
+    limit: 12,
+  })
+
+  return (
+    <UiPage title="Users">
+      <Group>
+        <UiSearchField size="lg" leftSection={<IconUserSearch />} placeholder="Search user" setSearch={setSearch} />
+      </Group>
+      {query.isLoading ? (
+        <UiLoader />
+      ) : items?.length ? (
+        <UserUiGrid
+          users={items}
+          page={pagination.page}
+          totalRecords={pagination.total}
+          onPageChange={pagination.setPage}
+          limit={pagination.limit}
+          setLimit={pagination.setLimit}
+          setPage={pagination.setPage}
+        />
+      ) : (
+        <UiInfo message="User not found" />
+      )}
+    </UiPage>
+  )
+}
diff --git a/libs/web/user/feature/src/lib/user-user.routes.tsx b/libs/web/user/feature/src/lib/user-user.routes.tsx
new file mode 100644
index 0000000..aa9f347
--- /dev/null
+++ b/libs/web/user/feature/src/lib/user-user.routes.tsx
@@ -0,0 +1,20 @@
+import { useAuth } from '@pubkey-stack/web-auth-data-access'
+import { UiWarning } from '@pubkey-ui/core'
+import { Route, Routes } from 'react-router-dom'
+import { UserUserDetailFeature } from './user-user-detail-feature'
+import { UserUserListFeature } from './user-user-list-feature'
+
+export default function UserUserRoutes() {
+  const { user } = useAuth()
+
+  if (!user?.username) {
+    return <UiWarning message="User not found" />
+  }
+
+  return (
+    <Routes>
+      <Route index element={<UserUserListFeature />} />
+      <Route path=":username" element={<UserUserDetailFeature />} />
+    </Routes>
+  )
+}
diff --git a/libs/web/user/ui/src/index.ts b/libs/web/user/ui/src/index.ts
index 804056d..6b0a251 100644
--- a/libs/web/user/ui/src/index.ts
+++ b/libs/web/user/ui/src/index.ts
@@ -9,4 +9,5 @@ export * from './lib/user-ui-role-badge'
 export * from './lib/user-ui-search'
 export * from './lib/user-ui-status-badge'
 export * from './lib/user-ui-item'
+export * from './lib/user-ui-grid'
 export * from './lib/user-ui-update-form'
diff --git a/libs/web/user/ui/src/lib/admin-user-ui-table.tsx b/libs/web/user/ui/src/lib/admin-user-ui-table.tsx
index 65eb107..0f0502d 100644
--- a/libs/web/user/ui/src/lib/admin-user-ui-table.tsx
+++ b/libs/web/user/ui/src/lib/admin-user-ui-table.tsx
@@ -69,7 +69,7 @@ export function AdminUserUiTable({
             textAlign: 'right',
             render: (item) => (
               <Group gap="xs" justify="right">
-                <ActionIcon size="sm" variant="light" color="brand" component={Link} to={`/profile/${item.username}`}>
+                <ActionIcon size="sm" variant="light" color="brand" component={Link} to={item.profileUrl}>
                   <IconUser size={16} />
                 </ActionIcon>
                 <ActionIcon
diff --git a/libs/web/user/ui/src/lib/user-ui-grid-item.tsx b/libs/web/user/ui/src/lib/user-ui-grid-item.tsx
new file mode 100644
index 0000000..c9a9485
--- /dev/null
+++ b/libs/web/user/ui/src/lib/user-ui-grid-item.tsx
@@ -0,0 +1,15 @@
+import { Paper } from '@mantine/core'
+import type { User } from '@pubkey-stack/sdk'
+import { UiDebugModal, UiGroup } from '@pubkey-ui/core'
+import { UserUiItem } from './user-ui-item'
+
+export function UserUiGridItem({ user, to }: { user: User; to?: string }) {
+  return (
+    <Paper withBorder p="md">
+      <UiGroup>
+        <UserUiItem user={user} to={to} />
+        <UiDebugModal data={user} />
+      </UiGroup>
+    </Paper>
+  )
+}
diff --git a/libs/web/user/ui/src/lib/user-ui-grid.tsx b/libs/web/user/ui/src/lib/user-ui-grid.tsx
new file mode 100644
index 0000000..85b9875
--- /dev/null
+++ b/libs/web/user/ui/src/lib/user-ui-grid.tsx
@@ -0,0 +1,42 @@
+import { Group, Pagination, SimpleGrid } from '@mantine/core'
+import type { User } from '@pubkey-stack/sdk'
+import { gridLimits, UiPageLimit } from '@pubkey-stack/web-ui-core'
+import { UiDebugModal, UiGroup, UiStack } from '@pubkey-ui/core'
+import { DataTableProps } from 'mantine-datatable'
+import { UserUiGridItem } from './user-ui-grid-item'
+
+export function UserUiGrid({
+  users = [],
+  onPageChange,
+  page,
+  totalRecords,
+  limit,
+  setLimit,
+  setPage,
+}: {
+  users: User[]
+  page: DataTableProps['page']
+  totalRecords: number
+  onPageChange: (page: number) => void
+  limit: number
+  setLimit: (limit: number) => void
+  setPage: (page: number) => void
+}) {
+  const totalPages = totalRecords / limit + 1
+  return (
+    <UiStack>
+      <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="md">
+        {users.map((user) => (
+          <UserUiGridItem key={user.id} to={user.profileUrl} user={user} />
+        ))}
+      </SimpleGrid>
+      <UiGroup>
+        <Pagination disabled={totalPages < 2} total={totalPages} value={page} onChange={onPageChange} />
+        <Group>
+          <UiDebugModal data={users} />
+          <UiPageLimit data={gridLimits} limit={limit} setLimit={setLimit} setPage={setPage} />
+        </Group>
+      </UiGroup>
+    </UiStack>
+  )
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2504827..cd5c79f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -195,7 +195,7 @@ dependencies:
     specifier: 6.21.1
     version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
   reflect-metadata:
-    specifier: ^0.1.12
+    specifier: ^0.1.13
     version: 0.1.14
   rxjs:
     specifier: ^7.8.1