diff --git a/packages/admin-next/dashboard/src/components/common/switch-box/index.ts b/packages/admin-next/dashboard/src/components/common/switch-box/index.ts
new file mode 100644
index 0000000000..c245e8b7ad
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/switch-box/index.ts
@@ -0,0 +1 @@
+export * from "./switch-box"
diff --git a/packages/admin-next/dashboard/src/components/common/switch-box/switch-box.tsx b/packages/admin-next/dashboard/src/components/common/switch-box/switch-box.tsx
new file mode 100644
index 0000000000..856753c599
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/switch-box/switch-box.tsx
@@ -0,0 +1,70 @@
+import { Switch } from "@medusajs/ui"
+import { ReactNode } from "react"
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form"
+
+import { Form } from "../../common/form"
+
+interface HeadlessControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>  extends Omit<ControllerProps<TFieldValues, TName>, "render"> {}
+
+interface SwitchBoxProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> extends HeadlessControllerProps<TFieldValues, TName>{
+  label: string
+  description: string
+  optional?: boolean
+  tooltip?: ReactNode
+  /**
+   * Callback for performing additional actions when the checked state changes.
+   * This does not intercept the form control, it is only used for injecting side-effects.
+   */
+  onCheckedChange?: (checked: boolean) => void
+}
+
+/**
+ * Wrapper for the Switch component to be used with `react-hook-form`.
+ * 
+ * Use this component whenever a design calls for wrapping the Switch component
+ * in a container with a label and description.
+ */
+export const SwitchBox = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  label,
+  description,
+  optional = false,
+  tooltip,
+  onCheckedChange,
+  ...props
+}: SwitchBoxProps<TFieldValues, TName>) => {
+  return (
+    <Form.Field
+      {...props}
+      render={({ field: { value, onChange, ...field } }) => {
+        return (
+          <Form.Item>
+            <div className="bg-ui-bg-component shadow-elevation-card-rest flex items-start gap-x-3 rounded-lg p-3">
+              <Form.Control>
+                <Switch {...field} checked={value} onCheckedChange={(e) => {
+                  onCheckedChange?.(e)
+                  onChange(e)
+                }} />
+              </Form.Control>
+              <div>
+                <Form.Label optional={optional} tooltip={tooltip}>
+                  {label}
+                </Form.Label>
+                <Form.Hint>{description}</Form.Hint>
+              </div>
+            </div>
+            <Form.ErrorMessage />
+          </Form.Item>
+        )
+      }}
+    />
+  )
+}
\ No newline at end of file
diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
index b7c026fcb6..97e0caba78 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
@@ -23,6 +23,7 @@ import { useTranslation } from "react-i18next"
 
 import { Form } from "../../../../../../../components/common/form"
 import { SortableList } from "../../../../../../../components/common/sortable-list"
+import { SwitchBox } from "../../../../../../../components/common/switch-box"
 import { ChipInput } from "../../../../../../../components/inputs/chip-input"
 import { ProductCreateSchemaType } from "../../../../types"
 import { decorateVariantsWithDefaultValues } from "../../../../utils"
@@ -285,46 +286,23 @@ export const ProductCreateVariantsSection = ({
   return (
     <div id="variants" className="flex flex-col gap-y-8">
       <Heading level="h2">{t("products.create.variants.header")}</Heading>
-      <Form.Field
+      <SwitchBox
         control={form.control}
         name="enable_variants"
-        render={({ field: { value, onChange, ...field } }) => {
-          return (
-            <Form.Item>
-              <div className="shadow-elevation-card-rest bg-ui-bg-field flex flex-row gap-x-4 rounded-xl p-2">
-                <Form.Control>
-                  <Switch
-                    checked={value}
-                    onCheckedChange={(checked) => {
-                      if (checked) {
-                        form.setValue("options", [
-                          {
-                            title: "",
-                            values: [],
-                          },
-                        ])
-                        form.setValue("variants", [])
-                      } else {
-                        createDefaultOptionAndVariant()
-                      }
-
-                      onChange(!!checked)
-                    }}
-                    {...field}
-                    className="mt-1"
-                  />
-                </Form.Control>
-                <div className="flex flex-col">
-                  <Form.Label>
-                    {t("products.create.variants.subHeadingTitle")}
-                  </Form.Label>
-                  <Form.Hint>
-                    {t("products.create.variants.subHeadingDescription")}
-                  </Form.Hint>
-                </div>
-              </div>
-            </Form.Item>
-          )
+        label={t("products.create.variants.subHeadingTitle")}
+        description={t("products.create.variants.subHeadingDescription")}
+        onCheckedChange={(checked) => {
+          if (checked) {
+            form.setValue("options", [
+              {
+                title: "",
+                values: [],
+              },
+            ])
+            form.setValue("variants", [])
+          } else {
+            createDefaultOptionAndVariant()
+          }
         }}
       />
       {watchedAreVariantsEnabled && (
diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx
index ff6c5f02af..96efdcae6f 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx
@@ -1,9 +1,10 @@
-import { Button, Heading, Switch } from "@medusajs/ui"
+import { Button, Heading } from "@medusajs/ui"
 import { UseFormReturn, useFieldArray } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
 
 import { ChipGroup } from "../../../../../../../components/common/chip-group"
 import { Form } from "../../../../../../../components/common/form"
+import { SwitchBox } from "../../../../../../../components/common/switch-box"
 import { Combobox } from "../../../../../../../components/inputs/combobox"
 import { useComboboxData } from "../../../../../../../hooks/use-combobox-data"
 import { client, sdk } from "../../../../../../../lib/client"
@@ -64,36 +65,13 @@ export const ProductCreateOrganizationSection = ({
   return (
     <div id="organize" className="flex flex-col gap-y-8">
       <Heading>{t("products.organization.header")}</Heading>
-      <div className="grid grid-cols-1 gap-x-4">
-        <Form.Field
-          control={form.control}
-          name="discountable"
-          render={({ field: { value, onChange, ...field } }) => {
-            return (
-              <Form.Item>
-                <div className="shadow-elevation-card-rest bg-ui-bg-field flex flex-row gap-x-4 rounded-xl p-2">
-                  <Form.Control>
-                    <Switch
-                      {...field}
-                      checked={!!value}
-                      onCheckedChange={onChange}
-                      className="mt-1"
-                    />
-                  </Form.Control>
-                  <div className="flex flex-col">
-                    <Form.Label>
-                      {t("products.fields.discountable.label")}
-                    </Form.Label>
-                    <Form.Hint>
-                      {t("products.fields.discountable.hint")}
-                    </Form.Hint>
-                  </div>
-                </div>
-              </Form.Item>
-            )
-          }}
-        />
-      </div>
+      <SwitchBox
+        control={form.control}
+        name="discountable"
+        label={t("products.fields.discountable.label")}
+        description={t("products.fields.discountable.hint")}
+        optional
+      />
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <Form.Field
           control={form.control}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-organize-form/product-create-organize-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-organize-form/product-create-organize-form.tsx
index db49292f40..7f9d31c8f7 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-organize-form/product-create-organize-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-organize-form/product-create-organize-form.tsx
@@ -1,12 +1,8 @@
-import { Heading } from "@medusajs/ui"
 import { useState } from "react"
 import { UseFormReturn } from "react-hook-form"
-import { useTranslation } from "react-i18next"
 
-import { Divider } from "../../../../../components/common/divider"
 import { SplitView } from "../../../../../components/layout/split-view"
 import { ProductCreateSchemaType } from "../../types"
-import { ProductCreateAttributeSection } from "./components/product-create-organize-attribute-section"
 import { ProductCreateDetailsContext } from "./components/product-create-organize-context"
 import { ProductCreateOrganizationSection } from "./components/product-create-organize-section"
 import { ProductCreateSalesChannelDrawer } from "./components/product-create-sales-channel-drawer"
@@ -28,9 +24,9 @@ export const ProductCreateOrganizeForm = ({ form }: ProductAttributesProps) => {
             <div className="flex w-full max-w-[720px] flex-col gap-y-8">
               <ProductCreateOrganizationSection form={form} />
 
-              {/*TODO: WHERE DO WE SET PRODUCT ATTRIBUTES? -> the plan is to moved that to Inventory UI */}
-              {/*<Divider />*/}
-              {/*<ProductCreateAttributeSection form={form} />*/}
+              {/* TODO: WHERE DO WE SET PRODUCT ATTRIBUTES? -> the plan is to moved that to Inventory UI */}
+              {/* <Divider />*/}
+              {/* <ProductCreateAttributeSection form={form} />*/}
             </div>
           </div>
         </SplitView.Content>
diff --git a/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
index 51ff8cebd5..b80fc8ce91 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
@@ -1,12 +1,13 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Product } from "@medusajs/medusa"
 import { ProductStatus } from "@medusajs/types"
-import { Button, Input, Select, Switch, Text, Textarea } from "@medusajs/ui"
+import { Button, Input, Select, Text, Textarea } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
-import { Trans, useTranslation } from "react-i18next"
+import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
 import { Form } from "../../../../../components/common/form"
+import { SwitchBox } from "../../../../../components/common/switch-box"
 import {
   RouteDrawer,
   useRouteModal,
@@ -74,8 +75,8 @@ export const EditProductForm = ({ product }: EditProductFormProps) => {
         onSubmit={handleSubmit}
         className="flex flex-1 flex-col overflow-hidden"
       >
-        <RouteDrawer.Body className="flex max-w-full flex-1 flex-col gap-y-8 overflow-y-auto">
-          <div className="flex h-full flex-col gap-y-8">
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-8 overflow-y-auto">
+          <div className="flex flex-col gap-y-8">
             <div className="flex flex-col gap-y-4">
               <Form.Field
                 control={form.control}
@@ -142,19 +143,6 @@ export const EditProductForm = ({ product }: EditProductFormProps) => {
                   )
                 }}
               />
-              <Text
-                size="small"
-                leading="compact"
-                className="text-ui-fg-subtle"
-              >
-                <Trans
-                  i18nKey="products.fields.title.hint"
-                  t={t}
-                  components={[<br key="break" />]}
-                />
-              </Text>
-            </div>
-            <div className="flex flex-col gap-y-4">
               <Form.Field
                 control={form.control}
                 name="handle"
@@ -210,43 +198,16 @@ export const EditProductForm = ({ product }: EditProductFormProps) => {
                         <Textarea {...field} />
                       </Form.Control>
                       <Form.ErrorMessage />
-                      <Form.Hint>
-                        <Trans
-                          i18nKey="products.fields.description.hint"
-                          t={t}
-                          components={[<br key="break" />]}
-                        />
-                      </Form.Hint>
                     </Form.Item>
                   )
                 }}
               />
             </div>
-            <Form.Field
+            <SwitchBox
               control={form.control}
               name="discountable"
-              render={({ field: { value, onChange, ...field } }) => {
-                return (
-                  <Form.Item>
-                    <div className="flex items-center justify-between">
-                      <Form.Label optional>
-                        {t("fields.discountable")}
-                      </Form.Label>
-                      <Form.Control>
-                        <Switch
-                          {...field}
-                          checked={value}
-                          onCheckedChange={onChange}
-                        />
-                      </Form.Control>
-                    </div>
-                    <Form.Hint className="!mt-1">
-                      {t("products.discountableHint")}
-                    </Form.Hint>
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )
-              }}
+              label={t("fields.discountable")}
+              description={t("products.discountableHint")}
             />
           </div>
         </RouteDrawer.Body>