diff --git a/.env b/.env
index 75d31ae..ec8b053 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-# VITE_API_BASE_URL=http://localhost:3000/api/v1
-VITE_API_BASE_URL=https://backendqaasure.tech4bizsolutions.com/api/v1
+VITE_API_BASE_URL=http://localhost:3000/api/v1
+# VITE_API_BASE_URL=https://backendqaasure.tech4bizsolutions.com/api/v1
diff --git a/package-lock.json b/package-lock.json
index 0173bec..5627a5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react-router-dom": "^7.12.0",
         "recharts": "^3.6.0",
         "redux-persist": "^6.0.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.18",
         "zod": "^4.3.5"
@@ -4244,6 +4245,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/package.json b/package.json
index e52ccac..34a0d1b 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "react-router-dom": "^7.12.0",
     "recharts": "^3.6.0",
     "redux-persist": "^6.0.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "zod": "^4.3.5"
diff --git a/src/App.tsx b/src/App.tsx
index 16a6bf9..f088c1c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Toaster } from "sonner";
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
 import Tenants from "./pages/Tenants";
@@ -14,6 +15,7 @@ import ResetPassword from "./pages/ResetPassword";
 function App() {
   return (
     <BrowserRouter>
+      <Toaster position="top-right" richColors />
       <Routes>
         <Route path="/" element={<Login />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 17d61df..2d00b56 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux-hooks';
 import { logoutAsync } from '@/store/authSlice';
 import { cn } from '@/lib/utils';
+import { showToast } from '@/utils/toast';
 import type { ReactElement } from 'react';
 
 interface HeaderProps {
@@ -70,14 +71,21 @@ export const Header = ({ currentPage, onMenuClick }: HeaderProps): ReactElement
     
     try {
       // Call logout API with Bearer token
-      await dispatch(logoutAsync()).unwrap();
+      const result = await dispatch(logoutAsync()).unwrap();
+      const message = result.message || 'Logged out successfully';
+      const description = result.message ? undefined : 'You have been logged out';
+      showToast.success(message, description);
       // Clear state and redirect
       navigate('/', { replace: true });
     } catch (error: any) {
       // Even if API call fails, clear local state and redirect to login
       console.error('Logout error:', error);
+      // Try to get message from error response
+      const message = error?.message || 'Logged out successfully';
+      const description = error?.message ? undefined : 'You have been logged out';
       // Dispatch logout action to clear local state
       dispatch({ type: 'auth/logout' });
+      showToast.success(message, description);
       navigate('/', { replace: true });
     }
   };
diff --git a/src/components/shared/ActionDropdown.tsx b/src/components/shared/ActionDropdown.tsx
index ff0c62b..feff4a5 100644
--- a/src/components/shared/ActionDropdown.tsx
+++ b/src/components/shared/ActionDropdown.tsx
@@ -48,7 +48,7 @@ export const ActionDropdown = ({
         type="button"
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'flex items-center justify-center w-7 h-7 rounded-full border border-[rgba(0,0,0,0.08)] transition-colors',
+          'flex items-center justify-center w-7 h-7 rounded-full border border-[rgba(0,0,0,0.08)] transition-colors cursor-pointer',
           isOpen
             ? 'bg-[#084cc8] text-white'
             : 'bg-white text-[#0f1724] hover:bg-[#084cc8] hover:text-white'
@@ -66,7 +66,7 @@ export const ActionDropdown = ({
               <button
                 type="button"
                 onClick={() => handleAction(onView)}
-                className="flex items-center gap-2.5 px-2 py-1 text-[11px] font-medium text-[#6b7280] hover:bg-gray-50 transition-colors"
+                className="flex items-center gap-2.5 px-2 py-1 text-[11px] font-medium text-[#6b7280] hover:bg-gray-50 transition-colors cursor-pointer"
               >
                 <Eye className="w-3.5 h-3.5" />
                 <span>View</span>
@@ -76,7 +76,7 @@ export const ActionDropdown = ({
               <button
                 type="button"
                 onClick={() => handleAction(onEdit)}
-                className="flex items-center gap-2.5 px-2 py-1 text-[11px] font-medium text-[#6b7280] hover:bg-gray-50 transition-colors"
+                className="flex items-center gap-2.5 px-2 py-1 text-[11px] font-medium text-[#6b7280] hover:bg-gray-50 transition-colors cursor-pointer"
               >
                 <Edit className="w-3 h-3" />
                 <span>Edit</span>
@@ -86,7 +86,7 @@ export const ActionDropdown = ({
               <button
                 type="button"
                 onClick={() => handleAction(onDelete)}
-                className="flex items-center gap-2 px-2 py-1 text-[11px] font-medium text-[#6b7280] hover:bg-gray-50 transition-colors"
+                className="flex items-center gap-2 px-2 py-1 text-[11px] font-medium text-[#6b7280] hover:bg-gray-50 transition-colors cursor-pointer"
               >
                 <Trash2 className="w-3.5 h-3.5" />
                 <span>Delete</span>
diff --git a/src/components/shared/EditUserModal.tsx b/src/components/shared/EditUserModal.tsx
index 3a148cc..9fefafa 100644
--- a/src/components/shared/EditUserModal.tsx
+++ b/src/components/shared/EditUserModal.tsx
@@ -75,6 +75,13 @@ export const EditUserModal = ({
   const tenantIdValue = watch('tenant_id');
   const roleIdValue = watch('role_id');
 
+  // Store tenant and role names from user response
+  const [currentTenantName, setCurrentTenantName] = useState<string>('');
+  const [currentRoleName, setCurrentRoleName] = useState<string>('');
+  // Store initial options for immediate display
+  const [initialTenantOption, setInitialTenantOption] = useState<{ value: string; label: string } | null>(null);
+  const [initialRoleOption, setInitialRoleOption] = useState<{ value: string; label: string } | null>(null);
+
   // Load tenants for dropdown - ensure selected tenant is included
   const loadTenants = async (page: number, limit: number) => {
     const response = await tenantService.getAll(page, limit);
@@ -83,23 +90,45 @@ export const EditUserModal = ({
       label: tenant.name,
     }));
 
-    // If we have a selected tenant ID and it's not in the current options, fetch it specifically
-    if (selectedTenantId && page === 1 && !options.find((opt) => opt.value === selectedTenantId)) {
-      try {
-        const tenantResponse = await tenantService.getById(selectedTenantId);
-        if (tenantResponse.success) {
-          // Prepend the selected tenant to the options
+    // Always include initial option if it exists and matches the selected value
+    if (initialTenantOption && page === 1) {
+      const exists = options.find((opt) => opt.value === initialTenantOption.value);
+      if (!exists) {
+        options = [initialTenantOption, ...options];
+      }
+    }
+
+    // If we have a selected tenant ID and it's not in the current options, add it with stored name
+    if (selectedTenantId && page === 1 && !initialTenantOption) {
+      const existingOption = options.find((opt) => opt.value === selectedTenantId);
+      if (!existingOption) {
+        // If we have the name from user response, use it; otherwise fetch
+        if (currentTenantName) {
           options = [
             {
-              value: tenantResponse.data.id,
-              label: tenantResponse.data.name,
+              value: selectedTenantId,
+              label: currentTenantName,
             },
             ...options,
           ];
+        } else {
+          try {
+            const tenantResponse = await tenantService.getById(selectedTenantId);
+            if (tenantResponse.success) {
+              // Prepend the selected tenant to the options
+              options = [
+                {
+                  value: tenantResponse.data.id,
+                  label: tenantResponse.data.name,
+                },
+                ...options,
+              ];
+            }
+          } catch (err) {
+            // If fetching fails, just continue with existing options
+            console.warn('Failed to fetch selected tenant:', err);
+          }
         }
-      } catch (err) {
-        // If fetching fails, just continue with existing options
-        console.warn('Failed to fetch selected tenant:', err);
       }
     }
 
@@ -117,23 +146,45 @@ export const EditUserModal = ({
       label: role.name,
     }));
 
-    // If we have a selected role ID and it's not in the current options, fetch it specifically
-    if (selectedRoleId && page === 1 && !options.find((opt) => opt.value === selectedRoleId)) {
-      try {
-        const roleResponse = await roleService.getById(selectedRoleId);
-        if (roleResponse.success) {
-          // Prepend the selected role to the options
+    // Always include initial option if it exists and matches the selected value
+    if (initialRoleOption && page === 1) {
+      const exists = options.find((opt) => opt.value === initialRoleOption.value);
+      if (!exists) {
+        options = [initialRoleOption, ...options];
+      }
+    }
+
+    // If we have a selected role ID and it's not in the current options, add it with stored name
+    if (selectedRoleId && page === 1 && !initialRoleOption) {
+      const existingOption = options.find((opt) => opt.value === selectedRoleId);
+      if (!existingOption) {
+        // If we have the name from user response, use it; otherwise fetch
+        if (currentRoleName) {
           options = [
             {
-              value: roleResponse.data.id,
-              label: roleResponse.data.name,
+              value: selectedRoleId,
+              label: currentRoleName,
             },
             ...options,
           ];
+        } else {
+          try {
+            const roleResponse = await roleService.getById(selectedRoleId);
+            if (roleResponse.success) {
+              // Prepend the selected role to the options
+              options = [
+                {
+                  value: roleResponse.data.id,
+                  label: roleResponse.data.name,
+                },
+                ...options,
+              ];
+            }
+          } catch (err) {
+            // If fetching fails, just continue with existing options
+            console.warn('Failed to fetch selected role:', err);
+          }
         }
-      } catch (err) {
-        // If fetching fails, just continue with existing options
-        console.warn('Failed to fetch selected role:', err);
       }
     }
 
@@ -153,11 +204,24 @@ export const EditUserModal = ({
           clearErrors();
           const user = await onLoadUser(userId);
           
-          // Store selected IDs for dropdown pre-loading
-          const tenantId = user.tenant_id || '';
-          const roleId = user.role_id || '';
+          // Extract tenant and role IDs from nested objects or fallback to direct properties
+          const tenantId = user.tenant?.id || user.tenant_id || '';
+          const roleId = user.role?.id || user.role_id || '';
+          const tenantName = user.tenant?.name || '';
+          const roleName = user.role?.name || '';
+          
           setSelectedTenantId(tenantId);
           setSelectedRoleId(roleId);
+          setCurrentTenantName(tenantName);
+          setCurrentRoleName(roleName);
+          
+          // Set initial options for immediate display using names from user response
+          if (tenantId && tenantName) {
+            setInitialTenantOption({ value: tenantId, label: tenantName });
+          }
+          if (roleId && roleName) {
+            setInitialRoleOption({ value: roleId, label: roleName });
+          }
           
           reset({
             email: user.email,
@@ -177,6 +241,10 @@ export const EditUserModal = ({
     } else {
       setSelectedTenantId('');
       setSelectedRoleId('');
+      setCurrentTenantName('');
+      setCurrentRoleName('');
+      setInitialTenantOption(null);
+      setInitialRoleOption(null);
       reset({
         email: '',
         first_name: '',
@@ -320,6 +388,7 @@ export const EditUserModal = ({
                 value={tenantIdValue || ''}
                 onValueChange={(value) => setValue('tenant_id', value)}
                 onLoadOptions={loadTenants}
+                initialOption={initialTenantOption || undefined}
                 error={errors.tenant_id?.message}
               />
 
@@ -330,6 +399,7 @@ export const EditUserModal = ({
                 value={roleIdValue || ''}
                 onValueChange={(value) => setValue('role_id', value)}
                 onLoadOptions={loadRoles}
+                initialOption={initialRoleOption || undefined}
                 error={errors.role_id?.message}
               />
             </div>
diff --git a/src/components/shared/FormField.tsx b/src/components/shared/FormField.tsx
index 3b11861..d289447 100644
--- a/src/components/shared/FormField.tsx
+++ b/src/components/shared/FormField.tsx
@@ -1,4 +1,6 @@
+import { useState } from 'react';
 import type { ReactElement, InputHTMLAttributes } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -15,10 +17,13 @@ export const FormField = ({
   helperText,
   className,
   id,
+  type,
   ...props
 }: FormFieldProps): ReactElement => {
   const fieldId = id || `field-${label.toLowerCase().replace(/\s+/g, '-')}`;
   const hasError = Boolean(error);
+  const isPassword = type === 'password';
+  const [showPassword, setShowPassword] = useState<boolean>(false);
 
   return (
     <div className="flex flex-col gap-2 pb-4">
@@ -29,21 +34,41 @@ export const FormField = ({
         <span>{label}</span>
         {required && <span className="text-[#e02424]">*</span>}
       </label>
-      <input
-        id={fieldId}
-        className={cn(
-          'h-10 w-full px-3.5 py-1 bg-white border rounded-md text-sm transition-colors',
-          'placeholder:text-[#9aa6b2] text-[#0e1b2a]',
-          hasError
-            ? 'border-[#ef4444] focus-visible:border-[#ef4444] focus-visible:ring-[#ef4444]/20'
-            : 'border-[rgba(0,0,0,0.08)] focus-visible:border-[#112868] focus-visible:ring-[#112868]/20',
-          'focus-visible:outline-none focus-visible:ring-2',
-          className
+      <div className="relative">
+        <input
+          id={fieldId}
+          type={isPassword && showPassword ? 'text' : type}
+          className={cn(
+            'h-10 w-full px-3.5 py-1 bg-white border rounded-md text-sm transition-colors',
+            'placeholder:text-[#9aa6b2] text-[#0e1b2a]',
+            hasError
+              ? 'border-[#ef4444] focus-visible:border-[#ef4444] focus-visible:ring-[#ef4444]/20'
+              : 'border-[rgba(0,0,0,0.08)] focus-visible:border-[#112868] focus-visible:ring-[#112868]/20',
+            'focus-visible:outline-none focus-visible:ring-2',
+            props.disabled && 'bg-[#f3f4f6] cursor-not-allowed opacity-60',
+            isPassword && 'pr-10',
+            className
+          )}
+          aria-invalid={hasError}
+          aria-describedby={error ? `${fieldId}-error` : helperText ? `${fieldId}-helper` : undefined}
+          {...props}
+        />
+        {isPassword && (
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-[#6b7280] hover:text-[#0e1b2a] transition-colors focus:outline-none focus:ring-2 focus:ring-[#112868]/20 rounded p-1"
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
+            tabIndex={-1}
+          >
+            {showPassword ? (
+              <EyeOff className="w-4 h-4" />
+            ) : (
+              <Eye className="w-4 h-4" />
+            )}
+          </button>
         )}
-        aria-invalid={hasError}
-        aria-describedby={error ? `${fieldId}-error` : helperText ? `${fieldId}-helper` : undefined}
-        {...props}
-      />
+      </div>
       {error && (
         <p id={`${fieldId}-error`} className="text-sm text-[#ef4444]" role="alert">
           {error}
diff --git a/src/components/shared/PaginatedSelect.tsx b/src/components/shared/PaginatedSelect.tsx
index 113be0a..5be76e0 100644
--- a/src/components/shared/PaginatedSelect.tsx
+++ b/src/components/shared/PaginatedSelect.tsx
@@ -27,6 +27,7 @@ interface PaginatedSelectProps {
       hasMore: boolean;
     };
   }>;
+  initialOption?: { value: string; label: string };
   className?: string;
   id?: string;
 }
@@ -40,6 +41,7 @@ export const PaginatedSelect = ({
   value,
   onValueChange,
   onLoadOptions,
+  initialOption,
   className,
   id,
 }: PaginatedSelectProps): ReactElement => {
@@ -181,7 +183,8 @@ export const PaginatedSelect = ({
 
   const fieldId = id || `select-${label.toLowerCase().replace(/\s+/g, '-')}`;
   const hasError = Boolean(error);
-  const selectedOption = options.find((opt) => opt.value === value);
+  const selectedOption = options.find((opt) => opt.value === value) || 
+    (initialOption && initialOption.value === value ? initialOption : null);
 
   const handleSelect = (optionValue: string) => {
     onValueChange(optionValue);
diff --git a/src/components/shared/PrimaryButton.tsx b/src/components/shared/PrimaryButton.tsx
index 6a26f21..de9f14f 100644
--- a/src/components/shared/PrimaryButton.tsx
+++ b/src/components/shared/PrimaryButton.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const primaryButtonVariants = cva(
-  'inline-flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
+  'inline-flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
   {
     variants: {
       size: {
diff --git a/src/components/shared/SecondaryButton.tsx b/src/components/shared/SecondaryButton.tsx
index 7be44e0..e452062 100644
--- a/src/components/shared/SecondaryButton.tsx
+++ b/src/components/shared/SecondaryButton.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const secondaryButtonVariants = cva(
-  'inline-flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
+  'inline-flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
   {
     variants: {
       variant: {
diff --git a/src/pages/AuditLogs.tsx b/src/pages/AuditLogs.tsx
index 970ee06..941848b 100644
--- a/src/pages/AuditLogs.tsx
+++ b/src/pages/AuditLogs.tsx
@@ -332,7 +332,7 @@ const AuditLogs = (): ReactElement => {
             {/* Export Button */}
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors cursor-pointer"
             >
               <Download className="w-3.5 h-3.5" />
               <span>Export</span>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 3824e82..c944f02 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -10,6 +10,7 @@ import { loginAsync, clearError } from '@/store/authSlice';
 import { FormField } from '@/components/shared';
 import { PrimaryButton } from '@/components/shared';
 import type { LoginError } from '@/services/auth-service';
+import { showToast } from '@/utils/toast';
 
 // Zod validation schema
 const loginSchema = z.object({
@@ -68,6 +69,9 @@ const Login = (): ReactElement => {
     try {
       const result = await dispatch(loginAsync(data)).unwrap();
       if (result) {
+        const message = result.message || 'Login successful';
+        const description = result.message ? undefined : 'Welcome back!';
+        showToast.success(message, description);
         // Only navigate on success
         navigate('/dashboard');
       }
diff --git a/src/pages/Modules.tsx b/src/pages/Modules.tsx
index 137a057..c44588b 100644
--- a/src/pages/Modules.tsx
+++ b/src/pages/Modules.tsx
@@ -314,7 +314,7 @@ const Modules = (): ReactElement => {
             {/* Export Button */}
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors cursor-pointer"
             >
               <Download className="w-3.5 h-3.5" />
               <span>Export</span>
diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx
index b7408a9..ab186da 100644
--- a/src/pages/ResetPassword.tsx
+++ b/src/pages/ResetPassword.tsx
@@ -8,44 +8,52 @@ import { Shield, ArrowLeft } from 'lucide-react';
 import { authService } from '@/services/auth-service';
 import { FormField } from '@/components/shared';
 import { PrimaryButton } from '@/components/shared';
+import { showToast } from '@/utils/toast';
 
-// Zod validation schema
-const resetPasswordSchema = z
-  .object({
-    token: z.string().min(1, 'Reset token is required'),
-    password: z
-      .string()
-      .min(1, 'Password is required')
-      .min(6, 'Password must be at least 6 characters'),
-    confirmPassword: z.string().min(1, 'Please confirm your password'),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: 'Passwords do not match',
-    path: ['confirmPassword'],
-  });
-
-type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
+// Zod validation schema - token is optional if provided in URL
+const createResetPasswordSchema = (hasTokenFromUrl: boolean) =>
+  z
+    .object({
+      token: hasTokenFromUrl
+        ? z.string().optional()
+        : z.string().min(1, 'Reset token is required'),
+      password: z
+        .string()
+        .min(1, 'Password is required')
+        .min(6, 'Password must be at least 6 characters'),
+      confirmPassword: z.string().min(1, 'Please confirm your password'),
+    })
+    .refine((data) => data.password === data.confirmPassword, {
+      message: 'Passwords do not match',
+      path: ['confirmPassword'],
+    });
 
 const ResetPassword = (): ReactElement => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string>('');
   const [success, setSuccess] = useState<string>('');
 
   const tokenFromUrl = searchParams.get('token') || '';
+  const hasTokenFromUrl = Boolean(tokenFromUrl);
+
+  const resetPasswordSchema = createResetPasswordSchema(hasTokenFromUrl);
+  type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
 
   const {
     register,
     handleSubmit,
     setValue,
+    setError,
     formState: { errors },
     clearErrors,
   } = useForm<ResetPasswordFormData>({
     resolver: zodResolver(resetPasswordSchema),
     mode: 'onBlur',
     defaultValues: {
-      token: tokenFromUrl,
+      token: tokenFromUrl || undefined,
+      password: '',
+      confirmPassword: '',
     },
   });
 
@@ -57,18 +65,23 @@ const ResetPassword = (): ReactElement => {
   }, [tokenFromUrl, setValue]);
 
   const onSubmit = async (data: ResetPasswordFormData): Promise<void> => {
-    setError('');
     setSuccess('');
     clearErrors();
     setIsLoading(true);
 
     try {
+      // Always use token from URL if available, otherwise use form data
+      const tokenToUse = tokenFromUrl || data.token || '';
       const response = await authService.resetPassword({
-        token: data.token,
+        token: tokenToUse,
         password: data.password,
       });
       if (response.success) {
-        setSuccess(response.data?.message || response.message || 'Password reset successfully! You can now login with your new password.');
+        const message = response.message || response.data?.message || 'Password reset successfully!';
+        const description = (response.message || response.data?.message) ? undefined : 'You can now login with your new password';
+        const successMessage = response.message || response.data?.message || 'Password reset successfully! You can now login with your new password.';
+        setSuccess(successMessage);
+        showToast.success(message, description);
         // Redirect to login after 2 seconds
         setTimeout(() => {
           navigate('/');
@@ -76,18 +89,29 @@ const ResetPassword = (): ReactElement => {
       }
     } catch (err: any) {
       console.error('Reset password error:', err);
-      if (err?.response?.data?.error?.message) {
-        setError(err.response.data.error.message);
-      } else if (err?.response?.data?.error) {
-        setError(typeof err.response.data.error === 'string' ? err.response.data.error : 'Failed to reset password');
-      } else if (err?.response?.data?.details && Array.isArray(err.response.data.details)) {
-        // Handle validation errors
-        const firstError = err.response.data.details[0];
-        setError(firstError.message || 'Validation error');
-      } else if (err?.message) {
-        setError(err.message);
+      // Handle validation errors from API
+      if (err?.response?.data?.details && Array.isArray(err.response.data.details)) {
+        const validationErrors = err.response.data.details;
+        validationErrors.forEach((detail: { path: string; message: string }) => {
+          if (detail.path === 'token' || detail.path === 'password') {
+            setError(detail.path as keyof ResetPasswordFormData, {
+              type: 'server',
+              message: detail.message,
+            });
+          }
+        });
       } else {
-        setError('Failed to reset password. Please check your token and try again.');
+        // Handle general errors
+        const errorMessage =
+          err?.response?.data?.error?.message ||
+          err?.response?.data?.error ||
+          err?.response?.data?.message ||
+          err?.message ||
+          'Failed to reset password. Please try again.';
+        setError('root', {
+          type: 'server',
+          message: typeof errorMessage === 'string' ? errorMessage : 'Failed to reset password. Please try again.',
+        });
       }
     } finally {
       setIsLoading(false);
@@ -115,7 +139,9 @@ const ResetPassword = (): ReactElement => {
               Reset Password
             </h1>
             <p className="text-sm md:text-base text-[#6b7280]">
-              Enter your reset token and new password
+              {tokenFromUrl
+                ? 'Enter your new password to reset'
+                : 'Enter your reset token and new password'}
             </p>
           </div>
 
@@ -126,13 +152,6 @@ const ResetPassword = (): ReactElement => {
             </div>
           )}
 
-          {/* Error Message */}
-          {error && (
-            <div className="mb-4 p-3 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md">
-              <p className="text-sm text-[#ef4444]">{error}</p>
-            </div>
-          )}
-
           {!success ? (
             <form
               onSubmit={(e) => {
@@ -143,15 +162,24 @@ const ResetPassword = (): ReactElement => {
               className="space-y-4"
               noValidate
             >
-              {/* Token Field */}
-              <FormField
-                label="Reset Token"
-                type="text"
-                placeholder="Enter reset token from email"
-                required
-                error={errors.token?.message}
-                {...register('token')}
-              />
+              {/* General Error Display */}
+              {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]">{errors.root.message}</p>
+                </div>
+              )}
+
+              {/* Token Field - Only show if not in URL */}
+              {!hasTokenFromUrl && (
+                <FormField
+                  label="Reset Token"
+                  type="text"
+                  placeholder="Enter reset token from email"
+                  required
+                  error={errors.token?.message}
+                  {...register('token')}
+                />
+              )}
 
               {/* Password Field */}
               <FormField
diff --git a/src/pages/Roles.tsx b/src/pages/Roles.tsx
index 195b2d3..f37d6f0 100644
--- a/src/pages/Roles.tsx
+++ b/src/pages/Roles.tsx
@@ -17,6 +17,7 @@ import {
 import { Plus, Download, ArrowUpDown } from 'lucide-react';
 import { roleService } from '@/services/role-service';
 import type { Role } from '@/types/role';
+import { showToast } from '@/utils/toast';
 
 // Helper function to format date
 const formatDate = (dateString: string): string => {
@@ -110,7 +111,10 @@ const Roles = (): ReactElement => {
   }): Promise<void> => {
     try {
       setIsCreating(true);
-      await roleService.create(data);
+      const response = await roleService.create(data);
+      const message = response.message || `Role created successfully`;
+      const description = response.message ? undefined : `${data.name} has been added`;
+      showToast.success(message, description);
       setIsModalOpen(false);
       await fetchRoles(currentPage, limit, scopeFilter, orderBy);
     } catch (err: any) {
@@ -145,7 +149,10 @@ const Roles = (): ReactElement => {
   ): Promise<void> => {
     try {
       setIsUpdating(true);
-      await roleService.update(id, data);
+      const response = await roleService.update(id, data);
+      const message = response.message || `Role updated successfully`;
+      const description = response.message ? undefined : `${data.name} has been updated`;
+      showToast.success(message, description);
       setEditModalOpen(false);
       setSelectedRoleId(null);
       await fetchRoles(currentPage, limit, scopeFilter, orderBy);
@@ -336,7 +343,7 @@ const Roles = (): ReactElement => {
             {/* Export Button */}
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors cursor-pointer"
             >
               <Download className="w-3.5 h-3.5" />
               <span>Export</span>
diff --git a/src/pages/Tenants.tsx b/src/pages/Tenants.tsx
index be417ff..d739a1d 100644
--- a/src/pages/Tenants.tsx
+++ b/src/pages/Tenants.tsx
@@ -15,6 +15,7 @@ import {
 import { Plus, Download, ArrowUpDown } from 'lucide-react';
 import { tenantService } from '@/services/tenant-service';
 import type { Tenant } from '@/types/tenant';
+import { showToast } from '@/utils/toast';
 
 // Helper function to get tenant initials
 const getTenantInitials = (name: string): string => {
@@ -126,7 +127,10 @@ const Tenants = (): ReactElement => {
   }): Promise<void> => {
     try {
       setIsCreating(true);
-      await tenantService.create(data);
+      const response = await tenantService.create(data);
+      const message = response.message || `Tenant created successfully`;
+      const description = response.message ? undefined : `${data.name} has been added`;
+      showToast.success(message, description);
       // Close modal and refresh tenant list
       setIsModalOpen(false);
       await fetchTenants(currentPage, limit, statusFilter, orderBy);
@@ -165,7 +169,10 @@ const Tenants = (): ReactElement => {
   ): Promise<void> => {
     try {
       setIsUpdating(true);
-      await tenantService.update(id, data);
+      const response = await tenantService.update(id, data);
+      const message = response.message || `Tenant updated successfully`;
+      const description = response.message ? undefined : `${data.name} has been updated`;
+      showToast.success(message, description);
       setEditModalOpen(false);
       setSelectedTenantId(null);
       await fetchTenants(currentPage, limit, statusFilter, orderBy);
@@ -265,7 +272,7 @@ const Tenants = (): ReactElement => {
             {/* Export Button */}
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors cursor-pointer"
             >
               <Download className="w-3.5 h-3.5" />
               <span>Export</span>
diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx
index 2c50e8d..1f32790 100644
--- a/src/pages/Users.tsx
+++ b/src/pages/Users.tsx
@@ -17,6 +17,7 @@ import {
 import { Plus, Download, ArrowUpDown } from 'lucide-react';
 import { userService } from '@/services/user-service';
 import type { User } from '@/types/user';
+import { showToast } from '@/utils/toast';
 
 // Helper function to get user initials
 const getUserInitials = (firstName: string, lastName: string): string => {
@@ -123,7 +124,10 @@ const Users = (): ReactElement => {
   }): Promise<void> => {
     try {
       setIsCreating(true);
-      await userService.create(data);
+      const response = await userService.create(data);
+      const message = response.message || `User created successfully`;
+      const description = response.message ? undefined : `${data.first_name} ${data.last_name} has been added`;
+      showToast.success(message, description);
       setIsModalOpen(false);
       await fetchUsers(currentPage, limit, statusFilter, orderBy);
     } catch (err: any) {
@@ -160,7 +164,10 @@ const Users = (): ReactElement => {
   ): Promise<void> => {
     try {
       setIsUpdating(true);
-      await userService.update(id, data);
+      const response = await userService.update(id, data);
+      const message = response.message || `User updated successfully`;
+      const description = response.message ? undefined : `${data.first_name} ${data.last_name} has been updated`;
+      showToast.success(message, description);
       setEditModalOpen(false);
       setSelectedUserId(null);
       await fetchUsers(currentPage, limit, statusFilter, orderBy);
@@ -369,7 +376,7 @@ const Users = (): ReactElement => {
             {/* Export Button */}
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors cursor-pointer"
             >
               <Download className="w-3.5 h-3.5" />
               <span>Export</span>
diff --git a/src/services/auth-service.ts b/src/services/auth-service.ts
index ce75c35..58918f7 100644
--- a/src/services/auth-service.ts
+++ b/src/services/auth-service.ts
@@ -24,6 +24,7 @@ export interface LoginResponse {
     expires_in: number;
     expires_at: string;
   };
+  message?: string;
 }
 
 export interface ValidationError {
diff --git a/src/services/tenant-service.ts b/src/services/tenant-service.ts
index b756d2a..c150fd0 100644
--- a/src/services/tenant-service.ts
+++ b/src/services/tenant-service.ts
@@ -20,6 +20,7 @@ export interface CreateTenantRequest {
 export interface CreateTenantResponse {
   success: boolean;
   data: Tenant;
+  message?: string;
 }
 
 export interface GeneralError {
@@ -50,6 +51,7 @@ export interface UpdateTenantRequest {
 export interface UpdateTenantResponse {
   success: boolean;
   data: Tenant;
+  message?: string;
 }
 
 export interface DeleteTenantResponse {
diff --git a/src/store/authSlice.ts b/src/store/authSlice.ts
index 597a44a..ae48ffe 100644
--- a/src/store/authSlice.ts
+++ b/src/store/authSlice.ts
@@ -38,14 +38,14 @@ const initialState: AuthState = {
 
 // Async thunk for login
 export const loginAsync = createAsyncThunk<
-  LoginResponse['data'],
+  { data: LoginResponse['data']; message?: string },
   LoginRequest,
   { rejectValue: LoginError }
 >('auth/login', async (credentials, { rejectWithValue }) => {
   try {
     const response = await authService.login(credentials);
     if (response.success) {
-      return response.data;
+      return { data: response.data, message: response.message };
     }
     return rejectWithValue(response as unknown as LoginError);
   } catch (error: any) {
@@ -63,13 +63,14 @@ export const loginAsync = createAsyncThunk<
 });
 
 // Async thunk for logout
-export const logoutAsync = createAsyncThunk('auth/logout', async (_, { rejectWithValue }) => {
+export const logoutAsync = createAsyncThunk<{ message?: string }, void, { rejectValue: { message?: string } }>('auth/logout', async (_, { rejectWithValue }) => {
   try {
-    await authService.logout();
-    return true;
+    const response = await authService.logout();
+    return { message: response.message };
   } catch (error: any) {
     // Even if API call fails, we should still logout locally
-    return rejectWithValue(error?.response?.data || { message: 'Logout failed' });
+    const errorData = error?.response?.data || { message: 'Logout failed' };
+    return rejectWithValue({ message: errorData.message });
   }
 });
 
@@ -99,16 +100,16 @@ const authSlice = createSlice({
         state.isLoading = true;
         state.error = null;
       })
-      .addCase(loginAsync.fulfilled, (state, action: PayloadAction<LoginResponse['data']>) => {
+      .addCase(loginAsync.fulfilled, (state, action: PayloadAction<{ data: LoginResponse['data']; message?: string }>) => {
         state.isLoading = false;
-        state.user = action.payload.user;
-        state.tenantId = action.payload.tenant_id;
-        state.roles = action.payload.roles;
-        state.accessToken = action.payload.access_token;
-        state.refreshToken = action.payload.refresh_token;
-        state.tokenType = action.payload.token_type;
-        state.expiresIn = action.payload.expires_in;
-        state.expiresAt = action.payload.expires_at;
+        state.user = action.payload.data.user;
+        state.tenantId = action.payload.data.tenant_id;
+        state.roles = action.payload.data.roles;
+        state.accessToken = action.payload.data.access_token;
+        state.refreshToken = action.payload.data.refresh_token;
+        state.tokenType = action.payload.data.token_type;
+        state.expiresIn = action.payload.data.expires_in;
+        state.expiresAt = action.payload.data.expires_at;
         state.isAuthenticated = true;
         state.error = null;
       })
diff --git a/src/types/role.ts b/src/types/role.ts
index fc9de12..4f99b44 100644
--- a/src/types/role.ts
+++ b/src/types/role.ts
@@ -32,6 +32,7 @@ export interface CreateRoleRequest {
 export interface CreateRoleResponse {
   success: boolean;
   data: Role;
+  message?: string;
 }
 
 export interface GetRoleResponse {
@@ -49,6 +50,7 @@ export interface UpdateRoleRequest {
 export interface UpdateRoleResponse {
   success: boolean;
   data: Role;
+  message?: string;
 }
 
 export interface DeleteRoleResponse {
diff --git a/src/types/user.ts b/src/types/user.ts
index bb243c7..27e56eb 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -7,6 +7,14 @@ export interface User {
   auth_provider: string;
   tenant_id?: string;
   role_id?: string;
+  tenant?: {
+    id: string;
+    name: string;
+  };
+  role?: {
+    id: string;
+    name: string;
+  };
   created_at: string;
   updated_at: string;
 }
@@ -39,6 +47,7 @@ export interface CreateUserRequest {
 export interface CreateUserResponse {
   success: boolean;
   data: User;
+  message?: string;
 }
 
 export interface GetUserResponse {
@@ -59,6 +68,7 @@ export interface UpdateUserRequest {
 export interface UpdateUserResponse {
   success: boolean;
   data: User;
+  message?: string;
 }
 
 export interface DeleteUserResponse {
diff --git a/src/utils/toast.ts b/src/utils/toast.ts
new file mode 100644
index 0000000..ac2eb08
--- /dev/null
+++ b/src/utils/toast.ts
@@ -0,0 +1,31 @@
+import { toast } from 'sonner';
+
+/**
+ * Reusable toast utility for showing success and error messages
+ */
+export const showToast = {
+  success: (message: string, description?: string) => {
+    toast.success(message, {
+      description,
+      duration: 3000,
+    });
+  },
+  error: (message: string, description?: string) => {
+    toast.error(message, {
+      description,
+      duration: 4000,
+    });
+  },
+  info: (message: string, description?: string) => {
+    toast.info(message, {
+      description,
+      duration: 3000,
+    });
+  },
+  warning: (message: string, description?: string) => {
+    toast.warning(message, {
+      description,
+      duration: 3000,
+    });
+  },
+};