diff --git a/apps/app/src/pages/admin/management.tsx b/apps/app/src/pages/admin/management.tsx
new file mode 100644
index 0000000000..41b2a46cba
--- /dev/null
+++ b/apps/app/src/pages/admin/management.tsx
@@ -0,0 +1,13 @@
+import { ManagementTable } from '@weareinreach/ui/components/data-portal/ManagementTable'
+import { userManagement } from '@weareinreach/ui/mockData/userManagement'
+
+export const Management = () => {
+	return (
+		<ManagementTable
+			data={userManagement.forUserManagementTable()}
+			columns={userManagement.forUserManagementColumns()}
+		></ManagementTable>
+	)
+}
+
+export default Management
diff --git a/apps/app/src/types/nextjs-routes.d.ts b/apps/app/src/types/nextjs-routes.d.ts
index 8ff841f0fb..2a9faebf7e 100644
--- a/apps/app/src/types/nextjs-routes.d.ts
+++ b/apps/app/src/types/nextjs-routes.d.ts
@@ -19,6 +19,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/account/reviews">
     | StaticRoute<"/account/saved">
     | StaticRoute<"/admin">
+    | StaticRoute<"/admin/management">
     | StaticRoute<"/admin/quicklink/email">
     | StaticRoute<"/admin/quicklink">
     | StaticRoute<"/admin/quicklink/phone">
diff --git a/packages/ui/components/data-portal/ManagementTable.stories.tsx b/packages/ui/components/data-portal/ManagementTable.stories.tsx
index 6b098d1f67..7880c4a27b 100644
--- a/packages/ui/components/data-portal/ManagementTable.stories.tsx
+++ b/packages/ui/components/data-portal/ManagementTable.stories.tsx
@@ -9,6 +9,7 @@ export default {
 	component: ManagementTable,
 	args: {
 		data: userManagement.forUserManagementTable(),
+		columns: userManagement.forUserManagementColumns(),
 	},
 } satisfies Meta<typeof ManagementTable>
 
diff --git a/packages/ui/components/data-portal/ManagementTable.tsx b/packages/ui/components/data-portal/ManagementTable.tsx
index 9fed49242d..04cb41b33e 100644
--- a/packages/ui/components/data-portal/ManagementTable.tsx
+++ b/packages/ui/components/data-portal/ManagementTable.tsx
@@ -1,7 +1,6 @@
-import { Button, Group, NativeSelect, Stack } from '@mantine/core'
+import { Button, Group, NativeSelect, Stack, Text } from '@mantine/core'
 import {
 	MantineReactTable,
-	type MRT_ColumnDef,
 	MRT_GlobalFilterTextInput,
 	type MRT_Icons,
 	MRT_TablePagination,
@@ -10,57 +9,32 @@ import {
 
 import { Icon } from '~ui/icon'
 
-type Person = {
-	name: string
-	email: string
-	appUserType: string
-	role: string
-	updatedAt: string
-	createdAt: string
-}
-
 type ManagementTableProps = {
-	data: Person[]
+	data: Array<object>
+	columns: Array<object>
 }
 
-const columns: MRT_ColumnDef<Person>[] = [
-	{
-		accessorKey: 'name',
-		header: 'Name',
-	},
-	{
-		accessorKey: 'email',
-		header: 'Email',
-	},
-	{
-		accessorKey: 'appUserType',
-		header: 'App User Type',
-	},
-	{ accessorKey: 'role', header: 'Back-end user type' },
-	{
-		accessorKey: 'updatedAt',
-		header: 'Last updated',
-	},
-	{
-		accessorKey: 'createdAt',
-		header: 'Created At',
-	},
-]
+const useColumns = (props: ManagementTableProps) => {
+	return props.columns
+}
 
+//I'll eventually want to pass in props as the documentation recommends it. -Christina
 const customIcons: Partial<MRT_Icons> = {
-	//TODO: Fill in icons
+	IconSortAscending: () => <Icon icon={'carbon:chevron-up'} color='black' />,
+	IconSortDescending: () => <Icon icon={'carbon:chevron-down'} color='black' />,
 }
 
 export const ManagementTable = (props: ManagementTableProps) => {
-	const table = useMantineReactTable<Person>({
-		columns,
+	const table = useMantineReactTable({
+		columns: useColumns(props),
 		data: props.data,
+		icons: customIcons,
 		enableGlobalFilter: true,
 		enableFilterMatchHighlighting: false,
 		positionGlobalFilter: 'left',
 		enableRowSelection: true,
 		mantineSearchTextInputProps: {
-			placeholder: 'Enter Name', //label?
+			placeholder: 'Enter Name',
 			sx: { minWidth: '734px', height: '48px' },
 		},
 		initialState: {
@@ -80,6 +54,9 @@ export const ManagementTable = (props: ManagementTableProps) => {
 
 	return (
 		<Stack>
+			<Text size='16px' fw={500} style={{ marginBottom: '-1rem' }}>
+				Total: {props.data.length}
+			</Text>
 			<Group
 				noWrap={true}
 				position='left'
@@ -92,7 +69,6 @@ export const ManagementTable = (props: ManagementTableProps) => {
 				<NativeSelect
 					rightSection={<Icon icon='carbon:chevron-down' />}
 					data={['Data Entry Teams']}
-					size='xs'
 					styles={{
 						root: {
 							width: '208px',
@@ -109,7 +85,7 @@ export const ManagementTable = (props: ManagementTableProps) => {
 							width: '48px',
 							height: '48px',
 							padding: '12px',
-							marginTop: '28px',
+							marginTop: '10px',
 						},
 						label: { color: 'black' },
 					}}
diff --git a/packages/ui/mockData/userManagement.ts b/packages/ui/mockData/userManagement.ts
index 2bd692bfa5..9cbef3ed50 100644
--- a/packages/ui/mockData/userManagement.ts
+++ b/packages/ui/mockData/userManagement.ts
@@ -1,31 +1,50 @@
 import { faker } from '@faker-js/faker'
 
-type Person = {
-	name: string
-	email: string
-	appUserType: string
-	role: string
-	updatedAt: string
-	createdAt: string
-}
-
 export const userManagement = {
+	forUserManagementColumns: () => {
+		return [
+			{
+				accessorKey: 'name',
+				header: 'Name',
+			},
+			{
+				accessorKey: 'email',
+				header: 'Email',
+			},
+			{
+				accessorKey: 'appUserType',
+				header: 'App User Type',
+			},
+			{ accessorKey: 'role', header: 'Back-end user type' },
+			{
+				accessorKey: 'updatedAt',
+				header: 'Last updated',
+			},
+			{
+				accessorKey: 'createdAt',
+				header: 'Created At',
+			},
+		]
+	},
 	forUserManagementTable: () => {
 		const totalRecords = 1000
 		faker.seed(1024)
-		const data: Person[] = []
+		const data = []
 
 		for (let index = 0; index < totalRecords; index++) {
 			const name = faker.person.fullName()
 			const email = `${name.split(' ')[1]}@gmail.com`.toLowerCase()
+			const updatedAt = Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(faker.date.past())
 
 			data.push({
 				name: name,
 				email: email,
 				appUserType: faker.person.jobTitle(),
 				role: faker.person.jobType(),
-				updatedAt: Intl.DateTimeFormat('en-US').format(faker.date.past()),
-				createdAt: Intl.DateTimeFormat('en-US').format(faker.date.past()), //make this make sense logically
+				updatedAt: updatedAt,
+				createdAt: Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(
+					faker.date.past({ refDate: updatedAt })
+				),
 			})
 		}
 		return data