diff --git a/app/favicon.ico b/app/favicon.ico
index 9bb10d9..45f9bac 100644
Binary files a/app/favicon.ico and b/app/favicon.ico differ
diff --git a/components/landing-page.tsx b/components/landing-page.tsx
index 3d9cc5a..289bc63 100644
--- a/components/landing-page.tsx
+++ b/components/landing-page.tsx
@@ -13,14 +13,28 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog"
 import { Label } from "@/components/ui/label"
+import { useEffect, useState } from 'react';
 
 
-import { Github, Download, Zap, Type, Globe, Sparkles, Heart, MessageCircle, Paintbrush, Star } from 'lucide-react'
+import { Github, Download, Zap, Type, Globe, Sparkles, Heart, MessageCircle, Paintbrush, Star, Speech } from 'lucide-react'
 import Image from 'next/image'
 
 
 export default function Component() {
 
+  const [downloadLink, setDownloadLink] = useState('');
+
+  useEffect(() => {
+    const userAgent = window.navigator.userAgent;
+    if (userAgent.indexOf('Win') !== -1) {
+      setDownloadLink('https://github.com/tmoroney/auto-subs/releases/download/V2.1/AutoSubs-Win-setup.exe');
+    } else if (userAgent.indexOf('Mac') !== -1) {
+      setDownloadLink('https://github.com/tmoroney/auto-subs/releases/download/V2.1/AutoSubs-Mac-ARM.pkg');
+    } else {
+      setDownloadLink('https://github.com/tmoroney/auto-subs/releases');
+    }
+  }, []);
+
   return (
     <div className="flex flex-col min-h-screen bg-gradient-to-b from-blue-50 to-white font-sans">
       <style jsx global>{`
@@ -42,24 +56,24 @@ export default function Component() {
         }
       `}</style>
       <div className="relative">
-        <header className="absolute top-0 left-0 right-0 z-10 px-6 lg:px-10 py-8">
+        <header className="absolute top-0 left-0 right-0 z-10 px-6 lg:px-10 py-6">
           <div className="container mx-auto max-w-6xl">
             <div className="bg-white bg-opacity-90 backdrop-blur-md rounded-full shadow-lg py-3 px-6 flex items-center">
               <a className="flex items-center justify-center" href="#">
-                <Sparkles className="h-7 w-7 text-blue-600" strokeWidth={2} />
+                <Image src="/auto-subs/assets/logo.png" alt="AutoSubs Logo" width={40} height={40} />
                 <span className="ml-2 text-2xl font-semibold text-gray-900 font-['Poppins']">AutoSubs</span>
               </a>
               <nav className="ml-auto flex gap-6 sm:gap-8">
-                <a className="hidden sm:block text-sm font-medium hover:text-blue-600 text-gray-700" href="#features">
+                <a className="hidden sm:block text-sm font-medium hover:text-blue-600 text-gray-700" href="#features" onClick={(e) => { e.preventDefault(); document.querySelector('#features')?.scrollIntoView({ behavior: 'smooth' }); }}>
                   Features
                 </a>
-                <a className="hidden md:block text-sm font-medium hover:text-blue-600 text-gray-700" href="#how-it-works">
+                <a className="hidden md:block text-sm font-medium hover:text-blue-600 text-gray-700" href="#how-it-works" onClick={(e) => { e.preventDefault(); document.querySelector('#how-it-works')?.scrollIntoView({ behavior: 'smooth' }); }}>
                   How It Works
                 </a>
-                <a className="text-sm font-medium hover:text-blue-600 text-gray-700" href="#support">
-                  Support Us
+                <a className="text-sm font-medium hover:text-blue-600 text-gray-700" href="#support" onClick={(e) => { e.preventDefault(); document.querySelector('#support')?.scrollIntoView({ behavior: 'smooth' }); }}>
+                  Donate
                 </a>
-                <a className="hidden sm:block text-sm font-medium hover:text-blue-600 text-gray-700" href="#about-developer">
+                <a className="hidden sm:block text-sm font-medium hover:text-blue-600 text-gray-700" href="#about-developer" onClick={(e) => { e.preventDefault(); document.querySelector('#about-developer')?.scrollIntoView({ behavior: 'smooth' }); }}>
                   About
                 </a>
                 <a
@@ -83,20 +97,20 @@ export default function Component() {
             </div>
           </div>
         </header>
-        <section className="w-full pt-32 pb-20 md:pt-40 md:pb-32 lg:pt-48 lg:pb-40 xl:pt-56 xl:pb-48 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
+        <section className="w-full h-[100vh] bg-gradient-to-r from-blue-500 to-purple-600 text-white">
           <div className="container mx-auto px-6 lg:px-10 max-w-6xl">
-            <div className="flex flex-col lg:flex-row items-center space-y-6 lg:space-y-0 lg:space-x-12">
+            <div className="flex flex-col lg:flex-row items-center space-y-6 lg:space-y-0 lg:space-x-16 pt-[24vh]">
               <div className="flex-1 space-y-6 text-center lg:text-left">
                 <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl/none">
-                  AI-Powered Subtitle Generation
+                  AI-Powered Subtitles
                   <br />
                   <span className="text-yellow-300">for DaVinci Resolve</span>
                 </h1>
                 <p className="mx-auto lg:mx-0 max-w-[800px] text-lg md:text-xl lg:text-2xl text-blue-100">
-                  Automatically generate accurate subtitles for your videos, saving you hours.
+                  Automatically generate accurate subtitles right on your editing timeline.
                 </p>
                 <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
-                  <a href="https://github.com/tmoroney/auto-subs/releases" target="_blank" rel="noopener noreferrer">
+                  <a href={downloadLink} download>
                     <Button className="bg-white text-blue-600 hover:bg-blue-50 border border-white hover:border-bg-blue-50 font-semibold px-8 py-6 text-lg btn-hover-effect">
                       <Download className="mr-2 h-5 w-5" />
                       Download AutoSubs
@@ -110,45 +124,29 @@ export default function Component() {
                   </a>
                 </div>
               </div>
-              <div className="flex-1 relative w-full max-w-2xl aspect-video rounded-lg overflow-hidden shadow-2xl">
-                <iframe
+              <div className="flex-1 relative w-full max-w-xl rounded-2xl overflow-hidden">
+                <Image
+                  src="/auto-subs/assets/AutoSubs.png"
+                  alt="AutoSubs App"
+                  width={600}
+                  height={1000}
+                  className="h-full w-full"
+                  unoptimized
+                />
+                {/* <iframe
                   width="100%"
                   height="100%"
                   src="https://www.youtube.com/embed/Q-Ud4ZAWH6o?si=25mwU7JJE71EU4Av"
                   title="YouTube video player"
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   className="w-full h-full"
-                />
+                /> */}
               </div>
             </div>
           </div>
         </section>
-      </div>
+      </div >
       <main className="flex-1">
-        <section id="features" className="w-full py-20 md:py-32 bg-white">
-          <div className="container mx-auto px-6 lg:px-10 max-w-6xl">
-            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl text-center mb-16 text-gray-900">
-              Key Features
-            </h2>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
-              <div className="flex flex-col items-center text-center bg-gradient-to-b from-blue-50 to-white rounded-lg p-8 shadow-sm">
-                <Zap className="h-16 w-16 text-blue-600 mb-6" />
-                <h3 className="text-2xl font-semibold mb-4 text-gray-900">AI-Powered Speed</h3>
-                <p className="text-gray-600">Generate precise subtitles in minutes, saving valuable time in your video production workflow.</p>
-              </div>
-              <div className="flex flex-col items-center text-center bg-gradient-to-b from-purple-50 to-white rounded-lg p-8 shadow-sm">
-                <Paintbrush className="h-16 w-16 text-purple-600 mb-6" />
-                <h3 className="text-2xl font-semibold mb-4 text-gray-900">Customise</h3>
-                <p className="text-gray-600">Design unique subtitles with customisable colours, animations, and styling effects.</p>
-              </div>
-              <div className="flex flex-col items-center text-center bg-gradient-to-b from-green-50 to-white rounded-lg p-8 shadow-sm">
-                <Globe className="h-16 w-16 text-green-600 mb-6" />
-                <h3 className="text-2xl font-semibold mb-4 text-gray-900">Multilingual</h3>
-                <p className="text-gray-600">Support for transcription in 50+ languages, with optional subtitle translation into English.</p>
-              </div>
-            </div>
-          </div>
-        </section>
         <section id="how-it-works" className="w-full py-20 md:py-32 bg-gray-50">
           <div className="container mx-auto px-6 lg:px-10 max-w-6xl">
             <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl text-center mb-16 text-gray-900">
@@ -159,14 +157,14 @@ export default function Component() {
                 <div className="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-3xl mb-6">
                   1
                 </div>
-                <h3 className="text-2xl font-semibold mb-4 text-gray-900">Select a Model</h3>
+                <h3 className="text-2xl font-semibold mb-4 text-gray-900">Model Selection</h3>
                 <p className="text-gray-600 mb-6">Choose from a variety of AI transcription models, balancing speed and accuracy.</p>
                 <Image
-                  src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
-                  alt="Import Video"
+                  src="/auto-subs/assets/models.png"
+                  alt="Choose a model"
                   width={300}
                   height={200}
-                  className="rounded-lg shadow-md"
+                  className="w-full object-cover overflow-hidden rounded-lg shadow-md"
                 />
               </div>
               <div className="flex flex-col items-center text-center">
@@ -174,13 +172,13 @@ export default function Component() {
                   2
                 </div>
                 <h3 className="text-2xl font-semibold mb-4 text-gray-900">AI Processing</h3>
-                <p className="text-gray-600 mb-6">Generates accurate subtitles in just minutes and adds them to the editing timeline.</p>
+                <p className="text-gray-600 mb-6">Quickly generates accurate subtitles and identifies the different speakers.</p>
                 <Image
-                  src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
-                  alt="AI Processing"
-                  width={300}
-                  height={200}
-                  className="rounded-lg shadow-md"
+                  src="/auto-subs/assets/diarize.png"
+                  alt="AutoSubs Video"
+                  width={100}
+                  height={50}
+                  className="w-full object-cover overflow-hidden rounded-lg shadow-md"
                 />
               </div>
               <div className="flex flex-col items-center text-center">
@@ -190,16 +188,45 @@ export default function Component() {
                 <h3 className="text-2xl font-semibold mb-4 text-gray-900">Edit and Export</h3>
                 <p className="text-gray-600 mb-6">Easily make edits and export your video with professional-quality subtitles.</p>
                 <Image
-                  src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
-                  alt="Edit and Export"
-                  width={300}
-                  height={200}
-                  className="rounded-lg shadow-md"
+                  src="/auto-subs/assets/example.gif"
+                  alt="AutoSubs Video"
+                  width={100}
+                  height={50}
+                  className="w-full object-cover overflow-hidden rounded-lg shadow-md"
                 />
               </div>
             </div>
           </div>
         </section>
+        <section id="features" className="w-full py-20 md:py-32 bg-white">
+          <div className="container mx-auto px-6 lg:px-10 max-w-6xl">
+            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl text-center mb-16 text-gray-900">
+              Key Features
+            </h2>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-12">
+              <div className="flex flex-col items-center text-center bg-gradient-to-b from-blue-50 to-white rounded-lg p-8 shadow-sm">
+                <Zap className="h-16 w-16 text-blue-600 mb-6" />
+                <h3 className="text-2xl font-semibold mb-4 text-gray-900">Fast Generate</h3>
+                <p className="text-gray-600">Quickly generate accurate subtitles in minutes.</p>
+              </div>
+              <div className="flex flex-col items-center text-center bg-gradient-to-b from-purple-50 to-white rounded-lg p-8 shadow-sm">
+                <Paintbrush className="h-16 w-16 text-purple-600 mb-6" />
+                <h3 className="text-2xl font-semibold mb-4 text-gray-900">Customise</h3>
+                <p className="text-gray-600">Create unique subtitles with custom colours and effects.</p>
+              </div>
+              <div className="flex flex-col items-center text-center bg-gradient-to-b from-red-50 to-white rounded-lg p-8 shadow-sm">
+                <Speech className="h-16 w-16 text-red-600 mb-6" />
+                <h3 className="text-2xl font-semibold mb-4 text-gray-900">Diarize Audio</h3>
+                <p className="text-gray-600">Differentiate speakers and style subtitles uniquely.</p>
+              </div>
+              <div className="flex flex-col items-center text-center bg-gradient-to-b from-green-50 to-white rounded-lg p-8 shadow-sm">
+                <Globe className="h-16 w-16 text-green-600 mb-6" />
+                <h3 className="text-2xl font-semibold mb-4 text-gray-900">Multilingual</h3>
+                <p className="text-gray-600">Transcribe in 50+ languages and translate easily.</p>
+              </div>
+            </div>
+          </div>
+        </section>
         <section id="support" className="w-full py-20 md:py-32 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
           <div className="container mx-auto px-6 lg:px-10 max-w-6xl">
             <div className="flex flex-col items-center space-y-8 text-center">
@@ -212,10 +239,20 @@ export default function Component() {
                 </p>
               </div>
               <div className="flex flex-col sm:flex-row gap-6 mt-8">
+                <div className="flex flex-col items-center bg-white rounded-lg px-10 py-10 shadow-sm text-gray-900">
+                  <Star className="h-16 w-16 text-yellow-400 mb-6" />
+                  <h3 className="text-2xl font-semibold mb-4 text-gray-900">Star on GitHub</h3>
+                  <p className="text-gray-600 mb-6">Can't donate? Give us a star on GitHub to help others discover AutoSubs.</p>
+                  <a href="https://www.buymeacoffee.com/tmoroney">
+                    <Button className="bg-yellow-500 text-white hover:bg-yellow-600 font-semibold px-8 py-6 text-lg btn-hover-effect">
+                      Give a Star
+                    </Button>
+                  </a>
+                </div>
                 <div className="flex flex-col items-center bg-white rounded-lg px-10 py-10 shadow-sm text-gray-900">
                   <Heart className="h-16 w-16 text-red-500 mb-6" />
-                  <h3 className="text-2xl font-semibold mb-4 text-gray-900">Make a Donation</h3>
-                  <p className="text-gray-600 mb-6">Help us improve AutoSubs and develop new features.</p>
+                  <h3 className="text-2xl font-semibold mb-4 text-gray-900">Support Development</h3>
+                  <p className="text-gray-600 mb-6">Your donation helps me dedicate more time to improving AutoSubs and adding exciting new features.</p>
                   <a href="https://www.buymeacoffee.com/tmoroney">
                     <Button className="bg-red-500 text-white hover:bg-red-600 font-semibold px-8 py-6 text-lg btn-hover-effect">
                       Donate Now
@@ -224,22 +261,12 @@ export default function Component() {
                 </div>
                 <div className="flex flex-col items-center bg-white rounded-lg px-10 py-10 shadow-sm text-gray-900">
                   <Type className="h-16 w-16 text-purple-600 mb-6" />
-                  <h3 className="text-2xl font-semibold mb-4 text-gray-900">Get Subtitle Templates</h3>
-                  <p className="text-gray-600 mb-6">Purchase our subtitle template pack with 20+ designs.</p>
+                  <h3 className="text-2xl font-semibold mb-4 text-gray-900">Subtitle Templates</h3>
+                  <p className="text-gray-600 mb-6">Purchase the supporter pack with 20+ subtitle templates and animations.</p>
                   <Button className="bg-purple-600 text-white hover:bg-purple-700 font-semibold px-8 py-6 text-lg btn-hover-effect">
-                    Buy Templates ($20)
+                    Coming Soon...
                   </Button>
                 </div>
-                <div className="flex flex-col items-center bg-white rounded-lg px-10 py-10 shadow-sm text-gray-900">
-                  <Star className="h-16 w-16 text-yellow-400 mb-6" />
-                  <h3 className="text-2xl font-semibold mb-4 text-gray-900">Star on GitHub</h3>
-                  <p className="text-gray-600 mb-6">Support AutoSubs by giving the repository a star on GitHub.</p>
-                  <a href="https://www.buymeacoffee.com/tmoroney">
-                    <Button className="bg-yellow-500 text-white hover:bg-yellow-600 font-semibold px-8 py-6 text-lg btn-hover-effect">
-                      Give a Star
-                    </Button>
-                  </a>
-                </div>
               </div>
             </div>
           </div>
@@ -362,6 +389,6 @@ export default function Component() {
           </div>
         </div>
       </footer>
-    </div>
+    </div >
   )
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ed91ad2..54239e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1533,9 +1533,10 @@
       "dev": true
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3543,15 +3544,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
diff --git a/public/assets/AutoSubs.png b/public/assets/AutoSubs.png
new file mode 100644
index 0000000..f96d611
Binary files /dev/null and b/public/assets/AutoSubs.png differ
diff --git a/public/assets/diarize.png b/public/assets/diarize.png
new file mode 100644
index 0000000..f29bf17
Binary files /dev/null and b/public/assets/diarize.png differ
diff --git a/public/assets/example.gif b/public/assets/example.gif
new file mode 100644
index 0000000..33c6141
Binary files /dev/null and b/public/assets/example.gif differ
diff --git a/public/assets/logo.png b/public/assets/logo.png
new file mode 100644
index 0000000..62ccf1f
Binary files /dev/null and b/public/assets/logo.png differ
diff --git a/public/assets/model-selection.png b/public/assets/model-selection.png
new file mode 100644
index 0000000..ab76155
Binary files /dev/null and b/public/assets/model-selection.png differ
diff --git a/public/assets/models.png b/public/assets/models.png
new file mode 100644
index 0000000..b1d04a6
Binary files /dev/null and b/public/assets/models.png differ