diff --git a/packages/atlas/src/.env b/packages/atlas/src/.env
index a703273f46..c2bec199a5 100644
--- a/packages/atlas/src/.env
+++ b/packages/atlas/src/.env
@@ -21,7 +21,7 @@ VITE_WALLET_CONNECT_PROJECT_ID=33b2609463e399daee8c51726546c8dd
 
 # YPP configuration
 VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com
-VITE_YOUTUBE_SYNC_API_URL=https://35.156.81.207.nip.io
+VITE_YOUTUBE_SYNC_API_URL=https://172.236.19.60.nip.io
 VITE_YOUTUBE_COLLABORATOR_MEMBER_ID=18
 
 # Analytics tools
diff --git a/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx b/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx
index 8ce702be07..46ddcf5d68 100644
--- a/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx
+++ b/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx
@@ -22,9 +22,9 @@ export type YppReferral = {
 type YppReferralTableProps = {
   isLoading: boolean
   data: YppReferral[]
-}
+} & Pick<TableProps, 'pagination'>
 
-export const YppReferralTable = ({ isLoading, data }: YppReferralTableProps) => {
+export const YppReferralTable = ({ isLoading, data, pagination }: YppReferralTableProps) => {
   const mappedData: TableProps['data'] = useMemo(
     () =>
       data.map((entry) => ({
@@ -41,6 +41,8 @@ export const YppReferralTable = ({ isLoading, data }: YppReferralTableProps) =>
       title="Channels you referred"
       columns={COLUMNS}
       data={isLoading ? tableLoadingData : mappedData}
+      pagination={pagination}
+      pageSize={pagination?.itemsPerPage}
     />
   )
 }
diff --git a/packages/atlas/src/hooks/useYppReferralPagination.ts b/packages/atlas/src/hooks/useYppReferralPagination.ts
new file mode 100644
index 0000000000..c9d32b82d0
--- /dev/null
+++ b/packages/atlas/src/hooks/useYppReferralPagination.ts
@@ -0,0 +1,59 @@
+import { useMemo, useState } from 'react'
+import { useQuery } from 'react-query'
+
+import { axiosInstance } from '@/api/axios'
+import { YppReferral } from '@/components/YppReferralTable/YppReferralTable'
+import { atlasConfig } from '@/config'
+import { useUser } from '@/providers/user/user.hooks'
+import { YppSyncedChannel } from '@/views/global/YppLandingView/YppLandingView.types'
+
+const YPP_SYNC_URL = atlasConfig.features.ypp.youtubeSyncApiUrl
+
+const separateListIntoChunks = <T>(list: Array<T>, chunkSize: number): Array<T[]> => {
+  const chunks = []
+
+  for (let index = 0; index < list.length; index += chunkSize) {
+    chunks.push(list.slice(index, index + chunkSize))
+  }
+
+  return chunks
+}
+
+export const useYppReferralPagination = ({ initialPageSize = 10 }: { initialPageSize?: number }) => {
+  const [currentPage, setCurrentPage] = useState(0)
+  const [perPage, setPerPage] = useState(initialPageSize)
+  const { channelId } = useUser()
+
+  const { isLoading, data } = useQuery(
+    ['referralsTable', channelId],
+    () => axiosInstance.get<YppSyncedChannel[]>(`${YPP_SYNC_URL}/channels/${channelId}/referrals`),
+    { enabled: !!channelId }
+  )
+
+  const yppReferrals: YppReferral[] = useMemo(
+    () =>
+      // TODO: For large arrays, the creation of new Date instances for sorting might be a performance consideration.
+      data?.data
+        .sort((channelA, channelB) => new Date(channelB.createdAt).getTime() - new Date(channelA.createdAt).getTime())
+        .map((channelData) => {
+          return {
+            date: new Date(channelData.createdAt),
+            channelId: String(channelData.joystreamChannelId),
+            status: channelData.yppStatus,
+          }
+        }) ?? [],
+    [data?.data]
+  )
+
+  const pages = separateListIntoChunks(yppReferrals, perPage)
+
+  return {
+    currentPage,
+    setCurrentPage,
+    yppReferrals: pages[currentPage] ?? [],
+    totalCount: yppReferrals.length,
+    isLoading,
+    setPerPage,
+    perPage,
+  }
+}
diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx
index 030e516446..20b9549b37 100644
--- a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx
+++ b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx
@@ -1,40 +1,18 @@
-import { useMemo } from 'react'
-import { useQuery } from 'react-query'
-
-import { axiosInstance } from '@/api/axios'
 import { SvgActionLinkUrl } from '@/assets/icons'
 import { EmptyFallback } from '@/components/EmptyFallback'
-import { YppReferral, YppReferralTable } from '@/components/YppReferralTable/YppReferralTable'
+import { YppReferralTable } from '@/components/YppReferralTable/YppReferralTable'
 import { ReferralLinkButton } from '@/components/_ypp/ReferralLinkButton'
-import { atlasConfig } from '@/config'
-import { useUser } from '@/providers/user/user.hooks'
-import { YppSyncedChannel } from '@/views/global/YppLandingView/YppLandingView.types'
+import { useYppReferralPagination } from '@/hooks/useYppReferralPagination'
 
 import { FallbackContainer } from '../YppDashboardTabs.styles'
 
-const YPP_SYNC_URL = atlasConfig.features.ypp.youtubeSyncApiUrl
+const TILES_PER_PAGE = 10
 
 export const YppDashboardReferralsTab = () => {
-  const { channelId } = useUser()
-  const { isLoading, data } = useQuery(
-    ['referralsTable', channelId],
-    () => axiosInstance.get<YppSyncedChannel[]>(`${YPP_SYNC_URL}/channels/${channelId}/referrals`),
-    { enabled: !!channelId }
-  )
+  const { isLoading, yppReferrals, currentPage, setCurrentPage, perPage, setPerPage, totalCount } =
+    useYppReferralPagination({ initialPageSize: TILES_PER_PAGE })
 
-  const mappedData: YppReferral[] = useMemo(
-    () =>
-      data?.data.map((channelData) => {
-        return {
-          date: new Date(channelData.createdAt),
-          channelId: String(channelData.joystreamChannelId),
-          status: channelData.yppStatus,
-        }
-      }) ?? [],
-    [data?.data]
-  )
-
-  if (!isLoading && !mappedData?.length) {
+  if (!isLoading && totalCount === 0) {
     return (
       <FallbackContainer>
         <EmptyFallback
@@ -47,5 +25,11 @@ export const YppDashboardReferralsTab = () => {
     )
   }
 
-  return <YppReferralTable data={mappedData} isLoading={isLoading} />
+  return (
+    <YppReferralTable
+      data={yppReferrals}
+      isLoading={isLoading}
+      pagination={{ page: currentPage, setPerPage, totalCount, itemsPerPage: perPage, onChangePage: setCurrentPage }}
+    />
+  )
 }