diff --git a/apps/design-system/src/pages/view-preview/view-preview.tsx b/apps/design-system/src/pages/view-preview/view-preview.tsx
index 6a87886f1..53fecad03 100644
--- a/apps/design-system/src/pages/view-preview/view-preview.tsx
+++ b/apps/design-system/src/pages/view-preview/view-preview.tsx
@@ -41,6 +41,7 @@ import { RepoWebhooksList } from '@subjects/views/repo-webhooks-list/repo-webhoo
 import { SignInView } from '@subjects/views/signin'
 import { SignUpView } from '@subjects/views/signup'
 import { SpaceSettingsMembers } from '@subjects/views/space-settings-members/space-settings-members'
+import UserManagementWrapper from '@subjects/views/user-management/user-management'
 import { useTranslationStore } from '@utils/viewUtils'
 
 import { ChatEmptyPreviewWrapper, ChatPreviewWrapper } from '@harnessio/ui/components'
@@ -286,6 +287,11 @@ export const viewPreviews: Record<string, ReactNode> = {
     <RootViewWrapper>
       <ExecutionGraphViewWrapper />
     </RootViewWrapper>
+  ),
+  'user-management': (
+    <RootViewWrapper>
+      <UserManagementWrapper />
+    </RootViewWrapper>
   )
 }
 
diff --git a/apps/design-system/src/subjects/views/user-management/user-management.tsx b/apps/design-system/src/subjects/views/user-management/user-management.tsx
new file mode 100644
index 000000000..9a05b7162
--- /dev/null
+++ b/apps/design-system/src/subjects/views/user-management/user-management.tsx
@@ -0,0 +1,62 @@
+import { FC } from 'react'
+
+import { noop, useTranslationStore } from '@utils/viewUtils'
+
+import { IUserManagementPageProps, UserManagementPage } from '@harnessio/ui/views'
+
+const UserManagementWrapper: FC<Partial<IUserManagementPageProps>> = () => {
+  const user = {
+    uid: 'user-1',
+    email: 'user-1@example.com',
+    display_name: 'User 1',
+    admin: true,
+    blocked: false
+  }
+
+  const useAdminListUsersStore = () => ({
+    users: [user],
+    totalPages: 1,
+    page: 1,
+    password: null,
+    user: user,
+    generatePassword: false,
+    setPage: noop,
+    setUser: noop,
+    setUsers: noop,
+    setTotalPages: noop,
+    setPassword: noop,
+    setGeteneratePassword: noop
+  })
+
+  return (
+    <UserManagementPage
+      useAdminListUsersStore={useAdminListUsersStore}
+      useTranslationStore={useTranslationStore}
+      handlers={{
+        handleUpdateUser: async () => {},
+        handleDeleteUser: async () => {},
+        handleUpdateUserAdmin: async () => {},
+        handleUpdatePassword: async () => {},
+        handleCreateUser: async () => {}
+      }}
+      loadingStates={{
+        isFetchingUsers: false,
+        isUpdatingUser: false,
+        isDeletingUser: false,
+        isUpdatingUserAdmin: false,
+        isCreatingUser: false
+      }}
+      errorStates={{
+        fetchUsersError: '',
+        updateUserError: '',
+        deleteUserError: '',
+        updateUserAdminError: '',
+        createUserError: ''
+      }}
+      searchQuery={''}
+      setSearchQuery={noop}
+    />
+  )
+}
+
+export default UserManagementWrapper