diff --git a/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx b/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx
index dda493ec..3b013c2c 100644
--- a/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx
+++ b/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx
@@ -5,6 +5,7 @@ import {
 } from '@heroicons/react/20/solid';
 import { JobType } from '@prisma/client';
 
+import { JobTypeLabel } from '~/components/offers/constants';
 import type { JobTitleType } from '~/components/shared/JobTitles';
 import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
 
@@ -33,7 +34,8 @@ export default function DashboardProfileCard({
       <div className="flex items-end justify-between">
         <div className="col-span-1 row-span-3">
           <h4 className="font-medium">
-            {getLabelForJobTitleType(title as JobTitleType)}
+            {getLabelForJobTitleType(title as JobTitleType)}{' '}
+            {jobType && <>({JobTypeLabel[jobType]})</>}
           </h4>
           <div className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-4">
             {company?.name && (
diff --git a/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx b/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx
index e7e6199b..d229eb52 100644
--- a/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx
+++ b/apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx
@@ -109,13 +109,13 @@ export default function OfferAnalysis({
 
   return (
     <div>
-      {isError && (
+      {isError ? (
         <p className="m-10 text-center">
           An error occurred while generating profile analysis.
         </p>
-      )}
-      {isLoading && <Spinner className="m-10" display="block" size="lg" />}
-      {!isError && !isLoading && (
+      ) : isLoading ? (
+        <Spinner className="m-10" display="block" size="lg" />
+      ) : (
         <div>
           <Tabs
             label="Result Navigation"
diff --git a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
index 4c7ecca3..37f85f8d 100644
--- a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
+++ b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
@@ -33,15 +33,15 @@ export default function OfferProfileCard({
     location,
     title,
     previousCompanies,
+    profileId,
   },
 }: OfferProfileCardProps) {
   return (
-    // <a
-    //   className="my-5 block rounded-lg bg-white p-4 px-8  shadow-md"
-    //   href={`/offers/profile/${id}`}
-    //   rel="noreferrer"
-    //   target="_blank">
-    <div className="my-5 block rounded-lg bg-white p-4 px-8  shadow-lg">
+    <a
+      className="my-5 block rounded-lg border bg-white p-4  px-8 shadow-md"
+      href={`/offers/profile/${profileId}`}
+      rel="noreferrer"
+      target="_blank">
       <div className="flex items-center gap-x-5">
         <div>
           <ProfilePhotoHolder size="sm" />
@@ -82,6 +82,6 @@ export default function OfferProfileCard({
           </p>
         </div>
       </div>
-    </div>
+    </a>
   );
 }
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
index d494912e..513d0de7 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
@@ -1,5 +1,5 @@
 import { signIn, useSession } from 'next-auth/react';
-import { useState } from 'react';
+import type { UseQueryResult } from 'react-query';
 import { DocumentDuplicateIcon } from '@heroicons/react/20/solid';
 import { BookmarkIcon as BookmarkOutlineIcon } from '@heroicons/react/24/outline';
 import { BookmarkIcon as BookmarkSolidIcon } from '@heroicons/react/24/solid';
@@ -11,6 +11,7 @@ import { copyProfileLink, getProfileLink } from '~/utils/offers/link';
 import { trpc } from '~/utils/trpc';
 
 type OfferProfileSaveProps = Readonly<{
+  isSavedQuery: UseQueryResult<boolean>;
   profileId: string;
   token?: string;
 }>;
@@ -18,10 +19,10 @@ type OfferProfileSaveProps = Readonly<{
 export default function OffersProfileSave({
   profileId,
   token,
+  isSavedQuery: { data: isSaved, isLoading },
 }: OfferProfileSaveProps) {
   const { showToast } = useToast();
   const { event: gaEvent } = useGoogleAnalytics();
-  const [isSaved, setSaved] = useState(false);
   const { data: session, status } = useSession();
 
   const saveMutation = trpc.useMutation(
@@ -47,15 +48,6 @@ export default function OffersProfileSave({
     },
   );
 
-  const isSavedQuery = trpc.useQuery(
-    [`offers.profile.isSaved`, { profileId, userId: session?.user?.id }],
-    {
-      onSuccess: (res) => {
-        setSaved(res);
-      },
-    },
-  );
-
   const trpcContext = trpc.useContext();
   const handleSave = () => {
     if (status === 'unauthenticated') {
@@ -125,9 +117,9 @@ export default function OffersProfileSave({
           </p>
           <div className="mt-6">
             <Button
-              disabled={isSavedQuery.isLoading || isSaved}
+              disabled={isLoading || isSaved}
               icon={isSaved ? BookmarkSolidIcon : BookmarkOutlineIcon}
-              isLoading={saveMutation.isLoading || isSavedQuery.isLoading}
+              isLoading={saveMutation.isLoading}
               label={isSaved ? 'Added to account' : 'Add to your account'}
               size="sm"
               variant="secondary"
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx
index b9070760..eeae57c7 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx
@@ -28,6 +28,7 @@ export default function OffersSubmissionAnalysis({
           allAnalysis={analysis}
           isError={isError}
           isLoading={isLoading}
+          isSubmission={true}
         />
       )}
     </div>
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
index 42eff26c..a03782dd 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
@@ -4,7 +4,7 @@ import type { SubmitHandler } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
 import { JobType } from '@prisma/client';
-import { Button, useToast } from '@tih/ui';
+import { Button, Spinner, useToast } from '@tih/ui';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import type { BreadcrumbStep } from '~/components/offers/Breadcrumbs';
@@ -116,7 +116,7 @@ export default function OffersSubmissionForm({
   const {
     handleSubmit,
     trigger,
-    formState: { isSubmitting, isSubmitSuccessful },
+    formState: { isSubmitting },
   } = formMethods;
 
   const generateAnalysisMutation = trpc.useMutation(
@@ -124,6 +124,10 @@ export default function OffersSubmissionForm({
     {
       onError(error) {
         console.error(error.message);
+        showToast({
+          title: 'Error generating analysis.',
+          variant: 'failure',
+        });
       },
       onSuccess() {
         router.push(
@@ -174,7 +178,7 @@ export default function OffersSubmissionForm({
         title:
           editProfileId && editToken
             ? 'Error updating offer profile.'
-            : 'Error creating offer profile',
+            : 'Error creating offer profile.',
         variant: 'failure',
       });
     },
@@ -193,7 +197,7 @@ export default function OffersSubmissionForm({
 
   const onSubmit: SubmitHandler<OffersProfileFormData> = async (data) => {
     const result = await trigger();
-    if (!result || isSubmitting || isSubmitSuccessful) {
+    if (!result || isSubmitting || createOrUpdateMutation.isLoading) {
       return;
     }
 
@@ -272,7 +276,9 @@ export default function OffersSubmissionForm({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return (
+  return generateAnalysisMutation.isLoading ? (
+    <Spinner className="m-10" display="block" size="lg" />
+  ) : (
     <div ref={pageRef} className="w-full">
       <div className="flex justify-center">
         <div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
@@ -324,9 +330,16 @@ export default function OffersSubmissionForm({
                       }}
                     />
                     <Button
-                      disabled={isSubmitting || isSubmitSuccessful}
+                      disabled={
+                        isSubmitting ||
+                        createOrUpdateMutation.isLoading ||
+                        generateAnalysisMutation.isLoading ||
+                        generateAnalysisMutation.isSuccess
+                      }
                       icon={ArrowRightIcon}
-                      isLoading={isSubmitting || isSubmitSuccessful}
+                      isLoading={
+                        isSubmitting || createOrUpdateMutation.isLoading
+                      }
                       label="Submit"
                       type="submit"
                       variant="primary"
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
index d951f088..d2cef0a7 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
@@ -279,23 +279,34 @@ function InternshipJobFields() {
         })}
       />
       <Collapsible label="Add more details">
-        <CitiesTypeahead
-          label="Location"
-          value={{
-            id: watchCityId,
-            label: watchCityName,
-            value: watchCityId,
-          }}
-          onSelect={(option) => {
-            if (option) {
-              setValue('background.experiences.0.cityId', option.value);
-              setValue('background.experiences.0.cityName', option.label);
-            } else {
-              setValue('background.experiences.0.cityId', '');
-              setValue('background.experiences.0.cityName', '');
-            }
-          }}
-        />
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+          <CitiesTypeahead
+            label="Location"
+            value={{
+              id: watchCityId,
+              label: watchCityName,
+              value: watchCityId,
+            }}
+            onSelect={(option) => {
+              if (option) {
+                setValue('background.experiences.0.cityId', option.value);
+                setValue('background.experiences.0.cityName', option.label);
+              } else {
+                setValue('background.experiences.0.cityId', '');
+                setValue('background.experiences.0.cityName', '');
+              }
+            }}
+          />
+          <FormTextInput
+            errorMessage={experiencesField?.durationInMonths?.message}
+            label="Duration (months)"
+            type="number"
+            {...register(`background.experiences.0.durationInMonths`, {
+              min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
+              valueAsNumber: true,
+            })}
+          />
+        </div>
       </Collapsible>
     </>
   );
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
index 68f1571a..42212fce 100644
--- a/apps/portal/src/components/offers/profile/OfferCard.tsx
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -3,11 +3,13 @@ import {
   BuildingOfficeIcon,
   MapPinIcon,
 } from '@heroicons/react/20/solid';
+import { JobType } from '@prisma/client';
 
 import { JobTypeLabel } from '~/components/offers/constants';
 import type { OfferDisplayData } from '~/components/offers/types';
 
 import { getLocationDisplayText } from '~/utils/offers/string';
+import { getDurationDisplayText } from '~/utils/offers/time';
 
 type Props = Readonly<{
   offer: OfferDisplayData;
@@ -75,9 +77,9 @@ export default function OfferCard({
                 <p>{receivedMonth}</p>
               </div>
             )}
-            {duration && (
+            {!!duration && (
               <div className="text-sm text-slate-500">
-                <p>{`${duration} months`}</p>
+                <p>{getDurationDisplayText(duration)}</p>
               </div>
             )}
           </div>
@@ -99,24 +101,27 @@ export default function OfferCard({
     return (
       <div className="border-t border-slate-200 px-4 py-5 sm:px-6">
         <dl className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4">
-          {totalCompensation && (
-            <div className="col-span-1">
-              <dt className="text-sm font-medium text-slate-500">
-                Total Compensation
-              </dt>
-              <dd className="mt-1 text-sm text-slate-900">
-                {totalCompensation}
-              </dd>
-            </div>
-          )}
-          {monthlySalary && (
-            <div className="col-span-1">
-              <dt className="text-sm font-medium text-slate-500">
-                Monthly Salary
-              </dt>
-              <dd className="mt-1 text-sm text-slate-900">{monthlySalary}</dd>
-            </div>
-          )}
+          {jobType === JobType.FULLTIME
+            ? totalCompensation && (
+                <div className="col-span-1">
+                  <dt className="text-sm font-medium text-slate-500">
+                    Total Compensation
+                  </dt>
+                  <dd className="mt-1 text-sm text-slate-900">
+                    {totalCompensation}
+                  </dd>
+                </div>
+              )
+            : monthlySalary && (
+                <div className="col-span-1">
+                  <dt className="text-sm font-medium text-slate-500">
+                    Monthly Salary
+                  </dt>
+                  <dd className="mt-1 text-sm text-slate-900">
+                    {monthlySalary}
+                  </dd>
+                </div>
+              )}
           {base && (
             <div className="col-span-1">
               <dt className="text-sm font-medium text-slate-500">
diff --git a/apps/portal/src/components/offers/profile/ProfileComments.tsx b/apps/portal/src/components/offers/profile/ProfileComments.tsx
index 34ac8b67..0eeaa1a3 100644
--- a/apps/portal/src/components/offers/profile/ProfileComments.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileComments.tsx
@@ -1,13 +1,7 @@
 import { signIn, useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { ClipboardDocumentIcon, ShareIcon } from '@heroicons/react/24/outline';
-import {
-  Button,
-  HorizontalDivider,
-  Spinner,
-  TextArea,
-  useToast,
-} from '@tih/ui';
+import { Button, Spinner, TextArea, useToast } from '@tih/ui';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import ExpandableCommentCard from '~/components/offers/profile/comments/ExpandableCommentCard';
@@ -110,8 +104,8 @@ export default function ProfileComments({
     );
   }
   return (
-    <div className="bh-white h-fit p-4 lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
-      <div className="bg-white lg:sticky lg:top-0">
+    <div className="bh-white h-fit lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
+      <div className="border-b border-slate-200 bg-white p-4 lg:sticky lg:top-0">
         <div className="flex justify-end">
           <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:space-y-0 md:space-x-4">
             <div className="col-span-1 flex justify-end">
@@ -169,7 +163,7 @@ export default function ProfileComments({
           </div>
         </div>
 
-        <div className="mt-2 mb-6 bg-white">
+        <div className="space-y-4">
           <h2 className="text-2xl font-bold">Discussions</h2>
           {isEditable || session?.user?.name ? (
             <div>
@@ -199,11 +193,9 @@ export default function ProfileComments({
                   />
                 </div>
               </div>
-              <HorizontalDivider />
             </div>
           ) : (
             <Button
-              className="mb-5"
               display="block"
               href={loginPageHref()}
               label="Sign in to join discussion"
@@ -212,10 +204,10 @@ export default function ProfileComments({
           )}
         </div>
       </div>
-      <section className="w-full">
-        <ul className="space-y-8" role="list">
+      <section className="w-full px-4">
+        <ul className="divide-y divide-slate-200" role="list">
           {replies?.map((reply: Reply) => (
-            <li key={reply.id}>
+            <li key={reply.id} className="py-6">
               <ExpandableCommentCard
                 comment={reply}
                 profileId={profileId}
diff --git a/apps/portal/src/components/offers/profile/ProfileDetails.tsx b/apps/portal/src/components/offers/profile/ProfileDetails.tsx
index 7bc5d10c..1d606c03 100644
--- a/apps/portal/src/components/offers/profile/ProfileDetails.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileDetails.tsx
@@ -118,7 +118,7 @@ function ProfileAnalysis({
   }
 
   return (
-    <div className="p-4">
+    <div className="space-y-4 p-4">
       {!analysis ? (
         <p>No analysis available.</p>
       ) : (
diff --git a/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx b/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
index 3cfb3745..372d9f06 100644
--- a/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
+++ b/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
@@ -1,11 +1,11 @@
 type ProfilePhotoHolderProps = Readonly<{
-  size?: 'lg' | 'sm';
+  size?: 'lg' | 'sm' | 'xs';
 }>;
 
 export default function ProfilePhotoHolder({
   size = 'lg',
 }: ProfilePhotoHolderProps) {
-  const sizeMap = { lg: '16', sm: '12' };
+  const sizeMap = { lg: '16', sm: '12', xs: '10' };
   return (
     <span
       className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-slate-100`}>
diff --git a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
index 9f0a0bef..b958d329 100644
--- a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
+++ b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
@@ -2,6 +2,8 @@ import { signIn, useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { Button, Dialog, TextArea, useToast } from '@tih/ui';
 
+import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
+
 import { timeSinceNow } from '~/utils/offers/time';
 import { trpc } from '~/utils/trpc';
 
@@ -121,14 +123,18 @@ export default function CommentCard({
 
   return (
     <div className="flex space-x-3">
-      {/* <div className="flex-shrink-0">
-        <img
-          alt=""
-          className="h-10 w-10 rounded-full"
-          src={`https://images.unsplash.com/photo-${comment.imageId}?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80`}
-        />
-      </div> */}
-      <div>
+      <div className="flex-shrink-0">
+        {user?.image ? (
+          <img
+            alt={user?.name ?? user?.email ?? 'Unknown user'}
+            className="h-10 w-10 rounded-full"
+            src={user?.image}
+          />
+        ) : (
+          <ProfilePhotoHolder size="xs" />
+        )}
+      </div>
+      <div className="w-full">
         <div className="text-sm">
           <p className="font-medium text-slate-900">
             {user?.name ?? 'unknown user'}
@@ -137,35 +143,35 @@ export default function CommentCard({
         <div className="mt-1 text-sm text-slate-700">
           <p className="break-all">{message}</p>
         </div>
-        <div className="mt-2 space-x-2 text-sm">
+        <div className="mt-2 space-x-2 text-xs">
           <span className="font-medium text-slate-500">
             {timeSinceNow(createdAt)} ago
           </span>{' '}
-          <span className="font-medium text-slate-500">&middot;</span>{' '}
           {replyLength > 0 && (
             <>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
               <button
                 className="font-medium text-slate-900"
                 type="button"
                 onClick={handleExpanded}>
                 {isExpanded ? `Hide replies` : `View replies (${replyLength})`}
               </button>
-              <span className="font-medium text-slate-500">&middot;</span>{' '}
             </>
           )}
           {!disableReply && (
             <>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
               <button
                 className="font-medium text-slate-900"
                 type="button"
                 onClick={() => setIsReplying(!isReplying)}>
                 Reply
               </button>
-              <span className="font-medium text-slate-500">&middot;</span>{' '}
             </>
           )}
           {deletable && (
             <>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
               <button
                 className="font-medium text-slate-900"
                 disabled={deleteCommentMutation.isLoading}
@@ -204,7 +210,7 @@ export default function CommentCard({
           )}
         </div>
         {!disableReply && isReplying && (
-          <div className="mt-2 mr-2">
+          <div className="mt-4 mr-2">
             <form
               onSubmit={(event) => {
                 event.preventDefault();
@@ -212,8 +218,9 @@ export default function CommentCard({
                 handleReply();
               }}>
               <TextArea
+                autoFocus={true}
                 isLabelHidden={true}
-                label="Comment"
+                label="Reply to comment"
                 placeholder="Type your reply here"
                 resize="none"
                 value={currentReply}
diff --git a/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx b/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
index 0eb2d96c..3f160016 100644
--- a/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
+++ b/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
@@ -28,20 +28,18 @@ export default function ExpandableCommentCard({
       />
       {comment.replies && comment.replies.length > 0 && isExpanded && (
         <div className="pt-4">
-          <div className="border-l-4 border-slate-200 pl-4">
-            <ul className="space-y-4" role="list">
-              {comment.replies.map((reply) => (
-                <li key={reply.id}>
-                  <CommentCard
-                    comment={reply}
-                    disableReply={true}
-                    profileId={profileId}
-                    token={token}
-                  />
-                </li>
-              ))}
-            </ul>
-          </div>
+          <ul className="space-y-4 pl-14" role="list">
+            {comment.replies.map((reply) => (
+              <li key={reply.id}>
+                <CommentCard
+                  comment={reply}
+                  disableReply={true}
+                  profileId={profileId}
+                  token={token}
+                />
+              </li>
+            ))}
+          </ul>
         </div>
       )}
     </div>
diff --git a/apps/portal/src/components/offers/table/OffersTable.tsx b/apps/portal/src/components/offers/table/OffersTable.tsx
index b530466b..209a9ec8 100644
--- a/apps/portal/src/components/offers/table/OffersTable.tsx
+++ b/apps/portal/src/components/offers/table/OffersTable.tsx
@@ -1,14 +1,14 @@
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { JobType } from '@prisma/client';
 import { DropdownMenu, Spinner, useToast } from '@tih/ui';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import OffersTablePagination from '~/components/offers/table/OffersTablePagination';
+import type { OfferTableSortByType } from '~/components/offers/table/types';
 import {
   OfferTableFilterOptions,
-  OfferTableSortBy,
   OfferTableYoeOptions,
   YOE_CATEGORY,
   YOE_CATEGORY_PARAM,
@@ -16,6 +16,7 @@ import {
 
 import { Currency } from '~/utils/offers/currency/CurrencyEnum';
 import CurrencySelector from '~/utils/offers/currency/CurrencySelector';
+import { useSearchParamSingle } from '~/utils/offers/useSearchParam';
 import { trpc } from '~/utils/trpc';
 
 import OffersRow from './OffersRow';
@@ -25,16 +26,17 @@ import type { DashboardOffer, GetOffersResponse, Paging } from '~/types/offers';
 const NUMBER_OF_OFFERS_IN_PAGE = 10;
 export type OffersTableProps = Readonly<{
   companyFilter: string;
+  companyName?: string;
   countryFilter: string;
   jobTitleFilter: string;
 }>;
 export default function OffersTable({
   countryFilter,
+  companyName,
   companyFilter,
   jobTitleFilter,
 }: OffersTableProps) {
   const [currency, setCurrency] = useState(Currency.SGD.toString()); // TODO: Detect location
-  const [selectedYoe, setSelectedYoe] = useState('');
   const [jobType, setJobType] = useState<JobType>(JobType.FULLTIME);
   const [pagination, setPagination] = useState<Paging>({
     currentPage: 0,
@@ -42,29 +44,62 @@ export default function OffersTable({
     numOfPages: 0,
     totalItems: 0,
   });
+
   const [offers, setOffers] = useState<Array<DashboardOffer>>([]);
-  const [selectedFilter, setSelectedFilter] = useState(
-    OfferTableFilterOptions[0].value,
-  );
+
   const { event: gaEvent } = useGoogleAnalytics();
   const router = useRouter();
-  const { yoeCategory = '' } = router.query;
   const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    setPagination({
-      currentPage: 0,
-      numOfItems: 0,
-      numOfPages: 0,
-      totalItems: 0,
-    });
-    setIsLoading(true);
-  }, [selectedYoe, currency, countryFilter, companyFilter, jobTitleFilter]);
+  const [
+    selectedYoeCategory,
+    setSelectedYoeCategory,
+    isYoeCategoryInitialized,
+  ] = useSearchParamSingle<keyof typeof YOE_CATEGORY_PARAM>('yoeCategory');
+
+  const [selectedSortBy, setSelectedSortBy, isSortByInitialized] =
+    useSearchParamSingle<OfferTableSortByType>('sortBy');
+
+  const areFilterParamsInitialized = useMemo(() => {
+    return isYoeCategoryInitialized && isSortByInitialized;
+  }, [isYoeCategoryInitialized, isSortByInitialized]);
+  const { pathname } = router;
 
   useEffect(() => {
-    setSelectedYoe(yoeCategory as YOE_CATEGORY);
-    event?.preventDefault();
-  }, [yoeCategory]);
+    if (areFilterParamsInitialized) {
+      router.replace(
+        {
+          pathname,
+          query: {
+            companyId: companyFilter,
+            companyName,
+            jobTitleId: jobTitleFilter,
+            sortBy: selectedSortBy,
+            yoeCategory: selectedYoeCategory,
+          },
+        },
+        undefined,
+        { shallow: true },
+      );
+      setPagination({
+        currentPage: 0,
+        numOfItems: 0,
+        numOfPages: 0,
+        totalItems: 0,
+      });
+      setIsLoading(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    areFilterParamsInitialized,
+    currency,
+    countryFilter,
+    companyFilter,
+    jobTitleFilter,
+    selectedSortBy,
+    selectedYoeCategory,
+    pathname,
+  ]);
 
   const { showToast } = useToast();
   trpc.useQuery(
@@ -76,9 +111,11 @@ export default function OffersTable({
         currency,
         limit: NUMBER_OF_OFFERS_IN_PAGE,
         offset: pagination.currentPage,
-        sortBy: OfferTableSortBy[selectedFilter] ?? '-monthYearReceived',
+        sortBy: selectedSortBy ?? '-monthYearReceived',
         title: jobTitleFilter,
-        yoeCategory: YOE_CATEGORY_PARAM[yoeCategory as string] ?? undefined,
+        yoeCategory: selectedYoeCategory
+          ? YOE_CATEGORY_PARAM[selectedYoeCategory as string]
+          : undefined,
       },
     ],
     {
@@ -104,39 +141,21 @@ export default function OffersTable({
           align="start"
           label={
             OfferTableYoeOptions.filter(
-              ({ value: itemValue }) => itemValue === selectedYoe,
-            )[0].label
+              ({ value: itemValue }) => itemValue === selectedYoeCategory,
+            ).length > 0
+              ? OfferTableYoeOptions.filter(
+                  ({ value: itemValue }) => itemValue === selectedYoeCategory,
+                )[0].label
+              : OfferTableYoeOptions[0].label
           }
           size="inherit">
           {OfferTableYoeOptions.map(({ label: itemLabel, value }) => (
             <DropdownMenu.Item
               key={value}
-              isSelected={value === selectedYoe}
+              isSelected={value === selectedYoeCategory}
               label={itemLabel}
               onClick={() => {
-                if (value === '') {
-                  router.replace(
-                    {
-                      pathname: router.pathname,
-                      query: undefined,
-                    },
-                    undefined,
-                    // Do not refresh the page
-                    { shallow: true },
-                  );
-                } else {
-                  const params = new URLSearchParams({
-                    ['yoeCategory']: value,
-                  });
-                  router.replace(
-                    {
-                      pathname: location.pathname,
-                      search: params.toString(),
-                    },
-                    undefined,
-                    { shallow: true },
-                  );
-                }
+                setSelectedYoeCategory(value);
                 gaEvent({
                   action: `offers.table_filter_yoe_category_${value}`,
                   category: 'engagement',
@@ -161,17 +180,21 @@ export default function OffersTable({
               align="end"
               label={
                 OfferTableFilterOptions.filter(
-                  ({ value: itemValue }) => itemValue === selectedFilter,
-                )[0].label
+                  ({ value: itemValue }) => itemValue === selectedSortBy,
+                ).length > 0
+                  ? OfferTableFilterOptions.filter(
+                      ({ value: itemValue }) => itemValue === selectedSortBy,
+                    )[0].label
+                  : OfferTableFilterOptions[0].label
               }
               size="inherit">
               {OfferTableFilterOptions.map(({ label: itemLabel, value }) => (
                 <DropdownMenu.Item
                   key={value}
-                  isSelected={value === selectedFilter}
+                  isSelected={value === selectedSortBy}
                   label={itemLabel}
                   onClick={() => {
-                    setSelectedFilter(value);
+                    setSelectedSortBy(value as OfferTableSortByType);
                   }}
                 />
               ))}
@@ -187,7 +210,9 @@ export default function OffersTable({
       'Company',
       'Title',
       'YOE',
-      selectedYoe === YOE_CATEGORY.INTERN ? 'Monthly Salary' : 'Annual TC',
+      selectedYoeCategory === YOE_CATEGORY.INTERN
+        ? 'Monthly Salary'
+        : 'Annual TC',
       'Date Offered',
       'Actions',
     ];
diff --git a/apps/portal/src/components/offers/table/types.ts b/apps/portal/src/components/offers/table/types.ts
index 7fb5ad17..e9a8c42e 100644
--- a/apps/portal/src/components/offers/table/types.ts
+++ b/apps/portal/src/components/offers/table/types.ts
@@ -36,25 +36,24 @@ export const OfferTableYoeOptions = [
 export const OfferTableFilterOptions = [
   {
     label: 'Latest Submitted',
-    value: 'latest-submitted',
+    value: '-monthYearReceived',
   },
   {
     label: 'Highest Salary',
-    value: 'highest-salary',
+    value: '-totalCompensation',
   },
   {
     label: 'Highest YOE first',
-    value: 'highest-yoe-first',
+    value: '-totalYoe',
   },
   {
     label: 'Lowest YOE first',
-    value: 'lowest-yoe-first',
+    value: '+totalYoe',
   },
 ];
 
-export const OfferTableSortBy: Record<string, string> = {
-  'highest-salary': '-totalCompensation',
-  'highest-yoe-first': '-totalYoe',
-  'latest-submitted': '-monthYearReceived',
-  'lowest-yoe-first': '+totalYoe',
-};
+export type OfferTableSortByType =
+  | '-monthYearReceived'
+  | '-totalCompensation'
+  | '-totalYoe'
+  | '+totalYoe';
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index e84173f5..b1773a28 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -9,14 +9,23 @@ import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import Container from '~/components/shared/Container';
 import CountriesTypeahead from '~/components/shared/CountriesTypeahead';
 import type { JobTitleType } from '~/components/shared/JobTitles';
+import { JobTitleLabels } from '~/components/shared/JobTitles';
 import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
 
+import { useSearchParamSingle } from '~/utils/offers/useSearchParam';
+
 export default function OffersHomePage() {
-  const [jobTitleFilter, setJobTitleFilter] = useState<JobTitleType | ''>('');
-  const [companyFilter, setCompanyFilter] = useState('');
   const [countryFilter, setCountryFilter] = useState('');
   const { event: gaEvent } = useGoogleAnalytics();
 
+  const [selectedCompanyName, setSelectedCompanyName] =
+    useSearchParamSingle('companyName');
+  const [selectedCompanyId, setSelectedCompanyId] =
+    useSearchParamSingle('companyId');
+
+  const [selectedJobTitleId, setSelectedJobTitleId] =
+    useSearchParamSingle<JobTitleType | null>('jobTitleId');
+
   return (
     <main className="flex-1 overflow-y-auto">
       <Banner size="sm">
@@ -66,16 +75,25 @@ export default function OffersHomePage() {
               isLabelHidden={true}
               placeholder="All Job Titles"
               textSize="inherit"
+              value={
+                selectedJobTitleId
+                  ? {
+                      id: selectedJobTitleId,
+                      label: JobTitleLabels[selectedJobTitleId as JobTitleType],
+                      value: selectedJobTitleId,
+                    }
+                  : null
+              }
               onSelect={(option) => {
                 if (option) {
-                  setJobTitleFilter(option.value as JobTitleType);
+                  setSelectedJobTitleId(option.id as JobTitleType);
                   gaEvent({
                     action: `offers.table_filter_job_title_${option.value}`,
                     category: 'engagement',
                     label: 'Filter by job title',
                   });
                 } else {
-                  setJobTitleFilter('');
+                  setSelectedJobTitleId(null);
                 }
               }}
             />
@@ -84,16 +102,27 @@ export default function OffersHomePage() {
               isLabelHidden={true}
               placeholder="All Companies"
               textSize="inherit"
+              value={
+                selectedCompanyName
+                  ? {
+                      id: selectedCompanyId,
+                      label: selectedCompanyName,
+                      value: selectedCompanyId,
+                    }
+                  : null
+              }
               onSelect={(option) => {
                 if (option) {
-                  setCompanyFilter(option.value);
+                  setSelectedCompanyId(option.id);
+                  setSelectedCompanyName(option.label);
                   gaEvent({
                     action: `offers.table_filter_company_${option.value}`,
                     category: 'engagement',
                     label: 'Filter by company',
                   });
                 } else {
-                  setCompanyFilter('');
+                  setSelectedCompanyId('');
+                  setSelectedCompanyName('');
                 }
               }}
             />
@@ -102,9 +131,10 @@ export default function OffersHomePage() {
       </div>
       <Container className="pb-20 pt-10">
         <OffersTable
-          companyFilter={companyFilter}
+          companyFilter={selectedCompanyId}
+          companyName={selectedCompanyName}
           countryFilter={countryFilter}
-          jobTitleFilter={jobTitleFilter}
+          jobTitleFilter={selectedJobTitleId ?? ''}
         />
       </Container>
     </main>
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index c410dccf..f15e38f0 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -79,6 +79,7 @@ export default function OfferProfile() {
                   jobTitle: getLabelForJobTitleType(
                     res.offersFullTime.title as JobTitleType,
                   ),
+                  jobType: res.jobType,
                   location: res.location,
                   negotiationStrategy: res.negotiationStrategy,
                   otherComment: res.comments,
@@ -99,6 +100,7 @@ export default function OfferProfile() {
                 jobTitle: getLabelForJobTitleType(
                   res.offersIntern!.title as JobTitleType,
                 ),
+                jobType: res.jobType,
                 location: res.location,
                 monthlySalary: convertMoneyToString(
                   res.offersIntern!.monthlySalary,
@@ -187,60 +189,54 @@ export default function OfferProfile() {
     }
   }
 
-  return (
-    <>
-      {getProfileQuery.isError && (
-        <div className="flex w-full justify-center">
-          <Error statusCode={404} title="Requested profile does not exist" />
+  return getProfileQuery.isError ? (
+    <div className="flex w-full justify-center">
+      <Error statusCode={404} title="Requested profile does not exist." />
+    </div>
+  ) : getProfileQuery.isLoading ? (
+    <div className="flex h-screen w-screen">
+      <div className="m-auto mx-auto w-screen justify-center font-medium text-slate-500">
+        <Spinner display="block" size="lg" />
+        <div className="text-center">Loading...</div>
+      </div>
+    </div>
+  ) : (
+    <div className="w-full divide-x lg:flex">
+      <div className="divide-y lg:w-2/3">
+        <div className="h-fit">
+          <ProfileHeader
+            background={background}
+            handleDelete={handleDelete}
+            isEditable={isEditable}
+            isLoading={getProfileQuery.isLoading}
+            selectedTab={selectedTab}
+            setSelectedTab={setSelectedTab}
+          />
         </div>
-      )}
-      {getProfileQuery.isLoading && (
-        <div className="flex h-screen w-screen">
-          <div className="m-auto mx-auto w-screen justify-center font-medium text-slate-500">
-            <Spinner display="block" size="lg" />
-            <div className="text-center">Loading...</div>
-          </div>
+        <div>
+          <ProfileDetails
+            analysis={analysis}
+            background={background}
+            isEditable={isEditable}
+            isLoading={getProfileQuery.isLoading}
+            offers={offers}
+            profileId={offerProfileId as string}
+            selectedTab={selectedTab}
+          />
         </div>
-      )}
-      {!getProfileQuery.isLoading && !getProfileQuery.isError && (
-        <div className="w-full divide-x lg:flex">
-          <div className="divide-y lg:w-2/3">
-            <div className="h-fit">
-              <ProfileHeader
-                background={background}
-                handleDelete={handleDelete}
-                isEditable={isEditable}
-                isLoading={getProfileQuery.isLoading}
-                selectedTab={selectedTab}
-                setSelectedTab={setSelectedTab}
-              />
-            </div>
-            <div>
-              <ProfileDetails
-                analysis={analysis}
-                background={background}
-                isEditable={isEditable}
-                isLoading={getProfileQuery.isLoading}
-                offers={offers}
-                profileId={offerProfileId as string}
-                selectedTab={selectedTab}
-              />
-            </div>
-          </div>
-          <div
-            className="bg-white lg:fixed lg:right-0 lg:bottom-0 lg:w-1/3"
-            style={{ top: 64 }}>
-            <ProfileComments
-              isDisabled={deleteMutation.isLoading}
-              isEditable={isEditable}
-              isLoading={getProfileQuery.isLoading}
-              profileId={offerProfileId as string}
-              profileName={background?.profileName}
-              token={token as string}
-            />
-          </div>
-        </div>
-      )}
-    </>
+      </div>
+      <div
+        className="bg-white lg:fixed lg:right-0 lg:bottom-0 lg:w-1/3"
+        style={{ top: 64 }}>
+        <ProfileComments
+          isDisabled={deleteMutation.isLoading}
+          isEditable={isEditable}
+          isLoading={getProfileQuery.isLoading}
+          profileId={offerProfileId as string}
+          profileName={background?.profileName}
+          token={token as string}
+        />
+      </div>
+    </div>
   );
 }
diff --git a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
index f507283d..b8bde4a5 100644
--- a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
@@ -1,5 +1,6 @@
 import Error from 'next/error';
 import { useRouter } from 'next/router';
+import { useSession } from 'next-auth/react';
 import { useEffect, useRef, useState } from 'react';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
 import { EyeIcon } from '@heroicons/react/24/outline';
@@ -13,44 +14,43 @@ import OffersSubmissionAnalysis from '~/components/offers/offersSubmission/Offer
 import { getProfilePath } from '~/utils/offers/link';
 import { trpc } from '~/utils/trpc';
 
-import type { ProfileAnalysis } from '~/types/offers';
-
 export default function OffersSubmissionResult() {
   const router = useRouter();
   let { offerProfileId, token = '' } = router.query;
   offerProfileId = offerProfileId as string;
   token = token as string;
   const [step, setStep] = useState(0);
-  const [analysis, setAnalysis] = useState<ProfileAnalysis | null>(null);
-  const [isValidToken, setIsValidToken] = useState(false);
+  const { data: session } = useSession();
 
   const pageRef = useRef<HTMLDivElement>(null);
   const scrollToTop = () =>
     pageRef.current?.scrollTo({ behavior: 'smooth', top: 0 });
 
-  const checkToken = trpc.useQuery(
-    ['offers.profile.isValidToken', { profileId: offerProfileId, token }],
-    {
-      onSuccess(data) {
-        setIsValidToken(data);
-      },
-    },
-  );
+  const checkToken = trpc.useQuery([
+    'offers.profile.isValidToken',
+    { profileId: offerProfileId, token },
+  ]);
 
-  const getAnalysis = trpc.useQuery(
-    ['offers.analysis.get', { profileId: offerProfileId }],
-    {
-      onSuccess(data) {
-        setAnalysis(data);
-      },
-    },
-  );
+  const getAnalysis = trpc.useQuery([
+    'offers.analysis.get',
+    { profileId: offerProfileId },
+  ]);
+
+  const isSavedQuery = trpc.useQuery([
+    `offers.profile.isSaved`,
+    { profileId: offerProfileId, userId: session?.user?.id },
+  ]);
 
   const steps = [
-    <OffersProfileSave key={0} profileId={offerProfileId} token={token} />,
+    <OffersProfileSave
+      key={0}
+      isSavedQuery={isSavedQuery}
+      profileId={offerProfileId}
+      token={token}
+    />,
     <OffersSubmissionAnalysis
       key={1}
-      analysis={analysis}
+      analysis={getAnalysis.data}
       isError={getAnalysis.isError}
       isLoading={getAnalysis.isLoading}
     />,
@@ -77,71 +77,67 @@ export default function OffersSubmissionResult() {
     scrollToTop();
   }, [step]);
 
-  return (
-    <>
-      {(checkToken.isLoading || getAnalysis.isLoading) && (
-        <div className="flex h-screen w-screen">
-          <div className="m-auto mx-auto w-screen justify-center font-medium text-slate-500">
-            <Spinner display="block" size="lg" />
-            <div className="text-center">Loading...</div>
+  return checkToken.isLoading || getAnalysis.isLoading ? (
+    <div className="flex h-screen w-screen">
+      <div className="m-auto mx-auto w-screen justify-center font-medium text-slate-500">
+        <Spinner display="block" size="lg" />
+        <div className="text-center">Loading...</div>
+      </div>
+    </div>
+  ) : checkToken.isError || getAnalysis.isError ? (
+    <Error statusCode={404} title="Error loading page" />
+  ) : checkToken.isSuccess && !checkToken.data ? (
+    <Error
+      statusCode={403}
+      title="You do not have permissions to access this page"
+    />
+  ) : (
+    <div ref={pageRef} className="w-full">
+      <div className="flex justify-center">
+        <div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
+          <div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
+            <Breadcrumbs
+              currentStep={step}
+              setStep={setStep}
+              steps={breadcrumbSteps}
+            />
           </div>
-        </div>
-      )}
-      {checkToken.isSuccess && !isValidToken && (
-        <Error
-          statusCode={403}
-          title="You do not have permissions to access this page"
-        />
-      )}
-      {getAnalysis.isSuccess && (
-        <div ref={pageRef} className="w-full">
-          <div className="flex justify-center">
-            <div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
-              <div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
-                <Breadcrumbs
-                  currentStep={step}
-                  setStep={setStep}
-                  steps={breadcrumbSteps}
+          <div className="bg-white p-6 sm:p-10">
+            {steps[step]}
+            {step === 0 && (
+              <div className="flex justify-end">
+                <Button
+                  disabled={false}
+                  icon={ArrowRightIcon}
+                  label="Next"
+                  variant="primary"
+                  onClick={() => setStep(step + 1)}
                 />
               </div>
-              <div className="bg-white p-6 sm:p-10">
-                {steps[step]}
-                {step === 0 && (
-                  <div className="flex justify-end">
-                    <Button
-                      disabled={false}
-                      icon={ArrowRightIcon}
-                      label="Next"
-                      variant="primary"
-                      onClick={() => setStep(step + 1)}
-                    />
-                  </div>
-                )}
-                {step === 1 && (
-                  <div className="flex items-center justify-between">
-                    <Button
-                      addonPosition="start"
-                      icon={ArrowLeftIcon}
-                      label="Previous"
-                      variant="secondary"
-                      onClick={() => setStep(step - 1)}
-                    />
-                    <Button
-                      href={getProfilePath(
-                        offerProfileId as string,
-                        token as string,
-                      )}
-                      icon={EyeIcon}
-                      label="View your profile"
-                      variant="primary"
-                    />
-                  </div>
-                )}
+            )}
+            {step === 1 && (
+              <div className="flex items-center justify-between">
+                <Button
+                  addonPosition="start"
+                  icon={ArrowLeftIcon}
+                  label="Previous"
+                  variant="secondary"
+                  onClick={() => setStep(step - 1)}
+                />
+                <Button
+                  href={getProfilePath(
+                    offerProfileId as string,
+                    token as string,
+                  )}
+                  icon={EyeIcon}
+                  label="View your profile"
+                  variant="primary"
+                />
               </div>
-            </div>
+            )}
           </div>
         </div>
-      )}
-    </>
+      </div>
+    </div>
   );
 }
diff --git a/apps/portal/src/utils/offers/time.tsx b/apps/portal/src/utils/offers/time.tsx
index 5c7305dd..d61ef3a6 100644
--- a/apps/portal/src/utils/offers/time.tsx
+++ b/apps/portal/src/utils/offers/time.tsx
@@ -55,3 +55,18 @@ export function getCurrentYear() {
 export function convertToMonthYear(date: Date) {
   return { month: date.getMonth() + 1, year: date.getFullYear() } as MonthYear;
 }
+
+export function getDurationDisplayText(months: number) {
+  const years = Math.floor(months / 12);
+  const monthsRemainder = months % 12;
+  let durationDisplay = '';
+  if (years > 0) {
+    durationDisplay = `${years} year${years > 1 ? 's' : ''}`;
+  }
+  if (monthsRemainder > 0) {
+    durationDisplay = durationDisplay.concat(
+      ` ${monthsRemainder} month${monthsRemainder > 1 ? 's' : ''}`,
+    );
+  }
+  return durationDisplay;
+}
diff --git a/apps/portal/src/utils/offers/useSearchParam.ts b/apps/portal/src/utils/offers/useSearchParam.ts
new file mode 100644
index 00000000..4dc6595e
--- /dev/null
+++ b/apps/portal/src/utils/offers/useSearchParam.ts
@@ -0,0 +1,79 @@
+import { useRouter } from 'next/router';
+import { useCallback, useEffect, useState } from 'react';
+
+type SearchParamOptions<Value> = [Value] extends [string]
+  ? {
+      defaultValues?: Array<Value>;
+      paramToString?: (value: Value) => string | null;
+      stringToParam?: (param: string) => Value | null;
+    }
+  : {
+      defaultValues?: Array<Value>;
+      paramToString: (value: Value) => string | null;
+      stringToParam: (param: string) => Value | null;
+    };
+
+export const useSearchParam = <Value = string>(
+  name: string,
+  opts?: SearchParamOptions<Value>,
+) => {
+  const {
+    defaultValues,
+    stringToParam = (param: string) => param,
+    paramToString: valueToQueryParam = (value: Value) => String(value),
+  } = opts ?? {};
+  const [isInitialized, setIsInitialized] = useState(false);
+  const router = useRouter();
+
+  const [params, setParams] = useState<Array<Value>>(defaultValues || []);
+
+  useEffect(() => {
+    if (router.isReady && !isInitialized) {
+      // Initialize from query params
+      const query = router.query[name];
+      if (query) {
+        const queryValues = Array.isArray(query) ? query : [query];
+        setParams(
+          queryValues
+            .map(stringToParam)
+            .filter((value) => value !== null) as Array<Value>,
+        );
+      }
+      setIsInitialized(true);
+    }
+  }, [isInitialized, name, stringToParam, router]);
+
+  const setParamsCallback = useCallback(
+    (newParams: Array<Value>) => {
+      setParams(newParams);
+      localStorage.setItem(
+        name,
+        JSON.stringify(
+          newParams.map(valueToQueryParam).filter((param) => param !== null),
+        ),
+      );
+    },
+    [name, valueToQueryParam],
+  );
+
+  return [params, setParamsCallback, isInitialized] as const;
+};
+
+export const useSearchParamSingle = <Value = string>(
+  name: string,
+  opts?: Omit<SearchParamOptions<Value>, 'defaultValues'> & {
+    defaultValue?: Value;
+  },
+) => {
+  const { defaultValue, ...restOpts } = opts ?? {};
+  const [params, setParams, isInitialized] = useSearchParam<Value>(name, {
+    defaultValues: defaultValue !== undefined ? [defaultValue] : undefined,
+    ...restOpts,
+  } as SearchParamOptions<Value>);
+
+  return [
+    params[0],
+    (value: Value) => setParams([value]),
+    isInitialized,
+  ] as const;
+};