diff --git a/components/dashboard/src/components/OptionCard.tsx b/components/dashboard/src/components/OptionCard.tsx
new file mode 100644
index 00000000000000..cab23e3afa1b91
--- /dev/null
+++ b/components/dashboard/src/components/OptionCard.tsx
@@ -0,0 +1,15 @@
+export interface OptionCardProps {
+    title: string;
+    selected: boolean;
+    onClick: () => void;
+    children?: React.ReactNode;
+}
+
+function OptionCard(props: OptionCardProps) {
+    return <div className={`rounded-xl p-4 border-2 ${props.selected ? 'border-green-500' : 'border-gray-300 hover:border-gray-400'}`}>
+        <p className={`text-base font-semibold ${props.selected ? 'color-green-600' : 'color-gray-300 hover:color-gray-400'}`}>{props.title}</p>
+        {props.children}
+    </div>;
+}
+
+export default OptionCard;
diff --git a/components/dashboard/src/settings/DefaultIDE.tsx b/components/dashboard/src/settings/DefaultIDE.tsx
index ea0c295145de6f..08973bcfef2ac2 100644
--- a/components/dashboard/src/settings/DefaultIDE.tsx
+++ b/components/dashboard/src/settings/DefaultIDE.tsx
@@ -1,11 +1,24 @@
+import { useContext, useState } from "react";
+import OptionCard from "../components/OptionCard";
 import { SettingsPage } from "../components/SettingsPage";
-import settingsMenu from './settings-menu';
+// import { getGitpodService } from "../service/service";
+import { UserContext } from "../user-context";
+import settingsMenu from "./settings-menu";
 
 export default function DefaultIDE() {
+    const { user } = useContext(UserContext);
+    const [ defaultIde, setDefaultIde ] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || 'code');
+
     return <div>
         <SettingsPage title='Default IDE' subtitle='Configure your default IDE' menuEntries={settingsMenu}>
-            <div className="lg:px-28 px-10 flex pt-10">
-                Default IDE
+            <div className="flex flex-col lg:flex-row">
+                <div className="pb-6">
+                    <div className="pt-6">
+                        <OptionCard title="Code" selected={defaultIde === 'code'} onClick={()=>setDefaultIde('code')}></OptionCard>
+                        <OptionCard title="Theia" selected={defaultIde === 'theia'} onClick={()=>setDefaultIde('theia')}></OptionCard>
+                        <OptionCard title="Custom" selected={!['code', 'theia'].includes(defaultIde)} onClick={()=>setDefaultIde('')}></OptionCard>
+                    </div>
+                </div>
             </div>
         </SettingsPage>
     </div>;