diff --git a/app/(app)/alpha/additional-details/_actions.ts b/app/(app)/alpha/additional-details/_actions.ts
index cf2a81f5..78d300d3 100644
--- a/app/(app)/alpha/additional-details/_actions.ts
+++ b/app/(app)/alpha/additional-details/_actions.ts
@@ -16,7 +16,7 @@ import { db } from "@/server/db";
 import { user } from "@/server/db/schema";
 import { eq } from "drizzle-orm";
 
-export async function handleFormSlideOneSubmit(dataInput: TypeSlideOneSchema) {
+export async function slideOneSubmitAction(dataInput: TypeSlideOneSchema) {
   const session = await getServerAuthSession();
   if (!session || !session.user) {
     redirect("/get-started");
@@ -47,7 +47,7 @@ export async function handleFormSlideOneSubmit(dataInput: TypeSlideOneSchema) {
   }
 }
 
-export async function handleFormSlideTwoSubmit(dataInput: TypeSlideTwoSchema) {
+export async function slideTwoSubmitAction(dataInput: TypeSlideTwoSchema) {
   const session = await getServerAuthSession();
   if (!session || !session.user) {
     redirect("/get-started");
@@ -75,9 +75,7 @@ export async function handleFormSlideTwoSubmit(dataInput: TypeSlideTwoSchema) {
   }
 }
 
-export async function handleFormSlideThreeSubmit(
-  dataInput: TypeSlideThreeSchema,
-) {
+export async function slideThreeSubmitAction(dataInput: TypeSlideThreeSchema) {
   const session = await getServerAuthSession();
   if (!session || !session.user) {
     redirect("/get-started");
diff --git a/app/(app)/alpha/additional-details/_client.tsx b/app/(app)/alpha/additional-details/_client.tsx
index 635742f3..c8c1d4e6 100644
--- a/app/(app)/alpha/additional-details/_client.tsx
+++ b/app/(app)/alpha/additional-details/_client.tsx
@@ -23,10 +23,22 @@ import {
   monthsOptions,
 } from "@/app/(app)/alpha/additional-details/selectOptions";
 import {
-  handleFormSlideOneSubmit,
-  handleFormSlideThreeSubmit,
-  handleFormSlideTwoSubmit,
+  slideOneSubmitAction,
+  slideThreeSubmitAction,
+  slideTwoSubmitAction,
 } from "./_actions";
+import { Heading, Subheading } from "./components/heading";
+import { Divider } from "./components/divider";
+import {
+  ErrorMessage,
+  Field,
+  Fieldset,
+  Label,
+  Legend,
+} from "./components/fieldset";
+import { Input } from "./components/input";
+import { Select } from "./components/select";
+import { Button } from "./components/button";
 
 type UserDetails = {
   username: string;
@@ -103,7 +115,7 @@ function SlideOne({ details }: { details: UserDetails }) {
 
   const onFormSubmit = async (data: TypeSlideOneSchema) => {
     try {
-      const isSuccess = await handleFormSlideOneSubmit(data);
+      const isSuccess = await slideOneSubmitAction(data);
       if (isSuccess) {
         toast.success("Saved");
         router.push(`?slide=${2}`, { scroll: false });
@@ -116,107 +128,101 @@ function SlideOne({ details }: { details: UserDetails }) {
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
-      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-        <div className="h-[9rem] sm:mx-auto sm:w-full sm:max-w-sm">
-          <h2 className="mt-10 text-2xl font-bold leading-9 tracking-tight text-neutral-900 dark:text-white">
-            Profile information
-          </h2>
-          <p>This information will be displayed on your profile</p>
+    <form className="mx-auto max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
+      <div className="min-h-[32rem]">
+        <div className="mx-4">
+          <Heading className="mt-16">Profile information</Heading>
+          <Subheading>
+            This information will be displayed on your profile
+          </Subheading>
+        </div>
+        <Divider className="my-4 mt-4" />
+        <div className="mx-4">
+          <Field>
+            <Label>First Name</Label>
+            <Input
+              id="first-name"
+              placeholder="Enter first name"
+              invalid={!!errors?.firstName}
+              {...register("firstName")}
+            />
+            {errors?.firstName && (
+              <ErrorMessage className="text-red-500">
+                {errors.firstName.message}
+              </ErrorMessage>
+            )}
+          </Field>
         </div>
-        <div className="sm:mx-auto sm:w-full sm:max-w-sm ">
-          <div className="space-y-6">
-            <div>
-              <label
-                htmlFor="name"
-                className="block text-sm font-medium leading-6 text-neutral-900 dark:text-white"
-              >
-                First Name
-              </label>
-              <div className="mt-2 ">
-                <input
-                  id="name"
-                  {...register("firstName")}
-                  placeholder="What should we call you?"
-                  type="text"
-                  className="block w-full rounded-md border-0 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-black focus:ring-2 focus:ring-inset focus:ring-red-500 dark:text-white sm:text-sm sm:leading-6"
-                />
-                {errors.firstName && <p>{`${errors.firstName.message}`}</p>}
-              </div>
-            </div>
 
-            <div>
-              <label
-                htmlFor="surname"
-                className="block text-sm font-medium leading-6 text-neutral-900 dark:text-white"
-              >
-                Surname
-              </label>
-              <div className="mt-2">
-                <input
-                  id="surname"
-                  {...register("surname")}
-                  type="text"
-                  placeholder="And your surname?"
-                  className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-black focus:ring-2 focus:ring-inset focus:ring-red-500 dark:text-white sm:text-sm sm:leading-6"
-                />
-                {errors.surname && <p>{`${errors.surname.message}`}</p>}
-              </div>
-            </div>
+        <div className="mx-4 mt-4 ">
+          <Field>
+            <Label>Surname</Label>
+            <Input
+              id="surname"
+              placeholder="Enter surname"
+              invalid={!!errors?.surname}
+              {...register("surname")}
+            />
+            {errors?.surname && (
+              <ErrorMessage className="text-red-500">
+                {errors.surname.message}
+              </ErrorMessage>
+            )}
+          </Field>
+        </div>
 
-            <div>
-              <label
-                htmlFor="username"
-                className="block text-sm font-medium leading-6 text-neutral-900 dark:text-white"
-              >
-                Username
-              </label>
-              <div className="relative flex items-center">
-                <div className="flex h-[36px] w-[7rem] items-center justify-center rounded-l-md bg-black text-white ring-1 ring-inset ring-white dark:bg-white dark:text-black">
-                  <span>codu.co/</span>
-                </div>
-                <input
-                  id="username"
-                  {...register("username")}
-                  placeholder="thehacker"
-                  type="text"
-                  className="ring-white/10... relative top-[-2px] block rounded-r-md border-0 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-black focus:ring-2 focus:ring-inset focus:ring-red-500 dark:text-white sm:text-sm sm:leading-6"
-                />
-              </div>
-              {errors.username && <p>{`${errors.username.message}`}</p>}
-            </div>
-            <div>
-              <label
-                htmlFor="location"
-                className="block text-sm font-medium leading-6 text-neutral-900 dark:text-white"
-              >
-                Location
-              </label>
-              <select
-                id="location"
-                {...register("location")}
-                className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-neutral-900 ring-1 ring-inset ring-black focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-              >
-                <option value="" disabled>
-                  Select
-                </option>
-                {locationOptions.map((location: string) => (
-                  <option key={location}>{location}</option>
-                ))}
-              </select>
-              {errors.location && <p>{`${errors.location.message}`}</p>}
+        <div className="mx-4 mt-4 ">
+          <Field>
+            <Label>Username</Label>
+            <div className="mt-2 flex rounded-md shadow-sm">
+              <span className=" inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-black px-3  font-semibold text-white dark:bg-white dark:text-black sm:text-sm">
+                codu.co/
+              </span>
+              <Input
+                id="username"
+                placeholder="Enter username"
+                invalid={!!errors?.username}
+                {...register("username")}
+                className="rounded-l-none focus-within:after:rounded-l-none"
+              />
             </div>
-          </div>
-          <div className="mt-6 flex justify-end">
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className="flex w-[6rem] justify-center rounded-md bg-red-500 px-3 py-1.5 text-sm font-semibold leading-6 text-neutral-900 shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:text-white"
-            >
-              Next
-            </button>
-          </div>
+            {errors?.username && (
+              <ErrorMessage className="text-red-500">
+                {errors.username.message}
+              </ErrorMessage>
+            )}
+          </Field>
         </div>
+
+        <div className="mx-4 mt-4">
+          <Field>
+            <Label>Location</Label>
+            <Select {...register("location")} defaultValue="" id="location">
+              <option value="" disabled>
+                Select country
+              </option>
+              {locationOptions.map((location: string) => (
+                <option key={location}>{location}</option>
+              ))}
+            </Select>
+            {errors?.location && (
+              <ErrorMessage className="text-red-500">
+                {errors.location.message}
+              </ErrorMessage>
+            )}
+          </Field>
+        </div>
+      </div>
+
+      <div className="mr-4 mt-6 flex justify-end sm:mr-0">
+        <Button
+          color={"dark/white"}
+          className="w-24 cursor-pointer"
+          type="submit"
+          disabled={isSubmitting}
+        >
+          Next
+        </Button>
       </div>
     </form>
   );
@@ -287,7 +293,7 @@ function SlideTwo({ details }: { details: UserDetails }) {
 
   const onFormSubmit = async (data: TypeSlideTwoSchema) => {
     try {
-      const isSuccess = await handleFormSlideTwoSubmit(data);
+      const isSuccess = await slideTwoSubmitAction(data);
 
       if (isSuccess) {
         toast.success("Saved");
@@ -301,132 +307,115 @@ function SlideTwo({ details }: { details: UserDetails }) {
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
-      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-        <div className="h-[9rem] sm:mx-auto sm:w-full sm:max-w-sm">
-          <h2 className="mt-10 text-2xl font-bold leading-9 tracking-tight text-neutral-900 dark:text-white">
-            Demographic
-          </h2>
-          <p>This information is private, but helps us improve</p>
+    <form className="mx-auto  max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
+      <div className="min-h-[32rem]">
+        <div className="mx-4 ">
+          <Heading className="mt-16">Demographic</Heading>
+          <Subheading>
+            This information is private, but helps us improve
+          </Subheading>
         </div>
+        <Divider className="my-4 mt-4" />
 
-        <div className="sm:mx-auto sm:w-full sm:max-w-sm ">
-          <div className="h-[21.75rem] space-y-6">
-            <div>
-              <label
-                htmlFor="gender"
-                className="block text-sm font-medium leading-6 text-neutral-900"
-              >
+        <div className="mx-4 mt-4 ">
+          <Field>
+            <Label>Gender</Label>
+            <Select {...register("gender")} defaultValue="" id="gender">
+              <option value="" disabled>
                 Gender
-              </label>
-              <select
-                id="gender"
-                {...register("gender")}
-                className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-neutral-900 ring-1 ring-inset  ring-black focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
+              </option>
+              {genderOptions.map((gender: string) => (
+                <option key={gender}>{gender}</option>
+              ))}
+            </Select>
+            {errors?.gender && (
+              <ErrorMessage className="text-red-500">
+                {errors.gender.message}
+              </ErrorMessage>
+            )}
+          </Field>
+        </div>
+
+        <Divider className="my-4 mt-4" />
+
+        <Fieldset>
+          <Legend className="mx-4 ">Date of Birth</Legend>
+          <div className="mx-4 flex justify-between ">
+            <Field>
+              <Select
+                id="year"
+                aria-label="Year"
+                value={year ? year : ""}
+                required
+                onChange={(e) => setYear(Number(e.target.value))}
               >
                 <option value="" disabled>
-                  Gender
+                  Year
                 </option>
-                {genderOptions.map((gender: string) => (
-                  <option key={gender}>{gender}</option>
+                {years.map((year) => (
+                  <option key={year}>{year}</option>
                 ))}
-              </select>
-
-              {errors.gender && <p>{`${errors.gender.message}`}</p>}
-            </div>
-
-            <fieldset>
-              <legend>Date of Birth</legend>
-
-              <div className="flex justify-between gap-1 sm:gap-8">
-                <div className="flex-grow">
-                  <label htmlFor="year" className="hidden">
-                    Year
-                  </label>
-                  <select
-                    id="year"
-                    name="year"
-                    value={year ? year : ""}
-                    required
-                    onChange={(e) => setYear(Number(e.target.value))}
-                    className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-neutral-900 ring-1 ring-inset ring-black focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-                  >
-                    <option value="" disabled>
-                      Year
-                    </option>
-                    {years.map((year) => (
-                      <option key={year}>{year}</option>
-                    ))}
-                  </select>
-                </div>
-
-                <div className="flex-grow">
-                  <label htmlFor="month" className="hidden">
-                    Month
-                  </label>
-                  <select
-                    id="month"
-                    name="month"
-                    value={month !== undefined ? monthsOptions[month] : ""}
-                    required
-                    className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-neutral-900 ring-1 ring-inset ring-black focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-                    onChange={(e) =>
-                      setMonth(monthsOptions.indexOf(e.target.value))
-                    }
-                  >
-                    <option value="" disabled>
-                      Month
-                    </option>
-                    {monthsOptions.map((month) => (
-                      <option key={month}>{month}</option>
-                    ))}
-                  </select>
-                </div>
-
-                <div className="flex-grow">
-                  <label htmlFor="day" className="hidden">
-                    day
-                  </label>
-                  <select
-                    id="day"
-                    name="day"
-                    value={day ? day : ""}
-                    className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-neutral-900 ring-1 ring-inset ring-black focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-                    disabled={!year || undefined}
-                    required
-                    onChange={(e) => setDay(Number(e.target.value))}
-                  >
-                    <option value="" disabled>
-                      Day
-                    </option>
-
-                    {listOfDaysInSelectedMonth.map((day) => (
-                      <option key={day}>{day}</option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-              {errors.dateOfBirth && <p>{`${errors.dateOfBirth.message}`}</p>}
-            </fieldset>
+              </Select>
+            </Field>
+
+            <Field>
+              <Select
+                id="month"
+                aria-label="month"
+                value={month !== undefined ? monthsOptions[month] : ""}
+                required
+                onChange={(e) =>
+                  setMonth(monthsOptions.indexOf(e.target.value))
+                }
+              >
+                <option value="" disabled>
+                  Month
+                </option>
+                {monthsOptions.map((month) => (
+                  <option key={month}>{month}</option>
+                ))}
+              </Select>
+            </Field>
+
+            <Field>
+              <Select
+                id="day"
+                aria-label="day"
+                value={day ? day : ""}
+                disabled={!month || undefined}
+                required
+                onChange={(e) => setDay(Number(e.target.value))}
+              >
+                <option value="" disabled>
+                  day
+                </option>
+                {listOfDaysInSelectedMonth.map((day) => (
+                  <option key={day}>{day}</option>
+                ))}
+              </Select>
+            </Field>
           </div>
+          {errors.dateOfBirth && <p>{`${errors.dateOfBirth.message}`}</p>}
+        </Fieldset>
+      </div>
 
-          <div className="mt-6 flex justify-end">
-            <button
-              type="button"
-              onClick={() => router.push(`?slide=${1}`, { scroll: false })}
-              className="mr-4 flex w-[6rem] justify-center rounded-md bg-slate-100 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm ring-1 ring-inset hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-            >
-              Go back
-            </button>
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className="flex w-[6rem] justify-center rounded-md bg-red-500 px-3 py-1.5 text-sm font-semibold leading-6 text-neutral-900 shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:text-white"
-            >
-              Next
-            </button>
-          </div>
-        </div>
+      <div className="mr-4 mt-6 flex justify-end gap-4 sm:mr-0">
+        <Button
+          type="button"
+          disabled={isSubmitting}
+          onClick={() => router.push(`?slide=${1}`, { scroll: false })}
+          className="w-24 cursor-pointer"
+        >
+          Go back
+        </Button>
+        <Button
+          type="submit"
+          disabled={isSubmitting}
+          color={"dark/white"}
+          className="w-24 cursor-pointer"
+        >
+          Next
+        </Button>
       </div>
     </form>
   );
@@ -472,7 +461,7 @@ function SlideThree({ details }: { details: UserDetails }) {
 
     if (isError) {
       try {
-        const isSuccess = await handleFormSlideThreeSubmit(data);
+        const isSuccess = await slideThreeSubmitAction(data);
         if (isSuccess) {
           toast.success("Saved");
           router.push(`/`, { scroll: false });
@@ -486,33 +475,23 @@ function SlideThree({ details }: { details: UserDetails }) {
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit)}
-      className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8"
-    >
-      <div className="h-[9rem] sm:mx-auto sm:w-full sm:max-w-sm">
-        <h2 className="mt-10 text-2xl font-bold leading-9 tracking-tight text-neutral-900 dark:text-white">
-          Work and education
-        </h2>
-        <p>
-          This information is private but helpful to tailor our events and
-          features.
-        </p>
-      </div>
+    <form className="mx-auto max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
+      <div className="min-h-[32rem]">
+        <div className="mx-4 ">
+          <Heading className="mt-16"> Work and education</Heading>
+          <Subheading>
+            This information is private but helpful to tailor our events and
+            features.
+          </Subheading>
+        </div>
+        <Divider className="my-4 mt-4" />
+        <Fieldset>
+          <Field className="mx-4 my-4 ">
+            <Label>Which best describes you?</Label>
 
-      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-        <div className="h-[21.75rem] space-y-6">
-          <div>
-            <label
-              htmlFor="professional-or-student"
-              className="block text-sm font-medium leading-6 text-neutral-900"
-            >
-              Which best describes you?
-            </label>
-            <select
+            <Select
               id="professional-or-student"
               {...register("professionalOrStudent")}
-              className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-neutral-900 ring-1 ring-inset ring-black  focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
             >
               <option value="" disabled>
                 Select one
@@ -521,69 +500,51 @@ function SlideThree({ details }: { details: UserDetails }) {
               {professionalOrStudentOptions.map((status) => (
                 <option key={status}>{status}</option>
               ))}
-            </select>
-
+            </Select>
             {errors.professionalOrStudent && (
-              <p>{`${errors.professionalOrStudent.message}`}</p>
+              <ErrorMessage className="text-red-500">
+                {errors.professionalOrStudent.message}
+              </ErrorMessage>
             )}
-          </div>
+          </Field>
 
           {getValues("professionalOrStudent") === "Working professional" && (
             <>
-              <div>
-                <label
-                  htmlFor="workplace"
-                  className="block text-sm font-medium leading-6 text-neutral-900 dark:text-white"
-                >
-                  Where are you working?
-                </label>
-                <div className="mt-2">
-                  <input
-                    id="workplace"
-                    {...register("workplace")}
-                    type="text"
-                    placeholder="Codú corp"
-                    className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-black  focus:ring-2 focus:ring-inset focus:ring-red-500 dark:text-white sm:text-sm sm:leading-6"
-                  />
-                </div>
-                {errors.workplace && <p>{`${errors.workplace.message}`}</p>}
-              </div>
-
-              <div>
-                <label
-                  htmlFor="job-title"
-                  className="block text-sm font-medium leading-6 text-neutral-900 dark:text-white"
-                >
-                  What is your job title?
-                </label>
-                <div className="mt-2">
-                  <input
-                    id="job-title"
-                    {...register("jobTitle")}
-                    type="text"
-                    placeholder="Chief transponster"
-                    className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-black  focus:ring-2 focus:ring-inset focus:ring-red-500 dark:text-white sm:text-sm sm:leading-6"
-                  />
-                </div>
-                {errors.jobTitle && <p>{`${errors.jobTitle.message}`}</p>}
-              </div>
+              <Field className="mx-4 my-4 ">
+                <Label>Where are you working?</Label>
+                <Input
+                  id="workplace"
+                  {...register("workplace")}
+                  placeholder="Codú corp"
+                />
+                {errors.workplace && (
+                  <ErrorMessage className="text-red-500">
+                    {errors.workplace.message}
+                  </ErrorMessage>
+                )}
+              </Field>
+
+              <Field className="mx-4 my-4 ">
+                <Label>What is your job title?</Label>
+                <Input
+                  id="job-title"
+                  {...register("jobTitle")}
+                  placeholder="Chief transponster"
+                />
+                {errors.jobTitle && (
+                  <ErrorMessage className="text-red-500">
+                    {errors.jobTitle.message}
+                  </ErrorMessage>
+                )}
+              </Field>
             </>
           )}
 
           {getValues("professionalOrStudent") === "Current student" && (
             <>
-              <div>
-                <label
-                  htmlFor="level-of-study"
-                  className="block text-sm font-medium leading-6 text-neutral-900"
-                >
-                  What is your current level of study?
-                </label>
-                <select
-                  id="level-of-study"
-                  {...register("levelOfStudy")}
-                  className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-neutral-900 ring-1 ring-inset ring-black focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-                >
+              <Field className="mx-4 my-4 ">
+                <Label> What is your current level of study?</Label>
+                <Select id="level-of-study" {...register("levelOfStudy")}>
                   <option value="" disabled>
                     Select level of study
                   </option>
@@ -591,50 +552,50 @@ function SlideThree({ details }: { details: UserDetails }) {
                   {levelOfStudyOptions.map((level) => (
                     <option key={level}>{level}</option>
                   ))}
-                </select>
+                </Select>
                 {errors.levelOfStudy && (
-                  <p>{`${errors.levelOfStudy.message}`}</p>
+                  <ErrorMessage className="text-red-500">
+                    {errors.levelOfStudy.message}
+                  </ErrorMessage>
+                )}
+              </Field>
+
+              <Field className="mx-4 my-4 ">
+                <Label>What are you studying?</Label>
+                <Input
+                  id="course"
+                  {...register("course")}
+                  placeholder="Course name"
+                />
+                {errors.course && (
+                  <ErrorMessage className="text-red-500">
+                    {errors.course.message}
+                  </ErrorMessage>
                 )}
-              </div>
-
-              <div>
-                <label
-                  htmlFor="course"
-                  className="block text-sm font-medium leading-6 text-neutral-900 dark:text-white"
-                >
-                  What are you studying?
-                </label>
-                <div className="mt-2">
-                  <input
-                    id="course"
-                    {...register("course")}
-                    type="text"
-                    placeholder="Course name"
-                    className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-black focus:ring-2 focus:ring-inset focus:ring-red-500 dark:text-white sm:text-sm sm:leading-6"
-                  />
-                </div>
-                {errors.course && <p>{`${errors.course.message}`}</p>}
-              </div>
+              </Field>
             </>
           )}
-        </div>
+        </Fieldset>
+      </div>
 
-        <div className="mt-6 flex justify-end">
-          <button
-            type="button"
-            onClick={() => router.push(`?slide=${2}`, { scroll: false })}
-            className="mr-4 flex w-[6rem] justify-center rounded-md bg-slate-100 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm ring-1 ring-inset hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-          >
-            Go back
-          </button>
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="flex w-[6rem] justify-center rounded-md bg-red-500 px-3 py-1.5 text-sm font-semibold leading-6  text-neutral-900 shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:text-white"
-          >
-            Submit
-          </button>
-        </div>
+      <div className="mr-4 mt-6 flex justify-end gap-4 sm:mr-0">
+        <Button
+          type="button"
+          disabled={isSubmitting}
+          onClick={() => router.push(`?slide=${2}`, { scroll: false })}
+          className="w-24 cursor-pointer"
+        >
+          Go back
+        </Button>
+
+        <Button
+          type="submit"
+          disabled={isSubmitting}
+          color={"dark/white"}
+          className="w-24 cursor-pointer"
+        >
+          Submit
+        </Button>
       </div>
     </form>
   );
diff --git a/app/(app)/alpha/additional-details/components/button.tsx b/app/(app)/alpha/additional-details/components/button.tsx
new file mode 100644
index 00000000..b50095d5
--- /dev/null
+++ b/app/(app)/alpha/additional-details/components/button.tsx
@@ -0,0 +1,216 @@
+import * as Headless from "@headlessui/react";
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { Link } from "./link";
+
+const styles = {
+  base: [
+    // Base
+    "relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
+    // Sizing
+    "px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6",
+    // Focus
+    "focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
+    // Disabled
+    "data-[disabled]:opacity-50",
+    // Icon
+    "[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]",
+  ],
+  solid: [
+    // Optical border, implemented as the button background to avoid corner artifacts
+    "border-transparent bg-[--btn-border]",
+    // Dark mode: border is rendered on `after` so background is set to button background
+    "dark:bg-[--btn-bg]",
+    // Button background, implemented as foreground layer to stack on top of pseudo-border layer
+    "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]",
+    // Drop shadow, applied to the inset `before` layer so it blends with the border
+    "before:shadow",
+    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+    "dark:before:hidden",
+    // Dark mode: Subtle white outline is applied using a border
+    "dark:border-white/5",
+    // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
+    "after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]",
+    // Inner highlight shadow
+    "after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]",
+    // White overlay on hover
+    "after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]",
+    // Dark mode: `after` layer expands to cover entire button
+    "dark:after:-inset-px dark:after:rounded-lg",
+    // Disabled
+    "before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none",
+  ],
+  outline: [
+    // Base
+    "border-zinc-950/10 text-zinc-950 data-[active]:bg-zinc-950/[2.5%] data-[hover]:bg-zinc-950/[2.5%]",
+    // Dark mode
+    "dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5",
+    // Icon
+    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
+  ],
+  plain: [
+    // Base
+    "border-transparent text-zinc-950 data-[active]:bg-zinc-950/5 data-[hover]:bg-zinc-950/5",
+    // Dark mode
+    "dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10",
+    // Icon
+    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
+  ],
+  colors: {
+    "dark/zinc": [
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
+    ],
+    light: [
+      "text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
+      "dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
+      "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
+    ],
+    "dark/white": [
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
+    ],
+    dark: [
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
+    ],
+    white: [
+      "text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
+      "dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.500)] data-[hover]:[--btn-icon:theme(colors.zinc.500)]",
+    ],
+    zinc: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.zinc.600)] [--btn-border:theme(colors.zinc.700/90%)]",
+      "dark:[--btn-hover-overlay:theme(colors.white/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
+    ],
+    indigo: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.indigo.500)] [--btn-border:theme(colors.indigo.600/90%)]",
+      "[--btn-icon:theme(colors.indigo.300)] data-[active]:[--btn-icon:theme(colors.indigo.200)] data-[hover]:[--btn-icon:theme(colors.indigo.200)]",
+    ],
+    cyan: [
+      "text-cyan-950 [--btn-bg:theme(colors.cyan.300)] [--btn-border:theme(colors.cyan.400/80%)] [--btn-hover-overlay:theme(colors.white/25%)]",
+      "[--btn-icon:theme(colors.cyan.500)]",
+    ],
+    red: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)]",
+      "[--btn-icon:theme(colors.red.300)] data-[active]:[--btn-icon:theme(colors.red.200)] data-[hover]:[--btn-icon:theme(colors.red.200)]",
+    ],
+    orange: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.orange.500)] [--btn-border:theme(colors.orange.600/90%)]",
+      "[--btn-icon:theme(colors.orange.300)] data-[active]:[--btn-icon:theme(colors.orange.200)] data-[hover]:[--btn-icon:theme(colors.orange.200)]",
+    ],
+    amber: [
+      "text-amber-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.amber.400)] [--btn-border:theme(colors.amber.500/80%)]",
+      "[--btn-icon:theme(colors.amber.600)]",
+    ],
+    yellow: [
+      "text-yellow-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.yellow.300)] [--btn-border:theme(colors.yellow.400/80%)]",
+      "[--btn-icon:theme(colors.yellow.600)] data-[active]:[--btn-icon:theme(colors.yellow.700)] data-[hover]:[--btn-icon:theme(colors.yellow.700)]",
+    ],
+    lime: [
+      "text-lime-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.lime.300)] [--btn-border:theme(colors.lime.400/80%)]",
+      "[--btn-icon:theme(colors.lime.600)] data-[active]:[--btn-icon:theme(colors.lime.700)] data-[hover]:[--btn-icon:theme(colors.lime.700)]",
+    ],
+    green: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.green.600)] [--btn-border:theme(colors.green.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
+    ],
+    emerald: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.emerald.600)] [--btn-border:theme(colors.emerald.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
+    ],
+    teal: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.teal.600)] [--btn-border:theme(colors.teal.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
+    ],
+    sky: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.sky.500)] [--btn-border:theme(colors.sky.600/80%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
+    ],
+    blue: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.blue.600)] [--btn-border:theme(colors.blue.700/90%)]",
+      "[--btn-icon:theme(colors.blue.400)] data-[active]:[--btn-icon:theme(colors.blue.300)] data-[hover]:[--btn-icon:theme(colors.blue.300)]",
+    ],
+    violet: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.violet.500)] [--btn-border:theme(colors.violet.600/90%)]",
+      "[--btn-icon:theme(colors.violet.300)] data-[active]:[--btn-icon:theme(colors.violet.200)] data-[hover]:[--btn-icon:theme(colors.violet.200)]",
+    ],
+    purple: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.purple.500)] [--btn-border:theme(colors.purple.600/90%)]",
+      "[--btn-icon:theme(colors.purple.300)] data-[active]:[--btn-icon:theme(colors.purple.200)] data-[hover]:[--btn-icon:theme(colors.purple.200)]",
+    ],
+    fuchsia: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.fuchsia.500)] [--btn-border:theme(colors.fuchsia.600/90%)]",
+      "[--btn-icon:theme(colors.fuchsia.300)] data-[active]:[--btn-icon:theme(colors.fuchsia.200)] data-[hover]:[--btn-icon:theme(colors.fuchsia.200)]",
+    ],
+    pink: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.pink.500)] [--btn-border:theme(colors.pink.600/90%)]",
+      "[--btn-icon:theme(colors.pink.300)] data-[active]:[--btn-icon:theme(colors.pink.200)] data-[hover]:[--btn-icon:theme(colors.pink.200)]",
+    ],
+    rose: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.rose.500)] [--btn-border:theme(colors.rose.600/90%)]",
+      "[--btn-icon:theme(colors.rose.300)] data-[active]:[--btn-icon:theme(colors.rose.200)] data-[hover]:[--btn-icon:theme(colors.rose.200)]",
+    ],
+  },
+};
+
+type ButtonProps = (
+  | { color?: keyof typeof styles.colors; outline?: never; plain?: never }
+  | { color?: never; outline: true; plain?: never }
+  | { color?: never; outline?: never; plain: true }
+) & { className?: string; children: React.ReactNode } & (
+    | Omit<Headless.ButtonProps, "as" | "className">
+    | Omit<React.ComponentPropsWithoutRef<typeof Link>, "className">
+  );
+
+export const Button = forwardRef(function Button(
+  { color, outline, plain, className, children, ...props }: ButtonProps,
+  ref: React.ForwardedRef<HTMLElement>,
+) {
+  const classes = clsx(
+    className,
+    styles.base,
+    outline
+      ? styles.outline
+      : plain
+        ? styles.plain
+        : clsx(styles.solid, styles.colors[color ?? "dark/zinc"]),
+  );
+
+  return "href" in props ? (
+    <Link
+      {...props}
+      className={classes}
+      ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+    >
+      <TouchTarget>{children}</TouchTarget>
+    </Link>
+  ) : (
+    <Headless.Button
+      {...props}
+      className={clsx(classes, "cursor-default")}
+      ref={ref}
+    >
+      <TouchTarget>{children}</TouchTarget>
+    </Headless.Button>
+  );
+});
+
+/**
+ * Expand the hit area to at least 44×44px on touch devices
+ */
+export function TouchTarget({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <span
+        className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
+        aria-hidden="true"
+      />
+      {children}
+    </>
+  );
+}
diff --git a/app/(app)/alpha/additional-details/components/divider.tsx b/app/(app)/alpha/additional-details/components/divider.tsx
new file mode 100644
index 00000000..e03b0333
--- /dev/null
+++ b/app/(app)/alpha/additional-details/components/divider.tsx
@@ -0,0 +1,20 @@
+import clsx from "clsx";
+
+export function Divider({
+  soft = false,
+  className,
+  ...props
+}: { soft?: boolean } & React.ComponentPropsWithoutRef<"hr">) {
+  return (
+    <hr
+      role="presentation"
+      {...props}
+      className={clsx(
+        className,
+        "w-full border-t",
+        soft && "border-zinc-950/5 dark:border-white/5",
+        !soft && "border-zinc-950/10 dark:border-white/10",
+      )}
+    />
+  );
+}
diff --git a/app/(app)/alpha/additional-details/components/fieldset.tsx b/app/(app)/alpha/additional-details/components/fieldset.tsx
new file mode 100644
index 00000000..28390bd6
--- /dev/null
+++ b/app/(app)/alpha/additional-details/components/fieldset.tsx
@@ -0,0 +1,121 @@
+import * as Headless from "@headlessui/react";
+import clsx from "clsx";
+import React from "react";
+
+export function Fieldset({
+  className,
+  ...props
+}: { className?: string } & Omit<Headless.FieldsetProps, "as" | "className">) {
+  return (
+    <Headless.Fieldset
+      {...props}
+      className={clsx(
+        className,
+        "[&>*+[data-slot=control]]:mt-6 [&>[data-slot=text]]:mt-1",
+      )}
+    />
+  );
+}
+
+export function Legend({
+  className,
+  ...props
+}: { className?: string } & Omit<Headless.LegendProps, "as" | "className">) {
+  return (
+    <Headless.Legend
+      data-slot="legend"
+      {...props}
+      className={clsx(
+        className,
+        "text-base/6 font-semibold text-zinc-950 data-[disabled]:opacity-50 dark:text-white sm:text-sm/6",
+      )}
+    />
+  );
+}
+
+export function FieldGroup({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="control"
+      {...props}
+      className={clsx(className, "space-y-8")}
+    />
+  );
+}
+
+export function Field({
+  className,
+  ...props
+}: { className?: string } & Omit<Headless.FieldProps, "as" | "className">) {
+  return (
+    <Headless.Field
+      {...props}
+      className={clsx(
+        className,
+        "[&>[data-slot=label]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=label]+[data-slot=description]]:mt-1",
+        "[&>[data-slot=description]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=description]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=error]]:mt-3",
+        "[&>[data-slot=label]]:font-medium",
+      )}
+    />
+  );
+}
+
+export function Label({
+  className,
+  ...props
+}: { className?: string } & Omit<Headless.LabelProps, "as" | "className">) {
+  return (
+    <Headless.Label
+      data-slot="label"
+      {...props}
+      className={clsx(
+        className,
+        "select-none text-base/6 text-zinc-950 data-[disabled]:opacity-50 dark:text-white sm:text-sm/6",
+      )}
+    />
+  );
+}
+
+export function Description({
+  className,
+  ...props
+}: { className?: string } & Omit<
+  Headless.DescriptionProps,
+  "as" | "className"
+>) {
+  return (
+    <Headless.Description
+      data-slot="description"
+      {...props}
+      className={clsx(
+        className,
+        "text-base/6 text-zinc-500 data-[disabled]:opacity-50 dark:text-zinc-400 sm:text-sm/6",
+      )}
+    />
+  );
+}
+
+export function ErrorMessage({
+  className,
+  ...props
+}: { className?: string } & Omit<
+  Headless.DescriptionProps,
+  "as" | "className"
+>) {
+  return (
+    <Headless.Description
+      data-slot="error"
+      {...props}
+      className={clsx(
+        className,
+        "text-base/6 text-red-600 data-[disabled]:opacity-50 dark:text-red-500 sm:text-sm/6",
+      )}
+    />
+  );
+}
diff --git a/app/(app)/alpha/additional-details/components/heading.tsx b/app/(app)/alpha/additional-details/components/heading.tsx
new file mode 100644
index 00000000..e915910d
--- /dev/null
+++ b/app/(app)/alpha/additional-details/components/heading.tsx
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+type HeadingProps = {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+} & React.ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
+
+export function Heading({ className, level = 1, ...props }: HeadingProps) {
+  const Element: `h${typeof level}` = `h${level}`;
+
+  return (
+    <Element
+      {...props}
+      className={clsx(
+        className,
+        "text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8",
+      )}
+    />
+  );
+}
+
+export function Subheading({ className, level = 2, ...props }: HeadingProps) {
+  const Element: `h${typeof level}` = `h${level}`;
+
+  return (
+    <Element
+      {...props}
+      className={clsx(
+        className,
+        "text-base/7 font-semibold text-zinc-950 dark:text-white sm:text-sm/6",
+      )}
+    />
+  );
+}
diff --git a/app/(app)/alpha/additional-details/components/input.tsx b/app/(app)/alpha/additional-details/components/input.tsx
new file mode 100644
index 00000000..5d77bf56
--- /dev/null
+++ b/app/(app)/alpha/additional-details/components/input.tsx
@@ -0,0 +1,104 @@
+import * as Headless from "@headlessui/react";
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+
+export function InputGroup({
+  children,
+}: React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      data-slot="control"
+      className={clsx(
+        "relative isolate block",
+        "[&_input]:has-[[data-slot=icon]:first-child]:pl-10 [&_input]:has-[[data-slot=icon]:last-child]:pr-10 sm:[&_input]:has-[[data-slot=icon]:first-child]:pl-8 sm:[&_input]:has-[[data-slot=icon]:last-child]:pr-8",
+        "[&>[data-slot=icon]]:pointer-events-none [&>[data-slot=icon]]:absolute [&>[data-slot=icon]]:top-3 [&>[data-slot=icon]]:z-10 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:top-2.5 sm:[&>[data-slot=icon]]:size-4",
+        "[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5",
+        "[&>[data-slot=icon]]:text-zinc-500 dark:[&>[data-slot=icon]]:text-zinc-400",
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+const dateTypes = ["date", "datetime-local", "month", "time", "week"];
+type DateType = (typeof dateTypes)[number];
+
+export const Input = forwardRef(function Input(
+  {
+    className,
+    ...props
+  }: {
+    className?: string;
+    type?:
+      | "email"
+      | "number"
+      | "password"
+      | "search"
+      | "tel"
+      | "text"
+      | "url"
+      | DateType;
+  } & Omit<Headless.InputProps, "as" | "className">,
+  ref: React.ForwardedRef<HTMLInputElement>,
+) {
+  return (
+    <span
+      data-slot="control"
+      className={clsx([
+        className,
+        // Basic layout
+        "relative block w-full",
+        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+        "before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow",
+        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+        "dark:before:hidden",
+        // Focus ring
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500",
+        // Disabled state
+        "has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none",
+        // Invalid state
+        "before:has-[[data-invalid]]:shadow-red-500/10",
+      ])}
+    >
+      <Headless.Input
+        ref={ref}
+        {...props}
+        className={clsx([
+          // Date classes
+          props.type &&
+            dateTypes.includes(props.type) && [
+              "[&::-webkit-datetime-edit-fields-wrapper]:p-0",
+              "[&::-webkit-date-and-time-value]:min-h-[1.5em]",
+              "[&::-webkit-datetime-edit]:inline-flex",
+              "[&::-webkit-datetime-edit]:p-0",
+              "[&::-webkit-datetime-edit-year-field]:p-0",
+              "[&::-webkit-datetime-edit-month-field]:p-0",
+              "[&::-webkit-datetime-edit-day-field]:p-0",
+              "[&::-webkit-datetime-edit-hour-field]:p-0",
+              "[&::-webkit-datetime-edit-minute-field]:p-0",
+              "[&::-webkit-datetime-edit-second-field]:p-0",
+              "[&::-webkit-datetime-edit-millisecond-field]:p-0",
+              "[&::-webkit-datetime-edit-meridiem-field]:p-0",
+            ],
+          // Basic layout
+          "relative block w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]",
+          // Typography
+          "text-base/6 text-zinc-950 placeholder:text-zinc-500 dark:text-white sm:text-sm/6",
+          // Border
+          "border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20",
+          // Background color
+          "bg-transparent dark:bg-white/5",
+          // Hide default focus styles
+          "focus:outline-none",
+          // Invalid state
+          "data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-500 data-[invalid]:data-[hover]:dark:border-red-500",
+          // Disabled state
+          "data-[disabled]:border-zinc-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]",
+          // System icons
+          "dark:[color-scheme:dark]",
+        ])}
+      />
+    </span>
+  );
+});
diff --git a/app/(app)/alpha/additional-details/components/link.tsx b/app/(app)/alpha/additional-details/components/link.tsx
new file mode 100644
index 00000000..772cf4bc
--- /dev/null
+++ b/app/(app)/alpha/additional-details/components/link.tsx
@@ -0,0 +1,22 @@
+/**
+ * TODO: Update this component to use your client-side framework's link
+ * component. We've provided examples of how to do this for Next.js, Remix, and
+ * Inertia.js in the Catalyst documentation:
+ *
+ * https://catalyst.tailwindui.com/docs#client-side-router-integration
+ */
+
+import * as Headless from "@headlessui/react";
+import React, { forwardRef } from "react";
+
+export const Link = forwardRef(function Link(
+  props: { href: string } & React.ComponentPropsWithoutRef<"a">,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) {
+  return (
+    <Headless.DataInteractive>
+      {/* eslint-disable jsx-a11y/anchor-has-content  */}
+      <a {...props} ref={ref} />
+    </Headless.DataInteractive>
+  );
+});
diff --git a/app/(app)/alpha/additional-details/components/select.tsx b/app/(app)/alpha/additional-details/components/select.tsx
new file mode 100644
index 00000000..5668aa4d
--- /dev/null
+++ b/app/(app)/alpha/additional-details/components/select.tsx
@@ -0,0 +1,75 @@
+import * as Headless from "@headlessui/react";
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+
+export const Select = forwardRef(function Select(
+  {
+    className,
+    multiple,
+    ...props
+  }: { className?: string } & Omit<Headless.SelectProps, "as" | "className">,
+  ref: React.ForwardedRef<HTMLSelectElement>,
+) {
+  return (
+    <span
+      data-slot="control"
+      className={clsx([
+        className,
+        // Basic layout
+        "group relative block w-full",
+        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+        "before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow",
+        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+        "dark:before:hidden",
+        // Focus ring
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent after:has-[[data-focus]]:ring-2 after:has-[[data-focus]]:ring-blue-500",
+        // Disabled state
+        "has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none",
+      ])}
+    >
+      <Headless.Select
+        ref={ref}
+        multiple={multiple}
+        {...props}
+        className={clsx([
+          // Basic layout
+          "relative block w-full appearance-none rounded-lg py-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]",
+          // Horizontal padding
+          multiple
+            ? "px-[calc(theme(spacing[3.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)]"
+            : "pl-[calc(theme(spacing[3.5])-1px)] pr-[calc(theme(spacing.10)-1px)] sm:pl-[calc(theme(spacing.3)-1px)] sm:pr-[calc(theme(spacing.9)-1px)]",
+          // Options (multi-select)
+          "[&_optgroup]:font-semibold",
+          // Typography
+          "text-base/6 text-zinc-950 placeholder:text-zinc-500 dark:text-white dark:*:text-white sm:text-sm/6",
+          // Border
+          "border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20",
+          // Background color
+          "bg-transparent dark:bg-white/5 dark:*:bg-zinc-800",
+          // Hide default focus styles
+          "focus:outline-none",
+          // Invalid state
+          "data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-600 data-[invalid]:data-[hover]:dark:border-red-600",
+          // Disabled state
+          "data-[disabled]:border-zinc-950/20 data-[disabled]:opacity-100 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]",
+        ])}
+      />
+      {/* {!multiple && (
+        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <svg
+            className="size-5 stroke-zinc-500 group-has-[[data-disabled]]:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]"
+            viewBox="0 0 16 16"
+            aria-hidden="true"
+            fill="none"
+          >
+            <path d="M5.75 10.75L8 13L10.25 10.75" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10.25 5.25L8 3L5.75 5.25" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </span>
+      )} */}
+    </span>
+  );
+});
+
+// JP Note - I removed the dropdown icon from the select component
+// because it was displayed along with the Headless UI dropwdown icon.
diff --git a/app/(app)/alpha/additional-details/components/text.tsx b/app/(app)/alpha/additional-details/components/text.tsx
new file mode 100644
index 00000000..9bb47067
--- /dev/null
+++ b/app/(app)/alpha/additional-details/components/text.tsx
@@ -0,0 +1,60 @@
+import clsx from "clsx";
+import { Link } from "./link";
+
+export function Text({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"p">) {
+  return (
+    <p
+      data-slot="text"
+      {...props}
+      className={clsx(
+        className,
+        "text-base/6 text-zinc-500 dark:text-zinc-400 sm:text-sm/6",
+      )}
+    />
+  );
+}
+
+export function TextLink({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Link>) {
+  return (
+    <Link
+      {...props}
+      className={clsx(
+        className,
+        "text-zinc-950 underline decoration-zinc-950/50 data-[hover]:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-[hover]:decoration-white",
+      )}
+    />
+  );
+}
+
+export function Strong({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"strong">) {
+  return (
+    <strong
+      {...props}
+      className={clsx(className, "font-medium text-zinc-950 dark:text-white")}
+    />
+  );
+}
+
+export function Code({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"code">) {
+  return (
+    <code
+      {...props}
+      className={clsx(
+        className,
+        "rounded border border-zinc-950/10 bg-zinc-950/[2.5%] px-0.5 text-sm font-medium text-zinc-950 dark:border-white/20 dark:bg-white/5 dark:text-white sm:text-[0.8125rem]",
+      )}
+    />
+  );
+}