diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 1cb8b63..22a099d 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
import Button from '/src/components/Button/Button'
import Content from '/src/components/Content/Content'
+import DownloadButtons from '/src/components/DownloadButtons/DownloadButtons'
import Footer from '/src/components/Footer/Footer'
import Header from '/src/components/Header/Header'
import { default as P } from '/src/components/Paragraph/Paragraph'
@@ -43,45 +44,11 @@ const Page = async () => {
{/* @ts-expect-error Async Server Component */}
-
Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free. Learn more about how to Crab Fit.
+
Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free. Learn more about how to Crab Fit.
Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.
The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository. By using Crab Fit you agree to the privacy policy.
diff --git a/frontend/src/components/DownloadButtons/DownloadButtons.module.scss b/frontend/src/components/DownloadButtons/DownloadButtons.module.scss
new file mode 100644
index 0000000..d6c08cc
--- /dev/null
+++ b/frontend/src/components/DownloadButtons/DownloadButtons.module.scss
@@ -0,0 +1,8 @@
+.buttonWrapper {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ margin: 30px 0;
+}
diff --git a/frontend/src/components/DownloadButtons/DownloadButtons.tsx b/frontend/src/components/DownloadButtons/DownloadButtons.tsx
new file mode 100644
index 0000000..a62a8a9
--- /dev/null
+++ b/frontend/src/components/DownloadButtons/DownloadButtons.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import Button from '/src/components/Button/Button'
+import { useTranslation } from '/src/i18n/client'
+import { detectBrowser } from '/src/utils'
+
+import styles from './DownloadButtons.module.scss'
+
+const DownloadButtons = () => {
+ const { t } = useTranslation('home')
+
+ const [isVisible, setIsVisible] = useState(true)
+ const [browser, setBrowser] = useState>()
+
+ useEffect(() => {
+ // Don't show buttons in the Android app
+ if (document.referrer.includes('android-app://fit.crab')) {
+ setIsVisible(false)
+ }
+
+ // Detect which browser the user is using
+ setBrowser(detectBrowser())
+ }, [])
+
+ return isVisible ?