diff --git a/web/src/components/MoreOptionsDropdown.cy.tsx b/web/src/components/MoreOptionsDropdown.cy.tsx
index 632d583151..6d13ef8664 100644
--- a/web/src/components/MoreOptionsDropdown.cy.tsx
+++ b/web/src/components/MoreOptionsDropdown.cy.tsx
@@ -65,7 +65,7 @@ describe('MoreOptionsDropdown', () => {
     );
     cy.get('button').click();
     cy.contains('Share').should('be.visible');
-    cy.get('[data-testid=dismiss-btn]').click();
+    cy.get('body').click(0, 0);
     cy.contains('Share').should('not.exist');
   });
 
diff --git a/web/src/components/MoreOptionsDropdown.tsx b/web/src/components/MoreOptionsDropdown.tsx
index e48ce39b3e..06b899b55d 100644
--- a/web/src/components/MoreOptionsDropdown.tsx
+++ b/web/src/components/MoreOptionsDropdown.tsx
@@ -2,10 +2,11 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { useFeatureFlag } from 'features/feature-flags/api';
 import { useShare } from 'hooks/useShare';
 import { useAtomValue } from 'jotai';
-import { Link } from 'lucide-react';
+import { ExternalLink, FileDownIcon, Link } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaFacebook, FaLinkedin, FaReddit, FaSquareXTwitter } from 'react-icons/fa6';
+import { useParams } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { getTrackByShareType, ShareType } from 'utils/analytics';
 import {
@@ -17,7 +18,6 @@ import {
 import { hasMobileUserAgent as hasMobileUA } from 'utils/helpers';
 import { displayByEmissionsAtom, isConsumptionAtom } from 'utils/state/atoms';
 
-import { DefaultCloseButton } from './DefaultCloseButton';
 import { MemoizedShareIcon } from './ShareIcon';
 import { TimeDisplay } from './TimeDisplay';
 import { Toast, useToastReference } from './Toast';
@@ -42,11 +42,13 @@ export function MoreOptionsDropdown({
   title,
   id,
 }: MoreOptionsDropdownProps) {
+  const { zoneId } = useParams();
   const { t } = useTranslation();
   const [toastMessage, setToastMessage] = useState('');
   const { isOpen, onDismiss, onToggleDropdown } = useDropdownCtl();
   const reference = useToastReference();
   const { copyToClipboard, share } = useShare();
+  const downloadUrl = `https://portal.electricitymaps.com/datasets/${zoneId}?utm_source=app&utm_medium=download_button&utm_campaign=csv_download`;
 
   const summary = t('more-options-dropdown.summary');
 
@@ -89,25 +91,46 @@ export function MoreOptionsDropdown({
         <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>
         <DropdownMenu.Content
           className={twMerge(
-            'border-gray z-30 my-2 min-w-60 rounded-2xl border border-solid bg-white shadow-md dark:border-b dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300',
+            'border-gray z-30 my-3 w-64 min-w-60 rounded-2xl border bg-white shadow-md dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300',
             hasMobileUserAgent ? 'mx-7' : '-translate-x-[42%]'
           )}
         >
           {isEstimated && (
             <div className="w-full rounded-t-2xl bg-warning/10 p-3 text-xs font-semibold text-warning dark:bg-warning-dark/10 dark:text-warning-dark">
-              <p className="text-xs">{t('more-options-dropdown.preliminary-data')}</p>
+              <p>{t('more-options-dropdown.preliminary-data')}</p>
             </div>
           )}
-          <div className="px-3 pb-2 pt-3">
-            <DropdownMenu.Label className="flex flex-col">
-              <div className="align-items flex justify-between">
-                <h2 className="self-start text-sm">{dropdownTitle}</h2>
-                <DefaultCloseButton onClose={onDismiss} />
-              </div>
-              <TimeDisplay className="whitespace-nowrap text-xs font-normal text-neutral-600 dark:text-gray-300" />
+          <div className="px-2 py-2">
+            <DropdownMenu.Label className=" flex justify-between">
+              <button
+                className="flex w-full justify-between p-2"
+                onClick={() => window.open(downloadUrl, '_blank')}
+                onKeyDown={(event) =>
+                  event.key === 'Enter' && window.open(downloadUrl, '_blank')
+                }
+              >
+                <div className="my-auto flex items-center">
+                  <FileDownIcon size={DEFAULT_ICON_SIZE} />
+                  <div className="ml-2 text-sm font-semibold text-black">
+                    {t('more-options-dropdown.download')}
+                  </div>
+                </div>
+                <ExternalLink
+                  size={DEFAULT_ICON_SIZE}
+                  className="text-gray-500 opacity-80"
+                />
+              </button>
             </DropdownMenu.Label>
-            <DropdownMenu.Separator className="mb-1 mt-3 h-px bg-neutral-200 dark:bg-gray-700" />
-            <DropdownMenu.Group className="flex cursor-pointer flex-col">
+            <DropdownMenu.Separator className="my-1 h-px bg-neutral-200 dark:bg-gray-700" />
+            <DropdownMenu.Group className="flex cursor-pointer flex-col px-2">
+              <DropdownMenu.Item className={dropdownItemStyle}>
+                <div className="flex flex-col">
+                  <div className="align-items flex justify-between">
+                    <h2 className="self-start text-sm">{dropdownTitle}</h2>
+                  </div>
+                  <TimeDisplay className="whitespace-nowrap text-xs text-neutral-600 dark:text-gray-300" />
+                </div>
+              </DropdownMenu.Item>
               <DropdownMenu.Item className={dropdownItemStyle} onSelect={copyShareUrl}>
                 <Link size={DEFAULT_ICON_SIZE} />
                 <p className={dropdownContentStyle}>{copyLinkText}</p>
diff --git a/web/src/features/panels/zone/ZoneHeader.tsx b/web/src/features/panels/zone/ZoneHeader.tsx
index b727a4bb28..b8ed92ed36 100644
--- a/web/src/features/panels/zone/ZoneHeader.tsx
+++ b/web/src/features/panels/zone/ZoneHeader.tsx
@@ -45,6 +45,7 @@ export default function ZoneHeader({ zoneId, isEstimated }: ZoneHeaderTitleProps
         <ZoneHeaderTitle zoneId={zoneId} zoneNameFull={zoneNameFull} />
         <TimeDisplay className="whitespace-nowrap text-sm" />
       </div>
+
       {isShareButtonEnabled &&
         isConsumption &&
         (showMoreOptions ? (
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 578970aad0..afa5942fbc 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -48,6 +48,7 @@
   },
   "more-options-dropdown": {
     "title": "Share",
+    "download": "Download CSV",
     "chart-title": "Share chart",
     "zone-title": "Share zone",
     "mobile-share-via": "Share via",