diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
index 9b340cec..0c43c644 100644
--- a/apps/portal/src/components/offers/OffersNavigation.ts
+++ b/apps/portal/src/components/offers/OffersNavigation.ts
@@ -1,7 +1,7 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/offers/home', name: 'Home' },
+  { href: '/offers/browse', name: 'Browse' },
   { href: '/offers/submit', name: 'Analyse your offers' },
 ];
 
diff --git a/apps/portal/src/components/offers/landing/LeftTextCard.tsx b/apps/portal/src/components/offers/landing/LeftTextCard.tsx
index 27886018..329a58f5 100644
--- a/apps/portal/src/components/offers/landing/LeftTextCard.tsx
+++ b/apps/portal/src/components/offers/landing/LeftTextCard.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import { HOME_URL } from '~/components/offers/types';
+
 type LeftTextCardProps = Readonly<{
   description: string;
   icon: ReactNode;
@@ -8,7 +10,6 @@ type LeftTextCardProps = Readonly<{
   title: string;
 }>;
 
-const baseUrl = '/offers/home';
 export default function LeftTextCard({
   description,
   icon,
@@ -21,7 +22,7 @@ export default function LeftTextCard({
       <div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
         <div>
           <div>
-            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+            <span className="to-primary-500 flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600">
               {icon}
             </span>
           </div>
@@ -32,8 +33,8 @@ export default function LeftTextCard({
             <p className="mt-4 text-lg text-gray-500">{description}</p>
             <div className="mt-6">
               <a
-                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get started
               </a>
             </div>
diff --git a/apps/portal/src/components/offers/landing/RightTextCard.tsx b/apps/portal/src/components/offers/landing/RightTextCard.tsx
index 551c246a..9028ad16 100644
--- a/apps/portal/src/components/offers/landing/RightTextCard.tsx
+++ b/apps/portal/src/components/offers/landing/RightTextCard.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import { HOME_URL } from '~/components/offers/types';
+
 type RightTextCarddProps = Readonly<{
   description: string;
   icon: ReactNode;
@@ -8,7 +10,6 @@ type RightTextCarddProps = Readonly<{
   title: string;
 }>;
 
-const baseUrl = '/offers/home';
 export default function RightTextCard({
   description,
   icon,
@@ -21,7 +22,7 @@ export default function RightTextCard({
       <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
         <div>
           <div>
-            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+            <span className="to-primary-500 flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600">
               {icon}
             </span>
           </div>
@@ -32,8 +33,8 @@ export default function RightTextCard({
             <p className="mt-4 text-lg text-gray-500">{description}</p>
             <div className="mt-6">
               <a
-                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get started
               </a>
             </div>
diff --git a/apps/portal/src/components/offers/profile/ProfileComments.tsx b/apps/portal/src/components/offers/profile/ProfileComments.tsx
index ebed5bfd..b26f78ae 100644
--- a/apps/portal/src/components/offers/profile/ProfileComments.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileComments.tsx
@@ -175,36 +175,7 @@ export default function ProfileComments({
       ) : (
         <div>Please log in before commenting on this profile.</div>
       )}
-      <div>
-        <TextArea
-          label={`Comment as ${
-            isEditable ? profileName : session?.user?.name ?? 'anonymous'
-          }`}
-          placeholder="Type your comment here"
-          value={currentReply}
-          onChange={(value) => setCurrentReply(value)}
-        />
-        <div className="mt-2 flex w-full justify-end">
-          <div className="w-fit">
-            <Button
-              disabled={
-                commentsQuery.isLoading ||
-                !currentReply.length ||
-                createCommentMutation.isLoading
-              }
-              display="block"
-              isLabelHidden={false}
-              isLoading={createCommentMutation.isLoading}
-              label="Comment"
-              size="sm"
-              variant="primary"
-              onClick={() => handleComment(currentReply)}
-            />
-          </div>
-        </div>
-        <HorizontalDivider />
-      </div>
-      <div className="h-full overflow-y-scroll">
+      <div className="h-full overflow-y-auto">
         <div className="h-content mb-96 w-full">
           {replies?.map((reply: Reply) => (
             <ExpandableCommentCard
diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts
index 53b2c36e..b790bd40 100644
--- a/apps/portal/src/components/offers/types.ts
+++ b/apps/portal/src/components/offers/types.ts
@@ -2,6 +2,8 @@ import type { JobType } from '@prisma/client';
 
 import type { MonthYear } from '~/components/shared/MonthYearPicker';
 
+export const HOME_URL = '/offers/browse';
+
 /*
  *  Offer Profile
  */
diff --git a/apps/portal/src/pages/offers/home.tsx b/apps/portal/src/pages/offers/browse.tsx
similarity index 100%
rename from apps/portal/src/pages/offers/home.tsx
rename to apps/portal/src/pages/offers/browse.tsx
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index fb67eb8c..11218b77 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -10,26 +10,26 @@ import {
 
 import LeftTextCard from '~/components/offers/landing/LeftTextCard';
 import RightTextCard from '~/components/offers/landing/RightTextCard';
-const baseUrl = '/offers/home';
+import { HOME_URL } from '~/components/offers/types';
 
 const features = [
   {
     description:
-      'Name of the profile creator is stricly anonymous by using randomly generated names.',
+      'Profile names are randomly generated to keep your offers strictly anonymous.',
     icon: UsersIcon,
-    name: 'Anonymisd Profile Name',
+    name: 'Anonymized Profile Name',
   },
   {
     description:
-      ' Only people with the edit link can edit that profile. Share profiles to others using public link without giving edit permission.',
+      'Only users with the edit link can edit that profile. Share profiles to others using a public link without giving edit permission.',
     icon: ShareIcon,
     name: 'Edit Link v.s. Public Link',
   },
   {
     description:
-      "Offer profiles will not be automatically saved under creator's account in database unless explicit permission is given.",
+      "Offer profiles will not be automatically saved under creators' account in our database unless explicit permission is given.",
     icon: BookmarkSquareIcon,
-    name: 'No Auto-Save to User Account',
+    name: 'Save with Permission',
   },
 ];
 
@@ -79,29 +79,29 @@ const footerNavigation = {
 
 export default function LandingPage() {
   return (
-    <div className="overflow-y-auto bg-white">
+    <div className="mx-auto w-full overflow-y-auto bg-white">
       <main>
         {/* Hero section */}
         <div className="relative h-full">
           <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
             <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
-              <span className="block">Choosing offers made easier</span>
-              <span className="from-primary-600 -mb-1 block bg-gradient-to-r to-purple-500 bg-clip-text pb-1 text-transparent">
-                using profiles behind offers.
+              <span>Choosing offers </span>
+              <span className="from-primary-600 -mb-1 mr-2 bg-gradient-to-r to-purple-500 bg-clip-text pb-1 pr-4 italic text-transparent">
+                made easier
               </span>
             </h1>
-            <p className="text-primary-600 mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
-              Analyse your offers using profiles from fellow software engineers.
+            <p className="mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
+              Analyze your offers using profiles from fellow software engineers.
             </p>
             <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
               <div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
                 <a
                   className="border-grey-600 flex items-center justify-center rounded-md border bg-white bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8"
-                  href={baseUrl}>
+                  href={HOME_URL}>
                   Get started
                 </a>
                 <a
-                  className="bg-primary-600 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
+                  className="bg-primary-500 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
                   href="#">
                   Live demo
                 </a>
@@ -118,7 +118,7 @@ export default function LandingPage() {
           />
           <div className="relative">
             <LeftTextCard
-              description="An offer profile includes not only offers that a person get in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contaxtualize offers."
+              description="An offer profile includes not only offers that a person received in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contextualize offers."
               icon={
                 <InformationCircleIcon
                   aria-hidden="true"
@@ -161,13 +161,13 @@ export default function LandingPage() {
         </div>
 
         {/* Gradient Feature Section */}
-        <div className="bg-gradient-to-r from-purple-800 to-indigo-700">
+        <div className="to-primary-600 bg-gradient-to-r from-purple-800">
           <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:px-8 lg:pt-24">
             <h2 className="flex justify-center text-4xl font-bold tracking-tight text-white">
               Your privacy is our priority.
             </h2>
-            <p className="mt-4 flex flex-row justify-center text-lg text-purple-200">
-              All offer profiles are anonymised and we do not store information
+            <p className="text-primary-100 mt-4 flex flex-row justify-center text-lg">
+              All offer profiles are anonymized and we do not store information
               about your personal identity.
             </p>
             <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
@@ -185,7 +185,7 @@ export default function LandingPage() {
                     <h3 className="text-lg font-medium text-white">
                       {feature.name}
                     </h3>
-                    <p className="mt-2 text-base text-purple-200">
+                    <p className="text-primary-100 mt-2 text-base">
                       {feature.description}
                     </p>
                   </div>
@@ -200,14 +200,14 @@ export default function LandingPage() {
           <div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
             <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
               <span className="block">Ready to get started?</span>
-              <span className="-mb-1 block bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text pb-1 text-transparent">
+              <span className="to-primary-600 -mb-1 block bg-gradient-to-r from-purple-600 bg-clip-text pb-1 text-transparent">
                 Create your own offer profile today.
               </span>
             </h2>
             <div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
               <a
-                className="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get Started
               </a>
             </div>
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index e90d8f77..8933112c 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -10,6 +10,7 @@ import type {
   BackgroundDisplayData,
   OfferDisplayData,
 } from '~/components/offers/types';
+import { HOME_URL } from '~/components/offers/types';
 import type { JobTitleType } from '~/components/shared/JobTitles';
 import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
 
@@ -46,7 +47,7 @@ export default function OfferProfile() {
       enabled: typeof offerProfileId === 'string',
       onSuccess: (data: Profile) => {
         if (!data) {
-          router.push('/offers/home');
+          router.push(HOME_URL);
         }
         // If the profile is not editable with a wrong token, redirect to the profile page
         if (!data?.isEditable && token !== '') {
@@ -148,7 +149,7 @@ export default function OfferProfile() {
     },
     onSuccess: () => {
       trpcContext.invalidateQueries(['offers.profile.listOne']);
-      router.push('/offers/home');
+      router.push(HOME_URL);
       showToast({
         title: `Offers profile successfully deleted!`,
         variant: 'success',
diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index c851cafa..7901056b 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -86,10 +86,16 @@ export default function SubmitResumeForm({
     setValue,
     reset,
     watch,
+    clearErrors,
     formState: { errors, isDirty, dirtyFields },
   } = useForm<IFormInput>({
     defaultValues: {
+      additionalInfo: '',
+      experience: '',
       isChecked: false,
+      location: '',
+      role: '',
+      title: '',
       ...initFormDetails,
     },
   });
@@ -296,7 +302,7 @@ export default function SubmitResumeForm({
                   options={ROLES}
                   placeholder=" "
                   required={true}
-                  onChange={(val) => setValue('role', val)}
+                  onChange={(val) => onValueChange('role', val)}
                 />
                 <Select
                   {...register('experience', { required: true })}
@@ -305,7 +311,7 @@ export default function SubmitResumeForm({
                   options={EXPERIENCES}
                   placeholder=" "
                   required={true}
-                  onChange={(val) => setValue('experience', val)}
+                  onChange={(val) => onValueChange('experience', val)}
                 />
               </div>
               <Select
@@ -315,7 +321,7 @@ export default function SubmitResumeForm({
                 options={LOCATIONS}
                 placeholder=" "
                 required={true}
-                onChange={(val) => setValue('location', val)}
+                onChange={(val) => onValueChange('location', val)}
               />
               {/* Upload resume form */}
               {isNewForm && (
@@ -335,6 +341,16 @@ export default function SubmitResumeForm({
                         : 'border-slate-300',
                       'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4',
                     )}>
+                    <input
+                      {...register('file', { required: true })}
+                      {...getInputProps()}
+                      accept="application/pdf"
+                      className="sr-only"
+                      disabled={isLoading}
+                      id="file-upload"
+                      name="file-upload"
+                      type="file"
+                    />
                     <div className="space-y-1 text-center">
                       {resumeFile == null ? (
                         <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
@@ -345,29 +361,15 @@ export default function SubmitResumeForm({
                           {resumeFile.name}
                         </p>
                       )}
-                      <div className="flex items-center text-sm">
-                        <label
-                          className="focus-within:ring-primary-500 rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
-                          htmlFor="file-upload">
-                          <span className="font-medium">Drop file here</span>
-                          <span className="mr-1 ml-1 font-light">or</span>
-                          <span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
-                            {resumeFile == null
-                              ? 'Select file'
-                              : 'Replace file'}
-                          </span>
-                          <input
-                            {...register('file', { required: true })}
-                            {...getInputProps()}
-                            accept="application/pdf"
-                            className="sr-only"
-                            disabled={isLoading}
-                            id="file-upload"
-                            name="file-upload"
-                            type="file"
-                          />
-                        </label>
-                      </div>
+                      <label
+                        className="focus-within:ring-primary-500 flex items-center rounded-md text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
+                        htmlFor="file-upload">
+                        <span className="font-medium">Drop file here</span>
+                        <span className="mr-1 ml-1 font-light">or</span>
+                        <span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
+                          {resumeFile == null ? 'Select file' : 'Replace file'}
+                        </span>
+                      </label>
                       <p className="text-xs text-slate-500">
                         PDF up to {FILE_SIZE_LIMIT_MB}MB
                       </p>
@@ -394,8 +396,18 @@ export default function SubmitResumeForm({
                   <CheckboxInput
                     {...register('isChecked', { required: true })}
                     disabled={isLoading}
+                    errorMessage={
+                      !errors.file && errors.isChecked
+                        ? 'Please tick the checkbox after reading through the guidelines.'
+                        : undefined
+                    }
                     label="I have read and will follow the guidelines stated."
-                    onChange={(val) => setValue('isChecked', val)}
+                    onChange={(val) => {
+                      if (val) {
+                        clearErrors('isChecked');
+                      }
+                      setValue('isChecked', val);
+                    }}
                   />
                 </>
               )}
diff --git a/apps/portal/src/server/router/questions-question-encounter-router.ts b/apps/portal/src/server/router/questions-question-encounter-router.ts
index 75265f85..f43578e8 100644
--- a/apps/portal/src/server/router/questions-question-encounter-router.ts
+++ b/apps/portal/src/server/router/questions-question-encounter-router.ts
@@ -106,7 +106,6 @@ export const questionsQuestionEncounterRouter = createProtectedRouter()
     },
   })
   .mutation('update', {
-    //
     input: z.object({
       companyId: z.string().optional(),
       id: z.string(),
diff --git a/apps/portal/src/server/router/questions-question-router.ts b/apps/portal/src/server/router/questions-question-router.ts
index 3c4f8f8b..3ea33bce 100644
--- a/apps/portal/src/server/router/questions-question-router.ts
+++ b/apps/portal/src/server/router/questions-question-router.ts
@@ -14,7 +14,7 @@ export const questionsQuestionRouter = createProtectedRouter()
       cursor: z
         .object({
           idCursor: z.string().optional(),
-          lastSeenCursor: z.date().optional(),
+          lastSeenCursor: z.date().nullish().optional(),
           upvoteCursor: z.number().optional(),
         })
         .nullish(),
@@ -49,8 +49,6 @@ export const questionsQuestionRouter = createProtectedRouter()
               },
             ];
 
-      const toSkip = cursor ? 1 : 0;
-
       const questionsData = await ctx.prisma.questionsQuestion.findMany({
         cursor:
           cursor !== undefined
@@ -81,7 +79,6 @@ export const questionsQuestionRouter = createProtectedRouter()
           votes: true,
         },
         orderBy: sortCondition,
-        skip: toSkip,
         take: input.limit + 1,
         where: {
           ...(input.questionTypes.length > 0
diff --git a/packages/ui/src/CheckboxInput/CheckboxInput.tsx b/packages/ui/src/CheckboxInput/CheckboxInput.tsx
index edeb9d3a..fec43b7e 100644
--- a/packages/ui/src/CheckboxInput/CheckboxInput.tsx
+++ b/packages/ui/src/CheckboxInput/CheckboxInput.tsx
@@ -7,6 +7,7 @@ type Props = Readonly<{
   defaultValue?: boolean;
   description?: string;
   disabled?: boolean;
+  errorMessage?: string;
   label: string;
   name?: string;
   onChange?: (
@@ -21,6 +22,7 @@ function CheckboxInput(
     defaultValue,
     description,
     disabled = false,
+    errorMessage,
     label,
     name,
     value,
@@ -30,59 +32,67 @@ function CheckboxInput(
 ) {
   const id = useId();
   const descriptionId = useId();
+  const errorId = useId();
 
   return (
-    <div
-      className={clsx(
-        'relative flex',
-        // Vertically center only when there's no description.
-        description == null && 'items-center',
-      )}>
-      <div className="flex h-5 items-center">
-        <input
-          ref={ref}
-          aria-describedby={description != null ? descriptionId : undefined}
-          checked={value}
-          className={clsx(
-            'h-4 w-4 rounded border-slate-300',
-            disabled
-              ? 'bg-slate-100 text-slate-400'
-              : 'text-primary-600 focus:ring-primary-500',
-          )}
-          defaultChecked={defaultValue}
-          disabled={disabled}
-          id={id}
-          name={name}
-          type="checkbox"
-          onChange={
-            onChange != null
-              ? (event) => {
-                  onChange?.(event.target.checked, event);
-                }
-              : undefined
-          }
-        />
-      </div>
-      <div className="ml-3 text-sm">
-        <label
-          className={clsx(
-            'block font-medium',
-            disabled ? 'text-slate-400' : 'text-slate-700',
-          )}
-          htmlFor={id}>
-          {label}
-        </label>
-        {description && (
-          <p
+    <div>
+      <div
+        className={clsx(
+          'relative flex',
+          // Vertically center only when there's no description.
+          description == null && 'items-center',
+        )}>
+        <div className="flex h-5 items-center">
+          <input
+            ref={ref}
+            aria-describedby={description != null ? descriptionId : undefined}
+            checked={value}
             className={clsx(
-              'text-xs',
-              disabled ? 'text-slate-400' : 'text-slate-500',
+              'h-4 w-4 rounded border-slate-300',
+              disabled
+                ? 'bg-slate-100 text-slate-400'
+                : 'text-primary-600 focus:ring-primary-500',
             )}
-            id={descriptionId}>
-            {description}
-          </p>
-        )}
+            defaultChecked={defaultValue}
+            disabled={disabled}
+            id={id}
+            name={name}
+            type="checkbox"
+            onChange={(event) => {
+              if (!onChange) {
+                return;
+              }
+
+              onChange(event.target.checked, event);
+            }}
+          />
+        </div>
+        <div className="ml-3 text-sm">
+          <label
+            className={clsx(
+              'block font-medium',
+              disabled ? 'text-slate-400' : 'text-slate-700',
+            )}
+            htmlFor={id}>
+            {label}
+          </label>
+          {description && (
+            <p
+              className={clsx(
+                'text-xs',
+                disabled ? 'text-slate-400' : 'text-slate-500',
+              )}
+              id={descriptionId}>
+              {description}
+            </p>
+          )}
+        </div>
       </div>
+      {errorMessage && (
+        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+          {errorMessage}
+        </p>
+      )}
     </div>
   );
 }