diff --git a/components/dashboard/README.md b/components/dashboard/README.md
index f33fbab9b2516b..aad6079c3bda1b 100644
--- a/components/dashboard/README.md
+++ b/components/dashboard/README.md
@@ -1,4 +1,4 @@
-# Dashboard Redesign POC
+# Dashboard
 
 The dashboard is written in TypeScript and React. For styling it uses TailwindCSS which is a bit nicer than inlining CSS as it supports pseudo classes and a is a little more abstract/reusable.
 
@@ -28,4 +28,4 @@ const FeaturePreview = React.lazy(() => import('./settings/FeaturePreview'));
 const GitIntegration = React.lazy(() => import('./settings/GitIntegration'));
 ```
 
-Global state is passed through `React.Context`.
\ No newline at end of file
+Global state is passed through `React.Context`.
diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
index 1b402259b929bd..88b68ed9ea765f 100644
--- a/components/dashboard/src/App.tsx
+++ b/components/dashboard/src/App.tsx
@@ -75,7 +75,7 @@ function App() {
                             <React.Fragment>
                                 <Route path={["/", "/workspaces"]} exact render={
                                     () => <Workspaces />} />
-                                <Route path="/account" exact component={Account} />
+                                <Route path={["/account", "/settings"]} exact component={Account} />
                                 <Route path={["/integrations", "/access-control"]} exact component={Integrations} />
                                 <Route path="/notifications" exact component={Notifications} />
                                 <Route path="/plans" exact component={Plans} />
@@ -102,7 +102,8 @@ const renderMenu = () => (
         },
         {
             title: 'Settings',
-            link: '/account'
+            link: '/settings',
+            matches: /^(?!.*workspace).*$/
         },
     ]}
         right={[
diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index dd5b3426ee25f0..edc0a6c4d4c4d3 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -4,7 +4,8 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { MouseEvent, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 
 export interface ContextMenuProps {
     children: React.ReactChild[] | React.ReactChild;
@@ -20,8 +21,9 @@ export interface ContextMenuEntry {
      */
     separator?: boolean;
     customFontStyle?: string;
-    onClick?: (event: MouseEvent)=>void;
+    onClick?: (event: React.MouseEvent) => void;
     href?: string;
+    link?: string;
 }
 
 function ContextMenu(props: ContextMenuProps) {
@@ -30,23 +32,26 @@ function ContextMenu(props: ContextMenuProps) {
         setExpanded(!expanded);
     }
 
-    if (expanded) {
-        // HACK! I want to skip the bubbling phase of the current click
-        setTimeout(() => {
-            window.addEventListener('click', () => setExpanded(false), { once: true });
-        }, 0);
-    }
-  
-    const enhancedEntries = props.menuEntries.map(e => {
-        return {
-            ... e,
-            onClick: (event: MouseEvent) => {
-                e.onClick && e.onClick(event);
-                toggleExpanded();
-                event.preventDefault();
-            }
+    const handler = (evt: KeyboardEvent) => {
+        if (evt.key === 'Escape') {
+            setExpanded(false);
         }
-    })
+    }
+
+    const clickHandler = (evt: MouseEvent) => {
+        setExpanded(false);
+    }
+
+    useEffect(() => {
+        window.addEventListener('keydown', handler);
+        window.addEventListener('click', clickHandler);
+        // Remove event listeners on cleanup
+        return () => {
+            window.removeEventListener('keydown', handler);
+            window.removeEventListener('click', clickHandler);
+        };
+    }, []); // Empty array ensures that effect is only run on mount and unmount
+
 
     const font = "text-gray-600 hover:text-gray-800"
 
@@ -56,26 +61,35 @@ function ContextMenu(props: ContextMenuProps) {
         <div className="relative cursor-pointer">
             <div onClick={(e) => {
                 toggleExpanded();
-                e.preventDefault();
+                e.stopPropagation();
             }}>
                 {props.children}
             </div>
-            {expanded?
+            {expanded ?
                 <div className={`mt-2 z-50 ${props.width || 'w-48'} bg-white absolute right-0 flex flex-col border border-gray-200 rounded-lg truncated`}>
-                    {enhancedEntries.map((e, index) => {
-                        const clickable = e.href || e.onClick;
-                        const entry = <div key={e.title} className={`px-4 flex py-3 ${clickable?'hover:bg-gray-200':''} text-sm leading-1 ${e.customFontStyle || font} ${e.separator? ' border-b border-gray-200':''}`} >
-                            <div>{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div>: null}
+                    {props.menuEntries.map((e, index) => {
+                        const clickable = e.href || e.onClick || e.link;
+                        const entry = <div className={`px-4 flex py-3 ${clickable ? 'hover:bg-gray-200' : ''} text-sm leading-1 ${e.customFontStyle || font} ${e.separator ? ' border-b border-gray-200' : ''}`} >
+                            <div>{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div> : null}
                         </div>
-                        if (!clickable) {
-                            return entry;
+                        const key = `entry-${menuId}-${index}-${e.title}`;
+                        if (e.link) {
+                            return <Link key={key} to={e.link} onClick={e.onClick}>
+                                {entry}
+                            </Link>;
+                        } else if (e.href) {
+                            return <a key={key} href={e.href} onClick={e.onClick}>
+                                {entry}
+                            </a>;
+                        } else {
+                            return <div key={key} onClick={e.onClick}>
+                                {entry}
+                            </div>
                         }
-                        return <a key={`entry-${menuId}-${index}-${e.title}`} href={e.href} onClick={e.onClick}>
-                            {entry}
-                        </a>
+
                     })}
                 </div>
-            :
+                :
                 null
             }
         </div>
diff --git a/components/dashboard/src/components/Menu.tsx b/components/dashboard/src/components/Menu.tsx
index 99ab069195a1f6..263774c2365f31 100644
--- a/components/dashboard/src/components/Menu.tsx
+++ b/components/dashboard/src/components/Menu.tsx
@@ -11,13 +11,16 @@ import { gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import ContextMenu from "./ContextMenu";
 import * as images from '../images';
+import { useLocation } from "react-router";
 interface Entry {
-    title: string, link: string
+    title: string, link: string, matches?: RegExp
 }
 
 function MenuItem(entry: Entry) {
-    let classes = "flex block text-sm font-medium lg:px-3 px-0 py-1.5 rounded-md";
-    if (window.location.pathname.toLowerCase() === entry.link.toLowerCase()) {
+    const location = useLocation();
+    let classes = "flex block text-sm font-medium px-3 px-0 py-1.5 rounded-md";
+    if (location.pathname.toLowerCase() === entry.link.toLowerCase() ||
+        entry.matches && entry.matches.test(location.pathname.toLowerCase())) {
         classes += " bg-gray-200";
     } else {
         classes += " text-gray-600 hover:bg-gray-100 ";
@@ -38,35 +41,20 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
 
     return (
         <header className="lg:px-28 px-10 bg-white flex flex-wrap items-center py-4">
-            <style dangerouslySetInnerHTML={{
-                __html: `
-                #menu-toggle:checked+#menu {
-                    display: block;
-                }
-                `}} />
             <div className="flex justify-between items-center pr-3">
                 <Link to="/">
                     <img src={images.gitpodIcon} className="h-6" />
                 </Link>
             </div>
-            <div className="lg:hidden flex-grow" />
-            <label htmlFor="menu-toggle" className="pointer-cursor lg:hidden block">
-                <svg className="fill-current text-gray-700"
-                    xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-                    <title>menu</title>
-                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
-                </svg>
-            </label>
-            <input className="hidden" type="checkbox" id="menu-toggle" />
-            <div className="hidden lg:flex lg:flex-1 lg:items-center lg:w-auto w-full" id="menu">
-                <nav className="lg:flex-1">
-                    <ul className="lg:flex lg:flex-1 items-center justify-between text-base text-gray-700 space-x-2">
+            <div className="flex flex-1 items-center w-auto w-full" id="menu">
+                <nav className="flex-1">
+                    <ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
                         {props.left.map(MenuItem)}
                         <li className="flex-1"></li>
                         {props.right.map(MenuItem)}
                     </ul>
                 </nav>
-                <div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5 font-medium">
+                <div className="ml-3 flex items-center justify-start mb-0 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5 font-medium">
                     <ContextMenu menuEntries={[
                     {
                         title: (user && User.getPrimaryEmail(user)) || '',
@@ -75,7 +63,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
                     },
                     {
                         title: 'Settings',
-                        href: '/settings',
+                        link: '/settings',
                         separator: true
                     },
                     {
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
index d4584250160321..7caedeb32ee3ad 100644
--- a/components/dashboard/src/components/Modal.tsx
+++ b/components/dashboard/src/components/Modal.tsx
@@ -4,7 +4,6 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { Disposable, DisposableCollection } from "@gitpod/gitpod-protocol";
 import { useEffect } from "react";
 
 export default function Modal(props: {
@@ -15,43 +14,40 @@ export default function Modal(props: {
     onClose: () => void,
     onEnter?: () => boolean
 }) {
-    const disposable = new DisposableCollection();
-    const close = () => {
-        disposable.dispose();
-        props.onClose();
-    }
-    useEffect(() => {
-        if (!props.visible) {
-            return;
+
+    const handler = (evt: KeyboardEvent) => {
+        if (evt.key === 'Escape') {
+            props.onClose();
         }
-        const keyHandler = (k: globalThis.KeyboardEvent) => {
-            if (k.eventPhase === 1 /* CAPTURING */) {
-                if (k.key === 'Escape') {
-                    close();
-                }
-                if (k.key === 'Enter') {
-                    if (props.onEnter) {
-                        if (props.onEnter() === false) {
-                            return;
-                        }
-                    }
-                    close();
-                    k.stopPropagation();
+        if (evt.key === 'Enter') {
+            if (props.onEnter) {
+                if (props.onEnter()) {
+                    props.onClose();
                 }
+            } else {
+                props.onClose();
             }
         }
-        window.addEventListener('keydown', keyHandler, { capture: true });
-        disposable.push(Disposable.create(()=> window.removeEventListener('keydown', keyHandler)));
-    });
+    }
+    // Add event listeners
+    useEffect(() => {
+        window.addEventListener('keydown', handler);
+        // Remove event listeners on cleanup
+        return () => {
+            window.removeEventListener('keydown', handler);
+        };
+    }, []); // Empty array ensures that effect is only run on mount and unmount
+        
     if (!props.visible) {
         return null;
     }
+    
     return (
-        <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen" onClick={close}>
+        <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen" onClick={props.onClose}>
             <div className="w-screen h-screen align-middle" style={{display: 'table-cell'}}>
                 <div className={"relative bg-white border rounded-xl p-6 max-w-lg mx-auto text-gray-600" + props.className} onClick={e => e.stopPropagation()}>
                     {props.closeable !== false && (
-                        <div className="absolute right-7 top-6 cursor-pointer hover:bg-gray-200 rounded-md p-2" onClick={close}>
+                        <div className="absolute right-7 top-6 cursor-pointer hover:bg-gray-200 rounded-md p-2" onClick={props.onClose}>
                             <svg version="1.1" width="14px" height="14px"
                                 viewBox="0 0 100 100">
                                 <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeWidth="10px" />
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index 647670e3632fd2..16d1d59461dfd6 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -43,7 +43,7 @@
     }
 
     input[type=text] {
-        @apply text-xs block w-56 text-sm text-gray-600 rounded-md focus:border-gray-300 focus:bg-white focus:ring-0;
+        @apply text-xs block w-56 text-sm text-gray-600 rounded-md border-2 border-gray-400 focus:border-gray-500 focus:bg-white focus:ring-0;
     }
 
     input[type=text]::placeholder {
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
index 2db21372d46e7d..25625e29a8be8e 100644
--- a/components/dashboard/src/settings/EnvironmentVariables.tsx
+++ b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -4,12 +4,195 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import { UserEnvVarValue } from "@gitpod/gitpod-protocol";
+import { useEffect, useRef, useState } from "react";
+import ContextMenu from "../components/ContextMenu";
+import Modal from "../components/Modal";
+import { getGitpodService } from "../service/service";
 import { SettingsPage } from "./SettingsPage";
+import ThreeDots from '../icons/ThreeDots.svg';
+
+interface EnvVarModalProps {
+    envVar: UserEnvVarValue;
+    onClose: () => void;
+    save: (v: UserEnvVarValue) => void;
+    validate: (v: UserEnvVarValue) => string;
+}
+
+function AddEnvVarModal(p: EnvVarModalProps) {
+    const [ev, setEv] = useState({...p.envVar});
+    const [error, setError] = useState('');
+    const ref = useRef(ev);
+
+    const update = (pev: Partial<UserEnvVarValue>) => {
+        const newEnv = { ...ref.current, ... pev};
+        setEv(newEnv);
+        ref.current = newEnv;
+    };
+
+    useEffect(() => {
+        setEv({...p.envVar});
+        setError('');
+    }, [p.envVar]);
+
+    const isNew = !p.envVar.id;
+    let save = () => {
+        const v = ref.current;
+        const errorMsg = p.validate(v);
+        if (errorMsg !== '') {
+            setError(errorMsg);
+            return false;
+        } else {
+            p.save(v);
+            p.onClose();
+            return true;
+        }
+    };
+
+    return <Modal visible={true} onClose={p.onClose} onEnter={save}>
+        <h3 className="pb-2">{isNew ? 'New' : 'Edit'} Variable</h3>
+        <div className="border-t -mx-6 px-6 py-2 flex flex-col">
+            {error ? <div className="bg-gitpod-kumquat-light rounded-md p-3 text-red-500 text-sm">
+                {error}
+            </div> : null}
+            <div className="mt-4">
+                <h4>Name</h4>
+                <input className="w-full" type="text" value={ev.name} onChange={(v) => { update({name: v.target.value}) }} />
+            </div>
+            <div className="mt-4">
+                <h4>Value</h4>
+                <input className="w-full" type="text" value={ev.value} onChange={(v) => { update({value: v.target.value}) }} />
+            </div>
+            <div className="mt-4">
+                <h4>Scope</h4>
+                <input className="w-full" type="text" value={ev.repositoryPattern} placeholder="e.g. org/project" 
+                    onChange={(v) => { update({repositoryPattern: v.target.value}) }} />
+            </div>
+            <div className="mt-3">
+                <p>You can pass a variable for a specific project or use wildcard characters (<span className="text-gitpod-kumquat-dark bg-gitpod-kumquat-light px-1 py-0.5 rounded-md text-sm font-mono">*/*</span>) to make it available in more projects.</p>
+            </div>
+        </div>
+        <div className="flex justify-end mt-6">
+            <button className="text-gray-900 border-white bg-white hover:bg-gray-100 hover:border-gray-100" onClick={p.onClose}>Cancel</button>
+            <button className={"ml-2 disabled:opacity-50"} onClick={save} >{isNew ? 'Add' : 'Update'} Variable</button>
+        </div>
+    </Modal>
+}
 
 export default function EnvVars() {
-    return <div>
-        <SettingsPage title='Variables' subtitle='Configure environment variables for all workspaces.'>
-            <h3>Environment Variables</h3>
-        </SettingsPage>
-    </div>;
+    const [envVars, setEnvVars] = useState([] as UserEnvVarValue[]);
+    const [currentEnvVar, setCurrentEnvVar] = useState({ name: '', value: '', repositoryPattern: '' } as UserEnvVarValue);
+    const [isAddEnvVarModalVisible, setAddEnvVarModalVisible] = useState(false);
+    const update = async () => {
+        await getGitpodService().server.getEnvVars().then(r => setEnvVars(r));
+    }
+
+    useEffect(() => {
+        update()
+    }, []);
+
+
+    const add = () => {
+        setCurrentEnvVar({ name: '', value: '', repositoryPattern: '' });
+        setAddEnvVarModalVisible(true);
+    }
+
+    const edit = (ev: UserEnvVarValue) => {
+        setCurrentEnvVar(ev);
+        setAddEnvVarModalVisible(true);
+    }
+
+    const save = async (variable: UserEnvVarValue) => {
+        await getGitpodService().server.setEnvVar(variable);
+        await update();
+    };
+
+    const deleteV = async (variable: UserEnvVarValue) => {
+        await getGitpodService().server.deleteEnvVar(variable);
+        await update();
+    };
+
+    const validate = (variable: UserEnvVarValue) => {
+        const name = variable.name;
+        const pattern = variable.repositoryPattern;
+        if (name.trim() === '') {
+            return 'Name must not be empty.';
+        }
+        if (!/^[a-zA-Z0-9_]*$/.test(name)) {
+            return 'Name must match /[a-zA-Z_]+[a-zA-Z0-9_]*/.';
+        }
+        if (variable.value.trim() === '') {
+            return 'Value must not be empty.';
+        }
+        if (pattern.trim() === '') {
+            return 'Scope must not be empty.';
+        }
+        const split = pattern.split('/');
+        if (split.length < 2) {
+            return "A scope must use the form 'organization/repo'.";
+        }
+        for (const name of split) {
+            if (name !== '*') {
+                if (!/^[a-zA-Z0-9_\-.\*]+$/.test(name)) {
+                    return 'Invalid scope segment. Only ASCII characters, numbers, -, _, . or * are allowed.';
+                }
+            }
+        }
+        return '';
+    };
+
+    return <SettingsPage title='Variables' subtitle='Configure environment variables for all workspaces.'>
+        {isAddEnvVarModalVisible ? <AddEnvVarModal
+            save={save}
+            envVar={currentEnvVar}
+            validate={validate}
+            onClose={() => setAddEnvVarModalVisible(false)} /> : null}
+        {envVars.length === 0
+            ? <div className="bg-gray-100 rounded-xl w-full h-96">
+                <div className="pt-28 flex flex-col items-center w-96 m-auto">
+                    <h3 className="text-center pb-3 text-gray-500">No Environment Variables</h3>
+                    <div className="text-center pb-6 text-gray-500">In addition to user-specific environment variables you can also pass variables through a workspace creation URL. <a className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/environment-variables/#using-the-account-settings">Learn more</a></div>
+                    <button onClick={add} className="font-medium">New Environment Variable</button>
+                </div>
+            </div>
+            : <div className="space-y-2">
+                <div className="flex justify-end mb-2">
+                    <button onClick={add} className="ml-2 font-medium">New Environment Variable</button>
+                </div>
+                <div className="flex flex-col space-y-2">
+                    <div className="px-3 py-3 flex justify-between space-x-2 text-sm text-gray-400 border-t border-b border-gray-200">
+                        <div className="w-5/12">Name</div>
+                        <div className="w-5/12">Scope</div>
+                        <div className="w-2/12"></div>
+                    </div>
+                </div>
+                <div className="flex flex-col">
+                    {envVars.map(ev => {
+                        return <div className="rounded-xl whitespace-nowrap flex space-x-2 py-3 px-3 w-full justify-between hover:bg-gray-100 focus:bg-gitpod-kumquat-light group">
+                            <div className="w-5/12 m-auto">{ev.name}</div>
+                            <div className="w-5/12 m-auto text-sm text-gray-400">{ev.repositoryPattern}</div>
+                            <div className="w-2/12 flex justify-end">
+                                <div className="flex w-8 self-center hover:bg-gray-200 rounded-md cursor-pointer">
+                                    <ContextMenu menuEntries={[
+                                        {
+                                            title: 'Edit',
+                                            onClick: () => edit(ev),
+                                            separator: true
+                                        },
+                                        {
+                                            title: 'Delete',
+                                            customFontStyle: 'text-red-600 hover:text-red-800',
+                                            onClick: () => deleteV(ev)
+                                        },
+                                    ]}>
+                                        <img className="w-8 h-8 p-1" src={ThreeDots} alt="Actions" />
+                                    </ContextMenu>
+                                </div>
+                            </div>
+                        </div>
+                    })}
+                </div>
+            </div>
+        }
+    </SettingsPage>;
 }
\ No newline at end of file
diff --git a/components/dashboard/src/settings/SettingsPage.tsx b/components/dashboard/src/settings/SettingsPage.tsx
index f81f64257cde05..b16ffcef78280c 100644
--- a/components/dashboard/src/settings/SettingsPage.tsx
+++ b/components/dashboard/src/settings/SettingsPage.tsx
@@ -4,6 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import { useLocation } from "react-router";
 import { Link } from "react-router-dom";
 import Header from '../components/Header';
 import settingsMenu from "./settings-menu";
@@ -15,19 +16,20 @@ export interface Props {
 }
 
 export function SettingsPage(p: Props) {
-    return <div className="max-w-6xl">
+    const location = useLocation();
+    return <div className="w-full">
         <Header title={p.title} subtitle={p.subtitle}/>
         <div className='lg:px-28 px-10 flex pt-9'>
             <div>
                 <ul className="flex flex-col text tracking-wide text-gray-500 pt-4 lg:pt-0 w-48 space-y-2">
                     {settingsMenu.map(e => {
                         let classes = "flex block py-2 px-4 rounded-md";
-                        if (e.link.toLowerCase() === window.location.pathname) {
+                        if (e.link.some(l => l.toLocaleLowerCase() === location.pathname)) {
                             classes += " bg-gray-800 text-gray-50";
                         } else {
                             classes += " hover:bg-gray-100";
                         }
-                        return <Link to={e.link} key={e.title}>
+                        return <Link to={e.link[0]} key={e.title}>
                             <li className={classes}>
                                 {e.title}
                             </li>
diff --git a/components/dashboard/src/settings/settings-menu.ts b/components/dashboard/src/settings/settings-menu.ts
index 6582d1cde51642..6bd77561c1e839 100644
--- a/components/dashboard/src/settings/settings-menu.ts
+++ b/components/dashboard/src/settings/settings-menu.ts
@@ -7,26 +7,26 @@
 export default [
     {
         title: 'Account',
-        link: '/account'
+        link: ['/account','/settings']
     },
     {
         title: 'Notifications',
-        link: '/notifications'
+        link: ['/notifications']
     },
     {
         title: 'Plans',
-        link: '/plans'
+        link: ['/plans']
     },
     {
         title: 'Variables',
-        link: '/variables'
+        link: ['/variables']
     },
     {
         title: 'Integrations',
-        link: '/integrations'
+        link: ["/integrations", "/access-control"]
     },
     {
         title: 'Preferences',
-        link: '/preferences'
+        link: ['/preferences']
     },
 ];
\ No newline at end of file
diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css
index 302ebe302238cb..ac6c0653d1b3ba 100644
--- a/components/dashboard/src/tailwind.output.css
+++ b/components/dashboard/src/tailwind.output.css
@@ -917,12 +917,21 @@ button:disabled {
 input[type=text]:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+input[type=text] {
   --tw-border-opacity: 1;
-  border-color: rgba(214, 211, 209, var(--tw-border-opacity));
+  border-color: rgba(168, 162, 158, var(--tw-border-opacity));
+}
+
+input[type=text]:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(120, 113, 108, var(--tw-border-opacity));
 }
 
 input[type=text] {
   border-radius: 0.375rem;
+  border-width: 2px;
   display: block;
   font-size: 0.75rem;
   line-height: 1rem;
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index 6ffc947fb44e8e..8a0fd632a5c0ea 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -49,11 +49,16 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
         });
     }
 
+    protected showStartWSModal = () => this.setState({
+        isTemplateModelOpen: true
+    });
+
+    protected hideStartWSModal = () => this.setState({
+        isTemplateModelOpen: false
+    });
+
     render() {
         const wsModel = this.workspaceModel;
-        const toggleStartWSModal = () => this.setState({
-            isTemplateModelOpen: !this.state?.isTemplateModelOpen
-        });
         const onActive = () => wsModel!.active = true;
         const onAll = () => wsModel!.active = false;
         return <>
@@ -91,7 +96,7 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                     }]} />
                 </div>
                 {wsModel && this.state?.workspaces.length > 0 ? 
-                 <button onClick={toggleStartWSModal} className="ml-2 font-medium">New Workspace</button>
+                 <button onClick={this.showStartWSModal} className="ml-2 font-medium">New Workspace</button>
                  : null
                 }
             </div>
@@ -141,13 +146,13 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                             <div className="flex flex-col items-center w-96 m-auto">
                                 <h3 className="text-center pb-3">No Active Workspaces</h3>
                                 <div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or start a new workspace for a recently used project. <a className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/getting-started/">Learn more</a></div>
-                                <button onClick={toggleStartWSModal} className="font-medium">New Workspace</button>
+                                <button onClick={this.showStartWSModal} className="font-medium">New Workspace</button>
                             </div>
                         </div>
                     </div>
             )}
             <StartWorkspaceModal
-                onClose={toggleStartWSModal}
+                onClose={this.hideStartWSModal}
                 visible={!!this.state?.isTemplateModelOpen}
                 examples={this.state?.repos && this.state.repos.map(r => ({
                     title: r.name,