diff --git a/src/pages/manage/users/create.tsx b/src/pages/manage/users/create.tsx
new file mode 100644
index 000000000..fda4a858a
--- /dev/null
+++ b/src/pages/manage/users/create.tsx
@@ -0,0 +1,52 @@
+import { Stepper } from '@mantine/core';
+import { IconMailCheck, IconUser } from '@tabler/icons-react';
+import Head from 'next/head';
+import { useState } from 'react';
+import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+
+const CreateNewUserPage = () => {
+ const [active, setActive] = useState(1);
+ const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
+ const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+
+ return (
+
+
+ Create user • Homarr
+
+
+
+ }
+ label="First step"
+ description="Create an account"
+ >
+ Step 1 content: Create an account
+
+ }
+ label="Second step"
+ description="Verify email"
+ >
+ Step 2 content: Verify email
+
+ }
+ label="Final step"
+ description="Get full access"
+ >
+ Step 3 content: Get full access
+
+ Completed, click back button to get to previous step
+
+
+ );
+};
+
+export default CreateNewUserPage;
diff --git a/src/pages/manage/users/index.tsx b/src/pages/manage/users/index.tsx
index 4ee488c76..38cb1976a 100644
--- a/src/pages/manage/users/index.tsx
+++ b/src/pages/manage/users/index.tsx
@@ -13,6 +13,7 @@ import {
} from '@mantine/core';
import { IconPlus, IconTrash } from '@tabler/icons-react';
import Head from 'next/head';
+import Link from 'next/link';
import { useState } from 'react';
import { MainLayout } from '~/components/layout/admin/main-admin.layout';
import { api } from '~/utils/api';
@@ -34,6 +35,7 @@ const ManageUsersPage = () => {
Users • Homarr
+
Manage users
@@ -49,7 +51,12 @@ const ManageUsersPage = () => {
data={['React', 'Angular', 'Svelte', 'Vue']}
variant="filled"
/>
- } variant="default">
+ }
+ href="/manage/users/create"
+ variant="default"
+ >
Create