diff --git a/frontend/src/components/Marketing.tsx b/frontend/src/components/Marketing.tsx
index ad3c8ab2..5ad039ec 100644
--- a/frontend/src/components/Marketing.tsx
+++ b/frontend/src/components/Marketing.tsx
@@ -358,7 +358,7 @@ export function Marketing() {
           </div>
         </div>
 
-        <div className="flex justify-center mt-8">
+        <div className="flex flex-col sm:flex-row justify-center items-center gap-4 mt-8">
           <Link
             to="/downloads"
             className="inline-flex items-center gap-2 py-2 px-4 rounded-lg text-center font-medium transition-all duration-300 
@@ -366,8 +366,16 @@ export function Marketing() {
               text-[hsl(var(--marketing-text-muted))] hover:text-foreground"
           >
             <Laptop className="h-4 w-4" />
-            <span>Download</span>
+            <span>Desktop</span>
           </Link>
+          <a
+            href="https://apps.apple.com/us/app/id6743764835"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-block"
+          >
+            <img src="/app-store-badge.svg" alt="Download on the App Store" className="h-10 w-auto" />
+          </a>
         </div>
       </section>
 
diff --git a/frontend/src/components/icons/Android.tsx b/frontend/src/components/icons/Android.tsx
new file mode 100644
index 00000000..301da8f2
--- /dev/null
+++ b/frontend/src/components/icons/Android.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export function Android(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4483-.9993.9993-.9993.9993.4483.9993.9993c0 .5511-.4483.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4483.9993.9993 0 .5511-.4483.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 0 0-.1521-.5676.416.416 0 0 0-.5676.1521l-2.0223 3.503C15.5902 8.2439 13.8533 7.8508 12 7.8508s-3.5902.3931-5.1367 1.0761L4.84 5.4237a.4161.4161 0 0 0-.5677-.1521.4157.4157 0 0 0-.1521.5676l1.9973 3.4592C2.6889 11.183.3432 14.6681 0 18.761h24c-.3435-4.0929-2.6892-7.578-6.1185-9.4396" />
+    </svg>
+  );
+}
diff --git a/frontend/src/routes/downloads.tsx b/frontend/src/routes/downloads.tsx
index 85d6fac9..90e14e19 100644
--- a/frontend/src/routes/downloads.tsx
+++ b/frontend/src/routes/downloads.tsx
@@ -2,7 +2,9 @@ import { createFileRoute } from "@tanstack/react-router";
 import { TopNav } from "@/components/TopNav";
 import { FullPageMain } from "@/components/FullPageMain";
 import { MarketingHeader } from "@/components/MarketingHeader";
-import { Monitor, Apple, Terminal, Globe, Smartphone } from "lucide-react";
+import { Monitor, Terminal, Globe, Smartphone } from "lucide-react";
+import { Apple } from "@/components/icons/Apple";
+import { Android } from "@/components/icons/Android";
 import packageJson from "../../package.json";
 
 // Get version from package.json
@@ -129,6 +131,51 @@ function DownloadPage() {
           </div>
         </section>
 
+        {/* Mobile Apps Section */}
+        <section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 mb-12">
+          <div className="flex items-center gap-3 mb-6">
+            <Smartphone className="w-7 h-7" />
+            <span className="text-3xl font-light">Mobile Apps</span>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
+            <div className="flex flex-col border border-[hsl(var(--marketing-card-border))] bg-[hsl(var(--marketing-card))]/75 text-foreground p-6 rounded-lg hover:border-foreground/30 transition-all duration-300">
+              <div className="p-3 rounded-full bg-[hsl(var(--marketing-card))]/50 border border-[hsl(var(--purple))]/30 w-fit mb-4">
+                <Apple className="w-6 h-6 text-[hsl(var(--purple))]" />
+              </div>
+              <h3 className="text-xl font-medium mb-2">iOS</h3>
+              <p className="text-[hsl(var(--marketing-text-muted))] mb-6 flex-grow">
+                Download our native iOS app for iPhones and iPads.
+              </p>
+              <div className="flex justify-center">
+                <a
+                  href="https://apps.apple.com/us/app/id6743764835"
+                  className="inline-block"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    src="/app-store-badge.svg"
+                    alt="Download on the App Store"
+                    className="h-12"
+                  />
+                </a>
+              </div>
+            </div>
+            <div className="flex flex-col border border-[hsl(var(--marketing-card-border))] bg-[hsl(var(--marketing-card))]/75 text-foreground p-6 rounded-lg hover:border-foreground/30 transition-all duration-300">
+              <div className="p-3 rounded-full bg-[hsl(var(--marketing-card))]/50 border border-[hsl(var(--purple))]/30 w-fit mb-4">
+                <Android className="w-6 h-6 text-[hsl(var(--purple))]" />
+              </div>
+              <h3 className="text-xl font-medium mb-2">Android</h3>
+              <p className="text-[hsl(var(--marketing-text-muted))] mb-6 flex-grow">
+                Android app coming soon.
+              </p>
+              <div className="text-center text-[hsl(var(--marketing-text-muted))]">
+                Stay tuned for our Android app.
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* Web Access Section */}
         <section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 mb-12">
           <div className="flex flex-col p-4 sm:p-8 rounded-2xl bg-gradient-to-b from-[hsl(var(--marketing-card))] to-[hsl(var(--marketing-card))]/80 border-2 border-[hsl(var(--purple))] shadow-[0_0_30px_rgba(148,105,248,0.2)]">
@@ -183,15 +230,6 @@ function DownloadPage() {
             </div>
           </div>
         </section>
-
-        {/* Mobile Coming Soon Section */}
-        <section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 mb-12">
-          <div className="flex items-center gap-3">
-            <Smartphone className="w-7 h-7" />
-            <span className="text-3xl font-light">Mobile Apps</span>
-            <span className="text-2xl text-[hsl(var(--marketing-text-muted))]">Coming soon!</span>
-          </div>
-        </section>
       </FullPageMain>
     </>
   );