diff --git a/ui/src/app/settings/components/project-role-edit-panel/project-role-edit-panel.tsx b/ui/src/app/settings/components/project-role-edit-panel/project-role-edit-panel.tsx
index b2591b061a587..09393942398e5 100644
--- a/ui/src/app/settings/components/project-role-edit-panel/project-role-edit-panel.tsx
+++ b/ui/src/app/settings/components/project-role-edit-panel/project-role-edit-panel.tsx
@@ -19,8 +19,8 @@ interface ProjectRoleDefaultParams {
 interface ProjectRoleEditPanelProps {
     nameReadonly?: boolean;
     submit: (params: ProjectRoleParams) => any;
-    createJWTToken: (params: CreateJWTTokenParams) => void;
-    deleteJWTToken: (params: DeleteJWTTokenParams) => void;
+    createJWTToken: (params: CreateJWTTokenParams) => Promise<void>;
+    deleteJWTToken: (params: DeleteJWTTokenParams) => Promise<void>;
     hideJWTToken: () => void;
     token: string;
     getApi?: (formApi: FormApi) => void;
diff --git a/ui/src/app/settings/components/project-role-jwt-tokens/project-role-jwt-tokens.scss b/ui/src/app/settings/components/project-role-jwt-tokens/project-role-jwt-tokens.scss
index 110eef85457e5..c72688ba72788 100644
--- a/ui/src/app/settings/components/project-role-jwt-tokens/project-role-jwt-tokens.scss
+++ b/ui/src/app/settings/components/project-role-jwt-tokens/project-role-jwt-tokens.scss
@@ -3,4 +3,29 @@
     right: 1em;
     top: 1em;
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+.project-role-jwt-tokens__id {
+    display: flex;
+    align-items: center;
+}
+
+.project-role-jwt-tokens__id-tooltip {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.project-role-jwt-tokens__expired-token {
+    color:  white;
+    font-size: 1.2em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    line-height: 1.4em;
+    background-color: #8FA4B1;
+    margin-left: 0.2em;
+    border-radius: 0.2em;
+    transform: scale(0.8);
+    flex: 0;
+    min-width: fit-content;
+}
diff --git a/ui/src/app/settings/components/project-role-jwt-tokens/project-role-jwt-tokens.tsx b/ui/src/app/settings/components/project-role-jwt-tokens/project-role-jwt-tokens.tsx
index 51461bf92b341..c7aa6897633f8 100644
--- a/ui/src/app/settings/components/project-role-jwt-tokens/project-role-jwt-tokens.tsx
+++ b/ui/src/app/settings/components/project-role-jwt-tokens/project-role-jwt-tokens.tsx
@@ -1,4 +1,4 @@
-import {FormField, Tooltip} from 'argo-ui';
+import {FormField, NotificationType, Tooltip} from 'argo-ui';
 import * as React from 'react';
 import {Form, FormApi, Text} from 'react-form';
 
@@ -6,14 +6,16 @@ import {Consumer, ContextApis} from '../../../shared/context';
 import {JwtToken} from '../../../shared/models';
 import {CreateJWTTokenParams, DeleteJWTTokenParams} from '../../../shared/services';
 import {convertExpiresInToSeconds, validExpiresIn} from '../utils';
+import {Button} from '../../../shared/components/button';
+import {ProgressPopup} from '../../../shared/components';
 
 interface ProjectRoleJWTTokensProps {
     projName: string;
     roleName: string;
     tokens: JwtToken[];
     token: string;
-    createJWTToken: (params: CreateJWTTokenParams) => void;
-    deleteJWTToken: (params: DeleteJWTTokenParams) => void;
+    createJWTToken: (params: CreateJWTTokenParams) => Promise<void>;
+    deleteJWTToken: (params: DeleteJWTTokenParams) => Promise<void>;
     hideJWTToken: () => void;
     getApi?: (formApi: FormApi) => void;
 }
@@ -21,11 +23,32 @@ interface ProjectRoleJWTTokensProps {
 require('./project-role-jwt-tokens.scss');
 
 export const ProjectRoleJWTTokens = (props: ProjectRoleJWTTokensProps) => {
+    const [progress, setProgress] = React.useState<{percentage: number; title: string} | null>(null);
+
     return (
         <Consumer>
             {ctx => (
                 <React.Fragment>
-                    <h4>JWT Tokens</h4>
+                    <h4 style={{marginTop: '20px'}}>
+                        JWT Tokens
+                        {progress !== null && <ProgressPopup title={progress.title} percentage={progress.percentage} onClose={() => setProgress(null)} />}
+                        <Button
+                            title='Delete All Expired Tokens'
+                            style={{marginLeft: '10px'}}
+                            onClick={async () => {
+                                const expiredTokens = props.tokens.filter(token => new Date(token.exp * 1000) < new Date());
+                                if (expiredTokens.length === 0) {
+                                    ctx.notifications.show({
+                                        content: 'No expired tokens found for this role',
+                                        type: NotificationType.Warning
+                                    });
+                                    return;
+                                }
+                                await deleteJWTTokens(props, ctx, expiredTokens, setProgress);
+                            }}>
+                            Delete Expired
+                        </Button>
+                    </h4>
                     <div>Generate JWT tokens to bind to this role</div>
                     {props.tokens && props.tokens.length > 0 && (
                         <div className='argo-table-list'>
@@ -121,17 +144,45 @@ async function deleteJWTToken(props: ProjectRoleJWTTokensProps, iat: number, ctx
     }
 }
 
+async function deleteJWTTokens(props: ProjectRoleJWTTokensProps, ctx: any, tokens: JwtToken[], setProgress: (progress: {percentage: number; title: string}) => void) {
+    const confirmed = await ctx.popup.confirm(
+        'Delete Expired JWT Tokens',
+        `Are you sure you want to delete all ${tokens.length} expired tokens for role '${props.roleName}' in project '${props.projName}'?`
+    );
+    if (confirmed) {
+        setProgress({percentage: 0, title: 'Deleting Expired Tokens'});
+        let i = 0;
+        const promises = tokens.map(token =>
+            props.deleteJWTToken({project: props.projName, role: props.roleName, iat: token.iat} as DeleteJWTTokenParams).then(() => {
+                setProgress({percentage: Number(((i / tokens.length) * 100).toFixed(2)), title: `Deleting token ${i + 1} of ${tokens.length}(${token.id})`});
+                i++;
+            })
+        );
+        await Promise.all(promises);
+
+        setProgress({percentage: 100, title: 'Delete Expired Tokens Complete'});
+    }
+}
+
 function renderJWTRow(props: ProjectRoleJWTTokensProps, ctx: ContextApis, jwToken: JwtToken): React.ReactFragment {
     const issuedAt = new Date(jwToken.iat * 1000).toISOString();
     const expiresAt = jwToken.exp == null ? 'Never' : new Date(jwToken.exp * 1000).toISOString();
+    const isExpired = jwToken.exp && jwToken.exp < Date.now() / 1000;
 
     return (
         <React.Fragment>
             <div className='argo-table-list__row' key={`${jwToken.iat}`}>
                 <div className='row'>
-                    <Tooltip content={jwToken.id}>
-                        <div className='columns small-3'>{jwToken.id}</div>
-                    </Tooltip>
+                    <div className='columns small-3 project-role-jwt-tokens__id'>
+                        <Tooltip content={jwToken.id}>
+                            <span className='project-role-jwt-tokens__id-tooltip'>{jwToken.id}</span>
+                        </Tooltip>
+                        {isExpired && (
+                            <span title='Expired' className='project-role-jwt-tokens__expired-token'>
+                                Expired
+                            </span>
+                        )}
+                    </div>
                     <Tooltip content={issuedAt}>
                         <div className='columns small-4'>{issuedAt}</div>
                     </Tooltip>
diff --git a/ui/src/app/shared/components/progress/__snapshots__/progress-popup.test.tsx.snap b/ui/src/app/shared/components/progress/__snapshots__/progress-popup.test.tsx.snap
index eb7de1552ea3e..65dab86932bf5 100644
--- a/ui/src/app/shared/components/progress/__snapshots__/progress-popup.test.tsx.snap
+++ b/ui/src/app/shared/components/progress/__snapshots__/progress-popup.test.tsx.snap
@@ -10,7 +10,11 @@ exports[`ProgressPopup.0% 1`] = `
     <div
       className="row popup-container__header popup-container__header__normal"
     >
-      
+      <span
+        className="progress-popup__title"
+      >
+        
+      </span>
     </div>
     <div
       className="row popup-container__body"
@@ -19,27 +23,31 @@ exports[`ProgressPopup.0% 1`] = `
         className="columns large-12 popup-container__body__hasNoIcon"
       >
         <div
-          style={
-            {
-              "background": "#CCD6DD",
-              "borderRadius": "5px",
-              "height": "10px",
-              "margin": "15px auto",
-              "width": "90%",
-            }
-          }
+          className="progress-popup__content"
         >
           <div
             style={
               {
-                "background": "#18BE94",
-                "borderRadius": "inherit",
-                "height": "100%",
-                "transition": "width 0.1s ease-in",
-                "width": "0%",
+                "background": "#CCD6DD",
+                "borderRadius": "5px",
+                "height": "10px",
+                "margin": "15px auto",
+                "width": "90%",
               }
             }
-          />
+          >
+            <div
+              style={
+                {
+                  "background": "#18BE94",
+                  "borderRadius": "inherit",
+                  "height": "100%",
+                  "transition": "width 0.1s ease-in",
+                  "width": "0%",
+                }
+              }
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -47,11 +55,7 @@ exports[`ProgressPopup.0% 1`] = `
       className="row popup-container__footer"
     >
       <div
-        style={
-          {
-            "textAlign": "right",
-          }
-        }
+        className="progress-popup__footer"
       />
     </div>
   </div>
@@ -68,7 +72,11 @@ exports[`ProgressPopup.50% 1`] = `
     <div
       className="row popup-container__header popup-container__header__normal"
     >
-      My Title
+      <span
+        className="progress-popup__title"
+      >
+        My Title
+      </span>
     </div>
     <div
       className="row popup-container__body"
@@ -77,27 +85,31 @@ exports[`ProgressPopup.50% 1`] = `
         className="columns large-12 popup-container__body__hasNoIcon"
       >
         <div
-          style={
-            {
-              "background": "#CCD6DD",
-              "borderRadius": "5px",
-              "height": "10px",
-              "margin": "15px auto",
-              "width": "90%",
-            }
-          }
+          className="progress-popup__content"
         >
           <div
             style={
               {
-                "background": "#18BE94",
-                "borderRadius": "inherit",
-                "height": "100%",
-                "transition": "width 0.1s ease-in",
-                "width": "100%",
+                "background": "#CCD6DD",
+                "borderRadius": "5px",
+                "height": "10px",
+                "margin": "15px auto",
+                "width": "90%",
               }
             }
-          />
+          >
+            <div
+              style={
+                {
+                  "background": "#18BE94",
+                  "borderRadius": "inherit",
+                  "height": "100%",
+                  "transition": "width 0.1s ease-in",
+                  "width": "100%",
+                }
+              }
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -105,11 +117,7 @@ exports[`ProgressPopup.50% 1`] = `
       className="row popup-container__footer"
     >
       <div
-        style={
-          {
-            "textAlign": "right",
-          }
-        }
+        className="progress-popup__footer"
       />
     </div>
   </div>
@@ -126,7 +134,11 @@ exports[`ProgressPopup.100% 1`] = `
     <div
       className="row popup-container__header popup-container__header__normal"
     >
-      
+      <span
+        className="progress-popup__title"
+      >
+        
+      </span>
     </div>
     <div
       className="row popup-container__body"
@@ -135,27 +147,31 @@ exports[`ProgressPopup.100% 1`] = `
         className="columns large-12 popup-container__body__hasNoIcon"
       >
         <div
-          style={
-            {
-              "background": "#CCD6DD",
-              "borderRadius": "5px",
-              "height": "10px",
-              "margin": "15px auto",
-              "width": "90%",
-            }
-          }
+          className="progress-popup__content"
         >
           <div
             style={
               {
-                "background": "#18BE94",
-                "borderRadius": "inherit",
-                "height": "100%",
-                "transition": "width 0.1s ease-in",
-                "width": "100%",
+                "background": "#CCD6DD",
+                "borderRadius": "5px",
+                "height": "10px",
+                "margin": "15px auto",
+                "width": "90%",
               }
             }
-          />
+          >
+            <div
+              style={
+                {
+                  "background": "#18BE94",
+                  "borderRadius": "inherit",
+                  "height": "100%",
+                  "transition": "width 0.1s ease-in",
+                  "width": "100%",
+                }
+              }
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -163,11 +179,7 @@ exports[`ProgressPopup.100% 1`] = `
       className="row popup-container__footer"
     >
       <div
-        style={
-          {
-            "textAlign": "right",
-          }
-        }
+        className="progress-popup__footer"
       >
         <button
           className="argo-button argo-button--base-o"
diff --git a/ui/src/app/shared/components/progress/progress-popup.scss b/ui/src/app/shared/components/progress/progress-popup.scss
new file mode 100644
index 0000000000000..b661e2cc0d4ea
--- /dev/null
+++ b/ui/src/app/shared/components/progress/progress-popup.scss
@@ -0,0 +1,15 @@
+.progress-popup__title {
+    font-family: "Heebo", sans-serif;
+    font-weight: normal;
+    font-size: 16px;
+    font-style: normal;
+    color: #495763;
+}
+
+.progress-popup__footer {
+    text-align: right;
+}
+
+.progress-popup__content {
+    padding-top: 15px;
+}
diff --git a/ui/src/app/shared/components/progress/progress-popup.tsx b/ui/src/app/shared/components/progress/progress-popup.tsx
index cf7688ba68cca..c0f1389c542eb 100644
--- a/ui/src/app/shared/components/progress/progress-popup.tsx
+++ b/ui/src/app/shared/components/progress/progress-popup.tsx
@@ -1,14 +1,15 @@
 import {Popup} from 'argo-ui';
 import * as React from 'react';
 import {ProgressBar} from './progress-bar';
+import './progress-popup.scss';
 
 const Title = ({title}: {title: string}) => {
-    return <React.Fragment>{title}</React.Fragment>;
+    return <span className='progress-popup__title'>{title}</span>;
 };
 
 const Footer = ({percentage, onClose}: {percentage: number; onClose: () => void}) => {
     return (
-        <div style={{textAlign: 'right'}}>
+        <div className='progress-popup__footer'>
             {percentage >= 100 && (
                 <button className='argo-button argo-button--base-o' onClick={() => onClose()}>
                     Close
@@ -21,7 +22,9 @@ const Footer = ({percentage, onClose}: {percentage: number; onClose: () => void}
 export const ProgressPopup = ({title, percentage, onClose}: {title: string; percentage: number; onClose: () => void}) => {
     return (
         <Popup title={<Title title={title} />} footer={<Footer percentage={percentage} onClose={onClose} />}>
-            <ProgressBar percentage={percentage} />
+            <div className='progress-popup__content'>
+                <ProgressBar percentage={percentage} />
+            </div>
         </Popup>
     );
 };