diff --git a/components/dashboard/src/admin/BlockedRepositories.tsx b/components/dashboard/src/admin/BlockedRepositories.tsx
index 6ac8f0824350de..cb922296f24cec 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 { CheckboxInput, CheckboxInputContainer } from "../components/forms/CheckboxInputField";
 import { ItemFieldContextMenu } from "../components/ItemsList";
 import { ContextMenuEntry } from "../components/ContextMenu";
 import Alert from "../components/Alert";
@@ -299,17 +299,20 @@ 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."}
-                checked={props.br.blockUser}
-                disabled={!props.update}
-                onChange={(v) => {
-                    if (!!props.update) {
-                        props.update({ blockUser: v.target.checked });
-                    }
-                }}
-            />
+
+            <CheckboxInputContainer>
+                <CheckboxInput
+                    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={(checked) => {
+                        if (!!props.update) {
+                            props.update({ blockUser: checked });
+                        }
+                    }}
+                />
+            </CheckboxInputContainer>
         </div>
     );
 }
diff --git a/components/dashboard/src/admin/Settings.tsx b/components/dashboard/src/admin/Settings.tsx
index 244ca350ffcddb..d40d4a227824fa 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 { CheckboxInput, CheckboxInputContainer } from "../components/forms/CheckboxInputField";
 import { getGitpodService } from "../service/service";
 import { useEffect, useState } from "react";
 import InfoBox from "../components/InfoBox";
@@ -64,37 +64,34 @@ 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>
-                    }
-                    checked={adminSettings?.sendTelemetry ?? false}
-                    onChange={(evt) =>
-                        actuallySetTelemetryPrefs({
-                            ...adminSettings,
-                            sendTelemetry: evt.target.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>
-                    }
-                    checked={adminSettings?.sendCustomerID ?? false}
-                    onChange={(evt) =>
-                        actuallySetTelemetryPrefs({
-                            ...adminSettings,
-                            sendCustomerID: evt.target.checked,
-                        } as InstallationAdminSettings)
-                    }
-                />
+                <CheckboxInputContainer>
+                    <CheckboxInput
+                        value="Enable usage telemetry"
+                        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={(checked) =>
+                            actuallySetTelemetryPrefs({
+                                ...adminSettings,
+                                sendTelemetry: checked,
+                            } as InstallationAdminSettings)
+                        }
+                    />
+
+                    <CheckboxInput
+                        value="Include customer ID"
+                        label="Include customer ID in telemetry"
+                        hint="Include an optional customer ID in usage telemetry to provide individualized support."
+                        checked={adminSettings?.sendCustomerID ?? false}
+                        onChange={(checked) =>
+                            actuallySetTelemetryPrefs({
+                                ...adminSettings,
+                                sendCustomerID: checked,
+                            } as InstallationAdminSettings)
+                        }
+                    />
+                </CheckboxInputContainer>
                 <Heading2 className="mt-4">Telemetry preview</Heading2>
                 <InfoBox>
                     <pre>{JSON.stringify(telemetryData, null, 2)}</pre>
diff --git a/components/dashboard/src/admin/UserDetail.tsx b/components/dashboard/src/admin/UserDetail.tsx
index 79cd8915e948ab..781fd53da9ec0d 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 { CheckboxInput, CheckboxInputField } 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">
+                <CheckboxInputField
+                    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} />
+                        <CheckboxInput
+                            value="edit feature flags"
+                            key={e.title}
+                            label={e.title}
+                            checked={!!e.checked}
+                            onChange={e.onClick}
+                        />
                     ))}
-                </div>
+                </CheckboxInputField>
             </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">
+                <CheckboxInputField
+                    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} />
+                        <CheckboxInput
+                            value="edit user permissions"
+                            key={e.title}
+                            label={e.title}
+                            checked={!!e.checked}
+                            onChange={e.onClick}
+                        />
                     ))}
-                </div>
+                </CheckboxInputField>
             </Modal>
         </>
     );
diff --git a/components/dashboard/src/components/forms/CheckboxInputField.tsx b/components/dashboard/src/components/forms/CheckboxInputField.tsx
index 5e42de90fb4240..952c1b53aaf21a 100644
--- a/components/dashboard/src/components/forms/CheckboxInputField.tsx
+++ b/components/dashboard/src/components/forms/CheckboxInputField.tsx
@@ -5,7 +5,7 @@
  */
 
 import classNames from "classnames";
-import { FC, ReactNode, useCallback } from "react";
+import React, { FC, ReactNode, useCallback } from "react";
 import { useId } from "../../hooks/useId";
 import { InputField } from "./InputField";
 import { InputFieldHint } from "./InputFieldHint";
@@ -25,11 +25,11 @@ export const CheckboxInputField: FC<CheckboxInputFieldProps> = ({ label, error,
 
 type CheckboxInputProps = {
     id?: string;
-    value: string;
+    value?: string;
     checked: boolean;
     disabled?: boolean;
-    label: string;
-    hint?: string;
+    label: React.ReactNode;
+    hint?: React.ReactNode;
     onChange: (checked: boolean) => void;
 };
 export const CheckboxInput: FC<CheckboxInputProps> = ({
@@ -51,21 +51,28 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
         [onChange],
     );
 
+    const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
+        id: elementId,
+        checked: checked,
+        disabled,
+        onChange: handleChange,
+    };
+
+    if (value) {
+        inputProps.value = value;
+    }
+
     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",
+                    "focus:ring-2 ring-blue-400",
                     "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}
+                {...inputProps}
             />
             <div className="flex flex-col">
                 <span
@@ -82,3 +89,11 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
         </label>
     );
 };
+
+type CheckboxInputContainerProps = {
+    className?: string;
+};
+
+export const CheckboxInputContainer: FC<CheckboxInputContainerProps> = ({ className, children }) => {
+    return <div className={classNames("mt-4 max-w-2xl flex flex-col space-y-4", className)}>{children}</div>;
+};
diff --git a/components/dashboard/src/projects/ProjectSettings.tsx b/components/dashboard/src/projects/ProjectSettings.tsx
index f461faea97530d..daaff9ed2f8244 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 { CheckboxInputContainer, CheckboxInput } from "../components/forms/CheckboxInputField";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import PillLabel from "../components/PillLabel";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
@@ -124,51 +124,52 @@ export default function ProjectSettingsView() {
                     </div>
                 </Alert>
             )}
-            <CheckBox
-                title={<span>Enable Incremental Prebuilds </span>}
-                desc={
-                    <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
-                        minutes.{" "}
-                        <a className="gp-link" href="https://www.gitpod.io/changelog/faster-incremental-prebuilds">
-                            Learn more
-                        </a>
-                    </span>
-                }
-                checked={project.settings?.useIncrementalPrebuilds ?? false}
-                onChange={({ target }) => updateProjectSettings({ useIncrementalPrebuilds: target.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>}
-                checked={!project.settings?.keepOutdatedPrebuildsRunning}
-                onChange={({ target }) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !target.checked })}
-            />
-            <CheckBox
-                title={
-                    <span>
-                        Use Last Successful Prebuild{" "}
-                        <PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
-                            Alpha
-                        </PillLabel>
-                    </span>
-                }
-                desc={
-                    <span>
-                        Skip waiting for prebuilds in progress and use the last successful prebuild from previous
-                        commits on the same branch.
-                    </span>
-                }
-                checked={!!project.settings?.allowUsingPreviousPrebuilds}
-                onChange={({ target }) =>
-                    updateProjectSettings({
-                        allowUsingPreviousPrebuilds: target.checked,
-                        // we are disabling prebuild cancellation when incremental workspaces are enabled
-                        keepOutdatedPrebuildsRunning: target.checked || project?.settings?.keepOutdatedPrebuildsRunning,
-                    })
-                }
-            />
+            <CheckboxInputContainer>
+                <CheckboxInput
+                    value="Enable Incremental Prebuilds"
+                    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 minutes.{" "}
+                            <a className="gp-link" href="https://www.gitpod.io/changelog/faster-incremental-prebuilds">
+                                Learn more
+                            </a>
+                        </span>
+                    }
+                    checked={project.settings?.useIncrementalPrebuilds ?? false}
+                    onChange={(checked) => updateProjectSettings({ useIncrementalPrebuilds: checked })}
+                />
+                <CheckboxInput
+                    value="Cancel Prebuilds"
+                    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={(checked) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !checked })}
+                />
+                <CheckboxInput
+                    value="Use last successful Prebuild"
+                    label={
+                        <span>
+                            Use Last Successful Prebuild{" "}
+                            <PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
+                                Alpha
+                            </PillLabel>
+                        </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={(checked) =>
+                        updateProjectSettings({
+                            allowUsingPreviousPrebuilds: checked,
+                            // we are disabling prebuild cancellation when incremental workspaces are enabled
+                            keepOutdatedPrebuildsRunning: checked || project?.settings?.keepOutdatedPrebuildsRunning,
+                        })
+                    }
+                />
+            </CheckboxInputContainer>
             <div className="flex mt-4 max-w-2xl">
                 <div className="flex flex-col ml-6">
                     <label
diff --git a/components/dashboard/src/projects/ProjectVariables.tsx b/components/dashboard/src/projects/ProjectVariables.tsx
index f434ad7a285363..09f7035371e68b 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 { CheckboxInputContainer, CheckboxInput } 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,15 @@ 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."
+                <CheckboxInputContainer>
+                    <CheckboxInput
+                        value="Hide Variable"
+                        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)}
                     />
-                </div>
+                </CheckboxInputContainer>
                 {!censored && (
                     <div className="mt-4">
                         <InfoBox>
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
index 413f3dc9f3faa5..bb7fd7a52f9ae1 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 { CheckboxInputContainer, CheckboxInput } from "../components/forms/CheckboxInputField";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { TextInputField } from "../components/forms/TextInputField";
 import { Heading2, Subheading } from "../components/typography/headings";
@@ -146,19 +146,16 @@ 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>
-                        }
-                        checked={!settings?.workspaceSharingDisabled}
-                        onChange={({ target }) =>
-                            handleUpdateTeamSettings({ workspaceSharingDisabled: !target.checked })
-                        }
-                        disabled={isLoading}
-                    />
+                    <CheckboxInputContainer>
+                        <CheckboxInput
+                            value="allow workspace sharing"
+                            label="Workspace Sharing"
+                            hint="Allow workspaces created within an Organization to share the workspace with any authenticated user."
+                            checked={!settings?.workspaceSharingDisabled}
+                            onChange={(checked) => handleUpdateTeamSettings({ workspaceSharingDisabled: !checked })}
+                            disabled={isLoading}
+                        />
+                    </CheckboxInputContainer>
                 </form>
 
                 <Heading2 className="pt-12">Delete Organization</Heading2>
diff --git a/components/dashboard/src/user-settings/Integrations.tsx b/components/dashboard/src/user-settings/Integrations.tsx
index 8d557d9f6dfb65..c6d06a0ebc9d27 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 { CheckboxInput, CheckboxInputContainer } 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);
@@ -303,17 +303,17 @@ function GitProviders() {
                     <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}
+                            <CheckboxInputContainer key={`scope-${scope}`} className="mt-0">
+                                <CheckboxInput
+                                    value={scope}
+                                    label={scope}
+                                    hint={getDescriptionForScope(scope)}
                                     key={`scope-checkbox-${scope}`}
                                     checked={editModal.nextScopes.has(scope)}
                                     disabled={editModal.provider.requirements?.default.includes(scope)}
-                                    onChange={onChangeScopeHandler}
-                                ></CheckBox>
-                            </div>
+                                    onChange={(checked) => onChangeScopeHandler(checked, scope)}
+                                />
+                            </CheckboxInputContainer>
                         ))}
                     </ModalBody>
                     <ModalFooter>
diff --git a/components/dashboard/src/user-settings/Notifications.tsx b/components/dashboard/src/user-settings/Notifications.tsx
index 269810b56eb436..6f56f66ecb96f5 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 { CheckboxInputContainer, CheckboxInput } from "../components/forms/CheckboxInputField";
 import { identifyUser } from "../Analytics";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 import { Heading2 } from "../components/typography/headings";
@@ -83,30 +83,37 @@ 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"
-                    checked={true}
-                    disabled={true}
-                />
-                <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"
-                    checked={isOnboardingMail}
-                    onChange={toggleOnboardingMail}
-                />
-                <CheckBox
-                    title="Changelog"
-                    desc="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"
-                    checked={isDevXMail}
-                    onChange={toggleDevXMail}
-                />
+                <CheckboxInputContainer>
+                    <CheckboxInput
+                        value="notify"
+                        label="Account Notifications [required]"
+                        hint="Receive essential emails about changes to your account"
+                        checked={true}
+                        disabled={true}
+                        onChange={(checked) => {}}
+                    />
+                    <CheckboxInput
+                        value="toggle onboarding mails"
+                        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}
+                    />
+                    <CheckboxInput
+                        value="toggle changelog mails"
+                        label="Changelog"
+                        hint="Be the first to learn about new features and overall product improvements"
+                        checked={isChangelogMail}
+                        onChange={toggleChangelogMail}
+                    />
+                    <CheckboxInput
+                        value="toggle developer experience mails"
+                        label="Developer Experience & Product Tips"
+                        hint="Bring back joy and speed to your workflows"
+                        checked={isDevXMail}
+                        onChange={toggleDevXMail}
+                    />
+                </CheckboxInputContainer>
             </PageWithSettingsSubMenu>
         </div>
     );
diff --git a/components/dashboard/src/user-settings/PersonalAccessTokensCreateView.tsx b/components/dashboard/src/user-settings/PersonalAccessTokensCreateView.tsx
index c67e53badf4d80..afb564faa21d7a 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 { CheckboxInput, CheckboxInputContainer } from "../components/forms/CheckboxInputField";
 import DateSelector from "../components/DateSelector";
 import { SpinnerOverlayLoader } from "../components/Loader";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
@@ -237,15 +237,15 @@ function PersonalAccessTokenCreateView() {
                             )}
                             <div>
                                 <h4>Permission</h4>
-                                <div className="space-y-2">
+                                <CheckboxInputContainer className="mt-0">
                                     {AllPermissions.map((item) => (
-                                        <CheckBox
-                                            className=""
-                                            title={item.name}
-                                            desc={item.description}
+                                        <CheckboxInput
+                                            value={item.name}
+                                            label={item.name}
+                                            hint={item.description}
                                             checked={item.scopes.every((s) => token.scopes.has(s))}
-                                            onChange={(e) => {
-                                                if (e.target.checked) {
+                                            onChange={(checked) => {
+                                                if (checked) {
                                                     update({}, item.scopes);
                                                 } else {
                                                     update({}, undefined, item.scopes);
@@ -253,7 +253,7 @@ function PersonalAccessTokenCreateView() {
                                             }}
                                         />
                                     ))}
-                                </div>
+                                </CheckboxInputContainer>
                             </div>
                         </div>
                     </div>
diff --git a/components/dashboard/src/user-settings/SelectIDE.tsx b/components/dashboard/src/user-settings/SelectIDE.tsx
index 1e554cbb5c5c61..aca080f96512d6 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 { CheckboxInput } from "../components/forms/CheckboxInputField";
 import { User } from "@gitpod/gitpod-protocol";
 import SelectIDEComponent from "../components/SelectIDEComponent";
 import PillLabel from "../components/PillLabel";
@@ -102,10 +102,11 @@ export default function SelectIDE(props: SelectIDEProps) {
                     </a>
                 </p>
             )}
-
-            <CheckBox
-                title="Latest Release (Unstable)"
-                desc={
+            
+            <CheckboxInput
+                value="Enable latest release"
+                label="Latest Release (Unstable)"
+                hint={
                     <span>
                         Use the latest version for each editor.{" "}
                         <a
@@ -129,7 +130,7 @@ export default function SelectIDE(props: SelectIDEProps) {
                     </span>
                 }
                 checked={useLatestVersion}
-                onChange={(e) => actuallySetUseLatestVersion(e.target.checked)}
+                onChange={(checked) => actuallySetUseLatestVersion(checked)}
             />
         </>
     );