diff --git a/components/dashboard/src/components/Loader.tsx b/components/dashboard/src/components/Loader.tsx
new file mode 100644
index 00000000000000..34da05be543519
--- /dev/null
+++ b/components/dashboard/src/components/Loader.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { ReactComponent as Spinner } from "../icons/Spinner.svg";
+
+export function SpinnerLoader(props: { content?: string }) {
+    return (
+        <div className="flex items-center justify-center space-x-2 text-gray-400 text-sm pt-16 pb-40">
+            <Spinner className="h-4 w-4 animate-spin" />
+            {props.content && <span>{props.content}</span>}
+        </div>
+    );
+}
+
+interface SpinnerContentProps {
+    loading?: boolean;
+    content?: string;
+    children: React.ReactChild[] | React.ReactChild | React.ReactNode;
+}
+export function SpinnerOverlayLoader(props: SpinnerContentProps) {
+    return (
+        <div className="relative">
+            {props.loading && (
+                <div className="absolute h-full w-full">
+                    <div className="flex items-center justify-center space-x-2 text-gray-400 text-sm h-full">
+                        <Spinner className="h-4 w-4 animate-spin" />
+                        {props.content && <span>{props.content}</span>}
+                    </div>
+                </div>
+            )}
+            <div className={props.loading ? "opacity-40 select-none pointer-events-none" : ""}>{props.children}</div>
+        </div>
+    );
+}
diff --git a/components/dashboard/src/components/PillLabel.tsx b/components/dashboard/src/components/PillLabel.tsx
index 3000b1777df748..5f98e16d850022 100644
--- a/components/dashboard/src/components/PillLabel.tsx
+++ b/components/dashboard/src/components/PillLabel.tsx
@@ -4,21 +4,27 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+export type PillType = "info" | "warn" | "success";
+
+const PillClsMap: Record<PillType, string> = {
+    info: "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100",
+    warn: "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100",
+    success: "bg-green-100 text-green-700 dark:bg-green-600 dark:text-green-100",
+};
+
 /**
  * Renders a pill.
  *
  * **type**\
  * info: Renders a blue pile label (default).\
  * warn: Renders an orange pile label.
+ * success: Renders an green pile label.
  *
  * **className**\
  * Add additional css classes to style this component.
  */
-export default function PillLabel(props: { children?: React.ReactNode; type?: "info" | "warn"; className?: string }) {
-    const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100";
-    const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100";
-    const style = `px-2 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
-        props.className
-    }`;
+export default function PillLabel(props: { children?: React.ReactNode; type?: PillType; className?: string }) {
+    const type = props.type || "info";
+    const style = `px-2 py-1 text-sm uppercase rounded-xl ${PillClsMap[type]} ${props.className}`;
     return <span className={style}>{props.children}</span>;
 }
diff --git a/components/dashboard/src/settings/PersonalAccessTokens.tsx b/components/dashboard/src/settings/PersonalAccessTokens.tsx
index d994e61c88506c..ea391388dbd170 100644
--- a/components/dashboard/src/settings/PersonalAccessTokens.tsx
+++ b/components/dashboard/src/settings/PersonalAccessTokens.tsx
@@ -13,15 +13,24 @@ import Modal from "../components/Modal";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 import { personalAccessTokensService } from "../service/public-api";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
-import { settingsPathPersonalAccessTokenCreate, settingsPathPersonalAccessTokens } from "./settings.routes";
+import {
+    settingsPathPersonalAccessTokenCreate,
+    settingsPathPersonalAccessTokens,
+    settingsPathPersonalAccessTokenEdit,
+} from "./settings.routes";
 import arrowDown from "../images/sort-arrow.svg";
+import { ReactComponent as ExclamationIcon } from "../images/exclamation.svg";
 import { Timestamp } from "@bufbuild/protobuf";
 import Alert from "../components/Alert";
 import { InputWithCopy } from "../components/InputWithCopy";
 import { copyToClipboard } from "../utils";
-import TokenEntry from "./TokenEntry";
+import { ContextMenuEntry } from "../components/ContextMenu";
+import PillLabel from "../components/PillLabel";
+import dayjs from "dayjs";
+import { ItemFieldContextMenu } from "../components/ItemsList";
+import { SpinnerLoader, SpinnerOverlayLoader } from "../components/Loader";
 
-function PersonalAccessTokens() {
+export default function PersonalAccessTokens() {
     const { enablePersonalAccessTokens } = useContext(FeatureFlagContext);
 
     if (!enablePersonalAccessTokens) {
@@ -37,10 +46,60 @@ function PersonalAccessTokens() {
     );
 }
 
-interface EditPATData {
+const personalAccessTokenNameRegex = /^[a-zA-Z0-9-_ ]{3,63}$/;
+
+enum TokenAction {
+    Create = "CREATED",
+    Regerenrate = "REGENERATED",
+    Delete = "DELETE",
+}
+
+const TokenExpirationDays = [
+    { value: "7", label: "7 Days" },
+    { value: "30", label: "30 Days" },
+    { value: "60", label: "60 Days" },
+    { value: "180", label: "180 Days" },
+];
+
+interface PermissionDetail {
     name: string;
-    expirationDays: number;
-    expirationDate: Date;
+    description: string;
+    scopes: string[];
+}
+
+const AllPermissions: PermissionDetail[] = [
+    {
+        name: "Access the user's API",
+        description: "Grant complete read and write access to the API.",
+        // TODO: what if scopes are duplicate? maybe use a key: uniq string; to filter will be better
+        scopes: ["function:*", "resource:default"],
+    },
+];
+
+interface DateSelectorProps {
+    title: string;
+    description: string;
+    options: { value: string; label: string }[];
+    value?: string;
+    onChange: (value: string) => void;
+}
+
+function DateSelector(props: DateSelectorProps) {
+    return (
+        <div>
+            <label htmlFor={props.title} className="font-semibold">
+                {props.title}
+            </label>
+            <select name={props.title} value={props.value} onChange={(e) => props.onChange(e.target.value)}>
+                {props.options.map((o) => (
+                    <option key={o.value} value={o.value}>
+                        {o.label}
+                    </option>
+                ))}
+            </select>
+            <p className="text-gray-500 dark:text-gray-400 mt-2">{props.description}</p>
+        </div>
+    );
 }
 
 interface TokenModalProps {
@@ -49,21 +108,19 @@ interface TokenModalProps {
     description: string;
     descriptionImportant: string;
     actionDescription: string;
-    children?: React.ReactNode;
-    onSave?: () => void;
-    onClose?: () => void;
+    showDateSelector?: boolean;
+    onSave: (data: { expirationDate: Date }) => void;
+    onClose: () => void;
 }
 
-enum Method {
-    Create = "CREATED",
-    Regerenrate = "REGENERATED",
-}
+function ShowTokenModal(props: TokenModalProps) {
+    const [expiration, setExpiration] = useState({
+        expirationDays: "30",
+        expirationDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+    });
 
-export function ShowTokenModal(props: TokenModalProps) {
     const onEnter = () => {
-        if (props.onSave) {
-            props.onSave();
-        }
+        props.onSave({ expirationDate: expiration.expirationDate });
         return true;
     };
 
@@ -71,22 +128,15 @@ export function ShowTokenModal(props: TokenModalProps) {
         <Modal
             title={props.title}
             buttons={[
-                <button
-                    className="secondary"
-                    onClick={() => {
-                        props.onClose && props.onClose();
-                    }}
-                >
+                <button className="secondary" onClick={() => props.onClose()}>
                     Cancel
                 </button>,
-                <button className="danger" onClick={props.onSave}>
+                <button className="danger" onClick={onEnter}>
                     {props.actionDescription}
                 </button>,
             ]}
             visible={true}
-            onClose={() => {
-                props.onClose && props.onClose();
-            }}
+            onClose={() => props.onClose()}
             onEnter={onEnter}
         >
             <div className="text-gray-500 dark:text-gray-400 text-md">
@@ -95,31 +145,56 @@ export function ShowTokenModal(props: TokenModalProps) {
             <div className="p-4 mt-2 rounded-xl bg-gray-50 dark:bg-gray-800">
                 <div className="font-semibold text-gray-700 dark:text-gray-200">{props.token.name}</div>
                 <div className="font-medium text-gray-400 dark:text-gray-300">
-                    Expires on{" "}
-                    {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(props.token.expirationTime?.toDate())}
+                    Expires on {dayjs(props.token.expirationTime!.toDate()).format("MMM D, YYYY")}
                 </div>
             </div>
-            {props.children ? <div className="p-4">{props.children}</div> : <></>}
+            <>
+                {props.showDateSelector && (
+                    <DateSelector
+                        title="Expiration Date"
+                        description={`The token will expire on ${dayjs(expiration.expirationDate).format(
+                            "MMM D, YYYY",
+                        )}`}
+                        options={TokenExpirationDays}
+                        value={TokenExpirationDays.find((i) => i.value === expiration.expirationDays)?.value}
+                        onChange={(value) =>
+                            setExpiration({
+                                expirationDays: value,
+                                expirationDate: new Date(Date.now() + Number(value) * 24 * 60 * 60 * 1000),
+                            })
+                        }
+                    />
+                )}
+            </>
         </Modal>
     );
 }
 
+interface EditPATData {
+    name: string;
+    expirationDays: string;
+    expirationDate: Date;
+    scopes: Set<string>;
+}
+
 export function PersonalAccessTokenCreateView() {
     const { enablePersonalAccessTokens } = useContext(FeatureFlagContext);
 
-    const params = useParams();
+    const params = useParams<{ tokenId?: string }>();
     const history = useHistory<TokenInfo>();
 
-    const [editTokenID, setEditTokenID] = useState<null | string>(null);
+    const [loading, setLoading] = useState(false);
     const [errorMsg, setErrorMsg] = useState("");
-    const [value, setValue] = useState<EditPATData>({
+    const [editToken, setEditToken] = useState<PersonalAccessToken>();
+    const [token, setToken] = useState<EditPATData>({
         name: "",
-        expirationDays: 30,
+        expirationDays: "30",
         expirationDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+        scopes: new Set<string>(),
     });
+    const [modalData, setModalData] = useState<{ token: PersonalAccessToken }>();
 
-    const [showModal, setShowModal] = useState<boolean>(false);
-    const [modalData, setModalData] = useState<PersonalAccessToken>();
+    const isEditing = !!params.tokenId;
 
     function backToListView(tokenInfo?: TokenInfo) {
         history.push({
@@ -131,68 +206,83 @@ export function PersonalAccessTokenCreateView() {
     useEffect(() => {
         (async () => {
             try {
-                const { tokenId } = params as { tokenId: string };
+                const { tokenId } = params;
                 if (!tokenId) {
                     return;
                 }
-                setEditTokenID(tokenId);
+
+                setLoading(true);
                 const resp = await personalAccessTokensService.getPersonalAccessToken({ id: tokenId });
-                const token = resp.token;
-                value.name = token!.name;
-                setModalData(token!);
+                const token = resp.token!;
+                setEditToken(token);
+                update({
+                    name: token.name,
+                    scopes: new Set(token.scopes),
+                });
             } catch (e) {
                 setErrorMsg(e.message);
             }
+            setLoading(false);
         })();
     }, []);
 
-    const update = (change: Partial<EditPATData>) => {
+    const update = (change: Partial<EditPATData>, addScopes?: string[], removeScopes?: string[]) => {
         if (change.expirationDays) {
-            change.expirationDate = new Date(Date.now() + change.expirationDays * 24 * 60 * 60 * 1000);
+            change.expirationDate = new Date(Date.now() + Number(change.expirationDays) * 24 * 60 * 60 * 1000);
+        }
+        const data = { ...token, ...change };
+        if (addScopes) {
+            addScopes.forEach((s) => data.scopes.add(s));
+        }
+        if (removeScopes) {
+            removeScopes.forEach((s) => data.scopes.delete(s));
         }
         setErrorMsg("");
-        setValue({ ...value, ...change });
+        setToken(data);
     };
 
-    const regenerate = async () => {
-        if (!editTokenID) {
-            return;
-        }
+    const handleRegenerate = async (tokenId: string, expirationDate: Date) => {
         try {
             const resp = await personalAccessTokensService.regeneratePersonalAccessToken({
-                id: editTokenID,
-                expirationTime: Timestamp.fromDate(value.expirationDate),
+                id: tokenId,
+                expirationTime: Timestamp.fromDate(expirationDate),
             });
-            backToListView({ method: Method.Regerenrate, data: resp.token! });
+            backToListView({ method: TokenAction.Regerenrate, data: resp.token! });
         } catch (e) {
             setErrorMsg(e.message);
         }
     };
 
     const handleConfirm = async () => {
-        if (value.name.length < 3) {
-            setErrorMsg("Token name should have at least three characters.");
+        if (/^\s+/.test(token.name) || /\s+$/.test(token.name)) {
+            setErrorMsg("Token name should not start or end with a space");
+            return;
+        }
+        if (!personalAccessTokenNameRegex.test(token.name)) {
+            setErrorMsg(
+                "Token name should have a length between 3 and 63 characters, it can only contain letters, numbers, underscore and space characters",
+            );
             return;
         }
         try {
-            const resp = editTokenID
+            const resp = editToken
                 ? await personalAccessTokensService.updatePersonalAccessToken({
                       token: {
-                          id: editTokenID,
-                          name: value.name,
-                          scopes: ["function:*", "resource:default"],
+                          id: editToken.id,
+                          name: token.name,
+                          scopes: Array.from(token.scopes),
                       },
                       updateMask: { paths: ["name", "scopes"] },
                   })
                 : await personalAccessTokensService.createPersonalAccessToken({
                       token: {
-                          name: value.name,
-                          expirationTime: Timestamp.fromDate(value.expirationDate),
-                          scopes: ["function:*", "resource:default"],
+                          name: token.name,
+                          expirationTime: Timestamp.fromDate(token.expirationDate),
+                          scopes: Array.from(token.scopes),
                       },
                   });
 
-            backToListView(editTokenID ? undefined : { method: Method.Create, data: resp.token! });
+            backToListView(isEditing ? undefined : { method: TokenAction.Create, data: resp.token! });
         } catch (e) {
             setErrorMsg(e.message);
         }
@@ -214,10 +304,10 @@ export function PersonalAccessTokenCreateView() {
                             </div>
                         </button>
                     </Link>
-                    {editTokenID && (
+                    {editToken && (
                         <button
                             className="danger bg-red-50 dark:bg-red-600 text-red-600 dark:text-red-50"
-                            onClick={() => setShowModal(true)}
+                            onClick={() => setModalData({ token: editToken })}
                         >
                             Regenerate
                         </button>
@@ -225,140 +315,177 @@ export function PersonalAccessTokenCreateView() {
                 </div>
                 <>
                     {errorMsg.length > 0 && (
-                        <Alert type="error" className="mb-2">
+                        <Alert type="error" className="mb-2 max-w-md">
                             {errorMsg}
                         </Alert>
                     )}
                 </>
                 <>
-                    {showModal && (
+                    {modalData && (
                         <ShowTokenModal
-                            token={modalData!}
+                            token={modalData.token}
                             title="Regenerate Token"
                             description="Are you sure you want to regenerate this access token?"
                             descriptionImportant="Any applications using this token will no longer be able to access the Gitpod API."
                             actionDescription="Regenerate Token"
-                            onSave={() => {
-                                regenerate();
-                            }}
-                            onClose={() => {
-                                setShowModal(false);
-                            }}
-                        >
-                            <div>
-                                <h4>Expiration Date</h4>
-                                <select
-                                    name="expiration"
-                                    value={value.expirationDays}
-                                    onChange={(e) => {
-                                        update({ expirationDays: Number(e.target.value) });
-                                    }}
-                                >
-                                    <option value="30">30 Days</option>
-                                    <option value="90">90 Days</option>
-                                    <option value="180">180 Days</option>
-                                </select>
-                                <p className="text-gray-500 dark:text-gray-400 mt-2">
-                                    The token will expire on{" "}
-                                    {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(value.expirationDate)}.
-                                </p>
-                            </div>
-                        </ShowTokenModal>
+                            showDateSelector
+                            onSave={({ expirationDate }) => handleRegenerate(modalData.token.id, expirationDate)}
+                            onClose={() => setModalData(undefined)}
+                        />
                     )}
                 </>
-                <div className="max-w-md mb-6">
-                    <div className="flex flex-col mb-4">
-                        <h3>{editTokenID ? "Edit" : "New"} Personal Access Token</h3>
-                        {editTokenID ? (
-                            <>
-                                <h2 className="text-gray-500 dark:text-gray-400 dark:text-gray-400">
+                <SpinnerOverlayLoader content="loading access token" loading={loading}>
+                    <div className="mb-6">
+                        <div className="flex flex-col mb-4">
+                            <h3>{isEditing ? "Edit" : "New"} Personal Access Token</h3>
+                            {isEditing ? (
+                                <h2 className="text-gray-500 dark:text-gray-400">
                                     Update token name, expiration date, permissions, or regenerate token.
                                 </h2>
-                            </>
-                        ) : (
-                            <>
+                            ) : (
                                 <h2 className="text-gray-500 dark:text-gray-400">Create a new access token.</h2>
-                            </>
-                        )}
-                    </div>
-                    <div className="flex flex-col gap-4">
-                        <div>
-                            <h4>Token Name</h4>
-                            <input
-                                className="w-full"
-                                value={value.name}
-                                onChange={(e) => {
-                                    update({ name: e.target.value });
-                                }}
-                                type="text"
-                                placeholder="Token Name"
-                            />
-                            <p className="text-gray-500 dark:text-gray-400 mt-2">
-                                The application name using the token or the purpose of the token.
-                            </p>
+                            )}
                         </div>
-                        {!editTokenID && (
+                        <div className="flex flex-col gap-4">
                             <div>
-                                <h4>Expiration Date</h4>
-                                <select
-                                    name="expiration"
-                                    value={value.expirationDays}
-                                    onChange={(e) => {
-                                        update({ expirationDays: Number(e.target.value) });
+                                <h4>Token Name</h4>
+                                <input
+                                    className="max-w-md"
+                                    value={token.name}
+                                    onChange={(e) => update({ name: e.target.value })}
+                                    onKeyDown={(e) => {
+                                        if (e.key === "Enter") {
+                                            e.preventDefault();
+                                            handleConfirm();
+                                        }
                                     }}
-                                >
-                                    <option value="7">7 Days</option>
-                                    <option value="30">30 Days</option>
-                                    <option value="90">90 Days</option>
-                                    <option value="180">180 Days</option>
-                                </select>
+                                    type="text"
+                                    placeholder="Token Name"
+                                />
                                 <p className="text-gray-500 dark:text-gray-400 mt-2">
-                                    The token will expire on{" "}
-                                    {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(value.expirationDate)}.
+                                    The application name using the token or the purpose of the token.
                                 </p>
                             </div>
-                        )}
-                        <div>
-                            <h4>Permission</h4>
-                            <CheckBox
-                                className=""
-                                title="Access the user's API"
-                                desc="Grant complete read and write access to the API."
-                                checked={true}
-                                disabled={true}
-                            />
+                            {!isEditing && (
+                                <DateSelector
+                                    title="Expiration Date"
+                                    description={`The token will expire on ${dayjs(token.expirationDate).format(
+                                        "MMM D, YYYY",
+                                    )}`}
+                                    options={TokenExpirationDays}
+                                    value={TokenExpirationDays.find((i) => i.value === token.expirationDays)?.value}
+                                    onChange={(value) => {
+                                        update({ expirationDays: value });
+                                    }}
+                                />
+                            )}
+                            <div>
+                                <h4>Permission</h4>
+                                <div className="space-y-2">
+                                    {AllPermissions.map((item) => (
+                                        <CheckBox
+                                            className=""
+                                            title={item.name}
+                                            desc={item.description}
+                                            checked={item.scopes.every((s) => token.scopes.has(s))}
+                                            onChange={(e) => {
+                                                if (e.target.checked) {
+                                                    update({}, item.scopes);
+                                                } else {
+                                                    update({}, undefined, item.scopes);
+                                                }
+                                            }}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div className="flex gap-2">
-                    {editTokenID && (
-                        <Link to={settingsPathPersonalAccessTokens}>
-                            <button className="secondary" onClick={handleConfirm}>
-                                Cancel
-                            </button>
-                        </Link>
-                    )}
-                    <button onClick={handleConfirm}>{editTokenID ? "Update" : "Create"} Personal Access Token</button>
-                </div>
+                    <div className="flex gap-2">
+                        {isEditing && (
+                            <Link to={settingsPathPersonalAccessTokens}>
+                                <button className="secondary" onClick={handleConfirm}>
+                                    Cancel
+                                </button>
+                            </Link>
+                        )}
+                        <button onClick={handleConfirm} disabled={isEditing && !editToken}>
+                            {isEditing ? "Update" : "Create"} Personal Access Token
+                        </button>
+                    </div>
+                </SpinnerOverlayLoader>
             </PageWithSettingsSubMenu>
         </div>
     );
 }
 
+interface TokenEntryProps {
+    token: PersonalAccessToken;
+    menuEntries: ContextMenuEntry[];
+}
+
+function TokenEntry(props: TokenEntryProps) {
+    const expirationDay = dayjs(props.token.expirationTime!.toDate());
+    const expired = expirationDay.isBefore(dayjs());
+
+    const getScopes = () => {
+        if (!props.token.scopes) {
+            return "";
+        }
+        const permissions = AllPermissions.filter((e) => e.scopes.every((v) => props.token.scopes.includes(v)));
+        if (permissions.length > 0) {
+            return permissions.map((e) => e.name).join("\n");
+        } else {
+            return "No access";
+        }
+    };
+
+    return (
+        <>
+            <div className="rounded-xl whitespace-nowrap flex space-x-2 py-4 px-4 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
+                <div className="flex items-center pr-3 w-4/12">
+                    <span className="truncate">{props.token.name || ""}</span>
+                </div>
+                <div className="flex items-center w-4/12 text-gray-400 font-medium">
+                    <span className="truncate whitespace-pre-line">{getScopes()}</span>
+                </div>
+                <div className="flex items-center w-3/12 text-gray-400">
+                    <span className={"flex items-center gap-1 truncate" + (expired ? " text-orange-600" : "")}>
+                        <span>{expirationDay.format("MMM D, YYYY")}</span>
+                        {expired && <ExclamationIcon fill="#D97706" className="h-4 w-4" />}
+                    </span>
+                </div>
+                <div className="flex items-center justify-end w-1/12">
+                    <ItemFieldContextMenu menuEntries={props.menuEntries} />
+                </div>
+            </div>
+        </>
+    );
+}
+
 interface TokenInfo {
-    method: Method;
+    method: TokenAction;
     data: PersonalAccessToken;
 }
 
 function ListAccessTokensView() {
     const location = useLocation();
 
+    const [loading, setLoading] = useState<boolean>(false);
     const [tokens, setTokens] = useState<PersonalAccessToken[]>([]);
     const [tokenInfo, setTokenInfo] = useState<TokenInfo>();
+    const [modalData, setModalData] = useState<{ token: PersonalAccessToken; action: TokenAction }>();
+    const [errorMsg, setErrorMsg] = useState("");
 
     async function loadTokens() {
-        const response = await personalAccessTokensService.listPersonalAccessTokens({});
-        setTokens(response.tokens);
+        try {
+            setLoading(true);
+            const response = await personalAccessTokensService.listPersonalAccessTokens({});
+            setTokens(response.tokens);
+        } catch (e) {
+            setErrorMsg(e.message);
+        }
+        setLoading(false);
     }
 
     useEffect(() => {
@@ -376,11 +503,31 @@ function ListAccessTokensView() {
         copyToClipboard(tokenInfo!.data.value);
     };
 
-    const handleDeleteToken = (tokenId: string) => {
-        if (tokenId === tokenInfo?.data.id) {
-            setTokenInfo(undefined);
+    const handleDeleteToken = async (tokenId: string) => {
+        try {
+            await personalAccessTokensService.deletePersonalAccessToken({ id: tokenId });
+            if (tokenId === tokenInfo?.data.id) {
+                setTokenInfo(undefined);
+            }
+            loadTokens();
+            setModalData(undefined);
+        } catch (e) {
+            setErrorMsg(e.message);
+        }
+    };
+
+    const handleRegenerateToken = async (tokenId: string, expirationDate: Date) => {
+        try {
+            const resp = await personalAccessTokensService.regeneratePersonalAccessToken({
+                id: tokenId,
+                expirationTime: Timestamp.fromDate(expirationDate),
+            });
+            setTokenInfo({ method: TokenAction.Regerenrate, data: resp.token! });
+            loadTokens();
+            setModalData(undefined);
+        } catch (e) {
+            setErrorMsg(e.message);
         }
-        loadTokens();
     };
 
     return (
@@ -396,37 +543,35 @@ function ListAccessTokensView() {
                     </Link>
                 )}
             </div>
+            <>
+                {errorMsg.length > 0 && (
+                    <Alert type="error" className="mb-2">
+                        {errorMsg}
+                    </Alert>
+                )}
+            </>
             <>
                 {tokenInfo && (
                     <>
                         <div className="p-4 mb-4 divide-y rounded-xl bg-gray-50 dark:bg-gray-800">
                             <div className="pb-2">
                                 <div className="flex gap-2 content-center font-semibold text-gray-700 dark:text-gray-200">
-                                    <span className="ml-1">{tokenInfo.data.name}</span>
-                                    <span
-                                        className={
-                                            "font-medium px-1 py-1 rounded-full text-xs" +
-                                            (tokenInfo.method === Method.Create
-                                                ? " text-green-600 bg-green-100"
-                                                : " text-blue-600 bg-blue-100")
-                                        }
+                                    <span>{tokenInfo.data.name}</span>
+                                    <PillLabel
+                                        type={tokenInfo.method === TokenAction.Create ? "success" : "info"}
+                                        className="py-0.5 px-1"
                                     >
                                         {tokenInfo.method.toUpperCase()}
-                                    </span>
+                                    </PillLabel>
                                 </div>
-                                <div className="font-medium text-gray-400 dark:text-gray-300">
+                                <div className="text-gray-400 dark:text-gray-300">
                                     <span>
                                         Expires on{" "}
-                                        {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(
-                                            tokenInfo.data.expirationTime?.toDate(),
-                                        )}
+                                        {dayjs(tokenInfo.data.expirationTime!.toDate()).format("MMM D, YYYY")}
                                     </span>
-                                    <span> • </span>
+                                    <span> · </span>
                                     <span>
-                                        Created on{" "}
-                                        {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(
-                                            tokenInfo.data.createdAt?.toDate(),
-                                        )}
+                                        Created on {dayjs(tokenInfo.data.createdAt!.toDate()).format("MMM D, YYYY")}
                                     </span>
                                 </div>
                             </div>
@@ -450,31 +595,84 @@ function ListAccessTokensView() {
                     </>
                 )}
             </>
-            {tokens.length === 0 ? (
-                <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full py-28 flex flex-col items-center">
-                    <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Access Tokens</h3>
-                    <p className="text-center pb-6 text-gray-500 text-base w-96">
-                        Generate an access token for applications that need access to the Gitpod API.{" "}
-                    </p>
-                    <Link to={settingsPathPersonalAccessTokenCreate}>
-                        <button>New Access Token</button>
-                    </Link>
-                </div>
+            {loading ? (
+                <SpinnerLoader content="loading access token list" />
             ) : (
                 <>
-                    <div className="px-6 py-3 flex justify-between space-x-2 text-sm text-gray-400 mb-2 bg-gray-100 dark:bg-gray-800 rounded-xl">
-                        <h2 className="w-3/12">Token Name</h2>
-                        <h2 className="w-3/12">Permissions</h2>
-                        <h2 className="w-3/12">Expires</h2>
-                        <div className="w-3/12"></div>
-                    </div>
-                    {tokens.map((t: PersonalAccessToken) => {
-                        return <TokenEntry token={t} onDelete={handleDeleteToken} />;
-                    })}
+                    {tokens.length === 0 ? (
+                        <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full py-28 flex flex-col items-center">
+                            <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">
+                                No Access Tokens (PAT)
+                            </h3>
+                            <p className="text-center pb-6 text-gray-500 text-base w-96">
+                                Generate a access token (PAT) for applications that need access to the Gitpod API.{" "}
+                            </p>
+                            <Link to={settingsPathPersonalAccessTokenCreate}>
+                                <button>New Access Token</button>
+                            </Link>
+                        </div>
+                    ) : (
+                        <>
+                            <div className="px-3 py-3 flex justify-between space-x-2 text-sm text-gray-400 mb-2 bg-gray-100 dark:bg-gray-800 rounded-xl">
+                                <h2 className="w-4/12">Token Name</h2>
+                                <h2 className="w-4/12">Permissions</h2>
+                                <h2 className="w-3/12">Expires</h2>
+                                <div className="w-1/12"></div>
+                            </div>
+                            {tokens.map((t: PersonalAccessToken) => (
+                                <TokenEntry
+                                    key={t.id}
+                                    token={t}
+                                    menuEntries={[
+                                        {
+                                            title: "Edit",
+                                            link: `${settingsPathPersonalAccessTokenEdit}/${t.id}`,
+                                        },
+                                        {
+                                            title: "Regenerate",
+                                            href: "",
+                                            customFontStyle:
+                                                "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300",
+                                            onClick: () => setModalData({ token: t, action: TokenAction.Regerenrate }),
+                                        },
+                                        {
+                                            title: "Delete",
+                                            href: "",
+                                            customFontStyle:
+                                                "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300",
+                                            onClick: () => setModalData({ token: t, action: TokenAction.Delete }),
+                                        },
+                                    ]}
+                                />
+                            ))}
+                        </>
+                    )}
                 </>
             )}
+
+            {modalData?.action === TokenAction.Delete && (
+                <ShowTokenModal
+                    token={modalData.token}
+                    title="Delete Personal Access Token"
+                    description="Are you sure you want to delete this personal access token?"
+                    descriptionImportant="Any applications using this token will no longer be able to access the Gitpod API."
+                    actionDescription="Delete Personal Access Token"
+                    onSave={() => handleDeleteToken(modalData.token.id)}
+                    onClose={() => setModalData(undefined)}
+                />
+            )}
+            {modalData?.action === TokenAction.Regerenrate && (
+                <ShowTokenModal
+                    token={modalData.token}
+                    title="Regenerate Token"
+                    description="Are you sure you want to regenerate this personal access token?"
+                    descriptionImportant="Any applications using this token will no longer be able to access the Gitpod API."
+                    actionDescription="Regenerate Token"
+                    showDateSelector
+                    onSave={({ expirationDate }) => handleRegenerateToken(modalData.token.id, expirationDate)}
+                    onClose={() => setModalData(undefined)}
+                />
+            )}
         </>
     );
 }
-
-export default PersonalAccessTokens;
diff --git a/components/dashboard/src/settings/TokenEntry.tsx b/components/dashboard/src/settings/TokenEntry.tsx
deleted file mode 100644
index 2271ccf09287d1..00000000000000
--- a/components/dashboard/src/settings/TokenEntry.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
- * Licensed under the GNU Affero General Public License (AGPL).
- * See License-AGPL.txt in the project root for license information.
- */
-
-import { PersonalAccessToken } from "@gitpod/public-api/lib/gitpod/experimental/v1/tokens_pb";
-import { useState } from "react";
-import { ContextMenuEntry } from "../components/ContextMenu";
-import { ItemFieldContextMenu } from "../components/ItemsList";
-import { personalAccessTokensService } from "../service/public-api";
-import { ShowTokenModal } from "./PersonalAccessTokens";
-import { settingsPathPersonalAccessTokenEdit } from "./settings.routes";
-
-function TokenEntry(props: { token: PersonalAccessToken; onDelete: (tokenId: string) => void }) {
-    const [showDelModal, setShowDelModal] = useState<boolean>(false);
-
-    const menuEntries: ContextMenuEntry[] = [
-        {
-            title: "Edit",
-            link: `${settingsPathPersonalAccessTokenEdit}/${props.token.id}`,
-        },
-        {
-            title: "Delete",
-            href: "",
-            customFontStyle: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300",
-            onClick: () => {
-                setShowDelModal(true);
-            },
-        },
-    ];
-
-    const doDeletePAT = async () => {
-        try {
-            await personalAccessTokensService.deletePersonalAccessToken({ id: props.token.id });
-            setShowDelModal(false);
-            props.onDelete(props.token.id);
-        } catch (e) {
-            // TODO: show error
-        }
-    };
-
-    const getDate = () => {
-        if (!props.token.expirationTime) {
-            return "";
-        }
-        const date = props.token.expirationTime?.toDate();
-        return date.toDateString();
-    };
-
-    const defaultAllScope = ["function:*", "resource:default"];
-
-    const getScopes = () => {
-        if (!props.token.scopes) {
-            return "";
-        }
-        if (props.token.scopes.every((v) => defaultAllScope.includes(v))) {
-            return "Access the user's API";
-        } else {
-            return "No access";
-        }
-    };
-
-    return (
-        <>
-            <div className="rounded-xl whitespace-nowrap flex space-x-2 py-4 px-4 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 w-3/12">
-                    <span>{props.token.name || ""}</span>
-                </div>
-                <div className="flex flex-col w-3/12 text-gray-400 font-medium">
-                    <span>{getScopes()}</span>
-                </div>
-                <div className="flex flex-col w-3/12 text-gray-400">
-                    <span>{getDate()}</span>
-                </div>
-                <div className="flex flex-col w-3/12">
-                    <ItemFieldContextMenu menuEntries={menuEntries} />
-                </div>
-            </div>
-            {showDelModal && (
-                <ShowTokenModal
-                    token={props.token}
-                    title="Delete Personal Access Token"
-                    description="Are you sure you want to delete this personal access token?"
-                    descriptionImportant="Any applications using this token will no longer be able to access the Gitpod API."
-                    actionDescription="Delete Personal Access Token"
-                    onSave={doDeletePAT}
-                    onClose={() => {
-                        setShowDelModal(false);
-                    }}
-                />
-            )}
-        </>
-    );
-}
-
-export default TokenEntry;