diff --git a/components/dashboard/src/admin/BlockedRepositories.tsx b/components/dashboard/src/admin/BlockedRepositories.tsx
index 6ac8f0824350de..bb2773e0bce3df 100644
--- a/components/dashboard/src/admin/BlockedRepositories.tsx
+++ b/components/dashboard/src/admin/BlockedRepositories.tsx
@@ -11,7 +11,7 @@ import { AdminPageHeader } from "./AdminPageHeader";
 import { BlockedRepository } from "@gitpod/gitpod-protocol/lib/blocked-repositories-protocol";
 import ConfirmationModal from "../components/ConfirmationModal";
 import Modal from "../components/Modal";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField } from "../components/forms/CheckboxInputField";
 import { ItemFieldContextMenu } from "../components/ItemsList";
 import { ContextMenuEntry } from "../components/ContextMenu";
 import Alert from "../components/Alert";
@@ -299,14 +299,15 @@ function Details(props: {
                     }}
                 />
             </div>
-            <CheckBox
-                title={"Block Users"}
-                desc={"Block any user that tries to open a workspace for a repository URL that matches this RegEx."}
+
+            <CheckboxInputField
+                label="Block Users"
+                hint="Block any user that tries to open a workspace for a repository URL that matches this RegEx."
                 checked={props.br.blockUser}
                 disabled={!props.update}
-                onChange={(v) => {
+                onChange={(checked) => {
                     if (!!props.update) {
-                        props.update({ blockUser: v.target.checked });
+                        props.update({ blockUser: checked });
                     }
                 }}
             />
diff --git a/components/dashboard/src/admin/Settings.tsx b/components/dashboard/src/admin/Settings.tsx
index b1d83514682706..94a74883008e5b 100644
--- a/components/dashboard/src/admin/Settings.tsx
+++ b/components/dashboard/src/admin/Settings.tsx
@@ -7,7 +7,7 @@
 import React, { useContext } from "react";
 import { TelemetryData, InstallationAdminSettings } from "@gitpod/gitpod-protocol";
 import { AdminContext } from "../admin-context";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField } from "../components/forms/CheckboxInputField";
 import { getGitpodService } from "../service/service";
 import { useEffect, useState } from "react";
 import InfoBox from "../components/InfoBox";
@@ -65,34 +65,27 @@ export default function Settings() {
                         Read our Privacy Policy
                     </a>
                 </p>
-                <CheckBox
-                    title="Enable usage telemetry"
-                    desc={
-                        <span>
-                            Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
-                            below.
-                        </span>
-                    }
+                <CheckboxInputField
+                    label="Enable usage telemetry"
+                    hint="Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
+                        below."
                     checked={adminSettings?.sendTelemetry ?? false}
-                    onChange={(evt) =>
+                    onChange={(checked) =>
                         actuallySetTelemetryPrefs({
                             ...adminSettings,
-                            sendTelemetry: evt.target.checked,
+                            sendTelemetry: checked,
                         } as InstallationAdminSettings)
                     }
                 />
-                <CheckBox
-                    title="Include customer ID in telemetry"
-                    desc={
-                        <span>
-                            Include an optional customer ID in usage telemetry to provide individualized support.
-                        </span>
-                    }
+
+                <CheckboxInputField
+                    label="Include customer ID in telemetry"
+                    hint="Include an optional customer ID in usage telemetry to provide individualized support."
                     checked={adminSettings?.sendCustomerID ?? false}
-                    onChange={(evt) =>
+                    onChange={(checked) =>
                         actuallySetTelemetryPrefs({
                             ...adminSettings,
-                            sendCustomerID: evt.target.checked,
+                            sendCustomerID: checked,
                         } as InstallationAdminSettings)
                     }
                 />
diff --git a/components/dashboard/src/admin/UserDetail.tsx b/components/dashboard/src/admin/UserDetail.tsx
index 351a17305f2081..ba5ed9130d6974 100644
--- a/components/dashboard/src/admin/UserDetail.tsx
+++ b/components/dashboard/src/admin/UserDetail.tsx
@@ -16,7 +16,6 @@ import { AccountStatement, Subscription } from "@gitpod/gitpod-protocol/lib/acco
 import { Plans } from "@gitpod/gitpod-protocol/lib/plans";
 import dayjs from "dayjs";
 import { useEffect, useRef, useState } from "react";
-import CheckBox from "../components/CheckBox";
 import Modal from "../components/Modal";
 import { getGitpodService } from "../service/service";
 import { WorkspaceSearch } from "./WorkspacesSearch";
@@ -26,6 +25,7 @@ import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import CaretDown from "../icons/CaretDown.svg";
 import ContextMenu from "../components/ContextMenu";
+import { CheckboxInputField, CheckboxListField } from "../components/forms/CheckboxInputField";
 import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-protocol/lib/usage";
 import { Heading2, Subheading } from "../components/typography/headings";
 
@@ -424,12 +424,20 @@ export default function UserDetail(p: { user: User }) {
                     </button>,
                 ]}
             >
-                <p>Edit feature access by adding or removing feature flags for this user.</p>
-                <div className="flex flex-col">
+                <CheckboxListField
+                    label="Edit feature access by adding or removing feature flags for this user."
+                    className="mt-0"
+                >
                     {flags.map((e) => (
-                        <CheckBox key={e.title} title={e.title} desc="" checked={!!e.checked} onChange={e.onClick} />
+                        <CheckboxInputField
+                            key={e.title}
+                            label={e.title}
+                            checked={!!e.checked}
+                            topMargin={false}
+                            onChange={e.onClick}
+                        />
                     ))}
-                </div>
+                </CheckboxListField>
             </Modal>
             <Modal
                 visible={editRoles}
@@ -441,12 +449,20 @@ export default function UserDetail(p: { user: User }) {
                     </button>,
                 ]}
             >
-                <p>Edit user permissions by adding or removing roles for this user.</p>
-                <div className="flex flex-col">
+                <CheckboxListField
+                    label="Edit user permissions by adding or removing roles for this user."
+                    className="mt-0"
+                >
                     {rop.map((e) => (
-                        <CheckBox key={e.title} title={e.title} desc="" checked={!!e.checked} onChange={e.onClick} />
+                        <CheckboxInputField
+                            key={e.title}
+                            label={e.title}
+                            checked={!!e.checked}
+                            topMargin={false}
+                            onChange={e.onClick}
+                        />
                     ))}
-                </div>
+                </CheckboxListField>
             </Modal>
         </>
     );
diff --git a/components/dashboard/src/components/forms/CheckboxInputField.tsx b/components/dashboard/src/components/forms/CheckboxInputField.tsx
index 5e42de90fb4240..3da8d73c08f1ef 100644
--- a/components/dashboard/src/components/forms/CheckboxInputField.tsx
+++ b/components/dashboard/src/components/forms/CheckboxInputField.tsx
@@ -10,12 +10,14 @@ import { useId } from "../../hooks/useId";
 import { InputField } from "./InputField";
 import { InputFieldHint } from "./InputFieldHint";
 
-type CheckboxInputFieldProps = {
+type CheckboxListFieldProps = {
     label: string;
     error?: ReactNode;
     className?: string;
 };
-export const CheckboxInputField: FC<CheckboxInputFieldProps> = ({ label, error, className, children }) => {
+
+// CheckboxListField is a wrapper for a list of related CheckboxInputField components.
+export const CheckboxListField: FC<CheckboxListFieldProps> = ({ label, error, className, children }) => {
     return (
         <InputField label={label} className={className} error={error}>
             <div className="space-y-2 ml-2">{children}</div>
@@ -23,22 +25,26 @@ export const CheckboxInputField: FC<CheckboxInputFieldProps> = ({ label, error,
     );
 };
 
-type CheckboxInputProps = {
+type CheckboxInputFieldProps = {
     id?: string;
-    value: string;
+    value?: string;
     checked: boolean;
     disabled?: boolean;
-    label: string;
-    hint?: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    topMargin?: boolean;
     onChange: (checked: boolean) => void;
 };
-export const CheckboxInput: FC<CheckboxInputProps> = ({
+export const CheckboxInputField: FC<CheckboxInputFieldProps> = ({
     id,
     value,
     label,
     hint,
+    error,
     checked,
     disabled = false,
+    topMargin = true,
     onChange,
 }) => {
     const maybeId = useId();
@@ -52,33 +58,36 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
     );
 
     return (
-        <label className="flex space-x-2 justify-start items-start" htmlFor={elementId}>
-            <input
-                type="checkbox"
-                className={classNames(
-                    "h-4 w-4 mt-0.5 rounded cursor-pointer border-2 dark:filter-invert",
-                    "focus:ring-2 focus:border-gray-900 ring-blue-400 dark:focus:border-gray-800",
-                    "border-gray-600 dark:border-gray-900 bg-transparent",
-                    { "bg-gray-600 dark:bg-gray-900": checked },
-                )}
-                value={value}
-                id={elementId}
-                checked={checked}
-                disabled={disabled}
-                onChange={handleChange}
-            />
-            <div className="flex flex-col">
-                <span
+        // Intentionally not passing label and hint to InputField because we want to render them differently for checkboxes.
+        <InputField error={error} topMargin={topMargin}>
+            <label className="flex space-x-2 justify-start items-start max-w-lg" htmlFor={elementId}>
+                <input
+                    type="checkbox"
                     className={classNames(
-                        "text-sm font-semibold cursor-pointer",
-                        disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-600 dark:text-gray-100",
+                        "h-4 w-4 mt-0.5 rounded cursor-pointer border-2 dark:filter-invert",
+                        "focus:ring-2 ring-blue-400",
+                        "border-gray-600 dark:border-gray-900 bg-transparent",
+                        { "bg-gray-600 dark:bg-gray-900": checked },
                     )}
-                >
-                    {label}
-                </span>
+                    id={elementId}
+                    checked={checked}
+                    disabled={disabled}
+                    value={value}
+                    onChange={handleChange}
+                />
+                <div className="flex flex-col">
+                    <span
+                        className={classNames(
+                            "text-sm font-semibold cursor-pointer",
+                            disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-600 dark:text-gray-100",
+                        )}
+                    >
+                        {label}
+                    </span>
 
-                {hint && <InputFieldHint disabled={disabled}>{hint}</InputFieldHint>}
-            </div>
-        </label>
+                    {hint && <InputFieldHint disabled={disabled}>{hint}</InputFieldHint>}
+                </div>
+            </label>
+        </InputField>
     );
 };
diff --git a/components/dashboard/src/components/forms/InputField.tsx b/components/dashboard/src/components/forms/InputField.tsx
index 056b771750628a..1940eb22d01235 100644
--- a/components/dashboard/src/components/forms/InputField.tsx
+++ b/components/dashboard/src/components/forms/InputField.tsx
@@ -13,26 +13,29 @@ type Props = {
     id?: string;
     hint?: ReactNode;
     error?: ReactNode;
+    topMargin?: boolean;
     className?: string;
 };
 
-export const InputField: FunctionComponent<Props> = memo(({ label, id, hint, error, className, children }) => {
-    return (
-        <div className={classNames("mt-4 flex flex-col space-y-2", className)}>
-            {label && (
-                <label
-                    className={classNames(
-                        "text-md font-semibold dark:text-gray-400",
-                        error ? "text-red-600" : "text-gray-600",
-                    )}
-                    htmlFor={id}
-                >
-                    {label}
-                </label>
-            )}
-            {children}
-            {error && <span className="text-red-500 text-sm">{error}</span>}
-            {hint && <InputFieldHint>{hint}</InputFieldHint>}
-        </div>
-    );
-});
+export const InputField: FunctionComponent<Props> = memo(
+    ({ label, id, hint, error, topMargin = true, className, children }) => {
+        return (
+            <div className={classNames("flex flex-col space-y-2", { "mt-4": topMargin }, className)}>
+                {label && (
+                    <label
+                        className={classNames(
+                            "text-md font-semibold dark:text-gray-400",
+                            error ? "text-red-600" : "text-gray-600",
+                        )}
+                        htmlFor={id}
+                    >
+                        {label}
+                    </label>
+                )}
+                {children}
+                {error && <span className="text-red-500 text-sm">{error}</span>}
+                {hint && <InputFieldHint>{hint}</InputFieldHint>}
+            </div>
+        );
+    },
+);
diff --git a/components/dashboard/src/onboarding/StepOrgInfo.tsx b/components/dashboard/src/onboarding/StepOrgInfo.tsx
index 255037b645116c..87ffeee94b3b74 100644
--- a/components/dashboard/src/onboarding/StepOrgInfo.tsx
+++ b/components/dashboard/src/onboarding/StepOrgInfo.tsx
@@ -6,7 +6,7 @@
 
 import { User } from "@gitpod/gitpod-protocol";
 import { FC, useCallback, useMemo, useState } from "react";
-import { CheckboxInput, CheckboxInputField } from "../components/forms/CheckboxInputField";
+import { CheckboxInputField, CheckboxListField } from "../components/forms/CheckboxInputField";
 import { SelectInputField } from "../components/forms/SelectInputField";
 import { TextInputField } from "../components/forms/TextInputField";
 import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutation";
@@ -189,13 +189,14 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                 onBlur={websiteError.onBlur}
             />
 
-            <CheckboxInputField label="I'm exploring Gitpod...">
+            <CheckboxListField label="I'm exploring Gitpod...">
                 {explorationReasonsOptions.map((o) => (
-                    <CheckboxInput
+                    <CheckboxInputField
                         key={o.value}
                         value={o.value}
                         label={o.label}
                         checked={explorationReasons.includes(o.value)}
+                        topMargin={false}
                         onChange={(checked) => {
                             if (checked) {
                                 addExplorationReason(o.value);
@@ -205,7 +206,7 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                         }}
                     />
                 ))}
-            </CheckboxInputField>
+            </CheckboxListField>
 
             {explorationReasons.includes(EXPLORE_REASON_WORK) && (
                 <SelectInputField
@@ -223,13 +224,14 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                 </SelectInputField>
             )}
 
-            <CheckboxInputField label="I'm signing up for Gitpod for...">
+            <CheckboxListField label="I'm signing up for Gitpod for...">
                 {signupGoalsOptions.map((o) => (
-                    <CheckboxInput
+                    <CheckboxInputField
                         key={o.value}
                         value={o.value}
                         label={o.label}
                         checked={signupGoals.includes(o.value)}
+                        topMargin={false}
                         onChange={(checked) => {
                             if (checked) {
                                 addSignupGoal(o.value);
@@ -239,7 +241,7 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                         }}
                     />
                 ))}
-            </CheckboxInputField>
+            </CheckboxListField>
 
             {signupGoals.includes(SIGNUP_GOALS_OTHER) && (
                 <TextInputField
diff --git a/components/dashboard/src/projects/ProjectSettings.tsx b/components/dashboard/src/projects/ProjectSettings.tsx
index f461faea97530d..3c9394173b4d3b 100644
--- a/components/dashboard/src/projects/ProjectSettings.tsx
+++ b/components/dashboard/src/projects/ProjectSettings.tsx
@@ -10,7 +10,7 @@ import { useCallback, useContext, useEffect, useState } from "react";
 import { useHistory } from "react-router";
 import { Link } from "react-router-dom";
 import Alert from "../components/Alert";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField } from "../components/forms/CheckboxInputField";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import PillLabel from "../components/PillLabel";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
@@ -124,9 +124,9 @@ export default function ProjectSettingsView() {
                     </div>
                 </Alert>
             )}
-            <CheckBox
-                title={<span>Enable Incremental Prebuilds </span>}
-                desc={
+            <CheckboxInputField
+                label="Enable Incremental Prebuilds"
+                hint={
                     <span>
                         When possible, use an earlier successful prebuild as a base to create new prebuilds. This can
                         make your prebuilds significantly faster, especially if they normally take longer than 10
@@ -137,16 +137,16 @@ export default function ProjectSettingsView() {
                     </span>
                 }
                 checked={project.settings?.useIncrementalPrebuilds ?? false}
-                onChange={({ target }) => updateProjectSettings({ useIncrementalPrebuilds: target.checked })}
+                onChange={(checked) => updateProjectSettings({ useIncrementalPrebuilds: checked })}
             />
-            <CheckBox
-                title={<span>Cancel Prebuilds on Outdated Commits </span>}
-                desc={<span>Cancel pending or running prebuilds on the same branch when new commits are pushed.</span>}
+            <CheckboxInputField
+                label="Cancel Prebuilds on Outdated Commits"
+                hint="Cancel pending or running prebuilds on the same branch when new commits are pushed."
                 checked={!project.settings?.keepOutdatedPrebuildsRunning}
-                onChange={({ target }) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !target.checked })}
+                onChange={(checked) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !checked })}
             />
-            <CheckBox
-                title={
+            <CheckboxInputField
+                label={
                     <span>
                         Use Last Successful Prebuild{" "}
                         <PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
@@ -154,18 +154,14 @@ export default function ProjectSettingsView() {
                         </PillLabel>
                     </span>
                 }
-                desc={
-                    <span>
-                        Skip waiting for prebuilds in progress and use the last successful prebuild from previous
-                        commits on the same branch.
-                    </span>
-                }
+                hint="Skip waiting for prebuilds in progress and use the last successful prebuild from previous
+                    commits on the same branch."
                 checked={!!project.settings?.allowUsingPreviousPrebuilds}
-                onChange={({ target }) =>
+                onChange={(checked) =>
                     updateProjectSettings({
-                        allowUsingPreviousPrebuilds: target.checked,
+                        allowUsingPreviousPrebuilds: checked,
                         // we are disabling prebuild cancellation when incremental workspaces are enabled
-                        keepOutdatedPrebuildsRunning: target.checked || project?.settings?.keepOutdatedPrebuildsRunning,
+                        keepOutdatedPrebuildsRunning: checked || project?.settings?.keepOutdatedPrebuildsRunning,
                     })
                 }
             />
diff --git a/components/dashboard/src/projects/ProjectVariables.tsx b/components/dashboard/src/projects/ProjectVariables.tsx
index f434ad7a285363..54f8073b9f4279 100644
--- a/components/dashboard/src/projects/ProjectVariables.tsx
+++ b/components/dashboard/src/projects/ProjectVariables.tsx
@@ -8,7 +8,7 @@ import { Project, ProjectEnvVar } from "@gitpod/gitpod-protocol";
 import { useEffect, useState } from "react";
 import { Redirect } from "react-router";
 import Alert from "../components/Alert";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField } from "../components/forms/CheckboxInputField";
 import InfoBox from "../components/InfoBox";
 import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
 import Modal, { ModalBody, ModalFooter, ModalHeader } from "../components/Modal";
@@ -171,14 +171,12 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
                         onChange={(e) => setValue(e.target.value)}
                     />
                 </div>
-                <div className="mt-4">
-                    <CheckBox
-                        title="Hide Variable in Workspaces"
-                        desc="Unset this environment variable so that it's not accessible from the terminal in workspaces."
-                        checked={censored}
-                        onChange={() => setCensored(!censored)}
-                    />
-                </div>
+                <CheckboxInputField
+                    label="Hide Variable in Workspaces"
+                    hint="Unset this environment variable so that it's not accessible from the terminal in workspaces."
+                    checked={censored}
+                    onChange={() => setCensored(!censored)}
+                />
                 {!censored && (
                     <div className="mt-4">
                         <InfoBox>
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
index 413f3dc9f3faa5..559c83e15eaee8 100644
--- a/components/dashboard/src/teams/TeamSettings.tsx
+++ b/components/dashboard/src/teams/TeamSettings.tsx
@@ -8,7 +8,7 @@ import { OrganizationSettings } from "@gitpod/gitpod-protocol";
 import React, { useCallback, useState } from "react";
 import Alert from "../components/Alert";
 import { Button } from "../components/Button";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField } from "../components/forms/CheckboxInputField";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { TextInputField } from "../components/forms/TextInputField";
 import { Heading2, Subheading } from "../components/typography/headings";
@@ -146,17 +146,11 @@ export default function TeamSettingsPage() {
                     </Button>
 
                     <Heading2 className="pt-12">Collaboration & Sharing</Heading2>
-                    <CheckBox
-                        title={<span>Workspace Sharing</span>}
-                        desc={
-                            <span>
-                                Allow workspaces creаted within an Organization to share the workspace with any authenticated user.
-                            </span>
-                        }
+                    <CheckboxInputField
+                        label="Workspace Sharing"
+                        hint="Allow workspaces created within an Organization to share the workspace with any authenticated user."
                         checked={!settings?.workspaceSharingDisabled}
-                        onChange={({ target }) =>
-                            handleUpdateTeamSettings({ workspaceSharingDisabled: !target.checked })
-                        }
+                        onChange={(checked) => handleUpdateTeamSettings({ workspaceSharingDisabled: !checked })}
                         disabled={isLoading}
                     />
                 </form>
diff --git a/components/dashboard/src/user-settings/Integrations.tsx b/components/dashboard/src/user-settings/Integrations.tsx
index 8d557d9f6dfb65..5152f46ba1d6d2 100644
--- a/components/dashboard/src/user-settings/Integrations.tsx
+++ b/components/dashboard/src/user-settings/Integrations.tsx
@@ -9,7 +9,7 @@ import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import { useQuery } from "@tanstack/react-query";
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import Alert from "../components/Alert";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField, CheckboxListField } from "../components/forms/CheckboxInputField";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { ContextMenuEntry } from "../components/ContextMenu";
 import { Delayed } from "../components/Delayed";
@@ -213,13 +213,13 @@ function GitProviders() {
         }
         setEditModal(undefined);
     };
-    const onChangeScopeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const onChangeScopeHandler = (checked: boolean, scope: string) => {
         if (!editModal) {
             return;
         }
-        const scope = e.target.name;
+
         const nextScopes = new Set(editModal.nextScopes);
-        if (e.target.checked) {
+        if (checked) {
             nextScopes.add(scope);
         } else {
             nextScopes.delete(scope);
@@ -301,20 +301,20 @@ function GitProviders() {
                 <Modal visible={true} onClose={() => setEditModal(undefined)}>
                     <ModalHeader>Edit Permissions</ModalHeader>
                     <ModalBody>
-                        <div className="text-gray-500">Configure provider permissions.</div>
-                        {(editModal.provider.scopes || []).map((scope) => (
-                            <div key={`scope-${scope}`}>
-                                <CheckBox
-                                    name={scope}
-                                    desc={getDescriptionForScope(scope)}
-                                    title={scope}
-                                    key={`scope-checkbox-${scope}`}
+                        <CheckboxListField label="Configure provider permissions.">
+                            {(editModal.provider.scopes || []).map((scope) => (
+                                <CheckboxInputField
+                                    key={scope}
+                                    value={scope}
+                                    label={scope}
+                                    hint={getDescriptionForScope(scope)}
                                     checked={editModal.nextScopes.has(scope)}
                                     disabled={editModal.provider.requirements?.default.includes(scope)}
-                                    onChange={onChangeScopeHandler}
-                                ></CheckBox>
-                            </div>
-                        ))}
+                                    topMargin={false}
+                                    onChange={(checked) => onChangeScopeHandler(checked, scope)}
+                                />
+                            ))}
+                        </CheckboxListField>
                     </ModalBody>
                     <ModalFooter>
                         <button
diff --git a/components/dashboard/src/user-settings/Notifications.tsx b/components/dashboard/src/user-settings/Notifications.tsx
index 269810b56eb436..62caa31bf12f86 100644
--- a/components/dashboard/src/user-settings/Notifications.tsx
+++ b/components/dashboard/src/user-settings/Notifications.tsx
@@ -7,7 +7,7 @@
 import { useContext, useState } from "react";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField } from "../components/forms/CheckboxInputField";
 import { identifyUser } from "../Analytics";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 import { Heading2 } from "../components/typography/headings";
@@ -83,27 +83,28 @@ export default function Notifications() {
         <div>
             <PageWithSettingsSubMenu>
                 <Heading2>Email Notification Preferences</Heading2>
-                <CheckBox
-                    title="Account Notifications [required]"
-                    desc="Receive essential emails about changes to your account"
+                <CheckboxInputField
+                    label="Account Notifications [required]"
+                    hint="Receive essential emails about changes to your account"
                     checked={true}
                     disabled={true}
+                    onChange={(checked) => {}}
                 />
-                <CheckBox
-                    title="Onboarding guide"
-                    desc="In the first weeks after you sign up, we'll guide you through the product, so you can get the most out of it"
+                <CheckboxInputField
+                    label="Onboarding guide"
+                    hint="In the first weeks after you sign up, we'll guide you through the product, so you can get the most out of it"
                     checked={isOnboardingMail}
                     onChange={toggleOnboardingMail}
                 />
-                <CheckBox
-                    title="Changelog"
-                    desc="Be the first to learn about new features and overall product improvements"
+                <CheckboxInputField
+                    label="Changelog"
+                    hint="Be the first to learn about new features and overall product improvements"
                     checked={isChangelogMail}
                     onChange={toggleChangelogMail}
                 />
-                <CheckBox
-                    title="Developer Experience & Product Tips"
-                    desc="Bring back joy and speed to your workflows"
+                <CheckboxInputField
+                    label="Developer Experience & Product Tips"
+                    hint="Bring back joy and speed to your workflows"
                     checked={isDevXMail}
                     onChange={toggleDevXMail}
                 />
diff --git a/components/dashboard/src/user-settings/PersonalAccessTokensCreateView.tsx b/components/dashboard/src/user-settings/PersonalAccessTokensCreateView.tsx
index c67e53badf4d80..c56ed091af8ee9 100644
--- a/components/dashboard/src/user-settings/PersonalAccessTokensCreateView.tsx
+++ b/components/dashboard/src/user-settings/PersonalAccessTokensCreateView.tsx
@@ -10,7 +10,7 @@ import { useContext, useEffect, useState } from "react";
 import { Redirect, useHistory, useParams } from "react-router";
 import { Link } from "react-router-dom";
 import Alert from "../components/Alert";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField, CheckboxListField } from "../components/forms/CheckboxInputField";
 import DateSelector from "../components/DateSelector";
 import { SpinnerOverlayLoader } from "../components/Loader";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
@@ -236,16 +236,16 @@ function PersonalAccessTokenCreateView() {
                                 />
                             )}
                             <div>
-                                <h4>Permission</h4>
-                                <div className="space-y-2">
+                                <CheckboxListField label="Permission">
                                     {AllPermissions.map((item) => (
-                                        <CheckBox
-                                            className=""
-                                            title={item.name}
-                                            desc={item.description}
+                                        <CheckboxInputField
+                                            value={item.name}
+                                            label={item.name}
+                                            hint={item.description}
                                             checked={item.scopes.every((s) => token.scopes.has(s))}
-                                            onChange={(e) => {
-                                                if (e.target.checked) {
+                                            topMargin={false}
+                                            onChange={(checked) => {
+                                                if (checked) {
                                                     update({}, item.scopes);
                                                 } else {
                                                     update({}, undefined, item.scopes);
@@ -253,7 +253,7 @@ function PersonalAccessTokenCreateView() {
                                             }}
                                         />
                                     ))}
-                                </div>
+                                </CheckboxListField>
                             </div>
                         </div>
                     </div>
diff --git a/components/dashboard/src/user-settings/SelectIDE.tsx b/components/dashboard/src/user-settings/SelectIDE.tsx
index 1e554cbb5c5c61..1652c2f8c6ab2b 100644
--- a/components/dashboard/src/user-settings/SelectIDE.tsx
+++ b/components/dashboard/src/user-settings/SelectIDE.tsx
@@ -6,7 +6,7 @@
 
 import { useCallback, useContext, useEffect, useState } from "react";
 import { UserContext } from "../user-context";
-import CheckBox from "../components/CheckBox";
+import { CheckboxInputField } from "../components/forms/CheckboxInputField";
 import { User } from "@gitpod/gitpod-protocol";
 import SelectIDEComponent from "../components/SelectIDEComponent";
 import PillLabel from "../components/PillLabel";
@@ -103,9 +103,9 @@ export default function SelectIDE(props: SelectIDEProps) {
                 </p>
             )}
 
-            <CheckBox
-                title="Latest Release (Unstable)"
-                desc={
+            <CheckboxInputField
+                label="Latest Release (Unstable)"
+                hint={
                     <span>
                         Use the latest version for each editor.{" "}
                         <a
@@ -129,7 +129,7 @@ export default function SelectIDE(props: SelectIDEProps) {
                     </span>
                 }
                 checked={useLatestVersion}
-                onChange={(e) => actuallySetUseLatestVersion(e.target.checked)}
+                onChange={(checked) => actuallySetUseLatestVersion(checked)}
             />
         </>
     );