diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 1c9d756a3..64d4bec18 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -112,152 +112,159 @@ function SessionItem(props: RouteComponentProps & Props) {
     });
 
   return (
-    <div
-      className={cn(stl.sessionItem, 'flex flex-col py-2 px-4')}
-      id="session-item"
-      onClick={(e) => e.stopPropagation()}
+    <Tooltip
+      delay={0}
+      title={`Session already added into the multiview`}
+      disabled={!props.isDisabled}
     >
-      <div className="flex items-start">
-        <div className={cn('flex items-center w-full')}>
-          {!compact && (
-            <div className="flex items-center pr-2 shrink-0" style={{ width: '40%' }}>
-              <div>
-                <Avatar isActive={active} seed={userNumericHash} isAssist={isAssist} />
-              </div>
-              <div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center shrink-0">
-                <div
-                  className={cn('text-lg', {
-                    'color-teal cursor-pointer': !disableUser && hasUserId,
-                    [stl.userName]: !disableUser && hasUserId,
-                    'color-gray-medium': disableUser || !hasUserId,
-                  })}
-                  onClick={() =>
-                    !disableUser && !hasUserFilter && hasUserId
-                      ? onUserClick(userId, userAnonymousId)
-                      : null
-                  }
-                >
-                  <TextEllipsis
-                    text={userDisplayName}
-                    maxWidth="200px"
-                    popupProps={{ inverted: true, size: 'tiny' }}
-                  />
+      <div
+        className={cn(stl.sessionItem, 'flex flex-col py-2 px-4')}
+        id="session-item"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-start">
+          <div className={cn('flex items-center w-full')}>
+            {!compact && (
+              <div className="flex items-center pr-2 shrink-0" style={{ width: '40%' }}>
+                <div>
+                  <Avatar isActive={active} seed={userNumericHash} isAssist={isAssist} />
+                </div>
+                <div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center shrink-0">
+                  <div
+                    className={cn('text-lg', {
+                      'color-teal cursor-pointer': !disableUser && hasUserId && !props.isDisabled,
+                      [stl.userName]: !disableUser && hasUserId && !props.isDisabled,
+                      'color-gray-medium': disableUser || !hasUserId,
+                    })}
+                    onClick={() =>
+                      !disableUser && !hasUserFilter && hasUserId
+                        ? onUserClick(userId, userAnonymousId)
+                        : null
+                    }
+                  >
+                    <TextEllipsis
+                      text={userDisplayName}
+                      maxWidth="200px"
+                      popupProps={{ inverted: true, size: 'tiny' }}
+                    />
+                  </div>
                 </div>
               </div>
+            )}
+            <div
+              style={{ width: compact ? '40%' : '20%' }}
+              className="px-2 flex flex-col justify-between"
+            >
+              <div>
+                <Tooltip
+                  delay={0}
+                  disabled={props.isDisabled}
+                  title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
+                  className="w-fit !block"
+                >
+                  <TextEllipsis
+                    text={formatTimeOrDate(startedAt, timezone)}
+                    popupProps={{ inverted: true, size: 'tiny' }}
+                  />
+                </Tooltip>
+              </div>
+              <div className="flex items-center color-gray-medium py-1">
+                {!isAssist && (
+                  <>
+                    <div className="color-gray-medium">
+                      <span className="mr-1">{eventsCount}</span>
+                      <span>{eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event'}</span>
+                    </div>
+                    <Icon name="circle-fill" size={3} className="mx-4" />
+                  </>
+                )}
+                <div>{live ? <Counter startTime={startedAt} /> : formattedDuration}</div>
+              </div>
             </div>
-          )}
-          <div
-            style={{ width: compact ? '40%' : '20%' }}
-            className="px-2 flex flex-col justify-between"
-          >
-            <div>
-              <Tooltip
-                delay={0}
-                title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
-                className="w-fit !block"
-              >
-                <TextEllipsis
-                  text={formatTimeOrDate(startedAt, timezone)}
-                  popupProps={{ inverted: true, size: 'tiny' }}
-                />
-              </Tooltip>
-            </div>
-            <div className="flex items-center color-gray-medium py-1">
-              {!isAssist && (
-                <>
-                  <div className="color-gray-medium">
-                    <span className="mr-1">{eventsCount}</span>
-                    <span>{eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event'}</span>
-                  </div>
-                  <Icon name="circle-fill" size={3} className="mx-4" />
-                </>
-              )}
-              <div>{live ? <Counter startTime={startedAt} /> : formattedDuration}</div>
-            </div>
-          </div>
-          <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
-            <div style={{ height: '21px' }}>
-              <CountryFlag country={userCountry} style={{ paddingTop: '4px' }} label />
-            </div>
-            <div className="color-gray-medium flex items-center py-1">
+            <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
+              <div style={{ height: '21px' }}>
+                <CountryFlag country={userCountry} style={{ paddingTop: '4px' }} label />
+              </div>
+              <div className="color-gray-medium flex items-center py-1">
               <span className="capitalize" style={{ maxWidth: '70px' }}>
                 <TextEllipsis
                   text={capitalize(userBrowser)}
                   popupProps={{ inverted: true, size: 'tiny' }}
                 />
               </span>
-              <Icon name="circle-fill" size={3} className="mx-4" />
-              <span className="capitalize" style={{ maxWidth: '70px' }}>
+                <Icon name="circle-fill" size={3} className="mx-4" />
+                <span className="capitalize" style={{ maxWidth: '70px' }}>
                 <TextEllipsis
                   text={capitalize(userOs)}
                   popupProps={{ inverted: true, size: 'tiny' }}
                 />
               </span>
-              <Icon name="circle-fill" size={3} className="mx-4" />
-              <span className="capitalize" style={{ maxWidth: '70px' }}>
+                <Icon name="circle-fill" size={3} className="mx-4" />
+                <span className="capitalize" style={{ maxWidth: '70px' }}>
                 <TextEllipsis
                   text={capitalize(userDeviceType)}
                   popupProps={{ inverted: true, size: 'tiny' }}
                 />
               </span>
+              </div>
             </div>
+            {isSessions && (
+              <div style={{ width: '10%' }} className="self-center px-2 flex items-center">
+                <ErrorBars count={issueTypes.length} />
+              </div>
+            )}
           </div>
-          {isSessions && (
-            <div style={{ width: '10%' }} className="self-center px-2 flex items-center">
-              <ErrorBars count={issueTypes.length} />
-            </div>
-          )}
-        </div>
 
-        <div className="flex items-center">
-          <div
-            className={cn(stl.playLink, props.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer')}
-            id="play-button"
-            data-viewed={viewed}
-          >
-            {live && session.isCallActive && session.agentIds!.length > 0 ? (
-              <div className="mr-4">
-                <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
+          <div className="flex items-center">
+            <div
+              className={cn(stl.playLink, props.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+              id="play-button"
+              data-viewed={viewed}
+            >
+              {live && session.isCallActive && session.agentIds!.length > 0 ? (
+                <div className="mr-4">
+                  <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
                   <span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap' }}>
                     CALL IN PROGRESS
                   </span>
-                </Label>
-              </div>
-            ) : null}
-            {isSessions && (
-              <div className="mr-4 flex-shrink-0 w-24">
-                {isLastPlayed && (
-                  <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
+                  </Label>
+                </div>
+              ) : null}
+              {isSessions && (
+                <div className="mr-4 flex-shrink-0 w-24">
+                  {isLastPlayed && (
+                    <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
                     <span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap' }}>
                       LAST PLAYED
                     </span>
-                  </Label>
-                )}
-              </div>
-            )}
-            {props.isAdd ? (
-              <div
-                className="rounded-full border-tealx p-2 border"
-                onClick={() => (props.isDisabled ? null : props.onClick())}
-              >
-                <div className="bg-tealx rounded-full p-2">
-                  <Icon name="plus" size={16} color="white" />
+                    </Label>
+                  )}
                 </div>
-              </div>
-            ) : (
-              <PlayLink
-                isAssist={isAssist}
-                sessionId={sessionId}
-                viewed={viewed}
-                onClick={onClick}
-                queryParams={queryParams}
-              />
-            )}
+              )}
+              {props.isAdd ? (
+                <div
+                  className="rounded-full border-tealx p-2 border"
+                  onClick={() => (props.isDisabled ? null : props.onClick())}
+                >
+                  <div className="bg-tealx rounded-full p-2">
+                    <Icon name="plus" size={16} color="white" />
+                  </div>
+                </div>
+              ) : (
+                <PlayLink
+                  isAssist={isAssist}
+                  sessionId={sessionId}
+                  viewed={viewed}
+                  onClick={onClick}
+                  queryParams={queryParams}
+                />
+              )}
+            </div>
           </div>
         </div>
+        {_metaList.length > 0 && <SessionMetaList className="mt-4" metaList={_metaList} />}
       </div>
-      {_metaList.length > 0 && <SessionMetaList className="mt-4" metaList={_metaList} />}
-    </div>
+    </Tooltip>
   );
 }