diff --git a/packages/client/src/components/character-form.tsx b/packages/client/src/components/character-form.tsx
index b13aff7b9b1..37b07c00ca9 100644
--- a/packages/client/src/components/character-form.tsx
+++ b/packages/client/src/components/character-form.tsx
@@ -3,142 +3,126 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/hooks/use-toast";
 import type { Character } from "@elizaos/core";
 import React, { useState, type FormEvent, type ReactNode } from "react";
-import { useNavigate } from "react-router-dom";
-import { useQueryClient } from "@tanstack/react-query";
 
-// Error Boundary Component
-export class ErrorBoundary extends React.Component<{ children: ReactNode }, { hasError: boolean }> {
-  constructor(props: { children: ReactNode }) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div className="p-4 rounded-md bg-destructive/10 text-destructive">
-          <h4 className="font-medium mb-2">Something went wrong</h4>
-          <p className="text-sm">Please try refreshing the page.</p>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-type NestedObject = {
-  [key: string]: string | number | boolean | NestedObject;
-};
-
-type UpdateArrayPath = 
-  | "bio" 
-  | "topics" 
-  | "adjectives" 
-  | "plugins" 
-  | "style.all" 
-  | "style.chat" 
-  | "style.post";
+type FieldType = "text" | "textarea" | "number" | "checkbox" | "select";
 
 type InputField = {
   title: string;
   name: string;
   description?: string;
   getValue: (char: Character) => string;
+  fieldType: FieldType
 };
 
 type ArrayField = {
   title: string;
   description?: string;
-  path: UpdateArrayPath;
+  path: string;
   getData: (char: Character) => string[];
 };
 
-type CheckboxField = {
-  name: string;
-  label: string;
-  description?: string;
-  getValue: (char: Character) => boolean;
-};
-
-const TEXT_FIELDS: InputField[] = [
-  {
-    title: "Name",
-    name: "name",
-    description: "The display name of your character",
-    getValue: (char) => char.name || '',
-  },
-  {
-    title: "Username",
-    name: "username",
-    description: "Unique identifier for your character",
-    getValue: (char) => char.username || '',
-  },
-  {
-    title: "System",
-    name: "system",
-    description: "System prompt for character behavior",
-    getValue: (char) => char.system || '',
-  },
-  {
-    title: "Voice Model",
-    name: "settings.voice.model",
-    description: "Voice model used for speech synthesis",
-    getValue: (char) => char.settings?.voice?.model || '',
-  },
-];
+enum SECTION_TYPE {
+  INPUT = "input",
+  ARRAY = "array"
+}
 
-const ARRAY_FIELDS: ArrayField[] = [
+const CHARACTER_FORM_SCHEMA = [
   {
-    title: "Bio",
-    description: "Key information about your character",
-    path: "bio",
-    getData: (char) => Array.isArray(char.bio) ? char.bio : [],
+    sectionTitle: "Basic Info",
+    sectionValue: "basic",
+    sectionType: SECTION_TYPE.INPUT,
+    fields: [
+      {
+        title: "Name",
+        name: "name",
+        description: "The display name of your character",
+        fieldType: "text",
+        getValue: (char) => char.name || '',
+      },
+      {
+        title: "Username",
+        name: "username",
+        description: "Unique identifier for your character",
+        fieldType: "text",
+        getValue: (char) => char.username || '',
+      },
+      {
+        title: "System",
+        name: "system",
+        description: "System prompt for character behavior",
+        fieldType: "textarea",
+        getValue: (char) => char.system || '',
+      },
+      {
+        title: "Voice Model",
+        name: "settings.voice.model",
+        description: "Voice model used for speech synthesis",
+        fieldType: "text",
+        getValue: (char) => char.settings?.voice?.model || '',
+      },
+    ] as InputField[]
   },
   {
-    title: "Topics",
-    description: "Topics your character is knowledgeable about",
-    path: "topics",
-    getData: (char) => char.topics || [],
+    sectionTitle: "Content",
+    sectionValue: "content",
+    sectionType: SECTION_TYPE.ARRAY,
+    fields: [
+      {
+        title: "Bio",
+        description: "Key information about your character",
+        path: "bio",
+        getData: (char) => Array.isArray(char.bio) ? char.bio : [],
+      },
+      {
+        title: "Topics",
+        description: "Topics your character is knowledgeable about",
+        path: "topics",
+        getData: (char) => char.topics || [],
+      },
+      {
+        title: "Adjectives",
+        description: "Words that describe your character's personality",
+        path: "adjectives",
+        getData: (char) => char.adjectives || [],
+      },
+    ] as ArrayField[]
   },
   {
-    title: "Adjectives",
-    description: "Words that describe your character's personality",
-    path: "adjectives",
-    getData: (char) => char.adjectives || [],
-  },
-];
+    sectionTitle: "Style",
+    sectionValue: "style",
+    sectionType: SECTION_TYPE.ARRAY,
+    fields: [
+      {
+        title: "All",
+        description: "Style rules applied to all interactions",
+        path: "style.all",
+        getData: (char) => char.style?.all || [],
+      },
+      {
+        title: "Chat",
+        description: "Style rules for chat interactions",
+        path: "style.chat",
+        getData: (char) => char.style?.chat || [],
+      },
+      {
+        title: "Post",
+        description: "Style rules for social media posts",
+        path: "style.post",
+        getData: (char) => char.style?.post || [],
+      },
+    ] as ArrayField[]
+  }
+]
 
-const STYLE_FIELDS: ArrayField[] = [
-  {
-    title: "All",
-    description: "Style rules applied to all interactions",
-    path: "style.all",
-    getData: (char) => char.style?.all || [],
-  },
-  {
-    title: "Chat",
-    description: "Style rules for chat interactions",
-    path: "style.chat",
-    getData: (char) => char.style?.chat || [],
-  },
-  {
-    title: "Post",
-    description: "Style rules for social media posts",
-    path: "style.post",
-    getData: (char) => char.style?.post || [],
-  },
-];
+type customComponent = {
+  name: string,
+  component: ReactNode
+}
 
 export type CharacterFormProps = {
   character: Character;
@@ -148,12 +132,10 @@ export type CharacterFormProps = {
   onDelete?: () => Promise<void>;
   onCancel?: () => void;
   onReset?: () => void;
-  showPlugins?: boolean;
-  showSettings?: boolean;
   submitButtonText?: string;
   deleteButtonText?: string;
   isAgent?: boolean;
-  settingsContent?: ReactNode;
+  customComponents?: customComponent[];
 };
 
 export default function CharacterForm({
@@ -164,16 +146,11 @@ export default function CharacterForm({
   onDelete,
   onCancel,
   onReset,
-  showPlugins = false,
-  showSettings = false,
   submitButtonText = "Save Changes",
   deleteButtonText = "Delete",
-  isAgent = false,
-  settingsContent,
+  customComponents = []
 }: CharacterFormProps) {
   const { toast } = useToast();
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
 
   const [characterValue, setCharacterValue] = useState<Character>(character);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -187,13 +164,13 @@ export default function CharacterForm({
       const parts = name.split('.');
       setCharacterValue(prev => {
         const newValue = { ...prev };
-        let current = newValue as unknown as NestedObject;
+        let current: Record<string, any> = newValue;
         
         for (let i = 0; i < parts.length - 1; i++) {
           if (!current[parts[i]]) {
             current[parts[i]] = {};
           }
-          current = current[parts[i]] as NestedObject;
+          current = current[parts[i]];
         }
         
         current[parts[parts.length - 1]] = type === 'checkbox' ? checked : value;
@@ -207,27 +184,27 @@ export default function CharacterForm({
     }
   };
 
-  const updateArray = (path: UpdateArrayPath, newData: string[]) => {
+  const updateArray = (path: string, newData: string[]) => {
     setCharacterValue(prev => {
       const newValue = { ...prev };
-      
-      if (path.includes('.')) {
-        const [parent, child] = path.split('.') as ["style", "all" | "chat" | "post"];
-        return {
-          ...newValue,
-          [parent]: {
-            ...(newValue[parent] || {}),
-            [child]: newData
-          }
-        };
+      const keys = path.split(".");
+      let current: any = newValue;
+  
+      for (let i = 0; i < keys.length - 1; i++) {
+        const key = keys[i];
+  
+        if (!current[key] || typeof current[key] !== "object") {
+          current[key] = {}; // Ensure path exists
+        }
+        current = current[key];
       }
-      
-      return {
-        ...newValue,
-        [path]: newData
-      } as Character;
+  
+      current[keys[keys.length - 1]] = newData; // Update array
+  
+      return newValue;
     });
   };
+  
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -264,6 +241,48 @@ export default function CharacterForm({
     }
   };
 
+
+  const renderInputField = (field: InputField) => (
+    <div key={field.name} className="space-y-2">
+      <Label htmlFor={field.name}>{field.title}</Label>
+      {field.description && <p className="text-sm text-muted-foreground">{field.description}</p>}
+      
+      {field.fieldType === "textarea" ? (
+        <Textarea
+          id={field.name}
+          name={field.name}
+          value={field.getValue(characterValue)}
+          onChange={handleChange}
+          className="min-h-[120px] resize-y"
+        />
+      ) : field.fieldType === "checkbox" ? (
+        <Input
+          id={field.name}
+          name={field.name}
+          type="checkbox"
+          checked={(characterValue as Record<string, any>)[field.name] === "true"}
+          onChange={handleChange}
+        />
+      ) : (
+        <Input
+          id={field.name}
+          name={field.name}
+          type={field.fieldType}
+          value={field.getValue(characterValue)}
+          onChange={handleChange}
+        />
+      )}
+    </div>
+  );
+  
+  const renderArrayField = (field: ArrayField) => (
+    <div key={field.path} className="space-y-2">
+      <Label htmlFor={field.path}>{field.title}</Label>
+      {field.description && <p className="text-sm text-muted-foreground">{field.description}</p>}
+      <ArrayInput data={field.getData(characterValue)} onChange={(newData) => updateArray(field.path, newData)} />
+    </div>
+  );
+
   return (
     <div className="container max-w-4xl mx-auto p-6">
       <div className="flex items-center justify-between mb-6">
@@ -275,85 +294,30 @@ export default function CharacterForm({
 
       <form onSubmit={handleSubmit}>
         <Tabs defaultValue="basic" className="w-full">
-          <TabsList className={`grid w-full ${showSettings ? 'grid-cols-4' : 'grid-cols-3'} mb-6`}>
-            <TabsTrigger value="basic">Basic Info</TabsTrigger>
-            <TabsTrigger value="content">Content</TabsTrigger>
-            <TabsTrigger value="style">Style</TabsTrigger>
-            {showSettings && (
-              <TabsTrigger value="settings">Settings</TabsTrigger>
-            )}
+          <TabsList 
+            className={`grid w-full mb-6`}
+            style={{ gridTemplateColumns: `repeat(${customComponents.length + 3}, minmax(0, 1fr))` }}
+          >
+            {CHARACTER_FORM_SCHEMA.map((section) => (
+              <TabsTrigger value={section.sectionValue}>{section.sectionTitle}</TabsTrigger>
+            ))}
+            {customComponents.map((component, index) => (
+              <TabsTrigger key={`custom-${index}`} value={`custom-${index}`}>{component.name}</TabsTrigger>
+            ))}
           </TabsList>
           
           <Card>
             <CardContent className="p-6">
-              <TabsContent value="basic" className="space-y-6">
-                {TEXT_FIELDS.map((field) => (
-                  <div key={field.name} className="space-y-2">
-                    <Label htmlFor={field.name}>{field.title}</Label>
-                    {field.description && (
-                      <p className="text-sm text-muted-foreground">{field.description}</p>
-                    )}
-                    {field.name === 'system' ? (
-                      <Textarea
-                        id={field.name}
-                        name={field.name}
-                        value={field.getValue(characterValue)}
-                        onChange={handleChange}
-                        className="min-h-[120px] resize-y"
-                      />
-                    ) : (
-                      <Input
-                        id={field.name}
-                        name={field.name}
-                        value={field.getValue(characterValue)}
-                        onChange={handleChange}
-                      />
-                    )}
-                  </div>
-                ))}
-              </TabsContent>
-
-              <TabsContent value="content" className="space-y-6">
-                {ARRAY_FIELDS.slice(0, 3).map((field) => (
-                  <div key={field.path} className="space-y-2">
-                    <Label htmlFor={field.path}>{field.title}</Label>
-                    {field.description && (
-                      <p className="text-sm text-muted-foreground">{field.description}</p>
-                    )}
-                    <ArrayInput
-                      data={field.getData(characterValue)}
-                      onChange={(newData) => updateArray(field.path, newData)}
-                    />
-                  </div>
-                ))}
-              </TabsContent>
-
-              <TabsContent value="style" className="space-y-6">
-                {STYLE_FIELDS.map((field) => (
-                  <div key={field.path} className="space-y-2">
-                    <Label htmlFor={field.path}>{field.title}</Label>
-                    {field.description && (
-                      <p className="text-sm text-muted-foreground">{field.description}</p>
-                    )}
-                    <ArrayInput
-                      data={field.getData(characterValue)}
-                      onChange={(newData) => updateArray(field.path, newData)}
-                    />
-                  </div>
-                ))}
-              </TabsContent>
-
-              {showSettings && (
-                <TabsContent value="settings" className="space-y-6">
-                  <ErrorBoundary>
-                    {settingsContent ? (
-                      settingsContent
-                    ) : (
-                      <p>Settings can be implemented based on specific requirements</p>
-                    )}
-                  </ErrorBoundary>
+              {CHARACTER_FORM_SCHEMA.map((section) => (
+                <TabsContent key={section.sectionValue} value={section.sectionValue} className="space-y-6">
+                  {section.sectionType === SECTION_TYPE.INPUT
+                    ? (section.fields as InputField[]).map(renderInputField)
+                    : (section.fields as ArrayField[]).map(renderArrayField)}
                 </TabsContent>
-              )}
+              ))}
+              {customComponents.map((component, index) => (
+                <TabsContent key={`custom-${index}`} value={`custom-${index}`}>{component.component}</TabsContent>
+              ))}
             </CardContent>
           </Card>
         </Tabs>
@@ -379,15 +343,16 @@ export default function CharacterForm({
           </div>
           
           <div className="flex gap-4">
-            {onReset && (
-              <Button
-                type="button"
-                variant="outline"
-                onClick={onReset}
-              >
-                Reset Changes
-              </Button>
-            )}
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                onReset && onReset();
+                setCharacterValue(character)
+              }}
+            >
+              Reset Changes
+            </Button>
             <Button
               type="submit"
               disabled={isSubmitting}
diff --git a/packages/client/src/components/overview.tsx b/packages/client/src/components/overview.tsx
index ea37963c756..5fb5f6dcd62 100644
--- a/packages/client/src/components/overview.tsx
+++ b/packages/client/src/components/overview.tsx
@@ -282,12 +282,16 @@ export default function Overview({ character }: { character: Character }) {
       description="Configure your AI character's behavior and capabilities"
       onSubmit={handleSubmit}
       onReset={() => setCharacterValue(character)}
-      showSettings={true}
       submitButtonText="Save Changes"
       deleteButtonText="Stop Agent"
       onDelete={handleStopAgent}
       isAgent={true}
-      settingsContent={<SettingsContent />}
+      customComponents={[
+        {
+          name: "Settings",
+          component: <SettingsContent />
+        }
+      ]}
     />
   );
 }
diff --git a/packages/client/src/lib/api.ts b/packages/client/src/lib/api.ts
index 8e0c6dfce84..d07bf23ffc8 100644
--- a/packages/client/src/lib/api.ts
+++ b/packages/client/src/lib/api.ts
@@ -61,7 +61,12 @@ const fetcher = async ({
             throw new Error(errorMessage);
         }
             
-        return resp.json();
+        try {
+            return await resp.json();
+        } catch (error) {
+            console.error("JSON Parse Error:", error);
+            return null;
+        }
     });
 };
 
diff --git a/packages/client/src/routes/edit-character.tsx b/packages/client/src/routes/edit-character.tsx
index 080147c558d..4abd0a106de 100644
--- a/packages/client/src/routes/edit-character.tsx
+++ b/packages/client/src/routes/edit-character.tsx
@@ -3,12 +3,10 @@ import { useParams, useNavigate } from "react-router-dom";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { apiClient } from "@/lib/api";
 import { useToast } from "@/hooks/use-toast";
-import PageTitle from "@/components/page-title";
 import CharacterForm from "@/components/character-form";
 import type { Character, UUID } from "@elizaos/core";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { urlToCharacterName } from "@/lib/utils";
 
 // Define Agent type interface based on the API response
 interface Agent {
diff --git a/packages/client/src/routes/new-character.tsx b/packages/client/src/routes/new-character.tsx
index e3fb891ffd4..9f8238b52b5 100644
--- a/packages/client/src/routes/new-character.tsx
+++ b/packages/client/src/routes/new-character.tsx
@@ -3,52 +3,46 @@ import { useNavigate } from "react-router-dom";
 import { useToast } from "@/hooks/use-toast";
 import { useQueryClient } from "@tanstack/react-query";
 import PageTitle from "@/components/page-title";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+import type { Character } from "@elizaos/core";
 import { apiClient } from "@/lib/api";
+import CharacterForm from "@/components/character-form";
+
+const defaultCharacter = {
+    name: "",
+    username: "",
+    system: "",
+    bio: [] as string[],
+    topics: [] as string[],
+    adjectives: [] as string[],
+}
 
 export default function NewCharacter() {
     const navigate = useNavigate();
     const { toast } = useToast();
     const queryClient = useQueryClient();
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [character, setCharacter] = useState({
-        name: "",
-        username: "",
-        system: "",
-        bio: [] as string[],
-        topics: [] as string[],
-        adjectives: [] as string[],
-    });
+    const [character, setCharacter] = useState({...defaultCharacter});
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        const { name, value } = e.target;
-        setCharacter(prev => ({
-            ...prev,
-            [name]: value
-        }));
-    };
+    const ensureRequiredFields = (character: Character): Character => {
+        return {
+            ...character,
+            bio: character.bio ?? [],
+            messageExamples: character.messageExamples ?? [],
+            postExamples: character.postExamples ?? [],
+            topics: character.topics ?? [],
+            adjectives: character.adjectives ?? [],
+            plugins: character.plugins ?? [],
+            style: character.style ?? { all: [], chat: [], post: [] },
+        };
+    };    
 
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
+    const handleSubmit = async (character: Character) => {
         setIsSubmitting(true);
 
         try {
-            // Format the bio, topics, and adjectives as arrays
-            const bioArray = character.bio.length > 0 ? character.bio : character.system.split('\n').filter(line => line.trim());
-            
-            const characterData = {
-                ...character,
-                bio: bioArray,
-                topics: character.topics.length > 0 ? character.topics : [],
-                adjectives: character.adjectives.length > 0 ? character.adjectives : [],
-            };
+            const completeCharacter = ensureRequiredFields(character);
+            await apiClient.createCharacter(completeCharacter);
 
-            await apiClient.createCharacter(characterData);
-            
             // Invalidate the characters query to refresh the characters list
             queryClient.invalidateQueries({ queryKey: ["characters"] });
             
@@ -72,70 +66,16 @@ export default function NewCharacter() {
     return (
         <div className="flex flex-col gap-4 h-full p-4">
             <PageTitle title="Create New Character" />
-            
-            <form onSubmit={handleSubmit}>
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Character Details</CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                        <div className="space-y-2">
-                            <Label htmlFor="name">Name</Label>
-                            <Input
-                                id="name"
-                                name="name"
-                                value={character.name}
-                                onChange={handleChange}
-                                placeholder="Character's display name"
-                                required
-                            />
-                            <p className="text-sm text-muted-foreground">The display name for your character</p>
-                        </div>
-                        
-                        <div className="space-y-2">
-                            <Label htmlFor="username">Username</Label>
-                            <Input
-                                id="username"
-                                name="username"
-                                value={character.username}
-                                onChange={handleChange}
-                                placeholder="unique-username"
-                                required
-                            />
-                            <p className="text-sm text-muted-foreground">A unique identifier for your character (no spaces or special characters)</p>
-                        </div>
-                        
-                        <div className="space-y-2">
-                            <Label htmlFor="system">System Prompt</Label>
-                            <Textarea
-                                id="system"
-                                name="system"
-                                value={character.system}
-                                onChange={handleChange}
-                                placeholder="Describe your character's behavior and personality..."
-                                className="min-h-[150px]"
-                                required
-                            />
-                            <p className="text-sm text-muted-foreground">System prompt that defines your character's personality and behavior</p>
-                        </div>
-                    </CardContent>
-                    <CardFooter className="flex justify-between">
-                        <Button 
-                            type="button" 
-                            variant="outline" 
-                            onClick={() => navigate("/characters")}
-                        >
-                            Cancel
-                        </Button>
-                        <Button 
-                            type="submit" 
-                            disabled={isSubmitting}
-                        >
-                            {isSubmitting ? "Creating..." : "Create Character"}
-                        </Button>
-                    </CardFooter>
-                </Card>
-            </form>
+            <CharacterForm
+                character={character}
+                title="Create Character"
+                description={`Create character`}
+                onSubmit={handleSubmit}
+                onCancel={() => navigate('/characters')}
+                deleteButtonText="Delete Character"
+                submitButtonText="Save Changes"
+            />
+           
         </div>
     );
 } 
\ No newline at end of file