diff --git a/frontend/src/pages/EventChatPage.jsx b/frontend/src/pages/EventChatPage.jsx
index 384134b..6bad930 100644
--- a/frontend/src/pages/EventChatPage.jsx
+++ b/frontend/src/pages/EventChatPage.jsx
@@ -7,6 +7,10 @@ import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
 import { eventsAPI, heatsAPI, matchesAPI } from '../services/api';
 import HeatsBanner from '../components/heats/HeatsBanner';
 import Avatar from '../components/common/Avatar';
+import ChatMessageList from '../components/chat/ChatMessageList';
+import ChatInput from '../components/chat/ChatInput';
+import ConfirmationModal from '../components/modals/ConfirmationModal';
+import Modal from '../components/modals/Modal';
 
 const EventChatPage = () => {
   const { slug } = useParams();
@@ -590,79 +594,24 @@ const EventChatPage = () => {
 
             {/* Chat Area */}
             <div className="flex-1 flex flex-col">
-              {/* Messages */}
-              <div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-4 space-y-4">
-                {/* Loading older messages indicator */}
-                {loadingOlder && (
-                  <div className="flex justify-center py-2">
-                    <Loader2 className="w-5 h-5 animate-spin text-primary-600" />
-                  </div>
-                )}
-
-                {messages.length === 0 && (
-                  <div className="text-center text-gray-500 py-8">
-                    No messages yet. Start the conversation!
-                  </div>
-                )}
-                {messages.map((message) => {
-                  const isOwnMessage = (message.userId ?? message.user_id) === user.id;
-                  return (
-                    <div
-                      key={message.id}
-                      className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
-                    >
-                      <div className={`flex items-start space-x-2 max-w-md ${isOwnMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
-                        <Avatar
-                          src={message.avatar}
-                          username={message.username}
-                          size={32}
-                          title={message.username}
-                        />
-                        <div>
-                          <div className="flex items-baseline space-x-2 mb-1">
-                            <span className="text-sm font-medium text-gray-900">
-                              {message.username}
-                            </span>
-                            <span className="text-xs text-gray-500">
-                              {new Date(message.createdAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
-                            </span>
-                          </div>
-                          <div
-                            className={`rounded-lg px-4 py-2 ${
-                              isOwnMessage
-                                ? 'bg-primary-600 text-white'
-                                : 'bg-gray-100 text-gray-900'
-                            }`}
-                          >
-                            {message.content}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-                <div ref={messagesEndRef} />
-              </div>
+              <ChatMessageList
+                messages={messages}
+                currentUserId={user.id}
+                messagesEndRef={messagesEndRef}
+                messagesContainerRef={messagesContainerRef}
+                loadingOlder={loadingOlder}
+                hasMore={hasMore}
+              />
 
               {/* Message Input */}
               <div className="border-t p-4">
-                <form onSubmit={handleSendMessage} className="flex space-x-2">
-                  <input
-                    type="text"
-                    value={newMessage}
-                    onChange={(e) => setNewMessage(e.target.value)}
-                    placeholder="Write a message..."
-                    disabled={!isConnected}
-                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
-                  />
-                  <button
-                    type="submit"
-                    disabled={!isConnected}
-                    className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50"
-                  >
-                    <Send className="w-5 h-5" />
-                  </button>
-                </form>
+                <ChatInput
+                  value={newMessage}
+                  onChange={(e) => setNewMessage(e.target.value)}
+                  onSubmit={handleSendMessage}
+                  disabled={!isConnected}
+                  placeholder="Write a message..."
+                />
               </div>
             </div>
           </div>
@@ -679,79 +628,31 @@ const EventChatPage = () => {
           </div>
         </div>
 
-        {/* Leave Confirmation Modal */}
-        {showLeaveModal && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-            <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
-                  <AlertTriangle className="text-red-600" size={24} />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold text-gray-900">Leave Event?</h3>
-                  <p className="text-sm text-gray-600">This action cannot be undone</p>
-                </div>
-              </div>
+        <ConfirmationModal
+          isOpen={showLeaveModal}
+          onClose={() => setShowLeaveModal(false)}
+          onConfirm={handleLeaveEvent}
+          title="Leave Event?"
+          description="This action cannot be undone"
+          message={`Are you sure you want to leave ${event?.name || 'this event'}? You will need to scan the QR code again to rejoin.`}
+          confirmText="Leave Event"
+          isLoading={isLeaving}
+          loadingText="Leaving..."
+          icon={AlertTriangle}
+        />
 
-              <p className="text-gray-700 mb-6">
-                Are you sure you want to leave <strong>{event.name}</strong>?
-                You will need to scan the QR code again to rejoin.
-              </p>
-
-              <div className="flex gap-3">
-                <button
-                  onClick={() => setShowLeaveModal(false)}
-                  disabled={isLeaving}
-                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium disabled:opacity-50"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handleLeaveEvent}
-                  disabled={isLeaving}
-                  className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2"
-                >
-                  {isLeaving ? (
-                    <>
-                      <Loader2 className="animate-spin" size={16} />
-                      Leaving...
-                    </>
-                  ) : (
-                    <>
-                      <LogOut size={16} />
-                      Leave Event
-                    </>
-                  )}
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Edit Heats Modal */}
-        {showHeatsModal && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-            <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
-              <div className="sticky top-0 bg-white border-b px-6 py-4 flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-gray-900">Edit Your Competition Heats</h3>
-                <button
-                  onClick={() => setShowHeatsModal(false)}
-                  className="text-gray-400 hover:text-gray-600"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
-              <div className="p-6">
-                <HeatsBanner
-                  slug={slug}
-                  onSave={handleHeatsSave}
-                  onDismiss={() => setShowHeatsModal(false)}
-                  existingHeats={myHeats}
-                />
-              </div>
-            </div>
-          </div>
-        )}
+        <Modal
+          isOpen={showHeatsModal}
+          onClose={() => setShowHeatsModal(false)}
+          title="Edit Your Competition Heats"
+        >
+          <HeatsBanner
+            slug={slug}
+            onSave={handleHeatsSave}
+            onDismiss={() => setShowHeatsModal(false)}
+            existingHeats={myHeats}
+          />
+        </Modal>
       </div>
     </Layout>
   );
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 620e153..3b935da 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { Video, Mail, Lock } from 'lucide-react';
+import FormInput from '../components/common/FormInput';
+import LoadingButton from '../components/common/LoadingButton';
 
 const LoginPage = () => {
   const [email, setEmail] = useState('');
@@ -33,24 +35,16 @@ const LoginPage = () => {
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-6">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Email
-            </label>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <Mail className="h-5 w-5 text-gray-400" />
-              </div>
-              <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="pl-10 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
-                placeholder="your@email.com"
-                required
-              />
-            </div>
-          </div>
+          <FormInput
+            label="Email"
+            name="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            icon={Mail}
+            placeholder="your@email.com"
+            required
+          />
 
           <div>
             <div className="flex items-center justify-between mb-2">
@@ -64,28 +58,25 @@ const LoginPage = () => {
                 Forgot password?
               </Link>
             </div>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <Lock className="h-5 w-5 text-gray-400" />
-              </div>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="pl-10 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
-                placeholder="••••••••"
-                required
-              />
-            </div>
+            <FormInput
+              name="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              icon={Lock}
+              placeholder="••••••••"
+              required
+            />
           </div>
 
-          <button
+          <LoadingButton
             type="submit"
-            disabled={loading}
+            loading={loading}
+            loadingText="Signing in..."
             className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
           >
-            {loading ? 'Signing in...' : 'Sign in'}
-          </button>
+            Sign in
+          </LoadingButton>
         </form>
 
         <div className="mt-6 text-center">
diff --git a/frontend/src/pages/MatchChatPage.jsx b/frontend/src/pages/MatchChatPage.jsx
index 279fb4c..63b9983 100644
--- a/frontend/src/pages/MatchChatPage.jsx
+++ b/frontend/src/pages/MatchChatPage.jsx
@@ -9,6 +9,8 @@ import { useWebRTC } from '../hooks/useWebRTC';
 import { detectWebRTCSupport } from '../utils/webrtcDetection';
 import WebRTCWarning from '../components/WebRTCWarning';
 import Avatar from '../components/common/Avatar';
+import ChatMessageList from '../components/chat/ChatMessageList';
+import ChatInput from '../components/chat/ChatInput';
 
 const MatchChatPage = () => {
   const { slug } = useParams();
@@ -350,52 +352,11 @@ const MatchChatPage = () => {
               </div>
             )}
 
-            {/* Messages */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-4">
-              {messages.length === 0 && (
-                <div className="text-center text-gray-500 py-8">
-                  No messages yet. Start the conversation!
-                </div>
-              )}
-              {messages.map((message) => {
-                const isOwnMessage = (message.userId ?? message.user_id) === user.id;
-                return (
-                  <div
-                    key={message.id}
-                    className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
-                  >
-                    <div className={`flex items-start space-x-2 max-w-md ${isOwnMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
-                      <Avatar
-                        src={message.avatar || (isOwnMessage ? user?.avatar : partner?.avatar)}
-                        username={message.username || (isOwnMessage ? user?.username : partner?.username)}
-                        size={32}
-                        title={message.username || (isOwnMessage ? user?.username : partner?.username)}
-                      />
-                      <div>
-                        <div className="flex items-baseline space-x-2 mb-1">
-                          <span className="text-sm font-medium text-gray-900">
-                            {message.username}
-                          </span>
-                          <span className="text-xs text-gray-500">
-                            {new Date(message.createdAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
-                          </span>
-                        </div>
-                        <div
-                          className={`rounded-lg px-4 py-2 ${
-                            isOwnMessage
-                              ? 'bg-primary-600 text-white'
-                              : 'bg-gray-100 text-gray-900'
-                          }`}
-                        >
-                          {message.content}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-              <div ref={messagesEndRef} />
-            </div>
+            <ChatMessageList
+              messages={messages}
+              currentUserId={user.id}
+              messagesEndRef={messagesEndRef}
+            />
 
             {/* Video Transfer Section */}
             {(selectedFile || isTransferring) && (
@@ -529,23 +490,13 @@ const MatchChatPage = () => {
                 </button>
               </div>
 
-              <form onSubmit={handleSendMessage} className="flex space-x-2">
-                <input
-                  type="text"
-                  value={newMessage}
-                  onChange={(e) => setNewMessage(e.target.value)}
-                  placeholder="Write a message..."
-                  disabled={!isConnected}
-                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
-                />
-                <button
-                  type="submit"
-                  disabled={!isConnected}
-                  className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50"
-                >
-                  <Send className="w-5 h-5" />
-                </button>
-              </form>
+              <ChatInput
+                value={newMessage}
+                onChange={(e) => setNewMessage(e.target.value)}
+                onSubmit={handleSendMessage}
+                disabled={!isConnected}
+                placeholder="Write a message..."
+              />
             </div>
           </div>
         </div>
diff --git a/frontend/src/pages/ProfilePage.jsx b/frontend/src/pages/ProfilePage.jsx
index aeacda9..23c20c1 100644
--- a/frontend/src/pages/ProfilePage.jsx
+++ b/frontend/src/pages/ProfilePage.jsx
@@ -2,9 +2,13 @@ import { useState, useEffect } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import { authAPI } from '../services/api';
 import Layout from '../components/layout/Layout';
-import { User, Mail, Lock, Save, AlertCircle, CheckCircle, Loader2, Hash, Youtube, Instagram, Facebook, MapPin, Globe } from 'lucide-react';
-import { COUNTRIES } from '../data/countries';
+import Alert from '../components/common/Alert';
+import FormInput from '../components/common/FormInput';
+import FormSelect from '../components/common/FormSelect';
+import LoadingButton from '../components/common/LoadingButton';
 import Avatar from '../components/common/Avatar';
+import { User, Mail, Lock, Save, Hash, Youtube, Instagram, Facebook, MapPin, Globe } from 'lucide-react';
+import { COUNTRIES } from '../data/countries';
 
 const ProfilePage = () => {
   const { user, updateUser } = useAuth();
@@ -41,6 +45,7 @@ const ProfilePage = () => {
       });
     }
   }, [user]);
+
   const [profileLoading, setProfileLoading] = useState(false);
   const [profileMessage, setProfileMessage] = useState('');
   const [profileError, setProfileError] = useState('');
@@ -196,254 +201,135 @@ const ProfilePage = () => {
                 <form onSubmit={handleProfileSubmit} className="space-y-4">
                   <h2 className="text-xl font-semibold mb-4">Edit Profile</h2>
 
-                  {profileMessage && (
-                    <div className="p-3 bg-green-50 border border-green-200 rounded-md flex items-start gap-2">
-                      <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
-                      <p className="text-sm text-green-600">{profileMessage}</p>
-                    </div>
-                  )}
-
-                  {profileError && (
-                    <div className="p-3 bg-red-50 border border-red-200 rounded-md flex items-start gap-2">
-                      <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-                      <p className="text-sm text-red-600">{profileError}</p>
-                    </div>
-                  )}
+                  <Alert type="success" message={profileMessage} />
+                  <Alert type="error" message={profileError} />
 
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    {/* First Name */}
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        First Name
-                      </label>
-                      <input
-                        type="text"
-                        name="firstName"
-                        value={profileData.firstName}
-                        onChange={handleProfileChange}
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                      />
-                    </div>
+                    <FormInput
+                      label="First Name"
+                      name="firstName"
+                      value={profileData.firstName}
+                      onChange={handleProfileChange}
+                    />
 
-                    {/* Last Name */}
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Last Name
-                      </label>
-                      <input
-                        type="text"
-                        name="lastName"
-                        value={profileData.lastName}
-                        onChange={handleProfileChange}
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                      />
-                    </div>
+                    <FormInput
+                      label="Last Name"
+                      name="lastName"
+                      value={profileData.lastName}
+                      onChange={handleProfileChange}
+                    />
                   </div>
 
                   {/* Location Section */}
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    {/* Country */}
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Country
-                      </label>
-                      <div className="relative">
-                        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                          <Globe className="h-5 w-5 text-gray-400" />
-                        </div>
-                        <select
-                          name="country"
-                          value={profileData.country}
-                          onChange={handleProfileChange}
-                          className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                        >
-                          <option value="">Select a country</option>
-                          {COUNTRIES.map((country) => (
-                            <option key={country} value={country}>
-                              {country}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                    </div>
+                    <FormSelect
+                      label="Country"
+                      name="country"
+                      value={profileData.country}
+                      onChange={handleProfileChange}
+                      options={COUNTRIES}
+                      icon={Globe}
+                      placeholder="Select a country"
+                    />
 
-                    {/* City */}
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        City
-                      </label>
-                      <div className="relative">
-                        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                          <MapPin className="h-5 w-5 text-gray-400" />
-                        </div>
-                        <input
-                          type="text"
-                          name="city"
-                          value={profileData.city}
-                          onChange={handleProfileChange}
-                          className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                          placeholder="Somewhere"
-                        />
-                      </div>
-                    </div>
+                    <FormInput
+                      label="City"
+                      name="city"
+                      value={profileData.city}
+                      onChange={handleProfileChange}
+                      icon={MapPin}
+                      placeholder="Somewhere"
+                    />
                   </div>
 
                   {/* WSDC ID */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      WSDC ID
-                    </label>
-                    <div className="relative">
-                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <Hash className="h-5 w-5 text-gray-400" />
-                      </div>
-                      <input
-                        type="text"
-                        name="wsdcId"
-                        value={profileData.wsdcId}
-                        onChange={(e) => {
-                          const value = e.target.value.replace(/\D/g, '');
-                          setProfileData({ ...profileData, wsdcId: value });
-                        }}
-                        className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                        placeholder="12345"
-                        maxLength={10}
-                      />
-                    </div>
-                    <p className="text-xs text-gray-500 mt-1">
-                      Your World Swing Dance Council ID (optional)
-                    </p>
-                  </div>
+                  <FormInput
+                    label="WSDC ID"
+                    name="wsdcId"
+                    type="text"
+                    value={profileData.wsdcId}
+                    onChange={(e) => {
+                      const value = e.target.value.replace(/\D/g, '');
+                      setProfileData({ ...profileData, wsdcId: value });
+                    }}
+                    icon={Hash}
+                    placeholder="12345"
+                    maxLength={10}
+                    helperText="Your World Swing Dance Council ID (optional)"
+                  />
 
                   {/* Email */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      Email Address
-                    </label>
-                    <div className="relative">
-                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <Mail className="h-5 w-5 text-gray-400" />
-                      </div>
-                      <input
-                        type="email"
-                        name="email"
-                        value={profileData.email}
-                        onChange={handleProfileChange}
-                        className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                      />
-                    </div>
-                    <p className="text-xs text-gray-500 mt-1">
-                      Changing your email will require re-verification
-                    </p>
-                  </div>
+                  <FormInput
+                    label="Email Address"
+                    name="email"
+                    type="email"
+                    value={profileData.email}
+                    onChange={handleProfileChange}
+                    icon={Mail}
+                    helperText="Changing your email will require re-verification"
+                  />
 
                   {/* Social Media Links Section */}
                   <div className="pt-4 border-t border-gray-200">
                     <h3 className="text-lg font-medium text-gray-900 mb-4">Social Media Links</h3>
 
                     <div className="space-y-4">
-                      {/* YouTube */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          YouTube
-                        </label>
-                        <div className="relative">
-                          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                            <Youtube className="h-5 w-5 text-gray-400" />
-                          </div>
-                          <input
-                            type="url"
-                            name="youtubeUrl"
-                            value={profileData.youtubeUrl}
-                            onChange={handleProfileChange}
-                            className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                            placeholder="https://youtube.com/@yourhandle"
-                          />
-                        </div>
-                      </div>
+                      <FormInput
+                        label="YouTube"
+                        name="youtubeUrl"
+                        type="url"
+                        value={profileData.youtubeUrl}
+                        onChange={handleProfileChange}
+                        icon={Youtube}
+                        placeholder="https://youtube.com/@yourhandle"
+                      />
 
-                      {/* Instagram */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Instagram
-                        </label>
-                        <div className="relative">
-                          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                            <Instagram className="h-5 w-5 text-gray-400" />
-                          </div>
-                          <input
-                            type="url"
-                            name="instagramUrl"
-                            value={profileData.instagramUrl}
-                            onChange={handleProfileChange}
-                            className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                            placeholder="https://instagram.com/yourhandle"
-                          />
-                        </div>
-                      </div>
+                      <FormInput
+                        label="Instagram"
+                        name="instagramUrl"
+                        type="url"
+                        value={profileData.instagramUrl}
+                        onChange={handleProfileChange}
+                        icon={Instagram}
+                        placeholder="https://instagram.com/yourhandle"
+                      />
 
-                      {/* Facebook */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Facebook
-                        </label>
-                        <div className="relative">
-                          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                            <Facebook className="h-5 w-5 text-gray-400" />
-                          </div>
-                          <input
-                            type="url"
-                            name="facebookUrl"
-                            value={profileData.facebookUrl}
-                            onChange={handleProfileChange}
-                            className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                            placeholder="https://facebook.com/yourhandle"
-                          />
-                        </div>
-                      </div>
+                      <FormInput
+                        label="Facebook"
+                        name="facebookUrl"
+                        type="url"
+                        value={profileData.facebookUrl}
+                        onChange={handleProfileChange}
+                        icon={Facebook}
+                        placeholder="https://facebook.com/yourhandle"
+                      />
 
-                      {/* TikTok */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          TikTok
-                        </label>
-                        <div className="relative">
-                          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                            <svg className="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="currentColor">
-                              <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
-                            </svg>
-                          </div>
-                          <input
-                            type="url"
-                            name="tiktokUrl"
-                            value={profileData.tiktokUrl}
-                            onChange={handleProfileChange}
-                            className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                            placeholder="https://tiktok.com/@yourhandle"
-                          />
-                        </div>
-                      </div>
+                      <FormInput
+                        label="TikTok"
+                        name="tiktokUrl"
+                        type="url"
+                        value={profileData.tiktokUrl}
+                        onChange={handleProfileChange}
+                        icon={() => (
+                          <svg className="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
+                          </svg>
+                        )}
+                        placeholder="https://tiktok.com/@yourhandle"
+                      />
                     </div>
                   </div>
 
                   {/* Submit Button */}
-                  <button
+                  <LoadingButton
                     type="submit"
-                    disabled={profileLoading}
+                    loading={profileLoading}
+                    loadingText="Saving..."
                     className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
                   >
-                    {profileLoading ? (
-                      <>
-                        <Loader2 className="w-5 h-5 animate-spin" />
-                        Saving...
-                      </>
-                    ) : (
-                      <>
-                        <Save className="w-5 h-5" />
-                        Save Changes
-                      </>
-                    )}
-                  </button>
+                    <Save className="w-5 h-5" />
+                    Save Changes
+                  </LoadingButton>
                 </form>
               )}
 
@@ -452,98 +338,49 @@ const ProfilePage = () => {
                 <form onSubmit={handlePasswordSubmit} className="space-y-4">
                   <h2 className="text-xl font-semibold mb-4">Change Password</h2>
 
-                  {passwordMessage && (
-                    <div className="p-3 bg-green-50 border border-green-200 rounded-md flex items-start gap-2">
-                      <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
-                      <p className="text-sm text-green-600">{passwordMessage}</p>
-                    </div>
-                  )}
+                  <Alert type="success" message={passwordMessage} />
+                  <Alert type="error" message={passwordError} />
 
-                  {passwordError && (
-                    <div className="p-3 bg-red-50 border border-red-200 rounded-md flex items-start gap-2">
-                      <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-                      <p className="text-sm text-red-600">{passwordError}</p>
-                    </div>
-                  )}
+                  <FormInput
+                    label="Current Password"
+                    name="currentPassword"
+                    type="password"
+                    value={passwordData.currentPassword}
+                    onChange={handlePasswordChange}
+                    icon={Lock}
+                    required
+                  />
 
-                  {/* Current Password */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      Current Password
-                    </label>
-                    <div className="relative">
-                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <Lock className="h-5 w-5 text-gray-400" />
-                      </div>
-                      <input
-                        type="password"
-                        name="currentPassword"
-                        value={passwordData.currentPassword}
-                        onChange={handlePasswordChange}
-                        className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                        required
-                      />
-                    </div>
-                  </div>
+                  <FormInput
+                    label="New Password"
+                    name="newPassword"
+                    type="password"
+                    value={passwordData.newPassword}
+                    onChange={handlePasswordChange}
+                    icon={Lock}
+                    required
+                  />
 
-                  {/* New Password */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      New Password
-                    </label>
-                    <div className="relative">
-                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <Lock className="h-5 w-5 text-gray-400" />
-                      </div>
-                      <input
-                        type="password"
-                        name="newPassword"
-                        value={passwordData.newPassword}
-                        onChange={handlePasswordChange}
-                        className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                        required
-                      />
-                    </div>
-                  </div>
-
-                  {/* Confirm Password */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      Confirm New Password
-                    </label>
-                    <div className="relative">
-                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <Lock className="h-5 w-5 text-gray-400" />
-                      </div>
-                      <input
-                        type="password"
-                        name="confirmPassword"
-                        value={passwordData.confirmPassword}
-                        onChange={handlePasswordChange}
-                        className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
-                        required
-                      />
-                    </div>
-                  </div>
+                  <FormInput
+                    label="Confirm New Password"
+                    name="confirmPassword"
+                    type="password"
+                    value={passwordData.confirmPassword}
+                    onChange={handlePasswordChange}
+                    icon={Lock}
+                    required
+                  />
 
                   {/* Submit Button */}
-                  <button
+                  <LoadingButton
                     type="submit"
-                    disabled={passwordLoading}
+                    loading={passwordLoading}
+                    loadingText="Changing..."
                     className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
                   >
-                    {passwordLoading ? (
-                      <>
-                        <Loader2 className="w-5 h-5 animate-spin" />
-                        Changing...
-                      </>
-                    ) : (
-                      <>
-                        <Lock className="w-5 h-5" />
-                        Change Password
-                      </>
-                    )}
-                  </button>
+                    <Lock className="w-5 h-5" />
+                    Change Password
+                  </LoadingButton>
                 </form>
               )}
             </div>
diff --git a/frontend/src/pages/RegisterPage.jsx b/frontend/src/pages/RegisterPage.jsx
index 5193cab..d551a3f 100644
--- a/frontend/src/pages/RegisterPage.jsx
+++ b/frontend/src/pages/RegisterPage.jsx
@@ -4,6 +4,9 @@ import { useAuth } from '../contexts/AuthContext';
 import { wsdcAPI } from '../services/api';
 import { Video, Mail, Lock, User, Hash, ArrowRight, ArrowLeft, Loader2, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
 import PasswordStrengthIndicator from '../components/common/PasswordStrengthIndicator';
+import FormInput from '../components/common/FormInput';
+import LoadingButton from '../components/common/LoadingButton';
+import Alert from '../components/common/Alert';
 
 const RegisterPage = () => {
   // Step management
@@ -183,23 +186,19 @@ const RegisterPage = () => {
           ) : (
             <div>
               <div className="mb-4">
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Enter your WSDC ID
-                </label>
                 <div className="relative">
-                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <Hash className="h-5 w-5 text-gray-400" />
-                  </div>
-                  <input
+                  <FormInput
+                    label="Enter your WSDC ID"
+                    name="wsdcId"
                     type="text"
                     value={wsdcId}
                     onChange={(e) => setWsdcId(e.target.value.replace(/\D/g, ''))}
-                    className="pl-10 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
+                    icon={Hash}
                     placeholder="12345"
                     maxLength={10}
                   />
                   {wsdcLoading && (
-                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                    <div className="absolute top-9 right-0 pr-3 flex items-center pointer-events-none">
                       <Loader2 className="h-5 w-5 text-gray-400 animate-spin" />
                     </div>
                   )}
@@ -307,145 +306,85 @@ const RegisterPage = () => {
           )}
         </div>
 
-        {error && (
-          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
-            <p className="text-sm text-red-600">{error}</p>
-          </div>
-        )}
+        <Alert type="error" message={error} />
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          {/* First Name */}
+          <FormInput
+            label="First Name"
+            name="firstName"
+            type="text"
+            value={formData.firstName}
+            onChange={handleInputChange}
+            placeholder="John"
+            required
+          />
+
+          <FormInput
+            label="Last Name"
+            name="lastName"
+            type="text"
+            value={formData.lastName}
+            onChange={handleInputChange}
+            placeholder="Doe"
+            required
+          />
+
+          <FormInput
+            label="Username"
+            name="username"
+            type="text"
+            value={formData.username}
+            onChange={handleInputChange}
+            icon={User}
+            placeholder="john_doe"
+            required
+          />
+
+          <FormInput
+            label="Email"
+            name="email"
+            type="email"
+            value={formData.email}
+            onChange={handleInputChange}
+            icon={Mail}
+            placeholder="john@example.com"
+            required
+          />
+
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              First Name
-            </label>
-            <input
-              type="text"
-              name="firstName"
-              value={formData.firstName}
+            <FormInput
+              label="Password"
+              name="password"
+              type="password"
+              value={formData.password}
               onChange={handleInputChange}
-              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
-              placeholder="John"
+              icon={Lock}
+              placeholder="••••••••"
               required
             />
-          </div>
-
-          {/* Last Name */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Last Name
-            </label>
-            <input
-              type="text"
-              name="lastName"
-              value={formData.lastName}
-              onChange={handleInputChange}
-              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
-              placeholder="Doe"
-              required
-            />
-          </div>
-
-          {/* Username */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Username
-            </label>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <User className="h-5 w-5 text-gray-400" />
-              </div>
-              <input
-                type="text"
-                name="username"
-                value={formData.username}
-                onChange={handleInputChange}
-                className="pl-10 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
-                placeholder="john_doe"
-                required
-              />
-            </div>
-          </div>
-
-          {/* Email */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Email
-            </label>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <Mail className="h-5 w-5 text-gray-400" />
-              </div>
-              <input
-                type="email"
-                name="email"
-                value={formData.email}
-                onChange={handleInputChange}
-                className="pl-10 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
-                placeholder="john@example.com"
-                required
-              />
-            </div>
-          </div>
-
-          {/* Password */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Password
-            </label>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <Lock className="h-5 w-5 text-gray-400" />
-              </div>
-              <input
-                type="password"
-                name="password"
-                value={formData.password}
-                onChange={handleInputChange}
-                className="pl-10 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
-                placeholder="••••••••"
-                required
-              />
-            </div>
             <PasswordStrengthIndicator password={formData.password} />
           </div>
 
-          {/* Confirm Password */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Confirm Password
-            </label>
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <Lock className="h-5 w-5 text-gray-400" />
-              </div>
-              <input
-                type="password"
-                name="confirmPassword"
-                value={formData.confirmPassword}
-                onChange={handleInputChange}
-                className="pl-10 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
-                placeholder="••••••••"
-                required
-              />
-            </div>
-          </div>
+          <FormInput
+            label="Confirm Password"
+            name="confirmPassword"
+            type="password"
+            value={formData.confirmPassword}
+            onChange={handleInputChange}
+            icon={Lock}
+            placeholder="••••••••"
+            required
+          />
 
           <div className="space-y-3 pt-2">
-            <button
+            <LoadingButton
               type="submit"
-              disabled={loading}
+              loading={loading}
+              loadingText="Creating account..."
               className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
             >
-              {loading ? (
-                <>
-                  <Loader2 className="w-5 h-5 animate-spin mr-2" />
-                  Creating account...
-                </>
-              ) : (
-                'Create Account'
-              )}
-            </button>
+              Create Account
+            </LoadingButton>
 
             <button
               type="button"