diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index 76d14edd..d1fa7149 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/src/custom/CatalogDetail/ActionButton.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import { CircularProgress } from '../../base';
-import { CopyIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons';
+import {
+  CopyIcon,
+  DeleteIcon,
+  EditIcon,
+  KanvasIcon,
+  PublishIcon,
+  ShareLineIcon
+} from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -21,6 +28,10 @@ interface ActionButtonsProps {
   onOpenPlaygroundClick: (designId: string, name: string) => void;
   showInfoAction?: boolean;
   handleInfoClick?: () => void;
+  showShareAction?: boolean;
+  handleShare: () => void;
+  showDeleteAction?: boolean;
+  handleDelete: () => void;
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -35,7 +46,11 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   showOpenPlaygroundAction,
   onOpenPlaygroundClick,
   showInfoAction,
-  handleInfoClick
+  handleInfoClick,
+  showShareAction,
+  handleShare,
+  showDeleteAction,
+  handleDelete
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const theme = useTheme();
@@ -132,23 +147,51 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             }}
             onClick={handleInfoClick}
           >
-            <EditIcon width={24} height={24} fill={charcoal[10]} />
+            <EditIcon width={24} height={24} fill={theme.palette.icon.default} />
             Edit
           </ActionButton>
         )}
-        {showUnpublishAction && (
+        {showShareAction && (
+          <ActionButton
+            sx={{
+              borderRadius: '0.2rem',
+              backgroundColor: 'transparent',
+              border: `1px solid ${theme.palette.border.normal}`,
+              gap: '10px',
+              color: charcoal[10]
+            }}
+            onClick={handleShare}
+          >
+            <ShareLineIcon width="24" height="24" fill={theme.palette.icon.default} />
+            Share
+          </ActionButton>
+        )}
+        {showDeleteAction && (
           <UnpublishAction
             sx={{
               borderRadius: '0.2rem',
               gap: '10px'
             }}
-            onClick={handleUnpublish}
+            onClick={handleDelete}
           >
-            <PublishIcon width={24} height={24} fill={charcoal[100]} />
-            Unpublish
+            <DeleteIcon width={24} height={24} fill={charcoal[100]} />
+            Delete
           </UnpublishAction>
         )}
       </div>
+
+      {showUnpublishAction && (
+        <UnpublishAction
+          sx={{
+            borderRadius: '0.2rem',
+            gap: '10px'
+          }}
+          onClick={handleUnpublish}
+        >
+          <PublishIcon width={24} height={24} fill={charcoal[100]} />
+          Unpublish
+        </UnpublishAction>
+      )}
     </StyledActionWrapper>
   );
 };
diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx
index 82d7fe99..57d2d698 100644
--- a/src/custom/CatalogDetail/LeftPanel.tsx
+++ b/src/custom/CatalogDetail/LeftPanel.tsx
@@ -25,6 +25,10 @@ interface LeftPanelProps {
   onOpenPlaygroundClick: (designId: string, name: string) => void;
   showInfoAction?: boolean;
   handleInfoClick?: () => void;
+  showShareAction?: boolean;
+  handleShare: () => void;
+  showDeleteAction?: boolean;
+  handleDelete: () => void;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -44,7 +48,11 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   showOpenPlaygroundAction = true,
   onOpenPlaygroundClick,
   showInfoAction = false,
-  handleInfoClick
+  handleInfoClick,
+  showShareAction = false,
+  handleShare,
+  showDeleteAction = false,
+  handleDelete
 }) => {
   const theme = useTheme();
 
@@ -89,6 +97,10 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         onOpenPlaygroundClick={onOpenPlaygroundClick}
         showInfoAction={showInfoAction}
         handleInfoClick={handleInfoClick}
+        showShareAction={showShareAction}
+        handleShare={handleShare}
+        showDeleteAction={showDeleteAction}
+        handleDelete={handleDelete}
       />
       {showTechnologies && (
         <TechnologySection
diff --git a/src/custom/CatalogDetail/SocialSharePopper.tsx b/src/custom/CatalogDetail/SocialSharePopper.tsx
index 3f1a189e..3c92ae92 100644
--- a/src/custom/CatalogDetail/SocialSharePopper.tsx
+++ b/src/custom/CatalogDetail/SocialSharePopper.tsx
@@ -1,16 +1,24 @@
-import { Lock, Public } from '@mui/icons-material';
 import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
 import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
-import { Typography } from '../../base';
-import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
+
+import {
+  ChainIcon,
+  FacebookIcon,
+  LinkedinIcon,
+  LockIcon,
+  PublicIcon,
+  ShareIcon,
+  TwitterIcon
+} from '../../icons';
 import { useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
+
 import { VisibilityChipMenu } from '../VisibilityChipMenu';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
-import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
+import { CopyShareIconWrapper } from './style';
 
 interface SocialSharePopperProps {
   details: Pattern;
@@ -29,9 +37,7 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   cardId,
   title,
   getUrl,
-  handleCopyUrl,
-  showShareAction,
-  handleShare
+  handleCopyUrl
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -55,41 +61,19 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
           onChange={() => {}}
           enabled={false}
           options={[
-            [VIEW_VISIBILITY.PUBLIC, Public],
-            [VIEW_VISIBILITY.PRIVATE, Lock]
+            [VIEW_VISIBILITY.PUBLIC, PublicIcon],
+            [VIEW_VISIBILITY.PRIVATE, LockIcon]
           ]}
         />
-        {showShareAction ? (
-          <ShareButtonGroup variant="contained">
-            <CustomTooltip title="Change access and visibility">
-              <ShareButton variant="contained" onClick={handleShare}>
-                <Typography>Share</Typography>
-              </ShareButton>
-            </CustomTooltip>
-            <CustomTooltip title="Copy link to design">
-              <ShareSideButton
-                variant="contained"
-                size="small"
-                onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
-              >
-                <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
-              </ShareSideButton>
-            </CustomTooltip>
-          </ShareButtonGroup>
-        ) : (
-          <>
-            {details?.visibility !== 'private' && (
-              <CustomTooltip title="Copy Link" placement="top" arrow>
-                <IconButton
-                  sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
-                  onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
-                >
-                  <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
-                </IconButton>
-              </CustomTooltip>
-            )}
-          </>
-        )}
+
+        <CustomTooltip title="Copy Link" placement="top" arrow>
+          <IconButton
+            sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
+            onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
+          >
+            <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
+          </IconButton>
+        </CustomTooltip>
 
         {(details?.visibility === 'published' || details?.visibility === 'public') && (
           <>
diff --git a/src/custom/ShareModal/ShareModal.tsx b/src/custom/ShareModal/ShareModal.tsx
index fd8213d9..6150249c 100644
--- a/src/custom/ShareModal/ShareModal.tsx
+++ b/src/custom/ShareModal/ShareModal.tsx
@@ -14,6 +14,7 @@ import {
 import { ChainIcon, DeleteIcon, LockIcon, PublicIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { BLACK, WHITE } from '../../theme/colors';
+import { CustomTooltip } from '../CustomTooltip';
 import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
 import UserShareSearch from '../UserSearchField/UserSearchField';
 import {
@@ -97,13 +98,15 @@ const AccessList: React.FC<AccessListProps> = ({
                 {ownerData.id === actorData.id ? (
                   <div>Owner</div>
                 ) : (
-                  <IconButton
-                    edge="end"
-                    aria-label="delete"
-                    onClick={() => handleDelete(actorData.email)}
-                  >
-                    <DeleteIcon fill={theme.palette.background.neutral?.default} />
-                  </IconButton>
+                  <CustomTooltip title="Remove Access" placement="top" arrow>
+                    <IconButton
+                      edge="end"
+                      aria-label="delete"
+                      onClick={() => handleDelete(actorData.email)}
+                    >
+                      <DeleteIcon fill={theme.palette.background.neutral?.default} />
+                    </IconButton>
+                  </CustomTooltip>
                 )}
               </ListItemSecondaryAction>
             </ListItem>
@@ -185,6 +188,9 @@ const ShareModal: React.FC<ShareModalProps> = ({
   const handleMenuClose = () => setMenu(false);
 
   const isShareDisabled = () => {
+    // Ensure at least one user other than the owner is selected
+    const otherUsersSelected = shareUserData.some((user) => user.id !== ownerData.id);
+
     const existingAccessIds = shareUserData.map((user) => user.id);
     const ownerDataId = ownerData?.id;
 
@@ -195,10 +201,10 @@ const ShareModal: React.FC<ShareModalProps> = ({
     const hasMismatchedUsers = !shareUserData.every((user) => existingAccessIds.includes(user.id));
 
     return (
-      shareUserData.length === existingAccessIds.length &&
-      !hasMismatchedUsers &&
-      (selectedOption === selectedResource?.visibility ||
-        shareUserData.length !== existingAccessIds.length)
+      !otherUsersSelected || // Disable if no other users are selected
+      (shareUserData.length === existingAccessIds.length &&
+        !hasMismatchedUsers &&
+        selectedOption === selectedResource?.visibility)
     );
   };
 
@@ -238,52 +244,60 @@ const ShareModal: React.FC<ShareModalProps> = ({
             }
             fetchSuggestions={fetchSuggestions}
           />
-          <CustomListItemText>
-            <Typography variant="h6">General Access</Typography>
-          </CustomListItemText>
-          <CustomDialogContentText>
-            <FormControlWrapper size="small">
-              <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center' }}>
-                <VisibilityIconWrapper>
-                  {selectedOption === SHARE_MODE.PUBLIC ? (
-                    <PublicIcon
-                      width={24}
-                      height={24}
-                      stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
-                    />
-                  ) : (
-                    <LockIcon
-                      width={24}
-                      height={24}
-                      stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
-                    />
-                  )}
-                </VisibilityIconWrapper>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                  <CustomSelect
-                    variant="outlined"
-                    defaultValue={selectedOption}
-                    labelId="share-menu-select"
-                    id="share-menu"
-                    open={openMenu}
-                    onClose={handleMenuClose}
-                    onOpen={() => setMenu(true)}
-                    onChange={handleOptionClick}
-                    disabled={isVisibilitySelectorDisabled}
-                  >
-                    {Object.values(SHARE_MODE).map((option) => (
-                      <MenuItem key={option} selected={option === selectedOption} value={option}>
-                        {option.charAt(0).toUpperCase() + option.slice(1)}
-                      </MenuItem>
-                    ))}
-                  </CustomSelect>
-                  <Typography component="span" variant="body2">
-                    {selectedOption === SHARE_MODE.PRIVATE ? options.PRIVATE : options.PUBLIC}
-                  </Typography>
-                </div>
-              </div>
-            </FormControlWrapper>
-          </CustomDialogContentText>
+          {selectedResource?.visibility !== 'published' && (
+            <>
+              <CustomListItemText>
+                <Typography variant="h6">General Access</Typography>
+              </CustomListItemText>
+              <CustomDialogContentText>
+                <FormControlWrapper size="small">
+                  <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center' }}>
+                    <VisibilityIconWrapper>
+                      {selectedOption === SHARE_MODE.PUBLIC ? (
+                        <PublicIcon
+                          width={24}
+                          height={24}
+                          stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
+                        />
+                      ) : (
+                        <LockIcon
+                          width={24}
+                          height={24}
+                          stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
+                        />
+                      )}
+                    </VisibilityIconWrapper>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                      <CustomSelect
+                        variant="outlined"
+                        defaultValue={selectedOption}
+                        labelId="share-menu-select"
+                        id="share-menu"
+                        open={openMenu}
+                        onClose={handleMenuClose}
+                        onOpen={() => setMenu(true)}
+                        onChange={handleOptionClick}
+                        disabled={isVisibilitySelectorDisabled}
+                      >
+                        {Object.values(SHARE_MODE).map((option) => (
+                          <MenuItem
+                            key={option}
+                            selected={option === selectedOption}
+                            value={option}
+                          >
+                            {option.charAt(0).toUpperCase() + option.slice(1)}
+                          </MenuItem>
+                        ))}
+                      </CustomSelect>
+                      <Typography component="span" variant="body2">
+                        {selectedOption === SHARE_MODE.PRIVATE ? options.PRIVATE : options.PUBLIC}
+                      </Typography>
+                    </div>
+                  </div>
+                </FormControlWrapper>
+              </CustomDialogContentText>
+            </>
+          )}
         </ModalBody>
 
         <ModalFooter