diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
index 3e1f2f8958f3ac..b210213e2a3b36 100644
--- a/components/dashboard/src/settings/Preferences.tsx
+++ b/components/dashboard/src/settings/Preferences.tsx
@@ -6,7 +6,6 @@
 
 import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
 import { useContext, useEffect, useState } from "react";
-import CheckBox from "../components/CheckBox";
 import InfoBox from "../components/InfoBox";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import PillLabel from "../components/PillLabel";
@@ -19,6 +18,15 @@ import settingsMenu from "./settings-menu";
 
 type Theme = 'light' | 'dark' | 'system';
 
+const DesktopNoneId = "none"
+const DesktopNone: IDEOption = {
+    "image": "",
+    "logo": "",
+    "orderKey": "-1",
+    "title": "None",
+    "type": "desktop"
+}
+
 export default function Preferences() {
     const { user } = useContext(UserContext);
     const { setIsDark } = useContext(ThemeContext);
@@ -43,6 +51,10 @@ export default function Preferences() {
 
     const [defaultDesktopIde, setDefaultDesktopIde] = useState<string>(user?.additionalData?.ideSettings?.defaultDesktopIde || "");
     const actuallySetDefaultDesktopIde = async (value: string) => {
+        actuallySetUseDesktopIde(value !== DesktopNoneId)
+        if (value === DesktopNoneId) {
+            return
+        }
         const additionalData = user?.additionalData || {};
         const settings = additionalData.ideSettings || {};
         settings.defaultDesktopIde = value;
@@ -83,6 +95,7 @@ export default function Preferences() {
     useEffect(() => {
         (async () => {
             const ideopts = await getGitpodService().server.getIDEOptions();
+            ideopts.options[DesktopNoneId] = DesktopNone;
             setIdeOptions(ideopts);
             if (!(defaultIde)) {
                 setDefaultIde(ideopts.defaultIde);
@@ -118,50 +131,44 @@ export default function Preferences() {
     return <div>
         <PageWithSubMenu subMenu={settingsMenu} title='Preferences' subtitle='Configure user preferences.'>
             {ideOptions && browserIdeOptions && <>
-                <h3>Editor</h3>
-                <p className="text-base text-gray-500 dark:text-gray-400">Choose which IDE you want to use.</p>
-                <div className="my-4 space-x-4 flex">
-                    {
-                        browserIdeOptions.map(([id, option]) => {
-                            const selected = defaultIde === id;
-                            const onSelect = () => actuallySetDefaultIde(id);
-                            return renderIdeOption(option, selected, onSelect);
-                        })
-                    }
-                </div>
-                {ideOptions.options[defaultIde].notes &&
-                    <InfoBox className="my-5 max-w-2xl"><ul>
-                        {ideOptions.options[defaultIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
-                    </ul></InfoBox>
-                }
-                {desktopIdeOptions && desktopIdeOptions.length > 0 && <>
-                    <div className="mt-4 space-x-4 flex">
-                        <CheckBox
-                            title={<div>Open in Desktop IDE <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">Beta</PillLabel></div>}
-                            desc="Choose whether you would like to open your workspace in a desktop IDE instead."
-                            checked={useDesktopIde}
-                            onChange={(evt) => actuallySetUseDesktopIde(evt.target.checked)} />
+                {browserIdeOptions && <>
+                    <h3>Default Browser Editor</h3>
+                    <p className="text-base text-gray-500 dark:text-gray-400">Choose which IDE you want to use.</p>
+                    <div className="my-4 gap-4 flex flex-wrap">
+                        {
+                            browserIdeOptions.map(([id, option]) => {
+                                const selected = defaultIde === id;
+                                const onSelect = () => actuallySetDefaultIde(id);
+                                return renderIdeOption(option, selected, onSelect);
+                            })
+                        }
                     </div>
-                    {useDesktopIde && <>
-                        <div className="my-4 space-x-4 flex">
-                            {
-                                desktopIdeOptions.map(([id, option]) => {
-                                    const selected = defaultDesktopIde === id;
-                                    const onSelect = () => actuallySetDefaultDesktopIde(id);
-                                    return renderIdeOption(option, selected, onSelect);
-                                })
-                            }
-                        </div>
-
-                        {ideOptions.options[defaultDesktopIde].notes &&
-                            <InfoBox className="my-5 max-w-2xl"><ul>
-                                {ideOptions.options[defaultDesktopIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
-                            </ul></InfoBox>
+                    {ideOptions.options[defaultIde].notes &&
+                        <InfoBox className="my-5 max-w-2xl"><ul>
+                            {ideOptions.options[defaultIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
+                        </ul></InfoBox>
+                    }
+                </>}
+                {desktopIdeOptions && <>
+                    <h3 className="mt-12">Default Desktop Editor</h3>
+                    <p className="text-base text-gray-500 dark:text-gray-400">Open new workspaces with your preferred choice of desktop editor. Whilst using a desktop editor,<br />you can also work concurrently via the browser editor.</p>
+                    <div className="my-4 gap-4 flex flex-wrap">
+                        {
+                            desktopIdeOptions.map(([id, option]) => {
+                                const selected = defaultDesktopIde === id;
+                                const onSelect = () => actuallySetDefaultDesktopIde(id);
+                                return renderIdeOption(option, selected, onSelect);
+                            })
                         }
-                        <p className="text-left w-full text-gray-500">
-                            The <strong>JetBrains desktop IDEs</strong> are currently in beta. <a href="https://github.com/gitpod-io/gitpod/issues/6576" target="gitpod-feedback-issue" rel="noopener" className="gp-link">Send feedback</a> · <a href="https://www.gitpod.io/docs/integrations/jetbrains" target="_blank" rel="noopener noreferrer" className="gp-link">Documentation</a>
-                        </p>
-                    </>}
+                    </div>
+                    {ideOptions.options[defaultDesktopIde].notes &&
+                        <InfoBox className="my-5 max-w-2xl"><ul>
+                            {ideOptions.options[defaultDesktopIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
+                        </ul></InfoBox>
+                    }
+                    <p className="text-left w-full text-gray-500">
+                        The <strong>JetBrains desktop IDEs</strong> are currently in beta. <a href="https://github.com/gitpod-io/gitpod/issues/6576" target="gitpod-feedback-issue" rel="noopener" className="gp-link">Send feedback</a> · <a href="https://www.gitpod.io/docs/integrations/jetbrains" target="_blank" rel="noopener noreferrer" className="gp-link">Documentation</a>
+                    </p>
                 </>}
             </>}
             <h3 className="mt-12">Theme</h3>
@@ -201,6 +208,7 @@ export default function Preferences() {
 }
 
 function orderedIdeOptions(ideOptions: IDEOptions, type: "browser" | "desktop") {
+    // TODO: Maybe convert orderKey to number
     return Object.entries(ideOptions.options)
         .filter(([_, x]) => x.type === type && !x.hidden)
         .sort((a, b) => {
@@ -213,8 +221,12 @@ function orderedIdeOptions(ideOptions: IDEOptions, type: "browser" | "desktop")
 function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => void): JSX.Element {
     const card = <SelectableCard className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
         <div className="flex justify-center mt-3">
-            <img className="w-16 filter-grayscale self-center"
-                src={option.logo} alt="logo" />
+            <div className="w-16 h-16 text-center">
+                {option.logo && option.logo.length > 0 && <>
+                    <img className="w-16 filter-grayscale self-center"
+                    src={option.logo} alt="logo" />
+                </>}
+            </div>
         </div>
         {option.label ? <div className={`font-semibold text-sm ${selected ? 'text-green-500' : 'text-gray-500 dark:text-gray-400'} uppercase mt-2 ml-2 px-3 py-1 self-center`}>{option.label}</div> : <></>}
     </SelectableCard>;