diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index edc0a6c4d4c4d3..f85ebf476e930d 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -70,7 +70,7 @@ function ContextMenu(props: ContextMenuProps) {
                     {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 className="truncate w-52">{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div> : null}
                         </div>
                         const key = `entry-${menuId}-${index}-${e.title}`;
                         if (e.link) {
diff --git a/components/dashboard/src/components/DropDown.tsx b/components/dashboard/src/components/DropDown.tsx
index 3ba0125647166a..f6c5ab2932fa45 100644
--- a/components/dashboard/src/components/DropDown.tsx
+++ b/components/dashboard/src/components/DropDown.tsx
@@ -4,12 +4,13 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ContextMenu from './ContextMenu';
 
 export interface DropDownProps {
     prefix?: string;
     contextMenuWidth?: string;
+    activeEntry?: string,
     entries: { 
         title: string,
         onClick: ()=>void
@@ -21,7 +22,10 @@ function Arrow(props: {up: boolean}) {
 }
 
 function DropDown(props: DropDownProps) {
-    const [current, setCurrent] = useState(props.entries[0].title);
+    const [current, setCurrent] = useState(props.activeEntry || props.entries[0].title);
+    useEffect(() => {
+        setCurrent(props.activeEntry || props.entries[0].title);
+    }, [props.activeEntry, props.entries]);
     const enhancedEntries = props.entries.map(e => {
         return {
             ...e,
@@ -32,7 +36,7 @@ function DropDown(props: DropDownProps) {
             }
         }
     })
-    const font = "text-gray-400 text-sm leading-1 group hover:text-gray-600"
+    const font = "text-gray-400 text-sm leading-1 group hover:text-gray-600 transition ease-in-out"
     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/Menu.tsx b/components/dashboard/src/components/Menu.tsx
index 263774c2365f31..eee77a3d5ff358 100644
--- a/components/dashboard/src/components/Menu.tsx
+++ b/components/dashboard/src/components/Menu.tsx
@@ -18,12 +18,12 @@ interface Entry {
 
 function MenuItem(entry: Entry) {
     const location = useLocation();
-    let classes = "flex block text-sm font-medium px-3 px-0 py-1.5 rounded-md";
+    let classes = "flex block text-sm font-medium px-3 px-0 py-1.5 rounded-md transition ease-in-out";
     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 ";
+        classes += " text-gray-600 hover:bg-gray-100 transition ease-in-out";
     }
     return <li key={entry.title}>
         {entry.link.startsWith('https://')
diff --git a/components/dashboard/src/components/SelectableCard.tsx b/components/dashboard/src/components/SelectableCard.tsx
index 959a9c9608bbb8..9ba5a0e58e04e7 100644
--- a/components/dashboard/src/components/SelectableCard.tsx
+++ b/components/dashboard/src/components/SelectableCard.tsx
@@ -13,7 +13,7 @@ export interface SelectableCardProps {
 }
 
 function SelectableCard(props: SelectableCardProps) {
-    return <div className={`rounded-xl px-4 py-3 flex flex-col cursor-pointer group border-2 ${props.selected ? 'border-green-500' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
+    return <div className={`rounded-xl px-4 py-3 flex flex-col cursor-pointer group border-2 transition ease-in-out ${props.selected ? 'border-green-500' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
         <div className="flex items-center">
             <p className={`w-full text-base font-semibold ${props.selected ? 'text-green-500' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
             <input className={'text-green-500 ' + (props.selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')} type="radio" checked={props.selected} />
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index 2d1e333527ed40..26949b20afb791 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -21,7 +21,7 @@
         @apply text-2xl text-gray-800 leading-9 font-semibold;
     }
     h4 {
-        @apply pb-2 text-sm font-medium text-gray-600;
+        @apply pb-2 text-sm font-semibold text-gray-600;
     }
     p {
         @apply text-sm text-gray-400;
@@ -35,7 +35,7 @@
 
 @layer components {
     button {
-        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring;
+        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring transition ease-in-out;
     }
     button.secondary {
         @apply bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-600;
@@ -51,7 +51,7 @@
     }
 
     input[type=text], input[type=password], select {
-        @apply text-xs block w-56 text-sm text-gray-600 rounded-md border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
+        @apply block w-56 text-gray-600 rounded-md border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
     }
 
     input[type=text]::placeholder, input[type=password]::placeholder {
diff --git a/components/dashboard/src/settings/Account.tsx b/components/dashboard/src/settings/Account.tsx
index fea66bc49117c1..1320a3d55ce5d7 100644
--- a/components/dashboard/src/settings/Account.tsx
+++ b/components/dashboard/src/settings/Account.tsx
@@ -45,7 +45,7 @@ export default function Account() {
 
         <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>
+            <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-gray--300 bg-gray-100 px-1.5 py-1 rounded-md text-sm font-mono font-medium">GIT_AUTHOR_NAME</span> and <span className="text-gray--300 bg-gray-100 px-1.5 py-1 rounded-md text-sm font-mono font-medium">GIT_COMMITTER_EMAIL</span>.</p>
             <div className="flex flex-col lg:flex-row">
                 <div>
                     <div className="mt-4">
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
index 52febb13552882..d9c2cd3f6e9368 100644
--- a/components/dashboard/src/settings/EnvironmentVariables.tsx
+++ b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -50,12 +50,12 @@ function AddEnvVarModal(p: EnvVarModalProps) {
     };
 
     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">
+        <h3 className="mb-4">{isNew ? 'New' : 'Edit'} Variable</h3>
+        <div className="border-t border-b -mx-6 px-6 py-4 flex flex-col">
+            {error ? <div className="bg-gitpod-kumquat-light rounded-md p-3 text-red-500 text-sm mb-2">
                 {error}
             </div> : null}
-            <div className="mt-4">
+            <div>
                 <h4>Name</h4>
                 <input className="w-full" type="text" value={ev.name} onChange={(v) => { update({name: v.target.value}) }} />
             </div>
@@ -68,8 +68,8 @@ function AddEnvVarModal(p: EnvVarModalProps) {
                 <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 className="mt-1">
+                <p className="text-gray-500">You can pass a variable for a specific project or use wildcard character (<span className="text-gray--300 bg-gray-100 px-1.5 py-1 rounded-md text-sm font-mono font-medium">*/*</span>) to make it available in more projects.</p>
             </div>
         </div>
         <div className="flex justify-end mt-6">
@@ -147,18 +147,27 @@ export default function EnvVars() {
             envVar={currentEnvVar}
             validate={validate}
             onClose={() => setAddEnvVarModalVisible(false)} /> : null}
+        <div className="flex items-start sm:justify-between mb-2">
+            <div>
+                <h3>Environment Variables</h3>
+                <h2 className="text-gray-500">Variables are used to store information like passwords.</h2>
+            </div>
+            {envVars.length !== 0
+            ?
+            <div className="mt-3 flex mt-0">
+                <button onClick={add} className="ml-2">New Variable</button>
+            </div>
+            : null}
+        </div>
         {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}>New Environment Variable</button>
+                    <button onClick={add}>New Variable</button>
                 </div>
             </div>
             : <div className="space-y-2">
-                <div className="flex justify-end mb-2">
-                    <button onClick={add} className="ml-2">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>
@@ -168,11 +177,11 @@ export default function EnvVars() {
                 </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">
+                        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 transition ease-in-out 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">
+                                <div className="flex w-8 self-center hover:bg-gray-200 rounded-md cursor-pointer opacity-0 group-hover:opacity-100">
                                     <ContextMenu menuEntries={[
                                         {
                                             title: 'Edit',
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
index 360a815f48a4e0..368fb4c3ec9be2 100644
--- a/components/dashboard/src/settings/Integrations.tsx
+++ b/components/dashboard/src/settings/Integrations.tsx
@@ -254,11 +254,11 @@ function GitProviders() {
             </Modal>
         )}
 
-        <h3>Git Providers</h3>
-        <h2>Manage permissions for git providers.</h2>
+    <h3>Git Providers</h3>
+    <h2>Manage permissions for git providers.</h2>
         <div className="flex flex-col pt-6 space-y-2">
             {authProviders && authProviders.map(ap => (
-                <div key={"ap-" + ap.authProviderId} className="flex-grow flex flex-row hover:bg-gray-100 rounded-xl h-16 w-full">
+                <div key={"ap-" + ap.authProviderId} className="flex-grow flex flex-row hover:bg-gray-100 rounded-xl h-16 w-full transition ease-in-out group">
                     <div className="px-4 self-center w-1/12">
                         <div className={"rounded-full w-3 h-3 text-sm align-middle " + (isConnected(ap.authProviderId) ? "bg-green-500" : "bg-gray-400")}>
                             &nbsp;
@@ -276,7 +276,7 @@ function GitProviders() {
                         <span className="my-auto truncate text-gray-500 overflow-ellipsis">{getPermissions(ap.authProviderId)?.join(", ") || "–"}</span>
                         <span className="text-sm my-auto text-gray-400">Permissions</span>
                     </div>
-                    <div className="my-auto flex w-1/12 pl-8">
+                    <div className="my-auto flex w-1/12 pl-8 mr-4 opacity-0 group-hover:opacity-100">
                         <div className="self-center hover:bg-gray-200 rounded-md cursor-pointer w-8">
                             <ContextMenu menuEntries={gitProviderMenu(ap)}>
                                 <img className="w-8 h-8 p-1" src={ThreeDots} alt="Actions" />
@@ -355,21 +355,31 @@ function GitIntegrations() {
             </Modal>
         )}
 
-        <h3 className="flex-grow self-center">Git Integrations</h3>
-        <h2>Manage git integrations for GitLab or GitHub self-hosted instances.</h2>
+        <div className="flex items-start sm:justify-between mb-2">
+            <div>
+                <h3>Git Integrations</h3>
+                <h2 className="text-gray-500">Manage git integrations for GitLab or GitHub self-hosted instances.</h2>
+            </div>
+            {providers.length !== 0
+            ?
+            <div className="mt-3 flex mt-0">
+                <button onClick={() => setModal({ mode: "new" })} className="ml-2 font-medium">New Integration</button>
+            </div>
+            : null}
+        </div>
 
         {providers && providers.length === 0 && (
             <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100">
                 <div className="m-auto text-center">
                     <h3 className="self-center text-gray-500 mb-4">No Git Integrations</h3>
                     <div className="text-gray-500 mb-6">In addition to the default Git Providers you can authorize<br /> with a self hosted instace of a provider.</div>
-                    <button className="self-center" onClick={() => setModal({ mode: "new" })}>New Git Integration</button>
+                    <button className="self-center" onClick={() => setModal({ mode: "new" })}>New Integration</button>
                 </div>
             </div>
         )}
         <div className="flex flex-col pt-6 space-y-2">
             {providers && providers.map(ap => (
-                <div key={"ap-" + ap.id} className="flex-grow flex flex-row hover:bg-gray-100 rounded-xl h-16 w-full">
+                <div key={"ap-" + ap.id} className="flex-grow flex flex-row hover:bg-gray-100 rounded-xl h-16 w-full transition ease-in-out group">
 
                     <div className="px-4 self-center w-1/12">
                         <div className={"rounded-full w-3 h-3 text-sm align-middle " + (ap.status === "verified" ? "bg-green-500" : "bg-gray-400")}>
@@ -382,7 +392,7 @@ function GitIntegrations() {
                     <div className="p-0 my-auto flex flex-col w-7/12">
                         <span className="my-auto truncate text-gray-500 overflow-ellipsis">{ap.host}</span>
                     </div>
-                    <div className="my-auto flex w-1/12 pl-8">
+                    <div className="my-auto flex w-1/12 pl-8 opacity-0 group-hover:opacity-100">
                         <div className="self-center hover:bg-gray-200 rounded-md cursor-pointer w-8">
                             <ContextMenu menuEntries={gitProviderMenu(ap)}>
                                 <img className="w-8 h-8 p-1" src={ThreeDots} alt="Actions" />
@@ -392,11 +402,6 @@ function GitIntegrations() {
                 </div>
             ))}
         </div>
-        {providers && providers.length > 0 && (
-            <div className="flex justify-start mt-6">
-                <button className="h-full" onClick={() => setModal({ mode: "new" })}>New Git Integration</button>
-            </div>
-        )}
     </div>);
 }
 
@@ -584,7 +589,7 @@ function GitIntegrationModal(props: ({
                 <div className="w-full relative">
                     <input name="redirectURL" disabled={true} readOnly={true} type="text" value={redirectURL} className="w-full truncate" />
                     <div className="cursor-pointer" onClick={() => copyRedirectUrl()}>
-                        <img src={copy} title="Copy the Redirect URL to clippboard." className="absolute top-1/3 right-3" />
+                        <img src={copy} title="Copy the Redirect URL to clippboard" className="absolute top-1/3 right-3" />
                     </div>
                 </div>
                 <span className="text-gray-500 text-sm">{getRedirectUrlDescription(type, host)}</span>
diff --git a/components/dashboard/src/settings/SettingsPage.tsx b/components/dashboard/src/settings/SettingsPage.tsx
index b16ffcef78280c..6f546c73c520ba 100644
--- a/components/dashboard/src/settings/SettingsPage.tsx
+++ b/components/dashboard/src/settings/SettingsPage.tsx
@@ -37,7 +37,7 @@ export function SettingsPage(p: Props) {
                     })}
                 </ul>
             </div>
-            <div className='ml-32 w-full pt-1'>
+            <div className='ml-32 w-full pt-1 mb-40'>
                 {p.children}
             </div>
         </div>
diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css
index 0b2ec6827a87c2..2d1a816fae4e0a 100644
--- a/components/dashboard/src/tailwind.output.css
+++ b/components/dashboard/src/tailwind.output.css
@@ -788,7 +788,7 @@ h3 {
 }
 
 h4 {
-  font-weight: 500;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding-bottom: 0.5rem;
@@ -897,6 +897,10 @@ button:focus {
 button {
   --tw-text-opacity: 1;
   color: rgba(245, 245, 244, var(--tw-text-opacity));
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 button.secondary {
@@ -979,10 +983,6 @@ input[type=text], input[type=password], select {
   border-radius: 0.375rem;
   border-width: 1px;
   display: block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
 }
 
 input[type=text]:focus, input[type=password]:focus, select:focus {
diff --git a/components/dashboard/src/workspaces/StartWorkspaceModal.tsx b/components/dashboard/src/workspaces/StartWorkspaceModal.tsx
index ec7d74a94062ef..4789df633d4dfc 100644
--- a/components/dashboard/src/workspaces/StartWorkspaceModal.tsx
+++ b/components/dashboard/src/workspaces/StartWorkspaceModal.tsx
@@ -61,14 +61,14 @@ export function StartWorkspaceModal(p: StartWorkspaceModalProps) {
             <div className="space-y-2 mt-4 overflow-y-scroll h-80 pr-2">
                 {list.length > 0 ? list :
                     (selection === 'Recent' ?
-                        <div className="flex flex-col pt-12 items-center px-2">
+                        <div className="flex flex-col pt-10 items-center px-2">
                             <h3 className="mb-2 text-gray-500">No Recent Projects</h3>
                             <p className="text-center">Projects you use frequently will show up here.</p>
                             <p className="text-center">Prefix a git repository URL with gitpod.io/# or start with an example.</p>
                             <button onClick={() => setSelection('Examples')} className="font-medium mt-8">Select Example</button>
                         </div> :
                         <div className="flex flex-col pt-10 items-center px-2">
-                            <h3 className="mb-2">No Example Projects</h3>
+                            <h3 className="mb-2 text-gray-500">No Example Projects</h3>
                             <p className="text-center">Sorry there seem to be no example projects, that work with your current git provider.</p>
                         </div>)
                 }
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index 2a997a1cd9f140..b42555d23fd44f 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -117,7 +117,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
             </div>
             <div className="flex w-4/12 truncate overflow-ellipsis">
                 <div className="flex flex-col">
-                    <div className="font-medium text-gray-500 overflow-ellipsis truncate">{ws.description}</div>
+                    <div className="text-gray-500 overflow-ellipsis truncate">{ws.description}</div>
                     <a href={ws.contextURL}>
                         <div className="text-sm text-gray-400 overflow-ellipsis truncate hover:text-blue-600">{ws.contextURL}</div>
                     </a>
@@ -125,7 +125,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
             </div>
             <div className="flex w-2/12 truncate" onClick={numberOfChanges > 0 ? showChanges : undefined}>
                 <div className="flex flex-col">
-                    <div className="font-medium text-gray-500 truncate">{currentBranch}</div>
+                    <div className="text-gray-500 truncate">{currentBranch}</div>
                     {
                         numberOfChanges > 0 ?
                             <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>
@@ -139,7 +139,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
                     <div className="text-sm w-full text-gray-400 truncate">{moment(WorkspaceInfo.lastActiveISODate(desc)).fromNow()}</div>
                 </Tooltip>
             </div>
-            <div className="flex w-8 self-center hover:bg-gray-200 rounded-md cursor-pointer">
+            <div className="flex w-8 self-center hover:bg-gray-200 rounded-md cursor-pointer opacity-0 group-hover:opacity-100">
                 <ContextMenu menuEntries={menuEntries}>
                     <img className="w-8 h-8 p-1" src={ThreeDots} alt="Actions" />
                 </ContextMenu>
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index 0f79a0e0350017..a435455c83c33b 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -75,7 +75,7 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                 </div>
                 <div className="flex-1" />
                 <div className="py-3">
-                    <DropDown prefix="Filter: " contextMenuWidth="w-32" entries={[{
+                    <DropDown prefix="Filter: " contextMenuWidth="w-32" activeEntry={wsModel?.active ? 'Active' : 'All'} entries={[{
                         title: 'Active',
                         onClick: onActive
                     }, {
@@ -142,11 +142,14 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                     </div>
                     :
                     <div className="lg:px-28 px-10 flex flex-col space-y-2">
-                        <div className="px-6 py-3 flex justify-between space-x-2 text-sm text-gray-400 border-t border-gray-200 h-96">
+                        <div className="px-6 py-3 flex justify-between space-x-2 text-gray-400 border-t border-gray-200 h-96">
                             <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={this.showStartWSModal}>New Workspace</button>
+                                <h3 className="text-center pb-3 text-gray-500">No Active Workspaces</h3>
+                                <div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or create 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>
+                                <span>
+                                    <button onClick={this.showStartWSModal} className="font-medium">New Workspace</button>
+                                    {wsModel.getAllFetchedWorkspaces().size > 0 ? <button className="secondary ml-2" onClick={onAll}>View All Workspaces</button>:null}
+                                </span>
                             </div>
                         </div>
                     </div>