diff --git a/frontend/app/components/modules/leaderboards/README.md b/frontend/app/components/modules/leaderboards/README.md
new file mode 100644
index 000000000..e75f56a79
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/README.md
@@ -0,0 +1,128 @@
+# Leaderboards Component
+
+This directory contains the leaderboard components for displaying various project rankings and metrics.
+
+## Components
+
+### LeaderboardDetail (`components/views/leaderboard-detail.vue`)
+
+A comprehensive leaderboard view component that displays a ranked list of projects with their metrics and trends.
+
+#### Features
+
+- **Three-column layout**: Back button, main content (720px), and sidebar navigation (260px)
+- **Search functionality**: Filter projects by name
+- **Trend indicators**: Show up/down/neutral trends with percentages and change values
+- **Responsive design**: Fixed widths for consistent layout
+- **Dynamic routing**: Navigate between different leaderboards
+- **Share functionality**: Share leaderboard via native share API or clipboard
+
+#### Props
+
+- `leaderboardKey` (required): String - The key identifying which leaderboard to display
+- `items`: Array - List of leaderboard items (default: [])
+- `highlightedIndex`: Number - Index of item to highlight (default: -1)
+
+#### LeaderboardItem Interface
+
+```typescript
+interface LeaderboardItem {
+  id: string;
+  name: string;
+  logo?: string;
+  value: number;
+  trend?: LeaderboardTrend;
+}
+
+interface LeaderboardTrend {
+  direction: 'up' | 'down' | 'neutral';
+  percentage: number;
+  change: number;
+}
+```
+
+#### Usage Example
+
+```vue
+<template>
+  <lfx-leaderboard-detail
+    leaderboard-key="most-active-contributors"
+    :items="leaderboardItems"
+    :highlighted-index="1"
+  />
+</template>
+
+<script setup lang="ts">
+import LfxLeaderboardDetail from '~/components/modules/leaderboards/components/views/leaderboard-detail.vue';
+
+const leaderboardItems = [
+  {
+    id: '1',
+    name: 'The Linux Kernel',
+    logo: 'https://example.com/logo.png',
+    value: 100,
+    trend: {
+      direction: 'up',
+      percentage: 2.3,
+      change: 120,
+    },
+  },
+  // ... more items
+];
+</script>
+```
+
+## Configuration
+
+### Leaderboard Configs (`config/`)
+
+Each leaderboard has a configuration file that defines:
+
+- `key`: Unique identifier
+- `name`: Display name
+- `icon`: FontAwesome icon name
+- `dataDisplay`: Component for rendering the metric
+- `sort`: Sort order
+- `columnLabel`: Label for the metric column
+
+#### Example Config
+
+```typescript
+export const mostActiveContributorsConfig: LeaderboardConfig = {
+  key: 'most-active-contributors',
+  name: 'Most Active Contributors',
+  icon: 'people-group',
+  dataDisplay: NumericDataDisplay,
+  sort: 'mostActiveContributors_DESC',
+  columnLabel: 'Contributors (12M)',
+};
+```
+
+## Data Display Components
+
+Located in `components/data-displays/`, these components format the metric values:
+
+- `numeric.vue`: Formats numbers with proper thousand separators
+- `time-duration.vue`: Formats time durations
+
+## Routing
+
+The leaderboard detail view is accessible via:
+
+```
+/leaderboards/[key]
+```
+
+Where `[key]` is the leaderboard configuration key (e.g., `most-active-contributors`).
+
+## Styling
+
+The component uses Tailwind CSS with the project's design system:
+
+- Colors: `neutral-*`, `positive-600`, `negative-600`, `brand-500`
+- Fonts: Primary font for body text, `font-secondary` (Roboto Slab) for headings
+- Spacing: Consistent with project standards (gap-2, gap-3, etc.)
+
+## Navigation
+
+The sidebar navigation displays all available leaderboards and highlights the active one. Clicking on a leaderboard navigates to its detail page.
diff --git a/frontend/app/components/modules/leaderboards/components/data-displays/numeric.vue b/frontend/app/components/modules/leaderboards/components/data-displays/numeric.vue
new file mode 100644
index 000000000..63f6debad
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/data-displays/numeric.vue
@@ -0,0 +1,73 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+
+<template>
+  <lfx-tooltip
+    v-if="isLargeNumber"
+    :content="formattedNumericTooltip"
+    placement="top-end"
+    class="!w-full"
+  >
+    <span class="cursor-pointer">{{ formattedNumeric }}</span>
+  </lfx-tooltip>
+  <span
+    v-else
+    class="leading-5"
+    >{{ formattedNumeric }}</span
+  >
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { LeaderboardDataType } from '../../config/types/leaderboard.types';
+import { formatNumber } from '~/components/shared/utils/formatter';
+import { formatNumberShort } from '~/components/shared/utils/formatter';
+import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
+
+const props = withDefaults(
+  defineProps<{
+    value: number;
+    dataType: LeaderboardDataType;
+    decimals?: number;
+  }>(),
+  {
+    value: 0,
+    decimals: 0,
+  },
+);
+
+const isLargeNumber = computed(() => {
+  return props.value > 1000000;
+});
+
+/**
+ * Formats a number to a numeric string with up to 2 units
+ * Example: 1,000,000
+ */
+const formattedNumeric = computed(() => {
+  if (!props.value || props.value === 0) {
+    return '0';
+  }
+
+  if (isLargeNumber.value) {
+    return formatNumberShort(props.value);
+  }
+
+  return formatNumber(props.value, props.decimals);
+});
+const formattedNumericTooltip = computed(() => {
+  if (!props.value || props.value === 0) {
+    return '0';
+  }
+
+  return formatNumber(props.value, props.decimals);
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'NumericDataDisplay',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/data-displays/time-duration.vue b/frontend/app/components/modules/leaderboards/components/data-displays/time-duration.vue
new file mode 100644
index 000000000..63f2b70c2
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/data-displays/time-duration.vue
@@ -0,0 +1,59 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+
+<template>
+  <lfx-tooltip
+    :content="dateFormatted"
+    class="!w-full flex justify-end"
+    placement="top-end"
+  >
+    <span v-if="value">{{ formattedDuration }}</span>
+    <span v-else>-</span>
+  </lfx-tooltip>
+</template>
+
+<script setup lang="ts">
+import { DateTime } from 'luxon';
+import { computed } from 'vue';
+import type { LeaderboardDataType } from '../../config/types/leaderboard.types';
+import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
+import { formatValueToLargestUnitDuration } from '~/components/shared/utils/formatter';
+
+const props = withDefaults(
+  defineProps<{
+    value: number; // Time in milliseconds or duration in seconds
+    dataType: LeaderboardDataType;
+  }>(),
+  {
+    value: 0,
+  },
+);
+
+/**
+ * Formats milliseconds to a duration string with up to 2 units
+ * Example: 2y 3mo, 5d 3h, 1h 30m
+ */
+const formattedDuration = computed(() => {
+  if (!props.value || props.value === 0) {
+    return '0s';
+  }
+
+  return formatValueToLargestUnitDuration(props.value, 2, props.dataType === 'duration');
+});
+
+const dateFormatted = computed(() => {
+  if (props.dataType === 'duration') {
+    // If it's a duration, show the duration in a human-readable format
+    return formattedDuration.value;
+  }
+  return DateTime.fromMillis(props.value).toFormat('MMM dd, yyyy');
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'TimeDurationDataDisplay',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/data-displays/trend-display.vue b/frontend/app/components/modules/leaderboards/components/data-displays/trend-display.vue
new file mode 100644
index 000000000..394807ff2
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/data-displays/trend-display.vue
@@ -0,0 +1,111 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-tooltip content="vs. previous 12M period">
+    <div class="flex gap-1 items-center">
+      <lfx-icon
+        :name="getTrendIcon"
+        type="solid"
+        :size="12"
+        :class="getTrendColor"
+      />
+      <span
+        v-if="trendDirection !== 'neutral'"
+        class="text-xs font-medium text-nowrap"
+        :class="getTrendColor"
+      >
+        {{ trendPercentage }}% ({{ formatTrendValue }})
+      </span>
+      <span
+        v-else
+        class="text-xs font-medium text-neutral-400"
+      >
+        = 0%
+      </span>
+    </div>
+  </lfx-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { LeaderboardDataType } from '../../config/types/leaderboard.types';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+import { formatNumber, formatNumberShort, formatValueToLargestUnitDuration } from '~/components/shared/utils/formatter';
+import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
+
+const props = withDefaults(
+  defineProps<{
+    data: Leaderboard;
+    isReverse?: boolean;
+    dataType: LeaderboardDataType;
+    decimals?: number;
+  }>(),
+  {
+    isReverse: false,
+    decimals: 0,
+  },
+);
+
+const isTimeDisplay = computed(() => {
+  return props.dataType === 'duration' || props.dataType === 'timestamp';
+});
+
+const trend = computed(() => {
+  return props.data.value - props.data.previousPeriodValue;
+});
+
+const trendPercentage = computed(() => {
+  if (!props.data.previousPeriodValue) {
+    // For division by zero, show as 100% increase
+    return '100.0';
+  }
+  const value = (Math.abs(trend.value) / props.data.previousPeriodValue) * 100;
+  return value.toFixed(1);
+});
+
+const formatTrendValue = computed(() => {
+  const sign = trend.value >= 0 ? '+' : '-';
+  if (isTimeDisplay.value) {
+    return `${sign}${formatValueToLargestUnitDuration(Math.abs(trend.value), 2, props.dataType === 'duration')}`;
+  }
+
+  if (trend.value >= 1000000) {
+    return formatNumberShort(trend.value);
+  }
+
+  return `${sign}${formatNumber(Math.abs(trend.value), props.decimals)}`;
+});
+
+const trendDirection = computed(() => {
+  if (trend.value === 0) return 'neutral';
+
+  return trend.value > 0 ? 'up' : 'down';
+});
+
+const getTrendIcon = computed(() => {
+  if (trendDirection.value === 'neutral') return 'equals';
+
+  const isUp = trendDirection.value === 'up';
+  const shouldShowUp = props.isReverse ? !isUp : isUp;
+
+  return shouldShowUp ? 'circle-arrow-up' : 'circle-arrow-down';
+});
+
+const getTrendColor = computed(() => {
+  if (trendDirection.value === 'neutral') return 'text-brand-500';
+
+  const isUp = trendDirection.value === 'up';
+  const shouldBePositive = props.isReverse ? !isUp : isUp;
+
+  return shouldBePositive ? 'text-positive-600' : 'text-negative-600';
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LeaderboardTrendDisplay',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/leaderboard-card.vue b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-card.vue
new file mode 100644
index 000000000..956fd025a
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-card.vue
@@ -0,0 +1,123 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-card
+    class="p-5 flex-1 flex flex-col justify-between h-full min-w-0 hover:shadow-sm transition-all"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div class="size-9 bg-white border border-neutral-200 rounded-lg flex items-center justify-center">
+          <lfx-icon
+            v-if="config"
+            :name="config.icon"
+            :size="16"
+          />
+        </div>
+        <lfx-icon-button
+          v-show="isHovered"
+          type="transparent"
+          icon="share-nodes"
+          @click="handleShare"
+        />
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <h1 class="text-xl font-bold font-secondary text-neutral-900">
+          {{ config?.name }}
+        </h1>
+        <p class="text-xs text-neutral-500 w-full whitespace-pre-wrap mb-2">
+          {{ config?.description }}
+        </p>
+      </div>
+
+      <div class="flex-col gap-3 sm:flex hidden">
+        <!-- Table header -->
+        <lfx-table-header
+          :config="config"
+          :show-rank="false"
+        />
+
+        <lfx-table-row
+          v-for="item in leaderboards"
+          :key="item.rank"
+          :item="item"
+          :leaderboard-config="config"
+          :is-small="true"
+        />
+      </div>
+      <div class="flex flex-wrap gap-3 sm:hidden">
+        <lfx-chip
+          v-for="project of leaderboards"
+          :key="project.slug"
+          type="bordered"
+          class="transition hover:bg-neutral-100 cursor-pointer"
+          @click.prevent="router.push({ name: LfxRoutes.LEADERBOARD, params: { key: config.key as string } })"
+        >
+          <lfx-avatar
+            :src="project.logoUrl"
+            size="xsmall"
+            type="organization"
+            :aria-label="project.logoUrl && project.name"
+          />
+          {{ project.name }}
+        </lfx-chip>
+      </div>
+    </div>
+    <lfx-button
+      type="transparent"
+      class="mt-6 w-full justify-center"
+      button-style="pill"
+      @click="router.push({ name: LfxRoutes.LEADERBOARD, params: { key: config.key as string } })"
+    >
+      View leaderboard
+    </lfx-button>
+  </lfx-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
+import LfxTableRow from './table-row.vue';
+import LfxTableHeader from './table-header.vue';
+import LfxCard from '~/components/uikit/card/card.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+import { LfxRoutes } from '~/components/shared/types/routes';
+import LfxChip from '~/components/uikit/chip/chip.vue';
+import LfxAvatar from '~/components/uikit/avatar/avatar.vue';
+import { useShareStore } from '~/components/shared/modules/share/store/share.store';
+
+const router = useRouter();
+const { openShareModal } = useShareStore();
+const props = defineProps<{
+  config: LeaderboardConfig;
+  leaderboards: Leaderboard[];
+}>();
+
+const isHovered = ref(false);
+
+const handleShare = () => {
+  const title = `LFX Insights | Leaderboard - ${props.config?.name}`;
+
+  const url = new URL(window.location.href + `/${props.config.key}`);
+  url.hash = '';
+
+  openShareModal({
+    url: url.toString(),
+    title,
+    area: props.config?.name,
+  });
+};
+</script>
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardCard',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/leaderboard-detail-header.vue b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-detail-header.vue
new file mode 100644
index 000000000..39084b98f
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-detail-header.vue
@@ -0,0 +1,182 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex flex-col gap-6 items-start w-full pb-4">
+    <div class="md:hidden block">
+      <router-link
+        :to="{ name: LfxRoutes.LEADERBOARDS }"
+        class="flex items-center gap-1 text-xs text-neutral-500 hover:text-neutral-900 hover:font-medium transition-all duration-100"
+      >
+        <lfx-icon
+          name="angle-left"
+          :size="15"
+        />
+        All leaderboards
+      </router-link>
+    </div>
+    <!-- Icon and Share button -->
+    <div class="flex justify-between w-full items-start">
+      <div class="flex transition-all ease-linear flex-col gap-3">
+        <div
+          :class="[scrollTop > 50 ? 'size-10' : 'size-12']"
+          class="transition-all ease-linear bg-white border border-neutral-200 rounded-lg flex items-center justify-center"
+        >
+          <lfx-icon
+            v-if="config"
+            :name="config.icon"
+            :size="scrollTop > 50 ? 20 : 24"
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <h1
+            :class="[scrollTop > 50 ? 'text-2xl ml-13 -mt-12' : 'text-3xl']"
+            class="transition-all ease-linear font-light font-secondary text-neutral-900 md:block hidden"
+          >
+            {{ config?.name }}
+          </h1>
+          <!-- Sidebar navigation -->
+          <div class="md:hidden flex justify-start">
+            <lfx-leaderboard-mobile-nav :leaderboard-key="config.key" />
+          </div>
+          <p
+            :class="[scrollTop < 50 ? 'block' : 'hidden']"
+            class="transition-all ease-linear text-sm text-neutral-500 w-full whitespace-pre-wrap min-h-10"
+          >
+            {{ config?.description }}
+          </p>
+        </div>
+      </div>
+      <div class="mt-1">
+        <div class="md:block hidden">
+          <lfx-button
+            type="tertiary"
+            size="small"
+            button-style="pill"
+            class="h-9"
+            @click="handleShare"
+          >
+            <lfx-icon
+              name="share-nodes"
+              :size="16"
+            />
+            Share
+          </lfx-button>
+        </div>
+        <div class="md:!hidden block">
+          <lfx-icon-button
+            icon="share-nodes"
+            @click="handleShare"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="relative w-full md:block hidden">
+      <lfx-leaderboard-search
+        :config="config"
+        class="rounded-full border border-solid border-neutral-200"
+        @item-click="handleItemClick"
+      />
+    </div>
+    <div class="md:hidden block w-full">
+      <div
+        class="rounded-full border border-solid border-neutral-200 cursor-pointer flex items-center gap-2 px-3 py-2"
+        @click="isSearchOpen = true"
+      >
+        <lfx-icon
+          name="search"
+          :size="14"
+          class="text-neutral-400"
+        />
+        <span class="text-sm text-neutral-400">Search projects...</span>
+      </div>
+    </div>
+  </div>
+
+  <lfx-modal
+    v-model="isSearchOpen"
+    width="100%"
+    content-class="!max-w-full mx-4"
+  >
+    <div class="p-1 bg-white rounded-lg">
+      <lfx-leaderboard-search
+        ref="searchComponentRef"
+        class="bg-white"
+        in-modal
+        :config="config"
+        @item-click="handleItemClick"
+      />
+    </div>
+  </lfx-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue';
+import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
+import LfxLeaderboardMobileNav from './leaderboard-mobile-nav.vue';
+import LfxLeaderboardSearch from './leaderboard-search.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import useScroll from '~/components/shared/utils/scroll';
+import { useShareStore } from '~/components/shared/modules/share/store/share.store';
+import { LfxRoutes } from '~/components/shared/types/routes';
+import LfxModal from '~/components/uikit/modal/modal.vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+
+const { openShareModal } = useShareStore();
+const props = defineProps<{
+  config: LeaderboardConfig;
+}>();
+
+const { scrollTop } = useScroll();
+
+const isSearchOpen = ref(false);
+
+const searchComponentRef = ref<InstanceType<typeof LfxLeaderboardSearch> | null>(null);
+
+watch(isSearchOpen, (newValue) => {
+  if (newValue) {
+    // Use setTimeout with nextTick to ensure modal teleport has completed
+    nextTick(() => {
+      setTimeout(() => {
+        searchComponentRef.value?.focusInput();
+      }, 50);
+    });
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'itemClick', item: Leaderboard): void;
+}>();
+
+const handleItemClick = (item: Leaderboard) => {
+  // Close the mobile search modal if it's open
+  isSearchOpen.value = false;
+
+  // Forward the event to parent component
+  emit('itemClick', item);
+};
+
+const handleShare = () => {
+  const title = `LFX Insights | Leaderboard - ${props.config?.name}`;
+
+  const url = new URL(window.location.href);
+  url.hash = '';
+
+  openShareModal({
+    url: url.toString(),
+    title,
+    area: props.config?.name,
+  });
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardDetailHeader',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/leaderboard-mobile-nav.vue b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-mobile-nav.vue
new file mode 100644
index 000000000..c9fe78e57
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-mobile-nav.vue
@@ -0,0 +1,93 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="flex items-center justify-between font-medium text-neutral-900 cursor-pointer"
+    @click="isModalOpen = true"
+  >
+    <span
+      :class="scrollTop > 0 ? 'text-xl' : 'text-2xl'"
+      class="text-2xl font-light font-secondary text-neutral-900 mr-2 transition-all ease-linear"
+      >{{ activeLink?.name }}</span
+    >
+    <lfx-icon
+      name="angles-up-down"
+      type="light"
+      :size="14"
+      class="text-neutral-500"
+    />
+  </div>
+
+  <lfx-modal
+    v-model="isModalOpen"
+    width="100%"
+    content-class="!max-w-full mx-4"
+  >
+    <div class="flex flex-col gap-1 px-4 py-2">
+      <router-link
+        v-for="config in allLeaderboards"
+        :key="config.key"
+        :to="{ name: LfxRoutes.LEADERBOARD, params: { key: config.key as string } }"
+        class="flex items-center justify-between py-2 px-0"
+        @click="isModalOpen = false"
+      >
+        <div class="flex items-center gap-2">
+          <lfx-icon
+            :name="config?.icon || ''"
+            :size="14"
+            type="light"
+            :class="isActiveLeaderboard(config.key) ? 'text-neutral-900' : 'text-neutral-500'"
+          />
+          <span
+            class="text-sm"
+            :class="isActiveLeaderboard(config.key) ? 'font-medium text-neutral-900' : 'font-normal text-neutral-500'"
+          >
+            {{ config.name }}
+          </span>
+        </div>
+        <lfx-icon
+          v-if="isActiveLeaderboard(config.key)"
+          name="check"
+          :size="14"
+          type="light"
+          class="text-neutral-900"
+        />
+      </router-link>
+    </div>
+  </lfx-modal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import leaderboardConfigs from '../../config/index.config';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import { LfxRoutes } from '~/components/shared/types/routes';
+import LfxModal from '~/components/uikit/modal/modal.vue';
+import useScroll from '~/components/shared/utils/scroll';
+
+const { scrollTop } = useScroll();
+
+const props = defineProps<{
+  leaderboardKey: string;
+}>();
+
+const isModalOpen = ref(false);
+
+const allLeaderboards = computed(() => leaderboardConfigs);
+
+const activeLink = computed(() => {
+  return allLeaderboards.value.find((config) => config.key === props.leaderboardKey);
+});
+
+const isActiveLeaderboard = (key: string) => {
+  return props.leaderboardKey === key;
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardMobileNav',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/leaderboard-search-results.vue b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-search-results.vue
new file mode 100644
index 000000000..5f4f428d7
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-search-results.vue
@@ -0,0 +1,73 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    v-for="item in items"
+    :key="item.id"
+    class="flex items-center p-3 w-full hover:bg-neutral-50 rounded-lg transition-all duration-300 cursor-pointer"
+    @click="emit('itemClick', item)"
+  >
+    <!-- Project info -->
+    <div class="flex-1 min-w-0 flex gap-3 items-center">
+      <lfx-avatar
+        :src="item.logoUrl"
+        type="organization"
+        :aria-label="item.logoUrl && item.name"
+        size="small"
+      />
+      <p class="text-base leading-5 font-medium text-neutral-900 overflow-hidden overflow-ellipsis">
+        {{ item.name }}
+      </p>
+    </div>
+    <!-- Rank -->
+    <div class="text-neutral-500 text-sm">#{{ item.rank }}</div>
+  </div>
+
+  <div
+    v-if="items.length === 0 && isSuccess"
+    class="flex flex-col items-center py-20"
+  >
+    <lfx-icon
+      name="face-monocle"
+      :size="40"
+      class="text-neutral-300"
+    />
+    <h3 class="text-center pt-5 text-heading-4 sm:text-heading-3 font-secondary font-bold text-neutral-500">
+      No projects found
+    </h3>
+  </div>
+  <div
+    v-if="isLoading"
+    class="flex items-center justify-between h-32 py-1"
+  >
+    <lfx-spinner
+      :size="40"
+      class="text-neutral-300"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxSpinner from '~/components/uikit/spinner/spinner.vue';
+import LfxAvatar from '~/components/uikit/avatar/avatar.vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+
+defineProps<{
+  items: Leaderboard[];
+  isSuccess: boolean;
+  isLoading: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'itemClick', item: Leaderboard): void;
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardSearchResults',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/leaderboard-search.vue b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-search.vue
new file mode 100644
index 000000000..75c4e2468
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-search.vue
@@ -0,0 +1,180 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    ref="containerRef"
+    v-bind="$attrs"
+  >
+    <lfx-popover
+      v-if="!inModal"
+      v-model:visibility="isSearchOpen"
+      placement="bottom-end"
+      class="!w-full"
+      :match-width="true"
+    >
+      <lfx-input
+        v-model="searchQuery"
+        placeholder="Search projects..."
+        class="!border-none !bg-neutral-50 !rounded-full h-9 !shadow-none"
+      >
+        <template #prefix>
+          <lfx-icon
+            name="search"
+            type="regular"
+            :size="14"
+            class="text-neutral-400"
+          />
+        </template>
+        <template #suffix>
+          <lfx-icon
+            v-if="searchQuery !== ''"
+            name="circle-xmark"
+            type="regular"
+            :size="14"
+            class="text-neutral-400 cursor-pointer"
+            @click="searchQuery = ''"
+          />
+        </template>
+      </lfx-input>
+      <template #content>
+        <lfx-card
+          class="w-full max-h-[65vh] overflow-y-auto"
+          :class="[searchQuery !== '' ? 'p-1 shadow-lg' : '!border-none']"
+        >
+          <lfx-leaderboard-search-results
+            :items="items"
+            :is-success="isSuccess"
+            :is-loading="isSearchPending && searchQuery !== ''"
+            @item-click="handleItemClick"
+          />
+        </lfx-card>
+      </template>
+    </lfx-popover>
+
+    <div v-else>
+      <div class="relative">
+        <lfx-input
+          v-model="searchQuery"
+          placeholder="Search projects..."
+          class="!border-none !bg-white !rounded-full h-9 !shadow-none"
+        >
+          <template #prefix>
+            <lfx-icon
+              name="search"
+              type="regular"
+              :size="14"
+              class="text-neutral-400"
+            />
+          </template>
+
+          <template #suffix>
+            <lfx-icon
+              v-if="searchQuery !== ''"
+              name="circle-xmark"
+              type="regular"
+              :size="14"
+              class="text-neutral-400 cursor-pointer"
+              @click="searchQuery = ''"
+            />
+          </template>
+        </lfx-input>
+      </div>
+      <div
+        v-if="searchQuery !== ''"
+        class="h-px bg-neutral-100 w-full my-1"
+      ></div>
+      <lfx-leaderboard-search-results
+        :items="items"
+        :is-success="isSuccess"
+        :is-loading="isSearchPending && searchQuery !== ''"
+        @item-click="handleItemClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
+import { LEADERBOARD_API_SERVICE } from '../../services/leaderboard.api.service';
+import LfxLeaderboardSearchResults from './leaderboard-search-results.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxInput from '~/components/uikit/input/input.vue';
+import LfxPopover from '~/components/uikit/popover/popover.vue';
+import LfxCard from '~/components/uikit/card/card.vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+
+const props = defineProps<{
+  config: LeaderboardConfig;
+  inModal?: boolean;
+}>();
+
+const searchQuery = ref('');
+
+const isSearchOpen = ref(false);
+
+const containerRef = ref<HTMLElement | null>(null);
+
+const focusInput = () => {
+  if (containerRef.value) {
+    const inputElement = containerRef.value.querySelector('input') as HTMLInputElement;
+    if (inputElement) {
+      inputElement.focus();
+      inputElement.click(); // Also trigger click in case focus isn't enough
+    }
+  }
+};
+
+defineExpose({
+  focusInput,
+});
+
+// Auto-focus on mount (when modal opens)
+onMounted(() => {
+  // Small delay to ensure the component is fully rendered in the modal
+  setTimeout(() => {
+    focusInput();
+  }, 150);
+});
+
+watch(searchQuery, (newVal) => {
+  isSearchOpen.value = newVal !== '';
+});
+
+const searchParams = computed(() => ({
+  leaderboardType: props.config.key,
+  search: searchQuery.value,
+}));
+
+const {
+  data: searchData,
+  isPending: isSearchPending,
+  isSuccess,
+} = LEADERBOARD_API_SERVICE.fetchLeaderboardDetailSearch(searchParams);
+
+const items = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return searchData.value?.pages.flatMap((page: Pagination<Leaderboard>) => page.data) || [];
+});
+
+const emit = defineEmits<{
+  (e: 'itemClick', item: Leaderboard): void;
+}>();
+
+const handleItemClick = (item: Leaderboard) => {
+  // Close the search popover
+  isSearchOpen.value = false;
+  searchQuery.value = '';
+
+  // Emit the event to parent
+  emit('itemClick', item);
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardSearch',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/leaderboard-sidebar.vue b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-sidebar.vue
new file mode 100644
index 000000000..4db6a44e2
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-sidebar.vue
@@ -0,0 +1,46 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex-col gap-4">
+    <div class="flex flex-col gap-4">
+      <router-link
+        v-for="config in allLeaderboards"
+        :key="config.key"
+        :to="{ name: LfxRoutes.LEADERBOARD, params: { key: config.key as string } }"
+        class="flex gap-2 items-center text-xs leading-4 cursor-pointer transition-colors hover:text-neutral-900 hover:font-medium"
+        :class="isActiveLeaderboard(config.key) ? 'text-neutral-900 font-medium' : 'text-neutral-500 font-normal'"
+      >
+        <lfx-icon
+          :name="config.icon"
+          :size="14"
+        />
+        <span>{{ config.name }}</span>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import leaderboardConfigs from '../../config/index.config';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import { LfxRoutes } from '~/components/shared/types/routes';
+
+const props = defineProps<{
+  leaderboardKey: string;
+}>();
+
+const allLeaderboards = computed(() => leaderboardConfigs);
+
+const isActiveLeaderboard = (key: string) => {
+  return props.leaderboardKey === key;
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardSidebar',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/leaderboard-table.vue b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-table.vue
new file mode 100644
index 000000000..d6cd73296
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/leaderboard-table.vue
@@ -0,0 +1,90 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <!-- Leaderboard items -->
+  <div
+    class="flex flex-col items-start w-full"
+    v-bind="containerProps"
+  >
+    <template v-if="!isForceLoading">
+      <router-link
+        v-for="{ data: item } in list"
+        :key="item.rank"
+        class="w-full"
+        :to="`/project/${item.slug}`"
+        :data-rank="item.rank"
+      >
+        <lfx-table-row
+          :item="item"
+          :leaderboard-config="leaderboardConfig"
+          :is-small="false"
+        />
+      </router-link>
+    </template>
+    <template v-for="i in 100">
+      <div
+        v-if="isLoading || isForceLoading"
+        :key="i"
+        class="flex items-center p-3 w-full gap-3"
+      >
+        <div class="flex items-center justify-start">
+          <div class="w-10 shrink-0 text-neutral-900 font-secondary">
+            {{ (isForceLoading ? 0 : data.length) + i }}
+          </div>
+          <lfx-skeleton class="!w-8 !h-8 !rounded-sm" />
+        </div>
+        <div class="flex-1 shrink-0">
+          <lfx-skeleton class="!w-2/4 !h-5" />
+        </div>
+        <lfx-skeleton class="!w-16 !h-5" />
+      </div>
+    </template>
+
+    <lfx-button
+      v-if="hasNextPage"
+      type="transparent"
+      button-style="pill"
+      :loading="isLoading"
+      class="mt-10 w-full justify-center"
+      @click="emit('fetchNextPage')"
+    >
+      View more
+    </lfx-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useVirtualList } from '@vueuse/core';
+import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
+import LfxTableRow from './table-row.vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+import LfxSkeleton from '~/components/uikit/skeleton/skeleton.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+
+const props = defineProps<{
+  leaderboardConfig: LeaderboardConfig;
+  isLoading: boolean;
+  isForceLoading: boolean;
+  data: Leaderboard[];
+  hasNextPage: boolean;
+}>();
+
+const dataList = computed(() => props.data);
+
+const { list, containerProps } = useVirtualList(dataList, {
+  itemHeight: 60,
+});
+
+const emit = defineEmits<{
+  (e: 'fetchNextPage'): void;
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardTable',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/table-header.vue b/frontend/app/components/modules/leaderboards/components/sections/table-header.vue
new file mode 100644
index 000000000..6cc66ae02
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/table-header.vue
@@ -0,0 +1,54 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="flex items-center justify-between w-full text-xs font-semibold text-neutral-400 whitespace-pre-wrap bg-white"
+    v-bind="$attrs"
+  >
+    <div
+      v-if="showRank"
+      class="w-10 shrink-0"
+    >
+      #
+    </div>
+    <div class="flex-1 min-w-0">Project</div>
+    <div class="flex-1 min-w-0 text-right flex items-center gap-1.5 justify-end">
+      {{ config?.columnLabel }}
+      <lfx-tooltip
+        v-if="config?.columnTooltip"
+        :content="config?.columnTooltip"
+      >
+        <lfx-icon
+          name="info-circle"
+          type="light"
+          :size="16"
+          class="text-neutral-400 cursor-pointer"
+        />
+      </lfx-tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
+
+withDefaults(
+  defineProps<{
+    config: LeaderboardConfig;
+    showRank?: boolean;
+  }>(),
+  {
+    showRank: true,
+  },
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardDetail',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/sections/table-row.vue b/frontend/app/components/modules/leaderboards/components/sections/table-row.vue
new file mode 100644
index 000000000..a9452175c
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/sections/table-row.vue
@@ -0,0 +1,90 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="flex items-center w-full"
+    :class="{
+      'hover:bg-neutral-50 rounded-lg transition-all duration-300 cursor-pointer px-3 h-15': !isSmall,
+    }"
+  >
+    <!-- Rank -->
+    <div
+      v-if="!isSmall"
+      class="w-10 shrink-0 text-neutral-900 font-secondary overflow-hidden overflow-ellipsis"
+    >
+      {{ item.rank }}
+    </div>
+
+    <!-- Project info -->
+    <div class="flex-1 min-w-0 flex gap-3 items-center">
+      <lfx-avatar
+        :src="item.logoUrl"
+        type="organization"
+        :aria-label="item.logoUrl && item.name"
+      />
+      <p
+        :title="item.name"
+        class="text-base leading-5 font-medium text-neutral-900 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"
+        :class="{ 'hover:underline text-sm cursor-pointer': isSmall }"
+        @click="navigateToProject(item.slug)"
+      >
+        {{ item.name }}
+      </p>
+    </div>
+
+    <!-- Stats -->
+    <div class="w-1/4 shrink-0 flex flex-col gap-2 items-end justify-center">
+      <p
+        class="text-base font-normal text-neutral-900 text-right w-full"
+        :class="{ 'text-sm': isSmall }"
+      >
+        <component
+          :is="leaderboardConfig?.dataDisplay"
+          :data-type="leaderboardConfig?.dataType"
+          :decimals="leaderboardConfig?.decimals"
+          :value="item.value"
+        />
+      </p>
+      <lfx-leaderboard-trend-display
+        v-if="!leaderboardConfig?.hideTrend && !isSmall"
+        :data-type="leaderboardConfig?.dataType"
+        :decimals="leaderboardConfig?.decimals"
+        :data="item"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
+import LfxLeaderboardTrendDisplay from '../data-displays/trend-display.vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+import LfxAvatar from '~/components/uikit/avatar/avatar.vue';
+import { LfxRoutes } from '~/components/shared/types/routes';
+
+const router = useRouter();
+
+withDefaults(
+  defineProps<{
+    item: Leaderboard;
+    leaderboardConfig: LeaderboardConfig;
+    isSmall?: boolean;
+  }>(),
+  {
+    isSmall: false,
+  },
+);
+
+const navigateToProject = (slug: string) => {
+  router.push({ name: LfxRoutes.PROJECT, params: { slug } });
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardTable',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/views/leaderboard-detail.vue b/frontend/app/components/modules/leaderboards/components/views/leaderboard-detail.vue
new file mode 100644
index 000000000..7708e9fe1
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/views/leaderboard-detail.vue
@@ -0,0 +1,234 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="md:pt-10 pt-6">
+    <div class="container flex md:gap-10 gap-0 md:flex-row flex-col">
+      <div
+        ref="sidebarRef"
+        class="w-1/5 flex flex-col justify-between items-start md:flex hidden min-w-50 fixed bg-white pt-32 mt-2 top-0 z-[11]"
+        :style="{ width: sidebarWidth + 'px' }"
+      >
+        <router-link
+          :to="{ name: LfxRoutes.LEADERBOARDS }"
+          class="flex items-center gap-1 text-xs text-neutral-500 hover:text-neutral-900 hover:font-medium transition-all duration-100"
+        >
+          <lfx-icon
+            name="angle-left"
+            :size="15"
+          />
+          All leaderboards
+        </router-link>
+
+        <div class="h-px bg-neutral-200 w-full my-4"></div>
+        <!-- Sidebar navigation -->
+        <lfx-leaderboard-sidebar :leaderboard-key="leaderboardKey" />
+      </div>
+
+      <!-- Main content section -->
+      <!-- <lfx-maintain-height
+        :scroll-top="scrollTop"
+        class="z-10 w-full fixed !w-full bg-white pt-22 top-0 left-0"
+        :loaded="pageWidth > 0"
+      > -->
+      <div class="z-10 w-full fixed !w-full bg-white pt-22 top-0 left-0">
+        <div
+          ref="headerContainerRef"
+          class="container w-full md:pt-12 pt-8 flex gap-10"
+        >
+          <div class="lg:w-1/5 w-1/4 md:block hidden min-w-50">&nbsp;</div>
+          <div class="flex flex-col gap-6 lg:w-3/5 md:w-3/4 w-full">
+            <!-- Header section -->
+            <lfx-leaderboard-detail-header
+              :config="leaderboardConfig"
+              @item-click="handleSearchItemClick"
+            />
+
+            <!-- Table header -->
+            <lfx-table-header
+              :config="leaderboardConfig"
+              class="border-b border-neutral-200 px-0 lg:px-3 pb-4"
+            />
+          </div>
+          <div class="w-1/5 lg:block hidden">&nbsp;</div>
+        </div>
+      </div>
+      <!-- </lfx-maintain-height> -->
+
+      <div class="w-1/5 lg:block hidden">&nbsp;</div>
+    </div>
+  </div>
+
+  <div
+    class="container"
+    :style="{ paddingTop: headerHeight + 'px' }"
+  >
+    <div class="flex gap-10 lg:-mt-12 md:-mt-8 mt-4">
+      <div class="lg:w-1/5 w-1/4 md:block hidden min-w-50">&nbsp;</div>
+      <div class="lg:w-3/5 md:w-3/4 w-full min-w-0">
+        <lfx-leaderboard-table
+          :leaderboard-config="leaderboardConfig"
+          :data="items"
+          :is-loading="isPending || isFetchingNextPage"
+          :is-force-loading="isScrollingIntoRow"
+          :has-next-page="hasNextPage"
+          @fetch-next-page="fetchNextPage"
+        />
+      </div>
+      <div class="w-1/5 hidden lg:block">&nbsp;</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onServerPrefetch, ref, watch, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import leaderboardConfigs from '../../config/index.config';
+import LfxLeaderboardTable from '../sections/leaderboard-table.vue';
+import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
+import LfxLeaderboardSidebar from '../sections/leaderboard-sidebar.vue';
+import LfxLeaderboardDetailHeader from '../sections/leaderboard-detail-header.vue';
+import { LEADERBOARD_API_SERVICE } from '../../services/leaderboard.api.service';
+import LfxTableHeader from '../sections/table-header.vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import type { Pagination } from '~~/types/shared/pagination';
+import useResponsive from '~/components/shared/utils/responsive';
+import { LfxRoutes } from '~/components/shared/types/routes';
+
+const route = useRoute();
+
+// Props
+const props = defineProps<{
+  leaderboardKey: string;
+}>();
+
+const { pageWidth } = useResponsive();
+const sidebarRef = ref<HTMLElement | null>(null);
+const sidebarWidth = ref<number>(0);
+const isScrollingIntoRow = ref<boolean>(false);
+const headerContainerRef = ref<HTMLElement | null>(null);
+const headerHeight = ref<number>(0);
+
+onMounted(() => {
+  if (sidebarRef.value) {
+    sidebarWidth.value = sidebarRef.value.offsetWidth;
+  }
+
+  if (headerContainerRef.value) {
+    headerHeight.value = headerContainerRef.value.offsetHeight;
+  }
+});
+
+const params = computed(() => ({
+  leaderboardType: props.leaderboardKey,
+  initialPageSize: 100,
+}));
+
+const { data, isPending, isFetchingNextPage, fetchNextPage, hasNextPage } =
+  LEADERBOARD_API_SERVICE.fetchLeaderboardDetails(params);
+
+const items = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  const tmpList = data.value?.pages.flatMap((page: Pagination<Leaderboard>) => page.data) || [];
+
+  return tmpList;
+});
+
+const leaderboardConfig = computed<LeaderboardConfig>(() => {
+  const config = leaderboardConfigs.find((config) => config.key === props.leaderboardKey);
+  return config ?? leaderboardConfigs[0]!;
+});
+
+// Server-side prefetching for infinite query
+onServerPrefetch(async () => {
+  // Prefetch the first page of the infinite query on the server
+  await LEADERBOARD_API_SERVICE.prefetchLeaderboardDetails(params);
+});
+
+watch(pageWidth, () => {
+  if (sidebarRef.value) {
+    sidebarWidth.value = sidebarRef.value.offsetWidth;
+  }
+});
+
+// Reset scroll position whenever the route changes (including back button)
+watch(
+  () => route.fullPath,
+  async () => {
+    setTimeout(() => {
+      window.scrollTo({ top: 0, behavior: 'instant' });
+    }, 100);
+  },
+  { immediate: true },
+);
+
+// Handle search item click to scroll to row
+const handleSearchItemClick = async (item: Leaderboard) => {
+  const targetRank = item.rank;
+  isScrollingIntoRow.value = true;
+
+  // Function to find and scroll to the row
+  const scrollToRow = () => {
+    const isRankInList = items.value.find((item: Leaderboard) => item.rank === targetRank);
+    if (isRankInList) {
+      isScrollingIntoRow.value = false;
+    } else {
+      return false;
+    }
+
+    const row = document.querySelector(`[data-rank="${targetRank}"]`);
+    if (row) {
+      row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+      // Add a brief highlight effect
+      const element = row as HTMLElement;
+      element.style.transition = 'background-color 0.3s ease';
+      element.classList.add('bg-neutral-50');
+
+      setTimeout(() => {
+        element.classList.remove('bg-neutral-50');
+      }, 2000);
+
+      return true;
+    }
+    return false;
+  };
+
+  // First, try to find the row in the current view
+  if (scrollToRow()) {
+    return;
+  }
+
+  // If not found, we need to load more pages
+  const currentItemCount = items.value.length;
+
+  // Calculate how many pages we need to load
+  // If the target rank is beyond what we've loaded, keep loading
+  if (targetRank > currentItemCount) {
+    // Load pages until we have enough items
+    while (items.value.length < targetRank && hasNextPage.value) {
+      await fetchNextPage();
+
+      // Wait for the DOM to update
+      await nextTick();
+
+      // Check if the row is now available
+      if (scrollToRow()) {
+        return;
+      }
+    }
+  }
+
+  // Final attempt after all loading
+  await nextTick();
+  scrollToRow();
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardDetail',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/components/views/leaderboard-landing.vue b/frontend/app/components/modules/leaderboards/components/views/leaderboard-landing.vue
new file mode 100644
index 000000000..08c658072
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/components/views/leaderboard-landing.vue
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="container pt-16">
+    <h1 class="text-4xl font-secondary font-light">Leaderboards</h1>
+    <p class="text-neutral-500">Discover and compare open source projects across various performance metrics</p>
+    <div class="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-8 mt-8">
+      <div
+        v-for="config in leaderboardConfigs"
+        :key="config.key"
+        class="h-full flex"
+      >
+        <lfx-leaderboard-card
+          v-if="!isPending"
+          :config="config"
+          :leaderboards="getLeaderboardsByType(config.key)"
+        />
+        <lfx-skeleton
+          v-else
+          class="!w-full !h-[440px] rounded-lg"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import leaderboardConfigs from '../../config/index.config';
+import LfxLeaderboardCard from '../sections/leaderboard-card.vue';
+import { LEADERBOARD_API_SERVICE } from '../../services/leaderboard.api.service';
+import LfxSkeleton from '~/components/uikit/skeleton/skeleton.vue';
+
+const { data, isPending } = LEADERBOARD_API_SERVICE.fetchLeaderboardLanding();
+
+const leaderboardsByType = computed(() => {
+  return LEADERBOARD_API_SERVICE.groupLeaderboardsByType(data.value?.data || []);
+});
+
+const getLeaderboardsByType = (leaderboardType: string) => {
+  const config = leaderboardConfigs.find((config) => config.key === leaderboardType);
+  return leaderboardsByType.value[leaderboardType] || [];
+};
+</script>
+<script lang="ts">
+export default {
+  name: 'LfxLeaderboardLanding',
+};
+</script>
diff --git a/frontend/app/components/modules/leaderboards/config/codebase-size.config.ts b/frontend/app/components/modules/leaderboards/config/codebase-size.config.ts
new file mode 100644
index 000000000..615ababcf
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/codebase-size.config.ts
@@ -0,0 +1,17 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const codebaseSizeConfig: LeaderboardConfig = {
+  key: 'codebase-size',
+  name: 'Codebase size',
+  description:
+    'These projects maintain the largest codebases measured by total source lines of code.',
+  icon: 'laptop-code',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Lines of code',
+  hideTrend: true,
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/commit-activity.config.ts b/frontend/app/components/modules/leaderboards/config/commit-activity.config.ts
new file mode 100644
index 000000000..a8ce1b056
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/commit-activity.config.ts
@@ -0,0 +1,16 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const commitActivityConfig: LeaderboardConfig = {
+  key: 'commit-activity',
+  name: 'Commit activity',
+  description:
+    'These projects recorded the most commits during the past 12 months, showing high development momentum.',
+  icon: 'code-commit',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Commits (12m)',
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/fastest-mergers.config.ts b/frontend/app/components/modules/leaderboards/config/fastest-mergers.config.ts
new file mode 100644
index 000000000..359f84def
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/fastest-mergers.config.ts
@@ -0,0 +1,15 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import TimeDurationDisplay from '../components/data-displays/time-duration.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const fastestMergersConfig: LeaderboardConfig = {
+  key: 'fastest-mergers',
+  name: 'Fastest mergers',
+  description: 'These projects merge pull requests the fastest over the past 12 months.',
+  icon: 'code-merge',
+  dataDisplay: TimeDurationDisplay,
+  columnLabel: 'Median time to merge (12m)',
+  dataType: 'duration',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/fastest-responders.config.ts b/frontend/app/components/modules/leaderboards/config/fastest-responders.config.ts
new file mode 100644
index 000000000..e038e53ca
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/fastest-responders.config.ts
@@ -0,0 +1,16 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import TimeDurationDisplay from '../components/data-displays/time-duration.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const fastestRespondersConfig: LeaderboardConfig = {
+  key: 'fastest-responders',
+  name: 'Fastest responders',
+  description:
+    'These projects achieve the shortest median time to first response on issues over the past 12 months.',
+  icon: 'comment-check',
+  dataDisplay: TimeDurationDisplay,
+  columnLabel: 'Median time to 1st response (12m)',
+  dataType: 'duration',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/focused-teams.config.ts b/frontend/app/components/modules/leaderboards/config/focused-teams.config.ts
new file mode 100644
index 000000000..2fd746ecb
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/focused-teams.config.ts
@@ -0,0 +1,16 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const focusedTeamsConfig: LeaderboardConfig = {
+  key: 'focused-teams',
+  name: 'Most focused teams',
+  description: 'These projects show the highest productivity per contributor.',
+  icon: 'bullseye-arrow',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Avg. commits per author',
+  columnTooltip: 'For projects with 10+ authors',
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/index.config.ts b/frontend/app/components/modules/leaderboards/config/index.config.ts
new file mode 100644
index 000000000..ff8e3f032
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/index.config.ts
@@ -0,0 +1,35 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import type { LeaderboardConfig } from './types/leaderboard.types';
+import { mostActiveContributorsConfig } from './most-active-contributors.config';
+import { mostActiveOrganizationsConfig } from './most-active-organizations.config';
+// import { longestRunningConfig } from './longest-running.config';
+import { commitActivityConfig } from './commit-activity.config';
+import { focusedTeamsConfig } from './focused-teams.config';
+import { smallTeamsMassiveOutputConfig } from './small-teams-massive-output.config';
+import { codebaseSizeConfig } from './codebase-size.config';
+import { fastestRespondersConfig } from './fastest-responders.config';
+import { fastestMergersConfig } from './fastest-mergers.config';
+import { resolutionRateConfig } from './resolution-rate.config';
+// import { top100ProjectsConfig } from './top-100-projects.config';
+// import { top100ContributorsConfig } from './top-100-contributors.config';
+// import { top100OrganizationsConfig } from './top-100-organizations.config';
+
+const leaderboardConfigs: LeaderboardConfig[] = [
+  // top100ProjectsConfig,
+  // top100ContributorsConfig,
+  // top100OrganizationsConfig,
+  mostActiveContributorsConfig,
+  mostActiveOrganizationsConfig,
+  commitActivityConfig,
+  // longestRunningConfig,
+  codebaseSizeConfig,
+  fastestRespondersConfig,
+  fastestMergersConfig,
+  focusedTeamsConfig,
+  resolutionRateConfig,
+  smallTeamsMassiveOutputConfig,
+];
+
+export default leaderboardConfigs;
diff --git a/frontend/app/components/modules/leaderboards/config/longest-running.config.ts b/frontend/app/components/modules/leaderboards/config/longest-running.config.ts
new file mode 100644
index 000000000..14a35a836
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/longest-running.config.ts
@@ -0,0 +1,17 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import TimeDurationDisplay from '../components/data-displays/time-duration.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const longestRunningConfig: LeaderboardConfig = {
+  key: 'longest-running',
+  name: 'Longest running',
+  description: 'These projects have been maintained the longest.',
+  icon: 'calendar-range',
+  dataDisplay: TimeDurationDisplay,
+  columnLabel: 'Time since first commit',
+  columnTooltip: 'For projects with at least 1 commit in the last 12 months',
+  hideTrend: true,
+  dataType: 'timestamp',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/most-active-contributors.config.ts b/frontend/app/components/modules/leaderboards/config/most-active-contributors.config.ts
new file mode 100644
index 000000000..dc113305f
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/most-active-contributors.config.ts
@@ -0,0 +1,16 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const mostActiveContributorsConfig: LeaderboardConfig = {
+  key: 'active-contributors',
+  name: 'Most active contributors',
+  description:
+    'These projects attracted the highest number of unique contributors over the past 12 months.',
+  icon: 'people-group',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Contributors (12m)',
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/most-active-organizations.config.ts b/frontend/app/components/modules/leaderboards/config/most-active-organizations.config.ts
new file mode 100644
index 000000000..c6698ce7e
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/most-active-organizations.config.ts
@@ -0,0 +1,16 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const mostActiveOrganizationsConfig: LeaderboardConfig = {
+  key: 'active-organizations',
+  name: 'Most active organizations',
+  description:
+    'These projects brought together the largest number of distinct contributing organizations in the past 12 months.',
+  icon: 'buildings',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Organizations (12m)',
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/resolution-rate.config.ts b/frontend/app/components/modules/leaderboards/config/resolution-rate.config.ts
new file mode 100644
index 000000000..57d122c7b
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/resolution-rate.config.ts
@@ -0,0 +1,17 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const resolutionRateConfig: LeaderboardConfig = {
+  key: 'resolution-rate',
+  name: 'Highest resolution rate',
+  description:
+    'These projects keep development flowing, with most pull requests merged relative to issues opened.',
+  icon: 'rocket-launch',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'PR/Issue ratio',
+  dataType: 'float',
+  decimals: 2,
+};
diff --git a/frontend/app/components/modules/leaderboards/config/small-teams-massive-output.config.ts b/frontend/app/components/modules/leaderboards/config/small-teams-massive-output.config.ts
new file mode 100644
index 000000000..c5991d5d8
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/small-teams-massive-output.config.ts
@@ -0,0 +1,17 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const smallTeamsMassiveOutputConfig: LeaderboardConfig = {
+  key: 'small-teams-massive-output',
+  name: 'Small teams, massive output ',
+  description:
+    'These projects demonstrate exceptional productivity, achieving the highest commit volumes with 50 or fewer contributors.',
+  icon: 'arrow-up-big-small',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Commits',
+  columnTooltip: 'For projects with ≤50 contributors',
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/top-100-contributors.config.ts b/frontend/app/components/modules/leaderboards/config/top-100-contributors.config.ts
new file mode 100644
index 000000000..0abf28bb5
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/top-100-contributors.config.ts
@@ -0,0 +1,16 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const top100ContributorsConfig: LeaderboardConfig = {
+  key: 'top-100-contributors',
+  name: 'Top 100 contributors',
+  description:
+    'Developers ranked by volume of contributions over the last 10 years, highlighting the most active and influential individuals.',
+  icon: 'head-side-gear',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Contributions (10y)',
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/top-100-organizations.config.ts b/frontend/app/components/modules/leaderboards/config/top-100-organizations.config.ts
new file mode 100644
index 000000000..bd391a96d
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/top-100-organizations.config.ts
@@ -0,0 +1,16 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const top100OrganizationsConfig: LeaderboardConfig = {
+  key: 'top-100-organizations',
+  name: 'Top 100 organizations',
+  description:
+    'Most influential organizations based on the total number of contributions made over the last 10 years.',
+  icon: 'chart-network',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Contributors (10y)',
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/top-100-projects.config.ts b/frontend/app/components/modules/leaderboards/config/top-100-projects.config.ts
new file mode 100644
index 000000000..76da7b42f
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/top-100-projects.config.ts
@@ -0,0 +1,15 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import NumericDataDisplay from '../components/data-displays/numeric.vue';
+import type { LeaderboardConfig } from './types/leaderboard.types';
+
+export const top100ProjectsConfig: LeaderboardConfig = {
+  key: 'top-100-projects',
+  name: 'Top 100 projects',
+  description: 'Open source projects ranked by the total number of contributors.',
+  icon: 'trophy',
+  dataDisplay: NumericDataDisplay,
+  columnLabel: 'Contributors',
+  dataType: 'integer',
+};
diff --git a/frontend/app/components/modules/leaderboards/config/types/leaderboard.types.ts b/frontend/app/components/modules/leaderboards/config/types/leaderboard.types.ts
new file mode 100644
index 000000000..93323d5cc
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/config/types/leaderboard.types.ts
@@ -0,0 +1,24 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import type { Component } from 'vue';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+
+export type LeaderboardDataType = 'integer' | 'float' | 'duration' | 'timestamp';
+export interface LeaderboardConfig {
+  key: string;
+  name: string;
+  description: string;
+  icon: string;
+  dataDisplay: Component;
+  columnLabel: string;
+  columnTooltip?: string;
+  hideTrend?: boolean;
+  dataType: LeaderboardDataType;
+  decimals?: number;
+}
+
+export interface LeaderboardLandingResponse {
+  data: Leaderboard[];
+  page: number;
+  pageSize: number;
+}
diff --git a/frontend/app/components/modules/leaderboards/services/leaderboard.api.service.ts b/frontend/app/components/modules/leaderboards/services/leaderboard.api.service.ts
new file mode 100644
index 000000000..1058e1400
--- /dev/null
+++ b/frontend/app/components/modules/leaderboards/services/leaderboard.api.service.ts
@@ -0,0 +1,169 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import {
+  type QueryFunction,
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/vue-query';
+import { type ComputedRef, computed } from 'vue';
+import type { LeaderboardLandingResponse } from '../config/types/leaderboard.types';
+import { TanstackKey } from '~/components/shared/types/tanstack';
+import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
+import type { Pagination } from '~~/types/shared/pagination';
+
+export interface LeaderboardDetailQueryParams {
+  leaderboardType: string;
+  search?: string;
+  initialPageSize?: number;
+}
+
+const DEFAULT_PAGE_SIZE = 100;
+class LeaderboardApiService {
+  async prefetchLeaderboardDetails(params: ComputedRef<LeaderboardDetailQueryParams>) {
+    const queryClient = useQueryClient();
+    const queryKey = computed(() => [TanstackKey.LEADERBOARD_DETAIL, params.value.leaderboardType]);
+
+    const queryFn = computed<QueryFunction<Pagination<Leaderboard>>>(() =>
+      this.leaderboardDetailQueryFn(() => ({
+        leaderboardType: params.value.leaderboardType,
+        initialPageSize: params.value.initialPageSize,
+        search: params.value.search,
+      })),
+    );
+
+    return await queryClient.prefetchInfiniteQuery<
+      Pagination<Leaderboard>,
+      Error,
+      Pagination<Leaderboard>,
+      readonly unknown[],
+      number
+    >({
+      queryKey,
+      //@ts-expect-error - TanStack Query type inference issue with Vue
+      queryFn,
+      getNextPageParam: this.getNextPageLeaderboardParam,
+      initialPageParam: 0,
+    });
+  }
+  getNextPageLeaderboardParam(lastPage: Pagination<Leaderboard>) {
+    let nextPage = Number(lastPage.page) + 1;
+
+    // Handle the case where initialPageSize is greater than DEFAULT_PAGE_SIZE
+    if (lastPage.pageSize > DEFAULT_PAGE_SIZE) {
+      nextPage = Number(lastPage.pageSize) / DEFAULT_PAGE_SIZE + 1;
+    }
+
+    const totalPages = Math.ceil(lastPage.total / DEFAULT_PAGE_SIZE);
+    return nextPage < totalPages ? nextPage : null;
+  }
+
+  fetchLeaderboardDetails(params: ComputedRef<LeaderboardDetailQueryParams>) {
+    const queryKey = computed(() => [TanstackKey.LEADERBOARD_DETAIL, params.value.leaderboardType]);
+
+    const queryFn = computed<QueryFunction<Pagination<Leaderboard>>>(() =>
+      this.leaderboardDetailQueryFn(() => ({
+        leaderboardType: params.value.leaderboardType,
+        initialPageSize: params.value.initialPageSize,
+        search: params.value.search,
+      })),
+    );
+
+    return useInfiniteQuery<
+      Pagination<Leaderboard>,
+      Error,
+      Pagination<Leaderboard>,
+      readonly unknown[],
+      number
+    >({
+      queryKey,
+      //@ts-expect-error - TanStack Query type inference issue with Vue
+      queryFn,
+      getNextPageParam: this.getNextPageLeaderboardParam,
+      initialPageParam: 0,
+    });
+  }
+
+  leaderboardDetailQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<Pagination<Leaderboard>, readonly unknown[], number> {
+    const { leaderboardType, initialPageSize, search } = query();
+    return async ({ pageParam = 0 }) => {
+      const pageSize = pageParam === 0 ? (initialPageSize ?? DEFAULT_PAGE_SIZE) : DEFAULT_PAGE_SIZE;
+
+      return await $fetch(`/api/leaderboard/${leaderboardType}`, {
+        params: {
+          page: pageParam,
+          pageSize,
+          search,
+        },
+      });
+    };
+  }
+
+  fetchLeaderboardDetailSearch(params: ComputedRef<LeaderboardDetailQueryParams>) {
+    const queryKey = computed(() => [
+      TanstackKey.LEADERBOARD_DETAIL_SEARCH,
+      params.value.leaderboardType,
+      params.value.search,
+    ]);
+
+    const queryFn = computed<QueryFunction<Pagination<Leaderboard>>>(() =>
+      this.leaderboardDetailQueryFn(() => ({
+        leaderboardType: params.value.leaderboardType,
+        initialPageSize: 15,
+        search: params.value.search,
+      })),
+    );
+
+    return useInfiniteQuery<
+      Pagination<Leaderboard>,
+      Error,
+      Pagination<Leaderboard>,
+      readonly unknown[],
+      number
+    >({
+      queryKey,
+      //@ts-expect-error - TanStack Query type inference issue with Vue
+      queryFn,
+      getNextPageParam: this.getNextPageLeaderboardParam,
+      initialPageParam: 0,
+      enabled: computed(() => !!params.value.search && params.value.search.trim().length > 0),
+    });
+  }
+
+  fetchLeaderboardLanding() {
+    const queryKey = computed(() => [TanstackKey.LEADERBOARD_INDEX]);
+    const queryFn = this.leaderboardLandingQueryFn();
+
+    return useQuery<
+      LeaderboardLandingResponse,
+      Error,
+      LeaderboardLandingResponse,
+      readonly unknown[]
+    >({ queryKey, queryFn });
+  }
+
+  leaderboardLandingQueryFn(): QueryFunction<LeaderboardLandingResponse, readonly unknown[]> {
+    return async () => {
+      return await $fetch<LeaderboardLandingResponse>('/api/leaderboard', {
+        params: { maxRank: 5 },
+      });
+    };
+  }
+
+  groupLeaderboardsByType(leaderboards: Leaderboard[]): Record<string, Leaderboard[]> {
+    return leaderboards.reduce(
+      (acc, leaderboard) => {
+        acc[leaderboard.leaderboardType] = [
+          ...(acc[leaderboard.leaderboardType] || []),
+          leaderboard,
+        ];
+        return acc;
+      },
+      {} as Record<string, Leaderboard[]>,
+    );
+  }
+}
+
+export const LEADERBOARD_API_SERVICE = new LeaderboardApiService();
diff --git a/frontend/app/components/shared/types/routes.ts b/frontend/app/components/shared/types/routes.ts
index d0ff12900..bd9e344f9 100644
--- a/frontend/app/components/shared/types/routes.ts
+++ b/frontend/app/components/shared/types/routes.ts
@@ -4,6 +4,8 @@ export enum LfxRoutes {
   HOME = '/',
   EXPLORE = 'index',
   OPENSOURCEINDEX = 'open-source-index',
+  LEADERBOARDS = 'leaderboards',
+  LEADERBOARD = 'leaderboards-key',
   OPENSOURCEINDEX_GROUP = 'open-source-index-group-slug',
   OPENSOURCEINDEX_CATEGORY = 'open-source-index-category-slug',
   COLLECTIONS = 'collection',
diff --git a/frontend/app/components/shared/types/tanstack.ts b/frontend/app/components/shared/types/tanstack.ts
index 5f975d1df..9b119eec2 100644
--- a/frontend/app/components/shared/types/tanstack.ts
+++ b/frontend/app/components/shared/types/tanstack.ts
@@ -63,4 +63,9 @@ export enum TanstackKey {
   TOP_CONTRIBUTORS = 'explore-top-contributors',
   TOP_ORGANIZATIONS = 'explore-top-organizations',
   TOP_PROJECTS = 'explore-top-projects',
+
+  // Leaderboards
+  LEADERBOARD_INDEX = 'leaderboard-index',
+  LEADERBOARD_DETAIL = 'leaderboard-detail',
+  LEADERBOARD_DETAIL_SEARCH = 'leaderboard-detail-search',
 }
diff --git a/frontend/app/components/shared/utils/formatter.ts b/frontend/app/components/shared/utils/formatter.ts
index 97bb6f073..7a7163874 100644
--- a/frontend/app/components/shared/utils/formatter.ts
+++ b/frontend/app/components/shared/utils/formatter.ts
@@ -7,7 +7,7 @@
  * @returns Formatted string representation of the number
  */
 
-import { Duration } from 'luxon';
+import { DateTime, Duration } from 'luxon';
 import pluralize from 'pluralize';
 import { FormatterUnits } from '~/components/shared/types/formatter.types';
 
@@ -131,3 +131,60 @@ export const formatSecondsToDuration = (
   // Only show decimal for seconds
   return convertToUnit(value, FormatterUnits.SECONDS, showUnits, roundTo);
 };
+
+export const formatValueToLargestUnitDuration = (
+  value: number,
+  noOfUnits: number = 2,
+  isDuration?: boolean,
+): string => {
+  let duration;
+
+  if (isDuration) {
+    // Value is already a duration in seconds - create Duration object directly
+    duration = Duration.fromObject({ seconds: value }).shiftTo(
+      'years',
+      'months',
+      'days',
+      'hours',
+      'minutes',
+      'seconds',
+    );
+  } else {
+    // Calculate duration from timestamp to now
+    const timestamp = DateTime.fromMillis(value);
+    const now = DateTime.now();
+    duration = now.diff(timestamp, ['years', 'months', 'days', 'hours', 'minutes', 'seconds']);
+  }
+
+  const { years, months, days, hours, minutes, seconds } = duration.toObject();
+
+  const units: Array<{ value: number; label: string }> = [];
+
+  // Build array of non-zero units
+  if (years && years > 0) {
+    units.push({ value: Math.floor(years), label: 'y' });
+  }
+  if (months && months > 0) {
+    units.push({ value: Math.floor(months), label: 'mo' });
+  }
+
+  if (days && days > 0) {
+    units.push({ value: Math.floor(days), label: 'd' });
+  }
+
+  if (hours && hours > 0) {
+    units.push({ value: Math.floor(hours), label: 'h' });
+  }
+  if (minutes && minutes > 0) {
+    units.push({ value: Math.floor(minutes), label: 'm' });
+  }
+  if (seconds && seconds > 0) {
+    units.push({ value: Math.floor(seconds), label: 's' });
+  }
+
+  // Return up to 2 units
+  return units
+    .slice(0, noOfUnits)
+    .map((unit) => `${unit.value}${unit.label}`)
+    .join(' ');
+};
diff --git a/frontend/app/components/uikit/button/button.scss b/frontend/app/components/uikit/button/button.scss
index 519290138..23416c5ec 100644
--- a/frontend/app/components/uikit/button/button.scss
+++ b/frontend/app/components/uikit/button/button.scss
@@ -68,6 +68,22 @@
     }
   }
 
+  &-ghost {
+    @apply bg-transparent text-neutral-900 font-semibold;
+
+    &:hover {
+      @apply bg-neutral-50;
+    }
+
+    &:active {
+      @apply bg-transparent;
+    }
+
+    &:disabled {
+      @apply text-neutral-400;
+    }
+  }
+
   &-large {
     @apply text-base px-5 py-3;
   }
diff --git a/frontend/app/components/uikit/button/types/button.types.ts b/frontend/app/components/uikit/button/types/button.types.ts
index 3a64a192b..11ec2649a 100644
--- a/frontend/app/components/uikit/button/types/button.types.ts
+++ b/frontend/app/components/uikit/button/types/button.types.ts
@@ -1,6 +1,6 @@
 // Copyright (c) 2025 The Linux Foundation and each contributor.
 // SPDX-License-Identifier: MIT
-export const buttonTypes = ['primary', 'secondary', 'tertiary', 'transparent'] as const;
+export const buttonTypes = ['primary', 'secondary', 'tertiary', 'transparent', 'ghost'] as const;
 export const buttonSizes = ['small', 'medium', 'large'] as const;
 export const iconPosition = ['left', 'right'] as const;
 
diff --git a/frontend/app/config/menu/footer.ts b/frontend/app/config/menu/footer.ts
index c5d87c888..eda5614a7 100644
--- a/frontend/app/config/menu/footer.ts
+++ b/frontend/app/config/menu/footer.ts
@@ -24,6 +24,10 @@ export const lfxFooterMenu: FooterMenuSection[] = [
   {
     title: 'LFX Insights',
     links: [
+      {
+        name: 'Leaderboards',
+        route: LfxRoutes.LEADERBOARDS,
+      },
       {
         name: 'Collections',
         route: LfxRoutes.COLLECTIONS,
diff --git a/frontend/app/config/menu/index.ts b/frontend/app/config/menu/index.ts
index 0eeda8664..7226adde5 100644
--- a/frontend/app/config/menu/index.ts
+++ b/frontend/app/config/menu/index.ts
@@ -16,6 +16,11 @@ interface MenuConfig {
 
 export const lfxMenu: MenuConfig = {
   links: [
+    {
+      label: 'Leaderboards',
+      icon: 'trophy',
+      route: LfxRoutes.LEADERBOARDS,
+    },
     {
       label: 'Open Source Index',
       icon: 'globe',
diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 12505bb08..ec392f3bf 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -3,7 +3,7 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <template>
-  <main class="min-h-screen flex flex-col pt-28 sm:pt-21 lg:pt-24">
+  <main class="min-h-screen flex flex-col pt-20 sm:pt-21 lg:pt-24">
     <lfx-navbar />
     <div>
       <slot />
diff --git a/frontend/app/pages/leaderboards/[key].vue b/frontend/app/pages/leaderboards/[key].vue
new file mode 100644
index 000000000..e38596d0a
--- /dev/null
+++ b/frontend/app/pages/leaderboards/[key].vue
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="bg-white lg:!pb-30 pb-20 lg:!-mb-30 -mb-20">
+    <lfx-leaderboard-detail :leaderboard-key="leaderboardKey" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'nuxt/app';
+import { computed } from 'vue';
+import LfxLeaderboardDetail from '~/components/modules/leaderboards/components/views/leaderboard-detail.vue';
+
+const route = useRoute();
+const leaderboardKey = computed(() => route.params.key as string);
+
+const title = `${leaderboardKey.value} | Open Source Leaderboards | LFX Insights`;
+const description = `Explore the ${leaderboardKey.value} leaderboard on LFX Insights. Powered by the Linux Foundation.`;
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+  twitterTitle: title,
+  twitterDescription: description,
+});
+</script>
diff --git a/frontend/app/pages/leaderboards/index.vue b/frontend/app/pages/leaderboards/index.vue
new file mode 100644
index 000000000..91e806279
--- /dev/null
+++ b/frontend/app/pages/leaderboards/index.vue
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="bg-white lg:!pb-30 pb-20 lg:!-mb-30 -mb-20">
+    <lfx-leaderboard-landing />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LfxLeaderboardLanding from '~/components/modules/leaderboards/components/views/leaderboard-landing.vue';
+
+const title = 'Open Source Leaderboards | LFX Insights';
+const description =
+  'Explore leaderboards for the world’s most critical open source projects. Powered by the Linux Foundation.';
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+  twitterTitle: title,
+  twitterDescription: description,
+});
+</script>
diff --git a/frontend/setup/caching.ts b/frontend/setup/caching.ts
index ce33f6b92..6dd945322 100644
--- a/frontend/setup/caching.ts
+++ b/frontend/setup/caching.ts
@@ -4,15 +4,12 @@ const longCache = 86400; // 1 day in seconds
 const shortCache = 3600; // 1 hour in seconds
 
 export default {
-  routeRules:
-    process.env.NUXT_APP_ENV === 'production'
+  routeRules: {
+    '/auth/callback': { redirect: '/api/auth/callback' },
+    '/callback': { redirect: '/api/auth/callback' },
+    '/api/auth/**': { prerender: false, index: false, cache: false },
+    ...(process.env.NUXT_APP_ENV === 'production'
       ? {
-          '/auth/callback': { redirect: '/api/auth/callback' },
-          '/api/auth/callback': { prerender: false, index: false, cache: false },
-          '/api/auth/login': { prerender: false, index: false, cache: false },
-          '/api/auth/logout': { prerender: false, index: false, cache: false },
-          '/api/auth/user': { prerender: false, index: false, cache: false },
-          '/api/auth/silent-check': { prerender: false, index: false, cache: false },
           '/api/health': { cache: false },
           '/api/chat/**': { cache: false },
           '/api/health/live': { cache: false },
@@ -22,24 +19,20 @@ export default {
           '/api/category': { cache: { maxAge: longCache, base: 'redis' } },
           '/api/collection': { cache: { maxAge: longCache, base: 'redis' } },
           '/api/explore/**': { cache: { maxAge: longCache, base: 'redis' } },
+          '/api/leaderboard': { cache: { maxAge: longCache, base: 'redis' } },
           '/api/leaderboard/**': { cache: { maxAge: longCache, base: 'redis' } },
           '/api/project': { cache: { maxAge: longCache, base: 'redis' } },
           '/api/ossindex': { cache: { maxAge: longCache, base: 'redis' } },
           '/api/**': { cache: { maxAge: shortCache, base: 'redis' } },
+          '/leaderboard': { cache: { maxAge: longCache, base: 'redis' } },
+          '/leaderboard/**': { cache: { maxAge: longCache, base: 'redis' } },
           '/project/**': { cache: { maxAge: shortCache, base: 'redis' } },
           '/collection/**': { cache: { maxAge: shortCache, base: 'redis' } },
           '/collection': { cache: { maxAge: shortCache, base: 'redis' } },
           '**': { cache: { maxAge: longCache, base: 'redis' } },
         }
-      : {
-          '/auth/callback': { redirect: '/api/auth/callback' },
-          '/callback': { redirect: '/api/auth/callback' },
-          '/api/auth/callback': { prerender: false, index: false, cache: false },
-          '/api/auth/login': { prerender: false, index: false, cache: false },
-          '/api/auth/logout': { prerender: false, index: false, cache: false },
-          '/api/auth/user': { prerender: false, index: false, cache: false },
-          '/api/auth/silent-check': { prerender: false, index: false, cache: false },
-        },
+      : {}),
+  },
   nitro: {
     storage: {
       redis: {