diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
index c6d47806..8e020e4c 100644
--- a/apps/portal/src/components/offers/OffersNavigation.ts
+++ b/apps/portal/src/components/offers/OffersNavigation.ts
@@ -1,23 +1,14 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  {
-    children: [
-      { href: '#', name: 'Technical Support' },
-      { href: '#', name: 'Sales' },
-      { href: '#', name: 'General' },
-    ],
-    href: '#',
-    name: 'Inboxes',
-  },
-  { children: [], href: '#', name: 'Reporting' },
-  { children: [], href: '#', name: 'Settings' },
+  { href: '/offers', name: 'Home' },
+  { href: '/submit', name: 'Benchmark your offer' },
 ];
 
 const config = {
   navigation,
-  showGlobalNav: true,
-  title: 'Offers',
+  showGlobalNav: false,
+  title: 'Tech Offers Repo',
 };
 
 export default config;
diff --git a/apps/portal/src/components/offers/OffersTable.tsx b/apps/portal/src/components/offers/OffersTable.tsx
new file mode 100644
index 00000000..ded79547
--- /dev/null
+++ b/apps/portal/src/components/offers/OffersTable.tsx
@@ -0,0 +1,190 @@
+import { useState } from 'react';
+import { HorizontalDivider, Pagination, Select, Tabs } from '@tih/ui';
+
+import CurrencySelector from '~/components/offers/util/currency/CurrencySelector';
+
+type TableRow = {
+  company: string;
+  date: string;
+  salary: string;
+  title: string;
+  yoe: string;
+};
+
+// eslint-disable-next-line no-shadow
+enum YOE_CATEGORY {
+  INTERN = 0,
+  ENTRY = 1,
+  MID = 2,
+  SENIOR = 3,
+}
+
+export default function OffersTable() {
+  const [currency, setCurrency] = useState('SGD');
+  const [selectedTab, setSelectedTab] = useState(YOE_CATEGORY.ENTRY);
+  const [selectedPage, setSelectedPage] = useState(1);
+
+  function renderTabs() {
+    return (
+      <div className="flex justify-center">
+        <div className="w-fit">
+          <Tabs
+            label="Table Navigation"
+            tabs={[
+              {
+                label: 'Fresh Grad (0-3 YOE)',
+                value: YOE_CATEGORY.ENTRY,
+              },
+              {
+                label: 'Mid (4-7 YOE)',
+                value: YOE_CATEGORY.MID,
+              },
+              {
+                label: 'Senior (8+ YOE)',
+                value: YOE_CATEGORY.SENIOR,
+              },
+              {
+                label: 'Internship',
+                value: YOE_CATEGORY.INTERN,
+              },
+            ]}
+            value={selectedTab}
+            onChange={(value) => setSelectedTab(value)}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  function renderFilters() {
+    return (
+      <div className="m-4 flex items-center justify-between">
+        <div className="justify-left flex items-center space-x-2">
+          <span>All offers in</span>
+          <CurrencySelector
+            handleCurrencyChange={(value: string) => setCurrency(value)}
+            selectedCurrency={currency}
+          />
+        </div>
+        <Select
+          disabled={true}
+          isLabelHidden={true}
+          label=""
+          options={[
+            {
+              label: 'Latest Submitted',
+              value: 'latest-submitted',
+            },
+          ]}
+          value="latest-submitted"
+        />
+      </div>
+    );
+  }
+
+  function renderHeader() {
+    return (
+      <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          {[
+            'Company',
+            'Title',
+            'YOE',
+            'TC/year',
+            'Date offered',
+            'Actions',
+          ].map((header) => (
+            <th key={header} className="py-3 px-6" scope="col">
+              {header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+    );
+  }
+
+  function renderRow({ company, title, yoe, salary, date }: TableRow) {
+    return (
+      <tr className="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
+        <th
+          className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white"
+          scope="row">
+          {company}
+        </th>
+        <td className="py-4 px-6">{title}</td>
+        <td className="py-4 px-6">{yoe}</td>
+        <td className="py-4 px-6">{salary}</td>
+        <td className="py-4 px-6">{date}</td>
+        <td className="space-x-4 py-4 px-6">
+          <a
+            className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"
+            href="#">
+            View Profile
+          </a>
+          <a
+            className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"
+            href="#">
+            Comment
+          </a>
+        </td>
+      </tr>
+    );
+  }
+
+  function renderPagination() {
+    return (
+      <nav
+        aria-label="Table navigation"
+        className="flex items-center justify-between p-4">
+        <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
+          Showing{' '}
+          <span className="font-semibold text-gray-900 dark:text-white">
+            1-10
+          </span>{' '}
+          of{' '}
+          <span className="font-semibold text-gray-900 dark:text-white">
+            1000
+          </span>
+        </span>
+        <Pagination
+          current={selectedPage}
+          end={10}
+          label="Pagination"
+          pagePadding={1}
+          start={1}
+          onSelect={(page) => setSelectedPage(page)}
+        />
+      </nav>
+    );
+  }
+
+  return (
+    <div className="w-5/6">
+      {renderTabs()}
+      <HorizontalDivider />
+      <div className="relative w-full overflow-x-auto shadow-md sm:rounded-lg">
+        {renderFilters()}
+        <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
+          {renderHeader()}
+          <tbody>
+            {renderRow({
+              company: 'Shopee',
+              date: 'May 2022',
+              salary: 'TC/yr',
+              title: 'SWE',
+              yoe: '5',
+            })}
+            {renderRow({
+              company: 'Shopee',
+              date: 'May 2022',
+              salary: 'TC/yr',
+              title: 'SWE',
+              yoe: '5',
+            })}
+          </tbody>
+        </table>
+        {renderPagination()}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx b/apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx
new file mode 100644
index 00000000..7cfbc0cb
--- /dev/null
+++ b/apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx
@@ -0,0 +1,172 @@
+// eslint-disable-next-line no-shadow
+export enum Currency {
+  AED = 'AED', // United Arab Emirates Dirham
+  AFN = 'AFN', // Afghanistan Afghani
+  ALL = 'ALL', // Albania Lek
+  AMD = 'AMD', // Armenia Dram
+  ANG = 'ANG', // Netherlands Antilles Guilder
+  AOA = 'AOA', // Angola Kwanza
+  ARS = 'ARS', // Argentina Peso
+  AUD = 'AUD', // Australia Dollar
+  AWG = 'AWG', // Aruba Guilder
+  AZN = 'AZN', // Azerbaijan New Manat
+  BAM = 'BAM', // Bosnia and Herzegovina Convertible Marka
+  BBD = 'BBD', // Barbados Dollar
+  BDT = 'BDT', // Bangladesh Taka
+  BGN = 'BGN', // Bulgaria Lev
+  BHD = 'BHD', // Bahrain Dinar
+  BIF = 'BIF', // Burundi Franc
+  BMD = 'BMD', // Bermuda Dollar
+  BND = 'BND', // Brunei Darussalam Dollar
+  BOB = 'BOB', // Bolivia Bolíviano
+  BRL = 'BRL', // Brazil Real
+  BSD = 'BSD', // Bahamas Dollar
+  BTN = 'BTN', // Bhutan Ngultrum
+  BWP = 'BWP', // Botswana Pula
+  BYR = 'BYR', // Belarus Ruble
+  BZD = 'BZD', // Belize Dollar
+  CAD = 'CAD', // Canada Dollar
+  CDF = 'CDF', // Congo/Kinshasa Franc
+  CHF = 'CHF', // Switzerland Franc
+  CLP = 'CLP', // Chile Peso
+  CNY = 'CNY', // China Yuan Renminbi
+  COP = 'COP', // Colombia Peso
+  CRC = 'CRC', // Costa Rica Colon
+  CUC = 'CUC', // Cuba Convertible Peso
+  CUP = 'CUP', // Cuba Peso
+  CVE = 'CVE', // Cape Verde Escudo
+  CZK = 'CZK', // Czech Republic Koruna
+  DJF = 'DJF', // Djibouti Franc
+  DKK = 'DKK', // Denmark Krone
+  DOP = 'DOP', // Dominican Republic Peso
+  DZD = 'DZD', // Algeria Dinar
+  EGP = 'EGP', // Egypt Pound
+  ERN = 'ERN', // Eritrea Nakfa
+  ETB = 'ETB', // Ethiopia Birr
+  EUR = 'EUR', // Euro Member Countries
+  FJD = 'FJD', // Fiji Dollar
+  FKP = 'FKP', // Falkland Islands (Malvinas) Pound
+  GBP = 'GBP', // United Kingdom Pound
+  GEL = 'GEL', // Georgia Lari
+  GGP = 'GGP', // Guernsey Pound
+  GHS = 'GHS', // Ghana Cedi
+  GIP = 'GIP', // Gibraltar Pound
+  GMD = 'GMD', // Gambia Dalasi
+  GNF = 'GNF', // Guinea Franc
+  GTQ = 'GTQ', // Guatemala Quetzal
+  GYD = 'GYD', // Guyana Dollar
+  HKD = 'HKD', // Hong Kong Dollar
+  HNL = 'HNL', // Honduras Lempira
+  HRK = 'HRK', // Croatia Kuna
+  HTG = 'HTG', // Haiti Gourde
+  HUF = 'HUF', // Hungary Forint
+  IDR = 'IDR', // Indonesia Rupiah
+  ILS = 'ILS', // Israel Shekel
+  IMP = 'IMP', // Isle of Man Pound
+  INR = 'INR', // India Rupee
+  IQD = 'IQD', // Iraq Dinar
+  IRR = 'IRR', // Iran Rial
+  ISK = 'ISK', // Iceland Krona
+  JEP = 'JEP', // Jersey Pound
+  JMD = 'JMD', // Jamaica Dollar
+  JOD = 'JOD', // Jordan Dinar
+  JPY = 'JPY', // Japan Yen
+  KES = 'KES', // Kenya Shilling
+  KGS = 'KGS', // Kyrgyzstan Som
+  KHR = 'KHR', // Cambodia Riel
+  KMF = 'KMF', // Comoros Franc
+  KPW = 'KPW', // Korea (North) Won
+  KRW = 'KRW', // Korea (South) Won
+  KWD = 'KWD', // Kuwait Dinar
+  KYD = 'KYD', // Cayman Islands Dollar
+  KZT = 'KZT', // Kazakhstan Tenge
+  LAK = 'LAK', // Laos Kip
+  LBP = 'LBP', // Lebanon Pound
+  LKR = 'LKR', // Sri Lanka Rupee
+  LRD = 'LRD', // Liberia Dollar
+  LSL = 'LSL', // Lesotho Loti
+  LYD = 'LYD', // Libya Dinar
+  MAD = 'MAD', // Morocco Dirham
+  MDL = 'MDL', // Moldova Leu
+  MGA = 'MGA', // Madagascar Ariary
+  MKD = 'MKD', // Macedonia Denar
+  MMK = 'MMK', // Myanmar (Burma) Kyat
+  MNT = 'MNT', // Mongolia Tughrik
+  MOP = 'MOP', // Macau Pataca
+  MRO = 'MRO', // Mauritania Ouguiya
+  MUR = 'MUR', // Mauritius Rupee
+  MVR = 'MVR', // Maldives (Maldive Islands) Rufiyaa
+  MWK = 'MWK', // Malawi Kwacha
+  MXN = 'MXN', // Mexico Peso
+  MYR = 'MYR', // Malaysia Ringgit
+  MZN = 'MZN', // Mozambique Metical
+  NAD = 'NAD', // Namibia Dollar
+  NGN = 'NGN', // Nigeria Naira
+  NIO = 'NIO', // Nicaragua Cordoba
+  NOK = 'NOK', // Norway Krone
+  NPR = 'NPR', // Nepal Rupee
+  NZD = 'NZD', // New Zealand Dollar
+  OMR = 'OMR', // Oman Rial
+  PAB = 'PAB', // Panama Balboa
+  PEN = 'PEN', // Peru Sol
+  PGK = 'PGK', // Papua New Guinea Kina
+  PHP = 'PHP', // Philippines Peso
+  PKR = 'PKR', // Pakistan Rupee
+  PLN = 'PLN', // Poland Zloty
+  PYG = 'PYG', // Paraguay Guarani
+  QAR = 'QAR', // Qatar Riyal
+  RON = 'RON', // Romania New Leu
+  RSD = 'RSD', // Serbia Dinar
+  RUB = 'RUB', // Russia Ruble
+  RWF = 'RWF', // Rwanda Franc
+  SAR = 'SAR', // Saudi Arabia Riyal
+  SBD = 'SBD', // Solomon Islands Dollar
+  SCR = 'SCR', // Seychelles Rupee
+  SDG = 'SDG', // Sudan Pound
+  SEK = 'SEK', // Sweden Krona
+  SGD = 'SGD', // Singapore Dollar
+  SHP = 'SHP', // Saint Helena Pound
+  SLL = 'SLL', // Sierra Leone Leone
+  SOS = 'SOS', // Somalia Shilling
+  SPL = 'SPL', // Seborga Luigino
+  SRD = 'SRD', // Suriname Dollar
+  STD = 'STD', // São Tomé and Príncipe Dobra
+  SVC = 'SVC', // El Salvador Colon
+  SYP = 'SYP', // Syria Pound
+  SZL = 'SZL', // Swaziland Lilangeni
+  THB = 'THB', // Thailand Baht
+  TJS = 'TJS', // Tajikistan Somoni
+  TMT = 'TMT', // Turkmenistan Manat
+  TND = 'TND', // Tunisia Dinar
+  TOP = 'TOP', // Tonga Pa'anga
+  TRY = 'TRY', // Turkey Lira
+  TTD = 'TTD', // Trinidad and Tobago Dollar
+  TVD = 'TVD', // Tuvalu Dollar
+  TWD = 'TWD', // Taiwan New Dollar
+  TZS = 'TZS', // Tanzania Shilling
+  UAH = 'UAH', // Ukraine Hryvnia
+  UGX = 'UGX', // Uganda Shilling
+  USD = 'USD', // United States Dollar
+  UYU = 'UYU', // Uruguay Peso
+  UZS = 'UZS', // Uzbekistan Som
+  VEF = 'VEF', // Venezuela Bolivar
+  VND = 'VND', // Viet Nam Dong
+  VUV = 'VUV', // Vanuatu Vatu
+  WST = 'WST', // Samoa Tala
+  XAF = 'XAF', // Communauté Financière Africaine (BEAC) CFA Franc BEAC
+  XCD = 'XCD', // East Caribbean Dollar
+  XDR = 'XDR', // International Monetary Fund (IMF) Special Drawing Rights
+  XOF = 'XOF', // Communauté Financière Africaine (BCEAO) Franc
+  XPF = 'XPF', // Comptoirs Français du Pacifique (CFP) Franc
+  YER = 'YER', // Yemen Rial
+  ZAR = 'ZAR', // South Africa Rand
+  ZMW = 'ZMW', // Zambia Kwacha
+  ZWD = 'ZWD', // Zimbabwe Dollar
+}
+
+export const CURRENCY_OPTIONS = Object.entries(Currency).map(
+  ([key, value]) => ({
+    label: key,
+    value,
+  }),
+);
diff --git a/apps/portal/src/components/offers/util/currency/CurrencySelector.tsx b/apps/portal/src/components/offers/util/currency/CurrencySelector.tsx
new file mode 100644
index 00000000..2ebe5bd5
--- /dev/null
+++ b/apps/portal/src/components/offers/util/currency/CurrencySelector.tsx
@@ -0,0 +1,30 @@
+import { Select } from '@tih/ui';
+
+import { Currency } from '~/components/offers/util/currency/CurrencyEnum';
+
+const currencyOptions = Object.entries(Currency).map(([key, value]) => ({
+  label: key,
+  value,
+}));
+
+type Props = Readonly<{
+  handleCurrencyChange: (currency: string) => void;
+  selectedCurrency: string;
+}>;
+
+export default function CurrencySelector({
+  selectedCurrency,
+  handleCurrencyChange,
+}: Props) {
+  return (
+    <Select
+      display="inline"
+      isLabelHidden={true}
+      label="Select fruit"
+      name=""
+      options={currencyOptions}
+      value={selectedCurrency}
+      onChange={(currency: string) => handleCurrencyChange(currency)}
+    />
+  );
+}
diff --git a/apps/portal/src/components/offers/util/time/index.tsx b/apps/portal/src/components/offers/util/time/index.tsx
new file mode 100644
index 00000000..86f21ab9
--- /dev/null
+++ b/apps/portal/src/components/offers/util/time/index.tsx
@@ -0,0 +1,7 @@
+export function formatDate(value: Date | number | string) {
+  const date = new Date(value);
+  //   Const day = date.toLocaleString('default', { day: '2-digit' });
+  const month = date.toLocaleString('default', { month: 'short' });
+  const year = date.toLocaleString('default', { year: 'numeric' });
+  return `${month} ${year}`;
+}
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index 4fa89c65..9fdb6fbe 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -1,10 +1,10 @@
-import OffersTitle from '~/components/offers/OffersTitle';
+import OffersTable from '~/components/offers/OffersTable';
 
 export default function OffersHomePage() {
   return (
     <main className="flex-1 overflow-y-auto">
       <div className="flex h-full items-center justify-center">
-        <OffersTitle />
+        <OffersTable />
       </div>
     </main>
   );
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index 5ca79635..487e3d3d 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -5,10 +5,12 @@ import {
   BriefcaseIcon,
   BuildingOffice2Icon,
   CalendarDaysIcon,
+  ClipboardDocumentIcon,
   PencilSquareIcon,
+  ShareIcon,
   TrashIcon,
 } from '@heroicons/react/24/outline';
-import { Button, Tabs, TextArea } from '@tih/ui';
+import { Button, Dialog, Tabs } from '@tih/ui';
 
 import { EducationBackgroundType } from '~/components/offers/profile/EducationCard';
 import EducationCard from '~/components/offers/profile/EducationCard';
@@ -17,44 +19,9 @@ import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
 
 export default function OfferProfile() {
   const [selectedTab, setSelectedTab] = useState('offers');
-  //   Const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
   function renderActionList() {
     return (
-      //   <div>
-      //     <Button
-      //       label="Open"
-      //       variant="primary"
-      //       onClick={() => setIsDialogOpen(true)}
-      //     />
-      //     {isDialogOpen && (
-      //       <Dialog
-      //         primaryButton={
-      //           <Button
-      //             display="block"
-      //             label="OK"
-      //             variant="primary"
-      //             onClick={() => setIsDialogOpen(false)}
-      //           />
-      //         }
-      //         secondaryButton={
-      //           <Button
-      //             display="block"
-      //             label="Cancel"
-      //             variant="tertiary"
-      //             onClick={() => setIsDialogOpen(false)}
-      //           />
-      //         }
-      //         title="Lorem ipsum, dolor sit amet"
-      //         onClose={() => setIsDialogOpen(false)}>
-      //         <div>
-      //           Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius
-      //           aliquam laudantium explicabo pariatur iste dolorem animi vitae
-      //           error totam. At sapiente aliquam accusamus facere veritatis.
-      //         </div>
-      //       </Dialog>
-      //     )}
-      //   </div>
-
       <div className="space-x-2">
         <Button
           icon={BookmarkSquareIcon}
@@ -76,7 +43,35 @@ export default function OfferProfile() {
           label="Delete"
           size="md"
           variant="tertiary"
+          onClick={() => setIsDialogOpen(true)}
         />
+        {isDialogOpen && (
+          <Dialog
+            isShown={isDialogOpen}
+            primaryButton={
+              <Button
+                display="block"
+                label="Delete"
+                variant="primary"
+                onClick={() => setIsDialogOpen(false)}
+              />
+            }
+            secondaryButton={
+              <Button
+                display="block"
+                label="Cancel"
+                variant="tertiary"
+                onClick={() => setIsDialogOpen(false)}
+              />
+            }
+            title="Are you sure you want to delete this offer profile?"
+            onClose={() => setIsDialogOpen(false)}>
+            <div>
+              All comments will gone. You will not be able to access or recover
+              it.
+            </div>
+          </Dialog>
+        )}
       </div>
     );
   }
@@ -219,8 +214,28 @@ export default function OfferProfile() {
   function ProfileComments() {
     return (
       <div className="m-4">
-        <h2 className="text-2xl font-bold">Discussions</h2>
-        <TextArea label="Comment" placeholder="Type your comment here" />
+        <div className="flex-end flex justify-end space-x-4">
+          <Button
+            addonPosition="start"
+            icon={ClipboardDocumentIcon}
+            isLabelHidden={false}
+            label="Copy profile edit link"
+            size="sm"
+            variant="secondary"
+          />
+          <Button
+            addonPosition="start"
+            icon={ShareIcon}
+            isLabelHidden={false}
+            label="Copy public link"
+            size="sm"
+            variant="secondary"
+          />
+        </div>
+        <h2 className="mt-2 text-2xl font-bold">
+          Discussions feature coming soon
+        </h2>
+        {/* <TextArea label="Comment" placeholder="Type your comment here" /> */}
       </div>
     );
   }