diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ac9a2c48e3463..76a42c9d2b551d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 
 ## June 2021
 
+- Adding `ItemsList` component as a more maintainable and consistent way to render a list of workspaces, git integrations, environment variables, etc. ([#4454](https://github.com/gitpod-io/gitpod/pull/4454))
 - Improve backup stability when pods get evicted ([#4405](https://github.com/gitpod-io/gitpod/pull/4405))
 - Fix text color in workspaces list for dark theme ([#4410](https://github.com/gitpod-io/gitpod/pull/4410))
 - Better reflect incremental prebuilds in prebuilt workspace logs ([#4293](https://github.com/gitpod-io/gitpod/pull/4293))
diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index abd735000e1565..b4b1d4935b1657 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 export interface ContextMenuProps {
-    children: React.ReactChild[] | React.ReactChild;
+    children?: React.ReactChild[] | React.ReactChild;
     menuEntries: ContextMenuEntry[];
     width?: string;
 }
@@ -57,13 +57,16 @@ function ContextMenu(props: ContextMenuProps) {
 
     const menuId = String(Math.random());
 
+    // Default 'children' is the three dots hamburger button.
+    const children = props.children || <svg className="w-8 h-8 p-1 text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Actions</title><g fill="currentColor" transform="rotate(90 12 12)"><circle cx="1" cy="1" r="2" transform="translate(5 11)" /><circle cx="1" cy="1" r="2" transform="translate(11 11)" /><circle cx="1" cy="1" r="2" transform="translate(17 11)" /></g></svg>;
+
     return (
         <div className="relative cursor-pointer">
             <div onClick={(e) => {
                 toggleExpanded();
                 e.stopPropagation();
             }}>
-                {props.children}
+                {children}
             </div>
             {expanded ?
                 <div className={`mt-2 z-50 ${props.width || 'w-48'} bg-white dark:bg-gray-900 absolute right-0 flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg truncated`}>
diff --git a/components/dashboard/src/components/ItemsList.tsx b/components/dashboard/src/components/ItemsList.tsx
new file mode 100644
index 00000000000000..dc58ba532cfda0
--- /dev/null
+++ b/components/dashboard/src/components/ItemsList.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2021 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 ContextMenu, { ContextMenuEntry } from "./ContextMenu"
+
+export function ItemsList(props: {
+    children?: React.ReactNode;
+    className?: string;
+}) {
+    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;
+}) {
+    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";
+    return <div className={`flex flex-grow flex-row w-full px-3 py-3 justify-between transition ease-in-out group ${props.header ? headerClassName : notHeaderClassName} ${props.className || ""}`}>
+        {props.children}
+    </div>;
+}
+
+export function ItemField(props: {
+    children?: React.ReactNode;
+    className?: string;
+}) {
+    return <div className={`flex-grow my-auto mx-1 ${props.className || ""}`}>
+        {props.children}
+    </div>;
+}
+
+export function ItemFieldIcon(props: {
+    children?: React.ReactNode;
+    className?: string;
+}) {
+    return <div className={`flex self-center w-8 ${props.className || ""}`}>
+        {props.children}
+    </div>;
+}
+
+export function ItemFieldContextMenu(props: {
+    menuEntries?: ContextMenuEntry[];
+    className?: string;
+}) {
+    return <div className={`flex self-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer w-8 ${props.className || ""}`}>
+        {!props.menuEntries ? null : <ContextMenu menuEntries={props.menuEntries} />}
+    </div>;
+}
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
index a3e546c9c4d1c5..521f299983f19c 100644
--- a/components/dashboard/src/settings/EnvironmentVariables.tsx
+++ b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -5,13 +5,13 @@
  */
 
 import { UserEnvVarValue } from "@gitpod/gitpod-protocol";
-import { useEffect, useRef, useState } from "react";
-import ContextMenu from "../components/ContextMenu";
+import React, { useEffect, useRef, useState } from "react";
+import ConfirmationModal from "../components/ConfirmationModal";
+import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
 import Modal from "../components/Modal";
-import { getGitpodService } from "../service/service";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
+import { getGitpodService } from "../service/service";
 import settingsMenu from "./settings-menu";
-import ConfirmationModal from "../components/ConfirmationModal";
 
 interface EnvVarModalProps {
     envVar: UserEnvVarValue;
@@ -180,6 +180,8 @@ export default function EnvVars() {
         return '';
     };
 
+
+
     return <PageWithSubMenu subMenu={settingsMenu} title='Variables' subtitle='Configure environment variables for all workspaces.'>
         {isAddEnvVarModalVisible && <AddEnvVarModal
             save={save}
@@ -209,41 +211,31 @@ export default function EnvVars() {
                     <button onClick={add}>New Variable</button>
                 </div>
             </div>
-            : <div className="space-y-2">
-                <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 dark:border-gray-800">
-                        <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(variable => {
-                        return <div className="rounded-xl whitespace-nowrap flex space-x-2 py-3 px-3 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light transition ease-in-out group">
-                            <div className="w-5/12 m-auto overflow-ellipsis truncate">{variable.name}</div>
-                            <div className="w-5/12 m-auto overflow-ellipsis truncate text-sm text-gray-400">{variable.repositoryPattern}</div>
-                            <div className="w-2/12 flex justify-end">
-                                <div className="flex w-8 self-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer opacity-0 group-hover:opacity-100">
-                                    <ContextMenu menuEntries={[
-                                        {
-                                            title: 'Edit',
-                                            onClick: () => edit(variable),
-                                            separator: true
-                                        },
-                                        {
-                                            title: 'Delete',
-                                            customFontStyle: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300',
-                                            onClick: () => confirmDeleteVariable(variable)
-                                        },
-                                    ]}>
-                                        <svg className="w-8 h-8 p-1 text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Actions</title><g fill="currentColor" transform="rotate(90 12 12)"><circle cx="1" cy="1" r="2" transform="translate(5 11)"/><circle cx="1" cy="1" r="2" transform="translate(11 11)"/><circle cx="1" cy="1" r="2" transform="translate(17 11)"/></g></svg>
-                                    </ContextMenu>
-                                </div>
-                            </div>
-                        </div>
-                    })}
-                </div>
-            </div>
+            : <ItemsList>
+                <Item header={true}>
+                    <ItemField className="w-5/12">Name</ItemField>
+                    <ItemField className="w-5/12">Scope</ItemField>
+                    <ItemFieldContextMenu />
+                </Item>
+                {envVars.map(variable => {
+                    return <Item className="whitespace-nowrap">
+                        <ItemField className="w-5/12 overflow-ellipsis truncate">{variable.name}</ItemField>
+                        <ItemField className="w-5/12 overflow-ellipsis truncate text-sm text-gray-400">{variable.repositoryPattern}</ItemField>
+                        <ItemFieldContextMenu menuEntries={[
+                            {
+                                title: 'Edit',
+                                onClick: () => edit(variable),
+                                separator: true
+                            },
+                            {
+                                title: 'Delete',
+                                customFontStyle: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300',
+                                onClick: () => confirmDeleteVariable(variable)
+                            },
+                        ]} />
+                    </Item>
+                })}
+            </ItemsList>
         }
     </PageWithSubMenu>;
 }
\ No newline at end of file
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
index 21624aa2238429..56612383b52506 100644
--- a/components/dashboard/src/settings/Integrations.tsx
+++ b/components/dashboard/src/settings/Integrations.tsx
@@ -7,19 +7,20 @@
 import { AuthProviderEntry, AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import React, { useContext, useEffect, useState } from "react";
-import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
-import { getGitpodService, gitpodHostUrl } from "../service/service";
-import { UserContext } from "../user-context";
-import copy from '../images/copy.svg';
-import exclamation from '../images/exclamation.svg';
 import AlertBox from "../components/AlertBox";
-import Modal from "../components/Modal";
-import { openAuthorizeWindow } from "../provider-utils";
 import CheckBox from '../components/CheckBox';
+import ConfirmationModal from "../components/ConfirmationModal";
+import { ContextMenuEntry } from "../components/ContextMenu";
+import { Item, ItemField, ItemFieldContextMenu, ItemFieldIcon, ItemsList } from "../components/ItemsList";
+import Modal from "../components/Modal";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
-import settingsMenu from "./settings-menu";
+import copy from '../images/copy.svg';
+import exclamation from '../images/exclamation.svg';
+import { openAuthorizeWindow } from "../provider-utils";
+import { getGitpodService, gitpodHostUrl } from "../service/service";
+import { UserContext } from "../user-context";
 import { SelectAccountModal } from "./SelectAccountModal";
-import ConfirmationModal from "../components/ConfirmationModal";
+import settingsMenu from "./settings-menu";
 
 export default function Integrations() {
 
@@ -280,36 +281,30 @@ function GitProviders() {
 
         <h3>Git Providers</h3>
         <h2>Manage permissions for git providers.</h2>
-        <div className="flex flex-col pt-6 space-y-2">
+        <ItemsList className="pt-6">
             {authProviders && authProviders.map(ap => (
-                <div key={"ap-" + ap.authProviderId} className="flex-grow flex flex-row hover:bg-gray-100 dark:hover:bg-gray-800 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")}>
+                <Item key={"ap-" + ap.authProviderId} className="h-16">
+                    <ItemFieldIcon>
+                        <div className={"rounded-full w-3 h-3 text-sm align-middle m-auto " + (isConnected(ap.authProviderId) ? "bg-green-500" : "bg-gray-400")}>
                             &nbsp;
                         </div>
-                    </div>
-                    <div className="p-0 my-auto flex flex-col xl:w-3/12 w-4/12">
+                    </ItemFieldIcon>
+                    <ItemField className="w-4/12 xl:w-3/12 flex flex-col">
                         <span className="my-auto font-medium truncate overflow-ellipsis">{ap.authProviderType}</span>
                         <span className="text-sm my-auto text-gray-400 truncate overflow-ellipsis">{ap.host}</span>
-                    </div>
-                    <div className="p-0 my-auto flex flex-col xl:w-2/12 w-6/12">
+                    </ItemField>
+                    <ItemField className="w-6/12 xl:w-3/12 flex flex-col">
                         <span className="my-auto truncate text-gray-500 overflow-ellipsis">{getUsername(ap.authProviderId) || "–"}</span>
                         <span className="text-sm my-auto text-gray-400">Username</span>
-                    </div>
-                    <div className="p-0 my-auto hidden xl:flex xl:flex-col xl:w-5/12">
+                    </ItemField>
+                    <ItemField className="hidden xl:w-5/12 xl:flex xl:flex-col">
                         <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 mr-4 opacity-0 group-hover:opacity-100 justify-end">
-                        <div className="self-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer w-8">
-                            <ContextMenu menuEntries={gitProviderMenu(ap)}>
-                                <svg className="w-8 h-8 p-1 text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Actions</title><g fill="currentColor" transform="rotate(90 12 12)"><circle cx="1" cy="1" r="2" transform="translate(5 11)" /><circle cx="1" cy="1" r="2" transform="translate(11 11)" /><circle cx="1" cy="1" r="2" transform="translate(17 11)" /></g></svg>
-                            </ContextMenu>
-                        </div>
-                    </div>
-                </div>
+                    </ItemField>
+                    <ItemFieldContextMenu menuEntries={gitProviderMenu(ap)} />
+                </Item>
             ))}
-        </div>
+        </ItemsList>
     </div>);
 }
 
@@ -399,31 +394,24 @@ function GitIntegrations() {
                 </div>
             </div>
         )}
-        <div className="flex flex-col pt-6 space-y-2">
+        <ItemsList className="pt-6">
             {providers && providers.map(ap => (
-                <div key={"ap-" + ap.id} className="flex-grow flex flex-row hover:bg-gray-100 dark:hover:bg-gray-800 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")}>
+                <Item key={"ap-" + ap.id} className="h-16">
+                    <ItemFieldIcon>
+                        <div className={"rounded-full w-3 h-3 text-sm align-middle m-auto " + (ap.status === "verified" ? "bg-green-500" : "bg-gray-400")}>
                             &nbsp;
                         </div>
-                    </div>
-                    <div className="p-0 my-auto flex flex-col w-3/12">
-                        <span className="my-auto font-medium truncate overflow-ellipsis">{ap.type}</span>
-                    </div>
-                    <div className="p-0 my-auto flex flex-col w-7/12">
+                    </ItemFieldIcon>
+                    <ItemField className="w-3/12 flex flex-col">
+                        <span className="font-medium truncate overflow-ellipsis">{ap.type}</span>
+                    </ItemField>
+                    <ItemField className="w-7/12 flex flex-col">
                         <span className="my-auto truncate text-gray-500 overflow-ellipsis">{ap.host}</span>
-                    </div>
-                    <div className="my-auto flex w-1/12 mr-4 opacity-0 group-hover:opacity-100 justify-end">
-                        <div className="self-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer w-8">
-                            <ContextMenu menuEntries={gitProviderMenu(ap)}>
-                                <svg className="w-8 h-8 p-1 text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Actions</title><g fill="currentColor" transform="rotate(90 12 12)"><circle cx="1" cy="1" r="2" transform="translate(5 11)" /><circle cx="1" cy="1" r="2" transform="translate(11 11)" /><circle cx="1" cy="1" r="2" transform="translate(17 11)" /></g></svg>
-                            </ContextMenu>
-                        </div>
-                    </div>
-                </div>
+                    </ItemField>
+                    <ItemFieldContextMenu menuEntries={gitProviderMenu(ap)} />
+                </Item>
             ))}
-        </div>
+        </ItemsList>
     </div>);
 }
 
diff --git a/components/dashboard/src/settings/Teams.tsx b/components/dashboard/src/settings/Teams.tsx
index 3bbc72883c7944..ff6685ad890ff1 100644
--- a/components/dashboard/src/settings/Teams.tsx
+++ b/components/dashboard/src/settings/Teams.tsx
@@ -512,9 +512,7 @@ function AllTeams() {
                         </div>
                         <div className="my-auto flex w-1/12 mr-4 opacity-0 group-hover:opacity-100 justify-end">
                             <div className="self-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer w-8">
-                                <ContextMenu menuEntries={subscriptionMenu(sub)}>
-                                <svg className="w-8 h-8 p-1 text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Actions</title><g fill="currentColor" transform="rotate(90 12 12)"><circle cx="1" cy="1" r="2" transform="translate(5 11)"/><circle cx="1" cy="1" r="2" transform="translate(11 11)"/><circle cx="1" cy="1" r="2" transform="translate(17 11)"/></g></svg>
-                                </ContextMenu>
+                                <ContextMenu menuEntries={subscriptionMenu(sub)} />
                             </div>
                         </div>
                     </div>
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index f0c9ac9c157f85..89faa69d7855fb 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -6,13 +6,14 @@
 
 import { CommitContext, Workspace, WorkspaceInfo, WorkspaceInstance, WorkspaceInstancePhase } from '@gitpod/gitpod-protocol';
 import { GitpodHostUrl } from '@gitpod/gitpod-protocol/lib/util/gitpod-host-url';
-import ContextMenu, { ContextMenuEntry } from '../components/ContextMenu';
 import moment from 'moment';
-import { useState } from 'react';
-import { WorkspaceModel } from './workspace-model';
+import React, { useState } from 'react';
+import ConfirmationModal from '../components/ConfirmationModal';
+import { ContextMenuEntry } from '../components/ContextMenu';
+import { Item, ItemField, ItemFieldContextMenu, ItemFieldIcon } from '../components/ItemsList';
 import PendingChangesDropdown from '../components/PendingChangesDropdown';
 import Tooltip from '../components/Tooltip';
-import ConfirmationModal from '../components/ConfirmationModal';
+import { WorkspaceModel } from './workspace-model';
 
 function getLabel(state: WorkspaceInstancePhase) {
     return state.substr(0,1).toLocaleUpperCase() + state.substr(1);
@@ -80,38 +81,31 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
         );
     }
     const project = getProject(ws);
-    return <div>
-        <div className="rounded-xl whitespace-nowrap flex space-x-2 py-6 px-6 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
-            <div className="pr-3 self-center">
-                <WorkspaceStatusIndicator instance={desc?.latestInstance} />
-            </div>
-            <div className="flex flex-col w-3/12">
-                <a href={startUrl.toString()}><div className="font-medium text-gray-800 dark:text-gray-200 truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.id}</div></a>
-                <a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div></a>
-            </div>
-            <div className="flex w-4/12 truncate overflow-ellipsis">
-                <div className="flex flex-col">
-                    <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{ws.description}</div>
-                    <a href={ws.contextURL}>
-                        <div className="text-sm text-gray-400 dark:text-gray-500 overflow-ellipsis truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
-                    </a>
-                </div>
-            </div>
-            <div className="flex flex-col items-start w-2/12">
-                <div className="text-gray-500 dark:text-gray-400 truncate">{currentBranch}</div>
-                <PendingChangesDropdown workspaceInstance={desc.latestInstance} />
-            </div>
-            <div className="flex w-2/12 self-center">
-                <Tooltip content={`Created ${moment(desc.workspace.creationTime).fromNow()}`}>
-                    <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 dark:hover:bg-gray-700 rounded-md cursor-pointer opacity-0 group-hover:opacity-100">
-                <ContextMenu menuEntries={menuEntries}>
-                    <svg className="w-8 h-8 p-1 text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Actions</title><g fill="currentColor" transform="rotate(90 12 12)"><circle cx="1" cy="1" r="2" transform="translate(5 11)"/><circle cx="1" cy="1" r="2" transform="translate(11 11)"/><circle cx="1" cy="1" r="2" transform="translate(17 11)"/></g></svg>
-                </ContextMenu>
-            </div>
-        </div>
+
+    return <Item className="whitespace-nowrap py-6 px-6">
+        <ItemFieldIcon>
+            <WorkspaceStatusIndicator instance={desc?.latestInstance} />
+        </ItemFieldIcon>
+        <ItemField className="w-3/12 flex flex-col">
+            <a href={startUrl.toString()}><div className="font-medium text-gray-800 dark:text-gray-200 truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.id}</div></a>
+            <a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div></a>
+        </ItemField>
+        <ItemField className="w-4/12 flex flex-col">
+            <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{ws.description}</div>
+            <a href={ws.contextURL}>
+                <div className="text-sm text-gray-400 dark:text-gray-500 overflow-ellipsis truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
+            </a>
+        </ItemField>
+        <ItemField className="w-2/12 flex flex-col">
+            <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{currentBranch}</div>
+            <PendingChangesDropdown workspaceInstance={desc.latestInstance} />
+        </ItemField>
+        <ItemField className="w-2/12 flex">
+            <Tooltip content={`Created ${moment(desc.workspace.creationTime).fromNow()}`}>
+                <div className="text-sm w-full text-gray-400 overflow-ellipsis truncate">{moment(WorkspaceInfo.lastActiveISODate(desc)).fromNow()}</div>
+            </Tooltip>
+        </ItemField>
+        <ItemFieldContextMenu menuEntries={menuEntries} />
         {isModalVisible && <ConfirmationModal
             title="Delete Workspace"
             areYouSureText="Are you sure you want to delete this workspace?"
@@ -124,7 +118,7 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
             onClose={() => setModalVisible(false)}
             onConfirm={() => model.deleteWorkspace(ws.id)}
         />}
-    </div>;
+    </Item>;
 }
 
 export function getProject(ws: Workspace) {
@@ -156,8 +150,9 @@ export function WorkspaceStatusIndicator({instance}: {instance?: WorkspaceInstan
             break;
         }
     }
-    return <Tooltip content={getLabel(state)}>
-        <div className={stateClassName}>
-        </div>
-    </Tooltip>;
+    return <div className="m-auto">
+        <Tooltip content={getLabel(state)}>
+            <div className={stateClassName} />
+        </Tooltip>
+    </div>;
 }
\ No newline at end of file
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index 025281e98bab1f..95d025385fe145 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -13,6 +13,7 @@ import { WorkspaceModel } from "./workspace-model";
 import { WorkspaceEntry } from "./WorkspaceEntry";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import {StartWorkspaceModal, WsStartEntry} from "./StartWorkspaceModal";
+import { Item, ItemField, ItemFieldContextMenu, ItemFieldIcon, ItemsList } from "../components/ItemsList";
 
 export interface WorkspacesProps {
 }
@@ -104,33 +105,33 @@ export default class Workspaces extends React.Component<WorkspacesProps, Workspa
             </div>
             {wsModel && (
                 this.state?.workspaces.length > 0 || wsModel.searchTerm ?
-                    <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-b border-gray-200 dark:border-gray-800">
-                            <div className="w-6"></div>
-                            <div className="w-3/12">Name</div>
-                            <div className="w-4/12">Context</div>
-                            <div className="w-2/12">Pending Changes</div>
-                            <div className="w-2/12">Last Start</div>
-                            <div className="w-8"></div>
-                        </div>
+                    <ItemsList className="lg:px-28 px-10">
+                        <Item header={true} className="px-6">
+                            <ItemFieldIcon />
+                            <ItemField className="w-3/12">Name</ItemField>
+                            <ItemField className="w-4/12">Context</ItemField>
+                            <ItemField className="w-2/12">Pending Changes</ItemField>
+                            <ItemField className="w-2/12">Last Start</ItemField>
+                            <ItemFieldContextMenu />
+                        </Item>
                         {
                             wsModel.active || wsModel.searchTerm ? null :
-                                <div className="whitespace-nowrap flex space-x-2 py-6 px-6 w-full justify-between bg-gitpod-kumquat-light rounded-xl">
-                                    <div className="pr-3 self-center w-6">
-                                        <img src={exclamation} />
-                                    </div>
-                                    <div className="flex-1 flex flex-col overflow-x-auto">
+                                <Item className="w-full bg-gitpod-kumquat-light py-6 px-6">
+                                    <ItemFieldIcon>
+                                        <img src={exclamation} alt="Exclamation Mark" className="m-auto" />
+                                    </ItemFieldIcon>
+                                    <ItemField className=" flex flex-col">
                                         <div className="text-gitpod-red font-semibold">Garbage Collection</div>
                                         <p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-600 underline underline-thickness-thin underline-offset-small hover:text-gray-800 hover:dark:text-gray-100" href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection">Learn more</a></p>
-                                    </div>
-                                </div>
+                                    </ItemField>
+                                </Item>
                         }
                         {
                             this.state?.workspaces.map(e => {
                                 return <WorkspaceEntry key={e.workspace.id} desc={e} model={wsModel} stopWorkspace={wsId => getGitpodService().server.stopWorkspace(wsId)}/>
                             })
                         }
-                    </div>
+                    </ItemsList>
                     :
                     <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-gray-400 border-t border-gray-200 dark:border-gray-800 h-96">