From 2c07162c29b1a2670396a9520bb9ae96dc40dc53 Mon Sep 17 00:00:00 2001
From: MerlinTheWhiz <michaelnathan505@gmail.com>
Date: Wed, 27 May 2026 22:38:37 +0100
Subject: [PATCH 1/2] chore: improve screen reader support for input fields

---
 src/app/components/accessibility/README.md    |  8 ++
 src/app/components/auth/FormInput.tsx         | 46 +++++++++--
 .../auth/__tests__/FormInput.test.tsx         | 65 +++++++++++++++
 src/components/forms/FormInput.tsx            | 54 ++++++++++--
 .../forms/__tests__/FormInput.test.tsx        | 82 +++++++++++++++++++
 5 files changed, 245 insertions(+), 10 deletions(-)
 create mode 100644 src/app/components/auth/__tests__/FormInput.test.tsx
 create mode 100644 src/components/forms/__tests__/FormInput.test.tsx

diff --git a/src/app/components/accessibility/README.md b/src/app/components/accessibility/README.md
index 6612133a..6838498c 100644
--- a/src/app/components/accessibility/README.md
+++ b/src/app/components/accessibility/README.md
@@ -286,6 +286,14 @@ console.log(issues);
 9. **Test with real assistive technologies**
 10. **Include focus indicators** for all interactive elements
 
+### Form Input Screen Reader Support
+
+- Use the shared `FormInput` components for new text fields, selects, and textareas where possible.
+- Pass visible `label` text so the component can create an explicit `label`/`id` relationship.
+- Pass `helperText` for persistent instructions; validation errors are linked to fields automatically.
+- Use `required` for required fields so both browser validation and `aria-required` stay in sync.
+- Keep decorative icons non-interactive; password visibility controls expose their current state to assistive technology.
+
 ## Browser Support
 
 - Chrome/Edge 90+
diff --git a/src/app/components/auth/FormInput.tsx b/src/app/components/auth/FormInput.tsx
index 30899178..a24e70c4 100644
--- a/src/app/components/auth/FormInput.tsx
+++ b/src/app/components/auth/FormInput.tsx
@@ -2,13 +2,14 @@
 
 import { motion } from 'framer-motion';
 import { Eye, EyeOff } from 'lucide-react';
-import { useState, InputHTMLAttributes, forwardRef } from 'react';
+import { useId, useState, InputHTMLAttributes, forwardRef } from 'react';
 import { FieldError } from '../../../components/forms/FormError';
 
 interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
   error?: string;
   icon?: React.ReactNode;
+  helperText?: React.ReactNode;
 }
 
 export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
@@ -18,6 +19,10 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
       error,
       icon,
       type,
+      id,
+      required,
+      helperText,
+      'aria-describedby': ariaDescribedBy,
       onDrag,
       onDragStart,
       onDragEnd,
@@ -32,10 +37,16 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
     void onDragEnd;
     void onAnimationStart;
     void onAnimationEnd;
+    const generatedId = useId();
     const [showPassword, setShowPassword] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
 
     const inputType = type === 'password' && showPassword ? 'text' : type;
+    const inputId = id ?? `auth-input-${generatedId}`;
+    const helperTextId = helperText ? `${inputId}-helper` : undefined;
+    const errorId = error ? `${inputId}-error` : undefined;
+    const describedBy =
+      [ariaDescribedBy, helperTextId, errorId].filter(Boolean).join(' ') || undefined;
 
     return (
       <motion.div
@@ -44,16 +55,29 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
         transition={{ duration: 0.3 }}
         className="w-full"
       >
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        <label
+          htmlFor={inputId}
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        >
           {label}
         </label>
         <div className="relative">
           {icon && (
-            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">{icon}</div>
+            <div
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+              aria-hidden="true"
+            >
+              {icon}
+            </div>
           )}
           <motion.input
             ref={ref}
+            id={inputId}
             type={inputType}
+            required={required}
+            aria-invalid={!!error}
+            aria-required={required}
+            aria-describedby={describedBy}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}
             animate={{
@@ -72,13 +96,25 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
             <button
               type="button"
               onClick={() => setShowPassword(!showPassword)}
+              aria-label={showPassword ? `Hide ${label}` : `Show ${label}`}
+              aria-pressed={showPassword}
+              aria-controls={inputId}
               className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
             >
-              {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+              {showPassword ? (
+                <EyeOff size={20} aria-hidden="true" />
+              ) : (
+                <Eye size={20} aria-hidden="true" />
+              )}
             </button>
           )}
         </div>
-        <FieldError error={error} />
+        {helperText && (
+          <p id={helperTextId} className="mt-1.5 text-sm text-gray-500 dark:text-gray-400 ml-1">
+            {helperText}
+          </p>
+        )}
+        <FieldError error={error} id={errorId} />
       </motion.div>
     );
   },
diff --git a/src/app/components/auth/__tests__/FormInput.test.tsx b/src/app/components/auth/__tests__/FormInput.test.tsx
new file mode 100644
index 00000000..df97d530
--- /dev/null
+++ b/src/app/components/auth/__tests__/FormInput.test.tsx
@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { FormInput } from '../FormInput';
+
+describe('Auth FormInput', () => {
+  it('associates label, helper text, and required state with the input', () => {
+    render(
+      <FormInput
+        label="Email"
+        name="email"
+        type="email"
+        required
+        helperText="Use the email connected to your account."
+      />,
+    );
+
+    const input = screen.getByRole('textbox', {
+      name: 'Email',
+      description: 'Use the email connected to your account.',
+    });
+
+    expect(input).toBeRequired();
+    expect(input).toHaveAttribute('aria-required', 'true');
+    expect(input).toHaveAttribute('aria-invalid', 'false');
+  });
+
+  it('links validation errors to the input for screen readers', () => {
+    render(
+      <FormInput
+        label="Email"
+        name="email"
+        type="email"
+        error="Enter a valid email address."
+        helperText="Use the email connected to your account."
+      />,
+    );
+
+    const input = screen.getByRole('textbox', { name: 'Email' });
+
+    expect(screen.getByRole('alert')).toHaveTextContent('Enter a valid email address.');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveAccessibleDescription(
+      'Use the email connected to your account. Enter a valid email address.',
+    );
+  });
+
+  it('exposes password visibility controls with name, state, and controlled input', () => {
+    render(<FormInput label="Password" name="password" type="password" />);
+
+    const input = screen.getByLabelText('Password');
+    const toggle = screen.getByRole('button', { name: 'Show Password' });
+
+    expect(input).toHaveAttribute('type', 'password');
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    expect(toggle).toHaveAttribute('aria-controls', input.id);
+
+    fireEvent.click(toggle);
+
+    expect(input).toHaveAttribute('type', 'text');
+    expect(screen.getByRole('button', { name: 'Hide Password' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    );
+  });
+});
diff --git a/src/components/forms/FormInput.tsx b/src/components/forms/FormInput.tsx
index d340c7d8..0a371dc1 100644
--- a/src/components/forms/FormInput.tsx
+++ b/src/components/forms/FormInput.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useId } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { LucideIcon } from 'lucide-react';
 
@@ -12,6 +12,7 @@ interface FormInputProps
   as?: 'input' | 'textarea' | 'select';
   children?: React.ReactNode; // For select options
   rows?: number; // Explicitly add rows for textarea
+  helperText?: React.ReactNode;
 }
 
 /**
@@ -25,8 +26,13 @@ export const FormInput: React.FC<FormInputProps> = ({
   children,
   className = '',
   rows,
+  id,
+  required,
+  helperText,
+  'aria-describedby': ariaDescribedBy,
   ...props
 }) => {
+  const generatedId = useId();
   const {
     register,
     formState: { errors },
@@ -34,6 +40,11 @@ export const FormInput: React.FC<FormInputProps> = ({
 
   const error = errors[name];
   const isError = !!error;
+  const inputId = id ?? `${name}-${generatedId}`;
+  const helperTextId = helperText ? `${inputId}-helper` : undefined;
+  const errorId = isError ? `${inputId}-error` : undefined;
+  const describedBy =
+    [ariaDescribedBy, helperTextId, errorId].filter(Boolean).join(' ') || undefined;
 
   const baseStyles = `
     w-full pl-${Icon ? '10' : '4'} pr-4 py-2.5 
@@ -46,12 +57,18 @@ export const FormInput: React.FC<FormInputProps> = ({
 
   return (
     <div className="space-y-2">
-      <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">
+      <label
+        htmlFor={inputId}
+        className="block text-sm font-semibold text-gray-700 dark:text-gray-300"
+      >
         {label}
       </label>
       <div className="relative group">
         {Icon && (
-          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <div
+            className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
+            aria-hidden="true"
+          >
             <Icon
               className={`h-5 w-5 ${
                 isError ? 'text-red-400' : 'text-gray-400 group-focus-within:text-blue-500'
@@ -63,25 +80,52 @@ export const FormInput: React.FC<FormInputProps> = ({
         {as === 'textarea' ? (
           <textarea
             {...(register(name) as any)}
+            id={inputId}
+            aria-invalid={isError}
+            aria-required={required}
+            aria-describedby={describedBy}
             className={`${baseStyles} resize-none ${className}`}
             rows={rows}
+            required={required}
             {...(props as any)}
           />
         ) : as === 'select' ? (
           <select
             {...(register(name) as any)}
+            id={inputId}
+            aria-invalid={isError}
+            aria-required={required}
+            aria-describedby={describedBy}
             className={`${baseStyles} ${className}`}
+            required={required}
             {...(props as any)}
           >
             {children}
           </select>
         ) : (
-          <input {...register(name)} className={`${baseStyles} ${className}`} {...(props as any)} />
+          <input
+            {...register(name)}
+            id={inputId}
+            aria-invalid={isError}
+            aria-required={required}
+            aria-describedby={describedBy}
+            className={`${baseStyles} ${className}`}
+            required={required}
+            {...(props as any)}
+          />
         )}
       </div>
 
+      {helperText && (
+        <p id={helperTextId} className="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-1">
+          {helperText}
+        </p>
+      )}
+
       {isError && (
-        <p className="text-red-500 text-xs mt-1 ml-1 font-medium">{error.message as string}</p>
+        <p id={errorId} className="text-red-500 text-xs mt-1 ml-1 font-medium" role="alert">
+          {error.message as string}
+        </p>
       )}
     </div>
   );
diff --git a/src/components/forms/__tests__/FormInput.test.tsx b/src/components/forms/__tests__/FormInput.test.tsx
new file mode 100644
index 00000000..c2a08818
--- /dev/null
+++ b/src/components/forms/__tests__/FormInput.test.tsx
@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { describe, expect, it } from 'vitest';
+import { FormInput } from '../FormInput';
+
+function renderWithForm(ui: React.ReactNode, options: { error?: string } = {}) {
+  function Wrapper() {
+    const methods = useForm({ defaultValues: { email: '', bio: '', role: '' } });
+
+    useEffect(() => {
+      if (options.error) {
+        methods.setError('email', { type: 'manual', message: options.error });
+      }
+    }, [methods, options.error]);
+
+    return <FormProvider {...methods}>{ui}</FormProvider>;
+  }
+
+  return render(<Wrapper />);
+}
+
+describe('FormInput', () => {
+  it('associates the visible label and helper text with text inputs', () => {
+    renderWithForm(
+      <FormInput
+        name="email"
+        label="Email address"
+        type="email"
+        required
+        helperText="Use your school email address."
+      />,
+    );
+
+    const input = screen.getByRole('textbox', {
+      name: 'Email address',
+      description: 'Use your school email address.',
+    });
+
+    expect(input).toBeRequired();
+    expect(input).toHaveAttribute('aria-required', 'true');
+    expect(input).toHaveAttribute('aria-invalid', 'false');
+  });
+
+  it('announces validation errors through aria-describedby and alert role', async () => {
+    renderWithForm(
+      <FormInput
+        name="email"
+        label="Email address"
+        type="email"
+        helperText="Use your school email address."
+      />,
+      { error: 'Email address is required.' },
+    );
+
+    const error = await screen.findByRole('alert');
+    const input = screen.getByRole('textbox', { name: 'Email address' });
+
+    expect(error).toHaveTextContent('Email address is required.');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveAccessibleDescription(
+      'Use your school email address. Email address is required.',
+    );
+  });
+
+  it('supports textarea and select fields with accessible names', () => {
+    renderWithForm(
+      <>
+        <FormInput name="bio" label="Biography" as="textarea" helperText="Keep it brief." />
+        <FormInput name="role" label="Role" as="select">
+          <option value="">Choose a role</option>
+          <option value="teacher">Teacher</option>
+        </FormInput>
+      </>,
+    );
+
+    expect(screen.getByRole('textbox', { name: 'Biography' })).toHaveAccessibleDescription(
+      'Keep it brief.',
+    );
+    expect(screen.getByRole('combobox', { name: 'Role' })).toBeInTheDocument();
+  });
+});

From 8143141a45e9eed7da3590b5e9f7a89347c26af3 Mon Sep 17 00:00:00 2001
From: MerlinTheWhiz <michaelnathan505@gmail.com>
Date: Wed, 27 May 2026 23:23:01 +0100
Subject: [PATCH 2/2] perf: optimize profile page performance

---
 docs/profile-performance.md                   |  19 ++
 .../profile/__tests__/ProfileTabs.test.tsx    |  49 +++++
 .../profile/components/AchievementsPanel.tsx  |  30 +++
 src/app/profile/components/ProfileHeader.tsx  |  26 +++
 .../profile/components/ProfileInfoPanel.tsx   | 111 ++++++++++
 .../components/ProfilePanelSkeleton.tsx       |  21 ++
 src/app/profile/components/ProfileTabs.tsx    |  56 +++++
 src/app/profile/components/SettingsPanel.tsx  |  57 +++++
 src/app/profile/page.tsx                      | 199 +-----------------
 src/app/profile/profile-data.ts               | 104 +++++++++
 10 files changed, 481 insertions(+), 191 deletions(-)
 create mode 100644 docs/profile-performance.md
 create mode 100644 src/app/profile/__tests__/ProfileTabs.test.tsx
 create mode 100644 src/app/profile/components/AchievementsPanel.tsx
 create mode 100644 src/app/profile/components/ProfileHeader.tsx
 create mode 100644 src/app/profile/components/ProfileInfoPanel.tsx
 create mode 100644 src/app/profile/components/ProfilePanelSkeleton.tsx
 create mode 100644 src/app/profile/components/ProfileTabs.tsx
 create mode 100644 src/app/profile/components/SettingsPanel.tsx
 create mode 100644 src/app/profile/profile-data.ts

diff --git a/docs/profile-performance.md b/docs/profile-performance.md
new file mode 100644
index 00000000..be157bbc
--- /dev/null
+++ b/docs/profile-performance.md
@@ -0,0 +1,19 @@
+# Profile Page Performance
+
+The profile route keeps its static shell server-rendered and limits client JavaScript to the tab interaction layer.
+
+## Implementation
+
+- `src/app/profile/page.tsx` is a server component that renders the page shell and profile header.
+- `src/app/profile/components/ProfileTabs.tsx` owns the small client-side tab state.
+- The default profile panel renders first, while settings and achievements are split into lazy-loaded tab panels.
+- Shared profile, preference, and achievement data lives in `src/app/profile/profile-data.ts` to avoid recreating arrays during render.
+- Tabs and switches use semantic roles and accessible names so the optimization does not trade away usability.
+
+## Validation
+
+Run the focused regression suite with:
+
+```bash
+pnpm vitest run src/app/profile/__tests__/ProfileTabs.test.tsx
+```
diff --git a/src/app/profile/__tests__/ProfileTabs.test.tsx b/src/app/profile/__tests__/ProfileTabs.test.tsx
new file mode 100644
index 00000000..ee3f5671
--- /dev/null
+++ b/src/app/profile/__tests__/ProfileTabs.test.tsx
@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import ProfileTabs from '../components/ProfileTabs';
+
+describe('ProfileTabs', () => {
+  it('renders the profile panel first to keep initial work minimal', () => {
+    render(<ProfileTabs />);
+
+    expect(screen.getByRole('tab', { name: 'Profile' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tabpanel', { name: 'Profile' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Full Name')).toHaveValue('John Doe');
+    expect(screen.queryByText('Dark Mode')).not.toBeInTheDocument();
+    expect(screen.queryByText('First Course')).not.toBeInTheDocument();
+  });
+
+  it('loads settings only when the settings tab is selected', async () => {
+    const user = userEvent.setup();
+
+    render(<ProfileTabs />);
+    await user.click(screen.getByRole('tab', { name: 'Settings' }));
+
+    await waitFor(() =>
+      expect(screen.getByRole('tabpanel', { name: 'Settings' })).toBeInTheDocument(),
+    );
+    expect(screen.getByRole('tab', { name: 'Settings' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('switch', { name: 'Notifications' })).toBeChecked();
+
+    await user.click(screen.getByRole('switch', { name: 'Notifications' }));
+    expect(screen.getByRole('switch', { name: 'Notifications' })).not.toBeChecked();
+  });
+
+  it('loads achievements only when the achievements tab is selected', async () => {
+    const user = userEvent.setup();
+
+    render(<ProfileTabs />);
+    await user.click(screen.getByRole('tab', { name: 'Achievements' }));
+
+    await waitFor(() =>
+      expect(screen.getByRole('tabpanel', { name: 'Achievements' })).toBeInTheDocument(),
+    );
+    expect(screen.getByRole('tab', { name: 'Achievements' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+    expect(screen.getByText('Web3 Master')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Full Name')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/app/profile/components/AchievementsPanel.tsx b/src/app/profile/components/AchievementsPanel.tsx
new file mode 100644
index 00000000..75faf61c
--- /dev/null
+++ b/src/app/profile/components/AchievementsPanel.tsx
@@ -0,0 +1,30 @@
+import { achievements } from '../profile-data';
+
+export default function AchievementsPanel() {
+  return (
+    <section
+      id="achievements-panel"
+      role="tabpanel"
+      aria-labelledby="achievements-tab"
+      className="rounded-lg bg-white p-6 shadow"
+    >
+      <h2 className="mb-6 text-xl font-semibold text-gray-900">Achievements</h2>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {achievements.map((achievement) => (
+          <article
+            key={achievement.id}
+            className="rounded-lg border border-gray-200 p-4 text-center"
+          >
+            <div className="mb-2 text-4xl" aria-hidden="true">
+              {achievement.icon}
+            </div>
+            <h3 className="font-semibold text-gray-900">{achievement.title}</h3>
+            <p className="text-sm text-gray-500">{achievement.description}</p>
+            <p className="mt-1 text-xs text-gray-400">{achievement.earnedAt}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/profile/components/ProfileHeader.tsx b/src/app/profile/components/ProfileHeader.tsx
new file mode 100644
index 00000000..fa4c5ef1
--- /dev/null
+++ b/src/app/profile/components/ProfileHeader.tsx
@@ -0,0 +1,26 @@
+import type { ProfileUser } from '../profile-data';
+
+interface ProfileHeaderProps {
+  user: ProfileUser;
+}
+
+export default function ProfileHeader({ user }: ProfileHeaderProps) {
+  return (
+    <header className="border-b bg-white shadow-sm">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          <h1 className="text-2xl font-bold text-gray-900">Profile</h1>
+          <div className="flex items-center space-x-2" aria-label={`Signed in as ${user.name}`}>
+            <div
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 font-semibold text-white"
+              aria-hidden="true"
+            >
+              {user.initials}
+            </div>
+            <span className="text-gray-700">{user.name}</span>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/app/profile/components/ProfileInfoPanel.tsx b/src/app/profile/components/ProfileInfoPanel.tsx
new file mode 100644
index 00000000..72b48f3f
--- /dev/null
+++ b/src/app/profile/components/ProfileInfoPanel.tsx
@@ -0,0 +1,111 @@
+'use client';
+
+import { memo } from 'react';
+import { dailyLearningTimeOptions, learningGoalOptions, profileUser } from '../profile-data';
+
+function ProfileInfoPanel() {
+  return (
+    <section
+      id="profile-panel"
+      role="tabpanel"
+      aria-labelledby="profile-tab"
+      className="rounded-lg bg-white p-6 shadow"
+    >
+      <h2 className="mb-6 text-xl font-semibold text-gray-900">Personal Information</h2>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div>
+          <label
+            htmlFor="profile-full-name"
+            className="mb-2 block text-sm font-medium text-gray-700"
+          >
+            Full Name
+          </label>
+          <input
+            id="profile-full-name"
+            type="text"
+            defaultValue={profileUser.name}
+            autoComplete="name"
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="profile-email" className="mb-2 block text-sm font-medium text-gray-700">
+            Email
+          </label>
+          <input
+            id="profile-email"
+            type="email"
+            defaultValue={profileUser.email}
+            autoComplete="email"
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="profile-learning-goal"
+            className="mb-2 block text-sm font-medium text-gray-700"
+          >
+            Learning Goal
+          </label>
+          <select
+            id="profile-learning-goal"
+            defaultValue="monthly-course"
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+          >
+            {learningGoalOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label
+            htmlFor="profile-daily-time"
+            className="mb-2 block text-sm font-medium text-gray-700"
+          >
+            Daily Learning Time
+          </label>
+          <select
+            id="profile-daily-time"
+            defaultValue="30-minutes"
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+          >
+            {dailyLearningTimeOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="mt-6">
+        <label htmlFor="profile-bio" className="mb-2 block text-sm font-medium text-gray-700">
+          Bio
+        </label>
+        <textarea
+          id="profile-bio"
+          rows={4}
+          defaultValue={profileUser.bio}
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div className="mt-6">
+        <button
+          type="button"
+          className="rounded-lg bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          Save Changes
+        </button>
+      </div>
+    </section>
+  );
+}
+
+export default memo(ProfileInfoPanel);
diff --git a/src/app/profile/components/ProfilePanelSkeleton.tsx b/src/app/profile/components/ProfilePanelSkeleton.tsx
new file mode 100644
index 00000000..cdfb50a9
--- /dev/null
+++ b/src/app/profile/components/ProfilePanelSkeleton.tsx
@@ -0,0 +1,21 @@
+interface ProfilePanelSkeletonProps {
+  label: string;
+}
+
+export default function ProfilePanelSkeleton({ label }: ProfilePanelSkeletonProps) {
+  return (
+    <div
+      className="rounded-lg bg-white p-6 shadow"
+      role="status"
+      aria-label={`Loading ${label}`}
+      aria-live="polite"
+    >
+      <div className="mb-6 h-6 w-40 rounded bg-gray-200" />
+      <div className="space-y-4">
+        <div className="h-12 rounded bg-gray-100" />
+        <div className="h-12 rounded bg-gray-100" />
+        <div className="h-12 rounded bg-gray-100" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/profile/components/ProfileTabs.tsx b/src/app/profile/components/ProfileTabs.tsx
new file mode 100644
index 00000000..c5f8732b
--- /dev/null
+++ b/src/app/profile/components/ProfileTabs.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useCallback, useState } from 'react';
+import type { ProfileTabId } from '../profile-data';
+import { profileTabs } from '../profile-data';
+import ProfileInfoPanel from './ProfileInfoPanel';
+import ProfilePanelSkeleton from './ProfilePanelSkeleton';
+
+const SettingsPanel = dynamic(() => import('./SettingsPanel'), {
+  loading: () => <ProfilePanelSkeleton label="settings" />,
+});
+
+const AchievementsPanel = dynamic(() => import('./AchievementsPanel'), {
+  loading: () => <ProfilePanelSkeleton label="achievements" />,
+});
+
+export default function ProfileTabs() {
+  const [activeTab, setActiveTab] = useState<ProfileTabId>('profile');
+
+  const handleTabChange = useCallback((tabId: ProfileTabId) => {
+    setActiveTab(tabId);
+  }, []);
+
+  return (
+    <>
+      <div className="mb-8 flex flex-wrap gap-3" role="tablist" aria-label="Profile sections">
+        {profileTabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+
+          return (
+            <button
+              key={tab.id}
+              id={`${tab.id}-tab`}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              aria-controls={`${tab.id}-panel`}
+              tabIndex={isActive ? 0 : -1}
+              onClick={() => handleTabChange(tab.id)}
+              className={`rounded-lg px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+                isActive ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {activeTab === 'profile' && <ProfileInfoPanel />}
+      {activeTab === 'settings' && <SettingsPanel />}
+      {activeTab === 'achievements' && <AchievementsPanel />}
+    </>
+  );
+}
diff --git a/src/app/profile/components/SettingsPanel.tsx b/src/app/profile/components/SettingsPanel.tsx
new file mode 100644
index 00000000..7d12cd3b
--- /dev/null
+++ b/src/app/profile/components/SettingsPanel.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { memo, useCallback, useState } from 'react';
+import { settingsPreferences } from '../profile-data';
+
+function SettingsPanel() {
+  const [settings, setSettings] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      settingsPreferences.map((preference) => [preference.id, preference.enabled]),
+    ),
+  );
+
+  const handleToggle = useCallback((id: string) => {
+    setSettings((currentSettings) => ({
+      ...currentSettings,
+      [id]: !currentSettings[id],
+    }));
+  }, []);
+
+  return (
+    <section
+      id="settings-panel"
+      role="tabpanel"
+      aria-labelledby="settings-tab"
+      className="rounded-lg bg-white p-6 shadow"
+    >
+      <h2 className="mb-6 text-xl font-semibold text-gray-900">Settings</h2>
+
+      <div className="space-y-6">
+        {settingsPreferences.map((preference) => (
+          <div key={preference.id} className="flex items-center justify-between gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900">{preference.label}</h3>
+              <p id={`${preference.id}-description`} className="text-sm text-gray-500">
+                {preference.description}
+              </p>
+            </div>
+            <label className="relative inline-flex cursor-pointer items-center">
+              <span className="sr-only">{preference.label}</span>
+              <input
+                type="checkbox"
+                role="switch"
+                checked={settings[preference.id]}
+                onChange={() => handleToggle(preference.id)}
+                aria-describedby={`${preference.id}-description`}
+                className="peer sr-only"
+              />
+              <span className="h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300" />
+            </label>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default memo(SettingsPanel);
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 925e2e49..14b1aa7b 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -1,198 +1,15 @@
-'use client';
-
-import { useState } from 'react';
+import ProfileHeader from './components/ProfileHeader';
+import ProfileTabs from './components/ProfileTabs';
+import { profileUser } from './profile-data';
 
 export default function Profile() {
-  const [activeTab, setActiveTab] = useState('profile');
-
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <header className="bg-white shadow-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <h1 className="text-2xl font-bold text-gray-900">Profile</h1>
-            <div className="flex items-center space-x-4">
-              <div className="flex items-center space-x-2">
-                <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
-                  JD
-                </div>
-                <span className="text-gray-700">John Doe</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="flex space-x-6 mb-8">
-          <button
-            onClick={() => setActiveTab('profile')}
-            className={`px-4 py-2 rounded-lg font-medium ${
-              activeTab === 'profile'
-                ? 'bg-blue-500 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            Profile
-          </button>
-          <button
-            onClick={() => setActiveTab('settings')}
-            className={`px-4 py-2 rounded-lg font-medium ${
-              activeTab === 'settings'
-                ? 'bg-blue-500 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            Settings
-          </button>
-          <button
-            onClick={() => setActiveTab('achievements')}
-            className={`px-4 py-2 rounded-lg font-medium ${
-              activeTab === 'achievements'
-                ? 'bg-blue-500 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            Achievements
-          </button>
-        </div>
-
-        {activeTab === 'profile' && (
-          <div className="bg-white rounded-lg shadow p-6">
-            <h2 className="text-xl font-semibold text-gray-900 mb-6">Personal Information</h2>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
-                <input
-                  type="text"
-                  defaultValue="John Doe"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
-                <input
-                  type="email"
-                  defaultValue="john.doe@example.com"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Learning Goal
-                </label>
-                <select className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-                  <option>Complete 1 course per month</option>
-                  <option>Learn Web3 development</option>
-                  <option>Master smart contracts</option>
-                  <option>Build decentralized applications</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Daily Learning Time
-                </label>
-                <select className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-                  <option>30 minutes</option>
-                  <option>1 hour</option>
-                  <option>2 hours</option>
-                  <option>3+ hours</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="mt-6">
-              <label className="block text-sm font-medium text-gray-700 mb-2">Bio</label>
-              <textarea
-                rows={4}
-                defaultValue="Passionate about Web3 technologies and decentralized learning platforms."
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              />
-            </div>
-
-            <div className="mt-6">
-              <button className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
-                Save Changes
-              </button>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'settings' && (
-          <div className="bg-white rounded-lg shadow p-6">
-            <h2 className="text-xl font-semibold text-gray-900 mb-6">Settings</h2>
-
-            <div className="space-y-6">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="font-medium text-gray-900">Dark Mode</h3>
-                  <p className="text-sm text-gray-500">Switch between light and dark themes</p>
-                </div>
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input type="checkbox" className="sr-only peer" />
-                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                </label>
-              </div>
-
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="font-medium text-gray-900">Notifications</h3>
-                  <p className="text-sm text-gray-500">Receive learning reminders and updates</p>
-                </div>
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input type="checkbox" defaultChecked className="sr-only peer" />
-                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                </label>
-              </div>
-
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="font-medium text-gray-900">Offline Mode</h3>
-                  <p className="text-sm text-gray-500">Enable offline learning capabilities</p>
-                </div>
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input type="checkbox" defaultChecked className="sr-only peer" />
-                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                </label>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'achievements' && (
-          <div className="bg-white rounded-lg shadow p-6">
-            <h2 className="text-xl font-semibold text-gray-900 mb-6">Achievements</h2>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              <div className="border border-gray-200 rounded-lg p-4 text-center">
-                <div className="text-4xl mb-2">🎓</div>
-                <h3 className="font-semibold text-gray-900">First Course</h3>
-                <p className="text-sm text-gray-500">Completed your first course</p>
-                <p className="text-xs text-gray-400 mt-1">Earned Jan 15, 2024</p>
-              </div>
-
-              <div className="border border-gray-200 rounded-lg p-4 text-center">
-                <div className="text-4xl mb-2">🔥</div>
-                <h3 className="font-semibold text-gray-900">7-Day Streak</h3>
-                <p className="text-sm text-gray-500">Learned for 7 consecutive days</p>
-                <p className="text-xs text-gray-400 mt-1">Earned Feb 3, 2024</p>
-              </div>
+    <main className="min-h-screen bg-gray-50">
+      <ProfileHeader user={profileUser} />
 
-              <div className="border border-gray-200 rounded-lg p-4 text-center">
-                <div className="text-4xl mb-2">🏆</div>
-                <h3 className="font-semibold text-gray-900">Web3 Master</h3>
-                <p className="text-sm text-gray-500">Completed 5 Web3 courses</p>
-                <p className="text-xs text-gray-400 mt-1">Earned Mar 12, 2024</p>
-              </div>
-            </div>
-          </div>
-        )}
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <ProfileTabs />
       </div>
-    </div>
+    </main>
   );
 }
diff --git a/src/app/profile/profile-data.ts b/src/app/profile/profile-data.ts
new file mode 100644
index 00000000..c31ab241
--- /dev/null
+++ b/src/app/profile/profile-data.ts
@@ -0,0 +1,104 @@
+export type ProfileTabId = 'profile' | 'settings' | 'achievements';
+
+export interface ProfileUser {
+  initials: string;
+  name: string;
+  email: string;
+  bio: string;
+  learningGoal: string;
+  dailyLearningTime: string;
+}
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+export interface PreferenceOption {
+  id: string;
+  label: string;
+  description: string;
+  enabled: boolean;
+}
+
+export interface Achievement {
+  id: string;
+  icon: string;
+  title: string;
+  description: string;
+  earnedAt: string;
+}
+
+export const profileUser: ProfileUser = {
+  initials: 'JD',
+  name: 'John Doe',
+  email: 'john.doe@example.com',
+  bio: 'Passionate about Web3 technologies and decentralized learning platforms.',
+  learningGoal: 'Complete 1 course per month',
+  dailyLearningTime: '30 minutes',
+};
+
+export const profileTabs: Array<{ id: ProfileTabId; label: string }> = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'settings', label: 'Settings' },
+  { id: 'achievements', label: 'Achievements' },
+];
+
+export const learningGoalOptions: SelectOption[] = [
+  { label: 'Complete 1 course per month', value: 'monthly-course' },
+  { label: 'Learn Web3 development', value: 'web3-development' },
+  { label: 'Master smart contracts', value: 'smart-contracts' },
+  { label: 'Build decentralized applications', value: 'dapps' },
+];
+
+export const dailyLearningTimeOptions: SelectOption[] = [
+  { label: '30 minutes', value: '30-minutes' },
+  { label: '1 hour', value: '1-hour' },
+  { label: '2 hours', value: '2-hours' },
+  { label: '3+ hours', value: '3-plus-hours' },
+];
+
+export const settingsPreferences: PreferenceOption[] = [
+  {
+    id: 'dark-mode',
+    label: 'Dark Mode',
+    description: 'Switch between light and dark themes',
+    enabled: false,
+  },
+  {
+    id: 'notifications',
+    label: 'Notifications',
+    description: 'Receive learning reminders and updates',
+    enabled: true,
+  },
+  {
+    id: 'offline-mode',
+    label: 'Offline Mode',
+    description: 'Enable offline learning capabilities',
+    enabled: true,
+  },
+];
+
+export const achievements: Achievement[] = [
+  {
+    id: 'first-course',
+    icon: '🎓',
+    title: 'First Course',
+    description: 'Completed your first course',
+    earnedAt: 'Earned Jan 15, 2024',
+  },
+  {
+    id: 'seven-day-streak',
+    icon: '🔥',
+    title: '7-Day Streak',
+    description: 'Learned for 7 consecutive days',
+    earnedAt: 'Earned Feb 3, 2024',
+  },
+  {
+    id: 'web3-master',
+    icon: '🏆',
+    title: 'Web3 Master',
+    description: 'Completed 5 Web3 courses',
+    earnedAt: 'Earned Mar 12, 2024',
+  },
+];