diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index 76d14edd..cbbb2a3a 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/src/custom/CatalogDetail/ActionButton.tsx
@@ -4,7 +4,7 @@ import { CopyIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
-import { downloadFilter, downloadYaml } from './helper';
+import { downloadPattern, downloadYaml } from './helper';
 import { ActionButton, StyledActionWrapper, UnpublishAction } from './style';
 import { RESOURCE_TYPES } from './types';
 
@@ -79,9 +79,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               color: theme.palette.text.default
             }}
             onClick={() =>
-              cleanedType === RESOURCE_TYPES.FILTERS
-                ? downloadFilter(details.id, details.name)
-                : downloadYaml(details.pattern_file, details.name)
+              cleanedType === RESOURCE_TYPES.VIEWS
+                ? downloadYaml(details.pattern_file, details.name)
+                : downloadPattern(details.id, details.name, cleanedType)
             }
           >
             <Download width={24} height={24} fill={theme.palette.icon.default} />
diff --git a/src/custom/CatalogDetail/helper.ts b/src/custom/CatalogDetail/helper.ts
index 2d6601f7..48075ee2 100644
--- a/src/custom/CatalogDetail/helper.ts
+++ b/src/custom/CatalogDetail/helper.ts
@@ -47,6 +47,20 @@ export const downloadFilter = (id: string, name: string): void => {
   linkElement.remove();
 };
 
+export const downloadPattern = (id: string, name: string, type: string): void => {
+  const pattern = type == 'design' ? 'patterns' : 'filters';
+  const dataUri = `${process.env.API_ENDPOINT_PREFIX}/api/content/${pattern}/download/${id}`;
+
+  // Add the .wasm extension to the filename
+  const fileNameWithExtension = name + '.wasm';
+
+  const linkElement = document.createElement('a');
+  linkElement.setAttribute('href', dataUri);
+  linkElement.setAttribute('download', fileNameWithExtension);
+  linkElement.click();
+  linkElement.remove();
+};
+
 export const formatToTitleCase = (value: string): string => {
   if (typeof value === 'string') {
     return value.substring(0, 1).toUpperCase().concat('', value.substring(1).toLowerCase());