diff --git a/components/users/ImageCropper.tsx b/components/users/ImageCropper.tsx
new file mode 100644
index 00000000..d17d2d35
--- /dev/null
+++ b/components/users/ImageCropper.tsx
@@ -0,0 +1,190 @@
+'use client'
+
+import React, { useState, useCallback } from 'react'
+import Cropper from 'react-easy-crop'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Slider } from '@/components/ui/slider'
+import { Loader2, ZoomIn, ZoomOut } from 'lucide-react'
+
+interface ImageCropperProps {
+  image: string
+  onCropComplete: (croppedImage: Blob) => void
+  onCancel: () => void
+  isOpen: boolean
+}
+
+interface Area {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+type CroppedAreaPixels = Area
+
+export function ImageCropper({ image, onCropComplete, onCancel, isOpen }: ImageCropperProps) {
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<CroppedAreaPixels | null>(null)
+  const [processing, setProcessing] = useState(false)
+
+  const onCropChange = (crop: { x: number; y: number }) => {
+    setCrop(crop)
+  }
+
+  const onZoomChange = (zoom: number) => {
+    setZoom(zoom)
+  }
+
+  const onCropCompleteCallback = useCallback(
+    (croppedArea: Area, croppedAreaPixels: CroppedAreaPixels) => {
+      setCroppedAreaPixels(croppedAreaPixels)
+    },
+    []
+  )
+
+  const createImage = (url: string): Promise<HTMLImageElement> =>
+    new Promise((resolve, reject) => {
+      const image = new Image()
+      image.addEventListener('load', () => resolve(image))
+      image.addEventListener('error', (error) => reject(error))
+      image.src = url
+    })
+
+  const getCroppedImg = async (
+    imageSrc: string,
+    pixelCrop: CroppedAreaPixels
+  ): Promise<Blob> => {
+    const image = await createImage(imageSrc)
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+
+    if (!ctx) {
+      throw new Error('No 2d context')
+    }
+
+    // Set canvas size to the cropped area
+    canvas.width = pixelCrop.width
+    canvas.height = pixelCrop.height
+
+    // Draw the cropped image
+    ctx.drawImage(
+      image,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0,
+      0,
+      pixelCrop.width,
+      pixelCrop.height
+    )
+
+    // Convert canvas to blob
+    return new Promise((resolve, reject) => {
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob)
+        } else {
+          reject(new Error('Canvas is empty'))
+        }
+      }, 'image/jpeg', 0.95)
+    })
+  }
+
+  const handleCropConfirm = async () => {
+    if (!croppedAreaPixels) return
+
+    try {
+      setProcessing(true)
+      const croppedImage = await getCroppedImg(image, croppedAreaPixels)
+      onCropComplete(croppedImage)
+    } catch (error) {
+      console.error('Error cropping image:', error)
+    } finally {
+      setProcessing(false)
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>Crop Your Profile Picture</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Cropper Area */}
+          <div className="relative h-[400px] bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
+            <Cropper
+              image={image}
+              crop={crop}
+              zoom={zoom}
+              aspect={1}
+              cropShape="round"
+              showGrid={false}
+              onCropChange={onCropChange}
+              onZoomChange={onZoomChange}
+              onCropComplete={onCropCompleteCallback}
+            />
+          </div>
+
+          {/* Zoom Control */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium flex items-center gap-2">
+                <ZoomOut className="h-4 w-4" />
+                Zoom
+              </label>
+              <span className="text-sm text-muted-foreground">
+                {Math.round(zoom * 100)}%
+              </span>
+            </div>
+            <div className="flex items-center gap-4">
+              <ZoomOut className="h-4 w-4 text-muted-foreground" />
+              <Slider
+                value={[zoom]}
+                onValueChange={(value) => setZoom(value[0])}
+                min={1}
+                max={3}
+                step={0.1}
+                className="flex-1"
+              />
+              <ZoomIn className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </div>
+
+          {/* Instructions */}
+          <div className="text-sm text-muted-foreground text-center">
+            Drag to reposition • Use slider to zoom • Circular crop will be applied
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={onCancel}
+            disabled={processing}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCropConfirm}
+            disabled={processing}
+            className="gap-2"
+          >
+            {processing ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Processing...
+              </>
+            ) : (
+              'Apply Crop'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/users/ProfilePictureUpload.tsx b/components/users/ProfilePictureUpload.tsx
new file mode 100644
index 00000000..103c8f9e
--- /dev/null
+++ b/components/users/ProfilePictureUpload.tsx
@@ -0,0 +1,239 @@
+'use client'
+
+import React, { useState, useRef } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Loader2, X, AlertCircle, Crop } from 'lucide-react'
+import { createClient } from '@/lib/supabase/client'
+import { ImageCropper } from './ImageCropper'
+
+interface ProfilePictureUploadProps {
+  currentAvatarUrl?: string
+  userId: string
+  firstName?: string
+  lastName?: string
+  onUploadComplete: (avatarUrl: string) => void
+}
+
+export function ProfilePictureUpload({
+  currentAvatarUrl,
+  userId,
+  firstName,
+  lastName,
+  onUploadComplete
+}: ProfilePictureUploadProps) {
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(currentAvatarUrl || null)
+  const [selectedImage, setSelectedImage] = useState<string | null>(null)
+  const [showCropper, setShowCropper] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const getInitials = () => {
+    if (firstName && lastName) {
+      return `${firstName[0]}${lastName[0]}`
+    }
+    if (firstName) {
+      return firstName[0].toUpperCase()
+    }
+    return 'U'
+  }
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      setError('Please select an image file')
+      return
+    }
+
+    // Validate file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      setError('Image size must be less than 5MB')
+      return
+    }
+
+    // Read file and show cropper
+    const reader = new FileReader()
+    reader.onload = () => {
+      setSelectedImage(reader.result as string)
+      setShowCropper(true)
+      setError(null)
+    }
+    reader.readAsDataURL(file)
+
+    // Reset file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  const handleCropComplete = async (croppedImageBlob: Blob) => {
+    try {
+      setUploading(true)
+      setShowCropper(false)
+      setError(null)
+
+      const supabase = createClient()
+
+      // Create a unique file name
+      const fileName = `${userId}-${Date.now()}.jpg`
+      const filePath = `avatars/${fileName}`
+
+      // Upload cropped image to Supabase Storage
+      const { error: uploadError } = await supabase.storage
+        .from('profile-pictures')
+        .upload(filePath, croppedImageBlob, {
+          cacheControl: '3600',
+          upsert: true,
+          contentType: 'image/jpeg'
+        })
+
+      if (uploadError) {
+        throw uploadError
+      }
+
+      // Get public URL
+      const { data: { publicUrl } } = supabase.storage
+        .from('profile-pictures')
+        .getPublicUrl(filePath)
+
+      // Update preview
+      setPreviewUrl(publicUrl)
+
+      // Update profile in database
+      const { error: updateError } = await supabase
+        .from('profiles')
+        .update({ avatar_url: publicUrl })
+        .eq('id', userId)
+
+      if (updateError) {
+        throw updateError
+      }
+
+      // Notify parent component
+      onUploadComplete(publicUrl)
+    } catch (err) {
+      console.error('Error uploading avatar:', err)
+      setError(err instanceof Error ? err.message : 'Failed to upload image')
+    } finally {
+      setUploading(false)
+      setSelectedImage(null)
+    }
+  }
+
+  const handleCropCancel = () => {
+    setShowCropper(false)
+    setSelectedImage(null)
+  }
+
+  const handleRemoveAvatar = async () => {
+    try {
+      setUploading(true)
+      setError(null)
+
+      const supabase = createClient()
+
+      // Update profile to remove avatar
+      const { error: updateError } = await supabase
+        .from('profiles')
+        .update({ avatar_url: null })
+        .eq('id', userId)
+
+      if (updateError) {
+        throw updateError
+      }
+
+      setPreviewUrl(null)
+      onUploadComplete('')
+    } catch (err) {
+      console.error('Error removing avatar:', err)
+      setError(err instanceof Error ? err.message : 'Failed to remove image')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <Label>Profile Picture</Label>
+      
+      <div className="flex items-center gap-6">
+        <div className="relative">
+          <Avatar className="w-24 h-24">
+            {previewUrl && <AvatarImage src={previewUrl} alt="Profile picture" />}
+            <AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-blue-500 to-purple-600 text-white">
+              {getInitials()}
+            </AvatarFallback>
+          </Avatar>
+          
+          {uploading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full">
+              <Loader2 className="h-6 w-6 animate-spin text-white" />
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleFileSelect}
+            className="hidden"
+            disabled={uploading}
+          />
+          
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+            className="gap-2"
+          >
+            <Crop className="h-4 w-4" />
+            {previewUrl ? 'Change Picture' : 'Upload Picture'}
+          </Button>
+
+          {previewUrl && (
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={handleRemoveAvatar}
+              disabled={uploading}
+              className="gap-2 text-red-600 hover:text-red-700"
+            >
+              <X className="h-4 w-4" />
+              Remove Picture
+            </Button>
+          )}
+
+          <p className="text-xs text-muted-foreground">
+            JPG, PNG or GIF. Max 5MB.
+          </p>
+        </div>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Image Cropper Dialog */}
+      {selectedImage && (
+        <ImageCropper
+          image={selectedImage}
+          onCropComplete={handleCropComplete}
+          onCancel={handleCropCancel}
+          isOpen={showCropper}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/components/users/ProfileSettings.tsx b/components/users/ProfileSettings.tsx
index 19e4c46b..cfba03b1 100644
--- a/components/users/ProfileSettings.tsx
+++ b/components/users/ProfileSettings.tsx
@@ -31,6 +31,7 @@ import {
 } from 'lucide-react'
 import { ProfileUpdateData } from '@/types/profile'
 import { UsernameField } from '@/components/UsernameField'
+import { ProfilePictureUpload } from '@/components/users/ProfilePictureUpload'
 
 // Validation rules
 interface ValidationRule {
@@ -152,7 +153,7 @@ export function ProfileSettings() {
       setFormData({
         first_name: profile.first_name || '',
         last_name: profile.last_name || '',
-
+        avatar_url: profile.avatar_url || '',
         bio: profile.bio || '',
         phone: profile.phone || '',
         github_url: profile.github_url || '',
@@ -310,6 +311,22 @@ export function ProfileSettings() {
           <CardDescription>Your personal information and contact details</CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
+          {/* Profile Picture Upload */}
+          {profile && (
+            <ProfilePictureUpload
+              currentAvatarUrl={formData.avatar_url}
+              userId={profile.id}
+              firstName={formData.first_name}
+              lastName={formData.last_name}
+              onUploadComplete={(avatarUrl) => {
+                setFormData(prev => ({ ...prev, avatar_url: avatarUrl }))
+                setHasUnsavedChanges(false)
+              }}
+            />
+          )}
+
+          <Separator />
+
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="first_name" className="flex items-center gap-1">
diff --git a/components/users/ProfileView.tsx b/components/users/ProfileView.tsx
index 60f01c9b..42793139 100644
--- a/components/users/ProfileView.tsx
+++ b/components/users/ProfileView.tsx
@@ -5,7 +5,7 @@ import { useProfile } from '@/hooks/useProfile'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { ContributionGraph } from '@/components/ui/contribution-graph'
 import { useContributionGraph } from '@/hooks/useContributionGraph'
 import { 
@@ -206,6 +206,7 @@ export function ProfileView() {
         <CardHeader>
           <div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center">
             <Avatar className="w-20 h-20 sm:w-24 sm:h-24">
+              {profile.avatar_url && <AvatarImage src={profile.avatar_url} alt={getFullName()} />}
               <AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-blue-500 to-purple-600 text-white">
                 {getInitials()}
               </AvatarFallback>
diff --git a/lib/services/profile.ts b/lib/services/profile.ts
index 6d9c5346..c81bba3c 100644
--- a/lib/services/profile.ts
+++ b/lib/services/profile.ts
@@ -113,6 +113,7 @@ export class ProfileService {
     const fields = [
       'first_name',
       'last_name',
+      'avatar_url',
       'bio',
       'phone',
       'github_url',
@@ -134,6 +135,57 @@ export class ProfileService {
     return Math.round((filledFields.length / fields.length) * 100)
   }
 
+  // Upload avatar to storage
+  async uploadAvatar(userId: string, file: File): Promise<string> {
+    const supabase = this.getSupabaseClient()
+
+    // Create unique filename
+    const fileExt = file.name.split('.').pop()
+    const fileName = `${userId}-${Date.now()}.${fileExt}`
+    const filePath = `avatars/${fileName}`
+
+    // Upload file
+    const { error: uploadError } = await supabase.storage
+      .from('profile-pictures')
+      .upload(filePath, file, {
+        cacheControl: '3600',
+        upsert: true
+      })
+
+    if (uploadError) {
+      throw new Error(`Failed to upload avatar: ${uploadError.message}`)
+    }
+
+    // Get public URL
+    const { data: { publicUrl } } = supabase.storage
+      .from('profile-pictures')
+      .getPublicUrl(filePath)
+
+    return publicUrl
+  }
+
+  // Delete avatar from storage
+  async deleteAvatar(avatarUrl: string): Promise<void> {
+    const supabase = this.getSupabaseClient()
+
+    // Extract file path from URL
+    const urlParts = avatarUrl.split('/storage/v1/object/public/profile-pictures/')
+    if (urlParts.length < 2) {
+      throw new Error('Invalid avatar URL')
+    }
+
+    const filePath = urlParts[1]
+
+    const { error } = await supabase.storage
+      .from('profile-pictures')
+      .remove([filePath])
+
+    if (error) {
+      console.error('Error deleting avatar:', error)
+      // Don't throw error, just log it - we still want to clear the URL from profile
+    }
+  }
+
 
   // Get public profile (for viewing other users)
   async getPublicProfile(userId: string): Promise<Profile | null> {
diff --git a/package-lock.json b/package-lock.json
index 9ac5dde5..97bdb4d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,6 +70,7 @@
         "react": "^19.0.0",
         "react-collapse": "^5.1.1",
         "react-dom": "^19.0.0",
+        "react-easy-crop": "^5.5.3",
         "react-hot-toast": "^2.5.2",
         "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
@@ -14755,6 +14756,12 @@
         "svg-arc-to-cubic-bezier": "^3.0.0"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -16352,6 +16359,20 @@
       "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
       "license": "MIT"
     },
+    "node_modules/react-easy-crop": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.5.3.tgz",
+      "integrity": "sha512-iKwFTnAsq+IVuyF6N0Q3zjRx9DG1NMySkwWxVfM/xAOeHYH1vhvM+V2kFiq5HOIQGWouITjfltCx54mbDpMpmA==",
+      "license": "MIT",
+      "dependencies": {
+        "normalize-wheel": "^1.0.1",
+        "tslib": "^2.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      }
+    },
     "node_modules/react-hot-toast": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
diff --git a/package.json b/package.json
index 71ca1b6a..43272b9b 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,7 @@
     "react": "^19.0.0",
     "react-collapse": "^5.1.1",
     "react-dom": "^19.0.0",
+    "react-easy-crop": "^5.5.3",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
@@ -152,4 +153,4 @@
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   }
-}
\ No newline at end of file
+}
diff --git a/types/profile.ts b/types/profile.ts
index d9553716..8e41bee4 100644
--- a/types/profile.ts
+++ b/types/profile.ts
@@ -7,6 +7,7 @@ export interface Profile {
   first_name?: string
   last_name?: string
   bio?: string
+  avatar_url?: string
   
   // Contact information
   phone?: string
@@ -61,6 +62,7 @@ export interface ProfileUpdateData {
   last_name?: string
   username?: string
   bio?: string
+  avatar_url?: string
   phone?: string
   github_url?: string
   linkedin_url?: string