diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 00000000..7c2fd46d
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,44 @@
+# Copied from https://github.com/facebook/docusaurus/blob/main/.github/workflows/lint.yml
+name: Lint
+
+on:
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+env:
+  DATABASE_URL: 'postgresql://postgres:password@localhost:5432/postgres'
+  GITHUB_CLIENT_ID: '1234'
+  GITHUB_CLIENT_SECRET: 'abcd'
+  NEXTAUTH_SECRET: 'efgh'
+  NEXTAUTH_URL: 'http://localhost:3000'
+  NODE_ENV: test
+  SUPABASE_ANON_KEY: 'ijkl'
+  SUPABASE_URL: 'https://abcd.supabase.co'
+
+jobs:
+  lint:
+    name: Lint
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: yarn
+      - name: Installation
+        run: yarn
+      - name: Check immutable yarn.lock
+        run: git diff --exit-code
+      - name: Lint
+        run: yarn lint
diff --git a/.github/workflows/tsc.yml b/.github/workflows/tsc.yml
new file mode 100644
index 00000000..784c4d76
--- /dev/null
+++ b/.github/workflows/tsc.yml
@@ -0,0 +1,37 @@
+# Copied from https://github.com/facebook/docusaurus/blob/main/.github/workflows/lint.yml
+name: Typecheck
+
+on:
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  tsc:
+    name: Typecheck
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: yarn
+      - name: Installation
+        run: yarn
+      - name: Check immutable yarn.lock
+        run: git diff --exit-code
+      # Build the shared types in dependent packages.
+      - name: Build dependencies
+        run: yarn turbo run build --filter=ui
+      - name: Typecheck
+        run: yarn tsc
diff --git a/apps/portal/package.json b/apps/portal/package.json
index 88ad7dfd..f1bdb9e7 100644
--- a/apps/portal/package.json
+++ b/apps/portal/package.json
@@ -30,6 +30,7 @@
     "next-auth": "~4.10.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.36.1",
     "react-pdf": "^5.7.2",
     "react-query": "^3.39.2",
diff --git a/apps/portal/prisma/migrations/20221011042156_/migration.sql b/apps/portal/prisma/migrations/20221011042156_/migration.sql
new file mode 100644
index 00000000..07cf1b58
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221011042156_/migration.sql
@@ -0,0 +1,120 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `isAttending` on the `OffersEducation` table. All the data in the column will be lost.
+  - The primary key for the `OffersFullTime` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to drop the column `offerId` on the `OffersFullTime` table. All the data in the column will be lost.
+  - The primary key for the `OffersIntern` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to drop the column `offerId` on the `OffersIntern` table. All the data in the column will be lost.
+  - A unique constraint covering the columns `[offersInternId]` on the table `OffersOffer` will be added. If there are existing duplicate values, this will fail.
+  - A unique constraint covering the columns `[offersFullTimeId]` on the table `OffersOffer` will be added. If there are existing duplicate values, this will fail.
+  - A unique constraint covering the columns `[profileName]` on the table `OffersProfile` will be added. If there are existing duplicate values, this will fail.
+  - The required column `id` was added to the `OffersFullTime` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
+  - The required column `id` was added to the `OffersIntern` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
+
+*/
+-- DropForeignKey
+ALTER TABLE "OffersBackground" DROP CONSTRAINT "OffersBackground_offersProfileId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersEducation" DROP CONSTRAINT "OffersEducation_backgroundId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersExperience" DROP CONSTRAINT "OffersExperience_backgroundId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersFullTime" DROP CONSTRAINT "OffersFullTime_baseSalaryId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersFullTime" DROP CONSTRAINT "OffersFullTime_bonusId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersFullTime" DROP CONSTRAINT "OffersFullTime_offerId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersFullTime" DROP CONSTRAINT "OffersFullTime_stocksId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersFullTime" DROP CONSTRAINT "OffersFullTime_totalCompensationId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersIntern" DROP CONSTRAINT "OffersIntern_monthlySalaryId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersIntern" DROP CONSTRAINT "OffersIntern_offerId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersOffer" DROP CONSTRAINT "OffersOffer_profileId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersReply" DROP CONSTRAINT "OffersReply_profileId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersSpecificYoe" DROP CONSTRAINT "OffersSpecificYoe_backgroundId_fkey";
+
+-- AlterTable
+ALTER TABLE "OffersEducation" DROP COLUMN "isAttending";
+
+-- AlterTable
+ALTER TABLE "OffersFullTime" DROP CONSTRAINT "OffersFullTime_pkey",
+DROP COLUMN "offerId",
+ADD COLUMN     "id" TEXT NOT NULL,
+ADD CONSTRAINT "OffersFullTime_pkey" PRIMARY KEY ("id");
+
+-- AlterTable
+ALTER TABLE "OffersIntern" DROP CONSTRAINT "OffersIntern_pkey",
+DROP COLUMN "offerId",
+ADD COLUMN     "id" TEXT NOT NULL,
+ADD CONSTRAINT "OffersIntern_pkey" PRIMARY KEY ("id");
+
+-- AlterTable
+ALTER TABLE "OffersOffer" ADD COLUMN     "offersFullTimeId" TEXT,
+ADD COLUMN     "offersInternId" TEXT;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OffersOffer_offersInternId_key" ON "OffersOffer"("offersInternId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OffersOffer_offersFullTimeId_key" ON "OffersOffer"("offersFullTimeId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OffersProfile_profileName_key" ON "OffersProfile"("profileName");
+
+-- AddForeignKey
+ALTER TABLE "OffersBackground" ADD CONSTRAINT "OffersBackground_offersProfileId_fkey" FOREIGN KEY ("offersProfileId") REFERENCES "OffersProfile"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersSpecificYoe" ADD CONSTRAINT "OffersSpecificYoe_backgroundId_fkey" FOREIGN KEY ("backgroundId") REFERENCES "OffersBackground"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersExperience" ADD CONSTRAINT "OffersExperience_backgroundId_fkey" FOREIGN KEY ("backgroundId") REFERENCES "OffersBackground"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersEducation" ADD CONSTRAINT "OffersEducation_backgroundId_fkey" FOREIGN KEY ("backgroundId") REFERENCES "OffersBackground"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersReply" ADD CONSTRAINT "OffersReply_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "OffersProfile"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersOffer" ADD CONSTRAINT "OffersOffer_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "OffersProfile"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersOffer" ADD CONSTRAINT "OffersOffer_offersInternId_fkey" FOREIGN KEY ("offersInternId") REFERENCES "OffersIntern"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersOffer" ADD CONSTRAINT "OffersOffer_offersFullTimeId_fkey" FOREIGN KEY ("offersFullTimeId") REFERENCES "OffersFullTime"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersIntern" ADD CONSTRAINT "OffersIntern_monthlySalaryId_fkey" FOREIGN KEY ("monthlySalaryId") REFERENCES "OffersCurrency"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersFullTime" ADD CONSTRAINT "OffersFullTime_totalCompensationId_fkey" FOREIGN KEY ("totalCompensationId") REFERENCES "OffersCurrency"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersFullTime" ADD CONSTRAINT "OffersFullTime_baseSalaryId_fkey" FOREIGN KEY ("baseSalaryId") REFERENCES "OffersCurrency"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersFullTime" ADD CONSTRAINT "OffersFullTime_bonusId_fkey" FOREIGN KEY ("bonusId") REFERENCES "OffersCurrency"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersFullTime" ADD CONSTRAINT "OffersFullTime_stocksId_fkey" FOREIGN KEY ("stocksId") REFERENCES "OffersCurrency"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/apps/portal/prisma/migrations/20221012161857_add_user_to_replies/migration.sql b/apps/portal/prisma/migrations/20221012161857_add_user_to_replies/migration.sql
new file mode 100644
index 00000000..bc51e8e1
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221012161857_add_user_to_replies/migration.sql
@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `creator` on the `OffersReply` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "OffersReply" DROP COLUMN "creator",
+ADD COLUMN     "userId" TEXT;
+
+-- AddForeignKey
+ALTER TABLE "OffersReply" ADD CONSTRAINT "OffersReply_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/apps/portal/prisma/migrations/20221013032033_update_resume_vote_to_enum/migration.sql b/apps/portal/prisma/migrations/20221013032033_update_resume_vote_to_enum/migration.sql
new file mode 100644
index 00000000..935df922
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221013032033_update_resume_vote_to_enum/migration.sql
@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - Changed the type of `value` on the `ResumesCommentVote` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- AlterTable
+ALTER TABLE "ResumesCommentVote" DROP COLUMN "value",
+ADD COLUMN     "value" "Vote" NOT NULL;
diff --git a/apps/portal/prisma/migrations/20221014192315_/migration.sql b/apps/portal/prisma/migrations/20221014192315_/migration.sql
new file mode 100644
index 00000000..20352390
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221014192315_/migration.sql
@@ -0,0 +1,60 @@
+-- CreateTable
+CREATE TABLE "OffersAnalysis" (
+    "id" TEXT NOT NULL,
+    "profileId" TEXT NOT NULL,
+    "offerId" TEXT NOT NULL,
+    "overallPercentile" INTEGER NOT NULL,
+    "noOfSimilarOffers" INTEGER NOT NULL,
+    "companyPercentile" INTEGER NOT NULL,
+    "noOfSimilarCompanyOffers" INTEGER NOT NULL,
+
+    CONSTRAINT "OffersAnalysis_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_TopOverallOffers" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "_TopCompanyOffers" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OffersAnalysis_profileId_key" ON "OffersAnalysis"("profileId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OffersAnalysis_offerId_key" ON "OffersAnalysis"("offerId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_TopOverallOffers_AB_unique" ON "_TopOverallOffers"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_TopOverallOffers_B_index" ON "_TopOverallOffers"("B");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_TopCompanyOffers_AB_unique" ON "_TopCompanyOffers"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_TopCompanyOffers_B_index" ON "_TopCompanyOffers"("B");
+
+-- AddForeignKey
+ALTER TABLE "OffersAnalysis" ADD CONSTRAINT "OffersAnalysis_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "OffersProfile"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersAnalysis" ADD CONSTRAINT "OffersAnalysis_offerId_fkey" FOREIGN KEY ("offerId") REFERENCES "OffersOffer"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_TopOverallOffers" ADD CONSTRAINT "_TopOverallOffers_A_fkey" FOREIGN KEY ("A") REFERENCES "OffersAnalysis"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_TopOverallOffers" ADD CONSTRAINT "_TopOverallOffers_B_fkey" FOREIGN KEY ("B") REFERENCES "OffersOffer"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_TopCompanyOffers" ADD CONSTRAINT "_TopCompanyOffers_A_fkey" FOREIGN KEY ("A") REFERENCES "OffersAnalysis"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_TopCompanyOffers" ADD CONSTRAINT "_TopCompanyOffers_B_fkey" FOREIGN KEY ("B") REFERENCES "OffersOffer"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/apps/portal/prisma/migrations/20221014205230_/migration.sql b/apps/portal/prisma/migrations/20221014205230_/migration.sql
new file mode 100644
index 00000000..aec827dc
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221014205230_/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "OffersAnalysis" ALTER COLUMN "overallPercentile" SET DATA TYPE DOUBLE PRECISION,
+ALTER COLUMN "companyPercentile" SET DATA TYPE DOUBLE PRECISION;
diff --git a/apps/portal/prisma/migrations/20221014211740_/migration.sql b/apps/portal/prisma/migrations/20221014211740_/migration.sql
new file mode 100644
index 00000000..1c960010
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221014211740_/migration.sql
@@ -0,0 +1,11 @@
+-- DropForeignKey
+ALTER TABLE "OffersAnalysis" DROP CONSTRAINT "OffersAnalysis_offerId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "OffersAnalysis" DROP CONSTRAINT "OffersAnalysis_profileId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "OffersAnalysis" ADD CONSTRAINT "OffersAnalysis_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "OffersProfile"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OffersAnalysis" ADD CONSTRAINT "OffersAnalysis_offerId_fkey" FOREIGN KEY ("offerId") REFERENCES "OffersOffer"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/apps/portal/prisma/schema.prisma b/apps/portal/prisma/schema.prisma
index b6a65a12..45a730a3 100644
--- a/apps/portal/prisma/schema.prisma
+++ b/apps/portal/prisma/schema.prisma
@@ -1,92 +1,93 @@
 // Refer to the Prisma schema docs: https://pris.ly/d/prisma-schema
 
 generator client {
-    provider = "prisma-client-js"
+  provider = "prisma-client-js"
 }
 
 datasource db {
-    provider = "postgresql"
-    url      = env("DATABASE_URL")
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
 }
 
 // Necessary for NextAuth.
 model Account {
-    id                String  @id @default(cuid())
-    userId            String
-    type              String
-    provider          String
-    providerAccountId String
-    refresh_token     String? @db.Text
-    access_token      String? @db.Text
-    expires_at        Int?
-    token_type        String?
-    scope             String?
-    id_token          String? @db.Text
-    session_state     String?
-    user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)
-
-    @@unique([provider, providerAccountId])
+  id                String  @id @default(cuid())
+  userId            String
+  type              String
+  provider          String
+  providerAccountId String
+  refresh_token     String? @db.Text
+  access_token      String? @db.Text
+  expires_at        Int?
+  token_type        String?
+  scope             String?
+  id_token          String? @db.Text
+  session_state     String?
+  user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
 }
 
 model Session {
-    id           String   @id @default(cuid())
-    sessionToken String   @unique
-    userId       String
-    expires      DateTime
-    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  id           String   @id @default(cuid())
+  sessionToken String   @unique
+  userId       String
+  expires      DateTime
+  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 model User {
-    id                            String                         @id @default(cuid())
-    name                          String?
-    email                         String?                        @unique
-    emailVerified                 DateTime?
-    image                         String?
-    accounts                      Account[]
-    sessions                      Session[]
-    todos                         Todo[]
-    resumesResumes                ResumesResume[]
-    resumesStars                  ResumesStar[]
-    resumesComments               ResumesComment[]
-    resumesCommentVotes           ResumesCommentVote[]
-    questionsQuestions            QuestionsQuestion[]
-    questionsQuestionEncounters   QuestionsQuestionEncounter[]
-    questionsQuestionVotes        QuestionsQuestionVote[]
-    questionsQuestionComments     QuestionsQuestionComment[]
-    questionsQuestionCommentVotes QuestionsQuestionCommentVote[]
-    questionsAnswers              QuestionsAnswer[]
-    questionsAnswerVotes          QuestionsAnswerVote[]
-    questionsAnswerComments       QuestionsAnswerComment[]
-    questionsAnswerCommentVotes   QuestionsAnswerCommentVote[]
-    OffersProfile                 OffersProfile[]
+  id                            String                         @id @default(cuid())
+  name                          String?
+  email                         String?                        @unique
+  emailVerified                 DateTime?
+  image                         String?
+  accounts                      Account[]
+  sessions                      Session[]
+  todos                         Todo[]
+  resumesResumes                ResumesResume[]
+  resumesStars                  ResumesStar[]
+  resumesComments               ResumesComment[]
+  resumesCommentVotes           ResumesCommentVote[]
+  questionsQuestions            QuestionsQuestion[]
+  questionsQuestionEncounters   QuestionsQuestionEncounter[]
+  questionsQuestionVotes        QuestionsQuestionVote[]
+  questionsQuestionComments     QuestionsQuestionComment[]
+  questionsQuestionCommentVotes QuestionsQuestionCommentVote[]
+  questionsAnswers              QuestionsAnswer[]
+  questionsAnswerVotes          QuestionsAnswerVote[]
+  questionsAnswerComments       QuestionsAnswerComment[]
+  questionsAnswerCommentVotes   QuestionsAnswerCommentVote[]
+  OffersProfile                 OffersProfile[]
+  offersDiscussion              OffersReply[]
 }
 
 enum Vote {
-    UPVOTE
-    DOWNVOTE
+  UPVOTE
+  DOWNVOTE
 }
 
 model VerificationToken {
-    identifier String
-    token      String   @unique
-    expires    DateTime
+  identifier String
+  token      String   @unique
+  expires    DateTime
 
-    @@unique([identifier, token])
+  @@unique([identifier, token])
 }
 
 model Todo {
-    id        String     @id @default(cuid())
-    userId    String
-    text      String     @db.Text
-    status    TodoStatus @default(INCOMPLETE)
-    createdAt DateTime   @default(now())
-    updatedAt DateTime   @updatedAt
-    user      User       @relation(fields: [userId], references: [id], onDelete: Cascade)
+  id        String     @id @default(cuid())
+  userId    String
+  text      String     @db.Text
+  status    TodoStatus @default(INCOMPLETE)
+  createdAt DateTime   @default(now())
+  updatedAt DateTime   @updatedAt
+  user      User       @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 enum TodoStatus {
-    INCOMPLETE
-    COMPLETE
+  INCOMPLETE
+  COMPLETE
 }
 
 model Company {
@@ -108,65 +109,65 @@ model Company {
 // use camelCase for field names, and try to name them consistently
 // across all models in this file.
 model ResumesResume {
-    id             String           @id @default(cuid())
-    userId         String
-    title          String           @db.Text
-    // TODO: Update role, experience, location to use Enums
-    role           String           @db.Text
-    experience     String           @db.Text
-    location       String           @db.Text
-    url            String
-    additionalInfo String?          @db.Text
-    createdAt      DateTime         @default(now())
-    updatedAt      DateTime         @updatedAt
-    user           User             @relation(fields: [userId], references: [id], onDelete: Cascade)
-    stars          ResumesStar[]
-    comments       ResumesComment[]
+  id             String           @id @default(cuid())
+  userId         String
+  title          String           @db.Text
+  // TODO: Update role, experience, location to use Enums
+  role           String           @db.Text
+  experience     String           @db.Text
+  location       String           @db.Text
+  url            String
+  additionalInfo String?          @db.Text
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  user           User             @relation(fields: [userId], references: [id], onDelete: Cascade)
+  stars          ResumesStar[]
+  comments       ResumesComment[]
 }
 
 model ResumesStar {
-    id        String        @id @default(cuid())
-    userId    String
-    resumeId  String
-    createdAt DateTime      @default(now())
-    resume    ResumesResume @relation(fields: [resumeId], references: [id], onDelete: Cascade)
-    user      User          @relation(fields: [userId], references: [id], onDelete: Cascade)
+  id        String        @id @default(cuid())
+  userId    String
+  resumeId  String
+  createdAt DateTime      @default(now())
+  resume    ResumesResume @relation(fields: [resumeId], references: [id], onDelete: Cascade)
+  user      User          @relation(fields: [userId], references: [id], onDelete: Cascade)
 
-    @@unique([userId, resumeId])
+  @@unique([userId, resumeId])
 }
 
 model ResumesComment {
-    id          String               @id @default(cuid())
-    userId      String
-    resumeId    String
-    description String               @db.Text
-    section     ResumesSection
-    createdAt   DateTime             @default(now())
-    updatedAt   DateTime             @updatedAt
-    resume      ResumesResume        @relation(fields: [resumeId], references: [id], onDelete: Cascade)
-    votes       ResumesCommentVote[]
-    user        User                 @relation(fields: [userId], references: [id], onDelete: Cascade)
+  id          String               @id @default(cuid())
+  userId      String
+  resumeId    String
+  description String               @db.Text
+  section     ResumesSection
+  createdAt   DateTime             @default(now())
+  updatedAt   DateTime             @updatedAt
+  resume      ResumesResume        @relation(fields: [resumeId], references: [id], onDelete: Cascade)
+  votes       ResumesCommentVote[]
+  user        User                 @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 enum ResumesSection {
-    GENERAL
-    EDUCATION
-    EXPERIENCE
-    PROJECTS
-    SKILLS
+  GENERAL
+  EDUCATION
+  EXPERIENCE
+  PROJECTS
+  SKILLS
 }
 
 model ResumesCommentVote {
-    id        String         @id @default(cuid())
-    userId    String
-    commentId String
-    value     Int
-    createdAt DateTime       @default(now())
-    updatedAt DateTime       @updatedAt
-    comment   ResumesComment @relation(fields: [commentId], references: [id], onDelete: Cascade)
-    user      User           @relation(fields: [userId], references: [id], onDelete: Cascade)
+  id        String         @id @default(cuid())
+  userId    String
+  commentId String
+  value     Vote
+  createdAt DateTime       @default(now())
+  updatedAt DateTime       @updatedAt
+  comment   ResumesComment @relation(fields: [commentId], references: [id], onDelete: Cascade)
+  user      User           @relation(fields: [userId], references: [id], onDelete: Cascade)
 
-    @@unique([userId, commentId])
+  @@unique([userId, commentId])
 }
 
 // End of Resumes project models.
@@ -177,175 +178,202 @@ model ResumesCommentVote {
 // across all models in this file.
 
 model OffersProfile {
-    id          String   @id @default(cuid())
-    profileName String   @unique
-    createdAt   DateTime @default(now())
+  id          String   @id @default(cuid())
+  profileName String   @unique
+  createdAt   DateTime @default(now())
 
-    background OffersBackground?
+  background OffersBackground?
 
-    editToken String
+  editToken String
 
-    discussion OffersReply[]
+  discussion OffersReply[]
 
-    offers OffersOffer[]
+  offers OffersOffer[]
 
-    user   User?   @relation(fields: [userId], references: [id])
-    userId String?
+  user   User?   @relation(fields: [userId], references: [id])
+  userId String?
+
+  analysis OffersAnalysis?
 }
 
 model OffersBackground {
-    id String @id @default(cuid())
+  id String @id @default(cuid())
 
-    totalYoe     Int?
-    specificYoes OffersSpecificYoe[]
+  totalYoe     Int
+  specificYoes OffersSpecificYoe[]
 
-    experiences OffersExperience[] // For extensibility in the future
+  experiences OffersExperience[] // For extensibility in the future
 
-    educations OffersEducation[] // For extensibility in the future
+  educations OffersEducation[] // For extensibility in the future
 
-    profile         OffersProfile @relation(fields: [offersProfileId], references: [id])
-    offersProfileId String        @unique
+  profile         OffersProfile @relation(fields: [offersProfileId], references: [id], onDelete: Cascade)
+  offersProfileId String        @unique
 }
 
 model OffersSpecificYoe {
-    id String @id @default(cuid())
+  id String @id @default(cuid())
 
-    yoe    Int
-    domain String
+  yoe    Int
+  domain String
 
-    background   OffersBackground @relation(fields: [backgroundId], references: [id])
-    backgroundId String
+  background   OffersBackground @relation(fields: [backgroundId], references: [id], onDelete: Cascade)
+  backgroundId String
 }
 
 model OffersExperience {
-    id String @id @default(cuid())
+  id String @id @default(cuid())
 
-    company   Company? @relation(fields: [companyId], references: [id])
-    companyId String?
+  company   Company? @relation(fields: [companyId], references: [id])
+  companyId String?
 
-    jobType JobType?
-    title   String?
+  jobType JobType?
+  title   String?
 
-    // Add more fields
-    durationInMonths Int?
-    specialization   String?
+  // Add more fields
+  durationInMonths Int?
+  specialization   String?
 
-    // FULLTIME fields
-    level               String?
-    totalCompensation   OffersCurrency? @relation("ExperienceTotalCompensation", fields: [totalCompensationId], references: [id])
-    totalCompensationId String?         @unique
+  // FULLTIME fields
+  level               String?
+  totalCompensation   OffersCurrency? @relation("ExperienceTotalCompensation", fields: [totalCompensationId], references: [id])
+  totalCompensationId String?         @unique
 
-    // INTERN fields
-    monthlySalary   OffersCurrency? @relation("ExperienceMonthlySalary", fields: [monthlySalaryId], references: [id])
-    monthlySalaryId String?         @unique
+  // INTERN fields
+  monthlySalary   OffersCurrency? @relation("ExperienceMonthlySalary", fields: [monthlySalaryId], references: [id])
+  monthlySalaryId String?         @unique
 
-    background   OffersBackground @relation(fields: [backgroundId], references: [id])
-    backgroundId String
+  background   OffersBackground @relation(fields: [backgroundId], references: [id], onDelete: Cascade)
+  backgroundId String
 }
 
 model OffersCurrency {
-    id       String @id @default(cuid())
-    value    Int
-    currency String
+  id       String @id @default(cuid())
+  value    Int
+  currency String
 
-    // Experience
-    OffersExperienceTotalCompensation OffersExperience? @relation("ExperienceTotalCompensation")
-    OffersExperienceMonthlySalary     OffersExperience? @relation("ExperienceMonthlySalary")
+  // Experience
+  OffersExperienceTotalCompensation OffersExperience? @relation("ExperienceTotalCompensation")
+  OffersExperienceMonthlySalary     OffersExperience? @relation("ExperienceMonthlySalary")
 
-    // Full Time
-    OffersTotalCompensation OffersFullTime? @relation("OfferTotalCompensation")
-    OffersBaseSalary        OffersFullTime? @relation("OfferBaseSalary")
-    OffersBonus             OffersFullTime? @relation("OfferBonus")
-    OffersStocks            OffersFullTime? @relation("OfferStocks")
+  // Full Time
+  OffersTotalCompensation OffersFullTime? @relation("OfferTotalCompensation")
+  OffersBaseSalary        OffersFullTime? @relation("OfferBaseSalary")
+  OffersBonus             OffersFullTime? @relation("OfferBonus")
+  OffersStocks            OffersFullTime? @relation("OfferStocks")
 
-    // Intern
-    OffersMonthlySalary OffersIntern?
+  // Intern
+  OffersMonthlySalary OffersIntern?
 }
 
 enum JobType {
-    INTERN
-    FULLTIME
+  INTERN
+  FULLTIME
 }
 
 model OffersEducation {
-    id    String  @id @default(cuid())
-    type  String?
-    field String?
+  id    String  @id @default(cuid())
+  type  String?
+  field String?
 
-    // Add more fields
-    school    String?
-    startDate DateTime?
-    endDate   DateTime?
+  school    String?
+  startDate DateTime?
+  endDate   DateTime?
 
-    background   OffersBackground @relation(fields: [backgroundId], references: [id])
-    backgroundId String
+  background   OffersBackground @relation(fields: [backgroundId], references: [id], onDelete: Cascade)
+  backgroundId String
 }
 
 model OffersReply {
-    id        String   @id @default(cuid())
-    creator   String
-    createdAt DateTime @default(now())
-    message   String
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  message   String
+
+  replyingToId String?
+  replyingTo   OffersReply?  @relation("ReplyThread", fields: [replyingToId], references: [id])
+  replies      OffersReply[] @relation("ReplyThread")
 
-    replyingToId String?
-    replyingTo   OffersReply?  @relation("ReplyThread", fields: [replyingToId], references: [id])
-    replies      OffersReply[] @relation("ReplyThread")
+  profile   OffersProfile @relation(fields: [profileId], references: [id], onDelete: Cascade)
+  profileId String
 
-    profile   OffersProfile @relation(fields: [profileId], references: [id])
-    profileId String
+  user   User?   @relation(fields: [userId], references: [id])
+  userId String?
 }
 
 model OffersOffer {
-    id String @id @default(cuid())
+  id String @id @default(cuid())
 
-    profile   OffersProfile @relation(fields: [profileId], references: [id])
-    profileId String
+  profile   OffersProfile @relation(fields: [profileId], references: [id], onDelete: Cascade)
+  profileId String
 
-    company   Company @relation(fields: [companyId], references: [id])
-    companyId String
+  company   Company @relation(fields: [companyId], references: [id])
+  companyId String
 
-    monthYearReceived   DateTime
-    location            String
-    negotiationStrategy String?
-    comments            String?
+  monthYearReceived   DateTime
+  location            String
+  negotiationStrategy String
+  comments            String
 
-    jobType JobType
+  jobType JobType
 
-    OffersIntern   OffersIntern? @relation(fields: [offersInternId], references: [id])
-    offersInternId String?       @unique
+  OffersIntern   OffersIntern? @relation(fields: [offersInternId], references: [id], onDelete: Cascade)
+  offersInternId String?       @unique
 
-    OffersFullTime   OffersFullTime? @relation(fields: [offersFullTimeId], references: [id])
-    offersFullTimeId String?         @unique
+  OffersFullTime   OffersFullTime? @relation(fields: [offersFullTimeId], references: [id], onDelete: Cascade)
+  offersFullTimeId String?         @unique
+
+  OffersAnalysis OffersAnalysis? @relation("HighestOverallOffer")
+  OffersAnalysisTopOverallOffers OffersAnalysis[] @relation("TopOverallOffers")
+  OffersAnalysisTopCompanyOffers OffersAnalysis[] @relation("TopCompanyOffers")
 }
 
 model OffersIntern {
-    id String @id @default(cuid())
+  id String @id @default(cuid())
 
-    title           String
-    specialization  String
-    internshipCycle String
-    startYear       Int
-    monthlySalary   OffersCurrency @relation(fields: [monthlySalaryId], references: [id])
-    monthlySalaryId String         @unique
+  title           String
+  specialization  String
+  internshipCycle String
+  startYear       Int
+  monthlySalary   OffersCurrency @relation(fields: [monthlySalaryId], references: [id], onDelete: Cascade)
+  monthlySalaryId String         @unique
 
-    OffersOffer OffersOffer?
+  OffersOffer OffersOffer?
 }
 
 model OffersFullTime {
-    id                  String         @id @default(cuid())
-    title               String
-    specialization      String
-    level               String
-    totalCompensation   OffersCurrency @relation("OfferTotalCompensation", fields: [totalCompensationId], references: [id])
-    totalCompensationId String         @unique
-    baseSalary          OffersCurrency @relation("OfferBaseSalary", fields: [baseSalaryId], references: [id])
-    baseSalaryId        String         @unique
-    bonus               OffersCurrency @relation("OfferBonus", fields: [bonusId], references: [id])
-    bonusId             String         @unique
-    stocks              OffersCurrency @relation("OfferStocks", fields: [stocksId], references: [id])
-    stocksId            String         @unique
-
-    OffersOffer OffersOffer?
+  id                  String         @id @default(cuid())
+  title               String
+  specialization      String
+  level               String
+  totalCompensation   OffersCurrency @relation("OfferTotalCompensation", fields: [totalCompensationId], references: [id], onDelete: Cascade)
+  totalCompensationId String         @unique
+  baseSalary          OffersCurrency @relation("OfferBaseSalary", fields: [baseSalaryId], references: [id], onDelete: Cascade)
+  baseSalaryId        String         @unique
+  bonus               OffersCurrency @relation("OfferBonus", fields: [bonusId], references: [id], onDelete: Cascade)
+  bonusId             String         @unique
+  stocks              OffersCurrency @relation("OfferStocks", fields: [stocksId], references: [id], onDelete: Cascade)
+  stocksId            String         @unique
+
+  OffersOffer OffersOffer?
+}
+
+model OffersAnalysis {
+  id String @id @default(cuid())
+
+  profile   OffersProfile @relation(fields: [profileId], references: [id], onDelete: Cascade)
+  profileId String        @unique
+
+  overallHighestOffer OffersOffer @relation("HighestOverallOffer", fields: [offerId], references: [id], onDelete: Cascade)
+  offerId             String      @unique
+
+  // OVERALL
+  overallPercentile Float
+  noOfSimilarOffers Int
+  topOverallOffers  OffersOffer[] @relation("TopOverallOffers")
+
+  // Company
+  companyPercentile        Float
+  noOfSimilarCompanyOffers Int
+  topCompanyOffers         OffersOffer[] @relation("TopCompanyOffers")
 }
 
 // End of Offers project models.
@@ -356,24 +384,24 @@ model OffersFullTime {
 // across all models in this file.
 
 enum QuestionsQuestionType {
-    CODING
-    SYSTEM_DESIGN
-    BEHAVIORAL
+  CODING
+  SYSTEM_DESIGN
+  BEHAVIORAL
 }
 
 model QuestionsQuestion {
-    id           String                @id @default(cuid())
-    userId       String?
-    content      String                @db.Text
-    questionType QuestionsQuestionType
-    createdAt    DateTime              @default(now())
-    updatedAt    DateTime              @updatedAt
+  id           String                @id @default(cuid())
+  userId       String?
+  content      String                @db.Text
+  questionType QuestionsQuestionType
+  createdAt    DateTime              @default(now())
+  updatedAt    DateTime              @updatedAt
 
-    user       User?                        @relation(fields: [userId], references: [id], onDelete: SetNull)
-    encounters QuestionsQuestionEncounter[]
-    votes      QuestionsQuestionVote[]
-    comments   QuestionsQuestionComment[]
-    answers    QuestionsAnswer[]
+  user       User?                        @relation(fields: [userId], references: [id], onDelete: SetNull)
+  encounters QuestionsQuestionEncounter[]
+  votes      QuestionsQuestionVote[]
+  comments   QuestionsQuestionComment[]
+  answers    QuestionsAnswer[]
 }
 
 model QuestionsQuestionEncounter {
@@ -394,99 +422,99 @@ model QuestionsQuestionEncounter {
 }
 
 model QuestionsQuestionVote {
-    id         String   @id @default(cuid())
-    questionId String
-    userId     String?
-    vote       Vote
-    createdAt  DateTime @default(now())
-    updatedAt  DateTime @updatedAt
+  id         String   @id @default(cuid())
+  questionId String
+  userId     String?
+  vote       Vote
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
 
-    user     User?             @relation(fields: [userId], references: [id], onDelete: SetNull)
-    question QuestionsQuestion @relation(fields: [questionId], references: [id], onDelete: Cascade)
+  user     User?             @relation(fields: [userId], references: [id], onDelete: SetNull)
+  question QuestionsQuestion @relation(fields: [questionId], references: [id], onDelete: Cascade)
 
-    @@unique([questionId, userId])
+  @@unique([questionId, userId])
 }
 
 model QuestionsQuestionComment {
-    id         String   @id @default(cuid())
-    questionId String
-    userId     String?
-    content    String   @db.Text
-    createdAt  DateTime @default(now())
-    updatedAt  DateTime @updatedAt
+  id         String   @id @default(cuid())
+  questionId String
+  userId     String?
+  content    String   @db.Text
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
 
-    user     User?                          @relation(fields: [userId], references: [id], onDelete: SetNull)
-    question QuestionsQuestion              @relation(fields: [questionId], references: [id], onDelete: Cascade)
-    votes    QuestionsQuestionCommentVote[]
+  user     User?                          @relation(fields: [userId], references: [id], onDelete: SetNull)
+  question QuestionsQuestion              @relation(fields: [questionId], references: [id], onDelete: Cascade)
+  votes    QuestionsQuestionCommentVote[]
 }
 
 model QuestionsQuestionCommentVote {
-    id                String   @id @default(cuid())
-    questionCommentId String
-    userId            String?
-    vote              Vote
-    createdAt         DateTime @default(now())
-    updatedAt         DateTime @updatedAt
+  id                String   @id @default(cuid())
+  questionCommentId String
+  userId            String?
+  vote              Vote
+  createdAt         DateTime @default(now())
+  updatedAt         DateTime @updatedAt
 
-    user    User?                    @relation(fields: [userId], references: [id], onDelete: SetNull)
-    comment QuestionsQuestionComment @relation(fields: [questionCommentId], references: [id], onDelete: Cascade)
+  user    User?                    @relation(fields: [userId], references: [id], onDelete: SetNull)
+  comment QuestionsQuestionComment @relation(fields: [questionCommentId], references: [id], onDelete: Cascade)
 
-    @@unique([questionCommentId, userId])
+  @@unique([questionCommentId, userId])
 }
 
 model QuestionsAnswer {
-    id         String   @id @default(cuid())
-    questionId String
-    userId     String?
-    content    String   @db.Text
-    createdAt  DateTime @default(now())
-    updatedAt  DateTime @updatedAt
+  id         String   @id @default(cuid())
+  questionId String
+  userId     String?
+  content    String   @db.Text
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
 
-    user     User?                    @relation(fields: [userId], references: [id], onDelete: SetNull)
-    question QuestionsQuestion        @relation(fields: [questionId], references: [id], onDelete: Cascade)
-    votes    QuestionsAnswerVote[]
-    comments QuestionsAnswerComment[]
+  user     User?                    @relation(fields: [userId], references: [id], onDelete: SetNull)
+  question QuestionsQuestion        @relation(fields: [questionId], references: [id], onDelete: Cascade)
+  votes    QuestionsAnswerVote[]
+  comments QuestionsAnswerComment[]
 }
 
 model QuestionsAnswerVote {
-    id        String   @id @default(cuid())
-    answerId  String
-    userId    String?
-    vote      Vote
-    createdAt DateTime @default(now())
-    updatedAt DateTime @updatedAt
+  id        String   @id @default(cuid())
+  answerId  String
+  userId    String?
+  vote      Vote
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 
-    user   User?           @relation(fields: [userId], references: [id], onDelete: SetNull)
-    answer QuestionsAnswer @relation(fields: [answerId], references: [id], onDelete: Cascade)
+  user   User?           @relation(fields: [userId], references: [id], onDelete: SetNull)
+  answer QuestionsAnswer @relation(fields: [answerId], references: [id], onDelete: Cascade)
 
-    @@unique([answerId, userId])
+  @@unique([answerId, userId])
 }
 
 model QuestionsAnswerComment {
-    id        String   @id @default(cuid())
-    answerId  String
-    userId    String?
-    content   String   @db.Text
-    createdAt DateTime @default(now())
-    updatedAt DateTime @updatedAt
+  id        String   @id @default(cuid())
+  answerId  String
+  userId    String?
+  content   String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 
-    user   User?                        @relation(fields: [userId], references: [id], onDelete: SetNull)
-    answer QuestionsAnswer              @relation(fields: [answerId], references: [id], onDelete: Cascade)
-    votes  QuestionsAnswerCommentVote[]
+  user   User?                        @relation(fields: [userId], references: [id], onDelete: SetNull)
+  answer QuestionsAnswer              @relation(fields: [answerId], references: [id], onDelete: Cascade)
+  votes  QuestionsAnswerCommentVote[]
 }
 
 model QuestionsAnswerCommentVote {
-    id              String   @id @default(cuid())
-    answerCommentId String
-    userId          String?
-    vote            Vote
-    createdAt       DateTime @default(now())
-    updatedAt       DateTime @updatedAt
+  id              String   @id @default(cuid())
+  answerCommentId String
+  userId          String?
+  vote            Vote
+  createdAt       DateTime @default(now())
+  updatedAt       DateTime @updatedAt
 
-    user    User?                  @relation(fields: [userId], references: [id], onDelete: SetNull)
-    comment QuestionsAnswerComment @relation(fields: [answerCommentId], references: [id], onDelete: Cascade)
+  user    User?                  @relation(fields: [userId], references: [id], onDelete: SetNull)
+  comment QuestionsAnswerComment @relation(fields: [answerCommentId], references: [id], onDelete: Cascade)
 
-    @@unique([answerCommentId, userId])
+  @@unique([answerCommentId, userId])
 }
 
 // End of Questions project models.
diff --git a/apps/portal/public/test_resume.pdf b/apps/portal/public/test_resume.pdf
deleted file mode 100644
index 279b6a25..00000000
Binary files a/apps/portal/public/test_resume.pdf and /dev/null differ
diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index 0275dbb5..bcb9af67 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -109,6 +109,7 @@ export default function AppShell({ children }: Props) {
     navigation: ProductNavigationItems;
     showGlobalNav: boolean;
     title: string;
+    titleHref: string;
   }> = (() => {
     const path = router.pathname;
     if (path.startsWith('/resumes')) {
@@ -190,6 +191,7 @@ export default function AppShell({ children }: Props) {
                 <ProductNavigation
                   items={currentProductNavigation.navigation}
                   title={currentProductNavigation.title}
+                  titleHref={currentProductNavigation.titleHref}
                 />
               </div>
               <div className="ml-2 flex items-center space-x-4 sm:ml-6 sm:space-x-6">
diff --git a/apps/portal/src/components/global/HomeNavigation.ts b/apps/portal/src/components/global/HomeNavigation.ts
index 073a7b36..eb41d372 100644
--- a/apps/portal/src/components/global/HomeNavigation.ts
+++ b/apps/portal/src/components/global/HomeNavigation.ts
@@ -17,6 +17,7 @@ const config = {
   navigation,
   showGlobalNav: true,
   title: 'Tech Interview Handbook',
+  titleHref: '/',
 };
 
 export default config;
diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx
index caae6c08..74e6dada 100644
--- a/apps/portal/src/components/global/ProductNavigation.tsx
+++ b/apps/portal/src/components/global/ProductNavigation.tsx
@@ -1,13 +1,16 @@
 import clsx from 'clsx';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
 
 type NavigationItem = Readonly<{
   children?: ReadonlyArray<NavigationItem>;
   href: string;
   name: string;
+  target?: '_blank';
 }>;
 
 export type ProductNavigationItems = ReadonlyArray<NavigationItem>;
@@ -15,15 +18,21 @@ export type ProductNavigationItems = ReadonlyArray<NavigationItem>;
 type Props = Readonly<{
   items: ProductNavigationItems;
   title: string;
+  titleHref: string;
 }>;
 
-export default function ProductNavigation({ items, title }: Props) {
+export default function ProductNavigation({ items, title, titleHref }: Props) {
+  const router = useRouter();
+
   return (
-    <nav aria-label="Global" className="flex space-x-8">
-      <span className="text-primary-700 text-sm font-medium">{title}</span>
-      <div className="hidden space-x-8 md:flex">
-        {items.map((item) =>
-          item.children != null && item.children.length > 0 ? (
+    <nav aria-label="Global" className="flex h-full items-center space-x-8">
+      <Link className="text-primary-700 text-sm font-medium" href={titleHref}>
+        {title}
+      </Link>
+      <div className="hidden h-full items-center space-x-8 md:flex">
+        {items.map((item) => {
+          const isActive = router.pathname === item.href;
+          return item.children != null && item.children.length > 0 ? (
             <Menu key={item.name} as="div" className="relative text-left">
               <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-sm font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
                 <span>{item.name}</span>
@@ -50,7 +59,13 @@ export default function ProductNavigation({ items, title }: Props) {
                               active ? 'bg-slate-100' : '',
                               'block px-4 py-2 text-sm text-slate-700',
                             )}
-                            href={child.href}>
+                            href={child.href}
+                            rel={
+                              !child.href.startsWith('/')
+                                ? 'noopener noreferrer'
+                                : undefined
+                            }
+                            target={child.target}>
                             {child.name}
                           </Link>
                         )}
@@ -63,12 +78,22 @@ export default function ProductNavigation({ items, title }: Props) {
           ) : (
             <Link
               key={item.name}
-              className="hover:text-primary-600 text-sm font-medium text-slate-900"
-              href={item.href}>
+              className={clsx(
+                'hover:text-primary-600 inline-flex h-full items-center border-y-2 border-t-transparent text-sm font-medium text-slate-900',
+                isActive ? 'border-b-primary-500' : 'border-b-transparent',
+              )}
+              href={item.href}
+              rel={
+                !item.href.startsWith('/') ? 'noopener noreferrer' : undefined
+              }
+              target={item.target}>
               {item.name}
+              {item.target ? (
+                <ArrowTopRightOnSquareIcon className="h-5 w-5 pl-1" />
+              ) : null}
             </Link>
-          ),
-        )}
+          );
+        })}
       </div>
     </nav>
   );
diff --git a/apps/portal/src/components/offers/Breadcrumb.tsx b/apps/portal/src/components/offers/Breadcrumb.tsx
new file mode 100644
index 00000000..ab046997
--- /dev/null
+++ b/apps/portal/src/components/offers/Breadcrumb.tsx
@@ -0,0 +1,23 @@
+type BreadcrumbsProps = Readonly<{
+  currentStep: number;
+  stepLabels: Array<string>;
+}>;
+
+export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
+  return (
+    <div className="flex space-x-1">
+      {stepLabels.map((label, index) => (
+        <div key={label} className="flex space-x-1">
+          {index === currentStep ? (
+            <p className="text-sm text-purple-700">{label}</p>
+          ) : (
+            <p className="text-sm text-gray-400">{label}</p>
+          )}
+          {index !== stepLabels.length - 1 && (
+            <p className="text-sm text-gray-400">{'>'}</p>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
index e3746453..cfa314dc 100644
--- a/apps/portal/src/components/offers/OffersNavigation.ts
+++ b/apps/portal/src/components/offers/OffersNavigation.ts
@@ -1,7 +1,6 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/offers', name: 'Home' },
   { href: '/offers/submit', name: 'Benchmark your offer' },
 ];
 
@@ -9,6 +8,7 @@ const config = {
   navigation,
   showGlobalNav: false,
   title: 'Tech Offers Repo',
+  titleHref: '/offers',
 };
 
 export default config;
diff --git a/apps/portal/src/components/offers/OffersTable.tsx b/apps/portal/src/components/offers/OffersTable.tsx
deleted file mode 100644
index ded79547..00000000
--- a/apps/portal/src/components/offers/OffersTable.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-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/constants.ts b/apps/portal/src/components/offers/constants.ts
index 2a09e9b5..e360a505 100644
--- a/apps/portal/src/components/offers/constants.ts
+++ b/apps/portal/src/components/offers/constants.ts
@@ -1,13 +1,9 @@
 import { EducationBackgroundType } from './types';
 
-const emptyOption = {
-  label: '----',
-  value: '',
-};
+export const emptyOption = '----';
 
 // TODO: use enums
 export const titleOptions = [
-  emptyOption,
   {
     label: 'Software engineer',
     value: 'Software engineer',
@@ -27,31 +23,29 @@ export const titleOptions = [
 ];
 
 export const companyOptions = [
-  emptyOption,
   {
-    label: 'Bytedance',
-    value: 'id-abc123',
+    label: 'Amazon',
+    value: 'cl93patjt0000txewdi601mub',
   },
   {
-    label: 'Google',
-    value: 'id-abc567',
+    label: 'Microsoft',
+    value: 'cl93patjt0001txewkglfjsro',
   },
   {
-    label: 'Meta',
-    value: 'id-abc456',
+    label: 'Apple',
+    value: 'cl93patjt0002txewf3ug54m8',
   },
   {
-    label: 'Shopee',
-    value: 'id-abc345',
+    label: 'Google',
+    value: 'cl93patjt0003txewyiaky7xx',
   },
   {
-    label: 'Tik Tok',
-    value: 'id-abc678',
+    label: 'Meta',
+    value: 'cl93patjt0004txew88wkcqpu',
   },
 ];
 
 export const locationOptions = [
-  emptyOption,
   {
     label: 'Singapore, Singapore',
     value: 'Singapore, Singapore',
@@ -67,7 +61,6 @@ export const locationOptions = [
 ];
 
 export const internshipCycleOptions = [
-  emptyOption,
   {
     label: 'Summer',
     value: 'Summer',
@@ -91,7 +84,6 @@ export const internshipCycleOptions = [
 ];
 
 export const yearOptions = [
-  emptyOption,
   {
     label: '2021',
     value: '2021',
@@ -110,17 +102,14 @@ export const yearOptions = [
   },
 ];
 
-const educationBackgroundTypes = Object.entries(EducationBackgroundType).map(
-  ([key, value]) => ({
-    label: key,
-    value,
-  }),
-);
-
-export const educationLevelOptions = [emptyOption, ...educationBackgroundTypes];
+export const educationLevelOptions = Object.entries(
+  EducationBackgroundType,
+).map(([key, value]) => ({
+  label: key,
+  value,
+}));
 
 export const educationFieldOptions = [
-  emptyOption,
   {
     label: 'Computer Science',
     value: 'Computer Science',
@@ -134,3 +123,9 @@ export const educationFieldOptions = [
     value: 'Business Analytics',
   },
 ];
+
+export enum FieldError {
+  NonNegativeNumber = 'Please fill in a non-negative number in this field.',
+  Number = 'Please fill in a number in this field.',
+  Required = 'Please fill in this field.',
+}
diff --git a/apps/portal/src/components/offers/forms/BackgroundForm.tsx b/apps/portal/src/components/offers/forms/BackgroundForm.tsx
index 0acbbe69..61a1c3fe 100644
--- a/apps/portal/src/components/offers/forms/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/forms/BackgroundForm.tsx
@@ -1,18 +1,19 @@
 import { useFormContext, useWatch } from 'react-hook-form';
 import { Collapsible, RadioList } from '@tih/ui';
 
-import FormRadioList from './FormRadioList';
-import FormSelect from './FormSelect';
-import FormTextInput from './FormTextInput';
 import {
   companyOptions,
   educationFieldOptions,
   educationLevelOptions,
   locationOptions,
   titleOptions,
-} from '../constants';
-import { JobType } from '../types';
-import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum';
+} from '~/components/offers/constants';
+import FormRadioList from '~/components/offers/forms/components/FormRadioList';
+import FormSelect from '~/components/offers/forms/components/FormSelect';
+import FormTextInput from '~/components/offers/forms/components/FormTextInput';
+import { JobType } from '~/components/offers/types';
+
+import { CURRENCY_OPTIONS } from '~/utils/offers/currency/CurrencyEnum';
 
 function YoeSection() {
   const { register } = useFormContext();
@@ -28,7 +29,9 @@ function YoeSection() {
             label="Total YOE"
             placeholder="0"
             type="number"
-            {...register(`background.totalYoe`)}
+            {...register(`background.totalYoe`, {
+              valueAsNumber: true,
+            })}
           />
         </div>
         <div className="grid grid-cols-1 space-x-3">
@@ -37,7 +40,9 @@ function YoeSection() {
               <FormTextInput
                 label="Specific YOE 1"
                 type="number"
-                {...register(`background.specificYoes.0.yoe`)}
+                {...register(`background.specificYoes.0.yoe`, {
+                  valueAsNumber: true,
+                })}
               />
               <FormTextInput
                 label="Specific Domain 1"
@@ -49,7 +54,9 @@ function YoeSection() {
               <FormTextInput
                 label="Specific YOE 2"
                 type="number"
-                {...register(`background.specificYoes.1.yoe`)}
+                {...register(`background.specificYoes.1.yoe`, {
+                  valueAsNumber: true,
+                })}
               />
               <FormTextInput
                 label="Specific Domain 2"
@@ -73,13 +80,13 @@ function FullTimeJobFields() {
           display="block"
           label="Title"
           options={titleOptions}
-          {...register(`background.experience.title`)}
+          {...register(`background.experiences.0.title`)}
         />
         <FormSelect
           display="block"
           label="Company"
           options={companyOptions}
-          {...register(`background.experience.companyId`)}
+          {...register(`background.experiences.0.companyId`)}
         />
       </div>
       <div className="mb-5 grid grid-cols-1 space-x-3">
@@ -90,7 +97,9 @@ function FullTimeJobFields() {
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
-              {...register(`background.experience.totalCompensation.currency`)}
+              {...register(
+                `background.experiences.0.totalCompensation.currency`,
+              )}
             />
           }
           endAddOnType="element"
@@ -99,7 +108,9 @@ function FullTimeJobFields() {
           startAddOn="$"
           startAddOnType="label"
           type="number"
-          {...register(`background.experience.totalCompensation.value`)}
+          {...register(`background.experiences.0.totalCompensation.value`, {
+            valueAsNumber: true,
+          })}
         />
       </div>
       <Collapsible label="Add more details">
@@ -107,12 +118,12 @@ function FullTimeJobFields() {
           <FormTextInput
             label="Focus / Specialization"
             placeholder="e.g. Front End"
-            {...register(`background.experience.specialization`)}
+            {...register(`background.experiences.0.specialization`)}
           />
           <FormTextInput
             label="Level"
             placeholder="e.g. L4, Junior"
-            {...register(`background.experience.level`)}
+            {...register(`background.experiences.0.level`)}
           />
         </div>
         <div className="mb-5 grid grid-cols-2 space-x-3">
@@ -120,12 +131,14 @@ function FullTimeJobFields() {
             display="block"
             label="Location"
             options={locationOptions}
-            {...register(`background.experience.location`)}
+            {...register(`background.experiences.0.location`)}
           />
           <FormTextInput
             label="Duration (months)"
             type="number"
-            {...register(`background.experience.durationInMonths`)}
+            {...register(`background.experiences.0.durationInMonths`, {
+              valueAsNumber: true,
+            })}
           />
         </div>
       </Collapsible>
@@ -142,13 +155,13 @@ function InternshipJobFields() {
           display="block"
           label="Title"
           options={titleOptions}
-          {...register(`background.experience.title`)}
+          {...register(`background.experiences.0.title`)}
         />
         <FormSelect
           display="block"
           label="Company"
           options={companyOptions}
-          {...register(`background.experience.company`)}
+          {...register(`background.experiences.0.company`)}
         />
       </div>
       <div className="mb-5 grid grid-cols-1 space-x-3">
@@ -159,7 +172,7 @@ function InternshipJobFields() {
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
-              {...register(`background.experience.monthlySalary.currency`)}
+              {...register(`background.experiences.0.monthlySalary.currency`)}
             />
           }
           endAddOnType="element"
@@ -168,7 +181,7 @@ function InternshipJobFields() {
           startAddOn="$"
           startAddOnType="label"
           type="number"
-          {...register(`background.experience.monthlySalary.value`)}
+          {...register(`background.experiences.0.monthlySalary.value`)}
         />
       </div>
       <Collapsible label="Add more details">
@@ -176,13 +189,13 @@ function InternshipJobFields() {
           <FormTextInput
             label="Focus / Specialization"
             placeholder="e.g. Front End"
-            {...register(`background.experience.specialization`)}
+            {...register(`background.experiences.0.specialization`)}
           />
           <FormSelect
             display="block"
             label="Location"
             options={locationOptions}
-            {...register(`background.experience.location`)}
+            {...register(`background.experiences.0.location`)}
           />
         </div>
       </Collapsible>
@@ -194,7 +207,7 @@ function CurrentJobSection() {
   const { register } = useFormContext();
   const watchJobType = useWatch({
     defaultValue: JobType.FullTime,
-    name: 'background.experience.jobType',
+    name: 'background.experiences.0.jobType',
   });
 
   return (
@@ -209,7 +222,7 @@ function CurrentJobSection() {
             isLabelHidden={true}
             label="Job Type"
             orientation="horizontal"
-            {...register('background.experience.jobType')}>
+            {...register('background.experiences.0.jobType')}>
             <RadioList.Item
               key="Full-time"
               label="Full-time"
@@ -245,13 +258,13 @@ function EducationSection() {
             display="block"
             label="Education Level"
             options={educationLevelOptions}
-            {...register(`background.education.type`)}
+            {...register(`background.educations.0.type`)}
           />
           <FormSelect
             display="block"
             label="Field"
             options={educationFieldOptions}
-            {...register(`background.education.field`)}
+            {...register(`background.educations.0.field`)}
           />
         </div>
         <Collapsible label="Add more details">
@@ -259,7 +272,7 @@ function EducationSection() {
             <FormTextInput
               label="School"
               placeholder="e.g. National University of Singapore"
-              {...register(`background.experience.specialization`)}
+              {...register(`background.educations.0.school`)}
             />
           </div>
         </Collapsible>
diff --git a/apps/portal/src/components/offers/forms/OfferAnalysis.tsx b/apps/portal/src/components/offers/forms/OfferAnalysis.tsx
index 3147bdc2..c3625d6d 100644
--- a/apps/portal/src/components/offers/forms/OfferAnalysis.tsx
+++ b/apps/portal/src/components/offers/forms/OfferAnalysis.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { UserCircleIcon } from '@heroicons/react/20/solid';
-
-import { HorizontalDivider, Tabs } from '~/../../../packages/ui/dist';
+import { HorizontalDivider, Tabs } from '@tih/ui';
 
 const tabs = [
   {
@@ -86,8 +85,7 @@ export default function OfferAnalysis() {
       <h5 className="mb-2 text-center text-4xl font-bold text-gray-900">
         Result
       </h5>
-
-      <div className="mx-40">
+      <div>
         <Tabs
           label="Result Navigation"
           tabs={tabs}
diff --git a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
index 6266994f..9ff722fb 100644
--- a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
@@ -1,91 +1,127 @@
-import { useState } from 'react';
-import type {
-  FieldValues,
-  UseFieldArrayRemove,
-  UseFieldArrayReturn,
-} from 'react-hook-form';
+import { useEffect, useState } from 'react';
+import type { FieldValues, UseFieldArrayReturn } from 'react-hook-form';
+import { useWatch } from 'react-hook-form';
 import { useFormContext } from 'react-hook-form';
 import { useFieldArray } from 'react-hook-form';
 import { PlusIcon } from '@heroicons/react/20/solid';
 import { TrashIcon } from '@heroicons/react/24/outline';
-import { Button } from '@tih/ui';
+import { Button, Dialog } from '@tih/ui';
+
+import {
+  defaultFullTimeOfferValues,
+  defaultInternshipOfferValues,
+} from '~/pages/offers/submit';
 
-import FormSelect from './FormSelect';
-import FormTextArea from './FormTextArea';
-import FormTextInput from './FormTextInput';
+import FormMonthYearPicker from './components/FormMonthYearPicker';
+import FormSelect from './components/FormSelect';
+import FormTextArea from './components/FormTextArea';
+import FormTextInput from './components/FormTextInput';
 import {
   companyOptions,
+  emptyOption,
+  FieldError,
   internshipCycleOptions,
   locationOptions,
   titleOptions,
   yearOptions,
 } from '../constants';
-import type { FullTimeOfferFormData, InternshipOfferFormData } from '../types';
+import type {
+  FullTimeOfferDetailsFormData,
+  InternshipOfferDetailsFormData,
+} from '../types';
+import { JobTypeLabel } from '../types';
 import { JobType } from '../types';
-import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum';
+import { CURRENCY_OPTIONS } from '../../../utils/offers/currency/CurrencyEnum';
 
 type FullTimeOfferDetailsFormProps = Readonly<{
   index: number;
-  remove: UseFieldArrayRemove;
+  setDialogOpen: (isOpen: boolean) => void;
 }>;
 
 function FullTimeOfferDetailsForm({
   index,
-  remove,
+  setDialogOpen,
 }: FullTimeOfferDetailsFormProps) {
-  const { register } = useFormContext<{
-    offers: Array<FullTimeOfferFormData>;
+  const { register, formState, setValue } = useFormContext<{
+    offers: Array<FullTimeOfferDetailsFormData>;
   }>();
+  const offerFields = formState.errors.offers?.[index];
+
+  const watchCurrency = useWatch({
+    name: `offers.${index}.job.totalCompensation.currency`,
+  });
+
+  useEffect(() => {
+    setValue(`offers.${index}.job.base.currency`, watchCurrency);
+    setValue(`offers.${index}.job.bonus.currency`, watchCurrency);
+    setValue(`offers.${index}.job.stocks.currency`, watchCurrency);
+  }, [watchCurrency, index, setValue]);
 
   return (
     <div className="my-5 rounded-lg border border-gray-200 px-10 py-5">
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <FormSelect
           display="block"
+          errorMessage={offerFields?.job?.title?.message}
           label="Title"
           options={titleOptions}
+          placeholder={emptyOption}
           required={true}
           {...register(`offers.${index}.job.title`, {
-            required: true,
+            required: FieldError.Required,
           })}
         />
         <FormTextInput
+          errorMessage={offerFields?.job?.specialization?.message}
           label="Focus / Specialization"
           placeholder="e.g. Front End"
           required={true}
           {...register(`offers.${index}.job.specialization`, {
-            required: true,
+            required: FieldError.Required,
           })}
         />
       </div>
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <FormSelect
           display="block"
+          errorMessage={offerFields?.companyId?.message}
           label="Company"
           options={companyOptions}
+          placeholder={emptyOption}
           required={true}
-          {...register(`offers.${index}.companyId`, { required: true })}
+          {...register(`offers.${index}.companyId`, {
+            required: FieldError.Required,
+          })}
         />
         <FormTextInput
+          errorMessage={offerFields?.job?.level?.message}
           label="Level"
           placeholder="e.g. L4, Junior"
           required={true}
-          {...register(`offers.${index}.job.level`, { required: true })}
+          {...register(`offers.${index}.job.level`, {
+            required: FieldError.Required,
+          })}
         />
       </div>
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <FormSelect
           display="block"
+          errorMessage={offerFields?.location?.message}
           label="Location"
           options={locationOptions}
+          placeholder={emptyOption}
           required={true}
-          {...register(`offers.${index}.location`, { required: true })}
+          {...register(`offers.${index}.location`, {
+            required: FieldError.Required,
+          })}
         />
-        <FormTextInput
-          label="Month Received"
-          placeholder="MMM/YYYY"
-          required={true}
-          {...register(`offers.${index}.monthYearReceived`, { required: true })}
+        <FormMonthYearPicker
+          monthLabel="Date Received"
+          monthRequired={true}
+          yearLabel=""
+          {...register(`offers.${index}.monthYearReceived`, {
+            required: FieldError.Required,
+          })}
         />
       </div>
       <div className="mb-5">
@@ -97,19 +133,22 @@ function FullTimeOfferDetailsForm({
               label="Currency"
               options={CURRENCY_OPTIONS}
               {...register(`offers.${index}.job.totalCompensation.currency`, {
-                required: true,
+                required: FieldError.Required,
               })}
             />
           }
           endAddOnType="element"
+          errorMessage={offerFields?.job?.totalCompensation?.value?.message}
           label="Total Compensation (Annual)"
-          placeholder="0.00"
+          placeholder="0"
           required={true}
           startAddOn="$"
           startAddOnType="label"
           type="number"
           {...register(`offers.${index}.job.totalCompensation.value`, {
-            required: true,
+            min: { message: FieldError.NonNegativeNumber, value: 0 },
+            required: FieldError.Required,
+            valueAsNumber: true,
           })}
         />
       </div>
@@ -121,17 +160,24 @@ function FullTimeOfferDetailsForm({
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
-              {...register(`offers.${index}.job.base.currency`)}
+              {...register(`offers.${index}.job.base.currency`, {
+                required: FieldError.Required,
+              })}
             />
           }
           endAddOnType="element"
+          errorMessage={offerFields?.job?.base?.value?.message}
           label="Base Salary (Annual)"
-          placeholder="0.00"
+          placeholder="0"
           required={true}
           startAddOn="$"
           startAddOnType="label"
           type="number"
-          {...register(`offers.${index}.job.base.value`)}
+          {...register(`offers.${index}.job.base.value`, {
+            min: { message: FieldError.NonNegativeNumber, value: 0 },
+            required: FieldError.Required,
+            valueAsNumber: true,
+          })}
         />
         <FormTextInput
           endAddOn={
@@ -140,17 +186,24 @@ function FullTimeOfferDetailsForm({
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
-              {...register(`offers.${index}.job.bonus.currency`)}
+              {...register(`offers.${index}.job.bonus.currency`, {
+                required: FieldError.Required,
+              })}
             />
           }
           endAddOnType="element"
+          errorMessage={offerFields?.job?.bonus?.value?.message}
           label="Bonus (Annual)"
-          placeholder="0.00"
+          placeholder="0"
           required={true}
           startAddOn="$"
           startAddOnType="label"
           type="number"
-          {...register(`offers.${index}.job.bonus.value`)}
+          {...register(`offers.${index}.job.bonus.value`, {
+            min: { message: FieldError.NonNegativeNumber, value: 0 },
+            required: FieldError.Required,
+            valueAsNumber: true,
+          })}
         />
       </div>
       <div className="mb-5 grid grid-cols-2 space-x-3">
@@ -161,17 +214,24 @@ function FullTimeOfferDetailsForm({
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
-              {...register(`offers.${index}.job.stocks.currency`)}
+              {...register(`offers.${index}.job.stocks.currency`, {
+                required: FieldError.Required,
+              })}
             />
           }
           endAddOnType="element"
+          errorMessage={offerFields?.job?.stocks?.value?.message}
           label="Stocks (Annual)"
-          placeholder="0.00"
+          placeholder="0"
           required={true}
           startAddOn="$"
           startAddOnType="label"
           type="number"
-          {...register(`offers.${index}.job.stocks.value`)}
+          {...register(`offers.${index}.job.stocks.value`, {
+            min: { message: FieldError.NonNegativeNumber, value: 0 },
+            required: FieldError.Required,
+            valueAsNumber: true,
+          })}
         />
       </div>
       <div className="mb-5">
@@ -194,7 +254,7 @@ function FullTimeOfferDetailsForm({
             icon={TrashIcon}
             label="Delete"
             variant="secondary"
-            onClick={() => remove(index)}
+            onClick={() => setDialogOpen(true)}
           />
         )}
       </div>
@@ -202,115 +262,103 @@ function FullTimeOfferDetailsForm({
   );
 }
 
-type OfferDetailsFormArrayProps = Readonly<{
-  fieldArrayValues: UseFieldArrayReturn<FieldValues, 'offers', 'id'>;
-  jobType: JobType;
-}>;
-
-function OfferDetailsFormArray({
-  fieldArrayValues,
-  jobType,
-}: OfferDetailsFormArrayProps) {
-  const { append, remove, fields } = fieldArrayValues;
-  return (
-    <div>
-      {fields.map((item, index) =>
-        jobType === JobType.FullTime ? (
-          <FullTimeOfferDetailsForm
-            key={`offer.${item.id}`}
-            index={index}
-            remove={remove}
-          />
-        ) : (
-          <InternshipOfferDetailsForm
-            key={`offer.${item.id}`}
-            index={index}
-            remove={remove}
-          />
-        ),
-      )}
-      <Button
-        display="block"
-        icon={PlusIcon}
-        label="Add another offer"
-        size="lg"
-        variant="tertiary"
-        onClick={() => append({})}
-      />
-    </div>
-  );
-}
-
 type InternshipOfferDetailsFormProps = Readonly<{
   index: number;
-  remove: UseFieldArrayRemove;
+  setDialogOpen: (isOpen: boolean) => void;
 }>;
 
 function InternshipOfferDetailsForm({
   index,
-  remove,
+  setDialogOpen,
 }: InternshipOfferDetailsFormProps) {
-  const { register } = useFormContext<{
-    offers: Array<InternshipOfferFormData>;
+  const { register, formState } = useFormContext<{
+    offers: Array<InternshipOfferDetailsFormData>;
   }>();
 
+  const offerFields = formState.errors.offers?.[index];
+
   return (
     <div className="my-5 rounded-lg border border-gray-200 px-10 py-5">
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <FormSelect
           display="block"
+          errorMessage={offerFields?.job?.title?.message}
           label="Title"
           options={titleOptions}
+          placeholder={emptyOption}
           required={true}
-          {...register(`offers.${index}.job.title`)}
+          {...register(`offers.${index}.job.title`, {
+            minLength: 1,
+            required: FieldError.Required,
+          })}
         />
         <FormTextInput
+          errorMessage={offerFields?.job?.specialization?.message}
           label="Focus / Specialization"
           placeholder="e.g. Front End"
           required={true}
-          {...register(`offers.${index}.job.specialization`)}
+          {...register(`offers.${index}.job.specialization`, {
+            minLength: 1,
+            required: FieldError.Required,
+          })}
         />
       </div>
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <FormSelect
           display="block"
+          errorMessage={offerFields?.companyId?.message}
           label="Company"
           options={companyOptions}
+          placeholder={emptyOption}
           required={true}
-          value="Shopee"
-          {...register(`offers.${index}.companyId`)}
+          {...register(`offers.${index}.companyId`, {
+            required: FieldError.Required,
+          })}
         />
         <FormSelect
           display="block"
+          errorMessage={offerFields?.location?.message}
           label="Location"
           options={locationOptions}
+          placeholder={emptyOption}
           required={true}
-          value="Singapore, Singapore"
-          {...register(`offers.${index}.location`)}
+          {...register(`offers.${index}.location`, {
+            required: FieldError.Required,
+          })}
         />
       </div>
-      <div className="mb-5 grid grid-cols-3 space-x-3">
-        <FormTextInput
-          label="Date Received"
-          placeholder="MMM/YYYY"
-          required={true}
-          {...register(`offers.${index}.monthYearReceived`)}
-        />
+      <div className="mb-5 grid grid-cols-2 space-x-3">
         <FormSelect
           display="block"
+          errorMessage={offerFields?.job?.internshipCycle?.message}
           label="Internship Cycle"
           options={internshipCycleOptions}
+          placeholder={emptyOption}
           required={true}
-          value="Summer"
-          {...register(`offers.${index}.job.internshipCycle`)}
+          {...register(`offers.${index}.job.internshipCycle`, {
+            required: FieldError.Required,
+          })}
         />
         <FormSelect
           display="block"
+          errorMessage={offerFields?.job?.startYear?.message}
           label="Internship Year"
           options={yearOptions}
+          placeholder={emptyOption}
           required={true}
-          value="2023"
-          {...register(`offers.${index}.job.startYear`)}
+          {...register(`offers.${index}.job.startYear`, {
+            required: FieldError.Required,
+          })}
+        />
+      </div>
+      <div className="mb-5">
+        <FormMonthYearPicker
+          monthLabel="Date Received"
+          monthRequired={true}
+          yearLabel=""
+          {...register(`offers.${index}.monthYearReceived`, {
+            required: FieldError.Required,
+          })}
         />
       </div>
       <div className="mb-5">
@@ -321,17 +369,24 @@ function InternshipOfferDetailsForm({
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
-              {...register(`offers.${index}.job.monthlySalary.currency`)}
+              {...register(`offers.${index}.job.monthlySalary.currency`, {
+                required: FieldError.Required,
+              })}
             />
           }
           endAddOnType="element"
+          errorMessage={offerFields?.job?.monthlySalary?.value?.message}
           label="Salary (Monthly)"
-          placeholder="0.00"
+          placeholder="0"
           required={true}
           startAddOn="$"
           startAddOnType="label"
           type="number"
-          {...register(`offers.${index}.job.monthlySalary.value`)}
+          {...register(`offers.${index}.job.monthlySalary.value`, {
+            min: { message: FieldError.NonNegativeNumber, value: 0 },
+            required: FieldError.Required,
+            valueAsNumber: true,
+          })}
         />
       </div>
       <div className="mb-5">
@@ -354,7 +409,9 @@ function InternshipOfferDetailsForm({
             icon={TrashIcon}
             label="Delete"
             variant="secondary"
-            onClick={() => remove(index)}
+            onClick={() => {
+              setDialogOpen(true);
+            }}
           />
         )}
       </div>
@@ -362,20 +419,105 @@ function InternshipOfferDetailsForm({
   );
 }
 
+type OfferDetailsFormArrayProps = Readonly<{
+  fieldArrayValues: UseFieldArrayReturn<FieldValues, 'offers', 'id'>;
+  jobType: JobType;
+}>;
+
+function OfferDetailsFormArray({
+  fieldArrayValues,
+  jobType,
+}: OfferDetailsFormArrayProps) {
+  const { append, remove, fields } = fieldArrayValues;
+  const [isDialogOpen, setDialogOpen] = useState(false);
+
+  return (
+    <div>
+      {fields.map((item, index) => {
+        return (
+          <div key={item.id}>
+            {jobType === JobType.FullTime ? (
+              <FullTimeOfferDetailsForm
+                index={index}
+                setDialogOpen={setDialogOpen}
+              />
+            ) : (
+              <InternshipOfferDetailsForm
+                index={index}
+                setDialogOpen={setDialogOpen}
+              />
+            )}
+            <Dialog
+              isShown={isDialogOpen}
+              primaryButton={
+                <Button
+                  display="block"
+                  label="OK"
+                  variant="primary"
+                  onClick={() => {
+                    remove(index);
+                    setDialogOpen(false);
+                  }}
+                />
+              }
+              secondaryButton={
+                <Button
+                  display="block"
+                  label="Cancel"
+                  variant="tertiary"
+                  onClick={() => setDialogOpen(false)}
+                />
+              }
+              title="Remove this offer"
+              onClose={() => setDialogOpen(false)}>
+              <p>
+                Are you sure you want to remove this offer? This action cannot
+                be reversed.
+              </p>
+            </Dialog>
+          </div>
+        );
+      })}
+      <Button
+        display="block"
+        icon={PlusIcon}
+        label="Add another offer"
+        size="lg"
+        variant="tertiary"
+        onClick={() =>
+          append(
+            jobType === JobType.FullTime
+              ? defaultFullTimeOfferValues
+              : defaultInternshipOfferValues,
+          )
+        }
+      />
+    </div>
+  );
+}
+
 export default function OfferDetailsForm() {
   const [jobType, setJobType] = useState(JobType.FullTime);
-  const { control, register } = useFormContext();
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const { control } = useFormContext();
   const fieldArrayValues = useFieldArray({ control, name: 'offers' });
 
-  const changeJobType = (jobTypeChosen: JobType) => () => {
-    if (jobType === jobTypeChosen) {
-      return;
-    }
-
-    setJobType(jobTypeChosen);
+  const toggleJobType = () => {
     fieldArrayValues.remove();
+    if (jobType === JobType.FullTime) {
+      setJobType(JobType.Internship);
+      fieldArrayValues.append(defaultInternshipOfferValues);
+    } else {
+      setJobType(JobType.FullTime);
+      fieldArrayValues.append(defaultFullTimeOfferValues);
+    }
   };
 
+  const switchJobTypeLabel = () =>
+    jobType === JobType.FullTime
+      ? JobTypeLabel.INTERNSHIP
+      : JobTypeLabel.FULLTIME;
+
   return (
     <div className="mb-5">
       <h5 className="mb-8 text-center text-4xl font-bold text-gray-900">
@@ -385,21 +527,29 @@ export default function OfferDetailsForm() {
         <div className="mx-5 w-1/3">
           <Button
             display="block"
-            label="Full-time"
+            label={JobTypeLabel.FULLTIME}
             size="md"
             variant={jobType === JobType.FullTime ? 'secondary' : 'tertiary'}
-            onClick={changeJobType(JobType.FullTime)}
-            {...register(`offers.${0}.jobType`)}
+            onClick={() => {
+              if (jobType === JobType.FullTime) {
+                return;
+              }
+              setDialogOpen(true);
+            }}
           />
         </div>
         <div className="mx-5 w-1/3">
           <Button
             display="block"
-            label="Internship"
+            label={JobTypeLabel.INTERNSHIP}
             size="md"
             variant={jobType === JobType.Internship ? 'secondary' : 'tertiary'}
-            onClick={changeJobType(JobType.Internship)}
-            {...register(`offers.${0}.jobType`)}
+            onClick={() => {
+              if (jobType === JobType.Internship) {
+                return;
+              }
+              setDialogOpen(true);
+            }}
           />
         </div>
       </div>
@@ -407,6 +557,32 @@ export default function OfferDetailsForm() {
         fieldArrayValues={fieldArrayValues}
         jobType={jobType}
       />
+      <Dialog
+        isShown={isDialogOpen}
+        primaryButton={
+          <Button
+            display="block"
+            label="Switch"
+            variant="primary"
+            onClick={() => {
+              toggleJobType();
+              setDialogOpen(false);
+            }}
+          />
+        }
+        secondaryButton={
+          <Button
+            display="block"
+            label="Cancel"
+            variant="tertiary"
+            onClick={() => setDialogOpen(false)}
+          />
+        }
+        title={`Switch to ${switchJobTypeLabel()}`}
+        onClose={() => setDialogOpen(false)}>
+        {`Are you sure you want to switch to ${switchJobTypeLabel()}? The data you
+        entered in the ${JobTypeLabel[jobType]} section will disappear.`}
+      </Dialog>
     </div>
   );
 }
diff --git a/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx b/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx
new file mode 100644
index 00000000..2b6c414a
--- /dev/null
+++ b/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx
@@ -0,0 +1,42 @@
+import type { ComponentProps } from 'react';
+import { forwardRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import MonthYearPicker from '~/components/shared/MonthYearPicker';
+
+import { getCurrentMonth, getCurrentYear } from '../../../../utils/offers/time';
+
+type MonthYearPickerProps = ComponentProps<typeof MonthYearPicker>;
+
+type FormMonthYearPickerProps = Omit<
+  MonthYearPickerProps,
+  'onChange' | 'value'
+> & {
+  name: string;
+};
+
+function FormMonthYearPickerWithRef({
+  name,
+  ...rest
+}: FormMonthYearPickerProps) {
+  const { setValue } = useFormContext();
+
+  const value = useWatch({
+    defaultValue: { month: getCurrentMonth(), year: getCurrentYear() },
+    name,
+  });
+
+  return (
+    <MonthYearPicker
+      {...(rest as MonthYearPickerProps)}
+      value={value}
+      onChange={(val) => {
+        setValue(name, val);
+      }}
+    />
+  );
+}
+
+const FormMonthYearPicker = forwardRef(FormMonthYearPickerWithRef);
+
+export default FormMonthYearPicker;
diff --git a/apps/portal/src/components/offers/forms/FormRadioList.tsx b/apps/portal/src/components/offers/forms/components/FormRadioList.tsx
similarity index 69%
rename from apps/portal/src/components/offers/forms/FormRadioList.tsx
rename to apps/portal/src/components/offers/forms/components/FormRadioList.tsx
index 9ce3065d..5fbbd53d 100644
--- a/apps/portal/src/components/offers/forms/FormRadioList.tsx
+++ b/apps/portal/src/components/offers/forms/components/FormRadioList.tsx
@@ -1,5 +1,4 @@
 import type { ComponentProps } from 'react';
-import { forwardRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { RadioList } from '@tih/ui';
 
@@ -7,7 +6,7 @@ type RadioListProps = ComponentProps<typeof RadioList>;
 
 type FormRadioListProps = Omit<RadioListProps, 'onChange'>;
 
-function FormRadioListWithRef({ name, ...rest }: FormRadioListProps) {
+export default function FormRadioList({ name, ...rest }: FormRadioListProps) {
   const { setValue } = useFormContext();
   return (
     <RadioList
@@ -17,7 +16,3 @@ function FormRadioListWithRef({ name, ...rest }: FormRadioListProps) {
     />
   );
 }
-
-const FormRadioList = forwardRef(FormRadioListWithRef);
-
-export default FormRadioList;
diff --git a/apps/portal/src/components/offers/forms/FormSelect.tsx b/apps/portal/src/components/offers/forms/components/FormSelect.tsx
similarity index 100%
rename from apps/portal/src/components/offers/forms/FormSelect.tsx
rename to apps/portal/src/components/offers/forms/components/FormSelect.tsx
diff --git a/apps/portal/src/components/offers/forms/FormTextArea.tsx b/apps/portal/src/components/offers/forms/components/FormTextArea.tsx
similarity index 92%
rename from apps/portal/src/components/offers/forms/FormTextArea.tsx
rename to apps/portal/src/components/offers/forms/components/FormTextArea.tsx
index f833c3dd..20f606cf 100644
--- a/apps/portal/src/components/offers/forms/FormTextArea.tsx
+++ b/apps/portal/src/components/offers/forms/components/FormTextArea.tsx
@@ -1,8 +1,7 @@
 import type { ComponentProps, ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
-
-import { TextArea } from '~/../../../packages/ui/dist';
+import { TextArea } from '@tih/ui';
 
 type TextAreaProps = ComponentProps<typeof TextArea>;
 
diff --git a/apps/portal/src/components/offers/forms/FormTextInput.tsx b/apps/portal/src/components/offers/forms/components/FormTextInput.tsx
similarity index 100%
rename from apps/portal/src/components/offers/forms/FormTextInput.tsx
rename to apps/portal/src/components/offers/forms/components/FormTextInput.tsx
diff --git a/apps/portal/src/components/offers/profile/EducationCard.tsx b/apps/portal/src/components/offers/profile/EducationCard.tsx
index c7b31f12..7dd5b155 100644
--- a/apps/portal/src/components/offers/profile/EducationCard.tsx
+++ b/apps/portal/src/components/offers/profile/EducationCard.tsx
@@ -3,14 +3,14 @@ import {
   LightBulbIcon,
 } from '@heroicons/react/24/outline';
 
-import type { EducationBackgroundType } from '../types';
+import type { EducationBackgroundType } from '~/components/offers/types';
 
 type EducationEntity = {
-  backgroundType?: EducationBackgroundType;
+  endDate?: string;
   field?: string;
-  fromMonth?: string;
   school?: string;
-  toMonth?: string;
+  startDate?: string;
+  type?: EducationBackgroundType;
 };
 
 type Props = Readonly<{
@@ -18,7 +18,7 @@ type Props = Readonly<{
 }>;
 
 export default function EducationCard({
-  education: { backgroundType, field, fromMonth, school, toMonth },
+  education: { type, field, startDate, endDate, school },
 }: Props) {
   return (
     <div className="mx-8 my-4 block rounded-lg bg-white py-4 shadow-md">
@@ -27,9 +27,7 @@ export default function EducationCard({
           <div className="flex flex-row">
             <LightBulbIcon className="mr-1 h-5" />
             <span className="ml-1 font-bold">
-              {field
-                ? `${backgroundType ?? 'N/A'}, ${field}`
-                : backgroundType ?? `N/A`}
+              {field ? `${type ?? 'N/A'}, ${field}` : type ?? `N/A`}
             </span>
           </div>
           {school && (
@@ -39,9 +37,11 @@ export default function EducationCard({
             </div>
           )}
         </div>
-        {(fromMonth || toMonth) && (
+        {(startDate || endDate) && (
           <div className="font-light text-gray-400">
-            <p>{`${fromMonth ?? 'N/A'} - ${toMonth ?? 'N/A'}`}</p>
+            <p>{`${startDate ? startDate : 'N/A'} - ${
+              endDate ? endDate : 'N/A'
+            }`}</p>
           </div>
         )}
       </div>
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
index 875c38db..8b3c9566 100644
--- a/apps/portal/src/components/offers/profile/OfferCard.tsx
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -6,21 +6,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { HorizontalDivider } from '@tih/ui';
 
-type OfferEntity = {
-  base?: string;
-  bonus?: string;
-  companyName: string;
-  duration?: string; // For background
-  jobLevel?: string;
-  jobTitle: string;
-  location: string;
-  monthlySalary?: string;
-  negotiationStrategy?: string;
-  otherComment?: string;
-  receivedMonth: string;
-  stocks?: string;
-  totalCompensation?: string;
-};
+import type { OfferEntity } from '~/components/offers/types';
 
 type Props = Readonly<{
   offer: OfferEntity;
@@ -28,16 +14,16 @@ type Props = Readonly<{
 
 export default function OfferCard({
   offer: {
-    companyName = 'Meta',
-    jobTitle = 'Senior Engineer',
-    jobLevel,
-    location = 'Singapore',
-    receivedMonth = 'Jun 2021',
-    totalCompensation = '350.1k',
-    base = '0k',
-    stocks = '0k',
-    bonus = '0k',
+    base,
+    bonus,
+    companyName,
     duration,
+    jobTitle,
+    jobLevel,
+    location,
+    receivedMonth,
+    totalCompensation,
+    stocks,
     monthlySalary,
     negotiationStrategy,
     otherComment,
@@ -57,14 +43,14 @@ export default function OfferCard({
             <p>{jobLevel ? `${jobTitle}, ${jobLevel}` : jobTitle}</p>
           </div>
         </div>
-        {receivedMonth && (
+        {!duration && receivedMonth && (
           <div className="font-light text-gray-400">
             <p>{receivedMonth}</p>
           </div>
         )}
         {duration && (
           <div className="font-light text-gray-400">
-            <p>{duration}</p>
+            <p>{`${duration} months`}</p>
           </div>
         )}
       </div>
diff --git a/apps/portal/src/components/offers/profile/ProfileComments.tsx b/apps/portal/src/components/offers/profile/ProfileComments.tsx
new file mode 100644
index 00000000..a0a47d43
--- /dev/null
+++ b/apps/portal/src/components/offers/profile/ProfileComments.tsx
@@ -0,0 +1,58 @@
+import { ClipboardDocumentIcon, ShareIcon } from '@heroicons/react/24/outline';
+import { Button, Spinner } from '@tih/ui';
+
+type ProfileHeaderProps = Readonly<{
+  handleCopyEditLink: () => void;
+  handleCopyPublicLink: () => void;
+  isDisabled: boolean;
+  isEditable: boolean;
+  isLoading: boolean;
+}>;
+
+export default function ProfileComments({
+  handleCopyEditLink,
+  handleCopyPublicLink,
+  isDisabled,
+  isEditable,
+  isLoading,
+}: ProfileHeaderProps) {
+  if (isLoading) {
+    return (
+      <div className="col-span-10 pt-4">
+        <Spinner display="block" size="lg" />
+      </div>
+    );
+  }
+  return (
+    <div className="m-4">
+      <div className="flex-end flex justify-end space-x-4">
+        {isEditable && (
+          <Button
+            addonPosition="start"
+            disabled={isDisabled}
+            icon={ClipboardDocumentIcon}
+            isLabelHidden={false}
+            label="Copy profile edit link"
+            size="sm"
+            variant="secondary"
+            onClick={handleCopyEditLink}
+          />
+        )}
+        <Button
+          addonPosition="start"
+          disabled={isDisabled}
+          icon={ShareIcon}
+          isLabelHidden={false}
+          label="Copy public link"
+          size="sm"
+          variant="secondary"
+          onClick={handleCopyPublicLink}
+        />
+      </div>
+      <h2 className="mt-2 text-2xl font-bold">
+        Discussions feature coming soon
+      </h2>
+      {/* <TextArea label="Comment" placeholder="Type your comment here" /> */}
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/profile/ProfileDetails.tsx b/apps/portal/src/components/offers/profile/ProfileDetails.tsx
new file mode 100644
index 00000000..6799efc5
--- /dev/null
+++ b/apps/portal/src/components/offers/profile/ProfileDetails.tsx
@@ -0,0 +1,79 @@
+import { AcademicCapIcon, BriefcaseIcon } from '@heroicons/react/24/outline';
+import { Spinner } from '@tih/ui';
+
+import EducationCard from '~/components/offers/profile/EducationCard';
+import OfferCard from '~/components/offers/profile/OfferCard';
+import type { BackgroundCard, OfferEntity } from '~/components/offers/types';
+import { EducationBackgroundType } from '~/components/offers/types';
+
+type ProfileHeaderProps = Readonly<{
+  background?: BackgroundCard;
+  isLoading: boolean;
+  offers: Array<OfferEntity>;
+  selectedTab: string;
+}>;
+
+export default function ProfileDetails({
+  background,
+  isLoading,
+  offers,
+  selectedTab,
+}: ProfileHeaderProps) {
+  if (isLoading) {
+    return (
+      <div className="col-span-10 pt-4">
+        <Spinner display="block" size="lg" />
+      </div>
+    );
+  }
+  if (selectedTab === 'offers') {
+    if (offers && offers.length !== 0) {
+      return (
+        <>
+          {[...offers].map((offer) => (
+            <OfferCard key={offer.id} offer={offer} />
+          ))}
+        </>
+      );
+    }
+    return (
+      <div className="mx-8 my-4 flex flex-row">
+        <BriefcaseIcon className="mr-1 h-5" />
+        <span className="font-bold">No offer is attached.</span>
+      </div>
+    );
+  }
+  if (selectedTab === 'background') {
+    return (
+      <>
+        {background?.experiences && background?.experiences.length > 0 && (
+          <>
+            <div className="mx-8 my-4 flex flex-row">
+              <BriefcaseIcon className="mr-1 h-5" />
+              <span className="font-bold">Work Experience</span>
+            </div>
+            <OfferCard offer={background?.experiences[0]} />
+          </>
+        )}
+        {background?.educations && background?.educations.length > 0 && (
+          <>
+            <div className="mx-8 my-4 flex flex-row">
+              <AcademicCapIcon className="mr-1 h-5" />
+              <span className="font-bold">Education</span>
+            </div>
+            <EducationCard
+              education={{
+                endDate: background.educations[0].endDate,
+                field: background.educations[0].field,
+                school: background.educations[0].school,
+                startDate: background.educations[0].startDate,
+                type: EducationBackgroundType.Bachelor,
+              }}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+  return <div>Detail page for {selectedTab}</div>;
+}
diff --git a/apps/portal/src/components/offers/profile/ProfileHeader.tsx b/apps/portal/src/components/offers/profile/ProfileHeader.tsx
new file mode 100644
index 00000000..c37b40ff
--- /dev/null
+++ b/apps/portal/src/components/offers/profile/ProfileHeader.tsx
@@ -0,0 +1,166 @@
+import { useState } from 'react';
+import {
+  BookmarkSquareIcon,
+  BuildingOffice2Icon,
+  CalendarDaysIcon,
+  PencilSquareIcon,
+  TrashIcon,
+} from '@heroicons/react/24/outline';
+import { Button, Dialog, Spinner, Tabs } from '@tih/ui';
+
+import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
+import type { BackgroundCard } from '~/components/offers/types';
+
+type ProfileHeaderProps = Readonly<{
+  background?: BackgroundCard;
+  handleDelete: () => void;
+  isEditable: boolean;
+  isLoading: boolean;
+  selectedTab: string;
+  setSelectedTab: (tab: string) => void;
+}>;
+
+export default function ProfileHeader({
+  background,
+  handleDelete,
+  isEditable,
+  isLoading,
+  selectedTab,
+  setSelectedTab,
+}: ProfileHeaderProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  function renderActionList() {
+    return (
+      <div className="space-x-2">
+        <Button
+          disabled={isLoading}
+          icon={BookmarkSquareIcon}
+          isLabelHidden={true}
+          label="Save to user account"
+          size="md"
+          variant="tertiary"
+        />
+        <Button
+          disabled={isLoading}
+          icon={PencilSquareIcon}
+          isLabelHidden={true}
+          label="Edit"
+          size="md"
+          variant="tertiary"
+        />
+        <Button
+          disabled={isLoading}
+          icon={TrashIcon}
+          isLabelHidden={true}
+          label="Delete"
+          size="md"
+          variant="tertiary"
+          onClick={() => setIsDialogOpen(true)}
+        />
+        {isDialogOpen && (
+          <Dialog
+            isShown={isDialogOpen}
+            primaryButton={
+              <Button
+                display="block"
+                label="Delete"
+                variant="primary"
+                onClick={() => {
+                  setIsDialogOpen(false);
+                  handleDelete();
+                }}
+              />
+            }
+            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 be gone. You will not be able to access or
+              recover it.
+            </div>
+          </Dialog>
+        )}
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="col-span-10 pt-4">
+        <Spinner display="block" size="lg" />
+      </div>
+    );
+  }
+  return (
+    <div className="h-40 bg-white p-4">
+      <div className="justify-left flex h-1/2">
+        <div className="mx-4 mt-2">
+          <ProfilePhotoHolder />
+        </div>
+        <div className="w-full">
+          <div className="justify-left flex flex-1">
+            <h2 className="flex w-4/5 text-2xl font-bold">
+              {background?.profileName ?? 'anonymous'}
+            </h2>
+            {isEditable && (
+              <div className="flex h-8 w-1/5 justify-end">
+                {renderActionList()}
+              </div>
+            )}
+          </div>
+          <div className="flex flex-row">
+            <BuildingOffice2Icon className="mr-2.5 h-5" />
+            <span className="mr-2 font-bold">Current:</span>
+            <span>{`${background?.experiences[0].companyName ?? '-'} ${
+              background?.experiences[0].jobLevel
+            } ${background?.experiences[0].jobTitle}`}</span>
+          </div>
+          <div className="flex flex-row">
+            <CalendarDaysIcon className="mr-2.5 h-5" />
+            <span className="mr-2 font-bold">YOE:</span>
+            <span className="mr-4">{background?.totalYoe}</span>
+            {background?.specificYoes &&
+              background?.specificYoes.length > 0 &&
+              background?.specificYoes.map(({ domain, yoe }) => {
+                return (
+                  <span
+                    key={domain}
+                    className="mr-4">{`${domain}: ${yoe}`}</span>
+                );
+              })}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <Tabs
+          label="Profile Detail Navigation"
+          tabs={[
+            {
+              label: 'Offers',
+              value: 'offers',
+            },
+            {
+              label: 'Background',
+              value: 'background',
+            },
+            {
+              label: 'Offer Engine Analysis',
+              value: 'offerEngineAnalysis',
+            },
+          ]}
+          value={selectedTab}
+          onChange={(value) => setSelectedTab(value)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/table/OffersRow.tsx b/apps/portal/src/components/offers/table/OffersRow.tsx
new file mode 100644
index 00000000..f7bf4dc6
--- /dev/null
+++ b/apps/portal/src/components/offers/table/OffersRow.tsx
@@ -0,0 +1,35 @@
+import Link from 'next/link';
+
+import { convertCurrencyToString } from '~/utils/offers/currency';
+import { formatDate } from '~/utils/offers/time';
+
+import type { DashboardOffer } from '~/types/offers';
+
+export type OfferTableRowProps = Readonly<{ row: DashboardOffer }>;
+
+export default function OfferTableRow({
+  row: { company, id, income, monthYearReceived, profileId, title, totalYoe },
+}: OfferTableRowProps) {
+  return (
+    <tr
+      key={id}
+      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.name}
+      </th>
+      <td className="py-4 px-6">{title}</td>
+      <td className="py-4 px-6">{totalYoe}</td>
+      <td className="py-4 px-6">{convertCurrencyToString(income)}</td>
+      <td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
+      <td className="space-x-4 py-4 px-6">
+        <Link
+          className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"
+          href={`/offers/profile/${profileId}`}>
+          View Profile
+        </Link>
+      </td>
+    </tr>
+  );
+}
diff --git a/apps/portal/src/components/offers/table/OffersTable.tsx b/apps/portal/src/components/offers/table/OffersTable.tsx
new file mode 100644
index 00000000..c77bc313
--- /dev/null
+++ b/apps/portal/src/components/offers/table/OffersTable.tsx
@@ -0,0 +1,176 @@
+import { useEffect, useState } from 'react';
+import { HorizontalDivider, Select, Spinner, Tabs } from '@tih/ui';
+
+import OffersTablePagination from '~/components/offers/table/OffersTablePagination';
+import { YOE_CATEGORY } from '~/components/offers/table/types';
+
+import CurrencySelector from '~/utils/offers/currency/CurrencySelector';
+import { trpc } from '~/utils/trpc';
+
+import OffersRow from './OffersRow';
+
+import type { DashboardOffer, GetOffersResponse, Paging } from '~/types/offers';
+
+const NUMBER_OF_OFFERS_IN_PAGE = 10;
+export type OffersTableProps = Readonly<{
+  companyFilter: string;
+  jobTitleFilter: string;
+}>;
+export default function OffersTable({
+  companyFilter,
+  jobTitleFilter,
+}: OffersTableProps) {
+  const [currency, setCurrency] = useState('SGD'); // TODO: Detect location
+  const [selectedTab, setSelectedTab] = useState(YOE_CATEGORY.ENTRY);
+  const [pagination, setPagination] = useState<Paging>({
+    currentPage: 0,
+    numOfItems: 0,
+    numOfPages: 0,
+    totalItems: 0,
+  });
+  const [offers, setOffers] = useState<Array<DashboardOffer>>([]);
+
+  useEffect(() => {
+    setPagination({
+      currentPage: 0,
+      numOfItems: 0,
+      numOfPages: 0,
+      totalItems: 0,
+    });
+  }, [selectedTab]);
+  const offersQuery = trpc.useQuery(
+    [
+      'offers.list',
+      {
+        companyId: companyFilter,
+        limit: NUMBER_OF_OFFERS_IN_PAGE,
+        location: 'Singapore, Singapore', // TODO: Geolocation
+        offset: 0,
+        sortBy: '-monthYearReceived',
+        title: jobTitleFilter,
+        yoeCategory: selectedTab,
+      },
+    ],
+    {
+      onSuccess: (response: GetOffersResponse) => {
+        setOffers(response.data);
+        setPagination(response.paging);
+      },
+    },
+  );
+
+  function renderTabs() {
+    return (
+      <div className="flex justify-center">
+        <div className="w-fit">
+          <Tabs
+            label="Table Navigation"
+            tabs={[
+              {
+                label: 'Fresh Grad (0-2 YOE)',
+                value: YOE_CATEGORY.ENTRY,
+              },
+              {
+                label: 'Mid (3-5 YOE)',
+                value: YOE_CATEGORY.MID,
+              },
+              {
+                label: 'Senior (6+ 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',
+            selectedTab === YOE_CATEGORY.INTERN ? 'Monthly Salary' : 'TC/year',
+            'Date offered',
+            'Actions',
+          ].map((header) => (
+            <th key={header} className="py-3 px-6" scope="col">
+              {header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+    );
+  }
+
+  const handlePageChange = (currPage: number) => {
+    setPagination({ ...pagination, currentPage: currPage });
+  };
+
+  return (
+    <div className="w-5/6">
+      {renderTabs()}
+      <HorizontalDivider />
+      <div className="relative w-full overflow-x-auto shadow-md sm:rounded-lg">
+        {renderFilters()}
+        {offersQuery.isLoading ? (
+          <div className="col-span-10 pt-4">
+            <Spinner display="block" size="lg" />
+          </div>
+        ) : (
+          <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
+            {renderHeader()}
+            <tbody>
+              {offers.map((offer) => (
+                <OffersRow key={offer.id} row={offer} />
+              ))}
+            </tbody>
+          </table>
+        )}
+        <OffersTablePagination
+          endNumber={
+            pagination.currentPage * NUMBER_OF_OFFERS_IN_PAGE + offers.length
+          }
+          handlePageChange={handlePageChange}
+          pagination={pagination}
+          startNumber={pagination.currentPage * NUMBER_OF_OFFERS_IN_PAGE + 1}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/table/OffersTablePagination.tsx b/apps/portal/src/components/offers/table/OffersTablePagination.tsx
new file mode 100644
index 00000000..0800a529
--- /dev/null
+++ b/apps/portal/src/components/offers/table/OffersTablePagination.tsx
@@ -0,0 +1,44 @@
+import { Pagination } from '@tih/ui';
+
+import type { Paging } from '~/types/offers';
+
+type OffersTablePaginationProps = Readonly<{
+  endNumber: number;
+  handlePageChange: (page: number) => void;
+  pagination: Paging;
+  startNumber: number;
+}>;
+
+export default function OffersTablePagination({
+  endNumber,
+  pagination,
+  startNumber,
+  handlePageChange,
+}: OffersTablePaginationProps) {
+  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">
+          {` ${startNumber} - ${endNumber} `}
+        </span>
+        {`of `}
+        <span className="font-semibold text-gray-900 dark:text-white">
+          {pagination.totalItems}
+        </span>
+      </span>
+      <Pagination
+        current={pagination.currentPage + 1}
+        end={pagination.numOfPages}
+        label="Pagination"
+        pagePadding={1}
+        start={1}
+        onSelect={(currPage) => {
+          handlePageChange(currPage - 1);
+        }}
+      />
+    </nav>
+  );
+}
diff --git a/apps/portal/src/components/offers/table/types.ts b/apps/portal/src/components/offers/table/types.ts
new file mode 100644
index 00000000..c7d92680
--- /dev/null
+++ b/apps/portal/src/components/offers/table/types.ts
@@ -0,0 +1,14 @@
+// eslint-disable-next-line no-shadow
+export enum YOE_CATEGORY {
+  INTERN = 0,
+  ENTRY = 1,
+  MID = 2,
+  SENIOR = 3,
+}
+
+export type PaginationType = {
+  currentPage: number;
+  numOfItems: number;
+  numOfPages: number;
+  totalItems: number;
+};
diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts
index 17bda427..1841a3a5 100644
--- a/apps/portal/src/components/offers/types.ts
+++ b/apps/portal/src/components/offers/types.ts
@@ -1,4 +1,5 @@
-/* eslint-disable no-shadow */
+import type { MonthYear } from '~/components/shared/MonthYearPicker';
+
 /*
  *  Offer Profile
  */
@@ -8,6 +9,11 @@ export enum JobType {
   Internship = 'INTERNSHIP',
 }
 
+export const JobTypeLabel = {
+  FULLTIME: 'Full-time',
+  INTERNSHIP: 'Internship',
+};
+
 export enum EducationBackgroundType {
   Bachelor = 'Bachelor',
   Diploma = 'Diploma',
@@ -18,7 +24,7 @@ export enum EducationBackgroundType {
   SelfTaught = 'Self-taught',
 }
 
-type Money = {
+export type Money = {
   currency: string;
   value: number;
 };
@@ -33,16 +39,6 @@ type FullTimeJobData = {
   totalCompensation: Money;
 };
 
-export type FullTimeOfferFormData = {
-  comments: string;
-  companyId: string;
-  job: FullTimeJobData;
-  jobType: string;
-  location: string;
-  monthYearReceived: string;
-  negotiationStrategy: string;
-};
-
 type InternshipJobData = {
   internshipCycle: string;
   monthlySalary: Money;
@@ -51,17 +47,33 @@ type InternshipJobData = {
   title: string;
 };
 
-export type InternshipOfferFormData = {
+type OfferDetailsGeneralData = {
   comments: string;
   companyId: string;
-  job: InternshipJobData;
   jobType: string;
   location: string;
-  monthYearReceived: string;
+  monthYearReceived: MonthYear;
   negotiationStrategy: string;
 };
 
-type OfferDetailsFormData = FullTimeOfferFormData | InternshipOfferFormData;
+export type FullTimeOfferDetailsFormData = OfferDetailsGeneralData & {
+  job: FullTimeJobData;
+};
+
+export type InternshipOfferDetailsFormData = OfferDetailsGeneralData & {
+  job: InternshipJobData;
+};
+
+export type OfferDetailsFormData =
+  | FullTimeOfferDetailsFormData
+  | InternshipOfferDetailsFormData;
+
+export type OfferDetailsPostData = Omit<
+  OfferDetailsFormData,
+  'monthYearReceived'
+> & {
+  monthYearReceived: Date;
+};
 
 type SpecificYoe = {
   domain: string;
@@ -69,42 +81,80 @@ type SpecificYoe = {
 };
 
 type FullTimeExperience = {
-  level: string;
-  totalCompensation: Money;
+  level?: string;
+  totalCompensation?: Money;
 };
 
 type InternshipExperience = {
-  monthlySalary: Money;
+  monthlySalary?: Money;
 };
 
 type GeneralExperience = {
-  companyId: string;
-  durationInMonths: number;
-  jobType: string;
-  specialization: string;
-  title: string;
+  companyId?: string;
+  durationInMonths?: number;
+  jobType?: string;
+  specialization?: string;
+  title?: string;
 };
 
-type Experience =
+export type Experience =
   | (FullTimeExperience & GeneralExperience)
   | (GeneralExperience & InternshipExperience);
 
 type Education = {
-  endDate: Date;
-  field: string;
-  school: string;
-  startDate: Date;
-  type: string;
+  endDate?: Date;
+  field?: string;
+  school?: string;
+  startDate?: Date;
+  type?: string;
 };
 
 type BackgroundFormData = {
-  education: Education;
-  experience: Experience;
+  educations: Array<Education>;
+  experiences: Array<Experience>;
   specificYoes: Array<SpecificYoe>;
-  totalYoe: number;
+  totalYoe?: number;
 };
 
-export type SubmitOfferFormData = {
+export type OfferProfileFormData = {
   background: BackgroundFormData;
   offers: Array<OfferDetailsFormData>;
 };
+
+export type OfferProfilePostData = {
+  background: BackgroundFormData;
+  offers: Array<OfferDetailsPostData>;
+};
+
+type EducationDisplay = {
+  endDate?: string;
+  field: string;
+  school: string;
+  startDate?: string;
+  type: string;
+};
+
+export type OfferEntity = {
+  base?: string;
+  bonus?: string;
+  companyName?: string;
+  duration?: string;
+  id?: string;
+  jobLevel?: string;
+  jobTitle?: string;
+  location?: string;
+  monthlySalary?: string;
+  negotiationStrategy?: string;
+  otherComment?: string;
+  receivedMonth?: string;
+  stocks?: string;
+  totalCompensation?: string;
+};
+
+export type BackgroundCard = {
+  educations: Array<EducationDisplay>;
+  experiences: Array<OfferEntity>;
+  profileName: string;
+  specificYoes: Array<SpecificYoe>;
+  totalYoe: string;
+};
diff --git a/apps/portal/src/components/offers/util/time/index.tsx b/apps/portal/src/components/offers/util/time/index.tsx
deleted file mode 100644
index 86f21ab9..00000000
--- a/apps/portal/src/components/offers/util/time/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-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/components/questions/CommentListItem.tsx b/apps/portal/src/components/questions/AnswerCommentListItem.tsx
similarity index 58%
rename from apps/portal/src/components/questions/CommentListItem.tsx
rename to apps/portal/src/components/questions/AnswerCommentListItem.tsx
index 1cf87d50..c65a379f 100644
--- a/apps/portal/src/components/questions/CommentListItem.tsx
+++ b/apps/portal/src/components/questions/AnswerCommentListItem.tsx
@@ -1,8 +1,11 @@
 import { format } from 'date-fns';
 
+import { useAnswerCommentVote } from '~/utils/questions/useVote';
+
 import VotingButtons from './VotingButtons';
 
-export type CommentListItemProps = {
+export type AnswerCommentListItemProps = {
+  answerCommentId: string;
   authorImageUrl: string;
   authorName: string;
   content: string;
@@ -10,16 +13,26 @@ export type CommentListItemProps = {
   upvoteCount: number;
 };
 
-export default function CommentListItem({
+export default function AnswerCommentListItem({
   authorImageUrl,
   authorName,
   content,
   createdAt,
   upvoteCount,
-}: CommentListItemProps) {
+  answerCommentId,
+}: AnswerCommentListItemProps) {
+  const { handleDownvote, handleUpvote, vote } =
+    useAnswerCommentVote(answerCommentId);
+
   return (
     <div className="flex gap-4 border bg-white p-2 ">
-      <VotingButtons size="sm" upvoteCount={upvoteCount} />
+      <VotingButtons
+        size="sm"
+        upvoteCount={upvoteCount}
+        vote={vote}
+        onDownvote={handleDownvote}
+        onUpvote={handleUpvote}
+      />
       <div className="mt-1 flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <img
@@ -28,7 +41,7 @@ export default function CommentListItem({
             src={authorImageUrl}></img>
           <h1 className="font-bold">{authorName}</h1>
           <p className="pt-1 text-xs font-extralight">
-            Posted on: {format(createdAt, 'Pp')}
+            Posted on: {format(createdAt, 'h:mm a, MMMM dd, yyyy')}
           </p>
         </div>
         <p className="pl-1 pt-1">{content}</p>
diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
index fa11f098..73faba27 100644
--- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
@@ -40,7 +40,7 @@ export default function ContributeQuestionCard({
           placeholder="Contribute a question"
           onChange={handleOpenContribute}
         />
-        <div className="flex items-end justify-center gap-x-2">
+        <div className="flex flex-wrap items-end justify-center gap-x-2">
           <div className="min-w-[150px] flex-1">
             <TextInput
               disabled={true}
diff --git a/apps/portal/src/components/questions/ContributeQuestionDialog.tsx b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
index e2ae8c8c..b21b21dc 100644
--- a/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
@@ -1,7 +1,6 @@
 import { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
-
-import { HorizontalDivider } from '~/../../../packages/ui/dist';
+import { HorizontalDivider } from '@tih/ui';
 
 import type { ContributeQuestionFormProps } from './ContributeQuestionForm';
 import ContributeQuestionForm from './ContributeQuestionForm';
@@ -62,9 +61,9 @@ export default function ContributeQuestionDialog({
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                 <Dialog.Panel className="relative max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full">
-                  <div className="bg-white  p-6 pt-5 sm:pb-4">
+                  <div className="bg-white p-6 pt-5 sm:pb-4">
                     <div className="flex flex-1 items-stretch">
-                      <div className="mt-3 w-full sm:mt-0 sm:ml-4 sm:text-left">
+                      <div className="mt-3 w-full sm:mt-0 sm:text-left">
                         <Dialog.Title
                           as="h3"
                           className="text-lg font-medium leading-6 text-gray-900">
diff --git a/apps/portal/src/components/questions/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/ContributeQuestionForm.tsx
index 367f0d88..5e230d73 100644
--- a/apps/portal/src/components/questions/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionForm.tsx
@@ -1,12 +1,16 @@
+import { startOfMonth } from 'date-fns';
 import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import {
-  BuildingOffice2Icon,
-  CalendarDaysIcon,
-  UserIcon,
-} from '@heroicons/react/24/outline';
+import { Controller, useForm } from 'react-hook-form';
+import { CalendarDaysIcon, UserIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
-import { Button, Collapsible, Select, TextArea, TextInput } from '@tih/ui';
+import {
+  Button,
+  CheckboxInput,
+  Collapsible,
+  Select,
+  TextArea,
+  TextInput,
+} from '@tih/ui';
 
 import { QUESTION_TYPES } from '~/utils/questions/constants';
 import {
@@ -14,7 +18,9 @@ import {
   useSelectRegister,
 } from '~/utils/questions/useFormRegister';
 
-import Checkbox from './ui-patch/Checkbox';
+import CompaniesTypeahead from '../shared/CompaniesTypeahead';
+import type { Month } from '../shared/MonthYearPicker';
+import MonthYearPicker from '../shared/MonthYearPicker';
 
 export type ContributeQuestionData = {
   company: string;
@@ -35,8 +41,15 @@ export default function ContributeQuestionForm({
   onSubmit,
   onDiscard,
 }: ContributeQuestionFormProps) {
-  const { register: formRegister, handleSubmit } =
-    useForm<ContributeQuestionData>();
+  const {
+    control,
+    register: formRegister,
+    handleSubmit,
+  } = useForm<ContributeQuestionData>({
+    defaultValues: {
+      date: startOfMonth(new Date()),
+    },
+  });
   const register = useFormRegister(formRegister);
   const selectRegister = useSelectRegister(formRegister);
 
@@ -66,24 +79,35 @@ export default function ContributeQuestionForm({
           />
         </div>
         <div className="min-w-[150px] max-w-[300px] flex-1">
-          <TextInput
-            label="Company"
-            required={true}
-            startAddOn={BuildingOffice2Icon}
-            startAddOnType="icon"
-            {...register('company')}
+          <Controller
+            control={control}
+            name="company"
+            render={({ field }) => (
+              <CompaniesTypeahead
+                onSelect={({ label }) => {
+                  // TODO: To change from using company name to company id (i.e., value)
+                  field.onChange(label);
+                }}
+              />
+            )}
           />
         </div>
 
         <div className="min-w-[150px] max-w-[300px] flex-1">
-          <TextInput
-            label="Date"
-            required={true}
-            startAddOn={CalendarDaysIcon}
-            startAddOnType="icon"
-            {...register('date', {
-              valueAsDate: true,
-            })}
+          <Controller
+            control={control}
+            name="date"
+            render={({ field }) => (
+              <MonthYearPicker
+                value={{
+                  month: (field.value.getMonth() + 1) as Month,
+                  year: field.value.getFullYear(),
+                }}
+                onChange={({ month, year }) =>
+                  field.onChange(startOfMonth(new Date(year, month - 1)))
+                }
+              />
+            )}
           />
         </div>
       </div>
@@ -130,10 +154,11 @@ export default function ContributeQuestionForm({
       </div> */}
       <div className="bg-primary-50 fixed bottom-0 left-0 w-full px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
         <div className="mb-1 flex">
-          <Checkbox
-            checked={canSubmit}
+          <CheckboxInput
             label="I have checked that my question is new"
-            onChange={handleCheckSimilarQuestions}></Checkbox>
+            value={canSubmit}
+            onChange={handleCheckSimilarQuestions}
+          />
         </div>
         <div className=" flex gap-x-2">
           <button
diff --git a/apps/portal/src/components/questions/QuestionBankTitle.tsx b/apps/portal/src/components/questions/QuestionBankTitle.tsx
deleted file mode 100644
index 133ea3e1..00000000
--- a/apps/portal/src/components/questions/QuestionBankTitle.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function QuestionBankTitle() {
-  return (
-    <h1 className="text-center text-4xl font-bold">Interview Questions</h1>
-  );
-}
diff --git a/apps/portal/src/components/questions/QuestionSearchBar.tsx b/apps/portal/src/components/questions/QuestionSearchBar.tsx
index d72ee69f..c5f401ea 100644
--- a/apps/portal/src/components/questions/QuestionSearchBar.tsx
+++ b/apps/portal/src/components/questions/QuestionSearchBar.tsx
@@ -1,5 +1,8 @@
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Select, TextInput } from '@tih/ui';
+import {
+  AdjustmentsHorizontalIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
+import { Button, Select, TextInput } from '@tih/ui';
 
 export type SortOption = {
   label: string;
@@ -7,6 +10,7 @@ export type SortOption = {
 };
 
 export type QuestionSearchBarProps<SortOptions extends Array<SortOption>> = {
+  onFilterOptionsToggle: () => void;
   onSortChange?: (sortValue: SortOptions[number]['value']) => void;
   sortOptions: SortOptions;
   sortValue: SortOptions[number]['value'];
@@ -18,10 +22,11 @@ export default function QuestionSearchBar<
   onSortChange,
   sortOptions,
   sortValue,
+  onFilterOptionsToggle,
 }: QuestionSearchBarProps<SortOptions>) {
   return (
-    <div className="flex items-center gap-2">
-      <div className="flex-1 pt-1">
+    <div className="flex items-center gap-4">
+      <div className="flex-1">
         <TextInput
           isLabelHidden={true}
           label="Search by content"
@@ -30,16 +35,28 @@ export default function QuestionSearchBar<
           startAddOnType="icon"
         />
       </div>
-      <span aria-hidden={true} className="pl-3 pr-1 pt-1 text-sm">
-        Sort by:
-      </span>
-      <Select
-        display="inline"
-        isLabelHidden={true}
-        label="Sort by"
-        options={sortOptions}
-        value={sortValue}
-        onChange={onSortChange}></Select>
+      <div className="flex items-center gap-2">
+        <span aria-hidden={true} className="align-middle text-sm font-medium">
+          Sort by:
+        </span>
+        <Select
+          display="inline"
+          isLabelHidden={true}
+          label="Sort by"
+          options={sortOptions}
+          value={sortValue}
+          onChange={onSortChange}
+        />
+      </div>
+      <div className="lg:hidden">
+        <Button
+          addonPosition="start"
+          icon={AdjustmentsHorizontalIcon}
+          label="Filter options"
+          variant="tertiary"
+          onClick={onFilterOptionsToggle}
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/portal/src/components/questions/QuestionTypeBadge.tsx b/apps/portal/src/components/questions/QuestionTypeBadge.tsx
new file mode 100644
index 00000000..fe62351e
--- /dev/null
+++ b/apps/portal/src/components/questions/QuestionTypeBadge.tsx
@@ -0,0 +1,17 @@
+import type { QuestionsQuestionType } from '@prisma/client';
+import { Badge } from '@tih/ui';
+
+import { QUESTION_TYPES } from '~/utils/questions/constants';
+
+export type QuestionTypeBadgeProps = {
+  type: QuestionsQuestionType;
+};
+
+export default function QuestionTypeBadge({ type }: QuestionTypeBadgeProps) {
+  return (
+    <Badge
+      label={QUESTION_TYPES.find(({ value }) => value === type)!.label}
+      variant="info"
+    />
+  );
+}
diff --git a/apps/portal/src/components/questions/QuestionsNavigation.ts b/apps/portal/src/components/questions/QuestionsNavigation.ts
index 0c5a6c43..457845bb 100644
--- a/apps/portal/src/components/questions/QuestionsNavigation.ts
+++ b/apps/portal/src/components/questions/QuestionsNavigation.ts
@@ -1,7 +1,6 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/questions', name: 'Home' },
   { href: '/questions', name: 'My Lists' },
   { href: '/questions', name: 'My Questions' },
   { href: '/questions', name: 'History' },
@@ -11,6 +10,7 @@ const config = {
   navigation,
   showGlobalNav: false,
   title: 'Questions Bank',
+  titleHref: '/questions',
 };
 
 export default config;
diff --git a/apps/portal/src/components/questions/VotingButtons.tsx b/apps/portal/src/components/questions/VotingButtons.tsx
index 74b9193e..cd404dca 100644
--- a/apps/portal/src/components/questions/VotingButtons.tsx
+++ b/apps/portal/src/components/questions/VotingButtons.tsx
@@ -1,16 +1,36 @@
+import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import type { Vote } from '@prisma/client';
 import type { ButtonSize } from '@tih/ui';
 import { Button } from '@tih/ui';
 
-export type VotingButtonsProps = {
+export type BackendVote = {
+  id: string;
+  vote: Vote;
+};
+
+export type VotingButtonsCallbackProps = {
+  onDownvote: () => void;
+  onUpvote: () => void;
+  vote: BackendVote | null;
+};
+
+export type VotingButtonsProps = VotingButtonsCallbackProps & {
   size?: ButtonSize;
   upvoteCount: number;
 };
 
 export default function VotingButtons({
+  vote,
+  onDownvote,
+  onUpvote,
   upvoteCount,
   size = 'md',
 }: VotingButtonsProps) {
+  const upvoteButtonVariant =
+    vote?.vote === 'UPVOTE' ? 'secondary' : 'tertiary';
+  const downvoteButtonVariant =
+    vote?.vote === 'DOWNVOTE' ? 'secondary' : 'tertiary';
   return (
     <div className="flex flex-col items-center">
       <Button
@@ -18,7 +38,12 @@ export default function VotingButtons({
         isLabelHidden={true}
         label="Upvote"
         size={size}
-        variant="tertiary"
+        variant={upvoteButtonVariant}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onUpvote();
+        }}
       />
       <p>{upvoteCount}</p>
       <Button
@@ -26,7 +51,12 @@ export default function VotingButtons({
         isLabelHidden={true}
         label="Downvote"
         size={size}
-        variant="tertiary"
+        variant={downvoteButtonVariant}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onDownvote();
+        }}
       />
     </div>
   );
diff --git a/apps/portal/src/components/questions/card/AnswerCard.tsx b/apps/portal/src/components/questions/card/AnswerCard.tsx
index 16088f3c..20818ee7 100644
--- a/apps/portal/src/components/questions/card/AnswerCard.tsx
+++ b/apps/portal/src/components/questions/card/AnswerCard.tsx
@@ -1,48 +1,63 @@
 import { format } from 'date-fns';
+import { ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';
 
-import withHref from '~/utils/questions/withHref';
+import { useAnswerVote } from '~/utils/questions/useVote';
 
+import type { VotingButtonsProps } from '../VotingButtons';
 import VotingButtons from '../VotingButtons';
 
 export type AnswerCardProps = {
+  answerId: string;
   authorImageUrl: string;
   authorName: string;
-  commentCount: number;
+  commentCount?: number;
   content: string;
   createdAt: Date;
   upvoteCount: number;
+  votingButtonsSize: VotingButtonsProps['size'];
 };
 
-function AnswerCardWithoutHref({
+export default function AnswerCard({
+  answerId,
   authorName,
   authorImageUrl,
-  upvoteCount,
   content,
   createdAt,
   commentCount,
+  votingButtonsSize,
+  upvoteCount,
 }: AnswerCardProps) {
+  const { handleUpvote, handleDownvote, vote } = useAnswerVote(answerId);
   return (
-    <div className="flex gap-4 rounded-md border bg-white p-2 hover:bg-slate-50">
-      <VotingButtons size="sm" upvoteCount={upvoteCount} />
-      <div className="mt-1 flex flex-col gap-1">
+    <article className="flex gap-4 rounded-md border bg-white p-2">
+      <VotingButtons
+        size={votingButtonsSize}
+        upvoteCount={upvoteCount}
+        vote={vote}
+        onDownvote={handleDownvote}
+        onUpvote={handleUpvote}
+      />
+      <div className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
           <img
             alt={`${authorName} profile picture`}
             className="h-8 w-8 rounded-full"
             src={authorImageUrl}></img>
           <h1 className="font-bold">{authorName}</h1>
-          <p className="pt-1 text-xs font-extralight">
-            Posted on: {format(createdAt, 'Pp')}
+          <p className="text-xs font-extralight">
+            Posted on: {format(createdAt, 'h:mm a, MMMM dd, yyyy')}
           </p>
         </div>
-        <p className="pl-1 pt-1">{content}</p>
-        <p className="py-1 pl-3 text-sm font-light underline	underline-offset-4">
-          {commentCount} comment(s)
-        </p>
+        <p>{content}</p>
+        {commentCount !== undefined && (
+          <div className="flex items-center gap-2 text-slate-500">
+            <ChatBubbleLeftRightIcon className="h-6 w-6" />
+            <p className="text-sm font-medium">
+              {commentCount} {commentCount === 1 ? 'comment' : 'comments'}
+            </p>
+          </div>
+        )}
       </div>
-    </div>
+    </article>
   );
 }
-
-const AnswerCard = withHref(AnswerCardWithoutHref);
-export default AnswerCard;
diff --git a/apps/portal/src/components/questions/card/FullAnswerCard.tsx b/apps/portal/src/components/questions/card/FullAnswerCard.tsx
index 74282c77..7642683a 100644
--- a/apps/portal/src/components/questions/card/FullAnswerCard.tsx
+++ b/apps/portal/src/components/questions/card/FullAnswerCard.tsx
@@ -1,38 +1,11 @@
-import { format } from 'date-fns';
+import type { AnswerCardProps } from './AnswerCard';
+import AnswerCard from './AnswerCard';
 
-import VotingButtons from '../VotingButtons';
+export type FullAnswerCardProps = Omit<
+  AnswerCardProps,
+  'commentCount' | 'votingButtonsSize'
+>;
 
-export type FullAnswerCardProps = {
-  authorImageUrl: string;
-  authorName: string;
-  content: string;
-  createdAt: Date;
-  upvoteCount: number;
-};
-
-export default function FullAnswerCard({
-  authorImageUrl,
-  authorName,
-  content,
-  createdAt,
-  upvoteCount,
-}: FullAnswerCardProps) {
-  return (
-    <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
-      <VotingButtons upvoteCount={upvoteCount}></VotingButtons>
-      <div className="mt-1 flex flex-col gap-1">
-        <div className="flex items-center gap-2">
-          <img
-            alt={`${authorName} profile picture`}
-            className="h-8 w-8 rounded-full"
-            src={authorImageUrl}></img>
-          <h1 className="font-bold">{authorName}</h1>
-          <p className="pt-1 text-xs font-extralight">
-            Posted on: {format(createdAt, 'Pp')}
-          </p>
-        </div>
-        <p className="pl-1 pt-1">{content}</p>
-      </div>
-    </article>
-  );
+export default function FullAnswerCard(props: FullAnswerCardProps) {
+  return <AnswerCard {...props} votingButtonsSize="md" />;
 }
diff --git a/apps/portal/src/components/questions/card/FullQuestionCard.tsx b/apps/portal/src/components/questions/card/FullQuestionCard.tsx
index bc6f5f30..2c3c79ef 100644
--- a/apps/portal/src/components/questions/card/FullQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/FullQuestionCard.tsx
@@ -1,58 +1,26 @@
-import { Badge } from '@tih/ui';
+import type { QuestionCardProps } from './QuestionCard';
+import QuestionCard from './QuestionCard';
 
-import VotingButtons from '../VotingButtons';
+export type QuestionOverviewCardProps = Omit<
+  QuestionCardProps & {
+    showActionButton: false;
+    showUserStatistics: false;
+    showVoteButtons: true;
+  },
+  | 'actionButtonLabel'
+  | 'onActionButtonClick'
+  | 'showActionButton'
+  | 'showUserStatistics'
+  | 'showVoteButtons'
+>;
 
-type UpvoteProps =
-  | {
-      showVoteButtons: true;
-      upvoteCount: number;
-    }
-  | {
-      showVoteButtons?: false;
-      upvoteCount?: never;
-    };
-
-export type FullQuestionCardProps = UpvoteProps & {
-  company: string;
-  content: string;
-  location: string;
-  receivedCount: number;
-  role: string;
-  timestamp: string;
-  type: string;
-};
-
-export default function FullQuestionCard({
-  company,
-  content,
-  showVoteButtons,
-  upvoteCount,
-  timestamp,
-  role,
-  location,
-  type,
-}: FullQuestionCardProps) {
-  const altText = company + ' logo';
+export default function FullQuestionCard(props: QuestionOverviewCardProps) {
   return (
-    <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
-      {showVoteButtons && <VotingButtons upvoteCount={upvoteCount} />}
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2">
-          <img alt={altText} src="https://logo.clearbit.com/google.com"></img>
-          <h2 className="ml-2 text-xl">{company}</h2>
-        </div>
-        <div className="flex items-baseline justify-between">
-          <div className="flex items-center gap-2 text-slate-500">
-            <Badge label={type} variant="primary" />
-            <p className="text-xs">
-              {timestamp} · {location} · {role}
-            </p>
-          </div>
-        </div>
-        <div className="mx-2 mb-2">
-          <p>{content}</p>
-        </div>
-      </div>
-    </article>
+    <QuestionCard
+      {...props}
+      showActionButton={false}
+      showUserStatistics={false}
+      showVoteButtons={true}
+    />
   );
 }
diff --git a/apps/portal/src/components/questions/card/QuestionAnswerCard.tsx b/apps/portal/src/components/questions/card/QuestionAnswerCard.tsx
new file mode 100644
index 00000000..b508e5b4
--- /dev/null
+++ b/apps/portal/src/components/questions/card/QuestionAnswerCard.tsx
@@ -0,0 +1,15 @@
+import withHref from '~/utils/questions/withHref';
+
+import type { AnswerCardProps } from './AnswerCard';
+import AnswerCard from './AnswerCard';
+
+export type QuestionAnswerCardProps = Required<
+  Omit<AnswerCardProps, 'votingButtonsSize'>
+>;
+
+function QuestionAnswerCardWithoutHref(props: QuestionAnswerCardProps) {
+  return <AnswerCard {...props} votingButtonsSize="sm" />;
+}
+
+const QuestionAnswerCard = withHref(QuestionAnswerCardWithoutHref);
+export default QuestionAnswerCard;
diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx
index 75e95dd2..ba530f75 100644
--- a/apps/portal/src/components/questions/card/QuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionCard.tsx
@@ -1,9 +1,10 @@
-import {
-  ChatBubbleBottomCenterTextIcon,
-  // EyeIcon,
-} from '@heroicons/react/24/outline';
+import { ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline';
+import type { QuestionsQuestionType } from '@prisma/client';
 import { Badge, Button } from '@tih/ui';
 
+import { useQuestionVote } from '~/utils/questions/useVote';
+
+import QuestionTypeBadge from '../QuestionTypeBadge';
 import VotingButtons from '../VotingButtons';
 
 type UpvoteProps =
@@ -41,16 +42,19 @@ type ActionButtonProps =
 export type QuestionCardProps = ActionButtonProps &
   StatisticsProps &
   UpvoteProps & {
+    company: string;
     content: string;
-    href?: string;
     location: string;
+    questionId: string;
     receivedCount: number;
     role: string;
     timestamp: string;
-    type: string;
+    type: QuestionsQuestionType;
   };
 
 export default function QuestionCard({
+  questionId,
+  company,
   answerCount,
   content,
   // ReceivedCount,
@@ -65,13 +69,23 @@ export default function QuestionCard({
   role,
   location,
 }: QuestionCardProps) {
+  const { handleDownvote, handleUpvote, vote } = useQuestionVote(questionId);
+
   return (
-    <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4 hover:bg-slate-50">
-      {showVoteButtons && <VotingButtons upvoteCount={upvoteCount} />}
+    <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
+      {showVoteButtons && (
+        <VotingButtons
+          upvoteCount={upvoteCount}
+          vote={vote}
+          onDownvote={handleDownvote}
+          onUpvote={handleUpvote}
+        />
+      )}
       <div className="flex flex-col gap-2">
         <div className="flex items-baseline justify-between">
-          <div className="flex items-center gap-2 text-slate-500">
-            <Badge label={type} variant="primary" />
+          <div className="flex items-baseline gap-2 text-slate-500">
+            <Badge label={company} variant="primary" />
+            <QuestionTypeBadge type={type} />
             <p className="text-xs">
               {timestamp} · {location} · {role}
             </p>
diff --git a/apps/portal/src/components/questions/filter/FilterSection.tsx b/apps/portal/src/components/questions/filter/FilterSection.tsx
index cfb6ba5c..312122c3 100644
--- a/apps/portal/src/components/questions/filter/FilterSection.tsx
+++ b/apps/portal/src/components/questions/filter/FilterSection.tsx
@@ -1,8 +1,5 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Collapsible, TextInput } from '@tih/ui';
-
-import Checkbox from '../ui-patch/Checkbox';
-import RadioGroup from '../ui-patch/RadioGroup';
+import { CheckboxInput, Collapsible, RadioList, TextInput } from '@tih/ui';
 
 export type FilterOption<V extends string = string> = {
   checked: boolean;
@@ -66,17 +63,29 @@ export default function FilterSection<
             />
           )}
           {isSingleSelect ? (
-            <RadioGroup
-              radioData={options}
-              onChange={(value) => {
-                onOptionChange(value);
-              }}></RadioGroup>
+            <div className="px-1.5">
+              <RadioList
+                label=""
+                value={options.find((option) => option.checked)?.value}
+                onChange={(value) => {
+                  onOptionChange(value);
+                }}>
+                {options.map((option) => (
+                  <RadioList.Item
+                    key={option.value}
+                    label={option.label}
+                    value={option.value}
+                  />
+                ))}
+              </RadioList>
+            </div>
           ) : (
-            <div className="mx-1">
+            <div className="px-1.5">
               {options.map((option) => (
-                <Checkbox
+                <CheckboxInput
                   key={option.value}
-                  {...option}
+                  label={option.label}
+                  value={option.checked}
                   onChange={(checked) => {
                     onOptionChange(option.value, checked);
                   }}
diff --git a/apps/portal/src/components/questions/ui-patch/Checkbox.tsx b/apps/portal/src/components/questions/ui-patch/Checkbox.tsx
deleted file mode 100644
index 413c12fe..00000000
--- a/apps/portal/src/components/questions/ui-patch/Checkbox.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useId } from 'react';
-
-export type CheckboxProps = {
-  checked: boolean;
-  label: string;
-  onChange: (checked: boolean) => void;
-};
-
-export default function Checkbox({ label, checked, onChange }: CheckboxProps) {
-  const id = useId();
-  return (
-    <div className="flex items-center">
-      <input
-        checked={checked}
-        className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
-        id={id}
-        type="checkbox"
-        onChange={(event) => onChange(event.target.checked)}
-      />
-      <label className="ml-3 min-w-0 flex-1 text-gray-700" htmlFor={id}>
-        {label}
-      </label>
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx b/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx
deleted file mode 100644
index 4b6692c4..00000000
--- a/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-export type RadioProps = {
-  onChange: (value: string) => void;
-  radioData: Array<RadioData>;
-};
-
-export type RadioData = {
-  checked: boolean;
-  label: string;
-  value: string;
-};
-
-export default function RadioGroup({ radioData, onChange }: RadioProps) {
-  return (
-    <div className="mx-1 space-y-1">
-      {radioData.map((radio) => (
-        <div key={radio.value} className="flex items-center">
-          <input
-            checked={radio.checked}
-            className="text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300"
-            type="radio"
-            value={radio.value}
-            onChange={(event) => {
-              const target = event.target as HTMLInputElement;
-              onChange(target.value);
-            }}
-          />
-          <label
-            className="ml-3 min-w-0 flex-1 text-gray-700"
-            htmlFor={radio.value}>
-            {radio.label}
-          </label>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx
index a190606e..563571c5 100644
--- a/apps/portal/src/components/resumes/ResumePdf.tsx
+++ b/apps/portal/src/components/resumes/ResumePdf.tsx
@@ -1,7 +1,13 @@
-import { useState } from 'react';
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist';
-import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  MagnifyingGlassMinusIcon,
+  MagnifyingGlassPlusIcon,
+} from '@heroicons/react/20/solid';
 import { Button, Spinner } from '@tih/ui';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
@@ -13,21 +19,69 @@ type Props = Readonly<{
 export default function ResumePdf({ url }: Props) {
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
+  const [pageWidth, setPageWidth] = useState(750);
+  const [componentWidth, setComponentWidth] = useState(780);
 
   const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => {
     setNumPages(pdf.numPages);
   };
 
+  useEffect(() => {
+    const onPageResize = () => {
+      setComponentWidth(
+        document.querySelector('#pdfView')?.getBoundingClientRect().width ??
+          780,
+      );
+    };
+
+    window.addEventListener('resize', onPageResize);
+
+    return () => {
+      window.removeEventListener('resize', onPageResize);
+    };
+  }, []);
+
   return (
-    <div>
-      <Document
-        className="flex h-[calc(100vh-17rem)] flex-row justify-center overflow-scroll"
-        file={url}
-        loading={<Spinner display="block" label="" size="lg" />}
-        noData=""
-        onLoadSuccess={onPdfLoadSuccess}>
-        <Page pageNumber={pageNumber} />
-      </Document>
+    <div id="pdfView">
+      <div className="group relative">
+        <Document
+          className="flex h-[calc(100vh-17rem)] flex-row justify-center overflow-auto"
+          file={url}
+          loading={<Spinner display="block" size="lg" />}
+          noData=""
+          onLoadSuccess={onPdfLoadSuccess}>
+          <div
+            style={{
+              paddingLeft: clsx(
+                pageWidth > componentWidth
+                  ? `${pageWidth - componentWidth}px`
+                  : '',
+              ),
+            }}>
+            <Page pageNumber={pageNumber} width={pageWidth} />
+          </div>
+          <div className="absolute top-2 right-5 hidden hover:block group-hover:block">
+            <Button
+              className="rounded-r-none focus:ring-0 focus:ring-offset-0"
+              disabled={pageWidth === 450}
+              icon={MagnifyingGlassMinusIcon}
+              isLabelHidden={true}
+              label="Zoom Out"
+              variant="tertiary"
+              onClick={() => setPageWidth(pageWidth - 150)}
+            />
+            <Button
+              className="rounded-l-none focus:ring-0 focus:ring-offset-0"
+              disabled={pageWidth === 1050}
+              icon={MagnifyingGlassPlusIcon}
+              isLabelHidden={true}
+              label="Zoom In"
+              variant="tertiary"
+              onClick={() => setPageWidth(pageWidth + 150)}
+            />
+          </div>
+        </Document>
+      </div>
 
       <div className="flex flex-row items-center justify-between p-4">
         <Button
diff --git a/apps/portal/src/components/resumes/ResumesNavigation.ts b/apps/portal/src/components/resumes/ResumesNavigation.ts
index fd16cde0..e6b40344 100644
--- a/apps/portal/src/components/resumes/ResumesNavigation.ts
+++ b/apps/portal/src/components/resumes/ResumesNavigation.ts
@@ -3,7 +3,7 @@ import type { ProductNavigationItems } from '~/components/global/ProductNavigati
 const navigation: ProductNavigationItems = [
   {
     children: [],
-    href: '/resumes',
+    href: '/resumes/browse',
     name: 'Browse',
   },
   { children: [], href: '/resumes/submit', name: 'Submit for review' },
@@ -11,6 +11,7 @@ const navigation: ProductNavigationItems = [
     children: [],
     href: 'https://www.techinterviewhandbook.org/resume/',
     name: 'Resume Guide',
+    target: '_blank',
   },
 ];
 
@@ -18,6 +19,7 @@ const config = {
   navigation,
   showGlobalNav: false,
   title: 'Resumes',
+  titleHref: '/resumes',
 };
 
 export default config;
diff --git a/apps/portal/src/components/resumes/browse/FilterPill.tsx b/apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
similarity index 84%
rename from apps/portal/src/components/resumes/browse/FilterPill.tsx
rename to apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
index c34f4763..3961ac9d 100644
--- a/apps/portal/src/components/resumes/browse/FilterPill.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
@@ -3,7 +3,7 @@ type Props = Readonly<{
   title: string;
 }>;
 
-export default function FilterPill({ title, onClick }: Props) {
+export default function ResumeFilterPill({ title, onClick }: Props) {
   return (
     <button
       className="rounded-xl border border-indigo-500 border-transparent bg-white px-2 py-1 text-xs font-medium text-indigo-500 focus:bg-indigo-500 focus:text-white"
diff --git a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
index 53c33e78..10689062 100644
--- a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
@@ -1,7 +1,12 @@
-import { formatDistanceToNow } from 'date-fns';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import Link from 'next/link';
 import type { UrlObject } from 'url';
-import { ChevronRightIcon } from '@heroicons/react/20/solid';
+import {
+  AcademicCapIcon,
+  BriefcaseIcon,
+  ChevronRightIcon,
+  StarIcon as ColouredStarIcon,
+} from '@heroicons/react/20/solid';
 import { ChatBubbleLeftIcon, StarIcon } from '@heroicons/react/24/outline';
 
 import type { Resume } from '~/types/resume';
@@ -11,33 +16,48 @@ type Props = Readonly<{
   resumeInfo: Resume;
 }>;
 
-export default function BrowseListItem({ href, resumeInfo }: Props) {
+export default function ResumeListItem({ href, resumeInfo }: Props) {
   return (
     <Link href={href}>
-      <div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4">
+      <div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4 hover:bg-slate-100">
         <div className="col-span-4">
           {resumeInfo.title}
           <div className="mt-2 flex items-center justify-start text-xs text-indigo-500">
-            {resumeInfo.role}
-            <div className="ml-6 rounded-md border border-indigo-500 p-1">
+            <div className="flex">
+              <BriefcaseIcon
+                aria-hidden="true"
+                className="mr-1.5 h-4 w-4 flex-shrink-0"
+              />
+              {resumeInfo.role}
+            </div>
+            <div className="ml-4 flex">
+              <AcademicCapIcon
+                aria-hidden="true"
+                className="mr-1.5 h-4 w-4 flex-shrink-0"
+              />
               {resumeInfo.experience}
             </div>
           </div>
-          <div className="mt-2 flex justify-start text-xs text-slate-500">
-            <div className="flex gap-2 pr-8">
+          <div className="mt-4 flex justify-start text-xs text-slate-500">
+            <div className="flex gap-2 pr-4">
               <ChatBubbleLeftIcon className="w-4" />
               {resumeInfo.numComments} comments
             </div>
             <div className="flex gap-2">
-              <StarIcon className="w-4" />
+              {resumeInfo.isStarredByUser ? (
+                <ColouredStarIcon className="w-4 text-yellow-400" />
+              ) : (
+                <StarIcon className="w-4" />
+              )}
               {resumeInfo.numStars} stars
             </div>
           </div>
         </div>
         <div className="col-span-3 self-center text-sm text-slate-500">
           <div>
-            Uploaded {formatDistanceToNow(resumeInfo.createdAt)} ago by{' '}
-            {resumeInfo.user}
+            {`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, {
+              addSuffix: true,
+            })} by ${resumeInfo.user}`}
           </div>
           <div className="mt-2 text-slate-400">{resumeInfo.location}</div>
         </div>
diff --git a/apps/portal/src/components/resumes/browse/ResumeListItems.tsx b/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
index 5e834665..07f61770 100644
--- a/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItems.tsx
@@ -1,6 +1,6 @@
 import { Spinner } from '@tih/ui';
 
-import ResumseListItem from './ResumeListItem';
+import ResumeListItem from './ResumeListItem';
 
 import type { Resume } from '~/types/resume';
 
@@ -22,8 +22,8 @@ export default function ResumeListItems({ isLoading, resumes }: Props) {
     <ul role="list">
       {resumes.map((resumeObj: Resume) => (
         <li key={resumeObj.id}>
-          <ResumseListItem
-            href={`resumes/${resumeObj.id}`}
+          <ResumeListItem
+            href={`/resumes/${resumeObj.id}`}
             resumeInfo={resumeObj}
           />
         </li>
diff --git a/apps/portal/src/components/resumes/browse/constants.ts b/apps/portal/src/components/resumes/browse/constants.ts
deleted file mode 100644
index 6996538a..00000000
--- a/apps/portal/src/components/resumes/browse/constants.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-export const BROWSE_TABS_VALUES = {
-  ALL: 'all',
-  MY: 'my',
-  STARRED: 'starred',
-};
-
-export const SORT_OPTIONS = [
-  { current: true, href: '#', name: 'Latest' },
-  { current: false, href: '#', name: 'Popular' },
-  { current: false, href: '#', name: 'Top Comments' },
-];
-
-export const TOP_HITS = [
-  { href: '#', name: 'Unreviewed' },
-  { href: '#', name: 'Fresh Grad' },
-  { href: '#', name: 'GOATs' },
-  { href: '#', name: 'US Only' },
-];
-
-export const ROLES = [
-  {
-    checked: false,
-    label: 'Full-Stack Engineer',
-    value: 'Full-Stack Engineer',
-  },
-  { checked: false, label: 'Frontend Engineer', value: 'Frontend Engineer' },
-  { checked: false, label: 'Backend Engineer', value: 'Backend Engineer' },
-  { checked: false, label: 'DevOps Engineer', value: 'DevOps Engineer' },
-  { checked: false, label: 'iOS Engineer', value: 'iOS Engineer' },
-  { checked: false, label: 'Android Engineer', value: 'Android Engineer' },
-];
-
-export const EXPERIENCE = [
-  { checked: false, label: 'Freshman', value: 'Freshman' },
-  { checked: false, label: 'Sophomore', value: 'Sophomore' },
-  { checked: false, label: 'Junior', value: 'Junior' },
-  { checked: false, label: 'Senior', value: 'Senior' },
-  {
-    checked: false,
-    label: 'Fresh Grad (0-1 years)',
-    value: 'Fresh Grad (0-1 years)',
-  },
-  {
-    checked: false,
-    label: 'Mid-level (2 - 5 years)',
-    value: 'Mid-level (2 - 5 years)',
-  },
-  {
-    checked: false,
-    label: 'Senior (5+ years)',
-    value: 'Senior (5+ years)',
-  },
-];
-
-export const LOCATION = [
-  { checked: false, label: 'Singapore', value: 'Singapore' },
-  { checked: false, label: 'United States', value: 'United States' },
-  { checked: false, label: 'India', value: 'India' },
-];
-
-export const TEST_RESUMES = [
-  {
-    createdAt: new Date(),
-    experience: 'Fresh Grad (0-1 years)',
-    numComments: 9,
-    numStars: 1,
-    role: 'Backend Engineer',
-    title: 'Rejected from multiple companies, please help...:(',
-    user: 'Git Ji Ra',
-  },
-  {
-    createdAt: new Date(),
-    experience: 'Fresh Grad (0-1 years)',
-    numComments: 9,
-    numStars: 1,
-    role: 'Backend Engineer',
-    title: 'Rejected from multiple companies, please help...:(',
-    user: 'Git Ji Ra',
-  },
-  {
-    createdAt: new Date(),
-    experience: 'Fresh Grad (0-1 years)',
-    numComments: 9,
-    numStars: 1,
-    role: 'Backend Engineer',
-    title: 'Rejected from multiple companies, please help...:(',
-    user: 'Git Ji Ra',
-  },
-];
diff --git a/apps/portal/src/components/resumes/browse/resumeFilters.ts b/apps/portal/src/components/resumes/browse/resumeFilters.ts
new file mode 100644
index 00000000..ac36d456
--- /dev/null
+++ b/apps/portal/src/components/resumes/browse/resumeFilters.ts
@@ -0,0 +1,146 @@
+export type FilterId = 'experience' | 'location' | 'role';
+
+export type CustomFilter = {
+  numComments: number;
+};
+
+type RoleFilter =
+  | 'Android Engineer'
+  | 'Backend Engineer'
+  | 'DevOps Engineer'
+  | 'Frontend Engineer'
+  | 'Full-Stack Engineer'
+  | 'iOS Engineer';
+
+type ExperienceFilter =
+  | 'Entry Level (0 - 2 years)'
+  | 'Freshman'
+  | 'Junior'
+  | 'Mid Level (3 - 5 years)'
+  | 'Senior Level (5+ years)'
+  | 'Senior'
+  | 'Sophomore';
+
+type LocationFilter = 'India' | 'Singapore' | 'United States';
+
+export type FilterValue = ExperienceFilter | LocationFilter | RoleFilter;
+
+export type FilterOption<T> = {
+  label: string;
+  value: T;
+};
+
+export type Filter = {
+  id: FilterId;
+  label: string;
+  options: Array<FilterOption<FilterValue>>;
+};
+
+export type FilterState = Partial<CustomFilter> &
+  Record<FilterId, Array<FilterValue>>;
+
+export type SortOrder = 'latest' | 'popular' | 'topComments';
+
+type SortOption = {
+  name: string;
+  value: SortOrder;
+};
+
+export type Shortcut = {
+  customFilters?: CustomFilter;
+  filters: FilterState;
+  name: string;
+  sortOrder: SortOrder;
+};
+
+export const BROWSE_TABS_VALUES = {
+  ALL: 'all',
+  MY: 'my',
+  STARRED: 'starred',
+};
+
+export const SORT_OPTIONS: Array<SortOption> = [
+  { name: 'Latest', value: 'latest' },
+  { name: 'Popular', value: 'popular' },
+  { name: 'Top Comments', value: 'topComments' },
+];
+
+export const ROLE: Array<FilterOption<RoleFilter>> = [
+  {
+    label: 'Full-Stack Engineer',
+    value: 'Full-Stack Engineer',
+  },
+  { label: 'Frontend Engineer', value: 'Frontend Engineer' },
+  { label: 'Backend Engineer', value: 'Backend Engineer' },
+  { label: 'DevOps Engineer', value: 'DevOps Engineer' },
+  { label: 'iOS Engineer', value: 'iOS Engineer' },
+  { label: 'Android Engineer', value: 'Android Engineer' },
+];
+
+export const EXPERIENCE: Array<FilterOption<ExperienceFilter>> = [
+  { label: 'Freshman', value: 'Freshman' },
+  { label: 'Sophomore', value: 'Sophomore' },
+  { label: 'Junior', value: 'Junior' },
+  { label: 'Senior', value: 'Senior' },
+  {
+    label: 'Entry Level (0 - 2 years)',
+    value: 'Entry Level (0 - 2 years)',
+  },
+  {
+    label: 'Mid Level (3 - 5 years)',
+    value: 'Mid Level (3 - 5 years)',
+  },
+  {
+    label: 'Senior Level (5+ years)',
+    value: 'Senior Level (5+ years)',
+  },
+];
+
+export const LOCATION: Array<FilterOption<LocationFilter>> = [
+  { label: 'Singapore', value: 'Singapore' },
+  { label: 'United States', value: 'United States' },
+  { label: 'India', value: 'India' },
+];
+
+export const INITIAL_FILTER_STATE: FilterState = {
+  experience: Object.values(EXPERIENCE).map(({ value }) => value),
+  location: Object.values(LOCATION).map(({ value }) => value),
+  role: Object.values(ROLE).map(({ value }) => value),
+};
+
+export const SHORTCUTS: Array<Shortcut> = [
+  {
+    filters: INITIAL_FILTER_STATE,
+    name: 'All',
+    sortOrder: 'latest',
+  },
+  {
+    filters: {
+      ...INITIAL_FILTER_STATE,
+      numComments: 0,
+    },
+    name: 'Unreviewed',
+    sortOrder: 'latest',
+  },
+  {
+    filters: {
+      ...INITIAL_FILTER_STATE,
+      experience: ['Entry Level (0 - 2 years)'],
+    },
+    name: 'Fresh Grad',
+    sortOrder: 'latest',
+  },
+  {
+    filters: INITIAL_FILTER_STATE,
+    name: 'GOATs',
+    sortOrder: 'popular',
+  },
+  {
+    filters: {
+      ...INITIAL_FILTER_STATE,
+      location: ['United States'],
+    },
+    name: 'US Only',
+    sortOrder: 'latest',
+  },
+];
diff --git a/apps/portal/src/components/resumes/comments/CommentListItems.tsx b/apps/portal/src/components/resumes/comments/CommentListItems.tsx
deleted file mode 100644
index f043b78c..00000000
--- a/apps/portal/src/components/resumes/comments/CommentListItems.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useSession } from 'next-auth/react';
-import { Spinner } from '@tih/ui';
-
-import Comment from './comment/Comment';
-
-import type { ResumeComment } from '~/types/resume-comments';
-
-type Props = Readonly<{
-  comments: Array<ResumeComment>;
-  isLoading: boolean;
-}>;
-
-export default function CommentListItems({ comments, isLoading }: Props) {
-  const { data: session } = useSession();
-
-  if (isLoading) {
-    return (
-      <div className="col-span-10 pt-4">
-        <Spinner display="block" size="lg" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-3 overflow-y-scroll">
-      {comments.map((comment) => (
-        <Comment
-          key={comment.id}
-          comment={comment}
-          userId={session?.user?.id}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/resumes/comments/CommentsList.tsx b/apps/portal/src/components/resumes/comments/CommentsList.tsx
deleted file mode 100644
index e3d9f532..00000000
--- a/apps/portal/src/components/resumes/comments/CommentsList.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useSession } from 'next-auth/react';
-import { useState } from 'react';
-import { Tabs } from '@tih/ui';
-import { Button } from '@tih/ui';
-
-import { trpc } from '~/utils/trpc';
-
-import CommentListItems from './CommentListItems';
-import { COMMENTS_SECTIONS } from './constants';
-import SignInButton from '../SignInButton';
-
-type CommentsListProps = Readonly<{
-  resumeId: string;
-  setShowCommentsForm: (show: boolean) => void;
-}>;
-
-export default function CommentsList({
-  resumeId,
-  setShowCommentsForm,
-}: CommentsListProps) {
-  const { data: sessionData } = useSession();
-  const [tab, setTab] = useState(COMMENTS_SECTIONS[0].value);
-
-  const commentsQuery = trpc.useQuery(['resumes.reviews.list', { resumeId }]);
-  const renderButton = () => {
-    if (sessionData === null) {
-      return <SignInButton text="to join discussion" />;
-    }
-    return (
-      <Button
-        display="block"
-        label="Add your review"
-        variant="tertiary"
-        onClick={() => setShowCommentsForm(true)}
-      />
-    );
-  };
-
-  return (
-    <div className="space-y-3">
-      {renderButton()}
-      <Tabs
-        label="comments"
-        tabs={COMMENTS_SECTIONS}
-        value={tab}
-        onChange={(value) => setTab(value)}
-      />
-      <CommentListItems
-        comments={commentsQuery.data?.filter((c) => c.section === tab) ?? []}
-        isLoading={commentsQuery.isFetching}
-      />
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
new file mode 100644
index 00000000..fee44c97
--- /dev/null
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -0,0 +1,253 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import {
+  ArrowDownCircleIcon,
+  ArrowUpCircleIcon,
+} from '@heroicons/react/20/solid';
+import { FaceSmileIcon } from '@heroicons/react/24/outline';
+import { Vote } from '@prisma/client';
+import { Button, TextArea } from '@tih/ui';
+
+import { trpc } from '~/utils/trpc';
+
+import ResumeExpandableText from '../shared/ResumeExpandableText';
+
+import type { ResumeComment } from '~/types/resume-comments';
+
+type ResumeCommentListItemProps = {
+  comment: ResumeComment;
+  userId: string | undefined;
+};
+
+type ICommentInput = {
+  description: string;
+};
+
+export default function ResumeCommentListItem({
+  comment,
+  userId,
+}: ResumeCommentListItemProps) {
+  const isCommentOwner = userId === comment.user.userId;
+  const [isEditingComment, setIsEditingComment] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors, isDirty },
+    reset,
+  } = useForm<ICommentInput>({
+    defaultValues: {
+      description: comment.description,
+    },
+  });
+
+  const trpcContext = trpc.useContext();
+  const commentUpdateMutation = trpc.useMutation(
+    'resumes.comments.user.update',
+    {
+      onSuccess: () => {
+        // Comment updated, invalidate query to trigger refetch
+        trpcContext.invalidateQueries(['resumes.comments.list']);
+      },
+    },
+  );
+
+  // COMMENT VOTES
+  const commentVotesQuery = trpc.useQuery([
+    'resumes.comments.votes.list',
+    { commentId: comment.id },
+  ]);
+  const commentVotesUpsertMutation = trpc.useMutation(
+    'resumes.comments.votes.user.upsert',
+    {
+      onSuccess: () => {
+        // Comment updated, invalidate query to trigger refetch
+        trpcContext.invalidateQueries(['resumes.comments.votes.list']);
+      },
+    },
+  );
+  const commentVotesDeleteMutation = trpc.useMutation(
+    'resumes.comments.votes.user.delete',
+    {
+      onSuccess: () => {
+        // Comment updated, invalidate query to trigger refetch
+        trpcContext.invalidateQueries(['resumes.comments.votes.list']);
+      },
+    },
+  );
+
+  // FORM ACTIONS
+  const onCancel = () => {
+    reset({ description: comment.description });
+    setIsEditingComment(false);
+  };
+
+  const onSubmit: SubmitHandler<ICommentInput> = async (data) => {
+    const { id } = comment;
+    return commentUpdateMutation.mutate(
+      {
+        id,
+        ...data,
+      },
+      {
+        onSuccess: () => {
+          setIsEditingComment(false);
+        },
+      },
+    );
+  };
+
+  const setFormValue = (value: string) => {
+    setValue('description', value.trim(), { shouldDirty: true });
+  };
+
+  const onVote = async (value: Vote) => {
+    if (commentVotesQuery.data?.userVote?.value === value) {
+      return commentVotesDeleteMutation.mutate({
+        commentId: comment.id,
+      });
+    }
+    return commentVotesUpsertMutation.mutate({
+      commentId: comment.id,
+      value,
+    });
+  };
+
+  return (
+    <div className="border-primary-300 w-11/12 min-w-fit rounded-md border-2 bg-white p-2 drop-shadow-md">
+      <div className="flex flex-row space-x-2 p-1 align-top">
+        {comment.user.image ? (
+          <img
+            alt={comment.user.name ?? 'Reviewer'}
+            className="mt-1 h-8 w-8 rounded-full"
+            src={comment.user.image!}
+          />
+        ) : (
+          <FaceSmileIcon className="h-8 w-8 rounded-full" />
+        )}
+
+        <div className="flex w-full flex-col space-y-1">
+          {/* Name and creation time */}
+          <div className="flex flex-row justify-between">
+            <div className="flex flex-row items-center space-x-1">
+              <div className="font-medium">
+                {comment.user.name ?? 'Reviewer ABC'}
+              </div>
+
+              <div className="text-primary-800 text-xs font-medium">
+                {isCommentOwner ? '(Me)' : ''}
+              </div>
+            </div>
+
+            <div className="px-2 text-xs text-gray-600">
+              {comment.createdAt.toLocaleString('en-US', {
+                dateStyle: 'medium',
+                timeStyle: 'short',
+              })}
+            </div>
+          </div>
+
+          {/* Description */}
+          {isEditingComment ? (
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <div className="flex-column mt-1 space-y-2">
+                <TextArea
+                  {...(register('description', {
+                    required: 'Comments cannot be empty!',
+                  }),
+                  {})}
+                  defaultValue={comment.description}
+                  disabled={commentUpdateMutation.isLoading}
+                  errorMessage={errors.description?.message}
+                  label=""
+                  placeholder="Leave your comment here"
+                  onChange={setFormValue}
+                />
+
+                <div className="flex-row space-x-2">
+                  <Button
+                    disabled={commentUpdateMutation.isLoading}
+                    label="Cancel"
+                    size="sm"
+                    variant="tertiary"
+                    onClick={onCancel}
+                  />
+
+                  <Button
+                    disabled={!isDirty || commentUpdateMutation.isLoading}
+                    isLoading={commentUpdateMutation.isLoading}
+                    label="Confirm"
+                    size="sm"
+                    type="submit"
+                    variant="primary"
+                  />
+                </div>
+              </div>
+            </form>
+          ) : (
+            <ResumeExpandableText text={comment.description} />
+          )}
+
+          {/* Upvote and edit */}
+          <div className="flex flex-row space-x-1 pt-1 align-middle">
+            <button
+              disabled={
+                !userId ||
+                commentVotesQuery.isLoading ||
+                commentVotesUpsertMutation.isLoading ||
+                commentVotesDeleteMutation.isLoading
+              }
+              type="button"
+              onClick={() => onVote(Vote.UPVOTE)}>
+              <ArrowUpCircleIcon
+                className={clsx(
+                  'h-4 w-4',
+                  commentVotesQuery.data?.userVote?.value === Vote.UPVOTE
+                    ? 'fill-indigo-500'
+                    : 'fill-gray-400',
+                  userId && 'hover:fill-indigo-500',
+                )}
+              />
+            </button>
+
+            <div className="text-xs">
+              {commentVotesQuery.data?.numVotes ?? 0}
+            </div>
+
+            <button
+              disabled={
+                !userId ||
+                commentVotesQuery.isLoading ||
+                commentVotesUpsertMutation.isLoading ||
+                commentVotesDeleteMutation.isLoading
+              }
+              type="button"
+              onClick={() => onVote(Vote.DOWNVOTE)}>
+              <ArrowDownCircleIcon
+                className={clsx(
+                  'h-4 w-4',
+                  commentVotesQuery.data?.userVote?.value === Vote.DOWNVOTE
+                    ? 'fill-red-500'
+                    : 'fill-gray-400',
+                  userId && 'hover:fill-red-500',
+                )}
+              />
+            </button>
+
+            {isCommentOwner && !isEditingComment && (
+              <button
+                className="text-primary-800 hover:text-primary-400 px-1 text-xs"
+                type="button"
+                onClick={() => setIsEditingComment(true)}>
+                Edit
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/resumes/comments/CommentsForm.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
similarity index 80%
rename from apps/portal/src/components/resumes/comments/CommentsForm.tsx
rename to apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
index 7cc0dde2..31bade2f 100644
--- a/apps/portal/src/components/resumes/comments/CommentsForm.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
@@ -5,7 +5,7 @@ import { Button, Dialog, TextArea } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-type CommentsFormProps = Readonly<{
+type ResumeCommentsFormProps = Readonly<{
   resumeId: string;
   setShowCommentsForm: (show: boolean) => void;
 }>;
@@ -20,10 +20,10 @@ type IFormInput = {
 
 type InputKeys = keyof IFormInput;
 
-export default function CommentsForm({
+export default function ResumeCommentsForm({
   resumeId,
   setShowCommentsForm,
-}: CommentsFormProps) {
+}: ResumeCommentsFormProps) {
   const [showDialog, setShowDialog] = useState(false);
   const {
     register,
@@ -41,16 +41,19 @@ export default function CommentsForm({
   });
 
   const trpcContext = trpc.useContext();
-  const reviewCreateMutation = trpc.useMutation('resumes.reviews.user.create', {
-    onSuccess: () => {
-      // New review added, invalidate query to trigger refetch
-      trpcContext.invalidateQueries(['resumes.reviews.list']);
+  const commentCreateMutation = trpc.useMutation(
+    'resumes.comments.user.create',
+    {
+      onSuccess: () => {
+        // New Comment added, invalidate query to trigger refetch
+        trpcContext.invalidateQueries(['resumes.comments.list']);
+      },
     },
-  });
+  );
 
   // TODO: Give a feedback to the user if the action succeeds/fails
   const onSubmit: SubmitHandler<IFormInput> = async (data) => {
-    return await reviewCreateMutation.mutate(
+    return await commentCreateMutation.mutate(
       {
         resumeId,
         ...data,
@@ -77,7 +80,7 @@ export default function CommentsForm({
   };
 
   return (
-    <div className="h-[calc(100vh-13rem)] overflow-y-scroll">
+    <div className="h-[calc(100vh-13rem)] overflow-y-auto">
       <h2 className="text-xl font-semibold text-gray-800">Add your review</h2>
       <p className="text-gray-800">
         Please fill in at least one section to submit your review
@@ -89,7 +92,7 @@ export default function CommentsForm({
         <div className="mt-4 space-y-4">
           <TextArea
             {...(register('general'), {})}
-            disabled={reviewCreateMutation.isLoading}
+            disabled={commentCreateMutation.isLoading}
             label="General"
             placeholder="General comments about the resume"
             onChange={(value) => onValueChange('general', value)}
@@ -97,7 +100,7 @@ export default function CommentsForm({
 
           <TextArea
             {...(register('education'), {})}
-            disabled={reviewCreateMutation.isLoading}
+            disabled={commentCreateMutation.isLoading}
             label="Education"
             placeholder="Comments about the Education section"
             onChange={(value) => onValueChange('education', value)}
@@ -105,7 +108,7 @@ export default function CommentsForm({
 
           <TextArea
             {...(register('experience'), {})}
-            disabled={reviewCreateMutation.isLoading}
+            disabled={commentCreateMutation.isLoading}
             label="Experience"
             placeholder="Comments about the Experience section"
             onChange={(value) => onValueChange('experience', value)}
@@ -113,7 +116,7 @@ export default function CommentsForm({
 
           <TextArea
             {...(register('projects'), {})}
-            disabled={reviewCreateMutation.isLoading}
+            disabled={commentCreateMutation.isLoading}
             label="Projects"
             placeholder="Comments about the Projects section"
             onChange={(value) => onValueChange('projects', value)}
@@ -121,7 +124,7 @@ export default function CommentsForm({
 
           <TextArea
             {...(register('skills'), {})}
-            disabled={reviewCreateMutation.isLoading}
+            disabled={commentCreateMutation.isLoading}
             label="Skills"
             placeholder="Comments about the Skills section"
             onChange={(value) => onValueChange('skills', value)}
@@ -130,7 +133,7 @@ export default function CommentsForm({
 
         <div className="flex justify-end space-x-2 pt-4">
           <Button
-            disabled={reviewCreateMutation.isLoading}
+            disabled={commentCreateMutation.isLoading}
             label="Cancel"
             type="button"
             variant="tertiary"
@@ -138,8 +141,8 @@ export default function CommentsForm({
           />
 
           <Button
-            disabled={!isDirty || reviewCreateMutation.isLoading}
-            isLoading={reviewCreateMutation.isLoading}
+            disabled={!isDirty || commentCreateMutation.isLoading}
+            isLoading={commentCreateMutation.isLoading}
             label="Submit"
             type="submit"
             variant="primary"
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
new file mode 100644
index 00000000..12e564a9
--- /dev/null
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -0,0 +1,113 @@
+import { useSession } from 'next-auth/react';
+import {
+  BookOpenIcon,
+  BriefcaseIcon,
+  CodeBracketSquareIcon,
+  FaceSmileIcon,
+  IdentificationIcon,
+  SparklesIcon,
+} from '@heroicons/react/24/outline';
+import { ResumesSection } from '@prisma/client';
+import { Spinner } from '@tih/ui';
+import { Button } from '@tih/ui';
+
+import { trpc } from '~/utils/trpc';
+
+import { RESUME_COMMENTS_SECTIONS } from './resumeCommentConstants';
+import ResumeCommentListItem from './ResumeCommentListItem';
+import ResumeSignInButton from '../shared/ResumeSignInButton';
+
+import type { ResumeComment } from '~/types/resume-comments';
+
+type ResumeCommentsListProps = Readonly<{
+  resumeId: string;
+  setShowCommentsForm: (show: boolean) => void;
+}>;
+
+export default function ResumeCommentsList({
+  resumeId,
+  setShowCommentsForm,
+}: ResumeCommentsListProps) {
+  const { data: sessionData } = useSession();
+
+  const commentsQuery = trpc.useQuery(['resumes.comments.list', { resumeId }]);
+
+  const renderIcon = (section: ResumesSection) => {
+    const className = 'h-8 w-8';
+    switch (section) {
+      case ResumesSection.GENERAL:
+        return <IdentificationIcon className={className} />;
+      case ResumesSection.EDUCATION:
+        return <BookOpenIcon className={className} />;
+      case ResumesSection.EXPERIENCE:
+        return <BriefcaseIcon className={className} />;
+      case ResumesSection.PROJECTS:
+        return <CodeBracketSquareIcon className={className} />;
+      case ResumesSection.SKILLS:
+        return <SparklesIcon className={className} />;
+      default:
+        return <FaceSmileIcon className={className} />;
+    }
+  };
+
+  const renderButton = () => {
+    if (sessionData === null) {
+      return <ResumeSignInButton text="to join discussion" />;
+    }
+    return (
+      <Button
+        display="block"
+        label="Add your review"
+        variant="tertiary"
+        onClick={() => setShowCommentsForm(true)}
+      />
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      {renderButton()}
+
+      {commentsQuery.isFetching ? (
+        <div className="col-span-10 pt-4">
+          <Spinner display="block" size="lg" />
+        </div>
+      ) : (
+        <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-4 overflow-y-auto">
+          {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
+            const comments = commentsQuery.data
+              ? commentsQuery.data.filter((comment: ResumeComment) => {
+                  return (comment.section as string) === value;
+                })
+              : [];
+            const commentCount = comments.length;
+
+            return (
+              <div key={value} className="mb-4 space-y-3">
+                <div className="flex flex-row items-center space-x-2 text-indigo-800">
+                  {renderIcon(value)}
+
+                  <div className="w-fit text-xl font-medium">{label}</div>
+                </div>
+
+                {commentCount > 0 ? (
+                  comments.map((comment) => {
+                    return (
+                      <ResumeCommentListItem
+                        key={comment.id}
+                        comment={comment}
+                        userId={sessionData?.user?.id}
+                      />
+                    );
+                  })
+                ) : (
+                  <div>There are no comments for this section yet!</div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/resumes/comments/CommentsSection.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
similarity index 72%
rename from apps/portal/src/components/resumes/comments/CommentsSection.tsx
rename to apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
index 6df9c4cf..38671be6 100644
--- a/apps/portal/src/components/resumes/comments/CommentsSection.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
@@ -1,13 +1,15 @@
 import { useState } from 'react';
 
-import CommentsForm from './CommentsForm';
-import CommentsList from './CommentsList';
+import ResumeCommentsForm from './ResumeCommentsForm';
+import ResumeCommentsList from './ResumeCommentsList';
 
-type ICommentsSectionProps = {
+type CommentsSectionProps = {
   resumeId: string;
 };
 
-export default function CommentsSection({ resumeId }: ICommentsSectionProps) {
+export default function ResumeCommentsSection({
+  resumeId,
+}: CommentsSectionProps) {
   const [showCommentsForm, setShowCommentsForm] = useState(false);
 
   return (
@@ -18,17 +20,17 @@ export default function CommentsSection({ resumeId }: ICommentsSectionProps) {
         </div>
         <div className="relative flex justify-center">
           <span className="bg-gray-50 px-3 text-lg font-medium text-gray-900">
-            Comments
+            Reviews
           </span>
         </div>
       </div>
       {showCommentsForm ? (
-        <CommentsForm
+        <ResumeCommentsForm
           resumeId={resumeId}
           setShowCommentsForm={setShowCommentsForm}
         />
       ) : (
-        <CommentsList
+        <ResumeCommentsList
           resumeId={resumeId}
           setShowCommentsForm={setShowCommentsForm}
         />
diff --git a/apps/portal/src/components/resumes/comments/comment/Comment.tsx b/apps/portal/src/components/resumes/comments/comment/Comment.tsx
deleted file mode 100644
index cb08480b..00000000
--- a/apps/portal/src/components/resumes/comments/comment/Comment.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import CommentBody from './CommentBody';
-import CommentCard from './CommentCard';
-
-import type { ResumeComment } from '~/types/resume-comments';
-
-type CommentProps = {
-  comment: ResumeComment;
-  userId?: string;
-};
-
-export default function Comment({ comment, userId }: CommentProps) {
-  const isCommentOwner = userId === comment.user.userId;
-  return (
-    <CommentCard isCommentOwner={isCommentOwner}>
-      <CommentBody comment={comment} isCommentOwner={isCommentOwner} />
-    </CommentCard>
-  );
-}
diff --git a/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx b/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx
deleted file mode 100644
index 69da7418..00000000
--- a/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  ArrowDownCircleIcon,
-  ArrowUpCircleIcon,
-} from '@heroicons/react/20/solid';
-import { FaceSmileIcon } from '@heroicons/react/24/outline';
-
-import type { ResumeComment } from '~/types/resume-comments';
-
-type CommentBodyProps = {
-  comment: ResumeComment;
-  isCommentOwner?: boolean;
-};
-
-export default function CommentBody({
-  comment,
-  isCommentOwner,
-}: CommentBodyProps) {
-  return (
-    <div className="flex w-full flex-row space-x-2 p-1 align-top">
-      {comment.user.image ? (
-        <img
-          alt={comment.user.name ?? 'Reviewer'}
-          className="mt-1 h-8 w-8 rounded-full"
-          src={comment.user.image!}
-        />
-      ) : (
-        <FaceSmileIcon className="h-8 w-8 rounded-full" />
-      )}
-
-      <div className="flex w-full flex-col space-y-1">
-        {/* Name and creation time */}
-        <div className="flex flex-row justify-between">
-          <div className="font-medium">
-            {comment.user.name ?? 'Reviewer ABC'}
-          </div>
-          <div className="text-xs text-gray-600">
-            {comment.createdAt.toLocaleString('en-US', {
-              dateStyle: 'medium',
-              timeStyle: 'short',
-            })}
-          </div>
-        </div>
-
-        {/* Description */}
-        <div className="text-sm">{comment.description}</div>
-
-        {/* Upvote and edit */}
-        <div className="flex flex-row space-x-1 pt-1 align-middle">
-          {/* TODO: Implement upvote */}
-          <ArrowUpCircleIcon className="h-4 w-4 fill-gray-400" />
-          <div className="text-xs">{comment.numVotes}</div>
-          <ArrowDownCircleIcon className="h-4 w-4 fill-gray-400" />
-
-          {/* TODO: Implement edit */}
-          {isCommentOwner ? (
-            <div className="text-primary-800 hover:text-primary-400 px-1 text-xs">
-              Edit
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/resumes/comments/comment/CommentCard.tsx b/apps/portal/src/components/resumes/comments/comment/CommentCard.tsx
deleted file mode 100644
index bbe0f840..00000000
--- a/apps/portal/src/components/resumes/comments/comment/CommentCard.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { ReactNode } from 'react';
-
-type CommentCardProps = {
-  children: ReactNode;
-  isCommentOwner?: boolean;
-};
-
-export default function CommentCard({
-  isCommentOwner,
-  children,
-}: CommentCardProps) {
-  // Used two different <div> to allow customisation of owner comments
-  return isCommentOwner ? (
-    <div className="border-primary-300 float-right w-3/4 rounded-md border-2 bg-white p-2 drop-shadow-md">
-      {children}
-    </div>
-  ) : (
-    <div className="border-primary-300 float-left w-3/4 rounded-md border-2 bg-white p-2 drop-shadow-md">
-      {children}
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/resumes/comments/constants.ts b/apps/portal/src/components/resumes/comments/resumeCommentConstants.ts
similarity index 90%
rename from apps/portal/src/components/resumes/comments/constants.ts
rename to apps/portal/src/components/resumes/comments/resumeCommentConstants.ts
index d47dd181..5211468e 100644
--- a/apps/portal/src/components/resumes/comments/constants.ts
+++ b/apps/portal/src/components/resumes/comments/resumeCommentConstants.ts
@@ -1,6 +1,6 @@
 import { ResumesSection } from '@prisma/client';
 
-export const COMMENTS_SECTIONS = [
+export const RESUME_COMMENTS_SECTIONS = [
   {
     label: 'General',
     value: ResumesSection.GENERAL,
diff --git a/apps/portal/src/components/resumes/landing/CallToAction.tsx b/apps/portal/src/components/resumes/landing/CallToAction.tsx
new file mode 100644
index 00000000..623509b3
--- /dev/null
+++ b/apps/portal/src/components/resumes/landing/CallToAction.tsx
@@ -0,0 +1,28 @@
+import Link from 'next/link';
+
+import { Container } from './Container';
+
+export function CallToAction() {
+  return (
+    <section className="relative overflow-hidden py-32" id="get-started-today">
+      <Container className="relative">
+        <div className="mx-auto max-w-lg text-center">
+          <h2 className="font-display text-3xl tracking-tight text-gray-900 sm:text-4xl">
+            Resume review can start right now.
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-gray-600">
+            It's free! Take charge of your resume game by learning from the top
+            engineers in the field.
+          </p>
+          <Link href="/resumes/browse">
+            <button
+              className="mt-4 rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white"
+              type="button">
+              Start browsing now
+            </button>
+          </Link>
+        </div>
+      </Container>
+    </section>
+  );
+}
diff --git a/apps/portal/src/components/resumes/landing/Container.tsx b/apps/portal/src/components/resumes/landing/Container.tsx
new file mode 100644
index 00000000..3a975859
--- /dev/null
+++ b/apps/portal/src/components/resumes/landing/Container.tsx
@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+import type { FC } from 'react';
+
+type ContainerProps = {
+  children: Array<JSX.Element> | JSX.Element;
+  className?: string;
+};
+
+export const Container: FC<ContainerProps> = ({ className, ...props }) => {
+  return (
+    <div
+      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      {...props}
+    />
+  );
+};
diff --git a/apps/portal/src/components/resumes/landing/Hero.tsx b/apps/portal/src/components/resumes/landing/Hero.tsx
new file mode 100644
index 00000000..becdf756
--- /dev/null
+++ b/apps/portal/src/components/resumes/landing/Hero.tsx
@@ -0,0 +1,49 @@
+import Link from 'next/link';
+
+import { Container } from './Container';
+
+export function Hero() {
+  return (
+    <Container className="pb-36 pt-20 text-center lg:pt-32">
+      <h1 className="font-display mx-auto max-w-4xl text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
+        Resume review{' '}
+        <span className="relative whitespace-nowrap text-indigo-500">
+          <svg
+            aria-hidden="true"
+            className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
+            preserveAspectRatio="none"
+            viewBox="0 0 418 42">
+            <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
+          </svg>
+          <span className="relative">made simple</span>
+        </span>{' '}
+        for software engineers.
+      </h1>
+      <p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
+        Get valuable feedback from the public or checkout reviewed resumes from
+        your fellow engineers
+      </p>
+      <div className="mt-10 flex justify-center gap-x-4">
+        <Link href="/resumes/browse">
+          <button
+            className="rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white"
+            type="button">
+            Start browsing now
+          </button>
+        </Link>
+        <Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
+          <button
+            className="group inline-flex items-center justify-center py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:outline-indigo-600 focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600"
+            type="button">
+            <svg
+              aria-hidden="true"
+              className="h-3 w-3 flex-none fill-indigo-600 group-active:fill-current">
+              <path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z" />
+            </svg>
+            <span className="ml-3">Watch video</span>
+          </button>
+        </Link>
+      </div>
+    </Container>
+  );
+}
diff --git a/apps/portal/src/components/resumes/landing/Logo.tsx b/apps/portal/src/components/resumes/landing/Logo.tsx
new file mode 100644
index 00000000..5ef1b032
--- /dev/null
+++ b/apps/portal/src/components/resumes/landing/Logo.tsx
@@ -0,0 +1,34 @@
+import type { FC } from 'react';
+
+export const Logo: FC = (props) => {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 109 40" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M0 20c0 11.046 8.954 20 20 20s20-8.954 20-20S31.046 0 20 0 0 8.954 0 20Zm20 16c-7.264 0-13.321-5.163-14.704-12.02C4.97 22.358 6.343 21 8 21h24c1.657 0 3.031 1.357 2.704 2.98C33.32 30.838 27.264 36 20 36Z"
+        fill="#2563EB"
+        fillRule="evenodd"
+      />
+      <path
+        d="M55.528 26.57V15.842H52V13.97h9.108v1.872h-3.636V26.57h-1.944Z"
+        fill="#0F172A"
+      />
+      <path
+        d="M83.084 26.57v-12.6h5.346c.744 0 1.416.18 2.016.54a3.773 3.773 0 0 1 1.44 1.44c.36.612.54 1.302.54 2.07 0 .78-.18 1.482-.54 2.106a4 4 0 0 1-1.44 1.494c-.6.36-1.272.54-2.016.54h-2.646v4.41h-2.7Zm2.664-6.84h2.376c.288 0 .546-.072.774-.216.228-.156.408-.36.54-.612a1.71 1.71 0 0 0 .216-.864c0-.324-.072-.606-.216-.846a1.394 1.394 0 0 0-.54-.576 1.419 1.419 0 0 0-.774-.216h-2.376v3.33ZM106.227 26.57V13.25h2.556v13.32h-2.556Z"
+        fill="#2563EB"
+      />
+      <path
+        clipRule="evenodd"
+        d="M95.906 26.102c.636.432 1.35.648 2.142.648.444 0 .864-.066 1.26-.198a4.25 4.25 0 0 0 1.062-.558 3.78 3.78 0 0 0 .702-.668v1.244h2.574v-9.522h-2.538v1.248a3.562 3.562 0 0 0-.648-.672 3.13 3.13 0 0 0-1.026-.558 3.615 3.615 0 0 0-1.278-.216c-.828 0-1.566.216-2.214.648-.648.42-1.164 1.002-1.548 1.746-.372.732-.558 1.578-.558 2.538 0 .96.186 1.812.558 2.556.372.744.876 1.332 1.512 1.764Zm4.104-1.908c-.36.228-.78.342-1.26.342-.468 0-.882-.114-1.242-.342a2.387 2.387 0 0 1-.828-.954c-.204-.42-.306-.906-.306-1.458 0-.54.102-1.014.306-1.422.204-.408.48-.726.828-.954.36-.24.774-.36 1.242-.36.48 0 .9.12 1.26.36.36.228.636.546.828.954.204.408.306.882.306 1.422 0 .552-.102 1.038-.306 1.458a2.218 2.218 0 0 1-.828.954Z"
+        fill="#2563EB"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="m76.322 23.197 2.595 3.373h2.268l-3.662-4.787 3.338-4.663h-2.196l-2.162 3.334-2.554-3.334h-2.34l3.652 4.71-3.634 4.74h2.196l2.5-3.373ZM62.738 26.102a3.78 3.78 0 0 0 2.142.648c.456 0 .888-.072 1.296-.216.42-.144.798-.336 1.134-.576a3.418 3.418 0 0 0 .864-.835v1.447h1.872v-9.45h-1.872v1.45a3.118 3.118 0 0 0-.72-.82 3.2 3.2 0 0 0-1.062-.612 4.033 4.033 0 0 0-1.35-.216c-.828 0-1.578.21-2.25.63-.66.42-1.188 1.002-1.584 1.746-.384.732-.576 1.572-.576 2.52 0 .936.192 1.776.576 2.52.384.744.894 1.332 1.53 1.764Zm4.122-1.476c-.432.276-.93.414-1.494.414a2.682 2.682 0 0 1-1.476-.414 2.987 2.987 0 0 1-1.008-1.134c-.24-.492-.36-1.05-.36-1.674 0-.612.12-1.158.36-1.638.252-.48.588-.858 1.008-1.134a2.682 2.682 0 0 1 1.476-.414c.564 0 1.062.138 1.494.414.432.276.768.654 1.008 1.134.252.48.378 1.026.378 1.638 0 .624-.126 1.182-.378 1.674-.24.48-.576.858-1.008 1.134Z"
+        fill="#0F172A"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
diff --git a/apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx b/apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx
new file mode 100644
index 00000000..51b3c5a0
--- /dev/null
+++ b/apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx
@@ -0,0 +1,130 @@
+import clsx from 'clsx';
+import Image from 'next/future/image';
+import { useEffect, useState } from 'react';
+import { Tab } from '@headlessui/react';
+
+import { Container } from './Container';
+import screenshotExpenses from './images/screenshots/expenses.png';
+import screenshotPayroll from './images/screenshots/payroll.png';
+import screenshotVatReturns from './images/screenshots/vat-returns.png';
+
+const features = [
+  {
+    description:
+      'Browse the most popular reviewed resumes out there and see what you can learn',
+    image: screenshotPayroll,
+    title: 'Browse',
+  },
+  {
+    description:
+      'Upload your own resume easily to get feedback from people in industry.',
+    image: screenshotExpenses,
+    title: 'Submit',
+  },
+  {
+    description:
+      'Pass the baton forward by reviewing resumes and bounce off ideas with other engineers out there.',
+    image: screenshotVatReturns,
+    title: 'Review',
+  },
+];
+
+export function PrimaryFeatures() {
+  const [tabOrientation, setTabOrientation] = useState('horizontal');
+
+  useEffect(() => {
+    const lgMediaQuery = window.matchMedia('(min-width: 1024px)');
+
+    function onMediaQueryChange({ matches }: { matches: boolean }) {
+      setTabOrientation(matches ? 'vertical' : 'horizontal');
+    }
+
+    onMediaQueryChange(lgMediaQuery);
+    lgMediaQuery.addEventListener('change', onMediaQueryChange);
+
+    return () => {
+      lgMediaQuery.removeEventListener('change', onMediaQueryChange);
+    };
+  }, []);
+
+  return (
+    <section
+      aria-label="Features for running your books"
+      className="relative overflow-hidden bg-gradient-to-r from-indigo-400 to-indigo-700 pt-20 pb-28 sm:py-32"
+      id="features">
+      <Container className="relative">
+        <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
+          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
+            Everything you need to up your resume game.
+          </h2>
+        </div>
+        <Tab.Group
+          as="div"
+          className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
+          vertical={tabOrientation === 'vertical'}>
+          {({ selectedIndex }) => (
+            <>
+              <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
+                <Tab.List className="relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
+                  {features.map((feature, featureIndex) => (
+                    <div
+                      key={feature.title}
+                      className={clsx(
+                        'group relative rounded-full py-1 px-4 lg:rounded-r-none lg:rounded-l-xl lg:p-6',
+                        selectedIndex === featureIndex
+                          ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10'
+                          : 'hover:bg-white/10 lg:hover:bg-white/5',
+                      )}>
+                      <h3>
+                        <Tab
+                          className={clsx(
+                            'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
+                            selectedIndex === featureIndex
+                              ? 'text-blue-600 lg:text-white'
+                              : 'text-blue-100 hover:text-white lg:text-white',
+                          )}>
+                          <span className="absolute inset-0 rounded-full lg:rounded-r-none lg:rounded-l-xl" />
+                          {feature.title}
+                        </Tab>
+                      </h3>
+                      <p
+                        className={clsx(
+                          'mt-2 hidden text-sm lg:block',
+                          selectedIndex === featureIndex
+                            ? 'text-white'
+                            : 'text-blue-100 group-hover:text-white',
+                        )}>
+                        {feature.description}
+                      </p>
+                    </div>
+                  ))}
+                </Tab.List>
+              </div>
+              <Tab.Panels className="lg:col-span-7">
+                {features.map((feature) => (
+                  <Tab.Panel key={feature.title} unmount={false}>
+                    <div className="relative sm:px-6 lg:hidden">
+                      <div className="absolute -inset-x-4 top-[-6.5rem] bottom-[-4.25rem] bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
+                      <p className="relative mx-auto max-w-2xl text-base text-white sm:text-center">
+                        {feature.description}
+                      </p>
+                    </div>
+                    <div className="mt-10 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
+                      <Image
+                        alt=""
+                        className="w-full"
+                        priority={true}
+                        sizes="(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"
+                        src={feature.image}
+                      />
+                    </div>
+                  </Tab.Panel>
+                ))}
+              </Tab.Panels>
+            </>
+          )}
+        </Tab.Group>
+      </Container>
+    </section>
+  );
+}
diff --git a/apps/portal/src/components/resumes/landing/Testimonials.tsx b/apps/portal/src/components/resumes/landing/Testimonials.tsx
new file mode 100644
index 00000000..f7db5f1e
--- /dev/null
+++ b/apps/portal/src/components/resumes/landing/Testimonials.tsx
@@ -0,0 +1,154 @@
+import Image from 'next/future/image';
+
+import { Container } from './Container';
+import avatarImage1 from './images/avatars/avatar-1.png';
+import avatarImage2 from './images/avatars/avatar-2.png';
+import avatarImage3 from './images/avatars/avatar-3.png';
+import avatarImage4 from './images/avatars/avatar-4.png';
+import avatarImage5 from './images/avatars/avatar-5.png';
+
+type QuoteProps = {
+  className: string;
+};
+
+const testimonials = [
+  {
+    columns: [
+      {
+        author: {
+          image: avatarImage1,
+          name: 'Sheryl Berge',
+          role: 'CEO at Lynch LLC',
+        },
+        content:
+          'TaxPal is so easy to use I can’t help but wonder if it’s really doing the things the government expects me to do.',
+      },
+      {
+        author: {
+          image: avatarImage4,
+          name: 'Amy Hahn',
+          role: 'Director at Velocity Industries',
+        },
+        content:
+          'I’m trying to get a hold of someone in support, I’m in a lot of trouble right now and they are saying it has something to do with my books. Please get back to me right away.',
+      },
+    ],
+    name: 'column-one',
+  },
+  {
+    columns: [
+      {
+        author: {
+          image: avatarImage5,
+          name: 'Leland Kiehn',
+          role: 'Founder of Kiehn and Sons',
+        },
+        content:
+          'The best part about TaxPal is every time I pay my employees, my bank balance doesn’t go down like it used to. Looking forward to spending this extra cash when I figure out why my card is being declined.',
+      },
+      {
+        author: {
+          image: avatarImage2,
+          name: 'Erin Powlowski',
+          role: 'COO at Armstrong Inc',
+        },
+        content:
+          'There are so many things I had to do with my old software that I just don’t do at all with TaxPal. Suspicious but I can’t say I don’t love it.',
+      },
+    ],
+    name: 'column-two',
+  },
+  {
+    columns: [
+      {
+        author: {
+          image: avatarImage3,
+          name: 'Peter Renolds',
+          role: 'Founder of West Inc',
+        },
+        content:
+          'I used to have to remit tax to the EU and with TaxPal I somehow don’t have to do that anymore. Nervous to travel there now though.',
+      },
+      {
+        author: {
+          image: avatarImage4,
+          name: 'Amy Hahn',
+          role: 'Director at Velocity Industries',
+        },
+        content:
+          'This is the fourth email I’ve sent to your support team. I am literally being held in jail for tax fraud. Please answer your damn emails, this is important.',
+      },
+    ],
+    name: 'column-three',
+  },
+];
+
+function QuoteIcon(props: QuoteProps) {
+  return (
+    <svg aria-hidden="true" height={78} width={105} {...props}>
+      <path d="M25.086 77.292c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622C1.054 58.534 0 53.411 0 47.686c0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C28.325 3.917 33.599 1.507 39.324 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Zm54.24 0c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622-2.11-4.52-3.164-9.643-3.164-15.368 0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C82.565 3.917 87.839 1.507 93.564 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Z" />
+    </svg>
+  );
+}
+
+export function Testimonials() {
+  return (
+    <section
+      aria-label="What our customers are saying"
+      className="bg-gradient-to-r from-indigo-700 to-indigo-400 py-20 sm:py-32"
+      id="testimonials">
+      <Container>
+        <div className="mx-auto max-w-2xl md:text-center">
+          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+            Loved by software engineers worldwide.
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-white">
+            We crowdsource ideas and feedback from across the world,
+            guaranteeing you for success in your job application.
+          </p>
+        </div>
+        <ul
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
+          role="list">
+          {testimonials.map(({ name, columns }) => (
+            <li key={name}>
+              <ul className="flex flex-col gap-y-6 sm:gap-y-8" role="list">
+                {columns.map((testimonial) => (
+                  <li key={testimonial.author.name}>
+                    <figure className="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10">
+                      <QuoteIcon className="absolute top-6 left-6 fill-slate-100" />
+                      <blockquote className="relative">
+                        <p className="text-lg tracking-tight text-slate-900">
+                          {testimonial.content}
+                        </p>
+                      </blockquote>
+                      <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
+                        <div>
+                          <div className="font-display text-base text-slate-900">
+                            {testimonial.author.name}
+                          </div>
+                          <div className="mt-1 text-sm text-slate-500">
+                            {testimonial.author.role}
+                          </div>
+                        </div>
+                        <div className="overflow-hidden rounded-full bg-slate-50">
+                          <Image
+                            alt=""
+                            className="h-14 w-14 object-cover"
+                            height={56}
+                            src={testimonial.author.image}
+                            width={56}
+                          />
+                        </div>
+                      </figcaption>
+                    </figure>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </section>
+  );
+}
diff --git a/apps/portal/src/components/resumes/landing/images/avatars/avatar-1.png b/apps/portal/src/components/resumes/landing/images/avatars/avatar-1.png
new file mode 100644
index 00000000..1df25e6b
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/avatars/avatar-1.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/avatars/avatar-2.png b/apps/portal/src/components/resumes/landing/images/avatars/avatar-2.png
new file mode 100644
index 00000000..85456e71
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/avatars/avatar-2.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/avatars/avatar-3.png b/apps/portal/src/components/resumes/landing/images/avatars/avatar-3.png
new file mode 100644
index 00000000..44aaa9f9
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/avatars/avatar-3.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/avatars/avatar-4.png b/apps/portal/src/components/resumes/landing/images/avatars/avatar-4.png
new file mode 100644
index 00000000..dd9a5d2e
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/avatars/avatar-4.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/avatars/avatar-5.png b/apps/portal/src/components/resumes/landing/images/avatars/avatar-5.png
new file mode 100644
index 00000000..91cd8a37
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/avatars/avatar-5.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/screenshots/contacts.png b/apps/portal/src/components/resumes/landing/images/screenshots/contacts.png
new file mode 100644
index 00000000..5901470b
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/screenshots/contacts.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/screenshots/expenses.png b/apps/portal/src/components/resumes/landing/images/screenshots/expenses.png
new file mode 100644
index 00000000..ca35472e
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/screenshots/expenses.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/screenshots/inventory.png b/apps/portal/src/components/resumes/landing/images/screenshots/inventory.png
new file mode 100644
index 00000000..b98721c6
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/screenshots/inventory.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/screenshots/payroll.png b/apps/portal/src/components/resumes/landing/images/screenshots/payroll.png
new file mode 100644
index 00000000..16f5b5a7
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/screenshots/payroll.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/screenshots/profit-loss.png b/apps/portal/src/components/resumes/landing/images/screenshots/profit-loss.png
new file mode 100644
index 00000000..229df78a
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/screenshots/profit-loss.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/screenshots/reporting.png b/apps/portal/src/components/resumes/landing/images/screenshots/reporting.png
new file mode 100644
index 00000000..72b5e8e9
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/screenshots/reporting.png differ
diff --git a/apps/portal/src/components/resumes/landing/images/screenshots/vat-returns.png b/apps/portal/src/components/resumes/landing/images/screenshots/vat-returns.png
new file mode 100644
index 00000000..3dd043bd
Binary files /dev/null and b/apps/portal/src/components/resumes/landing/images/screenshots/vat-returns.png differ
diff --git a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
new file mode 100644
index 00000000..5c78591b
--- /dev/null
+++ b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+
+type ResumeExpandableTextProps = Readonly<{
+  text: string;
+}>;
+
+export default function ResumeExpandableText({
+  text,
+}: ResumeExpandableTextProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [descriptionOverflow, setDescriptionOverflow] = useState(false);
+
+  useEffect(() => {
+    const lines = text.split(/\r\n|\r|\n/);
+    if (lines.length > 3) {
+      setDescriptionOverflow(true);
+    } else {
+      setDescriptionOverflow(false);
+    }
+  }, [text]);
+
+  const onSeeActionClicked = () => {
+    setIsExpanded((prevExpanded) => !prevExpanded);
+  };
+
+  return (
+    <div>
+      <span
+        className={clsx(
+          'line-clamp-3 whitespace-pre-wrap text-sm',
+          isExpanded ? 'line-clamp-none' : '',
+        )}>
+        {text}
+      </span>
+      {descriptionOverflow && (
+        <p
+          className="mt-1 cursor-pointer text-xs text-indigo-500 hover:text-indigo-300"
+          onClick={onSeeActionClicked}>
+          {isExpanded ? 'See Less' : 'See More'}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/resumes/SignInButton.tsx b/apps/portal/src/components/resumes/shared/ResumeSignInButton.tsx
similarity index 87%
rename from apps/portal/src/components/resumes/SignInButton.tsx
rename to apps/portal/src/components/resumes/shared/ResumeSignInButton.tsx
index 8718e588..51d55067 100644
--- a/apps/portal/src/components/resumes/SignInButton.tsx
+++ b/apps/portal/src/components/resumes/shared/ResumeSignInButton.tsx
@@ -4,7 +4,7 @@ type Props = Readonly<{
   text: string;
 }>;
 
-export default function SignInButton({ text }: Props) {
+export default function ResumeSignInButton({ text }: Props) {
   return (
     <div className="flex justify-center pt-4">
       <p>
diff --git a/apps/portal/src/components/resumes/submit-form/SubmissionGuidelines.tsx b/apps/portal/src/components/resumes/submit-form/SubmissionGuidelines.tsx
new file mode 100644
index 00000000..9220adb7
--- /dev/null
+++ b/apps/portal/src/components/resumes/submit-form/SubmissionGuidelines.tsx
@@ -0,0 +1,30 @@
+export default function SubmissionGuidelines() {
+  return (
+    <div className="mb-4 text-left text-sm text-slate-700">
+      <h2 className="mb-2 text-xl font-medium">Submission Guidelines</h2>
+      <p>
+        Before you submit, please review and acknolwedge our
+        <span className="font-bold"> submission guidelines </span>
+        stated below.
+      </p>
+      <p>
+        <span className="text-lg font-bold">• </span>
+        Ensure that you do not divulge any of your
+        <span className="font-bold"> personal particulars</span>.
+      </p>
+      <p>
+        <span className="text-lg font-bold">• </span>
+        Ensure that you do not divulge any
+        <span className="font-bold">
+          {' '}
+          company's proprietary and confidential information
+        </span>
+        .
+      </p>
+      <p>
+        <span className="text-lg font-bold">• </span>
+        Proof-read your resumes to look for grammatical/spelling errors.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/shared/CompaniesTypeahead.tsx b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
index b25f9cd8..2eacc357 100644
--- a/apps/portal/src/components/shared/CompaniesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
@@ -6,10 +6,17 @@ import { trpc } from '~/utils/trpc';
 
 type Props = Readonly<{
   disabled?: boolean;
+  isLabelHidden?: boolean;
   onSelect: (option: TypeaheadOption) => void;
+  placeHolder?: string;
 }>;
 
-export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
+export default function CompaniesTypeahead({
+  disabled,
+  onSelect,
+  isLabelHidden,
+  placeHolder,
+}: Props) {
   const [query, setQuery] = useState('');
   const companies = trpc.useQuery([
     'companies.list',
@@ -23,6 +30,7 @@ export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
   return (
     <Typeahead
       disabled={disabled}
+      isLabelHidden={isLabelHidden}
       label="Company"
       noResultsMessage="No companies found"
       nullable={true}
@@ -33,6 +41,7 @@ export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
           value: id,
         })) ?? []
       }
+      placeholder={placeHolder}
       onQueryChange={setQuery}
       onSelect={onSelect}
     />
diff --git a/apps/portal/src/components/shared/MonthYearPicker.tsx b/apps/portal/src/components/shared/MonthYearPicker.tsx
index bf000501..4b97b319 100644
--- a/apps/portal/src/components/shared/MonthYearPicker.tsx
+++ b/apps/portal/src/components/shared/MonthYearPicker.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { Select } from '@tih/ui';
 
 export type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
@@ -8,8 +9,13 @@ export type MonthYear = Readonly<{
 }>;
 
 type Props = Readonly<{
+  errorMessage?: string;
+  monthLabel?: string;
+  monthRequired?: boolean;
   onChange: (value: MonthYear) => void;
   value: MonthYear;
+  yearLabel?: string;
+  yearRequired?: boolean;
 }>;
 
 const MONTH_OPTIONS = [
@@ -72,25 +78,45 @@ const YEAR_OPTIONS = Array.from({ length: NUM_YEARS }, (_, i) => {
   };
 });
 
-export default function MonthYearPicker({ value, onChange }: Props) {
+export default function MonthYearPicker({
+  errorMessage,
+  monthLabel = 'Month',
+  value,
+  onChange,
+  yearLabel = 'Year',
+  monthRequired = false,
+  yearRequired = false,
+}: Props) {
+  const hasError = errorMessage != null;
+  const errorId = useId();
+
   return (
-    <div className="flex space-x-4">
+    <div
+      aria-describedby={hasError ? errorId : undefined}
+      className="flex items-end space-x-4">
       <Select
-        label="Month"
+        label={monthLabel}
         options={MONTH_OPTIONS}
+        required={monthRequired}
         value={value.month}
         onChange={(newMonth) =>
           onChange({ month: Number(newMonth) as Month, year: value.year })
         }
       />
       <Select
-        label="Year"
+        label={yearLabel}
         options={YEAR_OPTIONS}
+        required={yearRequired}
         value={value.year}
         onChange={(newYear) =>
           onChange({ month: value.month, year: Number(newYear) })
         }
       />
+      {errorMessage && (
+        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+          {errorMessage}
+        </p>
+      )}
     </div>
   );
 }
diff --git a/apps/portal/src/env/schema.mjs b/apps/portal/src/env/schema.mjs
index 69064437..404f12cf 100644
--- a/apps/portal/src/env/schema.mjs
+++ b/apps/portal/src/env/schema.mjs
@@ -4,6 +4,8 @@ import { z } from 'zod';
 /**
  * Specify your server-side environment variables schema here.
  * This way you can ensure the app isn't built with invalid env vars.
+ *
+ * Remember to update existing GitHub workflows that use env vars!
  */
 export const serverSchema = z.object({
   DATABASE_URL: z.string().url(),
@@ -20,13 +22,15 @@ export const serverSchema = z.object({
  * Specify your client-side environment variables schema here.
  * This way you can ensure the app isn't built with invalid env vars.
  * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
+ *
+ * Remember to update existing GitHub workflows that use env vars!
  */
 export const clientSchema = z.object({
   // NEXT_PUBLIC_BAR: z.string(),
 });
 
 /**
- * You can't destruct `process.env` as a regular object, so you have to do
+ * You can't destructure `process.env` as a regular object, so you have to do
  * it manually here. This is because Next.js evaluates this at build time,
  * and only used environment variables are included in the build.
  * @type {{ [k in keyof z.infer<typeof clientSchema>]: z.infer<typeof clientSchema>[k] | undefined }}
diff --git a/apps/portal/src/mappers/offers-mappers.ts b/apps/portal/src/mappers/offers-mappers.ts
new file mode 100644
index 00000000..1a6e415c
--- /dev/null
+++ b/apps/portal/src/mappers/offers-mappers.ts
@@ -0,0 +1,574 @@
+import type {
+  Company,
+  OffersAnalysis,
+  OffersBackground,
+  OffersCurrency,
+  OffersEducation,
+  OffersExperience,
+  OffersFullTime,
+  OffersIntern,
+  OffersOffer,
+  OffersProfile,
+  OffersReply,
+  OffersSpecificYoe,
+  User,
+} from '@prisma/client';
+import { JobType } from '@prisma/client';
+
+import type {
+  AddToProfileResponse,
+  Analysis,
+  AnalysisHighestOffer,
+  AnalysisOffer,
+  Background,
+  CreateOfferProfileResponse,
+  DashboardOffer,
+  Education,
+  Experience,
+  GetOffersResponse,
+  OffersCompany,
+  Paging,
+  Profile,
+  ProfileAnalysis,
+  ProfileOffer,
+  SpecificYoe,
+  Valuation,
+} from '~/types/offers';
+
+const analysisOfferDtoMapper = (
+  offer: OffersOffer & {
+    OffersFullTime:
+      | (OffersFullTime & { totalCompensation: OffersCurrency })
+      | null;
+    OffersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+    company: Company;
+    profile: OffersProfile & { background: OffersBackground | null };
+  },
+) => {
+  const { background, profileName } = offer.profile;
+  const analysisOfferDto: AnalysisOffer = {
+    company: offersCompanyDtoMapper(offer.company),
+    id: offer.id,
+    income: -1,
+    jobType: offer.jobType,
+    level: offer.OffersFullTime?.level ?? '',
+    location: offer.location,
+    monthYearReceived: offer.monthYearReceived,
+    negotiationStrategy: offer.negotiationStrategy,
+    previousCompanies: [],
+    profileName,
+    specialization:
+      offer.jobType === JobType.FULLTIME
+        ? offer.OffersFullTime?.specialization ?? ''
+        : offer.OffersIntern?.specialization ?? '',
+    title:
+      offer.jobType === JobType.FULLTIME
+        ? offer.OffersFullTime?.title ?? ''
+        : offer.OffersIntern?.title ?? '',
+    totalYoe: background?.totalYoe ?? -1,
+  };
+
+  if (offer.OffersFullTime?.totalCompensation) {
+    analysisOfferDto.income = offer.OffersFullTime.totalCompensation.value;
+  } else if (offer.OffersIntern?.monthlySalary) {
+    analysisOfferDto.income = offer.OffersIntern.monthlySalary.value;
+  }
+
+  return analysisOfferDto;
+};
+
+const analysisDtoMapper = (
+  noOfOffers: number,
+  percentile: number,
+  topPercentileOffers: Array<
+    OffersOffer & {
+      OffersFullTime:
+        | (OffersFullTime & { totalCompensation: OffersCurrency })
+        | null;
+      OffersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+      company: Company;
+      profile: OffersProfile & { background: OffersBackground | null };
+    }
+  >,
+) => {
+  const analysisDto: Analysis = {
+    noOfOffers,
+    percentile,
+    topPercentileOffers: topPercentileOffers.map((offer) =>
+      analysisOfferDtoMapper(offer),
+    ),
+  };
+  return analysisDto;
+};
+
+const analysisHighestOfferDtoMapper = (
+  offer: OffersOffer & {
+    OffersFullTime:
+      | (OffersFullTime & { totalCompensation: OffersCurrency })
+      | null;
+    OffersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+    company: Company;
+    profile: OffersProfile & { background: OffersBackground | null };
+  },
+) => {
+  const analysisHighestOfferDto: AnalysisHighestOffer = {
+    company: offersCompanyDtoMapper(offer.company),
+    id: offer.id,
+    level: offer.OffersFullTime?.level ?? '',
+    location: offer.location,
+    specialization:
+      offer.jobType === JobType.FULLTIME
+        ? offer.OffersFullTime?.specialization ?? ''
+        : offer.OffersIntern?.specialization ?? '',
+    totalYoe: offer.profile.background?.totalYoe ?? -1,
+  };
+  return analysisHighestOfferDto;
+};
+
+export const profileAnalysisDtoMapper = (
+  analysis:
+    | (OffersAnalysis & {
+        overallHighestOffer: OffersOffer & {
+          OffersFullTime:
+            | (OffersFullTime & { totalCompensation: OffersCurrency })
+            | null;
+          OffersIntern:
+            | (OffersIntern & { monthlySalary: OffersCurrency })
+            | null;
+          company: Company;
+          profile: OffersProfile & { background: OffersBackground | null };
+        };
+        topCompanyOffers: Array<
+          OffersOffer & {
+            OffersFullTime:
+              | (OffersFullTime & { totalCompensation: OffersCurrency })
+              | null;
+            OffersIntern:
+              | (OffersIntern & { monthlySalary: OffersCurrency })
+              | null;
+            company: Company;
+            profile: OffersProfile & {
+              background:
+                | (OffersBackground & {
+                    experiences: Array<
+                      OffersExperience & { company: Company | null }
+                    >;
+                  })
+                | null;
+            };
+          }
+        >;
+        topOverallOffers: Array<
+          OffersOffer & {
+            OffersFullTime:
+              | (OffersFullTime & { totalCompensation: OffersCurrency })
+              | null;
+            OffersIntern:
+              | (OffersIntern & { monthlySalary: OffersCurrency })
+              | null;
+            company: Company;
+            profile: OffersProfile & {
+              background:
+                | (OffersBackground & {
+                    experiences: Array<
+                      OffersExperience & { company: Company | null }
+                    >;
+                  })
+                | null;
+            };
+          }
+        >;
+      })
+    | null,
+) => {
+  if (!analysis) {
+    return null;
+  }
+
+  const profileAnalysisDto: ProfileAnalysis = {
+    companyAnalysis: [
+      analysisDtoMapper(
+        analysis.noOfSimilarCompanyOffers,
+        analysis.companyPercentile,
+        analysis.topCompanyOffers,
+      ),
+    ],
+    id: analysis.id,
+    overallAnalysis: analysisDtoMapper(
+      analysis.noOfSimilarOffers,
+      analysis.overallPercentile,
+      analysis.topOverallOffers,
+    ),
+    overallHighestOffer: analysisHighestOfferDtoMapper(
+      analysis.overallHighestOffer,
+    ),
+    profileId: analysis.profileId,
+  };
+  return profileAnalysisDto;
+};
+
+export const valuationDtoMapper = (currency: {
+  currency: string;
+  id?: string;
+  value: number;
+}) => {
+  const valuationDto: Valuation = {
+    currency: currency.currency,
+    value: currency.value,
+  };
+  return valuationDto;
+};
+
+export const offersCompanyDtoMapper = (company: Company) => {
+  const companyDto: OffersCompany = {
+    createdAt: company.createdAt,
+    description: company?.description ?? '',
+    id: company.id,
+    logoUrl: company.logoUrl ?? '',
+    name: company.name,
+    slug: company.slug,
+    updatedAt: company.updatedAt,
+  };
+  return companyDto;
+};
+
+export const educationDtoMapper = (education: {
+  backgroundId?: string;
+  endDate: Date | null;
+  field: string | null;
+  id: string;
+  school: string | null;
+  startDate: Date | null;
+  type: string | null;
+}) => {
+  const educationDto: Education = {
+    endDate: education.endDate,
+    field: education.field,
+    id: education.id,
+    school: education.school,
+    startDate: education.startDate,
+    type: education.type,
+  };
+  return educationDto;
+};
+
+export const experienceDtoMapper = (
+  experience: OffersExperience & {
+    company: Company | null;
+    monthlySalary: OffersCurrency | null;
+    totalCompensation: OffersCurrency | null;
+  },
+) => {
+  const experienceDto: Experience = {
+    company: experience.company
+      ? offersCompanyDtoMapper(experience.company)
+      : null,
+    durationInMonths: experience.durationInMonths,
+    id: experience.id,
+    jobType: experience.jobType,
+    level: experience.level,
+    monthlySalary: experience.monthlySalary
+      ? valuationDtoMapper(experience.monthlySalary)
+      : experience.monthlySalary,
+    specialization: experience.specialization,
+    title: experience.title,
+    totalCompensation: experience.totalCompensation
+      ? valuationDtoMapper(experience.totalCompensation)
+      : experience.totalCompensation,
+  };
+  return experienceDto;
+};
+
+export const specificYoeDtoMapper = (specificYoe: {
+  backgroundId?: string;
+  domain: string;
+  id: string;
+  yoe: number;
+}) => {
+  const specificYoeDto: SpecificYoe = {
+    domain: specificYoe.domain,
+    id: specificYoe.id,
+    yoe: specificYoe.yoe,
+  };
+  return specificYoeDto;
+};
+
+export const backgroundDtoMapper = (
+  background:
+    | (OffersBackground & {
+        educations: Array<OffersEducation>;
+        experiences: Array<
+          OffersExperience & {
+            company: Company | null;
+            monthlySalary: OffersCurrency | null;
+            totalCompensation: OffersCurrency | null;
+          }
+        >;
+        specificYoes: Array<OffersSpecificYoe>;
+      })
+    | null,
+) => {
+  if (!background) {
+    return null;
+  }
+
+  const educations = background.educations.map((education) =>
+    educationDtoMapper(education),
+  );
+
+  const experiences = background.experiences.map((experience) =>
+    experienceDtoMapper(experience),
+  );
+
+  const specificYoes = background.specificYoes.map((specificYoe) =>
+    specificYoeDtoMapper(specificYoe),
+  );
+
+  const backgroundDto: Background = {
+    educations,
+    experiences,
+    id: background.id,
+    specificYoes,
+    totalYoe: background.totalYoe,
+  };
+
+  return backgroundDto;
+};
+
+export const profileOfferDtoMapper = (
+  offer: OffersOffer & {
+    OffersFullTime:
+      | (OffersFullTime & {
+          baseSalary: OffersCurrency;
+          bonus: OffersCurrency;
+          stocks: OffersCurrency;
+          totalCompensation: OffersCurrency;
+        })
+      | null;
+    OffersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+    company: Company;
+  },
+) => {
+  const profileOfferDto: ProfileOffer = {
+    comments: offer.comments,
+    company: offersCompanyDtoMapper(offer.company),
+    id: offer.id,
+    jobType: offer.jobType,
+    location: offer.location,
+    monthYearReceived: offer.monthYearReceived,
+    negotiationStrategy: offer.negotiationStrategy,
+    offersFullTime: offer.OffersFullTime,
+    offersIntern: offer.OffersIntern,
+  };
+
+  if (offer.OffersFullTime) {
+    profileOfferDto.offersFullTime = {
+      baseSalary: valuationDtoMapper(offer.OffersFullTime.baseSalary),
+      bonus: valuationDtoMapper(offer.OffersFullTime.bonus),
+      id: offer.OffersFullTime.id,
+      level: offer.OffersFullTime.level,
+      specialization: offer.OffersFullTime.specialization,
+      stocks: valuationDtoMapper(offer.OffersFullTime.stocks),
+      title: offer.OffersFullTime.title,
+      totalCompensation: valuationDtoMapper(
+        offer.OffersFullTime.totalCompensation,
+      ),
+    };
+  } else if (offer.OffersIntern) {
+    profileOfferDto.offersIntern = {
+      id: offer.OffersIntern.id,
+      internshipCycle: offer.OffersIntern.internshipCycle,
+      monthlySalary: valuationDtoMapper(offer.OffersIntern.monthlySalary),
+      specialization: offer.OffersIntern.specialization,
+      startYear: offer.OffersIntern.startYear,
+      title: offer.OffersIntern.title,
+    };
+  }
+
+  return profileOfferDto;
+};
+
+export const profileDtoMapper = (
+  profile: OffersProfile & {
+    analysis:
+      | (OffersAnalysis & {
+          overallHighestOffer: OffersOffer & {
+            OffersFullTime:
+              | (OffersFullTime & { totalCompensation: OffersCurrency })
+              | null;
+            OffersIntern:
+              | (OffersIntern & { monthlySalary: OffersCurrency })
+              | null;
+            company: Company;
+            profile: OffersProfile & { background: OffersBackground | null };
+          };
+          topCompanyOffers: Array<
+            OffersOffer & {
+              OffersFullTime:
+                | (OffersFullTime & { totalCompensation: OffersCurrency })
+                | null;
+              OffersIntern:
+                | (OffersIntern & { monthlySalary: OffersCurrency })
+                | null;
+              company: Company;
+              profile: OffersProfile & {
+                background:
+                  | (OffersBackground & {
+                      experiences: Array<
+                        OffersExperience & { company: Company | null }
+                      >;
+                    })
+                  | null;
+              };
+            }
+          >;
+          topOverallOffers: Array<
+            OffersOffer & {
+              OffersFullTime:
+                | (OffersFullTime & { totalCompensation: OffersCurrency })
+                | null;
+              OffersIntern:
+                | (OffersIntern & { monthlySalary: OffersCurrency })
+                | null;
+              company: Company;
+              profile: OffersProfile & {
+                background:
+                  | (OffersBackground & {
+                      experiences: Array<
+                        OffersExperience & { company: Company | null }
+                      >;
+                    })
+                  | null;
+              };
+            }
+          >;
+        })
+      | null;
+    background:
+      | (OffersBackground & {
+          educations: Array<OffersEducation>;
+          experiences: Array<
+            OffersExperience & {
+              company: Company | null;
+              monthlySalary: OffersCurrency | null;
+              totalCompensation: OffersCurrency | null;
+            }
+          >;
+          specificYoes: Array<OffersSpecificYoe>;
+        })
+      | null;
+    discussion: Array<
+      OffersReply & {
+        replies: Array<OffersReply>;
+        replyingTo: OffersReply | null;
+        user: User | null;
+      }
+    >;
+    offers: Array<
+      OffersOffer & {
+        OffersFullTime:
+          | (OffersFullTime & {
+              baseSalary: OffersCurrency;
+              bonus: OffersCurrency;
+              stocks: OffersCurrency;
+              totalCompensation: OffersCurrency;
+            })
+          | null;
+        OffersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+        company: Company;
+      }
+    >;
+  },
+  inputToken: string | undefined,
+) => {
+  const profileDto: Profile = {
+    analysis: profileAnalysisDtoMapper(profile.analysis),
+    background: backgroundDtoMapper(profile.background),
+    editToken: null,
+    id: profile.id,
+    isEditable: false,
+    offers: profile.offers.map((offer) => profileOfferDtoMapper(offer)),
+    profileName: profile.profileName,
+  };
+
+  if (inputToken === profile.editToken) {
+    profileDto.editToken = profile.editToken;
+    profileDto.isEditable = true;
+  }
+
+  return profileDto;
+};
+
+export const createOfferProfileResponseMapper = (
+  profile: { id: string },
+  token: string,
+) => {
+  const res: CreateOfferProfileResponse = {
+    id: profile.id,
+    token,
+  };
+  return res;
+};
+
+export const addToProfileResponseMapper = (updatedProfile: {
+  id: string;
+  profileName: string;
+  userId?: string | null;
+}) => {
+  const addToProfileResponse: AddToProfileResponse = {
+    id: updatedProfile.id,
+    profileName: updatedProfile.profileName,
+    userId: updatedProfile.userId ?? '',
+  };
+
+  return addToProfileResponse;
+};
+
+export const dashboardOfferDtoMapper = (
+  offer: OffersOffer & {
+    OffersFullTime:
+      | (OffersFullTime & {
+          baseSalary: OffersCurrency;
+          bonus: OffersCurrency;
+          stocks: OffersCurrency;
+          totalCompensation: OffersCurrency;
+        })
+      | null;
+    OffersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+    company: Company;
+    profile: OffersProfile & { background: OffersBackground | null };
+  },
+) => {
+  const dashboardOfferDto: DashboardOffer = {
+    company: offersCompanyDtoMapper(offer.company),
+    id: offer.id,
+    income: valuationDtoMapper({ currency: '', value: -1 }),
+    monthYearReceived: offer.monthYearReceived,
+    profileId: offer.profileId,
+    title: offer.OffersFullTime?.title ?? '',
+    totalYoe: offer.profile.background?.totalYoe ?? -1,
+  };
+
+  if (offer.OffersFullTime) {
+    dashboardOfferDto.income = valuationDtoMapper(
+      offer.OffersFullTime.totalCompensation,
+    );
+  } else if (offer.OffersIntern) {
+    dashboardOfferDto.income = valuationDtoMapper(
+      offer.OffersIntern.monthlySalary,
+    );
+  }
+
+  return dashboardOfferDto;
+};
+
+export const getOffersResponseMapper = (
+  data: Array<DashboardOffer>,
+  paging: Paging,
+) => {
+  const getOffersResponse: GetOffersResponse = {
+    data,
+    paging,
+  };
+  return getOffersResponse;
+};
diff --git a/apps/portal/src/pages/_app.tsx b/apps/portal/src/pages/_app.tsx
index 5de4ac99..11606124 100644
--- a/apps/portal/src/pages/_app.tsx
+++ b/apps/portal/src/pages/_app.tsx
@@ -53,13 +53,18 @@ export default withTRPC<AppRouter>({
         }),
         httpBatchLink({ url }),
       ],
-      transformer: superjson,
-      url,
       /**
-       * @link https://react-query.tanstack.com/reference/QueryClient
+       * @link https://tanstack.com/query/v4/docs/reference/QueryClient
        */
-      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
-
+      queryClientConfig: {
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+          },
+        },
+      },
+      transformer: superjson,
+      url,
       // To use SSR properly you need to forward the client's headers to the server
       // headers: () => {
       //   if (ctx?.req) {
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index 27166716..eee97296 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -1,12 +1,13 @@
 import { useState } from 'react';
 import { Select } from '@tih/ui';
 
-import OffersTable from '~/components/offers/OffersTable';
 import OffersTitle from '~/components/offers/OffersTitle';
+import OffersTable from '~/components/offers/table/OffersTable';
+import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 
 export default function OffersHomePage() {
-  const [jobTitleFilter, setjobTitleFilter] = useState('Software engineers');
-  const [companyFilter, setCompanyFilter] = useState('All companies');
+  const [jobTitleFilter, setjobTitleFilter] = useState('Software Engineer');
+  const [companyFilter, setCompanyFilter] = useState('');
 
   return (
     <main className="flex-1 overflow-y-auto">
@@ -21,20 +22,20 @@ export default function OffersHomePage() {
                 label="Select a job title"
                 options={[
                   {
-                    label: 'Software engineers',
-                    value: 'Software engineers',
+                    label: 'Software Engineer',
+                    value: 'Software Engineer',
                   },
                   {
-                    label: 'Frontend engineers',
-                    value: 'Frontend engineers',
+                    label: 'Frontend Engineer',
+                    value: 'Frontend Engineer',
                   },
                   {
-                    label: 'Backend engineers',
-                    value: 'Backend engineers',
+                    label: 'Backend Engineer',
+                    value: 'Backend Engineer',
                   },
                   {
-                    label: 'Full-stack engineers',
-                    value: 'Full-stack engineers',
+                    label: 'Full-stack Engineer',
+                    value: 'Full-stack Engineer',
                   },
                 ]}
                 value={jobTitleFilter}
@@ -43,32 +44,20 @@ export default function OffersHomePage() {
             </div>
             in
             <div className="ml-4">
-              <Select
+              <CompaniesTypeahead
                 isLabelHidden={true}
-                label="Select a company"
-                options={[
-                  {
-                    label: 'All companies',
-                    value: 'All companies',
-                  },
-                  {
-                    label: 'Shopee',
-                    value: 'Shopee',
-                  },
-                  {
-                    label: 'Meta',
-                    value: 'Meta',
-                  },
-                ]}
-                value={companyFilter}
-                onChange={setCompanyFilter}
+                placeHolder="All companies"
+                onSelect={({ value }) => setCompanyFilter(value)}
               />
             </div>
           </div>
         </div>
       </div>
       <div className="flex justify-center bg-white pb-20 pt-10">
-        <OffersTable />
+        <OffersTable
+          companyFilter={companyFilter}
+          jobTitleFilter={jobTitleFilter}
+        />
       </div>
     </main>
   );
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index b7baac84..db1965ca 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -1,256 +1,205 @@
+import Error from 'next/error';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
-import {
-  AcademicCapIcon,
-  BookmarkSquareIcon,
-  BriefcaseIcon,
-  BuildingOffice2Icon,
-  CalendarDaysIcon,
-  ClipboardDocumentIcon,
-  PencilSquareIcon,
-  ShareIcon,
-  TrashIcon,
-} from '@heroicons/react/24/outline';
-import { Button, Dialog, Tabs } from '@tih/ui';
 
-import EducationCard from '~/components/offers/profile/EducationCard';
-import OfferCard from '~/components/offers/profile/OfferCard';
-import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
-import { EducationBackgroundType } from '~/components/offers/types';
+import ProfileComments from '~/components/offers/profile/ProfileComments';
+import ProfileDetails from '~/components/offers/profile/ProfileDetails';
+import ProfileHeader from '~/components/offers/profile/ProfileHeader';
+import type { BackgroundCard, OfferEntity } from '~/components/offers/types';
 
+import { convertCurrencyToString } from '~/utils/offers/currency';
+import { formatDate } from '~/utils/offers/time';
+import { trpc } from '~/utils/trpc';
 export default function OfferProfile() {
+  const ErrorPage = (
+    <Error statusCode={404} title="Requested profile does not exist." />
+  );
+  const router = useRouter();
+  const { offerProfileId, token = '' } = router.query;
+  const [isEditable, setIsEditable] = useState(false);
+  const [background, setBackground] = useState<BackgroundCard>();
+  const [offers, setOffers] = useState<Array<OfferEntity>>([]);
+
   const [selectedTab, setSelectedTab] = useState('offers');
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  function renderActionList() {
-    return (
-      <div className="space-x-2">
-        <Button
-          icon={BookmarkSquareIcon}
-          isLabelHidden={true}
-          label="Save to user account"
-          size="md"
-          variant="tertiary"
-        />
-        <Button
-          icon={PencilSquareIcon}
-          isLabelHidden={true}
-          label="Edit"
-          size="md"
-          variant="tertiary"
-        />
-        <Button
-          icon={TrashIcon}
-          isLabelHidden={true}
-          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>
-    );
-  }
-  function ProfileHeader() {
-    return (
-      <div className="relative h-40 bg-white p-4">
-        <div className="justify-left flex h-1/2">
-          <div className="mx-4 mt-2">
-            <ProfilePhotoHolder />
-          </div>
-          <div className="w-full">
-            <div className="justify-left flex ">
-              <h2 className="flex w-4/5 text-2xl font-bold">anonymised-name</h2>
-              <div className="flex h-8 w-1/5 justify-end">
-                {renderActionList()}
-              </div>
-            </div>
-            <div className="flex flex-row">
-              <BuildingOffice2Icon className="mr-2.5 h-5" />
-              <span className="mr-2 font-bold">Current:</span>
-              <span>Level 4 Google</span>
-            </div>
-            <div className="flex flex-row">
-              <CalendarDaysIcon className="mr-2.5 h-5" />
-              <span className="mr-2 font-bold">YOE:</span>
-              <span>4</span>
-            </div>
-          </div>
-        </div>
 
-        <div className="absolute left-8 bottom-1 content-center">
-          <Tabs
-            label="Profile Detail Navigation"
-            tabs={[
-              {
-                label: 'Offers',
-                value: 'offers',
-              },
-              {
-                label: 'Background',
-                value: 'background',
-              },
+  const getProfileQuery = trpc.useQuery(
+    [
+      'offers.profile.listOne',
+      { profileId: offerProfileId as string, token: token as string },
+    ],
+    {
+      enabled: typeof offerProfileId === 'string',
+      onSuccess: (data) => {
+        if (!data) {
+          router.push('/offers');
+        }
+        // If the profile is not editable with a wrong token, redirect to the profile page
+        if (!data?.isEditable && token !== '') {
+          router.push(`/offers/profile/${offerProfileId}`);
+        }
+
+        setIsEditable(data?.isEditable ?? false);
+
+        if (data?.offers) {
+          const filteredOffers: Array<OfferEntity> = data
+            ? data?.offers.map((res) => {
+                if (res.offersFullTime) {
+                  const filteredOffer: OfferEntity = {
+                    base: convertCurrencyToString(
+                      res.offersFullTime.baseSalary,
+                    ),
+                    bonus: convertCurrencyToString(res.offersFullTime.bonus),
+                    companyName: res.company.name,
+                    id: res.offersFullTime.id,
+                    jobLevel: res.offersFullTime.level,
+                    jobTitle: res.offersFullTime.title,
+                    location: res.location,
+                    negotiationStrategy: res.negotiationStrategy || '',
+                    otherComment: res.comments || '',
+                    receivedMonth: formatDate(res.monthYearReceived),
+                    stocks: convertCurrencyToString(res.offersFullTime.stocks),
+                    totalCompensation: convertCurrencyToString(
+                      res.offersFullTime.totalCompensation,
+                    ),
+                  };
+
+                  return filteredOffer;
+                }
+                const filteredOffer: OfferEntity = {
+                  companyName: res.company.name,
+                  id: res.offersIntern!.id,
+                  jobTitle: res.offersIntern!.title,
+                  location: res.location,
+                  monthlySalary: convertCurrencyToString(
+                    res.offersIntern!.monthlySalary,
+                  ),
+                  negotiationStrategy: res.negotiationStrategy || '',
+                  otherComment: res.comments || '',
+                  receivedMonth: formatDate(res.monthYearReceived),
+                };
+                return filteredOffer;
+              })
+            : [];
+          setOffers(filteredOffers);
+        }
+
+        if (data?.background) {
+          const transformedBackground = {
+            educations: [
               {
-                label: 'Offer Engine Analysis',
-                value: 'offerEngineAnalysis',
+                endDate: data?.background.educations[0].endDate
+                  ? formatDate(data.background.educations[0].endDate)
+                  : '-',
+                field: data.background.educations[0].field || '-',
+                school: data.background.educations[0].school || '-',
+                startDate: data.background.educations[0].startDate
+                  ? formatDate(data.background.educations[0].startDate)
+                  : '-',
+                type: data.background.educations[0].type || '-',
               },
-            ]}
-            value={selectedTab}
-            onChange={(value) => setSelectedTab(value)}
-          />
-        </div>
-      </div>
-    );
-  }
+            ],
+            experiences: [
+              data.background.experiences &&
+              data.background.experiences.length > 0
+                ? {
+                    companyName:
+                      data.background.experiences[0].company?.name ?? '-',
+                    duration:
+                      String(data.background.experiences[0].durationInMonths) ??
+                      '-',
+                    jobLevel: data.background.experiences[0].level ?? '',
+                    jobTitle: data.background.experiences[0].title ?? '-',
+                    monthlySalary: data.background.experiences[0].monthlySalary
+                      ? convertCurrencyToString(
+                          data.background.experiences[0].monthlySalary,
+                        )
+                      : '-',
+                    totalCompensation: data.background.experiences[0]
+                      .totalCompensation
+                      ? convertCurrencyToString(
+                          data.background.experiences[0].totalCompensation,
+                        )
+                      : '-',
+                  }
+                : {},
+            ],
+            profileName: data.profileName,
+            specificYoes: data.background.specificYoes ?? [],
+            totalYoe: String(data.background.totalYoe) || '-',
+          };
+          setBackground(transformedBackground);
+        }
+      },
+    },
+  );
 
-  function ProfileDetails() {
-    if (selectedTab === 'offers') {
-      return (
-        <>
-          {[
-            {
-              base: undefined,
-              bonus: undefined,
-              companyName: 'Meta',
-              id: 1,
-              jobLevel: 'G5',
-              jobTitle: 'Software Engineer',
-              location: 'Singapore',
-              monthlySalary: undefined,
-              negotiationStrategy:
-                'Nostrud nulla aliqua deserunt commodo id aute.',
-              otherComment:
-                'Pariatur ut est voluptate incididunt consequat do veniam quis irure adipisicing. Deserunt laborum dolor quis voluptate enim.',
-              receivedMonth: 'Jun 2022',
-              stocks: undefined,
-              totalCompensation: undefined,
-            },
-            {
-              companyName: 'Meta',
-              id: 2,
-              jobLevel: 'G5',
-              jobTitle: 'Software Engineer',
-              location: 'Singapore',
-              receivedMonth: 'Jun 2022',
-            },
-            {
-              companyName: 'Meta',
-              id: 3,
-              jobLevel: 'G5',
-              jobTitle: 'Software Engineer',
-              location: 'Singapore',
-              receivedMonth: 'Jun 2022',
-            },
-          ].map((offer) => (
-            <OfferCard key={offer.id} offer={offer} />
-          ))}
-        </>
-      );
-    }
-    if (selectedTab === 'background') {
-      return (
-        <>
-          <div className="mx-8 my-4 flex flex-row">
-            <BriefcaseIcon className="mr-1 h-5" />
-            <span className="font-bold">Work Experience</span>
-          </div>
-          <OfferCard
-            offer={{
-              base: undefined,
-              bonus: undefined,
-              companyName: 'Prefer not to say',
-              jobLevel: 'G4',
-              jobTitle: 'N/A',
-              location: '',
-              monthlySalary: '1,400k',
-              receivedMonth: '',
-              stocks: undefined,
-              totalCompensation: undefined,
-            }}
-          />
-          <div className="mx-8 my-4 flex flex-row">
-            <AcademicCapIcon className="mr-1 h-5" />
-            <span className="font-bold">Education</span>
-          </div>
-          <EducationCard
-            education={{
-              backgroundType: EducationBackgroundType.Bachelor,
-              field: 'CS',
-              fromMonth: 'Aug 2019',
-              school: 'NUS',
-              toMonth: 'May 2021',
-            }}
-          />
-        </>
-      );
+  const trpcContext = trpc.useContext();
+  const deleteMutation = trpc.useMutation(['offers.profile.delete'], {
+    onError: () => {
+      alert('Error deleting profile'); // TODO: replace with toast
+    },
+    onSuccess: () => {
+      trpcContext.invalidateQueries(['offers.profile.listOne']);
+      router.push('/offers');
+    },
+  });
+
+  function handleDelete() {
+    if (isEditable) {
+      deleteMutation.mutate({
+        profileId: offerProfileId as string,
+        token: token as string,
+      });
     }
-    return <div>Detail page for {selectedTab}</div>;
   }
 
-  function ProfileComments() {
-    return (
-      <div className="m-4">
-        <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>
+  function handleCopyEditLink() {
+    // TODO: Add notification
+    navigator.clipboard.writeText(
+      `${window.location.origin}/offers/profile/${offerProfileId}?token=${token}`,
+    );
+  }
+
+  function handleCopyPublicLink() {
+    navigator.clipboard.writeText(
+      `${window.location.origin}/offers/profile/${offerProfileId}`,
     );
   }
 
   return (
-    <div className="mb-4 flex flex h-screen w-screen items-center justify-center divide-x">
-      <div className="h-full w-2/3 divide-y">
-        <ProfileHeader />
-        <div className="h-4/5 w-full overflow-y-scroll pb-32">
-          <ProfileDetails />
+    <>
+      {getProfileQuery.isError && ErrorPage}
+      {!getProfileQuery.isError && (
+        <div className="mb-4 flex flex h-screen w-screen items-center justify-center divide-x">
+          <div className="h-full w-2/3 divide-y">
+            <ProfileHeader
+              background={background}
+              handleDelete={handleDelete}
+              isEditable={isEditable}
+              isLoading={getProfileQuery.isLoading}
+              selectedTab={selectedTab}
+              setSelectedTab={setSelectedTab}
+            />
+            <div className="h-4/5 w-full overflow-y-scroll pb-32">
+              <ProfileDetails
+                background={background}
+                isLoading={getProfileQuery.isLoading}
+                offers={offers}
+                selectedTab={selectedTab}
+              />
+            </div>
+          </div>
+          <div className="h-full w-1/3 bg-white">
+            <ProfileComments
+              handleCopyEditLink={handleCopyEditLink}
+              handleCopyPublicLink={handleCopyPublicLink}
+              isDisabled={deleteMutation.isLoading}
+              isEditable={isEditable}
+              isLoading={getProfileQuery.isLoading}
+            />
+          </div>
         </div>
-      </div>
-      <div className="h-full w-1/3 bg-white">
-        <ProfileComments />
-      </div>
-    </div>
+      )}
+    </>
   );
 }
diff --git a/apps/portal/src/pages/offers/submit.tsx b/apps/portal/src/pages/offers/submit.tsx
index b85e098c..8e461859 100644
--- a/apps/portal/src/pages/offers/submit.tsx
+++ b/apps/portal/src/pages/offers/submit.tsx
@@ -1,93 +1,179 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
 import { Button } from '@tih/ui';
 
+import { Breadcrumbs } from '~/components/offers/Breadcrumb';
 import BackgroundForm from '~/components/offers/forms/BackgroundForm';
 import OfferAnalysis from '~/components/offers/forms/OfferAnalysis';
 import OfferDetailsForm from '~/components/offers/forms/OfferDetailsForm';
 import OfferProfileSave from '~/components/offers/forms/OfferProfileSave';
-import type { SubmitOfferFormData } from '~/components/offers/types';
+import type {
+  OfferDetailsFormData,
+  OfferProfileFormData,
+} from '~/components/offers/types';
+import { JobType } from '~/components/offers/types';
+import type { Month } from '~/components/shared/MonthYearPicker';
 
-function Breadcrumbs() {
-  return (
-    <p className="mb-4 text-right text-sm text-gray-400">
-      {'Offer details > Background > Analysis > Save'}
-    </p>
-  );
-}
+import { cleanObject, removeInvalidMoneyData } from '~/utils/offers/form';
+import { getCurrentMonth, getCurrentYear } from '~/utils/offers/time';
+import { trpc } from '~/utils/trpc';
 
 const defaultOfferValues = {
-  offers: [
-    {
-      comments: '',
-      companyId: '',
-      job: {
-        base: {
-          currency: 'USD',
-          value: 0,
-        },
-        bonus: {
-          currency: 'USD',
-          value: 0,
-        },
-        level: '',
-        specialization: '',
-        stocks: {
-          currency: 'USD',
-          value: 0,
-        },
-        title: '',
-        totalCompensation: {
-          currency: 'USD',
-          value: 0,
-        },
-      },
-      jobType: 'FULLTIME',
-      location: '',
-      monthYearReceived: '',
-      negotiationStrategy: '',
-    },
-  ],
+  comments: '',
+  companyId: '',
+  job: {},
+  jobType: JobType.FullTime,
+  location: '',
+  monthYearReceived: {
+    month: getCurrentMonth() as Month,
+    year: getCurrentYear(),
+  },
+  negotiationStrategy: '',
+};
+
+export const defaultFullTimeOfferValues = {
+  ...defaultOfferValues,
+  jobType: JobType.FullTime,
+};
+
+export const defaultInternshipOfferValues = {
+  ...defaultOfferValues,
+  jobType: JobType.Internship,
+};
+
+const defaultOfferProfileValues = {
+  background: {
+    educations: [],
+    experiences: [{ jobType: JobType.FullTime }],
+    specificYoes: [],
+  },
+  offers: [defaultOfferValues],
+};
+
+type FormStep = {
+  component: JSX.Element;
+  hasNext: boolean;
+  hasPrevious: boolean;
+  label: string;
 };
 
 export default function OffersSubmissionPage() {
   const [formStep, setFormStep] = useState(0);
-  const formMethods = useForm<SubmitOfferFormData>({
-    defaultValues: defaultOfferValues,
+  const pageRef = useRef<HTMLDivElement>(null);
+  const scrollToTop = () =>
+    pageRef.current?.scrollTo({ behavior: 'smooth', top: 0 });
+  const formMethods = useForm<OfferProfileFormData>({
+    defaultValues: defaultOfferProfileValues,
+    mode: 'all',
   });
+  const { handleSubmit, trigger } = formMethods;
 
-  const nextStep = () => setFormStep(formStep + 1);
-  const previousStep = () => setFormStep(formStep - 1);
-
-  const formComponents = [
-    <OfferDetailsForm key={0} />,
-    <BackgroundForm key={1} />,
-    <OfferAnalysis key={2} />,
-    <OfferProfileSave key={3} />,
+  const formSteps: Array<FormStep> = [
+    {
+      component: <OfferDetailsForm key={0} />,
+      hasNext: true,
+      hasPrevious: false,
+      label: 'Offer details',
+    },
+    {
+      component: <BackgroundForm key={1} />,
+      hasNext: false,
+      hasPrevious: true,
+      label: 'Background',
+    },
+    {
+      component: <OfferAnalysis key={2} />,
+      hasNext: true,
+      hasPrevious: false,
+      label: 'Analysis',
+    },
+    {
+      component: <OfferProfileSave key={3} />,
+      hasNext: false,
+      hasPrevious: false,
+      label: 'Save',
+    },
   ];
 
-  const onSubmit: SubmitHandler<SubmitOfferFormData> = async () => {
-    nextStep();
+  const formStepsLabels = formSteps.map((step) => step.label);
+
+  const nextStep = async (currStep: number) => {
+    if (currStep === 0) {
+      const result = await trigger('offers');
+      if (!result) {
+        return;
+      }
+    }
+    setFormStep(formStep + 1);
+    scrollToTop();
+  };
+
+  const previousStep = () => {
+    setFormStep(formStep - 1);
+    scrollToTop();
+  };
+
+  const createMutation = trpc.useMutation(['offers.profile.create'], {
+    onError(error) {
+      console.error(error.message);
+    },
+    onSuccess() {
+      alert('offer profile submit success!');
+      setFormStep(formStep + 1);
+      scrollToTop();
+    },
+  });
+
+  const onSubmit: SubmitHandler<OfferProfileFormData> = async (data) => {
+    const result = await trigger();
+    if (!result) {
+      return;
+    }
+
+    data = removeInvalidMoneyData(data);
+
+    const background = cleanObject(data.background);
+    background.specificYoes = data.background.specificYoes.filter(
+      (specificYoe) => specificYoe.domain && specificYoe.yoe > 0,
+    );
+    if (Object.entries(background.experiences[0]).length === 1) {
+      background.experiences = [];
+    }
+
+    const offers = data.offers.map((offer: OfferDetailsFormData) => ({
+      ...offer,
+      monthYearReceived: new Date(
+        offer.monthYearReceived.year,
+        offer.monthYearReceived.month,
+      ),
+    }));
+
+    const postData = { background, offers };
+
+    createMutation.mutate(postData);
   };
 
   return (
-    <div className="fixed h-full w-full overflow-y-scroll">
+    <div ref={pageRef} className="fixed h-full w-full overflow-y-scroll">
       <div className="mb-20 flex justify-center">
         <div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg">
-          <Breadcrumbs />
+          <div className="mb-4 flex justify-end">
+            <Breadcrumbs currentStep={formStep} stepLabels={formStepsLabels} />
+          </div>
           <FormProvider {...formMethods}>
-            <form onSubmit={formMethods.handleSubmit(onSubmit)}>
-              {formComponents[formStep]}
+            <form onSubmit={handleSubmit(onSubmit)}>
+              {formSteps[formStep].component}
               {/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
-              {(formStep === 0 || formStep === 2) && (
+              {formSteps[formStep].hasNext && (
                 <div className="flex justify-end">
                   <Button
+                    disabled={false}
                     icon={ArrowRightIcon}
                     label="Next"
                     variant="secondary"
-                    onClick={nextStep}
+                    onClick={() => nextStep(formStep)}
                   />
                 </div>
               )}
diff --git a/apps/portal/src/pages/offers/test.tsx b/apps/portal/src/pages/offers/test.tsx
deleted file mode 100644
index 5206935f..00000000
--- a/apps/portal/src/pages/offers/test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { trpc } from '~/utils/trpc';
-
-function test() {
-  const data = trpc.useQuery([
-    'offers.list',
-    {
-      limit: 3,
-      location: 'Singapore, Singapore',
-      offset: 0,
-      sortBy: '-monthYearReceived',
-      yoeCategory: 0,
-    },
-  ]);
-
-  return (
-    <ul>
-      {data.data?.map((x) => {
-        return <li key={x.id}>{JSON.stringify(x)}</li>;
-      })}
-    </ul>
-  );
-}
-
-export default test;
diff --git a/apps/portal/src/pages/offers/test/createProfile.tsx b/apps/portal/src/pages/offers/test/createProfile.tsx
new file mode 100644
index 00000000..6aad538b
--- /dev/null
+++ b/apps/portal/src/pages/offers/test/createProfile.tsx
@@ -0,0 +1,640 @@
+import React, { useState } from 'react';
+
+import { trpc } from '~/utils/trpc';
+
+function Test() {
+  const [createdData, setCreatedData] = useState('');
+  const [error, setError] = useState('');
+
+  const createMutation = trpc.useMutation(['offers.profile.create'], {
+    onError(err) {
+      alert(err);
+    },
+    onSuccess(data) {
+      setCreatedData(JSON.stringify(data));
+    },
+  });
+
+  const addToUserProfileMutation = trpc.useMutation(
+    ['offers.profile.addToUserProfile'],
+    {
+      onError(err) {
+        alert(err);
+      },
+      onSuccess(data) {
+        setCreatedData(JSON.stringify(data));
+      },
+    },
+  );
+
+  const deleteCommentMutation = trpc.useMutation(['offers.comments.delete'], {
+    onError(err) {
+      alert(err);
+    },
+    onSuccess(data) {
+      setCreatedData(JSON.stringify(data));
+    },
+  });
+
+  const handleDeleteComment = () => {
+    deleteCommentMutation.mutate({
+      id: 'cl97fprun001j7iyg6ev9x983',
+      profileId: 'cl96stky5002ew32gx2kale2x',
+      token: 'afca11e436d21bde24543718fa957c6c625335439dc504f24ee35eae7b5ef1',
+      userId: 'cl97dl51k001e7iygd5v5gt58',
+    });
+  };
+
+  const updateCommentMutation = trpc.useMutation(['offers.comments.update'], {
+    onError(err) {
+      alert(err);
+    },
+    onSuccess(data) {
+      setCreatedData(JSON.stringify(data));
+    },
+  });
+
+  const handleUpdateComment = () => {
+    updateCommentMutation.mutate({
+      id: 'cl97fxb0y001l7iyg14sdobt2',
+      message: 'hello hello',
+      profileId: 'cl96stky5002ew32gx2kale2x',
+      token: 'afca11e436d21bde24543718fa957c6c625335439dc504f24ee35eae7b5ef1ba',
+    });
+  };
+
+  const createCommentMutation = trpc.useMutation(['offers.comments.create'], {
+    onError(err) {
+      alert(err);
+    },
+    onSuccess(data) {
+      setCreatedData(JSON.stringify(data));
+    },
+  });
+
+  const handleCreate = () => {
+    createCommentMutation.mutate({
+      message: 'wassup bro',
+      profileId: 'cl9efyn9p004ww3u42mjgl1vn',
+      replyingToId: 'cl9el4xj10001w3w21o3p2iny',
+      userId: 'cl9ehvpng0000w3ec2mpx0bdd'
+    });
+  };
+
+  const handleLink = () => {
+    addToUserProfileMutation.mutate({
+      profileId: 'cl9efyn9p004ww3u42mjgl1vn',
+      token: 'afca11e436d21bde24543718fa957c6c625335439dc504f24ee35eae7b5ef1ba',
+      userId: 'cl9ehvpng0000w3ec2mpx0bdd',
+    });
+  };
+
+  const handleClick = () => {
+    createMutation.mutate({
+      background: {
+        educations: [
+          {
+            endDate: new Date('2018-09-30T07:58:54.000Z'),
+            field: 'Computer Science',
+            school: 'National University of Singapore',
+            startDate: new Date('2014-09-30T07:58:54.000Z'),
+            type: 'Bachelors',
+          },
+        ],
+        experiences: [
+          {
+            companyId: 'cl9ec1mgg0000w33hg1a3612r',
+            durationInMonths: 24,
+            jobType: 'FULLTIME',
+            level: 'Junior',
+            // "monthlySalary": undefined,
+            specialization: 'Front End',
+            title: 'Software Engineer',
+            totalCompensation: {
+              currency: 'SGD',
+              value: 104100,
+            },
+          },
+        ],
+        specificYoes: [
+          {
+            domain: 'Front End',
+            yoe: 2,
+          },
+          {
+            domain: 'Full Stack',
+            yoe: 2,
+          },
+        ],
+        totalYoe: 4,
+      },
+      offers: [
+        {
+          OffersFullTime: {
+            baseSalary: {
+              currency: 'SGD',
+              value: 84000,
+            },
+            bonus: {
+              currency: 'SGD',
+              value: 20000,
+            },
+            level: 'Junior',
+            specialization: 'Front End',
+            stocks: {
+              currency: 'SGD',
+              value: 100,
+            },
+            title: 'Software Engineer',
+            totalCompensation: {
+              currency: 'SGD',
+              value: 104100,
+            },
+          },
+
+          comments: 'I am a Raffles Institution almumni',
+          // Comments: '',
+          companyId: 'cl98yuqk80007txhgjtjp8fk4',
+          jobType: 'FULLTIME',
+          location: 'Singapore, Singapore',
+          monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
+          negotiationStrategy: 'Leveraged having multiple offers',
+        },
+        {
+          OffersFullTime: {
+            baseSalary: {
+              currency: 'SGD',
+              value: 84000,
+            },
+            bonus: {
+              currency: 'SGD',
+              value: 20000,
+            },
+            level: 'Junior',
+            specialization: 'Front End',
+            stocks: {
+              currency: 'SGD',
+              value: 100,
+            },
+            title: 'Software Engineer',
+            totalCompensation: {
+              currency: 'SGD',
+              value: 104100,
+            },
+          },
+          comments: '',
+          companyId: 'cl98yuqk80007txhgjtjp8fk4',
+          jobType: 'FULLTIME',
+          location: 'Singapore, Singapore',
+          monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
+          negotiationStrategy: 'Leveraged having multiple offers',
+        },
+      ],
+    });
+  };
+
+  const profileId = 'cl9efyn9p004ww3u42mjgl1vn'; // Remember to change this filed after testing deleting
+  const data = trpc.useQuery(
+    [
+      `offers.profile.listOne`,
+      {
+        profileId,
+        token:
+          'd14666ff76e267c9e99445844b41410e83874936d0c07e664db73ff0ea76919e',
+      },
+    ],
+    {
+      onError(err) {
+        setError(err.shape?.message || '');
+      },
+    },
+  );
+
+  const replies = trpc.useQuery(
+    ['offers.comments.getComments', { profileId }],
+    {
+      onError(err) {
+        setError(err.shape?.message || '');
+      },
+    },
+  );
+
+  // Console.log(replies.data?.data)
+  const deleteMutation = trpc.useMutation(['offers.profile.delete']);
+
+  const handleDelete = (id: string) => {
+    deleteMutation.mutate({
+      profileId: id,
+      token: 'e7effd2a40adba2deb1ddea4fb9f1e6c3c98ab0a85a88ed1567fc2a107fdb445',
+    });
+  };
+
+  const updateMutation = trpc.useMutation(['offers.profile.update'], {
+    onError(err) {
+      alert(err);
+    },
+    onSuccess(response) {
+      setCreatedData(JSON.stringify(response));
+    },
+  });
+
+  const handleUpdate = () => {
+    updateMutation.mutate({
+      background: {
+        educations: [
+          {
+            backgroundId: 'cl96stky6002fw32g6vj4meyr',
+            endDate: new Date('2018-09-30T07:58:54.000Z'),
+            field: 'Computer Science',
+            id: 'cl96stky6002gw32gey2ffawd',
+            school: 'National University of Singapore',
+            startDate: new Date('2014-09-30T07:58:54.000Z'),
+            type: 'Bachelors',
+          },
+        ],
+        experiences: [
+          {
+            backgroundId: 'cl96stky6002fw32g6vj4meyr',
+            company: {
+              createdAt: new Date('2022-10-12T16:19:05.196Z'),
+              description:
+                'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
+              id: 'cl95u79f000007im531ysjg79',
+              logoUrl: 'https://logo.clearbit.com/meta.com',
+              name: 'Meta',
+              slug: 'meta',
+              updatedAt: new Date('2022-10-12T16:19:05.196Z'),
+            },
+            companyId: 'cl9ec1mgg0000w33hg1a3612r',
+            durationInMonths: 24,
+            id: 'cl96stky6002iw32gpt6t87s2',
+            jobType: 'FULLTIME',
+            level: 'Junior',
+            monthlySalary: null,
+            monthlySalaryId: null,
+            specialization: 'Front End',
+            title: 'Software Engineer',
+            totalCompensation: {
+              currency: 'SGD',
+              id: 'cl96stky6002jw32g73svfacr',
+              value: 104100,
+            },
+            totalCompensationId: 'cl96stky6002jw32g73svfacr',
+          },
+        ],
+        id: 'cl96stky6002fw32g6vj4meyr',
+        offersProfileId: 'cl96stky5002ew32gx2kale2x',
+        specificYoes: [
+          {
+            backgroundId: 'cl96stky6002fw32g6vj4meyr',
+            domain: 'Backend',
+            id: 'cl96t7890004tw32g5in3px5j',
+            yoe: 2,
+          },
+          {
+            backgroundId: 'cl96stky6002fw32g6vj4meyr',
+            domain: 'Backend',
+            id: 'cl96tb87x004xw32gnu17jbzv',
+            yoe: 2,
+          },
+          {
+            backgroundId: 'cl96stky6002fw32g6vj4meyr',
+            domain: 'Backend',
+            id: 'cl976t39z00007iygt3np3cgo',
+            yoe: 2,
+          },
+          {
+            backgroundId: 'cl96stky6002fw32g6vj4meyr',
+            domain: 'Front End',
+            id: 'cl96stky7002mw32gn4jc7uml',
+            yoe: 2,
+          },
+          {
+            backgroundId: 'cl96stky6002fw32g6vj4meyr',
+            domain: 'Full Stack',
+            id: 'cl96stky7002nw32gpprghtxr',
+            yoe: 2,
+          },
+          {
+            backgroundId: 'cl96stky6002fw32g6vj4meyr',
+            domain: 'Backend',
+            id: 'cl976we5h000p7iygiomdo9fh',
+            yoe: 2,
+          },
+        ],
+        totalYoe: 6,
+      },
+      createdAt: '2022-10-13T08:28:13.518Z',
+      discussion: [],
+      id: 'cl96stky5002ew32gx2kale2x',
+      isEditable: true,
+      offers: [
+        {
+          OffersFullTime: {
+            baseSalary: {
+              currency: 'SGD',
+              id: 'cl976t4de00067iyg3pjir7k9',
+              value: 1999999999,
+            },
+            baseSalaryId: 'cl976t4de00067iyg3pjir7k9',
+            bonus: {
+              currency: 'SGD',
+              id: 'cl976t4de00087iygcnlmh8aw',
+              value: 1410065407,
+            },
+            bonusId: 'cl976t4de00087iygcnlmh8aw',
+            id: 'cl976t4de00057iygq3ktce3v',
+            level: 'EXPERT',
+            specialization: 'FRONTEND',
+            stocks: {
+              currency: 'SGD',
+              id: 'cl976t4df000a7iygkrsgr1xh',
+              value: -558038585,
+            },
+            stocksId: 'cl976t4df000a7iygkrsgr1xh',
+            title: 'Software Engineer',
+            totalCompensation: {
+              currency: 'SGD',
+              id: 'cl976t4df000c7iyg73ryf5uw',
+              value: 55555555,
+            },
+            totalCompensationId: 'cl976t4df000c7iyg73ryf5uw',
+          },
+          OffersIntern: null,
+          comments: 'this IS SO IEUHDAEUIGDI',
+          company: {
+            createdAt: new Date('2022-10-12T16:19:05.196Z'),
+            description:
+              'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
+            id: 'cl95u79f000007im531ysjg79',
+            logoUrl: 'https://logo.clearbit.com/meta.com',
+            name: 'Meta',
+            slug: 'meta',
+            updatedAt: new Date('2022-10-12T16:19:05.196Z'),
+          },
+          companyId: 'cl9ec1mgg0000w33hg1a3612r',
+          id: 'cl976t4de00047iygl0zbce11',
+          jobType: 'FULLTIME',
+          location: 'Singapore, Singapore',
+          monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
+          negotiationStrategy: 'Charmed the guy with my face',
+          offersFullTimeId: 'cl976t4de00057iygq3ktce3v',
+          offersInternId: null,
+          profileId: 'cl96stky5002ew32gx2kale2x',
+        },
+        {
+          OffersFullTime: {
+            baseSalary: {
+              currency: 'SGD',
+              id: 'cl96stky80033w32gxw5goc4z',
+              value: 84000,
+            },
+            baseSalaryId: 'cl96stky80033w32gxw5goc4z',
+            bonus: {
+              currency: 'SGD',
+              id: 'cl96stky80035w32gajjwdo1p',
+              value: 123456789,
+            },
+            bonusId: 'cl96stky80035w32gajjwdo1p',
+            id: 'cl96stky80032w32gep9ovgj3',
+            level: 'Junior',
+            specialization: 'Front End',
+            stocks: {
+              currency: 'SGD',
+              id: 'cl96stky90037w32gu04t6ybh',
+              value: 100,
+            },
+            stocksId: 'cl96stky90037w32gu04t6ybh',
+            title: 'Software Engineer',
+            totalCompensation: {
+              currency: 'SGD',
+              id: 'cl96stky90039w32glbpktd0o',
+              value: 104100,
+            },
+            totalCompensationId: 'cl96stky90039w32glbpktd0o',
+          },
+          OffersIntern: null,
+          comments: '',
+          company: {
+            createdAt: new Date('2022-10-12T16:19:05.196Z'),
+            description:
+              'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
+            id: 'cl95u79f000007im531ysjg79',
+            logoUrl: 'https://logo.clearbit.com/meta.com',
+            name: 'Meta',
+            slug: 'meta',
+            updatedAt: new Date('2022-10-12T16:19:05.196Z'),
+          },
+          companyId: 'cl9ec1mgg0000w33hg1a3612r',
+          id: 'cl96stky80031w32gau9mu1gs',
+          jobType: 'FULLTIME',
+          location: 'Singapore, Singapore',
+          monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
+          negotiationStrategy: 'Leveraged having million offers',
+          offersFullTimeId: 'cl96stky80032w32gep9ovgj3',
+          offersInternId: null,
+          profileId: 'cl96stky5002ew32gx2kale2x',
+        },
+        {
+          OffersFullTime: {
+            baseSalary: {
+              currency: 'SGD',
+              id: 'cl96stky9003dw32gcvqbijlo',
+              value: 1,
+            },
+            baseSalaryId: 'cl96stky9003dw32gcvqbijlo',
+            bonus: {
+              currency: 'SGD',
+              id: 'cl96stky9003fw32goc3zqxwr',
+              value: 0,
+            },
+            bonusId: 'cl96stky9003fw32goc3zqxwr',
+            id: 'cl96stky9003cw32g5v10izfu',
+            level: 'Senior',
+            specialization: 'Front End',
+            stocks: {
+              currency: 'SGD',
+              id: 'cl96stky9003hw32g1lbbkqqr',
+              value: 999999,
+            },
+            stocksId: 'cl96stky9003hw32g1lbbkqqr',
+            title: 'Software Engineer DOG',
+            totalCompensation: {
+              currency: 'SGD',
+              id: 'cl96stky9003jw32gzumcoi7v',
+              value: 999999,
+            },
+            totalCompensationId: 'cl96stky9003jw32gzumcoi7v',
+          },
+          OffersIntern: null,
+          comments: '',
+          company: {
+            createdAt: new Date('2022-10-12T16:19:05.196Z'),
+            description:
+              'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
+            id: 'cl95u79f000007im531ysjg79',
+            logoUrl: 'https://logo.clearbit.com/meta.com',
+            name: 'Meta',
+            slug: 'meta',
+            updatedAt: new Date('2022-10-12T16:19:05.196Z'),
+          },
+          companyId: 'cl9ec1mgg0000w33hg1a3612r',
+          id: 'cl96stky9003bw32gc3l955vr',
+          jobType: 'FULLTIME',
+          location: 'Singapore, Singapore',
+          monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
+          negotiationStrategy: 'LOst out having multiple offers',
+          offersFullTimeId: 'cl96stky9003cw32g5v10izfu',
+          offersInternId: null,
+          profileId: 'cl96stky5002ew32gx2kale2x',
+        },
+        {
+          OffersFullTime: {
+            baseSalary: {
+              currency: 'SGD',
+              id: 'cl976wf28000v7iygmk1b7qaq',
+              value: 1999999999,
+            },
+            baseSalaryId: 'cl976wf28000v7iygmk1b7qaq',
+            bonus: {
+              currency: 'SGD',
+              id: 'cl976wf28000x7iyg63w7kcli',
+              value: 1410065407,
+            },
+            bonusId: 'cl976wf28000x7iyg63w7kcli',
+            id: 'cl976wf28000u7iyg6euei8e9',
+            level: 'EXPERT',
+            specialization: 'FRONTEND',
+            stocks: {
+              currency: 'SGD',
+              id: 'cl976wf28000z7iyg9ivun6ap',
+              value: 111222333,
+            },
+            stocksId: 'cl976wf28000z7iyg9ivun6ap',
+            title: 'Software Engineer',
+            totalCompensation: {
+              currency: 'SGD',
+              id: 'cl976wf2800117iygmzsc0xit',
+              value: 55555555,
+            },
+            totalCompensationId: 'cl976wf2800117iygmzsc0xit',
+          },
+          OffersIntern: null,
+          comments: 'this IS SO COOL',
+          company: {
+            createdAt: new Date('2022-10-12T16:19:05.196Z'),
+            description:
+              'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
+            id: 'cl95u79f000007im531ysjg79',
+            logoUrl: 'https://logo.clearbit.com/meta.com',
+            name: 'Meta',
+            slug: 'meta',
+            updatedAt: new Date('2022-10-12T16:19:05.196Z'),
+          },
+          companyId: 'cl9ec1mgg0000w33hg1a3612r',
+          id: 'cl976wf28000t7iyga4noyz7s',
+          jobType: 'FULLTIME',
+          location: 'Singapore, Singapore',
+          monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
+          negotiationStrategy: 'Charmed the guy with my face',
+          offersFullTimeId: 'cl976wf28000u7iyg6euei8e9',
+          offersInternId: null,
+          profileId: 'cl96stky5002ew32gx2kale2x',
+        },
+        {
+          OffersFullTime: {
+            baseSalary: {
+              currency: 'SGD',
+              id: 'cl96tbb3o0053w32gz11paaxu',
+              value: 1999999999,
+            },
+            baseSalaryId: 'cl96tbb3o0053w32gz11paaxu',
+            bonus: {
+              currency: 'SGD',
+              id: 'cl96tbb3o0055w32gpyqgz5hx',
+              value: 1410065407,
+            },
+            bonusId: 'cl96tbb3o0055w32gpyqgz5hx',
+            id: 'cl96tbb3o0052w32guguajzin',
+            level: 'EXPERT',
+            specialization: 'FRONTEND',
+            stocks: {
+              currency: 'SGD',
+              id: 'cl96tbb3o0057w32gu4nyxguf',
+              value: 500,
+            },
+            stocksId: 'cl96tbb3o0057w32gu4nyxguf',
+            title: 'Software Engineer',
+            totalCompensation: {
+              currency: 'SGD',
+              id: 'cl96tbb3o0059w32gm3iy1zk4',
+              value: 55555555,
+            },
+            totalCompensationId: 'cl96tbb3o0059w32gm3iy1zk4',
+          },
+          OffersIntern: null,
+          comments: 'this rocks',
+          company: {
+            createdAt: new Date('2022-10-12T16:19:05.196Z'),
+            description:
+              'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
+            id: 'cl95u79f000007im531ysjg79',
+            logoUrl: 'https://logo.clearbit.com/meta.com',
+            name: 'Meta',
+            slug: 'meta',
+            updatedAt: new Date('2022-10-12T16:19:05.196Z'),
+          },
+          companyId: 'cl9ec1mgg0000w33hg1a3612r',
+          id: 'cl96tbb3o0051w32gjrpaiiit',
+          jobType: 'FULLTIME',
+          location: 'Singapore, Singapore',
+          monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
+          negotiationStrategy: 'Charmed the guy with my face',
+          offersFullTimeId: 'cl96tbb3o0052w32guguajzin',
+          offersInternId: null,
+          profileId: 'cl96stky5002ew32gx2kale2x',
+        },
+      ],
+      profileName: 'ailing bryann stuart ziqing',
+      token: 'afca11e436d21bde24543718fa957c6c625335439dc504f24ee35eae7b5ef1ba',
+      userId: null,
+    });
+  };
+
+  return (
+    <>
+      <div>{createdData}</div>
+      <div>{JSON.stringify(replies.data?.data)}</div>
+      <button type="button" onClick={handleClick}>
+        Click Me!
+      </button>
+      <button type="button" onClick={handleUpdate}>
+        UPDATE!
+      </button>
+      <button type="button" onClick={handleLink}>
+        LINKKKK!
+      </button>
+      <button type="button" onClick={handleCreate}>
+        CREATE COMMENT!
+      </button>
+      <button type="button" onClick={handleDeleteComment}>
+        DELETE COMMENT!
+      </button>
+      <button type="button" onClick={handleUpdateComment}>
+        UPDATE COMMENT!
+      </button>
+      <button
+        className="text-danger-600"
+        type="button"
+        onClick={() => {
+          handleDelete(profileId);
+        }}>
+        DELETE THIS PROFILE
+      </button>
+      <div>{JSON.stringify(data.data)}</div>
+      <div>{JSON.stringify(error)}</div>
+    </>
+  );
+}
+
+export default Test;
diff --git a/apps/portal/src/pages/offers/test/generateAnalysis.tsx b/apps/portal/src/pages/offers/test/generateAnalysis.tsx
new file mode 100644
index 00000000..07c66e77
--- /dev/null
+++ b/apps/portal/src/pages/offers/test/generateAnalysis.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { trpc } from '~/utils/trpc';
+
+function GenerateAnalysis() {
+  const analysis = trpc.useQuery([
+    'offers.analysis.generate',
+    { profileId: 'cl98ywtbv0000tx1s4p18eol1' },
+  ]);
+
+  return <div>{JSON.stringify(analysis.data)}</div>;
+}
+
+export default GenerateAnalysis;
diff --git a/apps/portal/src/pages/offers/test/getAnalysis.tsx b/apps/portal/src/pages/offers/test/getAnalysis.tsx
new file mode 100644
index 00000000..ed96f74d
--- /dev/null
+++ b/apps/portal/src/pages/offers/test/getAnalysis.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { trpc } from '~/utils/trpc';
+
+function GetAnalysis() {
+  const analysis = trpc.useQuery([
+    'offers.analysis.get',
+    { profileId: 'cl98ywtbv0000tx1s4p18eol1' },
+  ]);
+
+  return <div>{JSON.stringify(analysis.data)}</div>;
+}
+
+export default GetAnalysis;
diff --git a/apps/portal/src/pages/offers/test/listOffers.tsx b/apps/portal/src/pages/offers/test/listOffers.tsx
new file mode 100644
index 00000000..db295d0d
--- /dev/null
+++ b/apps/portal/src/pages/offers/test/listOffers.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { trpc } from '~/utils/trpc';
+
+function Test() {
+  const data = trpc.useQuery([
+    'offers.list',
+    {
+      limit: 100,
+      location: 'Singapore, Singapore',
+      offset: 0,
+      sortBy: '-totalYoe',
+      yoeCategory: 2,
+    },
+  ]);
+
+  const deleteMutation = trpc.useMutation(['offers.profile.delete']);
+
+  const handleDelete = (id: string) => {
+    deleteMutation.mutate({ profileId: id, token: ' dadaadad' });
+  };
+
+  return (
+    <ul>
+      <li>
+        <b>{JSON.stringify(data.data?.paging)}</b>
+      </li>
+      <li>
+        <ul>
+          {data.data?.data.map((offer) => {
+            return (
+              <li key={offer.id}>
+                <button
+                  className="text-danger-600"
+                  type="button"
+                  onClick={() => {
+                    handleDelete(offer.profileId);
+                  }}>
+                  DELETE THIS PROFILE AND ALL ITS OFFERS
+                </button>
+                <div>{JSON.stringify(offer)}</div>
+                <br />
+              </li>
+            );
+          })}
+        </ul>
+      </li>
+    </ul>
+  );
+}
+
+export default Test;
diff --git a/apps/portal/src/pages/offers/testCreateProfile.tsx b/apps/portal/src/pages/offers/testCreateProfile.tsx
deleted file mode 100644
index f58dbfd4..00000000
--- a/apps/portal/src/pages/offers/testCreateProfile.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { useState } from 'react';
-
-import { trpc } from '~/utils/trpc';
-
-function Test() {
-//   F const data = trpc.useQuery([
-//     'offers.profile.',
-//     {
-//       limit: 3,
-//       location: 'Singapore, Singapore',
-//       offset: 0,
-//       yoeCategory: 0,
-//     },
-//   ]);
-
-    const [createdData, setCreatedData] = useState("")
-
-    const createMutation = trpc.useMutation(['offers.profile.create'], {
-        onError(error: any) {
-            alert(error)
-        },
-        onSuccess(data) {
-            setCreatedData(JSON.stringify(data))
-        },
-    });
-
-    const handleClick = () => {
-        createMutation.mutate({
-"background": {
-    "educations": [
-      {
-        "endDate": new Date("2018-09-30T07:58:54.000Z"),
-        "field": "Computer Science",
-        "school": "National University of Singapore",
-        "startDate": new Date("2014-09-30T07:58:54.000Z"),
-        "type": "Bachelors"
-      }
-    ],
-    "experiences": [
-      {
-        "companyId": "cl92ly8xm0000w3mwh5ymyqmx",
-        "durationInMonths": 24,
-        "jobType": "FULLTIME",
-        "level": "Junior",
-        // "monthlySalary": undefined,
-        "specialization": "Front End",
-        "title": "Software Engineer",
-        "totalCompensation": {
-          "currency": "SGD",
-          "value": 104100
-        }
-      }
-    ],
-    "specificYoes": [
-      {
-        "domain": "Front End",
-        "yoe": 2
-      },
-      {
-        "domain": "Full Stack",
-        "yoe": 2
-      }
-    ],
-    "totalYoe": 4
-  },
-  "offers": [
-    {
-      "comments": "",
-      "companyId": "cl92ly8xm0000w3mwh5ymyqmx",
-      "job": {
-        "base": {
-          "currency": "SGD",
-          "value": 84000
-        },
-        "bonus": {
-          "currency": "SGD",
-          "value": 20000
-        },
-        "level": "Junior",
-        "specialization": "Front End",
-        "stocks": {
-          "currency": "SGD",
-          "value": 100
-        },
-        "title": "Software Engineer",
-        "totalCompensation": {
-          "currency": "SGD",
-          "value": 104100
-        }
-      },
-      "jobType": "FULLTIME",
-      "location": "Singapore, Singapore",
-      "monthYearReceived": new Date("2022-09-30T07:58:54.000Z"),
-      "negotiationStrategy": "Leveraged having multiple offers"
-    },
-    {
-      "comments": "",
-      "companyId": "cl92ly8xm0000w3mwh5ymyqmx",
-      "job": {
-        "base": {
-          "currency": "SGD",
-          "value": 84000
-        },
-        "bonus": {
-          "currency": "SGD",
-          "value": 20000
-        },
-        "level": "Junior",
-        "specialization": "Front End",
-        "stocks": {
-          "currency": "SGD",
-          "value": 100
-        },
-        "title": "Software Engineer",
-        "totalCompensation": {
-          "currency": "SGD",
-          "value": 104100
-        }
-      },
-      "jobType": "FULLTIME",
-      "location": "Singapore, Singapore",
-      "monthYearReceived": new Date("2022-09-30T07:58:54.000Z"),
-      "negotiationStrategy": "Leveraged having multiple offers"
-    }
-  ]
-        });
-    };
-
-  return (
-    // <ul>
-    //   {createdData.map((x) => {
-    //     return <li key={x.id}>{JSON.stringify(x)}</li>;
-    //   })}
-    // </ul>
-      <>
-      <div>
-          {createdData}
-      </div>
-          <button type="button" onClick={handleClick}>Click me</button>
-          </>
-  );
-}
-
-export default Test;
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
index aac0a7a2..0804f60e 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
@@ -3,14 +3,10 @@ import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, Select, TextArea } from '@tih/ui';
 
+import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
-import CommentListItem from '~/components/questions/CommentListItem';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
 
-import {
-  SAMPLE_ANSWER,
-  SAMPLE_ANSWER_COMMENT,
-} from '~/utils/questions/constants';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
 import { trpc } from '~/utils/trpc';
 
@@ -47,7 +43,7 @@ export default function QuestionPage() {
     'questions.answers.comments.create',
     {
       onSuccess: () => {
-        utils.invalidateQuery([
+        utils.invalidateQueries([
           'questions.answers.comments.getAnswerComments',
           { answerId: answerId as string },
         ]);
@@ -85,11 +81,12 @@ export default function QuestionPage() {
       <div className="flex w-full  justify-center overflow-y-auto py-4 px-5">
         <div className="flex max-w-7xl flex-1 flex-col gap-2">
           <FullAnswerCard
-            authorImageUrl={SAMPLE_ANSWER.authorImageUrl}
+            answerId={answer.id}
+            authorImageUrl={answer.userImage}
             authorName={answer.user}
             content={answer.content}
             createdAt={answer.createdAt}
-            upvoteCount={0}
+            upvoteCount={answer.numVotes}
           />
           <div className="mx-2">
             <form
@@ -142,9 +139,10 @@ export default function QuestionPage() {
             </form>
 
             {(comments ?? []).map((comment) => (
-              <CommentListItem
+              <AnswerCommentListItem
                 key={comment.id}
-                authorImageUrl={SAMPLE_ANSWER_COMMENT.authorImageUrl}
+                answerCommentId={comment.id}
+                authorImageUrl={comment.userImage}
                 authorName={comment.user}
                 content={comment.content}
                 createdAt={comment.createdAt}
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index 92149e81..e07227ff 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -3,15 +3,11 @@ import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, Collapsible, Select, TextArea } from '@tih/ui';
 
-import AnswerCard from '~/components/questions/card/AnswerCard';
+import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullQuestionCard from '~/components/questions/card/FullQuestionCard';
-import CommentListItem from '~/components/questions/CommentListItem';
+import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
 
-import {
-  SAMPLE_ANSWER,
-  SAMPLE_QUESTION_COMMENT,
-} from '~/utils/questions/constants';
 import createSlug from '~/utils/questions/createSlug';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
 import { trpc } from '~/utils/trpc';
@@ -29,6 +25,7 @@ export default function QuestionPage() {
   const {
     register: ansRegister,
     handleSubmit,
+    reset: resetAnswer,
     formState: { isDirty, isValid },
   } = useForm<AnswerQuestionData>({ mode: 'onChange' });
   const answerRegister = useFormRegister(ansRegister);
@@ -86,6 +83,7 @@ export default function QuestionPage() {
       content: data.answerContent,
       questionId: questionId as string,
     });
+    resetAnswer();
   };
 
   const handleSubmitComment = (data: QuestionCommentData) => {
@@ -115,13 +113,16 @@ export default function QuestionPage() {
         <div className="flex max-w-7xl flex-1 flex-col gap-2">
           <FullQuestionCard
             {...question}
-            receivedCount={0} // TODO: Change to actual value
-            showVoteButtons={true}
-            timestamp={question.seenAt.toLocaleDateString()}
+            questionId={question.id}
+            receivedCount={0}
+            timestamp={question.seenAt.toLocaleDateString(undefined, {
+              month: 'short',
+              year: 'numeric',
+            })}
             upvoteCount={question.numVotes}
           />
           <div className="mx-2">
-            <Collapsible label={`${question.numComments} comment(s)`}>
+            <Collapsible label={`${(comments ?? []).length} comment(s)`}>
               <form
                 className="mb-2"
                 onSubmit={handleCommentSubmit(handleSubmitComment)}>
@@ -172,9 +173,10 @@ export default function QuestionPage() {
               </form>
 
               {(comments ?? []).map((comment) => (
-                <CommentListItem
+                <AnswerCommentListItem
                   key={comment.id}
-                  authorImageUrl={SAMPLE_QUESTION_COMMENT.authorImageUrl}
+                  answerCommentId={comment.id}
+                  authorImageUrl={comment.userImage}
                   authorName={comment.user}
                   content={comment.content}
                   createdAt={comment.createdAt}
@@ -196,7 +198,7 @@ export default function QuestionPage() {
             />
             <div className="mt-3 mb-1 flex justify-between">
               <div className="flex items-baseline justify-start gap-2">
-                <p>{question.numAnswers} answers</p>
+                <p>{(answers ?? []).length} answers</p>
                 <div className="flex items-baseline gap-2">
                   <span aria-hidden={true} className="text-sm">
                     Sort by:
@@ -232,9 +234,10 @@ export default function QuestionPage() {
             </div>
           </form>
           {(answers ?? []).map((answer) => (
-            <AnswerCard
+            <QuestionAnswerCard
               key={answer.id}
-              authorImageUrl={SAMPLE_ANSWER.authorImageUrl}
+              answerId={answer.id}
+              authorImageUrl={answer.userImage}
               authorName={answer.user}
               commentCount={answer.numComments}
               content={answer.content}
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index 826a6204..93ac9725 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -1,7 +1,9 @@
 import { subMonths, subYears } from 'date-fns';
-import { useRouter } from 'next/router';
+import Router, { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
+import { NoSymbolIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
+import { SlideOut } from '@tih/ui';
 
 import QuestionOverviewCard from '~/components/questions/card/QuestionOverviewCard';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
@@ -59,17 +61,22 @@ export default function QuestionsHomePage() {
       : undefined;
   }, [selectedQuestionAge]);
 
-  const { data: questions } = trpc.useQuery([
-    'questions.questions.getQuestionsByFilter',
+  const { data: questions } = trpc.useQuery(
+    [
+      'questions.questions.getQuestionsByFilter',
+      {
+        companies: selectedCompanies,
+        endDate: today,
+        locations: selectedLocations,
+        questionTypes: selectedQuestionTypes,
+        roles: [],
+        startDate,
+      },
+    ],
     {
-      companies: selectedCompanies,
-      endDate: today,
-      locations: selectedLocations,
-      questionTypes: selectedQuestionTypes,
-      roles: [],
-      startDate,
+      keepPreviousData: true,
     },
-  ]);
+  );
 
   const utils = trpc.useContext();
   const { mutate: createQuestion } = trpc.useMutation(
@@ -83,6 +90,7 @@ export default function QuestionsHomePage() {
 
   const [hasLanded, setHasLanded] = useState(false);
   const [loaded, setLoaded] = useState(false);
+  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
 
   const companyFilterOptions = useMemo(() => {
     return COMPANIES.map((company) => ({
@@ -112,8 +120,9 @@ export default function QuestionsHomePage() {
     }));
   }, [selectedLocations]);
 
-  const handleLandingQuery = (data: LandingQueryData) => {
+  const handleLandingQuery = async (data: LandingQueryData) => {
     const { company, location, questionType } = data;
+
     setSelectedCompanies([company]);
     setSelectedLocations([location]);
     setSelectedQuestionTypes([questionType as QuestionsQuestionType]);
@@ -134,98 +143,112 @@ export default function QuestionsHomePage() {
     areLocationsInitialized,
   ]);
 
+  const { pathname } = router;
   useEffect(() => {
     if (areFiltersInitialized) {
+      // Router.replace used instead of router.replace to avoid
+      // the page reloading itself since the router.replace
+      // callback changes on every page load
+      Router.replace({
+        pathname,
+        query: {
+          companies: selectedCompanies,
+          locations: selectedLocations,
+          questionAge: selectedQuestionAge,
+          questionTypes: selectedQuestionTypes,
+        },
+      });
       const hasFilter =
-        router.query.companies ||
-        router.query.questionTypes ||
-        router.query.questionAge ||
-        router.query.locations;
+        selectedCompanies.length > 0 ||
+        selectedLocations.length > 0 ||
+        selectedQuestionAge !== 'all' ||
+        selectedQuestionTypes.length > 0;
       if (hasFilter) {
         setHasLanded(true);
       }
-      // Console.log('landed', hasLanded);
+
       setLoaded(true);
     }
-  }, [areFiltersInitialized, hasLanded, router.query]);
+  }, [
+    areFiltersInitialized,
+    hasLanded,
+    loaded,
+    pathname,
+    selectedCompanies,
+    selectedLocations,
+    selectedQuestionAge,
+    selectedQuestionTypes,
+  ]);
 
   if (!loaded) {
     return null;
   }
+  const filterSidebar = (
+    <div className="mt-2 divide-y divide-slate-200 px-4">
+      <FilterSection
+        label="Company"
+        options={companyFilterOptions}
+        searchPlaceholder="Add company filter"
+        onOptionChange={(optionValue, checked) => {
+          if (checked) {
+            setSelectedCompanies([...selectedCompanies, optionValue]);
+          } else {
+            setSelectedCompanies(
+              selectedCompanies.filter((company) => company !== optionValue),
+            );
+          }
+        }}
+      />
+      <FilterSection
+        label="Question types"
+        options={questionTypeFilterOptions}
+        showAll={true}
+        onOptionChange={(optionValue, checked) => {
+          if (checked) {
+            setSelectedQuestionTypes([...selectedQuestionTypes, optionValue]);
+          } else {
+            setSelectedQuestionTypes(
+              selectedQuestionTypes.filter(
+                (questionType) => questionType !== optionValue,
+              ),
+            );
+          }
+        }}
+      />
+      <FilterSection
+        isSingleSelect={true}
+        label="Question age"
+        options={questionAgeFilterOptions}
+        showAll={true}
+        onOptionChange={(optionValue) => {
+          setSelectedQuestionAge(optionValue);
+        }}
+      />
+      <FilterSection
+        label="Location"
+        options={locationFilterOptions}
+        searchPlaceholder="Add location filter"
+        onOptionChange={(optionValue, checked) => {
+          if (checked) {
+            setSelectedLocations([...selectedLocations, optionValue]);
+          } else {
+            setSelectedLocations(
+              selectedLocations.filter((location) => location !== optionValue),
+            );
+          }
+        }}
+      />
+    </div>
+  );
 
   return !hasLanded ? (
     <LandingComponent onLanded={handleLandingQuery}></LandingComponent>
   ) : (
-    <main className="flex flex-1 flex-col items-stretch overflow-y-auto">
-      <div className="flex pt-4">
-        <aside className="w-[300px] border-r px-4">
-          <h2 className="text-xl font-semibold">Filter by</h2>
-          <div className="divide-y divide-slate-200">
-            <FilterSection
-              label="Company"
-              options={companyFilterOptions}
-              searchPlaceholder="Add company filter"
-              onOptionChange={(optionValue, checked) => {
-                if (checked) {
-                  setSelectedCompanies([...selectedCompanies, optionValue]);
-                } else {
-                  setSelectedCompanies(
-                    selectedCompanies.filter(
-                      (company) => company !== optionValue,
-                    ),
-                  );
-                }
-              }}
-            />
-            <FilterSection
-              label="Question types"
-              options={questionTypeFilterOptions}
-              showAll={true}
-              onOptionChange={(optionValue, checked) => {
-                if (checked) {
-                  setSelectedQuestionTypes([
-                    ...selectedQuestionTypes,
-                    optionValue,
-                  ]);
-                } else {
-                  setSelectedQuestionTypes(
-                    selectedQuestionTypes.filter(
-                      (questionType) => questionType !== optionValue,
-                    ),
-                  );
-                }
-              }}
-            />
-            <FilterSection
-              isSingleSelect={true}
-              label="Question age"
-              options={questionAgeFilterOptions}
-              showAll={true}
-              onOptionChange={(optionValue) => {
-                setSelectedQuestionAge(optionValue);
-              }}
-            />
-            <FilterSection
-              label="Location"
-              options={locationFilterOptions}
-              searchPlaceholder="Add location filter"
-              onOptionChange={(optionValue, checked) => {
-                if (checked) {
-                  setSelectedLocations([...selectedLocations, optionValue]);
-                } else {
-                  setSelectedLocations(
-                    selectedLocations.filter(
-                      (location) => location !== optionValue,
-                    ),
-                  );
-                }
-              }}
-            />
-          </div>
-        </aside>
-        <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto pt-4">
-          <div className="flex min-h-0 max-w-3xl flex-1">
-            <div className="flex flex-1 flex-col items-stretch justify-start gap-4 pb-4">
+    <main className="flex flex-1 flex-col items-stretch">
+      <div className="flex h-full flex-1">
+        <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto">
+          <div className="flex min-h-0 max-w-3xl flex-1 p-4">
+            <div className="flex flex-1 flex-col items-stretch justify-start gap-4">
               <ContributeQuestionCard
                 onSubmit={(data) => {
                   createQuestion({
@@ -250,6 +273,9 @@ export default function QuestionsHomePage() {
                   },
                 ]}
                 sortValue="most-recent"
+                onFilterOptionsToggle={() => {
+                  setFilterDrawerOpen(!filterDrawerOpen);
+                }}
                 onSortChange={(value) => {
                   // eslint-disable-next-line no-console
                   console.log(value);
@@ -257,24 +283,49 @@ export default function QuestionsHomePage() {
               />
               {(questions ?? []).map((question) => (
                 <QuestionOverviewCard
-                  // eslint-disable-next-line react/no-array-index-key
                   key={question.id}
                   answerCount={question.numAnswers}
+                  company={question.company}
                   content={question.content}
                   href={`/questions/${question.id}/${createSlug(
                     question.content,
                   )}`}
                   location={question.location}
-                  receivedCount={0} // TODO: Implement received count
+                  questionId={question.id}
+                  receivedCount={0}
                   role={question.role}
-                  timestamp={question.seenAt.toLocaleDateString()}
-                  type={question.type}
+                  timestamp={question.seenAt.toLocaleDateString(undefined, {
+                    month: 'short',
+                    year: 'numeric',
+                  })}
+                  type={question.type} // TODO: Implement received count
                   upvoteCount={question.numVotes}
                 />
               ))}
+              {questions?.length === 0 && (
+                <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
+                  <NoSymbolIcon className="h-6 w-6" />
+                  <p>Nothing found. Try changing your search filters.</p>
+                </div>
+              )}
             </div>
           </div>
         </section>
+        <aside className="hidden w-[300px] overflow-y-auto border-l bg-white py-4 lg:block">
+          <h2 className="px-4 text-xl font-semibold">Filter by</h2>
+          {filterSidebar}
+        </aside>
+        <SlideOut
+          className="lg:hidden"
+          enterFrom="end"
+          isShown={filterDrawerOpen}
+          size="sm"
+          title="Filter by"
+          onClose={() => {
+            setFilterDrawerOpen(false);
+          }}>
+          {filterSidebar}
+        </SlideOut>
       </div>
     </main>
   );
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 52d4f3b7..002be9b6 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -4,30 +4,34 @@ import Error from 'next/error';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
-import { useEffect } from 'react';
+import { useState } from 'react';
 import {
   AcademicCapIcon,
   BriefcaseIcon,
   CalendarIcon,
   InformationCircleIcon,
   MapPinIcon,
+  PencilSquareIcon,
   StarIcon,
 } from '@heroicons/react/20/solid';
 import { Spinner } from '@tih/ui';
 
-import CommentsSection from '~/components/resumes/comments/CommentsSection';
+import ResumeCommentsSection from '~/components/resumes/comments/ResumeCommentsSection';
 import ResumePdf from '~/components/resumes/ResumePdf';
+import ResumeExpandableText from '~/components/resumes/shared/ResumeExpandableText';
 
 import { trpc } from '~/utils/trpc';
 
+import SubmitResumeForm from './submit';
+
 export default function ResumeReviewPage() {
   const ErrorPage = (
-    <Error statusCode={404} title="Requested resume does not exist." />
+    <Error statusCode={404} title="Requested resume does not exist" />
   );
   const { data: session } = useSession();
   const router = useRouter();
   const { resumeId } = router.query;
-  const trpcContext = trpc.useContext();
+  const utils = trpc.useContext();
   // Safe to assert resumeId type as string because query is only sent if so
   const detailsQuery = trpc.useQuery(
     ['resumes.resume.findOne', { resumeId: resumeId as string }],
@@ -35,31 +39,65 @@ export default function ResumeReviewPage() {
       enabled: typeof resumeId === 'string',
     },
   );
-  const starMutation = trpc.useMutation('resumes.star.user.create_or_delete', {
+  const starMutation = trpc.useMutation('resumes.resume.star', {
+    onSuccess() {
+      utils.invalidateQueries(['resumes.resume.findOne']);
+    },
+  });
+  const unstarMutation = trpc.useMutation('resumes.resume.unstar', {
     onSuccess() {
-      trpcContext.invalidateQueries(['resumes.resume.findOne']);
+      utils.invalidateQueries(['resumes.resume.findOne']);
     },
   });
+  const userIsOwner =
+    session?.user?.id != null && session.user.id === detailsQuery.data?.userId;
+
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  const onStarButtonClick = () => {
+    if (session?.user?.id == null) {
+      router.push('/api/auth/signin');
+      return;
+    }
 
-  useEffect(() => {
     if (detailsQuery.data?.stars.length) {
-      document.getElementById('star-button')?.focus();
+      unstarMutation.mutate({
+        resumeId: resumeId as string,
+      });
     } else {
-      document.getElementById('star-button')?.blur();
+      starMutation.mutate({
+        resumeId: resumeId as string,
+      });
     }
-  }, [detailsQuery.data?.stars]);
+  };
 
-  const onStarButtonClick = () => {
-    // Star button only rendered if resume exists
-    // Star button only clickable if user exists
-    starMutation.mutate({
-      resumeId: resumeId as string,
-    });
+  const onEditButtonClick = () => {
+    setIsEditMode(true);
   };
 
+  if (isEditMode && detailsQuery.data != null) {
+    return (
+      <SubmitResumeForm
+        initFormDetails={{
+          additionalInfo: detailsQuery.data.additionalInfo ?? '',
+          experience: detailsQuery.data.experience,
+          location: detailsQuery.data.location,
+          resumeId: resumeId as string,
+          role: detailsQuery.data.role,
+          title: detailsQuery.data.title,
+          url: detailsQuery.data.url,
+        }}
+        onClose={() => {
+          utils.invalidateQueries(['resumes.resume.findOne']);
+          setIsEditMode(false);
+        }}
+      />
+    );
+  }
+
   return (
     <>
-      {detailsQuery.isError && ErrorPage}
+      {(detailsQuery.isError || detailsQuery.data === null) && ErrorPage}
       {detailsQuery.isLoading && (
         <div className="w-full pt-4">
           {' '}
@@ -71,34 +109,47 @@ export default function ResumeReviewPage() {
           <Head>
             <title>{detailsQuery.data.title}</title>
           </Head>
-          <main className="h-[calc(100vh-2rem)] flex-1 overflow-y-scroll p-4">
-            <div className="flex flex-row space-x-8">
+          <main className="h-[calc(100vh-2rem)] flex-1 overflow-y-auto p-4">
+            <div className="flex space-x-8">
               <h1 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
                 {detailsQuery.data.title}
               </h1>
-              <button
-                className="isolate inline-flex max-h-10 items-center space-x-4 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                disabled={session?.user === null}
-                id="star-button"
-                type="button"
-                onClick={onStarButtonClick}>
-                <span className="relative inline-flex">
-                  <StarIcon
-                    aria-hidden="true"
-                    className={clsx(
-                      detailsQuery.data?.stars.length
-                        ? 'text-orange-400'
-                        : 'text-gray-400',
-                      '-ml-1 mr-2 h-5 w-5',
-                    )}
-                    id="star-icon"
-                  />
-                  Star
-                </span>
-                <span className="relative -ml-px inline-flex">
-                  {detailsQuery.data._count.stars}
-                </span>
-              </button>
+              <div className="flex gap-4">
+                <button
+                  className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50  disabled:hover:bg-white"
+                  disabled={starMutation.isLoading || unstarMutation.isLoading}
+                  type="button"
+                  onClick={onStarButtonClick}>
+                  <span className="relative inline-flex">
+                    <div className="-ml-1 mr-2 h-5 w-5">
+                      {starMutation.isLoading || unstarMutation.isLoading ? (
+                        <Spinner className="mt-0.5" size="xs" />
+                      ) : (
+                        <StarIcon
+                          aria-hidden="true"
+                          className={clsx(
+                            detailsQuery.data?.stars.length
+                              ? 'text-orange-400'
+                              : 'text-gray-400',
+                          )}
+                        />
+                      )}
+                    </div>
+                    Star
+                  </span>
+                  <span className="relative -ml-px inline-flex">
+                    {detailsQuery.data?._count.stars}
+                  </span>
+                </button>
+                {userIsOwner && (
+                  <button
+                    className="p h-10 rounded-md border border-gray-300 bg-white py-1 px-2 text-center"
+                    type="button"
+                    onClick={onEditButtonClick}>
+                    <PencilSquareIcon className="h-6 w-6 text-indigo-500 hover:text-indigo-300" />
+                  </button>
+                )}
+              </div>
             </div>
             <div className="flex flex-col pt-1 lg:mt-0 lg:flex-row lg:flex-wrap lg:space-x-8">
               <div className="mt-2 flex items-center text-sm text-gray-500">
@@ -127,27 +178,26 @@ export default function ResumeReviewPage() {
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
                 />
-                {`Uploaded ${formatDistanceToNow(
-                  new Date(detailsQuery.data.createdAt),
-                  { addSuffix: true },
-                )} by ${detailsQuery.data.user.name}`}
+                {`Uploaded ${formatDistanceToNow(detailsQuery.data.createdAt, {
+                  addSuffix: true,
+                })} by ${detailsQuery.data.user.name}`}
               </div>
             </div>
             {detailsQuery.data.additionalInfo && (
-              <div className="flex items-center pt-2 text-sm text-gray-500">
+              <div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-gray-500">
                 <InformationCircleIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
                 />
-                {detailsQuery.data.additionalInfo}
+                <ResumeExpandableText text={detailsQuery.data.additionalInfo} />
               </div>
             )}
             <div className="flex w-full flex-col py-4 lg:flex-row">
-              <div className="w-full lg:w-[800px]">
+              <div className="w-full lg:w-[780px]">
                 <ResumePdf url={detailsQuery.data.url} />
               </div>
               <div className="mx-8 grow">
-                <CommentsSection resumeId={resumeId as string} />
+                <ResumeCommentsSection resumeId={resumeId as string} />
               </div>
             </div>
           </main>
diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx
new file mode 100644
index 00000000..1ddd5f05
--- /dev/null
+++ b/apps/portal/src/pages/resumes/browse.tsx
@@ -0,0 +1,360 @@
+import compareAsc from 'date-fns/compareAsc';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { useSession } from 'next-auth/react';
+import { useState } from 'react';
+import { Disclosure } from '@headlessui/react';
+import { MinusIcon, PlusIcon } from '@heroicons/react/20/solid';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import {
+  CheckboxInput,
+  CheckboxList,
+  DropdownMenu,
+  Tabs,
+  TextInput,
+} from '@tih/ui';
+
+import ResumeFilterPill from '~/components/resumes/browse/ResumeFilterPill';
+import type {
+  Filter,
+  FilterId,
+  FilterState,
+  FilterValue,
+  Shortcut,
+  SortOrder,
+} from '~/components/resumes/browse/resumeFilters';
+import {
+  BROWSE_TABS_VALUES,
+  EXPERIENCE,
+  INITIAL_FILTER_STATE,
+  LOCATION,
+  ROLE,
+  SHORTCUTS,
+  SORT_OPTIONS,
+} from '~/components/resumes/browse/resumeFilters';
+import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
+import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
+import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
+
+import { trpc } from '~/utils/trpc';
+
+import type { Resume } from '~/types/resume';
+
+const filters: Array<Filter> = [
+  {
+    id: 'role',
+    label: 'Role',
+    options: ROLE,
+  },
+  {
+    id: 'experience',
+    label: 'Experience',
+    options: EXPERIENCE,
+  },
+  {
+    id: 'location',
+    label: 'Location',
+    options: LOCATION,
+  },
+];
+
+const filterResumes = (
+  resumes: Array<Resume>,
+  searchValue: string,
+  userFilters: FilterState,
+) =>
+  resumes
+    .filter((resume) =>
+      resume.title.toLowerCase().includes(searchValue.toLocaleLowerCase()),
+    )
+    .filter(
+      ({ experience, location, role }) =>
+        userFilters.role.includes(role as FilterValue) &&
+        userFilters.experience.includes(experience as FilterValue) &&
+        userFilters.location.includes(location as FilterValue),
+    )
+    .filter(
+      ({ numComments }) =>
+        userFilters.numComments === undefined ||
+        numComments === userFilters.numComments,
+    );
+
+const sortComparators: Record<
+  SortOrder,
+  (resume1: Resume, resume2: Resume) => number
+> = {
+  latest: (resume1, resume2) =>
+    compareAsc(resume2.createdAt, resume1.createdAt),
+  popular: (resume1, resume2) => resume2.numStars - resume1.numStars,
+  topComments: (resume1, resume2) => resume2.numComments - resume1.numComments,
+};
+const sortResumes = (resumes: Array<Resume>, sortOrder: SortOrder) =>
+  resumes.sort(sortComparators[sortOrder]);
+
+export default function ResumeHomePage() {
+  const { data: sessionData } = useSession();
+  const router = useRouter();
+  const [tabsValue, setTabsValue] = useState(BROWSE_TABS_VALUES.ALL);
+  const [sortOrder, setSortOrder] = useState(SORT_OPTIONS[0].value);
+  const [searchValue, setSearchValue] = useState('');
+  const [userFilters, setUserFilters] = useState(INITIAL_FILTER_STATE);
+  const [resumes, setResumes] = useState<Array<Resume>>([]);
+  const [renderSignInButton, setRenderSignInButton] = useState(false);
+  const [signInButtonText, setSignInButtonText] = useState('');
+
+  const allResumesQuery = trpc.useQuery(['resumes.resume.findAll'], {
+    enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
+    onSuccess: (data) => {
+      setResumes(data);
+      setRenderSignInButton(false);
+    },
+  });
+  const starredResumesQuery = trpc.useQuery(
+    ['resumes.resume.user.findUserStarred'],
+    {
+      enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
+      onError: () => {
+        setResumes([]);
+        setRenderSignInButton(true);
+        setSignInButtonText('to view starred resumes');
+      },
+      onSuccess: (data) => {
+        setResumes(data);
+      },
+      retry: false,
+    },
+  );
+  const myResumesQuery = trpc.useQuery(
+    ['resumes.resume.user.findUserCreated'],
+    {
+      enabled: tabsValue === BROWSE_TABS_VALUES.MY,
+      onError: () => {
+        setResumes([]);
+        setRenderSignInButton(true);
+        setSignInButtonText('to view your submitted resumes');
+      },
+      onSuccess: (data) => {
+        setResumes(data);
+      },
+      retry: false,
+    },
+  );
+
+  const onSubmitResume = () => {
+    if (sessionData?.user?.id) {
+      router.push('/resumes/submit');
+    } else {
+      router.push('/api/auth/signin');
+    }
+  };
+
+  const onFilterCheckboxChange = (
+    isChecked: boolean,
+    filterSection: FilterId,
+    filterValue: string,
+  ) => {
+    if (isChecked) {
+      setUserFilters({
+        ...userFilters,
+        [filterSection]: [...userFilters[filterSection], filterValue],
+      });
+    } else {
+      setUserFilters({
+        ...userFilters,
+        [filterSection]: userFilters[filterSection].filter(
+          (value) => value !== filterValue,
+        ),
+      });
+    }
+  };
+
+  const onShortcutChange = ({
+    sortOrder: shortcutSortOrder,
+    filters: shortcutFilters,
+  }: Shortcut) => {
+    setSortOrder(shortcutSortOrder);
+    setUserFilters(shortcutFilters);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Resume Review Portal</title>
+      </Head>
+      <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-scroll">
+        <div className="ml-4 py-4">
+          <ResumeReviewsTitle />
+        </div>
+        <div className="mt-4 flex items-start">
+          <div className="w-screen sm:px-4 md:px-8">
+            <div className="grid grid-cols-12">
+              <div className="col-span-2 self-end">
+                <h3 className="text-md mb-4 font-medium tracking-tight text-gray-900">
+                  Shortcuts:
+                </h3>
+              </div>
+              <div className="col-span-10">
+                <div className="border-grey-200 grid grid-cols-12 items-center gap-4 border-b pb-2">
+                  <div className="col-span-7">
+                    <Tabs
+                      label="Resume Browse Tabs"
+                      tabs={[
+                        {
+                          label: 'All Resumes',
+                          value: BROWSE_TABS_VALUES.ALL,
+                        },
+                        {
+                          label: 'Starred Resumes',
+                          value: BROWSE_TABS_VALUES.STARRED,
+                        },
+                        {
+                          label: 'My Resumes',
+                          value: BROWSE_TABS_VALUES.MY,
+                        },
+                      ]}
+                      value={tabsValue}
+                      onChange={setTabsValue}
+                    />
+                  </div>
+                  <div className="col-span-3 self-end">
+                    <form>
+                      <TextInput
+                        label=""
+                        placeholder="Search Resumes"
+                        startAddOn={MagnifyingGlassIcon}
+                        startAddOnType="icon"
+                        type="text"
+                        value={searchValue}
+                        onChange={setSearchValue}
+                      />
+                    </form>
+                  </div>
+                  <div className="col-span-1 justify-self-center">
+                    <DropdownMenu align="end" label="Sort">
+                      {SORT_OPTIONS.map((option) => (
+                        <DropdownMenu.Item
+                          key={option.name}
+                          isSelected={sortOrder === option.value}
+                          label={option.name}
+                          onClick={() =>
+                            setSortOrder(option.value)
+                          }></DropdownMenu.Item>
+                      ))}
+                    </DropdownMenu>
+                  </div>
+                  <div className="col-span-1">
+                    <button
+                      className="rounded-md bg-indigo-500 py-1 px-3 text-sm font-medium text-white"
+                      type="button"
+                      onClick={onSubmitResume}>
+                      Submit Resume
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-12">
+              <div className="col-span-2">
+                <div className="w-100 pt-4 sm:pr-0 md:pr-4">
+                  <form>
+                    <h3 className="sr-only">Shortcuts</h3>
+                    <ul
+                      className="flex flex-wrap justify-start gap-4 pb-6 text-sm font-medium text-gray-900"
+                      role="list">
+                      {SHORTCUTS.map((shortcut) => (
+                        <li key={shortcut.name}>
+                          <ResumeFilterPill
+                            title={shortcut.name}
+                            onClick={() => onShortcutChange(shortcut)}
+                          />
+                        </li>
+                      ))}
+                    </ul>
+                    <h3 className="text-md my-4 font-medium tracking-tight text-gray-900">
+                      Explore these filters:
+                    </h3>
+                    {filters.map((filter) => (
+                      <Disclosure
+                        key={filter.id}
+                        as="div"
+                        className="border-b border-gray-200 py-6">
+                        {({ open }) => (
+                          <>
+                            <h3 className="-my-3 flow-root">
+                              <Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-gray-400 hover:text-gray-500">
+                                <span className="font-medium text-gray-900">
+                                  {filter.label}
+                                </span>
+                                <span className="ml-6 flex items-center">
+                                  {open ? (
+                                    <MinusIcon
+                                      aria-hidden="true"
+                                      className="h-5 w-5"
+                                    />
+                                  ) : (
+                                    <PlusIcon
+                                      aria-hidden="true"
+                                      className="h-5 w-5"
+                                    />
+                                  )}
+                                </span>
+                              </Disclosure.Button>
+                            </h3>
+                            <Disclosure.Panel className="pt-4">
+                              <CheckboxList
+                                description=""
+                                isLabelHidden={true}
+                                label=""
+                                orientation="vertical">
+                                {filter.options.map((option) => (
+                                  <div
+                                    key={option.value}
+                                    className="[&>div>div:nth-child(2)>label]:font-normal [&>div>div:nth-child(1)>input]:text-indigo-600 [&>div>div:nth-child(1)>input]:ring-indigo-500">
+                                    <CheckboxInput
+                                      label={option.label}
+                                      value={userFilters[filter.id].includes(
+                                        option.value,
+                                      )}
+                                      onChange={(isChecked) =>
+                                        onFilterCheckboxChange(
+                                          isChecked,
+                                          filter.id,
+                                          option.value,
+                                        )
+                                      }
+                                    />
+                                  </div>
+                                ))}
+                              </CheckboxList>
+                            </Disclosure.Panel>
+                          </>
+                        )}
+                      </Disclosure>
+                    ))}
+                  </form>
+                </div>
+              </div>
+              <div className="col-span-10 mb-6">
+                {renderSignInButton && (
+                  <ResumeSignInButton text={signInButtonText} />
+                )}
+                <ResumeListItems
+                  isLoading={
+                    allResumesQuery.isFetching ||
+                    starredResumesQuery.isFetching ||
+                    myResumesQuery.isFetching
+                  }
+                  resumes={sortResumes(
+                    filterResumes(resumes, searchValue, userFilters),
+                    sortOrder,
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/apps/portal/src/pages/resumes/index.tsx b/apps/portal/src/pages/resumes/index.tsx
index 824298c8..4f84c9d1 100644
--- a/apps/portal/src/pages/resumes/index.tsx
+++ b/apps/portal/src/pages/resumes/index.tsx
@@ -1,305 +1,22 @@
-import clsx from 'clsx';
 import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { useSession } from 'next-auth/react';
-import { Fragment, useState } from 'react';
-import { Disclosure, Menu, Transition } from '@headlessui/react';
-import {
-  ChevronDownIcon,
-  MinusIcon,
-  PlusIcon,
-} from '@heroicons/react/20/solid';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Tabs, TextInput } from '@tih/ui';
 
-import {
-  BROWSE_TABS_VALUES,
-  EXPERIENCE,
-  LOCATION,
-  ROLES,
-  SORT_OPTIONS,
-  TOP_HITS,
-} from '~/components/resumes/browse/constants';
-import FilterPill from '~/components/resumes/browse/FilterPill';
-import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
-import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
-import SignInButton from '~/components/resumes/SignInButton';
-
-import { trpc } from '~/utils/trpc';
-
-import type { Resume } from '~/types/resume';
-
-const filters = [
-  {
-    id: 'roles',
-    name: 'Roles',
-    options: ROLES,
-  },
-  {
-    id: 'experience',
-    name: 'Experience',
-    options: EXPERIENCE,
-  },
-  {
-    id: 'location',
-    name: 'Location',
-    options: LOCATION,
-  },
-];
-
-export default function ResumeHomePage() {
-  const { data: sessionData } = useSession();
-  const router = useRouter();
-  const [tabsValue, setTabsValue] = useState(BROWSE_TABS_VALUES.ALL);
-  const [searchValue, setSearchValue] = useState('');
-  const [resumes, setResumes] = useState<Array<Resume>>([]);
-  const [renderSignInButton, setRenderSignInButton] = useState(false);
-  const [signInButtonText, setSignInButtonText] = useState('');
-
-  const allResumesQuery = trpc.useQuery(['resumes.resume.findAll'], {
-    enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
-    onSuccess: (data) => {
-      setResumes(data);
-      setRenderSignInButton(false);
-    },
-  });
-  const starredResumesQuery = trpc.useQuery(
-    ['resumes.resume.user.findUserStarred'],
-    {
-      enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
-      onError: () => {
-        setResumes([]);
-        setRenderSignInButton(true);
-        setSignInButtonText('to view starred resumes');
-      },
-      onSuccess: (data) => {
-        setResumes(data);
-      },
-      retry: false,
-    },
-  );
-  const myResumesQuery = trpc.useQuery(
-    ['resumes.resume.user.findUserCreated'],
-    {
-      enabled: tabsValue === BROWSE_TABS_VALUES.MY,
-      onError: () => {
-        setResumes([]);
-        setRenderSignInButton(true);
-        setSignInButtonText('to view your submitted resumes');
-      },
-      onSuccess: (data) => {
-        setResumes(data);
-      },
-      retry: false,
-    },
-  );
-
-  const onClickNew = () => {
-    if (sessionData?.user?.id) {
-      router.push('/resumes/submit');
-    } else {
-      // TODO: Handle non-logged in user behaviour
-    }
-  };
+import { CallToAction } from '~/components/resumes/landing/CallToAction';
+import { Hero } from '~/components/resumes/landing/Hero';
+import { PrimaryFeatures } from '~/components/resumes/landing/PrimaryFeatures';
+import { Testimonials } from '~/components/resumes/landing/Testimonials';
 
+export default function Home() {
   return (
     <>
       <Head>
-        <title>Resume Review Portal</title>
+        <title>Resume Review</title>
       </Head>
-      <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-scroll">
-        <div className="ml-4 py-4">
-          <ResumeReviewsTitle />
-        </div>
-        <div className="mt-4 flex items-start">
-          <div className="w-screen sm:px-4 md:px-8">
-            <div className="grid grid-cols-12">
-              <div className="col-span-2 self-end">
-                <h1 className="mb-4 tracking-tight text-gray-900">Filters</h1>
-              </div>
-              <div className="col-span-10">
-                <div className="border-grey-200 grid grid-cols-12 items-center gap-4 border-b pb-2">
-                  <div className="col-span-7">
-                    <Tabs
-                      label="Resume Browse Tabs"
-                      tabs={[
-                        {
-                          label: 'All Resumes',
-                          value: BROWSE_TABS_VALUES.ALL,
-                        },
-                        {
-                          label: 'Starred Resumes',
-                          value: BROWSE_TABS_VALUES.STARRED,
-                        },
-                        {
-                          label: 'My Resumes',
-                          value: BROWSE_TABS_VALUES.MY,
-                        },
-                      ]}
-                      value={tabsValue}
-                      onChange={setTabsValue}
-                    />
-                  </div>
-                  <div className="col-span-3 self-end">
-                    <form>
-                      <TextInput
-                        label=""
-                        placeholder="Search Resumes"
-                        startAddOn={MagnifyingGlassIcon}
-                        startAddOnType="icon"
-                        type="text"
-                        value={searchValue}
-                        onChange={setSearchValue}
-                      />
-                    </form>
-                  </div>
-                  <div className="col-span-1 justify-self-center">
-                    <Menu as="div" className="relative inline-block text-left">
-                      <div>
-                        {/* TODO: Sort logic */}
-                        <Menu.Button className="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
-                          Sort
-                          <ChevronDownIcon
-                            aria-hidden="true"
-                            className="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-                          />
-                        </Menu.Button>
-                      </div>
-
-                      <Transition
-                        as={Fragment}
-                        enter="transition ease-out duration-100"
-                        enterFrom="transform opacity-0 scale-95"
-                        enterTo="transform opacity-100 scale-100"
-                        leave="transition ease-in duration-75"
-                        leaveFrom="transform opacity-100 scale-100"
-                        leaveTo="transform opacity-0 scale-95">
-                        <Menu.Items className="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
-                          <div className="py-1">
-                            {SORT_OPTIONS.map((option) => (
-                              <Menu.Item key={option.name}>
-                                {({ active }) => (
-                                  <a
-                                    className={clsx(
-                                      option.current
-                                        ? 'font-medium text-gray-900'
-                                        : 'text-gray-500',
-                                      active ? 'bg-gray-100' : '',
-                                      'block px-4 py-2 text-sm',
-                                    )}
-                                    href={option.href}>
-                                    {option.name}
-                                  </a>
-                                )}
-                              </Menu.Item>
-                            ))}
-                          </div>
-                        </Menu.Items>
-                      </Transition>
-                    </Menu>
-                  </div>
-                  <div className="col-span-1">
-                    <button
-                      className="rounded-md bg-indigo-500 py-1 px-3 text-sm text-white"
-                      type="button"
-                      onClick={onClickNew}>
-                      New
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-12">
-              <div className="col-span-2">
-                <div className="w-100 pt-4 sm:pr-0 md:pr-4">
-                  <form>
-                    <h3 className="sr-only">Categories</h3>
-                    <ul
-                      className="flex flex-wrap justify-start gap-4 pb-6 text-sm font-medium text-gray-900"
-                      role="list">
-                      {TOP_HITS.map((category) => (
-                        <li key={category.name}>
-                          {/* TODO: Replace onClick with filtering function */}
-                          <FilterPill
-                            title={category.name}
-                            onClick={() => true}
-                          />
-                        </li>
-                      ))}
-                    </ul>
 
-                    {filters.map((section) => (
-                      <Disclosure
-                        key={section.id}
-                        as="div"
-                        className="border-b border-gray-200 py-6">
-                        {({ open }) => (
-                          <>
-                            <h3 className="-my-3 flow-root">
-                              <Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-gray-400 hover:text-gray-500">
-                                <span className="font-medium text-gray-900">
-                                  {section.name}
-                                </span>
-                                <span className="ml-6 flex items-center">
-                                  {open ? (
-                                    <MinusIcon
-                                      aria-hidden="true"
-                                      className="h-5 w-5"
-                                    />
-                                  ) : (
-                                    <PlusIcon
-                                      aria-hidden="true"
-                                      className="h-5 w-5"
-                                    />
-                                  )}
-                                </span>
-                              </Disclosure.Button>
-                            </h3>
-                            <Disclosure.Panel className="pt-6">
-                              <div className="space-y-4">
-                                {section.options.map((option, optionIdx) => (
-                                  <div
-                                    key={option.value}
-                                    className="flex items-center">
-                                    <input
-                                      className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-                                      defaultChecked={option.checked}
-                                      defaultValue={option.value}
-                                      id={`filter-${section.id}-${optionIdx}`}
-                                      name={`${section.id}[]`}
-                                      type="checkbox"
-                                    />
-                                    <label
-                                      className="ml-3 text-sm text-gray-600"
-                                      htmlFor={`filter-${section.id}-${optionIdx}`}>
-                                      {option.label}
-                                    </label>
-                                  </div>
-                                ))}
-                              </div>
-                            </Disclosure.Panel>
-                          </>
-                        )}
-                      </Disclosure>
-                    ))}
-                  </form>
-                </div>
-              </div>
-              <div className="col-span-10 pr-8">
-                {renderSignInButton && <SignInButton text={signInButtonText} />}
-                <ResumeListItems
-                  isLoading={
-                    allResumesQuery.isFetching ||
-                    starredResumesQuery.isFetching ||
-                    myResumesQuery.isFetching
-                  }
-                  resumes={resumes}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
+      <main className="h-[calc(100vh-2rem)] w-full overflow-y-auto">
+        <Hero />
+        <PrimaryFeatures />
+        <CallToAction />
+        <Testimonials />
       </main>
     </>
   );
diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index 97ea8f12..dc97e95a 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -2,17 +2,29 @@ import axios from 'axios';
 import clsx from 'clsx';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useMemo, useState } from 'react';
+import { useSession } from 'next-auth/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { FileRejection } from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
-import { PaperClipIcon } from '@heroicons/react/24/outline';
-import { Button, CheckboxInput, Select, TextArea, TextInput } from '@tih/ui';
+import { ArrowUpCircleIcon } from '@heroicons/react/24/outline';
+import {
+  Button,
+  CheckboxInput,
+  Dialog,
+  Select,
+  TextArea,
+  TextInput,
+} from '@tih/ui';
 
+import type { Filter } from '~/components/resumes/browse/resumeFilters';
 import {
   EXPERIENCE,
   LOCATION,
-  ROLES,
-} from '~/components/resumes/browse/constants';
+  ROLE,
+} from '~/components/resumes/browse/resumeFilters';
+import SubmissionGuidelines from '~/components/resumes/submit-form/SubmissionGuidelines';
 
 import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
 import { trpc } from '~/utils/trpc';
@@ -35,85 +47,171 @@ type IFormInput = {
   title: string;
 };
 
-export default function SubmitResumeForm() {
-  const resumeCreateMutation = trpc.useMutation('resumes.resume.user.create');
-  const router = useRouter();
+const selectors: Array<Filter> = [
+  { id: 'role', label: 'Role', options: ROLE },
+  { id: 'experience', label: 'Experience Level', options: EXPERIENCE },
+  { id: 'location', label: 'Location', options: LOCATION },
+];
+
+type InitFormDetails = {
+  additionalInfo?: string;
+  experience: string;
+  location: string;
+  resumeId: string;
+  role: string;
+  title: string;
+  url: string;
+};
 
-  const [resumeFile, setResumeFile] = useState<File | null>();
+type Props = Readonly<{
+  initFormDetails?: InitFormDetails | null;
+  onClose: () => void;
+}>;
+
+export default function SubmitResumeForm({
+  initFormDetails,
+  onClose = () => undefined,
+}: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const [invalidFileUploadError, setInvalidFileUploadError] = useState<
     string | null
   >(null);
+  const [isDialogShown, setIsDialogShown] = useState(false);
+
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const resumeUpsertMutation = trpc.useMutation('resumes.resume.user.upsert');
+  const isNewForm = initFormDetails == null;
 
   const {
     register,
     handleSubmit,
     setValue,
     reset,
-    formState: { errors },
+    watch,
+    formState: { errors, isDirty, dirtyFields },
   } = useForm<IFormInput>({
     defaultValues: {
       isChecked: false,
+      ...initFormDetails,
     },
   });
 
-  const onSubmit: SubmitHandler<IFormInput> = async (data) => {
-    if (resumeFile == null) {
-      console.error('Resume file is empty');
-      return;
+  const resumeFile = watch('file');
+
+  const onFileDrop = useCallback(
+    (acceptedFiles: Array<File>, fileRejections: Array<FileRejection>) => {
+      if (fileRejections.length === 0) {
+        setInvalidFileUploadError('');
+        setValue('file', acceptedFiles[0], {
+          shouldDirty: true,
+        });
+      } else {
+        setInvalidFileUploadError(FILE_UPLOAD_ERROR);
+      }
+    },
+    [setValue],
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: {
+      'application/pdf': ['.pdf'],
+    },
+    maxFiles: 1,
+    maxSize: FILE_SIZE_LIMIT_BYTES,
+    noClick: isLoading,
+    noDrag: isLoading,
+    onDrop: onFileDrop,
+  });
+
+  // Route user to sign in if not logged in
+  useEffect(() => {
+    if (status !== 'loading') {
+      if (session?.user?.id == null) {
+        router.push('/api/auth/signin');
+      }
     }
+  }, [router, session, status]);
+
+  const onSubmit: SubmitHandler<IFormInput> = async (data) => {
     setIsLoading(true);
+    let fileUrl = initFormDetails?.url ?? '';
 
-    const formData = new FormData();
-    formData.append('key', RESUME_STORAGE_KEY);
-    formData.append('file', resumeFile);
+    // Only update file in fs when it changes
+    if (dirtyFields.file) {
+      const formData = new FormData();
+      formData.append('key', RESUME_STORAGE_KEY);
+      formData.append('file', resumeFile);
 
-    const res = await axios.post('/api/file-storage', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    });
-    const { url } = res.data;
+      const res = await axios.post('/api/file-storage', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      fileUrl = res.data.url;
+    }
 
-    resumeCreateMutation.mutate(
+    resumeUpsertMutation.mutate(
       {
         additionalInfo: data.additionalInfo,
         experience: data.experience,
+        id: initFormDetails?.resumeId,
         location: data.location,
         role: data.role,
         title: data.title,
-        url,
+        url: fileUrl,
       },
       {
-        onError: (error) => {
+        onError(error) {
           console.error(error);
         },
-        onSettled: () => {
+        onSettled() {
           setIsLoading(false);
         },
-        onSuccess: () => {
-          router.push('/resumes');
+        onSuccess() {
+          if (isNewForm) {
+            router.push('/resumes/browse');
+          } else {
+            onClose();
+          }
         },
       },
     );
   };
 
-  const onUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.item(0);
-    if (file == null) {
-      return;
-    }
-    if (file.type !== 'application/pdf' || file.size > FILE_SIZE_LIMIT_BYTES) {
-      setInvalidFileUploadError(FILE_UPLOAD_ERROR);
-      return;
+  const onClickClear = () => {
+    if (isDirty) {
+      setIsDialogShown(true);
+    } else {
+      onClose();
     }
-    setInvalidFileUploadError('');
-    setResumeFile(file);
   };
 
-  const onClickReset = () => {
+  const onClickResetDialog = () => {
+    onClose();
+    setIsDialogShown(false);
     reset();
-    setResumeFile(null);
+    setInvalidFileUploadError(null);
+  };
+
+  const onClickDownload = async (
+    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>,
+  ) => {
+    // Prevent click event from propagating up to dropzone
+    event.stopPropagation();
+
+    const url = window.URL.createObjectURL(resumeFile);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', resumeFile.name);
+    document.body.appendChild(link);
+
+    // Start download
+    link.click();
+
+    // Clean up and remove the link and object URL
+    link.remove();
+    URL.revokeObjectURL(url);
   };
 
   const fileUploadError = useMemo(() => {
@@ -134,9 +232,37 @@ export default function SubmitResumeForm() {
         <section
           aria-labelledby="primary-heading"
           className="flex h-full min-w-0 flex-1 flex-col lg:order-last">
+          {/* Reset Dialog component */}
+          <Dialog
+            isShown={isDialogShown}
+            primaryButton={
+              <Button
+                display="block"
+                label="OK"
+                variant="primary"
+                onClick={onClickResetDialog}
+              />
+            }
+            secondaryButton={
+              <Button
+                display="block"
+                label="Cancel"
+                variant="tertiary"
+                onClick={() => setIsDialogShown(false)}
+              />
+            }
+            title={
+              isNewForm
+                ? 'Are you sure you want to clear?'
+                : 'Are you sure you want to leave?'
+            }
+            onClose={() => setIsDialogShown(false)}>
+            Note that your current input will not be saved!
+          </Dialog>
           <div className="mx-20 space-y-4 py-8">
             <form onSubmit={handleSubmit(onSubmit)}>
               <h1 className="mb-4 text-2xl font-bold">Upload a resume</h1>
+              {/*  Title Section */}
               <div className="mb-4">
                 <TextInput
                   {...register('title', { required: true })}
@@ -147,83 +273,87 @@ export default function SubmitResumeForm() {
                   onChange={(val) => setValue('title', val)}
                 />
               </div>
-              <div className="mb-4">
-                <Select
-                  {...register('role', { required: true })}
-                  disabled={isLoading}
-                  label="Role"
-                  options={ROLES}
-                  required={true}
-                  onChange={(val) => setValue('role', val)}
-                />
-              </div>
-              <div className="mb-4">
-                <Select
-                  {...register('experience', { required: true })}
-                  disabled={isLoading}
-                  label="Experience Level"
-                  options={EXPERIENCE}
-                  required={true}
-                  onChange={(val) => setValue('experience', val)}
-                />
-              </div>
-              <div className="mb-4">
-                <Select
-                  {...register('location', { required: true })}
-                  disabled={isLoading}
-                  label="Location"
-                  name="location"
-                  options={LOCATION}
-                  required={true}
-                  onChange={(val) => setValue('location', val)}
-                />
-              </div>
-              <p className="text-sm font-medium text-slate-700">
-                Upload resume (PDF format)
-                <span aria-hidden="true" className="text-danger-500">
-                  {' '}
-                  *
-                </span>
-              </p>
-              <div className="mb-4">
-                <div
-                  className={clsx(
-                    fileUploadError ? 'border-danger-600' : 'border-gray-300',
-                    'mt-2 flex justify-center rounded-md border-2 border-dashed  px-6 pt-5 pb-6',
-                  )}>
-                  <div className="space-y-1 text-center">
-                    <div className="flex gap-2">
-                      <PaperClipIcon className="m-auto h-8 w-8 text-gray-600" />
-                      {resumeFile && <p>{resumeFile.name}</p>}
-                    </div>
-                    <div className="flex justify-center text-sm">
-                      <label
-                        className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
-                        htmlFor="file-upload">
-                        <p className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-500">
-                          Upload a file
+              {/*  Selectors */}
+              {selectors.map((item) => (
+                <div key={item.id} className="mb-4">
+                  <Select
+                    {...register(item.id, { required: true })}
+                    disabled={isLoading}
+                    label={item.label}
+                    options={item.options}
+                    required={true}
+                    onChange={(val) => setValue(item.id, val)}
+                  />
+                </div>
+              ))}
+              {/* Upload resume form */}
+              {isNewForm && (
+                <>
+                  <p className="text-sm font-medium text-slate-700">
+                    Upload resume (PDF format)
+                    <span aria-hidden="true" className="text-danger-500">
+                      {' '}
+                      *
+                    </span>
+                  </p>
+                  <div className="mb-4">
+                    <div
+                      {...getRootProps()}
+                      className={clsx(
+                        fileUploadError
+                          ? 'border-danger-600'
+                          : 'border-gray-300',
+                        'mt-2 flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 px-6 pt-5 pb-6',
+                      )}>
+                      <div className="space-y-1 text-center">
+                        {resumeFile == null ? (
+                          <ArrowUpCircleIcon className="m-auto h-10 w-10 text-indigo-500" />
+                        ) : (
+                          <p
+                            className="cursor-pointer underline underline-offset-1 hover:text-indigo-600"
+                            onClick={onClickDownload}>
+                            {resumeFile.name}
+                          </p>
+                        )}
+                        <div className="flex justify-center text-sm">
+                          <label
+                            className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
+                            htmlFor="file-upload">
+                            <p className="mt-2 font-medium">Drop files here</p>
+                            <div className="mt-2 mb-1 flex justify-center gap-1">
+                              <span className="font-light">or</span>
+                              <span className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400">
+                                {resumeFile == null
+                                  ? 'Select file'
+                                  : 'Replace file'}
+                              </span>
+                            </div>
+                            <input
+                              {...register('file', { required: true })}
+                              {...getInputProps()}
+                              accept="application/pdf"
+                              className="sr-only"
+                              disabled={isLoading}
+                              id="file-upload"
+                              name="file-upload"
+                              type="file"
+                            />
+                          </label>
+                        </div>
+                        <p className="text-xs text-gray-500">
+                          PDF up to {FILE_SIZE_LIMIT_MB}MB
                         </p>
-                        <input
-                          {...register('file', { required: true })}
-                          accept="application/pdf"
-                          className="sr-only"
-                          disabled={isLoading}
-                          id="file-upload"
-                          name="file-upload"
-                          type="file"
-                          onChange={onUploadFile}
-                        />
-                      </label>
+                      </div>
                     </div>
-                    <p className="text-xs text-gray-500">
-                      PDF up to {FILE_SIZE_LIMIT_MB}MB
-                    </p>
+                    {fileUploadError && (
+                      <p className="text-danger-600 text-sm">
+                        {fileUploadError}
+                      </p>
+                    )}
                   </div>
-                </div>
-                {fileUploadError && (
-                  <p className="text-danger-600 text-sm">{fileUploadError}</p>
-                )}
-              </div>
+                </>
+              )}
+              {/*  Additional Info Section */}
               <div className="mb-8">
                 <TextArea
                   {...register('additionalInfo')}
@@ -233,58 +363,28 @@ export default function SubmitResumeForm() {
                   onChange={(val) => setValue('additionalInfo', val)}
                 />
               </div>
-              <div className="mb-4 text-left text-sm text-slate-700">
-                <h2 className="mb-2 text-xl font-medium">
-                  Submission Guidelines
-                </h2>
-                <p>
-                  Before you submit, please review and acknolwedge our
-                  <span className="font-bold"> submission guidelines </span>
-                  stated below.
-                </p>
-                <p>
-                  <span className="text-lg font-bold">• </span>
-                  Ensure that you do not divulge any of your
-                  <span className="font-bold"> personal particulars</span>.
-                </p>
-                <p>
-                  <span className="text-lg font-bold">• </span>
-                  Ensure that you do not divulge any
-                  <span className="font-bold">
-                    {' '}
-                    company's proprietary and confidential information
-                  </span>
-                  .
-                </p>
-                <p>
-                  <span className="text-lg font-bold">• </span>
-                  Proof-read your resumes to look for grammatical/spelling
-                  errors.
-                </p>
-              </div>
+              {/*  Submission Guidelines */}
+              <SubmissionGuidelines />
               <CheckboxInput
                 {...register('isChecked', { required: true })}
                 disabled={isLoading}
                 label="I have read and will follow the guidelines stated."
                 onChange={(val) => setValue('isChecked', val)}
               />
+              {/*  Clear and Submit Buttons */}
               <div className="mt-4 flex justify-end gap-4">
                 <Button
                   addonPosition="start"
                   disabled={isLoading}
-                  display="inline"
-                  label="Clear"
-                  size="md"
+                  label={isNewForm ? 'Clear' : 'Cancel'}
                   variant="tertiary"
-                  onClick={onClickReset}
+                  onClick={onClickClear}
                 />
                 <Button
                   addonPosition="start"
                   disabled={isLoading}
-                  display="inline"
                   isLoading={isLoading}
                   label="Submit"
-                  size="md"
                   type="submit"
                   variant="primary"
                 />
diff --git a/apps/portal/src/server/router/index.ts b/apps/portal/src/server/router/index.ts
index c018c3f7..c3046659 100644
--- a/apps/portal/src/server/router/index.ts
+++ b/apps/portal/src/server/router/index.ts
@@ -2,17 +2,21 @@ import superjson from 'superjson';
 
 import { companiesRouter } from './companies-router';
 import { createRouter } from './context';
-import { offersRouter } from './offers';
-import { offersProfileRouter } from './offers-profile-router';
+import { offersRouter } from './offers/offers';
+import { offersAnalysisRouter } from './offers/offers-analysis-router';
+import { offersCommentsRouter } from './offers/offers-comments-router';
+import { offersProfileRouter } from './offers/offers-profile-router';
 import { protectedExampleRouter } from './protected-example-router';
 import { questionsAnswerCommentRouter } from './questions-answer-comment-router';
 import { questionsAnswerRouter } from './questions-answer-router';
 import { questionsQuestionCommentRouter } from './questions-question-comment-router';
 import { questionsQuestionRouter } from './questions-question-router';
+import { resumeCommentsRouter } from './resumes/resumes-comments-router';
+import { resumesCommentsUserRouter } from './resumes/resumes-comments-user-router';
+import { resumesCommentsVotesRouter } from './resumes/resumes-comments-votes-router';
+import { resumesCommentsVotesUserRouter } from './resumes/resumes-comments-votes-user-router';
 import { resumesRouter } from './resumes/resumes-resume-router';
 import { resumesResumeUserRouter } from './resumes/resumes-resume-user-router';
-import { resumeReviewsRouter } from './resumes/resumes-reviews-router';
-import { resumesReviewsUserRouter } from './resumes/resumes-reviews-user-router';
 import { resumesStarUserRouter } from './resumes/resumes-star-user-router';
 import { todosRouter } from './todos';
 import { todosUserRouter } from './todos-user-router';
@@ -28,15 +32,19 @@ export const appRouter = createRouter()
   .merge('companies.', companiesRouter)
   .merge('resumes.resume.', resumesRouter)
   .merge('resumes.resume.user.', resumesResumeUserRouter)
-  .merge('resumes.star.user.', resumesStarUserRouter)
-  .merge('resumes.reviews.', resumeReviewsRouter)
-  .merge('resumes.reviews.user.', resumesReviewsUserRouter)
+  .merge('resumes.resume.', resumesStarUserRouter)
+  .merge('resumes.comments.', resumeCommentsRouter)
+  .merge('resumes.comments.user.', resumesCommentsUserRouter)
+  .merge('resumes.comments.votes.', resumesCommentsVotesRouter)
+  .merge('resumes.comments.votes.user.', resumesCommentsVotesUserRouter)
   .merge('questions.answers.comments.', questionsAnswerCommentRouter)
   .merge('questions.answers.', questionsAnswerRouter)
   .merge('questions.questions.comments.', questionsQuestionCommentRouter)
   .merge('questions.questions.', questionsQuestionRouter)
   .merge('offers.', offersRouter)
-  .merge('offers.profile.', offersProfileRouter);
+  .merge('offers.profile.', offersProfileRouter)
+  .merge('offers.analysis.', offersAnalysisRouter)
+  .merge('offers.comments.', offersCommentsRouter);
 
 // Export type definition of API
 export type AppRouter = typeof appRouter;
diff --git a/apps/portal/src/server/router/offers-profile-router.ts b/apps/portal/src/server/router/offers-profile-router.ts
deleted file mode 100644
index 3434d854..00000000
--- a/apps/portal/src/server/router/offers-profile-router.ts
+++ /dev/null
@@ -1,269 +0,0 @@
-import crypto, { randomUUID } from "crypto";
-import { z } from "zod";
-import { Prisma } from "@prisma/client";
-
-import { createRouter } from "./context";
-
-const valuation = z.object({
-    currency: z.string(),
-    value: z.number(),
-})
-
-// TODO: handle both full time and intern
-const offer = z.object({
-    comments: z.string(),
-    companyId: z.string(),
-    job: z.object({
-        base: valuation.optional(), // Full time
-        bonus: valuation.optional(), // Full time
-        internshipCycle: z.string().optional(), // Intern
-        level: z.string().optional(), // Full time
-        monthlySalary: valuation.optional(), // Intern
-        specialization: z.string(),
-        startYear: z.number().optional(), // Intern
-        stocks: valuation.optional(), // Full time
-        title: z.string(),
-        totalCompensation: valuation.optional(), // Full time
-    }),
-    jobType: z.string(),
-    location: z.string(),
-    monthYearReceived: z.date(),
-    negotiationStrategy: z.string(),
-})
-
-const experience = z.object({
-    companyId: z.string().optional(),
-    durationInMonths: z.number().optional(),
-    jobType: z.string().optional(),
-    level: z.string().optional(),
-    monthlySalary: valuation.optional(),
-    specialization: z.string().optional(),
-    title: z.string().optional(),
-    totalCompensation: valuation.optional(),
-})
-
-const education = z.object({
-    endDate: z.date().optional(),
-    field: z.string().optional(),
-    school: z.string().optional(),
-    startDate: z.date().optional(),
-    type: z.string().optional(),
-})
-
-export const offersProfileRouter = createRouter().mutation(
-    'create',
-    {
-        input: z.object({
-            background: z.object({
-                educations: z.array(education),
-                experiences: z.array(experience),
-                specificYoes: z.array(z.object({
-                    domain: z.string(),
-                    yoe: z.number()
-                })),
-                totalYoe: z.number().optional(),
-            }),
-            offers: z.array(offer)
-        }),
-        async resolve({ ctx, input }) {
-
-            // TODO: add more
-            const token = crypto
-            .createHash("sha256")
-            .update(Date.now().toString())
-            .digest("hex");
-
-            const profile = await ctx.prisma.offersProfile.create({
-                data: {
-                    background: {
-                        create: {
-                            educations: {
-                                create:
-                                    input.background.educations.map((x) => ({
-                                        endDate: x.endDate,
-                                        field: x.field,
-                                        school: x.school,
-                                        startDate: x.startDate,
-                                        type: x.type
-                                    }))
-                            },
-                            experiences: {
-                                create:
-                                    input.background.experiences.map((x) => {
-                                        if (x.jobType === "FULLTIME" && x.totalCompensation?.currency !== undefined && x.totalCompensation.value !== undefined) {
-                                            return {
-                                                company: {
-                                                    connect: {
-                                                        id: x.companyId
-                                                    }
-                                                },
-                                                durationInMonths: x.durationInMonths,
-                                                jobType: x.jobType,
-                                                level: x.level,
-                                                specialization: x.specialization,
-                                                title: x.title,
-                                                totalCompensation: {
-                                                    create: {
-                                                        currency: x.totalCompensation?.currency,
-                                                        value: x.totalCompensation?.value,
-                                                    }
-                                                },
-                                            }
-                                        }
-                                        if (x.jobType === "INTERN" && x.monthlySalary?.currency !== undefined && x.monthlySalary.value !== undefined) {
-                                            return {
-                                                company: {
-                                                    connect: {
-                                                        id: x.companyId
-                                                    }
-                                                },
-                                                durationInMonths: x.durationInMonths,
-                                                jobType: x.jobType,
-                                                monthlySalary: {
-                                                    create: {
-                                                        currency: x.monthlySalary?.currency,
-                                                        value: x.monthlySalary?.value
-                                                    }
-                                                },
-                                                specialization: x.specialization,
-                                                title: x.title,
-                                            }
-                                        }
-
-                                        throw Prisma.PrismaClientKnownRequestError
-
-                                    })
-                            },
-                            specificYoes: {
-                                create:
-                                    input.background.specificYoes.map((x) => ({
-                                        domain: x.domain,
-                                        yoe: x.yoe
-                                    }))
-                            },
-                            totalYoe: input.background.totalYoe,
-                        }
-                    },
-                    editToken: token,
-                    offers: {
-                        create:
-                            input.offers.map((x) => {
-                                if (x.jobType === "INTERN"  && x.job.internshipCycle !== undefined && x.job.monthlySalary?.currency !== undefined && x.job.monthlySalary.value !== undefined && x.job.startYear !== undefined) {
-                                    return {
-                                        OffersIntern: {
-                                            create: {
-                                                internshipCycle: x.job.internshipCycle,
-                                                monthlySalary: {
-                                                    create: {
-                                                        currency: x.job.monthlySalary?.currency,
-                                                        value: x.job.monthlySalary?.value
-                                                    }
-                                                },
-                                                specialization: x.job.specialization,
-                                                startYear: x.job.startYear,
-                                                title: x.job.title,
-                                            }
-                                        },
-                                        comments: x.comments,
-                                        company: {
-                                            connect: {
-                                                id: x.companyId
-                                            }
-                                        },
-                                        jobType: x.jobType,
-                                        location: x.location,
-                                        monthYearReceived: x.monthYearReceived,
-                                        negotiationStrategy: x.negotiationStrategy
-                                    }
-                                }
-                                if (x.jobType === "FULLTIME" && x.job.base?.currency !== undefined && x.job.base?.value !== undefined && x.job.bonus?.currency !== undefined && x.job.bonus?.value !== undefined && x.job.stocks?.currency !== undefined && x.job.stocks?.value !== undefined && x.job.totalCompensation?.currency !== undefined && x.job.totalCompensation?.value !== undefined && x.job.level !== undefined) {
-                                    return {
-                                        OffersFullTime: {
-                                                create: {
-                                                    baseSalary: {
-                                                        create: {
-                                                            currency: x.job.base?.currency,
-                                                            value: x.job.base?.value
-                                                        }
-                                                    },
-                                                    bonus: {
-                                                        create: {
-                                                            currency: x.job.bonus?.currency,
-                                                            value: x.job.bonus?.value
-                                                        }
-                                                    },
-                                                    level: x.job.level,
-                                                    specialization: x.job.specialization,
-                                                    stocks: {
-                                                        create: {
-                                                            currency: x.job.stocks?.currency,
-                                                            value: x.job.stocks?.value,
-                                                        }
-                                                    },
-                                                    title: x.job.title,
-                                                    totalCompensation: {
-                                                        create: {
-                                                            currency: x.job.totalCompensation?.currency,
-                                                            value: x.job.totalCompensation?.value,
-                                                        }
-                                                    },
-                                                }
-                                            },
-                                        comments: x.comments,
-                                        company: {
-                                            connect: {
-                                                id: x.companyId
-                                            }
-                                        },
-                                        jobType: x.jobType,
-                                        location: x.location,
-                                        monthYearReceived: x.monthYearReceived,
-                                        negotiationStrategy: x.negotiationStrategy
-                                    }
-                                }
-
-                                // Throw error
-                                throw Prisma.PrismaClientKnownRequestError
-                            })
-                    },
-                    profileName: randomUUID(),
-                },
-                include: {
-                    background: {
-                        include: {
-                            educations: true,
-                            experiences: {
-                                include: {
-                                    company: true,
-                                    monthlySalary: true,
-                                    totalCompensation: true
-                                }
-                            },
-                            specificYoes: true
-                        }
-                    },
-                    offers: {
-                        include: {
-                            OffersFullTime: {
-                                include: {
-                                    baseSalary: true,
-                                    bonus: true,
-                                    stocks: true,
-                                    totalCompensation: true
-                                }
-                            },
-                            OffersIntern: {
-                                include: {
-                                    monthlySalary: true
-                                }
-                            }
-                        }
-                    }
-                },
-            });
-
-            // TODO: add analysis to profile object then return
-            return profile
-        }
-    },
-);
diff --git a/apps/portal/src/server/router/offers/offers-analysis-router.ts b/apps/portal/src/server/router/offers/offers-analysis-router.ts
new file mode 100644
index 00000000..de92b546
--- /dev/null
+++ b/apps/portal/src/server/router/offers/offers-analysis-router.ts
@@ -0,0 +1,470 @@
+import { z } from 'zod';
+import type {
+  Company,
+  OffersBackground,
+  OffersCurrency,
+  OffersFullTime,
+  OffersIntern,
+  OffersOffer,
+  OffersProfile,
+} from '@prisma/client';
+import { TRPCError } from '@trpc/server';
+
+import { profileAnalysisDtoMapper } from '~/mappers/offers-mappers';
+
+import { createRouter } from '../context';
+
+const searchOfferPercentile = (
+  offer: OffersOffer & {
+    OffersFullTime:
+      | (OffersFullTime & {
+          baseSalary: OffersCurrency;
+          bonus: OffersCurrency;
+          stocks: OffersCurrency;
+          totalCompensation: OffersCurrency;
+        })
+      | null;
+    OffersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+    company: Company;
+    profile: OffersProfile & { background: OffersBackground | null };
+  },
+  similarOffers: Array<
+    OffersOffer & {
+      OffersFullTime:
+        | (OffersFullTime & {
+            totalCompensation: OffersCurrency;
+          })
+        | null;
+      OffersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+      company: Company;
+      profile: OffersProfile & { background: OffersBackground | null };
+    }
+  >,
+) => {
+  for (let i = 0; i < similarOffers.length; i++) {
+    if (similarOffers[i].id === offer.id) {
+      return i;
+    }
+  }
+
+  return -1;
+};
+
+export const offersAnalysisRouter = createRouter()
+  .query('generate', {
+    input: z.object({
+      profileId: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      await ctx.prisma.offersAnalysis.deleteMany({
+        where: {
+          profileId: input.profileId,
+        },
+      });
+
+      const offers = await ctx.prisma.offersOffer.findMany({
+        include: {
+          OffersFullTime: {
+            include: {
+              baseSalary: true,
+              bonus: true,
+              stocks: true,
+              totalCompensation: true,
+            },
+          },
+          OffersIntern: {
+            include: {
+              monthlySalary: true,
+            },
+          },
+          company: true,
+          profile: {
+            include: {
+              background: true,
+            },
+          },
+        },
+        orderBy: [
+          {
+            OffersFullTime: {
+              totalCompensation: {
+                value: 'desc',
+              },
+            },
+          },
+          {
+            OffersIntern: {
+              monthlySalary: {
+                value: 'desc',
+              },
+            },
+          },
+        ],
+        where: {
+          profileId: input.profileId,
+        },
+      });
+
+      if (!offers || offers.length === 0) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'No offers found on this profile',
+        });
+      }
+
+      const overallHighestOffer = offers[0];
+
+      // TODO: Shift yoe out of background to make it mandatory
+      if (
+        !overallHighestOffer.profile.background ||
+        !overallHighestOffer.profile.background.totalYoe
+      ) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'Cannot analyse without YOE',
+        });
+      }
+
+      const yoe = overallHighestOffer.profile.background.totalYoe as number;
+
+      let similarOffers = await ctx.prisma.offersOffer.findMany({
+        include: {
+          OffersFullTime: {
+            include: {
+              totalCompensation: true,
+            },
+          },
+          OffersIntern: {
+            include: {
+              monthlySalary: true,
+            },
+          },
+          company: true,
+          profile: {
+            include: {
+              background: {
+                include: {
+                  experiences: {
+                    include: {
+                      company: true,
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+        orderBy: [
+          {
+            OffersFullTime: {
+              totalCompensation: {
+                value: 'desc',
+              },
+            },
+          },
+          {
+            OffersIntern: {
+              monthlySalary: {
+                value: 'desc',
+              },
+            },
+          },
+        ],
+        where: {
+          AND: [
+            {
+              location: overallHighestOffer.location,
+            },
+            {
+              OR: [
+                {
+                  OffersFullTime: {
+                    level: overallHighestOffer.OffersFullTime?.level,
+                    specialization:
+                      overallHighestOffer.OffersFullTime?.specialization,
+                  },
+                  OffersIntern: {
+                    specialization:
+                      overallHighestOffer.OffersIntern?.specialization,
+                  },
+                },
+              ],
+            },
+            {
+              profile: {
+                background: {
+                  AND: [
+                    {
+                      totalYoe: {
+                        gte: Math.max(yoe - 1, 0),
+                        lte: yoe + 1,
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      });
+
+      let similarCompanyOffers = similarOffers.filter(
+        (offer) => offer.companyId === overallHighestOffer.companyId,
+      );
+
+      // CALCULATE PERCENTILES
+      const overallIndex = searchOfferPercentile(
+        overallHighestOffer,
+        similarOffers,
+      );
+      const overallPercentile =
+        similarOffers.length === 0 ? 0 : overallIndex / similarOffers.length;
+
+      const companyIndex = searchOfferPercentile(
+        overallHighestOffer,
+        similarCompanyOffers,
+      );
+      const companyPercentile =
+        similarCompanyOffers.length === 0
+          ? 0
+          : companyIndex / similarCompanyOffers.length;
+
+      // FIND TOP >=90 PERCENTILE OFFERS
+      similarOffers = similarOffers.filter(
+        (offer) => offer.id !== overallHighestOffer.id,
+      );
+      similarCompanyOffers = similarCompanyOffers.filter(
+        (offer) => offer.id !== overallHighestOffer.id,
+      );
+
+      const noOfSimilarOffers = similarOffers.length;
+      const similarOffers90PercentileIndex =
+        Math.floor(noOfSimilarOffers * 0.9) - 1;
+      const topPercentileOffers =
+        noOfSimilarOffers > 1
+          ? similarOffers.slice(
+              similarOffers90PercentileIndex,
+              similarOffers90PercentileIndex + 2,
+            )
+          : similarOffers;
+
+      const noOfSimilarCompanyOffers = similarCompanyOffers.length;
+      const similarCompanyOffers90PercentileIndex =
+        Math.floor(noOfSimilarCompanyOffers * 0.9) - 1;
+      const topPercentileCompanyOffers =
+        noOfSimilarCompanyOffers > 1
+          ? similarCompanyOffers.slice(
+              similarCompanyOffers90PercentileIndex,
+              similarCompanyOffers90PercentileIndex + 2,
+            )
+          : similarCompanyOffers;
+
+      const analysis = await ctx.prisma.offersAnalysis.create({
+        data: {
+          companyPercentile,
+          noOfSimilarCompanyOffers,
+          noOfSimilarOffers,
+          overallHighestOffer: {
+            connect: {
+              id: overallHighestOffer.id,
+            },
+          },
+          overallPercentile,
+          profile: {
+            connect: {
+              id: input.profileId,
+            },
+          },
+          topCompanyOffers: {
+            connect: topPercentileCompanyOffers.map((offer) => {
+              return { id: offer.id };
+            }),
+          },
+          topOverallOffers: {
+            connect: topPercentileOffers.map((offer) => {
+              return { id: offer.id };
+            }),
+          },
+        },
+        include: {
+          overallHighestOffer: {
+            include: {
+              OffersFullTime: {
+                include: {
+                  totalCompensation: true,
+                },
+              },
+              OffersIntern: {
+                include: {
+                  monthlySalary: true,
+                },
+              },
+              company: true,
+              profile: {
+                include: {
+                  background: true,
+                },
+              },
+            },
+          },
+          topCompanyOffers: {
+            include: {
+              OffersFullTime: {
+                include: {
+                  totalCompensation: true,
+                },
+              },
+              OffersIntern: {
+                include: {
+                  monthlySalary: true,
+                },
+              },
+              company: true,
+              profile: {
+                include: {
+                  background: {
+                    include: {
+                      experiences: {
+                        include: {
+                          company: true,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          topOverallOffers: {
+            include: {
+              OffersFullTime: {
+                include: {
+                  totalCompensation: true,
+                },
+              },
+              OffersIntern: {
+                include: {
+                  monthlySalary: true,
+                },
+              },
+              company: true,
+              profile: {
+                include: {
+                  background: {
+                    include: {
+                      experiences: {
+                        include: {
+                          company: true,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      });
+
+      return profileAnalysisDtoMapper(analysis);
+    },
+  })
+  .query('get', {
+    input: z.object({
+      profileId: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      const analysis = await ctx.prisma.offersAnalysis.findFirst({
+        include: {
+          overallHighestOffer: {
+            include: {
+              OffersFullTime: {
+                include: {
+                  totalCompensation: true,
+                },
+              },
+              OffersIntern: {
+                include: {
+                  monthlySalary: true,
+                },
+              },
+              company: true,
+              profile: {
+                include: {
+                  background: true,
+                },
+              },
+            },
+          },
+          topCompanyOffers: {
+            include: {
+              OffersFullTime: {
+                include: {
+                  totalCompensation: true,
+                },
+              },
+              OffersIntern: {
+                include: {
+                  monthlySalary: true,
+                },
+              },
+              company: true,
+              profile: {
+                include: {
+                  background: {
+                    include: {
+                      experiences: {
+                        include: {
+                          company: true,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          topOverallOffers: {
+            include: {
+              OffersFullTime: {
+                include: {
+                  totalCompensation: true,
+                },
+              },
+              OffersIntern: {
+                include: {
+                  monthlySalary: true,
+                },
+              },
+              company: true,
+              profile: {
+                include: {
+                  background: {
+                    include: {
+                      experiences: {
+                        include: {
+                          company: true,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+        where: {
+          profileId: input.profileId,
+        },
+      });
+
+      if (!analysis) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'No analysis found on this profile',
+        });
+      }
+
+      return profileAnalysisDtoMapper(analysis);
+    },
+  });
diff --git a/apps/portal/src/server/router/offers/offers-comments-router.ts b/apps/portal/src/server/router/offers/offers-comments-router.ts
new file mode 100644
index 00000000..2e6b9e38
--- /dev/null
+++ b/apps/portal/src/server/router/offers/offers-comments-router.ts
@@ -0,0 +1,335 @@
+import { z } from 'zod';
+import * as trpc from '@trpc/server';
+
+import { createRouter } from '../context';
+
+import type { OffersDiscussion, Reply } from '~/types/offers';
+
+export const offersCommentsRouter = createRouter()
+  .query('getComments', {
+    input: z.object({
+      profileId: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      const profile = await ctx.prisma.offersProfile.findFirst({
+        where: {
+          id: input.profileId,
+        },
+      });
+
+      const result = await ctx.prisma.offersProfile.findFirst({
+        include: {
+          discussion: {
+            include: {
+              replies: {
+                include: {
+                  user: true,
+                },
+                orderBy: {
+                  createdAt: 'desc'
+                }
+              },
+              replyingTo: true,
+              user: true,
+            },
+            orderBy: {
+              createdAt: 'desc'
+            }
+          },
+        },
+        where: {
+          id: input.profileId,
+        }
+      });
+
+      const discussions: OffersDiscussion = {
+        data: result?.discussion
+            .filter((x) => {
+            return x.replyingToId === null
+            })
+            .map((x) => {
+              if (x.user == null) {
+                x.user = {
+                  email: '',
+                  emailVerified: null,
+                  id: '',
+                  image: '',
+                  name: profile?.profileName ?? '<missing name>',
+                };
+              }
+
+              x.replies?.map((y) => {
+                if (y.user == null) {
+                  y.user = {
+                    email: '',
+                    emailVerified: null,
+                    id: '',
+                    image: '',
+                    name: profile?.profileName ?? '<missing name>',
+                  };
+                }
+              });
+
+              const replyType: Reply = {
+                createdAt: x.createdAt,
+                id: x.id,
+                message: x.message,
+                replies: x.replies.map((reply) => {
+                  return {
+                    createdAt: reply.createdAt,
+                    id: reply.id,
+                    message: reply.message,
+                    replies: [],
+                    replyingToId: reply.replyingToId,
+                    user: reply.user
+                  }
+                }),
+                replyingToId: x.replyingToId,
+                user: x.user
+              }
+
+              return replyType
+            }) ?? []
+      }
+
+      return discussions
+    },
+  })
+  .mutation('create', {
+    input: z.object({
+      message: z.string(),
+      profileId: z.string(),
+      replyingToId: z.string().optional(),
+      token: z.string().optional(),
+      userId: z.string().optional()
+    }),
+    async resolve({ ctx, input }) {
+      const profile = await ctx.prisma.offersProfile.findFirst({
+        where: {
+          id: input.profileId,
+        },
+      });
+
+      const profileEditToken = profile?.editToken;
+
+      if (input.token === profileEditToken || input.userId) {
+        const createdReply = await ctx.prisma.offersReply.create({
+          data: {
+            message: input.message,
+            profile: {
+              connect: {
+                id: input.profileId,
+              },
+            },
+          },
+        });
+
+        if (input.replyingToId) {
+          await ctx.prisma.offersReply.update({
+            data: {
+              replyingTo: {
+                connect: {
+                  id: input.replyingToId,
+                },
+              },
+            },
+            where: {
+              id: createdReply.id,
+            },
+          });
+        }
+
+        if (input.userId) {
+          await ctx.prisma.offersReply.update({
+            data: {
+              user: {
+                connect: {
+                  id: input.userId,
+                },
+              },
+            },
+            where: {
+              id: createdReply.id,
+            },
+          });
+        }
+
+        const created = await ctx.prisma.offersReply.findFirst({
+          include: {
+            user: true
+          },
+          where: {
+            id: createdReply.id,
+          },
+        });
+
+        const result: Reply = {
+          createdAt: created!.createdAt,
+          id: created!.id,
+          message: created!.message,
+          replies: [], // New message should have no replies
+          replyingToId: created!.replyingToId,
+          user: created!.user ?? {
+            email: '',
+            emailVerified: null,
+            id: '',
+            image: '',
+            name: profile?.profileName ?? '<missing name>',
+          }
+        }
+
+        return result
+      }
+
+      throw new trpc.TRPCError({
+        code: 'UNAUTHORIZED',
+        message: 'Missing userId or wrong token.',
+      });
+    },
+  })
+  .mutation('update', {
+    input: z.object({
+      id: z.string(),
+      message: z.string(),
+      profileId: z.string(),
+      // Have to pass in either userID or token for validation
+      token: z.string().optional(),
+      userId: z.string().optional(),
+    }),
+    async resolve({ ctx, input }) {
+      const messageToUpdate = await ctx.prisma.offersReply.findFirst({
+        where: {
+          id: input.id,
+        },
+      });
+      const profile = await ctx.prisma.offersProfile.findFirst({
+        where: {
+          id: input.profileId,
+        },
+      });
+
+      const profileEditToken = profile?.editToken;
+
+      // To validate user editing, OP or correct user
+      // TODO: improve validation process
+      if (
+        profileEditToken === input.token ||
+        messageToUpdate?.userId === input.userId
+      ) {
+        const updated = await ctx.prisma.offersReply.update({
+          data: {
+            message: input.message,
+          },
+          include: {
+            replies: {
+              include: {
+                user: true
+              }
+            },
+            user: true
+          },
+          where: {
+            id: input.id,
+          },
+        });
+
+        const result: Reply = {
+          createdAt: updated!.createdAt,
+          id: updated!.id,
+          message: updated!.message,
+          replies: updated!.replies.map((x) => {
+            return {
+              createdAt: x.createdAt,
+              id: x.id,
+              message: x.message,
+              replies: [],
+              replyingToId: x.replyingToId,
+              user: x.user ?? {
+                email: '',
+                emailVerified: null,
+                id: '',
+                image: '',
+                name: profile?.profileName ?? '<missing name>',
+              }
+            }
+          }),
+          replyingToId: updated!.replyingToId,
+          user: updated!.user ?? {
+            email: '',
+            emailVerified: null,
+            id: '',
+            image: '',
+            name: profile?.profileName ?? '<missing name>',
+          }
+        }
+
+        return result
+      }
+
+      throw new trpc.TRPCError({
+        code: 'UNAUTHORIZED',
+        message: 'Wrong userId or token.',
+      });
+    },
+  })
+  .mutation('delete', {
+    input: z.object({
+      id: z.string(),
+      profileId: z.string(),
+      // Have to pass in either userID or token for validation
+      token: z.string().optional(),
+      userId: z.string().optional(),
+    }),
+    async resolve({ ctx, input }) {
+      const messageToDelete = await ctx.prisma.offersReply.findFirst({
+        where: {
+          id: input.id,
+        },
+      });
+      const profile = await ctx.prisma.offersProfile.findFirst({
+        where: {
+          id: input.profileId,
+        },
+      });
+
+      const profileEditToken = profile?.editToken;
+
+      // To validate user editing, OP or correct user
+      // TODO: improve validation process
+      if (
+        profileEditToken === input.token ||
+        messageToDelete?.userId === input.userId
+      ) {
+        await ctx.prisma.offersReply.delete({
+          where: {
+            id: input.id,
+          },
+        });
+        await ctx.prisma.offersProfile.findFirst({
+          include: {
+            discussion: {
+              include: {
+                replies: true,
+                replyingTo: true,
+                user: true,
+              },
+            },
+          },
+          where: {
+            id: input.profileId,
+          },
+        });
+
+        // If (result) {
+        //   return result.discussion.filter((x) => x.replyingToId === null);
+        // }
+
+        // return result;
+      }
+
+      throw new trpc.TRPCError({
+        code: 'UNAUTHORIZED',
+        message: 'Wrong userId or token.',
+      });
+    },
+  });
diff --git a/apps/portal/src/server/router/offers/offers-profile-router.ts b/apps/portal/src/server/router/offers/offers-profile-router.ts
new file mode 100644
index 00000000..11f74c3e
--- /dev/null
+++ b/apps/portal/src/server/router/offers/offers-profile-router.ts
@@ -0,0 +1,1123 @@
+import crypto, { randomUUID } from 'crypto';
+import { z } from 'zod';
+import * as trpc from '@trpc/server';
+
+import {
+  addToProfileResponseMapper,
+  createOfferProfileResponseMapper,
+  profileDtoMapper,
+} from '~/mappers/offers-mappers';
+
+import { createRouter } from '../context';
+
+const valuation = z.object({
+  currency: z.string(),
+  id: z.string().optional(),
+  value: z.number(),
+});
+
+const company = z.object({
+  createdAt: z.date(),
+  description: z.string().nullish(),
+  id: z.string().optional(),
+  logoUrl: z.string().nullish(),
+  name: z.string(),
+  slug: z.string(),
+  updatedAt: z.date(),
+});
+
+const offer = z.object({
+  OffersFullTime: z
+    .object({
+      baseSalary: valuation.nullish(),
+      baseSalaryId: z.string().nullish(),
+      bonus: valuation.nullish(),
+      bonusId: z.string().nullish(),
+      id: z.string().optional(),
+      level: z.string().nullish(),
+      specialization: z.string(),
+      stocks: valuation.nullish(),
+      stocksId: z.string().nullish(),
+      title: z.string(),
+      totalCompensation: valuation.nullish(),
+      totalCompensationId: z.string().nullish(),
+    })
+    .nullish(),
+  OffersIntern: z
+    .object({
+      id: z.string().optional(),
+      internshipCycle: z.string().nullish(),
+      monthlySalary: valuation.nullish(),
+      specialization: z.string(),
+      startYear: z.number().nullish(),
+      title: z.string(),
+      totalCompensation: valuation.nullish(), // Full time
+    })
+    .nullish(),
+  comments: z.string(),
+  company: company.nullish(),
+  companyId: z.string(),
+  id: z.string().optional(),
+  jobType: z.string(),
+  location: z.string(),
+  monthYearReceived: z.date(),
+  negotiationStrategy: z.string(),
+  offersFullTimeId: z.string().nullish(),
+  offersInternId: z.string().nullish(),
+  profileId: z.string().nullish(),
+});
+
+const experience = z.object({
+  backgroundId: z.string().nullish(),
+  company: company.nullish(),
+  companyId: z.string().nullish(),
+  durationInMonths: z.number().nullish(),
+  id: z.string().optional(),
+  jobType: z.string().nullish(),
+  level: z.string().nullish(),
+  monthlySalary: valuation.nullish(),
+  monthlySalaryId: z.string().nullish(),
+  specialization: z.string().nullish(),
+  title: z.string().nullish(),
+  totalCompensation: valuation.nullish(),
+  totalCompensationId: z.string().nullish(),
+});
+
+const education = z.object({
+  backgroundId: z.string().nullish(),
+  endDate: z.date().nullish(),
+  field: z.string().nullish(),
+  id: z.string().optional(),
+  school: z.string().nullish(),
+  startDate: z.date().nullish(),
+  type: z.string().nullish(),
+});
+
+const reply = z.object({
+  createdAt: z.date().nullish(),
+  id: z.string().optional(),
+  messages: z.string().nullish(),
+  profileId: z.string().nullish(),
+  replyingToId: z.string().nullish(),
+  userId: z.string().nullish(),
+});
+
+export const offersProfileRouter = createRouter()
+  .query('listOne', {
+    input: z.object({
+      profileId: z.string(),
+      token: z.string().optional(),
+    }),
+    async resolve({ ctx, input }) {
+      const result = await ctx.prisma.offersProfile.findFirst({
+        include: {
+          analysis: {
+            include: {
+              overallHighestOffer: {
+                include: {
+                  OffersFullTime: {
+                    include: {
+                      totalCompensation: true,
+                    },
+                  },
+                  OffersIntern: {
+                    include: {
+                      monthlySalary: true,
+                    },
+                  },
+                  company: true,
+                  profile: {
+                    include: {
+                      background: true,
+                    },
+                  },
+                },
+              },
+              topCompanyOffers: {
+                include: {
+                  OffersFullTime: {
+                    include: {
+                      totalCompensation: true,
+                    },
+                  },
+                  OffersIntern: {
+                    include: {
+                      monthlySalary: true,
+                    },
+                  },
+                  company: true,
+                  profile: {
+                    include: {
+                      background: {
+                        include: {
+                          experiences: {
+                            include: {
+                              company: true,
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+              topOverallOffers: {
+                include: {
+                  OffersFullTime: {
+                    include: {
+                      totalCompensation: true,
+                    },
+                  },
+                  OffersIntern: {
+                    include: {
+                      monthlySalary: true,
+                    },
+                  },
+                  company: true,
+                  profile: {
+                    include: {
+                      background: {
+                        include: {
+                          experiences: {
+                            include: {
+                              company: true,
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          background: {
+            include: {
+              educations: true,
+              experiences: {
+                include: {
+                  company: true,
+                  monthlySalary: true,
+                  totalCompensation: true,
+                },
+              },
+              specificYoes: true,
+            },
+          },
+          discussion: {
+            include: {
+              replies: true,
+              replyingTo: true,
+              user: true,
+            },
+          },
+          offers: {
+            include: {
+              OffersFullTime: {
+                include: {
+                  baseSalary: true,
+                  bonus: true,
+                  stocks: true,
+                  totalCompensation: true,
+                },
+              },
+              OffersIntern: {
+                include: {
+                  monthlySalary: true,
+                },
+              },
+              company: true,
+            },
+          },
+        },
+        where: {
+          id: input.profileId,
+        },
+      });
+
+      if (result) {
+        return profileDtoMapper(result, input.token);
+      }
+
+      throw new trpc.TRPCError({
+        code: 'NOT_FOUND',
+        message: 'Profile does not exist',
+      });
+    },
+  })
+  .mutation('create', {
+    input: z.object({
+      background: z.object({
+        educations: z.array(education),
+        experiences: z.array(experience),
+        specificYoes: z.array(
+          z.object({
+            domain: z.string(),
+            yoe: z.number(),
+          }),
+        ),
+        totalYoe: z.number(),
+      }),
+      offers: z.array(offer),
+    }),
+    async resolve({ ctx, input }) {
+      // TODO: add more
+      const token = crypto
+        .createHash('sha256')
+        .update(Date.now().toString())
+        .digest('hex');
+
+      const profile = await ctx.prisma.offersProfile.create({
+        data: {
+          background: {
+            create: {
+              educations: {
+                create: input.background.educations.map((x) => ({
+                  endDate: x.endDate,
+                  field: x.field,
+                  school: x.school,
+                  startDate: x.startDate,
+                  type: x.type,
+                })),
+              },
+              experiences: {
+                create: input.background.experiences.map((x) => {
+                  if (
+                    x.jobType === 'FULLTIME' &&
+                    x.totalCompensation?.currency !== undefined &&
+                    x.totalCompensation.value !== undefined
+                  ) {
+                    if (x.companyId) {
+                      return {
+                        company: {
+                          connect: {
+                            id: x.companyId,
+                          },
+                        },
+                        durationInMonths: x.durationInMonths,
+                        jobType: x.jobType,
+                        level: x.level,
+                        specialization: x.specialization,
+                        title: x.title,
+                        totalCompensation: {
+                          create: {
+                            currency: x.totalCompensation?.currency,
+                            value: x.totalCompensation?.value,
+                          },
+                        },
+                      };
+                    }
+                    return {
+                      durationInMonths: x.durationInMonths,
+                      jobType: x.jobType,
+                      level: x.level,
+                      specialization: x.specialization,
+                      title: x.title,
+                      totalCompensation: {
+                        create: {
+                          currency: x.totalCompensation?.currency,
+                          value: x.totalCompensation?.value,
+                        },
+                      },
+                    };
+                  }
+                  if (
+                    x.jobType === 'INTERN' &&
+                    x.monthlySalary?.currency !== undefined &&
+                    x.monthlySalary.value !== undefined
+                  ) {
+                    if (x.companyId) {
+                      return {
+                        company: {
+                          connect: {
+                            id: x.companyId,
+                          },
+                        },
+                        durationInMonths: x.durationInMonths,
+                        jobType: x.jobType,
+                        monthlySalary: {
+                          create: {
+                            currency: x.monthlySalary?.currency,
+                            value: x.monthlySalary?.value,
+                          },
+                        },
+                        specialization: x.specialization,
+                        title: x.title,
+                      };
+                    }
+                    return {
+                      durationInMonths: x.durationInMonths,
+                      jobType: x.jobType,
+                      monthlySalary: {
+                        create: {
+                          currency: x.monthlySalary?.currency,
+                          value: x.monthlySalary?.value,
+                        },
+                      },
+                      specialization: x.specialization,
+                      title: x.title,
+                    };
+                  }
+
+                  throw new trpc.TRPCError({
+                    code: 'BAD_REQUEST',
+                    message: 'Missing fields.',
+                  });
+                }),
+              },
+              specificYoes: {
+                create: input.background.specificYoes.map((x) => {
+                  return {
+                    domain: x.domain,
+                    yoe: x.yoe,
+                  };
+                }),
+              },
+              totalYoe: input.background.totalYoe,
+            },
+          },
+          editToken: token,
+          offers: {
+            create: input.offers.map((x) => {
+              if (
+                x.jobType === 'INTERN' &&
+                x.OffersIntern &&
+                x.OffersIntern.internshipCycle &&
+                x.OffersIntern.monthlySalary?.currency &&
+                x.OffersIntern.monthlySalary.value &&
+                x.OffersIntern.startYear
+              ) {
+                return {
+                  OffersIntern: {
+                    create: {
+                      internshipCycle: x.OffersIntern.internshipCycle,
+                      monthlySalary: {
+                        create: {
+                          currency: x.OffersIntern.monthlySalary?.currency,
+                          value: x.OffersIntern.monthlySalary?.value,
+                        },
+                      },
+                      specialization: x.OffersIntern.specialization,
+                      startYear: x.OffersIntern.startYear,
+                      title: x.OffersIntern.title,
+                    },
+                  },
+                  comments: x.comments,
+                  company: {
+                    connect: {
+                      id: x.companyId,
+                    },
+                  },
+                  jobType: x.jobType,
+                  location: x.location,
+                  monthYearReceived: x.monthYearReceived,
+                  negotiationStrategy: x.negotiationStrategy,
+                };
+              }
+              if (
+                x.jobType === 'FULLTIME' &&
+                x.OffersFullTime &&
+                x.OffersFullTime.baseSalary?.currency &&
+                x.OffersFullTime.baseSalary?.value &&
+                x.OffersFullTime.bonus?.currency &&
+                x.OffersFullTime.bonus?.value &&
+                x.OffersFullTime.stocks?.currency &&
+                x.OffersFullTime.stocks?.value &&
+                x.OffersFullTime.totalCompensation?.currency &&
+                x.OffersFullTime.totalCompensation?.value &&
+                x.OffersFullTime.level
+              ) {
+                return {
+                  OffersFullTime: {
+                    create: {
+                      baseSalary: {
+                        create: {
+                          currency: x.OffersFullTime.baseSalary?.currency,
+                          value: x.OffersFullTime.baseSalary?.value,
+                        },
+                      },
+                      bonus: {
+                        create: {
+                          currency: x.OffersFullTime.bonus?.currency,
+                          value: x.OffersFullTime.bonus?.value,
+                        },
+                      },
+                      level: x.OffersFullTime.level,
+                      specialization: x.OffersFullTime.specialization,
+                      stocks: {
+                        create: {
+                          currency: x.OffersFullTime.stocks?.currency,
+                          value: x.OffersFullTime.stocks?.value,
+                        },
+                      },
+                      title: x.OffersFullTime.title,
+                      totalCompensation: {
+                        create: {
+                          currency:
+                            x.OffersFullTime.totalCompensation?.currency,
+                          value: x.OffersFullTime.totalCompensation?.value,
+                        },
+                      },
+                    },
+                  },
+                  comments: x.comments,
+                  company: {
+                    connect: {
+                      id: x.companyId,
+                    },
+                  },
+                  jobType: x.jobType,
+                  location: x.location,
+                  monthYearReceived: x.monthYearReceived,
+                  negotiationStrategy: x.negotiationStrategy,
+                };
+              }
+
+              // Throw error
+              throw new trpc.TRPCError({
+                code: 'BAD_REQUEST',
+                message: 'Missing fields.',
+              });
+            }),
+          },
+          profileName: randomUUID().substring(0, 10),
+        },
+      });
+
+      return createOfferProfileResponseMapper(profile, token);
+    },
+  })
+  .mutation('delete', {
+    input: z.object({
+      profileId: z.string(),
+      token: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      const profileToDelete = await ctx.prisma.offersProfile.findFirst({
+        where: {
+          id: input.profileId,
+        },
+      });
+      const profileEditToken = profileToDelete?.editToken;
+
+      if (profileEditToken === input.token) {
+        const deletedProfile = await ctx.prisma.offersProfile.delete({
+          where: {
+            id: input.profileId,
+          },
+        });
+
+        return deletedProfile.id;
+      }
+      // TODO: Throw 401
+      throw new trpc.TRPCError({
+        code: 'UNAUTHORIZED',
+        message: 'Invalid token.',
+      });
+    },
+  })
+  .mutation('update', {
+    input: z.object({
+      background: z.object({
+        educations: z.array(education),
+        experiences: z.array(experience),
+        id: z.string().optional(),
+        offersProfileId: z.string().optional(),
+        specificYoes: z.array(
+          z.object({
+            backgroundId: z.string().optional(),
+            domain: z.string(),
+            id: z.string().optional(),
+            yoe: z.number(),
+          }),
+        ),
+        totalYoe: z.number(),
+      }),
+      createdAt: z.string().optional(),
+      discussion: z.array(reply),
+      id: z.string(),
+      isEditable: z.boolean().nullish(),
+      offers: z.array(offer),
+      profileName: z.string(),
+      token: z.string(),
+      userId: z.string().nullish(),
+    }),
+    async resolve({ ctx, input }) {
+      const profileToUpdate = await ctx.prisma.offersProfile.findFirst({
+        where: {
+          id: input.id,
+        },
+      });
+      const profileEditToken = profileToUpdate?.editToken;
+
+      if (profileEditToken === input.token) {
+        await ctx.prisma.offersProfile.update({
+          data: {
+            profileName: input.profileName,
+          },
+          where: {
+            id: input.id,
+          },
+        });
+
+        await ctx.prisma.offersBackground.update({
+          data: {
+            totalYoe: input.background.totalYoe,
+          },
+          where: {
+            id: input.background.id,
+          },
+        });
+
+        for (const edu of input.background.educations) {
+          if (edu.id) {
+            await ctx.prisma.offersEducation.update({
+              data: {
+                endDate: edu.endDate,
+                field: edu.field,
+                school: edu.school,
+                startDate: edu.startDate,
+                type: edu.type,
+              },
+              where: {
+                id: edu.id,
+              },
+            });
+          } else {
+            await ctx.prisma.offersBackground.update({
+              data: {
+                educations: {
+                  create: {
+                    endDate: edu.endDate,
+                    field: edu.field,
+                    school: edu.school,
+                    startDate: edu.startDate,
+                    type: edu.type,
+                  },
+                },
+              },
+              where: {
+                id: input.background.id,
+              },
+            });
+          }
+        }
+
+        for (const exp of input.background.experiences) {
+          if (exp.id) {
+            await ctx.prisma.offersExperience.update({
+              data: {
+                companyId: exp.companyId,
+                durationInMonths: exp.durationInMonths,
+                level: exp.level,
+                specialization: exp.specialization,
+              },
+              where: {
+                id: exp.id,
+              },
+            });
+
+            if (exp.monthlySalary) {
+              await ctx.prisma.offersCurrency.update({
+                data: {
+                  currency: exp.monthlySalary.currency,
+                  value: exp.monthlySalary.value,
+                },
+                where: {
+                  id: exp.monthlySalary.id,
+                },
+              });
+            }
+
+            if (exp.totalCompensation) {
+              await ctx.prisma.offersCurrency.update({
+                data: {
+                  currency: exp.totalCompensation.currency,
+                  value: exp.totalCompensation.value,
+                },
+                where: {
+                  id: exp.totalCompensation.id,
+                },
+              });
+            }
+          } else if (!exp.id) {
+            if (
+              exp.jobType === 'FULLTIME' &&
+              exp.totalCompensation?.currency !== undefined &&
+              exp.totalCompensation.value !== undefined
+            ) {
+              if (exp.companyId) {
+                await ctx.prisma.offersBackground.update({
+                  data: {
+                    experiences: {
+                      create: {
+                        company: {
+                          connect: {
+                            id: exp.companyId,
+                          },
+                        },
+                        durationInMonths: exp.durationInMonths,
+                        jobType: exp.jobType,
+                        level: exp.level,
+                        specialization: exp.specialization,
+                        title: exp.title,
+                        totalCompensation: {
+                          create: {
+                            currency: exp.totalCompensation?.currency,
+                            value: exp.totalCompensation?.value,
+                          },
+                        },
+                      },
+                    },
+                  },
+                  where: {
+                    id: input.background.id,
+                  },
+                });
+              } else {
+                await ctx.prisma.offersBackground.update({
+                  data: {
+                    experiences: {
+                      create: {
+                        durationInMonths: exp.durationInMonths,
+                        jobType: exp.jobType,
+                        level: exp.level,
+                        specialization: exp.specialization,
+                        title: exp.title,
+                        totalCompensation: {
+                          create: {
+                            currency: exp.totalCompensation?.currency,
+                            value: exp.totalCompensation?.value,
+                          },
+                        },
+                      },
+                    },
+                  },
+                  where: {
+                    id: input.background.id,
+                  },
+                });
+              }
+            } else if (
+              exp.jobType === 'INTERN' &&
+              exp.monthlySalary?.currency !== undefined &&
+              exp.monthlySalary.value !== undefined
+            ) {
+              if (exp.companyId) {
+                await ctx.prisma.offersBackground.update({
+                  data: {
+                    experiences: {
+                      create: {
+                        company: {
+                          connect: {
+                            id: exp.companyId,
+                          },
+                        },
+                        durationInMonths: exp.durationInMonths,
+                        jobType: exp.jobType,
+                        monthlySalary: {
+                          create: {
+                            currency: exp.monthlySalary?.currency,
+                            value: exp.monthlySalary?.value,
+                          },
+                        },
+                        specialization: exp.specialization,
+                        title: exp.title,
+                      },
+                    },
+                  },
+                  where: {
+                    id: input.background.id,
+                  },
+                });
+              } else {
+                await ctx.prisma.offersBackground.update({
+                  data: {
+                    experiences: {
+                      create: {
+                        durationInMonths: exp.durationInMonths,
+                        jobType: exp.jobType,
+                        monthlySalary: {
+                          create: {
+                            currency: exp.monthlySalary?.currency,
+                            value: exp.monthlySalary?.value,
+                          },
+                        },
+                        specialization: exp.specialization,
+                        title: exp.title,
+                      },
+                    },
+                  },
+                  where: {
+                    id: input.background.id,
+                  },
+                });
+              }
+            }
+          }
+        }
+
+        for (const yoe of input.background.specificYoes) {
+          if (yoe.id) {
+            await ctx.prisma.offersSpecificYoe.update({
+              data: {
+                ...yoe,
+              },
+              where: {
+                id: yoe.id,
+              },
+            });
+          } else {
+            await ctx.prisma.offersBackground.update({
+              data: {
+                specificYoes: {
+                  create: {
+                    domain: yoe.domain,
+                    yoe: yoe.yoe,
+                  },
+                },
+              },
+              where: {
+                id: input.background.id,
+              },
+            });
+          }
+        }
+
+        for (const offerToUpdate of input.offers) {
+          if (offerToUpdate.id) {
+            await ctx.prisma.offersOffer.update({
+              data: {
+                comments: offerToUpdate.comments,
+                companyId: offerToUpdate.companyId,
+                location: offerToUpdate.location,
+                monthYearReceived: offerToUpdate.monthYearReceived,
+                negotiationStrategy: offerToUpdate.negotiationStrategy,
+              },
+              where: {
+                id: offerToUpdate.id,
+              },
+            });
+
+            if (
+              offerToUpdate.jobType === 'INTERN' ||
+              offerToUpdate.jobType === 'FULLTIME'
+            ) {
+              await ctx.prisma.offersOffer.update({
+                data: {
+                  jobType: offerToUpdate.jobType,
+                },
+                where: {
+                  id: offerToUpdate.id,
+                },
+              });
+            }
+
+            if (offerToUpdate.OffersIntern?.monthlySalary) {
+              await ctx.prisma.offersIntern.update({
+                data: {
+                  internshipCycle:
+                    offerToUpdate.OffersIntern.internshipCycle ?? undefined,
+                  specialization: offerToUpdate.OffersIntern.specialization,
+                  startYear: offerToUpdate.OffersIntern.startYear ?? undefined,
+                  title: offerToUpdate.OffersIntern.title,
+                },
+                where: {
+                  id: offerToUpdate.OffersIntern.id,
+                },
+              });
+              await ctx.prisma.offersCurrency.update({
+                data: {
+                  currency: offerToUpdate.OffersIntern.monthlySalary.currency,
+                  value: offerToUpdate.OffersIntern.monthlySalary.value,
+                },
+                where: {
+                  id: offerToUpdate.OffersIntern.monthlySalary.id,
+                },
+              });
+            }
+
+            if (offerToUpdate.OffersFullTime?.totalCompensation) {
+              await ctx.prisma.offersFullTime.update({
+                data: {
+                  level: offerToUpdate.OffersFullTime.level ?? undefined,
+                  specialization: offerToUpdate.OffersFullTime.specialization,
+                  title: offerToUpdate.OffersFullTime.title,
+                },
+                where: {
+                  id: offerToUpdate.OffersFullTime.id,
+                },
+              });
+              if (offerToUpdate.OffersFullTime.baseSalary) {
+                await ctx.prisma.offersCurrency.update({
+                  data: {
+                    currency: offerToUpdate.OffersFullTime.baseSalary.currency,
+                    value: offerToUpdate.OffersFullTime.baseSalary.value,
+                  },
+                  where: {
+                    id: offerToUpdate.OffersFullTime.baseSalary.id,
+                  },
+                });
+              }
+              if (offerToUpdate.OffersFullTime.bonus) {
+                await ctx.prisma.offersCurrency.update({
+                  data: {
+                    currency: offerToUpdate.OffersFullTime.bonus.currency,
+                    value: offerToUpdate.OffersFullTime.bonus.value,
+                  },
+                  where: {
+                    id: offerToUpdate.OffersFullTime.bonus.id,
+                  },
+                });
+              }
+              if (offerToUpdate.OffersFullTime.stocks) {
+                await ctx.prisma.offersCurrency.update({
+                  data: {
+                    currency: offerToUpdate.OffersFullTime.stocks.currency,
+                    value: offerToUpdate.OffersFullTime.stocks.value,
+                  },
+                  where: {
+                    id: offerToUpdate.OffersFullTime.stocks.id,
+                  },
+                });
+              }
+              await ctx.prisma.offersCurrency.update({
+                data: {
+                  currency:
+                    offerToUpdate.OffersFullTime.totalCompensation.currency,
+                  value: offerToUpdate.OffersFullTime.totalCompensation.value,
+                },
+                where: {
+                  id: offerToUpdate.OffersFullTime.totalCompensation.id,
+                },
+              });
+            }
+          } else {
+            if (
+              offerToUpdate.jobType === 'INTERN' &&
+              offerToUpdate.OffersIntern &&
+              offerToUpdate.OffersIntern.internshipCycle &&
+              offerToUpdate.OffersIntern.monthlySalary?.currency &&
+              offerToUpdate.OffersIntern.monthlySalary.value &&
+              offerToUpdate.OffersIntern.startYear
+            ) {
+              await ctx.prisma.offersProfile.update({
+                data: {
+                  offers: {
+                    create: {
+                      OffersIntern: {
+                        create: {
+                          internshipCycle:
+                            offerToUpdate.OffersIntern.internshipCycle,
+                          monthlySalary: {
+                            create: {
+                              currency:
+                                offerToUpdate.OffersIntern.monthlySalary
+                                  ?.currency,
+                              value:
+                                offerToUpdate.OffersIntern.monthlySalary?.value,
+                            },
+                          },
+                          specialization:
+                            offerToUpdate.OffersIntern.specialization,
+                          startYear: offerToUpdate.OffersIntern.startYear,
+                          title: offerToUpdate.OffersIntern.title,
+                        },
+                      },
+                      comments: offerToUpdate.comments,
+                      company: {
+                        connect: {
+                          id: offerToUpdate.companyId,
+                        },
+                      },
+                      jobType: offerToUpdate.jobType,
+                      location: offerToUpdate.location,
+                      monthYearReceived: offerToUpdate.monthYearReceived,
+                      negotiationStrategy: offerToUpdate.negotiationStrategy,
+                    },
+                  },
+                },
+                where: {
+                  id: input.id,
+                },
+              });
+            }
+            if (
+              offerToUpdate.jobType === 'FULLTIME' &&
+              offerToUpdate.OffersFullTime &&
+              offerToUpdate.OffersFullTime.baseSalary?.currency &&
+              offerToUpdate.OffersFullTime.baseSalary?.value &&
+              offerToUpdate.OffersFullTime.bonus?.currency &&
+              offerToUpdate.OffersFullTime.bonus?.value &&
+              offerToUpdate.OffersFullTime.stocks?.currency &&
+              offerToUpdate.OffersFullTime.stocks?.value &&
+              offerToUpdate.OffersFullTime.totalCompensation?.currency &&
+              offerToUpdate.OffersFullTime.totalCompensation?.value &&
+              offerToUpdate.OffersFullTime.level
+            ) {
+              await ctx.prisma.offersProfile.update({
+                data: {
+                  offers: {
+                    create: {
+                      OffersFullTime: {
+                        create: {
+                          baseSalary: {
+                            create: {
+                              currency:
+                                offerToUpdate.OffersFullTime.baseSalary
+                                  ?.currency,
+                              value:
+                                offerToUpdate.OffersFullTime.baseSalary?.value,
+                            },
+                          },
+                          bonus: {
+                            create: {
+                              currency:
+                                offerToUpdate.OffersFullTime.bonus?.currency,
+                              value: offerToUpdate.OffersFullTime.bonus?.value,
+                            },
+                          },
+                          level: offerToUpdate.OffersFullTime.level,
+                          specialization:
+                            offerToUpdate.OffersFullTime.specialization,
+                          stocks: {
+                            create: {
+                              currency:
+                                offerToUpdate.OffersFullTime.stocks?.currency,
+                              value: offerToUpdate.OffersFullTime.stocks?.value,
+                            },
+                          },
+                          title: offerToUpdate.OffersFullTime.title,
+                          totalCompensation: {
+                            create: {
+                              currency:
+                                offerToUpdate.OffersFullTime.totalCompensation
+                                  ?.currency,
+                              value:
+                                offerToUpdate.OffersFullTime.totalCompensation
+                                  ?.value,
+                            },
+                          },
+                        },
+                      },
+                      comments: offerToUpdate.comments,
+                      company: {
+                        connect: {
+                          id: offerToUpdate.companyId,
+                        },
+                      },
+                      jobType: offerToUpdate.jobType,
+                      location: offerToUpdate.location,
+                      monthYearReceived: offerToUpdate.monthYearReceived,
+                      negotiationStrategy: offerToUpdate.negotiationStrategy,
+                    },
+                  },
+                },
+                where: {
+                  id: input.id,
+                },
+              });
+            }
+          }
+        }
+
+        const result = await ctx.prisma.offersProfile.findFirst({
+          include: {
+            background: {
+              include: {
+                educations: true,
+                experiences: {
+                  include: {
+                    company: true,
+                    monthlySalary: true,
+                    totalCompensation: true,
+                  },
+                },
+                specificYoes: true,
+              },
+            },
+            discussion: {
+              include: {
+                replies: true,
+                replyingTo: true,
+                user: true,
+              },
+            },
+            offers: {
+              include: {
+                OffersFullTime: {
+                  include: {
+                    baseSalary: true,
+                    bonus: true,
+                    stocks: true,
+                    totalCompensation: true,
+                  },
+                },
+                OffersIntern: {
+                  include: {
+                    monthlySalary: true,
+                  },
+                },
+                company: true,
+              },
+            },
+          },
+          where: {
+            id: input.id,
+          },
+        });
+
+        if (result) {
+          return createOfferProfileResponseMapper(result, input.token);
+        }
+
+        throw new trpc.TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Profile does not exist',
+        });
+      }
+
+      throw new trpc.TRPCError({
+        code: 'UNAUTHORIZED',
+        message: 'Invalid token.',
+      });
+    },
+  })
+  .mutation('addToUserProfile', {
+    input: z.object({
+      profileId: z.string(),
+      token: z.string(),
+      userId: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      const profile = await ctx.prisma.offersProfile.findFirst({
+        where: {
+          id: input.profileId,
+        },
+      });
+
+      const profileEditToken = profile?.editToken;
+
+      if (profileEditToken === input.token) {
+        const updated = await ctx.prisma.offersProfile.update({
+          data: {
+            user: {
+              connect: {
+                id: input.userId,
+              },
+            },
+          },
+          where: {
+            id: input.profileId,
+          },
+        });
+
+        return addToProfileResponseMapper(updated);
+      }
+
+      throw new trpc.TRPCError({
+        code: 'UNAUTHORIZED',
+        message: 'Invalid token.',
+      });
+    },
+  });
diff --git a/apps/portal/src/server/router/offers.ts b/apps/portal/src/server/router/offers/offers.ts
similarity index 67%
rename from apps/portal/src/server/router/offers.ts
rename to apps/portal/src/server/router/offers/offers.ts
index 28e6c0eb..a35e2d2e 100644
--- a/apps/portal/src/server/router/offers.ts
+++ b/apps/portal/src/server/router/offers/offers.ts
@@ -1,7 +1,12 @@
-import assert from 'assert';
 import { z } from 'zod';
+import { TRPCError } from '@trpc/server';
 
-import { createRouter } from './context';
+import {
+  dashboardOfferDtoMapper,
+  getOffersResponseMapper,
+} from '~/mappers/offers-mappers';
+
+import { createRouter } from '../context';
 
 const yoeCategoryMap: Record<number, string> = {
   0: 'Internship',
@@ -16,13 +21,13 @@ const getYoeRange = (yoeCategory: number) => {
     : yoeCategoryMap[yoeCategory] === 'Mid'
     ? { maxYoe: 7, minYoe: 4 }
     : yoeCategoryMap[yoeCategory] === 'Senior'
-    ? { maxYoe: null, minYoe: 8 }
-    : null;
+    ? { maxYoe: 100, minYoe: 8 }
+    : null; // Internship
 };
 
 const ascOrder = '+';
 const descOrder = '-';
-const sortingKeys = ['monthYearReceived', 'totalCompensation', 'yoe'];
+const sortingKeys = ['monthYearReceived', 'totalCompensation', 'totalYoe'];
 
 const createSortByValidationRegex = () => {
   const startsWithPlusOrMinusOnly = '^[+-]{1}';
@@ -32,10 +37,10 @@ const createSortByValidationRegex = () => {
 
 export const offersRouter = createRouter().query('list', {
   input: z.object({
-    company: z.string().nullish(),
+    companyId: z.string().nullish(),
     dateEnd: z.date().nullish(),
     dateStart: z.date().nullish(),
-    limit: z.number().nonnegative(),
+    limit: z.number().positive(),
     location: z.string(),
     offset: z.number().nonnegative(),
     salaryMax: z.number().nullish(),
@@ -43,9 +48,13 @@ export const offersRouter = createRouter().query('list', {
     sortBy: z.string().regex(createSortByValidationRegex()).nullish(),
     title: z.string().nullish(),
     yoeCategory: z.number().min(0).max(3),
+    yoeMax: z.number().max(100).nullish(),
+    yoeMin: z.number().min(0).nullish(),
   }),
   async resolve({ ctx, input }) {
     const yoeRange = getYoeRange(input.yoeCategory);
+    const yoeMin = input.yoeMin ? input.yoeMin : yoeRange?.minYoe;
+    const yoeMax = input.yoeMax ? input.yoeMax : yoeRange?.maxYoe;
 
     let data = !yoeRange
       ? await ctx.prisma.offersOffer.findMany({
@@ -65,9 +74,12 @@ export const offersRouter = createRouter().query('list', {
               },
             },
             company: true,
+            profile: {
+              include: {
+                background: true,
+              },
+            },
           },
-          skip: input.limit * input.offset,
-          take: input.limit,
           where: {
             AND: [
               {
@@ -86,8 +98,8 @@ export const offersRouter = createRouter().query('list', {
             ],
           },
         })
-      : yoeRange.maxYoe
-      ? await ctx.prisma.offersOffer.findMany({
+      : await ctx.prisma.offersOffer.findMany({
+          // Junior, Mid, Senior
           include: {
             OffersFullTime: {
               include: {
@@ -103,66 +115,12 @@ export const offersRouter = createRouter().query('list', {
               },
             },
             company: true,
-          },
-          // Junior, Mid
-          skip: input.limit * input.offset,
-          take: input.limit,
-          where: {
-            AND: [
-              {
-                location: input.location,
-              },
-              {
-                OffersIntern: {
-                  is: null,
-                },
-              },
-              {
-                OffersFullTime: {
-                  isNot: null,
-                },
-              },
-              {
-                profile: {
-                  background: {
-                    totalYoe: {
-                      gte: yoeRange.minYoe,
-                    },
-                  },
-                },
-              },
-              {
-                profile: {
-                  background: {
-                    totalYoe: {
-                      gte: yoeRange.maxYoe,
-                    },
-                  },
-                },
-              },
-            ],
-          },
-        })
-      : await ctx.prisma.offersOffer.findMany({
-          // Senior
-          include: {
-            OffersFullTime: {
-              include: {
-                baseSalary: true,
-                bonus: true,
-                stocks: true,
-                totalCompensation: true,
-              },
-            },
-            OffersIntern: {
+            profile: {
               include: {
-                monthlySalary: true,
+                background: true,
               },
             },
-            company: true,
           },
-          skip: input.limit * input.offset,
-          take: input.limit,
           where: {
             AND: [
               {
@@ -182,7 +140,8 @@ export const offersRouter = createRouter().query('list', {
                 profile: {
                   background: {
                     totalYoe: {
-                      gte: yoeRange.minYoe,
+                      gte: yoeMin,
+                      lte: yoeMax,
                     },
                   },
                 },
@@ -191,11 +150,12 @@ export const offersRouter = createRouter().query('list', {
           },
         });
 
+    // FILTERING
     data = data.filter((offer) => {
       let validRecord = true;
 
-      if (input.company) {
-        validRecord = validRecord && offer.company.name === input.company;
+      if (input.companyId) {
+        validRecord = validRecord && offer.company.id === input.companyId;
       }
 
       if (input.title) {
@@ -217,7 +177,12 @@ export const offersRouter = createRouter().query('list', {
           ? offer.OffersFullTime?.totalCompensation.value
           : offer.OffersIntern?.monthlySalary.value;
 
-        assert(salary);
+        if (!salary) {
+          throw new TRPCError({
+            code: 'NOT_FOUND',
+            message: 'Total Compensation or Salary not found',
+          });
+        }
 
         validRecord =
           validRecord && salary >= input.salaryMin && salary <= input.salaryMax;
@@ -226,6 +191,7 @@ export const offersRouter = createRouter().query('list', {
       return validRecord;
     });
 
+    // SORTING
     data = data.sort((offer1, offer2) => {
       const defaultReturn =
         offer2.monthYearReceived.getTime() - offer1.monthYearReceived.getTime();
@@ -255,10 +221,30 @@ export const offersRouter = createRouter().query('list', {
               ? offer2.OffersFullTime?.totalCompensation.value
               : offer2.OffersIntern?.monthlySalary.value;
 
-            if (salary1 && salary2) {
-              return salary1 - salary2;
+            if (!salary1 || !salary2) {
+              throw new TRPCError({
+                code: 'NOT_FOUND',
+                message: 'Total Compensation or Salary not found',
+              });
             }
+
+            return salary1 - salary2;
+          }
+
+          if (sortingKey === 'totalYoe') {
+            const yoe1 = offer1.profile.background?.totalYoe;
+            const yoe2 = offer2.profile.background?.totalYoe;
+
+            if (!yoe1 || !yoe2) {
+              throw new TRPCError({
+                code: 'NOT_FOUND',
+                message: 'Total years of experience not found',
+              });
+            }
+
+            return yoe1 - yoe2;
           }
+
           return defaultReturn;
         })();
       }
@@ -281,9 +267,28 @@ export const offersRouter = createRouter().query('list', {
               ? offer2.OffersFullTime?.totalCompensation.value
               : offer2.OffersIntern?.monthlySalary.value;
 
-            if (salary1 && salary2) {
-              return salary2 - salary1;
+            if (!salary1 || !salary2) {
+              throw new TRPCError({
+                code: 'NOT_FOUND',
+                message: 'Total Compensation or Salary not found',
+              });
+            }
+
+            return salary2 - salary1;
+          }
+
+          if (sortingKey === 'totalYoe') {
+            const yoe1 = offer1.profile.background?.totalYoe;
+            const yoe2 = offer2.profile.background?.totalYoe;
+
+            if (!yoe1 || !yoe2) {
+              throw new TRPCError({
+                code: 'NOT_FOUND',
+                message: 'Total years of experience not found',
+              });
             }
+
+            return yoe2 - yoe1;
           }
 
           return defaultReturn;
@@ -292,6 +297,21 @@ export const offersRouter = createRouter().query('list', {
       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 getOffersResponseMapper(
+      paginatedData.map((offer) => dashboardOfferDtoMapper(offer)),
+      {
+        currentPage: input.offset,
+        numOfItems: paginatedData.length,
+        numOfPages: Math.ceil(data.length / input.limit),
+        totalItems: data.length,
+      },
+    );
   },
 });
diff --git a/apps/portal/src/server/router/questions-answer-comment-router.ts b/apps/portal/src/server/router/questions-answer-comment-router.ts
index 51d17d34..7ed3e6e2 100644
--- a/apps/portal/src/server/router/questions-answer-comment-router.ts
+++ b/apps/portal/src/server/router/questions-answer-comment-router.ts
@@ -17,6 +17,7 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
           include: {
             user: {
               select: {
+                image: true,
                 name: true,
               },
             },
@@ -26,7 +27,7 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
             createdAt: 'desc',
           },
           where: {
-            ...input,
+            answerId : input.answerId,
           },
         });
       return questionAnswerCommentsData.map((data) => {
@@ -54,6 +55,7 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
           numVotes: votes,
           updatedAt: data.updatedAt,
           user: data.user?.name ?? '',
+          userImage: data.user?.image ?? '',
         };
         return answerComment;
       });
@@ -67,9 +69,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
+      const { answerId, content } = input;
+
       return await ctx.prisma.questionsAnswerComment.create({
         data: {
-          ...input,
+          answerId,
+          content,
           userId,
         },
       });
@@ -97,9 +102,10 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
         });
       }
 
+      const { content } = input;
       return await ctx.prisma.questionsAnswerComment.update({
         data: {
-          ...input,
+          content,
         },
         where: {
           id: input.id,
@@ -158,10 +164,13 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
+      const { answerCommentId, vote } = input;
+
       return await ctx.prisma.questionsAnswerCommentVote.create({
         data: {
-          ...input,
+          answerCommentId,
           userId,
+          vote,
         },
       });
     },
@@ -182,7 +191,7 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
           },
         });
 
-      if (voteToUpdate?.id !== userId) {
+      if (voteToUpdate?.userId !== userId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: 'User have no authorization to record.',
@@ -213,7 +222,7 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
           },
         });
 
-      if (voteToDelete?.id !== userId) {
+      if (voteToDelete?.userId !== userId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: 'User have no authorization to record.',
diff --git a/apps/portal/src/server/router/questions-answer-router.ts b/apps/portal/src/server/router/questions-answer-router.ts
index 21095bf7..5d386854 100644
--- a/apps/portal/src/server/router/questions-answer-router.ts
+++ b/apps/portal/src/server/router/questions-answer-router.ts
@@ -12,6 +12,8 @@ export const questionsAnswerRouter = createProtectedRouter()
       questionId: z.string(),
     }),
     async resolve({ ctx, input }) {
+      const { questionId } = input;
+
       const answersData = await ctx.prisma.questionsAnswer.findMany({
         include: {
           _count: {
@@ -21,6 +23,7 @@ export const questionsAnswerRouter = createProtectedRouter()
           },
           user: {
             select: {
+              image: true,
               name: true,
             },
           },
@@ -30,7 +33,7 @@ export const questionsAnswerRouter = createProtectedRouter()
           createdAt: 'desc',
         },
         where: {
-          ...input,
+          questionId,
         },
       });
       return answersData.map((data) => {
@@ -58,6 +61,7 @@ export const questionsAnswerRouter = createProtectedRouter()
           numComments: data._count.comments,
           numVotes: votes,
           user: data.user?.name ?? '',
+          userImage: data.user?.image ?? '',
         };
         return answer;
       });
@@ -77,6 +81,7 @@ export const questionsAnswerRouter = createProtectedRouter()
           },
           user: {
             select: {
+              image: true,
               name: true,
             },
           },
@@ -116,6 +121,7 @@ export const questionsAnswerRouter = createProtectedRouter()
         numComments: answerData._count.comments,
         numVotes: votes,
         user: answerData.user?.name ?? '',
+        userImage: answerData.user?.image ?? '',
       };
       return answer;
     },
@@ -128,9 +134,12 @@ export const questionsAnswerRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
+      const { content, questionId } = input;
+
       return await ctx.prisma.questionsAnswer.create({
         data: {
-          ...input,
+          content,
+          questionId,
           userId,
         },
       });
@@ -218,10 +227,13 @@ export const questionsAnswerRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
+      const { answerId, vote } = input;
+
       return await ctx.prisma.questionsAnswerVote.create({
         data: {
-          ...input,
+          answerId,
           userId,
+          vote,
         },
       });
     },
@@ -241,7 +253,7 @@ export const questionsAnswerRouter = createProtectedRouter()
         },
       });
 
-      if (voteToUpdate?.id !== userId) {
+      if (voteToUpdate?.userId !== userId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: 'User have no authorization to record.',
@@ -271,7 +283,7 @@ export const questionsAnswerRouter = createProtectedRouter()
         },
       });
 
-      if (voteToDelete?.id !== userId) {
+      if (voteToDelete?.userId !== userId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: 'User have no authorization to record.',
diff --git a/apps/portal/src/server/router/questions-question-comment-router.ts b/apps/portal/src/server/router/questions-question-comment-router.ts
index 82345f06..e2f786f9 100644
--- a/apps/portal/src/server/router/questions-question-comment-router.ts
+++ b/apps/portal/src/server/router/questions-question-comment-router.ts
@@ -12,11 +12,13 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
       questionId: z.string(),
     }),
     async resolve({ ctx, input }) {
+      const { questionId } = input;
       const questionCommentsData =
         await ctx.prisma.questionsQuestionComment.findMany({
           include: {
             user: {
               select: {
+                image: true,
                 name: true,
               },
             },
@@ -26,7 +28,7 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
             createdAt: 'desc',
           },
           where: {
-            ...input,
+            questionId,
           },
         });
       return questionCommentsData.map((data) => {
@@ -53,6 +55,7 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
           id: data.id,
           numVotes: votes,
           user: data.user?.name ?? '',
+          userImage: data.user?.image ?? '',
         };
         return questionComment;
       });
@@ -66,9 +69,12 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
+      const { content, questionId } = input;
+
       return await ctx.prisma.questionsQuestionComment.create({
         data: {
-          ...input,
+          content,
+          questionId,
           userId,
         },
       });
@@ -82,6 +88,8 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
+      const { content } = input;
+
       const questionCommentToUpdate =
         await ctx.prisma.questionsQuestionComment.findUnique({
           where: {
@@ -98,7 +106,7 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
 
       return await ctx.prisma.questionsQuestionComment.update({
         data: {
-          ...input,
+          content,
         },
         where: {
           id: input.id,
@@ -156,11 +164,13 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
+      const { questionCommentId, vote } = input;
 
       return await ctx.prisma.questionsQuestionCommentVote.create({
         data: {
-          ...input,
+          questionCommentId,
           userId,
+          vote,
         },
       });
     },
@@ -181,7 +191,7 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
           },
         });
 
-      if (voteToUpdate?.id !== userId) {
+      if (voteToUpdate?.userId !== userId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: 'User have no authorization to record.',
@@ -212,7 +222,7 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
           },
         });
 
-      if (voteToDelete?.id !== userId) {
+      if (voteToDelete?.userId !== userId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: 'User have no authorization to record.',
diff --git a/apps/portal/src/server/router/questions-question-router.ts b/apps/portal/src/server/router/questions-question-router.ts
index 32751e8e..1315a451 100644
--- a/apps/portal/src/server/router/questions-question-router.ts
+++ b/apps/portal/src/server/router/questions-question-router.ts
@@ -51,29 +51,34 @@ export const questionsQuestionRouter = createProtectedRouter()
                 },
               }
             : {}),
+          encounters : {
+            some: {
+              ...(input.companies.length > 0
+                ? {
+                    company : {
+                      in : input.companies
+                    }
+                }
+                : {}),
+              ...(input.locations.length > 0
+                ? {
+                    location: {
+                      in: input.locations
+                    },
+                }
+                : {}),
+              ...(input.roles.length > 0
+                ? {
+                    role : {
+                      in: input.roles
+                    }
+                }
+                : {}),
+            }
+          }
         },
       });
       return questionsData
-        .filter((data) => {
-          for (let i = 0; i < data.encounters.length; i++) {
-            const encounter = data.encounters[i];
-            const matchCompany =
-              input.companyIds.length === 0 ||
-              input.companyIds.includes(encounter.company!.id);
-            const matchLocation =
-              input.locations.length === 0 ||
-              input.locations.includes(encounter.location);
-            const matchRole =
-              input.roles.length === 0 || input.roles.includes(encounter.role);
-            const matchDate =
-              (!input.startDate || encounter.seenAt >= input.startDate) &&
-              encounter.seenAt <= input.endDate;
-            if (matchCompany && matchLocation && matchRole && matchDate) {
-              return true;
-            }
-          }
-          return false;
-        })
         .map((data) => {
           const votes: number = data.votes.reduce(
             (previousValue: number, currentValue) => {
@@ -237,9 +242,13 @@ export const questionsQuestionRouter = createProtectedRouter()
         });
       }
 
+      const { content, questionType } = input;
+
       return await ctx.prisma.questionsQuestion.update({
+
         data: {
-          ...input,
+          content,
+          questionType,
         },
         where: {
           id: input.id,
@@ -297,11 +306,13 @@ export const questionsQuestionRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
+      const { questionId, vote } = input;
 
       return await ctx.prisma.questionsQuestionVote.create({
         data: {
-          ...input,
+          questionId,
           userId,
+          vote,
         },
       });
     },
@@ -321,7 +332,7 @@ export const questionsQuestionRouter = createProtectedRouter()
         },
       });
 
-      if (voteToUpdate?.id !== userId) {
+      if (voteToUpdate?.userId !== userId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: 'User have no authorization to record.',
@@ -351,7 +362,7 @@ export const questionsQuestionRouter = createProtectedRouter()
         },
       });
 
-      if (voteToDelete?.id !== userId) {
+      if (voteToDelete?.userId !== userId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: 'User have no authorization to record.',
diff --git a/apps/portal/src/server/router/resumes/resumes-reviews-router.ts b/apps/portal/src/server/router/resumes/resumes-comments-router.ts
similarity index 73%
rename from apps/portal/src/server/router/resumes/resumes-reviews-router.ts
rename to apps/portal/src/server/router/resumes/resumes-comments-router.ts
index 04672cb2..33d6256a 100644
--- a/apps/portal/src/server/router/resumes/resumes-reviews-router.ts
+++ b/apps/portal/src/server/router/resumes/resumes-comments-router.ts
@@ -4,12 +4,11 @@ import { createRouter } from '../context';
 
 import type { ResumeComment } from '~/types/resume-comments';
 
-export const resumeReviewsRouter = createRouter().query('list', {
+export const resumeCommentsRouter = createRouter().query('list', {
   input: z.object({
     resumeId: z.string(),
   }),
   async resolve({ ctx, input }) {
-    const userId = ctx.session?.user?.id;
     const { resumeId } = input;
 
     // For this resume, we retrieve every comment's information, along with:
@@ -17,23 +16,12 @@ export const resumeReviewsRouter = createRouter().query('list', {
     // Number of votes, and whether the user (if-any) has voted
     const comments = await ctx.prisma.resumesComment.findMany({
       include: {
-        _count: {
-          select: {
-            votes: true,
-          },
-        },
         user: {
           select: {
             image: true,
             name: true,
           },
         },
-        votes: {
-          take: 1,
-          where: {
-            userId,
-          },
-        },
       },
       orderBy: {
         createdAt: 'desc',
@@ -44,15 +32,10 @@ export const resumeReviewsRouter = createRouter().query('list', {
     });
 
     return comments.map((data) => {
-      const hasVoted = data.votes.length > 0;
-      const numVotes = data._count.votes;
-
       const comment: ResumeComment = {
         createdAt: data.createdAt,
         description: data.description,
-        hasVoted,
         id: data.id,
-        numVotes,
         resumeId: data.resumeId,
         section: data.section,
         updatedAt: data.updatedAt,
diff --git a/apps/portal/src/server/router/resumes/resumes-reviews-user-router.ts b/apps/portal/src/server/router/resumes/resumes-comments-user-router.ts
similarity index 70%
rename from apps/portal/src/server/router/resumes/resumes-reviews-user-router.ts
rename to apps/portal/src/server/router/resumes/resumes-comments-user-router.ts
index 069e5548..94c375f7 100644
--- a/apps/portal/src/server/router/resumes/resumes-reviews-user-router.ts
+++ b/apps/portal/src/server/router/resumes/resumes-comments-user-router.ts
@@ -3,16 +3,15 @@ import { ResumesSection } from '@prisma/client';
 
 import { createProtectedRouter } from '../context';
 
-type IResumeCommentInput = Readonly<{
+type ResumeCommentInput = Readonly<{
   description: string;
   resumeId: string;
   section: ResumesSection;
   userId: string;
 }>;
 
-export const resumesReviewsUserRouter = createProtectedRouter().mutation(
-  'create',
-  {
+export const resumesCommentsUserRouter = createProtectedRouter()
+  .mutation('create', {
     input: z.object({
       education: z.string(),
       experience: z.string(),
@@ -22,12 +21,12 @@ export const resumesReviewsUserRouter = createProtectedRouter().mutation(
       skills: z.string(),
     }),
     async resolve({ ctx, input }) {
-      const userId = ctx.session?.user?.id;
+      const userId = ctx.session.user.id;
       const { resumeId, education, experience, general, projects, skills } =
         input;
 
       // For each section, convert them into ResumesComment model if provided
-      const comments: Array<IResumeCommentInput> = [
+      const comments: Array<ResumeCommentInput> = [
         { description: education, section: ResumesSection.EDUCATION },
         { description: experience, section: ResumesSection.EXPERIENCE },
         { description: general, section: ResumesSection.GENERAL },
@@ -50,5 +49,22 @@ export const resumesReviewsUserRouter = createProtectedRouter().mutation(
         data: comments,
       });
     },
-  },
-);
+  })
+  .mutation('update', {
+    input: z.object({
+      description: z.string(),
+      id: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      const { id, description } = input;
+
+      return await ctx.prisma.resumesComment.update({
+        data: {
+          description,
+        },
+        where: {
+          id,
+        },
+      });
+    },
+  });
diff --git a/apps/portal/src/server/router/resumes/resumes-comments-votes-router.ts b/apps/portal/src/server/router/resumes/resumes-comments-votes-router.ts
new file mode 100644
index 00000000..5d508c35
--- /dev/null
+++ b/apps/portal/src/server/router/resumes/resumes-comments-votes-router.ts
@@ -0,0 +1,38 @@
+import { z } from 'zod';
+import type { ResumesCommentVote } from '@prisma/client';
+import { Vote } from '@prisma/client';
+
+import { createRouter } from '../context';
+
+import type { ResumeCommentVote } from '~/types/resume-comments';
+
+export const resumesCommentsVotesRouter = createRouter().query('list', {
+  input: z.object({
+    commentId: z.string(),
+  }),
+  async resolve({ ctx, input }) {
+    const userId = ctx.session?.user?.id;
+    const { commentId } = input;
+
+    const votes = await ctx.prisma.resumesCommentVote.findMany({
+      where: {
+        commentId,
+      },
+    });
+
+    let userVote: ResumesCommentVote | null = null;
+    let numVotes = 0;
+
+    votes.forEach((vote) => {
+      numVotes += vote.value === Vote.UPVOTE ? 1 : -1;
+      userVote = vote.userId === userId ? vote : null;
+    });
+
+    const resumeCommentVote: ResumeCommentVote = {
+      numVotes,
+      userVote,
+    };
+
+    return resumeCommentVote;
+  },
+});
diff --git a/apps/portal/src/server/router/resumes/resumes-comments-votes-user-router.ts b/apps/portal/src/server/router/resumes/resumes-comments-votes-user-router.ts
new file mode 100644
index 00000000..7dbeec77
--- /dev/null
+++ b/apps/portal/src/server/router/resumes/resumes-comments-votes-user-router.ts
@@ -0,0 +1,45 @@
+import { z } from 'zod';
+import { Vote } from '@prisma/client';
+
+import { createProtectedRouter } from '../context';
+
+export const resumesCommentsVotesUserRouter = createProtectedRouter()
+  .mutation('upsert', {
+    input: z.object({
+      commentId: z.string(),
+      value: z.nativeEnum(Vote),
+    }),
+    async resolve({ ctx, input }) {
+      const userId = ctx.session.user.id;
+      const { commentId, value } = input;
+
+      await ctx.prisma.resumesCommentVote.upsert({
+        create: {
+          commentId,
+          userId,
+          value,
+        },
+        update: {
+          value,
+        },
+        where: {
+          userId_commentId: { commentId, userId },
+        },
+      });
+    },
+  })
+  .mutation('delete', {
+    input: z.object({
+      commentId: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      const userId = ctx.session.user.id;
+      const { commentId } = input;
+
+      await ctx.prisma.resumesCommentVote.delete({
+        where: {
+          userId_commentId: { commentId, userId },
+        },
+      });
+    },
+  });
diff --git a/apps/portal/src/server/router/resumes/resumes-resume-router.ts b/apps/portal/src/server/router/resumes/resumes-resume-router.ts
index 177b076e..4f5c33d8 100644
--- a/apps/portal/src/server/router/resumes/resumes-resume-router.ts
+++ b/apps/portal/src/server/router/resumes/resumes-resume-router.ts
@@ -7,6 +7,7 @@ import type { Resume } from '~/types/resume';
 export const resumesRouter = createRouter()
   .query('findAll', {
     async resolve({ ctx }) {
+      const userId = ctx.session?.user?.id;
       const resumesData = await ctx.prisma.resumesResume.findMany({
         include: {
           _count: {
@@ -15,6 +16,13 @@ export const resumesRouter = createRouter()
               stars: true,
             },
           },
+          stars: {
+            where: {
+              OR: {
+                userId,
+              },
+            },
+          },
           user: {
             select: {
               name: true,
@@ -31,6 +39,7 @@ export const resumesRouter = createRouter()
           createdAt: r.createdAt,
           experience: r.experience,
           id: r.id,
+          isStarredByUser: r.stars.length > 0,
           location: r.location,
           numComments: r._count.comments,
           numStars: r._count.stars,
@@ -62,7 +71,9 @@ export const resumesRouter = createRouter()
           },
           stars: {
             where: {
-              userId,
+              OR: {
+                userId,
+              },
             },
           },
           user: {
diff --git a/apps/portal/src/server/router/resumes/resumes-resume-user-router.ts b/apps/portal/src/server/router/resumes/resumes-resume-user-router.ts
index 3b0b5a0b..a61aa3ac 100644
--- a/apps/portal/src/server/router/resumes/resumes-resume-user-router.ts
+++ b/apps/portal/src/server/router/resumes/resumes-resume-user-router.ts
@@ -5,29 +5,48 @@ import { createProtectedRouter } from '../context';
 import type { Resume } from '~/types/resume';
 
 export const resumesResumeUserRouter = createProtectedRouter()
-  .mutation('create', {
+  .mutation('upsert', {
     // TODO: Use enums for experience, location, role
     input: z.object({
       additionalInfo: z.string().optional(),
       experience: z.string(),
+      id: z.string().optional(),
       location: z.string(),
       role: z.string(),
       title: z.string(),
       url: z.string(),
     }),
     async resolve({ ctx, input }) {
-      const userId = ctx.session?.user.id;
-      return await ctx.prisma.resumesResume.create({
-        data: {
-          ...input,
+      const userId = ctx.session.user.id;
+
+      return await ctx.prisma.resumesResume.upsert({
+        create: {
+          additionalInfo: input.additionalInfo,
+          experience: input.experience,
+          location: input.location,
+          role: input.role,
+          title: input.title,
+          url: input.url,
+          userId,
+        },
+        update: {
+          additionalInfo: input.additionalInfo,
+          experience: input.experience,
+          location: input.location,
+          role: input.role,
+          title: input.title,
+          url: input.url,
           userId,
         },
+        where: {
+          id: input.id ?? '',
+        },
       });
     },
   })
   .query('findUserStarred', {
     async resolve({ ctx }) {
-      const userId = ctx.session?.user?.id;
+      const userId = ctx.session.user.id;
       const resumeStarsData = await ctx.prisma.resumesStar.findMany({
         include: {
           resume: {
@@ -59,6 +78,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
           createdAt: rs.resume.createdAt,
           experience: rs.resume.experience,
           id: rs.resume.id,
+          isStarredByUser: true,
           location: rs.resume.location,
           numComments: rs.resume._count.comments,
           numStars: rs.resume._count.stars,
@@ -73,7 +93,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
   })
   .query('findUserCreated', {
     async resolve({ ctx }) {
-      const userId = ctx.session?.user?.id;
+      const userId = ctx.session.user.id;
       const resumesData = await ctx.prisma.resumesResume.findMany({
         include: {
           _count: {
@@ -82,6 +102,11 @@ export const resumesResumeUserRouter = createProtectedRouter()
               stars: true,
             },
           },
+          stars: {
+            where: {
+              userId,
+            },
+          },
           user: {
             select: {
               name: true,
@@ -101,6 +126,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
           createdAt: r.createdAt,
           experience: r.experience,
           id: r.id,
+          isStarredByUser: r.stars.length > 0,
           location: r.location,
           numComments: r._count.comments,
           numStars: r._count.stars,
diff --git a/apps/portal/src/server/router/resumes/resumes-star-user-router.ts b/apps/portal/src/server/router/resumes/resumes-star-user-router.ts
index 40daea7d..9e780858 100644
--- a/apps/portal/src/server/router/resumes/resumes-star-user-router.ts
+++ b/apps/portal/src/server/router/resumes/resumes-star-user-router.ts
@@ -2,22 +2,15 @@ import { z } from 'zod';
 
 import { createProtectedRouter } from '../context';
 
-export const resumesStarUserRouter = createProtectedRouter().mutation(
-  'create_or_delete',
-  {
+export const resumesStarUserRouter = createProtectedRouter()
+  .mutation('unstar', {
     input: z.object({
       resumeId: z.string(),
     }),
     async resolve({ ctx, input }) {
       const { resumeId } = input;
-      // Update_star will only be called if user is logged in
-      const userId = ctx.session!.user!.id;
-
-      // Use the resumeId and resumeProfileId to check if star exists
-      const resumesStar = await ctx.prisma.resumesStar.findUnique({
-        select: {
-          id: true,
-        },
+      const userId = ctx.session.user.id;
+      return await ctx.prisma.resumesStar.delete({
         where: {
           userId_resumeId: {
             resumeId,
@@ -25,23 +18,20 @@ export const resumesStarUserRouter = createProtectedRouter().mutation(
           },
         },
       });
-
-      if (resumesStar === null) {
-        return await ctx.prisma.resumesStar.create({
-          data: {
-            resumeId,
-            userId,
-          },
-        });
-      }
-      return await ctx.prisma.resumesStar.delete({
-        where: {
-          userId_resumeId: {
-            resumeId,
-            userId,
-          },
+    },
+  })
+  .mutation('star', {
+    input: z.object({
+      resumeId: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      const { resumeId } = input;
+      const userId = ctx.session.user.id;
+      return await ctx.prisma.resumesStar.create({
+        data: {
+          resumeId,
+          userId,
         },
       });
     },
-  },
-);
+  });
diff --git a/apps/portal/src/types/offers.d.ts b/apps/portal/src/types/offers.d.ts
new file mode 100644
index 00000000..35539b45
--- /dev/null
+++ b/apps/portal/src/types/offers.d.ts
@@ -0,0 +1,186 @@
+import type { JobType } from '@prisma/client';
+
+export type Profile = {
+  analysis: ProfileAnalysis?;
+  background: Background?;
+  editToken: string?;
+  id: string;
+  isEditable: boolean;
+  offers: Array<ProfileOffer>;
+  profileName: string;
+};
+
+export type Background = {
+  educations: Array<Education>;
+  experiences: Array<Experience>;
+  id: string;
+  specificYoes: Array<SpecificYoe>;
+  totalYoe: number;
+};
+
+export type Experience = {
+  company: OffersCompany?;
+  durationInMonths: number?;
+  id: string;
+  jobType: JobType?;
+  level: string?;
+  monthlySalary: Valuation?;
+  specialization: string?;
+  title: string?;
+  totalCompensation: Valuation?;
+};
+
+export type OffersCompany = {
+  createdAt: Date;
+  description: string;
+  id: string;
+  logoUrl: string;
+  name: string;
+  slug: string;
+  updatedAt: Date;
+};
+
+export type Valuation = {
+  currency: string;
+  value: number;
+};
+
+export type Education = {
+  endDate: Date?;
+  field: string?;
+  id: string;
+  school: string?;
+  startDate: Date?;
+  type: string?;
+};
+
+export type SpecificYoe = {
+  domain: string;
+  id: string;
+  yoe: number;
+};
+
+export type DashboardOffer = {
+  company: OffersCompany;
+  id: string;
+  income: Valuation;
+  monthYearReceived: Date;
+  profileId: string;
+  title: string;
+  totalYoe: number;
+};
+
+export type ProfileOffer = {
+  comments: string;
+  company: OffersCompany;
+  id: string;
+  jobType: JobType;
+  location: string;
+  monthYearReceived: Date;
+  negotiationStrategy: string;
+  offersFullTime: FullTime?;
+  offersIntern: Intern?;
+};
+
+export type FullTime = {
+  baseSalary: Valuation;
+  bonus: Valuation;
+  id: string;
+  level: string;
+  specialization: string;
+  stocks: Valuation;
+  title: string;
+  totalCompensation: Valuation;
+};
+
+export type Intern = {
+  id: string;
+  internshipCycle: string;
+  monthlySalary: Valuation;
+  specialization: string;
+  startYear: number;
+  title: string;
+};
+
+export type Reply = {
+  createdAt: Date;
+  id: string;
+  message: string;
+  replies: Array<Reply>?;
+  replyingToId: string?;
+  user: User?;
+};
+
+export type User = {
+  email: string?;
+  emailVerified: Date?;
+  id: string;
+  image: string?;
+  name: string?;
+};
+
+export type GetOffersResponse = {
+  data: Array<DashboardOffer>;
+  paging: Paging;
+};
+
+export type Paging = {
+  currentPage: number;
+  numOfItems: number;
+  numOfPages: number;
+  totalItems: number;
+};
+
+export type CreateOfferProfileResponse = {
+  id: string;
+  token: string;
+};
+
+export type OffersDiscussion = {
+  data: Array<Reply>;
+};
+
+export type ProfileAnalysis = {
+  companyAnalysis: Array<Analysis>;
+  id: string;
+  overallAnalysis: Analysis;
+  overallHighestOffer: AnalysisHighestOffer;
+  profileId: string;
+};
+
+export type Analysis = {
+  noOfOffers: number;
+  percentile: number;
+  topPercentileOffers: Array<AnalysisOffer>;
+};
+
+export type AnalysisHighestOffer = {
+  company: OffersCompany;
+  id: string;
+  level: string;
+  location: string;
+  specialization: string;
+  totalYoe: number;
+};
+
+export type AnalysisOffer = {
+  company: OffersCompany;
+  id: string;
+  income: number;
+  jobType: JobType;
+  level: string;
+  location: string;
+  monthYearReceived: Date;
+  negotiationStrategy: string;
+  previousCompanies: Array<string>;
+  profileName: string;
+  specialization: string;
+  title: string;
+  totalYoe: number;
+};
+
+export type AddToProfileResponse = {
+  id: string;
+  profileName: string;
+  userId: string;
+};
diff --git a/apps/portal/src/types/questions.d.ts b/apps/portal/src/types/questions.d.ts
index 90bb8b32..9ee7d6f0 100644
--- a/apps/portal/src/types/questions.d.ts
+++ b/apps/portal/src/types/questions.d.ts
@@ -23,6 +23,7 @@ export type AnswerComment = {
   numVotes: number;
   updatedAt: Date;
   user: string;
+  userImage: string;
 };
 
 export type Answer = {
@@ -32,6 +33,7 @@ export type Answer = {
   numComments: number;
   numVotes: number;
   user: string;
+  userImage: string;
 };
 
 export type QuestionComment = {
@@ -40,4 +42,5 @@ export type QuestionComment = {
   id: string;
   numVotes: number;
   user: string;
+  userImage: string;
 };
diff --git a/apps/portal/src/types/resume-comments.d.ts b/apps/portal/src/types/resume-comments.d.ts
index 5a6dfff8..335948c3 100644
--- a/apps/portal/src/types/resume-comments.d.ts
+++ b/apps/portal/src/types/resume-comments.d.ts
@@ -1,15 +1,13 @@
-import type { ResumesSection } from '@prisma/client';
+import type { ResumesCommentVote, ResumesSection } from '@prisma/client';
 
 /**
- * Returned by `resumeReviewsRouter` (query for 'resumes.reviews.list') and received as prop by `Comment` in `CommentsList`
+ * Returned by `resumeCommentsRouter` (query for 'resumes.comments.list') and received as prop by `Comment` in `CommentsList`
  * frontend-friendly representation of the query
  */
-export type ResumeComment = {
+export type ResumeComment = Readonly<{
   createdAt: Date;
   description: string;
-  hasVoted: boolean;
   id: string;
-  numVotes: number;
   resumeId: string;
   section: ResumesSection;
   updatedAt: Date;
@@ -18,4 +16,9 @@ export type ResumeComment = {
     name: string?;
     userId: string;
   };
-};
+}>;
+
+export type ResumeCommentVote = Readonly<{
+  numVotes: number;
+  userVote: ResumesCommentVote?;
+}>;
diff --git a/apps/portal/src/types/resume.d.ts b/apps/portal/src/types/resume.d.ts
index 5b2a33a9..39e782bb 100644
--- a/apps/portal/src/types/resume.d.ts
+++ b/apps/portal/src/types/resume.d.ts
@@ -3,6 +3,7 @@ export type Resume = {
   createdAt: Date;
   experience: string;
   id: string;
+  isStarredByUser: boolean;
   location: string;
   numComments: number;
   numStars: number;
diff --git a/apps/portal/src/utils/JobExperienceLevel.ts b/apps/portal/src/utils/JobExperienceLevel.ts
new file mode 100644
index 00000000..3c45001b
--- /dev/null
+++ b/apps/portal/src/utils/JobExperienceLevel.ts
@@ -0,0 +1,29 @@
+enum JobExperienceLevel {
+  Entry,
+  Mid,
+  Senior,
+}
+
+export function yearsOfExperienceToLevel(years: number): Readonly<{
+  label: string;
+  level: JobExperienceLevel;
+}> {
+  if (years <= 2) {
+    return {
+      label: 'Entry Level',
+      level: JobExperienceLevel.Entry,
+    };
+  }
+
+  if (years <= 5) {
+    return {
+      label: 'Mid Level',
+      level: JobExperienceLevel.Mid,
+    };
+  }
+
+  return {
+    label: 'Senior Level',
+    level: JobExperienceLevel.Senior,
+  };
+}
diff --git a/apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx b/apps/portal/src/utils/offers/currency/CurrencyEnum.tsx
similarity index 100%
rename from apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx
rename to apps/portal/src/utils/offers/currency/CurrencyEnum.tsx
diff --git a/apps/portal/src/components/offers/util/currency/CurrencySelector.tsx b/apps/portal/src/utils/offers/currency/CurrencySelector.tsx
similarity index 89%
rename from apps/portal/src/components/offers/util/currency/CurrencySelector.tsx
rename to apps/portal/src/utils/offers/currency/CurrencySelector.tsx
index 2ebe5bd5..2ba883b4 100644
--- a/apps/portal/src/components/offers/util/currency/CurrencySelector.tsx
+++ b/apps/portal/src/utils/offers/currency/CurrencySelector.tsx
@@ -1,6 +1,6 @@
 import { Select } from '@tih/ui';
 
-import { Currency } from '~/components/offers/util/currency/CurrencyEnum';
+import { Currency } from '~/utils/offers/currency/CurrencyEnum';
 
 const currencyOptions = Object.entries(Currency).map(([key, value]) => ({
   label: key,
diff --git a/apps/portal/src/utils/offers/currency/index.tsx b/apps/portal/src/utils/offers/currency/index.tsx
new file mode 100644
index 00000000..c2cfcb05
--- /dev/null
+++ b/apps/portal/src/utils/offers/currency/index.tsx
@@ -0,0 +1,14 @@
+import type { Money } from '~/components/offers/types';
+
+export function convertCurrencyToString({ currency, value }: Money) {
+  if (!value) {
+    return '-';
+  }
+  const formatter = new Intl.NumberFormat('en-US', {
+    currency,
+    maximumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+    minimumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
+    style: 'currency',
+  });
+  return `${formatter.format(10000)}`; /* $2,500.00 */
+}
diff --git a/apps/portal/src/utils/offers/form.tsx b/apps/portal/src/utils/offers/form.tsx
new file mode 100644
index 00000000..2e88ac88
--- /dev/null
+++ b/apps/portal/src/utils/offers/form.tsx
@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Removes empty objects, empty strings, `null`, `undefined`, and `NaN` values from an object.
+ * Does not remove empty arrays.
+ * @param object
+ * @returns object without empty values or objects.
+ */
+export function cleanObject(object: any) {
+  Object.entries(object).forEach(([k, v]) => {
+    if ((v && typeof v === 'object') || Array.isArray(v)) {
+      cleanObject(v);
+    }
+    if (
+      (v &&
+        typeof v === 'object' &&
+        !Object.keys(v).length &&
+        !Array.isArray(v)) ||
+      v === null ||
+      v === undefined ||
+      v === '' ||
+      v !== v
+    ) {
+      if (Array.isArray(object)) {
+        const index = object.indexOf(v);
+        object.splice(index, 1);
+      } else if (!(v instanceof Date)) {
+        delete object[k];
+      }
+    }
+  });
+  return object;
+}
+
+/**
+ * Removes invalid money data from an object.
+ * If currency is present but value is not present, money object is removed.
+ * @param object
+ * @returns object without invalid money data.
+ */
+export function removeInvalidMoneyData(object: any) {
+  Object.entries(object).forEach(([k, v]) => {
+    if ((v && typeof v === 'object') || Array.isArray(v)) {
+      removeInvalidMoneyData(v);
+    }
+    if (k === 'currency') {
+      if (object.value === undefined) {
+        delete object[k];
+      } else if (
+        object.value === null ||
+        object.value !== object.value ||
+        object.value === ''
+      ) {
+        delete object[k];
+        delete object.value;
+      }
+    }
+  });
+  return object;
+}
diff --git a/apps/portal/src/utils/offers/time.tsx b/apps/portal/src/utils/offers/time.tsx
new file mode 100644
index 00000000..c13a6efe
--- /dev/null
+++ b/apps/portal/src/utils/offers/time.tsx
@@ -0,0 +1,25 @@
+import { getMonth, getYear } from 'date-fns';
+
+import type { MonthYear } from '~/components/shared/MonthYearPicker';
+
+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}`;
+}
+
+export function formatMonthYear({ month, year }: MonthYear) {
+  const monthString = month < 10 ? month.toString() : `0${month}`;
+  const yearString = year.toString();
+  return `${monthString}/${yearString}`;
+}
+
+export function getCurrentMonth() {
+  return getMonth(Date.now());
+}
+
+export function getCurrentYear() {
+  return getYear(Date.now());
+}
diff --git a/apps/portal/src/utils/questions/useSearchFilter.ts b/apps/portal/src/utils/questions/useSearchFilter.ts
index 1a7bd199..0b916261 100644
--- a/apps/portal/src/utils/questions/useSearchFilter.ts
+++ b/apps/portal/src/utils/questions/useSearchFilter.ts
@@ -27,13 +27,6 @@ export const useSearchFilter = <Value extends string = string>(
         if (localStorageValue !== null) {
           const loadedFilters = JSON.parse(localStorageValue);
           setFilters(loadedFilters);
-          router.replace({
-            pathname: router.pathname,
-            query: {
-              ...router.query,
-              [name]: loadedFilters,
-            },
-          });
         }
       }
       setIsInitialized(true);
@@ -44,15 +37,8 @@ export const useSearchFilter = <Value extends string = string>(
     (newFilters: Array<Value>) => {
       setFilters(newFilters);
       localStorage.setItem(name, JSON.stringify(newFilters));
-      router.replace({
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          [name]: newFilters,
-        },
-      });
     },
-    [name, router],
+    [name],
   );
 
   return [filters, setFiltersCallback, isInitialized] as const;
@@ -73,9 +59,7 @@ export const useSearchFilterSingle = <Value extends string = string>(
 
   return [
     filters[0],
-    (value: Value) => {
-      setFilters([value]);
-    },
+    (value: Value) => setFilters([value]),
     isInitialized,
   ] as const;
 };
diff --git a/apps/portal/src/utils/questions/useVote.ts b/apps/portal/src/utils/questions/useVote.ts
new file mode 100644
index 00000000..e71a6a62
--- /dev/null
+++ b/apps/portal/src/utils/questions/useVote.ts
@@ -0,0 +1,175 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback } from 'react';
+import type { Vote } from '@prisma/client';
+
+import { trpc } from '../trpc';
+
+type UseVoteOptions = {
+  createVote: (opts: { vote: Vote }) => void;
+  deleteVote: (opts: { id: string }) => void;
+  updateVote: (opts: BackendVote) => void;
+};
+
+type BackendVote = {
+  id: string;
+  vote: Vote;
+};
+
+const createVoteCallbacks = (
+  vote: BackendVote | null,
+  opts: UseVoteOptions,
+) => {
+  const { createVote, updateVote, deleteVote } = opts;
+
+  const handleUpvote = () => {
+    // Either upvote or remove upvote
+    if (vote) {
+      if (vote.vote === 'DOWNVOTE') {
+        updateVote({
+          id: vote.id,
+          vote: 'UPVOTE',
+        });
+      } else {
+        deleteVote({
+          id: vote.id,
+        });
+      }
+      // Update vote to an upvote
+    } else {
+      createVote({
+        vote: 'UPVOTE',
+      });
+    }
+  };
+
+  const handleDownvote = () => {
+    // Either downvote or remove downvote
+    if (vote) {
+      if (vote.vote === 'UPVOTE') {
+        updateVote({
+          id: vote.id,
+          vote: 'DOWNVOTE',
+        });
+      } else {
+        deleteVote({
+          id: vote.id,
+        });
+      }
+      // Update vote to an upvote
+    } else {
+      createVote({
+        vote: 'DOWNVOTE',
+      });
+    }
+  };
+
+  return { handleDownvote, handleUpvote };
+};
+
+type MutationKey = Parameters<typeof trpc.useMutation>[0];
+type QueryKey = Parameters<typeof trpc.useQuery>[0][0];
+
+export const useQuestionVote = (id: string) => {
+  return useVote(id, {
+    create: 'questions.questions.createVote',
+    deleteKey: 'questions.questions.deleteVote',
+    idKey: 'questionId',
+    query: 'questions.questions.getVote',
+    update: 'questions.questions.updateVote',
+  });
+};
+
+export const useAnswerVote = (id: string) => {
+  return useVote(id, {
+    create: 'questions.answers.createVote',
+    deleteKey: 'questions.answers.deleteVote',
+    idKey: 'answerId',
+    query: 'questions.answers.getVote',
+    update: 'questions.answers.updateVote',
+  });
+};
+
+export const useQuestionCommentVote = (id: string) => {
+  return useVote(id, {
+    create: 'questions.questions.comments.createVote',
+    deleteKey: 'questions.questions.comments.deleteVote',
+    idKey: 'questionCommentId',
+    query: 'questions.questions.comments.getVote',
+    update: 'questions.questions.comments.updateVote',
+  });
+};
+
+export const useAnswerCommentVote = (id: string) => {
+  return useVote(id, {
+    create: 'questions.answers.comments.createVote',
+    deleteKey: 'questions.answers.comments.deleteVote',
+    idKey: 'answerCommentId',
+    query: 'questions.answers.comments.getVote',
+    update: 'questions.answers.comments.updateVote',
+  });
+};
+
+type VoteProps<VoteQueryKey extends QueryKey = QueryKey> = {
+  create: MutationKey;
+  deleteKey: MutationKey;
+  idKey: string;
+  query: VoteQueryKey;
+  update: MutationKey;
+};
+
+export const useVote = <VoteQueryKey extends QueryKey = QueryKey>(
+  id: string,
+  opts: VoteProps<VoteQueryKey>,
+) => {
+  const { create, deleteKey, query, update, idKey } = opts;
+  const utils = trpc.useContext();
+
+  const onVoteUpdate = useCallback(() => {
+    // TODO: Optimise query invalidation
+    utils.invalidateQueries([query, { [idKey]: id } as any]);
+    utils.invalidateQueries(['questions.questions.getQuestionsByFilter']);
+    utils.invalidateQueries(['questions.questions.getQuestionById']);
+    utils.invalidateQueries(['questions.answers.getAnswers']);
+    utils.invalidateQueries(['questions.answers.getAnswerById']);
+    utils.invalidateQueries([
+      'questions.questions.comments.getQuestionComments',
+    ]);
+    utils.invalidateQueries(['questions.answers.comments.getAnswerComments']);
+  }, [id, idKey, utils, query]);
+
+  const { data } = trpc.useQuery([
+    query,
+    {
+      [idKey]: id,
+    },
+  ] as any);
+
+  const backendVote = data as BackendVote;
+
+  const { mutate: createVote } = trpc.useMutation(create, {
+    onSuccess: onVoteUpdate,
+  });
+  const { mutate: updateVote } = trpc.useMutation(update, {
+    onSuccess: onVoteUpdate,
+  });
+
+  const { mutate: deleteVote } = trpc.useMutation(deleteKey, {
+    onSuccess: onVoteUpdate,
+  });
+
+  const { handleDownvote, handleUpvote } = createVoteCallbacks(
+    backendVote ?? null,
+    {
+      createVote: ({ vote }) => {
+        createVote({
+          [idKey]: id,
+          vote,
+        } as any);
+      },
+      deleteVote,
+      updateVote,
+    },
+  );
+
+  return { handleDownvote, handleUpvote, vote: backendVote ?? null };
+};
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index df648014..546cf92c 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "start-storybook -p 6001",
-    "build": "build-storybook --docs",
+    "build": "tsc && build-storybook --docs",
     "preview-storybook": "serve storybook-static",
     "clean": "rm -rf .turbo && rm -rf node_modules",
     "lint": "eslint stories/**/*.ts* --fix",
diff --git a/apps/storybook/stories/select.stories.tsx b/apps/storybook/stories/select.stories.tsx
index 35c74362..7cfe1187 100644
--- a/apps/storybook/stories/select.stories.tsx
+++ b/apps/storybook/stories/select.stories.tsx
@@ -14,6 +14,9 @@ export default {
       control: { type: 'select' },
       options: SelectDisplays,
     },
+    errorMessage: {
+      control: 'text',
+    },
     isLabelHidden: {
       control: 'boolean',
     },
@@ -23,6 +26,9 @@ export default {
     name: {
       control: 'text',
     },
+    placeholder: {
+      control: 'text',
+    },
   },
   component: Select,
   title: 'Select',
@@ -181,28 +187,78 @@ export function Required() {
   const [value, setValue] = useState('apple');
 
   return (
-    <div className="space-x-4">
-      <Select
-        label="Select a fruit"
-        options={[
-          {
-            label: 'Apple',
-            value: 'apple',
-          },
-          {
-            label: 'Banana',
-            value: 'banana',
-          },
-          {
-            label: 'Orange',
-            value: 'orange',
-          },
-        ]}
-        required={true}
-        value={value}
-        onChange={setValue}
-      />
-    </div>
+    <Select
+      label="Select a fruit"
+      options={[
+        {
+          label: 'Apple',
+          value: 'apple',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+        },
+        {
+          label: 'Orange',
+          value: 'orange',
+        },
+      ]}
+      required={true}
+      value={value}
+      onChange={setValue}
+    />
+  );
+}
+
+export function Placeholder() {
+  return (
+    <Select
+      label="Select a fruit"
+      options={[
+        {
+          label: 'Apple',
+          value: 'apple',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+        },
+        {
+          label: 'Orange',
+          value: 'orange',
+        },
+      ]}
+      placeholder="Select a fruit"
+      required={true}
+    />
+  );
+}
+
+export function Error() {
+  const [value, setValue] = useState('banana');
+
+  return (
+    <Select
+      errorMessage={value !== 'apple' ? 'Must select apple' : undefined}
+      label="Select a fruit"
+      options={[
+        {
+          label: 'Apple',
+          value: 'apple',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+        },
+        {
+          label: 'Orange',
+          value: 'orange',
+        },
+      ]}
+      required={true}
+      value={value}
+      onChange={setValue}
+    />
   );
 }
 
diff --git a/apps/storybook/stories/typeahead.stories.tsx b/apps/storybook/stories/typeahead.stories.tsx
index a0de94d8..defffbf4 100644
--- a/apps/storybook/stories/typeahead.stories.tsx
+++ b/apps/storybook/stories/typeahead.stories.tsx
@@ -17,6 +17,12 @@ export default {
     noResultsMessage: {
       control: 'text',
     },
+    placeholder: {
+      control: 'text',
+    },
+    required: {
+      control: 'boolean',
+    },
   },
   component: Typeahead,
   parameters: {
@@ -77,3 +83,39 @@ Basic.args = {
   isLabelHidden: false,
   label: 'Author',
 };
+
+export function Required() {
+  const people = [
+    { id: '1', label: 'Wade Cooper', value: '1' },
+    { id: '2', label: 'Arlene Mccoy', value: '2' },
+    { id: '3', label: 'Devon Webb', value: '3' },
+    { id: '4', label: 'Tom Cook', value: '4' },
+    { id: '5', label: 'Tanya Fox', value: '5' },
+    { id: '6', label: 'Hellen Schmidt', value: '6' },
+  ];
+  const [selectedEntry, setSelectedEntry] = useState<TypeaheadOption>(
+    people[0],
+  );
+  const [query, setQuery] = useState('');
+
+  const filteredPeople =
+    query === ''
+      ? people
+      : people.filter((person) =>
+          person.label
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .includes(query.toLowerCase().replace(/\s+/g, '')),
+        );
+
+  return (
+    <Typeahead
+      label="Author"
+      options={filteredPeople}
+      required={true}
+      value={selectedEntry}
+      onQueryChange={setQuery}
+      onSelect={setSelectedEntry}
+    />
+  );
+}
diff --git a/apps/website/contents/choosing-between-companies.md b/apps/website/contents/choosing-between-companies.md
index 47801ad1..c00e97d7 100644
--- a/apps/website/contents/choosing-between-companies.md
+++ b/apps/website/contents/choosing-between-companies.md
@@ -15,7 +15,7 @@ First and foremost, compensation. Most technical roles at tech companies would r
 
 Not all stock grants are equal as well. Some companies have linear vesting cycles (you vest the same amount every year), some companies like Amazon and Snap have backloaded schemes (you vest less in the earlier years, more later), and there are pay attention to cliffs as well. [Stripe and Lyft](https://www.theinformation.com/articles/stripe-and-lyft-speed-up-equity-payouts-to-first-year) recently changed their stock structure and announced that they will speed up equity payouts to the first year. This sounds good initially, [but in reality there are some nuances](https://tanay.substack.com/p/employee-compensation-and-one-year).
 
-Regardless of company, **always negotiate** your offer, especially if you have multiple offers to choose from! Having multiple offers in hand is the best bargaining chip you can have for negotiation and you should leverage it. We go into this more in the [Negotiation](./negotiation.md) section. Use [Moonchaser](https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_choosing_between_companies) for risk-free negotiation services.
+Regardless of company, **always negotiate** your offer, especially if you have multiple offers to choose from! Having multiple offers in hand is the best bargaining chip you can have for negotiation and you should leverage it. We go into this more in the [Negotiation](./negotiation.md) section. Use [Rora](https://www.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_choosing_between_companies) for risk-free negotiation services.
 
 ## Products
 
diff --git a/apps/website/contents/negotiation-rules.md b/apps/website/contents/negotiation-rules.md
index 8f8d59e6..f1deb8f4 100644
--- a/apps/website/contents/negotiation-rules.md
+++ b/apps/website/contents/negotiation-rules.md
@@ -110,6 +110,6 @@ Don't waste their time or play games for your own purposes. Even if the company
 
 :::tip Expert tip
 
-Get paid more. Receive salary negotiation help from [**Moonchaser**](https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) (risk-free) or [**Levels.fyi**](https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) and their team of experienced recruiters. Don't leave money on the table 💰!
+Get paid more. Receive salary negotiation help from [**Rora**](https://www.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) (risk-free) or [**Levels.fyi**](https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) and their team of experienced recruiters. Don't leave money on the table 💰!
 
 :::
diff --git a/apps/website/contents/negotiation.md b/apps/website/contents/negotiation.md
index 57fefabd..d98a6abd 100644
--- a/apps/website/contents/negotiation.md
+++ b/apps/website/contents/negotiation.md
@@ -32,11 +32,11 @@ If you've received an offer (or even better, offers), congratulations! You may h
 
 If you haven't been negotiating your past offers, or are new to the negotiation game, worry not! There are multiple negotiation services that can help you out. Typically, they'd be well-worth the cost. Had I know about negotiation services in the past, I'd have leveraged them!
 
-### Moonchaser
+### Rora
 
-How Moonchaser works is that you will be guided by their experienced team of professionals throughout the entire salary negotiation process. It's also risk-free because you don't have to pay anything unless you have an increased offer. It's a **no-brainer decision** to get the help of Moonchaser during the offer process - some increase is better than no increase. Don't leave money on the table! Check out [Moonchaser](https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation).
+How Rora works is that you will be guided by their experienced team of professionals throughout the entire salary negotiation process. It's also risk-free because you don't have to pay anything unless you have an increased offer. It's a **no-brainer decision** to get the help of Rora during the offer process - some increase is better than no increase. Don't leave money on the table! Check out [Rora](https://www.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation).
 
-Things Moonchaser can do for you:
+Things Rora can do for you:
 
 - Help you to negotiate increases even without competing offers
 - Provide tailored advice through their knowledge of compensation ranges at many companies
@@ -45,18 +45,18 @@ Things Moonchaser can do for you:
 - Provide you with live guidance during the recruiter call through chat
 - Introduce you to recruiters at other companies
 
-<a className="button button--primary" href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation">Book a free consultation with Moonchaser &nbsp;→</a>
+<a className="button button--primary" href="https://www.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation">Book a free consultation with Rora &nbsp;→</a>
 
 <br/>
 <br/>
 
 ### Levels.fyi
 
-[Levels.fyi](https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) is most famously known for being a salary database but they also offer complementary services such as salary negotiation where you will be put in-touch with experienced recruiters to help you in the process. How Levels.fyi differs from Moonchaser is that Levels.fyi charges a flat fee whereas Moonchaser takes a percentage of the negotiated difference.
+[Levels.fyi](https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) is most famously known for being a salary database but they also offer complementary services such as salary negotiation where you will be put in-touch with experienced recruiters to help you in the process. How Levels.fyi differs from Rora is that Levels.fyi charges a flat fee whereas Rora takes a percentage of the negotiated difference.
 
 :::tip Expert tip
 
-Get paid more. Receive salary negotiation advice from [**Moonchaser**](https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) (risk-free) or [**Levels.fyi**](https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) and their team of experienced recruiters. Don't leave money on the table 💰!
+Get paid more. Receive salary negotiation advice from [**Rora**](https://www.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) (risk-free) or [**Levels.fyi**](https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) and their team of experienced recruiters. Don't leave money on the table 💰!
 
 :::
 
diff --git a/apps/website/src/components/SidebarAd/index.js b/apps/website/src/components/SidebarAd/index.js
index 711910df..0e250e20 100644
--- a/apps/website/src/components/SidebarAd/index.js
+++ b/apps/website/src/components/SidebarAd/index.js
@@ -69,23 +69,23 @@ function AlgoMonster({ position }) {
   );
 }
 
-function Moonchaser({ position }) {
+function Rora({ position }) {
   return (
     <a
-      className={clsx(styles.container, styles.backgroundMoonchaser)}
-      href={`https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}`}
+      className={clsx(styles.container, styles.backgroundRora)}
+      href={`https://www.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}`}
       key={Math.random()}
       target="_blank"
       rel="noopener"
       onClick={() => {
-        window.gtag('event', `moonchaser.${position}.click`);
+        window.gtag('event', `rora.${position}.click`);
       }}>
       <p className={styles.tagline}>
         <strong className={styles.title}>
           Risk-free salary negotiation help
         </strong>{' '}
-        Receive risk-free salary negotiation advice from <u>Moonchaser</u>. You
-        pay nothing unless your offer is increased.{' '}
+        Receive risk-free salary negotiation advice from <u>Rora</u>. You pay
+        nothing unless your offer is increased.{' '}
         <u>Book your free consultation today!</u>
       </p>
     </a>
@@ -210,7 +210,7 @@ export default React.memo(function SidebarAd({ position }) {
         }
 
         if (path.includes('negotiation') || path.includes('compensation')) {
-          return <Moonchaser key={Math.random()} position={position} />;
+          return <Rora key={Math.random()} position={position} />;
         }
 
         if (path.includes('system-design')) {
diff --git a/apps/website/src/components/SidebarAd/styles.module.css b/apps/website/src/components/SidebarAd/styles.module.css
index d7fc116e..dded48cc 100644
--- a/apps/website/src/components/SidebarAd/styles.module.css
+++ b/apps/website/src/components/SidebarAd/styles.module.css
@@ -37,7 +37,7 @@
   background-color: #58527b;
 }
 
-.backgroundMoonchaser {
+.backgroundRora {
   background-color: #1574f9;
 }
 
diff --git a/apps/website/src/pages/index.js b/apps/website/src/pages/index.js
index 858d4a4f..0da57814 100755
--- a/apps/website/src/pages/index.js
+++ b/apps/website/src/pages/index.js
@@ -222,7 +222,7 @@ function WhatIsThisSection() {
   );
 }
 
-function MoonchaserSection() {
+function RoraSection() {
   // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
   // we'll render this on the browser only.
   return (
@@ -237,18 +237,18 @@ function MoonchaserSection() {
                     <h2 className={styles.sectionSponsorTitle}>
                       <strong>
                         Get paid more. Receive risk-free salary negotiation
-                        advice from Moonchaser. You pay nothing unless your
-                        offer is increased.
+                        advice from Rora. You pay nothing unless your offer is
+                        increased.
                       </strong>
                     </h2>
                     <div className="margin-vert--lg">
                       <a
                         className="button button--secondary button--lg"
-                        href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
+                        href="https://www.teamrora.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
                         rel="noopener"
                         target="_blank"
                         onClick={() => {
-                          window.gtag('event', 'moonchaser.homepage.click');
+                          window.gtag('event', 'rora.homepage.click');
                         }}>
                         Get risk-free negotiation advice&nbsp;&nbsp;→
                       </a>
@@ -504,7 +504,7 @@ function GreatFrontEndSection() {
   return (
     <div
       className={clsx('padding-vert--lg')}
-      style={{backgroundColor: 'rgb(79, 70, 229)'}}>
+      style={{ backgroundColor: 'rgb(79, 70, 229)' }}>
       <div className="container">
         <div className="row">
           <div className="col col--8 col--offset-2">
@@ -517,13 +517,13 @@ function GreatFrontEndSection() {
                 </h2>
                 <h3
                   className={styles.sectionSponsorTitle}
-                  style={{fontSize: 'var(--ifm-h2-font-size)'}}>
+                  style={{ fontSize: 'var(--ifm-h2-font-size)' }}>
                   <strong>
                     Spend less time but prepare better for your Front End
                     Interviews with{' '}
                     <a
                       href="https://www.greatfrontend.com/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=techinterviewhandbook"
-                      style={{color: '#fff', textDecoration: 'underline'}}>
+                      style={{ color: '#fff', textDecoration: 'underline' }}>
                       Great Front End's
                     </a>{' '}
                     large pool of high quality practice questions and solutions.
diff --git a/package.json b/package.json
index b2b855c5..4c0a4f70 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "dev:ui": "turbo dev --filter=storybook... --filter=ui...",
     "dev:website": "turbo dev --filter=website...",
     "dev:all": "turbo dev --no-cache --parallel --continue",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "format": "prettier --write \"**/*.{js,jsx,cjs,mjs,ts,tsx,md,mdx}\"",
     "lint": "turbo lint",
     "test": "turbo test",
     "tsc": "turbo tsc"
diff --git a/packages/eslint-config-tih/index.js b/packages/eslint-config-tih/index.js
index 8ee2fa69..3894879c 100644
--- a/packages/eslint-config-tih/index.js
+++ b/packages/eslint-config-tih/index.js
@@ -43,7 +43,7 @@ module.exports = {
     'no-else-return': [ERROR, { allowElseIf: false }],
     'no-extra-boolean-cast': ERROR,
     'no-lonely-if': ERROR,
-    'no-shadow': ERROR,
+    'no-shadow': OFF,
     'no-unused-vars': OFF, // Use @typescript-eslint/no-unused-vars instead.
     'object-shorthand': ERROR,
     'one-var': [ERROR, 'never'],
@@ -100,6 +100,7 @@ module.exports = {
     '@typescript-eslint/no-for-in-array': ERROR,
     '@typescript-eslint/no-non-null-assertion': OFF,
     '@typescript-eslint/no-unused-vars': [ERROR, { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-shadow': ERROR,
     '@typescript-eslint/prefer-optional-chain': ERROR,
     '@typescript-eslint/require-array-sort-compare': ERROR,
     '@typescript-eslint/restrict-plus-operands': ERROR,
diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx
index d3af3e00..d23935a9 100644
--- a/packages/ui/src/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@@ -20,11 +20,13 @@ type Props<T> = Readonly<{
   borderStyle?: SelectBorderStyle;
   defaultValue?: T;
   display?: SelectDisplay;
+  errorMessage?: string;
   isLabelHidden?: boolean;
   label: string;
   name?: string;
   onChange?: (value: string) => void;
   options: ReadonlyArray<SelectItem<T>>;
+  placeholder?: string;
   value?: T;
 }> &
   Readonly<Attributes>;
@@ -34,15 +36,25 @@ const borderClasses: Record<SelectBorderStyle, string> = {
   borderless: 'border-transparent bg-transparent',
 };
 
+type State = 'error' | 'normal';
+
+const stateClasses: Record<State, string> = {
+  error:
+    'border-danger-300 text-danger-900 placeholder-danger-300 focus:outline-none focus:ring-danger-500 focus:border-danger-500',
+  normal: 'focus:border-primary-500 focus:ring-primary-500',
+};
+
 function Select<T>(
   {
     borderStyle = 'bordered',
     defaultValue,
     display,
     disabled,
+    errorMessage,
     label,
     isLabelHidden,
     options,
+    placeholder,
     required,
     value,
     onChange,
@@ -50,7 +62,10 @@ function Select<T>(
   }: Props<T>,
   ref: ForwardedRef<HTMLSelectElement>,
 ) {
+  const hasError = errorMessage != null;
   const id = useId();
+  const errorId = useId();
+  const state: State = hasError ? 'error' : 'normal';
 
   return (
     <div>
@@ -69,10 +84,12 @@ function Select<T>(
       )}
       <select
         ref={ref}
+        aria-describedby={hasError ? errorId : undefined}
         aria-label={isLabelHidden ? label : undefined}
         className={clsx(
           display === 'block' && 'block w-full',
-          'focus:border-primary-500 focus:ring-primary-500 rounded-md py-2 pl-3 pr-8 text-base focus:outline-none sm:text-sm',
+          'rounded-md py-2 pl-3 pr-8 text-base focus:outline-none sm:text-sm',
+          stateClasses[state],
           borderClasses[borderStyle],
           disabled && 'bg-slate-100',
         )}
@@ -85,12 +102,22 @@ function Select<T>(
           onChange?.(event.target.value);
         }}
         {...props}>
+        {placeholder && (
+          <option disabled={true} hidden={true} selected={true} value="">
+            {placeholder}
+          </option>
+        )}
         {options.map(({ label: optionLabel, value: optionValue }) => (
           <option key={String(optionValue)} value={String(optionValue)}>
             {optionLabel}
           </option>
         ))}
       </select>
+      {errorMessage && (
+        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+          {errorMessage}
+        </p>
+      )}
     </div>
   );
 }
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;
diff --git a/packages/ui/src/Typeahead/Typeahead.tsx b/packages/ui/src/Typeahead/Typeahead.tsx
index 2197716d..e84d03a3 100644
--- a/packages/ui/src/Typeahead/Typeahead.tsx
+++ b/packages/ui/src/Typeahead/Typeahead.tsx
@@ -1,7 +1,8 @@
 import clsx from 'clsx';
+import type { InputHTMLAttributes } from 'react';
 import { Fragment, useState } from 'react';
 import { Combobox, Transition } from '@headlessui/react';
-import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
 
 export type TypeaheadOption = Readonly<{
   // String value to uniquely identify the option.
@@ -10,8 +11,18 @@ export type TypeaheadOption = Readonly<{
   value: string;
 }>;
 
+type Attributes = Pick<
+  InputHTMLAttributes<HTMLInputElement>,
+  | 'disabled'
+  | 'name'
+  | 'onBlur'
+  | 'onFocus'
+  | 'pattern'
+  | 'placeholder'
+  | 'required'
+>;
+
 type Props = Readonly<{
-  disabled?: boolean;
   isLabelHidden?: boolean;
   label: string;
   noResultsMessage?: string;
@@ -23,7 +34,8 @@ type Props = Readonly<{
   onSelect: (option: TypeaheadOption) => void;
   options: ReadonlyArray<TypeaheadOption>;
   value?: TypeaheadOption;
-}>;
+}> &
+  Readonly<Attributes>;
 
 export default function Typeahead({
   disabled = false,
@@ -33,8 +45,10 @@ export default function Typeahead({
   nullable = false,
   options,
   onQueryChange,
+  required,
   value,
   onSelect,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   return (
@@ -66,6 +80,12 @@ export default function Typeahead({
             : 'mb-1 block text-sm font-medium text-slate-700',
         )}>
         {label}
+        {required && (
+          <span aria-hidden="true" className="text-danger-500">
+            {' '}
+            *
+          </span>
+        )}
       </Combobox.Label>
       <div className="relative">
         <div className="focus-visible:ring-offset-primary-300 relative w-full cursor-default overflow-hidden rounded-lg border border-slate-300 bg-white text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 sm:text-sm">
@@ -77,13 +97,15 @@ export default function Typeahead({
             displayValue={(option) =>
               (option as unknown as TypeaheadOption)?.label
             }
+            required={required}
             onChange={(event) => {
               setQuery(event.target.value);
               onQueryChange(event.target.value, event);
             }}
+            {...props}
           />
           <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-            <ChevronUpDownIcon
+            <ChevronDownIcon
               aria-hidden="true"
               className="h-5 w-5 text-slate-400"
             />
diff --git a/yarn.lock b/yarn.lock
index f4b091d4..bfce8e7c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4605,6 +4605,11 @@ atob@^2.1.2:
   resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 autoprefixer@^10.3.7, autoprefixer@^10.4.12, autoprefixer@^10.4.7:
   version "10.4.12"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.12.tgz"
@@ -7733,6 +7738,13 @@ file-loader@^6.0.0, file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
+  dependencies:
+    tslib "^2.4.0"
+
 file-system-cache@^1.0.5:
   version "1.1.0"
   resolved "https://registry.npmjs.org/file-system-cache/-/file-system-cache-1.1.0.tgz"
@@ -12162,6 +12174,15 @@ react-dom@18.2.0, react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-dropzone@^14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
+  integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
+  dependencies:
+    attr-accept "^2.2.2"
+    file-selector "^0.6.0"
+    prop-types "^15.8.1"
+
 react-element-to-jsx-string@^14.3.4:
   version "14.3.4"
   resolved "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz"