diff --git a/apps/portal/src/pages/offers/test.tsx b/apps/portal/src/pages/offers/test.tsx
index 5206935f..8537f04e 100644
--- a/apps/portal/src/pages/offers/test.tsx
+++ b/apps/portal/src/pages/offers/test.tsx
@@ -2,25 +2,29 @@ import React from 'react';
 
 import { trpc } from '~/utils/trpc';
 
-function test() {
+function Test() {
   const data = trpc.useQuery([
     'offers.list',
     {
-      limit: 3,
+      limit: 5,
       location: 'Singapore, Singapore',
       offset: 0,
-      sortBy: '-monthYearReceived',
-      yoeCategory: 0,
+      sortBy: '-totalYoe',
+      yoeCategory: 1,
     },
   ]);
 
   return (
-    <ul>
-      {data.data?.map((x) => {
-        return <li key={x.id}>{JSON.stringify(x)}</li>;
-      })}
-    </ul>
+    <>
+      <ul>
+        {data.data?.data.map((x) => {
+          return <li key={x.id}>{JSON.stringify(x)}</li>;
+        })}
+      </ul>
+      <br />
+      <p>{JSON.stringify(data.data?.paging)}</p>
+    </>
   );
 }
 
-export default test;
+export default Test;
diff --git a/apps/portal/src/server/router/offers.ts b/apps/portal/src/server/router/offers.ts
index 28e6c0eb..d2f640af 100644
--- a/apps/portal/src/server/router/offers.ts
+++ b/apps/portal/src/server/router/offers.ts
@@ -22,7 +22,7 @@ const getYoeRange = (yoeCategory: number) => {
 
 const ascOrder = '+';
 const descOrder = '-';
-const sortingKeys = ['monthYearReceived', 'totalCompensation', 'yoe'];
+const sortingKeys = ['monthYearReceived', 'totalCompensation', 'totalYoe'];
 
 const createSortByValidationRegex = () => {
   const startsWithPlusOrMinusOnly = '^[+-]{1}';
@@ -65,9 +65,12 @@ export const offersRouter = createRouter().query('list', {
               },
             },
             company: true,
+            profile: {
+              include: {
+                background: true,
+              },
+            },
           },
-          skip: input.limit * input.offset,
-          take: input.limit,
           where: {
             AND: [
               {
@@ -103,10 +106,13 @@ export const offersRouter = createRouter().query('list', {
               },
             },
             company: true,
+            profile: {
+              include: {
+                background: true,
+              },
+            },
           },
           // Junior, Mid
-          skip: input.limit * input.offset,
-          take: input.limit,
           where: {
             AND: [
               {
@@ -160,9 +166,12 @@ export const offersRouter = createRouter().query('list', {
               },
             },
             company: true,
+            profile: {
+              include: {
+                background: true,
+              },
+            },
           },
-          skip: input.limit * input.offset,
-          take: input.limit,
           where: {
             AND: [
               {
@@ -259,6 +268,16 @@ export const offersRouter = createRouter().query('list', {
               return salary1 - salary2;
             }
           }
+
+          if (sortingKey === 'totalYoe') {
+            const yoe1 = offer1.profile.background?.totalYoe;
+            const yoe2 = offer2.profile.background?.totalYoe;
+
+            if (yoe1 && yoe2) {
+              return yoe1 - yoe2;
+            }
+          }
+
           return defaultReturn;
         })();
       }
@@ -286,12 +305,35 @@ export const offersRouter = createRouter().query('list', {
             }
           }
 
+          if (sortingKey === 'totalYoe') {
+            const yoe1 = offer1.profile.background?.totalYoe;
+            const yoe2 = offer2.profile.background?.totalYoe;
+
+            if (yoe1 && yoe2) {
+              return yoe2 - yoe1;
+            }
+          }
+
           return defaultReturn;
         })();
       }
       return defaultReturn;
     });
 
-    return data;
+    const startRecordIndex: number = input.limit * input.offset;
+    const endRecordIndex: number =
+      startRecordIndex + input.limit <= data.length
+        ? startRecordIndex + input.limit
+        : data.length;
+    const paginatedData = data.slice(startRecordIndex, endRecordIndex);
+
+    return {
+      data: paginatedData,
+      paging: {
+        currPage: input.offset,
+        numOfItemsInPage: paginatedData.length,
+        numOfPages: Math.ceil(data.length / input.limit),
+      },
+    };
   },
 });
diff --git a/packages/ui/src/SlideOut/SlideOut.tsx b/packages/ui/src/SlideOut/SlideOut.tsx
index 065c60dc..33dd456a 100644
--- a/packages/ui/src/SlideOut/SlideOut.tsx
+++ b/packages/ui/src/SlideOut/SlideOut.tsx
@@ -8,7 +8,7 @@ export type SlideOutEnterFrom = 'end' | 'start';
 
 type Props = Readonly<{
   children: React.ReactNode;
-  className: string;
+  className?: string;
   enterFrom?: SlideOutEnterFrom;
   isShown?: boolean;
   onClose?: () => void;