diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
index 7b9f8ae4d0babf..1fa769fbf6af2f 100644
--- a/components/dashboard/src/App.tsx
+++ b/components/dashboard/src/App.tsx
@@ -36,6 +36,7 @@ import {
     settingsPathTeamsJoin,
     settingsPathTeamsNew,
     settingsPathVariables,
+    settingsPathSSHKeys,
 } from "./settings/settings.routes";
 import {
     projectsPathInstallGitHubApp,
@@ -58,6 +59,7 @@ const Billing = React.lazy(() => import(/* webpackPrefetch: true */ "./settings/
 const Plans = React.lazy(() => import(/* webpackPrefetch: true */ "./settings/Plans"));
 const Teams = React.lazy(() => import(/* webpackPrefetch: true */ "./settings/Teams"));
 const EnvironmentVariables = React.lazy(() => import(/* webpackPrefetch: true */ "./settings/EnvironmentVariables"));
+const SSHKeys = React.lazy(() => import(/* webpackPrefetch: true */ "./settings/SSHKeys"));
 const Integrations = React.lazy(() => import(/* webpackPrefetch: true */ "./settings/Integrations"));
 const Preferences = React.lazy(() => import(/* webpackPrefetch: true */ "./settings/Preferences"));
 const Open = React.lazy(() => import(/* webpackPrefetch: true */ "./start/Open"));
@@ -364,6 +366,7 @@ function App() {
                     <Route path={settingsPathBilling} exact component={Billing} />
                     <Route path={settingsPathPlans} exact component={Plans} />
                     <Route path={settingsPathVariables} exact component={EnvironmentVariables} />
+                    <Route path={settingsPathSSHKeys} exact component={SSHKeys} />
                     <Route path={settingsPathPreferences} exact component={Preferences} />
                     <Route path={projectsPathInstallGitHubApp} exact component={InstallGitHubApp} />
                     <Route path="/from-referrer" exact component={FromReferrer} />
diff --git a/components/dashboard/src/components/ItemsList.tsx b/components/dashboard/src/components/ItemsList.tsx
index 2e7372e9dd5670..3a4db01581f872 100644
--- a/components/dashboard/src/components/ItemsList.tsx
+++ b/components/dashboard/src/components/ItemsList.tsx
@@ -10,9 +10,11 @@ export function ItemsList(props: { children?: React.ReactNode; className?: strin
     return <div className={`flex flex-col space-y-2 ${props.className || ""}`}>{props.children}</div>;
 }
 
-export function Item(props: { children?: React.ReactNode; className?: string; header?: boolean }) {
+export function Item(props: { children?: React.ReactNode; className?: string; header?: boolean; solid?: boolean }) {
+    // cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
+    const solidClassName = props.solid ? "bg-gray-50 dark:bg-gray-800" : "hover:bg-gray-100 dark:hover:bg-gray-800";
     const headerClassName = "text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800";
-    const notHeaderClassName = "rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light";
+    const notHeaderClassName = "rounded-xl focus:bg-gitpod-kumquat-light " + solidClassName;
     return (
         <div
             className={`flex flex-grow flex-row w-full p-3 justify-between transition ease-in-out ${
@@ -32,10 +34,15 @@ export function ItemFieldIcon(props: { children?: React.ReactNode; className?: s
     return <div className={`flex self-center w-8 ${props.className || ""}`}>{props.children}</div>;
 }
 
-export function ItemFieldContextMenu(props: { menuEntries: ContextMenuEntry[]; className?: string }) {
+export function ItemFieldContextMenu(props: {
+    menuEntries: ContextMenuEntry[];
+    className?: string;
+    position?: "start" | "center" | "end";
+}) {
+    const cls = "self-" + (props.position ?? "center");
     return (
         <div
-            className={`flex self-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer w-8 ${
+            className={`flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer w-8 ${cls} ${
                 props.className || ""
             }`}
         >
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
index 70484bfcb2d0d0..1e14be10bac5c0 100644
--- a/components/dashboard/src/components/Modal.tsx
+++ b/components/dashboard/src/components/Modal.tsx
@@ -19,7 +19,7 @@ export default function Modal(props: {
     closeable?: boolean;
     className?: string;
     onClose: () => void;
-    onEnter?: () => boolean;
+    onEnter?: () => boolean | Promise<boolean>;
 }) {
     const closeModal = (manner: CloseModalManner) => {
         props.onClose();
@@ -36,7 +36,7 @@ export default function Modal(props: {
             .then()
             .catch(console.error);
     };
-    const handler = (evt: KeyboardEvent) => {
+    const handler = async (evt: KeyboardEvent) => {
         if (evt.defaultPrevented) {
             return;
         }
@@ -45,7 +45,7 @@ export default function Modal(props: {
         }
         if (evt.key === "Enter") {
             if (props.onEnter) {
-                if (props.onEnter()) {
+                if (await props.onEnter()) {
                     closeModal("enter");
                 }
             } else {
diff --git a/components/dashboard/src/icons/Key.svg b/components/dashboard/src/icons/Key.svg
new file mode 100644
index 00000000000000..09e7beaefeff1a
--- /dev/null
+++ b/components/dashboard/src/icons/Key.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 6C16 9.31371 13.3137 12 10 12C9.39383 12 8.80865 11.9101 8.25707 11.7429L6 14H4V16H0V12L4.25707 7.74293C4.08989 7.19135 4 6.60617 4 6C4 2.68629 6.68629 0 10 0C13.3137 0 16 2.68629 16 6ZM10 2C9.44771 2 9 2.44772 9 3C9 3.55228 9.44771 4 10 4C11.1046 4 12 4.89543 12 6C12 6.55228 12.4477 7 13 7C13.5523 7 14 6.55228 14 6C14 3.79086 12.2091 2 10 2Z" fill="#A8A29E"/>
+</svg>
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index a6f669a7539b43..ba3b102e316adb 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -77,12 +77,14 @@
         @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500;
     }
 
+    textarea,
     input[type="text"],
     input[type="search"],
     input[type="password"],
     select {
         @apply block w-56 text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
     }
+    textarea::placeholder,
     input[type="text"]::placeholder,
     input[type="search"]::placeholder,
     input[type="password"]::placeholder {
@@ -93,6 +95,7 @@
     select.error {
         @apply border-gitpod-red dark:border-gitpod-red focus:border-gitpod-red dark:focus:border-gitpod-red;
     }
+    textarea[disabled],
     input[disabled] {
         @apply bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500;
     }
diff --git a/components/dashboard/src/settings/SSHKeys.tsx b/components/dashboard/src/settings/SSHKeys.tsx
new file mode 100644
index 00000000000000..273d71f65f08a8
--- /dev/null
+++ b/components/dashboard/src/settings/SSHKeys.tsx
@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { useContext, useEffect, useState } from "react";
+import { PageWithSubMenu } from "../components/PageWithSubMenu";
+import getSettingsMenu from "./settings-menu";
+import { PaymentContext } from "../payment-context";
+import Modal from "../components/Modal";
+import Alert from "../components/Alert";
+import { Item, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
+import ConfirmationModal from "../components/ConfirmationModal";
+import { SSHPublicKeyValue, UserSSHPublicKeyValue } from "@gitpod/gitpod-protocol";
+import { getGitpodService } from "../service/service";
+
+interface AddModalProps {
+    value: SSHPublicKeyValue;
+    onClose: () => void;
+    onSave: () => void;
+}
+
+interface DeleteModalProps {
+    value: KeyData;
+    onConfirm: () => void;
+    onClose: () => void;
+}
+
+type KeyData = SSHPublicKeyValue & { id?: string };
+
+export function AddSSHKeyModal(props: AddModalProps) {
+    const [errorMsg, setErrorMsg] = useState("");
+
+    const [value, setValue] = useState({ ...props.value });
+    const update = (pev: Partial<SSHPublicKeyValue>) => {
+        setValue({ ...value, ...pev });
+        setErrorMsg("");
+    };
+
+    useEffect(() => {
+        setValue({ ...props.value });
+        setErrorMsg("");
+    }, [props.value]);
+
+    const save = async () => {
+        const tmp = SSHPublicKeyValue.validate(value);
+        if (tmp) {
+            setErrorMsg(tmp);
+            return false;
+        }
+        try {
+            await getGitpodService().server.addSSHPublicKey(value);
+        } catch (e) {
+            setErrorMsg(e.message);
+            return false;
+        }
+        props.onClose();
+        props.onSave();
+        return true;
+    };
+
+    return (
+        <Modal
+            title="New SSH Key"
+            buttons={
+                <button className="ml-2" onClick={save}>
+                    Add Key
+                </button>
+            }
+            visible={true}
+            onClose={props.onClose}
+            onEnter={save}
+        >
+            <>
+                {errorMsg.length > 0 && (
+                    <Alert type="error" className="mb-2">
+                        {errorMsg}
+                    </Alert>
+                )}
+            </>
+            <div className="text-gray-500 dark:text-gray-400 text-md">
+                Add an SSH key for secure access workspaces via SSH. Learn more
+            </div>
+            <Alert type="info" className="mt-2">
+                SSH key are used to connect securely to workspaces.{" "}
+                <a
+                    href="https://www.gitpod.io/docs/configure/ssh#create-an-ssh-key"
+                    target="gitpod-create-ssh-key-doc"
+                    className="gp-link"
+                >
+                    Learn how to create an SSH Key
+                </a>
+            </Alert>
+            <div className="mt-2">
+                <h4>Key</h4>
+                <textarea
+                    autoFocus
+                    style={{ height: "160px" }}
+                    className="w-full resize-none"
+                    value={value.key}
+                    placeholder="Begins with 'ssh-rsa', 'ecdsa-sha2-nistp256',
+                        'ecdsa-sha2-nistp384', 'ecdsa-sha2-nistp521',
+                        'ssh-ed25519',
+                        'sk-ecdsa-sha2-nistp256@openssh.com', or
+                        'sk-ssh-ed25519@openssh.com'"
+                    onChange={(v) => update({ key: v.target.value })}
+                />
+            </div>
+            <div className="mt-2">
+                <h4>Title</h4>
+                <input
+                    className="w-full"
+                    type="text"
+                    placeholder="e.g. laptop"
+                    value={value.name}
+                    onChange={(v) => {
+                        update({ name: v.target.value });
+                    }}
+                />
+            </div>
+        </Modal>
+    );
+}
+
+export function DeleteSSHKeyModal(props: DeleteModalProps) {
+    const confirmDelete = async () => {
+        await getGitpodService().server.deleteSSHPublicKey(props.value.id!);
+        props.onConfirm();
+        props.onClose();
+    };
+    return (
+        <ConfirmationModal
+            title="Delete SSH Key"
+            areYouSureText="This action CANNOT be undone. This will permanently delete the SSH key and if you'd like to use it in the future, you will need to upload it again."
+            buttonText="Delete SSH Key"
+            onClose={props.onClose}
+            onConfirm={confirmDelete}
+        />
+    );
+}
+
+export default function SSHKeys() {
+    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
+
+    const [dataList, setDataList] = useState<UserSSHPublicKeyValue[]>([]);
+    const [currentData, setCurrentData] = useState<KeyData>({ name: "", key: "" });
+    const [showAddModal, setShowAddModal] = useState(false);
+    const [showDelModal, setShowDelModal] = useState(false);
+
+    const loadData = () => {
+        getGitpodService()
+            .server.getSSHPublicKeys()
+            .then((r) => setDataList(r));
+    };
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const addOne = () => {
+        setCurrentData({ name: "", key: "" });
+        setShowAddModal(true);
+        setShowDelModal(false);
+    };
+
+    const deleteOne = (value: UserSSHPublicKeyValue) => {
+        setCurrentData({ id: value.id, name: value.name, key: "" });
+        setShowAddModal(false);
+        setShowDelModal(true);
+    };
+
+    return (
+        <PageWithSubMenu
+            subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedUI })}
+            title="SSH Keys"
+            subtitle="Connect securely to workspaces."
+        >
+            {showAddModal && (
+                <AddSSHKeyModal value={currentData} onSave={loadData} onClose={() => setShowAddModal(false)} />
+            )}
+            {showDelModal && (
+                <DeleteSSHKeyModal value={currentData} onConfirm={loadData} onClose={() => setShowDelModal(false)} />
+            )}
+            <div className="flex items-start sm:justify-between mb-2">
+                <div>
+                    <h3>SSH Keys</h3>
+                    <h2 className="text-gray-500">
+                        Create and manage SSH keys.{" "}
+                        <a href="https://www.gitpod.io/docs/configure/ssh" target="gitpod-ssh-doc" className="gp-link">
+                            More details
+                        </a>
+                    </h2>
+                </div>
+                {dataList.length !== 0 ? (
+                    <div className="mt-3 flex">
+                        <button onClick={addOne} className="ml-2">
+                            New SSH Key
+                        </button>
+                    </div>
+                ) : null}
+            </div>
+            {dataList.length === 0 ? (
+                <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full h-96">
+                    <div className="pt-28 flex flex-col items-center w-120 m-auto">
+                        <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No SSH Keys</h3>
+                        <div className="text-center pb-6 text-gray-500">
+                            SSH keys allow you to establish a <b>secure connection</b> between your <b>computer</b> and{" "}
+                            <b>workspaces</b>.
+                        </div>
+                        <button onClick={addOne}>New SSH Key</button>
+                    </div>
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+                    {dataList.map((key) => {
+                        return (
+                            <Item solid className="items-start">
+                                <ItemField className="flex flex-col gap-y box-border overflow-hidden">
+                                    <p className="truncate text-gray-400 dark:text-gray-600">
+                                        {key.fingerprint
+                                            .toUpperCase()
+                                            .match(/.{1,2}/g)
+                                            ?.join(":") ?? key.fingerprint}
+                                    </p>
+                                    <div className="truncate my-1 text-xl text-gray-800 dark:text-gray-100 font-semibold">
+                                        {key.name}
+                                    </div>
+                                    <p className="truncate mt-4">Added on {key.creationTime}</p>
+                                    {!!key.lastUsedTime && <p className="truncate">Last used on {key.lastUsedTime}</p>}
+                                </ItemField>
+                                <ItemFieldContextMenu
+                                    position="start"
+                                    menuEntries={[
+                                        {
+                                            title: "Delete",
+                                            customFontStyle:
+                                                "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300",
+                                            onClick: () => deleteOne(key),
+                                        },
+                                    ]}
+                                />
+                            </Item>
+                        );
+                    })}
+                </div>
+            )}
+        </PageWithSubMenu>
+    );
+}
diff --git a/components/dashboard/src/settings/settings-menu.ts b/components/dashboard/src/settings/settings-menu.ts
index 7c576cfc3b927c..1c97c0ec14a021 100644
--- a/components/dashboard/src/settings/settings-menu.ts
+++ b/components/dashboard/src/settings/settings-menu.ts
@@ -14,6 +14,7 @@ import {
     settingsPathPreferences,
     settingsPathTeams,
     settingsPathVariables,
+    settingsPathSSHKeys,
 } from "./settings.routes";
 
 export default function getSettingsMenu(params: { showPaymentUI?: boolean; showUsageBasedUI?: boolean }) {
@@ -50,6 +51,10 @@ export default function getSettingsMenu(params: { showPaymentUI?: boolean; showU
             title: "Variables",
             link: [settingsPathVariables],
         },
+        {
+            title: "SSH Keys",
+            link: [settingsPathSSHKeys],
+        },
         {
             title: "Integrations",
             link: [settingsPathIntegrations, "/access-control"],
diff --git a/components/dashboard/src/settings/settings.routes.ts b/components/dashboard/src/settings/settings.routes.ts
index 72025cc439b7cc..97e1a38480478b 100644
--- a/components/dashboard/src/settings/settings.routes.ts
+++ b/components/dashboard/src/settings/settings.routes.ts
@@ -18,3 +18,5 @@ export const settingsPathTeamsJoin = [settingsPathTeams, "join"].join("/");
 export const settingsPathTeamsNew = [settingsPathTeams, "new"].join("/");
 
 export const settingsPathVariables = "/variables";
+
+export const settingsPathSSHKeys = "/keys";
diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js
index 16c6d2d7628c83..2549cb04df39a5 100644
--- a/components/dashboard/tailwind.config.js
+++ b/components/dashboard/tailwind.config.js
@@ -5,16 +5,13 @@
  */
 
 // tailwind.config.js
-const colors = require('tailwindcss/colors');
+const colors = require("tailwindcss/colors");
 
 module.exports = {
     jit: true,
-    purge: [
-        './public/**/*.html',
-        './src/**/*.{js,ts,tsx}',
-    ],
+    purge: ["./public/**/*.html", "./src/**/*.{js,ts,tsx}"],
     important: true,
-    darkMode: 'class',
+    darkMode: "class",
     theme: {
         extend: {
             colors: {
@@ -22,79 +19,76 @@ module.exports = {
                 green: colors.lime,
                 orange: colors.amber,
                 blue: {
-                    light: '#75A9EC',
-                    DEFAULT: '#5C8DD6',
-                    dark: '#265583',
+                    light: "#75A9EC",
+                    DEFAULT: "#5C8DD6",
+                    dark: "#265583",
                 },
-                'gitpod-black': '#161616',
-                'gitpod-gray': '#8E8787',
-                'gitpod-red': '#CE4A3E',
-                'gitpod-kumquat-light': '#FFE4BC',
-                'gitpod-kumquat': '#FFB45B',
-                'gitpod-kumquat-dark': '#FF8A00',
-                'gitpod-kumquat-darker': '#f28300',
-                'gitpod-kumquat-gradient': 'linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)',
+                "gitpod-black": "#161616",
+                "gitpod-gray": "#8E8787",
+                "gitpod-red": "#CE4A3E",
+                "gitpod-kumquat-light": "#FFE4BC",
+                "gitpod-kumquat": "#FFB45B",
+                "gitpod-kumquat-dark": "#FF8A00",
+                "gitpod-kumquat-darker": "#f28300",
+                "gitpod-kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
             },
             container: {
                 center: true,
             },
             outline: {
-                blue: '1px solid #000033',
+                blue: "1px solid #000033",
+            },
+            width: {
+                120: "28rem",
+                128: "32rem",
             },
         },
         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',
-            ],
-            mono: [
-                'SF Mono',
-                'Monaco',
-                'Inconsolata',
-                'Fira Mono',
-                'Droid Sans Mono',
-                'Source Code Pro',
-                'monospace'
+                "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",
             ],
+            mono: ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"],
         },
         underlineThickness: {
-            'thin': '2px',
-            'thick': '5px'
+            thin: "2px",
+            thick: "5px",
         },
         underlineOffset: {
-            'small': '2px',
-            'medium': '5px',
+            small: "2px",
+            medium: "5px",
         },
-        filter: { // defaults to {}
+        filter: {
+            // defaults to {}
             // https://github.com/benface/tailwindcss-filters#usage
-            'none': 'none',
-            'grayscale': 'grayscale(1)',
-            'invert': 'invert(1)',
-            'brightness-10': 'brightness(10)',
+            none: "none",
+            grayscale: "grayscale(1)",
+            invert: "invert(1)",
+            "brightness-10": "brightness(10)",
         },
     },
     variants: {
         extend: {
-            opacity: ['disabled'],
-            display: ['dark'],
-        }
+            opacity: ["disabled"],
+            display: ["dark"],
+        },
     },
     plugins: [
-        require('@tailwindcss/forms'),
-        require('tailwind-underline-utils'),
-        require('tailwindcss-filters'),
+        require("@tailwindcss/forms"),
+        require("tailwind-underline-utils"),
+        require("tailwindcss-filters"),
         // ...
     ],
-};
\ No newline at end of file
+};