diff --git a/app/download/page.tsx b/app/download/page.tsx
index 47a7a54..8413d0b 100644
--- a/app/download/page.tsx
+++ b/app/download/page.tsx
@@ -1,9 +1,229 @@
 "use client";
 
-import UnderConstruction from "../components/UnderConstruction";
+import { HiX, HiOutlineDownload as DownloadIcon } from "react-icons/hi";
+import { useState, useRef, useLayoutEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function Download() {
+  const [openCard, setOpenCard] = useState<
+    "windows" | "macos" | "linux" | null
+  >(null);
+  const [linuxShell, setLinuxShell] = useState<"bash" | "zsh" | "fish">("bash");
+  const prevCard = useRef<"windows" | "macos" | "linux" | null>(null);
+  const [expandedHeight, setExpandedHeight] = useState(0);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const cardData = [
+    {
+      id: "windows",
+      title: "Windows",
+      description: "Amber console installer for Windows 10 and newer.",
+      download: "/downloads/amber-windows.zip",
+      install: `# Extract Amber
+tar -xzf amber-windows.zip
+move amber C:\\Amber
+C:\\Amber`,
+      verify: `flint --version`,
+    },
+    {
+      id: "macos",
+      title: "macOS",
+      description: "Amber installer for Apple Silicon & Intel.",
+      download: "/downloads/amber-macos.zip",
+      install: `unzip amber-macos.zip
+mv amber ~/Amber
+echo 'export PATH=$HOME/Amber:$PATH' >> ~/.zshrc
+source ~/.zshrc`,
+      verify: `flint --version`,
+    },
+    {
+      id: "linux",
+      title: "Linux",
+      description: "Amber installer with shell-specific PATH instructions.",
+      download: "/downloads/amber-linux.tar.gz",
+      install: `tar -xzf amber-linux.tar.gz
+mv amber ~/Amber`,
+      verify: `flint --version`,
+      shells: ["bash", "zsh", "fish"] as const,
+    },
+  ];
+
+  const toggleCard = (cardId: "windows" | "macos" | "linux") => {
+    prevCard.current = openCard;
+    setOpenCard(openCard === cardId ? null : cardId);
+    setLinuxShell("bash");
+  };
+
+  const getSlideDirection = () => {
+    if (!prevCard.current || !openCard) return 0;
+    const order = ["windows", "macos", "linux"];
+    return order.indexOf(openCard) > order.indexOf(prevCard.current) ? -50 : 50;
+  };
+
+  const isSwitching =
+    prevCard.current && openCard && prevCard.current !== openCard;
+  const isOpening = !prevCard.current && openCard;
+
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      setExpandedHeight(contentRef.current.offsetHeight);
+    } else {
+      setExpandedHeight(0);
+    }
+  }, [openCard, linuxShell]);
 
-export default function Home() {
   return (
-    <UnderConstruction />
+    <main className="min-h-screen px-6 py-28 bg-background text-foreground">
+      <section className="max-w-7xl mx-auto space-y-8 relative">
+        <h1 className="text-5xl font-extrabold mb-4 tracking-tight">
+          Download Flint
+        </h1>
+        <p className="text-lg opacity-90 max-w-2xl">
+          Use the Amber console installer to install Flint on your platform. You
+          will need to add it to your PATH manually.
+        </p>
+
+        {/* Cards Row */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+          {cardData.map((card) => (
+            <motion.div
+              key={card.id}
+              layout
+              className={`rounded-2xl border border-foreground/15 backdrop-blur-sm p-6 cursor-pointer transition-all shadow-sm hover:shadow-lg hover:border-foreground/30 ${
+                openCard === card.id
+                  ? "shadow-2xl border-foreground/30 bg-background/80 backdrop-blur-lg"
+                  : ""
+              }`}
+              onClick={() =>
+                toggleCard(card.id as "windows" | "macos" | "linux")
+              }
+              whileHover={{ scale: 1.02 }}
+            >
+              <div className="flex justify-between items-center">
+                <h2 className="text-2xl font-semibold">{card.title}</h2>
+                <span className="text-2xl">
+                  {openCard === card.id ? (
+                    <HiX className="text-red-500" />
+                  ) : (
+                    "+"
+                  )}
+                </span>
+              </div>
+              <p className="opacity-80 mt-2">{card.description}</p>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Expanded Content */}
+        <div className="relative mt-4 min-h-[1px]">
+          <AnimatePresence initial={false}>
+            {openCard && (
+              <motion.div
+                ref={contentRef}
+                key={openCard}
+                initial={{
+                  opacity: 0,
+                  y: isOpening ? -10 : 0,
+                  x: isSwitching ? getSlideDirection() : 0,
+                }}
+                animate={{ opacity: 1, y: 0, x: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ type: "spring", stiffness: 80, damping: 20 }}
+                className="absolute inset-x-0 overflow-hidden rounded-2xl border border-foreground/15 bg-background/70 backdrop-blur-md shadow-lg"
+              >
+                <div className="p-6 space-y-6">
+                  {(() => {
+                    const card = cardData.find((c) => c.id === openCard)!;
+                    return (
+                      <>
+                        <a
+                          href={card.download}
+                          className="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-white text-gray-900 font-semibold hover:bg-gray-100 hover:scale-105 transition-all shadow-md"
+                        >
+                          <DownloadIcon className="text-lg text-gray-900" />
+                          Download Amber
+                        </a>
+
+                        <div>
+                          <h3 className="font-semibold mb-2">Install Amber</h3>
+                          <pre className="rounded-xl border border-foreground/15 bg-background/50 backdrop-blur-sm p-4 text-sm font-mono overflow-x-auto">
+                            {card.install}
+                          </pre>
+                        </div>
+
+                        {card.shells && (
+                          <div>
+                            <h3 className="font-semibold mb-2">
+                              Add Amber to PATH
+                            </h3>
+                            <div className="flex gap-4 mb-4">
+                              {card.shells.map((s) => (
+                                <button
+                                  key={s}
+                                  className={`px-4 py-2 rounded-xl font-mono font-semibold text-sm transition-all ${
+                                    linuxShell === s
+                                      ? "bg-white text-gray-900 shadow-md"
+                                      : "bg-background/30 text-gray-200 hover:bg-background/50"
+                                  }`}
+                                  onClick={() => setLinuxShell(s)}
+                                >
+                                  {s.toUpperCase()}
+                                </button>
+                              ))}
+                            </div>
+                            <div className="rounded-xl border border-foreground/15 bg-background/50 backdrop-blur-sm p-4 font-mono text-sm overflow-x-auto">
+                              {linuxShell === "bash" && (
+                                <pre>{`echo 'export PATH=$HOME/Amber:$PATH' >> ~/.bashrc\nsource ~/.bashrc`}</pre>
+                              )}
+                              {linuxShell === "zsh" && (
+                                <pre>{`echo 'export PATH=$HOME/Amber:$PATH' >> ~/.zshrc\nsource ~/.zshrc`}</pre>
+                              )}
+                              {linuxShell === "fish" && (
+                                <pre>{`set -Ux PATH $HOME/Amber $PATH`}</pre>
+                              )}
+                            </div>
+                          </div>
+                        )}
+
+                        <div>
+                          <h3 className="font-semibold mb-2">
+                            Verify Installation
+                          </h3>
+                          <pre className="rounded-xl border border-foreground/15 bg-background/50 backdrop-blur-sm p-4 text-sm font-mono overflow-x-auto">
+                            {card.verify}
+                          </pre>
+                        </div>
+                      </>
+                    );
+                  })()}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+          {/* Dummy div to push content */}
+          <motion.div
+            key={openCard ?? "dummy"} // ensures exit animation triggers
+            initial={{ height: 0 }}
+            animate={{ height: expandedHeight }}
+            exit={{ height: 0 }}
+            transition={{
+              type: false,
+              stiffness: 150, // faster than the cards
+              damping: 1000,
+            }}
+          />
+        </div>
+
+        <div className="mt-12 text-sm opacity-70">
+          Looking for source builds?{" "}
+          <a
+            href="https://github.com/flint-language/flint"
+            className="underline underline-offset-4 hover:opacity-100"
+          >
+            GitHub
+          </a>
+        </div>
+      </section>
+    </main>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index adcad67..bf5b6db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,12 @@
       "dependencies": {
         "@vercel/analytics": "^1.6.1",
         "@vercel/speed-insights": "^1.3.1",
+        "framer-motion": "^12.23.26",
         "monaco-editor": "^0.55.1",
         "monaco-editor-textmate": "^4.0.0",
         "monaco-textmate": "^3.0.1",
         "monaco-themes": "^0.4.8",
-        "next": "16.0.7",
+        "next": "^16.0.10",
         "onigasm": "^2.2.5",
         "react": "19.2.1",
         "react-dom": "19.2.1",
@@ -1044,9 +1045,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.7.tgz",
-      "integrity": "sha512-gpaNgUh5nftFKRkRQGnVi5dpcYSKGcZZkQffZ172OrG/XkrnS7UBTQ648YY+8ME92cC4IojpI2LqTC8sTDhAaw==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.10.tgz",
+      "integrity": "sha512-8tuaQkyDVgeONQ1MeT9Mkk8pQmZapMKFh5B+OrFUlG3rVmYTXcXlBetBgTurKXGaIZvkoqRT9JL5K3phXcgang==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -1060,9 +1061,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.7.tgz",
-      "integrity": "sha512-LlDtCYOEj/rfSnEn/Idi+j1QKHxY9BJFmxx7108A6D8K0SB+bNgfYQATPk/4LqOl4C0Wo3LACg2ie6s7xqMpJg==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.10.tgz",
+      "integrity": "sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg==",
       "cpu": [
         "arm64"
       ],
@@ -1076,9 +1077,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.7.tgz",
-      "integrity": "sha512-rtZ7BhnVvO1ICf3QzfW9H3aPz7GhBrnSIMZyr4Qy6boXF0b5E3QLs+cvJmg3PsTCG2M1PBoC+DANUi4wCOKXpA==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.10.tgz",
+      "integrity": "sha512-spbEObMvRKkQ3CkYVOME+ocPDFo5UqHb8EMTS78/0mQ+O1nqE8toHJVioZo4TvebATxgA8XMTHHrScPrn68OGw==",
       "cpu": [
         "x64"
       ],
@@ -1092,9 +1093,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.7.tgz",
-      "integrity": "sha512-mloD5WcPIeIeeZqAIP5c2kdaTa6StwP4/2EGy1mUw8HiexSHGK/jcM7lFuS3u3i2zn+xH9+wXJs6njO7VrAqww==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.10.tgz",
+      "integrity": "sha512-uQtWE3X0iGB8apTIskOMi2w/MKONrPOUCi5yLO+v3O8Mb5c7K4Q5KD1jvTpTF5gJKa3VH/ijKjKUq9O9UhwOYw==",
       "cpu": [
         "arm64"
       ],
@@ -1108,9 +1109,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.7.tgz",
-      "integrity": "sha512-+ksWNrZrthisXuo9gd1XnjHRowCbMtl/YgMpbRvFeDEqEBd523YHPWpBuDjomod88U8Xliw5DHhekBC3EOOd9g==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.10.tgz",
+      "integrity": "sha512-llA+hiDTrYvyWI21Z0L1GiXwjQaanPVQQwru5peOgtooeJ8qx3tlqRV2P7uH2pKQaUfHxI/WVarvI5oYgGxaTw==",
       "cpu": [
         "arm64"
       ],
@@ -1124,9 +1125,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.7.tgz",
-      "integrity": "sha512-4WtJU5cRDxpEE44Ana2Xro1284hnyVpBb62lIpU5k85D8xXxatT+rXxBgPkc7C1XwkZMWpK5rXLXTh9PFipWsA==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.10.tgz",
+      "integrity": "sha512-AK2q5H0+a9nsXbeZ3FZdMtbtu9jxW4R/NgzZ6+lrTm3d6Zb7jYrWcgjcpM1k8uuqlSy4xIyPR2YiuUr+wXsavA==",
       "cpu": [
         "x64"
       ],
@@ -1140,9 +1141,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.7.tgz",
-      "integrity": "sha512-HYlhqIP6kBPXalW2dbMTSuB4+8fe+j9juyxwfMwCe9kQPPeiyFn7NMjNfoFOfJ2eXkeQsoUGXg+O2SE3m4Qg2w==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.10.tgz",
+      "integrity": "sha512-1TDG9PDKivNw5550S111gsO4RGennLVl9cipPhtkXIFVwo31YZ73nEbLjNC8qG3SgTz/QZyYyaFYMeY4BKZR/g==",
       "cpu": [
         "x64"
       ],
@@ -1156,9 +1157,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.7.tgz",
-      "integrity": "sha512-EviG+43iOoBRZg9deGauXExjRphhuYmIOJ12b9sAPy0eQ6iwcPxfED2asb/s2/yiLYOdm37kPaiZu8uXSYPs0Q==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.10.tgz",
+      "integrity": "sha512-aEZIS4Hh32xdJQbHz121pyuVZniSNoqDVx1yIr2hy+ZwJGipeqnMZBJHyMxv2tiuAXGx6/xpTcQJ6btIiBjgmg==",
       "cpu": [
         "arm64"
       ],
@@ -1172,9 +1173,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.7.tgz",
-      "integrity": "sha512-gniPjy55zp5Eg0896qSrf3yB1dw4F/3s8VK1ephdsZZ129j2n6e1WqCbE2YgcKhW9hPB9TVZENugquWJD5x0ug==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.10.tgz",
+      "integrity": "sha512-E+njfCoFLb01RAFEnGZn6ERoOqhK1Gl3Lfz1Kjnj0Ulfu7oJbuMyvBKNj/bw8XZnenHDASlygTjZICQW+rYW1Q==",
       "cpu": [
         "x64"
       ],
@@ -3690,6 +3691,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.26",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
+      "integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5067,6 +5095,21 @@
         "node": ">=22.0.0"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5116,12 +5159,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.0.7",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.0.7.tgz",
-      "integrity": "sha512-3mBRJyPxT4LOxAJI6IsXeFtKfiJUbjCLgvXO02fV8Wy/lIhPvP94Fe7dGhUgHXcQy4sSuYwQNcOLhIfOm0rL0A==",
+      "version": "16.0.10",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.0.10.tgz",
+      "integrity": "sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.0.7",
+        "@next/env": "16.0.10",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -5134,14 +5177,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.0.7",
-        "@next/swc-darwin-x64": "16.0.7",
-        "@next/swc-linux-arm64-gnu": "16.0.7",
-        "@next/swc-linux-arm64-musl": "16.0.7",
-        "@next/swc-linux-x64-gnu": "16.0.7",
-        "@next/swc-linux-x64-musl": "16.0.7",
-        "@next/swc-win32-arm64-msvc": "16.0.7",
-        "@next/swc-win32-x64-msvc": "16.0.7",
+        "@next/swc-darwin-arm64": "16.0.10",
+        "@next/swc-darwin-x64": "16.0.10",
+        "@next/swc-linux-arm64-gnu": "16.0.10",
+        "@next/swc-linux-arm64-musl": "16.0.10",
+        "@next/swc-linux-x64-gnu": "16.0.10",
+        "@next/swc-linux-x64-musl": "16.0.10",
+        "@next/swc-win32-arm64-msvc": "16.0.10",
+        "@next/swc-win32-x64-msvc": "16.0.10",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
diff --git a/package.json b/package.json
index cb05a77..597192c 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,12 @@
   "dependencies": {
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
+    "framer-motion": "^12.23.26",
     "monaco-editor": "^0.55.1",
     "monaco-editor-textmate": "^4.0.0",
     "monaco-textmate": "^3.0.1",
     "monaco-themes": "^0.4.8",
-    "next": "16.0.7",
+    "next": "^16.0.10",
     "onigasm": "^2.2.5",
     "react": "19.2.1",
     "react-dom": "19.2.1",