diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx
index fc3e100db2ed00..1d10537f9c7a4c 100644
--- a/components/dashboard/src/Login.tsx
+++ b/components/dashboard/src/Login.tsx
@@ -67,7 +67,7 @@ export function Login() {
                         </div>
                         <div className="mx-auto text-center pb-8 space-y-2">
                             <h1 className="text-3xl">Log in to Gitpod</h1>
-                            <h2 className="uppercase text-sm">ALWAYS READY-TO-CODE</h2>
+                            <h2 className="uppercase text-sm text-gray-400">ALWAYS READY-TO-CODE</h2>
                         </div>
                         <div className="flex flex-col space-y-3">
                             {authProviders.map(ap => {
diff --git a/components/dashboard/src/components/DropDown.tsx b/components/dashboard/src/components/DropDown.tsx
index 2fc8f68d0f844b..ef681469e0160d 100644
--- a/components/dashboard/src/components/DropDown.tsx
+++ b/components/dashboard/src/components/DropDown.tsx
@@ -11,7 +11,7 @@ export interface DropDownProps {
 }
 
 function Arrow(props: {up: boolean}) {
-    return <span className="mx-2 border-gray-400" style={{ margin: 2, padding: 3, border: 'solid black', borderWidth: '0 2px 2px 0', display: 'inline-block', transform: `rotate(${props.up ? '-135deg' : '45deg'})`}}></span>
+    return <span className="mx-2 border-gray-400 group-hover:border-gray-600" style={{ margin: 2, padding: 3, border: 'solid black', borderWidth: '0 2px 2px 0', display: 'inline-block', transform: `rotate(${props.up ? '-135deg' : '45deg'})`}}></span>
 }
 
 function DropDown(props: DropDownProps) {
@@ -26,7 +26,7 @@ function DropDown(props: DropDownProps) {
             }
         }
     })
-    const font = "text-gray-400 text-sm leading-1"
+    const font = "text-gray-400 text-sm leading-1 group hover:text-gray-600"
     return (
         <ContextMenu menuEntries={enhancedEntries} width={props.contextMenuWidth}>
             <span className={`py-2 cursor-pointer ${font}`}>{props.prefix}{current}<Arrow up={false}/></span>
diff --git a/components/dashboard/src/components/Header.tsx b/components/dashboard/src/components/Header.tsx
index 52a3ad93c5ef43..8d52faa796ed93 100644
--- a/components/dashboard/src/components/Header.tsx
+++ b/components/dashboard/src/components/Header.tsx
@@ -7,10 +7,10 @@ export interface HeaderProps {
 
 export default function Header(p: HeaderProps) {
     return <div className="lg:px-28 px-10 border-gray-200">
-        <div className="flex py-8">
+        <div className="flex pb-8 pt-6">
             <div className="">
-                <h1 className="">{p.title}</h1>
-                <h2 className="pt-1">{p.subtitle}</h2>
+                <h1 className="tracking-tight">{p.title}</h1>
+                <h2 className="tracking-wide">{p.subtitle}</h2>
             </div>
         </div>
         <Separator />
diff --git a/components/dashboard/src/components/Menu.tsx b/components/dashboard/src/components/Menu.tsx
index ca2962d3fa2d34..67aabc3de0396e 100644
--- a/components/dashboard/src/components/Menu.tsx
+++ b/components/dashboard/src/components/Menu.tsx
@@ -60,7 +60,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
                         {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">
+                <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">
                     <ContextMenu menuEntries={[
                     {
                         title: (user && User.getPrimaryEmail(user)) || '',
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index b8fb28ad2a64c2..0afa0cc1990331 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -29,7 +29,7 @@
 
 @layer components {
     button {
-        @apply cursor-pointer px-3 py-1 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm rounded-md;
+        @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;
     }
 
     input[type=text] {
@@ -44,4 +44,4 @@
         @apply bg-gray-100 border-2 border-gray-300 text-gray-400;
     }
 
-}
+}
\ No newline at end of file
diff --git a/components/dashboard/src/settings/Account.tsx b/components/dashboard/src/settings/Account.tsx
index 559d749d691b5e..4f71de1e29b2c7 100644
--- a/components/dashboard/src/settings/Account.tsx
+++ b/components/dashboard/src/settings/Account.tsx
@@ -12,15 +12,18 @@ export default function Account() {
     const close = () => setModal(false);
     return <div>
         <Modal visible={modal} onClose={close}>
-            <h3>Do you really want to delete your account?</h3>
-            <p>This action will remove all the data associated with your account in Gitpod and cannot be reversed.</p>
-            <div className="flex justify-end pt-6">
+            <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>
+            <div className="flex justify-end mt-6">
                 <button className="border-red-900 bg-red-500 hover:bg-red-700" onClick={close}>Delete Account</button>
             </div>
         </Modal>
 
-        <SettingsPage title='Account' subtitle='Profile details'>
+        <SettingsPage title='Account' subtitle='Manage account and git configuration.'>
             <h3>Profile</h3>
+            <p className="text-base text-gray-500 pb-4">The following information will be used to set up git configuration. You can override git author name and email per project by using the default environment variables <span className="text-gitpod-kumquat-dark bg-gitpod-kumquat-light px-1.5 py-1 rounded-md text-sm font-mono">GIT_AUTHOR_NAME</span> and <span className="text-gitpod-kumquat-dark bg-gitpod-kumquat-light px-1.5 py-1 rounded-md text-sm font-mono">GIT_COMMITTER_EMAIL</span>.</p>
             <div className="flex flex-col lg:flex-row">
                 <div>
                     <div className="mt-4">
@@ -35,14 +38,14 @@ export default function Account() {
                 <div className="lg:pl-14">
                     <div className="mt-4">
                         <h4>Avatar</h4>
-                        <img className="rounded-full w-24 h-24 border-2 border-transparent hover:border-indigo-400"
+                        <img className="rounded-full w-24 h-24"
                             src={user!.avatarUrl} alt={user!.name} />
                     </div>
                 </div>
             </div>
             <h3 className="mt-12">Delete Account</h3>
-            <p className="text-sm text-gray-400 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" onClick={() => setModal(true)}>Delete Account</button>
+            <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>
         </SettingsPage>
     </div>;
 }
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
index cf9d5f94e3d361..ce3728ae4050a8 100644
--- a/components/dashboard/src/settings/EnvironmentVariables.tsx
+++ b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -2,7 +2,7 @@ import { SettingsPage } from "./SettingsPage";
 
 export default function EnvVars() {
     return <div>
-        <SettingsPage title='Environment Variables' subtitle='Configure environment variables for your workspaces'>
+        <SettingsPage title='Variables' subtitle='Configure environment variables for all workspaces.'>
             <h3>Environment Variables</h3>
         </SettingsPage>
     </div>;
diff --git a/components/dashboard/src/settings/GitIntegrations.tsx b/components/dashboard/src/settings/GitIntegrations.tsx
index f642103fad729f..46e9c55f1a87b9 100644
--- a/components/dashboard/src/settings/GitIntegrations.tsx
+++ b/components/dashboard/src/settings/GitIntegrations.tsx
@@ -2,8 +2,8 @@ import { SettingsPage } from "./SettingsPage";
 
 export default function GitIntegrations() {
     return <div>
-        <SettingsPage title='Git Integrations' subtitle='Manage integration with your Git hosters'>
-            <h3>Git Hoster Access Control</h3>
+        <SettingsPage title='Integrations' subtitle='Manage permissions for git providers and integrations.'>
+            <h3>Git Providers</h3>
         </SettingsPage>
     </div>;
 }
\ No newline at end of file
diff --git a/components/dashboard/src/settings/Notifications.tsx b/components/dashboard/src/settings/Notifications.tsx
index 9db00fc9f325a0..758cd411c65f7b 100644
--- a/components/dashboard/src/settings/Notifications.tsx
+++ b/components/dashboard/src/settings/Notifications.tsx
@@ -53,9 +53,9 @@ export default function Notifications() {
 
 function CheckBox(props: {title: string, desc: string, checked: boolean, onChange: () => void}) {
     return <div className="flex mt-4">
-        <input className={"h-5 w-5 focus:ring-0 mt-1 rounded cursor-pointer border-2 "+(props.checked?'bg-gray-800':'')} type="checkbox" checked={props.checked} onChange={props.onChange}/>
+        <input className={"h-4 w-4 focus:ring-0 mt-1 rounded cursor-pointer border-2 "+(props.checked?'bg-gray-800':'')} type="checkbox" checked={props.checked} onChange={props.onChange}/>
         <div className="flex flex-col ml-2">
-            <div className="text-gray-700 text-md font-semibold">{props.title}</div>
+            <div className="text-gray-800 text-md font-semibold tracking-wide">{props.title}</div>
             <div className="text-gray-400 text-md">{props.desc}</div>
         </div>
     </div>
diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx
index 09543c85b48285..821d0dfd48f615 100644
--- a/components/dashboard/src/settings/Plans.tsx
+++ b/components/dashboard/src/settings/Plans.tsx
@@ -2,7 +2,7 @@ import { SettingsPage } from "./SettingsPage";
 
 export default function Plans() {
     return <div>
-        <SettingsPage title='Plans' subtitle='Plans and Usage'>
+        <SettingsPage title='Plans' subtitle='Manage account usage and billing.'>
             <h3>Plans</h3>
         </SettingsPage>
     </div>;
diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
index 03cfeeaf911863..ed03d2c930f8f5 100644
--- a/components/dashboard/src/settings/Preferences.tsx
+++ b/components/dashboard/src/settings/Preferences.tsx
@@ -21,7 +21,7 @@ export default function Preferences() {
     }
 
     return <div>
-        <SettingsPage title='Preferences' subtitle='Configure your Default IDE for all workspaces.'>
+        <SettingsPage title='Preferences' subtitle='Configure user preferences.'>
             <h3>Default IDE</h3>
             <p className="text-base">Choose which IDE you want to use.</p>
             <div className="mt-4 space-x-4 flex">
diff --git a/components/dashboard/src/settings/SettingsPage.tsx b/components/dashboard/src/settings/SettingsPage.tsx
index 68acc64498e736..b346bf33be6d4e 100644
--- a/components/dashboard/src/settings/SettingsPage.tsx
+++ b/components/dashboard/src/settings/SettingsPage.tsx
@@ -9,13 +9,13 @@ export interface Props {
 }
 
 export function SettingsPage(p: Props) {
-    return <div>
+    return <div className="max-w-6xl">
         <Header title={p.title} subtitle={p.subtitle}/>
         <div className='lg:px-28 px-10 flex pt-9'>
             <div>
-                <ul className="flex flex-col text-sm text-gray-500 pt-4 lg:pt-0 w-48 space-y-2">
+                <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 font-sm px-4 rounded-md";
+                        let classes = "flex block py-2 px-4 rounded-md";
                         if (e.link.toLowerCase() === window.location.pathname) {
                             classes += " bg-gray-800 text-gray-50";
                         } else {
diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
index 8cc39e700a0406..74f6557d93b81a 100644
--- a/components/dashboard/src/start/CreateWorkspace.tsx
+++ b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -111,14 +111,11 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
                   <p className="text-base text-black font-bold">{w.workspace.id}</p>
                   <p>{w.workspace.contextURL}</p>
                 </div>
-                <div className="flex">
-                  <button>Open</button>
-                </div>
               </a>
             )}
           </>
         </div>
-        <div className="flex justify-end mt-4">
+        <div className="flex justify-end mt-6">
           <button onClick={() => this.createWorkspace(CreateWorkspaceMode.Default)}>New Workspace</button>
         </div>
       </Modal>;
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
index 84cebc5426e397..d81de0e718a4dc 100644
--- a/components/dashboard/src/start/StartWorkspace.tsx
+++ b/components/dashboard/src/start/StartWorkspace.tsx
@@ -200,11 +200,11 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       case "stopping":
         phase = StartPhase.Stopping;
         statusMessage = <div>
-          <div className="flex space-x-3 items-center rounded-xl py-2 px-4 h-16 w-72 mt-4 bg-gray-100">
+          <div className="flex space-x-3 items-center rounded-xl m-auto px-4 h-16 w-72 mt-4 bg-gray-100">
             <div className="rounded-full w-3 h-3 text-sm bg-gitpod-kumquat">&nbsp;</div>
             <div>
               <p className="text-gray-700 font-semibold">{this.state.workspaceInstance.workspaceId}</p>
-              <p>{this.state.contextUrl}</p>
+              <p className="w-56 truncate">{this.state.contextUrl}</p>
             </div>
           </div>
         </div>;
@@ -214,16 +214,16 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       case "stopped":
         phase = StartPhase.Stopped;
         statusMessage = <div>
-            <div className="flex space-x-3 items-center rounded-xl py-2 px-4 h-16 w-72 mt-4 bg-gray-100">
+            <div className="flex space-x-3 items-center rounded-xl m-auto px-4 h-16 w-72 mt-4 bg-gray-100">
             <div className="rounded-full w-3 h-3 text-sm bg-gray-300">&nbsp;</div>
             <div>
               <p className="text-gray-700 font-semibold">{this.state.workspaceInstance.workspaceId}</p>
-              <p>{this.state.contextUrl}</p>
+              <p className="w-56 truncate">{this.state.contextUrl}</p>
             </div>
           </div>
           <div className="mt-10 flex space-x-2">
-            <button className="px-4 py-2 text-gray-500 bg-white font-semibold border-gray-500" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go to Dashboard</button>
-            <button className="px-4 py-2 text-gray-50 bg-green-600 font-semibold border-green-800" onClick={() => this.redirectTo(gitpodHostUrl.asStart(this.state.workspaceInstance?.workspaceId).toString())}>Open Workspace</button>
+            <button className="px-4 py-2 text-gray-500 bg-white font-semibold border-gray-500 hover:text-gray-700 hover:border-gray-700 hover:bg-gray-100" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go to Dashboard</button>
+            <button className="px-4 py-2 text-gray-50 bg-green-600 font-semibold border-green-800 hover:bg-green-700" onClick={() => this.redirectTo(gitpodHostUrl.asStart(this.state.workspaceInstance?.workspaceId).toString())}>Open Workspace</button>
           </div>
         </div>;
         break;
diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css
index 95f55d4870ebed..1ea073ac6f7228 100644
--- a/components/dashboard/src/tailwind.output.css
+++ b/components/dashboard/src/tailwind.output.css
@@ -862,6 +862,14 @@ button:hover {
 button {
   --tw-border-opacity: 1;
   border-color: rgba(63, 98, 18, var(--tw-border-opacity));
+}
+
+button:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(147, 197, 253, var(--tw-border-opacity));
+}
+
+button {
   border-radius: 0.375rem;
   border-width: 2px;
   cursor: pointer;
@@ -869,10 +877,27 @@ button {
   line-height: 1.25rem;
   margin-top: auto;
   margin-bottom: auto;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+}
+
+button:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+button {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+button:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+button {
   --tw-text-opacity: 1;
   color: rgba(245, 245, 244, var(--tw-text-opacity));
 }
@@ -200362,4 +200387,4 @@ input[disabled] {
     -webkit-filter: grayscale(1) !important;
             filter: grayscale(1) !important;
   }
-}
+}
\ No newline at end of file
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index 74816137f75013..202299ce1d2e8d 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -28,7 +28,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
             break;
         }
         default: {
-            stateClassName += ' bg-gitpod-kumquat'
+            stateClassName += ' bg-gitpod-kumquat animate-pulse'
             break;
         }
     }
@@ -94,20 +94,20 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
         setChangesModalVisible(true);
     }
     return <div>
-        <a className="rounded-xl whitespace-nowrap flex space-x-2 py-6 px-6 w-full justify-between hover:bg-gray-100 cursor-pointer" href={startUrl.toString()}>
+        <a className="rounded-xl whitespace-nowrap flex space-x-2 py-6 px-6 w-full justify-between hover:bg-gray-100 focus:bg-gitpod-kumquat-light cursor-pointer group" href={startUrl.toString()}>
             <div className="pr-3 self-center">
                 <div className={stateClassName}>
                     &nbsp;
             </div>
             </div>
             <div className="flex flex-col w-3/12">
-                <div className="font-medium text-gray-800 truncate hover:underline">{ws.id}</div>
-                <a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400 truncate">{project || 'Unknown'}</div></a>
+                <div className="font-medium text-gray-800 truncate">{ws.id}</div>
+                <a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400">{project || 'Unknown'}</div></a>
             </div>
             <div className="flex w-4/12 truncate overflow-ellipsis">
                 <div className="flex flex-col">
-                    <div className="font-medium text-gray-500 truncate">{ws.description}</div>
-                    <div className="text-sm text-gray-400 truncate">{ws.contextURL}</div>
+                    <div className="font-medium text-gray-500 overflow-ellipsis truncate">{ws.description}</div>
+                    <div className="text-sm text-gray-400 overflow-ellipsis truncate">{ws.contextURL}</div>
                 </div>
             </div>
             <div className="flex w-2/12 truncate" onClick={numberOfChanges > 0 ? showChanges : undefined}>
@@ -115,16 +115,16 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
                     <div className="font-medium text-gray-500 truncate">{currentBranch}</div>
                     {
                         numberOfChanges > 0 ?
-                            <div className={"text-sm text-red truncate cursor-pointer hover:underline"} onClick={showChanges}>{changesLabel}</div>
+                            <div className={"text-sm text-red-600 truncate cursor-pointer bg-red-50 group-hover:bg-red-100 hover:text-red-800 px-1.5 py-0.5 relative rounded-md -top-0.5"} onClick={showChanges}>{changesLabel}</div>
                             :
-                            <div className="text-sm text-gray-400 truncate">No Changes</div>
+                            <div className="text-sm text-gray-500 truncate ">No Changes</div>
                     }
                 </div>
             </div>
             <div className="flex w-2/12 self-center space-x-2 truncate">
                 <div className="text-sm text-gray-400 truncate">{moment(WorkspaceInfo.lastActiveISODate(desc)).fromNow()}</div>
             </div>
-            <div className="flex w-8 self-center hover:bg-gray-300 rounded-md cursor-pointer">
+            <div className="flex w-8 self-center hover:bg-gray-200 rounded-md cursor-pointer">
                 <ContextMenu menuEntries={menuEntries}>
                     <img className="w-8 h-8 p-1" src={ThreeDots} alt="Actions" />
                 </ContextMenu>
@@ -135,7 +135,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
         </Modal>
         <Modal visible={isModalVisible} onClose={() => setModalVisible(false)} onEnter={() => {model.deleteWorkspace(ws.id); return true;}}>
             <div>
-                <h3>Delete Workspace</h3>
+                <h3 className="pb-2">Delete Workspace</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 this workspace?</p>
                     <div className="w-full p-4 mb-2 bg-gray-100 rounded-xl group bg-gray-100">
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index fff7ddcf6e98f9..0863ee275a4239 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -46,17 +46,16 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
         const onActive = () => wsModel!.active = true;
         const onAll = () => wsModel!.active = false;
         return <>
-            <Header title="Workspaces" subtitle="Manage all workspaces and see pending changes." />
+            <Header title="Workspaces" subtitle="Manage recent and stopped workspaces." />
 
             <div className="lg:px-28 px-10 pt-8 flex">
                 <div className="flex">
                     <div className="py-4">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 490 490">
-                            <path fill="none" stroke="#999" strokeWidth="36" strokeLinecap="round"
-                                d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110" />
+                        <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z" fill="#A8A29E"/>
                         </svg>
                     </div>
-                    <input className="border-0" type="text" placeholder="Search Workspace" onChange={(v) => { if (wsModel) wsModel.setSearch(v.target.value) }} />
+                    <input className="border-0" type="text" placeholder="Search Workspaces" onChange={(v) => { if (wsModel) wsModel.setSearch(v.target.value) }} />
                 </div>
                 <div className="flex-1" />
                 <div className="py-3">
@@ -127,18 +126,17 @@ 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 a git repository URL with gitpod.io/# or open a workspace template. <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 how to get started</a></div>
-                                <button onClick={toggleTemplateModal}>Select Template</button>
+                                <button onClick={toggleTemplateModal} className="font-medium">Select Template</button>
                             </div>
                         </div>
                     </div>
             )}
             <Modal onClose={toggleTemplateModal} visible={!!this.state?.isTemplateModelOpen}>
-                <h3 className="">Template            </h3>
+                <h3 className="pb-2">Select Template</h3>
                 {/* separator */}
-                <div className="absolute border-b pb-3 left-0 top-16 w-full"></div>
-                <div className="pt-8">
-                    <p>Select a template to open a workspace</p>
-                    <div className="space-y-2 pt-4 overflow-y-scroll h-80">
+                <div className="border-t mt-2 -mx-6 px-6 py-2">
+                    <p className="mt-1 mb-2 text-base">Select a template to open a workspace.</p>
+                    <div className="space-y-2 mt-4 overflow-y-scroll h-80 pr-2">
                         {this.state?.repos && this.state.repos.map(r => {
                             const url = gitpodHostUrl.withContext(r.url).toString();
                             return <a key={r.name} href={url} className="rounded-xl group hover:bg-gray-100 flex p-4 my-1">
@@ -146,9 +144,6 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                                     <p className="text-base text-gray-800 font-semibold">{r.name}</p>
                                     <p>{r.url}</p>
                                 </div>
-                                <div className="flex">
-                                    <button>Open</button>
-                                </div>
                             </a>;
                         })}
                     </div>