diff --git a/ui/components/MesheryPatterns/ActionButton.js b/ui/components/MesheryPatterns/ActionButton.js
new file mode 100644
index 00000000000..62047b397e5
--- /dev/null
+++ b/ui/components/MesheryPatterns/ActionButton.js
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Paper,
+  Popper,
+  MenuItem,
+  MenuList,
+  ClickAwayListener,
+} from '@material-ui/core';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+export default function ActionButton({ defaultActionClick, options }) {
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+
+  const handleMenuItemClick = () => {
+    setOpen(false);
+  };
+
+  const handleToggle = (event) => {
+    event.stopPropagation();
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <ButtonGroup
+        variant="contained"
+        style={{ boxShadow: 'none' }}
+        ref={anchorRef}
+        aria-label="Button group with a nested menu"
+      >
+        <Button onClick={defaultActionClick} variant="contained">
+          Action
+        </Button>
+        <Button size="small" onClick={handleToggle} variant="contained">
+          <ArrowDropDownIcon />
+        </Button>
+      </ButtonGroup>
+      <Popper
+        sx={{
+          zIndex: 1,
+        }}
+        open={open}
+        anchorEl={anchorRef.current}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        <Paper>
+          <ClickAwayListener onClickAway={handleClose}>
+            <MenuList id="split-button-menu" autoFocusItem>
+              {options.map((option, index) => (
+                <MenuItem
+                  disabled={option.disabled}
+                  key={option}
+                  onClick={(event) => {
+                    handleMenuItemClick(event);
+                    option.onClick(event, index);
+                  }}
+                >
+                  <div style={{ marginRight: '0.5rem' }}>{option.icon}</div>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </ClickAwayListener>
+        </Paper>
+      </Popper>
+    </React.Fragment>
+  );
+}
diff --git a/ui/components/MesheryPatterns/MesheryPatternCard.js b/ui/components/MesheryPatterns/MesheryPatternCard.js
index 572708acc73..da9e6504525 100644
--- a/ui/components/MesheryPatterns/MesheryPatternCard.js
+++ b/ui/components/MesheryPatterns/MesheryPatternCard.js
@@ -4,6 +4,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import Save from '@material-ui/icons/Save';
 import Fullscreen from '@material-ui/icons/Fullscreen';
 import Moment from 'react-moment';
+import GetAppIcon from '@material-ui/icons/GetApp';
 import FlipCard from '../FlipCard';
 import { UnControlled as CodeMirror } from 'react-codemirror2';
 import FullscreenExit from '@material-ui/icons/FullscreenExit';
@@ -26,6 +27,7 @@ import { Provider } from 'react-redux';
 import { store } from '../../store';
 import CAN from '@/utils/can';
 import { keys } from '@/utils/permission_constants';
+import ActionButton from './ActionButton';
 
 const INITIAL_GRID_SIZE = { xl: 4, md: 6, xs: 12 };
 
@@ -40,6 +42,7 @@ function MesheryPatternCard_({
   handleUnpublishModal,
   handleDeploy,
   handleUnDeploy,
+  handleDownload,
   updateHandler,
   deleteHandler,
   handleClone,
@@ -164,39 +167,39 @@ function MesheryPatternCard_({
                   <span className={classes.btnText}> Unpublish </span>
                 </TooltipButton>
               )}
-
-              <TooltipButton
-                title="Valildate"
-                variant="contained"
-                className={classes.testsButton}
-                onClick={(e) => genericClickHandler(e, handleVerify)}
-                disabled={!CAN(keys.VALIDATE_DESIGN.action, keys.VALIDATE_DESIGN.subject)}
-              >
-                <DoneIcon className={classes.iconPatt} />
-                <span className={classes.btnText}> Validate </span>
-              </TooltipButton>
-
+              <ActionButton
+                defaultActionClick={(e) => genericClickHandler(e, handleVerify)}
+                options={[
+                  {
+                    label: 'Validate',
+                    icon: <DoneIcon className={classes.iconPatt} />,
+                    onClick: (e) => genericClickHandler(e, handleVerify),
+                    disabled: !CAN(keys.VALIDATE_DESIGN.action, keys.VALIDATE_DESIGN.subject),
+                  },
+                  {
+                    label: 'Deploy',
+                    icon: <DoneAllIcon className={classes.iconPatt} />,
+                    onClick: (e) => genericClickHandler(e, handleDeploy),
+                    disabled: !CAN(keys.DEPLOY_DESIGN.action, keys.DEPLOY_DESIGN.subject),
+                  },
+                  {
+                    label: 'Undeploy',
+                    icon: <UndeployIcon fill={'currentColor'} className={classes.iconPatt} />,
+                    onClick: (e) => genericClickHandler(e, handleUnDeploy),
+                    disabled: !CAN(keys.DEPLOY_DESIGN.action, keys.DEPLOY_DESIGN.subject),
+                  },
+                ]}
+              />
               <TooltipButton
-                title="Deploy"
+                title="Download"
                 variant="contained"
-                onClick={(ev) => genericClickHandler(ev, handleDeploy)}
+                color="primary"
+                onClick={handleDownload}
                 className={classes.testsButton}
-                disabled={!CAN(keys.DEPLOY_DESIGN.action, keys.DEPLOY_DESIGN.subject)}
-              >
-                <DoneAllIcon className={classes.iconPatt} />
-                <span className={classes.btnText}>Deploy</span>
-              </TooltipButton>
-              <TooltipButton
-                title="Undeploy"
-                variant="contained"
-                className={classes.undeployButton}
-                onClick={(ev) => genericClickHandler(ev, handleUnDeploy)}
-                disabled={!CAN(keys.DEPLOY_DESIGN.action, keys.DEPLOY_DESIGN.subject)} // use undeploy keys after it get seeded
               >
-                <UndeployIcon fill="#ffffff" className={classes.iconPatt} />
-                <span className={classes.btnText}>Undeploy</span>
+                <GetAppIcon data-cy="download-button" />
+                <span className={classes.btnText}> Download </span>
               </TooltipButton>
-
               {visibility === VISIBILITY.PRIVATE ? (
                 <TooltipButton
                   title="Design"
diff --git a/ui/components/MesheryPatterns/MesheryPatternGridView.js b/ui/components/MesheryPatterns/MesheryPatternGridView.js
index 41a10d08593..c81e65a3f53 100644
--- a/ui/components/MesheryPatterns/MesheryPatternGridView.js
+++ b/ui/components/MesheryPatterns/MesheryPatternGridView.js
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import MesheryPatternCard from './MesheryPatternCard';
 import DesignConfigurator from '../configuratorComponents/MeshModel';
 import { FILE_OPS, ACTIONS } from '../../utils/Enum';
+import { EVENT_TYPES } from '../../lib/event-types';
 import ConfirmationMsg from '../ConfirmationModal';
 import { getComponentsinFile } from '../../utils/utils';
 import useStyles from './Grid.styles';
@@ -11,7 +12,14 @@ import Validation from '../Validation';
 import Modal from '../Modal';
 import PublicIcon from '@material-ui/icons/Public';
 import DryRunComponent from '../DryRun/DryRunComponent';
+import { withSnackbar } from 'notistack';
 
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { updateProgress } from '../../lib/store';
+import ExportModal from '../ExportModal';
+import downloadContent from '@/utils/fileDownloader';
+import { useNotification } from '@/utils/hooks/useNotification';
 const INITIAL_GRID_SIZE = { xl: 4, md: 6, xs: 12 };
 
 function PatternCardGridItem({
@@ -23,6 +31,7 @@ function PatternCardGridItem({
   handleUnDeploy,
   handleClone,
   handleSubmit,
+  handleDownload,
   setSelectedPatterns,
   canPublishPattern = false,
   user,
@@ -50,6 +59,7 @@ function PatternCardGridItem({
         handleUnpublishModal={handleUnpublishModal}
         handleClone={handleClone}
         handleInfoModal={handleInfoModal}
+        handleDownload={handleDownload}
         deleteHandler={() =>
           handleSubmit({
             data: yaml,
@@ -130,9 +140,11 @@ function MesheryPatternGrid({
   selectedK8sContexts,
   publishSchema,
   user,
+  updateProgress,
   handleInfoModal,
 }) {
   const classes = useStyles();
+  const { notify } = useNotification();
   const handlePublishModal = (pattern) => {
     if (canPublishPattern) {
       setPublishModal({
@@ -160,6 +172,40 @@ function MesheryPatternGrid({
     dryRunComponent: null,
   });
 
+  const [downloadModal, setDownloadModal] = useState({
+    open: false,
+    content: null,
+  });
+  const handleDownload = (e, design, source_type, params) => {
+    e.stopPropagation();
+    updateProgress({ showProgress: true });
+    try {
+      let id = design.id;
+      let name = design.name;
+      downloadContent({ id, name, type: 'pattern', source_type, params });
+      updateProgress({ showProgress: false });
+      notify({ message: `"${name}" design downloaded`, event_type: EVENT_TYPES.INFO });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  const handleDownloadDialogClose = () => {
+    setDownloadModal((prevState) => ({
+      ...prevState,
+      open: false,
+      content: null,
+    }));
+  };
+
+  const handleDesignDownloadModal = (e, pattern) => {
+    e.stopPropagation();
+    setDownloadModal((prevState) => ({
+      ...prevState,
+      open: true,
+      content: pattern,
+    }));
+  };
+
   const handleModalClose = () => {
     setModalOpen({
       open: false,
@@ -227,6 +273,7 @@ function MesheryPatternGrid({
               handleUnpublishModal={(e) => handleUnpublishModal(e, pattern)()}
               handleInfoModal={() => handleInfoModal(pattern)}
               handleSubmit={handleSubmit}
+              handleDownload={(e) => handleDesignDownloadModal(e, pattern)}
               setSelectedPatterns={setSelectedPattern}
             />
           ))}
@@ -296,8 +343,18 @@ function MesheryPatternGrid({
           submitBtnIcon={<PublicIcon />}
         />
       )}
+      <ExportModal
+        downloadModal={downloadModal}
+        handleDownloadDialogClose={handleDownloadDialogClose}
+        handleDesignDownload={handleDownload}
+      />
     </div>
   );
 }
 
-export default MesheryPatternGrid;
+const mapDispatchToProps = (dispatch) => ({
+  updateProgress: bindActionCreators(updateProgress, dispatch),
+});
+
+// @ts-ignore
+export default connect(mapDispatchToProps)(withSnackbar(MesheryPatternGrid));