diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index c414dce898..4e23c71331 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -4,7 +4,10 @@
       >Price ({{ chainSymbol }})
     </span>
     <NeoDropdown class="py-0">
-      <NeoButton :label="selectedTimeRange.label" class="time-range-button" />
+      <NeoButton
+        :label="selectedTimeRange.label"
+        class="time-range-button"
+        no-shadow />
 
       <template #items>
         <NeoDropdownItem
@@ -19,7 +22,7 @@
       </template>
     </NeoDropdown>
 
-    <div class="content">
+    <div :class="{ content: !chartHeight }" :style="heightStyle">
       <canvas id="priceChart" />
     </div>
   </div>
@@ -66,7 +69,12 @@ const setTimeRange = (value: { value: number; label: string }) => {
 
 const props = defineProps<{
   priceChartData?: [Date, number][][]
+  chartHeight?: string
 }>()
+
+const heightStyle = computed(() =>
+  props.chartHeight ? `height: ${props.chartHeight}` : ''
+)
 let Chart: ChartJS<'line', any, unknown>
 
 onMounted(() => {
@@ -124,11 +132,11 @@ const getPriceChartData = () => {
     )?.getContext('2d')
     if (ctx) {
       const commonStyle = {
-        tension: 0,
+        tension: 0.2,
         pointRadius: 6,
         pointHoverRadius: 6,
         pointHoverBackgroundColor: isDarkMode.value ? '#181717' : 'white',
-        borderJoinStyle: 'miter' as const,
+        borderJoinStyle: 'round' as const,
         radius: 0,
         pointStyle: 'rect',
         borderWidth: 1,
@@ -157,6 +165,16 @@ const getPriceChartData = () => {
         },
         options: {
           maintainAspectRatio: false,
+          responsive: true,
+          responsiveAnimationDuration: 0,
+          transitions: {
+            resize: {
+              animation: {
+                duration: 0,
+              },
+            },
+          },
+
           plugins: {
             customCanvasBackgroundColor: {
               color: isDarkMode.value ? '#181717' : 'white',
@@ -225,7 +243,7 @@ const getPriceChartData = () => {
                 callback: (value) => {
                   return `${Number(value).toFixed(2)}  `
                 },
-                maxTicksLimit: 7,
+                stepSize: 1,
                 color: lineColor.value,
               },
               grid: {
diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
new file mode 100644
index 0000000000..14fcfd303b
--- /dev/null
+++ b/components/collection/activity/Activity.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="is-flex">
+    <SidebarFilter />
+    <div ref="wrapper" class="w-full mt-5">
+      <div v-if="tablet">
+        <div class="columns">
+          <div class="column is-two-thirds">
+            <ActivityChart :events="events" />
+          </div>
+          <div class="column">
+            <OwnerInsights :owners="owners" :flippers="flippers" />
+          </div>
+        </div>
+        <BreadcrumbsFilter />
+      </div>
+      <div v-else>
+        <div class="is-flex is-flex-direction-column gap">
+          <OwnerInsights :owners="owners" :flippers="flippers" />
+          <div class="max-width">
+            <ActivityChart :events="events" />
+          </div>
+        </div>
+      </div>
+      <hr class="mb-40" :class="{ 'my-40': !isBreadCrumbsShowing }" />
+      <Events :events="sortedEventsWithOffersDesc" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ActivityChart from './ActivityChart.vue'
+import OwnerInsights from './OwnerInsights.vue'
+import Events from './events/Events.vue'
+import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
+import { Interaction } from '@kodadot1/minimark'
+import { useResizeObserver } from '@vueuse/core'
+import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
+import { isAnyActivityFilterActive } from './utils'
+import { mintInteraction } from '@/composables/collectionActivity/helpers'
+import { useCollectionActivity } from '@/composables/collectionActivity/useCollectionActivity'
+const mobileBreakpoint = 800
+const route = useRoute()
+const tablet = ref(true)
+const wrapper = ref<HTMLDivElement | null>(null)
+
+const isBreadCrumbsShowing = computed(
+  () => isAnyActivityFilterActive() && tablet.value
+)
+
+const collectionId = computed(() => route.params.id)
+const { events, flippers, owners, offers } = useCollectionActivity({
+  collectionId: collectionId.value,
+})
+
+const InteractionIncluded = [
+  Interaction.BUY,
+  Interaction.LIST,
+  mintInteraction(),
+  Interaction.SEND,
+]
+
+const filteredEvents = computed(() =>
+  events.value.filter((event) =>
+    InteractionIncluded.includes(event.interaction as Interaction)
+  )
+)
+const withOffers = computed(() => [...filteredEvents.value, ...offers.value])
+
+// newest events first (bigger timestamp first)
+const sortedEventsWithOffersDesc = computed(() =>
+  withOffers.value.sort((a, b) => b.timestamp - a.timestamp)
+)
+
+useResizeObserver(wrapper, (entry) => {
+  if (entry[0].contentRect.width >= mobileBreakpoint) {
+    tablet.value = true
+  } else {
+    tablet.value = false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.gap {
+  gap: 2.5rem;
+}
+.my-40 {
+  margin: 2.5rem 0;
+}
+.mb-40 {
+  margin-bottom: 2.5rem;
+}
+.is-flex-basis-two-thirds {
+  flex-basis: 66.6%;
+}
+.is-flex-basis-auto {
+  flex-basis: auto;
+}
+
+//hack to make the chart responsive
+.max-width {
+  max-width: calc(100% - 1px);
+}
+</style>
diff --git a/components/collection/activity/ActivityChart.vue b/components/collection/activity/ActivityChart.vue
new file mode 100644
index 0000000000..cb84a30a99
--- /dev/null
+++ b/components/collection/activity/ActivityChart.vue
@@ -0,0 +1,53 @@
+<template>
+  <PriceChart
+    v-if="events.length > 0"
+    :price-chart-data="chartData"
+    chart-height="350px" />
+</template>
+
+<script setup lang="ts">
+import { ActivityInteraction } from '@/components/rmrk/service/scheme'
+import { Interaction } from '@kodadot1/minimark'
+import PriceChart from '@/components/chart/PriceChart.vue'
+import { bin, displayValue, sortAsc, toDataPoint } from './utils'
+
+const props = withDefaults(
+  defineProps<{
+    events: ActivityInteraction[]
+  }>(),
+  {
+    events: () => [],
+  }
+)
+
+const buyEvents = computed(() =>
+  sortAsc(
+    props.events
+      .filter((e) => e.interaction === Interaction.BUY)
+      .map(toDataPoint)
+  )
+)
+const listEvents = computed(() =>
+  sortAsc(
+    props.events
+      .filter((e) => e.interaction === Interaction.LIST)
+      .map(toDataPoint)
+  )
+)
+
+const chartData = computed(() => {
+  const buyBins = bin(buyEvents.value, { days: 1 })
+  const listBins = bin(listEvents.value, { days: 1 })
+
+  const binnedBuyEvents = buyBins.map(({ timestamp, value }) => [
+    new Date(timestamp),
+    displayValue(value),
+  ]) as [Date, number][]
+  const binnedListEvents = listBins.map(({ timestamp, value }) => [
+    new Date(timestamp),
+    displayValue(value),
+  ]) as [Date, number][]
+
+  return [binnedBuyEvents, binnedListEvents]
+})
+</script>
diff --git a/components/collection/activity/OwnerInsights.vue b/components/collection/activity/OwnerInsights.vue
new file mode 100644
index 0000000000..49d0ced1cc
--- /dev/null
+++ b/components/collection/activity/OwnerInsights.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="fixed-height border">
+    <div class="py-4 px-5 is-flex border-bottom" aria-label="controls">
+      <div
+        class="mr-4 is-clickable"
+        :class="{ 'has-text-weight-bold': activeTab === Tabs.holders }"
+        @click="activeTab = Tabs.holders">
+        {{ $t('holders') }}
+      </div>
+      <div
+        class="is-clickable"
+        :class="{ 'has-text-weight-bold': activeTab === Tabs.flippers }"
+        @click="activeTab = Tabs.flippers">
+        {{ $t('flippers') }}
+      </div>
+    </div>
+    <div class="py-4 limit-height is-scrollable">
+      <HoldersTab v-if="activeTab === Tabs.holders" :owners="owners" />
+      <FlippersTab v-if="activeTab === Tabs.flippers" :flippers="flippers" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HoldersTab from './ownerInsightsTabs/HolderTab.vue'
+import FlippersTab from './ownerInsightsTabs/FlipperTab.vue'
+import { Flippers, Owners } from '@/composables/collectionActivity/types'
+
+enum Tabs {
+  holders,
+  flippers,
+}
+
+defineProps<{
+  owners?: Owners
+  flippers?: Flippers
+}>()
+const activeTab = ref(Tabs.holders)
+</script>
+
+<style lang="scss" scoped>
+.fixed-height {
+  height: 350px;
+}
+.limit-height {
+  max-height: 290px;
+}
+.is-scrollable {
+  overflow-y: auto;
+}
+</style>
diff --git a/components/collection/activity/events/EventRow.vue b/components/collection/activity/events/EventRow.vue
new file mode 100644
index 0000000000..fbe7b6ef34
--- /dev/null
+++ b/components/collection/activity/events/EventRow.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <EventRowDesktop v-if="variant === 'Desktop'" :event="event" />
+    <EventRowTablet v-else :event="event" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  InteractionWithNFT,
+  Offer,
+} from '@/composables/collectionActivity/types'
+import EventRowDesktop from './eventRow/EventRowDesktop.vue'
+import EventRowTablet from './eventRow/EventRowTablet.vue'
+
+defineProps<{
+  event: InteractionWithNFT | Offer
+  variant: 'Touch' | 'Desktop'
+}>()
+</script>
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
new file mode 100644
index 0000000000..9cf0241c15
--- /dev/null
+++ b/components/collection/activity/events/Events.vue
@@ -0,0 +1,115 @@
+<template>
+  <div ref="eventsContainer">
+    <div v-if="events.length > 0">
+      <div v-if="desktop" class="columns is-size-7 has-text-grey">
+        <div class="column">
+          <span>{{ $t('activity.event.item') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.event') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.amount') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.from') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.to') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.time') }}</span>
+        </div>
+      </div>
+      <EventRow
+        v-for="event in displayedEvents"
+        :key="event.timestamp"
+        :variant="variant"
+        :event="event" />
+      <div ref="sentinel" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EventRow from './EventRow.vue'
+import { useIntersectionObserver } from '@vueuse/core'
+import { Interaction } from '@kodadot1/minimark'
+import { isAnyActivityFilterActive } from '../utils'
+import { useResizeObserver } from '@vueuse/core'
+import { mintInteraction } from '@/composables/collectionActivity/helpers'
+import {
+  InteractionWithNFT,
+  Offer,
+  OfferInteraction,
+} from '@/composables/collectionActivity/types'
+
+const desktop = ref(true)
+const desktopBreakPoint = 1024
+const eventsContainer = ref<HTMLDivElement | null>(null)
+const variant = computed(() => (desktop.value ? 'Desktop' : 'Touch'))
+
+const props = withDefaults(
+  defineProps<{
+    events: (InteractionWithNFT | Offer)[]
+  }>(),
+  {
+    events: () => [],
+  }
+)
+
+useResizeObserver(eventsContainer, (entry) => {
+  if (entry[0].contentRect.width >= desktopBreakPoint) {
+    desktop.value = true
+  } else {
+    desktop.value = false
+  }
+})
+
+const offset = ref(10)
+
+const filteredEvents = computed(() => {
+  const query = useRoute().query
+  const noFilterisActive = !isAnyActivityFilterActive()
+  // don't filter events if no filter is applied
+  if (noFilterisActive) {
+    return props.events
+  }
+
+  const InteractionToKeep = {
+    [Interaction.BUY]: is(query?.sale as string),
+    [mintInteraction()]: is(query?.mint as string),
+    [Interaction.LIST]: is(query?.listing as string),
+    [Interaction.SEND]: is(query?.transfer as string),
+    [OfferInteraction]: is(query?.offer as string),
+  }
+
+  return props.events.filter((event) => {
+    return InteractionToKeep[event.interaction]
+  })
+})
+
+const displayedEvents = ref<(InteractionWithNFT | Offer)[]>([])
+
+const displayMoreEvents = () => {
+  offset.value += 10
+}
+
+watch(
+  [filteredEvents, offset],
+  () => {
+    displayedEvents.value = filteredEvents.value.slice(0, offset.value)
+  },
+  { immediate: true }
+)
+
+const handleIntersection = (entries: IntersectionObserverEntry[]) => {
+  const target = entries[0]
+  if (target.isIntersecting) {
+    displayMoreEvents()
+  }
+}
+
+const sentinel = ref<HTMLDivElement | null>(null)
+useIntersectionObserver(sentinel, handleIntersection, { threshold: 0.66 })
+</script>
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
new file mode 100644
index 0000000000..597a8ce659
--- /dev/null
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="columns mb-2">
+    <div class="column">
+      <div class="is-flex is-align-items-center">
+        <nuxt-link
+          :to="`/${urlPrefix}/gallery/${event.nft.id}`"
+          class="height-50px">
+          <img
+            v-if="avatar"
+            :src="avatar"
+            :alt="event.nft.name"
+            width="50"
+            height="50"
+            class="border image-size" />
+          <img
+            v-else
+            src="/placeholder.webp"
+            class="border image-size"
+            width="50"
+            height="50" />
+        </nuxt-link>
+        <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+          <div class="ml-5 has-text-weight-bold is-clipped elipsis">
+            {{ event.nft.name }}
+          </div>
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="column">
+      <div class="height-50px is-flex is-align-items-center">
+        <div
+          class="border is-size-7 is-justify-content-center py-1 my-2 is-flex is-align-items-center fixed-width fixed-height"
+          :class="getInteractionColor(event.interaction)">
+          {{ interactionName }}
+        </div>
+      </div>
+    </div>
+
+    <div class="column">
+      <div class="height-50px is-flex is-align-items-center">
+        <div v-if="amount === blank">
+          {{ blank }}
+        </div>
+        <Money v-else :value="amount" />
+      </div>
+    </div>
+
+    <div class="column">
+      <div class="height-50px is-flex is-align-items-center">
+        <nuxt-link
+          v-if="fromAddress !== blank"
+          :to="`/${urlPrefix}/u/${fromAddress}`"
+          class="has-text-link">
+          <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
+        </nuxt-link>
+        <div v-else>
+          {{ blank }}
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <div class="height-50px is-flex is-align-items-center">
+        <nuxt-link
+          v-if="toAddress !== blank"
+          :to="`/${urlPrefix}/u/${toAddress}`"
+          class="has-text-link">
+          <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
+        </nuxt-link>
+        <div v-else>
+          {{ blank }}
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <div class="height-50px is-flex is-align-items-center">
+        {{ timeAgo(event.timestamp) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  InteractionWithNFT,
+  Offer,
+} from '@/composables/collectionActivity/types'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import IdentityIndex from '@/components/identity/IdentityIndex.vue'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
+import {
+  blank,
+  getAmount,
+  getFromAddress,
+  getInteractionColor,
+  getNFTAvatar,
+  getToAddress,
+  interactionNameMap,
+} from './common'
+
+const { urlPrefix } = usePrefix()
+const props = defineProps<{
+  event: InteractionWithNFT | Offer
+}>()
+
+const avatar = ref<string>()
+
+const interactionName = computed(
+  () => interactionNameMap[props.event.interaction] || props.event.interaction
+)
+const amount = computed(() => getAmount(props.event))
+
+const fromAddress = computed(() => getFromAddress(props.event))
+
+const toAddress = computed(() => getToAddress(props.event))
+
+onMounted(() => {
+  getAvatar()
+})
+
+const getAvatar = async () => {
+  if (props.event) {
+    avatar.value = await getNFTAvatar(props.event)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fixed-width {
+  width: 66px;
+}
+.fixed-height {
+  height: 22px;
+}
+.height-50px {
+  height: 50px;
+}
+.image-size {
+  width: 50px !important;
+  height: 50px !important;
+  max-width: none !important;
+}
+
+.elipsis {
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
new file mode 100644
index 0000000000..04b2d97179
--- /dev/null
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="mb-5">
+    <div class="is-flex">
+      <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+        <div class="mr-5">
+          <img
+            v-if="avatar"
+            :src="avatar"
+            :alt="event.nft.name"
+            width="50"
+            height="50"
+            class="border image-size" />
+          <img
+            v-else
+            src="/placeholder.webp"
+            class="border image-size"
+            width="50"
+            height="50" />
+        </div>
+      </nuxt-link>
+      <div class="is-flex is-flex-direction-column is-flex-grow-1">
+        <div class="is-flex is-justify-content-space-between mb-2">
+          <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+            <div class="has-text-weight-bold is-clipped elipsis">
+              {{ event.nft.name }}
+            </div>
+          </nuxt-link>
+          <div v-if="amount === blank">
+            {{ blank }}
+          </div>
+          <Money v-else :value="amount" />
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <div
+            class="border is-size-7 is-justify-content-center py-1 is-flex is-align-items-center fixed-width fixed-height"
+            :class="getInteractionColor(event.interaction)">
+            {{ interactionName }}
+          </div>
+          <div>
+            {{ timeAgo(event.timestamp) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="is-flex mt-4 gap">
+      <div class="is-flex is-align-items-center">
+        <span class="is-size-7 mr-3">{{ $t('activity.event.from') }}:</span>
+        <nuxt-link
+          v-if="fromAddress !== blank"
+          :to="`/${urlPrefix}/u/${fromAddress}`"
+          class="has-text-link">
+          <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
+        </nuxt-link>
+        <div v-else>
+          {{ blank }}
+        </div>
+      </div>
+
+      <div class="is-flex is-align-items-center">
+        <span class="is-size-7 mr-3">{{ $t('activity.event.to') }}:</span>
+        <nuxt-link
+          v-if="toAddress !== blank"
+          :to="`/${urlPrefix}/u/${toAddress}`"
+          class="has-text-link">
+          <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
+        </nuxt-link>
+        <div v-else>
+          {{ blank }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  InteractionWithNFT,
+  Offer,
+} from '@/composables/collectionActivity/types'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import IdentityIndex from '@/components/identity/IdentityIndex.vue'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
+import {
+  blank,
+  getAmount,
+  getFromAddress,
+  getInteractionColor,
+  getNFTAvatar,
+  getToAddress,
+  interactionNameMap,
+} from './common'
+
+const { urlPrefix } = usePrefix()
+const props = defineProps<{
+  event: InteractionWithNFT | Offer
+}>()
+
+const avatar = ref<string>()
+
+const interactionName = computed(
+  () => interactionNameMap[props.event.interaction] || props.event.interaction
+)
+const amount = computed(() => getAmount(props.event))
+
+const fromAddress = computed(() => getFromAddress(props.event))
+
+const toAddress = computed(() => getToAddress(props.event))
+
+onMounted(() => {
+  getAvatar()
+})
+
+const getAvatar = async () => {
+  if (props.event) {
+    avatar.value = await getNFTAvatar(props.event)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fixed-width {
+  width: 66px;
+}
+.fixed-height {
+  height: 22px;
+}
+.image-size {
+  width: 50px !important;
+  height: 50px !important;
+}
+
+.gap {
+  gap: 1rem;
+}
+</style>
diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
new file mode 100644
index 0000000000..e4dd6d8142
--- /dev/null
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -0,0 +1,86 @@
+import { Interaction } from '@kodadot1/minimark'
+import {
+  InteractionWithNFT,
+  Offer,
+  OfferInteraction,
+} from '@/composables/collectionActivity/types'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { mintInteraction } from '@/composables/collectionActivity/helpers'
+
+export const interactionNameMap = {
+  BUY: 'Sale',
+  LIST: 'List',
+  MINTNFT: 'Mint',
+  MINT: 'Mint',
+  SEND: 'Transfer',
+  Offer: 'Offer',
+}
+export const blank = '--'
+
+export const getInteractionColor = (interaction: string) =>
+  ({
+    [mintInteraction()]: 'k-yellow',
+    [Interaction.LIST]: 'k-blueaccent',
+    [Interaction.BUY]: 'k-pink',
+    [OfferInteraction]: 'k-greenaccent',
+    [Interaction.SEND]: 'theme-background-color',
+  }[interaction])
+
+export const getAmount = (
+  event: InteractionWithNFT | Offer
+): string | number => {
+  switch (event.interaction) {
+    case mintInteraction():
+      return blank
+    case Interaction.LIST:
+    case Interaction.BUY:
+      return (event as InteractionWithNFT).meta
+    case OfferInteraction:
+      return (event as Offer).price
+    default:
+      return blank
+  }
+}
+
+export const getFromAddress = (event: InteractionWithNFT | Offer): string => {
+  const interaction = event.interaction
+  if (interaction === mintInteraction() || interaction === Interaction.LIST) {
+    return blank
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return (event as InteractionWithNFT).currentOwner
+  }
+  if (interaction === OfferInteraction) {
+    return (event as Offer).caller
+  }
+  return blank
+}
+
+export const getToAddress = (event: InteractionWithNFT | Offer): string => {
+  const interaction = event.interaction
+  if (
+    interaction === mintInteraction() ||
+    interaction === Interaction.LIST ||
+    interaction === Interaction.BUY
+  ) {
+    return event.caller
+  }
+  if (interaction === Interaction.SEND) {
+    return (event as InteractionWithNFT).meta
+  }
+  return blank
+}
+export const getNFTAvatar = async (
+  event: InteractionWithNFT | Offer
+): Promise<string> => {
+  if (event.nft.meta?.image) {
+    return sanitizeIpfsUrl(event.nft.meta.image)
+  } else {
+    const meta = (await processSingleMetadata(
+      event.nft.metadata
+    )) as NFTMetadata
+    return sanitizeIpfsUrl(meta?.image)
+  }
+}
diff --git a/components/collection/activity/ownerInsightsTabs/FlipperTab.vue b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
new file mode 100644
index 0000000000..dc69576625
--- /dev/null
+++ b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div
+      v-for="[
+        flipperId,
+        { bestFlip, owned, totalBought, totalsold, latestflipTimestamp, flips },
+      ] in flippers"
+      :key="flipperId"
+      class="hide-last-hr">
+      <div class="is-flex is-flex-direction-column gap">
+        <div class="px-5">
+          <ProfileLink
+            :address="flipperId"
+            :avatar-size="35"
+            class="has-text-weight-bold" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.owned')
+            }}</span>
+            <span>{{ owned }}</span>
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalBought')
+            }}</span>
+            <Money :value="totalBought" />
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalSold')
+            }}</span>
+            <Money :value="totalsold" />
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.bestFlip')
+            }}</span>
+            <span
+              :class="{
+                'has-text-k-green': bestFlip > 0,
+                'has-text-k-red': bestFlip < 0,
+              }"
+              >{{ bestFlip === 0 ? '--' : `${format(bestFlip)}%` }}</span
+            >
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.latestActivity')
+            }}</span>
+            <span class="no-wrap">{{ timeAgo(latestflipTimestamp) }}</span>
+          </div>
+          <div>
+            <div
+              class="is-size-7 has-text-k-blue is-clickable"
+              @click="toggleNFTDetails(flipperId)">
+              {{ $t('activity.nftDetails') }}
+              <NeoIcon
+                :icon="
+                  isNFTDetailsOpen[flipperId] ? 'chevron-down' : 'chevron-right'
+                " />
+            </div>
+          </div>
+        </div>
+        <div v-if="isNFTDetailsOpen[flipperId]">
+          <NFTsDetaislDropdown :flips="flips" variant="Flippers" />
+        </div>
+      </div>
+      <hr class="my-3" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import { NeoIcon } from '@kodadot1/brick'
+import { format } from '@/components/collection/activity/utils'
+
+import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
+import { Flippers } from '@/composables/collectionActivity/types'
+
+const toggleNFTDetails = (flipperId: string) => {
+  const isOpen = isNFTDetailsOpen.value[flipperId]
+  isNFTDetailsOpen.value = {
+    ...isNFTDetailsOpen.value,
+    [flipperId]: !isOpen,
+  }
+}
+const flippers = computed(() => Object.entries(props.flippers || {}))
+
+// map of flipper id to bolean, is the NFT details section of that flipper open or nor
+// {id0: false, id1: true, id3: false, ...}
+const isFlipperMoreNFTSectionOpen = flippers.value.reduce(
+  (accumelator, [holderId, _]) => ({
+    ...accumelator,
+    [holderId]: false,
+  }),
+  {}
+)
+const isNFTDetailsOpen = ref(isFlipperMoreNFTSectionOpen)
+
+const props = defineProps<{
+  flippers?: Flippers
+}>()
+</script>
+
+<style lang="scss" scoped>
+.gap {
+  gap: 0.5rem;
+}
+.hide-last-hr:last-child > hr {
+  display: none;
+}
+</style>
diff --git a/components/collection/activity/ownerInsightsTabs/HolderTab.vue b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
new file mode 100644
index 0000000000..80398eda75
--- /dev/null
+++ b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div v-for="[holderId, holdings] in holders" :key="holderId" class="">
+      <div class="is-flex is-flex-direction-column gap">
+        <div class="px-5">
+          <ProfileLink
+            :address="holderId"
+            :avatar-size="35"
+            class="has-text-weight-bold" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.owned')
+            }}</span>
+            <span>{{ holdings.nftCount }}</span>
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalBought')
+            }}</span>
+            <Money :value="holdings.totalBought" />
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalSold')
+            }}</span>
+            <Money v-if="holdings.totalSold > 0" :value="holdings.totalSold" />
+            <span v-else>--</span>
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.date')
+            }}</span>
+            <span>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
+          </div>
+          <div>
+            <div
+              class="is-size-7 has-text-k-blue is-clickable"
+              @click="toggleNFTDetails(holderId)">
+              {{ $t('activity.nftDetails') }}
+              <NeoIcon
+                :icon="
+                  isNFTDetailsOpen[holderId] ? 'chevron-down' : 'chevron-right'
+                " />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="isNFTDetailsOpen[holderId]">
+          <NFTsDetaislDropdown :holder-nfts="holdings.nfts" variant="Holders" />
+        </div>
+      </div>
+      <hr class="my-3" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
+import { Owners } from '@/composables/collectionActivity/types'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import { NeoIcon } from '@kodadot1/brick'
+
+import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
+
+const toggleNFTDetails = (flipperId: string) => {
+  const isOpen = isNFTDetailsOpen.value[flipperId]
+  isNFTDetailsOpen.value = {
+    ...isNFTDetailsOpen.value,
+    [flipperId]: !isOpen,
+  }
+}
+
+const holders = computed(() => Object.entries(props.owners || {}))
+
+// map of owner id to bolean, is the NFT details section of that owner open or nor
+// {id0: false, id1: true, id3: false, ...}
+const isNFTDetailsOpen = ref(
+  holders.value.reduce(
+    (isOpen, [holderId, _]) => ({
+      ...isOpen,
+      [holderId]: false,
+    }),
+    {}
+  )
+)
+
+const props = defineProps<{
+  owners?: Owners
+}>()
+</script>
+
+<style lang="scss" scoped>
+.gap {
+  gap: 0.5rem;
+}
+.hide-last-hr:last-child > hr {
+  display: none;
+}
+</style>
diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
new file mode 100644
index 0000000000..83aefdf097
--- /dev/null
+++ b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
@@ -0,0 +1,85 @@
+<template>
+  <div v-if="ready" class="">
+    <div
+      v-for="{ avatar, boughtPrice, soldPrice, profit, nft } in flips"
+      :key="nft.id"
+      class="is-flex py-2 px-5 is-justify-content-start is-hoverable is-flex-direction-column">
+      <div class="is-flex">
+        <img
+          v-if="avatar"
+          :src="avatar"
+          :alt="nft.name"
+          width="40"
+          height="40"
+          class="border mr-5" />
+        <img v-else src="/placeholder.webp" class="border mr-5" />
+        <span>{{ nft.name }}</span>
+      </div>
+      <div
+        class="is-flex is-flex-direction-column is-justify-content-space-between mt-3">
+        <div class="is-flex is-justify-content-space-between no-wrap">
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.profit')
+          }}</span>
+          <span
+            :class="{
+              'has-text-k-green': profit > 0,
+              'has-text-k-red': profit < 0,
+            }"
+            >{{ profit === 0 ? '--' : `${format(profit)}%` }}</span
+          >
+        </div>
+        <div class="is-flex is-justify-content-space-between no-wrap">
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.bought')
+          }}</span>
+          <Money :value="boughtPrice" />
+        </div>
+        <div class="is-flex is-justify-content-space-between no-wrap">
+          <span class="is-size-7 has-text-grey">{{ $t('activity.sold') }}</span>
+          <Money :value="soldPrice" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import { FlipEvent } from '@/composables/collectionActivity/types'
+import { format } from '@/components/collection/activity/utils'
+
+const props = defineProps<{
+  flips: (FlipEvent & { avatar?: string })[]
+}>()
+
+const flips = ref(props.flips)
+const ready = ref(false)
+
+onMounted(() => {
+  processNFTImages()
+})
+
+const processNFTImages = async () => {
+  if (props.flips) {
+    const promises = props.flips.map(async ({ nft }, i) => {
+      let avatar
+      if (nft.meta?.image) {
+        avatar = sanitizeIpfsUrl(nft.meta.image)
+      } else {
+        const meta = (await processSingleMetadata(nft.metadata)) as NFTMetadata
+        avatar = sanitizeIpfsUrl(meta?.image)
+      }
+
+      flips.value[i].avatar = avatar
+    })
+
+    await Promise.all(promises)
+
+    ready.value = true
+  }
+}
+</script>
diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
new file mode 100644
index 0000000000..51555c293d
--- /dev/null
+++ b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
@@ -0,0 +1,64 @@
+<template>
+  <div v-if="ready" class="">
+    <div
+      v-for="{ avatar, id, name, updatedAt } in nfts"
+      :key="id"
+      class="is-flex pt-2 px-5 is-justify-content-start is-hoverable">
+      <div class="mr-5">
+        <img
+          v-if="avatar"
+          :src="avatar"
+          :alt="name"
+          width="40"
+          height="40"
+          class="border" />
+        <img v-else src="/placeholder.webp" class="border mr-5" />
+      </div>
+      <div class="is-flex is-flex-direction-column">
+        {{ name }}
+        <span class="is-size-7 has-text-grey">{{
+          timeAgo(new Date(updatedAt).getTime())
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { NFTExcludingEvents } from '@/composables/collectionActivity/types'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
+
+const props = defineProps<{
+  nfts: (NFTExcludingEvents & { avatar?: string })[]
+}>()
+
+const nfts = ref(props.nfts)
+const ready = ref(false)
+
+onMounted(() => {
+  processNFTImages()
+})
+
+const processNFTImages = async () => {
+  if (props.nfts) {
+    const promises = props.nfts.map(async (nft, i) => {
+      let avatar
+      if (nft.meta?.image) {
+        avatar = sanitizeIpfsUrl(nft.meta.image)
+      } else {
+        const meta = (await processSingleMetadata(nft.metadata)) as NFTMetadata
+        avatar = sanitizeIpfsUrl(meta?.image)
+      }
+
+      nfts.value[i].avatar = avatar
+    })
+
+    await Promise.all(promises)
+
+    ready.value = true
+  }
+}
+</script>
diff --git a/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue b/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue
new file mode 100644
index 0000000000..3ebc9e3452
--- /dev/null
+++ b/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <Holder v-if="variant === 'Holders'" :nfts="holderNfts" />
+    <Flipper v-else :flips="flips" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  FlipEvent,
+  NFTExcludingEvents,
+} from '@/composables/collectionActivity/types'
+import Flipper from './NFTSDetailsDropdown/Flipper.vue'
+import Holder from './NFTSDetailsDropdown/Holder.vue'
+
+withDefaults(
+  defineProps<{
+    variant: 'Holders' | 'Flippers'
+    holderNfts?: NFTExcludingEvents[]
+    flips?: FlipEvent[]
+  }>(),
+  {
+    holderNfts: () => [],
+    flips: () => [],
+  }
+)
+</script>
diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
new file mode 100644
index 0000000000..05e5793718
--- /dev/null
+++ b/components/collection/activity/utils.ts
@@ -0,0 +1,85 @@
+import { readParam } from '@/composables/useReplaceUrl'
+
+export type DataPoint = {
+  timestamp: number
+  value: number
+}
+
+export interface BinSize {
+  weeks?: number
+  days?: number
+  hours?: number
+  minutes?: number
+}
+
+export const toDataPoint = (e: {
+  timestamp: number
+  meta: string
+}): DataPoint => ({
+  timestamp: e.timestamp,
+  value: parseInt(e.meta),
+})
+
+export const sortAsc = (events: DataPoint[]) =>
+  events.sort((a, b) => a.timestamp - b.timestamp)
+
+export const displayValue = (val: number) =>
+  Number((val * Math.pow(10, -12)).toFixed(4))
+
+const binSizeToMillis = (binSize: BinSize): number => {
+  const millisInMinute = 60 * 1000
+  const millisInHour = 60 * millisInMinute
+  const millisInDay = 24 * millisInHour
+  const millisInWeek = 7 * millisInDay
+
+  const millis =
+    (binSize.weeks ?? 0) * millisInWeek +
+    (binSize.days ?? 0) * millisInDay +
+    (binSize.hours ?? 0) * millisInHour +
+    (binSize.minutes ?? 0) * millisInMinute
+
+  return millis || millisInDay // Default bin size is one day
+}
+
+const mean = (arr: DataPoint[]): number => {
+  const sum = arr.reduce((total, { value }) => total + value, 0)
+  return sum / arr.length
+}
+
+export const isAnyActivityFilterActive = (): boolean => {
+  const query = useRoute().query
+
+  return (
+    readParam(query?.sale) ||
+    readParam(query?.listing) ||
+    readParam(query?.mint) ||
+    readParam(query?.transfer) ||
+    readParam(query?.offer)
+  )
+}
+
+export const bin = (data: DataPoint[], binSize: BinSize): DataPoint[] => {
+  const binSizeMillis = binSizeToMillis(binSize)
+
+  const firstTimestamp = data[0].timestamp
+  const lastTimestamp = data[data.length - 1].timestamp
+
+  const numBins = Math.ceil((lastTimestamp - firstTimestamp) / binSizeMillis)
+
+  const bins = new Array(numBins).fill(null).map((_, index) => {
+    const binStart = firstTimestamp + index * binSizeMillis
+    const binEnd = binStart + binSizeMillis
+    const binData = data.filter(
+      (dataPoint) =>
+        dataPoint.timestamp >= binStart && dataPoint.timestamp < binEnd
+    )
+    return { timestamp: binStart + binSizeMillis / 2, value: mean(binData) }
+  })
+
+  return bins.filter((bin) => !isNaN(bin.value))
+}
+
+export const format = (number: number) => {
+  const isInteger = Number.isInteger(number)
+  return isInteger ? number.toString() : number.toFixed(4)
+}
diff --git a/components/collection/utils/timeAgo.ts b/components/collection/utils/timeAgo.ts
new file mode 100644
index 0000000000..a4e1af1310
--- /dev/null
+++ b/components/collection/utils/timeAgo.ts
@@ -0,0 +1,20 @@
+import { formatDistanceToNow } from 'date-fns'
+
+const capitalizeFirstLetter = (str: string): string => {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export const timeAgo = (timestamp: number): string => {
+  const timeSince = formatDistanceToNow(timestamp, {
+    addSuffix: true,
+    includeSeconds: true,
+  })
+
+  // Split the string into words, capitalize the first letter of each word, and join the words back together
+  const capitalizedTimeSince = timeSince
+    .split(' ')
+    .map(capitalizeFirstLetter)
+    .join(' ')
+
+  return capitalizedTimeSince
+}
diff --git a/components/collection/utils/types.ts b/components/collection/utils/types.ts
new file mode 100644
index 0000000000..8fcbff2399
--- /dev/null
+++ b/components/collection/utils/types.ts
@@ -0,0 +1,21 @@
+import { CollectionMetadata } from '@/components/rmrk/service/scheme'
+
+export type Stats = {
+  listedCount?: number
+  collectionLength?: number
+  collectionFloorPrice?: number
+  bestOffer?: number
+  uniqueOwners?: number
+  uniqueOwnersPercent?: string
+  collectionTradedVolumeNumber?: bigint
+}
+
+export type CollectionEntityMinimal = {
+  id: string
+  issuer: string
+  meta: CollectionMetadata
+  metadata: string
+  name: string
+  currentOwner: string
+  type: string
+}
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index 7f95a79ced..2507f817ca 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -1,27 +1,8 @@
 import { getVolume } from '@/utils/math'
-import { CollectionMetadata, NFT } from '@/components/rmrk/service/scheme'
+import { NFT } from '@/components/rmrk/service/scheme'
 import { NFTListSold } from '@/components/identity/utils/useIdentity'
 import { chainsSupportingOffers } from './useCollectionDetails.config'
-
-type Stats = {
-  listedCount?: number
-  collectionLength?: number
-  collectionFloorPrice?: number
-  bestOffer?: number
-  uniqueOwners?: number
-  uniqueOwnersPercent?: string
-  collectionTradedVolumeNumber?: bigint
-}
-
-export type CollectionEntityMinimal = {
-  id: string
-  issuer: string
-  meta: CollectionMetadata
-  metadata: string
-  name: string
-  currentOwner: string
-  type: string
-}
+import { Stats } from './types'
 
 const differentOwner = (nft: {
   issuer: string
diff --git a/components/explore/Controls.vue b/components/explore/Controls.vue
index c5387d9017..e7cdefe0e3 100644
--- a/components/explore/Controls.vue
+++ b/components/explore/Controls.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <MobileIndex class="is-hidden-tablet" />
-    <DesktopIndex class="is-hidden-mobile" />
+    <MobileControls class="is-hidden-tablet" />
+    <DesktopControls class="is-hidden-mobile" />
   </div>
 </template>
 
 <script setup lang="ts">
-import DesktopIndex from './DesktopControls.vue'
-import MobileIndex from './MobileControls.vue'
+import DesktopControls from './DesktopControls.vue'
+import MobileControls from './MobileControls.vue'
 </script>
diff --git a/components/explore/DesktopControls.vue b/components/explore/DesktopControls.vue
index 8893105e95..7e5a355473 100644
--- a/components/explore/DesktopControls.vue
+++ b/components/explore/DesktopControls.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="explore is-flex is-flex-wrap-wrap">
-    <FilterMenuButton />
-    <ExploreTabs />
-    <div class="explore-menu is-flex">
+    <div class="is-flex is-align-content-center gap">
+      <FilterMenuButton />
+      <ExploreTabs />
+    </div>
+
+    <div v-if="!isActivityTab" class="explore-menu is-flex">
       <ExploreSort />
       <ExploreOffer class="is-flex-grow-1" />
       <ExploreChain v-if="!route.name?.includes('prefix-collection-id')" />
@@ -24,11 +27,17 @@ const route = useRoute()
 const isCollection = computed(() =>
   route.name?.includes('prefix-explore-collectibles')
 )
+const isActivityTab = computed(() =>
+  route.name?.includes('prefix-collection-id-activity')
+)
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
 
+.gap {
+  gap: 1.5rem;
+}
 .explore {
   gap: 1.5rem;
 
diff --git a/components/explore/FilterMenuButton.vue b/components/explore/FilterMenuButton.vue
index 7ef026b8e2..d942cbe30d 100644
--- a/components/explore/FilterMenuButton.vue
+++ b/components/explore/FilterMenuButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="field has-addons is-flex is-align-items-center" data-cy="tabs">
+  <div class="has-addons is-flex is-align-items-center" data-cy="tabs">
     <div>
       <a
         class="is-hidden-mobile"
@@ -29,7 +29,11 @@ const route = useRoute()
 const preferencesStore = usePreferencesStore()
 
 const disabled = computed(() => {
-  const allowedList = ['prefix-explore-items', 'prefix-collection-id']
+  const allowedList = [
+    'prefix-explore-items',
+    'prefix-collection-id',
+    'prefix-collection-id-activity',
+  ]
 
   return !allowedList.includes(route.name || '')
 })
diff --git a/components/explore/MobileControls.vue b/components/explore/MobileControls.vue
index b737f81a97..cac533b6ec 100644
--- a/components/explore/MobileControls.vue
+++ b/components/explore/MobileControls.vue
@@ -3,11 +3,11 @@
     <ExploreTabs />
     <div class="explore-menu is-flex">
       <FilterMenuButton />
-      <ExploreOffer class="is-flex-grow-1" />
+      <ExploreOffer v-if="!isActivityTab" class="is-flex-grow-1" />
       <ExploreChain
         v-if="!route.name?.includes('prefix-collection-id')"
         class="flex-grow-1" />
-      <ExploreSort />
+      <ExploreSort v-if="!isActivityTab" />
     </div>
   </div>
 </template>
@@ -20,6 +20,10 @@ import ExploreOffer from './ExploreOffer.vue'
 import FilterMenuButton from './FilterMenuButton.vue'
 
 const route = useRoute()
+
+const isActivityTab = computed(() =>
+  route.name?.includes('prefix-collection-id-activity')
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/explore/filters/useReplaceUrl.ts b/components/explore/filters/useReplaceUrl.ts
deleted file mode 100644
index 13bd043f62..0000000000
--- a/components/explore/filters/useReplaceUrl.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export default function () {
-  const { $consola } = useNuxtApp()
-  const route = useRoute()
-  const router = useRouter()
-  const replaceUrl = (queryCondition: { [key: string]: unknown }) => {
-    router
-      .replace({
-        path: String(route.path),
-        query: {
-          ...route.query,
-          ...queryCondition,
-          page: '1',
-        },
-      })
-      .catch($consola.warn)
-  }
-
-  return {
-    replaceUrl,
-  }
-}
diff --git a/components/gallery/GalleryItemTabsPanel/GalleryItemChart.vue b/components/gallery/GalleryItemTabsPanel/GalleryItemChart.vue
index a7de0d6bd8..373b278cfa 100644
--- a/components/gallery/GalleryItemTabsPanel/GalleryItemChart.vue
+++ b/components/gallery/GalleryItemTabsPanel/GalleryItemChart.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <PriceChart class="mt-4" :price-chart-data="priceChartData" />
+    <PriceChart
+      class="mt-4"
+      :price-chart-data="priceChartData"
+      :chart-height="chartHeight" />
     <LazyGalleryHistory
       class="is-hidden"
       :events="nftEvents"
@@ -14,6 +17,7 @@ import PriceChart from '@/components/chart/PriceChart.vue'
 
 defineProps<{
   nftEvents?: Interaction[]
+  chartHeight?: string
 }>()
 const priceChartData = ref<[Date, number][][]>([])
 
diff --git a/components/identity/module/IdentityChain.vue b/components/identity/module/IdentityChain.vue
index d1440a3800..dbc317f47b 100644
--- a/components/identity/module/IdentityChain.vue
+++ b/components/identity/module/IdentityChain.vue
@@ -17,7 +17,7 @@
     <template v-else-if="!hideIdentityPopover && !isMobileDevice">
       <IdentityPopover v-if="address">
         <template #trigger>
-          {{ name }}
+          <span>{{ name }}</span>
         </template>
       </IdentityPopover>
     </template>
diff --git a/components/items/Items.vue b/components/items/Items.vue
index 1d0acc14ca..755f9e7257 100644
--- a/components/items/Items.vue
+++ b/components/items/Items.vue
@@ -6,6 +6,6 @@
 </template>
 
 <script setup lang="ts">
-import SidebarFilter from '@/components/explore/SidebarFilter.vue'
+import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
 import ItemsGrid from './ItemsGrid/ItemsGrid.vue'
 </script>
diff --git a/components/rmrk/Profile/ProfileLink.vue b/components/rmrk/Profile/ProfileLink.vue
index d0fd43d605..5e94f9df55 100644
--- a/components/rmrk/Profile/ProfileLink.vue
+++ b/components/rmrk/Profile/ProfileLink.vue
@@ -7,7 +7,7 @@
       link="u">
       <Identity v-if="address" :address="address" />
       <template #extra>
-        <Avatar :size="24" :value="address" class="mr-2" />
+        <Avatar :size="avatarSize || 24" :value="address" class="mr-2" />
       </template>
     </LinkResolver>
     <template v-if="showTwitter">
@@ -48,6 +48,7 @@ export default class ProfileLink extends mixins(PrefixMixin) {
   @Prop(Boolean) public showTwitter!: boolean
   @Prop(Boolean) public showDiscord!: boolean
   @Prop(Boolean) public showDotscanner!: boolean
+  @Prop() public avatarSize!: number
   get shortendId(): string {
     return shortAddress(this.address)
   }
diff --git a/components/rmrk/service/scheme.ts b/components/rmrk/service/scheme.ts
index ff4d4bb84d..a9bec198ba 100644
--- a/components/rmrk/service/scheme.ts
+++ b/components/rmrk/service/scheme.ts
@@ -176,13 +176,18 @@ export type EntityWithId = {
   name: string
 }
 
-export interface Interaction {
-  blockNumber: string | number
-  caller: string
-  currentOwner: string
+interface BaseInteraction {
   id: string
   interaction: string
   meta: string
+}
+export interface ActivityInteraction extends BaseInteraction {
+  timestamp: number
+}
+export interface Interaction extends BaseInteraction {
+  blockNumber: string | number
+  caller: string
+  currentOwner: string
   timestamp: string
 }
 
diff --git a/components/shared/BreadcrumbsFilter.vue b/components/shared/BreadcrumbsFilter.vue
index 62f39f25e0..b1653bb05f 100644
--- a/components/shared/BreadcrumbsFilter.vue
+++ b/components/shared/BreadcrumbsFilter.vue
@@ -22,11 +22,15 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from '@/components/explore/filters/useReplaceUrl'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 
 const route = useRoute()
-const { replaceUrl } = useReplaceUrl()
+const isCollectionActivityTab = computed(
+  () => route.name === 'prefix-collection-id-activity'
+)
+const { replaceUrl } = useReplaceUrl({
+  resetPage: !isCollectionActivityTab.value,
+})
 const { $i18n } = useNuxtApp()
 const isItemsExplore = computed(() => route.path.includes('/explore/items'))
 
@@ -48,7 +52,7 @@ const clearAllFilters = () => {
     if (key === 'search') {
       return { ...filters, [key]: undefined }
     }
-    return { ...filters, [key]: 'false' }
+    return { ...filters, [key]: isCollectionActivityTab ? undefined : 'false' }
   }, {})
 
   replaceUrl(clearedFilters)
@@ -57,6 +61,11 @@ const clearAllFilters = () => {
 const queryMapTranslation = {
   listed: $i18n.t('sort.listed'),
   owned: $i18n.t('sort.own'),
+  sale: $i18n.t('filters.sale'),
+  offer: $i18n.t('filters.offer'),
+  listing: $i18n.t('filters.listing'),
+  mint: $i18n.t('filters.mint'),
+  transfer: $i18n.t('filters.transfer'),
 }
 
 onMounted(() => {
diff --git a/components/explore/MobileFilter.vue b/components/shared/filters/MobileFilter.vue
similarity index 54%
rename from components/explore/MobileFilter.vue
rename to components/shared/filters/MobileFilter.vue
index f54870f40b..b33a58a10d 100644
--- a/components/explore/MobileFilter.vue
+++ b/components/shared/filters/MobileFilter.vue
@@ -18,8 +18,15 @@
             <b-icon icon="x" @click.native="onClose" />
           </a>
         </div>
-        <StatusFilter data-model="store" expanded />
-        <PriceFilter data-model="store" expanded />
+        <EventTypeFilter
+          v-if="isCollectionActivityTab"
+          data-model="store"
+          expanded />
+        <StatusFilter v-else data-model="store" expanded />
+        <PriceFilter
+          v-if="!isCollectionActivityTab"
+          data-model="store"
+          expanded />
       </div>
 
       <div class="buttons-container px-4 py-3 border-top">
@@ -43,16 +50,24 @@
 
 <script lang="ts" setup>
 import { NeoButton, NeoSidebar } from '@kodadot1/brick'
-import PriceFilter from './filters/PriceFilter.vue'
-import StatusFilter from './filters/StatusFilter.vue'
-import useReplaceUrl from './filters/useReplaceUrl'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
+import { useAcivityFiltersStore } from '@/stores/activityFilters'
 import { usePreferencesStore } from '@/stores/preferences'
+import StatusFilter from '@/components/shared/filters/modules/StatusFilter.vue'
+import EventTypeFilter from '@/components/shared/filters/modules/EventTypeFilter.vue'
+import PriceFilter from '@/components/shared/filters/modules/PriceFilter.vue'
 
 const route = useRoute()
 const preferencesStore = usePreferencesStore()
 const exploreFiltersStore = useExploreFiltersStore()
-const { replaceUrl } = useReplaceUrl()
+const activityFiltersStore = useAcivityFiltersStore()
+
+const isCollectionActivityTab = computed(
+  () => route.name === 'prefix-collection-id-activity'
+)
+const { replaceUrl } = useReplaceUrl({
+  resetPage: !isCollectionActivityTab.value,
+})
 
 const emit = defineEmits(['resetPage'])
 
@@ -65,37 +80,82 @@ const onClose = () => {
 
 const closeFilterModal = () => preferencesStore.setMobileFilterCollapse(false)
 
-const syncFromUrl = () => {
+const syncFromUrlOnActivityTab = () => {
+  const sale = is(route.query?.sale?.toString()),
+    offer = is(route.query?.offer?.toString()),
+    listing = is(route.query?.listing?.toString()),
+    mint = is(route.query?.mint?.toString()),
+    transfer = is(route.query?.transfer?.toString())
+
+  activityFiltersStore.setFilters({ sale, offer, listing, mint, transfer })
+}
+const syncFromUrlOnGrid = () => {
   const listed = route.query?.listed?.toString() === 'true',
-    owned = route.query?.owned?.toString() === 'true',
-    min = Number(route.query?.min) || undefined,
-    max = Number(route.query?.max) || undefined
+    owned = route.query?.owned?.toString() === 'true'
 
   exploreFiltersStore.setListed(listed)
   exploreFiltersStore.setOwned(owned)
-  exploreFiltersStore.setPriceRange({ min, max })
 }
 
-// TODO: move this to pinia
-const resetFilters = () => {
-  // set store to defaults
+const syncFromUrl = () => {
+  const min = Number(route.query?.min) || undefined,
+    max = Number(route.query?.max) || undefined
+
+  if (isCollectionActivityTab.value) {
+    syncFromUrlOnActivityTab()
+    activityFiltersStore.setPriceRange({ min, max })
+  } else {
+    syncFromUrlOnGrid()
+    exploreFiltersStore.setPriceRange({ min, max })
+  }
+}
+
+const resetFilterOnAcivityTab = () => {
   const statusDefaults = {
-    listed: false,
-    owned: false,
+    sale: undefined,
+    offer: undefined,
+    listing: undefined,
+    mint: undefined,
+    transfer: undefined,
   }
-  exploreFiltersStore.setListed(statusDefaults.listed)
-  exploreFiltersStore.setOwned(statusDefaults.owned)
-  // price
+
   const priceDefaults = {
     min: undefined,
     max: undefined,
   }
-  exploreFiltersStore.setPriceRange(priceDefaults)
+  activityFiltersStore.setFilters(statusDefaults)
 
+  activityFiltersStore.setPriceRange(priceDefaults)
   replaceUrl({
     ...statusDefaults,
     ...priceDefaults,
   })
+}
+const resetFilters = () => {
+  if (isCollectionActivityTab.value) {
+    resetFilterOnAcivityTab()
+  } else {
+    const statusDefaults = {
+      listed: false,
+      owned: false,
+    }
+
+    exploreFiltersStore.setListed(statusDefaults.listed)
+    exploreFiltersStore.setOwned(statusDefaults.owned)
+
+    // price
+    const priceDefaults = {
+      min: undefined,
+      max: undefined,
+    }
+    exploreFiltersStore.setPriceRange(priceDefaults)
+
+    replaceUrl({
+      ...statusDefaults,
+      ...priceDefaults,
+    })
+  }
+
   emit('resetPage')
   closeFilterModal()
 }
@@ -104,14 +164,19 @@ const applyFilters = () => {
   // status filters
   const statusFilters = exploreFiltersStore.getStatusFilters
   const priceRangeFilter = exploreFiltersStore.getPriceRange
+  const eventTypeFilter = activityFiltersStore.getEventTypeFilters
 
   // apply to URL
-  replaceUrl({ ...statusFilters, ...priceRangeFilter })
+  if (isCollectionActivityTab.value) {
+    replaceUrl({ ...eventTypeFilter, ...priceRangeFilter })
+  } else {
+    replaceUrl({ ...statusFilters, ...priceRangeFilter })
+  }
   emit('resetPage')
   closeFilterModal()
 }
 
-watch(() => route.query, syncFromUrl)
+watch(() => route.query, syncFromUrl, { immediate: true })
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/explore/SidebarFilter.vue b/components/shared/filters/SidebarFilter.vue
similarity index 53%
rename from components/explore/SidebarFilter.vue
rename to components/shared/filters/SidebarFilter.vue
index e5eaa24e3f..5453deb9a0 100644
--- a/components/explore/SidebarFilter.vue
+++ b/components/shared/filters/SidebarFilter.vue
@@ -1,20 +1,26 @@
 <template>
   <div :class="{ 'bordered sticky': open }" class="is-hidden-mobile">
     <NeoSidebar :reduce="false" :open="open" fullheight>
-      <StatusFilter expanded fluid-padding />
-      <PriceFilter fluid-padding />
+      <EventTypeFilter v-if="isCollectionActivityTab" expanded fluid-padding />
+      <StatusFilter v-else expanded fluid-padding />
+      <PriceFilter v-if="!isCollectionActivityTab" fluid-padding />
     </NeoSidebar>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { NeoSidebar } from '@kodadot1/brick'
-import PriceFilter from './filters/PriceFilter.vue'
-import StatusFilter from './filters/StatusFilter.vue'
+import StatusFilter from '@/components/shared/filters/modules/StatusFilter.vue'
+import EventTypeFilter from '@/components/shared/filters/modules/EventTypeFilter.vue'
+import PriceFilter from '@/components/shared/filters/modules/PriceFilter.vue'
 import { usePreferencesStore } from '@/stores/preferences'
+const route = useRoute()
 
 const preferencesStore = usePreferencesStore()
 const open = computed(() => preferencesStore.getsidebarFilterCollapse)
+const isCollectionActivityTab = computed(
+  () => route.name === 'prefix-collection-id-activity'
+)
 </script>
 
 <style lang="scss" scoped>
@@ -28,7 +34,7 @@ const open = computed(() => preferencesStore.getsidebarFilterCollapse)
   position: sticky;
   top: 84px;
   height: calc(100vh - 84px);
-  margin-right: 32px;
+  margin-right: $fluid-container-padding;
 }
 
 .o-side {
diff --git a/components/shared/filters/filterUtils.ts b/components/shared/filters/filterUtils.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/components/shared/filters/modules/EventTypeFilter.vue b/components/shared/filters/modules/EventTypeFilter.vue
new file mode 100644
index 0000000000..c61b395b9f
--- /dev/null
+++ b/components/shared/filters/modules/EventTypeFilter.vue
@@ -0,0 +1,121 @@
+<template>
+  <b-collapse
+    :open="expanded"
+    animation="slide"
+    class="border-bottom"
+    :class="{ 'fluid-padding-left': fluidPadding }">
+    <template #trigger="{ open }">
+      <div class="is-flex" role="button" :aria-expanded="open">
+        <p class="card-header-title has-text-weight-normal">Event Type</p>
+        <a class="card-header-icon">
+          <b-icon :icon="open ? 'minus' : 'plus'" />
+        </a>
+      </div>
+    </template>
+    <div class="p-4">
+      <b-field>
+        <NeoCheckbox v-model="sale">{{ $t('filters.sale') }}</NeoCheckbox>
+      </b-field>
+      <b-field>
+        <NeoCheckbox v-model="offer">{{ $t('filters.offer') }}</NeoCheckbox>
+      </b-field>
+      <b-field>
+        <NeoCheckbox v-model="listing">{{ $t('filters.listing') }}</NeoCheckbox>
+      </b-field>
+      <b-field>
+        <NeoCheckbox v-model="mint">{{ $t('filters.mint') }}</NeoCheckbox>
+      </b-field>
+      <b-field>
+        <NeoCheckbox v-model="transfer">{{
+          $t('filters.transfer')
+        }}</NeoCheckbox>
+      </b-field>
+    </div>
+  </b-collapse>
+</template>
+
+<script lang="ts" setup>
+import { NeoCheckbox } from '@kodadot1/brick'
+import { useAcivityFiltersStore } from '@/stores/activityFilters'
+
+const activityFiltersStore = useAcivityFiltersStore()
+const route = useRoute()
+const { replaceUrl: replaceURL } = useReplaceUrl({ resetPage: false })
+
+type DataModel = 'query' | 'store'
+
+const props = withDefaults(
+  defineProps<{
+    expanded?: boolean
+    dataModel?: DataModel
+    fluidPadding?: boolean
+  }>(),
+  {
+    expanded: false,
+    dataModel: 'query',
+    fluidPadding: false,
+  }
+)
+
+const emit = defineEmits(['resetPage'])
+
+const sale =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.sale?.toString() === 'true',
+        set: (value) => applyToUrl({ sale: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.sale,
+        set: (value) => activityFiltersStore.setSale(value),
+      })
+
+const offer =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.offer?.toString() === 'true',
+        set: (value) => applyToUrl({ offer: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.offer,
+        set: (value) => activityFiltersStore.setOffer(value),
+      })
+
+const listing =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.listing?.toString() === 'true',
+        set: (value) => applyToUrl({ listing: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.listing,
+        set: (value) => activityFiltersStore.setListing(value),
+      })
+
+const mint =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.mint?.toString() === 'true',
+        set: (value) => applyToUrl({ mint: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.mint,
+        set: (value) => activityFiltersStore.setMint(value),
+      })
+
+const transfer =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.transfer?.toString() === 'true',
+        set: (value) => applyToUrl({ transfer: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.transfer,
+        set: (value) => activityFiltersStore.setTransfer(value),
+      })
+
+const applyToUrl = (queryCondition: { [key: string]: any }) => {
+  replaceURL(queryCondition)
+  emit('resetPage')
+}
+</script>
diff --git a/components/explore/filters/PriceFilter.vue b/components/shared/filters/modules/PriceFilter.vue
similarity index 99%
rename from components/explore/filters/PriceFilter.vue
rename to components/shared/filters/modules/PriceFilter.vue
index 8a62cf17c7..f869889acf 100644
--- a/components/explore/filters/PriceFilter.vue
+++ b/components/shared/filters/modules/PriceFilter.vue
@@ -67,7 +67,6 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 import { fromDecimals, toDecimals } from '@/utils/math'
-import useReplaceUrl from './useReplaceUrl'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 
 const exploreFiltersStore = useExploreFiltersStore()
diff --git a/components/explore/filters/StatusFilter.vue b/components/shared/filters/modules/StatusFilter.vue
similarity index 98%
rename from components/explore/filters/StatusFilter.vue
rename to components/shared/filters/modules/StatusFilter.vue
index 14eaa419ee..04de3032c9 100644
--- a/components/explore/filters/StatusFilter.vue
+++ b/components/shared/filters/modules/StatusFilter.vue
@@ -28,7 +28,6 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from './useReplaceUrl'
 import { NeoCheckbox } from '@kodadot1/brick'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 
diff --git a/composables/collectionActivity/helpers.ts b/composables/collectionActivity/helpers.ts
new file mode 100644
index 0000000000..0048530117
--- /dev/null
+++ b/composables/collectionActivity/helpers.ts
@@ -0,0 +1,211 @@
+import { Interaction } from '@kodadot1/minimark'
+import { sum } from '@/utils/math'
+import {
+  Flippers,
+  InteractionWithNFT,
+  NFTHistoryState,
+  NFTMap,
+  Offer,
+  OfferInteraction,
+  Owners,
+} from './types'
+
+export const mintInteraction = () => {
+  const { urlPrefix } = usePrefix()
+  return urlPrefix.value === 'rmrk2' ? Interaction.MINT : Interaction.MINTNFT
+}
+
+const flipperInitialValue = {
+  flips: [],
+  bestFlip: 0,
+  latestflipTimestamp: 0,
+  owned: 0,
+  totalBought: 0,
+  totalsold: 0,
+}
+
+const newOwnerEntry = (lastActivityTimestamp, nft) => ({
+  nftCount: 1,
+  totalBought: 0,
+  totalSold: 0,
+  lastActivityTimestamp,
+  nfts: [nft],
+})
+
+const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
+  const changeHandsInteractions: InteractionWithNFT[] = []
+  const NFTS: NFTMap = {}
+
+  interactions.forEach((event) => {
+    if (event.interaction === mintInteraction()) {
+      NFTS[event.nft.id] = {
+        owner: event.caller,
+        nft: event.nft,
+        latestInteraction: mintInteraction(),
+        latestPrice: 0,
+      }
+    }
+
+    if (
+      event.interaction === Interaction.SEND ||
+      event.interaction === Interaction.BUY
+    ) {
+      changeHandsInteractions.push(event)
+    }
+  })
+
+  return { NFTS, changeHandsInteractions }
+}
+
+const summerizeFlips = (flips) => {
+  return {
+    owned: flips.length,
+    totalBought: sum(flips.map((flip) => flip.boughtPrice)),
+    totalsold: sum(flips.map((flip) => flip.soldPrice)),
+    bestFlip: Math.max(...flips.map((flip) => flip.profit)),
+    latestflipTimestamp: Math.max(...flips.map((flip) => flip.sellTimeStamp)),
+    flips,
+  }
+}
+
+const getLatestPrice = (previousNFTState: NFTHistoryState) =>
+  previousNFTState.latestInteraction === Interaction.BUY
+    ? previousNFTState.latestPrice
+    : 0
+
+const updateOwnerWithNewNft = ({
+  owner,
+  latestInteraction,
+  lastestTimeStamp,
+  nft,
+}) => {
+  owner.nftCount++
+  owner.totalBought += parseInt(latestInteraction.meta)
+  owner.lastActivityTimestamp =
+    lastestTimeStamp > owner.lastActivityTimestamp
+      ? lastestTimeStamp
+      : owner.lastActivityTimestamp
+  owner.nfts = [...owner.nfts, nft]
+  return owner
+}
+
+export const getOffers = (nfts): Offer[] => {
+  return nfts
+    .map((nft) =>
+      nft.offers.map((offer) => ({
+        ...offer,
+        price: parseInt(offer.price),
+        timestamp: new Date(offer.updatedAt).getTime(),
+        interaction: OfferInteraction,
+        nft: { ...nft, events: undefined, offers: undefined },
+      }))
+    )
+    .flat()
+}
+
+export const getOwners = (nfts) => {
+  const owners: Owners = {}
+
+  nfts.forEach((nft) => {
+    const interactions = nft.events.map((e) => e.interaction)
+    const { events, ...nftExcludingEvents } = nft
+    const owner = owners[nft.currentOwner]
+
+    if (interactions.includes(Interaction.CONSUME)) {
+      // no owner
+      return
+    }
+    if (
+      interactions.includes(Interaction.BUY) ||
+      interactions.includes(Interaction.SEND)
+    ) {
+      // NFT changed hands
+      const latestInteraction = events[events.length - 1]
+      const lastestTimeStamp = new Date(latestInteraction.timestamp).getTime()
+
+      owners[nft.currentOwner] =
+        owner === undefined
+          ? newOwnerEntry(lastestTimeStamp, nftExcludingEvents)
+          : updateOwnerWithNewNft({
+              owner,
+              latestInteraction,
+              lastestTimeStamp,
+              nft,
+            })
+      return
+    }
+
+    // nft isn't consumed and it hasn't change hands => it is owned by it's creator
+    const mintInteraction = events[0]
+    const mintTimeStamp = new Date(mintInteraction.timestamp).getTime()
+
+    owners[nft.currentOwner] =
+      owner === undefined
+        ? newOwnerEntry(mintTimeStamp, nftExcludingEvents)
+        : updateOwnerWithNewNft({
+            owner,
+            latestInteraction: mintInteraction,
+            lastestTimeStamp: mintTimeStamp,
+            nft,
+          })
+  })
+  return owners
+}
+
+export const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
+  const { NFTS, changeHandsInteractions } =
+    preProccessForFindingFlippers(interactions)
+
+  // Create an object that will hold all the flipper data
+  const flippers: Flippers = {}
+
+  // Loop through all the change hands interactions
+  changeHandsInteractions.forEach((interaction) => {
+    if (interaction.interaction === Interaction.SEND) {
+      // NFT has been sent from one address to another
+      NFTS[interaction.nft.id].owner = interaction.meta
+      NFTS[interaction.nft.id].latestInteraction = Interaction.SEND
+    }
+    if (interaction.interaction === Interaction.BUY) {
+      // NFT has been bought, it's a Flip!
+
+      const nftId = interaction.nft.id
+      const PreviousNFTState = NFTS[nftId]
+      const boughtPrice = getLatestPrice(PreviousNFTState)
+      // Calculate profit
+      const profit =
+        boughtPrice > 0 ? (parseInt(interaction.meta) / boughtPrice) * 100 : 0
+
+      // Create the new FlipEvent object
+      const thisFlip = {
+        nft: PreviousNFTState.nft,
+        soldPrice: parseInt(interaction.meta),
+        soldTo: interaction.caller,
+        sellTimeStamp: new Date(interaction.timestamp).getTime(),
+        boughtPrice,
+        profit,
+      }
+
+      // Check if the previous owner is already a flipper, if not initialize them
+      if (flippers[PreviousNFTState.owner] === undefined) {
+        flippers[PreviousNFTState.owner] = flipperInitialValue
+      }
+
+      // Add the new FlipEvent to the previous owner's flips array
+      flippers[PreviousNFTState.owner].flips.push(thisFlip)
+
+      // Update the NFT state
+      NFTS[nftId] = {
+        ...PreviousNFTState,
+        owner: interaction.caller,
+        latestInteraction: Interaction.BUY,
+        latestPrice: parseInt(interaction.meta),
+      }
+    }
+  })
+
+  Object.entries(flippers).forEach(([flipperId, { flips }]) => {
+    flippers[flipperId] = summerizeFlips(flips)
+  })
+  return flippers
+}
diff --git a/composables/collectionActivity/types.ts b/composables/collectionActivity/types.ts
new file mode 100644
index 0000000000..c76efe7f84
--- /dev/null
+++ b/composables/collectionActivity/types.ts
@@ -0,0 +1,69 @@
+import {
+  Interaction as InteractionType,
+  NFTMetadata,
+} from '@/components/rmrk/service/scheme'
+import { Interaction } from '@kodadot1/minimark'
+
+export type NFTExcludingEvents = {
+  currentOwner: string
+  name: string
+  price?: string
+  metadata: string
+  meta: NFTMetadata
+  updatedAt: string
+  id: string
+}
+
+export type InteractionWithNFT = InteractionType & {
+  nft: NFTExcludingEvents
+  timestamp: number
+}
+
+export const OfferInteraction = 'Offer'
+export type Offer = {
+  caller: string
+  expiration: string
+  status: string
+  price: number
+  timestamp: number
+  interaction: string
+  nft: NFTExcludingEvents
+}
+
+export type NFTHistoryState = {
+  owner: string
+  nft: NFTExcludingEvents
+  latestInteraction: Interaction
+  latestPrice: number
+}
+export type NFTMap = {
+  [nftId: string]: NFTHistoryState
+}
+export type FlipEvent = {
+  nft: NFTExcludingEvents
+  soldPrice: number
+  soldTo: string
+  sellTimeStamp: number
+  boughtPrice: number
+  profit: number
+}
+
+export type Flippers = {
+  [identity: string]: {
+    flips: FlipEvent[]
+    owned: number
+    totalBought: number
+    totalsold: number
+    bestFlip: number
+    latestflipTimestamp: number
+  }
+}
+export type Owners = {
+  [identity: string]: {
+    nftCount: number
+    totalBought: number
+    totalSold: number
+    nfts: NFTExcludingEvents[]
+    lastActivityTimestamp: number
+  }
+}
diff --git a/composables/collectionActivity/useCollectionActivity.ts b/composables/collectionActivity/useCollectionActivity.ts
new file mode 100644
index 0000000000..a3e8a3c074
--- /dev/null
+++ b/composables/collectionActivity/useCollectionActivity.ts
@@ -0,0 +1,62 @@
+import { Flippers, InteractionWithNFT, Offer, Owners } from './types'
+import { getFlippers, getOffers, getOwners } from './helpers'
+
+export const useCollectionActivity = ({ collectionId }) => {
+  const { urlPrefix } = usePrefix()
+  const events = ref<InteractionWithNFT[]>([])
+  const owners = ref<Owners>()
+  const flippers = ref<Flippers>()
+  const offers = ref<Offer[]>([])
+
+  const queryPrefix = urlPrefix.value === 'bsx' ? 'chain-bsx' : 'subsquid'
+
+  const { data } = useGraphql({
+    queryPrefix,
+    queryName: 'collectionActivityEvents',
+    variables: {
+      id: collectionId,
+    },
+  })
+
+  watch(data, (result) => {
+    if (result?.collection) {
+      // flat events for chart
+      const interactions: InteractionWithNFT[] = result.collection.nfts
+        .map((nft) =>
+          nft.events.map((e) => ({
+            ...e,
+            timestamp: new Date(e.timestamp).getTime(),
+            nft: { ...nft, events: undefined },
+          }))
+        )
+        .flat()
+      events.value = interactions
+
+      if (urlPrefix.value === 'bsx') {
+        offers.value = getOffers(result.collection.nfts)
+      }
+
+      // not to repeat ref names
+      const ownersTemp = getOwners(result.collection.nfts)
+      const flippersTemp = getFlippers(interactions)
+
+      const flipperdIds = Object.keys(flippersTemp)
+      const OwnersIds = Object.keys(ownersTemp)
+
+      flipperdIds.forEach((id) => {
+        if (OwnersIds.includes(id)) {
+          ownersTemp[id].totalSold = flippersTemp[id].totalsold
+        }
+      })
+
+      owners.value = ownersTemp
+      flippers.value = flippersTemp
+    }
+  })
+  return {
+    events,
+    owners,
+    flippers,
+    offers,
+  }
+}
diff --git a/composables/useReplaceUrl.ts b/composables/useReplaceUrl.ts
new file mode 100644
index 0000000000..f43d7ad4d8
--- /dev/null
+++ b/composables/useReplaceUrl.ts
@@ -0,0 +1,57 @@
+export const replaceBooleanWithStrings = (
+  obj: Record<string, string | null | boolean | undefined | number>
+): Record<string, string | null | undefined> => {
+  return Object.entries(obj).reduce((result, [key, value]) => {
+    result[key] =
+      typeof value === 'boolean' || typeof value === 'number'
+        ? String(value)
+        : value
+    return result
+  }, {})
+}
+
+export const readParam = (param) => {
+  if (param === 'undefined' || param === null || param === undefined) {
+    return undefined
+  }
+  if (param === 'true') {
+    return true
+  }
+  if (param === 'false') {
+    return false
+  }
+  return param
+}
+
+export const is = (queryParam: string | undefined) => {
+  return Boolean(readParam(queryParam))
+}
+
+export default function (
+  { resetPage }: { resetPage?: boolean } = { resetPage: true }
+) {
+  const { $consola } = useNuxtApp()
+  const route = useRoute()
+  const router = useRouter()
+  const replaceUrl = (queryCondition: {
+    [key: string]: string | null | boolean | undefined | number
+  }) => {
+    const query = {
+      ...route.query,
+      ...replaceBooleanWithStrings(queryCondition),
+    }
+    if (resetPage) {
+      query.page = '1'
+    }
+    router
+      .replace({
+        path: String(route.path),
+        query,
+      })
+      .catch($consola.warn)
+  }
+
+  return {
+    replaceUrl,
+  }
+}
diff --git a/layouts/explore-layout.vue b/layouts/explore-layout.vue
index cdcaa6a8ef..a8ec6162b5 100644
--- a/layouts/explore-layout.vue
+++ b/layouts/explore-layout.vue
@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import ExploreTabsFilterSort from '@/components/explore/Controls.vue'
-import MobileFilter from '@/components/explore/MobileFilter.vue'
+import MobileFilter from '@/components/shared/filters/MobileFilter.vue'
 import CollectionBanner from '@/components/collection/CollectionHeader/CollectionBanner.vue'
 import CollectionInfo from '@/components/collection/CollectionInfo.vue'
 
diff --git a/locales/en.json b/locales/en.json
index c8f05d5fa7..e69653a00a 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -18,6 +18,7 @@
   "transfer": "Transfer",
   "chart": "Chart",
   "holders": "Holders",
+  "flippers": "Flippers",
   "assets": "Assets",
   "incomingOffers": "Incoming Offers",
   "transform": "Transform",
@@ -888,6 +889,9 @@
     "history": "History",
     "chart": "Chart"
   },
+  "time": {
+    "ago": "Ago"
+  },
   "activity": {
     "listed": "Listed",
     "totalItems": "Σ Items",
@@ -903,7 +907,25 @@
     "bestOffer": "Best Offer",
     "volume": "Volume",
     "network": "Network",
-    "creator": "Creator"
+    "creator": "Creator",
+    "owned": "Owned",
+    "totalBought": "Total Bought",
+    "totalSold": "Total Sold",
+    "date": "Date",
+    "bestFlip": "Best Flip",
+    "latestActivity": "LatestActivity",
+    "nftDetails": "NFT Details",
+    "profit": "Profit",
+    "bought": "Bought",
+    "sold": "Sold",
+    "event": {
+      "item": "Item",
+      "event": "Event",
+      "amount": "Amount",
+      "from": "From",
+      "to": "To",
+      "time": "Time"
+    }
   },
   "profileStats": {
     "listed": "Listed",
@@ -1260,5 +1282,13 @@
         }
       }
     }
+  },
+  "filters": {
+    "sale": "Sale",
+    "offer": "Offer",
+    "listing": "Listing",
+    "mint": "Mint",
+    "transfer": "Transfer"
+
   }
 }
diff --git a/pages/_prefix/collection/_id/activity.vue b/pages/_prefix/collection/_id/activity.vue
index b3c7314ded..c105b890cb 100644
--- a/pages/_prefix/collection/_id/activity.vue
+++ b/pages/_prefix/collection/_id/activity.vue
@@ -1,11 +1,79 @@
 <template>
-  <div>activity menu</div>
+  <div
+    class="container is-fluid"
+    :class="{ 'sidebar-padding-left': isSidebarOpen }">
+    <Activity />
+  </div>
 </template>
 
 <script lang="ts">
-export default {
-  layout: 'explore-layout',
+import Activity from '@/components/collection/activity/Activity.vue'
+import ExperimentMixin from '@/utils/mixins/experimentMixin'
+import { Component, mixins } from 'nuxt-property-decorator'
+import { useHistoryStore } from '@/stores/history'
+import { generateCollectionImage } from '@/utils/seoImageGenerator'
+import { CurrentCollection } from './index.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+
+@Component<CollectionActivityPage>({
+  name: 'CollectionActivityPage',
+  components: {
+    Activity,
+  },
+  layout() {
+    return 'explore-layout'
+  },
+  head() {
+    const title = this.currentlyViewedCollection.name
+    const metaData = {
+      title,
+      type: 'profile',
+      description: this.currentlyViewedCollection.description,
+      url: this.$route.path,
+      image: this.image,
+    }
+    return {
+      title,
+      meta: [...this.$seoMeta(metaData)],
+    }
+  },
+})
+export default class CollectionActivityPage extends mixins(ExperimentMixin) {
+  private historyStore = useHistoryStore()
+  get preferencesStore() {
+    return usePreferencesStore()
+  }
+  get isSidebarOpen() {
+    return this.preferencesStore.getsidebarFilterCollapse
+  }
+
+  get currentlyViewedCollection(): CurrentCollection {
+    return this.historyStore.getCurrentlyViewedCollection
+  }
+
+  get image(): string {
+    return generateCollectionImage(
+      this.currentlyViewedCollection.name,
+      this.currentlyViewedCollection.numberOfItems,
+      this.currentlyViewedCollection.image
+    )
+  }
 }
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.sidebar-padding-left {
+  padding-left: 0;
+}
+
+// this cover the edge case where sidebar is open and then screen size changes to mobile
+// for exmpale on rotation of tablet device
+// in that case the padding need to match that of the fluid container
+@include mobile {
+  .sidebar-padding-left {
+    padding-left: $fluid-container-padding-mobile;
+  }
+}
+</style>
diff --git a/pages/_prefix/collection/_id/index.vue b/pages/_prefix/collection/_id/index.vue
index fdbb48eeed..abda2e9bda 100644
--- a/pages/_prefix/collection/_id/index.vue
+++ b/pages/_prefix/collection/_id/index.vue
@@ -17,7 +17,7 @@ import Items from '@/components/items/Items.vue'
 import { useHistoryStore } from '@/stores/history'
 import { usePreferencesStore } from '@/stores/preferences'
 
-type CurrentCollection = {
+export type CurrentCollection = {
   name: string
   numberOfItems: number
   image: string
diff --git a/queries/subsquid/bsx/collectionActivityEvents.graphql b/queries/subsquid/bsx/collectionActivityEvents.graphql
new file mode 100644
index 0000000000..a189e7f7e6
--- /dev/null
+++ b/queries/subsquid/bsx/collectionActivityEvents.graphql
@@ -0,0 +1,32 @@
+query collectionActivityEvents($id: String!) {
+  collection: collectionEntityById(id: $id) {
+    id
+    nfts {
+      events(orderBy: timestamp_ASC) {
+        timestamp
+        meta
+        interaction
+        id
+        caller
+        currentOwner
+      }
+      offers {
+        caller
+        expiration
+        status
+        price
+        updatedAt
+      }
+      currentOwner
+      name
+      price
+      metadata
+      meta {
+        id
+        image
+      }
+      updatedAt
+      id
+    }
+  }
+}
diff --git a/queries/subsquid/general/collectionActivityEvents.graphql b/queries/subsquid/general/collectionActivityEvents.graphql
new file mode 100644
index 0000000000..350096edce
--- /dev/null
+++ b/queries/subsquid/general/collectionActivityEvents.graphql
@@ -0,0 +1,25 @@
+query collectionActivityEvents($id: String!) {
+  collection: collectionEntityById(id: $id) {
+    id
+    nfts {
+      events(orderBy: timestamp_ASC) {
+        timestamp
+        meta
+        interaction
+        id
+        caller
+        currentOwner
+      }
+      currentOwner
+      name
+      price
+      metadata
+      meta {
+        id
+        image
+      }
+      updatedAt
+      id
+    }
+  }
+}
diff --git a/stores/activityFilters.ts b/stores/activityFilters.ts
new file mode 100644
index 0000000000..612a408c06
--- /dev/null
+++ b/stores/activityFilters.ts
@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+
+interface State {
+  // event type
+  sale: boolean
+  offer: boolean
+  listing: boolean
+  mint: boolean
+  transfer: boolean
+  // price
+  min: number | undefined
+  max: number | undefined
+}
+
+export const useAcivityFiltersStore = defineStore('activityFilters', {
+  state: (): State => ({
+    sale: false,
+    offer: false,
+    listing: false,
+    mint: false,
+    transfer: false,
+    min: undefined,
+    max: undefined,
+  }),
+  getters: {
+    getEventTypeFilters: ({ sale, offer, listing, mint, transfer }) => ({
+      sale,
+      offer,
+      listing,
+      mint,
+      transfer,
+    }),
+    getPriceRange: (state) => ({ min: state.min, max: state.max }),
+  },
+  actions: {
+    setSale(payload) {
+      this.sale = payload
+    },
+    setOffer(payload) {
+      this.offer = payload
+    },
+    setListing(payload) {
+      this.listing = payload
+    },
+    setMint(payload) {
+      this.mint = payload
+    },
+    setTransfer(payload) {
+      this.transfer = payload
+    },
+    setMin(payload) {
+      this.min = payload
+    },
+    setMax(payload) {
+      this.max = payload
+    },
+    setFilters(payload) {
+      this.sale = Boolean(payload.sale)
+      this.offer = Boolean(payload.offer)
+      this.listing = Boolean(payload.listing)
+      this.mint = Boolean(payload.mint)
+      this.transfer = Boolean(payload.transfer)
+    },
+    setPriceRange(payload) {
+      this.min = payload.min
+      this.max = payload.max
+    },
+  },
+})
diff --git a/styles/abstracts/_theme.scss b/styles/abstracts/_theme.scss
index afd6667aae..f8c01badbc 100644
--- a/styles/abstracts/_theme.scss
+++ b/styles/abstracts/_theme.scss
@@ -15,6 +15,10 @@ $themes: (
     'k-green': #04af00,
     'k-red': #ff5757,
     'k-grey': #999999,
+    'k-pink': #FFB6EF,
+    'k-yellow': #FEFFB6,
+    'k-blueaccent': #B6CBFF,
+    'k-greenaccent': #C2FFAC,
     'k-hovergrey': #6b6b6b,
     'k-blue': #6188e7,
     'k-blue-hover': #3567e0,
@@ -42,6 +46,10 @@ $themes: (
     'k-green': #04af00,
     'k-red': #ff5757,
     'k-grey': #cccccc,
+    'k-pink': #7A2A68,
+    'k-yellow': #363234,
+    'k-blueaccent': #2E50A2,
+    'k-greenaccent': #056A02,
     'k-hovergrey': #6b6b6b,
     'k-blue': #6188e7,
     'k-blue-hover': #3567e0,
diff --git a/styles/global.scss b/styles/global.scss
index 3d12cfbfc6..3e877f51da 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -221,6 +221,9 @@ body {
   height: 100%;
 }
 
+.w-full {
+  width: 100%;
+}
 hr {
   height: 1px;
   @include ktheme() {
@@ -294,3 +297,72 @@ hr {
     border-top: 1px solid theme('border-color');
   }
 }
+.border {
+  @include ktheme() {
+    border: 1px solid theme('border-color')
+  }
+}
+
+
+//colors
+
+.has-text-k-green {
+  @include ktheme() {
+    color: theme('k-green');
+  }
+}
+.has-text-k-red {
+  @include ktheme() {
+    color: theme('k-red');
+  }
+}
+
+.has-text-k-blue {
+  @include ktheme() {
+    color: theme('k-blue');
+  }
+  &:hover {
+    @include ktheme() {
+      color: theme('k-blue-hover');
+    }
+  }
+}
+
+.k-pink {
+  @include ktheme() {
+    background-color: theme('k-pink');
+  }
+}
+.k-greenaccent {
+  @include ktheme() {
+    background-color: theme('k-greenaccent');
+  }
+}
+
+.k-yellow {
+  @include ktheme() {
+    background-color: theme('k-yellow');
+  }
+}
+.theme-background-color {
+  @include ktheme() {
+    background-color: theme('background-color');
+  }
+}
+
+.k-blueaccent {
+  @include ktheme() {
+    background-color: theme('k-blueaccent');
+  }
+}
+
+//hover
+
+.is-hoverable {
+  @include ktheme() {
+    &:hover {
+      background-color: theme('k-accentlight2');
+    }
+  }
+}
+
diff --git a/utils/math.ts b/utils/math.ts
index bbff5e33cc..407998de96 100644
--- a/utils/math.ts
+++ b/utils/math.ts
@@ -21,6 +21,9 @@ export function pairListBuyEvent(events: Interaction[]): Interaction[] {
   }
 }
 
+export const sum = (array: number[]): number =>
+  array.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
+
 export function getSum(list: Array<number | number>): bigint | number {
   return list
     .map((x) => x)