diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
index 97b19e9..c4463b1 100644
--- a/.github/workflows/firebase-hosting-merge.yml
+++ b/.github/workflows/firebase-hosting-merge.yml
@@ -18,3 +18,5 @@ jobs:
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MMP_SITE_B1C9B }}'
           channelId: live
           projectId: mmp-site-b1c9b
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
index f4f04eb..437c676 100644
--- a/.github/workflows/firebase-hosting-pull-request.yml
+++ b/.github/workflows/firebase-hosting-pull-request.yml
@@ -19,3 +19,5 @@ jobs:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MMP_SITE_B1C9B }}'
           projectId: mmp-site-b1c9b
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks
diff --git a/.gitignore b/.gitignore
index ebf5351..6cfb12e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,4 +20,5 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 .idea
-*.log
\ No newline at end of file
+*.log
+*.cache
diff --git a/astro.config.mjs b/astro.config.mjs
index b6ed592..2a862b3 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,11 +1,12 @@
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import sitemap from '@astrojs/sitemap';
-
+import { defineConfig } from "astro/config";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://example.com',
-  integrations: [mdx(), sitemap(), tailwind()]
+  site: "https://example.com",
+  integrations: [mdx(), sitemap(), tailwind(), react()]
 });
\ No newline at end of file
diff --git a/firebase.json b/firebase.json
index 93fb369..259ac05 100644
--- a/firebase.json
+++ b/firebase.json
@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "public",
+    "source": ".",
     "ignore": [
       "firebase.json",
       "**/.*",
diff --git a/package-lock.json b/package-lock.json
index f5249e0..a4fd68c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,13 +10,20 @@
       "dependencies": {
         "@astrojs/check": "^0.5.3",
         "@astrojs/mdx": "^2.1.1",
+        "@astrojs/react": "^3.1.0",
         "@astrojs/rss": "^4.0.5",
         "@astrojs/sitemap": "^3.0.5",
         "@astrojs/tailwind": "^5.1.0",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-icons": "^1.3.0",
         "@staticcms/core": "^4.1.2",
         "@staticcms/proxy-server": "^4.0.4",
+        "@types/react": "^18.2.64",
+        "@types/react-dom": "^18.2.21",
         "astro": "^4.3.6",
         "i": "^0.3.7",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "tailwindcss": "^3.4.1",
         "typescript": "^5.3.3"
       },
@@ -185,6 +192,24 @@
         "node": ">=18.14.1"
       }
     },
+    "node_modules/@astrojs/react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/react/-/react-3.1.0.tgz",
+      "integrity": "sha512-KZhZyV+sUDZEjlrmPWNiPGeYowG9uq6/aMbCgVaeKEBlWT4Kg32TNwBOhZk6AcE4LY1l3mIwt3orUGE2JV96/g==",
+      "dependencies": {
+        "@vitejs/plugin-react": "^4.2.0",
+        "ultrahtml": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.50 || ^18.0.21",
+        "@types/react-dom": "^17.0.17 || ^18.0.6",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/@astrojs/rss": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@astrojs/rss/-/rss-4.0.5.tgz",
@@ -561,6 +586,34 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
+      "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
+      "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.23.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz",
@@ -2740,6 +2793,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -2855,6 +2944,14 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -3978,15 +4075,23 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.55",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
-      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "version": "18.2.64",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz",
+      "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "18.2.21",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.21.tgz",
+      "integrity": "sha512-gnvBA/21SA4xxqNXEwNiVcP0xSGHh/gi1VhWv9Bl46a0ItbTT5nFY+G9VSQpaG/8N/qdJpJ+vftQ4zflTtnjLw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -5396,6 +5501,24 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+      "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
+      "dependencies": {
+        "@babel/core": "^7.23.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+        "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0"
+      }
+    },
     "node_modules/@volar/kit": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@volar/kit/-/kit-2.0.3.tgz",
@@ -13220,6 +13343,14 @@
         }
       }
     },
+    "node_modules/react-refresh": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
+      "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -15619,6 +15750,11 @@
         "semver": "^7.3.8"
       }
     },
+    "node_modules/ultrahtml": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.3.tgz",
+      "integrity": "sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg=="
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index b703422..bb82dd7 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,20 @@
   "dependencies": {
     "@astrojs/check": "^0.5.3",
     "@astrojs/mdx": "^2.1.1",
+    "@astrojs/react": "^3.1.0",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@staticcms/core": "^4.1.2",
     "@staticcms/proxy-server": "^4.0.4",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "astro": "^4.3.6",
     "i": "^0.3.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   },
diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx
new file mode 100644
index 0000000..7a31e08
--- /dev/null
+++ b/src/components/CustomInput.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+
+interface CustomInputProps {
+  label: string
+  placeholder: string
+}
+
+export const CustomInput: React.FC<CustomInputProps> = ({ label, placeholder }) => {
+  return (
+    <>
+      <input
+        name={label}
+        id={label}
+        className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+        placeholder={placeholder}
+        required
+      />
+    </>
+  )
+}
diff --git a/src/components/CustomTextarea.tsx b/src/components/CustomTextarea.tsx
new file mode 100644
index 0000000..9045043
--- /dev/null
+++ b/src/components/CustomTextarea.tsx
@@ -0,0 +1,19 @@
+import React from "react"
+
+interface CustomTextareaProps {
+  label: string
+  placeholder: string
+}
+
+export const CustomTextarea: React.FC<CustomTextareaProps> = ({ label, placeholder }) => {
+  return (
+    <>
+      <textarea
+        rows={4}
+        id={label}
+        className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+        placeholder={placeholder}
+      />
+    </>
+  )
+}
diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
new file mode 100644
index 0000000..66d30e5
--- /dev/null
+++ b/src/components/DownloadModal.tsx
@@ -0,0 +1,59 @@
+import React from "react"
+import * as Dialog from "@radix-ui/react-dialog"
+import { Cross2Icon, DownloadIcon, PlusIcon } from "@radix-ui/react-icons"
+import { CustomInput } from "./CustomInput.tsx"
+import { CustomTextarea } from "./CustomTextarea.tsx"
+
+const DownloadModal = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Trigger asChild>
+        <button className="sm:inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
+          <DownloadIcon />
+          <span className="sr-only">Download data</span>
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
+          onClick={() => setIsOpen(false)}
+        />
+        <Dialog.Overlay className="fixed top-0 left-0 right-0 bottom-0 grid place-items-center z-10 w-screen overflow-y-auto">
+          <Dialog.Content className="rounded-lg text-left shadow-xl max-h-fit transition-all bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 sm:my-8 sm:w-full sm:max-w-lg">
+            <div className="flex justify-end">
+              <Dialog.Close className="text-gray-400 bg-transparent  rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center hover:bg-gray-200 hover:text-gray-900">
+                <Cross2Icon />
+                <span className="sr-only">Close</span>
+              </Dialog.Close>
+            </div>
+            <Dialog.Title>Download Data</Dialog.Title>
+            <form className="p-4 md:p-5">
+              <div className="flex flex-col justify-center mb-4">
+                <CustomInput label={"name"} placeholder={"Your name"} />
+                <CustomInput label={"institution"} placeholder={"Your institution"} />
+                <CustomInput label={"email"} placeholder={"Your email"} />
+                <CustomTextarea label={"description"} placeholder={"Why you need this file"} />
+              </div>
+              <div className="flex flex-row gap-2">
+                <button className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500">
+                  <PlusIcon />
+                  <span className="pt-1">Validate Email</span>
+                </button>
+                <button
+                  type="submit"
+                  disabled
+                  className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 disabled:bg-gray-400"
+                >
+                  Download File
+                </button>
+              </div>
+            </form>
+          </Dialog.Content>
+        </Dialog.Overlay>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+export default DownloadModal
diff --git a/src/pages/data.astro b/src/pages/data.astro
new file mode 100644
index 0000000..41622b8
--- /dev/null
+++ b/src/pages/data.astro
@@ -0,0 +1,16 @@
+---
+import Layout from "../layouts/BlogPost.astro"
+import DownloadModal from "../components/DownloadModal"
+---
+
+<Layout
+  title="Data"
+  description="Data files and information"
+  pubDate={new Date("August 08 2021")}
+  heroImage="/blog-placeholder-about.jpg"
+>
+  <div class="flex">
+    <p>Download a File</p>
+    <DownloadModal client:only />
+  </div>
+</Layout>
diff --git a/tsconfig.json b/tsconfig.json
index 7a36ca0..6bed1f7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,8 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
 }
\ No newline at end of file