diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index e7bd2600d99811..647670e3632fd2 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -35,7 +35,11 @@
 
 @layer components {
     button {
-        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm rounded-md focus:outline-none focus:ring focus:border-blue-300;
+        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring focus:border-blue-300;
+    }
+
+    button:disabled {
+        @apply cursor-default;
     }
 
     input[type=text] {
diff --git a/components/dashboard/src/settings/Account.tsx b/components/dashboard/src/settings/Account.tsx
index 1b15db003fe7a0..4a3df12c4e3334 100644
--- a/components/dashboard/src/settings/Account.tsx
+++ b/components/dashboard/src/settings/Account.tsx
@@ -7,6 +7,7 @@
 import { User } from "@gitpod/gitpod-protocol";
 import { useContext, useState } from "react";
 import Modal from "../components/Modal";
+import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import { SettingsPage } from "./SettingsPage";
 
@@ -14,16 +15,31 @@ export default function Account() {
     const { user } = useContext(UserContext);
 
     const [modal, setModal] = useState(false);
+    const [typedEmail, setTypedEmail] = useState('');
+
+    const primaryEmail = User.getPrimaryEmail(user!);
+
+    const deleteAccount = async () => {
+        await getGitpodService().server.deleteAccount();
+        document.location.href = gitpodHostUrl.asApiLogout().toString();
+    };
 
     const close = () => setModal(false);
     return <div>
         <Modal visible={modal} onClose={close}>
             <h3 className="pb-2">Delete Account</h3>
-            <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">
-              <p className="mt-1 mb-2 text-base">Are you sure you want to delete your account? This action will remove all the data associated with your account in Gitpod and cannot be reversed.</p>
+            <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-4">
+                <p className="pb-4 text-gray-900 text-base">You are about to permanently delete your account.</p>
+                <ol className="text-gray-500 text-sm list-outside list-decimal">
+                    <li className="ml-5">All your workspaces and related data will be deleted and cannot be restored afterwards.</li>
+                    <li className="ml-5">Your subscription will be cancelled. If you obtained a Gitpod subscription through the GitHub marketplace, you need to cancel your plan there.</li>
+                </ol>
+                <p className="pt-4 pb-2 text-gray-600 text-base font-bold">Type your email to confirm</p>
+              <input className="border-2 border-gray-400 w-full" type="text" onChange={e => setTypedEmail(e.target.value)}></input>
             </div>
             <div className="flex justify-end mt-6">
-                <button className="border-red-900 bg-red-500 hover:bg-red-700" onClick={close}>Delete Account</button>
+                <button className="text-gray-900 border-white bg-white hover:border-gray-200" onClick={close}>Cancel</button>
+                <button className={"ml-2 border-red-900 bg-red-500 disabled:opacity-50" + (typedEmail !== primaryEmail ? '' : ' hover:bg-red-700')} onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>
             </div>
         </Modal>
 
@@ -51,7 +67,7 @@ export default function Account() {
             </div>
             <h3 className="mt-12">Delete Account</h3>
             <p className="text-base text-gray-500 pb-4">This action will remove all the data associated with your account in Gitpod.</p>
-            <button className="border-red-600 text-red-600 bg-white hover:border-red-800 hover:text-red-800 font-medium" onClick={() => setModal(true)}>Delete Account</button>
+            <button className="border-red-600 text-red-600 bg-white hover:border-red-800 hover:text-red-800" onClick={() => setModal(true)}>Delete Account</button>
         </SettingsPage>
     </div>;
 }
diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css
index 2c1940d406db66..302ebe302238cb 100644
--- a/components/dashboard/src/tailwind.output.css
+++ b/components/dashboard/src/tailwind.output.css
@@ -4,7 +4,8 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-/*! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com
+ */
 
 /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -879,6 +880,7 @@ button {
   border-radius: 0.375rem;
   border-width: 2px;
   cursor: pointer;
+  font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
   margin-top: auto;
@@ -908,6 +910,10 @@ button {
   color: rgba(245, 245, 244, var(--tw-text-opacity));
 }
 
+button:disabled {
+  cursor: default;
+}
+
 input[type=text]:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -15578,6 +15584,66 @@ input[disabled] {
   opacity: 1 !important;
 }
 
+.disabled\:opacity-0:disabled {
+  opacity: 0 !important;
+}
+
+.disabled\:opacity-5:disabled {
+  opacity: 0.05 !important;
+}
+
+.disabled\:opacity-10:disabled {
+  opacity: 0.1 !important;
+}
+
+.disabled\:opacity-20:disabled {
+  opacity: 0.2 !important;
+}
+
+.disabled\:opacity-25:disabled {
+  opacity: 0.25 !important;
+}
+
+.disabled\:opacity-30:disabled {
+  opacity: 0.3 !important;
+}
+
+.disabled\:opacity-40:disabled {
+  opacity: 0.4 !important;
+}
+
+.disabled\:opacity-50:disabled {
+  opacity: 0.5 !important;
+}
+
+.disabled\:opacity-60:disabled {
+  opacity: 0.6 !important;
+}
+
+.disabled\:opacity-70:disabled {
+  opacity: 0.7 !important;
+}
+
+.disabled\:opacity-75:disabled {
+  opacity: 0.75 !important;
+}
+
+.disabled\:opacity-80:disabled {
+  opacity: 0.8 !important;
+}
+
+.disabled\:opacity-90:disabled {
+  opacity: 0.9 !important;
+}
+
+.disabled\:opacity-95:disabled {
+  opacity: 0.95 !important;
+}
+
+.disabled\:opacity-100:disabled {
+  opacity: 1 !important;
+}
+
 .outline-none {
   outline: 2px solid transparent !important;
   outline-offset: 2px !important;
@@ -49309,6 +49375,66 @@ input[disabled] {
     opacity: 1 !important;
   }
 
+  .sm\:disabled\:opacity-0:disabled {
+    opacity: 0 !important;
+  }
+
+  .sm\:disabled\:opacity-5:disabled {
+    opacity: 0.05 !important;
+  }
+
+  .sm\:disabled\:opacity-10:disabled {
+    opacity: 0.1 !important;
+  }
+
+  .sm\:disabled\:opacity-20:disabled {
+    opacity: 0.2 !important;
+  }
+
+  .sm\:disabled\:opacity-25:disabled {
+    opacity: 0.25 !important;
+  }
+
+  .sm\:disabled\:opacity-30:disabled {
+    opacity: 0.3 !important;
+  }
+
+  .sm\:disabled\:opacity-40:disabled {
+    opacity: 0.4 !important;
+  }
+
+  .sm\:disabled\:opacity-50:disabled {
+    opacity: 0.5 !important;
+  }
+
+  .sm\:disabled\:opacity-60:disabled {
+    opacity: 0.6 !important;
+  }
+
+  .sm\:disabled\:opacity-70:disabled {
+    opacity: 0.7 !important;
+  }
+
+  .sm\:disabled\:opacity-75:disabled {
+    opacity: 0.75 !important;
+  }
+
+  .sm\:disabled\:opacity-80:disabled {
+    opacity: 0.8 !important;
+  }
+
+  .sm\:disabled\:opacity-90:disabled {
+    opacity: 0.9 !important;
+  }
+
+  .sm\:disabled\:opacity-95:disabled {
+    opacity: 0.95 !important;
+  }
+
+  .sm\:disabled\:opacity-100:disabled {
+    opacity: 1 !important;
+  }
+
   .sm\:outline-none {
     outline: 2px solid transparent !important;
     outline-offset: 2px !important;
@@ -82456,6 +82582,66 @@ input[disabled] {
     opacity: 1 !important;
   }
 
+  .md\:disabled\:opacity-0:disabled {
+    opacity: 0 !important;
+  }
+
+  .md\:disabled\:opacity-5:disabled {
+    opacity: 0.05 !important;
+  }
+
+  .md\:disabled\:opacity-10:disabled {
+    opacity: 0.1 !important;
+  }
+
+  .md\:disabled\:opacity-20:disabled {
+    opacity: 0.2 !important;
+  }
+
+  .md\:disabled\:opacity-25:disabled {
+    opacity: 0.25 !important;
+  }
+
+  .md\:disabled\:opacity-30:disabled {
+    opacity: 0.3 !important;
+  }
+
+  .md\:disabled\:opacity-40:disabled {
+    opacity: 0.4 !important;
+  }
+
+  .md\:disabled\:opacity-50:disabled {
+    opacity: 0.5 !important;
+  }
+
+  .md\:disabled\:opacity-60:disabled {
+    opacity: 0.6 !important;
+  }
+
+  .md\:disabled\:opacity-70:disabled {
+    opacity: 0.7 !important;
+  }
+
+  .md\:disabled\:opacity-75:disabled {
+    opacity: 0.75 !important;
+  }
+
+  .md\:disabled\:opacity-80:disabled {
+    opacity: 0.8 !important;
+  }
+
+  .md\:disabled\:opacity-90:disabled {
+    opacity: 0.9 !important;
+  }
+
+  .md\:disabled\:opacity-95:disabled {
+    opacity: 0.95 !important;
+  }
+
+  .md\:disabled\:opacity-100:disabled {
+    opacity: 1 !important;
+  }
+
   .md\:outline-none {
     outline: 2px solid transparent !important;
     outline-offset: 2px !important;
@@ -115603,6 +115789,66 @@ input[disabled] {
     opacity: 1 !important;
   }
 
+  .lg\:disabled\:opacity-0:disabled {
+    opacity: 0 !important;
+  }
+
+  .lg\:disabled\:opacity-5:disabled {
+    opacity: 0.05 !important;
+  }
+
+  .lg\:disabled\:opacity-10:disabled {
+    opacity: 0.1 !important;
+  }
+
+  .lg\:disabled\:opacity-20:disabled {
+    opacity: 0.2 !important;
+  }
+
+  .lg\:disabled\:opacity-25:disabled {
+    opacity: 0.25 !important;
+  }
+
+  .lg\:disabled\:opacity-30:disabled {
+    opacity: 0.3 !important;
+  }
+
+  .lg\:disabled\:opacity-40:disabled {
+    opacity: 0.4 !important;
+  }
+
+  .lg\:disabled\:opacity-50:disabled {
+    opacity: 0.5 !important;
+  }
+
+  .lg\:disabled\:opacity-60:disabled {
+    opacity: 0.6 !important;
+  }
+
+  .lg\:disabled\:opacity-70:disabled {
+    opacity: 0.7 !important;
+  }
+
+  .lg\:disabled\:opacity-75:disabled {
+    opacity: 0.75 !important;
+  }
+
+  .lg\:disabled\:opacity-80:disabled {
+    opacity: 0.8 !important;
+  }
+
+  .lg\:disabled\:opacity-90:disabled {
+    opacity: 0.9 !important;
+  }
+
+  .lg\:disabled\:opacity-95:disabled {
+    opacity: 0.95 !important;
+  }
+
+  .lg\:disabled\:opacity-100:disabled {
+    opacity: 1 !important;
+  }
+
   .lg\:outline-none {
     outline: 2px solid transparent !important;
     outline-offset: 2px !important;
@@ -148750,6 +148996,66 @@ input[disabled] {
     opacity: 1 !important;
   }
 
+  .xl\:disabled\:opacity-0:disabled {
+    opacity: 0 !important;
+  }
+
+  .xl\:disabled\:opacity-5:disabled {
+    opacity: 0.05 !important;
+  }
+
+  .xl\:disabled\:opacity-10:disabled {
+    opacity: 0.1 !important;
+  }
+
+  .xl\:disabled\:opacity-20:disabled {
+    opacity: 0.2 !important;
+  }
+
+  .xl\:disabled\:opacity-25:disabled {
+    opacity: 0.25 !important;
+  }
+
+  .xl\:disabled\:opacity-30:disabled {
+    opacity: 0.3 !important;
+  }
+
+  .xl\:disabled\:opacity-40:disabled {
+    opacity: 0.4 !important;
+  }
+
+  .xl\:disabled\:opacity-50:disabled {
+    opacity: 0.5 !important;
+  }
+
+  .xl\:disabled\:opacity-60:disabled {
+    opacity: 0.6 !important;
+  }
+
+  .xl\:disabled\:opacity-70:disabled {
+    opacity: 0.7 !important;
+  }
+
+  .xl\:disabled\:opacity-75:disabled {
+    opacity: 0.75 !important;
+  }
+
+  .xl\:disabled\:opacity-80:disabled {
+    opacity: 0.8 !important;
+  }
+
+  .xl\:disabled\:opacity-90:disabled {
+    opacity: 0.9 !important;
+  }
+
+  .xl\:disabled\:opacity-95:disabled {
+    opacity: 0.95 !important;
+  }
+
+  .xl\:disabled\:opacity-100:disabled {
+    opacity: 1 !important;
+  }
+
   .xl\:outline-none {
     outline: 2px solid transparent !important;
     outline-offset: 2px !important;
@@ -181897,6 +182203,66 @@ input[disabled] {
     opacity: 1 !important;
   }
 
+  .\32xl\:disabled\:opacity-0:disabled {
+    opacity: 0 !important;
+  }
+
+  .\32xl\:disabled\:opacity-5:disabled {
+    opacity: 0.05 !important;
+  }
+
+  .\32xl\:disabled\:opacity-10:disabled {
+    opacity: 0.1 !important;
+  }
+
+  .\32xl\:disabled\:opacity-20:disabled {
+    opacity: 0.2 !important;
+  }
+
+  .\32xl\:disabled\:opacity-25:disabled {
+    opacity: 0.25 !important;
+  }
+
+  .\32xl\:disabled\:opacity-30:disabled {
+    opacity: 0.3 !important;
+  }
+
+  .\32xl\:disabled\:opacity-40:disabled {
+    opacity: 0.4 !important;
+  }
+
+  .\32xl\:disabled\:opacity-50:disabled {
+    opacity: 0.5 !important;
+  }
+
+  .\32xl\:disabled\:opacity-60:disabled {
+    opacity: 0.6 !important;
+  }
+
+  .\32xl\:disabled\:opacity-70:disabled {
+    opacity: 0.7 !important;
+  }
+
+  .\32xl\:disabled\:opacity-75:disabled {
+    opacity: 0.75 !important;
+  }
+
+  .\32xl\:disabled\:opacity-80:disabled {
+    opacity: 0.8 !important;
+  }
+
+  .\32xl\:disabled\:opacity-90:disabled {
+    opacity: 0.9 !important;
+  }
+
+  .\32xl\:disabled\:opacity-95:disabled {
+    opacity: 0.95 !important;
+  }
+
+  .\32xl\:disabled\:opacity-100:disabled {
+    opacity: 1 !important;
+  }
+
   .\32xl\:outline-none {
     outline: 2px solid transparent !important;
     outline-offset: 2px !important;
diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js
index c2d9297858b639..1aeb5e4e5a6b34 100644
--- a/components/dashboard/tailwind.config.js
+++ b/components/dashboard/tailwind.config.js
@@ -15,9 +15,9 @@ module.exports = {
                 gray: colors.warmGray,
                 green: colors.lime,
                 blue: {
-                  light: '#75A9EC',
-                  DEFAULT: '#5C8DD6',
-                  dark: '#265583',
+                    light: '#75A9EC',
+                    DEFAULT: '#5C8DD6',
+                    dark: '#265583',
                 },
                 'gitpod-black': '#161616',
                 'gitpod-gray': '#8E8787',
@@ -34,22 +34,22 @@ module.exports = {
             },
         },
         fontFamily: {
-          sans: [
-            'Inter',
-            'system-ui',
-            '-apple-system',
-            'BlinkMacSystemFont',
-            'Segoe UI',
-            'Roboto',
-            'Helvetica Neue',
-            'Arial',
-            'Noto Sans',
-            'sans-serif',
-            'Apple Color Emoji',
-            'Segoe UI Emoji',
-            'Segoe UI Symbol',
-            'Noto Color Emoji',
-          ],
+            sans: [
+                'Inter',
+                'system-ui',
+                '-apple-system',
+                'BlinkMacSystemFont',
+                'Segoe UI',
+                'Roboto',
+                'Helvetica Neue',
+                'Arial',
+                'Noto Sans',
+                'sans-serif',
+                'Apple Color Emoji',
+                'Segoe UI Emoji',
+                'Segoe UI Symbol',
+                'Noto Color Emoji',
+            ],
         },
         underlineThickness: {
             'thin': '2px',
@@ -65,6 +65,11 @@ module.exports = {
             'grayscale': 'grayscale(1)',
         },
     },
+    variants: {
+        extend: {
+            opacity: ['disabled'],
+        }
+    },
     plugins: [
         require('@tailwindcss/forms'),
         require('tailwind-underline-utils'),