diff --git a/package-lock.json b/package-lock.json
index 386347e6d..b3f206a49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.12.0-pre-3",
+    "version": "1.12.0-pre-4",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.12.0-pre-3",
+            "version": "1.12.0-pre-4",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 77e914d22..a6af9db1f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.12.0-pre-3",
+    "version": "1.12.0-pre-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Assets/IconV2/ic-checks.svg b/src/Assets/IconV2/ic-checks.svg
new file mode 100644
index 000000000..1a48f93b4
--- /dev/null
+++ b/src/Assets/IconV2/ic-checks.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m13.875 7.875-8.25 8.25L1.5 12m21-4.125-8.25 8.25-2.191-2.191" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-key.svg b/src/Assets/IconV2/ic-key.svg
new file mode 100644
index 000000000..fc4da3ebc
--- /dev/null
+++ b/src/Assets/IconV2/ic-key.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15.59 7 1.414 1.414m-8.27 3.101a6.744 6.744 0 1 1 3.75 3.75L11.25 16.5H9v2.25H6.75V21H3v-3.75l5.735-5.735Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-timeout-two-dash.svg b/src/Assets/IconV2/ic-selected.svg
similarity index 62%
rename from src/Assets/IconV2/ic-timeout-two-dash.svg
rename to src/Assets/IconV2/ic-selected.svg
index 85b6d9893..e42627f7e 100644
--- a/src/Assets/IconV2/ic-timeout-two-dash.svg
+++ b/src/Assets/IconV2/ic-selected.svg
@@ -15,7 +15,6 @@
   -->
 
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 12C3 7.02944 7.02944 3 12 3" stroke="#3B444C" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="2 3"/>
-<path d="M12 6.75V12L15 16" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3" stroke="#3B444C" stroke-width="1.5" stroke-miterlimit="10"/>
+<circle cx="12" cy="12" r="10" fill="var(--B500)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 9.29291C17.0976 9.68344 17.0976 10.3166 16.7071 10.7071L11.3738 16.0402C10.9832 16.4307 10.3501 16.4307 9.95959 16.0402L7.29292 13.3738C6.90238 12.9833 6.90235 12.3501 7.29286 11.9596C7.68337 11.5691 8.31653 11.569 8.70708 11.9595L10.6667 13.9189L15.2929 9.29288C15.6834 8.90236 16.3166 8.90238 16.7071 9.29291Z" fill="var(--N0)"/>
 </svg>
diff --git a/src/Assets/IconV2/ic-timeout-dash.svg b/src/Assets/IconV2/ic-timeout-dash.svg
new file mode 100644
index 000000000..08932efac
--- /dev/null
+++ b/src/Assets/IconV2/ic-timeout-dash.svg
@@ -0,0 +1,21 @@
+<!--
+  - Copyright (c) 2024. Devtron Inc.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-dasharray="1 3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" d="M3 12a9 9 0 0 1 9-9" vector-effect="non-scaling-stroke"/>
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.75V12l3 4" vector-effect="non-scaling-stroke"/>
+  <path stroke="#3B444C" stroke-miterlimit="10" stroke-width="1.5" d="M3 12a9 9 0 1 0 9-9" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Common/Types.ts b/src/Common/Types.ts
index e0dae3ba1..438ac8947 100644
--- a/src/Common/Types.ts
+++ b/src/Common/Types.ts
@@ -231,25 +231,27 @@ interface InfoColourBarTextConfigType {
     actionButtonConfig?: ButtonProps
 }
 
-type InfoColourBarMessageProp = {
-    message: ReactNode
-    linkText?: ReactNode
-    redirectLink?: string
-    linkOnClick?: () => void
-    linkClass?: string
-    internalLink?: boolean
-
-    textConfig?: never
-} | {
-    textConfig: InfoColourBarTextConfigType
-
-    message?: never
-    linkText?: never
-    redirectLink?: never
-    linkOnClick?: () => never
-    linkClass?: never
-    internalLink?: never
-}
+type InfoColourBarMessageProp =
+    | {
+          message: ReactNode
+          linkText?: ReactNode
+          redirectLink?: string
+          linkOnClick?: () => void
+          linkClass?: string
+          internalLink?: boolean
+
+          textConfig?: never
+      }
+    | {
+          textConfig: InfoColourBarTextConfigType
+
+          message?: never
+          linkText?: never
+          redirectLink?: never
+          linkOnClick?: () => never
+          linkClass?: never
+          internalLink?: never
+      }
 
 export type InfoColourBarType = InfoColourBarMessageProp & {
     classname: string
@@ -848,7 +850,7 @@ export interface Strategy {
     default?: boolean
 }
 
-export interface CDStage extends Partial<Pick<CommonNodeAttr, 'triggerBlockedInfo' | 'isTriggerBlocked' >> {
+export interface CDStage extends Partial<Pick<CommonNodeAttr, 'triggerBlockedInfo' | 'isTriggerBlocked'>> {
     status: string
     name: string
     triggerType: 'AUTOMATIC' | 'MANUAL'
@@ -860,7 +862,9 @@ export interface CDStageConfigMapSecretNames {
     secrets: any[]
 }
 
-export interface PrePostDeployStageType extends MandatoryPluginBaseStateType, Partial<Pick<CommonNodeAttr, 'triggerBlockedInfo'>> {
+export interface PrePostDeployStageType
+    extends MandatoryPluginBaseStateType,
+        Partial<Pick<CommonNodeAttr, 'triggerBlockedInfo'>> {
     isValid: boolean
     steps: TaskErrorObj[]
     triggerType: string
diff --git a/src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx b/src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx
index 7294f625e..257f5d907 100644
--- a/src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx
+++ b/src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx
@@ -20,13 +20,19 @@ import { motion } from 'framer-motion'
 import DeployAudio from '@Sounds/DeployAudio.mp3'
 import { ComponentSizeType } from '@Shared/constants'
 
-import { Button } from '../Button'
+import { Button, ButtonStyleType } from '../Button'
 import { Icon } from '../Icon'
 import { AnimatedDeployButtonProps } from './types'
 
 import './animatedDeployButton.scss'
 
-const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedDeployButtonProps) => {
+const AnimatedDeployButton = ({
+    isLoading,
+    isVirtualEnvironment,
+    onButtonClick,
+    exceptionUserConfig,
+    isBulkCDTrigger,
+}: AnimatedDeployButtonProps) => {
     const audioRef = useRef<HTMLAudioElement>(null)
     const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
     const isAudioEnabled: boolean = window._env_.FEATURE_ACTION_AUDIOS_ENABLE
@@ -36,6 +42,7 @@ const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedD
             rotate: 45,
         },
     }
+    const isExceptionUser = exceptionUserConfig?.canDeploy || exceptionUserConfig?.isImageApprover
 
     const handleButtonClick = async (e: SyntheticEvent) => {
         if (clicked) {
@@ -66,7 +73,12 @@ const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedD
         <motion.div whileHover="hover" className={`${clicked ? 'hide-button-text' : ''}`}>
             <Button
                 dataTestId="cd-trigger-deploy-button"
-                text={`Deploy${isVirtualEnvironment ? ' to isolated env' : ''}`}
+                isLoading={isLoading}
+                text={
+                    exceptionUserConfig?.canDeploy
+                        ? 'Deploy without approval'
+                        : `Deploy${isVirtualEnvironment ? ' to isolated env' : ''}`
+                }
                 startIcon={
                     <motion.div
                         variants={svgMotionVariants}
@@ -88,6 +100,13 @@ const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedD
                 }
                 size={ComponentSizeType.large}
                 onClick={handleButtonClick}
+                style={isExceptionUser ? ButtonStyleType.warning : ButtonStyleType.default}
+                showTooltip={isExceptionUser}
+                tooltipProps={{
+                    content: isBulkCDTrigger
+                        ? 'You are authorized to deploy as an exception user for some applications'
+                        : 'You are authorized to deploy as an exception user',
+                }}
             />
             {/* Disabling es-lint as captions are not required */}
             {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
diff --git a/src/Shared/Components/AnimatedDeployButton/types.tsx b/src/Shared/Components/AnimatedDeployButton/types.tsx
index 5ca2bb0de..4cb944cbc 100644
--- a/src/Shared/Components/AnimatedDeployButton/types.tsx
+++ b/src/Shared/Components/AnimatedDeployButton/types.tsx
@@ -15,6 +15,12 @@
  */
 
 export interface AnimatedDeployButtonProps {
+    isLoading?: boolean
     isVirtualEnvironment: boolean
     onButtonClick: (e, disableDeployButton: boolean) => void
+    exceptionUserConfig?: {
+        canDeploy: boolean
+        isImageApprover: boolean
+    }
+    isBulkCDTrigger?: boolean
 }
diff --git a/src/Shared/Components/CICDHistory/Artifacts.tsx b/src/Shared/Components/CICDHistory/Artifacts.tsx
index d582bba05..9e4f2beda 100644
--- a/src/Shared/Components/CICDHistory/Artifacts.tsx
+++ b/src/Shared/Components/CICDHistory/Artifacts.tsx
@@ -67,11 +67,14 @@ export const CIListItem = ({
     selectedEnvironmentName,
     renderCIListHeader,
     targetPlatforms,
+    isDeploymentWithoutApproval,
 }: CIListItemType) => {
-    const headerMetaDataPresent =
-        !!getIsApprovalPolicyConfigured(userApprovalMetadata?.approvalConfigData) ||
-        !!appliedFilters?.length ||
-        !!promotionApprovalMetadata?.promotedFromType
+    const showCIListHeader =
+        !!renderCIListHeader &&
+        (!!getIsApprovalPolicyConfigured(userApprovalMetadata?.approvalConfigData) ||
+            !!appliedFilters?.length ||
+            !!promotionApprovalMetadata?.promotedFromType ||
+            isDeploymentWithoutApproval)
 
     return (
         <>
@@ -83,8 +86,7 @@ export const CIListItem = ({
                 </div>
             )}
 
-            {headerMetaDataPresent &&
-                renderCIListHeader &&
+            {showCIListHeader &&
                 renderCIListHeader({
                     userApprovalMetadata,
                     triggeredBy,
@@ -92,11 +94,12 @@ export const CIListItem = ({
                     appliedFiltersTimestamp,
                     promotionApprovalMetadata,
                     selectedEnvironmentName,
+                    isDeploymentWithoutApproval,
                 })}
 
             <div
                 className={`dc__h-fit-content ci-artifact image-tag-parent-card bg__primary br-4 dc__border p-12 w-100 dc__mxw-800 ci-artifact--${type} ${
-                    headerMetaDataPresent && renderCIListHeader ? 'dc__no-top-radius dc__no-top-border' : ''
+                    showCIListHeader ? 'dc__no-top-radius dc__no-top-border' : ''
                 }`}
                 data-testid="hover-on-report-artifact"
             >
diff --git a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx
index 08f56b220..115cab8cf 100644
--- a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx
@@ -43,6 +43,7 @@ const DeploymentDetailSteps = ({
     isVirtualEnvironment,
     processVirtualEnvironmentDeploymentData,
     renderDeploymentApprovalInfo,
+    isDeploymentWithoutApproval,
 }: DeploymentDetailStepsType) => {
     const history = useHistory()
     const { url } = useRouteMatch()
@@ -51,6 +52,8 @@ const DeploymentDetailSteps = ({
         deploymentStatus?.toUpperCase() !== TIMELINE_STATUS.ABORTED,
     )
     const isVirtualEnv = useRef(isVirtualEnvironment)
+    const isDeploymentWithoutApprovalRef = useRef(isDeploymentWithoutApproval)
+
     const processedData =
         isVirtualEnv.current && processVirtualEnvironmentDeploymentData
             ? processVirtualEnvironmentDeploymentData()
@@ -69,7 +72,10 @@ const DeploymentDetailSteps = ({
             .then((deploymentStatusDetailRes) => {
                 if (deploymentStatus !== 'Aborted') {
                     // eslint-disable-next-line no-use-before-define
-                    processDeploymentStatusData(deploymentStatusDetailRes.result)
+                    processDeploymentStatusData({
+                        ...deploymentStatusDetailRes.result,
+                        isDeploymentWithoutApproval: isDeploymentWithoutApprovalRef.current,
+                    })
                 }
             })
             .catch(() => {
@@ -97,6 +103,10 @@ const DeploymentDetailSteps = ({
         isVirtualEnv.current = isVirtualEnvironment
     }, [isVirtualEnvironment])
 
+    useEffect(() => {
+        isDeploymentWithoutApprovalRef.current = isDeploymentWithoutApproval
+    }, [isDeploymentWithoutApproval])
+
     const processDeploymentStatusData = (deploymentStatusDetailRes: DeploymentStatusDetailsType): void => {
         const processedDeploymentStatusDetailsData =
             isVirtualEnv.current && processVirtualEnvironmentDeploymentData
diff --git a/src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx b/src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx
index d55511dbd..56417d711 100644
--- a/src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx
@@ -176,7 +176,9 @@ export const DeploymentStatusDetailRow = ({
                 >
                     {renderIcon(statusBreakDownType.icon)}
                     <span className="ml-12 mr-12 fs-13">
-                        <span data-testid="deployment-status-step-name">{statusBreakDownType.displayText}</span>
+                        <span data-testid="deployment-status-step-name" className="flex left">
+                            {statusBreakDownType.displayText}
+                        </span>
                         {statusBreakDownType.displaySubText && (
                             <span className={`ml-12 f-${statusBreakDownType.icon || 'waiting'}`}>
                                 {statusBreakDownType.displaySubText}
diff --git a/src/Shared/Components/CICDHistory/History.components.tsx b/src/Shared/Components/CICDHistory/History.components.tsx
index 779bf2872..712a6d8d2 100644
--- a/src/Shared/Components/CICDHistory/History.components.tsx
+++ b/src/Shared/Components/CICDHistory/History.components.tsx
@@ -138,6 +138,7 @@ export const GitChanges = ({
     selectedEnvironmentName,
     renderCIListHeader,
     targetPlatforms,
+    isDeploymentWithoutApproval,
 }: GitChangesType) => {
     const { isSuperAdmin } = useGetUserRoles()
 
@@ -202,6 +203,7 @@ export const GitChanges = ({
                         selectedEnvironmentName={selectedEnvironmentName}
                         renderCIListHeader={renderCIListHeader}
                         targetPlatforms={targetPlatforms}
+                        isDeploymentWithoutApproval={isDeploymentWithoutApproval}
                     >
                         <div className="flex column left hover-trigger">
                             <div className="cn-9 fs-14 flex left">
diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
index 404129be8..79690560d 100644
--- a/src/Shared/Components/CICDHistory/TriggerOutput.tsx
+++ b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
@@ -133,6 +133,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
                                 isVirtualEnvironment={triggerDetails.IsVirtualEnvironment}
                                 processVirtualEnvironmentDeploymentData={processVirtualEnvironmentDeploymentData}
                                 renderDeploymentApprovalInfo={renderDeploymentApprovalInfo}
+                                isDeploymentWithoutApproval={triggerDetails.isDeploymentWithoutApproval ?? false}
                             />
                         </Route>
                     )}
@@ -156,6 +157,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
                             promotionApprovalMetadata={triggerDetails?.promotionApprovalMetadata}
                             renderCIListHeader={renderCIListHeader}
                             targetPlatforms={targetPlatforms}
+                            isDeploymentWithoutApproval={triggerDetails.isDeploymentWithoutApproval ?? false}
                         />
                     </Route>
                     {triggerDetails.stage === 'DEPLOY' && (
diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx
index f34a00765..417f5ed8b 100644
--- a/src/Shared/Components/CICDHistory/types.tsx
+++ b/src/Shared/Components/CICDHistory/types.tsx
@@ -187,6 +187,7 @@ export interface History extends Pick<TargetPlatformsDTO, 'targetPlatforms'>, Wo
     triggerMetadata?: string
     runSource?: RunSourceType
     targetConfig?: TargetConfigType
+    isDeploymentWithoutApproval?: boolean
 }
 
 export interface ExecutionInfoType {
@@ -389,7 +390,7 @@ export interface DeploymentStatusDetailsTimelineType {
     statusTime: string
     resourceDetails?: SyncStageResourceDetail[]
 }
-export interface DeploymentStatusDetailsType {
+export interface DeploymentStatusDetailsType extends Pick<History, 'isDeploymentWithoutApproval'> {
     deploymentFinishedOn: string
     deploymentStartedOn: string
     triggeredBy: string
@@ -405,7 +406,7 @@ export interface DeploymentStatusDetailsResponse extends ResponseType {
 
 interface DeploymentStatusDetailRow {
     icon: string
-    displayText: string
+    displayText: ReactNode
     displaySubText: string
     time: string
     resourceDetails?: any
@@ -431,7 +432,7 @@ export interface DeploymentStatusDetailsBreakdownDataType {
     }
 }
 
-export interface DeploymentDetailStepsType {
+export interface DeploymentDetailStepsType extends Pick<History, 'isDeploymentWithoutApproval'> {
     deploymentStatus?: string
     deploymentAppType?: DeploymentAppTypes
     isHelmApps?: boolean
@@ -445,7 +446,7 @@ export interface DeploymentDetailStepsType {
     renderDeploymentApprovalInfo: (userApprovalMetadata: UserApprovalMetadataType) => JSX.Element
 }
 
-export interface RenderCIListHeaderProps {
+export interface RenderCIListHeaderProps extends Required<Pick<History, 'isDeploymentWithoutApproval'>> {
     userApprovalMetadata: UserApprovalMetadataType
     triggeredBy: string
     appliedFilters: FilterConditionsListType[]
@@ -465,7 +466,7 @@ export interface VirtualHistoryArtifactProps {
     }
 }
 
-export type CIListItemType = Pick<History, 'promotionApprovalMetadata'> & {
+export type CIListItemType = Pick<History, 'promotionApprovalMetadata' | 'isDeploymentWithoutApproval'> & {
     userApprovalMetadata?: UserApprovalMetadataType
     triggeredBy?: string
     children: ReactNode
@@ -737,6 +738,7 @@ export type GitChangesType = {
           appliedFilters?: never
           appliedFiltersTimestamp?: never
           renderCIListHeader?: never
+          isDeploymentWithoutApproval?: never
       }
     | {
           artifact: string
@@ -755,6 +757,7 @@ export type GitChangesType = {
           appliedFilters?: FilterConditionsListType[]
           appliedFiltersTimestamp?: string
           renderCIListHeader: (renderCIListHeaderProps: RenderCIListHeaderProps) => JSX.Element
+          isDeploymentWithoutApproval?: History['isDeploymentWithoutApproval']
       }
 )
 
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index 0cef854e7..16c5e2585 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -23,6 +23,7 @@ import { ReactComponent as ICCaretLeft } from '@IconsV2/ic-caret-left.svg'
 import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg'
 import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots.svg'
 import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg'
+import { ReactComponent as ICChecks } from '@IconsV2/ic-checks.svg'
 import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg'
 import { ReactComponent as ICCiWebhook } from '@IconsV2/ic-ci-webhook.svg'
 import { ReactComponent as ICCircleLoader } from '@IconsV2/ic-circle-loader.svg'
@@ -69,6 +70,7 @@ import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg'
+import { ReactComponent as ICKey } from '@IconsV2/ic-key.svg'
 import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg'
 import { ReactComponent as ICLightning } from '@IconsV2/ic-lightning.svg'
 import { ReactComponent as ICLightningFill } from '@IconsV2/ic-lightning-fill.svg'
@@ -93,6 +95,7 @@ import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg'
 import { ReactComponent as ICQuay } from '@IconsV2/ic-quay.svg'
 import { ReactComponent as ICQuote } from '@IconsV2/ic-quote.svg'
 import { ReactComponent as ICRocketLaunch } from '@IconsV2/ic-rocket-launch.svg'
+import { ReactComponent as ICSelected } from '@IconsV2/ic-selected.svg'
 import { ReactComponent as ICShieldCheck } from '@IconsV2/ic-shield-check.svg'
 import { ReactComponent as ICSlidersVertical } from '@IconsV2/ic-sliders-vertical.svg'
 import { ReactComponent as ICSortAscending } from '@IconsV2/ic-sort-ascending.svg'
@@ -105,7 +108,7 @@ import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
 import { ReactComponent as ICSuspended } from '@IconsV2/ic-suspended.svg'
 import { ReactComponent as ICTata1mg } from '@IconsV2/ic-tata1mg.svg'
 import { ReactComponent as ICTerminalFill } from '@IconsV2/ic-terminal-fill.svg'
-import { ReactComponent as ICTimeoutTwoDash } from '@IconsV2/ic-timeout-two-dash.svg'
+import { ReactComponent as ICTimeoutDash } from '@IconsV2/ic-timeout-dash.svg'
 import { ReactComponent as ICTimer } from '@IconsV2/ic-timer.svg'
 import { ReactComponent as ICTravclan } from '@IconsV2/ic-travclan.svg'
 import { ReactComponent as ICUnknown } from '@IconsV2/ic-unknown.svg'
@@ -141,6 +144,7 @@ export const iconMap = {
     'ic-cd': ICCd,
     'ic-chat-circle-dots': ICChatCircleDots,
     'ic-check': ICCheck,
+    'ic-checks': ICChecks,
     'ic-ci-linked': ICCiLinked,
     'ic-ci-webhook': ICCiWebhook,
     'ic-circle-loader': ICCircleLoader,
@@ -187,6 +191,7 @@ export const iconMap = {
     'ic-info-outline': ICInfoOutline,
     'ic-job-color': ICJobColor,
     'ic-k8s-job': ICK8sJob,
+    'ic-key': ICKey,
     'ic-ldap': ICLdap,
     'ic-lightning-fill': ICLightningFill,
     'ic-lightning': ICLightning,
@@ -211,6 +216,7 @@ export const iconMap = {
     'ic-quay': ICQuay,
     'ic-quote': ICQuote,
     'ic-rocket-launch': ICRocketLaunch,
+    'ic-selected': ICSelected,
     'ic-shield-check': ICShieldCheck,
     'ic-sliders-vertical': ICSlidersVertical,
     'ic-sort-ascending': ICSortAscending,
@@ -223,7 +229,7 @@ export const iconMap = {
     'ic-suspended': ICSuspended,
     'ic-tata1mg': ICTata1mg,
     'ic-terminal-fill': ICTerminalFill,
-    'ic-timeout-two-dash': ICTimeoutTwoDash,
+    'ic-timeout-dash': ICTimeoutDash,
     'ic-timer': ICTimer,
     'ic-travclan': ICTravclan,
     'ic-unknown': ICUnknown,
diff --git a/src/Shared/Components/StatusComponent/utils.ts b/src/Shared/Components/StatusComponent/utils.ts
index eddd95a1e..b6303d7c8 100644
--- a/src/Shared/Components/StatusComponent/utils.ts
+++ b/src/Shared/Components/StatusComponent/utils.ts
@@ -70,7 +70,7 @@ export const getIconName = (status: string, showAnimatedIcon: boolean): IconName
             return 'ic-hibernate'
         case 'timedout':
         case 'timed_out':
-            return 'ic-timeout-two-dash'
+            return 'ic-timeout-dash'
         default:
             return null
     }
diff --git a/src/Shared/Components/TabGroup/TabGroup.component.tsx b/src/Shared/Components/TabGroup/TabGroup.component.tsx
index d7bcba5f8..eb8059cb9 100644
--- a/src/Shared/Components/TabGroup/TabGroup.component.tsx
+++ b/src/Shared/Components/TabGroup/TabGroup.component.tsx
@@ -76,12 +76,14 @@ const Tab = ({
     const getTabComponent = () => {
         const content = (
             <>
-                <p className="m-0 flexbox dc__align-items-center dc__gap-6">
+                <span className="m-0 flexbox dc__align-items-center dc__gap-6">
                     {getTabIcon({ className: iconClassName, icon, showError, showWarning, size, active })}
-                    {label}
+                    <Tooltip content={label}>
+                        <span className="dc__truncate">{label}</span>
+                    </Tooltip>
                     {getTabBadge(badge, badgeClassName)}
                     {getTabIndicator(showIndicator)}
-                </p>
+                </span>
                 {getTabDescription(description)}
             </>
         )
diff --git a/src/Shared/Components/TabGroup/TabGroup.helpers.tsx b/src/Shared/Components/TabGroup/TabGroup.helpers.tsx
index 9aec1c1da..1f41d6338 100644
--- a/src/Shared/Components/TabGroup/TabGroup.helpers.tsx
+++ b/src/Shared/Components/TabGroup/TabGroup.helpers.tsx
@@ -49,7 +49,7 @@ export const getTabIcon = ({
 }
 
 export const getTabBadge = (badge: TabProps['badge'], className: string) =>
-    badge !== null && <div className={`tab-group__tab__badge bcn-1 cn-7 fw-6 flex px-4 ${className}`}>{badge}</div>
+    badge !== null && <span className={`tab-group__tab__badge bcn-1 cn-7 fw-6 flex px-4 ${className}`}>{badge}</span>
 
 export const getTabIndicator = (showIndicator: TabProps['showIndicator']) =>
     showIndicator && <span className="tab-group__tab__indicator bcr-5 mt-4 dc__align-self-start" />
diff --git a/src/Shared/Components/UserIdentifier/UserIdentifier.tsx b/src/Shared/Components/UserIdentifier/UserIdentifier.tsx
new file mode 100644
index 000000000..8e9318cc2
--- /dev/null
+++ b/src/Shared/Components/UserIdentifier/UserIdentifier.tsx
@@ -0,0 +1,77 @@
+import { getAlphabetIcon } from '@Common/Helper'
+import { Tooltip } from '@Common/Tooltip'
+import { API_TOKEN_PREFIX } from '@Shared/constants'
+import { useUserEmail } from '@Shared/Providers'
+
+import { Icon } from '../Icon'
+import { UserIdentifierProps } from './types'
+
+const UserIdentifierTooltip = ({
+    children,
+    tooltipContent,
+}: Pick<UserIdentifierProps, 'children' | 'tooltipContent'>) => (
+    <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
+        <div className="flexbox dc__gap-8 dc__align-items-center">{children}</div>
+    </Tooltip>
+)
+
+export const UserIdentifier = ({
+    identifier,
+    children,
+    rootClassName,
+    tooltipContent,
+    isUserGroup = false,
+}: UserIdentifierProps) => {
+    // HOOKS
+    const { email: currentUserEmail } = useUserEmail()
+
+    if (!identifier) {
+        return null
+    }
+
+    // CONSTANTS
+    const isCurrentUser = identifier === currentUserEmail
+    const isApiToken = identifier.startsWith(API_TOKEN_PREFIX)
+
+    const renderIcon = () => {
+        if (isApiToken) {
+            return <Icon name="ic-key" color="N700" size={20} />
+        }
+
+        return isUserGroup ? (
+            <Icon name="ic-users" color="N700" size={20} />
+        ) : (
+            getAlphabetIcon(identifier, 'dc__no-shrink m-0-imp')
+        )
+    }
+
+    const renderText = () => {
+        if (isCurrentUser) {
+            return 'You'
+        }
+
+        if (isApiToken) {
+            return identifier.split(':')?.[1] || '-'
+        }
+
+        return identifier
+    }
+
+    return (
+        <div className={`flexbox dc__gap-8 ${rootClassName || ''}`}>
+            <UserIdentifierTooltip tooltipContent={tooltipContent}>
+                {renderIcon()}
+                <div className="flexbox dc__gap-2">
+                    <Tooltip
+                        {...(tooltipContent
+                            ? { content: identifier, alwaysShowTippyOnHover: false }
+                            : { content: identifier })}
+                    >
+                        <span className="cn-9 fs-13 fw-4 lh-20 dc__truncate">{renderText()}</span>
+                    </Tooltip>
+                    {children}
+                </div>
+            </UserIdentifierTooltip>
+        </div>
+    )
+}
diff --git a/src/Shared/Components/UserIdentifier/index.ts b/src/Shared/Components/UserIdentifier/index.ts
new file mode 100644
index 000000000..0b3e4d0e6
--- /dev/null
+++ b/src/Shared/Components/UserIdentifier/index.ts
@@ -0,0 +1,2 @@
+export * from './types'
+export * from './UserIdentifier'
diff --git a/src/Shared/Components/UserIdentifier/types.ts b/src/Shared/Components/UserIdentifier/types.ts
new file mode 100644
index 000000000..7a2e3b8dc
--- /dev/null
+++ b/src/Shared/Components/UserIdentifier/types.ts
@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+export interface UserIdentifierProps {
+    identifier: string
+    children?: ReactNode
+    isUserGroup?: boolean
+    rootClassName?: string
+    /**
+     * @description - If given, would show tooltip on div containing avatar, email and children
+     */
+    tooltipContent?: string
+}
diff --git a/src/Shared/Components/index.ts b/src/Shared/Components/index.ts
index 75d7f961e..365a95270 100644
--- a/src/Shared/Components/index.ts
+++ b/src/Shared/Components/index.ts
@@ -96,5 +96,6 @@ export * from './ThemeSwitcher'
 export * from './ToggleResolveScopedVariables'
 export * from './UnsavedChanges'
 export * from './UnsavedChangesDialog'
+export * from './UserIdentifier'
 export * from './VirtualizedList'
 export * from './WorkflowOptionsModal'
diff --git a/src/Shared/types.ts b/src/Shared/types.ts
index 4b837338d..aaef6adc4 100644
--- a/src/Shared/types.ts
+++ b/src/Shared/types.ts
@@ -298,6 +298,8 @@ export interface WorkflowType {
     showTippy?: boolean
     appId?: number
     isSelected?: boolean
+    isExceptionUser?: boolean
+    canApproverDeploy?: boolean
     approvalConfiguredIdsMap?: Record<number, ApprovalConfigDataType>
     imageReleaseTags: string[]
     appReleaseTags?: string[]