diff --git a/src/pages/superadmin/CreateTenantWizard.tsx b/src/pages/superadmin/CreateTenantWizard.tsx
index 8c9375c..4820b41 100644
--- a/src/pages/superadmin/CreateTenantWizard.tsx
+++ b/src/pages/superadmin/CreateTenantWizard.tsx
@@ -1,76 +1,98 @@
-import { useState, useEffect, useRef } from 'react';
-import type { ReactElement } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { Layout } from '@/components/layout/Layout';
-import { FormField, FormSelect, PrimaryButton, SecondaryButton, MultiselectPaginatedSelect, AuthenticatedImage } from '@/components/shared';
-import { tenantService } from '@/services/tenant-service';
-import { moduleService } from '@/services/module-service';
-import { fileService } from '@/services/file-service';
-import { showToast } from '@/utils/toast';
-import { ChevronRight, ChevronLeft, Image as ImageIcon, X } from 'lucide-react';
+import { useState, useEffect, useRef } from "react";
+import type { ReactElement } from "react";
+import { useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Layout } from "@/components/layout/Layout";
+import {
+  FormField,
+  FormSelect,
+  PrimaryButton,
+  SecondaryButton,
+  MultiselectPaginatedSelect,
+  AuthenticatedImage,
+} from "@/components/shared";
+import { tenantService } from "@/services/tenant-service";
+import { moduleService } from "@/services/module-service";
+import { fileService } from "@/services/file-service";
+import { showToast } from "@/utils/toast";
+import { ChevronRight, ChevronLeft, Image as ImageIcon, X } from "lucide-react";
 
 // Step 1: Tenant Details Schema - matches NewTenantModal
 const tenantDetailsSchema = z.object({
   name: z
     .string()
-    .min(1, 'name is required')
-    .min(3, 'name must be at least 3 characters')
-    .max(100, 'name must be at most 100 characters'),
+    .min(1, "name is required")
+    .min(3, "name must be at least 3 characters")
+    .max(100, "name must be at most 100 characters"),
   slug: z
     .string()
-    .min(1, 'slug is required')
-    .min(3, 'slug must be at least 3 characters')
-    .max(100, 'slug must be at most 100 characters')
-    .regex(/^[a-z0-9-]+$/, 'slug format is invalid'),
+    .min(1, "slug is required")
+    .min(3, "slug must be at least 3 characters")
+    .max(100, "slug must be at most 100 characters")
+    .regex(/^[a-z0-9-]+$/, "slug format is invalid"),
   domain: z.string().optional().nullable(),
-  status: z.enum(['active', 'suspended', 'deleted'], {
-    message: 'Status is required',
+  status: z.enum(["active", "suspended", "deleted"], {
+    message: "Status is required",
   }),
-  subscription_tier: z.enum(['basic', 'professional', 'enterprise'], {
-    message: 'Invalid subscription tier',
-  }).optional().nullable(),
-  max_users: z.number().int().min(1, 'max_users must be at least 1').optional().nullable(),
-  max_modules: z.number().int().min(1, 'max_modules must be at least 1').optional().nullable(),
+  subscription_tier: z
+    .enum(["basic", "professional", "enterprise"], {
+      message: "Invalid subscription tier",
+    })
+    .optional()
+    .nullable(),
+  max_users: z
+    .number()
+    .int()
+    .min(1, "max_users must be at least 1")
+    .optional()
+    .nullable(),
+  max_modules: z
+    .number()
+    .int()
+    .min(1, "max_modules must be at least 1")
+    .optional()
+    .nullable(),
   modules: z.array(z.uuid()).optional().nullable(),
 });
 
 // Step 2: Contact Details Schema - user creation + organization address
 const contactDetailsSchema = z
   .object({
-    email: z
-      .email({ message: 'Please enter a valid email address' }),
-    password: z.string().min(1, 'Password is required').min(6, 'Password must be at least 6 characters'),
-    confirmPassword: z.string().min(1, 'Confirm password is required'),
-    first_name: z.string().min(1, 'First name is required'),
-    last_name: z.string().min(1, 'Last name is required'),
+    email: z.email({ message: "Please enter a valid email address" }),
+    password: z
+      .string()
+      .min(1, "Password is required")
+      .min(6, "Password must be at least 6 characters"),
+    confirmPassword: z.string().min(1, "Confirm password is required"),
+    first_name: z.string().min(1, "First name is required"),
+    last_name: z.string().min(1, "Last name is required"),
     contact_phone: z
       .string()
       .optional()
       .nullable()
       .refine(
         (val) => {
-          if (!val || val.trim() === '') return true; // Optional field, empty is valid
+          if (!val || val.trim() === "") return true; // Optional field, empty is valid
           return /^\d{10}$/.test(val);
         },
         {
-          message: 'Phone number must be exactly 10 digits',
-        }
+          message: "Phone number must be exactly 10 digits",
+        },
       ),
-    address_line1: z.string().min(1, 'Address is required'),
+    address_line1: z.string().min(1, "Address is required"),
     address_line2: z.string().optional().nullable(),
-    city: z.string().min(1, 'City is required'),
-    state: z.string().min(1, 'State is required'),
+    city: z.string().min(1, "City is required"),
+    state: z.string().min(1, "State is required"),
     postal_code: z
       .string()
-      .regex(/^[1-9]\d{5}$/, 'Postal code must be a valid 6-digit PIN code'),
-    country: z.string().min(1, 'Country is required'),
+      .regex(/^[1-9]\d{5}$/, "Postal code must be a valid 6-digit PIN code"),
+    country: z.string().min(1, "Country is required"),
   })
   .refine((data) => data.password === data.confirmPassword, {
     message: "Passwords don't match",
-    path: ['confirmPassword'],
+    path: ["confirmPassword"],
   });
 
 // Step 3: Settings Schema
@@ -87,20 +109,20 @@ type ContactDetailsForm = z.infer<typeof contactDetailsSchema>;
 type SettingsForm = z.infer<typeof settingsSchema>;
 
 const statusOptions = [
-  { value: 'active', label: 'Active' },
-  { value: 'suspended', label: 'Suspended' },
-  { value: 'deleted', label: 'Deleted' },
+  { value: "active", label: "Active" },
+  { value: "suspended", label: "Suspended" },
+  { value: "deleted", label: "Deleted" },
 ];
 
 const subscriptionTierOptions = [
-  { value: 'basic', label: 'Basic' },
-  { value: 'professional', label: 'Professional' },
-  { value: 'enterprise', label: 'Enterprise' },
+  { value: "basic", label: "Basic" },
+  { value: "professional", label: "Professional" },
+  { value: "enterprise", label: "Enterprise" },
 ];
 
 // Helper function to get base URL with protocol
 const getBaseUrlWithProtocol = (): string => {
-  return import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
+  return import.meta.env.VITE_API_BASE_URL || "http://localhost:3000";
 };
 
 const CreateTenantWizard = (): ReactElement => {
@@ -109,18 +131,20 @@ const CreateTenantWizard = (): ReactElement => {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
   const [selectedModules, setSelectedModules] = useState<string[]>([]);
-  const [initialModuleOptions, setInitialModuleOptions] = useState<Array<{ value: string; label: string }>>([]);
+  const [initialModuleOptions, setInitialModuleOptions] = useState<
+    Array<{ value: string; label: string }>
+  >([]);
 
   // Form instances for each step
   const tenantDetailsForm = useForm<TenantDetailsForm>({
     resolver: zodResolver(tenantDetailsSchema),
-    mode: 'onChange',
-    reValidateMode: 'onChange',
+    mode: "onChange",
+    reValidateMode: "onChange",
     defaultValues: {
-      name: '',
-      slug: '',
-      domain: '',
-      status: 'active',
+      name: "",
+      slug: "",
+      domain: "",
+      status: "active",
       subscription_tier: null,
       max_users: null,
       max_modules: null,
@@ -142,66 +166,70 @@ const CreateTenantWizard = (): ReactElement => {
 
   const contactDetailsForm = useForm<ContactDetailsForm>({
     resolver: zodResolver(contactDetailsSchema),
-    mode: 'onChange',
-    reValidateMode: 'onChange',
+    mode: "onChange",
+    reValidateMode: "onChange",
     defaultValues: {
-      email: '',
-      password: '',
-      confirmPassword: '',
-      first_name: '',
-      last_name: '',
-      contact_phone: '',
-      address_line1: '',
-      address_line2: '',
-      city: '',
-      state: '',
-      postal_code: '',
-      country: '',
+      email: "",
+      password: "",
+      confirmPassword: "",
+      first_name: "",
+      last_name: "",
+      contact_phone: "",
+      address_line1: "",
+      address_line2: "",
+      city: "",
+      state: "",
+      postal_code: "",
+      country: "",
     },
   });
 
   const settingsForm = useForm<SettingsForm>({
     resolver: zodResolver(settingsSchema),
-    mode: 'onChange',
-    reValidateMode: 'onChange',
+    mode: "onChange",
+    reValidateMode: "onChange",
     defaultValues: {
       enable_sso: false,
       enable_2fa: false,
-      primary_color: '#112868',
-      secondary_color: '#23DCE1',
-      accent_color: '#084CC8',
+      primary_color: "#112868",
+      secondary_color: "#23DCE1",
+      accent_color: "#084CC8",
     },
   });
 
   // File upload state for branding
   const [logoFile, setLogoFile] = useState<File | null>(null);
   const [faviconFile, setFaviconFile] = useState<File | null>(null);
-  const [logoFileAttachmentUuid, setLogoFileAttachmentUuid] = useState<string | null>(null);
-  const [faviconFileAttachmentUuid, setFaviconFileAttachmentUuid] = useState<string | null>(null);
+  const [logoFileAttachmentUuid, setLogoFileAttachmentUuid] = useState<
+    string | null
+  >(null);
+  const [faviconFileAttachmentUuid, setFaviconFileAttachmentUuid] = useState<
+    string | null
+  >(null);
   const [logoFileUrl, setLogoFileUrl] = useState<string | null>(null);
   const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
   const [faviconFileUrl, setFaviconFileUrl] = useState<string | null>(null);
-  const [faviconPreviewUrl, setFaviconPreviewUrl] = useState<string | null>(null);
+  const [faviconPreviewUrl, setFaviconPreviewUrl] = useState<string | null>(
+    null,
+  );
   const [isUploadingLogo, setIsUploadingLogo] = useState<boolean>(false);
   const [isUploadingFavicon, setIsUploadingFavicon] = useState<boolean>(false);
   const [logoError, setLogoError] = useState<string | null>(null);
   const [faviconError, setFaviconError] = useState<string | null>(null);
-  const [wizardId] = useState(() => crypto.randomUUID());
-
 
   // Auto-generate slug and domain from name
-  const nameValue = tenantDetailsForm.watch('name');
+  const nameValue = tenantDetailsForm.watch("name");
   const baseUrlWithProtocol = getBaseUrlWithProtocol();
-  const previousNameRef = useRef<string>('');
+  const previousNameRef = useRef<string>("");
 
   useEffect(() => {
     if (nameValue) {
       const slug = nameValue
         .toLowerCase()
         .trim()
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '');
-      tenantDetailsForm.setValue('slug', slug, { shouldValidate: true });
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+      tenantDetailsForm.setValue("slug", slug, { shouldValidate: true });
 
       // Auto-generate domain when tenant name changes (like slug)
       // Format: http://tenant-slug.localhost:5173/tenant
@@ -212,18 +240,22 @@ const CreateTenantWizard = (): ReactElement => {
           const host = baseUrlObj.host; // e.g., "localhost:5173"
           const protocol = baseUrlObj.protocol; // e.g., "http:" or "https:"
           const autoGeneratedDomain = `${protocol}//${slug}.${host}/tenant`;
-          tenantDetailsForm.setValue('domain', autoGeneratedDomain, { shouldValidate: false });
+          tenantDetailsForm.setValue("domain", autoGeneratedDomain, {
+            shouldValidate: false,
+          });
         } catch {
           // Fallback if URL parsing fails
-          const autoGeneratedDomain = `${baseUrlWithProtocol.replace(/\/$/, '')}/${slug}/tenant`;
-          tenantDetailsForm.setValue('domain', autoGeneratedDomain, { shouldValidate: false });
+          const autoGeneratedDomain = `${baseUrlWithProtocol.replace(/\/$/, "")}/${slug}/tenant`;
+          tenantDetailsForm.setValue("domain", autoGeneratedDomain, {
+            shouldValidate: false,
+          });
         }
         previousNameRef.current = nameValue;
       }
     } else if (!nameValue && previousNameRef.current) {
       // Clear domain when name is cleared
-      tenantDetailsForm.setValue('domain', '', { shouldValidate: false });
-      previousNameRef.current = '';
+      tenantDetailsForm.setValue("domain", "", { shouldValidate: false });
+      previousNameRef.current = "";
     }
   }, [nameValue, tenantDetailsForm, baseUrlWithProtocol]);
 
@@ -232,27 +264,32 @@ const CreateTenantWizard = (): ReactElement => {
       const isValid = await tenantDetailsForm.trigger();
       if (isValid) {
         // Store selected modules and their options for restoration when going back
-        const modules = tenantDetailsForm.getValues('modules') || [];
+        const modules = tenantDetailsForm.getValues("modules") || [];
         if (modules.length > 0 && initialModuleOptions.length === 0) {
           // Load module names for selected modules
           try {
-            const moduleOptionsPromises = modules.map(async (moduleId: string) => {
-              try {
-                const moduleResponse = await moduleService.getById(moduleId);
-                return {
-                  value: moduleId,
-                  label: moduleResponse.data.name,
-                };
-              } catch {
-                return null;
-              }
-            });
-            const moduleOptions = (await Promise.all(moduleOptionsPromises)).filter(
-              (opt) => opt !== null
-            ) as Array<{ value: string; label: string }>;
+            const moduleOptionsPromises = modules.map(
+              async (moduleId: string) => {
+                try {
+                  const moduleResponse = await moduleService.getById(moduleId);
+                  return {
+                    value: moduleId,
+                    label: moduleResponse.data.name,
+                  };
+                } catch {
+                  return null;
+                }
+              },
+            );
+            const moduleOptions = (
+              await Promise.all(moduleOptionsPromises)
+            ).filter((opt) => opt !== null) as Array<{
+              value: string;
+              label: string;
+            }>;
             setInitialModuleOptions(moduleOptions);
           } catch (err) {
-            console.warn('Failed to load module names:', err);
+            console.warn("Failed to load module names:", err);
           }
         }
         setCurrentStep(2);
@@ -269,30 +306,36 @@ const CreateTenantWizard = (): ReactElement => {
     if (currentStep > 1) {
       // When going back to step 1, restore selected modules and their options
       if (currentStep === 2) {
-        const modules = tenantDetailsForm.getValues('modules') || [];
+        const modules = tenantDetailsForm.getValues("modules") || [];
         setSelectedModules(modules);
         // Restore initial module options if we have selected modules
         if (modules.length > 0 && initialModuleOptions.length === 0) {
           // Load module names for selected modules
           const loadModuleOptions = async () => {
             try {
-              const moduleOptionsPromises = modules.map(async (moduleId: string) => {
-                try {
-                  const moduleResponse = await moduleService.getById(moduleId);
-                  return {
-                    value: moduleId,
-                    label: moduleResponse.data.name,
-                  };
-                } catch {
-                  return null;
-                }
-              });
-              const moduleOptions = (await Promise.all(moduleOptionsPromises)).filter(
-                (opt) => opt !== null
-              ) as Array<{ value: string; label: string }>;
+              const moduleOptionsPromises = modules.map(
+                async (moduleId: string) => {
+                  try {
+                    const moduleResponse =
+                      await moduleService.getById(moduleId);
+                    return {
+                      value: moduleId,
+                      label: moduleResponse.data.name,
+                    };
+                  } catch {
+                    return null;
+                  }
+                },
+              );
+              const moduleOptions = (
+                await Promise.all(moduleOptionsPromises)
+              ).filter((opt) => opt !== null) as Array<{
+                value: string;
+                label: string;
+              }>;
               setInitialModuleOptions(moduleOptions);
             } catch (err) {
-              console.warn('Failed to load module names:', err);
+              console.warn("Failed to load module names:", err);
             }
           };
           loadModuleOptions();
@@ -312,9 +355,11 @@ const CreateTenantWizard = (): ReactElement => {
     setLogoFileAttachmentUuid(null);
     setLogoError(null);
     // Reset the file input
-    const fileInput = document.getElementById('logo-upload-wizard') as HTMLInputElement;
+    const fileInput = document.getElementById(
+      "logo-upload-wizard",
+    ) as HTMLInputElement;
     if (fileInput) {
-      fileInput.value = '';
+      fileInput.value = "";
     }
   };
 
@@ -328,9 +373,11 @@ const CreateTenantWizard = (): ReactElement => {
     setFaviconFileAttachmentUuid(null);
     setFaviconError(null);
     // Reset the file input
-    const fileInput = document.getElementById('favicon-upload-wizard') as HTMLInputElement;
+    const fileInput = document.getElementById(
+      "favicon-upload-wizard",
+    ) as HTMLInputElement;
     if (fileInput) {
-      fileInput.value = '';
+      fileInput.value = "";
     }
   };
 
@@ -346,11 +393,11 @@ const CreateTenantWizard = (): ReactElement => {
     const isFaviconMissing = !faviconFileUrl && !faviconFile;
 
     if (isLogoMissing) {
-      setLogoError('Logo is required');
+      setLogoError("Logo is required");
     }
 
     if (isFaviconMissing) {
-      setFaviconError('Favicon is required');
+      setFaviconError("Favicon is required");
     }
 
     if (isLogoMissing || isFaviconMissing) {
@@ -370,7 +417,13 @@ const CreateTenantWizard = (): ReactElement => {
       const { confirmPassword, ...contactData } = contactDetails;
 
       // Extract branding colors from settings
-      const { enable_sso, enable_2fa, primary_color, secondary_color, accent_color } = settings;
+      const {
+        enable_sso,
+        enable_2fa,
+        primary_color,
+        secondary_color,
+        accent_color,
+      } = settings;
 
       const tenantData = {
         ...restTenantDetails,
@@ -386,15 +439,16 @@ const CreateTenantWizard = (): ReactElement => {
             logo_file_path: logoFileUrl || undefined,
             logo_file_attachment_uuid: logoFileAttachmentUuid || undefined,
             favicon_file_path: faviconFileUrl || undefined,
-            favicon_file_attachment_uuid: faviconFileAttachmentUuid || undefined,
+            favicon_file_attachment_uuid:
+              faviconFileAttachmentUuid || undefined,
           },
         },
       };
 
       const response = await tenantService.create(tenantData);
-      const message = response.message || 'Tenant created successfully';
+      const message = response.message || "Tenant created successfully";
       showToast.success(message);
-      navigate('/tenants');
+      navigate("/tenants");
     } catch (err: any) {
       // Clear previous errors
       tenantDetailsForm.clearErrors();
@@ -402,105 +456,113 @@ const CreateTenantWizard = (): ReactElement => {
       settingsForm.clearErrors();
 
       // Handle validation errors from API
-      if (err?.response?.data?.details && Array.isArray(err.response.data.details)) {
+      if (
+        err?.response?.data?.details &&
+        Array.isArray(err.response.data.details)
+      ) {
         const validationErrors = err.response.data.details;
         let hasTenantErrors = false;
         let hasContactErrors = false;
         let hasSettingsErrors = false;
 
-        validationErrors.forEach((detail: { path: string; message: string }) => {
-          const path = detail.path;
+        validationErrors.forEach(
+          (detail: { path: string; message: string }) => {
+            const path = detail.path;
 
-          // Handle nested paths first
-          if (path.startsWith('settings.contact.')) {
-            // Contact details errors from nested path
-            hasContactErrors = true;
-            const fieldName = path.replace('settings.contact.', '');
-            if (fieldName === 'confirmPassword') {
-              // Skip confirmPassword as it's not in the form schema
-              return;
-            }
-            contactDetailsForm.setError(fieldName as keyof ContactDetailsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          } else if (path.startsWith('settings.branding.')) {
-            // Settings/branding errors from nested path
-            hasSettingsErrors = true;
-            const fieldName = path.replace('settings.branding.', '');
-            // Map file_path fields to form fields
-            if (fieldName === 'logo_file_path') {
-              setLogoError(detail.message);
-            } else if (fieldName === 'favicon_file_path') {
-              setFaviconError(detail.message);
-            } else {
+            // Handle nested paths first
+            if (path.startsWith("settings.contact.")) {
+              // Contact details errors from nested path
+              hasContactErrors = true;
+              const fieldName = path.replace("settings.contact.", "");
+              if (fieldName === "confirmPassword") {
+                // Skip confirmPassword as it's not in the form schema
+                return;
+              }
+              contactDetailsForm.setError(
+                fieldName as keyof ContactDetailsForm,
+                {
+                  type: "server",
+                  message: detail.message,
+                },
+              );
+            } else if (path.startsWith("settings.branding.")) {
+              // Settings/branding errors from nested path
+              hasSettingsErrors = true;
+              const fieldName = path.replace("settings.branding.", "");
+              // Map file_path fields to form fields
+              if (fieldName === "logo_file_path") {
+                setLogoError(detail.message);
+              } else if (fieldName === "favicon_file_path") {
+                setFaviconError(detail.message);
+              } else {
+                settingsForm.setError(fieldName as keyof SettingsForm, {
+                  type: "server",
+                  message: detail.message,
+                });
+              }
+            } else if (path.startsWith("settings.")) {
+              // Other settings errors
+              hasSettingsErrors = true;
+              const fieldName = path.replace("settings.", "");
               settingsForm.setError(fieldName as keyof SettingsForm, {
-                type: 'server',
+                type: "server",
                 message: detail.message,
               });
             }
-          } else if (path.startsWith('settings.')) {
-            // Other settings errors
-            hasSettingsErrors = true;
-            const fieldName = path.replace('settings.', '');
-            settingsForm.setError(fieldName as keyof SettingsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          }
-          // Handle tenant details errors (step 1)
-          else if (
-            path === 'name' ||
-            path === 'slug' ||
-            path === 'domain' ||
-            path === 'status' ||
-            path === 'subscription_tier' ||
-            path === 'max_users' ||
-            path === 'max_modules' ||
-            path === 'module_ids'
-          ) {
-            hasTenantErrors = true;
-            const fieldPath = path === 'module_ids' ? 'modules' : path;
-            tenantDetailsForm.setError(fieldPath as keyof TenantDetailsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          }
-          // Handle contact details errors (step 2) - direct paths
-          else if (
-            path === 'email' ||
-            path === 'password' ||
-            path === 'first_name' ||
-            path === 'last_name' ||
-            path === 'contact_phone' ||
-            path === 'address_line1' ||
-            path === 'address_line2' ||
-            path === 'city' ||
-            path === 'state' ||
-            path === 'postal_code' ||
-            path === 'country'
-          ) {
-            hasContactErrors = true;
-            contactDetailsForm.setError(path as keyof ContactDetailsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          }
-          // Handle settings errors (step 3) - direct paths
-          else if (
-            path === 'enable_sso' ||
-            path === 'enable_2fa' ||
-            path === 'primary_color' ||
-            path === 'secondary_color' ||
-            path === 'accent_color'
-          ) {
-            hasSettingsErrors = true;
-            settingsForm.setError(path as keyof SettingsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          }
-        });
+            // Handle tenant details errors (step 1)
+            else if (
+              path === "name" ||
+              path === "slug" ||
+              path === "domain" ||
+              path === "status" ||
+              path === "subscription_tier" ||
+              path === "max_users" ||
+              path === "max_modules" ||
+              path === "module_ids"
+            ) {
+              hasTenantErrors = true;
+              const fieldPath = path === "module_ids" ? "modules" : path;
+              tenantDetailsForm.setError(fieldPath as keyof TenantDetailsForm, {
+                type: "server",
+                message: detail.message,
+              });
+            }
+            // Handle contact details errors (step 2) - direct paths
+            else if (
+              path === "email" ||
+              path === "password" ||
+              path === "first_name" ||
+              path === "last_name" ||
+              path === "contact_phone" ||
+              path === "address_line1" ||
+              path === "address_line2" ||
+              path === "city" ||
+              path === "state" ||
+              path === "postal_code" ||
+              path === "country"
+            ) {
+              hasContactErrors = true;
+              contactDetailsForm.setError(path as keyof ContactDetailsForm, {
+                type: "server",
+                message: detail.message,
+              });
+            }
+            // Handle settings errors (step 3) - direct paths
+            else if (
+              path === "enable_sso" ||
+              path === "enable_2fa" ||
+              path === "primary_color" ||
+              path === "secondary_color" ||
+              path === "accent_color"
+            ) {
+              hasSettingsErrors = true;
+              settingsForm.setError(path as keyof SettingsForm, {
+                type: "server",
+                message: detail.message,
+              });
+            }
+          },
+        );
 
         // Navigate to the step with errors
         if (hasTenantErrors) {
@@ -514,16 +576,27 @@ const CreateTenantWizard = (): ReactElement => {
         // Handle general errors
         const errorObj = err?.response?.data?.error;
         const errorMessage =
-          (typeof errorObj === 'object' && errorObj !== null && 'message' in errorObj ? errorObj.message : null) ||
-          (typeof errorObj === 'string' ? errorObj : null) ||
+          (typeof errorObj === "object" &&
+          errorObj !== null &&
+          "message" in errorObj
+            ? errorObj.message
+            : null) ||
+          (typeof errorObj === "string" ? errorObj : null) ||
           err?.response?.data?.message ||
           err?.message ||
-          'Failed to create tenant. Please try again.';
-        tenantDetailsForm.setError('root', {
-          type: 'server',
-          message: typeof errorMessage === 'string' ? errorMessage : 'Failed to create tenant. Please try again.',
+          "Failed to create tenant. Please try again.";
+        tenantDetailsForm.setError("root", {
+          type: "server",
+          message:
+            typeof errorMessage === "string"
+              ? errorMessage
+              : "Failed to create tenant. Please try again.",
         });
-        showToast.error(typeof errorMessage === 'string' ? errorMessage : 'Failed to create tenant. Please try again.');
+        showToast.error(
+          typeof errorMessage === "string"
+            ? errorMessage
+            : "Failed to create tenant. Please try again.",
+        );
         setCurrentStep(1); // Navigate to first step for general errors
       }
     } finally {
@@ -534,22 +607,22 @@ const CreateTenantWizard = (): ReactElement => {
   const steps = [
     {
       number: 1,
-      title: 'Tenant Details',
-      description: 'Basic organization information',
+      title: "Tenant Details",
+      description: "Basic organization information",
       isActive: currentStep === 1,
       isCompleted: currentStep > 1,
     },
     {
       number: 2,
-      title: 'Contact Details',
-      description: 'Primary contact & address',
+      title: "Contact Details",
+      description: "Primary contact & address",
       isActive: currentStep === 2,
       isCompleted: currentStep > 2,
     },
     {
       number: 3,
-      title: 'Settings',
-      description: 'Usage limits & security',
+      title: "Settings",
+      description: "Usage limits & security",
       isActive: currentStep === 3,
       isCompleted: false,
     },
@@ -559,46 +632,53 @@ const CreateTenantWizard = (): ReactElement => {
     <Layout
       currentPage="Create Tenant"
       breadcrumbs={[
-        { label: 'QAssure', path: '/dashboard' },
-        { label: 'Tenant Management', path: '/tenants' },
-        { label: 'Create Tenant' },
+        { label: "QAssure", path: "/dashboard" },
+        { label: "Tenant Management", path: "/tenants" },
+        { label: "Create Tenant" },
       ]}
       pageHeader={{
-        title: 'Create New Tenant',
-        description: 'Follow the steps to onboard a new Tenant.',
+        title: "Create New Tenant",
+        description: "Follow the steps to onboard a new Tenant.",
       }}
     >
       <div className="flex flex-col lg:flex-row gap-4">
         {/* Steps Sidebar */}
         <div className="w-full lg:w-[260px] bg-white border border-[rgba(0,0,0,0.08)] rounded-lg p-5">
           <div className="mb-4">
-            <h3 className="text-xs font-medium text-[#6b7280] uppercase tracking-wide">Steps</h3>
+            <h3 className="text-xs font-medium text-[#6b7280] uppercase tracking-wide">
+              Steps
+            </h3>
           </div>
           <div className="flex flex-col gap-2">
             {steps.map((step) => (
               <div
                 key={step.number}
-                className={`flex gap-2.5 items-center px-3 py-2 rounded-md ${step.isActive ? 'bg-[#f5f7fa]' : ''
-                  }`}
+                className={`flex gap-2.5 items-center px-3 py-2 rounded-md ${
+                  step.isActive ? "bg-[#f5f7fa]" : ""
+                }`}
               >
                 <div
-                  className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${step.isActive
-                    ? 'bg-[#23dce1] border border-[#23dce1] text-[#112868]'
-                    : step.isCompleted
-                      ? 'bg-[#23dce1] border border-[#23dce1] text-[#112868]'
-                      : 'bg-white border border-[rgba(0,0,0,0.08)] text-[#6b7280]'
-                    }`}
+                  className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${
+                    step.isActive
+                      ? "bg-[#23dce1] border border-[#23dce1] text-[#112868]"
+                      : step.isCompleted
+                        ? "bg-[#23dce1] border border-[#23dce1] text-[#112868]"
+                        : "bg-white border border-[rgba(0,0,0,0.08)] text-[#6b7280]"
+                  }`}
                 >
                   {step.number}
                 </div>
                 <div className="flex-1">
                   <div
-                    className={`text-sm font-medium ${step.isActive ? 'text-[#0f1724]' : 'text-[#0f1724]'
-                      }`}
+                    className={`text-sm font-medium ${
+                      step.isActive ? "text-[#0f1724]" : "text-[#0f1724]"
+                    }`}
                   >
                     {step.title}
                   </div>
-                  <div className="text-xs text-[#6b7280]">{step.description}</div>
+                  <div className="text-xs text-[#6b7280]">
+                    {step.description}
+                  </div>
                 </div>
               </div>
             ))}
@@ -611,7 +691,9 @@ const CreateTenantWizard = (): ReactElement => {
           {currentStep === 1 && (
             <div className="space-y-4">
               <div className="pb-4 border-b border-[rgba(0,0,0,0.08)]">
-                <h2 className="text-lg font-semibold text-[#0f1724]">Tenant Details</h2>
+                <h2 className="text-lg font-semibold text-[#0f1724]">
+                  Tenant Details
+                </h2>
                 <p className="text-sm text-[#6b7280] mt-1">
                   Basic information for the new organization.
                 </p>
@@ -619,7 +701,9 @@ const CreateTenantWizard = (): ReactElement => {
               {/* General Error Display */}
               {tenantDetailsForm.formState.errors.root && (
                 <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
-                  <p className="text-sm text-[#ef4444]">{tenantDetailsForm.formState.errors.root.message}</p>
+                  <p className="text-sm text-[#ef4444]">
+                    {tenantDetailsForm.formState.errors.root.message}
+                  </p>
                 </div>
               )}
 
@@ -629,20 +713,20 @@ const CreateTenantWizard = (): ReactElement => {
                   required
                   placeholder="Enter tenant name"
                   error={tenantDetailsForm.formState.errors.name?.message}
-                  {...tenantDetailsForm.register('name')}
+                  {...tenantDetailsForm.register("name")}
                 />
                 <FormField
                   label="Slug"
                   required
                   placeholder="Enter slug (lowercase, numbers, hyphens only)"
                   error={tenantDetailsForm.formState.errors.slug?.message}
-                  {...tenantDetailsForm.register('slug')}
+                  {...tenantDetailsForm.register("slug")}
                 />
                 <FormField
                   label="Domain"
                   placeholder="Auto-generated from tenant name"
                   error={tenantDetailsForm.formState.errors.domain?.message}
-                  {...tenantDetailsForm.register('domain')}
+                  {...tenantDetailsForm.register("domain")}
                 />
                 {/* Status and Subscription Tier Row */}
                 <div className="flex gap-5">
@@ -652,9 +736,12 @@ const CreateTenantWizard = (): ReactElement => {
                       required
                       placeholder="Select Status"
                       options={statusOptions}
-                      value={tenantDetailsForm.watch('status')}
+                      value={tenantDetailsForm.watch("status")}
                       onValueChange={(value) =>
-                        tenantDetailsForm.setValue('status', value as 'active' | 'suspended' | 'deleted')
+                        tenantDetailsForm.setValue(
+                          "status",
+                          value as "active" | "suspended" | "deleted",
+                        )
                       }
                       error={tenantDetailsForm.formState.errors.status?.message}
                     />
@@ -664,14 +751,22 @@ const CreateTenantWizard = (): ReactElement => {
                       label="Subscription Tier"
                       placeholder="Select Subscription"
                       options={subscriptionTierOptions}
-                      value={tenantDetailsForm.watch('subscription_tier') || ''}
+                      value={tenantDetailsForm.watch("subscription_tier") || ""}
                       onValueChange={(value) =>
                         tenantDetailsForm.setValue(
-                          'subscription_tier',
-                          value === '' ? null : (value as 'basic' | 'professional' | 'enterprise')
+                          "subscription_tier",
+                          value === ""
+                            ? null
+                            : (value as
+                                | "basic"
+                                | "professional"
+                                | "enterprise"),
                         )
                       }
-                      error={tenantDetailsForm.formState.errors.subscription_tier?.message}
+                      error={
+                        tenantDetailsForm.formState.errors.subscription_tier
+                          ?.message
+                      }
                     />
                   </div>
                 </div>
@@ -684,10 +779,17 @@ const CreateTenantWizard = (): ReactElement => {
                       min="1"
                       step="1"
                       placeholder="Enter number"
-                      error={tenantDetailsForm.formState.errors.max_users?.message}
-                      {...tenantDetailsForm.register('max_users', {
+                      error={
+                        tenantDetailsForm.formState.errors.max_users?.message
+                      }
+                      {...tenantDetailsForm.register("max_users", {
                         setValueAs: (value) => {
-                          if (value === '' || value === null || value === undefined) return null;
+                          if (
+                            value === "" ||
+                            value === null ||
+                            value === undefined
+                          )
+                            return null;
                           const num = Number(value);
                           return isNaN(num) ? null : num;
                         },
@@ -701,10 +803,17 @@ const CreateTenantWizard = (): ReactElement => {
                       min="1"
                       step="1"
                       placeholder="Enter number"
-                      error={tenantDetailsForm.formState.errors.max_modules?.message}
-                      {...tenantDetailsForm.register('max_modules', {
+                      error={
+                        tenantDetailsForm.formState.errors.max_modules?.message
+                      }
+                      {...tenantDetailsForm.register("max_modules", {
                         setValueAs: (value) => {
-                          if (value === '' || value === null || value === undefined) return null;
+                          if (
+                            value === "" ||
+                            value === null ||
+                            value === undefined
+                          )
+                            return null;
                           const num = Number(value);
                           return isNaN(num) ? null : num;
                         },
@@ -719,7 +828,10 @@ const CreateTenantWizard = (): ReactElement => {
                   value={selectedModules}
                   onValueChange={(values) => {
                     setSelectedModules(values);
-                    tenantDetailsForm.setValue('modules', values.length > 0 ? values : []);
+                    tenantDetailsForm.setValue(
+                      "modules",
+                      values.length > 0 ? values : [],
+                    );
                   }}
                   onLoadOptions={loadModules}
                   initialOptions={initialModuleOptions}
@@ -733,7 +845,9 @@ const CreateTenantWizard = (): ReactElement => {
           {currentStep === 2 && (
             <div className="space-y-4">
               <div className="pb-4 border-b border-[rgba(0,0,0,0.08)]">
-                <h2 className="text-lg font-semibold text-[#0f1724]">Contact Details</h2>
+                <h2 className="text-lg font-semibold text-[#0f1724]">
+                  Contact Details
+                </h2>
                 <p className="text-sm text-[#6b7280] mt-1">
                   Contact information for the main account administrator.
                 </p>
@@ -741,7 +855,9 @@ const CreateTenantWizard = (): ReactElement => {
               {/* General Error Display */}
               {contactDetailsForm.formState.errors.root && (
                 <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
-                  <p className="text-sm text-[#ef4444]">{contactDetailsForm.formState.errors.root.message}</p>
+                  <p className="text-sm text-[#ef4444]">
+                    {contactDetailsForm.formState.errors.root.message}
+                  </p>
                 </div>
               )}
               <div className="space-y-4">
@@ -754,7 +870,7 @@ const CreateTenantWizard = (): ReactElement => {
                     required
                     placeholder="Enter email address"
                     error={contactDetailsForm.formState.errors.email?.message}
-                    {...contactDetailsForm.register('email')}
+                    {...contactDetailsForm.register("email")}
                   />
                   {/* First Name and Last Name Row */}
                   <div className="grid grid-cols-2 gap-5">
@@ -762,15 +878,19 @@ const CreateTenantWizard = (): ReactElement => {
                       label="First Name"
                       required
                       placeholder="Enter first name"
-                      error={contactDetailsForm.formState.errors.first_name?.message}
-                      {...contactDetailsForm.register('first_name')}
+                      error={
+                        contactDetailsForm.formState.errors.first_name?.message
+                      }
+                      {...contactDetailsForm.register("first_name")}
                     />
                     <FormField
                       label="Last Name"
                       required
                       placeholder="Enter last name"
-                      error={contactDetailsForm.formState.errors.last_name?.message}
-                      {...contactDetailsForm.register('last_name')}
+                      error={
+                        contactDetailsForm.formState.errors.last_name?.message
+                      }
+                      {...contactDetailsForm.register("last_name")}
                     />
                   </div>
                   {/* Password and Confirm Password Row */}
@@ -780,16 +900,21 @@ const CreateTenantWizard = (): ReactElement => {
                       type="password"
                       required
                       placeholder="Enter password"
-                      error={contactDetailsForm.formState.errors.password?.message}
-                      {...contactDetailsForm.register('password')}
+                      error={
+                        contactDetailsForm.formState.errors.password?.message
+                      }
+                      {...contactDetailsForm.register("password")}
                     />
                     <FormField
                       label="Confirm Password"
                       type="password"
                       required
                       placeholder="Confirm password"
-                      error={contactDetailsForm.formState.errors.confirmPassword?.message}
-                      {...contactDetailsForm.register('confirmPassword')}
+                      error={
+                        contactDetailsForm.formState.errors.confirmPassword
+                          ?.message
+                      }
+                      {...contactDetailsForm.register("confirmPassword")}
                     />
                   </div>
                   {/* Contact Phone */}
@@ -799,12 +924,19 @@ const CreateTenantWizard = (): ReactElement => {
                       type="tel"
                       placeholder="Enter 10-digit phone number"
                       maxLength={10}
-                      error={contactDetailsForm.formState.errors.contact_phone?.message}
-                      {...contactDetailsForm.register('contact_phone', {
+                      error={
+                        contactDetailsForm.formState.errors.contact_phone
+                          ?.message
+                      }
+                      {...contactDetailsForm.register("contact_phone", {
                         onChange: (e) => {
                           // Only allow digits and limit to 10 characters
-                          const value = e.target.value.replace(/\D/g, '').slice(0, 10);
-                          contactDetailsForm.setValue('contact_phone', value, { shouldValidate: true });
+                          const value = e.target.value
+                            .replace(/\D/g, "")
+                            .slice(0, 10);
+                          contactDetailsForm.setValue("contact_phone", value, {
+                            shouldValidate: true,
+                          });
                         },
                       })}
                     />
@@ -812,35 +944,47 @@ const CreateTenantWizard = (): ReactElement => {
                 </div>
                 {/* Organization Address Section */}
                 <div className="border-b border-dashed border-[rgba(0,0,0,0.08)] pb-4">
-                  <h3 className="text-sm font-medium text-[#0f1724] mb-4">Organization Address</h3>
+                  <h3 className="text-sm font-medium text-[#0f1724] mb-4">
+                    Organization Address
+                  </h3>
                   <div className="space-y-4">
                     <FormField
                       label="Address Line 1"
                       required
                       placeholder="Enter address line 1"
-                      error={contactDetailsForm.formState.errors.address_line1?.message}
-                      {...contactDetailsForm.register('address_line1')}
+                      error={
+                        contactDetailsForm.formState.errors.address_line1
+                          ?.message
+                      }
+                      {...contactDetailsForm.register("address_line1")}
                     />
                     <FormField
                       label="Address Line 2"
                       placeholder="Enter address line 2 (optional)"
-                      error={contactDetailsForm.formState.errors.address_line2?.message}
-                      {...contactDetailsForm.register('address_line2')}
+                      error={
+                        contactDetailsForm.formState.errors.address_line2
+                          ?.message
+                      }
+                      {...contactDetailsForm.register("address_line2")}
                     />
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <FormField
                         label="City"
                         required
                         placeholder="Enter city"
-                        error={contactDetailsForm.formState.errors.city?.message}
-                        {...contactDetailsForm.register('city')}
+                        error={
+                          contactDetailsForm.formState.errors.city?.message
+                        }
+                        {...contactDetailsForm.register("city")}
                       />
                       <FormField
                         label="State"
                         required
                         placeholder="Enter state"
-                        error={contactDetailsForm.formState.errors.state?.message}
-                        {...contactDetailsForm.register('state')}
+                        error={
+                          contactDetailsForm.formState.errors.state?.message
+                        }
+                        {...contactDetailsForm.register("state")}
                       />
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -848,10 +992,15 @@ const CreateTenantWizard = (): ReactElement => {
                         label="Postal Code"
                         required
                         placeholder="Enter postal code"
-                        error={contactDetailsForm.formState.errors.postal_code?.message}
-                        {...contactDetailsForm.register('postal_code', {
+                        error={
+                          contactDetailsForm.formState.errors.postal_code
+                            ?.message
+                        }
+                        {...contactDetailsForm.register("postal_code", {
                           onChange: (e) => {
-                            e.target.value = e.target.value.replace(/\D/g, '').slice(0, 6);
+                            e.target.value = e.target.value
+                              .replace(/\D/g, "")
+                              .slice(0, 6);
                           },
                         })}
                       />
@@ -859,8 +1008,10 @@ const CreateTenantWizard = (): ReactElement => {
                         label="Country"
                         required
                         placeholder="Enter country"
-                        error={contactDetailsForm.formState.errors.country?.message}
-                        {...contactDetailsForm.register('country')}
+                        error={
+                          contactDetailsForm.formState.errors.country?.message
+                        }
+                        {...contactDetailsForm.register("country")}
                       />
                     </div>
                   </div>
@@ -873,7 +1024,9 @@ const CreateTenantWizard = (): ReactElement => {
           {currentStep === 3 && (
             <div className="space-y-6">
               <div className="pb-4 border-b border-[rgba(0,0,0,0.08)]">
-                <h2 className="text-lg font-semibold text-[#0f1724]">Configuration & Limits</h2>
+                <h2 className="text-lg font-semibold text-[#0f1724]">
+                  Configuration & Limits
+                </h2>
                 <p className="text-sm text-[#6b7280] mt-1">
                   Set resource limits and security preferences for this tenant.
                 </p>
@@ -881,7 +1034,9 @@ const CreateTenantWizard = (): ReactElement => {
               {/* General Error Display */}
               {settingsForm.formState.errors.root && (
                 <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
-                  <p className="text-sm text-[#ef4444]">{settingsForm.formState.errors.root.message}</p>
+                  <p className="text-sm text-[#ef4444]">
+                    {settingsForm.formState.errors.root.message}
+                  </p>
                 </div>
               )}
 
@@ -889,9 +1044,12 @@ const CreateTenantWizard = (): ReactElement => {
               <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg p-4 md:p-6 flex flex-col gap-4">
                 {/* Section Header */}
                 <div className="flex flex-col gap-1">
-                  <h3 className="text-base font-semibold text-[#0f1724]">Branding</h3>
+                  <h3 className="text-base font-semibold text-[#0f1724]">
+                    Branding
+                  </h3>
                   <p className="text-sm font-normal text-[#9ca3af]">
-                    Customize logo, favicon, and colors for this tenant experience.
+                    Customize logo, favicon, and colors for this tenant
+                    experience.
                   </p>
                 </div>
 
@@ -910,8 +1068,12 @@ const CreateTenantWizard = (): ReactElement => {
                         <ImageIcon className="w-5 h-5 text-[#6b7280]" />
                       </div>
                       <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                        <span className="text-sm font-medium text-[#0f1724]">Upload Logo</span>
-                        <span className="text-xs font-normal text-[#9ca3af]">PNG, SVG, JPG up to 2MB.</span>
+                        <span className="text-sm font-medium text-[#0f1724]">
+                          Upload Logo
+                        </span>
+                        <span className="text-xs font-normal text-[#9ca3af]">
+                          PNG, SVG, JPG up to 2MB.
+                        </span>
                       </div>
                       <input
                         id="logo-upload-wizard"
@@ -927,13 +1089,22 @@ const CreateTenantWizard = (): ReactElement => {
 
                             // Validate file size (2MB max)
                             if (file.size > 2 * 1024 * 1024) {
-                              showToast.error('Logo file size must be less than 2MB');
+                              showToast.error(
+                                "Logo file size must be less than 2MB",
+                              );
                               return;
                             }
                             // Validate file type
-                            const validTypes = ['image/png', 'image/svg+xml', 'image/jpeg', 'image/jpg'];
+                            const validTypes = [
+                              "image/png",
+                              "image/svg+xml",
+                              "image/jpeg",
+                              "image/jpg",
+                            ];
                             if (!validTypes.includes(file.type)) {
-                              showToast.error('Logo must be PNG, SVG, or JPG format');
+                              showToast.error(
+                                "Logo must be PNG, SVG, or JPG format",
+                              );
                               return;
                             }
                             // Create local preview URL immediately
@@ -942,7 +1113,11 @@ const CreateTenantWizard = (): ReactElement => {
                             setLogoPreviewUrl(previewUrl);
                             setIsUploadingLogo(true);
                             try {
-                              const response = await fileService.upload(file, 'tenant', wizardId);
+                              const response = await fileService.upload(
+                                file,
+                                "tenant",
+                                crypto.randomUUID(),
+                              );
                               const fileId = response.data.id;
 
                               setLogoFileAttachmentUuid(fileId);
@@ -952,13 +1127,13 @@ const CreateTenantWizard = (): ReactElement => {
                               setLogoFileUrl(formattedUrl);
 
                               setLogoError(null);
-                              showToast.success('Logo uploaded successfully');
+                              showToast.success("Logo uploaded successfully");
                             } catch (err: any) {
                               const errorMessage =
                                 err?.response?.data?.error?.message ||
                                 err?.response?.data?.message ||
                                 err?.message ||
-                                'Failed to upload logo. Please try again.';
+                                "Failed to upload logo. Please try again.";
                               showToast.error(errorMessage);
                               setLogoFile(null);
                               URL.revokeObjectURL(previewUrl);
@@ -980,7 +1155,9 @@ const CreateTenantWizard = (): ReactElement => {
                       <div className="flex flex-col gap-2 mt-1">
                         {logoFile && (
                           <div className="text-xs text-[#6b7280]">
-                            {isUploadingLogo ? 'Uploading...' : `Selected: ${logoFile.name}`}
+                            {isUploadingLogo
+                              ? "Uploading..."
+                              : `Selected: ${logoFile.name}`}
                           </div>
                         )}
                         {(logoPreviewUrl || logoFileUrl) && (
@@ -991,7 +1168,7 @@ const CreateTenantWizard = (): ReactElement => {
                               src={logoPreviewUrl || logoFileUrl}
                               alt="Logo preview"
                               className="max-w-full h-20 object-contain border border-[#d1d5db] rounded-md p-2 bg-white"
-                              style={{ display: 'block', maxHeight: '80px' }}
+                              style={{ display: "block", maxHeight: "80px" }}
                             />
                             <button
                               type="button"
@@ -1020,8 +1197,12 @@ const CreateTenantWizard = (): ReactElement => {
                         <ImageIcon className="w-5 h-5 text-[#6b7280]" />
                       </div>
                       <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                        <span className="text-sm font-medium text-[#0f1724]">Upload Favicon</span>
-                        <span className="text-xs font-normal text-[#9ca3af]">ICO or PNG up to 500KB.</span>
+                        <span className="text-sm font-medium text-[#0f1724]">
+                          Upload Favicon
+                        </span>
+                        <span className="text-xs font-normal text-[#9ca3af]">
+                          ICO or PNG up to 500KB.
+                        </span>
                       </div>
                       <input
                         id="favicon-upload-wizard"
@@ -1037,13 +1218,21 @@ const CreateTenantWizard = (): ReactElement => {
 
                             // Validate file size (500KB max)
                             if (file.size > 500 * 1024) {
-                              showToast.error('Favicon file size must be less than 500KB');
+                              showToast.error(
+                                "Favicon file size must be less than 500KB",
+                              );
                               return;
                             }
                             // Validate file type
-                            const validTypes = ['image/x-icon', 'image/png', 'image/vnd.microsoft.icon'];
+                            const validTypes = [
+                              "image/x-icon",
+                              "image/png",
+                              "image/vnd.microsoft.icon",
+                            ];
                             if (!validTypes.includes(file.type)) {
-                              showToast.error('Favicon must be ICO or PNG format');
+                              showToast.error(
+                                "Favicon must be ICO or PNG format",
+                              );
                               return;
                             }
                             // Create local preview URL immediately
@@ -1052,7 +1241,11 @@ const CreateTenantWizard = (): ReactElement => {
                             setFaviconPreviewUrl(previewUrl);
                             setIsUploadingFavicon(true);
                             try {
-                              const response = await fileService.upload(file, 'tenant', wizardId);
+                              const response = await fileService.upload(
+                                file,
+                                "tenant",
+                                crypto.randomUUID(),
+                              );
                               const fileId = response.data.id;
 
                               setFaviconFileAttachmentUuid(fileId);
@@ -1062,13 +1255,15 @@ const CreateTenantWizard = (): ReactElement => {
                               setFaviconFileUrl(formattedUrl);
 
                               setFaviconError(null);
-                              showToast.success('Favicon uploaded successfully');
+                              showToast.success(
+                                "Favicon uploaded successfully",
+                              );
                             } catch (err: any) {
                               const errorMessage =
                                 err?.response?.data?.error?.message ||
                                 err?.response?.data?.message ||
                                 err?.message ||
-                                'Failed to upload favicon. Please try again.';
+                                "Failed to upload favicon. Please try again.";
                               showToast.error(errorMessage);
                               setFaviconFile(null);
                               URL.revokeObjectURL(previewUrl);
@@ -1090,18 +1285,24 @@ const CreateTenantWizard = (): ReactElement => {
                       <div className="flex flex-col gap-2 mt-1">
                         {faviconFile && (
                           <div className="text-xs text-[#6b7280]">
-                            {isUploadingFavicon ? 'Uploading...' : `Selected: ${faviconFile.name}`}
+                            {isUploadingFavicon
+                              ? "Uploading..."
+                              : `Selected: ${faviconFile.name}`}
                           </div>
                         )}
                         {(faviconPreviewUrl || faviconFileUrl) && (
                           <div className="mt-2 relative inline-block">
                             <AuthenticatedImage
-                              key={faviconFileUrl || faviconPreviewUrl || ''}
+                              key={faviconFileUrl || faviconPreviewUrl || ""}
                               fileId={faviconFileAttachmentUuid}
                               src={faviconPreviewUrl || faviconFileUrl}
                               alt="Favicon preview"
                               className="w-16 h-16 object-contain border border-[#d1d5db] rounded-md p-2 bg-white"
-                              style={{ display: 'block', width: '64px', height: '64px' }}
+                              style={{
+                                display: "block",
+                                width: "64px",
+                                height: "64px",
+                              }}
                             />
                             <button
                               type="button"
@@ -1120,25 +1321,34 @@ const CreateTenantWizard = (): ReactElement => {
 
                 {/* Primary Color */}
                 <div className="flex flex-col gap-2">
-                  <label className="text-sm font-medium text-[#0f1724]">Primary Color</label>
+                  <label className="text-sm font-medium text-[#0f1724]">
+                    Primary Color
+                  </label>
                   <div className="flex gap-3 items-center">
                     <div
                       className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                      style={{ backgroundColor: settingsForm.watch('primary_color') || '#112868' }}
+                      style={{
+                        backgroundColor:
+                          settingsForm.watch("primary_color") || "#112868",
+                      }}
                     />
                     <div className="flex-1">
                       <input
                         type="text"
-                        value={settingsForm.watch('primary_color') || '#112868'}
-                        onChange={(e) => settingsForm.setValue('primary_color', e.target.value)}
+                        value={settingsForm.watch("primary_color") || "#112868"}
+                        onChange={(e) =>
+                          settingsForm.setValue("primary_color", e.target.value)
+                        }
                         className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
                         placeholder="#112868"
                       />
                     </div>
                     <input
                       type="color"
-                      value={settingsForm.watch('primary_color') || '#112868'}
-                      onChange={(e) => settingsForm.setValue('primary_color', e.target.value)}
+                      value={settingsForm.watch("primary_color") || "#112868"}
+                      onChange={(e) =>
+                        settingsForm.setValue("primary_color", e.target.value)
+                      }
                       className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
                     />
                   </div>
@@ -1151,25 +1361,44 @@ const CreateTenantWizard = (): ReactElement => {
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                   {/* Secondary Color */}
                   <div className="flex flex-col gap-2">
-                    <label className="text-sm font-medium text-[#0f1724]">Secondary Color</label>
+                    <label className="text-sm font-medium text-[#0f1724]">
+                      Secondary Color
+                    </label>
                     <div className="flex gap-3 items-center">
                       <div
                         className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                        style={{ backgroundColor: settingsForm.watch('secondary_color') || '#23DCE1' }}
+                        style={{
+                          backgroundColor:
+                            settingsForm.watch("secondary_color") || "#23DCE1",
+                        }}
                       />
                       <div className="flex-1">
                         <input
                           type="text"
-                          value={settingsForm.watch('secondary_color') || '#23DCE1'}
-                          onChange={(e) => settingsForm.setValue('secondary_color', e.target.value)}
+                          value={
+                            settingsForm.watch("secondary_color") || "#23DCE1"
+                          }
+                          onChange={(e) =>
+                            settingsForm.setValue(
+                              "secondary_color",
+                              e.target.value,
+                            )
+                          }
                           className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
                           placeholder="#23DCE1"
                         />
                       </div>
                       <input
                         type="color"
-                        value={settingsForm.watch('secondary_color') || '#23DCE1'}
-                        onChange={(e) => settingsForm.setValue('secondary_color', e.target.value)}
+                        value={
+                          settingsForm.watch("secondary_color") || "#23DCE1"
+                        }
+                        onChange={(e) =>
+                          settingsForm.setValue(
+                            "secondary_color",
+                            e.target.value,
+                          )
+                        }
                         className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
                       />
                     </div>
@@ -1180,25 +1409,39 @@ const CreateTenantWizard = (): ReactElement => {
 
                   {/* Accent Color */}
                   <div className="flex flex-col gap-2">
-                    <label className="text-sm font-medium text-[#0f1724]">Accent Color</label>
+                    <label className="text-sm font-medium text-[#0f1724]">
+                      Accent Color
+                    </label>
                     <div className="flex gap-3 items-center">
                       <div
                         className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                        style={{ backgroundColor: settingsForm.watch('accent_color') || '#084CC8' }}
+                        style={{
+                          backgroundColor:
+                            settingsForm.watch("accent_color") || "#084CC8",
+                        }}
                       />
                       <div className="flex-1">
                         <input
                           type="text"
-                          value={settingsForm.watch('accent_color') || '#084CC8'}
-                          onChange={(e) => settingsForm.setValue('accent_color', e.target.value)}
+                          value={
+                            settingsForm.watch("accent_color") || "#084CC8"
+                          }
+                          onChange={(e) =>
+                            settingsForm.setValue(
+                              "accent_color",
+                              e.target.value,
+                            )
+                          }
                           className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
                           placeholder="#084CC8"
                         />
                       </div>
                       <input
                         type="color"
-                        value={settingsForm.watch('accent_color') || '#084CC8'}
-                        onChange={(e) => settingsForm.setValue('accent_color', e.target.value)}
+                        value={settingsForm.watch("accent_color") || "#084CC8"}
+                        onChange={(e) =>
+                          settingsForm.setValue("accent_color", e.target.value)
+                        }
                         className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
                       />
                     </div>
@@ -1217,23 +1460,30 @@ const CreateTenantWizard = (): ReactElement => {
                       Enable Single Sign-On (SSO)
                     </h4>
                     <p className="text-[10px] text-[#6b7280]">
-                      Allow users to log in using their organization's identity provider.
+                      Allow users to log in using their organization's identity
+                      provider.
                     </p>
                   </div>
                   <label className="relative inline-flex items-center cursor-pointer">
                     <input
                       type="checkbox"
-                      {...settingsForm.register('enable_sso')}
+                      {...settingsForm.register("enable_sso")}
                       className="sr-only peer"
-                      checked={settingsForm.watch('enable_sso')}
+                      checked={settingsForm.watch("enable_sso")}
                     />
                     <div
-                      className={`w-10 h-5 rounded-full transition-colors ${settingsForm.watch('enable_sso') ? 'bg-[#23dce1]' : 'bg-[#c0c8e6]'
-                        }`}
+                      className={`w-10 h-5 rounded-full transition-colors ${
+                        settingsForm.watch("enable_sso")
+                          ? "bg-[#23dce1]"
+                          : "bg-[#c0c8e6]"
+                      }`}
                     >
                       <div
-                        className={`absolute top-[2px] left-[2px] bg-white rounded-full h-4 w-4 transition-transform ${settingsForm.watch('enable_sso') ? 'translate-x-5' : 'translate-x-0'
-                          }`}
+                        className={`absolute top-[2px] left-[2px] bg-white rounded-full h-4 w-4 transition-transform ${
+                          settingsForm.watch("enable_sso")
+                            ? "translate-x-5"
+                            : "translate-x-0"
+                        }`}
                       ></div>
                     </div>
                   </label>
@@ -1250,17 +1500,23 @@ const CreateTenantWizard = (): ReactElement => {
                   <label className="relative inline-flex items-center cursor-pointer">
                     <input
                       type="checkbox"
-                      {...settingsForm.register('enable_2fa')}
+                      {...settingsForm.register("enable_2fa")}
                       className="sr-only peer"
-                      checked={settingsForm.watch('enable_2fa')}
+                      checked={settingsForm.watch("enable_2fa")}
                     />
                     <div
-                      className={`w-10 h-5 rounded-full transition-colors ${settingsForm.watch('enable_2fa') ? 'bg-[#23dce1]' : 'bg-[#c0c8e6]'
-                        }`}
+                      className={`w-10 h-5 rounded-full transition-colors ${
+                        settingsForm.watch("enable_2fa")
+                          ? "bg-[#23dce1]"
+                          : "bg-[#c0c8e6]"
+                      }`}
                     >
                       <div
-                        className={`absolute top-[2px] left-[2px] bg-white rounded-full h-4 w-4 transition-transform ${settingsForm.watch('enable_2fa') ? 'translate-x-5' : 'translate-x-0'
-                          }`}
+                        className={`absolute top-[2px] left-[2px] bg-white rounded-full h-4 w-4 transition-transform ${
+                          settingsForm.watch("enable_2fa")
+                            ? "translate-x-5"
+                            : "translate-x-0"
+                        }`}
                       ></div>
                     </div>
                   </label>
@@ -1284,7 +1540,7 @@ const CreateTenantWizard = (): ReactElement => {
               </PrimaryButton>
             ) : (
               <PrimaryButton onClick={handleSubmit} disabled={isSubmitting}>
-                {isSubmitting ? 'Saving...' : 'Save Tenant'}
+                {isSubmitting ? "Saving..." : "Save Tenant"}
               </PrimaryButton>
             )}
           </div>
diff --git a/src/pages/superadmin/EditTenant.tsx b/src/pages/superadmin/EditTenant.tsx
index 6928226..e36a8f6 100644
--- a/src/pages/superadmin/EditTenant.tsx
+++ b/src/pages/superadmin/EditTenant.tsx
@@ -1,68 +1,94 @@
-import { useState, useEffect, useRef } from 'react';
-import type { ReactElement } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { Layout } from '@/components/layout/Layout';
-import { FormField, FormSelect, PrimaryButton, SecondaryButton, MultiselectPaginatedSelect, AuthenticatedImage } from '@/components/shared';
-import { tenantService } from '@/services/tenant-service';
-import { moduleService } from '@/services/module-service';
-import { fileService } from '@/services/file-service';
-import { showToast } from '@/utils/toast';
-import { ChevronRight, ChevronLeft, Image as ImageIcon, Loader2, X } from 'lucide-react';
+import { useState, useEffect, useRef } from "react";
+import type { ReactElement } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Layout } from "@/components/layout/Layout";
+import {
+  FormField,
+  FormSelect,
+  PrimaryButton,
+  SecondaryButton,
+  MultiselectPaginatedSelect,
+  AuthenticatedImage,
+} from "@/components/shared";
+import { tenantService } from "@/services/tenant-service";
+import { moduleService } from "@/services/module-service";
+import { fileService } from "@/services/file-service";
+import { showToast } from "@/utils/toast";
+import {
+  ChevronRight,
+  ChevronLeft,
+  Image as ImageIcon,
+  Loader2,
+  X,
+} from "lucide-react";
 
 // Step 1: Tenant Details Schema
 const tenantDetailsSchema = z.object({
   name: z
     .string()
-    .min(1, 'name is required')
-    .min(3, 'name must be at least 3 characters')
-    .max(100, 'name must be at most 100 characters'),
+    .min(1, "name is required")
+    .min(3, "name must be at least 3 characters")
+    .max(100, "name must be at most 100 characters"),
   slug: z
     .string()
-    .min(1, 'slug is required')
-    .min(3, 'slug must be at least 3 characters')
-    .max(100, 'slug must be at most 100 characters')
-    .regex(/^[a-z0-9-]+$/, 'slug format is invalid'),
+    .min(1, "slug is required")
+    .min(3, "slug must be at least 3 characters")
+    .max(100, "slug must be at most 100 characters")
+    .regex(/^[a-z0-9-]+$/, "slug format is invalid"),
   domain: z.string().optional().nullable(),
-  status: z.enum(['active', 'suspended', 'deleted'], {
-    message: 'Status is required',
+  status: z.enum(["active", "suspended", "deleted"], {
+    message: "Status is required",
   }),
-  subscription_tier: z.enum(['basic', 'professional', 'enterprise'], {
-    message: 'Invalid subscription tier',
-  }).optional().nullable(),
-  max_users: z.number().int().min(1, 'max_users must be at least 1').optional().nullable(),
-  max_modules: z.number().int().min(1, 'max_modules must be at least 1').optional().nullable(),
+  subscription_tier: z
+    .enum(["basic", "professional", "enterprise"], {
+      message: "Invalid subscription tier",
+    })
+    .optional()
+    .nullable(),
+  max_users: z
+    .number()
+    .int()
+    .min(1, "max_users must be at least 1")
+    .optional()
+    .nullable(),
+  max_modules: z
+    .number()
+    .int()
+    .min(1, "max_modules must be at least 1")
+    .optional()
+    .nullable(),
   modules: z.array(z.uuid()).optional().nullable(),
 });
 
 // Step 2: Contact Details Schema - NO password fields
 const contactDetailsSchema = z.object({
-  email: z.email({ message: 'Please enter a valid email address' }),
-  first_name: z.string().min(1, 'First name is required'),
-  last_name: z.string().min(1, 'Last name is required'),
+  email: z.email({ message: "Please enter a valid email address" }),
+  first_name: z.string().min(1, "First name is required"),
+  last_name: z.string().min(1, "Last name is required"),
   contact_phone: z
     .string()
     .optional()
     .nullable()
     .refine(
       (val) => {
-        if (!val || val.trim() === '') return true; // Optional field, empty is valid
+        if (!val || val.trim() === "") return true; // Optional field, empty is valid
         return /^\d{10}$/.test(val);
       },
       {
-        message: 'Phone number must be exactly 10 digits',
-      }
+        message: "Phone number must be exactly 10 digits",
+      },
     ),
-  address_line1: z.string().min(1, 'Address is required'),
+  address_line1: z.string().min(1, "Address is required"),
   address_line2: z.string().optional().nullable(),
-  city: z.string().min(1, 'City is required'),
-  state: z.string().min(1, 'State is required'),
+  city: z.string().min(1, "City is required"),
+  state: z.string().min(1, "State is required"),
   postal_code: z
     .string()
-    .regex(/^[1-9]\d{5}$/, 'Postal code must be a valid 6-digit PIN code'),
-  country: z.string().min(1, 'Country is required'),
+    .regex(/^[1-9]\d{5}$/, "Postal code must be a valid 6-digit PIN code"),
+  country: z.string().min(1, "Country is required"),
 });
 
 // Step 3: Settings Schema
@@ -79,20 +105,20 @@ type ContactDetailsForm = z.infer<typeof contactDetailsSchema>;
 type SettingsForm = z.infer<typeof settingsSchema>;
 
 const statusOptions = [
-  { value: 'active', label: 'Active' },
-  { value: 'suspended', label: 'Suspended' },
-  { value: 'deleted', label: 'Deleted' },
+  { value: "active", label: "Active" },
+  { value: "suspended", label: "Suspended" },
+  { value: "deleted", label: "Deleted" },
 ];
 
 const subscriptionTierOptions = [
-  { value: 'basic', label: 'Basic' },
-  { value: 'professional', label: 'Professional' },
-  { value: 'enterprise', label: 'Enterprise' },
+  { value: "basic", label: "Basic" },
+  { value: "professional", label: "Professional" },
+  { value: "enterprise", label: "Enterprise" },
 ];
 
 // Helper function to get base URL with protocol
 const getBaseUrlWithProtocol = (): string => {
-  return import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
+  return import.meta.env.VITE_API_BASE_URL || "http://localhost:3000";
 };
 
 const EditTenant = (): ReactElement => {
@@ -104,18 +130,26 @@ const EditTenant = (): ReactElement => {
   const [loadError, setLoadError] = useState<string | null>(null);
 
   const [selectedModules, setSelectedModules] = useState<string[]>([]);
-  const [initialModuleOptions, setInitialModuleOptions] = useState<Array<{ value: string; label: string }>>([]);
+  const [initialModuleOptions, setInitialModuleOptions] = useState<
+    Array<{ value: string; label: string }>
+  >([]);
 
   // File upload state for branding
   const [logoFile, setLogoFile] = useState<File | null>(null);
   const [faviconFile, setFaviconFile] = useState<File | null>(null);
   const [logoFilePath, setLogoFilePath] = useState<string | null>(null);
-  const [logoFileAttachmentUuid, setLogoFileAttachmentUuid] = useState<string | null>(null);
-  const [faviconFileAttachmentUuid, setFaviconFileAttachmentUuid] = useState<string | null>(null);
+  const [logoFileAttachmentUuid, setLogoFileAttachmentUuid] = useState<
+    string | null
+  >(null);
+  const [faviconFileAttachmentUuid, setFaviconFileAttachmentUuid] = useState<
+    string | null
+  >(null);
   const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
   const [faviconFilePath, setFaviconFilePath] = useState<string | null>(null);
   const [faviconFileUrl, setFaviconFileUrl] = useState<string | null>(null);
-  const [faviconPreviewUrl, setFaviconPreviewUrl] = useState<string | null>(null);
+  const [faviconPreviewUrl, setFaviconPreviewUrl] = useState<string | null>(
+    null,
+  );
   const [isUploadingLogo, setIsUploadingLogo] = useState<boolean>(false);
   const [isUploadingFavicon, setIsUploadingFavicon] = useState<boolean>(false);
   const [logoError, setLogoError] = useState<string | null>(null);
@@ -124,13 +158,13 @@ const EditTenant = (): ReactElement => {
   // Form instances for each step
   const tenantDetailsForm = useForm<TenantDetailsForm>({
     resolver: zodResolver(tenantDetailsSchema),
-    mode: 'onChange',
-    reValidateMode: 'onChange',
+    mode: "onChange",
+    reValidateMode: "onChange",
     defaultValues: {
-      name: '',
-      slug: '',
-      domain: '',
-      status: 'active',
+      name: "",
+      slug: "",
+      domain: "",
+      status: "active",
       subscription_tier: null,
       max_users: null,
       max_modules: null,
@@ -140,32 +174,32 @@ const EditTenant = (): ReactElement => {
 
   const contactDetailsForm = useForm<ContactDetailsForm>({
     resolver: zodResolver(contactDetailsSchema),
-    mode: 'onChange',
-    reValidateMode: 'onChange',
+    mode: "onChange",
+    reValidateMode: "onChange",
     defaultValues: {
-      email: '',
-      first_name: '',
-      last_name: '',
-      contact_phone: '',
-      address_line1: '',
-      address_line2: '',
-      city: '',
-      state: '',
-      postal_code: '',
-      country: '',
+      email: "",
+      first_name: "",
+      last_name: "",
+      contact_phone: "",
+      address_line1: "",
+      address_line2: "",
+      city: "",
+      state: "",
+      postal_code: "",
+      country: "",
     },
   });
 
   const settingsForm = useForm<SettingsForm>({
     resolver: zodResolver(settingsSchema),
-    mode: 'onChange',
-    reValidateMode: 'onChange',
+    mode: "onChange",
+    reValidateMode: "onChange",
     defaultValues: {
       enable_sso: false,
       enable_2fa: false,
-      primary_color: '#112868',
-      secondary_color: '#23DCE1',
-      accent_color: '#084CC8',
+      primary_color: "#112868",
+      secondary_color: "#23DCE1",
+      accent_color: "#084CC8",
     },
   });
 
@@ -182,9 +216,9 @@ const EditTenant = (): ReactElement => {
   };
 
   // Auto-generate slug and domain from name
-  const nameValue = tenantDetailsForm.watch('name');
+  const nameValue = tenantDetailsForm.watch("name");
   const baseUrlWithProtocol = getBaseUrlWithProtocol();
-  const previousNameRef = useRef<string>('');
+  const previousNameRef = useRef<string>("");
 
   // Auto-generate slug and domain when name changes
   useEffect(() => {
@@ -192,9 +226,9 @@ const EditTenant = (): ReactElement => {
       const slug = nameValue
         .toLowerCase()
         .trim()
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '');
-      tenantDetailsForm.setValue('slug', slug, { shouldValidate: true });
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+      tenantDetailsForm.setValue("slug", slug, { shouldValidate: true });
 
       // Auto-generate domain when tenant name changes (like slug)
       // Format: http://tenant-slug.localhost:5173/tenant
@@ -205,18 +239,22 @@ const EditTenant = (): ReactElement => {
           const host = baseUrlObj.host; // e.g., "localhost:5173"
           const protocol = baseUrlObj.protocol; // e.g., "http:" or "https:"
           const autoGeneratedDomain = `${protocol}//${slug}.${host}/tenant`;
-          tenantDetailsForm.setValue('domain', autoGeneratedDomain, { shouldValidate: false });
+          tenantDetailsForm.setValue("domain", autoGeneratedDomain, {
+            shouldValidate: false,
+          });
         } catch {
           // Fallback if URL parsing fails
-          const autoGeneratedDomain = `${baseUrlWithProtocol.replace(/\/$/, '')}/${slug}/tenant`;
-          tenantDetailsForm.setValue('domain', autoGeneratedDomain, { shouldValidate: false });
+          const autoGeneratedDomain = `${baseUrlWithProtocol.replace(/\/$/, "")}/${slug}/tenant`;
+          tenantDetailsForm.setValue("domain", autoGeneratedDomain, {
+            shouldValidate: false,
+          });
         }
         previousNameRef.current = nameValue;
       }
     } else if (!nameValue && previousNameRef.current) {
       // Clear domain when name is cleared
-      tenantDetailsForm.setValue('domain', '', { shouldValidate: false });
-      previousNameRef.current = '';
+      tenantDetailsForm.setValue("domain", "", { shouldValidate: false });
+      previousNameRef.current = "";
     }
   }, [nameValue, tenantDetailsForm, baseUrlWithProtocol]);
 
@@ -224,7 +262,7 @@ const EditTenant = (): ReactElement => {
   useEffect(() => {
     const loadTenant = async (): Promise<void> => {
       if (!id) {
-        setLoadError('Tenant ID is required');
+        setLoadError("Tenant ID is required");
         setIsLoadingTenant(false);
         return;
       }
@@ -236,17 +274,29 @@ const EditTenant = (): ReactElement => {
         const tenant = response.data;
 
         // Extract contact info from tenant_admin (preferred) or settings.contact (fallback)
-        const contactInfo = tenant.tenant_admin || (tenant.settings as any)?.contact || {};
+        const contactInfo =
+          tenant.tenant_admin || (tenant.settings as any)?.contact || {};
 
         // Extract branding from settings or direct tenant fields
         const branding = (tenant.settings as any)?.branding || {};
-        const primaryColor = tenant.primary_color || branding.primary_color || '#112868';
-        const secondaryColor = tenant.secondary_color || branding.secondary_color || '#23DCE1';
-        const accentColor = tenant.accent_color || branding.accent_color || '#084CC8';
-        const logoPath = tenant.logo_file_path || branding.logo_file_path || null;
-        const faviconPath = tenant.favicon_file_path || branding.favicon_file_path || null;
-        const logoUuid = tenant.logo_file_attachment_uuid || branding.logo_file_attachment_uuid || null;
-        const faviconUuid = tenant.favicon_file_attachment_uuid || branding.favicon_file_attachment_uuid || null;
+        const primaryColor =
+          tenant.primary_color || branding.primary_color || "#112868";
+        const secondaryColor =
+          tenant.secondary_color || branding.secondary_color || "#23DCE1";
+        const accentColor =
+          tenant.accent_color || branding.accent_color || "#084CC8";
+        const logoPath =
+          tenant.logo_file_path || branding.logo_file_path || null;
+        const faviconPath =
+          tenant.favicon_file_path || branding.favicon_file_path || null;
+        const logoUuid =
+          tenant.logo_file_attachment_uuid ||
+          branding.logo_file_attachment_uuid ||
+          null;
+        const faviconUuid =
+          tenant.favicon_file_attachment_uuid ||
+          branding.favicon_file_attachment_uuid ||
+          null;
 
         // Set file paths and URLs if they exist
         if (logoPath) {
@@ -265,9 +315,9 @@ const EditTenant = (): ReactElement => {
 
         // Validate subscription_tier
         const validSubscriptionTier =
-          tenant.subscription_tier === 'basic' ||
-            tenant.subscription_tier === 'professional' ||
-            tenant.subscription_tier === 'enterprise'
+          tenant.subscription_tier === "basic" ||
+          tenant.subscription_tier === "professional" ||
+          tenant.subscription_tier === "enterprise"
             ? tenant.subscription_tier
             : null;
 
@@ -279,9 +329,9 @@ const EditTenant = (): ReactElement => {
         // Create initial options from assignedModules
         const initialOptions = tenant.assignedModules
           ? tenant.assignedModules.map((module) => ({
-            value: module.id,
-            label: module.name,
-          }))
+              value: module.id,
+              label: module.name,
+            }))
           : [];
 
         setSelectedModules(tenantModules);
@@ -291,7 +341,7 @@ const EditTenant = (): ReactElement => {
         tenantDetailsForm.reset({
           name: tenant.name,
           slug: tenant.slug,
-          domain: tenant.domain || '',
+          domain: tenant.domain || "",
           status: tenant.status,
           subscription_tier: validSubscriptionTier,
           max_users: tenant.max_users,
@@ -303,16 +353,16 @@ const EditTenant = (): ReactElement => {
         previousNameRef.current = tenant.name;
 
         contactDetailsForm.reset({
-          email: contactInfo.email || '',
-          first_name: contactInfo.first_name || '',
-          last_name: contactInfo.last_name || '',
-          contact_phone: contactInfo.contact_phone || '',
-          address_line1: contactInfo.address_line1 || '',
-          address_line2: contactInfo.address_line2 || '',
-          city: contactInfo.city || '',
-          state: contactInfo.state || '',
-          postal_code: contactInfo.postal_code || '',
-          country: contactInfo.country || '',
+          email: contactInfo.email || "",
+          first_name: contactInfo.first_name || "",
+          last_name: contactInfo.last_name || "",
+          contact_phone: contactInfo.contact_phone || "",
+          address_line1: contactInfo.address_line1 || "",
+          address_line2: contactInfo.address_line2 || "",
+          city: contactInfo.city || "",
+          state: contactInfo.state || "",
+          postal_code: contactInfo.postal_code || "",
+          country: contactInfo.country || "",
         });
 
         settingsForm.reset({
@@ -323,8 +373,11 @@ const EditTenant = (): ReactElement => {
           accent_color: accentColor,
         });
       } catch (err: any) {
-        setLoadError(err?.response?.data?.error?.message || 'Failed to load tenant details');
-        showToast.error('Failed to load tenant details');
+        setLoadError(
+          err?.response?.data?.error?.message ||
+            "Failed to load tenant details",
+        );
+        showToast.error("Failed to load tenant details");
       } finally {
         setIsLoadingTenant(false);
       }
@@ -337,26 +390,31 @@ const EditTenant = (): ReactElement => {
     if (currentStep === 1) {
       const isValid = await tenantDetailsForm.trigger();
       if (isValid) {
-        const modules = tenantDetailsForm.getValues('modules') || [];
+        const modules = tenantDetailsForm.getValues("modules") || [];
         if (modules.length > 0 && initialModuleOptions.length === 0) {
           try {
-            const moduleOptionsPromises = modules.map(async (moduleId: string) => {
-              try {
-                const moduleResponse = await moduleService.getById(moduleId);
-                return {
-                  value: moduleId,
-                  label: moduleResponse.data.name,
-                };
-              } catch {
-                return null;
-              }
-            });
-            const moduleOptions = (await Promise.all(moduleOptionsPromises)).filter(
-              (opt) => opt !== null
-            ) as Array<{ value: string; label: string }>;
+            const moduleOptionsPromises = modules.map(
+              async (moduleId: string) => {
+                try {
+                  const moduleResponse = await moduleService.getById(moduleId);
+                  return {
+                    value: moduleId,
+                    label: moduleResponse.data.name,
+                  };
+                } catch {
+                  return null;
+                }
+              },
+            );
+            const moduleOptions = (
+              await Promise.all(moduleOptionsPromises)
+            ).filter((opt) => opt !== null) as Array<{
+              value: string;
+              label: string;
+            }>;
             setInitialModuleOptions(moduleOptions);
           } catch (err) {
-            console.warn('Failed to load module names:', err);
+            console.warn("Failed to load module names:", err);
           }
         }
         setCurrentStep(2);
@@ -372,27 +430,33 @@ const EditTenant = (): ReactElement => {
   const handlePrevious = (): void => {
     if (currentStep > 1) {
       if (currentStep === 2) {
-        const modules = tenantDetailsForm.getValues('modules') || [];
+        const modules = tenantDetailsForm.getValues("modules") || [];
         if (modules.length > 0 && initialModuleOptions.length === 0) {
           const loadModuleOptions = async () => {
             try {
-              const moduleOptionsPromises = modules.map(async (moduleId: string) => {
-                try {
-                  const moduleResponse = await moduleService.getById(moduleId);
-                  return {
-                    value: moduleId,
-                    label: moduleResponse.data.name,
-                  };
-                } catch {
-                  return null;
-                }
-              });
-              const moduleOptions = (await Promise.all(moduleOptionsPromises)).filter(
-                (opt) => opt !== null
-              ) as Array<{ value: string; label: string }>;
+              const moduleOptionsPromises = modules.map(
+                async (moduleId: string) => {
+                  try {
+                    const moduleResponse =
+                      await moduleService.getById(moduleId);
+                    return {
+                      value: moduleId,
+                      label: moduleResponse.data.name,
+                    };
+                  } catch {
+                    return null;
+                  }
+                },
+              );
+              const moduleOptions = (
+                await Promise.all(moduleOptionsPromises)
+              ).filter((opt) => opt !== null) as Array<{
+                value: string;
+                label: string;
+              }>;
               setInitialModuleOptions(moduleOptions);
             } catch (err) {
-              console.warn('Failed to load module names:', err);
+              console.warn("Failed to load module names:", err);
             }
           };
           loadModuleOptions();
@@ -412,9 +476,11 @@ const EditTenant = (): ReactElement => {
     setLogoFileAttachmentUuid(null);
     setLogoError(null);
     // Reset the file input
-    const fileInput = document.getElementById('logo-upload-edit-page') as HTMLInputElement;
+    const fileInput = document.getElementById(
+      "logo-upload-edit-page",
+    ) as HTMLInputElement;
     if (fileInput) {
-      fileInput.value = '';
+      fileInput.value = "";
     }
   };
 
@@ -429,9 +495,11 @@ const EditTenant = (): ReactElement => {
     setFaviconFileAttachmentUuid(null);
     setFaviconError(null);
     // Reset the file input
-    const fileInput = document.getElementById('favicon-upload-edit-page') as HTMLInputElement;
+    const fileInput = document.getElementById(
+      "favicon-upload-edit-page",
+    ) as HTMLInputElement;
     if (fileInput) {
-      fileInput.value = '';
+      fileInput.value = "";
     }
   };
 
@@ -449,11 +517,11 @@ const EditTenant = (): ReactElement => {
     const isFaviconMissing = !faviconFilePath;
 
     if (isLogoMissing) {
-      setLogoError('Logo is required');
+      setLogoError("Logo is required");
     }
 
     if (isFaviconMissing) {
-      setFaviconError('Favicon is required');
+      setFaviconError("Favicon is required");
     }
 
     if (isLogoMissing || isFaviconMissing) {
@@ -468,7 +536,13 @@ const EditTenant = (): ReactElement => {
       const settings = settingsForm.getValues();
 
       const { modules, ...restTenantDetails } = tenantDetails;
-      const { enable_sso, enable_2fa, primary_color, secondary_color, accent_color } = settings;
+      const {
+        enable_sso,
+        enable_2fa,
+        primary_color,
+        secondary_color,
+        accent_color,
+      } = settings;
 
       const tenantData = {
         ...restTenantDetails,
@@ -484,15 +558,16 @@ const EditTenant = (): ReactElement => {
             logo_file_path: logoFilePath || undefined,
             logo_file_attachment_uuid: logoFileAttachmentUuid || undefined,
             favicon_file_path: faviconFilePath || undefined,
-            favicon_file_attachment_uuid: faviconFileAttachmentUuid || undefined,
+            favicon_file_attachment_uuid:
+              faviconFileAttachmentUuid || undefined,
           },
         },
       };
 
       const response = await tenantService.update(id, tenantData);
-      const message = response.message || 'Tenant updated successfully';
+      const message = response.message || "Tenant updated successfully";
       showToast.success(message);
-      navigate('/tenants');
+      navigate("/tenants");
     } catch (err: any) {
       // Clear previous errors
       tenantDetailsForm.clearErrors();
@@ -500,100 +575,108 @@ const EditTenant = (): ReactElement => {
       settingsForm.clearErrors();
 
       // Handle validation errors from API
-      if (err?.response?.data?.details && Array.isArray(err.response.data.details)) {
+      if (
+        err?.response?.data?.details &&
+        Array.isArray(err.response.data.details)
+      ) {
         const validationErrors = err.response.data.details;
         let hasTenantErrors = false;
         let hasContactErrors = false;
         let hasSettingsErrors = false;
 
-        validationErrors.forEach((detail: { path: string; message: string }) => {
-          const path = detail.path;
+        validationErrors.forEach(
+          (detail: { path: string; message: string }) => {
+            const path = detail.path;
 
-          // Handle nested paths first
-          if (path.startsWith('settings.contact.')) {
-            // Contact details errors from nested path
-            hasContactErrors = true;
-            const fieldName = path.replace('settings.contact.', '');
-            contactDetailsForm.setError(fieldName as keyof ContactDetailsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          } else if (path.startsWith('settings.branding.')) {
-            // Settings/branding errors from nested path
-            hasSettingsErrors = true;
-            const fieldName = path.replace('settings.branding.', '');
-            // Map file_path fields to form fields
-            if (fieldName === 'logo_file_path') {
-              setLogoError(detail.message);
-            } else if (fieldName === 'favicon_file_path') {
-              setFaviconError(detail.message);
-            } else {
+            // Handle nested paths first
+            if (path.startsWith("settings.contact.")) {
+              // Contact details errors from nested path
+              hasContactErrors = true;
+              const fieldName = path.replace("settings.contact.", "");
+              contactDetailsForm.setError(
+                fieldName as keyof ContactDetailsForm,
+                {
+                  type: "server",
+                  message: detail.message,
+                },
+              );
+            } else if (path.startsWith("settings.branding.")) {
+              // Settings/branding errors from nested path
+              hasSettingsErrors = true;
+              const fieldName = path.replace("settings.branding.", "");
+              // Map file_path fields to form fields
+              if (fieldName === "logo_file_path") {
+                setLogoError(detail.message);
+              } else if (fieldName === "favicon_file_path") {
+                setFaviconError(detail.message);
+              } else {
+                settingsForm.setError(fieldName as keyof SettingsForm, {
+                  type: "server",
+                  message: detail.message,
+                });
+              }
+            } else if (path.startsWith("settings.")) {
+              // Other settings errors
+              hasSettingsErrors = true;
+              const fieldName = path.replace("settings.", "");
               settingsForm.setError(fieldName as keyof SettingsForm, {
-                type: 'server',
+                type: "server",
                 message: detail.message,
               });
             }
-          } else if (path.startsWith('settings.')) {
-            // Other settings errors
-            hasSettingsErrors = true;
-            const fieldName = path.replace('settings.', '');
-            settingsForm.setError(fieldName as keyof SettingsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          }
-          // Handle tenant details errors (step 1)
-          else if (
-            path === 'name' ||
-            path === 'slug' ||
-            path === 'domain' ||
-            path === 'status' ||
-            path === 'subscription_tier' ||
-            path === 'max_users' ||
-            path === 'max_modules' ||
-            path === 'module_ids'
-          ) {
-            hasTenantErrors = true;
-            const fieldPath = path === 'module_ids' ? 'modules' : path;
-            tenantDetailsForm.setError(fieldPath as keyof TenantDetailsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          }
-          // Handle contact details errors (step 2) - direct paths
-          else if (
-            path === 'email' ||
-            path === 'first_name' ||
-            path === 'last_name' ||
-            path === 'contact_phone' ||
-            path === 'address_line1' ||
-            path === 'address_line2' ||
-            path === 'city' ||
-            path === 'state' ||
-            path === 'postal_code' ||
-            path === 'country'
-          ) {
-            hasContactErrors = true;
-            contactDetailsForm.setError(path as keyof ContactDetailsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          }
-          // Handle settings errors (step 3) - direct paths
-          else if (
-            path === 'enable_sso' ||
-            path === 'enable_2fa' ||
-            path === 'primary_color' ||
-            path === 'secondary_color' ||
-            path === 'accent_color'
-          ) {
-            hasSettingsErrors = true;
-            settingsForm.setError(path as keyof SettingsForm, {
-              type: 'server',
-              message: detail.message,
-            });
-          }
-        });
+            // Handle tenant details errors (step 1)
+            else if (
+              path === "name" ||
+              path === "slug" ||
+              path === "domain" ||
+              path === "status" ||
+              path === "subscription_tier" ||
+              path === "max_users" ||
+              path === "max_modules" ||
+              path === "module_ids"
+            ) {
+              hasTenantErrors = true;
+              const fieldPath = path === "module_ids" ? "modules" : path;
+              tenantDetailsForm.setError(fieldPath as keyof TenantDetailsForm, {
+                type: "server",
+                message: detail.message,
+              });
+            }
+            // Handle contact details errors (step 2) - direct paths
+            else if (
+              path === "email" ||
+              path === "first_name" ||
+              path === "last_name" ||
+              path === "contact_phone" ||
+              path === "address_line1" ||
+              path === "address_line2" ||
+              path === "city" ||
+              path === "state" ||
+              path === "postal_code" ||
+              path === "country"
+            ) {
+              hasContactErrors = true;
+              contactDetailsForm.setError(path as keyof ContactDetailsForm, {
+                type: "server",
+                message: detail.message,
+              });
+            }
+            // Handle settings errors (step 3) - direct paths
+            else if (
+              path === "enable_sso" ||
+              path === "enable_2fa" ||
+              path === "primary_color" ||
+              path === "secondary_color" ||
+              path === "accent_color"
+            ) {
+              hasSettingsErrors = true;
+              settingsForm.setError(path as keyof SettingsForm, {
+                type: "server",
+                message: detail.message,
+              });
+            }
+          },
+        );
 
         // Navigate to the step with errors
         if (hasTenantErrors) {
@@ -607,16 +690,27 @@ const EditTenant = (): ReactElement => {
         // Handle general errors
         const errorObj = err?.response?.data?.error;
         const errorMessage =
-          (typeof errorObj === 'object' && errorObj !== null && 'message' in errorObj ? errorObj.message : null) ||
-          (typeof errorObj === 'string' ? errorObj : null) ||
+          (typeof errorObj === "object" &&
+          errorObj !== null &&
+          "message" in errorObj
+            ? errorObj.message
+            : null) ||
+          (typeof errorObj === "string" ? errorObj : null) ||
           err?.response?.data?.message ||
           err?.message ||
-          'Failed to update tenant. Please try again.';
-        tenantDetailsForm.setError('root', {
-          type: 'server',
-          message: typeof errorMessage === 'string' ? errorMessage : 'Failed to update tenant. Please try again.',
+          "Failed to update tenant. Please try again.";
+        tenantDetailsForm.setError("root", {
+          type: "server",
+          message:
+            typeof errorMessage === "string"
+              ? errorMessage
+              : "Failed to update tenant. Please try again.",
         });
-        showToast.error(typeof errorMessage === 'string' ? errorMessage : 'Failed to update tenant. Please try again.');
+        showToast.error(
+          typeof errorMessage === "string"
+            ? errorMessage
+            : "Failed to update tenant. Please try again.",
+        );
         setCurrentStep(1); // Navigate to first step for general errors
       }
     } finally {
@@ -627,22 +721,22 @@ const EditTenant = (): ReactElement => {
   const steps = [
     {
       number: 1,
-      title: 'Tenant Details',
-      description: 'Basic organization information',
+      title: "Tenant Details",
+      description: "Basic organization information",
       isActive: currentStep === 1,
       isCompleted: currentStep > 1,
     },
     {
       number: 2,
-      title: 'Contact Details',
-      description: 'Primary contact & address',
+      title: "Contact Details",
+      description: "Primary contact & address",
       isActive: currentStep === 2,
       isCompleted: currentStep > 2,
     },
     {
       number: 3,
-      title: 'Settings',
-      description: 'Security & branding',
+      title: "Settings",
+      description: "Security & branding",
       isActive: currentStep === 3,
       isCompleted: false,
     },
@@ -653,13 +747,13 @@ const EditTenant = (): ReactElement => {
       <Layout
         currentPage="Edit Tenant"
         breadcrumbs={[
-          { label: 'QAssure', path: '/dashboard' },
-          { label: 'Tenant Management', path: '/tenants' },
-          { label: 'Edit Tenant' },
+          { label: "QAssure", path: "/dashboard" },
+          { label: "Tenant Management", path: "/tenants" },
+          { label: "Edit Tenant" },
         ]}
         pageHeader={{
-          title: 'Edit Tenant',
-          description: 'Update tenant information',
+          title: "Edit Tenant",
+          description: "Update tenant information",
         }}
       >
         <div className="flex items-center justify-center py-12">
@@ -674,13 +768,13 @@ const EditTenant = (): ReactElement => {
       <Layout
         currentPage="Edit Tenant"
         breadcrumbs={[
-          { label: 'QAssure', path: '/dashboard' },
-          { label: 'Tenant Management', path: '/tenants' },
-          { label: 'Edit Tenant' },
+          { label: "QAssure", path: "/dashboard" },
+          { label: "Tenant Management", path: "/tenants" },
+          { label: "Edit Tenant" },
         ]}
         pageHeader={{
-          title: 'Edit Tenant',
-          description: 'Update tenant information',
+          title: "Edit Tenant",
+          description: "Update tenant information",
         }}
       >
         <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md">
@@ -694,46 +788,53 @@ const EditTenant = (): ReactElement => {
     <Layout
       currentPage="Edit Tenant"
       breadcrumbs={[
-        { label: 'QAssure', path: '/dashboard' },
-        { label: 'Tenant Management', path: '/tenants' },
-        { label: 'Edit Tenant' },
+        { label: "QAssure", path: "/dashboard" },
+        { label: "Tenant Management", path: "/tenants" },
+        { label: "Edit Tenant" },
       ]}
       pageHeader={{
-        title: 'Edit Tenant',
-        description: 'Update tenant information',
+        title: "Edit Tenant",
+        description: "Update tenant information",
       }}
     >
       <div className="flex flex-col lg:flex-row gap-4">
         {/* Steps Sidebar */}
         <div className="w-full lg:w-[260px] bg-white border border-[rgba(0,0,0,0.08)] rounded-lg p-5">
           <div className="mb-4">
-            <h3 className="text-xs font-medium text-[#6b7280] uppercase tracking-wide">Steps</h3>
+            <h3 className="text-xs font-medium text-[#6b7280] uppercase tracking-wide">
+              Steps
+            </h3>
           </div>
           <div className="flex flex-col gap-2">
             {steps.map((step) => (
               <div
                 key={step.number}
-                className={`flex gap-2.5 items-center px-3 py-2 rounded-md ${step.isActive ? 'bg-[#f5f7fa]' : ''
-                  }`}
+                className={`flex gap-2.5 items-center px-3 py-2 rounded-md ${
+                  step.isActive ? "bg-[#f5f7fa]" : ""
+                }`}
               >
                 <div
-                  className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${step.isActive
-                    ? 'bg-[#23dce1] border border-[#23dce1] text-[#112868]'
-                    : step.isCompleted
-                      ? 'bg-[#23dce1] border border-[#23dce1] text-[#112868]'
-                      : 'bg-white border border-[rgba(0,0,0,0.08)] text-[#6b7280]'
-                    }`}
+                  className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${
+                    step.isActive
+                      ? "bg-[#23dce1] border border-[#23dce1] text-[#112868]"
+                      : step.isCompleted
+                        ? "bg-[#23dce1] border border-[#23dce1] text-[#112868]"
+                        : "bg-white border border-[rgba(0,0,0,0.08)] text-[#6b7280]"
+                  }`}
                 >
                   {step.number}
                 </div>
                 <div className="flex-1">
                   <div
-                    className={`text-sm font-medium ${step.isActive ? 'text-[#0f1724]' : 'text-[#0f1724]'
-                      }`}
+                    className={`text-sm font-medium ${
+                      step.isActive ? "text-[#0f1724]" : "text-[#0f1724]"
+                    }`}
                   >
                     {step.title}
                   </div>
-                  <div className="text-xs text-[#6b7280]">{step.description}</div>
+                  <div className="text-xs text-[#6b7280]">
+                    {step.description}
+                  </div>
                 </div>
               </div>
             ))}
@@ -746,12 +847,18 @@ const EditTenant = (): ReactElement => {
           {currentStep === 1 && (
             <div className="space-y-4">
               <div className="pb-4 border-b border-[rgba(0,0,0,0.08)]">
-                <h2 className="text-lg font-semibold text-[#0f1724]">Tenant Details</h2>
-                <p className="text-sm text-[#6b7280] mt-1">Basic information for the organization.</p>
+                <h2 className="text-lg font-semibold text-[#0f1724]">
+                  Tenant Details
+                </h2>
+                <p className="text-sm text-[#6b7280] mt-1">
+                  Basic information for the organization.
+                </p>
               </div>
               {tenantDetailsForm.formState.errors.root && (
                 <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
-                  <p className="text-sm text-[#ef4444]">{tenantDetailsForm.formState.errors.root.message}</p>
+                  <p className="text-sm text-[#ef4444]">
+                    {tenantDetailsForm.formState.errors.root.message}
+                  </p>
                 </div>
               )}
 
@@ -761,20 +868,20 @@ const EditTenant = (): ReactElement => {
                   required
                   placeholder="Enter tenant name"
                   error={tenantDetailsForm.formState.errors.name?.message}
-                  {...tenantDetailsForm.register('name')}
+                  {...tenantDetailsForm.register("name")}
                 />
                 <FormField
                   label="Slug"
                   required
                   placeholder="Enter slug (lowercase, numbers, hyphens only)"
                   error={tenantDetailsForm.formState.errors.slug?.message}
-                  {...tenantDetailsForm.register('slug')}
+                  {...tenantDetailsForm.register("slug")}
                 />
                 <FormField
                   label="Domain"
                   placeholder="Enter domain"
                   error={tenantDetailsForm.formState.errors.domain?.message}
-                  {...tenantDetailsForm.register('domain')}
+                  {...tenantDetailsForm.register("domain")}
                 />
                 <div className="flex gap-5">
                   <div className="flex-1">
@@ -783,9 +890,12 @@ const EditTenant = (): ReactElement => {
                       required
                       placeholder="Select Status"
                       options={statusOptions}
-                      value={tenantDetailsForm.watch('status')}
+                      value={tenantDetailsForm.watch("status")}
                       onValueChange={(value) =>
-                        tenantDetailsForm.setValue('status', value as 'active' | 'suspended' | 'deleted')
+                        tenantDetailsForm.setValue(
+                          "status",
+                          value as "active" | "suspended" | "deleted",
+                        )
                       }
                       error={tenantDetailsForm.formState.errors.status?.message}
                     />
@@ -795,14 +905,22 @@ const EditTenant = (): ReactElement => {
                       label="Subscription Tier"
                       placeholder="Select Subscription"
                       options={subscriptionTierOptions}
-                      value={tenantDetailsForm.watch('subscription_tier') || ''}
+                      value={tenantDetailsForm.watch("subscription_tier") || ""}
                       onValueChange={(value) =>
                         tenantDetailsForm.setValue(
-                          'subscription_tier',
-                          value === '' ? null : (value as 'basic' | 'professional' | 'enterprise')
+                          "subscription_tier",
+                          value === ""
+                            ? null
+                            : (value as
+                                | "basic"
+                                | "professional"
+                                | "enterprise"),
                         )
                       }
-                      error={tenantDetailsForm.formState.errors.subscription_tier?.message}
+                      error={
+                        tenantDetailsForm.formState.errors.subscription_tier
+                          ?.message
+                      }
                     />
                   </div>
                 </div>
@@ -814,10 +932,17 @@ const EditTenant = (): ReactElement => {
                       min="1"
                       step="1"
                       placeholder="Enter number"
-                      error={tenantDetailsForm.formState.errors.max_users?.message}
-                      {...tenantDetailsForm.register('max_users', {
+                      error={
+                        tenantDetailsForm.formState.errors.max_users?.message
+                      }
+                      {...tenantDetailsForm.register("max_users", {
                         setValueAs: (value) => {
-                          if (value === '' || value === null || value === undefined) return null;
+                          if (
+                            value === "" ||
+                            value === null ||
+                            value === undefined
+                          )
+                            return null;
                           const num = Number(value);
                           return isNaN(num) ? null : num;
                         },
@@ -831,10 +956,17 @@ const EditTenant = (): ReactElement => {
                       min="1"
                       step="1"
                       placeholder="Enter number"
-                      error={tenantDetailsForm.formState.errors.max_modules?.message}
-                      {...tenantDetailsForm.register('max_modules', {
+                      error={
+                        tenantDetailsForm.formState.errors.max_modules?.message
+                      }
+                      {...tenantDetailsForm.register("max_modules", {
                         setValueAs: (value) => {
-                          if (value === '' || value === null || value === undefined) return null;
+                          if (
+                            value === "" ||
+                            value === null ||
+                            value === undefined
+                          )
+                            return null;
                           const num = Number(value);
                           return isNaN(num) ? null : num;
                         },
@@ -848,7 +980,10 @@ const EditTenant = (): ReactElement => {
                   value={selectedModules}
                   onValueChange={(values) => {
                     setSelectedModules(values);
-                    tenantDetailsForm.setValue('modules', values.length > 0 ? values : []);
+                    tenantDetailsForm.setValue(
+                      "modules",
+                      values.length > 0 ? values : [],
+                    );
                   }}
                   onLoadOptions={loadModules}
                   initialOptions={initialModuleOptions}
@@ -862,12 +997,18 @@ const EditTenant = (): ReactElement => {
           {currentStep === 2 && (
             <div className="space-y-4">
               <div className="pb-4 border-b border-[rgba(0,0,0,0.08)]">
-                <h2 className="text-lg font-semibold text-[#0f1724]">Contact Details</h2>
-                <p className="text-sm text-[#6b7280] mt-1">Contact information for the main account administrator.</p>
+                <h2 className="text-lg font-semibold text-[#0f1724]">
+                  Contact Details
+                </h2>
+                <p className="text-sm text-[#6b7280] mt-1">
+                  Contact information for the main account administrator.
+                </p>
               </div>
               {contactDetailsForm.formState.errors.root && (
                 <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
-                  <p className="text-sm text-[#ef4444]">{contactDetailsForm.formState.errors.root.message}</p>
+                  <p className="text-sm text-[#ef4444]">
+                    {contactDetailsForm.formState.errors.root.message}
+                  </p>
                 </div>
               )}
               <div className="space-y-4">
@@ -878,22 +1019,26 @@ const EditTenant = (): ReactElement => {
                     required
                     placeholder="Enter email address"
                     error={contactDetailsForm.formState.errors.email?.message}
-                    {...contactDetailsForm.register('email')}
+                    {...contactDetailsForm.register("email")}
                   />
                   <div className="grid grid-cols-2 gap-5 mt-4">
                     <FormField
                       label="First Name"
                       required
                       placeholder="Enter first name"
-                      error={contactDetailsForm.formState.errors.first_name?.message}
-                      {...contactDetailsForm.register('first_name')}
+                      error={
+                        contactDetailsForm.formState.errors.first_name?.message
+                      }
+                      {...contactDetailsForm.register("first_name")}
                     />
                     <FormField
                       label="Last Name"
                       required
                       placeholder="Enter last name"
-                      error={contactDetailsForm.formState.errors.last_name?.message}
-                      {...contactDetailsForm.register('last_name')}
+                      error={
+                        contactDetailsForm.formState.errors.last_name?.message
+                      }
+                      {...contactDetailsForm.register("last_name")}
                     />
                   </div>
                   <div className="mt-4">
@@ -902,47 +1047,66 @@ const EditTenant = (): ReactElement => {
                       type="tel"
                       placeholder="Enter 10-digit phone number"
                       maxLength={10}
-                      error={contactDetailsForm.formState.errors.contact_phone?.message}
-                      {...contactDetailsForm.register('contact_phone', {
+                      error={
+                        contactDetailsForm.formState.errors.contact_phone
+                          ?.message
+                      }
+                      {...contactDetailsForm.register("contact_phone", {
                         onChange: (e) => {
                           // Only allow digits and limit to 10 characters
-                          const value = e.target.value.replace(/\D/g, '').slice(0, 10);
-                          contactDetailsForm.setValue('contact_phone', value, { shouldValidate: true });
+                          const value = e.target.value
+                            .replace(/\D/g, "")
+                            .slice(0, 10);
+                          contactDetailsForm.setValue("contact_phone", value, {
+                            shouldValidate: true,
+                          });
                         },
                       })}
                     />
                   </div>
                 </div>
                 <div className="border-b border-dashed border-[rgba(0,0,0,0.08)] pb-4">
-                  <h3 className="text-sm font-medium text-[#0f1724] mb-4">Organization Address</h3>
+                  <h3 className="text-sm font-medium text-[#0f1724] mb-4">
+                    Organization Address
+                  </h3>
                   <div className="space-y-4">
                     <FormField
                       label="Address Line 1"
                       required
                       placeholder="Enter address line 1"
-                      error={contactDetailsForm.formState.errors.address_line1?.message}
-                      {...contactDetailsForm.register('address_line1')}
+                      error={
+                        contactDetailsForm.formState.errors.address_line1
+                          ?.message
+                      }
+                      {...contactDetailsForm.register("address_line1")}
                     />
                     <FormField
                       label="Address Line 2"
                       placeholder="Enter address line 2 (optional)"
-                      error={contactDetailsForm.formState.errors.address_line2?.message}
-                      {...contactDetailsForm.register('address_line2')}
+                      error={
+                        contactDetailsForm.formState.errors.address_line2
+                          ?.message
+                      }
+                      {...contactDetailsForm.register("address_line2")}
                     />
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <FormField
                         label="City"
                         required
                         placeholder="Enter city"
-                        error={contactDetailsForm.formState.errors.city?.message}
-                        {...contactDetailsForm.register('city')}
+                        error={
+                          contactDetailsForm.formState.errors.city?.message
+                        }
+                        {...contactDetailsForm.register("city")}
                       />
                       <FormField
                         label="State"
                         required
                         placeholder="Enter state"
-                        error={contactDetailsForm.formState.errors.state?.message}
-                        {...contactDetailsForm.register('state')}
+                        error={
+                          contactDetailsForm.formState.errors.state?.message
+                        }
+                        {...contactDetailsForm.register("state")}
                       />
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -950,10 +1114,15 @@ const EditTenant = (): ReactElement => {
                         label="Postal Code"
                         required
                         placeholder="Enter postal code"
-                        error={contactDetailsForm.formState.errors.postal_code?.message}
-                        {...contactDetailsForm.register('postal_code', {
+                        error={
+                          contactDetailsForm.formState.errors.postal_code
+                            ?.message
+                        }
+                        {...contactDetailsForm.register("postal_code", {
                           onChange: (e) => {
-                            e.target.value = e.target.value.replace(/\D/g, '').slice(0, 6);
+                            e.target.value = e.target.value
+                              .replace(/\D/g, "")
+                              .slice(0, 6);
                           },
                         })}
                       />
@@ -962,8 +1131,10 @@ const EditTenant = (): ReactElement => {
                         label="Country"
                         required
                         placeholder="Enter country"
-                        error={contactDetailsForm.formState.errors.country?.message}
-                        {...contactDetailsForm.register('country')}
+                        error={
+                          contactDetailsForm.formState.errors.country?.message
+                        }
+                        {...contactDetailsForm.register("country")}
                       />
                     </div>
                   </div>
@@ -976,22 +1147,31 @@ const EditTenant = (): ReactElement => {
           {currentStep === 3 && (
             <div className="space-y-6">
               <div className="pb-4 border-b border-[rgba(0,0,0,0.08)]">
-                <h2 className="text-lg font-semibold text-[#0f1724]">Configuration & Limits</h2>
-                <p className="text-sm text-[#6b7280] mt-1">Set resource limits and security preferences for this tenant.</p>
+                <h2 className="text-lg font-semibold text-[#0f1724]">
+                  Configuration & Limits
+                </h2>
+                <p className="text-sm text-[#6b7280] mt-1">
+                  Set resource limits and security preferences for this tenant.
+                </p>
               </div>
               {/* General Error Display */}
               {settingsForm.formState.errors.root && (
                 <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
-                  <p className="text-sm text-[#ef4444]">{settingsForm.formState.errors.root.message}</p>
+                  <p className="text-sm text-[#ef4444]">
+                    {settingsForm.formState.errors.root.message}
+                  </p>
                 </div>
               )}
 
               {/* Branding Section - Same as CreateTenantWizard */}
               <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg p-4 md:p-6 flex flex-col gap-4">
                 <div className="flex flex-col gap-1">
-                  <h3 className="text-base font-semibold text-[#0f1724]">Branding</h3>
+                  <h3 className="text-base font-semibold text-[#0f1724]">
+                    Branding
+                  </h3>
                   <p className="text-sm font-normal text-[#9ca3af]">
-                    Customize logo, favicon, and colors for this tenant experience.
+                    Customize logo, favicon, and colors for this tenant
+                    experience.
                   </p>
                 </div>
 
@@ -1010,8 +1190,12 @@ const EditTenant = (): ReactElement => {
                         <ImageIcon className="w-5 h-5 text-[#6b7280]" />
                       </div>
                       <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                        <span className="text-sm font-medium text-[#0f1724]">Upload Logo</span>
-                        <span className="text-xs font-normal text-[#9ca3af]">PNG, SVG, JPG up to 2MB.</span>
+                        <span className="text-sm font-medium text-[#0f1724]">
+                          Upload Logo
+                        </span>
+                        <span className="text-xs font-normal text-[#9ca3af]">
+                          PNG, SVG, JPG up to 2MB.
+                        </span>
                       </div>
                       <input
                         id="logo-upload-edit-page"
@@ -1021,12 +1205,21 @@ const EditTenant = (): ReactElement => {
                           const file = e.target.files?.[0];
                           if (file) {
                             if (file.size > 2 * 1024 * 1024) {
-                              showToast.error('Logo file size must be less than 2MB');
+                              showToast.error(
+                                "Logo file size must be less than 2MB",
+                              );
                               return;
                             }
-                            const validTypes = ['image/png', 'image/svg+xml', 'image/jpeg', 'image/jpg'];
+                            const validTypes = [
+                              "image/png",
+                              "image/svg+xml",
+                              "image/jpeg",
+                              "image/jpg",
+                            ];
                             if (!validTypes.includes(file.type)) {
-                              showToast.error('Logo must be PNG, SVG, or JPG format');
+                              showToast.error(
+                                "Logo must be PNG, SVG, or JPG format",
+                              );
                               return;
                             }
                             if (logoPreviewUrl) {
@@ -1037,8 +1230,13 @@ const EditTenant = (): ReactElement => {
                             setLogoPreviewUrl(previewUrl);
                             setIsUploadingLogo(true);
                             try {
-                              const slug = tenantDetailsForm.getValues('slug');
-                              const response = await fileService.upload(file, slug || 'tenant', id, id);
+                              const slug = tenantDetailsForm.getValues("slug");
+                              const response = await fileService.upload(
+                                file,
+                                slug || "tenant",
+                                crypto.randomUUID(),
+                                id,
+                              );
                               const fileId = response.data.id;
                               setLogoFileAttachmentUuid(fileId);
 
@@ -1048,13 +1246,13 @@ const EditTenant = (): ReactElement => {
                               setLogoPreviewUrl(formattedUrl);
 
                               setLogoError(null);
-                              showToast.success('Logo uploaded successfully');
+                              showToast.success("Logo uploaded successfully");
                             } catch (err: any) {
                               const errorMessage =
                                 err?.response?.data?.error?.message ||
                                 err?.response?.data?.message ||
                                 err?.message ||
-                                'Failed to upload logo. Please try again.';
+                                "Failed to upload logo. Please try again.";
                               showToast.error(errorMessage);
                               setLogoFile(null);
                               URL.revokeObjectURL(previewUrl);
@@ -1076,7 +1274,9 @@ const EditTenant = (): ReactElement => {
                       <div className="flex flex-col gap-2 mt-1">
                         {logoFile && (
                           <div className="text-xs text-[#6b7280]">
-                            {isUploadingLogo ? 'Uploading...' : `Selected: ${logoFile.name}`}
+                            {isUploadingLogo
+                              ? "Uploading..."
+                              : `Selected: ${logoFile.name}`}
                           </div>
                         )}
                         {logoPreviewUrl && (
@@ -1087,7 +1287,7 @@ const EditTenant = (): ReactElement => {
                               src={logoPreviewUrl}
                               alt="Logo preview"
                               className="max-w-full h-20 object-contain border border-[#d1d5db] rounded-md p-2 bg-white"
-                              style={{ display: 'block', maxHeight: '80px' }}
+                              style={{ display: "block", maxHeight: "80px" }}
                             />
                             <button
                               type="button"
@@ -1116,8 +1316,12 @@ const EditTenant = (): ReactElement => {
                         <ImageIcon className="w-5 h-5 text-[#6b7280]" />
                       </div>
                       <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                        <span className="text-sm font-medium text-[#0f1724]">Upload Favicon</span>
-                        <span className="text-xs font-normal text-[#9ca3af]">ICO or PNG up to 500KB.</span>
+                        <span className="text-sm font-medium text-[#0f1724]">
+                          Upload Favicon
+                        </span>
+                        <span className="text-xs font-normal text-[#9ca3af]">
+                          ICO or PNG up to 500KB.
+                        </span>
                       </div>
                       <input
                         id="favicon-upload-edit-page"
@@ -1127,12 +1331,20 @@ const EditTenant = (): ReactElement => {
                           const file = e.target.files?.[0];
                           if (file) {
                             if (file.size > 500 * 1024) {
-                              showToast.error('Favicon file size must be less than 500KB');
+                              showToast.error(
+                                "Favicon file size must be less than 500KB",
+                              );
                               return;
                             }
-                            const validTypes = ['image/x-icon', 'image/png', 'image/vnd.microsoft.icon'];
+                            const validTypes = [
+                              "image/x-icon",
+                              "image/png",
+                              "image/vnd.microsoft.icon",
+                            ];
                             if (!validTypes.includes(file.type)) {
-                              showToast.error('Favicon must be ICO or PNG format');
+                              showToast.error(
+                                "Favicon must be ICO or PNG format",
+                              );
                               return;
                             }
                             if (faviconPreviewUrl) {
@@ -1143,8 +1355,13 @@ const EditTenant = (): ReactElement => {
                             setFaviconPreviewUrl(previewUrl);
                             setIsUploadingFavicon(true);
                             try {
-                              const slug = tenantDetailsForm.getValues('slug');
-                              const response = await fileService.upload(file, slug || 'tenant', id, id);
+                              const slug = tenantDetailsForm.getValues("slug");
+                              const response = await fileService.upload(
+                                file,
+                                slug || "tenant",
+                                crypto.randomUUID(),
+                                id,
+                              );
                               const fileId = response.data.id;
                               setFaviconFileAttachmentUuid(fileId);
 
@@ -1155,13 +1372,15 @@ const EditTenant = (): ReactElement => {
                               setFaviconPreviewUrl(formattedUrl);
 
                               setFaviconError(null);
-                              showToast.success('Favicon uploaded successfully');
+                              showToast.success(
+                                "Favicon uploaded successfully",
+                              );
                             } catch (err: any) {
                               const errorMessage =
                                 err?.response?.data?.error?.message ||
                                 err?.response?.data?.message ||
                                 err?.message ||
-                                'Failed to upload favicon. Please try again.';
+                                "Failed to upload favicon. Please try again.";
                               showToast.error(errorMessage);
                               setFaviconFile(null);
                               URL.revokeObjectURL(previewUrl);
@@ -1184,7 +1403,9 @@ const EditTenant = (): ReactElement => {
                       <div className="flex flex-col gap-2 mt-1">
                         {faviconFile && (
                           <div className="text-xs text-[#6b7280]">
-                            {isUploadingFavicon ? 'Uploading...' : `Selected: ${faviconFile.name}`}
+                            {isUploadingFavicon
+                              ? "Uploading..."
+                              : `Selected: ${faviconFile.name}`}
                           </div>
                         )}
                         {(faviconPreviewUrl || faviconFileUrl) && (
@@ -1195,7 +1416,11 @@ const EditTenant = (): ReactElement => {
                               src={faviconPreviewUrl || faviconFileUrl}
                               alt="Favicon preview"
                               className="w-16 h-16 object-contain border border-[#d1d5db] rounded-md p-2 bg-white"
-                              style={{ display: 'block', width: '64px', height: '64px' }}
+                              style={{
+                                display: "block",
+                                width: "64px",
+                                height: "64px",
+                              }}
                             />
                             <button
                               type="button"
@@ -1214,83 +1439,131 @@ const EditTenant = (): ReactElement => {
 
                 {/* Primary Color */}
                 <div className="flex flex-col gap-2">
-                  <label className="text-sm font-medium text-[#0f1724]">Primary Color</label>
+                  <label className="text-sm font-medium text-[#0f1724]">
+                    Primary Color
+                  </label>
                   <div className="flex gap-3 items-center">
                     <div
                       className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                      style={{ backgroundColor: settingsForm.watch('primary_color') || '#112868' }}
+                      style={{
+                        backgroundColor:
+                          settingsForm.watch("primary_color") || "#112868",
+                      }}
                     />
                     <div className="flex-1">
                       <input
                         type="text"
-                        value={settingsForm.watch('primary_color') || '#112868'}
-                        onChange={(e) => settingsForm.setValue('primary_color', e.target.value)}
+                        value={settingsForm.watch("primary_color") || "#112868"}
+                        onChange={(e) =>
+                          settingsForm.setValue("primary_color", e.target.value)
+                        }
                         className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
                         placeholder="#112868"
                       />
                     </div>
                     <input
                       type="color"
-                      value={settingsForm.watch('primary_color') || '#112868'}
-                      onChange={(e) => settingsForm.setValue('primary_color', e.target.value)}
+                      value={settingsForm.watch("primary_color") || "#112868"}
+                      onChange={(e) =>
+                        settingsForm.setValue("primary_color", e.target.value)
+                      }
                       className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
                     />
                   </div>
-                  <p className="text-xs font-normal text-[#9ca3af]">Used for navigation, headers, and key actions.</p>
+                  <p className="text-xs font-normal text-[#9ca3af]">
+                    Used for navigation, headers, and key actions.
+                  </p>
                 </div>
 
                 {/* Secondary and Accent Colors */}
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                   <div className="flex flex-col gap-2">
-                    <label className="text-sm font-medium text-[#0f1724]">Secondary Color</label>
+                    <label className="text-sm font-medium text-[#0f1724]">
+                      Secondary Color
+                    </label>
                     <div className="flex gap-3 items-center">
                       <div
                         className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                        style={{ backgroundColor: settingsForm.watch('secondary_color') || '#23DCE1' }}
+                        style={{
+                          backgroundColor:
+                            settingsForm.watch("secondary_color") || "#23DCE1",
+                        }}
                       />
                       <div className="flex-1">
                         <input
                           type="text"
-                          value={settingsForm.watch('secondary_color') || '#23DCE1'}
-                          onChange={(e) => settingsForm.setValue('secondary_color', e.target.value)}
+                          value={
+                            settingsForm.watch("secondary_color") || "#23DCE1"
+                          }
+                          onChange={(e) =>
+                            settingsForm.setValue(
+                              "secondary_color",
+                              e.target.value,
+                            )
+                          }
                           className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
                           placeholder="#23DCE1"
                         />
                       </div>
                       <input
                         type="color"
-                        value={settingsForm.watch('secondary_color') || '#23DCE1'}
-                        onChange={(e) => settingsForm.setValue('secondary_color', e.target.value)}
+                        value={
+                          settingsForm.watch("secondary_color") || "#23DCE1"
+                        }
+                        onChange={(e) =>
+                          settingsForm.setValue(
+                            "secondary_color",
+                            e.target.value,
+                          )
+                        }
                         className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
                       />
                     </div>
-                    <p className="text-xs font-normal text-[#9ca3af]">Used for highlights and supporting elements.</p>
+                    <p className="text-xs font-normal text-[#9ca3af]">
+                      Used for highlights and supporting elements.
+                    </p>
                   </div>
 
                   <div className="flex flex-col gap-2">
-                    <label className="text-sm font-medium text-[#0f1724]">Accent Color</label>
+                    <label className="text-sm font-medium text-[#0f1724]">
+                      Accent Color
+                    </label>
                     <div className="flex gap-3 items-center">
                       <div
                         className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                        style={{ backgroundColor: settingsForm.watch('accent_color') || '#084CC8' }}
+                        style={{
+                          backgroundColor:
+                            settingsForm.watch("accent_color") || "#084CC8",
+                        }}
                       />
                       <div className="flex-1">
                         <input
                           type="text"
-                          value={settingsForm.watch('accent_color') || '#084CC8'}
-                          onChange={(e) => settingsForm.setValue('accent_color', e.target.value)}
+                          value={
+                            settingsForm.watch("accent_color") || "#084CC8"
+                          }
+                          onChange={(e) =>
+                            settingsForm.setValue(
+                              "accent_color",
+                              e.target.value,
+                            )
+                          }
                           className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
                           placeholder="#084CC8"
                         />
                       </div>
                       <input
                         type="color"
-                        value={settingsForm.watch('accent_color') || '#084CC8'}
-                        onChange={(e) => settingsForm.setValue('accent_color', e.target.value)}
+                        value={settingsForm.watch("accent_color") || "#084CC8"}
+                        onChange={(e) =>
+                          settingsForm.setValue("accent_color", e.target.value)
+                        }
                         className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
                       />
                     </div>
-                    <p className="text-xs font-normal text-[#9ca3af]">Used for alerts and special notices.</p>
+                    <p className="text-xs font-normal text-[#9ca3af]">
+                      Used for alerts and special notices.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -1299,48 +1572,67 @@ const EditTenant = (): ReactElement => {
               <div className="space-y-4">
                 <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-md p-4 flex items-center justify-between">
                   <div>
-                    <h4 className="text-xs font-medium text-[#0f1724] mb-1">Enable Single Sign-On (SSO)</h4>
+                    <h4 className="text-xs font-medium text-[#0f1724] mb-1">
+                      Enable Single Sign-On (SSO)
+                    </h4>
                     <p className="text-[10px] text-[#6b7280]">
-                      Allow users to log in using their organization's identity provider.
+                      Allow users to log in using their organization's identity
+                      provider.
                     </p>
                   </div>
                   <label className="relative inline-flex items-center cursor-pointer">
                     <input
                       type="checkbox"
-                      {...settingsForm.register('enable_sso')}
+                      {...settingsForm.register("enable_sso")}
                       className="sr-only peer"
-                      checked={settingsForm.watch('enable_sso')}
+                      checked={settingsForm.watch("enable_sso")}
                     />
                     <div
-                      className={`w-10 h-5 rounded-full transition-colors ${settingsForm.watch('enable_sso') ? 'bg-[#23dce1]' : 'bg-[#c0c8e6]'
-                        }`}
+                      className={`w-10 h-5 rounded-full transition-colors ${
+                        settingsForm.watch("enable_sso")
+                          ? "bg-[#23dce1]"
+                          : "bg-[#c0c8e6]"
+                      }`}
                     >
                       <div
-                        className={`absolute top-[2px] left-[2px] bg-white rounded-full h-4 w-4 transition-transform ${settingsForm.watch('enable_sso') ? 'translate-x-5' : 'translate-x-0'
-                          }`}
+                        className={`absolute top-[2px] left-[2px] bg-white rounded-full h-4 w-4 transition-transform ${
+                          settingsForm.watch("enable_sso")
+                            ? "translate-x-5"
+                            : "translate-x-0"
+                        }`}
                       ></div>
                     </div>
                   </label>
                 </div>
                 <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-md p-4 flex items-center justify-between">
                   <div>
-                    <h4 className="text-xs font-medium text-[#0f1724] mb-1">Enable Two-Factor Authentication (2FA)</h4>
-                    <p className="text-[10px] text-[#6b7280]">Enforce 2FA for all users in this tenant organization.</p>
+                    <h4 className="text-xs font-medium text-[#0f1724] mb-1">
+                      Enable Two-Factor Authentication (2FA)
+                    </h4>
+                    <p className="text-[10px] text-[#6b7280]">
+                      Enforce 2FA for all users in this tenant organization.
+                    </p>
                   </div>
                   <label className="relative inline-flex items-center cursor-pointer">
                     <input
                       type="checkbox"
-                      {...settingsForm.register('enable_2fa')}
+                      {...settingsForm.register("enable_2fa")}
                       className="sr-only peer"
-                      checked={settingsForm.watch('enable_2fa')}
+                      checked={settingsForm.watch("enable_2fa")}
                     />
                     <div
-                      className={`w-10 h-5 rounded-full transition-colors ${settingsForm.watch('enable_2fa') ? 'bg-[#23dce1]' : 'bg-[#c0c8e6]'
-                        }`}
+                      className={`w-10 h-5 rounded-full transition-colors ${
+                        settingsForm.watch("enable_2fa")
+                          ? "bg-[#23dce1]"
+                          : "bg-[#c0c8e6]"
+                      }`}
                     >
                       <div
-                        className={`absolute top-[2px] left-[2px] bg-white rounded-full h-4 w-4 transition-transform ${settingsForm.watch('enable_2fa') ? 'translate-x-5' : 'translate-x-0'
-                          }`}
+                        className={`absolute top-[2px] left-[2px] bg-white rounded-full h-4 w-4 transition-transform ${
+                          settingsForm.watch("enable_2fa")
+                            ? "translate-x-5"
+                            : "translate-x-0"
+                        }`}
                       ></div>
                     </div>
                   </label>
@@ -1364,7 +1656,7 @@ const EditTenant = (): ReactElement => {
               </PrimaryButton>
             ) : (
               <PrimaryButton onClick={handleSubmit} disabled={isSubmitting}>
-                {isSubmitting ? 'Updating...' : 'Update Tenant'}
+                {isSubmitting ? "Updating..." : "Update Tenant"}
               </PrimaryButton>
             )}
           </div>
diff --git a/src/pages/tenant/Settings.tsx b/src/pages/tenant/Settings.tsx
index 325f9db..0f2406d 100644
--- a/src/pages/tenant/Settings.tsx
+++ b/src/pages/tenant/Settings.tsx
@@ -1,651 +1,713 @@
-import { Layout } from '@/components/layout/Layout';
-import { ImageIcon, Loader2, X } from 'lucide-react';
-import { useState, useEffect, type ReactElement } from 'react';
-import { useAppSelector, useAppDispatch } from '@/hooks/redux-hooks';
-import { tenantService } from '@/services/tenant-service';
-import { fileService } from '@/services/file-service';
-import { showToast } from '@/utils/toast';
-import { updateTheme } from '@/store/themeSlice';
-import { PrimaryButton, AuthenticatedImage } from '@/components/shared';
-import type { Tenant } from '@/types/tenant';
+import { Layout } from "@/components/layout/Layout";
+import { ImageIcon, Loader2, X } from "lucide-react";
+import { useState, useEffect, type ReactElement } from "react";
+import { useAppSelector, useAppDispatch } from "@/hooks/redux-hooks";
+import { tenantService } from "@/services/tenant-service";
+import { fileService } from "@/services/file-service";
+import { showToast } from "@/utils/toast";
+import { updateTheme } from "@/store/themeSlice";
+import { PrimaryButton, AuthenticatedImage } from "@/components/shared";
+import type { Tenant } from "@/types/tenant";
 
 // Helper function to get base URL with protocol
 const getBaseUrlWithProtocol = (): string => {
-    return import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
+  return import.meta.env.VITE_API_BASE_URL || "http://localhost:3000";
 };
 
 const Settings = (): ReactElement => {
-    const tenantId = useAppSelector((state) => state.auth.tenantId);
-    const dispatch = useAppDispatch();
+  const tenantId = useAppSelector((state) => state.auth.tenantId);
+  const dispatch = useAppDispatch();
 
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [isSaving, setIsSaving] = useState<boolean>(false);
-    const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
 
-    // Tenant data
-    const [tenant, setTenant] = useState<Tenant | null>(null);
+  // Tenant data
+  const [tenant, setTenant] = useState<Tenant | null>(null);
 
-    // Color states
-    const [primaryColor, setPrimaryColor] = useState<string>('#112868');
-    const [secondaryColor, setSecondaryColor] = useState<string>('#23DCE1');
-    const [accentColor, setAccentColor] = useState<string>('#084CC8');
+  // Color states
+  const [primaryColor, setPrimaryColor] = useState<string>("#112868");
+  const [secondaryColor, setSecondaryColor] = useState<string>("#23DCE1");
+  const [accentColor, setAccentColor] = useState<string>("#084CC8");
 
-    // Logo states
-    const [logoFile, setLogoFile] = useState<File | null>(null);
-    const [logoFilePath, setLogoFilePath] = useState<string | null>(null);
-    const [logoFileAttachmentUuid, setLogoFileAttachmentUuid] = useState<string | null>(null);
-    const [logoFileUrl, setLogoFileUrl] = useState<string | null>(null);
-    const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
-    const [isUploadingLogo, setIsUploadingLogo] = useState<boolean>(false);
+  // Logo states
+  const [logoFile, setLogoFile] = useState<File | null>(null);
+  const [logoFilePath, setLogoFilePath] = useState<string | null>(null);
+  const [logoFileAttachmentUuid, setLogoFileAttachmentUuid] = useState<
+    string | null
+  >(null);
+  const [logoFileUrl, setLogoFileUrl] = useState<string | null>(null);
+  const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
+  const [isUploadingLogo, setIsUploadingLogo] = useState<boolean>(false);
 
-    // Favicon states
-    const [faviconFile, setFaviconFile] = useState<File | null>(null);
-    const [faviconFilePath, setFaviconFilePath] = useState<string | null>(null);
-    const [faviconFileAttachmentUuid, setFaviconFileAttachmentUuid] = useState<string | null>(null);
-    const [faviconFileUrl, setFaviconFileUrl] = useState<string | null>(null);
-    const [faviconPreviewUrl, setFaviconPreviewUrl] = useState<string | null>(null);
-    const [isUploadingFavicon, setIsUploadingFavicon] = useState<boolean>(false);
-    const [logoError, setLogoError] = useState<string | null>(null);
-    const [faviconError, setFaviconError] = useState<string | null>(null);
+  // Favicon states
+  const [faviconFile, setFaviconFile] = useState<File | null>(null);
+  const [faviconFilePath, setFaviconFilePath] = useState<string | null>(null);
+  const [faviconFileAttachmentUuid, setFaviconFileAttachmentUuid] = useState<
+    string | null
+  >(null);
+  const [faviconFileUrl, setFaviconFileUrl] = useState<string | null>(null);
+  const [faviconPreviewUrl, setFaviconPreviewUrl] = useState<string | null>(
+    null,
+  );
+  const [isUploadingFavicon, setIsUploadingFavicon] = useState<boolean>(false);
+  const [logoError, setLogoError] = useState<string | null>(null);
+  const [faviconError, setFaviconError] = useState<string | null>(null);
 
-    // Fetch tenant data on mount
-    useEffect(() => {
-        const fetchTenant = async (): Promise<void> => {
-            if (!tenantId) {
-                setError('Tenant ID not found');
-                setIsLoading(false);
-                return;
-            }
+  // Fetch tenant data on mount
+  useEffect(() => {
+    const fetchTenant = async (): Promise<void> => {
+      if (!tenantId) {
+        setError("Tenant ID not found");
+        setIsLoading(false);
+        return;
+      }
 
-            try {
-                setIsLoading(true);
-                setError(null);
-                const response = await tenantService.getById(tenantId);
+      try {
+        setIsLoading(true);
+        setError(null);
+        const response = await tenantService.getById(tenantId);
 
-                if (response.success && response.data) {
-                    const tenantData = response.data;
-                    setTenant(tenantData);
+        if (response.success && response.data) {
+          const tenantData = response.data;
+          setTenant(tenantData);
 
-                    // Set colors
-                    setPrimaryColor(tenantData.primary_color || '#112868');
-                    setSecondaryColor(tenantData.secondary_color || '#23DCE1');
-                    setAccentColor(tenantData.accent_color || '#084CC8');
-
-                    // Set logo
-                    if (tenantData.logo_file_path) {
-                        setLogoFileUrl(tenantData.logo_file_path);
-                        setLogoFilePath(tenantData.logo_file_path);
-                        setLogoFileAttachmentUuid(tenantData.logo_file_attachment_uuid || null);
-                        setLogoError(null);
-                    }
-
-                    // Set favicon
-                    if (tenantData.favicon_file_path) {
-                        setFaviconFileUrl(tenantData.favicon_file_path);
-                        setFaviconFilePath(tenantData.favicon_file_path);
-                        setFaviconFileAttachmentUuid(tenantData.favicon_file_attachment_uuid || null);
-                        setFaviconError(null);
-                    }
-                }
-            } catch (err: any) {
-                const errorMessage =
-                    err?.response?.data?.error?.message ||
-                    err?.response?.data?.message ||
-                    err?.message ||
-                    'Failed to load tenant settings';
-                setError(errorMessage);
-                showToast.error(errorMessage);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        fetchTenant();
-    }, [tenantId]);
-
-    // Cleanup preview URLs
-    useEffect(() => {
-        return () => {
-            if (logoPreviewUrl) {
-                URL.revokeObjectURL(logoPreviewUrl);
-            }
-            if (faviconPreviewUrl) {
-                URL.revokeObjectURL(faviconPreviewUrl);
-            }
-        };
-    }, [logoPreviewUrl, faviconPreviewUrl]);
-
-    const handleLogoChange = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        // Validate file size (2MB max)
-        if (file.size > 2 * 1024 * 1024) {
-            showToast.error('Logo file size must be less than 2MB');
-            return;
-        }
-
-        // Validate file type
-        const validTypes = ['image/png', 'image/svg+xml', 'image/jpeg', 'image/jpg'];
-        if (!validTypes.includes(file.type)) {
-            showToast.error('Logo must be PNG, SVG, or JPG format');
-            return;
-        }
-
-        // Revoke previous preview URL
-        if (logoPreviewUrl) {
-            URL.revokeObjectURL(logoPreviewUrl);
-        }
-
-        const previewUrl = URL.createObjectURL(file);
-        setLogoFile(file);
-        setLogoPreviewUrl(previewUrl);
-        setIsUploadingLogo(true);
-
-        try {
-            const response = await fileService.upload(file, 'tenant', tenantId || undefined);
-            const fileId = response.data.id;
-            setLogoFileAttachmentUuid(fileId);
-
-            const baseUrl = getBaseUrlWithProtocol();
-            const formattedUrl = `${baseUrl}/files/${fileId}/preview`;
-            setLogoFilePath(formattedUrl);
-            setLogoFileUrl(formattedUrl);
+          // Set colors
+          setPrimaryColor(tenantData.primary_color || "#112868");
+          setSecondaryColor(tenantData.secondary_color || "#23DCE1");
+          setAccentColor(tenantData.accent_color || "#084CC8");
 
+          // Set logo
+          if (tenantData.logo_file_path) {
+            setLogoFileUrl(tenantData.logo_file_path);
+            setLogoFilePath(tenantData.logo_file_path);
+            setLogoFileAttachmentUuid(
+              tenantData.logo_file_attachment_uuid || null,
+            );
             setLogoError(null);
-            showToast.success('Logo uploaded successfully');
-        } catch (err: any) {
-            const errorMessage =
-                err?.response?.data?.error?.message ||
-                err?.response?.data?.message ||
-                err?.message ||
-                'Failed to upload logo. Please try again.';
-            showToast.error(errorMessage);
-            setLogoFile(null);
-            URL.revokeObjectURL(previewUrl);
-            setLogoPreviewUrl(null);
-            setLogoFileUrl(null);
-            setLogoFilePath(null);
-            setLogoFileAttachmentUuid(null);
-        } finally {
-            setIsUploadingLogo(false);
-        }
-    };
-
-    const handleFaviconChange = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        // Validate file size (500KB max)
-        if (file.size > 500 * 1024) {
-            showToast.error('Favicon file size must be less than 500KB');
-            return;
-        }
-
-        // Validate file type
-        const validTypes = ['image/x-icon', 'image/png', 'image/vnd.microsoft.icon'];
-        if (!validTypes.includes(file.type)) {
-            showToast.error('Favicon must be ICO or PNG format');
-            return;
-        }
-
-        // Revoke previous preview URL
-        if (faviconPreviewUrl) {
-            URL.revokeObjectURL(faviconPreviewUrl);
-        }
-
-        const previewUrl = URL.createObjectURL(file);
-        setFaviconFile(file);
-        setFaviconPreviewUrl(previewUrl);
-        setIsUploadingFavicon(true);
-
-        try {
-            const response = await fileService.upload(file, 'tenant', tenantId || undefined);
-            const fileId = response.data.id;
-            setFaviconFileAttachmentUuid(fileId);
-
-            const baseUrl = getBaseUrlWithProtocol();
-            const formattedUrl = `${baseUrl}/files/${fileId}/preview`;
-            setFaviconFilePath(formattedUrl);
-            setFaviconFileUrl(formattedUrl);
+          }
 
+          // Set favicon
+          if (tenantData.favicon_file_path) {
+            setFaviconFileUrl(tenantData.favicon_file_path);
+            setFaviconFilePath(tenantData.favicon_file_path);
+            setFaviconFileAttachmentUuid(
+              tenantData.favicon_file_attachment_uuid || null,
+            );
             setFaviconError(null);
-            showToast.success('Favicon uploaded successfully');
-        } catch (err: any) {
-            const errorMessage =
-                err?.response?.data?.error?.message ||
-                err?.response?.data?.message ||
-                err?.message ||
-                'Failed to upload favicon. Please try again.';
-            showToast.error(errorMessage);
-            setFaviconFile(null);
-            URL.revokeObjectURL(previewUrl);
-            setFaviconPreviewUrl(null);
-            setFaviconFileUrl(null);
-            setFaviconFilePath(null);
-            setFaviconFileAttachmentUuid(null);
-        } finally {
-            setIsUploadingFavicon(false);
+          }
         }
+      } catch (err: any) {
+        const errorMessage =
+          err?.response?.data?.error?.message ||
+          err?.response?.data?.message ||
+          err?.message ||
+          "Failed to load tenant settings";
+        setError(errorMessage);
+        showToast.error(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
     };
 
-    const handleDeleteLogo = (): void => {
-        if (logoPreviewUrl) {
-            URL.revokeObjectURL(logoPreviewUrl);
-        }
-        setLogoFile(null);
-        setLogoPreviewUrl(null);
-        setLogoFileUrl(null);
-        setLogoFilePath(null);
-        setLogoFileAttachmentUuid(null);
-        setLogoError(null);
-        // Reset the file input
-        const fileInput = document.getElementById('logo-upload') as HTMLInputElement;
-        if (fileInput) {
-            fileInput.value = '';
-        }
+    fetchTenant();
+  }, [tenantId]);
+
+  // Cleanup preview URLs
+  useEffect(() => {
+    return () => {
+      if (logoPreviewUrl) {
+        URL.revokeObjectURL(logoPreviewUrl);
+      }
+      if (faviconPreviewUrl) {
+        URL.revokeObjectURL(faviconPreviewUrl);
+      }
     };
+  }, [logoPreviewUrl, faviconPreviewUrl]);
 
-    const handleDeleteFavicon = (): void => {
-        if (faviconPreviewUrl) {
-            URL.revokeObjectURL(faviconPreviewUrl);
-        }
-        setFaviconFile(null);
-        setFaviconPreviewUrl(null);
-        setFaviconFileUrl(null);
-        setFaviconFilePath(null);
-        setFaviconFileAttachmentUuid(null);
-        setFaviconError(null);
-        // Reset the file input
-        const fileInput = document.getElementById('favicon-upload') as HTMLInputElement;
-        if (fileInput) {
-            fileInput.value = '';
-        }
-    };
+  const handleLogoChange = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): Promise<void> => {
+    const file = e.target.files?.[0];
+    if (!file) return;
 
-    const handleSave = async (): Promise<void> => {
-        if (!tenantId || !tenant) return;
-
-        // Validate logo and favicon are uploaded
-        setLogoError(null);
-        setFaviconError(null);
-
-        const isLogoMissing = !logoFilePath;
-        const isFaviconMissing = !faviconFilePath;
-
-        if (isLogoMissing) {
-            setLogoError('Logo is required');
-        }
-
-        if (isFaviconMissing) {
-            setFaviconError('Favicon is required');
-        }
-
-        if (isLogoMissing || isFaviconMissing) {
-            return;
-        }
-
-        try {
-            setIsSaving(true);
-            setError(null);
-
-            // Build update data matching EditTenantModal format
-            const existingSettings = (tenant.settings as Record<string, unknown>) || {};
-            const existingContact = (existingSettings.contact as Record<string, unknown>) || {};
-
-            const updateData = {
-                name: tenant.name,
-                slug: tenant.slug,
-                status: tenant.status,
-                domain: tenant.domain || null,
-                subscription_tier: tenant.subscription_tier || null,
-                max_users: tenant.max_users || null,
-                max_modules: tenant.max_modules || null,
-                settings: {
-                    enable_sso: tenant.enable_sso || false,
-                    enable_2fa: tenant.enable_2fa || false,
-                    contact: existingContact,
-                    branding: {
-                        primary_color: primaryColor || undefined,
-                        secondary_color: secondaryColor || undefined,
-                        accent_color: accentColor || undefined,
-                        logo_file_path: logoFilePath || undefined,
-                        logo_file_attachment_uuid: logoFileAttachmentUuid || undefined,
-                        favicon_file_path: faviconFilePath || undefined,
-                        favicon_file_attachment_uuid: faviconFileAttachmentUuid || undefined,
-                    },
-                },
-            };
-
-            const response = await tenantService.update(tenantId, updateData);
-
-            if (response.success) {
-                showToast.success('Settings updated successfully');
-
-                // Update theme in Redux
-                dispatch(
-                    updateTheme({
-                        logo_file_path: logoFilePath,
-                        favicon_file_path: faviconFilePath,
-                        primary_color: primaryColor,
-                        secondary_color: secondaryColor,
-                        accent_color: accentColor,
-                    })
-                );
-
-                // Update local tenant state
-                setTenant({
-                    ...tenant,
-                    primary_color: primaryColor,
-                    secondary_color: secondaryColor,
-                    accent_color: accentColor,
-                    logo_file_path: logoFilePath,
-                    logo_file_attachment_uuid: logoFileAttachmentUuid,
-                    favicon_file_path: faviconFilePath,
-                    favicon_file_attachment_uuid: faviconFileAttachmentUuid,
-                });
-            }
-        } catch (err: any) {
-            const errorMessage =
-                err?.response?.data?.error?.message ||
-                err?.response?.data?.message ||
-                err?.message ||
-                'Failed to update settings. Please try again.';
-            setError(errorMessage);
-            showToast.error(errorMessage);
-        } finally {
-            setIsSaving(false);
-        }
-    };
-
-    if (isLoading) {
-        return (
-            <Layout
-                currentPage="Settings"
-                pageHeader={{
-                    title: 'Settings',
-                    description: 'Manage your tenant settings',
-                }}
-            >
-                <div className="flex items-center justify-center py-12">
-                    <Loader2 className="w-6 h-6 text-[#112868] animate-spin" />
-                </div>
-            </Layout>
-        );
+    // Validate file size (2MB max)
+    if (file.size > 2 * 1024 * 1024) {
+      showToast.error("Logo file size must be less than 2MB");
+      return;
     }
 
-    if (error && !tenant) {
-        return (
-            <Layout
-                currentPage="Settings"
-                pageHeader={{
-                    title: 'Settings',
-                    description: 'Manage your tenant settings',
-                }}
-            >
-                <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md">
-                    <p className="text-sm text-[#ef4444]">{error}</p>
-                </div>
-            </Layout>
-        );
+    // Validate file type
+    const validTypes = [
+      "image/png",
+      "image/svg+xml",
+      "image/jpeg",
+      "image/jpg",
+    ];
+    if (!validTypes.includes(file.type)) {
+      showToast.error("Logo must be PNG, SVG, or JPG format");
+      return;
     }
 
+    // Revoke previous preview URL
+    if (logoPreviewUrl) {
+      URL.revokeObjectURL(logoPreviewUrl);
+    }
+
+    const previewUrl = URL.createObjectURL(file);
+    setLogoFile(file);
+    setLogoPreviewUrl(previewUrl);
+    setIsUploadingLogo(true);
+
+    try {
+      const response = await fileService.upload(
+        file,
+        "tenant",
+        crypto.randomUUID(),
+        tenantId || undefined,
+      );
+      const fileId = response.data.id;
+      setLogoFileAttachmentUuid(fileId);
+
+      const baseUrl = getBaseUrlWithProtocol();
+      const formattedUrl = `${baseUrl}/files/${fileId}/preview`;
+      setLogoFilePath(formattedUrl);
+      setLogoFileUrl(formattedUrl);
+
+      setLogoError(null);
+      showToast.success("Logo uploaded successfully");
+    } catch (err: any) {
+      const errorMessage =
+        err?.response?.data?.error?.message ||
+        err?.response?.data?.message ||
+        err?.message ||
+        "Failed to upload logo. Please try again.";
+      showToast.error(errorMessage);
+      setLogoFile(null);
+      URL.revokeObjectURL(previewUrl);
+      setLogoPreviewUrl(null);
+      setLogoFileUrl(null);
+      setLogoFilePath(null);
+      setLogoFileAttachmentUuid(null);
+    } finally {
+      setIsUploadingLogo(false);
+    }
+  };
+
+  const handleFaviconChange = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): Promise<void> => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Validate file size (500KB max)
+    if (file.size > 500 * 1024) {
+      showToast.error("Favicon file size must be less than 500KB");
+      return;
+    }
+
+    // Validate file type
+    const validTypes = [
+      "image/x-icon",
+      "image/png",
+      "image/vnd.microsoft.icon",
+    ];
+    if (!validTypes.includes(file.type)) {
+      showToast.error("Favicon must be ICO or PNG format");
+      return;
+    }
+
+    // Revoke previous preview URL
+    if (faviconPreviewUrl) {
+      URL.revokeObjectURL(faviconPreviewUrl);
+    }
+
+    const previewUrl = URL.createObjectURL(file);
+    setFaviconFile(file);
+    setFaviconPreviewUrl(previewUrl);
+    setIsUploadingFavicon(true);
+
+    try {
+      const response = await fileService.upload(
+        file,
+        "tenant",
+        crypto.randomUUID(),
+        tenantId || undefined,
+      );
+      const fileId = response.data.id;
+      setFaviconFileAttachmentUuid(fileId);
+
+      const baseUrl = getBaseUrlWithProtocol();
+      const formattedUrl = `${baseUrl}/files/${fileId}/preview`;
+      setFaviconFilePath(formattedUrl);
+      setFaviconFileUrl(formattedUrl);
+
+      setFaviconError(null);
+      showToast.success("Favicon uploaded successfully");
+    } catch (err: any) {
+      const errorMessage =
+        err?.response?.data?.error?.message ||
+        err?.response?.data?.message ||
+        err?.message ||
+        "Failed to upload favicon. Please try again.";
+      showToast.error(errorMessage);
+      setFaviconFile(null);
+      URL.revokeObjectURL(previewUrl);
+      setFaviconPreviewUrl(null);
+      setFaviconFileUrl(null);
+      setFaviconFilePath(null);
+      setFaviconFileAttachmentUuid(null);
+    } finally {
+      setIsUploadingFavicon(false);
+    }
+  };
+
+  const handleDeleteLogo = (): void => {
+    if (logoPreviewUrl) {
+      URL.revokeObjectURL(logoPreviewUrl);
+    }
+    setLogoFile(null);
+    setLogoPreviewUrl(null);
+    setLogoFileUrl(null);
+    setLogoFilePath(null);
+    setLogoFileAttachmentUuid(null);
+    setLogoError(null);
+    // Reset the file input
+    const fileInput = document.getElementById(
+      "logo-upload",
+    ) as HTMLInputElement;
+    if (fileInput) {
+      fileInput.value = "";
+    }
+  };
+
+  const handleDeleteFavicon = (): void => {
+    if (faviconPreviewUrl) {
+      URL.revokeObjectURL(faviconPreviewUrl);
+    }
+    setFaviconFile(null);
+    setFaviconPreviewUrl(null);
+    setFaviconFileUrl(null);
+    setFaviconFilePath(null);
+    setFaviconFileAttachmentUuid(null);
+    setFaviconError(null);
+    // Reset the file input
+    const fileInput = document.getElementById(
+      "favicon-upload",
+    ) as HTMLInputElement;
+    if (fileInput) {
+      fileInput.value = "";
+    }
+  };
+
+  const handleSave = async (): Promise<void> => {
+    if (!tenantId || !tenant) return;
+
+    // Validate logo and favicon are uploaded
+    setLogoError(null);
+    setFaviconError(null);
+
+    const isLogoMissing = !logoFilePath;
+    const isFaviconMissing = !faviconFilePath;
+
+    if (isLogoMissing) {
+      setLogoError("Logo is required");
+    }
+
+    if (isFaviconMissing) {
+      setFaviconError("Favicon is required");
+    }
+
+    if (isLogoMissing || isFaviconMissing) {
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      setError(null);
+
+      // Build update data matching EditTenantModal format
+      const existingSettings =
+        (tenant.settings as Record<string, unknown>) || {};
+      const existingContact =
+        (existingSettings.contact as Record<string, unknown>) || {};
+
+      const updateData = {
+        name: tenant.name,
+        slug: tenant.slug,
+        status: tenant.status,
+        domain: tenant.domain || null,
+        subscription_tier: tenant.subscription_tier || null,
+        max_users: tenant.max_users || null,
+        max_modules: tenant.max_modules || null,
+        settings: {
+          enable_sso: tenant.enable_sso || false,
+          enable_2fa: tenant.enable_2fa || false,
+          contact: existingContact,
+          branding: {
+            primary_color: primaryColor || undefined,
+            secondary_color: secondaryColor || undefined,
+            accent_color: accentColor || undefined,
+            logo_file_path: logoFilePath || undefined,
+            logo_file_attachment_uuid: logoFileAttachmentUuid || undefined,
+            favicon_file_path: faviconFilePath || undefined,
+            favicon_file_attachment_uuid:
+              faviconFileAttachmentUuid || undefined,
+          },
+        },
+      };
+
+      const response = await tenantService.update(tenantId, updateData);
+
+      if (response.success) {
+        showToast.success("Settings updated successfully");
+
+        // Update theme in Redux
+        dispatch(
+          updateTheme({
+            logo_file_path: logoFilePath,
+            favicon_file_path: faviconFilePath,
+            primary_color: primaryColor,
+            secondary_color: secondaryColor,
+            accent_color: accentColor,
+          }),
+        );
+
+        // Update local tenant state
+        setTenant({
+          ...tenant,
+          primary_color: primaryColor,
+          secondary_color: secondaryColor,
+          accent_color: accentColor,
+          logo_file_path: logoFilePath,
+          logo_file_attachment_uuid: logoFileAttachmentUuid,
+          favicon_file_path: faviconFilePath,
+          favicon_file_attachment_uuid: faviconFileAttachmentUuid,
+        });
+      }
+    } catch (err: any) {
+      const errorMessage =
+        err?.response?.data?.error?.message ||
+        err?.response?.data?.message ||
+        err?.message ||
+        "Failed to update settings. Please try again.";
+      setError(errorMessage);
+      showToast.error(errorMessage);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
     return (
-        <Layout
-            currentPage="Settings"
-            pageHeader={{
-                title: 'Settings',
-                description: 'Manage your tenant settings',
-            }}
-        >
-            <div className="flex flex-col gap-6">
-                {error && (
-                    <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md">
-                        <p className="text-sm text-[#ef4444]">{error}</p>
-                    </div>
-                )}
-
-                {/* Branding Section */}
-                <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg p-4 md:p-6 flex flex-col gap-4">
-                    {/* Section Header */}
-                    <div className="flex flex-col gap-1">
-                        <h3 className="text-base font-semibold text-[#0f1724]">Branding</h3>
-                        <p className="text-sm font-normal text-[#9ca3af]">
-                            Customize logo, favicon, and colors for this tenant experience.
-                        </p>
-                    </div>
-
-                    {/* Logo and Favicon Upload */}
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-                        {/* Company Logo */}
-                        <div className="flex flex-col gap-2">
-                            <label className="text-sm font-medium text-[#0f1724]">
-                                Company Logo <span className="text-[#e02424]">*</span>
-                            </label>
-                            <label
-                                htmlFor="logo-upload"
-                                className="bg-[#f5f7fa] border border-dashed border-[#d1d5db] rounded-md p-4 flex gap-4 items-center cursor-pointer hover:bg-[#e5e7eb] transition-colors"
-                            >
-                                <div className="bg-white border border-[#d1d5db] rounded-lg size-12 flex items-center justify-center shrink-0">
-                                    {isUploadingLogo ? (
-                                        <Loader2 className="w-5 h-5 text-[#6b7280] animate-spin" />
-                                    ) : (
-                                        <ImageIcon className="w-5 h-5 text-[#6b7280]" />
-                                    )}
-                                </div>
-                                <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                                    <span className="text-sm font-medium text-[#0f1724]">Upload Logo</span>
-                                    <span className="text-xs font-normal text-[#9ca3af]">PNG, SVG, JPG up to 2MB.</span>
-                                </div>
-                                <input
-                                    id="logo-upload"
-                                    type="file"
-                                    accept="image/png,image/svg+xml,image/jpeg,image/jpg"
-                                    onChange={handleLogoChange}
-                                    className="hidden"
-                                    disabled={isUploadingLogo}
-                                />
-                            </label>
-                            {logoError && (
-                                <p className="text-sm text-[#ef4444]">{logoError}</p>
-                            )}
-                            {(logoFile || logoFileUrl) && (
-                                <div className="flex flex-col gap-2 mt-1">
-                                    {logoFile && (
-                                        <div className="text-xs text-[#6b7280]">
-                                            {isUploadingLogo ? 'Uploading...' : `Selected: ${logoFile.name}`}
-                                        </div>
-                                    )}
-                                    {(logoPreviewUrl || logoFileUrl) && (
-                                        <div className="mt-2 relative inline-block">
-                                            <AuthenticatedImage
-                                                fileId={logoFileAttachmentUuid}
-                                                src={logoPreviewUrl || logoFileUrl}
-                                                alt="Logo preview"
-                                                className="max-w-full h-20 object-contain border border-[#d1d5db] rounded-md p-2 bg-white"
-                                                style={{ display: 'block', maxHeight: '80px' }}
-                                            />
-                                            <button
-                                                type="button"
-                                                onClick={handleDeleteLogo}
-                                                className="absolute top-1 right-1 bg-[#ef4444] text-white rounded-full p-1 hover:bg-[#dc2626] transition-colors"
-                                                aria-label="Delete logo"
-                                            >
-                                                <X className="w-3 h-3" />
-                                            </button>
-                                        </div>
-                                    )}
-                                </div>
-                            )}
-                        </div>
-
-                        {/* Favicon */}
-                        <div className="flex flex-col gap-2">
-                            <label className="text-sm font-medium text-[#0f1724]">
-                                Favicon <span className="text-[#e02424]">*</span>
-                            </label>
-                            <label
-                                htmlFor="favicon-upload"
-                                className="bg-[#f5f7fa] border border-dashed border-[#d1d5db] rounded-md p-4 flex gap-4 items-center cursor-pointer hover:bg-[#e5e7eb] transition-colors"
-                            >
-                                <div className="bg-white border border-[#d1d5db] rounded-lg size-12 flex items-center justify-center shrink-0">
-                                    {isUploadingFavicon ? (
-                                        <Loader2 className="w-5 h-5 text-[#6b7280] animate-spin" />
-                                    ) : (
-                                        <ImageIcon className="w-5 h-5 text-[#6b7280]" />
-                                    )}
-                                </div>
-                                <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                                    <span className="text-sm font-medium text-[#0f1724]">Upload Favicon</span>
-                                    <span className="text-xs font-normal text-[#9ca3af]">ICO or PNG up to 500KB.</span>
-                                </div>
-                                <input
-                                    id="favicon-upload"
-                                    type="file"
-                                    accept="image/x-icon,image/png,image/vnd.microsoft.icon"
-                                    onChange={handleFaviconChange}
-                                    className="hidden"
-                                    disabled={isUploadingFavicon}
-                                />
-                            </label>
-                            {faviconError && (
-                                <p className="text-sm text-[#ef4444]">{faviconError}</p>
-                            )}
-                            {(faviconFile || faviconFileUrl) && (
-                                <div className="flex flex-col gap-2 mt-1">
-                                    {faviconFile && (
-                                        <div className="text-xs text-[#6b7280]">
-                                            {isUploadingFavicon ? 'Uploading...' : `Selected: ${faviconFile.name}`}
-                                        </div>
-                                    )}
-                                    {(faviconPreviewUrl || faviconFileUrl) && (
-                                        <div className="mt-2 relative inline-block">
-                                            <AuthenticatedImage
-                                                fileId={faviconFileAttachmentUuid}
-                                                src={faviconPreviewUrl || faviconFileUrl}
-                                                alt="Favicon preview"
-                                                className="w-16 h-16 object-contain border border-[#d1d5db] rounded-md p-2 bg-white"
-                                                style={{ display: 'block', width: '64px', height: '64px' }}
-                                            />
-                                            <button
-                                                type="button"
-                                                onClick={handleDeleteFavicon}
-                                                className="absolute top-1 right-1 bg-[#ef4444] text-white rounded-full p-1 hover:bg-[#dc2626] transition-colors"
-                                                aria-label="Delete favicon"
-                                            >
-                                                <X className="w-3 h-3" />
-                                            </button>
-                                        </div>
-                                    )}
-                                </div>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Primary Color */}
-                    <div className="flex flex-col gap-2">
-                        <label className="text-sm font-medium text-[#0f1724]">Primary Color</label>
-                        <div className="flex gap-3 items-center">
-                            <div
-                                className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                                style={{ backgroundColor: primaryColor }}
-                            />
-                            <div className="flex-1">
-                                <input
-                                    type="text"
-                                    value={primaryColor}
-                                    onChange={(e) => setPrimaryColor(e.target.value)}
-                                    className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
-                                    placeholder="#112868"
-                                />
-                            </div>
-                            <input
-                                type="color"
-                                value={primaryColor}
-                                onChange={(e) => setPrimaryColor(e.target.value)}
-                                className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
-                            />
-                        </div>
-                        <p className="text-xs font-normal text-[#9ca3af]">
-                            Used for navigation, headers, and key actions.
-                        </p>
-                    </div>
-
-                    {/* Secondary and Accent Colors */}
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-                        {/* Secondary Color */}
-                        <div className="flex flex-col gap-2">
-                            <label className="text-sm font-medium text-[#0f1724]">Secondary Color</label>
-                            <div className="flex gap-3 items-center">
-                                <div
-                                    className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                                    style={{ backgroundColor: secondaryColor }}
-                                />
-                                <div className="flex-1">
-                                    <input
-                                        type="text"
-                                        value={secondaryColor}
-                                        onChange={(e) => setSecondaryColor(e.target.value)}
-                                        className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
-                                        placeholder="#23DCE1"
-                                    />
-                                </div>
-                                <input
-                                    type="color"
-                                    value={secondaryColor}
-                                    onChange={(e) => setSecondaryColor(e.target.value)}
-                                    className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
-                                />
-                            </div>
-                            <p className="text-xs font-normal text-[#9ca3af]">
-                                Used for highlights and supporting elements.
-                            </p>
-                        </div>
-
-                        {/* Accent Color */}
-                        <div className="flex flex-col gap-2">
-                            <label className="text-sm font-medium text-[#0f1724]">Accent Color</label>
-                            <div className="flex gap-3 items-center">
-                                <div
-                                    className="border border-[#d1d5db] rounded-md size-10 shrink-0"
-                                    style={{ backgroundColor: accentColor }}
-                                />
-                                <div className="flex-1">
-                                    <input
-                                        type="text"
-                                        value={accentColor}
-                                        onChange={(e) => setAccentColor(e.target.value)}
-                                        className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
-                                        placeholder="#084CC8"
-                                    />
-                                </div>
-                                <input
-                                    type="color"
-                                    value={accentColor}
-                                    onChange={(e) => setAccentColor(e.target.value)}
-                                    className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
-                                />
-                            </div>
-                            <p className="text-xs font-normal text-[#9ca3af]">
-                                Used for alerts and special notices.
-                            </p>
-                        </div>
-                    </div>
-
-                    {/* Save Button */}
-                    <div className="flex justify-end pt-4 border-t border-[rgba(0,0,0,0.08)]">
-                        <PrimaryButton
-                            onClick={handleSave}
-                            disabled={isSaving || isUploadingLogo || isUploadingFavicon}
-                            className="px-6 py-2.5"
-                        >
-                            {isSaving ? 'Saving...' : 'Save Changes'}
-                        </PrimaryButton>
-                    </div>
-                </div>
-            </div>
-        </Layout>
+      <Layout
+        currentPage="Settings"
+        pageHeader={{
+          title: "Settings",
+          description: "Manage your tenant settings",
+        }}
+      >
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-6 h-6 text-[#112868] animate-spin" />
+        </div>
+      </Layout>
     );
+  }
+
+  if (error && !tenant) {
+    return (
+      <Layout
+        currentPage="Settings"
+        pageHeader={{
+          title: "Settings",
+          description: "Manage your tenant settings",
+        }}
+      >
+        <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md">
+          <p className="text-sm text-[#ef4444]">{error}</p>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout
+      currentPage="Settings"
+      pageHeader={{
+        title: "Settings",
+        description: "Manage your tenant settings",
+      }}
+    >
+      <div className="flex flex-col gap-6">
+        {error && (
+          <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md">
+            <p className="text-sm text-[#ef4444]">{error}</p>
+          </div>
+        )}
+
+        {/* Branding Section */}
+        <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg p-4 md:p-6 flex flex-col gap-4">
+          {/* Section Header */}
+          <div className="flex flex-col gap-1">
+            <h3 className="text-base font-semibold text-[#0f1724]">Branding</h3>
+            <p className="text-sm font-normal text-[#9ca3af]">
+              Customize logo, favicon, and colors for this tenant experience.
+            </p>
+          </div>
+
+          {/* Logo and Favicon Upload */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+            {/* Company Logo */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium text-[#0f1724]">
+                Company Logo <span className="text-[#e02424]">*</span>
+              </label>
+              <label
+                htmlFor="logo-upload"
+                className="bg-[#f5f7fa] border border-dashed border-[#d1d5db] rounded-md p-4 flex gap-4 items-center cursor-pointer hover:bg-[#e5e7eb] transition-colors"
+              >
+                <div className="bg-white border border-[#d1d5db] rounded-lg size-12 flex items-center justify-center shrink-0">
+                  {isUploadingLogo ? (
+                    <Loader2 className="w-5 h-5 text-[#6b7280] animate-spin" />
+                  ) : (
+                    <ImageIcon className="w-5 h-5 text-[#6b7280]" />
+                  )}
+                </div>
+                <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+                  <span className="text-sm font-medium text-[#0f1724]">
+                    Upload Logo
+                  </span>
+                  <span className="text-xs font-normal text-[#9ca3af]">
+                    PNG, SVG, JPG up to 2MB.
+                  </span>
+                </div>
+                <input
+                  id="logo-upload"
+                  type="file"
+                  accept="image/png,image/svg+xml,image/jpeg,image/jpg"
+                  onChange={handleLogoChange}
+                  className="hidden"
+                  disabled={isUploadingLogo}
+                />
+              </label>
+              {logoError && (
+                <p className="text-sm text-[#ef4444]">{logoError}</p>
+              )}
+              {(logoFile || logoFileUrl) && (
+                <div className="flex flex-col gap-2 mt-1">
+                  {logoFile && (
+                    <div className="text-xs text-[#6b7280]">
+                      {isUploadingLogo
+                        ? "Uploading..."
+                        : `Selected: ${logoFile.name}`}
+                    </div>
+                  )}
+                  {(logoPreviewUrl || logoFileUrl) && (
+                    <div className="mt-2 relative inline-block">
+                      <AuthenticatedImage
+                        fileId={logoFileAttachmentUuid}
+                        src={logoPreviewUrl || logoFileUrl}
+                        alt="Logo preview"
+                        className="max-w-full h-20 object-contain border border-[#d1d5db] rounded-md p-2 bg-white"
+                        style={{ display: "block", maxHeight: "80px" }}
+                      />
+                      <button
+                        type="button"
+                        onClick={handleDeleteLogo}
+                        className="absolute top-1 right-1 bg-[#ef4444] text-white rounded-full p-1 hover:bg-[#dc2626] transition-colors"
+                        aria-label="Delete logo"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Favicon */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium text-[#0f1724]">
+                Favicon <span className="text-[#e02424]">*</span>
+              </label>
+              <label
+                htmlFor="favicon-upload"
+                className="bg-[#f5f7fa] border border-dashed border-[#d1d5db] rounded-md p-4 flex gap-4 items-center cursor-pointer hover:bg-[#e5e7eb] transition-colors"
+              >
+                <div className="bg-white border border-[#d1d5db] rounded-lg size-12 flex items-center justify-center shrink-0">
+                  {isUploadingFavicon ? (
+                    <Loader2 className="w-5 h-5 text-[#6b7280] animate-spin" />
+                  ) : (
+                    <ImageIcon className="w-5 h-5 text-[#6b7280]" />
+                  )}
+                </div>
+                <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+                  <span className="text-sm font-medium text-[#0f1724]">
+                    Upload Favicon
+                  </span>
+                  <span className="text-xs font-normal text-[#9ca3af]">
+                    ICO or PNG up to 500KB.
+                  </span>
+                </div>
+                <input
+                  id="favicon-upload"
+                  type="file"
+                  accept="image/x-icon,image/png,image/vnd.microsoft.icon"
+                  onChange={handleFaviconChange}
+                  className="hidden"
+                  disabled={isUploadingFavicon}
+                />
+              </label>
+              {faviconError && (
+                <p className="text-sm text-[#ef4444]">{faviconError}</p>
+              )}
+              {(faviconFile || faviconFileUrl) && (
+                <div className="flex flex-col gap-2 mt-1">
+                  {faviconFile && (
+                    <div className="text-xs text-[#6b7280]">
+                      {isUploadingFavicon
+                        ? "Uploading..."
+                        : `Selected: ${faviconFile.name}`}
+                    </div>
+                  )}
+                  {(faviconPreviewUrl || faviconFileUrl) && (
+                    <div className="mt-2 relative inline-block">
+                      <AuthenticatedImage
+                        fileId={faviconFileAttachmentUuid}
+                        src={faviconPreviewUrl || faviconFileUrl}
+                        alt="Favicon preview"
+                        className="w-16 h-16 object-contain border border-[#d1d5db] rounded-md p-2 bg-white"
+                        style={{
+                          display: "block",
+                          width: "64px",
+                          height: "64px",
+                        }}
+                      />
+                      <button
+                        type="button"
+                        onClick={handleDeleteFavicon}
+                        className="absolute top-1 right-1 bg-[#ef4444] text-white rounded-full p-1 hover:bg-[#dc2626] transition-colors"
+                        aria-label="Delete favicon"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Primary Color */}
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-medium text-[#0f1724]">
+              Primary Color
+            </label>
+            <div className="flex gap-3 items-center">
+              <div
+                className="border border-[#d1d5db] rounded-md size-10 shrink-0"
+                style={{ backgroundColor: primaryColor }}
+              />
+              <div className="flex-1">
+                <input
+                  type="text"
+                  value={primaryColor}
+                  onChange={(e) => setPrimaryColor(e.target.value)}
+                  className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
+                  placeholder="#112868"
+                />
+              </div>
+              <input
+                type="color"
+                value={primaryColor}
+                onChange={(e) => setPrimaryColor(e.target.value)}
+                className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
+              />
+            </div>
+            <p className="text-xs font-normal text-[#9ca3af]">
+              Used for navigation, headers, and key actions.
+            </p>
+          </div>
+
+          {/* Secondary and Accent Colors */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+            {/* Secondary Color */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium text-[#0f1724]">
+                Secondary Color
+              </label>
+              <div className="flex gap-3 items-center">
+                <div
+                  className="border border-[#d1d5db] rounded-md size-10 shrink-0"
+                  style={{ backgroundColor: secondaryColor }}
+                />
+                <div className="flex-1">
+                  <input
+                    type="text"
+                    value={secondaryColor}
+                    onChange={(e) => setSecondaryColor(e.target.value)}
+                    className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
+                    placeholder="#23DCE1"
+                  />
+                </div>
+                <input
+                  type="color"
+                  value={secondaryColor}
+                  onChange={(e) => setSecondaryColor(e.target.value)}
+                  className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
+                />
+              </div>
+              <p className="text-xs font-normal text-[#9ca3af]">
+                Used for highlights and supporting elements.
+              </p>
+            </div>
+
+            {/* Accent Color */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium text-[#0f1724]">
+                Accent Color
+              </label>
+              <div className="flex gap-3 items-center">
+                <div
+                  className="border border-[#d1d5db] rounded-md size-10 shrink-0"
+                  style={{ backgroundColor: accentColor }}
+                />
+                <div className="flex-1">
+                  <input
+                    type="text"
+                    value={accentColor}
+                    onChange={(e) => setAccentColor(e.target.value)}
+                    className="bg-[#f5f7fa] border border-[#d1d5db] h-10 px-3 py-1 rounded-md text-sm text-[#0f1724] w-full focus:outline-none focus:ring-2 focus:ring-[#112868] focus:border-transparent"
+                    placeholder="#084CC8"
+                  />
+                </div>
+                <input
+                  type="color"
+                  value={accentColor}
+                  onChange={(e) => setAccentColor(e.target.value)}
+                  className="size-10 rounded-md border border-[#d1d5db] cursor-pointer"
+                />
+              </div>
+              <p className="text-xs font-normal text-[#9ca3af]">
+                Used for alerts and special notices.
+              </p>
+            </div>
+          </div>
+
+          {/* Save Button */}
+          <div className="flex justify-end pt-4 border-t border-[rgba(0,0,0,0.08)]">
+            <PrimaryButton
+              onClick={handleSave}
+              disabled={isSaving || isUploadingLogo || isUploadingFavicon}
+              className="px-6 py-2.5"
+            >
+              {isSaving ? "Saving..." : "Save Changes"}
+            </PrimaryButton>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
 };
 
 export default Settings;