diff --git a/public/avatar.png b/public/avatar.png
new file mode 100644
index 0000000..ecc0704
Binary files /dev/null and b/public/avatar.png differ
diff --git a/public/avatar1.png b/public/avatar1.png
new file mode 100644
index 0000000..ccb205e
Binary files /dev/null and b/public/avatar1.png differ
diff --git a/public/cuida_copy-outline.png b/public/cuida_copy-outline.png
new file mode 100644
index 0000000..ea493c4
Binary files /dev/null and b/public/cuida_copy-outline.png differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 37d72f8..5b60c55 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -24,3 +24,14 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
diff --git a/src/app/leaderboard/loading.tsx b/src/app/leaderboard/loading.tsx
new file mode 100644
index 0000000..00a7ba2
--- /dev/null
+++ b/src/app/leaderboard/loading.tsx
@@ -0,0 +1,212 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Trophy, Award, Star } from 'lucide-react'
+
+const Leaderboard = () => {
+  const [timeframe, setTimeframe] = useState<'weekly' | 'monthly' | 'allTime'>(
+    'monthly'
+  )
+
+  const leaderboardData = {
+    organizations: [
+      {
+        rank: 1,
+        name: 'EcoThailand',
+        impact: 2500,
+        projects: 15,
+        rebaz: 45000,
+      },
+      {
+        rank: 2,
+        name: 'Clean Phangan',
+        impact: 2100,
+        projects: 12,
+        rebaz: 38000,
+      },
+      {
+        rank: 3,
+        name: 'Forest Guardian',
+        impact: 1800,
+        projects: 10,
+        rebaz: 32000,
+      },
+      {
+        rank: 4,
+        name: 'Ocean Care',
+        impact: 1500,
+        projects: 8,
+        rebaz: 28000,
+      },
+      {
+        rank: 5,
+        name: 'Green Future',
+        impact: 1200,
+        projects: 6,
+        rebaz: 25000,
+      },
+    ],
+    individuals: [
+      {
+        rank: 1,
+        name: 'Sarah L.',
+        impact: 850,
+        contributions: 25,
+        rebaz: 15000,
+      },
+      {
+        rank: 2,
+        name: 'Michael R.',
+        impact: 720,
+        contributions: 20,
+        rebaz: 12000,
+      },
+      {
+        rank: 3,
+        name: 'Emma T.',
+        impact: 650,
+        contributions: 18,
+        rebaz: 10000,
+      },
+      {
+        rank: 4,
+        name: 'James K.',
+        impact: 580,
+        contributions: 15,
+        rebaz: 8500,
+      },
+      {
+        rank: 5,
+        name: 'Lisa M.',
+        impact: 520,
+        contributions: 12,
+        rebaz: 7000,
+      },
+    ],
+  }
+
+  const getRankIcon = (rank: number) => {
+    switch (rank) {
+      case 1:
+        return <Trophy className='h-6 w-6 text-yellow-400' />
+      case 2:
+        return <Award className='h-6 w-6 text-gray-300' />
+      case 3:
+        return <Star className='h-6 w-6 text-amber-600' />
+      default:
+        return <span className='font-mono text-lg text-gray-400'>{rank}</span>
+    }
+  }
+
+  return (
+    <div className='min-h-screen bg-black'>
+      <div className='mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8'>
+        <h1 className='mb-12 text-6xl font-bold text-[#B4F481]'>
+          IMPACT LEADERBOARD
+        </h1>
+
+        {/* Timeframe Selection */}
+        <div className='mb-12 flex justify-center space-x-4'>
+          {[
+            { value: 'weekly', label: 'This Week' },
+            { value: 'monthly', label: 'This Month' },
+            { value: 'allTime', label: 'All Time' },
+          ].map(({ value, label }) => (
+            <button
+              key={value}
+              onClick={() => setTimeframe(value as typeof timeframe)}
+              className={`rounded-full px-6 py-2 text-sm font-medium transition-colors ${
+                timeframe === value
+                  ? 'bg-[#B4F481] text-black'
+                  : 'bg-gray-900 text-gray-400 hover:bg-gray-800'
+              }`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+
+        <div className='grid gap-12 md:grid-cols-2'>
+          {/* Organizations Leaderboard */}
+          <div>
+            <h2 className='mb-6 text-2xl font-bold text-white'>
+              Top Organizations
+            </h2>
+            <div className='overflow-hidden rounded-lg border border-gray-800 bg-gray-900/50'>
+              <div className='grid grid-cols-5 border-b border-gray-800 p-4 text-sm text-gray-400'>
+                <div className='col-span-2'>Organization</div>
+                <div className='text-right'>Impact</div>
+                <div className='text-right'>Projects</div>
+                <div className='text-right'>REBAZ</div>
+              </div>
+              {leaderboardData.organizations.map((org) => (
+                <div
+                  key={org.rank}
+                  className='grid grid-cols-5 items-center border-b border-gray-800 p-4 last:border-0 hover:bg-gray-800/50'
+                >
+                  <div className='col-span-2 flex items-center space-x-3'>
+                    <div className='flex w-8 justify-center'>
+                      {getRankIcon(org.rank)}
+                    </div>
+                    <span className='text-white'>{org.name}</span>
+                  </div>
+                  <div className='text-right text-[#B4F481]'>{org.impact}</div>
+                  <div className='text-right text-gray-300'>{org.projects}</div>
+                  <div className='text-right text-[#B4F481]'>
+                    {org.rebaz.toLocaleString()}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Individual Contributors Leaderboard */}
+          <div>
+            <h2 className='mb-6 text-2xl font-bold text-white'>
+              Top Contributors
+            </h2>
+            <div className='overflow-hidden rounded-lg border border-gray-800 bg-gray-900/50'>
+              <div className='grid grid-cols-5 border-b border-gray-800 p-4 text-sm text-gray-400'>
+                <div className='col-span-2'>Contributor</div>
+                <div className='text-right'>Impact</div>
+                <div className='text-right'>Actions</div>
+                <div className='text-right'>REBAZ</div>
+              </div>
+              {leaderboardData.individuals.map((individual) => (
+                <div
+                  key={individual.rank}
+                  className='grid grid-cols-5 items-center border-b border-gray-800 p-4 last:border-0 hover:bg-gray-800/50'
+                >
+                  <div className='col-span-2 flex items-center space-x-3'>
+                    <div className='flex w-8 justify-center'>
+                      {getRankIcon(individual.rank)}
+                    </div>
+                    <span className='text-white'>{individual.name}</span>
+                  </div>
+                  <div className='text-right text-[#B4F481]'>
+                    {individual.impact}
+                  </div>
+                  <div className='text-right text-gray-300'>
+                    {individual.contributions}
+                  </div>
+                  <div className='text-right text-[#B4F481]'>
+                    {individual.rebaz.toLocaleString()}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Original component: Leaderboard;
+// Auto-generated App Router page wrapper
+// Original file: Leaderboard.tsx
+// Generated: 2025-05-30T01:49:22.850Z
+
+export default function Page() {
+  return <Leaderboard />
+}
diff --git a/src/app/leaderboard/page.tsx b/src/app/leaderboard/page.tsx
index 00a7ba2..2532033 100644
--- a/src/app/leaderboard/page.tsx
+++ b/src/app/leaderboard/page.tsx
@@ -1,212 +1,5 @@
-'use client'
+import { LeaderboardMain } from '@/components/leaderboard/LeaderboardMain'
 
-import React, { useState } from 'react'
-import { Trophy, Award, Star } from 'lucide-react'
-
-const Leaderboard = () => {
-  const [timeframe, setTimeframe] = useState<'weekly' | 'monthly' | 'allTime'>(
-    'monthly'
-  )
-
-  const leaderboardData = {
-    organizations: [
-      {
-        rank: 1,
-        name: 'EcoThailand',
-        impact: 2500,
-        projects: 15,
-        rebaz: 45000,
-      },
-      {
-        rank: 2,
-        name: 'Clean Phangan',
-        impact: 2100,
-        projects: 12,
-        rebaz: 38000,
-      },
-      {
-        rank: 3,
-        name: 'Forest Guardian',
-        impact: 1800,
-        projects: 10,
-        rebaz: 32000,
-      },
-      {
-        rank: 4,
-        name: 'Ocean Care',
-        impact: 1500,
-        projects: 8,
-        rebaz: 28000,
-      },
-      {
-        rank: 5,
-        name: 'Green Future',
-        impact: 1200,
-        projects: 6,
-        rebaz: 25000,
-      },
-    ],
-    individuals: [
-      {
-        rank: 1,
-        name: 'Sarah L.',
-        impact: 850,
-        contributions: 25,
-        rebaz: 15000,
-      },
-      {
-        rank: 2,
-        name: 'Michael R.',
-        impact: 720,
-        contributions: 20,
-        rebaz: 12000,
-      },
-      {
-        rank: 3,
-        name: 'Emma T.',
-        impact: 650,
-        contributions: 18,
-        rebaz: 10000,
-      },
-      {
-        rank: 4,
-        name: 'James K.',
-        impact: 580,
-        contributions: 15,
-        rebaz: 8500,
-      },
-      {
-        rank: 5,
-        name: 'Lisa M.',
-        impact: 520,
-        contributions: 12,
-        rebaz: 7000,
-      },
-    ],
-  }
-
-  const getRankIcon = (rank: number) => {
-    switch (rank) {
-      case 1:
-        return <Trophy className='h-6 w-6 text-yellow-400' />
-      case 2:
-        return <Award className='h-6 w-6 text-gray-300' />
-      case 3:
-        return <Star className='h-6 w-6 text-amber-600' />
-      default:
-        return <span className='font-mono text-lg text-gray-400'>{rank}</span>
-    }
-  }
-
-  return (
-    <div className='min-h-screen bg-black'>
-      <div className='mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8'>
-        <h1 className='mb-12 text-6xl font-bold text-[#B4F481]'>
-          IMPACT LEADERBOARD
-        </h1>
-
-        {/* Timeframe Selection */}
-        <div className='mb-12 flex justify-center space-x-4'>
-          {[
-            { value: 'weekly', label: 'This Week' },
-            { value: 'monthly', label: 'This Month' },
-            { value: 'allTime', label: 'All Time' },
-          ].map(({ value, label }) => (
-            <button
-              key={value}
-              onClick={() => setTimeframe(value as typeof timeframe)}
-              className={`rounded-full px-6 py-2 text-sm font-medium transition-colors ${
-                timeframe === value
-                  ? 'bg-[#B4F481] text-black'
-                  : 'bg-gray-900 text-gray-400 hover:bg-gray-800'
-              }`}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
-
-        <div className='grid gap-12 md:grid-cols-2'>
-          {/* Organizations Leaderboard */}
-          <div>
-            <h2 className='mb-6 text-2xl font-bold text-white'>
-              Top Organizations
-            </h2>
-            <div className='overflow-hidden rounded-lg border border-gray-800 bg-gray-900/50'>
-              <div className='grid grid-cols-5 border-b border-gray-800 p-4 text-sm text-gray-400'>
-                <div className='col-span-2'>Organization</div>
-                <div className='text-right'>Impact</div>
-                <div className='text-right'>Projects</div>
-                <div className='text-right'>REBAZ</div>
-              </div>
-              {leaderboardData.organizations.map((org) => (
-                <div
-                  key={org.rank}
-                  className='grid grid-cols-5 items-center border-b border-gray-800 p-4 last:border-0 hover:bg-gray-800/50'
-                >
-                  <div className='col-span-2 flex items-center space-x-3'>
-                    <div className='flex w-8 justify-center'>
-                      {getRankIcon(org.rank)}
-                    </div>
-                    <span className='text-white'>{org.name}</span>
-                  </div>
-                  <div className='text-right text-[#B4F481]'>{org.impact}</div>
-                  <div className='text-right text-gray-300'>{org.projects}</div>
-                  <div className='text-right text-[#B4F481]'>
-                    {org.rebaz.toLocaleString()}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Individual Contributors Leaderboard */}
-          <div>
-            <h2 className='mb-6 text-2xl font-bold text-white'>
-              Top Contributors
-            </h2>
-            <div className='overflow-hidden rounded-lg border border-gray-800 bg-gray-900/50'>
-              <div className='grid grid-cols-5 border-b border-gray-800 p-4 text-sm text-gray-400'>
-                <div className='col-span-2'>Contributor</div>
-                <div className='text-right'>Impact</div>
-                <div className='text-right'>Actions</div>
-                <div className='text-right'>REBAZ</div>
-              </div>
-              {leaderboardData.individuals.map((individual) => (
-                <div
-                  key={individual.rank}
-                  className='grid grid-cols-5 items-center border-b border-gray-800 p-4 last:border-0 hover:bg-gray-800/50'
-                >
-                  <div className='col-span-2 flex items-center space-x-3'>
-                    <div className='flex w-8 justify-center'>
-                      {getRankIcon(individual.rank)}
-                    </div>
-                    <span className='text-white'>{individual.name}</span>
-                  </div>
-                  <div className='text-right text-[#B4F481]'>
-                    {individual.impact}
-                  </div>
-                  <div className='text-right text-gray-300'>
-                    {individual.contributions}
-                  </div>
-                  <div className='text-right text-[#B4F481]'>
-                    {individual.rebaz.toLocaleString()}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// Original component: Leaderboard;
-// Auto-generated App Router page wrapper
-// Original file: Leaderboard.tsx
-// Generated: 2025-05-30T01:49:22.850Z
-
-export default function Page() {
-  return <Leaderboard />
+export default function Leaderboard() {
+  return <LeaderboardMain type='buyer' />
 }
diff --git a/src/components/leaderboard/LeaderboardConfig.ts b/src/components/leaderboard/LeaderboardConfig.ts
new file mode 100644
index 0000000..defb1e8
--- /dev/null
+++ b/src/components/leaderboard/LeaderboardConfig.ts
@@ -0,0 +1,79 @@
+import {
+  buyerLeaderboardData,
+  sellerLeaderboardData,
+} from '@/mocks/leaderboardData'
+
+export type LeaderboardType = 'buyer' | 'seller'
+
+export interface LeaderboardColumn {
+  key: string
+  label: string
+  className?: string
+  format?: (value: string | number) => string
+}
+
+export interface LeaderboardData {
+  rank: number
+  user: string
+  [key: string]: string | number | boolean
+}
+
+export const LEADERBOARD_CONFIGS = {
+  buyer: {
+    title: 'Buyer Leaderboard',
+    columns: [
+      { key: 'rank', label: 'Rank', className: 'text-center' },
+      { key: 'user', label: 'User', className: 'text-center' },
+      {
+        key: 'ip_owned',
+        label: 'Number of IP owned',
+        className: 'text-center',
+      },
+      {
+        key: 'impact_score',
+        label: 'Total Impact Score',
+        className: 'text-center',
+      },
+      {
+        key: 'rebaz_spent',
+        label: '$REBAZ spent',
+        className: 'text-center',
+        format: (value) => `$${value}`,
+      },
+      {
+        key: 'staked',
+        label: 'Staked $REBAR',
+        className: '',
+        format: (value) => `$${value}`,
+      },
+    ] as LeaderboardColumn[],
+    data: buyerLeaderboardData,
+  },
+  seller: {
+    title: 'Seller Leaderboard',
+    columns: [
+      { key: 'rank', label: 'Rank', className: 'text-center' },
+      { key: 'user', label: 'User', className: 'text-center' },
+      { key: 'ip_created', label: 'IP Created', className: 'text-center' },
+      {
+        key: 'total_sales',
+        label: 'Total Impact Generated',
+        className: 'text-center',
+      },
+      {
+        key: 'rebaz_earned',
+        label: '$REBAZ earned',
+        className: 'text-center',
+        format: (value) => `$${value}`,
+      },
+      { key: 'ip_sold', label: 'Number of IP Sold', className: 'text-center' },
+      {
+        key: 'staked',
+        label: 'Staked $REBAR',
+        className: '',
+        format: (value) => `$${value}`,
+      },
+    ] as LeaderboardColumn[],
+    data: sellerLeaderboardData,
+  },
+}
diff --git a/src/components/leaderboard/LeaderboardMain.tsx b/src/components/leaderboard/LeaderboardMain.tsx
new file mode 100644
index 0000000..79be4b2
--- /dev/null
+++ b/src/components/leaderboard/LeaderboardMain.tsx
@@ -0,0 +1,99 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { userService, UserProfile } from '@/lib/userService'
+import { useWallet } from '@/context/WalletContext'
+import { UserProfile as UserProfileComponent } from './UserProfile'
+import { LeaderboardTable } from './LeaderboardTable'
+
+import {
+  LEADERBOARD_CONFIGS,
+  LeaderboardData,
+  LeaderboardType,
+} from './LeaderboardConfig'
+
+interface LeaderboardMainProps {
+  type?: LeaderboardType
+}
+
+export function LeaderboardMain({ type = 'buyer' }: LeaderboardMainProps) {
+  const { walletAddress } = useWallet()
+  const [userProfiles, setUserProfiles] = useState<UserProfile[]>([])
+  const [currentUserProfile, setCurrentUserProfile] =
+    useState<UserProfile | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const currentConfig = LEADERBOARD_CONFIGS[type]
+
+  useEffect(() => {
+    const fetchProfiles = async () => {
+      try {
+        // Extract wallet addresses from leaderboard data
+        const walletAddresses = currentConfig.data.map(
+          (item: LeaderboardData) => item.user
+        )
+
+        // Fetch profiles for all users in leaderboard
+        const profiles =
+          await userService.getLeaderboardProfiles(walletAddresses)
+        console.log('profiles', profiles)
+        setUserProfiles(profiles)
+
+        // Fetch current user profile if wallet is connected
+        if (walletAddress) {
+          const currentProfile = await userService.getUserProfile(walletAddress)
+          setCurrentUserProfile(currentProfile)
+        }
+      } catch (error) {
+        console.error('Error fetching profiles:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchProfiles()
+  }, [walletAddress, type, currentConfig.data])
+
+  const getUserProfile = (userAddress: string) => {
+    return userProfiles.find(
+      (profile) => profile.wallet_address === userAddress
+    )
+  }
+
+  const getAvatarUrl = (userAddress: string) => {
+    const profile = getUserProfile(userAddress)
+    if (profile) {
+      return userService.getAvatarUrl(profile)
+    }
+    return null
+  }
+
+  if (loading) {
+    return (
+      <div className='min-h-screen bg-[#F8F4E4] p-4'>
+        <div className='mx-auto flex max-w-screen-2xl items-center justify-center py-10'>
+          <div className='text-lg text-black'>Loading leaderboard...</div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='min-h-screen bg-[#F8F4E4] p-4'>
+      <div className='mx-auto w-full max-w-fit'>
+        <div className='flex flex-col items-center gap-3 rounded-2xl bg-white px-3 pt-3 md:flex-row md:items-start md:pr-0 md:pl-3'>
+          <UserProfileComponent
+            currentUserProfile={currentUserProfile}
+            walletAddress={walletAddress}
+          />
+
+          <LeaderboardTable
+            columns={currentConfig.columns}
+            data={currentConfig.data}
+            getAvatarUrl={getAvatarUrl}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/leaderboard/LeaderboardTable.tsx b/src/components/leaderboard/LeaderboardTable.tsx
new file mode 100644
index 0000000..b4ade61
--- /dev/null
+++ b/src/components/leaderboard/LeaderboardTable.tsx
@@ -0,0 +1,81 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { UserAvatar } from './UserAvatar'
+import { LeaderboardColumn, LeaderboardData } from './LeaderboardConfig'
+
+interface LeaderboardTableProps {
+  columns: LeaderboardColumn[]
+  data: LeaderboardData[]
+  getAvatarUrl: (userAddress: string) => string | null
+}
+
+export function LeaderboardTable({
+  columns,
+  data,
+  getAvatarUrl,
+}: LeaderboardTableProps) {
+  return (
+    <div className='w-full max-w-full overflow-hidden'>
+      <div className='scrollbar-hide w-full max-w-full overflow-x-scroll'>
+        <div className='max-w-full min-w-7xl p-0 2xl:w-full'>
+          <Card className='h-full min-h-full rounded-[16px] border-none bg-white p-0'>
+            <CardContent className='p-0'>
+              {/* Header */}
+              <div className='rounded-xl bg-[#272727] text-white'>
+                <div
+                  className={`grid gap-4 p-4 text-sm font-semibold uppercase ${
+                    columns.length === 7 ? 'grid-cols-7' : 'grid-cols-6'
+                  }`}
+                >
+                  {columns.map((column) => (
+                    <div key={column.key} className={column.className}>
+                      {column.label}
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {/* Leaderboard Rows */}
+              <div className='mt-2 flex flex-col gap-2'>
+                {data.map((item) => {
+                  const avatarUrl = getAvatarUrl(item.user)
+                  return (
+                    <div
+                      key={item.rank}
+                      className={`grid items-center gap-4 rounded-xl bg-[#D9E0EC33] p-1.5 text-black transition-all duration-100 hover:bg-gray-50 hover:outline hover:outline-black ${columns.length === 7 ? 'grid-cols-14' : 'grid-cols-12'}`}
+                    >
+                      {/* Rank */}
+                      <div className='bg-[#ECF9F033] text-center text-lg font-bold text-black'>
+                        {item.rank}
+                      </div>
+                      {/* User */}
+                      <div className='col-span-3 col-start-2 flex items-center gap-2 text-black'>
+                        <UserAvatar
+                          avatarUrl={avatarUrl}
+                          alt='Avatar'
+                          size='md'
+                          className='min-h-[40px] min-w-[40px] p-0'
+                        />
+                        <span className='truncate text-sm font-semibold'>
+                          {item.user}
+                        </span>
+                      </div>
+                      {columns.slice(2).map((column) => (
+                        <div
+                          key={column.key}
+                          className={`text-center font-semibold ${columns.length === 7 ? 'col-span-2' : 'col-span-2'}`}
+                        >
+                          {column.format
+                            ? column.format(item[column.key] as string | number)
+                            : (item[column.key] as string | number)}
+                        </div>
+                      ))}
+                    </div>
+                  )
+                })}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/leaderboard/LeaderboardToggle.tsx b/src/components/leaderboard/LeaderboardToggle.tsx
new file mode 100644
index 0000000..8a9b435
--- /dev/null
+++ b/src/components/leaderboard/LeaderboardToggle.tsx
@@ -0,0 +1,38 @@
+import { LeaderboardType } from './LeaderboardConfig'
+
+interface LeaderboardToggleProps {
+  currentType: LeaderboardType
+  onTypeChange: (type: LeaderboardType) => void
+}
+
+export function LeaderboardToggle({
+  currentType,
+  onTypeChange,
+}: LeaderboardToggleProps) {
+  return (
+    <div className='mb-6 flex items-center justify-center'>
+      <div className='flex rounded-lg bg-gray-200 p-1'>
+        <button
+          onClick={() => onTypeChange('buyer')}
+          className={`rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+            currentType === 'buyer'
+              ? 'bg-white text-gray-900 shadow-sm'
+              : 'text-gray-500 hover:text-gray-900'
+          }`}
+        >
+          Buyer Leaderboard
+        </button>
+        <button
+          onClick={() => onTypeChange('seller')}
+          className={`rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+            currentType === 'seller'
+              ? 'bg-white text-gray-900 shadow-sm'
+              : 'text-gray-500 hover:text-gray-900'
+          }`}
+        >
+          Seller Leaderboard
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/leaderboard/UserAvatar.tsx b/src/components/leaderboard/UserAvatar.tsx
new file mode 100644
index 0000000..90d58f8
--- /dev/null
+++ b/src/components/leaderboard/UserAvatar.tsx
@@ -0,0 +1,49 @@
+import Image from 'next/image'
+
+interface UserAvatarProps {
+  avatarUrl?: string | null
+  alt?: string
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeClasses = {
+  sm: 'h-8 w-8',
+  md: 'h-[40px] w-[40px]',
+  lg: 'h-[120px] w-[120px]',
+}
+
+export function UserAvatar({
+  avatarUrl,
+  alt = 'User Avatar',
+  size = 'md',
+  className = '',
+}: UserAvatarProps) {
+  const baseClasses = `${sizeClasses[size]} overflow-hidden rounded-xl ${className}`
+
+  if (avatarUrl) {
+    return (
+      <div className={baseClasses}>
+        <Image
+          src={avatarUrl}
+          alt={alt}
+          width={size === 'lg' ? 120 : size === 'md' ? 40 : 32}
+          height={size === 'lg' ? 120 : size === 'md' ? 40 : 32}
+          className='h-full w-full rounded-[10px] border border-[#101828] object-cover'
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={`${baseClasses} flex items-center justify-center`}>
+      <Image
+        src='/avatar.png'
+        alt={alt}
+        width={size === 'lg' ? 120 : size === 'md' ? 40 : 32}
+        height={size === 'lg' ? 120 : size === 'md' ? 40 : 32}
+        className='h-full w-full object-cover'
+      />
+    </div>
+  )
+}
diff --git a/src/components/leaderboard/UserProfile.tsx b/src/components/leaderboard/UserProfile.tsx
new file mode 100644
index 0000000..f4e2145
--- /dev/null
+++ b/src/components/leaderboard/UserProfile.tsx
@@ -0,0 +1,110 @@
+import { Card, CardContent } from '@/components/ui/card'
+import Image from 'next/image'
+import { UserAvatar } from './UserAvatar'
+import { userService, UserProfile as UserProfileType } from '@/lib/userService'
+
+interface UserProfileProps {
+  currentUserProfile: UserProfileType | null
+  walletAddress: string | null
+  portfolioData?: {
+    position: number
+    ipCollection: number
+    ipSold: number
+    totalFunding: number
+    referrals: number
+  }
+}
+
+export function UserProfile({
+  currentUserProfile,
+  walletAddress,
+  portfolioData = {
+    position: 7,
+    ipCollection: 32,
+    ipSold: 19,
+    totalFunding: 300,
+    referrals: 29,
+  },
+}: UserProfileProps) {
+  const avatarUrl = currentUserProfile
+    ? userService.getAvatarUrl(currentUserProfile)
+    : null
+
+  return (
+    <div className='h-fit w-full max-w-[404px] 2xl:min-w-90'>
+      <Card className='h-full min-h-full rounded-[16px] border-[#101828] bg-[#272727] p-0 text-white'>
+        <CardContent className='p-6'>
+          <h2 className='mb-6 text-center text-2xl font-bold'>My Profile</h2>
+
+          {/* Profile Avatar */}
+          <div className='mb-6 flex items-center justify-center'>
+            <div className='flex flex-col items-center justify-center rounded-[15px] border border-[#101828] p-2'>
+              <UserAvatar
+                avatarUrl={avatarUrl}
+                alt='Profile Avatar'
+                size='lg'
+                className='rounded-[15px] border border-[#101828]'
+              />
+            </div>
+          </div>
+
+          {/* Username */}
+          <div className='mb-4 xl:mb-12'>
+            <div className='flex items-center justify-center gap-2'>
+              <span className='truncate font-mono text-lg'>
+                {walletAddress || '0xdafea492d9c673...'}
+              </span>
+              <Image
+                src='/cuida_copy-outline.png'
+                alt='Copy'
+                width={20}
+                height={20}
+                className='h-5 w-5 cursor-pointer'
+                onClick={() => {
+                  if (walletAddress) {
+                    navigator.clipboard.writeText(walletAddress)
+                  }
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Portfolio Overview */}
+          <div className='w-full'>
+            <h3 className='mb-6 text-sm'>Portfolio overview</h3>
+            <div className='flex flex-col gap-4 rounded-md bg-white p-3 text-black'>
+              <div className='flex items-center justify-between'>
+                <span className='font-bold text-black'>
+                  LEADERBOARD POSITION
+                </span>
+                <span className='text-[#8C8C8C]'>{portfolioData.position}</span>
+              </div>
+              <div className='flex items-center justify-between'>
+                <span>IP COLLECTION</span>
+                <span className='text-[#8C8C8C]'>
+                  {portfolioData.ipCollection}
+                </span>
+              </div>
+              <div className='flex items-center justify-between'>
+                <span>IP SOLD</span>
+                <span className='text-[#8C8C8C]'>{portfolioData.ipSold}</span>
+              </div>
+              <div className='flex items-center justify-between'>
+                <span>TOTAL QUADRATIC FUNDING</span>
+                <span className='text-[#8C8C8C]'>
+                  ${portfolioData.totalFunding}
+                </span>
+              </div>
+              <div className='flex items-center justify-between'>
+                <span>REFERRALS</span>
+                <span className='text-[#8C8C8C]'>
+                  {portfolioData.referrals}
+                </span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/src/components/leaderboard/index.ts b/src/components/leaderboard/index.ts
new file mode 100644
index 0000000..82beed0
--- /dev/null
+++ b/src/components/leaderboard/index.ts
@@ -0,0 +1,4 @@
+export { LeaderboardMain } from './LeaderboardMain'
+export { UserProfile } from './UserProfile'
+export { LeaderboardTable } from './LeaderboardTable'
+export { UserAvatar } from './UserAvatar'
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..884c30c
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'default' | 'ghost'
+}
+
+export function Button({
+  className,
+  size = 'md',
+  variant = 'default',
+  ...props
+}: ButtonProps) {
+  const sizeClasses = {
+    sm: 'h-8 px-3 text-sm',
+    md: 'h-10 px-4',
+    lg: 'h-12 px-6 text-lg',
+  }
+
+  const variantClasses = {
+    default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    ghost: 'hover:bg-accent hover:text-accent-foreground',
+  }
+
+  return (
+    <button
+      className={`focus-visible:ring-ring ring-offset-background inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 ${sizeClasses[size]} ${variantClasses[variant]} ${className || ''}`}
+      {...props}
+    />
+  )
+}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..ccdd13e
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+export function Card({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={`bg-card text-card-foreground rounded-lg border shadow-sm ${className || ''}`}
+      {...props}
+    />
+  )
+}
+
+export function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={`p-6 ${className || ''}`} {...props} />
+}
diff --git a/src/lib/userService.ts b/src/lib/userService.ts
new file mode 100644
index 0000000..32c2d17
--- /dev/null
+++ b/src/lib/userService.ts
@@ -0,0 +1,104 @@
+import { supabase } from './supabase'
+
+export interface UserProfile {
+  wallet_address: string
+  username?: string
+  avatar_url?: string
+  organization?: {
+    name: string
+    logo_url?: string
+    development_image_url?: string
+  }
+}
+
+export const userService = {
+  // Get user profile by wallet address
+  async getUserProfile(walletAddress: string): Promise<UserProfile | null> {
+    try {
+      // First try to get organization data
+      const { data: orgData } = await supabase
+        .from('organizations')
+        .select('name, logo_url, development_image_url')
+        .eq('wallet_address', walletAddress)
+        .single()
+
+      if (orgData) {
+        return {
+          wallet_address: walletAddress,
+          organization: {
+            name: orgData.name,
+            logo_url: orgData.logo_url,
+            development_image_url: orgData.development_image_url,
+          },
+        }
+      }
+
+      // If no organization, return basic profile
+      return {
+        wallet_address: walletAddress,
+      }
+    } catch (error) {
+      console.error('Error fetching user profile:', error)
+      return null
+    }
+  },
+
+  // Get multiple user profiles for leaderboard
+  async getLeaderboardProfiles(
+    walletAddresses: string[]
+  ): Promise<UserProfile[]> {
+    try {
+      const { data: orgsData, error } = await supabase
+        .from('organizations')
+        .select('wallet_address, name, logo_url, development_image_url')
+        .in('wallet_address', walletAddresses)
+
+      if (error) throw error
+
+      // Create a map for quick lookup
+      const orgMap = new Map(
+        (orgsData || []).map((org) => [org.wallet_address, org])
+      )
+
+      // Return profiles for all requested addresses
+      return walletAddresses.map((address) => {
+        const org = orgMap.get(address)
+        return {
+          wallet_address: address,
+          organization: org
+            ? {
+                name: org.name,
+                logo_url: org.logo_url,
+                development_image_url: org.development_image_url,
+              }
+            : undefined,
+        }
+      })
+    } catch (error) {
+      console.error('Error fetching leaderboard profiles:', error)
+      return walletAddresses.map((address) => ({ wallet_address: address }))
+    }
+  },
+
+  // Get user's avatar URL (prioritizes dev image in development)
+  getAvatarUrl(profile: UserProfile): string | null {
+    const isDev = process.env.NODE_ENV === 'development'
+
+    // Try organization images first
+    if (profile.organization) {
+      if (isDev && profile.organization.development_image_url) {
+        return profile.organization.development_image_url
+      }
+      if (profile.organization.logo_url) {
+        return profile.organization.logo_url
+      }
+    }
+
+    // Fallback to user avatar
+    if (profile.avatar_url) {
+      return profile.avatar_url
+    }
+
+    return null
+  },
+}
diff --git a/src/mocks/leaderboardData.ts b/src/mocks/leaderboardData.ts
new file mode 100644
index 0000000..fcf39ae
--- /dev/null
+++ b/src/mocks/leaderboardData.ts
@@ -0,0 +1,162 @@
+import { LeaderboardData } from '@/components/leaderboard/LeaderboardConfig'
+
+export const buyerLeaderboardData: LeaderboardData[] = [
+  {
+    rank: 1,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+  },
+  {
+    rank: 2,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+  },
+  {
+    rank: 3,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+  },
+  {
+    rank: 4,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+  },
+  {
+    rank: 5,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+  },
+  {
+    rank: 6,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+  },
+  {
+    rank: 7,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+    highlighted: true,
+  },
+  {
+    rank: 8,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+  },
+  {
+    rank: 9,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_owned: 20,
+    impact_score: 30,
+    rebaz_spent: 300,
+    staked: '2,070.5',
+  },
+]
+
+export const sellerLeaderboardData: LeaderboardData[] = [
+  {
+    rank: 1,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 15,
+    total_sales: 200,
+    rebaz_earned: 5000,
+    ip_sold: 12,
+    staked: '3,250.0',
+  },
+  {
+    rank: 2,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 12,
+    total_sales: 180,
+    rebaz_earned: 4500,
+    ip_sold: 10,
+    staked: '2,800.0',
+  },
+  {
+    rank: 3,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 10,
+    total_sales: 150,
+    rebaz_earned: 3800,
+    ip_sold: 8,
+    staked: '2,400.0',
+  },
+  {
+    rank: 4,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 8,
+    total_sales: 120,
+    rebaz_earned: 3200,
+    ip_sold: 6,
+    staked: '2,100.0',
+  },
+  {
+    rank: 5,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 7,
+    total_sales: 100,
+    rebaz_earned: 2800,
+    ip_sold: 5,
+    staked: '1,900.0',
+  },
+  {
+    rank: 6,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 6,
+    total_sales: 90,
+    rebaz_earned: 2500,
+    ip_sold: 4,
+    staked: '1,700.0',
+  },
+  {
+    rank: 7,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 5,
+    total_sales: 75,
+    rebaz_earned: 2200,
+    ip_sold: 3,
+    staked: '1,500.0',
+    highlighted: true,
+  },
+  {
+    rank: 8,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 4,
+    total_sales: 60,
+    rebaz_earned: 1800,
+    ip_sold: 2,
+    staked: '1,300.0',
+  },
+  {
+    rank: 9,
+    user: '0XC05D900F7BE1570A02E7F760C674...',
+    ip_created: 3,
+    total_sales: 45,
+    rebaz_earned: 1500,
+    ip_sold: 1,
+    staked: '1,100.0',
+  },
+]