diff --git a/apps/api/src/routers/users.py b/apps/api/src/routers/users.py
index 98cb25aa..b7b6780b 100644
--- a/apps/api/src/routers/users.py
+++ b/apps/api/src/routers/users.py
@@ -28,6 +28,7 @@ from src.services.users.users import (
     get_user_session,
     read_user_by_id,
     read_user_by_uuid,
+    read_user_by_username,
     update_user,
     update_user_avatar,
     update_user_password,
@@ -170,6 +171,20 @@ async def api_get_user_by_uuid(
     return await read_user_by_uuid(request, db_session, current_user, user_uuid)
 
 
+@router.get("/username/{username}", response_model=UserRead, tags=["users"])
+async def api_get_user_by_username(
+    *,
+    request: Request,
+    db_session: Session = Depends(get_db_session),
+    current_user: PublicUser = Depends(get_current_user),
+    username: str,
+) -> UserRead:
+    """
+    Get User by Username
+    """
+    return await read_user_by_username(request, db_session, current_user, username)
+
+
 @router.put("/{user_id}", response_model=UserRead, tags=["users"])
 async def api_update_user(
     *,
diff --git a/apps/api/src/services/users/users.py b/apps/api/src/services/users/users.py
index c23f6df7..c4b2a420 100644
--- a/apps/api/src/services/users/users.py
+++ b/apps/api/src/services/users/users.py
@@ -424,6 +424,30 @@ async def read_user_by_uuid(
     return user
 
 
+async def read_user_by_username(
+    request: Request,
+    db_session: Session,
+    current_user: PublicUser | AnonymousUser,
+    username: str,
+):
+    # Get user
+    statement = select(User).where(User.username == username)
+    user = db_session.exec(statement).first()
+
+    if not user:
+        raise HTTPException(
+            status_code=400,
+            detail="User does not exist",
+        )
+
+    # RBAC check
+    await rbac_check(request, current_user, "read", user.user_uuid, db_session)
+
+    user = UserRead.model_validate(user)
+
+    return user
+
+
 async def get_user_session(
     request: Request,
     db_session: Session,
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/user/[username]/UserProfileClient.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/user/[username]/UserProfileClient.tsx
new file mode 100644
index 00000000..da5e676b
--- /dev/null
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/user/[username]/UserProfileClient.tsx
@@ -0,0 +1,234 @@
+'use client';
+
+import React from 'react'
+import UserAvatar from '@components/Objects/UserAvatar'
+import { 
+  Briefcase, 
+  Building2, 
+  MapPin, 
+  Globe, 
+  Link as LinkIcon, 
+  GraduationCap,
+  Award,
+  BookOpen,
+  Laptop2,
+  Users,
+  Calendar,
+  Lightbulb
+} from 'lucide-react'
+import { getUserAvatarMediaDirectory } from '@services/media/media'
+
+interface UserProfileClientProps {
+  userData: any;
+  profile: any;
+}
+
+const ICON_MAP = {
+  'briefcase': Briefcase,
+  'graduation-cap': GraduationCap,
+  'map-pin': MapPin,
+  'building-2': Building2,
+  'speciality': Lightbulb,
+  'globe': Globe,
+  'laptop-2': Laptop2,
+  'award': Award,
+  'book-open': BookOpen,
+  'link': LinkIcon,
+  'users': Users,
+  'calendar': Calendar,
+} as const
+
+function UserProfileClient({ userData, profile }: UserProfileClientProps) {
+  const IconComponent = ({ iconName }: { iconName: string }) => {
+    const IconElement = ICON_MAP[iconName as keyof typeof ICON_MAP]
+    if (!IconElement) return null
+    return <IconElement className="w-4 h-4 text-gray-600" />
+  }
+
+  return (
+    <div className="container mx-auto py-8">
+      {/* Banner */}
+      <div className="h-48 w-full bg-gray-100 rounded-t-xl mb-0 relative overflow-hidden">
+        {/* Optional banner content */}
+      </div>
+      
+      {/* Profile Content */}
+      <div className="bg-white rounded-b-xl nice-shadow p-8 relative">
+        {/* Avatar Positioned on the banner */}
+        <div className="absolute -top-24 left-8">
+          <div className="rounded-xl overflow-hidden shadow-lg border-4 border-white">
+            <UserAvatar
+              width={150}
+              avatar_url={userData.avatar_image ? getUserAvatarMediaDirectory(userData.user_uuid, userData.avatar_image) : ''}
+              predefined_avatar={userData.avatar_image ? undefined : 'empty'}
+              userId={userData.id}
+              showProfilePopup
+              rounded="rounded-xl"
+            />
+          </div>
+        </div>
+
+        {/* Affiliation Logos */}
+        <div className="absolute -top-12 right-8 flex items-center gap-4">
+          {profile.sections?.map((section: any) => (
+            section.type === 'affiliation' && section.affiliations?.map((affiliation: any, index: number) => (
+              affiliation.logoUrl && (
+                <div key={index} className="bg-white rounded-lg p-2 shadow-lg border-2 border-white">
+                  <img 
+                    src={affiliation.logoUrl} 
+                    alt={affiliation.name}
+                    className="w-16 h-16 object-contain"
+                    title={affiliation.name}
+                  />
+                </div>
+              )
+            ))
+          ))}
+        </div>
+
+        {/* Profile Content with right padding to avoid overlap */}
+        <div className="mt-20 md:mt-14">
+          <div className="flex flex-col md:flex-row gap-12">
+            {/* Left column with details - aligned with avatar */}
+            <div className="w-full md:w-1/6 pl-2">
+              {/* Name */}
+              <h1 className="text-[32px] font-bold mb-8">
+                {userData.first_name} {userData.last_name}
+              </h1>
+
+              {/* Details */}
+              <div className="flex flex-col space-y-3">
+                {userData.details && Object.values(userData.details).map((detail: any) => (
+                  <div key={detail.id} className="flex items-center gap-4">
+                    <div className="flex-shrink-0">
+                      <IconComponent iconName={detail.icon} />
+                    </div>
+                    <span className="text-gray-700 text-[15px] font-medium">{detail.text}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Right column with about and related content */}
+            <div className="w-full md:w-4/6">
+              <div className="mb-8">
+                <h2 className="text-xl font-semibold mb-4">About</h2>
+                {userData.bio ? (
+                  <p className="text-gray-700">{userData.bio}</p>
+                ) : (
+                  <p className="text-gray-500 italic">No biography provided</p>
+                )}
+              </div>
+              
+              {/* Profile sections from profile builder */}
+              {profile.sections && profile.sections.length > 0 && (
+                <div>
+                  {profile.sections.map((section: any, index: number) => (
+                    <div key={index} className="mb-8">
+                      <h2 className="text-xl font-semibold mb-4">{section.title}</h2>
+                      
+                      {section.type === 'text' && (
+                        <div className="prose max-w-none">{section.content}</div>
+                      )}
+                      
+                      {section.type === 'links' && (
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {section.links.map((link: any, linkIndex: number) => (
+                            <a
+                              key={linkIndex}
+                              href={link.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
+                            >
+                              <LinkIcon className="w-4 h-4" />
+                              <span>{link.title}</span>
+                            </a>
+                          ))}
+                        </div>
+                      )}
+                      
+                      {section.type === 'skills' && (
+                        <div className="flex flex-wrap gap-2">
+                          {section.skills.map((skill: any, skillIndex: number) => (
+                            <span
+                              key={skillIndex}
+                              className="px-3 py-1 bg-gray-100 rounded-full text-sm"
+                            >
+                              {skill.name}
+                              {skill.level && ` • ${skill.level}`}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                      
+                      {section.type === 'experience' && (
+                        <div className="space-y-4">
+                          {section.experiences.map((exp: any, expIndex: number) => (
+                            <div key={expIndex} className="border-l-2 border-gray-200 pl-4">
+                              <h3 className="font-medium">{exp.title}</h3>
+                              <p className="text-gray-600">{exp.organization}</p>
+                              <p className="text-sm text-gray-500">
+                                {exp.startDate} - {exp.current ? 'Present' : exp.endDate}
+                              </p>
+                              {exp.description && (
+                                <p className="mt-2 text-gray-700">{exp.description}</p>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                      
+                      {section.type === 'education' && (
+                        <div className="space-y-4">
+                          {section.education.map((edu: any, eduIndex: number) => (
+                            <div key={eduIndex} className="border-l-2 border-gray-200 pl-4">
+                              <h3 className="font-medium">{edu.institution}</h3>
+                              <p className="text-gray-600">{edu.degree} in {edu.field}</p>
+                              <p className="text-sm text-gray-500">
+                                {edu.startDate} - {edu.current ? 'Present' : edu.endDate}
+                              </p>
+                              {edu.description && (
+                                <p className="mt-2 text-gray-700">{edu.description}</p>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+
+                      {section.type === 'affiliation' && (
+                        <div className="space-y-4">
+                          {section.affiliations.map((affiliation: any, affIndex: number) => (
+                            <div key={affIndex} className="border-l-2 border-gray-200 pl-4">
+                              <div className="flex items-start gap-4">
+                                {affiliation.logoUrl && (
+                                  <img 
+                                    src={affiliation.logoUrl} 
+                                    alt={affiliation.name}
+                                    className="w-12 h-12 object-contain"
+                                  />
+                                )}
+                                <div>
+                                  <h3 className="font-medium">{affiliation.name}</h3>
+                                  {affiliation.description && (
+                                    <p className="mt-2 text-gray-700">{affiliation.description}</p>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UserProfileClient 
\ No newline at end of file
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/user/[username]/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/user/[username]/page.tsx
new file mode 100644
index 00000000..2ce0430d
--- /dev/null
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/user/[username]/page.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+import { getUserByUsername } from '@services/users/users'
+import { getServerSession } from 'next-auth'
+import { nextAuthOptions } from 'app/auth/options'
+import { Metadata } from 'next'
+import UserProfileClient from './UserProfileClient'
+
+interface UserPageParams {
+  username: string;
+  orgslug: string;
+}
+
+interface UserPageProps {
+  params: Promise<UserPageParams>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export async function generateMetadata({ params }: UserPageProps): Promise<Metadata> {
+  try {
+    const session = await getServerSession(nextAuthOptions)
+    const access_token = session?.tokens?.access_token
+    const resolvedParams = await params
+
+    if (!access_token) {
+      return {
+        title: 'User Profile',
+      }
+    }
+
+    const userData = await getUserByUsername(resolvedParams.username, access_token)
+    return {
+      title: `${userData.first_name} ${userData.last_name} | Profile`,
+      description: userData.bio || `Profile page of ${userData.first_name} ${userData.last_name}`,
+    }
+  } catch (error) {
+    return {
+      title: 'User Profile',
+    }
+  }
+}
+
+async function UserPage({ params }: UserPageProps) {
+  const resolvedParams = await params;
+  const { username } = resolvedParams;
+  
+  try {
+    // Get access token from server session
+    const session = await getServerSession(nextAuthOptions)
+    const access_token = session?.tokens?.access_token
+
+    if (!access_token) {
+      throw new Error('No access token available')
+    }
+
+    // Fetch user data by username
+    const userData = await getUserByUsername(username, access_token);
+    const profile = userData.profile ? (
+      typeof userData.profile === 'string' ? JSON.parse(userData.profile) : userData.profile
+    ) : { sections: [] };
+
+    return (
+      <div>
+        <UserProfileClient
+          userData={userData}
+          profile={profile}
+        />
+      </div>
+    )
+  } catch (error) {
+    console.error('Error fetching user data:', error)
+    return (
+      <div className="container mx-auto py-8">
+        <div className="bg-white rounded-xl nice-shadow p-6">
+          <p className="text-red-600">Error loading user profile</p>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default UserPage
\ No newline at end of file
diff --git a/apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx
index ae7caf06..2252e57f 100644
--- a/apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx
@@ -39,18 +39,18 @@ const navigationItems: NavigationItem[] = [
     icon: Info,
     component: UserEditGeneral
   },
+  {
+    id: 'profile',
+    label: 'Profile',
+    icon: User,
+    component: UserProfile
+  },
   {
     id: 'security',
     label: 'Password',
     icon: Lock,
     component: UserEditPassword
   },
-  {
-    id: 'profile',
-    label: 'Profile',
-    icon: User,
-    component: UserProfile
-  }
 ]
 
 const SettingsNavigation = ({ 
diff --git a/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx b/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx
index 49a39b95..034a19f0 100644
--- a/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx
+++ b/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx
@@ -1400,7 +1400,7 @@ const PeopleSectionEditor: React.FC<{
           <Label>People</Label>
           <div className="space-y-4 mt-2">
             {section.people.map((person, index) => (
-              <div key={index} className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 p-4 border rounded-lg">
+              <div key={index} className="grid grid-cols-[1fr_1fr_1fr_1fr_auto] gap-4 p-4 border rounded-lg">
                 <div className="space-y-2">
                   <Label>Name</Label>
                   <Input
@@ -1414,6 +1414,19 @@ const PeopleSectionEditor: React.FC<{
                   />
                 </div>
 
+                <div className="space-y-2">
+                  <Label>Username</Label>
+                  <Input
+                    value={person.username || ''}
+                    onChange={(e) => {
+                      const newPeople = [...section.people]
+                      newPeople[index] = { ...person, username: e.target.value }
+                      onChange({ ...section, people: newPeople })
+                    }}
+                    placeholder="@username"
+                  />
+                </div>
+
                 <div className="space-y-2">
                   <Label>Image</Label>
                   <div className="space-y-2">
@@ -1480,7 +1493,8 @@ const PeopleSectionEditor: React.FC<{
                   user_uuid: '',
                   name: '',
                   description: '',
-                  image_url: ''
+                  image_url: '',
+                  username: ''
                 }
                 onChange({
                   ...section,
diff --git a/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/landing_types.ts b/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/landing_types.ts
index 8a8f6c29..3324cdcb 100644
--- a/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/landing_types.ts
+++ b/apps/web/components/Dashboard/Pages/Org/OrgEditLanding/landing_types.ts
@@ -40,6 +40,7 @@ export interface LandingUsers {
   name: string;
   description: string;
   image_url: string;
+  username?: string;
 }
 
 export interface LandingPeople {
diff --git a/apps/web/components/Dashboard/Pages/UserAccount/UserProfile/UserProfile.tsx b/apps/web/components/Dashboard/Pages/UserAccount/UserProfile/UserProfile.tsx
index 6b7590d5..05dc6fc0 100644
--- a/apps/web/components/Dashboard/Pages/UserAccount/UserProfile/UserProfile.tsx
+++ b/apps/web/components/Dashboard/Pages/UserAccount/UserProfile/UserProfile.tsx
@@ -1,8 +1,11 @@
 import React from 'react'
+import UserProfileBuilder from './UserProfileBuilder'
 
 function UserProfile() {
   return (
-    <div>UserProfile</div>
+    <div>
+      <UserProfileBuilder />
+    </div>
   )
 }
 
diff --git a/apps/web/components/Dashboard/Pages/UserAccount/UserProfile/UserProfileBuilder.tsx b/apps/web/components/Dashboard/Pages/UserAccount/UserProfile/UserProfileBuilder.tsx
new file mode 100644
index 00000000..abd2be19
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/UserAccount/UserProfile/UserProfileBuilder.tsx
@@ -0,0 +1,1288 @@
+import React from 'react'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import { Plus, Trash2, GripVertical, ImageIcon, Link as LinkIcon, Award, ArrowRight, Edit, TextIcon, Briefcase, GraduationCap, Upload, MapPin } from 'lucide-react'
+import { Input } from "@components/ui/input"
+import { Textarea } from "@components/ui/textarea"
+import { Label } from "@components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/ui/select"
+import { Button } from "@components/ui/button"
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { updateProfile } from '@services/settings/profile'
+import { getUser } from '@services/users/users'
+import { toast } from 'react-hot-toast'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@components/ui/tabs"
+
+// Define section types and their configurations
+const SECTION_TYPES = {
+  'image-gallery': {
+    icon: ImageIcon,
+    label: 'Image Gallery',
+    description: 'Add a collection of images'
+  },
+  'text': {
+    icon: TextIcon,
+    label: 'Text',
+    description: 'Add formatted text content'
+  },
+  'links': {
+    icon: LinkIcon,
+    label: 'Links',
+    description: 'Add social or professional links'
+  },
+  'skills': {
+    icon: Award,
+    label: 'Skills',
+    description: 'Showcase your skills and expertise'
+  },
+  'experience': {
+    icon: Briefcase,
+    label: 'Experience',
+    description: 'Add work or project experience'
+  },
+  'education': {
+    icon: GraduationCap,
+    label: 'Education',
+    description: 'Add educational background'
+  },
+  'affiliation': {
+    icon: MapPin,
+    label: 'Affiliation',
+    description: 'Add organizational affiliations'
+  }
+} as const
+
+// Type definitions
+interface ProfileImage {
+  url: string;
+  caption?: string;
+}
+
+interface ProfileLink {
+  title: string;
+  url: string;
+  icon?: string;
+}
+
+interface ProfileSkill {
+  name: string;
+  level?: 'beginner' | 'intermediate' | 'advanced' | 'expert';
+  category?: string;
+}
+
+interface ProfileExperience {
+  title: string;
+  organization: string;
+  startDate: string;
+  endDate?: string;
+  current: boolean;
+  description: string;
+}
+
+interface ProfileEducation {
+  institution: string;
+  degree: string;
+  field: string;
+  startDate: string;
+  endDate?: string;
+  current: boolean;
+  description?: string;
+}
+
+interface ProfileAffiliation {
+  name: string;
+  description: string;
+  logoUrl: string;
+}
+
+interface BaseSection {
+  id: string;
+  type: keyof typeof SECTION_TYPES;
+  title: string;
+}
+
+interface ImageGallerySection extends BaseSection {
+  type: 'image-gallery';
+  images: ProfileImage[];
+}
+
+interface TextSection extends BaseSection {
+  type: 'text';
+  content: string;
+}
+
+interface LinksSection extends BaseSection {
+  type: 'links';
+  links: ProfileLink[];
+}
+
+interface SkillsSection extends BaseSection {
+  type: 'skills';
+  skills: ProfileSkill[];
+}
+
+interface ExperienceSection extends BaseSection {
+  type: 'experience';
+  experiences: ProfileExperience[];
+}
+
+interface EducationSection extends BaseSection {
+  type: 'education';
+  education: ProfileEducation[];
+}
+
+interface AffiliationSection extends BaseSection {
+  type: 'affiliation';
+  affiliations: ProfileAffiliation[];
+}
+
+type ProfileSection = 
+  | ImageGallerySection 
+  | TextSection 
+  | LinksSection 
+  | SkillsSection 
+  | ExperienceSection 
+  | EducationSection
+  | AffiliationSection;
+
+interface ProfileData {
+  sections: ProfileSection[];
+}
+
+const UserProfileBuilder = () => {
+  const session = useLHSession() as any
+  const access_token = session?.data?.tokens?.access_token
+  const [profileData, setProfileData] = React.useState<ProfileData>({
+    sections: []
+  })
+  const [selectedSection, setSelectedSection] = React.useState<number | null>(null)
+  const [isSaving, setIsSaving] = React.useState(false)
+  const [isLoading, setIsLoading] = React.useState(true)
+
+  // Initialize profile data from user data
+  React.useEffect(() => {
+    const fetchUserData = async () => {
+      if (session?.data?.user?.id && access_token) {
+        try {
+          setIsLoading(true)
+          const userData = await getUser(session.data.user.id, access_token)
+          
+          if (userData.profile) {
+            try {
+              const profileSections = typeof userData.profile === 'string'
+                ? JSON.parse(userData.profile).sections
+                : userData.profile.sections;
+
+              setProfileData({
+                sections: profileSections || []
+              });
+            } catch (error) {
+              console.error('Error parsing profile data:', error);
+              setProfileData({ sections: [] });
+            }
+          }
+        } catch (error) {
+          console.error('Error fetching user data:', error);
+          toast.error('Failed to load profile data');
+        } finally {
+          setIsLoading(false)
+        }
+      }
+    };
+
+    fetchUserData();
+  }, [session?.data?.user?.id, access_token])
+
+  const createEmptySection = (type: keyof typeof SECTION_TYPES): ProfileSection => {
+    const baseSection = {
+      id: `section-${Date.now()}`,
+      type,
+      title: `New ${SECTION_TYPES[type].label} Section`
+    }
+
+    switch (type) {
+      case 'image-gallery':
+        return {
+          ...baseSection,
+          type: 'image-gallery',
+          images: []
+        }
+      case 'text':
+        return {
+          ...baseSection,
+          type: 'text',
+          content: ''
+        }
+      case 'links':
+        return {
+          ...baseSection,
+          type: 'links',
+          links: []
+        }
+      case 'skills':
+        return {
+          ...baseSection,
+          type: 'skills',
+          skills: []
+        }
+      case 'experience':
+        return {
+          ...baseSection,
+          type: 'experience',
+          experiences: []
+        }
+      case 'education':
+        return {
+          ...baseSection,
+          type: 'education',
+          education: []
+        }
+      case 'affiliation':
+        return {
+          ...baseSection,
+          type: 'affiliation',
+          affiliations: []
+        }
+    }
+  }
+
+  const addSection = (type: keyof typeof SECTION_TYPES) => {
+    const newSection = createEmptySection(type)
+    setProfileData(prev => ({
+      ...prev,
+      sections: [...prev.sections, newSection]
+    }))
+    setSelectedSection(profileData.sections.length)
+  }
+
+  const updateSection = (index: number, updatedSection: ProfileSection) => {
+    const newSections = [...profileData.sections]
+    newSections[index] = updatedSection
+    setProfileData(prev => ({
+      ...prev,
+      sections: newSections
+    }))
+  }
+
+  const deleteSection = (index: number) => {
+    setProfileData(prev => ({
+      ...prev,
+      sections: prev.sections.filter((_, i) => i !== index)
+    }))
+    setSelectedSection(null)
+  }
+
+  const onDragEnd = (result: any) => {
+    if (!result.destination) return
+
+    const items = Array.from(profileData.sections)
+    const [reorderedItem] = items.splice(result.source.index, 1)
+    items.splice(result.destination.index, 0, reorderedItem)
+
+    setProfileData(prev => ({
+      ...prev,
+      sections: items
+    }))
+    setSelectedSection(result.destination.index)
+  }
+
+  const handleSave = async () => {
+    setIsSaving(true)
+    const loadingToast = toast.loading('Saving profile...')
+
+    try {
+      // Get fresh user data before update
+      const userData = await getUser(session.data.user.id, access_token)
+      
+      // Update only the profile field
+      userData.profile = profileData
+
+      const res = await updateProfile(userData, userData.id, access_token)
+
+      if (res.status === 200) {
+        toast.success('Profile updated successfully', { id: loadingToast })
+      } else {
+        throw new Error('Failed to update profile')
+      }
+    } catch (error) {
+      console.error('Error updating profile:', error)
+      toast.error('Error updating profile', { id: loadingToast })
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="sm:mx-10 mx-0 bg-white rounded-xl nice-shadow p-6">
+        <div className="flex items-center justify-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="sm:mx-10 mx-0 bg-white rounded-xl nice-shadow">
+      <div className="p-6 space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b pb-4">
+          <div>
+            <h2 className="text-xl font-semibold flex items-center">Profile Builder <div className="text-xs ml-2 bg-gray-200 text-gray-700 px-2 py-1 rounded-full">BETA</div></h2>
+            <p className="text-gray-600">Customize your professional profile</p>
+          </div>
+          <Button 
+            variant="default" 
+            onClick={handleSave}
+            disabled={isSaving}
+            className="bg-black hover:bg-black/90"
+          >
+            {isSaving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+
+        {/* Main Content */}
+        <div className="grid grid-cols-4 gap-6">
+          {/* Sections Panel */}
+          <div className="col-span-1 border-r pr-4">
+            <h3 className="font-medium mb-4">Sections</h3>
+            <DragDropContext onDragEnd={onDragEnd}>
+              <Droppable droppableId="sections">
+                {(provided) => (
+                  <div
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
+                    className="space-y-2"
+                  >
+                    {profileData.sections.map((section, index) => (
+                      <Draggable
+                        key={section.id}
+                        draggableId={section.id}
+                        index={index}
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            onClick={() => setSelectedSection(index)}
+                            className={`p-4 bg-white/80 backdrop-blur-xs rounded-lg cursor-pointer border ${
+                              selectedSection === index 
+                                ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 shadow-xs' 
+                                : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/50 hover:shadow-xs'
+                            } ${snapshot.isDragging ? 'shadow-lg ring-2 ring-blue-500/20 rotate-2' : ''}`}
+                          >
+                            <div className="flex items-center justify-between group">
+                              <div className="flex items-center space-x-3">
+                                <div {...provided.dragHandleProps} 
+                                  className={`p-1.5 rounded-md transition-colors duration-200 ${
+                                    selectedSection === index 
+                                      ? 'text-blue-500 bg-blue-100/50' 
+                                      : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'
+                                  }`}>
+                                  <GripVertical size={16} />
+                                </div>
+                                <div className={`p-1.5 rounded-md ${
+                                  selectedSection === index 
+                                    ? 'text-blue-600 bg-blue-100/50' 
+                                    : 'text-gray-600 bg-gray-100/50'
+                                }`}>
+                                  {React.createElement(SECTION_TYPES[section.type].icon, {
+                                    size: 16
+                                  })}
+                                </div>
+                                <span className={`text-sm font-medium truncate ${
+                                  selectedSection === index 
+                                    ? 'text-blue-700' 
+                                    : 'text-gray-700'
+                                }`}>
+                                  {section.title}
+                                </span>
+                              </div>
+                              <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    setSelectedSection(index)
+                                  }}
+                                  className={`p-1.5 rounded-md transition-colors duration-200 ${
+                                    selectedSection === index
+                                      ? 'text-blue-500 hover:bg-blue-100'
+                                      : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'
+                                  }`}
+                                >
+                                  <Edit size={14} />
+                                </button>
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    deleteSection(index)
+                                  }}
+                                  className="p-1.5 text-red-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors duration-200"
+                                >
+                                  <Trash2 size={14} />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+
+            <div className="pt-4">
+              <Select
+                onValueChange={(value: keyof typeof SECTION_TYPES) => {
+                  if (value) {
+                    addSection(value)
+                  }
+                }}
+              >
+                <SelectTrigger className="w-full p-0 border-0 bg-black">
+                  <div className="w-full">
+                    <Button variant="default" className="w-full bg-black hover:bg-black/90 text-white">
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add Section
+                    </Button>
+                  </div>
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(SECTION_TYPES).map(([type, { icon: Icon, label, description }]) => (
+                    <SelectItem key={type} value={type}>
+                      <div className="flex items-center space-x-3 py-1">
+                        <div className="p-1.5 bg-gray-50 rounded-md">
+                          <Icon size={16} className="text-gray-600" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="font-medium text-sm text-gray-700">{label}</div>
+                          <div className="text-xs text-gray-500">{description}</div>
+                        </div>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Editor Panel */}
+          <div className="col-span-3">
+            {selectedSection !== null ? (
+              <SectionEditor
+                section={profileData.sections[selectedSection]}
+                onChange={(updatedSection) => updateSection(selectedSection, updatedSection as ProfileSection)}
+              />
+            ) : (
+              <div className="h-full flex items-center justify-center text-gray-500">
+                Select a section to edit or add a new one
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface SectionEditorProps {
+  section: ProfileSection;
+  onChange: (section: ProfileSection) => void;
+}
+
+const SectionEditor: React.FC<SectionEditorProps> = ({ section, onChange }) => {
+  switch (section.type) {
+    case 'image-gallery':
+      return <ImageGalleryEditor section={section} onChange={onChange} />
+    case 'text':
+      return <TextEditor section={section} onChange={onChange} />
+    case 'links':
+      return <LinksEditor section={section} onChange={onChange} />
+    case 'skills':
+      return <SkillsEditor section={section} onChange={onChange} />
+    case 'experience':
+      return <ExperienceEditor section={section} onChange={onChange} />
+    case 'education':
+      return <EducationEditor section={section} onChange={onChange} />
+    case 'affiliation':
+      return <AffiliationEditor section={section} onChange={onChange} />
+    default:
+      return <div>Unknown section type</div>
+  }
+}
+
+const ImageGalleryEditor: React.FC<{
+  section: ImageGallerySection;
+  onChange: (section: ImageGallerySection) => void;
+}> = ({ section, onChange }) => {
+  return (
+    <div className="space-y-6 p-6 bg-white rounded-lg nice-shadow">
+      <div className="flex items-center space-x-2">
+        <ImageIcon className="w-5 h-5 text-gray-500" />
+        <h3 className="font-medium text-lg">Image Gallery</h3>
+      </div>
+      
+      <div className="space-y-4">
+        {/* Title */}
+        <div>
+          <Label htmlFor="title">Section Title</Label>
+          <Input
+            id="title"
+            value={section.title}
+            onChange={(e) => onChange({ ...section, title: e.target.value })}
+            placeholder="Enter section title"
+          />
+        </div>
+
+        {/* Images */}
+        <div>
+          <Label>Images</Label>
+          <div className="space-y-3 mt-2">
+            {section.images.map((image, index) => (
+              <div key={index} className="grid grid-cols-[2fr_1fr_auto] gap-4 p-4 border rounded-lg">
+                <div>
+                  <Label>Image URL</Label>
+                  <Input
+                    value={image.url}
+                    onChange={(e) => {
+                      const newImages = [...section.images]
+                      newImages[index] = { ...image, url: e.target.value }
+                      onChange({ ...section, images: newImages })
+                    }}
+                    placeholder="Enter image URL"
+                  />
+                </div>
+                <div>
+                  <Label>Caption</Label>
+                  <Input
+                    value={image.caption || ''}
+                    onChange={(e) => {
+                      const newImages = [...section.images]
+                      newImages[index] = { ...image, caption: e.target.value }
+                      onChange({ ...section, images: newImages })
+                    }}
+                    placeholder="Image caption"
+                  />
+                </div>
+                <div className="flex flex-col justify-between">
+                  <Label>&nbsp;</Label>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      const newImages = section.images.filter((_, i) => i !== index)
+                      onChange({ ...section, images: newImages })
+                    }}
+                    className="text-red-500 hover:text-red-600 hover:bg-red-50"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                {image.url && (
+                  <div className="col-span-3">
+                    <img
+                      src={image.url}
+                      alt={image.caption || ''}
+                      className="mt-2 max-h-32 rounded-lg object-cover"
+                    />
+                  </div>
+                )}
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              onClick={() => {
+                const newImage: ProfileImage = {
+                  url: '',
+                  caption: ''
+                }
+                onChange({
+                  ...section,
+                  images: [...section.images, newImage]
+                })
+              }}
+              className="w-full"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add Image
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const TextEditor: React.FC<{
+  section: TextSection;
+  onChange: (section: TextSection) => void;
+}> = ({ section, onChange }) => {
+  return (
+    <div className="space-y-6 p-6 bg-white rounded-lg nice-shadow">
+      <div className="flex items-center space-x-2">
+        <TextIcon className="w-5 h-5 text-gray-500" />
+        <h3 className="font-medium text-lg">Text Content</h3>
+      </div>
+      
+      <div className="space-y-4">
+        {/* Title */}
+        <div>
+          <Label htmlFor="title">Section Title</Label>
+          <Input
+            id="title"
+            value={section.title}
+            onChange={(e) => onChange({ ...section, title: e.target.value })}
+            placeholder="Enter section title"
+          />
+        </div>
+
+        {/* Content */}
+        <div>
+          <Label htmlFor="content">Content</Label>
+          <Textarea
+            id="content"
+            value={section.content}
+            onChange={(e) => onChange({ ...section, content: e.target.value })}
+            placeholder="Enter your content here..."
+            className="min-h-[200px]"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const LinksEditor: React.FC<{
+  section: LinksSection;
+  onChange: (section: LinksSection) => void;
+}> = ({ section, onChange }) => {
+  return (
+    <div className="space-y-6 p-6 bg-white rounded-lg nice-shadow">
+      <div className="flex items-center space-x-2">
+        <LinkIcon className="w-5 h-5 text-gray-500" />
+        <h3 className="font-medium text-lg">Links</h3>
+      </div>
+      
+      <div className="space-y-4">
+        {/* Title */}
+        <div>
+          <Label htmlFor="title">Section Title</Label>
+          <Input
+            id="title"
+            value={section.title}
+            onChange={(e) => onChange({ ...section, title: e.target.value })}
+            placeholder="Enter section title"
+          />
+        </div>
+
+        {/* Links */}
+        <div>
+          <Label>Links</Label>
+          <div className="space-y-3 mt-2">
+            {section.links.map((link, index) => (
+              <div key={index} className="grid grid-cols-[1fr_1fr_auto] gap-2 p-4 border rounded-lg">
+                <Input
+                  value={link.title}
+                  onChange={(e) => {
+                    const newLinks = [...section.links]
+                    newLinks[index] = { ...link, title: e.target.value }
+                    onChange({ ...section, links: newLinks })
+                  }}
+                  placeholder="Link title"
+                />
+                <Input
+                  value={link.url}
+                  onChange={(e) => {
+                    const newLinks = [...section.links]
+                    newLinks[index] = { ...link, url: e.target.value }
+                    onChange({ ...section, links: newLinks })
+                  }}
+                  placeholder="URL"
+                />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => {
+                    const newLinks = section.links.filter((_, i) => i !== index)
+                    onChange({ ...section, links: newLinks })
+                  }}
+                  className="text-red-500 hover:text-red-600 hover:bg-red-50"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              onClick={() => {
+                const newLink: ProfileLink = {
+                  title: '',
+                  url: ''
+                }
+                onChange({
+                  ...section,
+                  links: [...section.links, newLink]
+                })
+              }}
+              className="w-full"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add Link
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const SkillsEditor: React.FC<{
+  section: SkillsSection;
+  onChange: (section: SkillsSection) => void;
+}> = ({ section, onChange }) => {
+  return (
+    <div className="space-y-6 p-6 bg-white rounded-lg nice-shadow">
+      <div className="flex items-center space-x-2">
+        <Award className="w-5 h-5 text-gray-500" />
+        <h3 className="font-medium text-lg">Skills</h3>
+      </div>
+      
+      <div className="space-y-4">
+        {/* Title */}
+        <div>
+          <Label htmlFor="title">Section Title</Label>
+          <Input
+            id="title"
+            value={section.title}
+            onChange={(e) => onChange({ ...section, title: e.target.value })}
+            placeholder="Enter section title"
+          />
+        </div>
+
+        {/* Skills */}
+        <div>
+          <Label>Skills</Label>
+          <div className="space-y-3 mt-2">
+            {section.skills.map((skill, index) => (
+              <div key={index} className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 p-4 border rounded-lg">
+                <Input
+                  value={skill.name}
+                  onChange={(e) => {
+                    const newSkills = [...section.skills]
+                    newSkills[index] = { ...skill, name: e.target.value }
+                    onChange({ ...section, skills: newSkills })
+                  }}
+                  placeholder="Skill name"
+                />
+                <Select
+                  value={skill.level || 'intermediate'}
+                  onValueChange={(value) => {
+                    const newSkills = [...section.skills]
+                    newSkills[index] = { ...skill, level: value as ProfileSkill['level'] }
+                    onChange({ ...section, skills: newSkills })
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select level" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="beginner">Beginner</SelectItem>
+                    <SelectItem value="intermediate">Intermediate</SelectItem>
+                    <SelectItem value="advanced">Advanced</SelectItem>
+                    <SelectItem value="expert">Expert</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Input
+                  value={skill.category || ''}
+                  onChange={(e) => {
+                    const newSkills = [...section.skills]
+                    newSkills[index] = { ...skill, category: e.target.value }
+                    onChange({ ...section, skills: newSkills })
+                  }}
+                  placeholder="Category (optional)"
+                />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => {
+                    const newSkills = section.skills.filter((_, i) => i !== index)
+                    onChange({ ...section, skills: newSkills })
+                  }}
+                  className="text-red-500 hover:text-red-600 hover:bg-red-50"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              onClick={() => {
+                const newSkill: ProfileSkill = {
+                  name: '',
+                  level: 'intermediate'
+                }
+                onChange({
+                  ...section,
+                  skills: [...section.skills, newSkill]
+                })
+              }}
+              className="w-full"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add Skill
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ExperienceEditor: React.FC<{
+  section: ExperienceSection;
+  onChange: (section: ExperienceSection) => void;
+}> = ({ section, onChange }) => {
+  return (
+    <div className="space-y-6 p-6 bg-white rounded-lg nice-shadow">
+      <div className="flex items-center space-x-2">
+        <Briefcase className="w-5 h-5 text-gray-500" />
+        <h3 className="font-medium text-lg">Experience</h3>
+      </div>
+      
+      <div className="space-y-4">
+        {/* Title */}
+        <div>
+          <Label htmlFor="title">Section Title</Label>
+          <Input
+            id="title"
+            value={section.title}
+            onChange={(e) => onChange({ ...section, title: e.target.value })}
+            placeholder="Enter section title"
+          />
+        </div>
+
+        {/* Experiences */}
+        <div>
+          <Label>Experience Items</Label>
+          <div className="space-y-4 mt-2">
+            {section.experiences.map((experience, index) => (
+              <div key={index} className="space-y-4 p-4 border rounded-lg">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Label>Title</Label>
+                    <Input
+                      value={experience.title}
+                      onChange={(e) => {
+                        const newExperiences = [...section.experiences]
+                        newExperiences[index] = { ...experience, title: e.target.value }
+                        onChange({ ...section, experiences: newExperiences })
+                      }}
+                      placeholder="Position or role"
+                    />
+                  </div>
+                  <div>
+                    <Label>Organization</Label>
+                    <Input
+                      value={experience.organization}
+                      onChange={(e) => {
+                        const newExperiences = [...section.experiences]
+                        newExperiences[index] = { ...experience, organization: e.target.value }
+                        onChange({ ...section, experiences: newExperiences })
+                      }}
+                      placeholder="Company or organization"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-[1fr_1fr_auto] gap-4">
+                  <div>
+                    <Label>Start Date</Label>
+                    <Input
+                      type="date"
+                      value={experience.startDate}
+                      onChange={(e) => {
+                        const newExperiences = [...section.experiences]
+                        newExperiences[index] = { ...experience, startDate: e.target.value }
+                        onChange({ ...section, experiences: newExperiences })
+                      }}
+                    />
+                  </div>
+                  <div>
+                    <Label>End Date</Label>
+                    <Input
+                      type="date"
+                      value={experience.endDate || ''}
+                      onChange={(e) => {
+                        const newExperiences = [...section.experiences]
+                        newExperiences[index] = { ...experience, endDate: e.target.value }
+                        onChange({ ...section, experiences: newExperiences })
+                      }}
+                      disabled={experience.current}
+                    />
+                  </div>
+                  <div className="flex items-end">
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id={`current-${index}`}
+                        checked={experience.current}
+                        onChange={(e) => {
+                          const newExperiences = [...section.experiences]
+                          newExperiences[index] = { 
+                            ...experience, 
+                            current: e.target.checked,
+                            endDate: e.target.checked ? undefined : experience.endDate 
+                          }
+                          onChange({ ...section, experiences: newExperiences })
+                        }}
+                        className="rounded border-gray-300"
+                      />
+                      <Label htmlFor={`current-${index}`}>Current</Label>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <Label>Description</Label>
+                  <Textarea
+                    value={experience.description}
+                    onChange={(e) => {
+                      const newExperiences = [...section.experiences]
+                      newExperiences[index] = { ...experience, description: e.target.value }
+                      onChange({ ...section, experiences: newExperiences })
+                    }}
+                    placeholder="Describe your role and achievements"
+                    className="min-h-[100px]"
+                  />
+                </div>
+
+                <div className="flex justify-end">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      const newExperiences = section.experiences.filter((_, i) => i !== index)
+                      onChange({ ...section, experiences: newExperiences })
+                    }}
+                    className="text-red-500 hover:text-red-600 hover:bg-red-50"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Remove
+                  </Button>
+                </div>
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              onClick={() => {
+                const newExperience: ProfileExperience = {
+                  title: '',
+                  organization: '',
+                  startDate: new Date().toISOString().split('T')[0],
+                  current: false,
+                  description: ''
+                }
+                onChange({
+                  ...section,
+                  experiences: [...section.experiences, newExperience]
+                })
+              }}
+              className="w-full"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add Experience
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const EducationEditor: React.FC<{
+  section: EducationSection;
+  onChange: (section: EducationSection) => void;
+}> = ({ section, onChange }) => {
+  return (
+    <div className="space-y-6 p-6 bg-white rounded-lg nice-shadow">
+      <div className="flex items-center space-x-2">
+        <GraduationCap className="w-5 h-5 text-gray-500" />
+        <h3 className="font-medium text-lg">Education</h3>
+      </div>
+      
+      <div className="space-y-4">
+        {/* Title */}
+        <div>
+          <Label htmlFor="title">Section Title</Label>
+          <Input
+            id="title"
+            value={section.title}
+            onChange={(e) => onChange({ ...section, title: e.target.value })}
+            placeholder="Enter section title"
+          />
+        </div>
+
+        {/* Education Items */}
+        <div>
+          <Label>Education Items</Label>
+          <div className="space-y-4 mt-2">
+            {section.education.map((edu, index) => (
+              <div key={index} className="space-y-4 p-4 border rounded-lg">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Label>Institution</Label>
+                    <Input
+                      value={edu.institution}
+                      onChange={(e) => {
+                        const newEducation = [...section.education]
+                        newEducation[index] = { ...edu, institution: e.target.value }
+                        onChange({ ...section, education: newEducation })
+                      }}
+                      placeholder="School or university"
+                    />
+                  </div>
+                  <div>
+                    <Label>Degree</Label>
+                    <Input
+                      value={edu.degree}
+                      onChange={(e) => {
+                        const newEducation = [...section.education]
+                        newEducation[index] = { ...edu, degree: e.target.value }
+                        onChange({ ...section, education: newEducation })
+                      }}
+                      placeholder="Degree type"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Label>Field of Study</Label>
+                  <Input
+                    value={edu.field}
+                    onChange={(e) => {
+                      const newEducation = [...section.education]
+                      newEducation[index] = { ...edu, field: e.target.value }
+                      onChange({ ...section, education: newEducation })
+                    }}
+                    placeholder="Major or concentration"
+                  />
+                </div>
+
+                <div className="grid grid-cols-[1fr_1fr_auto] gap-4">
+                  <div>
+                    <Label>Start Date</Label>
+                    <Input
+                      type="date"
+                      value={edu.startDate}
+                      onChange={(e) => {
+                        const newEducation = [...section.education]
+                        newEducation[index] = { ...edu, startDate: e.target.value }
+                        onChange({ ...section, education: newEducation })
+                      }}
+                    />
+                  </div>
+                  <div>
+                    <Label>End Date</Label>
+                    <Input
+                      type="date"
+                      value={edu.endDate || ''}
+                      onChange={(e) => {
+                        const newEducation = [...section.education]
+                        newEducation[index] = { ...edu, endDate: e.target.value }
+                        onChange({ ...section, education: newEducation })
+                      }}
+                      disabled={edu.current}
+                    />
+                  </div>
+                  <div className="flex items-end">
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id={`current-edu-${index}`}
+                        checked={edu.current}
+                        onChange={(e) => {
+                          const newEducation = [...section.education]
+                          newEducation[index] = { 
+                            ...edu, 
+                            current: e.target.checked,
+                            endDate: e.target.checked ? undefined : edu.endDate 
+                          }
+                          onChange({ ...section, education: newEducation })
+                        }}
+                        className="rounded border-gray-300"
+                      />
+                      <Label htmlFor={`current-edu-${index}`}>Current</Label>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <Label>Description</Label>
+                  <Textarea
+                    value={edu.description || ''}
+                    onChange={(e) => {
+                      const newEducation = [...section.education]
+                      newEducation[index] = { ...edu, description: e.target.value }
+                      onChange({ ...section, education: newEducation })
+                    }}
+                    placeholder="Additional details about your education"
+                    className="min-h-[100px]"
+                  />
+                </div>
+
+                <div className="flex justify-end">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      const newEducation = section.education.filter((_, i) => i !== index)
+                      onChange({ ...section, education: newEducation })
+                    }}
+                    className="text-red-500 hover:text-red-600 hover:bg-red-50"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Remove
+                  </Button>
+                </div>
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              onClick={() => {
+                const newEducation: ProfileEducation = {
+                  institution: '',
+                  degree: '',
+                  field: '',
+                  startDate: new Date().toISOString().split('T')[0],
+                  current: false,
+                  description: ''
+                }
+                onChange({
+                  ...section,
+                  education: [...section.education, newEducation]
+                })
+              }}
+              className="w-full"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add Education
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const AffiliationEditor: React.FC<{
+  section: AffiliationSection;
+  onChange: (section: AffiliationSection) => void;
+}> = ({ section, onChange }) => {
+  return (
+    <div className="space-y-6 p-6 bg-white rounded-lg nice-shadow">
+      <div className="flex items-center space-x-2">
+        <MapPin className="w-5 h-5 text-gray-500" />
+        <h3 className="font-medium text-lg">Affiliation</h3>
+      </div>
+      
+      <div className="space-y-4">
+        {/* Title */}
+        <div>
+          <Label htmlFor="title">Section Title</Label>
+          <Input
+            id="title"
+            value={section.title}
+            onChange={(e) => onChange({ ...section, title: e.target.value })}
+            placeholder="Enter section title"
+          />
+        </div>
+
+        {/* Affiliations */}
+        <div>
+          <Label>Affiliations</Label>
+          <div className="space-y-3 mt-2">
+            {section.affiliations.map((affiliation, index) => (
+              <div key={index} className="space-y-4 p-4 border rounded-lg">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Label>Name</Label>
+                    <Input
+                      value={affiliation.name}
+                      onChange={(e) => {
+                        const newAffiliations = [...section.affiliations]
+                        newAffiliations[index] = { ...affiliation, name: e.target.value }
+                        onChange({ ...section, affiliations: newAffiliations })
+                      }}
+                      placeholder="Name of the organization"
+                    />
+                  </div>
+                  <div>
+                    <Label>Logo URL</Label>
+                    <Input
+                      value={affiliation.logoUrl}
+                      onChange={(e) => {
+                        const newAffiliations = [...section.affiliations]
+                        newAffiliations[index] = { ...affiliation, logoUrl: e.target.value }
+                        onChange({ ...section, affiliations: newAffiliations })
+                      }}
+                      placeholder="URL to the organization's logo"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Label>Description</Label>
+                  <Textarea
+                    value={affiliation.description}
+                    onChange={(e) => {
+                      const newAffiliations = [...section.affiliations]
+                      newAffiliations[index] = { ...affiliation, description: e.target.value }
+                      onChange({ ...section, affiliations: newAffiliations })
+                    }}
+                    placeholder="Description of the organization"
+                    className="min-h-[100px]"
+                  />
+                </div>
+
+                <div className="flex justify-end">
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      const newAffiliations = section.affiliations.filter((_, i) => i !== index)
+                      onChange({ ...section, affiliations: newAffiliations })
+                    }}
+                    className="text-red-500 hover:text-red-600 hover:bg-red-50"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Remove
+                  </Button>
+                </div>
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              onClick={() => {
+                const newAffiliation: ProfileAffiliation = {
+                  name: '',
+                  description: '',
+                  logoUrl: ''
+                }
+                onChange({
+                  ...section,
+                  affiliations: [...section.affiliations, newAffiliation]
+                })
+              }}
+              className="w-full"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Add Affiliation
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UserProfileBuilder 
\ No newline at end of file
diff --git a/apps/web/components/Landings/LandingCustom.tsx b/apps/web/components/Landings/LandingCustom.tsx
index d83bb9b3..0ca59607 100644
--- a/apps/web/components/Landings/LandingCustom.tsx
+++ b/apps/web/components/Landings/LandingCustom.tsx
@@ -7,6 +7,7 @@ import useSWR from 'swr'
 import { getOrgCourses } from '@services/courses/courses'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import CourseThumbnailLanding from '@components/Objects/Thumbnails/CourseThumbnailLanding'
+import UserAvatar from '@components/Objects/UserAvatar'
 
 interface LandingCustomProps {
   landing: {
@@ -183,11 +184,21 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
               {section.people.map((person, index) => (
                 <div key={index} className="w-[140px] flex flex-col items-center">
                   <div className="w-24 h-24 mb-4">
-                    <img
-                      src={person.image_url}
-                      alt={person.name}
-                      className="w-full h-full rounded-full object-cover border-4 border-white nice-shadow"
-                    />
+                    {person.username ? (
+                      <UserAvatar
+                        username={person.username}
+                        width={96}
+                        rounded="rounded-full"
+                        border="border-4"
+                        showProfilePopup
+                      />
+                    ) : (
+                      <img
+                        src={person.image_url}
+                        alt={person.name}
+                        className="w-full h-full rounded-full object-cover border-4 border-white nice-shadow"
+                      />
+                    )}
                   </div>
                   <h3 className="text-lg font-semibold text-center text-gray-900">{person.name}</h3>
                   <p className="text-sm text-center text-gray-600 mt-1">{person.description}</p>
diff --git a/apps/web/components/Objects/UserAvatar.tsx b/apps/web/components/Objects/UserAvatar.tsx
index 5d79d92d..0eef3d3c 100644
--- a/apps/web/components/Objects/UserAvatar.tsx
+++ b/apps/web/components/Objects/UserAvatar.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { getUriWithOrg } from '@services/config/config'
 import { useParams } from 'next/navigation'
 import { getUserAvatarMediaDirectory } from '@services/media/media'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import UserProfilePopup from './UserProfilePopup'
+import { getUserByUsername } from '@services/users/users'
 
 type UserAvatarProps = {
   width?: number
@@ -16,11 +17,28 @@ type UserAvatarProps = {
   backgroundColor?: 'bg-white' | 'bg-gray-100' 
   showProfilePopup?: boolean
   userId?: string
+  username?: string
 }
 
 function UserAvatar(props: UserAvatarProps) {
   const session = useLHSession() as any
   const params = useParams() as any
+  const [userData, setUserData] = useState<any>(null)
+
+  useEffect(() => {
+    const fetchUserByUsername = async () => {
+      if (props.username && session?.data?.tokens?.access_token) {
+        try {
+          const data = await getUserByUsername(props.username, session.data.tokens.access_token)
+          setUserData(data)
+        } catch (error) {
+          console.error('Error fetching user by username:', error)
+        }
+      }
+    }
+
+    fetchUserByUsername()
+  }, [props.username, session?.data?.tokens?.access_token])
 
   const isExternalUrl = (url: string): boolean => {
     return url.startsWith('http://') || url.startsWith('https://')
@@ -57,6 +75,17 @@ function UserAvatar(props: UserAvatarProps) {
       return props.avatar_url
     }
 
+    // If we have user data from username fetch
+    if (userData?.avatar_image) {
+      const avatarUrl = userData.avatar_image
+      // If it's an external URL (e.g., from Google, Facebook, etc.), use it directly
+      if (isExternalUrl(avatarUrl)) {
+        return avatarUrl
+      }
+      // Otherwise, get the local avatar URL
+      return getUserAvatarMediaDirectory(userData.user_uuid, avatarUrl)
+    }
+
     // If user has an avatar in session
     if (session?.data?.user?.avatar_image) {
       const avatarUrl = session.data.user.avatar_image
@@ -92,9 +121,9 @@ function UserAvatar(props: UserAvatarProps) {
     />
   )
 
-  if (props.showProfilePopup && props.userId) {
+  if (props.showProfilePopup && (props.userId || (userData?.id))) {
     return (
-      <UserProfilePopup userId={props.userId}>
+      <UserProfilePopup userId={props.userId || userData?.id}>
         {avatarImage}
       </UserProfilePopup>
     )
diff --git a/apps/web/components/Objects/UserProfilePopup.tsx b/apps/web/components/Objects/UserProfilePopup.tsx
index f0a48e01..ac94069f 100644
--- a/apps/web/components/Objects/UserProfilePopup.tsx
+++ b/apps/web/components/Objects/UserProfilePopup.tsx
@@ -120,7 +120,7 @@ const UserProfilePopup = ({ children, userId }: UserProfilePopupProps) => {
                         variant="ghost"
                         size="icon"
                         className="h-6 w-6 text-gray-600 hover:text-gray-900 flex-shrink-0"
-                        onClick={() => router.push(`/profile/${userId}`)}
+                        onClick={() => userData.username && router.push(`/user/${userData.username}`)}
                       >
                         <ExternalLink className="w-4 h-4" />
                       </Button>
diff --git a/apps/web/services/settings/profile.ts b/apps/web/services/settings/profile.ts
index 68bd5d57..147b7cc0 100644
--- a/apps/web/services/settings/profile.ts
+++ b/apps/web/services/settings/profile.ts
@@ -2,6 +2,7 @@ import { getAPIUrl } from '@services/config/config'
 import {
   RequestBodyWithAuthHeader,
   errorHandling,
+  getResponseMetadata,
 } from '@services/utils/ts/requests'
 
 /*
@@ -18,6 +19,6 @@ export async function updateProfile(
     `${getAPIUrl()}users/` + user_id,
     RequestBodyWithAuthHeader('PUT', data, null, access_token)
   )
-  const res = await errorHandling(result)
+  const res = await getResponseMetadata(result)
   return res
 }
diff --git a/apps/web/services/users/users.ts b/apps/web/services/users/users.ts
index 8a6988e8..52cf3b77 100644
--- a/apps/web/services/users/users.ts
+++ b/apps/web/services/users/users.ts
@@ -16,6 +16,15 @@ export async function getUser(user_id: string, access_token: string) {
   return res
 }
 
+export async function getUserByUsername(username: string, access_token: string) {
+  const result = await fetch(
+    `${getAPIUrl()}users/username/${username}`,
+    RequestBodyWithAuthHeader('GET', null, null, access_token)
+  )
+  const res = await errorHandling(result)
+  return res
+}
+
 export async function updateUserAvatar(
   user_uuid: any,
   avatar_file: any,