diff --git a/src/components/MessageInput.tsx b/src/components/MessageInput.tsx
index cde19699..36ce0cb4 100644
--- a/src/components/MessageInput.tsx
+++ b/src/components/MessageInput.tsx
@@ -17,7 +17,7 @@ const MessageInput = ({ conversationId, replyTo, onCancelReply }: MessageInputPr
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  
+
   const sendMessage = useSendMessage();
   const { startTyping, stopTyping } = useTypingIndicator(conversationId);
 
@@ -32,17 +32,17 @@ const MessageInput = ({ conversationId, replyTo, onCancelReply }: MessageInputPr
   // Typing indicator logic
   useEffect(() => {
     let typingTimeout: NodeJS.Timeout;
-    
+
     if (message.trim()) {
       startTyping();
-      
+
       typingTimeout = setTimeout(() => {
         stopTyping();
       }, 3000);
     } else {
       stopTyping();
     }
-    
+
     return () => {
       if (typingTimeout) clearTimeout(typingTimeout);
       stopTyping();
@@ -51,17 +51,17 @@ const MessageInput = ({ conversationId, replyTo, onCancelReply }: MessageInputPr
 
   const handleSend = async () => {
     if (!message.trim() || sendMessage.isPending) return;
-    
+
     const messageContent = message.trim();
     setMessage('');
-    
+
     try {
       await sendMessage.mutateAsync({
         conversation_id: conversationId,
         content: messageContent,
         reply_to_id: replyTo?.id,
       });
-      
+
       if (onCancelReply) onCancelReply();
     } catch (error) {
       console.error('Failed to send message:', error);
@@ -78,25 +78,25 @@ const MessageInput = ({ conversationId, replyTo, onCancelReply }: MessageInputPr
 
   const handleFileUpload = async (file: File) => {
     if (!user) return;
-    
+
     setIsUploading(true);
-    
+
     try {
       const fileExt = file.name.split('.').pop();
       const fileName = `${user.id}/${Date.now()}.${fileExt}`;
-      
+
       const { error: uploadError } = await supabase.storage
         .from('message-files')
         .upload(fileName, file);
-      
+
       if (uploadError) throw uploadError;
-      
+
       const { data: { publicUrl } } = supabase.storage
         .from('message-files')
         .getPublicUrl(fileName);
-      
+
       const messageType = file.type.startsWith('image/') ? 'image' : 'file';
-      
+
       await sendMessage.mutateAsync({
         conversation_id: conversationId,
         content: messageType === 'image' ? '📷 Image' : `📎 ${file.name}`,
@@ -105,7 +105,7 @@ const MessageInput = ({ conversationId, replyTo, onCancelReply }: MessageInputPr
         file_name: file.name,
         reply_to_id: replyTo?.id,
       });
-      
+
       if (onCancelReply) onCancelReply();
     } catch (error) {
       console.error('Failed to upload file:', error);
@@ -122,7 +122,7 @@ const MessageInput = ({ conversationId, replyTo, onCancelReply }: MessageInputPr
   };
 
   const commonEmojis = [
-    '😀', '😂', '😍', '🤔', '😢', '😡', '👍', '👎', 
+    '😀', '😂', '😍', '🤔', '😢', '😡', '👍', '👎',
     '❤️', '🎉', '🔥', '💯', '👏', '🙏', '💪', '🎯'
   ];
 
@@ -179,7 +179,7 @@ const MessageInput = ({ conversationId, replyTo, onCancelReply }: MessageInputPr
           >
             <Paperclip className="w-5 h-5" />
           </button>
-          
+
           <button
             onClick={() => {
               if (fileInputRef.current) {
@@ -203,10 +203,10 @@ const MessageInput = ({ conversationId, replyTo, onCancelReply }: MessageInputPr
             onChange={(e) => setMessage(e.target.value)}
             onKeyPress={handleKeyPress}
             placeholder="Type a message..."
-            className="w-full px-4 py-3 pr-12 bg-slate-800/50 border border-slate-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/50 resize-none min-h-[48px] max-h-32"
+            className="input-slate pr-12 resize-none min-h-12 max-h-32"
             rows={1}
           />
-          
+
           {/* Emoji Button */}
           <button
             onClick={() => setShowEmojiPicker(!showEmojiPicker)}
diff --git a/src/components/MessagingInterface.tsx b/src/components/MessagingInterface.tsx
index c273d47f..d10f1047 100644
--- a/src/components/MessagingInterface.tsx
+++ b/src/components/MessagingInterface.tsx
@@ -31,17 +31,17 @@ const MessagingInterface = () => {
   // Filter conversations based on search
   const filteredConversations = conversations.filter(conv => {
     if (!searchQuery) return true;
-    
+
     if (conv.name) {
       return conv.name.toLowerCase().includes(searchQuery.toLowerCase());
     }
-    
+
     // For direct messages, search by participant names
     const participantNames = conv.participants
       ?.filter(p => p.user_id !== user?.id)
       .map(p => p.user?.user_metadata?.full_name || p.user?.user_metadata?.user_name || p.user?.email)
       .join(' ') || '';
-    
+
     return participantNames.toLowerCase().includes(searchQuery.toLowerCase());
   });
 
@@ -75,7 +75,7 @@ const MessagingInterface = () => {
               <Plus className="w-5 h-5" />
             </button>
           </div>
-          
+
           {/* Search */}
           <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
@@ -84,7 +84,7 @@ const MessagingInterface = () => {
               placeholder="Search conversations..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 bg-slate-800/50 border border-slate-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/50"
+              className="input-slate pl-10"
             />
           </div>
         </div>
@@ -125,7 +125,7 @@ const MessagingInterface = () => {
               ) : (
                 <MessageList messages={messages} />
               )}
-              
+
               {/* Typing Indicators */}
               {typingUsers.length > 0 && (
                 <div className="flex items-center gap-2 text-gray-400 text-sm">
@@ -135,12 +135,12 @@ const MessagingInterface = () => {
                     <div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
                   </div>
                   <span>
-                    {typingUsers.map(t => t.user?.user_metadata?.full_name || t.user?.user_metadata?.user_name).join(', ')} 
+                    {typingUsers.map(t => t.user?.user_metadata?.full_name || t.user?.user_metadata?.user_name).join(', ')}
                     {typingUsers.length === 1 ? ' is' : ' are'} typing...
                   </span>
                 </div>
               )}
-              
+
               <div ref={messagesEndRef} />
             </div>
 
diff --git a/src/components/PostDetail.tsx b/src/components/PostDetail.tsx
index bcdb03a1..18b048fe 100644
--- a/src/components/PostDetail.tsx
+++ b/src/components/PostDetail.tsx
@@ -25,7 +25,7 @@ const fetchPost = async (postId: number): Promise<Post> => {
         .select('*')
         .eq('id', postId)
         .single();
-    
+
     if (error) {
         throw new Error("Error fetching post: " + error.message);
     }
@@ -35,7 +35,7 @@ const fetchPost = async (postId: number): Promise<Post> => {
 const PostDetail = ({ postId }: PostDetailProps) => {
     const navigate = useNavigate();
     const [likeCount, setLikeCount] = useState(0);
-    
+
     const { data: post, error, isLoading } = useQuery<Post, Error>({
         queryKey: ["post", postId],
         queryFn: () => fetchPost(postId)
@@ -43,7 +43,7 @@ const PostDetail = ({ postId }: PostDetailProps) => {
 
     if (isLoading) {
         return (
-            <div className="flex justify-center items-center min-h-screen">
+            <div className="flex-center min-h-screen">
                 <div className="text-lg text-gray-600">Loading post...</div>
             </div>
         );
@@ -51,7 +51,7 @@ const PostDetail = ({ postId }: PostDetailProps) => {
 
     if (error) {
         return (
-            <div className="flex justify-center items-center min-h-screen">
+            <div className="flex-center min-h-screen">
                 <div className="text-lg text-red-600">Error loading post: {error.message}</div>
             </div>
         );
@@ -59,7 +59,7 @@ const PostDetail = ({ postId }: PostDetailProps) => {
 
     if (!post) {
         return (
-            <div className="flex justify-center items-center min-h-screen">
+            <div className="flex-center min-h-screen">
                 <div className="text-lg text-gray-600">Post not found</div>
             </div>
         );
@@ -86,7 +86,7 @@ const PostDetail = ({ postId }: PostDetailProps) => {
             {/* Back Button */}
             <button
                 onClick={() => navigate(-1)}
-                className="flex items-center gap-2 text-gray-700 hover:text-gray-900 mb-4 transition"
+                className="flex-gap-2 text-gray-700 hover:text-gray-900 mb-4 transition"
             >
                 <ArrowLeft className="w-5 h-5" />
                 <span className="font-medium">Back</span>
@@ -95,10 +95,10 @@ const PostDetail = ({ postId }: PostDetailProps) => {
             {/* Post Card */}
             <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                 {/* Header: Avatar and Title */}
-                <div className="flex items-center p-4 border-b border-gray-200">
+                <div className="flex-gap-2 p-4 border-b border-gray-200">
                     {post.avatar_url ? (
-                        <img 
-                            src={post.avatar_url} 
+                        <img
+                            src={post.avatar_url}
                             alt="User avatar"
                             className="w-10 h-10 rounded-full mr-3 shrink-0 object-cover"
                         />
@@ -114,9 +114,9 @@ const PostDetail = ({ postId }: PostDetailProps) => {
                 {/* Image */}
                 {post.image_url && (
                     <div className="w-full bg-gray-100">
-                        <img 
-                            src={post.image_url} 
-                            alt={post.title} 
+                        <img
+                            src={post.image_url}
+                            alt={post.title}
                             className="w-full h-auto object-contain max-h-[600px]"
                         />
                     </div>
diff --git a/src/index.css b/src/index.css
index 1a31f79d..9f8b1112 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,230 @@
 @import "tailwindcss";
 
+@layer base {
+  /* Form inputs base */
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  textarea {
+    @apply appearance-none;
+  }
+}
+
+@layer components {
+  /* Form Input Classes - DRY principle */
+  .input-dark {
+    @apply w-full px-3 py-2 rounded-lg border bg-gray-800 border-gray-600 text-white placeholder-gray-400 transition-all duration-200;
+    @apply focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/30 focus:outline-none;
+  }
+
+  .input-light {
+    @apply w-full px-3 py-2 rounded-lg border bg-white border-gray-300 text-gray-900 placeholder-gray-500 transition-all duration-200;
+    @apply focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/30 focus:outline-none;
+  }
+
+  .input-slate {
+    @apply w-full px-3 py-2 rounded-lg border bg-slate-700 border-slate-600 text-white placeholder-gray-400 transition-all duration-200;
+    @apply focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/30 focus:outline-none;
+  }
+
+  /* Navigation Link Classes */
+  .nav-link-base {
+    @apply font-mono text-sm text-gray-300 hover:text-cyan-400 transition duration-200 whitespace-nowrap px-2 py-1 rounded-t-md;
+  }
+
+  .nav-link-active {
+    @apply font-mono text-sm text-cyan-400 bg-cyan-900/20 border-b-2 border-cyan-400 transition duration-200 whitespace-nowrap px-2 py-1 rounded-t-md;
+  }
+
+  .nav-link-inactive {
+    @apply font-mono text-sm text-gray-300 hover:text-cyan-400 transition duration-200 whitespace-nowrap px-2 py-1 rounded-t-md;
+  }
+
+  .input-password-wrapper {
+    @apply relative;
+  }
+
+  .input-with-icon-left {
+    @apply pl-10;
+  }
+
+  .input-with-icon-right {
+    @apply pr-10;
+  }
+
+  /* Button Classes - DRY principle */
+  .btn-primary-dark {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply bg-cyan-600 hover:bg-cyan-700 text-white shadow-lg hover:shadow-cyan-600/20;
+  }
+
+  .btn-primary-light {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply bg-blue-600 hover:bg-blue-700 text-white shadow-lg hover:shadow-blue-600/20;
+  }
+
+  .btn-secondary-dark {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300;
+  }
+
+  .btn-secondary-light {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply bg-gray-200 hover:bg-gray-300 border border-gray-300 text-gray-800;
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply bg-red-600 hover:bg-red-700 text-white;
+  }
+
+  .btn-success {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply bg-green-600 hover:bg-green-700 text-white;
+  }
+
+  /* Flex Center - Common pattern */
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .flex-center-col {
+    @apply flex flex-col items-center justify-center;
+  }
+
+  .flex-between {
+    @apply flex items-center justify-between;
+  }
+
+  .flex-start {
+    @apply flex items-center;
+  }
+
+  /* Icon containers - DRY principle */
+  .icon-container-sm {
+    @apply w-4 h-4;
+  }
+
+  .icon-container-md {
+    @apply w-5 h-5;
+  }
+
+  .icon-container-lg {
+    @apply w-6 h-6;
+  }
+
+  .icon-bg-blue {
+    @apply p-2 bg-blue-500/10 rounded-md text-blue-400;
+  }
+
+  .icon-bg-green {
+    @apply p-2 bg-green-500/10 rounded-md text-green-400;
+  }
+
+  .icon-bg-cyan {
+    @apply p-2 bg-cyan-500/10 rounded-md text-cyan-400;
+  }
+
+  /* Interactive element base */
+  .interactive-item {
+    @apply flex items-center gap-4 p-3 rounded-lg hover:bg-slate-800/40 border border-transparent hover:border-slate-700 transition-all;
+  }
+
+  /* Responsive padding */
+  .section-padding {
+    @apply px-4 sm:px-6 lg:px-8 py-12;
+  }
+
+  .container-max {
+    @apply max-w-7xl mx-auto;
+  }
+
+  /* Alert/Message Boxes */
+  .alert-error {
+    @apply rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-800 dark:text-red-400 text-sm;
+  }
+
+  .alert-success {
+    @apply rounded-lg bg-green-50 dark:bg-green-900/20 p-4 text-green-800 dark:text-green-400 text-sm;
+  }
+
+  .alert-info {
+    @apply rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 text-blue-800 dark:text-blue-400 text-sm;
+  }
+
+  /* Badge/Pill */
+  .badge-primary {
+    @apply inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium transition-colors;
+    @apply bg-cyan-900/50 text-cyan-300 hover:bg-cyan-800;
+  }
+
+  .badge-secondary {
+    @apply inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium transition-colors;
+    @apply bg-gray-600 text-gray-200 hover:bg-gray-500;
+  }
+
+  /* Card Classes */
+  .card-dark {
+    @apply rounded-lg border transition-all duration-200 bg-slate-900 border-slate-800 hover:border-cyan-900/50;
+  }
+
+  .card-light {
+    @apply rounded-lg border transition-all duration-200 bg-white border-gray-200 hover:border-gray-300;
+  }
+
+  /* Shadow utilities */
+  .shadow-glow-cyan {
+    @apply shadow-lg shadow-cyan-600/20;
+  }
+
+  .shadow-glow-blue {
+    @apply shadow-lg shadow-blue-600/20;
+  }
+
+  /* Scrollable area */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Form Label - DRY principle */
+  .form-label {
+    @apply block text-sm font-medium mb-2;
+  }
+
+  .form-label-icon {
+    @apply text-sm font-medium mb-1 flex items-center gap-2;
+  }
+
+  /* Auth Page Container */
+  .auth-container {
+    @apply min-h-screen flex items-center justify-center px-4 py-12;
+  }
+
+  /* Auth Card */
+  .auth-card {
+    @apply max-w-md w-full space-y-8;
+  }
+
+  /* Back Button Link */
+  .back-btn-link {
+    @apply inline-flex items-center gap-2 px-4 py-2 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded-lg text-cyan-300 font-mono text-sm transition-all duration-200 hover:shadow-lg hover:shadow-slate-900/30;
+  }
+
+  /* Icon with gap patterns */
+  .flex-gap-2 {
+    @apply flex items-center gap-2;
+  }
+
+  .inline-flex-gap-2 {
+    @apply inline-flex items-center gap-2;
+  }
+}
+
 @layer utilities {
   @keyframes blink {
     0%,
@@ -13,6 +238,7 @@
   .animate-blink {
     animation: blink 0.8s step-end infinite;
   }
+  
   @keyframes loading {
     0% {
       transform: translateX(-100%);
@@ -24,6 +250,18 @@
   .animate-loading-bar {
     animation: loading 0.8s ease infinite;
   }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  .animate-fade-in {
+    animation: fade-in 0.3s ease-in;
+  }
 }
 
 .reveal {
diff --git a/src/pages/CommunityPage.tsx b/src/pages/CommunityPage.tsx
index cbb79188..60e81d4f 100644
--- a/src/pages/CommunityPage.tsx
+++ b/src/pages/CommunityPage.tsx
@@ -13,7 +13,7 @@ export const CommunityPage = () => {
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <button
             onClick={() => navigate(-1)}
-            className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded-lg text-cyan-300 font-mono text-sm transition-all duration-200 hover:shadow-lg hover:shadow-slate-900/30"
+            className="back-btn-link"
           >
             <ArrowLeft className="w-4 h-4" />
             back
diff --git a/src/pages/CreateCommunityPage.tsx b/src/pages/CreateCommunityPage.tsx
index a66517b2..079ddd73 100644
--- a/src/pages/CreateCommunityPage.tsx
+++ b/src/pages/CreateCommunityPage.tsx
@@ -8,9 +8,9 @@ const CreateCommunityPage = () => {
     <div className="min-h-screen bg-slate-950">
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="mb-4">
-          <Link 
+          <Link
             to="/communities"
-            className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded-lg text-cyan-300 font-mono text-sm transition-all duration-200 hover:shadow-lg hover:shadow-slate-900/30"
+            className="back-btn-link"
           >
             <ArrowLeft className="w-4 h-4" />
             back to communities
diff --git a/src/pages/CreateEventPage.tsx b/src/pages/CreateEventPage.tsx
index bb0798fb..30cb5358 100644
--- a/src/pages/CreateEventPage.tsx
+++ b/src/pages/CreateEventPage.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useCreateEvent } from '../hooks/useEvents';
 import { Calendar, MapPin, Users, Clock, Image, Hash, Monitor } from 'lucide-react'
-import {showError,showSuccess} from "../utils/toast";
+import { showError, showSuccess } from "../utils/toast";
 
 export default function CreateEventPage() {
   const [formData, setFormData] = useState({
@@ -17,19 +17,19 @@ export default function CreateEventPage() {
     image_url: '',
     tags: '' // Comma-separated tags
   })
-  
+
   const navigate = useNavigate();
   const { mutate, isPending } = useCreateEvent();
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    
+
     // Validate required fields
     if (!formData.title || !formData.description || !formData.event_date || !formData.time) {
       showError('Please fill in all required fields');
       return;
     }
-    
+
     // Prepare event data
     const eventData = {
       title: formData.title,
@@ -43,7 +43,7 @@ export default function CreateEventPage() {
       tags: formData.tags.split(',').map(tag => tag.trim()).filter(tag => tag),
       community_id: undefined // Optional community association
     };
-    
+
     mutate(eventData, {
       onSuccess: (data) => {
         showSuccess('Event created successfully!');
@@ -75,14 +75,14 @@ export default function CreateEventPage() {
     <div className="container mx-auto px-4 py-8">
       <div className="max-w-2xl mx-auto">
         <h1 className="text-3xl font-bold mb-8">Create New Event</h1>
-        
+
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="bg-slate-800 border border-slate-700 rounded-lg p-6">
             <h2 className="text-xl font-semibold mb-4">Event Information</h2>
-            
+
             <div className="space-y-4">
               <div>
-                <label htmlFor="title" className="block text-sm font-medium mb-2">
+                <label htmlFor="title" className="form-label">
                   Event Title *
                 </label>
                 <input
@@ -92,13 +92,13 @@ export default function CreateEventPage() {
                   value={formData.title}
                   onChange={handleChange}
                   required
-                  className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                  className="input-slate"
                   placeholder="Enter event title"
                 />
               </div>
-              
+
               <div>
-                <label htmlFor="description" className="block text-sm font-medium mb-2">
+                <label htmlFor="description" className="form-label">
                   Description *
                 </label>
                 <textarea
@@ -108,20 +108,20 @@ export default function CreateEventPage() {
                   onChange={handleChange}
                   required
                   rows={3}
-                  className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                  className="input-slate"
                   placeholder="Brief description of your event"
                 />
               </div>
             </div>
           </div>
-          
+
           <div className="bg-slate-800 border border-slate-700 rounded-lg p-6">
             <h2 className="text-xl font-semibold mb-4">Event Details</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-4">
               <div>
-                <label htmlFor="event_date" className="block text-sm font-medium mb-2">
-                  <Calendar className="w-4 h-4 inline mr-1" />
+                <label htmlFor="event_date" className="form-label-icon">
+                  <Calendar className="w-4 h-4" />
                   Date *
                 </label>
                 <input
@@ -131,13 +131,13 @@ export default function CreateEventPage() {
                   value={formData.event_date}
                   onChange={handleChange}
                   required
-                  className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                  className="input-slate"
                 />
               </div>
-              
+
               <div>
-                <label htmlFor="time" className="block text-sm font-medium mb-2">
-                  <Clock className="w-4 h-4 inline mr-1" />
+                <label htmlFor="time" className="form-label-icon">
+                  <Clock className="w-4 h-4" />
                   Time *
                 </label>
                 <input
@@ -147,11 +147,11 @@ export default function CreateEventPage() {
                   value={formData.time}
                   onChange={handleChange}
                   required
-                  className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                  className="input-slate"
                 />
               </div>
             </div>
-            
+
             <div className="mt-4 flex items-center gap-3">
               <input
                 type="checkbox"
@@ -166,11 +166,11 @@ export default function CreateEventPage() {
                 Virtual Event
               </label>
             </div>
-            
+
             {!formData.is_virtual && (
               <div className="mt-4">
-                <label htmlFor="location" className="block text-sm font-medium mb-2">
-                  <MapPin className="w-4 h-4 inline mr-1" />
+                <label htmlFor="location" className="form-label-icon">
+                  <MapPin className="w-4 h-4" />
                   Location *
                 </label>
                 <input
@@ -180,16 +180,16 @@ export default function CreateEventPage() {
                   value={formData.location}
                   onChange={handleChange}
                   required={!formData.is_virtual}
-                  className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                  className="input-slate"
                   placeholder="Event location or venue"
                 />
               </div>
             )}
-            
+
             {formData.is_virtual && (
               <div className="mt-4">
-                <label htmlFor="meeting_link" className="block text-sm font-medium mb-2">
-                  <Monitor className="w-4 h-4 inline mr-1" />
+                <label htmlFor="meeting_link" className="form-label-icon">
+                  <Monitor className="w-4 h-4" />
                   Meeting Link
                 </label>
                 <input
@@ -198,15 +198,15 @@ export default function CreateEventPage() {
                   name="meeting_link"
                   value={formData.meeting_link}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                  className="input-slate"
                   placeholder="https://zoom.us/j/..."
                 />
               </div>
             )}
-            
+
             <div className="mt-4">
-              <label htmlFor="max_attendees" className="block text-sm font-medium mb-2">
-                <Users className="w-4 h-4 inline mr-1" />
+              <label htmlFor="max_attendees" className="form-label-icon">
+                <Users className="w-4 h-4" />
                 Maximum Attendees
               </label>
               <input
@@ -216,14 +216,14 @@ export default function CreateEventPage() {
                 value={formData.max_attendees}
                 onChange={handleChange}
                 min="1"
-                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                className="input-slate"
                 placeholder="Leave empty for unlimited"
               />
             </div>
-            
+
             <div className="mt-4">
-              <label htmlFor="image_url" className="block text-sm font-medium mb-2">
-                <Image className="w-4 h-4 inline mr-1" />
+              <label htmlFor="image_url" className="form-label-icon">
+                <Image className="w-4 h-4" />
                 Event Image URL
               </label>
               <input
@@ -232,14 +232,14 @@ export default function CreateEventPage() {
                 name="image_url"
                 value={formData.image_url}
                 onChange={handleChange}
-                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                className="input-slate"
                 placeholder="https://example.com/event-image.jpg"
               />
             </div>
-            
+
             <div className="mt-4">
-              <label htmlFor="tags" className="block text-sm font-medium mb-2">
-                <Hash className="w-4 h-4 inline mr-1" />
+              <label htmlFor="tags" className="form-label-icon">
+                <Hash className="w-4 h-4" />
                 Tags (comma separated)
               </label>
               <input
@@ -248,24 +248,24 @@ export default function CreateEventPage() {
                 name="tags"
                 value={formData.tags}
                 onChange={handleChange}
-                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:border-cyan-500"
+                className="input-slate"
                 placeholder="react,workshop,javascript"
               />
             </div>
           </div>
-          
+
           <div className="flex gap-4">
             <button
               type="submit"
               disabled={isPending}
-              className="bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-3 rounded-lg font-medium transition-colors disabled:opacity-50"
+              className="btn-primary-dark px-6 py-3"
             >
               {isPending ? 'Creating...' : 'Create Event'}
             </button>
             <button
               type="button"
               onClick={() => window.history.back()}
-              className="border border-slate-600 hover:border-slate-500 text-slate-300 px-6 py-3 rounded-lg font-medium transition-colors"
+              className="btn-secondary-dark px-6 py-3"
               disabled={isPending}
             >
               Cancel
diff --git a/src/pages/CreatePostPage.tsx b/src/pages/CreatePostPage.tsx
index c7935bc7..c2642ece 100644
--- a/src/pages/CreatePostPage.tsx
+++ b/src/pages/CreatePostPage.tsx
@@ -7,9 +7,9 @@ const CreatePostPage = () => {
     <div className="min-h-screen bg-slate-950">
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="mb-2">
-          <Link 
+          <Link
             to="/"
-            className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded-lg text-cyan-300 font-mono text-sm transition-all duration-200 hover:shadow-lg hover:shadow-slate-900/30"
+            className="back-btn-link"
           >
             <ArrowLeft className="w-4 h-4" />
             back to home
diff --git a/src/pages/ForgotPasswordPage.tsx b/src/pages/ForgotPasswordPage.tsx
index 9bea66e0..f32d66f9 100644
--- a/src/pages/ForgotPasswordPage.tsx
+++ b/src/pages/ForgotPasswordPage.tsx
@@ -34,8 +34,8 @@ export default function ForgotPasswordPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center px-4 py-12">
-      <div className="max-w-md w-full space-y-8">
+    <div className="auth-container">
+      <div className="auth-card">
         <div>
           <h2 className="mt-6 text-center text-3xl font-extrabold">
             Reset your password
@@ -47,20 +47,20 @@ export default function ForgotPasswordPage() {
 
         <div className="mt-8 space-y-6">
           {error && (
-            <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
-              <p className="text-sm text-red-800 dark:text-red-400">{error}</p>
+            <div className="alert-error">
+              <p>{error}</p>
             </div>
           )}
 
           {success && (
-            <div className="rounded-md bg-green-50 dark:bg-green-900/20 p-4">
-              <p className="text-sm text-green-800 dark:text-green-400">{success}</p>
+            <div className="alert-success">
+              <p>{success}</p>
             </div>
           )}
 
           <form onSubmit={handleResetPassword} className="space-y-4">
             <div>
-              <label htmlFor="email" className="block text-sm font-medium mb-2">
+              <label htmlFor="email" className="form-label">
                 Email address
               </label>
               <input
@@ -71,7 +71,7 @@ export default function ForgotPasswordPage() {
                 required
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="appearance-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                className="input-light dark:input-dark"
                 placeholder="you@example.com"
               />
             </div>
@@ -79,7 +79,7 @@ export default function ForgotPasswordPage() {
             <button
               type="submit"
               disabled={loading}
-              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full btn-primary-light dark:btn-primary-dark"
             >
               {loading ? "Sending..." : "Send reset link"}
             </button>
@@ -88,7 +88,7 @@ export default function ForgotPasswordPage() {
           <div className="text-center">
             <Link
               to="/login"
-              className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+              className="inline-flex-gap-2 text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
             >
               <ArrowLeft className="w-4 h-4" />
               Back to sign in
diff --git a/src/pages/PostPage.tsx b/src/pages/PostPage.tsx
index aea3af65..ca8fbb92 100644
--- a/src/pages/PostPage.tsx
+++ b/src/pages/PostPage.tsx
@@ -23,7 +23,7 @@ const PostPage = () => {
         >
           <button
             onClick={() => navigate(-1)}
-            className="flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-mono text-sm transition px-4 py-2 rounded-lg"
+            className="flex-gap-2 text-cyan-400 hover:text-cyan-300 font-mono text-sm transition px-4 py-2 rounded-lg"
             style={{
               background: 'rgba(15,23,42,0.5)',
               boxShadow: '0 2px 12px 0 rgba(0,0,0,0.08)',
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index e00e784c..2cf3caaa 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { User, Mail, Calendar, Shield, Camera, Edit3, Globe, Github, Twitter } from "lucide-react";
 import { format } from "date-fns";
 import { useState } from "react";
-import {showSuccess, showError} from "../utils/toast";
+import { showSuccess, showError } from "../utils/toast";
 
 export default function ProfilePage() {
   const { user, signOut, updateProfile } = useAuth();
@@ -25,12 +25,12 @@ export default function ProfilePage() {
   }
 
   const handleSignOut = async () => {
-    try{
+    try {
       await signOut();
       showSuccess("Signed Out Successfully");
       navigate("/login");
     }
-    catch{
+    catch {
       showError("Failed to Sign Out");
     }
   };
@@ -53,10 +53,10 @@ export default function ProfilePage() {
 
   const handleSaveProfile = async () => {
     if (!user) return;
-    
+
     setIsUpdating(true);
     setUpdateError(null);
-    
+
     try {
       // Handle avatar upload if a new file is selected
       let avatarUrl = user.user_metadata?.avatar_url || "";
@@ -65,7 +65,7 @@ export default function ProfilePage() {
         // For demo mode, we'll use a data URL
         avatarUrl = URL.createObjectURL(avatarFile);
       }
-      
+
       const { error } = await updateProfile({
         full_name: fullName,
         bio: bio,
@@ -75,7 +75,7 @@ export default function ProfilePage() {
         twitter: twitter,
         avatar_url: avatarUrl
       });
-      
+
       if (error) {
         setUpdateError(error.message);
         showError("Failed to update profile");
@@ -100,7 +100,7 @@ export default function ProfilePage() {
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
           {/* Header */}
           <div className="bg-gradient-to-r from-blue-600 via-blue-500 to-cyan-500 h-32"></div>
-          
+
           {/* Profile content */}
           <div className="px-8 pb-8">
             <div className="relative -mt-16 mb-6 flex justify-between items-start">
@@ -140,7 +140,7 @@ export default function ProfilePage() {
               </div>
               <button
                 onClick={handleEditToggle}
-                className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
+                className="flex-gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
               >
                 <Edit3 className="w-4 h-4" />
                 {isEditing ? "Cancel" : "Edit Profile"}
@@ -161,26 +161,26 @@ export default function ProfilePage() {
 
                   <div className="space-y-4">
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <label className="form-label text-gray-700 dark:text-gray-300">
                         Full Name
                       </label>
                       <input
                         type="text"
                         value={fullName}
                         onChange={(e) => setFullName(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                        className="input-light dark:input-dark"
                         placeholder="Enter your full name"
                       />
                     </div>
 
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <label className="form-label text-gray-700 dark:text-gray-300">
                         Bio
                       </label>
                       <textarea
                         value={bio}
                         onChange={(e) => setBio(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                        className="input-light dark:input-dark"
                         placeholder="Tell us about yourself"
                         rows={3}
                       />
@@ -188,20 +188,20 @@ export default function ProfilePage() {
 
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        <label className="form-label text-gray-700 dark:text-gray-300">
                           Location
                         </label>
                         <input
                           type="text"
                           value={location}
                           onChange={(e) => setLocation(e.target.value)}
-                          className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                          className="input-light dark:input-dark"
                           placeholder="City, Country"
                         />
                       </div>
 
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 flex items-center gap-2">
+                        <label className="form-label-icon text-gray-700 dark:text-gray-300">
                           <Globe className="w-4 h-4" />
                           Website
                         </label>
@@ -209,7 +209,7 @@ export default function ProfilePage() {
                           type="text"
                           value={website}
                           onChange={(e) => setWebsite(e.target.value)}
-                          className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                          className="input-light dark:input-dark"
                           placeholder="https://yourwebsite.com"
                         />
                       </div>
@@ -217,7 +217,7 @@ export default function ProfilePage() {
 
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 flex items-center gap-2">
+                        <label className="form-label-icon text-gray-700 dark:text-gray-300">
                           <Github className="w-4 h-4" />
                           GitHub
                         </label>
@@ -225,13 +225,13 @@ export default function ProfilePage() {
                           type="text"
                           value={github}
                           onChange={(e) => setGithub(e.target.value)}
-                          className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                          className="input-light dark:input-dark"
                           placeholder="GitHub username"
                         />
                       </div>
 
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 flex items-center gap-2">
+                        <label className="form-label-icon text-gray-700 dark:text-gray-300">
                           <Twitter className="w-4 h-4" />
                           Twitter/X
                         </label>
@@ -239,7 +239,7 @@ export default function ProfilePage() {
                           type="text"
                           value={twitter}
                           onChange={(e) => setTwitter(e.target.value)}
-                          className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                          className="input-light dark:input-dark"
                           placeholder="Twitter/X username"
                         />
                       </div>
@@ -247,8 +247,8 @@ export default function ProfilePage() {
                   </div>
 
                   {updateError && (
-                    <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
-                      <p className="text-sm text-red-800 dark:text-red-500">{updateError}</p>
+                    <div className="alert-error">
+                      <p>{updateError}</p>
                     </div>
                   )}
 
@@ -256,14 +256,14 @@ export default function ProfilePage() {
                     <button
                       onClick={handleSaveProfile}
                       disabled={isUpdating}
-                      className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition disabled:opacity-50"
+                      className="flex-1 btn-success"
                     >
                       {isUpdating ? "Saving..." : "Save Changes"}
                     </button>
                     <button
                       onClick={handleEditToggle}
                       disabled={isUpdating}
-                      className="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition disabled:opacity-50"
+                      className="flex-1 btn-secondary-light dark:btn-secondary-dark"
                     >
                       Cancel
                     </button>
@@ -317,7 +317,7 @@ export default function ProfilePage() {
                         <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Social Links</p>
                         <div className="flex flex-wrap gap-2">
                           {user.user_metadata?.website && (
-                            <a 
+                            <a
                               href={user.user_metadata.website.startsWith('http') ? user.user_metadata.website : `https://${user.user_metadata.website}`}
                               target="_blank"
                               rel="noopener noreferrer"
@@ -328,7 +328,7 @@ export default function ProfilePage() {
                             </a>
                           )}
                           {user.user_metadata?.github && (
-                            <a 
+                            <a
                               href={`https://github.com/${user.user_metadata.github}`}
                               target="_blank"
                               rel="noopener noreferrer"
@@ -339,7 +339,7 @@ export default function ProfilePage() {
                             </a>
                           )}
                           {user.user_metadata?.twitter && (
-                            <a 
+                            <a
                               href={`https://twitter.com/${user.user_metadata.twitter}`}
                               target="_blank"
                               rel="noopener noreferrer"
diff --git a/src/pages/ResetPasswordPage.tsx b/src/pages/ResetPasswordPage.tsx
index 6cd152a3..2892a7f3 100644
--- a/src/pages/ResetPasswordPage.tsx
+++ b/src/pages/ResetPasswordPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, type FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
-import { supabase } from "../supabase-client";
+import { supabase, isBackendAvailable } from "../supabase-client";
+import { useAuth } from "../hooks/useAuth";
 import { Lock } from "lucide-react";
 import { showSuccess, showError } from "../utils/toast";
 
@@ -11,21 +12,38 @@ export default function ResetPasswordPage() {
   const [success, setSuccess] = useState("");
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
+  const { updatePassword } = useAuth();
 
   useEffect(() => {
+    // Skip session check in demo mode or when backend is unavailable
+    if (!isBackendAvailable || !supabase) {
+      showError("Password reset is not available in demo mode.");
+      setTimeout(() => navigate("/login"), 2000);
+      return;
+    }
+
     // Check if we have a valid session from the reset link
     supabase.auth.getSession().then(({ data: { session } }) => {
       if (!session) {
         showError("Invalid or expired reset link. Please request a new password reset.");
       }
+    }).catch((err) => {
+      console.error("Session check error:", err);
+      showError("Failed to verify reset link. Please try again.");
     });
-  }, []);
+  }, [navigate]);
 
   const handlePasswordUpdate = async (e: FormEvent) => {
     e.preventDefault();
     setError("");
     setSuccess("");
 
+    // Check if backend is available
+    if (!isBackendAvailable) {
+      setError("Password reset is not available in demo mode.");
+      return;
+    }
+
     if (password !== confirmPassword) {
       setError("Passwords do not match");
       return;
@@ -39,14 +57,13 @@ export default function ResetPasswordPage() {
     setLoading(true);
 
     try {
-      const { error } = await supabase.auth.updateUser({
-        password: password,
-      });
+      const { error } = await updatePassword(password);
 
       if (error) {
         setError(error.message);
       } else {
         showSuccess("Password updated successfully! Redirecting.");
+        setSuccess("Password updated successfully!");
 
         setTimeout(() => {
           navigate("/login");
@@ -54,6 +71,7 @@ export default function ResetPasswordPage() {
       }
     } catch (err) {
       console.error('Password update error:', err);
+      setError("Something went wrong. Please try again.");
       showError("Something went wrong. Please try again.");
     } finally {
       setLoading(false);
@@ -61,8 +79,8 @@ export default function ResetPasswordPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center px-4 py-12">
-      <div className="max-w-md w-full space-y-8">
+    <div className="auth-container">
+      <div className="auth-card">
         <div>
           <div className="flex justify-center">
             <div className="rounded-full bg-blue-100 dark:bg-blue-900/30 p-3">
@@ -79,20 +97,20 @@ export default function ResetPasswordPage() {
 
         <div className="mt-8 space-y-6">
           {error && (
-            <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
-              <p className="text-sm text-red-800 dark:text-red-400">{error}</p>
+            <div className="alert-error">
+              <p>{error}</p>
             </div>
           )}
 
           {success && (
-            <div className="rounded-md bg-green-50 dark:bg-green-900/20 p-4">
-              <p className="text-sm text-green-800 dark:text-green-400">{success}</p>
+            <div className="alert-success">
+              <p>{success}</p>
             </div>
           )}
 
           <form onSubmit={handlePasswordUpdate} className="space-y-4">
             <div>
-              <label htmlFor="password" className="block text-sm font-medium mb-2">
+              <label htmlFor="password" className="form-label">
                 New Password
               </label>
               <input
@@ -103,14 +121,13 @@ export default function ResetPasswordPage() {
                 required
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="appearance-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors duration-150
-                light:bg-white light:border-gray-300 light:placeholder-gray-400 light:text-gray-900 light:focus:border-blue-500 light:focus:ring-2 light:focus:ring-blue-200 light:shadow-sm"
+                className="input-light dark:input-dark"
                 placeholder="••••••••"
               />
             </div>
 
             <div>
-              <label htmlFor="confirmPassword" className="block text-sm font-medium mb-2">
+              <label htmlFor="confirmPassword" className="form-label">
                 Confirm New Password
               </label>
               <input
@@ -121,8 +138,7 @@ export default function ResetPasswordPage() {
                 required
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
-                className="appearance-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors duration-150
-                light:bg-white light:border-gray-300 light:placeholder-gray-400 light:text-gray-900 light:focus:border-blue-500 light:focus:ring-2 light:focus:ring-blue-200 light:shadow-sm"
+                className="input-light dark:input-dark"
                 placeholder="••••••••"
               />
             </div>
@@ -130,8 +146,7 @@ export default function ResetPasswordPage() {
             <button
               type="submit"
               disabled={loading}
-              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed
-              light:bg-blue-600 light:text-white light:hover:bg-blue-700 light:focus:ring-blue-200 light:shadow-md"
+              className="w-full btn-primary-light dark:btn-primary-dark"
             >
               {loading ? "Updating password..." : "Update password"}
             </button>