diff --git a/components/AddMemberDialog.vue b/components/AddMemberDialog.vue
index e54e071..4c3e877 100644
--- a/components/AddMemberDialog.vue
+++ b/components/AddMemberDialog.vue
@@ -201,7 +201,7 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
-import { formatBooleanAsString } from '~/server/utils/nocodb';
+import { formatBooleanAsString } from '~/utils/client-utils';
 
 interface Props {
   modelValue: boolean;
diff --git a/components/ProfileAvatar.vue b/components/ProfileAvatar.vue
index 4cd1f59..f11ed5c 100644
--- a/components/ProfileAvatar.vue
+++ b/components/ProfileAvatar.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { generateInitials, generateAvatarColor } from '~/server/utils/profile-images';
+import { generateInitials, generateAvatarColor } from '~/utils/client-utils';
 
 interface Props {
   memberId?: string;
diff --git a/utils/client-utils.ts b/utils/client-utils.ts
new file mode 100644
index 0000000..ef606cd
--- /dev/null
+++ b/utils/client-utils.ts
@@ -0,0 +1,50 @@
+/**
+ * Client-safe utility functions that can be shared between server and client code
+ * These functions do not depend on Node.js modules and are safe for browser bundling
+ */
+
+// Boolean string formatting utility
+export const formatBooleanAsString = (value: boolean): string => {
+  return value ? 'true' : 'false';
+};
+
+// Profile avatar utilities
+export const generateInitials = (firstName: string = '', lastName: string = ''): string => {
+  const first = firstName?.charAt(0) || '';
+  const last = lastName?.charAt(0) || '';
+  return `${first}${last}`.toUpperCase();
+};
+
+export const generateAvatarColor = (id: string | number): string => {
+  // High-contrast colors for better visibility
+  const colors = [
+    'red', 'blue', 'green', 'orange', 'purple', 
+    'teal', 'indigo', 'pink', 'brown', 'deep-purple'
+  ];
+  
+  const idNumber = typeof id === 'string' ? parseInt(id) || 0 : id;
+  return colors[Math.abs(idNumber) % colors.length];
+};
+
+// Member name formatting utility
+export const formatMemberName = (firstName: string = '', lastName: string = ''): string => {
+  const fullName = `${firstName.trim()} ${lastName.trim()}`.trim();
+  return fullName || 'Unknown Member';
+};
+
+// Phone number formatting utility (client-safe version)
+export const formatPhoneDisplay = (phone: string): string => {
+  if (!phone) return '';
+  
+  // Remove all non-digits
+  const cleaned = phone.replace(/\D/g, '');
+  
+  // Format based on length
+  if (cleaned.length === 10) {
+    return `(${cleaned.substring(0, 3)}) ${cleaned.substring(3, 6)}-${cleaned.substring(6)}`;
+  } else if (cleaned.length === 11 && cleaned.startsWith('1')) {
+    return `+1 (${cleaned.substring(1, 4)}) ${cleaned.substring(4, 7)}-${cleaned.substring(7)}`;
+  }
+  
+  return phone; // Return original if we can't format it
+};