diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js
index 4a1acdfefa..aea68bace2 100644
--- a/frontend/src/components/projectDetail/downloadOsmData.js
+++ b/frontend/src/components/projectDetail/downloadOsmData.js
@@ -38,8 +38,6 @@ export const TITLED_ICONS = [
   },
 ];
 
-const fileFormats = [{ format: 'SHP' }, { format: 'GEOJSON' }, { format: 'KML' }];
-
 /**
  * Renders a list of download options for OSM data based on the project mapping types.
  *
@@ -176,7 +174,7 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => {
               <p className="fw5 ttc">{type.title}</p>
               <FileFormatCard
                 title={type.title}
-                fileFormats={fileFormats}
+                fileFormats={type.formats}
                 downloadS3Data={downloadS3File}
                 isDownloadingState={isDownloadingState}
                 selectedCategoryFormat={selectedCategoryFormat}
@@ -214,7 +212,9 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => {
                     style={{ gap: '10px' }}
                   >
                     <DownloadIcon style={{ height: '28px' }} color="#D73F3F" />
-                    <p className="ttc">{typ}</p>
+                    <p className="ttc">
+                      {typ} {selectedCategoryFormat.format}
+                    </p>
                   </span>
                 ))}
             </div>
diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js
index 7e57fbc596..fc2c11b24c 100644
--- a/frontend/src/components/projectDetail/fileFormatCard.js
+++ b/frontend/src/components/projectDetail/fileFormatCard.js
@@ -26,10 +26,10 @@ function FileFormatCard({
         const loadingState =
           isDownloadingState?.isDownloading &&
           isDownloadingState?.title === title &&
-          isDownloadingState?.fileFormat === fileFormat?.format;
+          isDownloadingState?.fileFormat === fileFormat;
 
         return (
-          <React.Fragment key={fileFormat.title}>
+          <React.Fragment key={fileFormat}>
             <span
               role="button"
               tabIndex={0}
@@ -38,17 +38,16 @@ function FileFormatCard({
                   ? { cursor: 'not-allowed', pointerEvents: 'none' }
                   : { cursor: 'pointer' }
               }
-              onClick={() => setSelectedCategoryFormat({ title, format: fileFormat.format })}
-              onKeyUp={() => setSelectedCategoryFormat({ title, format: fileFormat.format })}
+              onClick={() => setSelectedCategoryFormat({ title, format: fileFormat })}
+              onKeyUp={() => setSelectedCategoryFormat({ title, format: fileFormat })}
               className={`link ${
-                selectedCategoryFormat?.format === fileFormat?.format &&
-                selectedCategoryFormat.title === title
+                selectedCategoryFormat === fileFormat && selectedCategoryFormat.title === title
                   ? 'red'
                   : ''
               } hover-red color-inherit`}
             >
-              <p className="underline fw5" style={{ textUnderlineOffset: '5px' }}>
-                {fileFormat.format}
+              <p className="underline fw5 ttu  " style={{ textUnderlineOffset: '5px' }}>
+                {fileFormat}
                 {loadingState ? <AnimatedLoadingIcon /> : null}
               </p>
             </span>