From abc6ae94e5e806278b9d8836162e7f45c4e3d766 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Fri, 19 Dec 2025 10:44:39 -0600
Subject: [PATCH] Enhancement: Update SuperuserForm to include logo, version
 info, and improved layout

---
 CHANGELOG.md                                  |  1 +
 .../src/components/forms/SuperuserForm.jsx    | 67 ++++++++++++++++---
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0109277c..a42843db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Initial super user creation page now matches the login page design with logo, welcome message, divider, and version display for a more consistent and polished first-time setup experience
 - Removed unreachable code path in m3u output - Thanks [@DawtCom](https://github.com/DawtCom)
 - GitHub Actions workflows now use `docker/metadata-action` for cleaner and more maintainable OCI-compliant image label generation across all build pipelines (ci.yml, base-image.yml, release.yml). Labels are applied to both platform-specific images and multi-arch manifests with proper annotation formatting. - Thanks [@mrdynamo]https://github.com/mrdynamo) (Closes #724)
 - Update docker/dev-build.sh to support private registries, multiple architectures and pushing. Now you can do things like `dev-build.sh  -p -r my.private.registry -a linux/arm64,linux/amd64` - Thanks [@jdblack](https://github.com/jblack)
diff --git a/frontend/src/components/forms/SuperuserForm.jsx b/frontend/src/components/forms/SuperuserForm.jsx
index fbcf0eaa..ca8c81fc 100644
--- a/frontend/src/components/forms/SuperuserForm.jsx
+++ b/frontend/src/components/forms/SuperuserForm.jsx
@@ -1,8 +1,19 @@
 // frontend/src/components/forms/SuperuserForm.js
-import React, { useState } from 'react';
-import { TextInput, Center, Button, Paper, Title, Stack } from '@mantine/core';
+import React, { useState, useEffect } from 'react';
+import {
+  TextInput,
+  Center,
+  Button,
+  Paper,
+  Title,
+  Stack,
+  Text,
+  Image,
+  Divider,
+} from '@mantine/core';
 import API from '../../api';
 import useAuthStore from '../../store/auth';
+import logo from '../../assets/logo.png';
 
 function SuperuserForm() {
   const [formData, setFormData] = useState({
@@ -11,8 +22,16 @@ function SuperuserForm() {
     email: '',
   });
   const [error, setError] = useState('');
+  const [version, setVersion] = useState(null);
   const setSuperuserExists = useAuthStore((s) => s.setSuperuserExists);
 
+  useEffect(() => {
+    // Fetch version info
+    API.getVersion().then((data) => {
+      setVersion(data?.version);
+    });
+  }, []);
+
   const handleChange = (e) => {
     setFormData((prev) => ({
       ...prev,
@@ -46,11 +65,29 @@ function SuperuserForm() {
     >
       <Paper
         elevation={3}
-        style={{ padding: 30, width: '100%', maxWidth: 400 }}
+        style={{
+          padding: 30,
+          width: '100%',
+          maxWidth: 500,
+          position: 'relative',
+        }}
       >
-        <Title order={4} align="center">
-          Create your Super User Account
-        </Title>
+        <Stack align="center" spacing="lg">
+          <Image
+            src={logo}
+            alt="Dispatcharr Logo"
+            width={120}
+            height={120}
+            fit="contain"
+          />
+          <Title order={2} align="center">
+            Dispatcharr
+          </Title>
+          <Text size="sm" color="dimmed" align="center">
+            Welcome! Create your Super User Account to get started.
+          </Text>
+          <Divider style={{ width: '100%' }} />
+        </Stack>
         <form onSubmit={handleSubmit}>
           <Stack>
             <TextInput
@@ -77,11 +114,25 @@ function SuperuserForm() {
               onChange={handleChange}
             />
 
-            <Button type="submit" size="sm" sx={{ pt: 1 }}>
-              Submit
+            <Button type="submit" fullWidth>
+              Create Account
             </Button>
           </Stack>
         </form>
+
+        {version && (
+          <Text
+            size="xs"
+            color="dimmed"
+            style={{
+              position: 'absolute',
+              bottom: 6,
+              right: 30,
+            }}
+          >
+            v{version}
+          </Text>
+        )}
       </Paper>
     </Center>
   );